nuxt-ui-tools 0.1.3 → 1.0.0

package/dist/runtime/table/components/filters/panel/{OptionFilterPanelField.vue → option-filter-panel-field.vue}

@@ -1,16 +1,25 @@
 <script setup>
 import UPopover from "@nuxt/ui/components/Popover.vue";
 import { computed, ref } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isBoolean, isNumber, isString, isNullish } from "../../../../shared/utils/predicate";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
 import { useOptionFilterEditorState } from "../../../composables/use-option-filter-editor-state";
 import { useTableInternals } from "../../../composables/use-table-internals";
-import FilterMatchModeButton from "../shared/FilterMatchModeButton.vue";
-import FilterOptionPickerContent from "../shared/FilterOptionPickerContent.vue";
-import FilterPanelFieldShell from "./FilterPanelFieldShell.vue";
-import FilterPanelInputTrigger from "./FilterPanelInputTrigger.vue";
+import { resolveDataListPopoverContentClass } from "../../../utils";
+import FilterMatchModeButton from "../shared/filter-match-mode-button.vue";
+import FilterOptionPickerContent from "../shared/filter-option-picker-content.vue";
+import FilterPanelChips from "./filter-panel-chips.vue";
+import FilterPanelFieldShell from "./filter-panel-field-shell.vue";
+import FilterPanelInputTrigger from "./filter-panel-input-trigger.vue";
 const props = defineProps({
-  definition: { type: Object, required: true }
+  definition: { type: Object, required: true },
+  size: { type: String, required: true },
+  ui: { type: Object, required: false }
 });
 const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const { t } = useUiToolsLocale();
 const searchQuery = ref("");
 const pendingOperator = ref(resolveInitialOperator());
 const isOpen = ref(false);
@@ -18,28 +27,52 @@ const selectedValues = computed(() => {
   const value = internals.filterPresentation.getPanelDraftFilterState({
     key: props.definition.key
   })?.value;
-  if (Array.isArray(value)) return value.filter(isPrimitiveValue);
+  if (Array.isArray(value)) {
+    return value.filter(isPrimitiveValue);
+  }
   return isPrimitiveValue(value) ? [value] : [];
 });
 const state = useOptionFilterEditorState({
-  definition: props.definition,
-  operator: pendingOperator,
-  selectedValues,
-  searchQuery,
   active: internals.filterPresentation.panelOpen,
+  definition: props.definition,
   filters: internals.filters,
+  operator: pendingOperator,
   queryContent: internals.queryContent,
   schema: internals.schema,
+  searchQuery,
+  selectedValues,
   setSelectedValues
 });
 const isActive = computed(
-  () => internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key }) != null
+  () => !isNullish(
+    internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key })
+  )
 );
 const operatorItems = computed(
   () => internals.filters.getFilterOperatorOptions({
     key: props.definition.key
   })
 );
+const chipLimit = computed(() => dataListUi.ui.value.filterPanel?.props?.chips ?? 8);
+const staticCount = computed(
+  () => Array.isArray(props.definition.source?.options) ? props.definition.source.options.length : Number.POSITIVE_INFINITY
+);
+const chips = computed(
+  () => chipLimit.value !== false && state.filterUi.value.presentation !== "tree" && staticCount.value <= chipLimit.value
+);
+const chipEntries = computed(
+  () => state.displayEntries.value.filter((entry) => !isNullish(entry.value)).map((entry) => ({
+    color: entry.color,
+    count: entry.count,
+    icon: entry.icon,
+    label: entry.label,
+    selected: Boolean(entry.selected),
+    value: entry.value
+  }))
+);
+const meta = computed(
+  () => selectedValues.value.length ? t("table.filters.preview.selected", { count: selectedValues.value.length }) : ""
+);
 function resolveInitialOperator() {
   const operator = internals.filterPresentation.getPanelFilterOperator({
     key: props.definition.key
@@ -52,18 +85,20 @@ function handleOperatorChange(operator) {
     internals.filterPresentation.clearPanelFilter({ key: props.definition.key });
     return;
   }
-  if (!selectedValues.value.length) return;
+  if (!selectedValues.value.length) {
+    return;
+  }
   internals.filterPresentation.setPanelOptionFilterValues({
     key: props.definition.key,
-    values: selectedValues.value,
-    operator: pendingOperator.value
+    operator: pendingOperator.value,
+    values: selectedValues.value
   });
 }
 function setSelectedValues(values) {
   internals.filterPresentation.setPanelOptionFilterValues({
     key: props.definition.key,
-    values,
-    operator: pendingOperator.value
+    operator: pendingOperator.value,
+    values
   });
 }
 function handleSelectEntry(options) {
@@ -71,40 +106,59 @@ function handleSelectEntry(options) {
 }
 function handleToggleTreeEntry(entryId) {
   const entry = state.visibleTreeEntries.value.find((item) => item.id === entryId);
-  if (!entry) return;
+  if (!entry) {
+    return;
+  }
   state.toggleTreeEntry(entry);
 }
 function isPrimitiveValue(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  return isString(value) || isNumber(value) || isBoolean(value);
 }
 </script>
 
 <template>
   <FilterPanelFieldShell
     :label="internals.filters.getFilterLabelText({ label: definition.label })"
+    :meta="meta"
     :active="isActive"
+    :size="size"
+    :ui="ui"
   >
     <template #actions>
       <FilterMatchModeButton
         v-if="operatorItems.length > 1"
         :label="operatorItems.find((item) => item.value === pendingOperator)?.label ?? 'is any of'"
         :items="operatorItems"
+        :selected="pendingOperator"
+        :size="size"
         variant="compact"
         @select="handleOperatorChange"
       />
     </template>
 
+    <FilterPanelChips
+      v-if="chips"
+      :entries="chipEntries"
+      :loading="state.optionSource.isLoading.value"
+      :count-loading="state.optionSource.isCountLoading.value"
+      :show-counts="state.filterUi.value.row.showCounts"
+      :ui="ui"
+      @toggle="state.toggleValue"
+    />
+
     <UPopover
+      v-else
       v-model:open="isOpen"
       mode="click"
       :content="{ side: 'bottom', align: 'start', sideOffset: 8 }"
       :ui="{
-  content: 'w-[var(--reka-popover-trigger-width)] max-w-[var(--reka-popover-trigger-width)] overflow-hidden p-0 shadow-none'
+  content: resolveDataListPopoverContentClass('trigger', 'p-0 shadow-none')
 }"
     >
       <FilterPanelInputTrigger
         :value="state.triggerSummary.value"
-        :placeholder="state.filterUi.value.labels.searchPlaceholder"
+        :placeholder="t('table.filters.preview.empty')"
+        :size="size"
       />
 
       <template #content>
@@ -113,6 +167,7 @@ function isPrimitiveValue(value) {
           :flat-radio-value="state.flatRadioValue.value"
           :tree-radio-value="state.treeRadioValue.value"
           :state="state"
+          :size="size"
           @update:flat-radio-value="state.flatRadioValue.value = $event"
           @update:tree-radio-value="state.treeRadioValue.value = $event"
           @select-entry="handleSelectEntry"

package/dist/runtime/table/components/filters/panel/{OptionFilterPanelField.vue.d.ts → option-filter-panel-field.vue.d.ts}

@@ -1,6 +1,8 @@
-import type { TableOptionFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableOptionFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableOptionFilterDefinition;
+    size: DataListControlSize;
+    ui?: DataListFilterPanelUi;
 };
 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 _default: typeof __VLS_export;

package/dist/runtime/table/components/filters/panel/registry.js

@@ -1,13 +1,13 @@
-import BooleanFilterPanelField from "./BooleanFilterPanelField.vue";
-import DateFilterPanelField from "./DateFilterPanelField.vue";
-import NumberFilterPanelField from "./NumberFilterPanelField.vue";
-import OptionFilterPanelField from "./OptionFilterPanelField.vue";
-import TextFilterPanelField from "./TextFilterPanelField.vue";
+import BooleanFilterPanelField from "./boolean-filter-panel-field.vue";
+import DateFilterPanelField from "./date-filter-panel-field.vue";
+import NumberFilterPanelField from "./number-filter-panel-field.vue";
+import OptionFilterPanelField from "./option-filter-panel-field.vue";
+import TextFilterPanelField from "./text-filter-panel-field.vue";
 const FILTER_PANEL_COMPONENTS = {
-  option: OptionFilterPanelField,
   boolean: BooleanFilterPanelField,
   date: DateFilterPanelField,
   number: NumberFilterPanelField,
+  option: OptionFilterPanelField,
   text: TextFilterPanelField
 };
 export function resolveFilterPanelComponent(definition) {

package/dist/runtime/table/components/filters/panel/{TextFilterPanelField.d.vue.ts → text-filter-panel-field.d.vue.ts}

@@ -1,6 +1,8 @@
-import type { TableTextFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableTextFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableTextFilterDefinition;
+    size: DataListControlSize;
+    ui?: DataListFilterPanelUi;
 };
 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 _default: typeof __VLS_export;

package/dist/runtime/table/components/filters/panel/{TextFilterPanelField.vue → text-filter-panel-field.vue}

@@ -1,12 +1,15 @@
 <script setup>
 import UInput from "@nuxt/ui/components/Input.vue";
 import { computed, ref } from "vue";
+import { isNullish } from "../../../../shared/utils/predicate";
 import { useTableInternals } from "../../../composables/use-table-internals";
 import { resolveTextFilterUi } from "../../../utils";
-import FilterMatchModeButton from "../shared/FilterMatchModeButton.vue";
-import FilterPanelFieldShell from "./FilterPanelFieldShell.vue";
+import FilterMatchModeButton from "../shared/filter-match-mode-button.vue";
+import FilterPanelFieldShell from "./filter-panel-field-shell.vue";
 const props = defineProps({
-  definition: { type: Object, required: true }
+  definition: { type: Object, required: true },
+  size: { type: String, required: true },
+  ui: { type: Object, required: false }
 });
 const internals = useTableInternals();
 const pendingOperator = ref(resolveInitialOperator());
@@ -21,18 +24,20 @@ const localValue = computed({
     const value = internals.filterPresentation.getPanelDraftFilterState({
       key: props.definition.key
     })?.value;
-    return value == null ? "" : String(value);
+    return isNullish(value) ? "" : String(value);
   },
   set: (value) => {
     internals.filterPresentation.setPanelScalarFilterValue({
       key: props.definition.key,
-      value: value.trim() || void 0,
-      operator: pendingOperator.value
+      operator: pendingOperator.value,
+      value: value.trim() || void 0
     });
   }
 });
 const isActive = computed(
-  () => internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key }) != null
+  () => !isNullish(
+    internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key })
+  )
 );
 function resolveInitialOperator() {
   const operator = internals.filterPresentation.getPanelFilterOperator({
@@ -46,11 +51,13 @@ function handleOperatorChange(operator) {
     internals.filterPresentation.clearPanelFilter({ key: props.definition.key });
     return;
   }
-  if (!localValue.value.trim()) return;
+  if (!localValue.value.trim()) {
+    return;
+  }
   internals.filterPresentation.setPanelScalarFilterValue({
     key: props.definition.key,
-    value: localValue.value.trim(),
-    operator: pendingOperator.value
+    operator: pendingOperator.value,
+    value: localValue.value.trim()
   });
 }
 </script>
@@ -59,12 +66,16 @@ function handleOperatorChange(operator) {
   <FilterPanelFieldShell
     :label="internals.filters.getFilterLabelText({ label: definition.label })"
     :active="isActive"
+    :size="size"
+    :ui="ui"
   >
     <template #actions>
       <FilterMatchModeButton
-        v-if="operatorItems.length > 1"
+        v-if="operatorItems.length"
         :label="operatorItems.find((item) => item.value === pendingOperator)?.label ?? 'contains'"
         :items="operatorItems"
+        :selected="pendingOperator"
+        :size="size"
         variant="compact"
         @select="handleOperatorChange"
       />
@@ -78,6 +89,7 @@ function handleOperatorChange(operator) {
       :autocomplete="filterUi.autocomplete"
       :highlight="filterUi.input.highlight"
       :fixed="filterUi.input.fixed"
+      :size="size"
       color="neutral"
       variant="outline"
       class="w-full"

package/dist/runtime/table/components/filters/panel/{TextFilterPanelField.vue.d.ts → text-filter-panel-field.vue.d.ts}

@@ -1,6 +1,8 @@
-import type { TableTextFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableTextFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableTextFilterDefinition;
+    size: DataListControlSize;
+    ui?: DataListFilterPanelUi;
 };
 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 _default: typeof __VLS_export;

package/dist/runtime/table/components/filters/shared/{DynamicFilterPicker.vue → dynamic-filter-picker.vue}

@@ -4,17 +4,21 @@ import UIcon from "@nuxt/ui/components/Icon.vue";
 import UPopover from "@nuxt/ui/components/Popover.vue";
 import { computed, nextTick, ref } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isNumber, isNullish } from "../../../../shared/utils/predicate";
 import { useDataListUi } from "../../../composables/use-data-list-ui";
 import { useTableInternals } from "../../../composables/use-table-internals";
 import {
+  mergeDataListProps,
   mergeDataListUiClass,
+  resolveDataListControlGeometry,
   resolveFilterEditorSizeClasses,
+  resolveDataListPopoverContentClass,
   resolveFilterTriggerIcon
 } from "../../../utils";
 import { resolveFilterTagComponent } from "../tags/registry";
-import FilterMatchModePanel from "./FilterMatchModePanel.vue";
-import FilterSearchablePanel from "./FilterSearchablePanel.vue";
-import FilterStageTransition from "./FilterStageTransition.vue";
+import FilterMatchModePanel from "./filter-match-mode-panel.vue";
+import FilterSearchablePanel from "./filter-searchable-panel.vue";
+import FilterStageTransition from "./filter-stage-transition.vue";
 const props = defineProps({
   definitions: { type: Array, required: true },
   sessionDefinition: { type: null, required: false },
@@ -38,17 +42,36 @@ const size = computed(
   () => props.size ?? dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value
 );
 const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size.value));
+const geometry = computed(() => resolveDataListControlGeometry(size.value));
+const pickerProps = computed(() => dataListUi.ui.value.addFilter?.props);
+const searchable = computed(() => {
+  const search = pickerProps.value?.search ?? 8;
+  return isNumber(search) ? props.definitions.length > search : search;
+});
+const triggerProps = computed(
+  () => mergeDataListProps(
+    { color: "neutral", size: size.value, variant: "ghost" },
+    dataListUi.ui.value.filterTags?.props?.addTrigger,
+    dataListUi.ui.value.addFilter?.props?.trigger
+  )
+);
 const selectedDefinition = computed(() => {
-  if (selectedKey.value == null) return void 0;
-  if (props.sessionDefinition?.key === selectedKey.value) return props.sessionDefinition;
+  if (isNullish(selectedKey.value)) {
+    return void 0;
+  }
+  if (props.sessionDefinition?.key === selectedKey.value) {
+    return props.sessionDefinition;
+  }
   return props.definitions.find((definition) => definition.key === selectedKey.value);
 });
 const operatorItems = computed(
-  () => selectedKey.value == null ? [] : internals.filters.getFilterOperatorOptions({ key: selectedKey.value })
+  () => isNullish(selectedKey.value) ? [] : internals.filters.getFilterOperatorOptions({ key: selectedKey.value })
 );
 const filteredDefinitions = computed(() => {
   const search = searchQuery.value.trim().toLowerCase();
-  if (!search) return props.definitions;
+  if (!search) {
+    return props.definitions;
+  }
   return props.definitions.filter(
     (definition) => props.getLabel(definition).toLowerCase().includes(search)
   );
@@ -65,12 +88,16 @@ async function handleSelect(key) {
     return;
   }
   const defaultOperator = items[0]?.value;
-  if (!defaultOperator) return;
+  if (!defaultOperator) {
+    return;
+  }
   await openEditor(defaultOperator);
 }
 async function openEditor(operator) {
   const key = selectedKey.value;
-  if (!key) return;
+  if (!key) {
+    return;
+  }
   pendingOperator.value = operator;
   emit("select", key);
   await nextTick();
@@ -79,11 +106,15 @@ async function openEditor(operator) {
   stage.value = "editor";
 }
 function handleFocusOutside(event) {
-  if (stageTransitioning.value) event.preventDefault();
+  if (stageTransitioning.value) {
+    event.preventDefault();
+  }
 }
 function handleOpenChange(nextOpen) {
   isOpen.value = nextOpen;
-  if (!nextOpen && !releaseAfterCommit) releaseSession();
+  if (!nextOpen && !releaseAfterCommit) {
+    releaseSession();
+  }
 }
 function handleSessionClosed() {
   isOpen.value = false;
@@ -93,6 +124,10 @@ function handleSessionClosed() {
     releaseAfterCommit = false;
   });
 }
+function goBack() {
+  stageTransitioning.value = true;
+  releaseSession();
+}
 function releaseSession() {
   const key = selectedKey.value;
   selectedKey.value = null;
@@ -100,7 +135,9 @@ function releaseSession() {
   searchQuery.value = "";
   stage.value = "picker";
   stageDirection.value = "backward";
-  if (key) emit("release", key);
+  if (key) {
+    emit("release", key);
+  }
 }
 function open() {
   isOpen.value = true;
@@ -110,8 +147,11 @@ function close() {
   releaseSession();
 }
 function toggle() {
-  if (isOpen.value) close();
-  else open();
+  if (isOpen.value) {
+    close();
+  } else {
+    open();
+  }
 }
 </script>
 
@@ -126,10 +166,13 @@ function toggle() {
   onFocusOutside: handleFocusOutside
 }"
     :ui="{
-  content: mergeDataListUiClass(
-    'w-fit max-w-[calc(100vw-1rem)] overflow-hidden p-0',
-    void 0,
-    ui?.popoverContent
+  content: resolveDataListPopoverContentClass(
+    'fit',
+    mergeDataListUiClass(
+      `${sizeClasses.editor} overflow-hidden p-0`,
+      void 0,
+      ui?.popoverContent
+    )
   )
 }"
     @update:open="handleOpenChange"
@@ -150,17 +193,20 @@ function toggle() {
     />
     <UButton
       v-else
-      color="neutral"
-      variant="outline"
-      :size="size"
-      :icon="selectedDefinition ? resolveFilterTriggerIcon(selectedDefinition) : 'i-lucide-plus'"
-      :label="selectedDefinition ? getLabel(selectedDefinition) : t('table.controls.addFilter')"
+      v-bind="triggerProps"
+      :icon="
+  selectedDefinition ? dataListUi.ui.value.filterTags?.props?.icon === false ? void 0 : resolveFilterTriggerIcon(selectedDefinition) : 'i-lucide-plus'
+"
+      :label="
+  selectedDefinition ? getLabel(selectedDefinition) : triggerProps.label ?? t('table.controls.addFilter')
+"
       :ui="{
   base: mergeDataListUiClass(
-    `shrink-0 ${selectedDefinition ? '' : 'border-dashed'}`,
+    `nut-dl-tag nut-dl-tag--add shrink-0 ${selectedDefinition ? '' : 'border border-dashed border-[var(--ui-border-accented)] text-muted hover:text-default hover:border-[var(--ui-text-dimmed)]'}`,
     void 0,
     ui?.trigger
-  )
+  ),
+  leadingIcon: 'size-[13px]'
 }"
     />
 
@@ -174,10 +220,22 @@ function toggle() {
           v-if="stage === 'picker'"
           :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
         >
+          <div
+            v-if="pickerProps?.title !== false"
+            :class="
+  mergeDataListUiClass(
+    'nut-dl-picker__title px-2.5 pt-2 pb-0.5 text-[11.5px] font-semibold text-muted',
+    void 0,
+    ui?.title
+  )
+"
+          >
+            {{ t("table.controls.addFilter") }}
+          </div>
           <FilterSearchablePanel
             v-model:search-query="searchQuery"
-            searchable
-            autofocus
+            :searchable="searchable"
+            :autofocus="searchable"
             :search-placeholder="t('table.controls.searchFilters')"
             :show-empty="!filteredDefinitions.length"
             :empty-label="t('table.controls.noMatchingFilters')"
@@ -191,7 +249,7 @@ function toggle() {
               type="button"
               :class="
   mergeDataListUiClass(
-    `flex min-w-0 items-center rounded-md text-left transition-colors hover:bg-elevated/70 ${sizeClasses.option}`,
+    `flex min-w-0 items-center rounded-md text-left outline-none transition-colors hover:bg-elevated/70 focus-visible:ring-2 focus-visible:ring-primary/40 ${sizeClasses.option}`,
     void 0,
     ui?.option
   )
@@ -199,7 +257,9 @@ function toggle() {
               @click="handleSelect(definition.key)"
             >
               <UIcon
-                :name="resolveFilterTriggerIcon(definition)"
+                :name="
+  pickerProps?.icon === 'kind' ? resolveFilterTriggerIcon(definition) : 'i-lucide-plus'
+"
                 :class="
   mergeDataListUiClass(
     `${sizeClasses.optionIcon} shrink-0 text-muted`,
@@ -219,8 +279,16 @@ function toggle() {
               >
                 {{ getLabel(definition) }}
               </span>
-              <span :class="mergeDataListUiClass('text-muted', void 0, ui?.optionTrailingIcon)">
-                <UIcon name="i-lucide-arrow-right" class="size-4" />
+              <span
+                :class="
+  mergeDataListUiClass(
+    'inline-flex shrink-0 items-center text-dimmed',
+    void 0,
+    ui?.optionTrailingIcon
+  )
+"
+              >
+                <UIcon name="i-lucide-chevron-right" :class="geometry.icon" />
               </span>
             </button>
           </FilterSearchablePanel>
@@ -249,6 +317,7 @@ function toggle() {
           :initial-operator="pendingOperator"
           @dismiss="handleSessionClosed"
           @session-closed="handleSessionClosed"
+          @back="goBack"
         />
       </FilterStageTransition>
     </template>

package/dist/runtime/table/components/filters/shared/{FilterMatchModeButton.d.vue.ts → filter-match-mode-button.d.vue.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;