nuxt-ui-tools 0.1.0 → 0.1.2

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

@@ -1,3 +1,4 @@
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type __VLS_Props = {
     label: string;
     count?: number;
@@ -6,6 +7,8 @@ type __VLS_Props = {
     leadingIcon?: string;
     selectedIcon?: string;
     truncate?: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -2,35 +2,74 @@
 import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import USkeleton from "@nuxt/ui/components/Skeleton.vue";
-defineProps({
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { mergeDataListUiClass, resolveFilterEditorSizeClasses } from "../../../utils";
+const props = defineProps({
   label: { type: String, required: true },
   count: { type: Number, required: false },
   countLoading: { type: Boolean, required: false },
   selected: { type: Boolean, required: true },
   leadingIcon: { type: String, required: false },
   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 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));
 </script>
 
 <template>
   <div
-    class="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-elevated"
-    :class="selected ? 'bg-elevated text-highlighted' : 'text-default'"
+    :class="
+  mergeDataListUiClass(
+    `flex w-full items-center rounded-md text-left transition-colors hover:bg-elevated ${sizeClasses.option} ${selected ? 'bg-elevated text-highlighted' : 'text-default'}`,
+    void 0,
+    ui?.option
+  )
+"
   >
     <UCheckbox
       :model-value="selected"
       color="neutral"
-      size="md"
+      :size="size"
       tabindex="-1"
       :icon="selectedIcon"
-      :ui="{ base: '!rounded-md', indicator: '!rounded-none' }"
+      :ui="{ base: ui?.optionCheckbox }"
     />
 
-    <UIcon v-if="leadingIcon" :name="leadingIcon" class="size-4 shrink-0 text-muted" />
+    <UIcon
+      v-if="leadingIcon"
+      :name="leadingIcon"
+      :class="
+  mergeDataListUiClass(
+    `${sizeClasses.optionIcon} shrink-0 text-muted`,
+    void 0,
+    ui?.optionIcon
+  )
+"
+    />
 
-    <span class="min-w-0 flex-1" :class="truncate ?? true ? 'truncate' : ''">{{ label }}</span>
+    <span
+      :class="
+  mergeDataListUiClass(
+    `min-w-0 flex-1 ${sizeClasses.optionLabel} ${truncate ?? true ? 'truncate' : ''}`,
+    void 0,
+    ui?.optionLabel
+  )
+"
+      >{{ label }}</span
+    >
     <USkeleton v-if="countLoading" class="ml-3 h-3.5 w-6 shrink-0" />
-    <span v-else-if="count != null" class="ml-3 shrink-0 text-muted">{{ count }}</span>
+    <span
+      v-else-if="count != null"
+      :class="mergeDataListUiClass('ml-3 shrink-0 text-muted', void 0, ui?.optionCount)"
+      >{{ count }}</span
+    >
   </div>
 </template>

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

@@ -1,3 +1,4 @@
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type __VLS_Props = {
     label: string;
     count?: number;
@@ -6,6 +7,8 @@ type __VLS_Props = {
     leadingIcon?: string;
     selectedIcon?: string;
     truncate?: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,3 +1,4 @@
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type __VLS_Props = {
     items: Array<{
         label: string;
@@ -7,6 +8,8 @@ type __VLS_Props = {
         truncate?: boolean;
     }>;
     countLoading: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 type __VLS_ModelProps = {
     modelValue?: string | undefined;

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

@@ -2,10 +2,21 @@
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
 import USkeleton from "@nuxt/ui/components/Skeleton.vue";
-defineProps({
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { mergeDataListUiClass, resolveFilterEditorSizeClasses } from "../../../utils";
+const props = defineProps({
   items: { type: Array, required: true },
-  countLoading: { type: Boolean, required: true }
+  countLoading: { type: Boolean, required: true },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
 });
+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 modelValue = defineModel({ type: null, ...{
   default: void 0
 } });
@@ -18,22 +29,37 @@ const modelValue = defineModel({ type: null, ...{
     :items="items"
     color="neutral"
     variant="list"
+    :size="size"
     :ui="{
   root: 'w-full',
-  fieldset: 'grid gap-0.5',
-  item: 'flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated',
-  container: 'self-center pl-3',
+  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 py-2 pr-3',
-  label: 'w-full cursor-pointer text-sm text-default'
+  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 gap-3">
+      <div class="flex min-w-0 items-center gap-2">
         <UIcon
           v-if="typeof item.icon === 'string'"
           :name="item.icon"
-          class="size-4 shrink-0 text-muted"
+          :class="
+  mergeDataListUiClass(
+    `${sizeClasses.optionIcon} shrink-0 text-muted`,
+    void 0,
+    ui?.optionIcon
+  )
+"
         />
 
         <span class="min-w-0 flex-1" :class="item.truncate ? 'truncate' : ''">

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

@@ -1,3 +1,4 @@
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type __VLS_Props = {
     items: Array<{
         label: string;
@@ -7,6 +8,8 @@ type __VLS_Props = {
         truncate?: boolean;
     }>;
     countLoading: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 type __VLS_ModelProps = {
     modelValue?: string | undefined;

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

@@ -1,3 +1,4 @@
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type TreeEntry = {
     id: string;
     label: string;
@@ -31,6 +32,8 @@ type __VLS_Props = {
     multiple: boolean;
     countLoading: boolean;
     selectedIcon?: string;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 type __VLS_ModelProps = {
     modelValue?: string | undefined;

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

@@ -3,14 +3,25 @@ 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";
-defineProps({
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { mergeDataListUiClass, 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 }
+  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 modelValue = defineModel({ type: null, ...{
   default: void 0
 } });
@@ -22,7 +33,7 @@ function getTreeIndentStyle(depth) {
 </script>
 
 <template>
-  <div v-if="multiple" class="grid gap-0.5">
+  <div v-if="multiple" :class="mergeDataListUiClass('grid gap-0.5', void 0, ui?.list)">
     <button
       v-for="entry in entries"
       :key="entry.id"
@@ -31,44 +42,81 @@ function getTreeIndentStyle(depth) {
       @click="emit('toggleEntry', entry.id)"
     >
       <div
-        class="flex items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-elevated"
-        :class="entry.selected ? 'bg-elevated text-highlighted' : 'text-default'"
+        :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
+  )
+"
       >
         <div
-          class="flex min-w-0 flex-1 items-center gap-3"
+          class="flex min-w-0 flex-1 items-center gap-2"
           :style="getTreeIndentStyle(entry.depth)"
         >
           <button
             v-if="entry.expandable"
             type="button"
-            class="flex size-4 shrink-0 items-center justify-center text-muted transition-transform"
-            :class="entry.expanded ? 'rotate-90' : ''"
+            :class="
+  mergeDataListUiClass(
+    `flex size-4 shrink-0 items-center justify-center text-muted transition-transform ${entry.expanded ? 'rotate-90' : ''}`,
+    void 0,
+    ui?.optionExpander
+  )
+"
             @click.stop="emit('toggleExpanded', entry.id)"
           >
             <UIcon name="i-lucide-chevron-right" class="size-4" />
           </button>
-          <span v-else class="size-4 shrink-0" />
+          <span
+            v-else
+            :class="mergeDataListUiClass('size-4 shrink-0', void 0, ui?.optionSpacer)"
+          />
 
           <UCheckbox
             v-if="entry.selectable || entry.branchSelectable"
             :model-value="entry.indeterminate ? 'indeterminate' : entry.selected"
             color="neutral"
-            size="md"
+            :size="size"
             tabindex="-1"
             :icon="selectedIcon"
-            :ui="{ base: '!rounded-md', indicator: '!rounded-none' }"
+            :ui="{ base: ui?.optionCheckbox }"
+          />
+          <span
+            v-else
+            :class="mergeDataListUiClass('size-5 shrink-0', void 0, ui?.optionSpacer)"
           />
-          <span v-else class="size-5 shrink-0" />
 
-          <UIcon v-if="entry.icon" :name="entry.icon" class="size-4 shrink-0 text-muted" />
+          <UIcon
+            v-if="entry.icon"
+            :name="entry.icon"
+            :class="
+  mergeDataListUiClass(
+    `${sizeClasses.optionIcon} shrink-0 text-muted`,
+    void 0,
+    ui?.optionIcon
+  )
+"
+          />
 
-          <span class="min-w-0 flex-1" :class="entry.truncate ? 'truncate' : ''">
+          <span
+            :class="
+  mergeDataListUiClass(
+    `min-w-0 flex-1 ${sizeClasses.optionLabel} ${entry.truncate ? 'truncate' : ''}`,
+    void 0,
+    ui?.optionLabel
+  )
+"
+          >
             {{ entry.label }}
           </span>
         </div>
 
         <USkeleton v-if="countLoading" class="ml-3 h-3.5 w-6 shrink-0" />
-        <span v-else-if="entry.count != null" class="ml-3 shrink-0 text-muted">
+        <span
+          v-else-if="entry.count != null"
+          :class="mergeDataListUiClass('ml-3 shrink-0 text-muted', void 0, ui?.optionCount)"
+        >
           {{ entry.count }}
         </span>
       </div>
@@ -81,14 +129,23 @@ function getTreeIndentStyle(depth) {
     :items="items"
     color="neutral"
     variant="list"
+    :size="size"
     :ui="{
   root: 'w-full',
-  fieldset: 'grid gap-0.5',
-  item: 'flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated',
-  container: 'self-center pl-3',
+  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 py-2 pr-3',
-  label: 'w-full cursor-pointer text-sm text-default'
+  wrapper: 'min-w-0 flex-1',
+  label: mergeDataListUiClass(
+    `w-full cursor-pointer text-default ${sizeClasses.optionLabel}`,
+    void 0,
+    ui?.optionLabel
+  )
 }"
   >
     <template #label="{ item }">

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

@@ -1,3 +1,4 @@
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type TreeEntry = {
     id: string;
     label: string;
@@ -31,6 +32,8 @@ type __VLS_Props = {
     multiple: boolean;
     countLoading: boolean;
     selectedIcon?: string;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 type __VLS_ModelProps = {
     modelValue?: string | undefined;

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

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    open: boolean;
+    embedded?: boolean;
+    contentClass?: string;
+    transitioning?: boolean;
+};
+declare var __VLS_1: {}, __VLS_12: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    content?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_12) => any;
+} & {
+    content?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updateOpen: (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdateOpen?: ((value: boolean) => 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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,36 @@
+<script setup>
+import UPopover from "@nuxt/ui/components/Popover.vue";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  embedded: { type: Boolean, required: false },
+  contentClass: { type: String, required: false },
+  transitioning: { type: Boolean, required: false }
+});
+const emit = defineEmits(["updateOpen"]);
+function handleFocusOutside(event) {
+  if (props.transitioning) event.preventDefault();
+}
+</script>
+
+<template>
+  <template v-if="embedded">
+    <slot name="content" />
+  </template>
+  <UPopover
+    v-else
+    :open="open"
+    :content="{
+  side: 'bottom',
+  align: 'start',
+  sideOffset: 8,
+  onFocusOutside: handleFocusOutside
+}"
+    :ui="{ content: contentClass }"
+    @update:open="emit('updateOpen', $event)"
+  >
+    <slot />
+    <template #content>
+      <slot name="content" />
+    </template>
+  </UPopover>
+</template>

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

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    open: boolean;
+    embedded?: boolean;
+    contentClass?: string;
+    transitioning?: boolean;
+};
+declare var __VLS_1: {}, __VLS_12: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    content?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_12) => any;
+} & {
+    content?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updateOpen: (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdateOpen?: ((value: boolean) => 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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,3 +1,4 @@
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type __VLS_Props = {
     searchable?: boolean;
     autofocus?: boolean;
@@ -6,6 +7,8 @@ type __VLS_Props = {
     showEmpty?: boolean;
     emptyLabel?: string;
     maxHeightClass?: string;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 type __VLS_ModelProps = {
     'searchQuery'?: string;

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

@@ -1,6 +1,8 @@
 <script setup>
 import UInput from "@nuxt/ui/components/Input.vue";
 import UScrollArea from "@nuxt/ui/components/ScrollArea.vue";
+import { computed } from "vue";
+import { mergeDataListUiClass, resolveFilterEditorSizeClasses } from "../../../utils";
 const {
   searchable = false,
   autofocus = false,
@@ -8,7 +10,9 @@ const {
   searchLoading = false,
   showEmpty = false,
   emptyLabel = "No matching options.",
-  maxHeightClass = "max-h-80"
+  maxHeightClass = "max-h-80",
+  size,
+  ui
 } = defineProps({
   searchable: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
@@ -16,37 +20,63 @@ const {
   searchLoading: { type: Boolean, required: false },
   showEmpty: { type: Boolean, required: false },
   emptyLabel: { type: String, required: false },
-  maxHeightClass: { type: String, required: false }
+  maxHeightClass: { type: String, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
 });
 const searchQuery = defineModel("searchQuery", { type: String, ...{
   default: ""
 } });
+const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size));
 </script>
 
 <template>
-  <div class="bg-default">
-    <div v-if="searchable" class="w-full border-b border-default p-2">
+  <div :class="mergeDataListUiClass('bg-default', void 0, ui?.editor)">
+    <div
+      v-if="searchable"
+      :class="
+  mergeDataListUiClass(
+    `w-full border-b border-default ${sizeClasses.searchHeader}`,
+    void 0,
+    ui?.searchHeader
+  )
+"
+    >
       <UInput
         v-model="searchQuery"
         icon="i-lucide-search"
         :placeholder="searchPlaceholder"
         class="w-full"
         :loading="searchLoading"
-        variant="ghost"
+        variant="none"
         :autofocus="autofocus"
+        :size="size"
+        :ui="{ root: ui?.search, base: ui?.searchInput }"
       />
     </div>
 
     <UScrollArea
-      style="max-height: 320px"
       type="hover"
-      class="p-2"
-      :class="maxHeightClass"
-      :ui="{ root: maxHeightClass, viewport: maxHeightClass }"
+      :class="
+  mergeDataListUiClass(
+    `${sizeClasses.scrollArea} ${maxHeightClass}`,
+    void 0,
+    ui?.scrollArea
+  )
+"
+      :ui="{
+  root: mergeDataListUiClass(maxHeightClass, void 0, ui?.scrollArea),
+  viewport: mergeDataListUiClass(maxHeightClass, void 0, ui?.scrollViewport)
+}"
     >
       <slot />
 
-      <div v-if="showEmpty" class="px-3 py-8 text-center text-sm text-muted">
+      <div
+        v-if="showEmpty"
+        :class="
+  mergeDataListUiClass(`${sizeClasses.empty} text-center text-muted`, void 0, ui?.empty)
+"
+      >
         <slot name="empty">
           {{ emptyLabel }}
         </slot>

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

@@ -1,3 +1,4 @@
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type __VLS_Props = {
     searchable?: boolean;
     autofocus?: boolean;
@@ -6,6 +7,8 @@ type __VLS_Props = {
     showEmpty?: boolean;
     emptyLabel?: string;
     maxHeightClass?: string;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 type __VLS_ModelProps = {
     'searchQuery'?: string;

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    stageKey: string;
+    direction?: 'forward' | 'backward';
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    settled: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSettled?: (() => any) | undefined;
+}>, {
+    direction: "forward" | "backward";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,21 @@
+<script setup>
+defineProps({
+  stageKey: { type: String, required: true },
+  direction: { type: String, required: false, default: "forward" }
+});
+const emit = defineEmits(["settled"]);
+</script>
+
+<template>
+  <div class="grid overflow-hidden">
+    <Transition :name="`filter-stage-${direction}`" @after-leave="emit('settled')">
+      <div :key="stageKey" class="col-start-1 row-start-1 min-w-0">
+        <slot />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.filter-stage-backward-enter-active,.filter-stage-forward-enter-active{transition:opacity .17s cubic-bezier(.22,1,.36,1),transform .17s cubic-bezier(.22,1,.36,1)}.filter-stage-backward-leave-active,.filter-stage-forward-leave-active{transition:opacity .11s cubic-bezier(.4,0,1,1),transform .11s cubic-bezier(.4,0,1,1)}.filter-stage-backward-leave-to,.filter-stage-forward-enter-from{opacity:0;transform:translateX(6px)}.filter-stage-backward-enter-from,.filter-stage-forward-leave-to{opacity:0;transform:translateX(-4px)}@media (prefers-reduced-motion:reduce){.filter-stage-backward-enter-active,.filter-stage-backward-leave-active,.filter-stage-forward-enter-active,.filter-stage-forward-leave-active{transition:opacity 80ms linear}.filter-stage-backward-enter-from,.filter-stage-backward-leave-to,.filter-stage-forward-enter-from,.filter-stage-forward-leave-to{transform:none}}
+</style>