Added Notifications

2026-05-16 23:48:18 +10:00
parent 69d72e0912
commit 1d5b9f340f
61 changed files with 4204 additions and 182 deletions
@@ -0,0 +1,90 @@
+<script setup lang="ts" generic="T">
+defineProps<{
+    rows: T[]
+    rowKey: (row: T) => string | number
+    hasItems: (row: T) => boolean
+    labelWidth?: string
+}>()
+</script>
+
+<template>
+    <div class="badge-table">
+        <div
+            v-for="row in rows"
+            :key="rowKey(row)"
+            class="badge-row"
+        >
+            <!-- Label column: consumer provides content -->
+            <div class="badge-label" :style="labelWidth ? `width: ${labelWidth}` : ''">
+                <slot name="label" :row="row" />
+            </div>
+
+            <!-- Scrollable badge strip -->
+            <div class="badge-scroll-container">
+                <div v-if="hasItems(row)" class="badge-strip">
+                    <slot name="items" :row="row" />
+                </div>
+                <span v-else class="badge-empty">—</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.badge-table {
+    width: 100%;
+    border: 1px solid var(--table-border);
+    border-bottom: none;
+    container-type: inline-size;
+}
+
+
+
+.badge-row {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--table-border);
+    min-height: 2.5em;
+}
+
+.badge-label {
+    flex: 0 0 auto;
+    width: 15em;
+    padding: 0.5em;
+    border-right: 1px solid var(--table-border);
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    font-size:0.9rem;
+}
+
+@container (max-width: 480px) {
+    .badge-label {
+        font-size: 0.75rem;
+        width: 9em;
+    }
+}
+
+.badge-scroll-container {
+    flex: 1 1 0;
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    -webkit-overflow-scrolling: touch;
+    display: flex;
+    align-items: center;
+}
+
+.badge-strip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25em;
+    padding: 0.5em;
+    white-space: nowrap;
+}
+
+.badge-empty {
+    padding: 0.5em;
+    color: var(--muted);
+}
+</style>