nuxt-ui-tools 0.1.3 → 1.0.0

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

@@ -4,7 +4,11 @@ import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
 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";
+import {
+  mergeDataListUiClass,
+  resolveDataListControlGeometry,
+  resolveFilterEditorSizeClasses
+} from "../../../utils";
 const props = defineProps({
   items: { type: Array, required: true },
   countLoading: { type: Boolean, required: true },
@@ -17,6 +21,7 @@ const size = computed(
 );
 const ui = computed(() => props.ui ?? dataListUi.ui.value.filterTags?.ui);
 const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size.value));
+const geometry = computed(() => resolveDataListControlGeometry(size.value));
 const modelValue = defineModel({ type: null, ...{
   default: void 0
 } });
@@ -49,7 +54,7 @@ const modelValue = defineModel({ type: null, ...{
 }"
   >
     <template #label="{ item }">
-      <div class="flex min-w-0 items-center gap-2">
+      <div :class="['flex min-w-0 items-center', geometry.toolbarGap]">
         <UIcon
           v-if="typeof item.icon === 'string'"
           :name="item.icon"
@@ -65,8 +70,11 @@ const modelValue = defineModel({ type: null, ...{
         <span class="min-w-0 flex-1" :class="item.truncate ? 'truncate' : ''">
           {{ item.label }}
         </span>
-        <USkeleton v-if="countLoading" class="ml-3 h-3.5 w-6 shrink-0" />
-        <span v-else-if="item.count != null" class="ml-3 shrink-0 text-muted">
+        <USkeleton
+          v-if="countLoading"
+          :class="[sizeClasses.skeletonCount, 'shrink-0 rounded-full']"
+        />
+        <span v-else-if="item.count != null" class="shrink-0 text-muted">
           {{ item.count }}
         </span>
       </div>

package/dist/runtime/table/components/filters/shared/{FilterOptionSingleList.vue.d.ts → filter-option-single-list.vue.d.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;

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

@@ -1,5 +1,5 @@
 import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
-type TreeEntry = {
+interface TreeEntry {
     id: string;
     label: string;
     value?: string | number | boolean;
@@ -13,10 +13,10 @@ type TreeEntry = {
     selected?: boolean;
     indeterminate?: boolean;
     truncate?: boolean;
-};
+}
 type __VLS_Props = {
     entries: TreeEntry[];
-    items: Array<{
+    items: {
         id: string;
         label: string;
         value: string;
@@ -28,7 +28,7 @@ type __VLS_Props = {
         expanded: boolean;
         selectable: boolean;
         disabled?: boolean;
-    }>;
+    }[];
     multiple: boolean;
     countLoading: boolean;
     selectedIcon?: string;

package/dist/runtime/table/components/filters/shared/filter-option-tree-content.vue

@@ -0,0 +1,222 @@
+<script setup>
+import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
+import USkeleton from "@nuxt/ui/components/Skeleton.vue";
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import {
+  mergeDataListUiClass,
+  resolveDataListControlGeometry,
+  resolveFilterEditorSizeClasses
+} from "../../../utils";
+const props = defineProps({
+  entries: { type: Array, required: true },
+  items: { type: Array, required: true },
+  multiple: { type: Boolean, required: true },
+  countLoading: { type: Boolean, required: true },
+  selectedIcon: { type: String, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["toggleEntry", "toggleExpanded"]);
+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 geometry = computed(() => resolveDataListControlGeometry(size.value));
+const indentStep = computed(() => {
+  if (size.value === "xs" || size.value === "sm") {
+    return 8;
+  }
+  if (size.value === "md") {
+    return 10;
+  }
+  if (size.value === "lg") {
+    return 12;
+  }
+  return 14;
+});
+const modelValue = defineModel({ type: null, ...{ default: void 0 } });
+function getTreeIndentStyle(depth) {
+  return { paddingInlineStart: `${depth * indentStep.value}px` };
+}
+function activateTreeEntry(entry) {
+  if (entry.selectable || entry.branchSelectable) {
+    emit("toggleEntry", entry.id);
+    return;
+  }
+  if (entry.expandable) {
+    emit("toggleExpanded", entry.id);
+  }
+}
+</script>
+
+<template>
+  <div v-if="multiple" :class="mergeDataListUiClass('grid gap-0.5', void 0, ui?.list)">
+    <div
+      v-for="entry in entries"
+      :key="entry.id"
+      :class="
+  mergeDataListUiClass(
+    `flex items-center rounded-md text-left transition-colors hover:bg-elevated ${sizeClasses.option} ${entry.selected ? 'bg-elevated text-highlighted' : 'text-default'}`,
+    void 0,
+    ui?.option
+  )
+"
+      :style="getTreeIndentStyle(entry.depth)"
+    >
+      <button
+        v-if="entry.expandable"
+        type="button"
+        :aria-label="entry.expanded ? `Collapse ${entry.label}` : `Expand ${entry.label}`"
+        :aria-expanded="entry.expanded"
+        :class="
+  mergeDataListUiClass(
+    `flex ${sizeClasses.optionIcon} shrink-0 items-center justify-center rounded-sm text-muted transition-transform hover:bg-accented ${entry.expanded ? 'rotate-90' : ''}`,
+    void 0,
+    ui?.optionExpander
+  )
+"
+        @click.stop="emit('toggleExpanded', entry.id)"
+      >
+        <UIcon name="i-lucide-chevron-right" :class="sizeClasses.optionIcon" />
+      </button>
+      <span
+        v-else
+        :class="
+  mergeDataListUiClass(`${sizeClasses.optionIcon} shrink-0`, void 0, ui?.optionSpacer)
+"
+      />
+
+      <UCheckbox
+        v-if="entry.selectable || entry.branchSelectable"
+        :model-value="entry.indeterminate ? 'indeterminate' : entry.selected"
+        color="neutral"
+        :size="size"
+        :aria-label="entry.label"
+        :icon="selectedIcon"
+        :ui="{ base: ui?.optionCheckbox }"
+        @click.stop
+        @update:model-value="emit('toggleEntry', entry.id)"
+      />
+      <span
+        v-else
+        :class="mergeDataListUiClass(`${geometry.icon} shrink-0`, void 0, ui?.optionSpacer)"
+      />
+
+      <button
+        type="button"
+        class="flex min-w-0 flex-1 items-center text-left"
+        :class="geometry.toolbarGap"
+        @click="activateTreeEntry(entry)"
+      >
+        <UIcon
+          v-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} ${entry.truncate ? 'truncate' : ''}`,
+    void 0,
+    ui?.optionLabel
+  )
+"
+        >
+          {{ entry.label }}
+        </span>
+      </button>
+
+      <USkeleton
+        v-if="countLoading"
+        :class="[sizeClasses.skeletonCount, 'shrink-0 rounded-full']"
+      />
+      <span
+        v-else-if="entry.count != null"
+        :class="mergeDataListUiClass('shrink-0 text-muted', void 0, ui?.optionCount)"
+      >
+        {{ entry.count }}
+      </span>
+    </div>
+  </div>
+
+  <URadioGroup
+    v-else-if="items.length"
+    v-model="modelValue"
+    :items="items"
+    color="neutral"
+    variant="list"
+    :size="size"
+    :ui="{
+  root: 'w-full',
+  fieldset: mergeDataListUiClass('grid gap-0.5', void 0, ui?.list),
+  item: mergeDataListUiClass(
+    `flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated ${sizeClasses.option}`,
+    void 0,
+    ui?.option
+  ),
+  container: 'self-center',
+  base: 'cursor-pointer',
+  wrapper: 'min-w-0 flex-1',
+  label: mergeDataListUiClass(
+    `w-full cursor-pointer text-default ${sizeClasses.optionLabel}`,
+    void 0,
+    ui?.optionLabel
+  )
+}"
+  >
+    <template #label="{ item }">
+      <div
+        :class="['flex min-w-0 items-center', geometry.toolbarGap]"
+        :style="getTreeIndentStyle(item.depth)"
+      >
+        <span
+          v-if="item.expandable"
+          role="button"
+          tabindex="0"
+          :aria-label="item.expanded ? `Collapse ${item.label}` : `Expand ${item.label}`"
+          :aria-expanded="item.expanded"
+          :class="[
+  'flex shrink-0 items-center justify-center rounded-sm text-muted transition-transform hover:bg-accented',
+  sizeClasses.optionIcon,
+  item.expanded ? 'rotate-90' : ''
+]"
+          @pointerdown.stop.prevent
+          @click.stop.prevent="emit('toggleExpanded', item.id)"
+          @keydown.enter.stop.prevent="emit('toggleExpanded', item.id)"
+          @keydown.space.stop.prevent="emit('toggleExpanded', item.id)"
+        >
+          <UIcon name="i-lucide-chevron-right" :class="sizeClasses.optionIcon" />
+        </span>
+        <span v-else :class="[sizeClasses.optionIcon, 'shrink-0']" />
+
+        <UIcon
+          v-if="typeof item.icon === 'string'"
+          :name="item.icon"
+          :class="[sizeClasses.optionIcon, 'shrink-0 text-muted']"
+        />
+
+        <span class="min-w-0 flex-1" :class="item.truncate ? 'truncate' : ''">
+          {{ item.label }}
+        </span>
+        <USkeleton
+          v-if="countLoading"
+          :class="[sizeClasses.skeletonCount, 'shrink-0 rounded-full']"
+        />
+        <span v-else-if="item.count != null" class="shrink-0 text-muted">
+          {{ item.count }}
+        </span>
+      </div>
+    </template>
+  </URadioGroup>
+</template>

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

@@ -1,5 +1,5 @@
 import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
-type TreeEntry = {
+interface TreeEntry {
     id: string;
     label: string;
     value?: string | number | boolean;
@@ -13,10 +13,10 @@ type TreeEntry = {
     selected?: boolean;
     indeterminate?: boolean;
     truncate?: boolean;
-};
+}
 type __VLS_Props = {
     entries: TreeEntry[];
-    items: Array<{
+    items: {
         id: string;
         label: string;
         value: string;
@@ -28,7 +28,7 @@ type __VLS_Props = {
         expanded: boolean;
         selectable: boolean;
         disabled?: boolean;
-    }>;
+    }[];
     multiple: boolean;
     countLoading: boolean;
     selectedIcon?: string;

package/dist/runtime/table/components/filters/shared/{FilterPopoverShell.vue → filter-popover-shell.vue}

@@ -1,14 +1,21 @@
 <script setup>
 import UPopover from "@nuxt/ui/components/Popover.vue";
+import { computed } from "vue";
+import { resolveDataListPopoverContentClass } from "../../../utils";
 const props = defineProps({
   open: { type: Boolean, required: true },
   embedded: { type: Boolean, required: false },
   contentClass: { type: String, required: false },
   transitioning: { type: Boolean, required: false }
 });
+const resolvedContentClass = computed(
+  () => resolveDataListPopoverContentClass("fit", props.contentClass)
+);
 const emit = defineEmits(["updateOpen"]);
 function handleFocusOutside(event) {
-  if (props.transitioning) event.preventDefault();
+  if (props.transitioning) {
+    event.preventDefault();
+  }
 }
 </script>
 
@@ -25,7 +32,7 @@ function handleFocusOutside(event) {
   sideOffset: 8,
   onFocusOutside: handleFocusOutside
 }"
-    :ui="{ content: contentClass }"
+    :ui="{ content: resolvedContentClass }"
     @update:open="emit('updateOpen', $event)"
   >
     <slot />

package/dist/runtime/table/components/filters/shared/{FilterSearchablePanel.vue → filter-searchable-panel.vue}

@@ -31,7 +31,7 @@ const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size));
 </script>
 
 <template>
-  <div :class="mergeDataListUiClass('bg-default', void 0, ui?.editor)">
+  <div :class="mergeDataListUiClass('w-full min-w-0 max-w-full bg-default', void 0, ui?.editor)">
     <div
       v-if="searchable"
       :class="

package/dist/runtime/table/components/filters/shared/{FilterStageTransition.vue → filter-stage-transition.vue}

@@ -7,9 +7,13 @@ const emit = defineEmits(["settled"]);
 </script>
 
 <template>
-  <div class="grid overflow-hidden">
+  <div data-filter-stage class="grid w-full min-w-0 overflow-hidden">
     <Transition :name="`filter-stage-${direction}`" @after-leave="emit('settled')">
-      <div :key="stageKey" class="col-start-1 row-start-1 min-w-0">
+      <div
+        :key="stageKey"
+        data-filter-stage-content
+        class="col-start-1 row-start-1 w-full min-w-0 max-w-full"
+      >
         <slot />
       </div>
     </Transition>

package/dist/runtime/table/components/filters/shared/{FilterTriggerTag.d.vue.ts → filter-trigger-tag.d.vue.ts}

@@ -4,13 +4,19 @@ type __VLS_Props = {
     leadingIcon: string;
     operator: TableFilterOperator;
     operatorLabel: string;
-    operatorItems: Array<{
+    operatorItems: {
         label: string;
         value: TableFilterOperator;
-    }>;
+    }[];
     previewTags?: string[];
+    previewEntries?: {
+        label: string;
+        icon?: string;
+        color?: string;
+    }[];
     previewSummary?: string;
     active?: boolean;
+    dynamic?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     clear: () => any;

package/dist/runtime/table/components/filters/shared/filter-trigger-tag.vue

@@ -0,0 +1,227 @@
+<script setup>
+import UBadge from "@nuxt/ui/components/Badge.vue";
+import UButton from "@nuxt/ui/components/Button.vue";
+import UFieldGroup from "@nuxt/ui/components/FieldGroup.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import {
+  mergeDataListProps,
+  mergeDataListUiClass,
+  resolveDataListControlGeometry,
+  resolveDataListNestedControlSize
+} from "../../../utils";
+const props = defineProps({
+  label: { type: String, required: true },
+  leadingIcon: { type: String, required: true },
+  operator: { type: String, required: true },
+  operatorLabel: { type: String, required: true },
+  operatorItems: { type: Array, required: true },
+  previewTags: { type: Array, required: false },
+  previewEntries: { type: Array, required: false },
+  previewSummary: { type: String, required: false },
+  active: { type: Boolean, required: false },
+  dynamic: { type: Boolean, required: false }
+});
+const emit = defineEmits(["activate", "requestMatchMode", "clear"]);
+const showMatchMode = computed(() => props.operatorItems.length > 1);
+const showOperatorPickerFirst = computed(() => !props.active && showMatchMode.value);
+const dataListUi = useDataListUi();
+const size = computed(() => dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value);
+const nestedSize = computed(() => resolveDataListNestedControlSize(size.value));
+const geometry = computed(() => resolveDataListControlGeometry(size.value));
+const ui = computed(() => dataListUi.ui.value.filterTags?.ui);
+const controlProps = computed(() => dataListUi.ui.value.filterTags?.props);
+const triggerProps = computed(
+  () => mergeDataListProps(
+    { color: "neutral", size: size.value, variant: "ghost" },
+    controlProps.value?.trigger
+  )
+);
+const activeProps = computed(
+  () => mergeDataListProps(
+    { color: "neutral", size: size.value, variant: "ghost" },
+    controlProps.value?.activeTrigger
+  )
+);
+const operatorProps = computed(
+  () => mergeDataListProps(activeProps.value, controlProps.value?.operatorTrigger)
+);
+const valueProps = computed(
+  () => mergeDataListProps(activeProps.value, controlProps.value?.value)
+);
+const dismissProps = computed(
+  () => mergeDataListProps(activeProps.value, controlProps.value?.dismiss)
+);
+const badgeProps = computed(
+  () => controlProps.value?.previewBadge ? mergeDataListProps(
+    { color: "neutral", size: nestedSize.value, variant: "subtle" },
+    controlProps.value.previewBadge
+  ) : null
+);
+const DORMANT_CLASS = "nut-dl-tag nut-dl-tag--dormant min-w-0 shrink-0 border border-dashed border-[var(--ui-border-accented)] text-muted hover:text-default hover:border-[var(--ui-text-dimmed)]";
+const previewItems = computed(
+  () => props.previewEntries?.length ? props.previewEntries : (props.previewTags ?? []).map((label) => ({ label }))
+);
+const labelClass = computed(() => `flex min-w-0 items-center ${geometry.value.toolbarGap}`);
+</script>
+
+<template>
+  <div
+    :class="mergeDataListUiClass('inline-flex min-w-0 max-w-full align-top', void 0, ui?.root)"
+  >
+    <template v-if="showOperatorPickerFirst">
+      <UButton
+        v-bind="triggerProps"
+        :ui="{ base: mergeDataListUiClass(DORMANT_CLASS, void 0, ui?.trigger) }"
+        @click.stop="emit('requestMatchMode')"
+      >
+        <span :class="mergeDataListUiClass(labelClass, void 0, ui?.label)">
+          <UIcon
+            v-if="controlProps?.icon !== false"
+            :name="props.leadingIcon"
+            :class="[geometry.icon, 'shrink-0 text-muted']"
+          />
+          <span class="truncate">{{ props.label }}</span>
+        </span>
+      </UButton>
+    </template>
+
+    <UButton
+      v-else-if="!props.active"
+      v-bind="triggerProps"
+      :ui="{ base: mergeDataListUiClass(DORMANT_CLASS, void 0, ui?.trigger) }"
+      @click.stop="emit('activate', props.operator)"
+    >
+      <span :class="mergeDataListUiClass(labelClass, void 0, ui?.label)">
+        <UIcon
+          v-if="controlProps?.icon !== false"
+          :name="props.leadingIcon"
+          :class="[geometry.icon, 'shrink-0 text-muted']"
+        />
+        <span class="truncate">{{ props.label }}</span>
+      </span>
+    </UButton>
+
+    <UFieldGroup
+      v-else
+      :size="size"
+      :class="
+  mergeDataListUiClass(
+    'nut-dl-tag nut-dl-tag--active min-w-0 max-w-full rounded-md bg-elevated ring ring-inset ring-default',
+    void 0,
+    ui?.activeRoot
+  )
+"
+    >
+      <UButton
+        v-bind="activeProps"
+        :ui="{
+  base: mergeDataListUiClass(
+    'nut-dl-tag__label min-w-0 shrink-0 pr-1 text-muted hover:bg-transparent',
+    void 0,
+    ui?.activeTrigger
+  )
+}"
+        @click.stop="emit('activate', props.operator)"
+      >
+        <span :class="mergeDataListUiClass(labelClass, void 0, ui?.label)">
+          <UIcon
+            v-if="controlProps?.icon !== false"
+            :name="props.leadingIcon"
+            :class="[geometry.icon, 'shrink-0 text-muted']"
+          />
+          <span class="truncate">{{ props.label }}</span>
+        </span>
+      </UButton>
+
+      <UButton
+        v-if="showMatchMode"
+        v-bind="operatorProps"
+        :label="props.operatorLabel"
+        trailing-icon="i-lucide-chevron-down"
+        :ui="{ base: mergeDataListUiClass('shrink-0', void 0, ui?.operatorTrigger) }"
+        @click.stop="emit('requestMatchMode')"
+      />
+
+      <UButton
+        v-bind="valueProps"
+        :ui="{
+  base: mergeDataListUiClass(
+    'nut-dl-tag__value min-w-0 max-w-[min(22rem,45vw)] overflow-hidden px-1 hover:bg-transparent',
+    void 0,
+    ui?.value
+  )
+}"
+        @click.stop="emit('activate', props.operator)"
+      >
+        <span class="flex min-w-0 items-center gap-[5px] overflow-hidden">
+          <template v-if="badgeProps">
+            <UBadge
+              v-for="item in previewItems"
+              :key="item.label"
+              v-bind="badgeProps"
+              class="nut-dl-tag__badge max-w-28 min-w-0 shrink"
+            >
+              <span class="truncate">{{ item.label }}</span>
+            </UBadge>
+          </template>
+          <template v-else>
+            <template v-for="(item, index) in previewItems" :key="item.label">
+              <span
+                v-if="index && !item.color"
+                class="nut-dl-tag__sep text-dimmed"
+                aria-hidden="true"
+                >·</span
+              >
+              <span
+                class="nut-dl-tag__text flex min-w-0 items-center gap-[5px] font-medium text-highlighted"
+              >
+                <span
+                  v-if="item.color"
+                  class="nut-dl-tag__dot size-[7px] shrink-0 rounded-full"
+                  :style="{ background: item.color }"
+                  aria-hidden="true"
+                />
+                <UIcon
+                  v-else-if="item.icon"
+                  :name="item.icon"
+                  class="size-3.5 shrink-0 text-muted"
+                />
+                <span class="max-w-40 truncate">{{ item.label }}</span>
+              </span>
+            </template>
+          </template>
+
+          <span v-if="props.previewSummary" class="min-w-0 truncate">
+            {{ props.previewSummary }}
+          </span>
+
+          <span
+            v-if="!(props.previewTags?.length ?? 0) && !props.previewSummary"
+            class="truncate text-muted"
+          >
+            Select…
+          </span>
+        </span>
+      </UButton>
+
+      <UButton
+        v-bind="dismissProps"
+        :icon="props.dynamic ? 'i-lucide-x' : 'i-lucide-chevron-down'"
+        square
+        :aria-label="props.dynamic ? 'Clear filter' : props.label"
+        :ui="{
+  base: mergeDataListUiClass(
+    'nut-dl-tag__dismiss shrink-0 pl-0.5 text-dimmed hover:bg-transparent hover:text-default',
+    void 0,
+    ui?.dismiss
+  ),
+  leadingIcon: 'size-3'
+}"
+        @pointerdown.stop
+        @click.stop="props.dynamic ? emit('clear') : emit('activate', props.operator)"
+      />
+    </UFieldGroup>
+  </div>
+</template>

package/dist/runtime/table/components/filters/shared/{FilterTriggerTag.vue.d.ts → filter-trigger-tag.vue.d.ts}

@@ -4,13 +4,19 @@ type __VLS_Props = {
     leadingIcon: string;
     operator: TableFilterOperator;
     operatorLabel: string;
-    operatorItems: Array<{
+    operatorItems: {
         label: string;
         value: TableFilterOperator;
-    }>;
+    }[];
     previewTags?: string[];
+    previewEntries?: {
+        label: string;
+        icon?: string;
+        color?: string;
+    }[];
     previewSummary?: string;
     active?: boolean;
+    dynamic?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     clear: () => any;

package/dist/runtime/{spreadsheet/components/shared/SpreadsheetValuePreview.d.vue.ts → table/components/filters/sheet/filter-sheet.d.vue.ts}

@@ -1,9 +1,8 @@
 type __VLS_Props = {
-    value: unknown;
-    compact?: boolean;
+    showClear?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    compact: boolean;
+    showClear: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;