@hina-ui/vue 1.7.3 → 1.7.5

package/src/components/combobox/ComboboxList.vue

@@ -10,6 +10,9 @@
     ComboboxPortal,
   } from 'reka-ui'
   import { ref } from 'vue'
+  import VirtualChoices from '../virtual-list/VirtualChoices.vue'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
+  import { rekaComboboxStyle } from '../../lib/reka/styles'
   import { useUiLocale } from '../../locale'
   import Card from '../card/Card.vue'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
@@ -19,7 +22,11 @@
 
   defineOptions({ name: 'HnComboboxList' })
 
-  const props = defineProps<{ options: SelectItems<T>; keyboard?: boolean }>()
+  const props = defineProps<{
+    options: SelectItems<T>
+    keyboard?: boolean
+    virtualize?: VirtualizeOptions
+  }>()
 
   const fresh = ref(false)
 
@@ -36,11 +43,40 @@
         data-hn-combobox-content
         :data-hn-fresh="fresh && !props.keyboard ? '' : undefined"
         :class="comboboxContent()"
+        :style="rekaComboboxStyle"
         @vue:mounted="fresh = true"
         @keydown="fresh = false"
         @pointermove="fresh = false"
       >
-        <ScrollArea :class="comboboxList()">
+        <VirtualChoices
+          v-if="props.virtualize"
+          v-slot="{ option, attrs }"
+          :options="props.options"
+          :virtualize="props.virtualize"
+          kind="combobox"
+          :class="comboboxList()"
+        >
+          <ComboboxItem
+            v-bind="attrs"
+            :value="option.value"
+            :disabled="option.disabled"
+            :text-value="option.label"
+            :class="selectItem()"
+          >
+            <span class="min-w-0 flex-1">
+              <slot name="option" :option="option">
+                <span class="block truncate">{{ option.label }}</span>
+                <span v-if="option.description" class="text-muted block truncate text-xs">
+                  {{ option.description }}
+                </span>
+              </slot>
+            </span>
+            <span class="flex size-4 shrink-0 items-center justify-center">
+              <ComboboxItemIndicator><Check /></ComboboxItemIndicator>
+            </span>
+          </ComboboxItem>
+        </VirtualChoices>
+        <ScrollArea v-else :class="comboboxList()">
           <div :class="selectListBody()">
             <template
               v-for="item in props.options"

package/src/components/combobox/combobox.variants.ts

@@ -1,12 +1 @@
-import { tv } from '../../lib/tv'
-
-export const comboboxContent = tv({
-  base: [
-    'hn-anim-pop z-(--hn-z-overlay) flex w-[var(--reka-combobox-trigger-width)] min-w-40 flex-col overflow-hidden shadow-md outline-none',
-    '[&[data-hn-fresh]_[data-highlighted]:not(:hover)]:[--hn-state-hover-opacity:0]',
-  ],
-})
-
-export const comboboxList = tv({
-  base: 'max-h-[min(20rem,var(--reka-combobox-content-available-height))]',
-})
+export * from '../../../../shared/src/variants/combobox'

package/src/components/combobox/composables/useCombobox.ts

@@ -21,6 +21,10 @@ export function useCombobox<T extends SelectOption>(options: ComboboxOptions<T>)
   })
   const label = computed(() => displayValue(model.value))
   const editing = ref(false)
+  const inputValue = computed({
+    get: () => search.value || (editing.value ? '' : label.value),
+    set: value => (search.value = value),
+  })
   const keyboard = ref(false)
   const input = shallowRef<{ $el: HTMLInputElement } | null>(null)
 
@@ -59,5 +63,5 @@ export function useCombobox<T extends SelectOption>(options: ComboboxOptions<T>)
     if (!editing.value) search.value = value
   })
 
-  return { keyboard, input, displayValue, clear, onInput, onHostClick }
+  return { keyboard, input, inputValue, displayValue, clear, onInput, onHostClick }
 }

package/src/components/command-palette/CommandPalette.vue

@@ -9,6 +9,7 @@
     VisuallyHidden,
   } from 'reka-ui'
   import { computed, watch } from 'vue'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useUiLocale } from '../../locale'
   import CommandPalettePanel from './CommandPalettePanel.vue'
   import { useHotkey } from './composables/useHotkey'
@@ -19,6 +20,7 @@
 
   const props = defineProps<{
     items: CommandItems
+    virtualize?: VirtualizeOptions
     placeholder?: string
     label?: string
     hotkey?: string
@@ -61,6 +63,7 @@
     v-model:search="search"
     inline
     :items="props.items"
+    :virtualize="props.virtualize"
     :label="label"
     :placeholder="props.placeholder"
     :ignore-filter="props.ignoreFilter"
@@ -80,6 +83,7 @@
             v-model:search="search"
             auto-focus
             :items="props.items"
+            :virtualize="props.virtualize"
             :label="label"
             :placeholder="props.placeholder"
             :ignore-filter="props.ignoreFilter"

package/src/components/command-palette/CommandPalettePanel.vue

@@ -7,11 +7,13 @@
     ListboxGroupLabel,
     ListboxRoot,
   } from 'reka-ui'
-  import { computed } from 'vue'
+  import { shallowRef } from 'vue'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import Card from '../card/Card.vue'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import VirtualChoices from '../virtual-list/VirtualChoices.vue'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { selectLabel, selectListBody } from '../select/select.variants'
   import CommandPaletteItem from './CommandPaletteItem.vue'
   import {
@@ -22,12 +24,13 @@
     commandList,
   } from './command-palette.variants'
   import type { CommandItem, CommandItems } from './types'
-  import { filterCommands } from './utils/match'
+  import { useCommandItems } from './composables/useCommandItems'
 
   defineOptions({ name: 'HnCommandPalettePanel', inheritAttrs: false })
 
   const props = defineProps<{
     items: CommandItems
+    virtualize?: VirtualizeOptions
     label: string
     placeholder?: string
     ignoreFilter?: boolean
@@ -42,9 +45,8 @@
 
   const t = useUiLocale()
 
-  const sections = computed(() =>
-    filterCommands(props.items, props.ignoreFilter ? '' : search.value),
-  )
+  const input = shallowRef<{ $el: HTMLElement }>()
+  const { sections, options } = useCommandItems(props, () => search.value)
 </script>
 
 <template>
@@ -59,6 +61,7 @@
       <div :class="commandInputRow()">
         <Search aria-hidden="true" />
         <ListboxFilter
+          ref="input"
           v-model="search"
           :auto-focus="props.autoFocus"
           :placeholder="props.placeholder ?? t.command.placeholder"
@@ -66,7 +69,25 @@
           :class="commandInput()"
         />
       </div>
-      <ScrollArea :class="commandList()">
+      <ListboxContent v-if="props.virtualize" as-child :aria-label="props.label">
+        <VirtualChoices
+          :options="options"
+          :virtualize="props.virtualize"
+          :input="input?.$el"
+          kind="listbox"
+          :class="commandList()"
+        >
+          <template #default="{ option, attrs }">
+            <CommandPaletteItem
+              v-bind="attrs"
+              :match="option.match"
+              @select="emit('select', option.match.item)"
+            />
+          </template>
+          <template #empty>{{ t.command.empty }}</template>
+        </VirtualChoices>
+      </ListboxContent>
+      <ScrollArea v-else :class="commandList()">
         <ListboxContent :aria-label="props.label" :class="selectListBody()">
           <template v-for="section in sections" :key="section.key">
             <ListboxGroup v-if="section.label">

package/src/components/command-palette/command-palette.variants.ts

@@ -1,45 +1 @@
-import { tv } from '../../lib/tv'
-
-export const commandWrapper = tv({
-  base: 'pointer-events-none fixed inset-0 z-(--hn-z-overlay) grid items-start justify-items-center p-4 pt-[15dvh] max-sm:pt-4',
-})
-
-export const commandCard = tv({
-  base: 'flex w-full max-w-xl flex-col overflow-hidden outline-none',
-  variants: {
-    inline: {
-      false: 'hn-anim-modal pointer-events-auto shadow-lg',
-    },
-  },
-  defaultVariants: {
-    inline: false,
-  },
-})
-
-export const commandInputRow = tv({
-  base: 'border-line text-muted flex h-12 shrink-0 items-center gap-2.5 border-b px-4 [&>svg]:size-4 [&>svg]:shrink-0',
-})
-
-export const commandInput = tv({
-  base: 'text-fg placeholder:text-faint h-full min-w-0 flex-1 bg-transparent text-sm outline-none',
-})
-
-export const commandList = tv({
-  base: 'max-h-[min(24rem,60dvh)]',
-})
-
-export const commandItemBody = tv({
-  base: 'flex min-w-0 flex-1 flex-col',
-})
-
-export const commandItemMatch = tv({
-  base: 'text-accent-text font-medium',
-})
-
-export const commandItemHint = tv({
-  base: 'ms-auto flex shrink-0 items-center gap-1',
-})
-
-export const commandEmpty = tv({
-  base: 'text-muted px-4 py-8 text-center text-sm',
-})
+export * from '../../../../shared/src/variants/command-palette'

package/src/components/command-palette/composables/useCommandItems.ts

@@ -0,0 +1,27 @@
+import { computed } from 'vue'
+import type { CommandItems } from '../types'
+import { filterCommands } from '../utils/match'
+import type { CommandMatch } from '../utils/match'
+import type { SelectItems, SelectOption } from '../../select/types'
+
+type CommandOption = SelectOption & { match: CommandMatch }
+
+export function useCommandItems(
+  props: { items: CommandItems; ignoreFilter?: boolean },
+  search: () => string,
+) {
+  const sections = computed(() => filterCommands(props.items, props.ignoreFilter ? '' : search()))
+  const options = computed<SelectItems<CommandOption>>(() =>
+    sections.value.flatMap<CommandOption | { label: string; options: CommandOption[] }>(section => {
+      const options = section.matches.map(match => ({
+        value: match.item.id,
+        label: match.item.label,
+        disabled: match.item.disabled,
+        description: match.item.description,
+        match,
+      }))
+      return section.label ? [{ label: section.label, options }] : options
+    }),
+  )
+  return { sections, options }
+}

package/src/components/container/container.variants.ts

@@ -1,18 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const container = tv({
-  base: 'mx-auto w-full px-4 sm:px-6',
-  variants: {
-    size: {
-      sm: 'max-w-3xl',
-      md: 'max-w-5xl',
-      lg: 'max-w-6xl',
-      xl: 'max-w-7xl',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-})
-
-export type ContainerVariants = VariantProps<typeof container>
+export * from '../../../../shared/src/variants/container'

package/src/components/data-list/DataList.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts" generic="T">
+  import { computed, shallowRef } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Empty from '../empty/Empty.vue'
+  import LoadingOverlay from '../loading-overlay/LoadingOverlay.vue'
+  import DataListPagination from './DataListPagination.vue'
+  import DataListLayoutToggle from './DataListLayoutToggle.vue'
+  import DataListContent from './DataListContent.vue'
+  import DataListItem from './DataListItem.vue'
+  import { useDataList } from './composables/useDataList'
+  import { useDataListBody } from './composables/useDataListBody'
+  import {
+    dataList,
+    dataListHeader,
+    dataListBody,
+    dataListStatus,
+    dataListFooter,
+    dataListPager,
+    dataListAnnouncement,
+    dataListLoading,
+  } from './data-list.variants'
+  import type {
+    DataListExpose,
+    DataListItemSlot,
+    DataListLayout,
+    DataListPageChange,
+    DataListPlaceholderSlot,
+    DataListProps,
+    DataListRange,
+    DataListState,
+  } from './types'
+
+  defineOptions({ name: 'HnDataList' })
+  const props = withDefaults(defineProps<DataListProps<T>>(), {
+    gridMin: '14rem',
+    size: 'md',
+    divided: true,
+    minHeight: 160,
+  })
+  const layout = defineModel<DataListLayout>('layout', { default: 'list' })
+  const page = defineModel<number>('page', { default: 1 })
+  const pageSize = defineModel<number>('pageSize', { default: 10 })
+  const emit = defineEmits<{
+    pageChange: [value: DataListPageChange]
+    rangeChange: [value: DataListRange]
+  }>()
+  const slots = defineSlots<{
+    default?(props: DataListItemSlot<T>): unknown
+    media?(props: DataListItemSlot<T>): unknown
+    title?(props: DataListItemSlot<T>): unknown
+    description?(props: DataListItemSlot<T>): unknown
+    meta?(props: DataListItemSlot<T>): unknown
+    actions?(props: DataListItemSlot<T>): unknown
+    placeholder?(props: DataListPlaceholderSlot): unknown
+    header?(props: DataListState<T>): unknown
+    footer?(props: DataListState<T>): unknown
+    pagination?(props: DataListState<T>): unknown
+    empty?(props: DataListState<T>): unknown
+    loading?(props: DataListState<T>): unknown
+  }>()
+  const t = useUiLocale()
+  const { entries, state, itemClass, placeholderCount, showPagination, formatItem } = useDataList(
+    props,
+    page,
+    pageSize,
+    value => emit('pageChange', value),
+    layout,
+  )
+  const { body, style } = useDataListBody(props)
+  const content = shallowRef<DataListExpose>()
+  const viewport = computed(() => content.value?.viewport)
+  defineExpose({
+    viewport,
+    scrollToIndex: (...args: Parameters<DataListExpose['scrollToIndex']>) =>
+      content.value?.scrollToIndex(...args),
+  })
+</script>
+<template>
+  <div
+    data-hn-data-list
+    :data-layout="layout"
+    :aria-busy="props.loading || undefined"
+    :class="cn(dataList(), props.class)"
+  >
+    <div v-if="slots.header || props.layoutToggle" :class="dataListHeader()">
+      <slot name="header" v-bind="state" />
+      <DataListLayoutToggle v-if="props.layoutToggle" v-model="layout" class="ms-auto" />
+    </div>
+    <div ref="body" :class="cn(dataListBody(), props.bodyClass)" :style="style">
+      <span
+        v-if="props.loading && !entries.length && !slots.loading"
+        role="status"
+        :class="dataListAnnouncement()"
+      >
+        {{ t.common.loading }}
+      </span>
+      <DataListContent
+        v-if="entries.length || (props.loading && !slots.loading)"
+        ref="content"
+        :options="props"
+        :entries="entries"
+        :layout="layout"
+        :structured="!slots.default"
+        :placeholder-count="placeholderCount"
+        :item-class="itemClass"
+        @range-change="emit('rangeChange', $event)"
+      >
+        <template #default="entry">
+          <slot v-bind="entry">
+            <DataListItem
+              v-bind="formatItem(entry)"
+              :layout="layout"
+              :media-ratio="props.mediaRatio"
+            >
+              <template v-if="slots.media" #media><slot name="media" v-bind="entry" /></template>
+              <template v-if="slots.title" #title><slot name="title" v-bind="entry" /></template>
+              <template v-if="slots.description" #description>
+                <slot name="description" v-bind="entry" />
+              </template>
+              <template v-if="slots.meta" #meta><slot name="meta" v-bind="entry" /></template>
+              <template v-if="slots.actions" #actions>
+                <slot name="actions" v-bind="entry" />
+              </template>
+            </DataListItem>
+          </slot>
+        </template>
+        <template #placeholder="placeholder">
+          <slot name="placeholder" v-bind="placeholder">
+            <DataListItem
+              :layout="layout"
+              placeholder
+              :title-placeholder="!!(props.itemTitle || slots.title || slots.default)"
+              :description-placeholder="!!(props.itemDescription || slots.description)"
+              :media-ratio="props.mediaRatio"
+              :media="!!slots.media"
+              :meta="!!slots.meta"
+              :actions="!!slots.actions"
+            />
+          </slot>
+        </template>
+      </DataListContent>
+      <div v-else role="status" :class="dataListStatus()">
+        <slot v-if="props.loading" name="loading" v-bind="state" />
+        <slot v-else name="empty" v-bind="state">
+          <Empty :title="props.emptyText ?? t.dataList.empty" :icon="false" size="sm" />
+        </slot>
+      </div>
+      <LoadingOverlay
+        v-if="entries.length"
+        :visible="props.loading"
+        :text="t.common.loading"
+        :min-visible="0"
+        size="sm"
+        :class="dataListLoading()"
+      >
+        <template v-if="slots.loading" #default><slot name="loading" v-bind="state" /></template>
+      </LoadingOverlay>
+    </div>
+    <div
+      v-if="slots.footer || showPagination || (props.pagination && slots.pagination)"
+      :class="dataListFooter()"
+    >
+      <slot name="footer" v-bind="state" />
+      <div v-if="showPagination || (props.pagination && slots.pagination)" :class="dataListPager()">
+        <slot name="pagination" v-bind="state"><DataListPagination :state="state" /></slot>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/data-list/DataListContent.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts" generic="T">
+  import { computed, shallowRef } from 'vue'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import { cn } from '../../lib/cn'
+  import { useDataListWindow } from './composables/useDataListWindow'
+  import {
+    dataListContent,
+    dataListViewport,
+    dataListItem,
+    dataListSpacer,
+  } from './data-list.variants'
+  import type { DataListItemSlot, DataListLayout, DataListProps, DataListRange } from './types'
+  const props = defineProps<{
+    options: DataListProps<T>
+    entries: readonly DataListItemSlot<T>[]
+    layout: DataListLayout
+    structured: boolean
+    placeholderCount: number
+    itemClass: (entry: DataListItemSlot<T>, structured: boolean) => string
+  }>()
+  const emit = defineEmits<{ rangeChange: [range: DataListRange] }>()
+  defineSlots<{
+    default(props: DataListItemSlot<T>): unknown
+    placeholder(props: { index: number; layout: DataListLayout }): unknown
+  }>()
+  const content = shallowRef<HTMLElement>()
+  const area = shallowRef<InstanceType<typeof ScrollArea>>()
+  const bounded = computed(() => !!props.options.virtualize || props.options.height !== undefined)
+  const viewport = computed(() => (bounded.value ? area.value?.viewport : undefined))
+  const initialLoading = computed(() => !!props.options.loading && !props.entries.length)
+  const { rendered, style, before, after, scrollToIndex, updateFocus, focusOut } =
+    useDataListWindow(props, content, viewport, range => emit('rangeChange', range))
+  defineExpose({ viewport, scrollToIndex, content })
+</script>
+<template>
+  <component
+    :is="bounded ? ScrollArea : 'div'"
+    ref="area"
+    v-bind="bounded ? { label: options.label, focusable: true } : {}"
+    :class="bounded ? dataListViewport() : undefined"
+  >
+    <ul
+      ref="content"
+      data-hn-data-list-content
+      role="list"
+      :aria-label="options.label"
+      :aria-hidden="initialLoading || undefined"
+      :inert="options.loading || undefined"
+      :class="
+        cn(
+          dataListContent({ layout, gap: layout === 'grid' ? (options.gridGap ?? 'md') : 'none' }),
+          options.contentClass,
+        )
+      "
+      :style="style"
+      @focusin="updateFocus"
+      @focusout="focusOut"
+    >
+      <template v-if="initialLoading">
+        <li
+          v-for="index in placeholderCount"
+          :key="index"
+          :class="
+            dataListItem({ layout, divided: options.divided, size: options.size, structured })
+          "
+        >
+          <slot name="placeholder" :index="index - 1" :layout="layout" />
+        </li>
+      </template>
+      <template v-else>
+        <li
+          v-if="before"
+          role="presentation"
+          aria-hidden="true"
+          :class="dataListSpacer()"
+          :style="{ height: `${before}px` }"
+        />
+        <li
+          v-for="entry in rendered"
+          :key="entry.key"
+          data-hn-data-list-item
+          :data-index="entry.index"
+          :data-virtual-row="entry.row"
+          :aria-posinset="options.virtualize ? entry.index + 1 : undefined"
+          :aria-setsize="
+            options.virtualize
+              ? options.manual
+                ? (options.total ?? -1)
+                : options.items.length
+              : undefined
+          "
+          :class="itemClass(entry, structured)"
+          :style="entry.gapBefore ? { marginBlockStart: `${entry.gapBefore}px` } : undefined"
+        >
+          <slot v-bind="entry" />
+        </li>
+        <li
+          v-if="after"
+          role="presentation"
+          aria-hidden="true"
+          :class="dataListSpacer()"
+          :style="{ height: `${after}px` }"
+        />
+      </template>
+    </ul>
+  </component>
+</template>

package/src/components/data-list/DataListItem.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+  import Skeleton from '../skeleton/Skeleton.vue'
+  import {
+    dataListAnatomy,
+    dataListMedia,
+    dataListDetails,
+    dataListCopy,
+    dataListTitle,
+    dataListDescription,
+    dataListMeta,
+    dataListActions,
+    dataListPlaceholder,
+  } from './data-list.variants'
+  import type { DataListLayout } from './types'
+  defineProps<{
+    layout: DataListLayout
+    title?: string | number
+    description?: string | number
+    mediaRatio?: number
+    placeholder?: boolean
+    titlePlaceholder?: boolean
+    descriptionPlaceholder?: boolean
+    media?: boolean
+    meta?: boolean
+    actions?: boolean
+  }>()
+  const slots = defineSlots<{
+    media?(): unknown
+    title?(): unknown
+    description?(): unknown
+    meta?(): unknown
+    actions?(): unknown
+  }>()
+</script>
+<template>
+  <div :class="dataListAnatomy({ layout })">
+    <div
+      v-if="media || slots.media"
+      :class="dataListMedia({ layout })"
+      :style="mediaRatio ? { aspectRatio: mediaRatio } : undefined"
+    >
+      <Skeleton v-if="placeholder" :class="dataListPlaceholder({ part: 'media' })" />
+      <slot v-else name="media" />
+    </div>
+    <div :class="dataListDetails({ layout })">
+      <div :class="dataListCopy()">
+        <div v-if="titlePlaceholder || slots.title || title !== undefined" :class="dataListTitle()">
+          <Skeleton v-if="placeholder" :class="dataListPlaceholder({ part: 'title' })" />
+          <slot v-else name="title">{{ title }}</slot>
+        </div>
+        <div
+          v-if="descriptionPlaceholder || slots.description || description !== undefined"
+          :class="dataListDescription()"
+        >
+          <Skeleton v-if="placeholder" :class="dataListPlaceholder({ part: 'description' })" />
+          <slot v-else name="description">{{ description }}</slot>
+        </div>
+        <div v-if="meta || slots.meta" :class="dataListMeta()">
+          <Skeleton v-if="placeholder" :class="dataListPlaceholder({ part: 'meta' })" />
+          <slot v-else name="meta" />
+        </div>
+      </div>
+      <div v-if="actions || slots.actions" :class="dataListActions({ layout })">
+        <Skeleton v-if="placeholder" :class="dataListPlaceholder({ part: 'action' })" />
+        <slot v-else name="actions" />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/data-list/DataListLayoutToggle.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { LayoutGrid, List } from '@lucide/vue'
+  import SegmentedControl from '../segmented-control/SegmentedControl.vue'
+  import { useUiLocale } from '../../locale'
+  import type { DataListLayout } from './types'
+  defineProps<{ modelValue: DataListLayout }>()
+  const emit = defineEmits<{ 'update:modelValue': [value: DataListLayout] }>()
+  const t = useUiLocale()
+  const options = computed(() => [
+    { value: 'list', label: t.value.dataList.list },
+    { value: 'grid', label: t.value.dataList.grid },
+  ])
+</script>
+<template>
+  <SegmentedControl
+    :model-value="modelValue"
+    :options="options"
+    :aria-label="t.dataList.layout"
+    @update:model-value="emit('update:modelValue', $event === 'grid' ? 'grid' : 'list')"
+  >
+    <template #option="{ option }">
+      <List v-if="option.value === 'list'" class="size-4" />
+      <LayoutGrid v-else class="size-4" />
+    </template>
+  </SegmentedControl>
+</template>