nuxt-ui-basekit 0.1.0

package/app/components/BaseKitPending.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+/**
+ * Ladezustand für eine Seite oder einen Abschnitt.
+ *
+ * Die Admin-Seiten holen ihre Daten in `onMounted` nach. Ohne Zwischenschritt
+ * steht das Formular sofort da — mit leeren Feldern, die sich einen Wimpernschlag
+ * später von selbst füllen. Wer schnell tippt, schreibt in ein Feld, das gleich
+ * überschrieben wird; wer langsam liest, hält den Datensatz für leer.
+ *
+ * Deshalb: erst ein Kreisel, dann der Inhalt. Der Kreisel sagt „gleich", das
+ * leere Formular sagt „nichts da" — und das eine ist wahr, das andere nicht.
+ *
+ * Zwei Wege, beide gültig:
+ *
+ *   <BaseKitPending :pending="pending">
+ *     <UForm …>   <!-- erscheint erst, wenn die Daten stehen -->
+ *   </BaseKitPending>
+ *
+ *   <BaseKitPending v-if="pending" />
+ *
+ * `label` nur setzen, wo der Vorgang länger dauert und einen Namen hat („Suche
+ * läuft"). Bei einem gewöhnlichen Formular ist der Kreisel allein ehrlicher als
+ * ein Wort, das niemand liest.
+ */
+withDefaults(defineProps<{
+  /** Solange wahr, steht der Kreisel statt des Inhalts. */
+  pending?: boolean
+  /** Optionale Beschriftung unter dem Kreisel. */
+  label?: string
+  /**
+   * Höhe des Bereichs. `page` für eine ganze Seite, `inline` für einen
+   * Abschnitt darin — sonst springt das Layout, wenn der Inhalt erscheint.
+   */
+  size?: 'page' | 'inline'
+}>(), {
+  pending: true,
+  label: undefined,
+  size: 'page',
+})
+</script>
+
+<template>
+  <div
+    v-if="pending"
+    class="flex flex-col items-center justify-center gap-3 text-muted"
+    :class="size === 'page' ? 'min-h-64 py-12' : 'min-h-24 py-6'"
+    role="status"
+    aria-live="polite"
+  >
+    <UIcon name="i-lucide-loader-circle" class="size-6 animate-spin" />
+    <span v-if="label" class="text-sm">{{ label }}</span>
+  </div>
+  <slot v-else />
+</template>

package/app/components/BaseKitRecordPicker.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useBaseKitLabels } from '../composables/useBaseKit'
+
+/**
+ * Auswahl eines Datensatzes über (potenziell mehrere) Modelle — die Auswahl
+ * läuft in einem Modal, das per „Auswählen" / „Ändern" aufgeht. Im Modal ist
+ * die Liste nach Text UND Typ filterbar.
+ *
+ * - **Nichts gewählt** → Button „Auswählen".
+ * - **Gewählt** → Titel der Auswahl (Link zum Bearbeiten des Inhalts) + Typ-
+ *   Badge + Button „Ändern".
+ *
+ * Modell-agnostisch — die `items` liefert der Aufrufer. `v-model` = `value`
+ * der Option (oder `null`).
+ */
+export interface BaseKitRecordOption {
+  value: number
+  label: string
+  /** Typ-Badge (bereits übersetzt). */
+  type?: string
+  /** Zusatz rechts in der Liste (z. B. Slug). */
+  hint?: string
+  /** Interner Link zum Bearbeiten des Inhalts. */
+  editHref?: string
+}
+
+const props = withDefaults(defineProps<{
+  modelValue?: number | null
+  items: BaseKitRecordOption[]
+  /** Titel des Auswahl-Modals. */
+  title?: string
+}>(), {
+  modelValue: null,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | null]
+}>()
+
+const labels = useBaseKitLabels()
+
+const open = ref(false)
+const search = ref('')
+const typeFilter = ref('')
+
+const selected = computed(() => props.items.find(item => item.value === props.modelValue) ?? null)
+
+const types = computed(() => [...new Set(props.items.map(item => item.type).filter((x): x is string => !!x))])
+const showTypeFilter = computed(() => types.value.length > 1)
+
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return props.items.filter((item) => {
+    if (typeFilter.value && item.type !== typeFilter.value) return false
+    if (!q) return true
+    return item.label.toLowerCase().includes(q) || (item.hint?.toLowerCase().includes(q) ?? false)
+  })
+})
+
+function openModal(): void {
+  search.value = ''
+  typeFilter.value = ''
+  open.value = true
+}
+
+function choose(item: BaseKitRecordOption): void {
+  emit('update:modelValue', item.value)
+  open.value = false
+}
+</script>
+
+<template>
+  <div>
+    <!-- Gewählt: Titel (Bearbeiten-Link) + Typ-Badge + Ändern -->
+    <div v-if="selected" class="flex items-center gap-2">
+      <NuxtLink
+        v-if="selected.editHref"
+        :to="selected.editHref"
+        class="truncate font-medium text-primary-700 hover:underline dark:text-primary-300"
+        :title="labels.edit"
+      >
+        {{ selected.label }}
+      </NuxtLink>
+      <span v-else class="truncate font-medium">{{ selected.label }}</span>
+
+      <UBadge v-if="selected.type" color="neutral" variant="soft" size="xs">
+        {{ selected.type }}
+      </UBadge>
+
+      <UButton class="ml-auto" size="xs" color="neutral" variant="subtle" @click="openModal">
+        {{ labels.change }}
+      </UButton>
+    </div>
+
+    <!-- Nichts gewählt: Auswählen -->
+    <UButton v-else color="neutral" variant="subtle" icon="i-lucide-list" @click="openModal">
+      {{ labels.select }}
+    </UButton>
+
+    <UModal v-model:open="open" :title="title ?? labels.select">
+      <template #body>
+        <div class="space-y-3">
+          <UInput
+            v-model="search"
+            icon="i-lucide-search"
+            :placeholder="labels.search"
+            autofocus
+            class="w-full"
+          />
+
+          <div v-if="showTypeFilter" class="flex flex-wrap gap-1">
+            <UButton
+              size="xs"
+              color="neutral"
+              :variant="typeFilter === '' ? 'solid' : 'soft'"
+              @click="typeFilter = ''"
+            >
+              {{ labels.all }}
+            </UButton>
+            <UButton
+              v-for="ty in types"
+              :key="ty"
+              size="xs"
+              color="neutral"
+              :variant="typeFilter === ty ? 'solid' : 'soft'"
+              @click="typeFilter = ty"
+            >
+              {{ ty }}
+            </UButton>
+          </div>
+
+          <ul class="max-h-80 divide-y divide-neutral-100 overflow-auto dark:divide-neutral-800">
+            <li v-for="item in filtered" :key="item.value">
+              <button
+                type="button"
+                class="flex w-full items-center gap-2 rounded px-2 py-2 text-left hover:bg-neutral-50 dark:hover:bg-neutral-900"
+                :class="item.value === modelValue ? 'text-primary-700 dark:text-primary-300' : ''"
+                @click="choose(item)"
+              >
+                <span class="truncate">{{ item.label }}</span>
+                <UBadge v-if="item.type" color="neutral" variant="soft" size="xs">{{ item.type }}</UBadge>
+                <span v-if="item.hint" class="ml-auto truncate text-xs font-mono text-dimmed">{{ item.hint }}</span>
+              </button>
+            </li>
+            <li v-if="!filtered.length" class="px-2 py-6 text-center text-sm text-muted">
+              {{ labels.noResults }}
+            </li>
+          </ul>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>

package/app/components/BaseKitSettingRow.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/**
+ * Setting-Row — Pattern für eine einzelne Einstellung in einer Settings-Card.
+ *
+ *  ┌──────────────────────────────────────────────────────┐
+ *  │ Titel                                       [Action] │
+ *  │ Beschreibungstext (optional, mehrzeilig)             │
+ *  └──────────────────────────────────────────────────────┘
+ *
+ * Titel + Action stehen auf einer Zeile (Action rechts, Titel links).
+ * Die Beschreibung steht darunter, linksbündig zum Titel.
+ *
+ * Verwendung:
+ *
+ *   <BaseKitSettingRow title="Benachrichtigungen" description="E-Mails und Push erhalten">
+ *     <USwitch v-model="notifications" />
+ *   </BaseKitSettingRow>
+ *
+ *   <BaseKitSettingRow title="Sprache" description="Wird beim Speichern übernommen">
+ *     <USelect v-model="staged" :items="locales" />
+ *   </BaseKitSettingRow>
+ *
+ * Der `meta`-Slot nimmt eine Zusatzzeile unter der Beschreibung auf — Bestand,
+ * Sperrgrund, Hinweis. Sie steht bewusst getrennt von `description`: das Feld
+ * trägt den einen erklärenden Satz, und eine Zahl ist keine Erklärung.
+ *
+ *   <BaseKitSettingRow title="E-Learning" description="Kurse und Nachweise.">
+ *     <USwitch v-model="on" />
+ *     <template #meta><span>4 Kurse</span></template>
+ *   </BaseKitSettingRow>
+ *
+ * Mehrere Rows in einer Card werden über Tailwind divider getrennt:
+ *
+ *   <UCard>
+ *     <div class="divide-y divide-default">
+ *       <BaseKitSettingRow ... />
+ *       <BaseKitSettingRow ... />
+ *     </div>
+ *   </UCard>
+ */
+defineProps<{
+  title: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <div class="py-3 first:pt-0 last:pb-0">
+    <div class="flex items-start justify-between gap-4">
+      <div class="min-w-0 flex-1">
+        <h3 class="text-sm font-medium">
+          {{ title }}
+        </h3>
+        <p v-if="description" class="mt-1 text-xs text-muted">
+          {{ description }}
+        </p>
+        <div v-if="$slots.meta" class="mt-1.5 flex flex-wrap items-center gap-2 text-xs">
+          <slot name="meta" />
+        </div>
+      </div>
+      <div class="shrink-0">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/BaseKitStatTile.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+/**
+ * Eine Zahl mit Beschriftung — die richtige Form für einen einzelnen Wert.
+ *
+ * Ein Balkendiagramm mit genau einem Balken sagt nicht mehr als die Zahl
+ * selbst und kostet die vierfache Fläche. Deshalb sind Bestand und
+ * Handlungsliste Kacheln und keine Diagramme.
+ *
+ * `tone` färbt nur, wenn die Zahl über null liegt: „0 offene Vorgänge" ist
+ * keine Warnung, sondern der Normalzustand.
+ */
+import { computed } from 'vue'
+import { useChartFormat } from '../composables/useChartPalette'
+
+const props = withDefaults(defineProps<{
+  label: string
+  value: number
+  hint?: string
+  href?: string
+  icon?: string
+  tone?: 'alert' | 'info' | 'neutral'
+}>(), {
+  hint: undefined,
+  href: undefined,
+  icon: undefined,
+  tone: 'neutral',
+})
+
+const { number } = useChartFormat()
+
+const valueClass = computed(() => {
+  if (props.value === 0 || props.tone === 'neutral') return 'text-highlighted'
+  return props.tone === 'alert' ? 'text-error' : 'text-highlighted'
+})
+
+/** Der Punkt neben der Zahl trägt dieselbe Aussage wie die Farbe — die Farbe
+ *  allein wäre für eine Rot-Grün-Schwäche keine. */
+const flagged = computed(() => props.value > 0 && props.tone === 'alert')
+</script>
+
+<template>
+  <component
+    :is="props.href ? 'NuxtLink' : 'div'"
+    :to="props.href"
+    class="block rounded-lg border border-default bg-default p-4 transition-colors"
+    :class="props.href ? 'hover:bg-elevated/60' : ''"
+  >
+    <div class="flex items-center gap-2">
+      <UIcon v-if="props.icon" :name="props.icon" class="size-4 shrink-0 text-dimmed" />
+      <p class="truncate text-xs font-medium text-muted" :title="props.label">
+        {{ props.label }}
+      </p>
+    </div>
+
+    <p class="mt-2 flex items-center gap-1.5 text-2xl font-semibold" :class="valueClass">
+      <UIcon v-if="flagged" name="i-lucide-alert-triangle" class="size-4 shrink-0" />
+      {{ number(props.value) }}
+    </p>
+
+    <p v-if="props.hint" class="mt-1 text-xs text-dimmed">
+      {{ props.hint }}
+    </p>
+  </component>
+</template>

package/app/components/BaseKitTabs.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from '#imports'
+
+/**
+ * Tab-Gruppierung — Pattern, um auf einer Seite mehrere Bereiche (z.B.
+ * Einstellungs-Gruppen) zu gliedern, gerade bei vielen Feldern.
+ *
+ * Generisch: pro Tab ein benannter Slot (= dessen `key`). Aktiver Tab optional
+ * über `v-model` steuerbar, sonst der erste.
+ *
+ *   <BaseKitTabs :items="[
+ *     { key: 'general', label: 'Allgemein', icon: 'i-lucide-settings' },
+ *     { key: 'access',  label: 'Zugriff',   icon: 'i-lucide-lock' },
+ *   ]">
+ *     <template #general> … </template>
+ *     <template #access>  … </template>
+ *   </BaseKitTabs>
+ *
+ * Deep-Linking: mit `hash-nav` ist der aktive Tab über den URL-Hash adressierbar
+ * (`…/seite#access`). Beim Laden gewinnt ein passender Hash; ein Tab-Wechsel
+ * schreibt den Hash via `router.replace` (kein History-Spam). Bei mehreren
+ * Tab-Gruppen auf einer Seite nur EINE mit `hash-nav` betreiben.
+ *
+ * Der Hash greift bewusst erst `onMounted`: der Server sieht ihn gar nicht
+ * (Browser schicken ihn nicht mit), und ein davon abweichender erster Render
+ * im Client zerlegt die Hydration — dann stand die Markierung auf dem einen
+ * Tab und der Inhalt kam vom anderen. Aus demselben Grund läuft er über
+ * `select()`, damit ein gebundenes `v-model` den Tab aus dem Hash mitbekommt.
+ *
+ * A11y: tablist/tab/tabpanel-Rollen, Pfeiltasten links/rechts wechseln.
+ *
+ * Layout-Konvention: die Tab-Leiste NICHT in eine `UCard` wrappen — Tabs +
+ * Inhalt liegen direkt auf der Seite. Feinere Struktur je Tab-Inhalt (Gruppen,
+ * Fieldset, einzelne Cards) nach Bedarf INNERHALB des jeweiligen Slots.
+ */
+const props = withDefaults(defineProps<{
+  /** Tab-Definitionen (Reihenfolge = Anzeigereihenfolge). */
+  items: Array<{ key: string, label: string, icon?: string }>
+  /** Aktiver Tab-Key (v-model). Ohne Bindung wird der erste Tab aktiv. */
+  modelValue?: string
+  /** Aktiven Tab über den URL-Hash adressierbar machen (`#<key>`). */
+  hashNav?: boolean
+}>(), {
+  modelValue: undefined,
+  hashNav: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const route = useRoute()
+const router = useRouter()
+
+/** Gültiger Tab-Key aus dem aktuellen URL-Hash, sonst null. */
+function keyFromHash(): string | null {
+  if (!props.hashNav) return null
+  const key = String(route.hash ?? '').replace(/^#/, '')
+  return props.items.some(i => i.key === key) ? key : null
+}
+
+const active = ref<string>(props.modelValue ?? props.items[0]?.key ?? '')
+
+/** Hat der Nutzer selbst gewählt? Dann gewinnt seine Wahl über den Hash. */
+const picked = ref(false)
+
+// Hash erst im Client anwenden — siehe Kommentar oben.
+onMounted(() => applyHash())
+
+// v-model rein: Auswahl von außen übernehmen.
+watch(() => props.modelValue, (next) => {
+  if (next !== undefined && next !== active.value) active.value = next
+})
+
+// Hash ändert sich (Direktlink, Zurück/Vorwärts) → passenden Tab aktivieren.
+watch(() => route.hash, () => {
+  const key = keyFromHash()
+  if (key !== null && key !== active.value) active.value = key
+})
+
+// Items wechseln. Zwei Fälle: der Tab aus dem Hash taucht erst jetzt auf
+// (rechte-abhängige Tabs kommen mit dem Bootstrap nach) — dann übernehmen,
+// solange der Nutzer nicht selbst gewählt hat. Sonst: fällt der aktive Tab
+// weg, zurück auf den ersten.
+watch(() => props.items, (items) => {
+  if (!picked.value && applyHash()) return
+  if (!items.some(i => i.key === active.value)) active.value = items[0]?.key ?? ''
+})
+
+/**
+ * Tab aus dem Hash übernehmen, falls er zu einem Item passt und nicht schon
+ * aktiv ist. Zählt nicht als Nutzer-Wahl. Liefert `true`, wenn gewechselt
+ * wurde.
+ */
+function applyHash(): boolean {
+  const key = keyFromHash()
+  if (key === null || key === active.value) return false
+  active.value = key
+  emit('update:modelValue', key)
+  return true
+}
+
+function select(key: string): void {
+  picked.value = true
+  active.value = key
+  emit('update:modelValue', key)
+
+  if (props.hashNav && String(route.hash ?? '').replace(/^#/, '') !== key) {
+    router.replace({ hash: `#${key}` })
+  }
+}
+
+const activeIndex = computed(() => props.items.findIndex(i => i.key === active.value))
+
+function onKey(e: KeyboardEvent): void {
+  if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return
+  e.preventDefault()
+  const len = props.items.length
+  if (len === 0) return
+  const dir = e.key === 'ArrowRight' ? 1 : -1
+  const next = (activeIndex.value + dir + len) % len
+  select(props.items[next]!.key)
+}
+</script>
+
+<template>
+  <div class="basekit-tabs">
+    <div
+      role="tablist"
+      class="flex flex-wrap gap-1 border-b border-neutral-200 dark:border-neutral-800"
+      @keydown="onKey"
+    >
+      <button
+        v-for="item in items"
+        :id="`basekit-tab-${item.key}`"
+        :key="item.key"
+        type="button"
+        role="tab"
+        :aria-selected="item.key === active"
+        :tabindex="item.key === active ? 0 : -1"
+        class="-mb-px inline-flex items-center gap-1.5 border-b-2 px-3 py-2 text-sm font-medium transition-colors"
+        :class="item.key === active
+          ? 'border-primary-500 text-primary-700 dark:text-primary-300'
+          : 'border-transparent text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200'"
+        @click="select(item.key)"
+      >
+        <UIcon v-if="item.icon" :name="item.icon" class="size-4" />
+        {{ item.label }}
+      </button>
+    </div>
+
+    <div
+      role="tabpanel"
+      :aria-labelledby="`basekit-tab-${active}`"
+      class="pt-4"
+    >
+      <slot :name="active" />
+    </div>
+  </div>
+</template>

package/app/components/BaseKitViewLink.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+/**
+ * Weg vom Bearbeiten-Formular zur Ansicht derselben Sache.
+ *
+ * Die Gegenrichtung gab es längst: In der Ansicht stehen die Kontext-Aktionen
+ * („Bearbeiten", „Inhalt pflegen"). Der Rückweg fehlte — wer eine Rubrik
+ * bearbeitet hatte, kam nur über den Umweg Übersicht → Frontend → Rubrik
+ * dorthin, um das Ergebnis zu sehen.
+ *
+ * Steht neben dem Rücksprung im Seitenkopf, an derselben Stelle wie dort:
+ * Erst die Ansicht, dann der Rücksprung zur Liste — die Reihenfolge folgt der
+ * Häufigkeit, mit der man beides braucht.
+ *
+ * **Nur zeigen, wenn es die Ansicht gibt.** Ein neu angelegter Datensatz hat
+ * noch keine, und ein Link ins Leere ist schlechter als kein Link. Deshalb
+ * gehört das `v-if` an die Aufrufstelle, wo bekannt ist, ob gespeichert wurde.
+ */
+import { computed } from 'vue'
+import { useBaseKitLabels } from '../composables/useBaseKit'
+
+const props = withDefaults(defineProps<{
+  to: string
+  /**
+   * Öffnet die Ansicht in einem neuen Reiter. Voreingestellt, weil man beim
+   * Bearbeiten meist nachsehen und weiterarbeiten will — nicht wechseln und
+   * die ungespeicherten Änderungen verlieren.
+   */
+  newTab?: boolean
+  label?: string
+}>(), {
+  newTab: true,
+  label: undefined,
+})
+
+const labels = useBaseKitLabels()
+
+const text = computed(() => props.label ?? labels.value.view)
+</script>
+
+<template>
+  <UButton
+    :to="props.to"
+    :target="props.newTab ? '_blank' : undefined"
+    :rel="props.newTab ? 'noopener' : undefined"
+    icon="i-lucide-external-link"
+    size="sm"
+    color="neutral"
+    variant="ghost"
+    class="shrink-0"
+  >
+    {{ text }}
+  </UButton>
+</template>

package/app/components/charts/BaseKitChartBars.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+/**
+ * Waagerechte Balken für nominale Kategorien — Rollen, Typen, Herkünfte.
+ *
+ * Waagerecht, weil die Beschriftung aus Namen besteht und Namen unter einer
+ * senkrechten Säule schräg gestellt werden müssten. Alle Balken tragen
+ * **dieselbe** Farbe: die Kategorien haben keine eigene Ordnung, und ein
+ * Farbverlauf nach Größe würde die Länge ein zweites Mal erzählen, statt eine
+ * neue Auskunft zu geben.
+ */
+import { computed, ref } from 'vue'
+import { baseKitChartColor, useChartFormat } from '../../composables/useChartPalette'
+
+interface BarItem {
+  key: string | number
+  label: string
+  value: number
+}
+
+const props = withDefaults(defineProps<{
+  items: BarItem[]
+  /** Sichtbare Zeilen; der Rest wandert in „Weitere". */
+  limit?: number
+  moreLabel?: string
+  emptyLabel?: string
+}>(), {
+  limit: 6,
+  moreLabel: undefined,
+  emptyLabel: undefined,
+})
+
+const { number } = useChartFormat()
+const active = ref<string | number | null>(null)
+
+const rows = computed<BarItem[]>(() => {
+  const sorted = [...props.items].sort((a, b) => b.value - a.value)
+  if (!props.moreLabel || sorted.length <= props.limit) return sorted
+
+  const head = sorted.slice(0, props.limit)
+  const tail = sorted.slice(props.limit)
+  return [...head, {
+    key: '__more__',
+    label: props.moreLabel,
+    value: tail.reduce((sum, item) => sum + item.value, 0),
+  }]
+})
+
+const max = computed(() => Math.max(1, ...rows.value.map(row => row.value)))
+const color = baseKitChartColor(0)
+</script>
+
+<template>
+  <div>
+    <p v-if="!rows.length && props.emptyLabel" class="text-sm text-muted">
+      {{ props.emptyLabel }}
+    </p>
+
+    <ul v-else class="space-y-2.5">
+      <li
+        v-for="row in rows"
+        :key="row.key"
+        class="grid grid-cols-[minmax(0,7rem)_1fr_auto] items-center gap-3"
+        @pointerenter="active = row.key"
+        @pointerleave="active = null"
+      >
+        <span class="truncate text-sm text-muted" :title="row.label">{{ row.label }}</span>
+
+        <!-- Die Spur ist die Fläche, der Balken die Aussage; deshalb trägt die
+             Spur nur eine Andeutung und keine zweite Farbe. -->
+        <span class="h-2.5 w-full rounded-full bg-elevated">
+          <span
+            class="block h-2.5 rounded-full transition-opacity"
+            :style="{
+              width: `${Math.max(row.value > 0 ? 2 : 0, (row.value / max) * 100)}%`,
+              backgroundColor: color,
+              opacity: active === null || active === row.key ? 1 : 0.55,
+            }"
+          />
+        </span>
+
+        <span class="w-10 text-right text-sm font-medium tabular-nums text-highlighted">
+          {{ number(row.value) }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>