viur-ui 0.0.1

package/src/components/Browser/ViurBrowser.vue

@@ -0,0 +1,271 @@
+<template>
+  <Browser
+    ref="browserEl"
+    v-model:location="location"
+    v-model:selected-keys="selectedKeys"
+    :root-nodes="rootNodeList"
+    :rows="rows"
+    :columns="effectiveColumns"
+    row-key="key"
+    :row-kind="rowKind"
+    :load-node-children="loadNodeChildren"
+    :order-field="orderField"
+    :loading="tree.isFetching.value"
+    :uploads="uploads"
+    :label="module"
+    :has-more="tree.hasMore.value"
+    :table-props="mergedTableProps"
+    @open="$emit('open', $event)"
+    @navigate="onNavigate"
+    @move="onMove"
+    @reorder="onReorder"
+    @upload="onUpload"
+    @load-more="onLoadMore"
+    @page-change="onPageSizeChange"
+  >
+    <template
+      v-for="(_, slotName) in $slots"
+      #[slotName]="scope"
+    >
+      <slot
+        :name="slotName"
+        v-bind="scope"
+      ></slot>
+    </template>
+  </Browser>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue"
+import Browser from "./Browser.vue"
+import { useTreeFetch, useListFetch, useListRootNodesFetch, useMoveFetch, uploadFile } from "../../request/index.js"
+import { columnsFromStructure } from "../DataTable/viurColumns"
+
+// Dünner ViUR-Wrapper um den generischen Browser: `module` rein, fertig.
+// Rootnodes über /listRootNodes, Inhalt des Ortes über useTreeFetch (Nodes +
+// Leaves), Baum-Ebenen über list(skelType=node), Verschieben über /move,
+// Uploads über uploadFile. Gespeichert wird pro Zeile; die Ansicht verschiebt
+// der Browser lokal — nachgeladen wird nur der Ort selbst nach Uploads.
+
+const props = defineProps({
+  module: { type: String, required: true },
+  renderer: { type: String, default: null },
+  /** Fester Rootnode; ohne ihn wird /listRootNodes befragt. */
+  rootNode: { type: [String, Object], default: null },
+  /** Spalten; ohne Angabe aus der viewLeafSkel-Struktur abgeleitet. */
+  columns: { type: Array, default: null },
+  /** Nur diese Bones als Spalten (bei abgeleiteten Spalten). */
+  bones: { type: Array, default: null },
+  /**
+   * Anzeigesprache mehrsprachiger Bones ("de", "en" oder "*" für alle mit der
+   * primären vorn) — bestimmt Anzeige UND lokale Sortierung der Spalten.
+   */
+  language: { type: String, default: null },
+  primaryLanguage: { type: String, default: null },
+  params: { type: Object, default: () => ({}) },
+  orderField: { type: String, default: "sortindex" },
+  uploads: { type: Boolean, default: false },
+  tableProps: { type: Object, default: () => ({}) },
+})
+const emit = defineEmits(["open", "moved", "move-failed", "uploaded", "upload-failed"])
+
+const browserEl = ref(null)
+const location = defineModel("location", { type: [String, Number, null], default: null })
+const selectedKeys = defineModel("selectedKeys", { type: Array, default: () => [] })
+
+const ctx = computed(() => (props.renderer ? { renderer: props.renderer } : {}))
+
+// Seitengröße der Cursor-Leiste = ViUR-Parameter `limit` (core ≥ 3.9; das
+// frühere `amount` gibt es dort nicht mehr). Sie gilt vom ERSTEN Fetch an:
+// eine per tableProps vorgegebene pageSize (oder ein `limit` in den params)
+// bestimmt schon den Initial-Request; sonst 30 (ViUR-Standard). Angezeigt
+// wird immer die tatsächliche Fetch-Größe.
+const limit = ref(Math.min(99, Number(props.params?.limit ?? props.tableProps?.pageSize ?? 30) || 30))
+const baseParams = () => ({ ...props.params, orderby: props.orderField, limit: limit.value })
+// Für jeden Fetch nach dem Setup gilt: IMMER mit dem aktuellen Ort (Rootnode
+// oder navigierter Ordner) als parententry — sonst listet der Server quer
+// über den ganzen Baum.
+const currentParams = () => ({
+  ...baseParams(),
+  ...(location.value != null ? { parententry: location.value } : {}),
+})
+const mergedTableProps = computed(() => ({
+  // Keine Suche im Browser: navigiert wird über Baum und Breadcrumb, gesucht
+  // wird in der Listen-Ansicht des Moduls. Wer sie doch will, setzt
+  // `tableProps.withSearch` (lokal sinnvoll nur, wenn alles geladen ist:
+  // `allLoaded`).
+  ...props.tableProps,
+  pageSize: limit.value,
+}))
+
+// ── Rootnodes ────────────────────────────────────────────────────────────────
+const rootNodesFetch = props.rootNode ? null : useListRootNodesFetch(props.module, "/", {}, ctx.value)
+const rootNodeList = computed(() => {
+  if (props.rootNode) {
+    return typeof props.rootNode === "string"
+      ? [{ key: props.rootNode, name: props.module }]
+      : [{ name: props.module, ...props.rootNode }]
+  }
+  const list = rootNodesFetch?.data?.value
+  return Array.isArray(list) ? list.map((entry) => ({ key: entry.key, name: entry.name ?? entry.key })) : []
+})
+
+// ── Inhalt des aktuellen Ortes (Nodes + Leaves) ───────────────────────────────
+const tree = useTreeFetch(props.module, {
+  params: baseParams(),
+  parententry: location.value ?? undefined,
+  ...(props.renderer ? { renderer: props.renderer } : {}),
+  immediate: false,
+})
+const rows = computed(() => tree.data.value)
+const rowKind = (row) => (row?.skelType === "node" ? "node" : "leaf")
+
+// Ohne expliziten Ort ist die ROOTNODE der Ort: sobald sie bekannt ist, wird
+// sie zum Standard-`parententry` für alles — Listen-Fetch, Drops auf die
+// freie Fläche, Reorder und Uploads. Gefetcht wird nie ohne parententry.
+watch(
+  rootNodeList,
+  (roots) => {
+    if (location.value == null && roots.length) location.value = roots[0].key
+  },
+  { immediate: true }
+)
+
+watch(
+  location,
+  (parent) => {
+    if (parent != null) void tree.open(parent).catch(() => null)
+  },
+  { immediate: true }
+)
+
+// Alles geladen (tree.complete)? Dann laufen Sortierung, Suche und
+// Spaltenfilter nur noch LOKAL auf dem vollständigen Datensatz.
+const allLoaded = computed(() => tree.complete.value)
+
+const effectiveColumns = computed(() => {
+  if (props.columns) return props.columns
+  const structure = tree.structure.value?.leaf ?? tree.structure.value?.node ?? {}
+  const derived = columnsFromStructure(structure, {
+    ...(props.bones ? { bones: props.bones } : {}),
+    ...(props.language ? { language: props.language } : {}),
+    ...(props.primaryLanguage ? { primaryLanguage: props.primaryLanguage } : {}),
+    local: allLoaded.value,
+  })
+  return derived.length ? derived : [{ id: "name", label: "Name" }]
+})
+
+function onNavigate() {
+  selectedKeys.value = []
+}
+
+// ── Cursor-Nachladen: 1 / 5 / 10 Seiten oder alles ───────────────────────────
+async function onLoadMore({ pages }) {
+  if (pages === "all") {
+    await tree.nextAll().catch(() => null)
+    return
+  }
+  let remaining = pages
+  while (remaining-- > 0 && tree.hasMore.value) {
+    await tree.next().catch(() => null)
+  }
+}
+
+/** Neue Seitengröße: aktuellen Ort mit geändertem `limit` neu holen. */
+function onPageSizeChange({ pageSize }) {
+  if (!pageSize || pageSize === limit.value) return
+  limit.value = Math.min(99, pageSize)
+  void tree.filter(currentParams()).catch(() => null)
+}
+
+// ── Verschieben (Drop auf Baum/Ordner) & Umsortieren ─────────────────────────
+async function saveMove(row, parentNode, sortindex, kind = rowKind(row)) {
+  const data = {
+    skelType: kind,
+    key: row.key,
+    parentNode,
+    ...(sortindex !== undefined ? { sortindex } : {}),
+  }
+  const result = useMoveFetch(props.module, "/", data, { ...ctx.value, immediate: false })
+  try {
+    await result.execute()
+    return result.data.value
+  } catch (error) {
+    // Fehler trägt der Aufrufer aus (onMove/onReorder fangen und melden).
+    throw error
+  }
+}
+
+async function onMove({ rows: movedRows, target, keys, source }) {
+  try {
+    for (const row of movedRows) {
+      // Aus dem BAUM kommen BrowserNodes ({ key, name, data }) — das Skel
+      // steckt in `data`, und ein Baum-Eintrag ist immer ein Node. Aus der
+      // LISTE kommen Skels mit skelType.
+      const raw = row?.data ?? row
+      await saveMove(raw, target, undefined, source === "tree" ? "node" : rowKind(raw))
+    }
+    emit("moved", { keys, target })
+    // Ansicht (Liste UND Baum) ist bereits lokal verschoben — kein Reload.
+  } catch (error) {
+    emit("move-failed", { keys, target, error })
+    // Der lokale Stand (Liste UND Baum) ist dann falsch — einmal frisch holen.
+    void refresh().catch(() => null)
+  }
+}
+
+async function onReorder({ row, order, parent, parentChanged, key }) {
+  try {
+    await saveMove(row, parent ?? location.value, order)
+    emit("moved", { keys: [key], target: parent ?? location.value, parentChanged })
+  } catch (error) {
+    emit("move-failed", { keys: [key], target: parent, error })
+    void refresh().catch(() => null)
+  }
+}
+
+// ── Uploads ───────────────────────────────────────────────────────────────────
+async function onUpload({ files, target }) {
+  const results = []
+  for (const file of files) {
+    try {
+      results.push(await uploadFile(file, { target: target ?? undefined, renderer: props.renderer ?? undefined }))
+    } catch (error) {
+      emit("upload-failed", { file, error })
+    }
+  }
+  if (results.length) {
+    emit("uploaded", { files: results, target })
+    // Neue Einträge gibt es nur vom Server — den aktuellen Ort einmal holen.
+    void tree.execute().catch(() => null)
+  }
+}
+
+// ── Baum-Ebenen (nur Nodes) ───────────────────────────────────────────────────
+async function loadNodeChildren(node) {
+  const list = useListFetch(props.module, {
+    // Baum-Ebenen sind Navigation: möglichst vollständig (ViUR-Maximum 99).
+    params: { skelType: "node", parententry: node.key, orderby: props.orderField, limit: 99 },
+    ...(props.renderer ? { renderer: props.renderer } : {}),
+    immediate: false,
+  })
+  await list.execute().catch(() => null)
+  return list.data.value.map((skel) => ({
+    key: skel.key,
+    name: typeof skel.name === "string" ? skel.name : (skel.name?.name ?? skel.key),
+    data: skel,
+  }))
+}
+
+/**
+ * Alles neu laden: die Liste des aktuellen Ortes UND den Navigations-Baum.
+ * Der Baum verwirft seine geladenen Ebenen und klappt die Rootnodes wieder
+ * auf (frisch vom Server); offene Unterebenen laden beim Aufklappen neu.
+ */
+function refresh() {
+  browserEl.value?.tree?.reset?.()
+  return tree.execute()
+}
+
+defineExpose({ browser: browserEl, tree, refresh })
+</script>

package/src/components/Browser/dragSession.ts

@@ -0,0 +1,134 @@
+import { reactive } from "vue"
+import type { InjectionKey } from "vue"
+import type { RowKey } from "../DataTable/types"
+
+// --------------------------------------------------------------------------- //
+// Drag-Session — gemeinsames Ziehen zwischen Panels (Liste ↔ Baum)            //
+// --------------------------------------------------------------------------- //
+//
+// Die DataTable zieht Zeilen mit Zeiger-Ereignissen (kein HTML5-D&D). Damit
+// eine Zeile auch AUSSERHALB der Tabelle fallen gelassen werden kann (auf einen
+// Ordner im Navigations-Baum oder eine Ordnerzeile der Liste), stellt der
+// Browser diese Session per provide() bereit:
+//
+//   • Die QUELLE (DataTable) meldet Beginn/Bewegung/Ende des Zugs.
+//   • Jedes PANEL registriert sich als Container mit einer `targetFor`-Funktion,
+//     die ein DOM-Element unter dem Zeiger in ein Drop-Ziel übersetzt (oder
+//     null, wenn dort nichts fallen gelassen werden kann).
+//   • Beim Loslassen über einem Ziel liefert `drop()` Nutzlast + Ziel an den
+//     Halter der Session (Browser) — die Quelle überspringt dann ihre interne
+//     Verschiebung.
+//
+// Die Session ist bewusst DOM-basiert (elementFromPoint statt Ziel-Rechtecke
+// vorab zu vermessen): Panels scrollen und virtualisieren unabhängig.
+
+export interface DragPayload<R = Record<string, unknown>> {
+  keys: RowKey[]
+  rows: R[]
+  /** Container-Id der Quelle (z. B. "list"). */
+  source: string
+}
+
+export interface DropTarget {
+  /** Container-Id des Panels, in dem das Ziel liegt. */
+  container: string
+  /** Schlüssel des Zielknotens; null = Wurzelebene des Containers. */
+  key: RowKey | null
+  mode: "inside" | "before" | "after"
+}
+
+export interface DragContainer {
+  id: string
+  /** Wurzelelement des Panels — nur Treffer darin zählen. */
+  el: () => HTMLElement | null
+  /**
+   * Element unter dem Zeiger → Drop-Ziel (oder null). `y`/`x` erlauben
+   * Zonen-Entscheidungen (before/inside/after) anhand der Trefferposition.
+   */
+  targetFor: (hit: Element, x: number, y: number) => DropTarget | null
+}
+
+export interface DragSession<R = Record<string, unknown>> {
+  state: {
+    active: boolean
+    payload: DragPayload<R> | null
+    over: DropTarget | null
+  }
+  register(container: DragContainer): () => void
+  start(payload: DragPayload<R>): void
+  /** Hit-Test unter (x, y); `hint` übergeht elementFromPoint (Tests). */
+  update(x: number, y: number, hint?: Element | null): DropTarget | null
+  /** Ziel eingelöst: liefert Nutzlast+Ziel und beendet die Session. */
+  drop(): { payload: DragPayload<R>; target: DropTarget } | null
+  cancel(): void
+}
+
+export const DRAG_SESSION: InjectionKey<DragSession> = Symbol("viur-browser-drag-session")
+
+export function createDragSession<R = Record<string, unknown>>(
+  onDrop?: (payload: DragPayload<R>, target: DropTarget) => void
+): DragSession<R> {
+  const containers = new Map<string, DragContainer>()
+  // `reactive` entpackt generische Typen (R wird zu UnwrapRefSimple<R>), womit
+  // der Zustand nicht mehr auf DragSession<R> passt. Die Nutzlast ist reine
+  // Datenweitergabe — deshalb hier die Form festschreiben.
+  const state = reactive({
+    active: false,
+    payload: null as DragPayload<R> | null,
+    over: null as DropTarget | null,
+  }) as DragSession<R>["state"]
+
+  function register(container: DragContainer): () => void {
+    containers.set(container.id, container)
+    return () => containers.delete(container.id)
+  }
+
+  function start(payload: DragPayload<R>): void {
+    state.active = true
+    state.payload = payload as typeof state.payload
+    state.over = null
+  }
+
+  function update(x: number, y: number, hint?: Element | null): DropTarget | null {
+    if (!state.active) return null
+    const hit = hint !== undefined ? hint : (document.elementFromPoint(x, y) ?? null)
+    if (!hit) {
+      state.over = null
+      return null
+    }
+    for (const container of containers.values()) {
+      const root = container.el()
+      if (!root || !root.contains(hit)) continue
+      state.over = container.targetFor(hit, x, y)
+      return state.over
+    }
+    state.over = null
+    return null
+  }
+
+  function drop(): { payload: DragPayload<R>; target: DropTarget } | null {
+    const payload = state.payload
+    const target = state.over
+    cancel()
+    if (!payload || !target) return null
+    onDrop?.(payload, target)
+    return { payload, target }
+  }
+
+  function cancel(): void {
+    state.active = false
+    state.payload = null
+    state.over = null
+  }
+
+  return { state, register, start, update, drop, cancel }
+}
+
+/** Zonen-Helfer: Position im Element → before / inside / after. */
+export function dropModeFor(hitRect: DOMRect, y: number, insideOnly = false): "inside" | "before" | "after" {
+  if (insideOnly) return "inside"
+  const offset = (y - hitRect.top) / Math.max(1, hitRect.height)
+  if (offset < 0.25) return "before"
+  if (offset > 0.75) return "after"
+  return "inside"
+}

package/src/components/Browser/index.ts

@@ -0,0 +1,14 @@
+// Öffentliche Oberfläche des Browser-Widgets.
+export { default as Browser } from "./Browser.vue"
+export { default as ViurBrowser } from "./ViurBrowser.vue"
+export { default as TreeNav } from "./TreeNav.vue"
+export {
+  createDragSession,
+  dropModeFor,
+  DRAG_SESSION,
+  type DragSession,
+  type DragPayload,
+  type DragContainer,
+  type DropTarget,
+} from "./dragSession"
+export type { BrowserNode, BrowserMovePayload, BrowserUploadPayload } from "./types"

package/src/components/Browser/types.ts

@@ -0,0 +1,30 @@
+import type { RowKey } from "../DataTable/types"
+
+/** Knoten des Navigations-Baums (und Ordner in der Liste). */
+export interface BrowserNode {
+  key: RowKey
+  name: string
+  icon?: string | null
+  /** false = sicher keine Kinder → Pfeil entfällt. */
+  hasChildren?: boolean
+  /** Beliebige Nutzdaten (z. B. das Skel) — der Browser liest sie nicht. */
+  data?: Record<string, unknown>
+}
+
+export interface BrowserMovePayload<R = Record<string, unknown>> {
+  /** Zeilenschlüssel in Anzeige-Reihenfolge. */
+  keys: RowKey[]
+  rows: R[]
+  /** Zielknoten (null = Wurzel des aktuellen Rootnodes). */
+  target: RowKey | null
+  /** "inside" (in einen Ordner) oder before/after (Reihenfolge in der Liste). */
+  mode: "inside" | "before" | "after"
+  /** Quelle des Zugs: Liste oder Baum. */
+  source: "list" | "tree"
+}
+
+export interface BrowserUploadPayload {
+  files: File[]
+  /** Zielknoten (null = aktuelle Ebene ist die Wurzel). */
+  target: RowKey | null
+}

package/src/components/DataTable/ColumnFilterPanel.vue

@@ -0,0 +1,225 @@
+<template>
+  <!-- Inhalt des Filter-Popovers einer Spalte. Welche Steuerelemente erscheinen,
+       entscheidet der filterType; die Werte für set-Filter kommen aus den
+       Facetten (oder aus column.def.filterOptions, z. B. im Server-Modus). -->
+  <div class="vi-dtf wa-stack wa-gap-s">
+    <span class="vi-dtf-title">{{ column.label }}</span>
+
+    <template v-if="state.kind === 'range'">
+      <div class="wa-cluster wa-gap-2xs wa-flex-nowrap">
+        <wa-input
+          class="vi-dtf-input"
+          size="small"
+          appearance="outlined"
+          :type="state.inputType"
+          :placeholder="t('dataTable.filterFrom')"
+          :value="state.from"
+          @input="setRange(0, ($event.target as HTMLInputElement).value)"
+        ></wa-input>
+        <wa-input
+          class="vi-dtf-input"
+          size="small"
+          appearance="outlined"
+          :type="state.inputType"
+          :placeholder="t('dataTable.filterTo')"
+          :value="state.to"
+          @input="setRange(1, ($event.target as HTMLInputElement).value)"
+        ></wa-input>
+      </div>
+    </template>
+
+    <template v-else-if="state.kind === 'set'">
+      <wa-input
+        v-if="state.options.length > 10"
+        class="vi-dtf-search"
+        size="small"
+        appearance="outlined"
+        :placeholder="t('dataTable.searchValues')"
+        :value="state.optionQuery"
+        @input="state.optionQuery = ($event.target as HTMLInputElement).value"
+      >
+        <wa-icon
+          slot="start"
+          name="magnifying-glass"
+        ></wa-icon>
+      </wa-input>
+      <div class="vi-dtf-options wa-stack wa-gap-2xs">
+        <label
+          v-for="option in state.filteredOptions"
+          :key="option.value"
+          class="vi-dtf-option wa-flank wa-flex-nowrap wa-gap-xs"
+        >
+          <input
+            class="vi-dtf-check"
+            type="checkbox"
+            :value="option.value"
+            :checked="state.selected.includes(option.value)"
+            @change="toggleOption(option.value)"
+          />
+          <span class="vi-dtf-option-label wa-split wa-flex-nowrap wa-gap-xs">
+            <span class="wa-ellipsis">{{ option.label ?? option.value }}</span>
+            <span
+              v-if="option.count !== undefined"
+              class="vi-dtf-count"
+            >
+              {{ option.count }}
+            </span>
+          </span>
+        </label>
+        <span
+          v-if="!state.filteredOptions.length"
+          class="vi-dtf-empty"
+        >
+          Keine Werte
+        </span>
+      </div>
+    </template>
+
+    <template v-else>
+      <wa-input
+        class="vi-dtf-input"
+        size="small"
+        appearance="outlined"
+        :placeholder="state.kind === 'equals' ? 'genau …' : 'enthält …'"
+        :value="state.text"
+        @input="emit('update:modelValue', ($event.target as HTMLInputElement).value || undefined)"
+      ></wa-input>
+    </template>
+
+    <div class="wa-cluster wa-gap-2xs">
+      <wa-button
+        class="vi-dtf-clear"
+        size="small"
+        appearance="outlined"
+        @click="clear"
+      >
+        Leeren
+      </wa-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n"
+import { computed, reactive } from "vue"
+import type { ColumnFacets, FilterOption, ResolvedColumn } from "./types"
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  column: ResolvedColumn
+  facets?: ColumnFacets
+  modelValue?: unknown
+}>()
+
+const emit = defineEmits<{ "update:modelValue": [value: unknown] }>()
+
+const state = reactive({
+  optionQuery: "",
+
+  kind: computed((): "text" | "equals" | "range" | "set" => {
+    switch (props.column.filterType) {
+      case "number-range":
+      case "date-range":
+        return "range"
+      case "set":
+      case "includes-any":
+      case "includes-all":
+        return "set"
+      case "equals":
+        return "equals"
+      default:
+        return "text"
+    }
+  }),
+  inputType: computed((): string => (props.column.filterType === "date-range" ? "date" : "number")),
+  text: computed((): string => (props.modelValue === undefined ? "" : String(props.modelValue))),
+  range: computed((): [unknown, unknown] =>
+    Array.isArray(props.modelValue) ? (props.modelValue as [unknown, unknown]) : [undefined, undefined]
+  ),
+  from: computed((): string => valueToText(state.range[0])),
+  to: computed((): string => valueToText(state.range[1])),
+  selected: computed((): string[] =>
+    Array.isArray(props.modelValue) ? (props.modelValue as unknown[]).map((item) => String(item)) : []
+  ),
+  options: computed((): FilterOption[] => {
+    if (props.column.def.filterOptions) return props.column.def.filterOptions
+    return (props.facets?.values ?? []).map((facet) => ({
+      value: facet.value,
+      count: facet.count,
+    }))
+  }),
+  filteredOptions: computed((): FilterOption[] => {
+    const query = state.optionQuery.trim().toLowerCase()
+    if (!query) return state.options
+    return state.options.filter((option) =>
+      String(option.label ?? option.value)
+        .toLowerCase()
+        .includes(query)
+    )
+  }),
+})
+
+function valueToText(value: unknown): string {
+  return value === undefined || value === null ? "" : String(value)
+}
+
+function setRange(index: 0 | 1, raw: string): void {
+  const next: [unknown, unknown] = [...state.range] as [unknown, unknown]
+  next[index] = raw === "" ? undefined : raw
+  emit("update:modelValue", next[0] === undefined && next[1] === undefined ? undefined : next)
+}
+
+function toggleOption(value: string): void {
+  const selected = new Set(state.selected)
+  if (selected.has(value)) selected.delete(value)
+  else selected.add(value)
+  const next = [...selected]
+  emit("update:modelValue", next.length ? next : undefined)
+}
+
+function clear(): void {
+  state.optionQuery = ""
+  emit("update:modelValue", undefined)
+}
+</script>
+
+<style scoped>
+.vi-dtf {
+  min-inline-size: 15rem;
+  max-inline-size: 20rem;
+}
+.vi-dtf-title {
+  font-size: var(--wa-font-size-s);
+  font-weight: 700;
+}
+.vi-dtf-input,
+.vi-dtf-search {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  width: 100%;
+}
+.vi-dtf-options {
+  max-block-size: 14rem;
+  overflow: auto;
+}
+.vi-dtf-option {
+  font-size: var(--wa-font-size-s);
+  cursor: pointer;
+}
+.vi-dtf-option-label {
+  min-inline-size: 0;
+  flex: 1 1 auto;
+}
+.vi-dtf-count {
+  color: var(--wa-color-text-quiet);
+  font-variant-numeric: tabular-nums;
+}
+.vi-dtf-empty,
+.vi-dtf-count {
+  font-size: var(--wa-font-size-xs);
+}
+.vi-dtf-empty {
+  color: var(--wa-color-text-quiet);
+}
+</style>