nuxt-ui-tools 0.1.0 → 0.1.2

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;

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

@@ -0,0 +1,47 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { mergeDataListUiClass, resolveFilterEditorSizeClasses } from "../../../utils";
+const props = defineProps({
+  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 = resolveFilterEditorSizeClasses(props.size);
+</script>
+
+<template>
+  <div :class="mergeDataListUiClass(sizeClasses.scrollArea, void 0, ui?.list)">
+    <button
+      v-for="item in items"
+      :key="item.value"
+      type="button"
+      :class="
+  mergeDataListUiClass(
+    `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="
+  mergeDataListUiClass(
+    `min-w-0 flex-1 truncate text-default ${sizeClasses.optionLabel}`,
+    void 0,
+    ui?.operatorLabel
+  )
+"
+      >
+        {{ item.label }}
+      </span>
+      <UIcon
+        v-if="item.value === selected"
+        name="i-lucide-check"
+        :class="`${sizeClasses.optionIcon} shrink-0 text-muted`"
+      />
+    </button>
+  </div>
+</template>

package/dist/runtime/table/components/filters/shared/FilterMatchModePanel.vue.d.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;

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

@@ -1,4 +1,4 @@
-import type { TableResolvedFilterOptionEntry } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterEditorUi, TableResolvedFilterOptionEntry } from '../../../types/index.js';
 interface FilterOptionMultipleListSection {
     key: string;
     entries: Array<TableResolvedFilterOptionEntry & {
@@ -13,6 +13,8 @@ type __VLS_Props = {
     countLoading: boolean;
     selectedIcon?: string;
     truncate?: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (options: {

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

@@ -1,21 +1,28 @@
 <script setup>
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { mergeDataListUiClass } from "../../../utils";
 import FilterOptionRow from "./FilterOptionRow.vue";
 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 }
+  truncate: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
 });
 const emit = defineEmits(["select"]);
+const dataListUi = useDataListUi();
+const ui = computed(() => props.ui ?? dataListUi.ui.value.filterTags?.ui);
 </script>
 
 <template>
-  <div class="grid gap-0.5">
+  <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="my-1 border-t border-default"
+        :class="mergeDataListUiClass('my-1 border-t border-default', void 0, ui?.listDivider)"
       />
 
       <button
@@ -33,6 +40,8 @@ const emit = defineEmits(["select"]);
           :leading-icon="entry.icon"
           :selected-icon="props.selectedIcon"
           :truncate="props.truncate"
+          :size="props.size"
+          :ui="props.ui"
         />
       </button>
     </template>

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

@@ -1,4 +1,4 @@
-import type { TableResolvedFilterOptionEntry } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterEditorUi, TableResolvedFilterOptionEntry } from '../../../types/index.js';
 interface FilterOptionMultipleListSection {
     key: string;
     entries: Array<TableResolvedFilterOptionEntry & {
@@ -13,6 +13,8 @@ type __VLS_Props = {
     countLoading: boolean;
     selectedIcon?: string;
     truncate?: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (options: {

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

@@ -1,4 +1,5 @@
 import type { useOptionFilterEditorState } from '../../../composables/use-option-filter-editor-state.js';
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 interface FilterOptionMultipleListSection {
     key: string;
     entries: Array<ReturnType<typeof useOptionFilterEditorState>['displayEntries']['value'][number]>;
@@ -7,6 +8,8 @@ interface FilterOptionMultipleListSection {
 type __VLS_Props = {
     state: ReturnType<typeof useOptionFilterEditorState>;
     sections?: FilterOptionMultipleListSection[];
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 type __VLS_ModelProps = {
     'searchQuery'?: string;

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

@@ -6,7 +6,9 @@ import FilterOptionTreeContent from "./FilterOptionTreeContent.vue";
 import FilterSearchablePanel from "./FilterSearchablePanel.vue";
 const props = defineProps({
   state: { type: null, required: true },
-  sections: { type: Array, required: false }
+  sections: { type: Array, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
 });
 const searchQuery = defineModel("searchQuery", { type: String, ...{
   default: ""
@@ -39,6 +41,8 @@ function handleSelect(options) {
   !props.state.optionSource.isLoading.value && !props.state.displayEntries.value.length && !props.state.visibleTreeEntries.value.length
 "
     :empty-label="props.state.filterUi.value.labels.empty"
+    :size="props.size"
+    :ui="props.ui"
   >
     <template v-if="props.state.filterUi.value.presentation === 'tree'">
       <template v-if="props.state.optionSource.isLoading.value">
@@ -61,6 +65,8 @@ function handleSelect(options) {
   props.state.filterUi.value.row.showCounts && props.state.optionSource.isCountLoading.value
 "
         :selected-icon="props.state.filterUi.value.row.selectedIcon"
+        :size="props.size"
+        :ui="props.ui"
         @toggle-entry="emit('toggleTreeEntry', $event)"
         @toggle-expanded="emit('toggleExpanded', $event)"
       />
@@ -86,6 +92,8 @@ function handleSelect(options) {
         :count-loading="props.state.optionSource.isCountLoading.value"
         :selected-icon="props.state.filterUi.value.row.selectedIcon"
         :truncate="props.state.filterUi.value.row.truncate"
+        :size="props.size"
+        :ui="props.ui"
         @select="handleSelect($event)"
       />
     </template>
@@ -108,6 +116,8 @@ function handleSelect(options) {
         :count-loading="
   props.state.filterUi.value.row.showCounts && props.state.optionSource.isCountLoading.value
 "
+        :size="props.size"
+        :ui="props.ui"
       />
     </template>
   </FilterSearchablePanel>

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

@@ -1,4 +1,5 @@
 import type { useOptionFilterEditorState } from '../../../composables/use-option-filter-editor-state.js';
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 interface FilterOptionMultipleListSection {
     key: string;
     entries: Array<ReturnType<typeof useOptionFilterEditorState>['displayEntries']['value'][number]>;
@@ -7,6 +8,8 @@ interface FilterOptionMultipleListSection {
 type __VLS_Props = {
     state: ReturnType<typeof useOptionFilterEditorState>;
     sections?: FilterOptionMultipleListSection[];
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 type __VLS_ModelProps = {
     'searchQuery'?: string;