nuxt-ui-tools 0.1.0 → 0.1.1

package/dist/runtime/table/components/data-list/DataListFilterTags.d.vue.ts

@@ -14,6 +14,8 @@ declare var __VLS_1: {
     close: () => void;
     toggle: () => void;
     openState: boolean;
+    stage: "editor" | "match-mode" | "picker";
+    definition: import("../../types/index.js").TableUiFilterDefinition | undefined;
     triggerProps: {
         type: string;
         'aria-expanded': boolean;

package/dist/runtime/table/components/data-list/DataListFilterTags.vue.d.ts

@@ -14,6 +14,8 @@ declare var __VLS_1: {
     close: () => void;
     toggle: () => void;
     openState: boolean;
+    stage: "editor" | "match-mode" | "picker";
+    definition: import("../../types/index.js").TableUiFilterDefinition | undefined;
     triggerProps: {
         type: string;
         'aria-expanded': boolean;

package/dist/runtime/table/components/data-list/DataListLayoutSwitch.vue

@@ -1,6 +1,7 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
 import UFieldGroup from "@nuxt/ui/components/FieldGroup.vue";
+import UTooltip from "@nuxt/ui/components/Tooltip.vue";
 import { computed } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useDataListUi } from "../../composables/use-data-list-ui";
@@ -37,24 +38,29 @@ function setLayout(layout) {
       :size="resolvedSize"
       :class="resolvedUi.root"
     >
-      <UButton
+      <UTooltip
         v-for="layout in order"
         :key="layout"
-        color="neutral"
-        :variant="internals.controls.tableLayout.value === layout ? 'subtle' : 'outline'"
-        :size="resolvedSize"
-        :icon="layout === 'table' ? 'i-lucide-table-properties' : 'i-lucide-layout-grid'"
-        :label="labels ? layout === 'table' ? 'Table' : 'Grid' : void 0"
-        :aria-label="layout === 'table' ? t('table.header.tableView') : t('table.header.gridView')"
-        :title="layout === 'table' ? t('table.header.tableView') : t('table.header.gridView')"
-        :ui="{
+        :text="layout === 'table' ? t('table.header.tableView') : t('table.header.gridView')"
+      >
+        <UButton
+          color="neutral"
+          :variant="internals.controls.tableLayout.value === layout ? 'subtle' : 'outline'"
+          :size="resolvedSize"
+          :icon="layout === 'table' ? 'i-lucide-table-properties' : 'i-lucide-layout-grid'"
+          :label="labels ? layout === 'table' ? 'Table' : 'Grid' : void 0"
+          :aria-label="
+  layout === 'table' ? t('table.header.tableView') : t('table.header.gridView')
+"
+          :ui="{
   base: resolvedUi.trigger,
   label: resolvedUi.triggerLabel,
   leadingIcon: resolvedUi.triggerLeadingIcon,
   trailingIcon: resolvedUi.triggerTrailingIcon
 }"
-        @click="setLayout(layout)"
-      />
+          @click="setLayout(layout)"
+        />
+      </UTooltip>
     </UFieldGroup>
   </slot>
 </template>

package/dist/runtime/table/components/data-list/DataListRoot.vue

@@ -4,6 +4,7 @@ import { computed, onBeforeUnmount, onMounted } from "vue";
 import { provideUiToolsLocale, useUiToolsLocaleRef } from "#ui-tools/i18n";
 import { provideDataListUi } from "../../composables/use-data-list-ui";
 import { provideTableInternals } from "../../composables/use-table-internals";
+import { mergeDataListUiConfig } from "../../utils";
 const props = defineProps({
   table: { type: Object, required: true },
   locale: { type: Object, required: false },
@@ -15,7 +16,7 @@ provideTableInternals(props.table.__internals);
 provideUiToolsLocale(useUiToolsLocaleRef(computed(() => props.locale)));
 provideDataListUi(
   computed(
-    () => mergeDataListUi(resolveAppDataListUi(appConfig), props.ui, props.density)
+    () => mergeDataListUiConfig(resolveAppDataListUi(appConfig), props.ui, props.density)
   )
 );
 onMounted(() => props.table.__internals.startup.scheduleStart());
@@ -29,51 +30,6 @@ function resolveAppDataListUi(config) {
 function isDataListUiConfig(value) {
   return Boolean(value) && typeof value === "object";
 }
-function mergeDataListUi(appUi, componentUi, density) {
-  return {
-    ...appUi,
-    ...componentUi,
-    density: density ?? componentUi?.density ?? appUi?.density,
-    control: { ...appUi?.control, ...componentUi?.control },
-    default: mergeUiConfig(appUi?.default, componentUi?.default),
-    search: mergeSearchConfig(appUi?.search, componentUi?.search),
-    filterTags: mergePartConfig(appUi?.filterTags, componentUi?.filterTags),
-    addFilter: mergePartConfig(appUi?.addFilter, componentUi?.addFilter),
-    filterPanel: mergePartConfig(appUi?.filterPanel, componentUi?.filterPanel),
-    clearFilters: mergePartConfig(appUi?.clearFilters, componentUi?.clearFilters),
-    resultCount: mergeUiConfig(appUi?.resultCount, componentUi?.resultCount),
-    columnPanel: mergePartConfig(appUi?.columnPanel, componentUi?.columnPanel),
-    sortMenu: mergePartConfig(appUi?.sortMenu, componentUi?.sortMenu),
-    layoutSwitch: mergePartConfig(appUi?.layoutSwitch, componentUi?.layoutSwitch),
-    refresh: mergePartConfig(appUi?.refresh, componentUi?.refresh),
-    content: mergeUiConfig(appUi?.content, componentUi?.content),
-    table: mergeUiConfig(appUi?.table, componentUi?.table),
-    grid: mergeUiConfig(appUi?.grid, componentUi?.grid),
-    pagination: mergePartConfig(appUi?.pagination, componentUi?.pagination),
-    infiniteLoader: mergePartConfig(appUi?.infiniteLoader, componentUi?.infiniteLoader)
-  };
-}
-function mergeUiConfig(appDefaults, componentConfig) {
-  return {
-    ...appDefaults,
-    ...componentConfig,
-    ui: { ...appDefaults?.ui, ...componentConfig?.ui }
-  };
-}
-function mergePartConfig(appDefaults, componentConfig) {
-  return {
-    ...appDefaults,
-    ...componentConfig,
-    ui: { ...appDefaults?.ui, ...componentConfig?.ui }
-  };
-}
-function mergeSearchConfig(appDefaults, componentConfig) {
-  return {
-    ...appDefaults,
-    ...componentConfig,
-    ui: { ...appDefaults?.ui, ...componentConfig?.ui }
-  };
-}
 </script>
 
 <template>

package/dist/runtime/table/components/data-list/DataListSortMenu.vue

@@ -33,6 +33,10 @@ const sortLabels = computed(() => {
   return labels;
 });
 const activeKey = computed(() => internals.tableColumns.sortingState.value.key);
+const activeDirection = computed(() => internals.tableColumns.sortingState.value.dir);
+const directionIcon = computed(
+  () => activeDirection.value === "asc" ? "i-lucide-arrow-up-narrow-wide" : "i-lucide-arrow-down-wide-narrow"
+);
 const sortKeys = computed(() => [
   .../* @__PURE__ */ new Set([
     ...internals.tableColumns.sortKeys.value,
@@ -68,6 +72,7 @@ function humanize(value) {
 
 <template>
   <UDropdownMenu
+    :size="resolvedSize"
     :items="items"
     :content="{ align: 'end', sideOffset: 8 }"
     :ui="{
@@ -91,6 +96,7 @@ function humanize(value) {
         variant="outline"
         :size="resolvedSize"
         :label="`${label ?? t('table.controls.sort')}${activeLabel ? `: ${activeLabel}` : ''}`"
+        :icon="directionIcon"
         trailing-icon="i-lucide-chevron-down"
         :ui="{
   base: resolvedUi.trigger,

package/dist/runtime/table/components/filters/shared/DynamicFilterPicker.d.vue.ts

@@ -1,6 +1,7 @@
 import type { DataListAddFilterUi, DataListControlSize, TableUiFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definitions: TableUiFilterDefinition[];
+    sessionDefinition?: TableUiFilterDefinition;
     getLabel: (definition: TableUiFilterDefinition) => string;
     size?: DataListControlSize;
     ui?: DataListAddFilterUi;
@@ -13,6 +14,8 @@ declare var __VLS_10: {
     close: typeof close;
     toggle: typeof toggle;
     openState: boolean;
+    stage: "editor" | "match-mode" | "picker";
+    definition: TableUiFilterDefinition | undefined;
     triggerProps: {
         type: string;
         'aria-expanded': boolean;
@@ -23,8 +26,10 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (key: string) => any;
+    release: (key: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((key: string) => any) | undefined;
+    onRelease?: ((key: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/table/components/filters/shared/DynamicFilterPicker.vue

@@ -2,22 +2,50 @@
 import UButton from "@nuxt/ui/components/Button.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import UPopover from "@nuxt/ui/components/Popover.vue";
-import { computed, ref } from "vue";
+import { computed, nextTick, ref } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useDataListUi } from "../../../composables/use-data-list-ui";
-import { mergeDataListUiClass, resolveFilterTriggerIcon } from "../../../utils";
+import { useTableInternals } from "../../../composables/use-table-internals";
+import {
+  mergeDataListUiClass,
+  resolveFilterEditorSizeClasses,
+  resolveFilterTriggerIcon
+} from "../../../utils";
+import { resolveFilterTagComponent } from "../tags/registry";
+import FilterMatchModePanel from "./FilterMatchModePanel.vue";
 import FilterSearchablePanel from "./FilterSearchablePanel.vue";
+import FilterStageTransition from "./FilterStageTransition.vue";
 const props = defineProps({
   definitions: { type: Array, required: true },
+  sessionDefinition: { type: null, required: false },
   getLabel: { type: Function, required: true },
   size: { type: String, required: false },
   ui: { type: Object, required: false }
 });
-const emit = defineEmits(["select"]);
+const emit = defineEmits(["select", "release"]);
 const { t } = useUiToolsLocale();
+const internals = useTableInternals();
 const dataListUi = useDataListUi();
 const isOpen = ref(false);
 const searchQuery = ref("");
+const selectedKey = ref(null);
+const pendingOperator = ref();
+const stage = ref("picker");
+const stageDirection = ref("forward");
+const stageTransitioning = ref(false);
+let releaseAfterCommit = false;
+const size = computed(
+  () => props.size ?? dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value
+);
+const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size.value));
+const selectedDefinition = computed(() => {
+  if (selectedKey.value == null) 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 })
+);
 const filteredDefinitions = computed(() => {
   const search = searchQuery.value.trim().toLowerCase();
   if (!search) return props.definitions;
@@ -25,19 +53,65 @@ const filteredDefinitions = computed(() => {
     (definition) => props.getLabel(definition).toLowerCase().includes(search)
   );
 });
-function handleSelect(key) {
+async function handleSelect(key) {
+  selectedKey.value = key;
+  searchQuery.value = "";
+  const items = internals.filters.getFilterOperatorOptions({ key });
+  if (items.length > 1) {
+    pendingOperator.value = internals.filters.getFilterOperator({ key });
+    stageDirection.value = "forward";
+    stageTransitioning.value = true;
+    stage.value = "match-mode";
+    return;
+  }
+  const defaultOperator = items[0]?.value;
+  if (!defaultOperator) return;
+  await openEditor(defaultOperator);
+}
+async function openEditor(operator) {
+  const key = selectedKey.value;
+  if (!key) return;
+  pendingOperator.value = operator;
   emit("select", key);
+  await nextTick();
+  stageDirection.value = "forward";
+  stageTransitioning.value = true;
+  stage.value = "editor";
+}
+function handleFocusOutside(event) {
+  if (stageTransitioning.value) event.preventDefault();
+}
+function handleOpenChange(nextOpen) {
+  isOpen.value = nextOpen;
+  if (!nextOpen && !releaseAfterCommit) releaseSession();
+}
+function handleSessionClosed() {
   isOpen.value = false;
+  releaseAfterCommit = true;
+  queueMicrotask(() => {
+    releaseSession();
+    releaseAfterCommit = false;
+  });
+}
+function releaseSession() {
+  const key = selectedKey.value;
+  selectedKey.value = null;
+  pendingOperator.value = void 0;
   searchQuery.value = "";
+  stage.value = "picker";
+  stageDirection.value = "backward";
+  if (key) emit("release", key);
 }
 function open() {
   isOpen.value = true;
 }
 function close() {
   isOpen.value = false;
+  releaseSession();
 }
 function toggle() {
-  isOpen.value = !isOpen.value;
+  if (isOpen.value) close();
+  else open();
 }
 </script>
 
@@ -45,89 +119,138 @@ function toggle() {
   <UPopover
     :open="isOpen"
     mode="click"
-    :content="{ side: 'bottom', align: 'start', sideOffset: 8 }"
+    :content="{
+  side: 'bottom',
+  align: 'start',
+  sideOffset: 8,
+  onFocusOutside: handleFocusOutside
+}"
     :ui="{
   content: mergeDataListUiClass(
-    'w-fit max-w-[calc(100vw-1rem)] overflow-hidden p-0 shadow-none',
+    'w-fit max-w-[calc(100vw-1rem)] overflow-hidden p-0',
     void 0,
     ui?.popoverContent
   )
 }"
-    @update:open="isOpen = $event"
+    @update:open="handleOpenChange"
   >
     <slot
+      v-if="$slots.trigger"
       name="trigger"
       :open="open"
       :close="close"
       :toggle="toggle"
       :open-state="isOpen"
-      :trigger-props="{ type: 'button', 'aria-expanded': isOpen }"
-    >
-      <UButton
-        color="neutral"
-        variant="outline"
-        :size="props.size ?? dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value"
-        icon="i-lucide-plus"
-        :label="t('table.controls.addFilter')"
-        :ui="{
-  base: mergeDataListUiClass('shrink-0 border-dashed', void 0, ui?.trigger)
+      :stage="stage"
+      :definition="selectedDefinition"
+      :trigger-props="{
+  type: 'button',
+  'aria-expanded': isOpen
+}"
+    />
+    <UButton
+      v-else
+      color="neutral"
+      variant="outline"
+      :size="size"
+      :icon="selectedDefinition ? resolveFilterTriggerIcon(selectedDefinition) : 'i-lucide-plus'"
+      :label="selectedDefinition ? getLabel(selectedDefinition) : t('table.controls.addFilter')"
+      :ui="{
+  base: mergeDataListUiClass(
+    `shrink-0 ${selectedDefinition ? '' : 'border-dashed'}`,
+    void 0,
+    ui?.trigger
+  )
 }"
-      />
-    </slot>
+    />
 
     <template #content>
-      <div
-        :class="
+      <FilterStageTransition
+        :stage-key="`${stage}:${selectedKey ?? ''}:${pendingOperator ?? ''}`"
+        :direction="stageDirection"
+        @settled="stageTransitioning = false"
+      >
+        <div
+          v-if="stage === 'picker'"
+          :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
+        >
+          <FilterSearchablePanel
+            v-model:search-query="searchQuery"
+            searchable
+            autofocus
+            :search-placeholder="t('table.controls.searchFilters')"
+            :show-empty="!filteredDefinitions.length"
+            :empty-label="t('table.controls.noMatchingFilters')"
+            max-height-class="max-h-72"
+            :size="size"
+            :ui="ui"
+          >
+            <button
+              v-for="definition in filteredDefinitions"
+              :key="definition.key"
+              type="button"
+              :class="
   mergeDataListUiClass(
-    'w-fit min-w-[18rem] max-w-[min(24rem,calc(100vw-1rem))]',
+    `flex min-w-0 items-center rounded-md text-left transition-colors hover:bg-elevated/70 ${sizeClasses.option}`,
     void 0,
-    ui?.panel
+    ui?.option
   )
 "
-      >
-        <FilterSearchablePanel
-          v-model:search-query="searchQuery"
-          searchable
-          autofocus
-          :search-placeholder="t('table.controls.searchFilters')"
-          :show-empty="!filteredDefinitions.length"
-          :empty-label="t('table.controls.noMatchingFilters')"
-          max-height-class="max-h-72"
-        >
-          <button
-            v-for="definition in filteredDefinitions"
-            :key="definition.key"
-            type="button"
-            :class="
+              @click="handleSelect(definition.key)"
+            >
+              <UIcon
+                :name="resolveFilterTriggerIcon(definition)"
+                :class="
   mergeDataListUiClass(
-    'flex min-w-0 items-center gap-3 rounded-md px-3 py-2 text-left transition-colors hover:bg-elevated/70',
+    `${sizeClasses.optionIcon} shrink-0 text-muted`,
     void 0,
-    ui?.option
+    ui?.optionIcon
   )
 "
-            @click="handleSelect(definition.key)"
-          >
-            <UIcon
-              :name="resolveFilterTriggerIcon(definition)"
-              :class="mergeDataListUiClass('size-4 shrink-0 text-muted', void 0, ui?.optionIcon)"
-            />
-            <span
-              :class="
+              />
+              <span
+                :class="
   mergeDataListUiClass(
-    'min-w-0 flex-1 truncate text-sm text-default',
+    `min-w-0 flex-1 truncate text-default ${sizeClasses.optionLabel}`,
     void 0,
     ui?.optionLabel
   )
 "
-            >
-              {{ getLabel(definition) }}
-            </span>
-            <span :class="mergeDataListUiClass('text-muted', void 0, ui?.optionTrailingIcon)">
-              <UIcon name="i-lucide-arrow-right" class="size-4" />
-            </span>
-          </button>
-        </FilterSearchablePanel>
-      </div>
+              >
+                {{ getLabel(definition) }}
+              </span>
+              <span :class="mergeDataListUiClass('text-muted', void 0, ui?.optionTrailingIcon)">
+                <UIcon name="i-lucide-arrow-right" class="size-4" />
+              </span>
+            </button>
+          </FilterSearchablePanel>
+        </div>
+
+        <div
+          v-else-if="stage === 'match-mode'"
+          :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
+        >
+          <FilterMatchModePanel
+            :items="operatorItems"
+            :selected="pendingOperator"
+            :size="size"
+            :ui="ui"
+            @select="openEditor"
+          />
+        </div>
+
+        <component
+          :is="resolveFilterTagComponent(sessionDefinition)"
+          v-else-if="stage === 'editor' && sessionDefinition"
+          :definition="sessionDefinition"
+          dynamic
+          session
+          embedded
+          :initial-operator="pendingOperator"
+          @dismiss="handleSessionClosed"
+          @session-closed="handleSessionClosed"
+        />
+      </FilterStageTransition>
     </template>
   </UPopover>
 </template>

package/dist/runtime/table/components/filters/shared/DynamicFilterPicker.vue.d.ts

@@ -1,6 +1,7 @@
 import type { DataListAddFilterUi, DataListControlSize, TableUiFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definitions: TableUiFilterDefinition[];
+    sessionDefinition?: TableUiFilterDefinition;
     getLabel: (definition: TableUiFilterDefinition) => string;
     size?: DataListControlSize;
     ui?: DataListAddFilterUi;
@@ -13,6 +14,8 @@ declare var __VLS_10: {
     close: typeof close;
     toggle: typeof toggle;
     openState: boolean;
+    stage: "editor" | "match-mode" | "picker";
+    definition: TableUiFilterDefinition | undefined;
     triggerProps: {
         type: string;
         'aria-expanded': boolean;
@@ -23,8 +26,10 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (key: string) => any;
+    release: (key: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((key: string) => any) | undefined;
+    onRelease?: ((key: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/table/components/filters/shared/FilterMatchModeButton.d.vue.ts

@@ -1,4 +1,4 @@
-import type { TableFilterOperator } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterEditorUi, TableFilterOperator } from '../../../types/index.js';
 type __VLS_Props = {
     label: string;
     items?: Array<{
@@ -6,6 +6,8 @@ type __VLS_Props = {
         value: TableFilterOperator;
     }>;
     variant?: 'default' | 'compact';
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (value: TableFilterOperator) => any;

package/dist/runtime/table/components/filters/shared/FilterMatchModeButton.vue

@@ -1,16 +1,30 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
 import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
-defineProps({
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { mergeDataListUiClass } from "../../../utils";
+const props = defineProps({
   label: { type: String, required: true },
   items: { type: Array, required: false, default: () => [] },
-  variant: { type: String, required: false, default: "default" }
+  variant: { type: String, required: false, default: "default" },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
 });
+const dataListUi = useDataListUi();
+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 emit = defineEmits(["select"]);
 </script>
 
 <template>
   <UDropdownMenu
+    :size="resolvedSize"
     :items="[
   items.map((item) => ({
     label: item.label,
@@ -18,15 +32,25 @@ const emit = defineEmits(["select"]);
   }))
 ]"
     :content="{ side: 'bottom', align: 'end', sideOffset: 6 }"
-    :ui="{ content: 'w-fit p-1 shadow-none' }"
+    :ui="{
+  content: mergeDataListUiClass('w-fit p-1', void 0, resolvedUi.operatorContent),
+  item: resolvedUi.operatorItem,
+  itemLabel: resolvedUi.operatorLabel
+}"
   >
     <UButton
       color="neutral"
       :variant="variant === 'compact' ? 'ghost' : 'outline'"
-      :size="variant === 'compact' ? 'sm' : 'md'"
+      :size="resolvedSize"
       :label="label"
       trailing-icon="i-lucide-chevron-down"
-      :class="variant === 'compact' ? 'px-2.5' : void 0"
+      :ui="{
+  base: mergeDataListUiClass(
+    variant === 'compact' ? 'px-2.5' : void 0,
+    void 0,
+    resolvedUi.operatorTrigger
+  )
+}"
       @pointerdown.stop
       @click.stop
     />

package/dist/runtime/table/components/filters/shared/FilterMatchModeButton.vue.d.ts

@@ -1,4 +1,4 @@
-import type { TableFilterOperator } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterEditorUi, TableFilterOperator } from '../../../types/index.js';
 type __VLS_Props = {
     label: string;
     items?: Array<{
@@ -6,6 +6,8 @@ type __VLS_Props = {
         value: TableFilterOperator;
     }>;
     variant?: 'default' | 'compact';
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (value: TableFilterOperator) => any;

package/dist/runtime/table/components/filters/shared/FilterMatchModePanel.d.vue.ts

@@ -0,0 +1,17 @@
+import type { DataListControlSize, DataListFilterEditorUi, TableFilterOperator } from '../../../types/index.js';
+type __VLS_Props = {
+    items: Array<{
+        label: string;
+        value: TableFilterOperator;
+    }>;
+    selected?: TableFilterOperator;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (value: TableFilterOperator) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((value: TableFilterOperator) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;