nuxt-ui-tools 0.1.2 → 1.0.0

package/dist/runtime/table/components/filters/shared/filter-match-mode-button.vue

@@ -0,0 +1,120 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import UPopover from "@nuxt/ui/components/Popover.vue";
+import { computed, ref } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { mergeDataListUiClass, resolveDataListControlGeometry } from "../../../utils";
+import FilterMatchModePanel from "./filter-match-mode-panel.vue";
+const props = defineProps({
+  label: { type: String, required: true },
+  items: { type: Array, required: false, default: () => [] },
+  selected: { type: String, required: false },
+  variant: { type: String, required: false, default: "default" },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["select"]);
+const dataListUi = useDataListUi();
+const { t } = useUiToolsLocale();
+const inheritedPart = computed(
+  () => props.variant === "compact" ? dataListUi.ui.value.filterPanel : dataListUi.ui.value.filterTags
+);
+const resolvedSize = computed(
+  () => props.size ?? inheritedPart.value?.size ?? dataListUi.controlSize.value
+);
+const resolvedUi = computed(() => ({ ...inheritedPart.value?.ui, ...props.ui }));
+const geometry = computed(() => resolveDataListControlGeometry(resolvedSize.value));
+const isOpen = ref(false);
+const isInteractive = computed(() => props.items.length > 1);
+function select(value) {
+  isOpen.value = false;
+  emit("select", value);
+}
+</script>
+
+<template>
+  <template v-if="variant === 'compact'">
+    <UPopover
+      v-if="isInteractive"
+      v-model:open="isOpen"
+      :content="{ side: 'bottom', align: 'end', sideOffset: 8 }"
+      :ui="{
+  content: mergeDataListUiClass(
+    'w-[13rem] overflow-hidden rounded-lg border border-default bg-default p-0 shadow-lg',
+    void 0,
+    resolvedUi.operatorContent
+  )
+}"
+    >
+      <button
+        type="button"
+        :class="[
+  'inline-flex items-center rounded-sm font-normal text-muted transition-colors hover:text-default focus-visible:outline-2 focus-visible:outline-primary/30',
+  geometry.caption,
+  geometry.toolbarGap,
+  resolvedUi.operatorTrigger
+]"
+        @pointerdown.stop
+        @click.stop
+      >
+        <span>{{ label }}</span>
+        <UIcon name="i-lucide-chevron-down" :class="[geometry.smallIcon, 'opacity-60']" />
+      </button>
+
+      <template #content>
+        <FilterMatchModePanel
+          :title="t('table.filters.panel.matchMode')"
+          :items="items"
+          :selected="selected"
+          :size="resolvedSize"
+          :ui="resolvedUi"
+          @select="select"
+        />
+      </template>
+    </UPopover>
+
+    <span
+      v-else
+      :class="[
+  'inline-flex items-center font-normal text-dimmed/80',
+  geometry.caption,
+  resolvedUi.operatorTrigger
+]"
+    >
+      {{ label }}
+    </span>
+  </template>
+
+  <UDropdownMenu
+    v-else
+    :size="resolvedSize"
+    :items="[
+  items.map((item) => ({
+    label: item.label,
+    onSelect: () => emit('select', item.value)
+  }))
+]"
+    :content="{ side: 'bottom', align: 'end', sideOffset: 6 }"
+    :ui="{
+  content: mergeDataListUiClass('w-fit p-1', void 0, resolvedUi.operatorContent),
+  item: resolvedUi.operatorItem,
+  itemLabel: resolvedUi.operatorLabel
+}"
+  >
+    <UButton
+      color="neutral"
+      variant="outline"
+      :size="resolvedSize"
+      :label="label"
+      trailing-icon="i-lucide-chevron-down"
+      :ui="{
+  base: mergeDataListUiClass(void 0, void 0, resolvedUi.operatorTrigger)
+}"
+      @pointerdown.stop
+      @click.stop
+    />
+  </UDropdownMenu>
+</template>

package/dist/runtime/table/components/filters/shared/{FilterMatchModeButton.vue.d.ts → filter-match-mode-button.vue.d.ts}

@@ -1,10 +1,11 @@
 import type { DataListControlSize, DataListFilterEditorUi, TableFilterOperator } from '../../../types/index.js';
 type __VLS_Props = {
     label: string;
-    items?: Array<{
+    items?: {
         label: string;
         value: TableFilterOperator;
-    }>;
+    }[];
+    selected?: TableFilterOperator;
     variant?: 'default' | 'compact';
     size?: DataListControlSize;
     ui?: DataListFilterEditorUi;
@@ -15,10 +16,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onSelect?: ((value: TableFilterOperator) => any) | undefined;
 }>, {
     variant: "default" | "compact";
-    items: Array<{
+    items: {
         label: string;
         value: TableFilterOperator;
-    }>;
+    }[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/table/components/filters/shared/{FilterMatchModePanel.d.vue.ts → filter-match-mode-panel.d.vue.ts}

@@ -1,9 +1,10 @@
 import type { DataListControlSize, DataListFilterEditorUi, TableFilterOperator } from '../../../types/index.js';
 type __VLS_Props = {
-    items: Array<{
+    title?: string;
+    items: {
         label: string;
         value: TableFilterOperator;
-    }>;
+    }[];
     selected?: TableFilterOperator;
     size?: DataListControlSize;
     ui?: DataListFilterEditorUi;

package/dist/runtime/table/components/filters/shared/filter-match-mode-panel.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { computed } from "vue";
+import {
+  mergeDataListUiClass,
+  resolveDataListControlGeometry,
+  resolveFilterEditorSizeClasses
+} from "../../../utils";
+const props = defineProps({
+  title: { type: String, required: false },
+  items: { type: Array, required: true },
+  selected: { type: String, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["select"]);
+const sizeClasses = computed(() => resolveFilterEditorSizeClasses(props.size));
+const geometry = computed(() => resolveDataListControlGeometry(props.size ?? "md"));
+const operatorHints = {
+  after: ">",
+  before: "<",
+  between: "\u2026",
+  contains: "ilike",
+  gt: ">",
+  gte: "\u2265",
+  is: "=",
+  isAnyOf: "in",
+  isNot: "\u2260",
+  lt: "<",
+  lte: "\u2264"
+};
+</script>
+
+<template>
+  <div class="p-2">
+    <div
+      v-if="title"
+      :class="[
+  'px-2 pb-1.5 pt-1 font-semibold uppercase tracking-[0.08em] text-dimmed',
+  geometry.caption
+]"
+    >
+      {{ title }}
+    </div>
+
+    <div :class="mergeDataListUiClass('grid gap-0.5', void 0, ui?.list)">
+      <button
+        v-for="item in items"
+        :key="item.value"
+        type="button"
+        :class="
+  mergeDataListUiClass(
+    `group flex w-full items-center rounded-md text-left transition-colors hover:bg-elevated/70 ${sizeClasses.option}`,
+    void 0,
+    ui?.operatorItem
+  )
+"
+        @click="emit('select', item.value)"
+      >
+        <span class="flex w-3 shrink-0 items-center justify-start">
+          <span v-if="item.value === selected" class="size-1.5 rounded-full bg-primary" />
+        </span>
+        <span
+          :class="
+  mergeDataListUiClass(
+    `min-w-0 flex-1 truncate ${sizeClasses.optionLabel}`,
+    void 0,
+    ui?.operatorLabel
+  )
+"
+          :data-selected="item.value === selected"
+          class="text-muted group-hover:text-default data-[selected=true]:font-medium data-[selected=true]:text-default"
+        >
+          {{ item.label }}
+        </span>
+        <span class="ml-4 shrink-0 font-mono text-dimmed" :class="geometry.caption">
+          {{ operatorHints[item.value] }}
+        </span>
+      </button>
+    </div>
+  </div>
+</template>

package/dist/runtime/table/components/filters/shared/{FilterMatchModePanel.vue.d.ts → filter-match-mode-panel.vue.d.ts}

@@ -1,9 +1,10 @@
 import type { DataListControlSize, DataListFilterEditorUi, TableFilterOperator } from '../../../types/index.js';
 type __VLS_Props = {
-    items: Array<{
+    title?: string;
+    items: {
         label: string;
         value: TableFilterOperator;
-    }>;
+    }[];
     selected?: TableFilterOperator;
     size?: DataListControlSize;
     ui?: DataListFilterEditorUi;

package/dist/runtime/table/components/filters/shared/{FilterOptionRow.d.vue.ts → filter-option-loading-list.d.vue.ts}

@@ -1,15 +1,11 @@
 import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type __VLS_Props = {
-    label: string;
-    count?: number;
-    countLoading?: boolean;
-    selected: boolean;
-    leadingIcon?: string;
-    selectedIcon?: string;
-    truncate?: boolean;
     size?: DataListControlSize;
+    indicator?: 'checkbox' | 'radio';
     ui?: DataListFilterEditorUi;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    indicator: "checkbox" | "radio";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/table/components/filters/shared/filter-option-loading-list.vue

@@ -0,0 +1,42 @@
+<script setup>
+import USkeleton from "@nuxt/ui/components/Skeleton.vue";
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { mergeDataListUiClass, resolveFilterEditorSizeClasses } from "../../../utils";
+const props = defineProps({
+  size: { type: String, required: false },
+  indicator: { type: String, required: false, default: "radio" },
+  ui: { type: Object, required: false }
+});
+const dataListUi = useDataListUi();
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value
+);
+const sizeClasses = computed(() => resolveFilterEditorSizeClasses(resolvedSize.value));
+</script>
+
+<template>
+  <div :class="mergeDataListUiClass('grid gap-0.5', void 0, ui?.list)">
+    <div
+      v-for="index in 5"
+      :key="index"
+      :class="
+  mergeDataListUiClass(
+    `flex items-center rounded-md ${sizeClasses.option}`,
+    void 0,
+    ui?.option
+  )
+"
+    >
+      <USkeleton
+        :class="[
+  sizeClasses.optionIcon,
+  'shrink-0',
+  indicator === 'radio' ? 'rounded-full' : 'rounded-sm'
+]"
+      />
+      <USkeleton :class="[sizeClasses.skeletonLine, 'min-w-0 flex-1 rounded-full']" />
+      <USkeleton :class="[sizeClasses.skeletonCount, 'shrink-0 rounded-full']" />
+    </div>
+  </div>
+</template>

package/dist/runtime/table/components/filters/shared/{FilterOptionRow.vue.d.ts → filter-option-loading-list.vue.d.ts}

@@ -1,15 +1,11 @@
 import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type __VLS_Props = {
-    label: string;
-    count?: number;
-    countLoading?: boolean;
-    selected: boolean;
-    leadingIcon?: string;
-    selectedIcon?: string;
-    truncate?: boolean;
     size?: DataListControlSize;
+    indicator?: 'checkbox' | 'radio';
     ui?: DataListFilterEditorUi;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    indicator: "checkbox" | "radio";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/table/components/filters/shared/{FilterOptionMultipleList.d.vue.ts → filter-option-multiple-list.d.vue.ts}

@@ -1,10 +1,10 @@
 import type { DataListControlSize, DataListFilterEditorUi, TableResolvedFilterOptionEntry } from '../../../types/index.js';
 interface FilterOptionMultipleListSection {
     key: string;
-    entries: Array<TableResolvedFilterOptionEntry & {
+    entries: (TableResolvedFilterOptionEntry & {
         selected?: boolean;
         icon?: string;
-    }>;
+    })[];
     dividerBefore?: boolean;
 }
 type __VLS_Props = {

package/dist/runtime/table/components/filters/shared/filter-option-multiple-list.vue

@@ -0,0 +1,115 @@
+<script setup>
+import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import USkeleton from "@nuxt/ui/components/Skeleton.vue";
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import {
+  mergeDataListProps,
+  mergeDataListUiClass,
+  resolveDataListControlGeometry,
+  resolveFilterEditorSizeClasses
+} from "../../../utils";
+const props = defineProps({
+  sections: { type: Array, required: true },
+  showCounts: { type: Boolean, required: true },
+  countLoading: { type: Boolean, required: true },
+  selectedIcon: { type: String, required: false },
+  truncate: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["select"]);
+const dataListUi = useDataListUi();
+const size = computed(
+  () => props.size ?? dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value
+);
+const ui = computed(() => props.ui ?? dataListUi.ui.value.filterTags?.ui);
+const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size.value));
+const checkboxProps = computed(
+  () => mergeDataListProps(
+    { color: "primary" },
+    dataListUi.ui.value.filterTags?.props?.optionCheckbox
+  )
+);
+const geometry = computed(() => resolveDataListControlGeometry(size.value));
+</script>
+
+<template>
+  <div :class="mergeDataListUiClass('grid gap-0.5', void 0, ui?.list)">
+    <template v-for="section in props.sections" :key="section.key">
+      <div
+        v-if="section.dividerBefore && section.entries.length"
+        :class="mergeDataListUiClass('my-1 border-t border-default', void 0, ui?.listDivider)"
+      />
+
+      <div
+        v-for="(entry, index) in section.entries"
+        :key="entry.value == null ? entry.label : String(entry.value)"
+        :class="
+  mergeDataListUiClass(
+    `nut-dl-option flex items-center rounded-md text-left outline-none transition-colors hover:bg-elevated ${sizeClasses.option} ${entry.selected ? 'text-highlighted' : 'text-default'}`,
+    void 0,
+    ui?.option
+  )
+"
+      >
+        <UCheckbox
+          :model-value="entry.selected ?? false"
+          v-bind="checkboxProps"
+          :size="size"
+          :aria-label="entry.label"
+          :icon="props.selectedIcon"
+          :ui="{ base: ui?.optionCheckbox }"
+          @click.stop="emit('select', { event: $event, entry, index, sectionKey: section.key })"
+        />
+
+        <button
+          type="button"
+          :class="['flex min-w-0 flex-1 items-center text-left', geometry.toolbarGap]"
+          @click="emit('select', { event: $event, entry, index, sectionKey: section.key })"
+        >
+          <span
+            v-if="entry.color"
+            class="nut-dl-option__dot size-[7px] shrink-0 rounded-full"
+            :style="{ background: entry.color }"
+            aria-hidden="true"
+          />
+          <UIcon
+            v-else-if="entry.icon"
+            :name="entry.icon"
+            :class="
+  mergeDataListUiClass(
+    `${sizeClasses.optionIcon} shrink-0 text-muted`,
+    void 0,
+    ui?.optionIcon
+  )
+"
+          />
+          <span
+            :class="
+  mergeDataListUiClass(
+    `min-w-0 flex-1 ${sizeClasses.optionLabel} ${props.truncate ?? true ? 'truncate' : ''}`,
+    void 0,
+    ui?.optionLabel
+  )
+"
+          >
+            {{ entry.label }}
+          </span>
+        </button>
+
+        <USkeleton
+          v-if="props.showCounts && props.countLoading"
+          :class="[sizeClasses.skeletonCount, 'shrink-0 rounded-full']"
+        />
+        <span
+          v-else-if="props.showCounts && entry.count != null"
+          :class="mergeDataListUiClass('shrink-0 text-muted', void 0, ui?.optionCount)"
+        >
+          {{ entry.count }}
+        </span>
+      </div>
+    </template>
+  </div>
+</template>

package/dist/runtime/table/components/filters/shared/{FilterOptionMultipleList.vue.d.ts → filter-option-multiple-list.vue.d.ts}

@@ -1,10 +1,10 @@
 import type { DataListControlSize, DataListFilterEditorUi, TableResolvedFilterOptionEntry } from '../../../types/index.js';
 interface FilterOptionMultipleListSection {
     key: string;
-    entries: Array<TableResolvedFilterOptionEntry & {
+    entries: (TableResolvedFilterOptionEntry & {
         selected?: boolean;
         icon?: string;
-    }>;
+    })[];
     dividerBefore?: boolean;
 }
 type __VLS_Props = {

package/dist/runtime/table/components/filters/shared/{FilterOptionPickerContent.d.vue.ts → filter-option-picker-content.d.vue.ts}

@@ -2,7 +2,7 @@ import type { useOptionFilterEditorState } from '../../../composables/use-option
 import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 interface FilterOptionMultipleListSection {
     key: string;
-    entries: Array<ReturnType<typeof useOptionFilterEditorState>['displayEntries']['value'][number]>;
+    entries: ReturnType<typeof useOptionFilterEditorState>['displayEntries']['value'][number][];
     dividerBefore?: boolean;
 }
 type __VLS_Props = {

package/dist/runtime/table/components/filters/shared/{FilterOptionPickerContent.vue → filter-option-picker-content.vue}

@@ -1,32 +1,29 @@
 <script setup>
-import USkeleton from "@nuxt/ui/components/Skeleton.vue";
-import FilterOptionMultipleList from "./FilterOptionMultipleList.vue";
-import FilterOptionSingleList from "./FilterOptionSingleList.vue";
-import FilterOptionTreeContent from "./FilterOptionTreeContent.vue";
-import FilterSearchablePanel from "./FilterSearchablePanel.vue";
+import { isNullish } from "../../../../shared/utils/predicate";
+import FilterOptionLoadingList from "./filter-option-loading-list.vue";
+import FilterOptionMultipleList from "./filter-option-multiple-list.vue";
+import FilterOptionSingleList from "./filter-option-single-list.vue";
+import FilterOptionTreeContent from "./filter-option-tree-content.vue";
+import FilterSearchablePanel from "./filter-searchable-panel.vue";
 const props = defineProps({
   state: { type: null, required: true },
   sections: { type: Array, required: false },
   size: { type: String, required: false },
   ui: { type: Object, required: false }
 });
-const searchQuery = defineModel("searchQuery", { type: String, ...{
-  default: ""
-} });
-const flatRadioValue = defineModel("flatRadioValue", { type: null, ...{
-  default: void 0
-} });
-const treeRadioValue = defineModel("treeRadioValue", { type: null, ...{
-  default: void 0
-} });
+const searchQuery = defineModel("searchQuery", { type: String, ...{ default: "" } });
+const flatRadioValue = defineModel("flatRadioValue", { type: null, ...{ default: void 0 } });
+const treeRadioValue = defineModel("treeRadioValue", { type: null, ...{ default: void 0 } });
 const emit = defineEmits(["selectEntry", "toggleTreeEntry", "toggleExpanded"]);
 function handleSelect(options) {
-  if (options.entry.value == null) return;
+  if (isNullish(options.entry.value)) {
+    return;
+  }
   emit("selectEntry", {
     event: options.event,
-    value: options.entry.value,
     index: options.index,
-    sectionKey: options.sectionKey
+    sectionKey: options.sectionKey,
+    value: options.entry.value
   });
 }
 </script>
@@ -45,16 +42,12 @@ function handleSelect(options) {
     :ui="props.ui"
   >
     <template v-if="props.state.filterUi.value.presentation === 'tree'">
-      <template v-if="props.state.optionSource.isLoading.value">
-        <div class="grid gap-0.5">
-          <div v-for="i in 5" :key="i" class="flex items-center gap-3 rounded-md px-3 py-2">
-            <USkeleton class="size-4 shrink-0 rounded-full" />
-            <USkeleton class="h-3.5 min-w-0 flex-1" />
-            <USkeleton class="h-3.5 w-6 shrink-0" />
-          </div>
-        </div>
-      </template>
-
+      <FilterOptionLoadingList
+        v-if="props.state.optionSource.isLoading.value"
+        :size="props.size"
+        :ui="props.ui"
+        indicator="checkbox"
+      />
       <FilterOptionTreeContent
         v-else
         v-model="treeRadioValue"
@@ -73,16 +66,12 @@ function handleSelect(options) {
     </template>
 
     <template v-else-if="props.state.filterUi.value.selection.mode === 'multiple'">
-      <template v-if="props.state.optionSource.isLoading.value">
-        <div class="grid gap-0.5">
-          <div v-for="i in 5" :key="i" class="flex items-center gap-3 rounded-md px-3 py-2">
-            <USkeleton class="size-4 shrink-0 rounded-md" />
-            <USkeleton class="h-3.5 min-w-0 flex-1" />
-            <USkeleton class="h-3.5 w-6 shrink-0" />
-          </div>
-        </div>
-      </template>
-
+      <FilterOptionLoadingList
+        v-if="props.state.optionSource.isLoading.value"
+        :size="props.size"
+        :ui="props.ui"
+        indicator="checkbox"
+      />
       <FilterOptionMultipleList
         v-else
         :sections="
@@ -99,16 +88,12 @@ function handleSelect(options) {
     </template>
 
     <template v-else>
-      <template v-if="props.state.optionSource.isLoading.value">
-        <div class="grid gap-0.5">
-          <div v-for="i in 5" :key="i" class="flex items-center gap-3 rounded-md px-3 py-2">
-            <USkeleton class="size-4 shrink-0 rounded-full" />
-            <USkeleton class="h-3.5 min-w-0 flex-1" />
-            <USkeleton class="h-3.5 w-6 shrink-0" />
-          </div>
-        </div>
-      </template>
-
+      <FilterOptionLoadingList
+        v-if="props.state.optionSource.isLoading.value"
+        :size="props.size"
+        :ui="props.ui"
+        indicator="radio"
+      />
       <FilterOptionSingleList
         v-else
         v-model="flatRadioValue"

package/dist/runtime/table/components/filters/shared/{FilterOptionPickerContent.vue.d.ts → filter-option-picker-content.vue.d.ts}

@@ -2,7 +2,7 @@ import type { useOptionFilterEditorState } from '../../../composables/use-option
 import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 interface FilterOptionMultipleListSection {
     key: string;
-    entries: Array<ReturnType<typeof useOptionFilterEditorState>['displayEntries']['value'][number]>;
+    entries: ReturnType<typeof useOptionFilterEditorState>['displayEntries']['value'][number][];
     dividerBefore?: boolean;
 }
 type __VLS_Props = {

package/dist/runtime/table/components/filters/shared/{FilterOptionSingleList.d.vue.ts → filter-option-single-list.d.vue.ts}

@@ -1,12 +1,12 @@
 import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type __VLS_Props = {
-    items: Array<{
+    items: {
         label: string;
         value: string;
         count?: number;
         icon?: string;
         truncate?: boolean;
-    }>;
+    }[];
     countLoading: boolean;
     size?: DataListControlSize;
     ui?: DataListFilterEditorUi;