nuxt-ui-tools 0.1.2 → 1.0.0

package/dist/runtime/table/components/filters/tags/{DateFilterTag.vue → date-filter-tag.vue}

@@ -6,6 +6,14 @@ import UInputDate from "@nuxt/ui/components/InputDate.vue";
 import { useMediaQuery } from "@vueuse/core";
 import { computed, ref, shallowRef, watch } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
+import {
+  isArray,
+  isDate,
+  isNumber,
+  isObject,
+  isString,
+  isNullish
+} from "../../../../shared/utils/predicate";
 import { useDataListUi } from "../../../composables/use-data-list-ui";
 import { useFilterTagSession } from "../../../composables/use-filter-tag-session";
 import { useTableInternals } from "../../../composables/use-table-internals";
@@ -13,16 +21,18 @@ import {
   formatFilterDate,
   getDateRangeValue,
   mergeDataListUiClass,
+  resolveDataListControlGeometry,
+  resolveFilterEditorSizeClasses,
   resolveFilterTriggerIcon,
   resolveDateFilterRangeCalendarPanels,
   resolveDateFilterRangePresets,
   resolveDateFilterScalarPresets,
   resolveDateFilterUi
 } from "../../../utils";
-import FilterMatchModePanel from "../shared/FilterMatchModePanel.vue";
-import FilterPopoverShell from "../shared/FilterPopoverShell.vue";
-import FilterStageTransition from "../shared/FilterStageTransition.vue";
-import TableFilterTrigger from "../shared/FilterTriggerTag.vue";
+import FilterMatchModePanel from "../shared/filter-match-mode-panel.vue";
+import FilterPopoverShell from "../shared/filter-popover-shell.vue";
+import FilterStageTransition from "../shared/filter-stage-transition.vue";
+import TableFilterTrigger from "../shared/filter-trigger-tag.vue";
 const props = defineProps({
   definition: { type: Object, required: true },
   dynamic: { type: Boolean, required: false },
@@ -35,12 +45,14 @@ const internals = useTableInternals();
 const dataListUi = useDataListUi();
 const dataListFilterUi = computed(() => dataListUi.ui.value.filterTags?.ui);
 const size = computed(() => dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value);
+const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size.value));
+const geometry = computed(() => resolveDataListControlGeometry(size.value));
 const { t } = useUiToolsLocale();
 const isMobile = useMediaQuery("(max-width: 639px)");
 const pendingOperator = ref(props.initialOperator);
-const localDate = shallowRef(void 0);
-const localRangeStart = shallowRef(void 0);
-const localRangeEnd = shallowRef(void 0);
+const localDate = shallowRef();
+const localRangeStart = shallowRef();
+const localRangeEnd = shallowRef();
 const stage = ref("editor");
 const stageDirection = ref("forward");
 const stageTransitioning = ref(false);
@@ -83,37 +95,65 @@ const rangeCalendarPanels = computed(
     mobile: isMobile.value
   })
 );
+const editorWidthClass = computed(
+  () => operator.value === "between" && filterUi.value.range.display !== "inputs" && (rangeCalendarPanels.value > 1 || filterUi.value.range.presetsPlacement === "side") ? sizeClasses.value.wideEditor : sizeClasses.value.editor
+);
+const rangePresetColumnClass = computed(() => {
+  if (size.value === "xs") {
+    return "lg:grid-cols-[10rem_minmax(0,1fr)]";
+  }
+  if (size.value === "sm") {
+    return "lg:grid-cols-[11rem_minmax(0,1fr)]";
+  }
+  if (size.value === "md") {
+    return "lg:grid-cols-[12rem_minmax(0,1fr)]";
+  }
+  if (size.value === "lg") {
+    return "lg:grid-cols-[13rem_minmax(0,1fr)]";
+  }
+  return "lg:grid-cols-[14rem_minmax(0,1fr)]";
+});
 const calendarRange = computed(() => {
-  if (!localRangeStart.value || !localRangeEnd.value) return void 0;
+  if (!localRangeStart.value || !localRangeEnd.value) {
+    return void 0;
+  }
   return {
-    start: localRangeStart.value,
-    end: localRangeEnd.value
+    end: localRangeEnd.value,
+    start: localRangeStart.value
   };
 });
 const rangeSummary = computed(() => {
   const from = localRangeStart.value ? toJsDate(localRangeStart.value) : void 0;
   const to = localRangeEnd.value ? toJsDate(localRangeEnd.value) : void 0;
-  if (from && to) return `${formatFilterDate({ value: from })} - ${formatFilterDate({ value: to })}`;
-  if (from) return `${t("table.filters.operators.after")} ${formatFilterDate({ value: from })}`;
-  if (to) return `${t("table.filters.operators.before")} ${formatFilterDate({ value: to })}`;
+  if (from && to) {
+    return `${formatFilterDate({ value: from })} - ${formatFilterDate({ value: to })}`;
+  }
+  if (from) {
+    return `${t("table.filters.operators.after")} ${formatFilterDate({ value: from })}`;
+  }
+  if (to) {
+    return `${t("table.filters.operators.before")} ${formatFilterDate({ value: to })}`;
+  }
   return t("table.filters.preview.empty");
 });
 const session = useFilterTagSession({
-  session: props.session,
   dynamic: props.dynamic,
   embedded: props.embedded,
-  hasCommittedState: () => internals.filters.getFilterState({ key: props.definition.key }) != null,
-  onOpen: initLocalState,
+  hasCommittedState: () => !isNullish(internals.filters.getActiveFilterState({ key: props.definition.key })),
   onClose: () => {
     pendingOperator.value = void 0;
   },
+  onDismiss: () => emit("dismiss"),
+  onOpen: initLocalState,
   onSessionClosed: () => emit("sessionClosed"),
-  onDismiss: () => emit("dismiss")
+  session: props.session
 });
 watch(
   () => operator.value,
   () => {
-    if (session.isOpen.value) initLocalState();
+    if (session.isOpen.value) {
+      initLocalState();
+    }
   }
 );
 function handleActivate(op) {
@@ -151,18 +191,25 @@ function applyFilter() {
   if (currentOperator === "between") {
     const from = localRangeStart.value ? toJsDate(localRangeStart.value) : void 0;
     const to = localRangeEnd.value ? toJsDate(localRangeEnd.value) : void 0;
+    const value = {};
+    if (from) {
+      value.from = from;
+    }
+    if (to) {
+      value.to = to;
+    }
     internals.filters.setScalarFilterValue({
       key: props.definition.key,
-      value: from || to ? { ...from ? { from } : {}, ...to ? { to } : {} } : void 0,
-      operator: nextOperator
+      operator: nextOperator,
+      value: from || to ? value : void 0
     });
     session.close();
     return;
   }
   internals.filters.setScalarFilterValue({
     key: props.definition.key,
-    value: localDate.value ? toJsDate(localDate.value) : void 0,
-    operator: nextOperator
+    operator: nextOperator,
+    value: localDate.value ? toJsDate(localDate.value) : void 0
   });
   session.close();
 }
@@ -184,12 +231,16 @@ function handleOperatorChange(op) {
 }
 function applyScalarPreset(value) {
   localDate.value = toCalendarDate(value);
-  if (filterUi.value.commitMode === "auto") applyFilter();
+  if (filterUi.value.commitMode === "auto") {
+    applyFilter();
+  }
 }
 function applyRangePreset(value) {
   localRangeStart.value = value.from ? toCalendarDate(value.from) : void 0;
   localRangeEnd.value = value.to ? toCalendarDate(value.to) : void 0;
-  if (filterUi.value.commitMode === "auto") applyFilter();
+  if (filterUi.value.commitMode === "auto") {
+    applyFilter();
+  }
 }
 function isRangePresetActive(value) {
   const fromMatches = areSameCalendarDay(localRangeStart.value, toCalendarDate(value.from));
@@ -198,7 +249,9 @@ function isRangePresetActive(value) {
 }
 function setSingleDate(value) {
   localDate.value = coerceCalendarDate(value);
-  if (filterUi.value.commitMode === "auto") applyFilter();
+  if (filterUi.value.commitMode === "auto") {
+    applyFilter();
+  }
 }
 function setRangeStart(value) {
   localRangeStart.value = coerceCalendarDate(value);
@@ -213,7 +266,7 @@ function setRangeEnd(value) {
   }
 }
 function setCalendarRange(value) {
-  if (!value || typeof value !== "object" || Array.isArray(value)) {
+  if (!isObject(value) || isArray(value)) {
     localRangeStart.value = void 0;
     localRangeEnd.value = void 0;
     return;
@@ -225,17 +278,18 @@ function setCalendarRange(value) {
   }
 }
 function coerceCalendarDate(value) {
-  if (value && typeof value === "object" && "year" in value && "month" in value && "day" in value && typeof value.year === "number" && typeof value.month === "number" && typeof value.day === "number") {
+  if (value && isObject(value) && "year" in value && "month" in value && "day" in value && isNumber(value.year) && isNumber(value.month) && isNumber(value.day)) {
     return new CalendarDate(value.year, value.month, value.day);
   }
-  return void 0;
 }
 function toCalendarDate(value) {
-  if (!(value instanceof Date) && typeof value !== "string" && typeof value !== "number") {
-    return void 0;
+  if (!isDate(value) && !isString(value) && !isNumber(value)) {
+    return;
   }
   const resolvedDate = value instanceof Date ? value : new Date(value);
-  if (Number.isNaN(resolvedDate.getTime())) return void 0;
+  if (Number.isNaN(resolvedDate.getTime())) {
+    return;
+  }
   return new CalendarDate(
     resolvedDate.getFullYear(),
     resolvedDate.getMonth() + 1,
@@ -246,8 +300,12 @@ function toJsDate(value) {
   return value.toDate(getLocalTimeZone());
 }
 function areSameCalendarDay(left, right) {
-  if (!left && !right) return true;
-  if (!left || !right) return false;
+  if (!left && !right) {
+    return true;
+  }
+  if (!left || !right) {
+    return false;
+  }
   return left.year === right.year && left.month === right.month && left.day === right.day;
 }
 </script>
@@ -259,7 +317,7 @@ function areSameCalendarDay(left, right) {
     :transitioning="stageTransitioning"
     :content-class="
   mergeDataListUiClass(
-    'max-w-[calc(100vw-1rem)] overflow-hidden p-0',
+    `${editorWidthClass} overflow-hidden p-0`,
     void 0,
     dataListFilterUi?.popoverContent
   )
@@ -284,6 +342,7 @@ function areSameCalendarDay(left, right) {
         :operator-label="operatorLabel"
         :operator-items="operatorItems"
         :preview-summary="preview.summary"
+        :dynamic="dynamic"
         :active="preview.active"
         @activate="handleActivate"
         @request-match-mode="handleRequestMatchMode"
@@ -309,7 +368,7 @@ function areSameCalendarDay(left, right) {
           v-else
           :class="
   mergeDataListUiClass(
-    `bg-default ${operator === 'between' ? 'w-[min(100vw-1rem,48rem)]' : 'w-[min(100vw-1rem,22rem)]'}`,
+    `${editorWidthClass} w-full min-w-0 max-w-full bg-default`,
     void 0,
     dataListFilterUi?.editor
   )
@@ -319,26 +378,31 @@ function areSameCalendarDay(left, right) {
             <div
               class="grid gap-0"
               :class="
-  filterUi.range.presetsPlacement === 'side' ? 'lg:grid-cols-[14rem_minmax(0,1fr)]' : 'grid-cols-1'
+  filterUi.range.presetsPlacement === 'side' ? rangePresetColumnClass : 'grid-cols-1'
 "
             >
               <div
                 v-if="rangePresets.length"
                 :class="
   mergeDataListUiClass(
-    `border-b border-default p-3 ${filterUi.range.presetsPlacement === 'side' ? 'lg:border-r lg:border-b-0' : ''}`,
+    `border-b border-default ${sizeClasses.searchHeader} ${filterUi.range.presetsPlacement === 'side' ? 'lg:border-r lg:border-b-0' : ''}`,
     void 0,
     dataListFilterUi?.presets
   )
 "
               >
-                <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-muted">
+                <div
+                  :class="[geometry.caption, 'font-medium uppercase tracking-[0.14em] text-muted']"
+                >
                   Date range
                 </div>
 
                 <div
-                  class="mt-3 flex gap-1.5"
-                  :class="filterUi.range.presetsPlacement === 'side' ? 'flex-col' : 'flex-wrap'"
+                  :class="[
+  'mt-2 flex',
+  geometry.toolbarGap,
+  filterUi.range.presetsPlacement === 'side' ? 'flex-col' : 'flex-wrap'
+]"
                 >
                   <UButton
                     v-for="preset in rangePresets"
@@ -346,11 +410,7 @@ function areSameCalendarDay(left, right) {
                     :variant="isRangePresetActive(preset.value) ? 'subtle' : 'ghost'"
                     :size="size"
                     :class="
-  mergeDataListUiClass(
-    'justify-start rounded-lg px-3',
-    void 0,
-    dataListFilterUi?.preset
-  )
+  mergeDataListUiClass('justify-start', void 0, dataListFilterUi?.preset)
 "
                     @click="applyRangePreset(preset.value)"
                   >
@@ -361,10 +421,17 @@ function areSameCalendarDay(left, right) {
 
               <div
                 v-if="filterUi.range.display !== 'inputs'"
-                :class="mergeDataListUiClass('p-3', void 0, dataListFilterUi?.calendar)"
+                :class="
+  mergeDataListUiClass(
+    sizeClasses.searchHeader,
+    void 0,
+    dataListFilterUi?.calendar
+  )
+"
               >
                 <UCalendar
                   :model-value="calendarRange"
+                  :size="size"
                   range
                   :number-of-months="rangeCalendarPanels"
                   :paged-navigation="
@@ -373,10 +440,6 @@ function areSameCalendarDay(left, right) {
                   :fixed-weeks="filterUi.range.calendar.fixedWeeks"
                   :maximum-days="filterUi.range.calendar.maxRangeDays"
                   :ui="{
-  header: 'px-1 pb-2',
-  body: 'gap-3',
-  grid: 'gap-y-1',
-  cell: 'p-0.5',
   cellTrigger: 'rounded-md',
   root: mergeDataListUiClass(
     'border-0 bg-transparent p-0',
@@ -393,24 +456,26 @@ function areSameCalendarDay(left, right) {
               v-if="filterUi.range.display !== 'calendar'"
               :class="
   mergeDataListUiClass(
-    'border-t border-default px-3 py-3',
+    `border-t border-default ${sizeClasses.searchHeader}`,
     void 0,
     dataListFilterUi?.inputs
   )
 "
             >
-              <div class="flex items-center justify-between gap-3">
-                <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-muted">
+              <div :class="['flex items-center justify-between', geometry.toolbarGap]">
+                <div
+                  :class="[geometry.caption, 'font-medium uppercase tracking-[0.14em] text-muted']"
+                >
                   Custom range
                 </div>
-                <div class="truncate text-xs text-muted">
+                <div :class="[geometry.caption, 'truncate text-muted']">
                   {{ rangeSummary }}
                 </div>
               </div>
 
-              <div class="mt-3 grid gap-2 sm:grid-cols-2">
+              <div :class="['mt-2 grid sm:grid-cols-2', geometry.toolbarGap]">
                 <div class="space-y-1">
-                  <span class="px-1 text-xs text-muted">Start</span>
+                  <span :class="[geometry.caption, 'px-1 text-muted']">Start</span>
                   <UInputDate
                     :model-value="localRangeStart"
                     leading
@@ -427,7 +492,7 @@ function areSameCalendarDay(left, right) {
                 </div>
 
                 <div class="space-y-1">
-                  <span class="px-1 text-xs text-muted">End</span>
+                  <span :class="[geometry.caption, 'px-1 text-muted']">End</span>
                   <UInputDate
                     :model-value="localRangeEnd"
                     leading
@@ -448,12 +513,22 @@ function areSameCalendarDay(left, right) {
 
           <div
             v-else
-            :class="mergeDataListUiClass('grid gap-2 p-3', void 0, dataListFilterUi?.inputs)"
+            :class="
+  mergeDataListUiClass(
+    `grid ${geometry.toolbarGap} ${sizeClasses.searchHeader}`,
+    void 0,
+    dataListFilterUi?.inputs
+  )
+"
           >
             <div
               v-if="scalarPresets.length"
               :class="
-  mergeDataListUiClass('flex flex-wrap gap-1.5', void 0, dataListFilterUi?.presets)
+  mergeDataListUiClass(
+    `flex flex-wrap ${geometry.toolbarGap}`,
+    void 0,
+    dataListFilterUi?.presets
+  )
 "
             >
               <UButton
@@ -461,9 +536,7 @@ function areSameCalendarDay(left, right) {
                 :key="preset.label"
                 variant="ghost"
                 :size="size"
-                :class="
-  mergeDataListUiClass('rounded-lg px-3', void 0, dataListFilterUi?.preset)
-"
+                :class="mergeDataListUiClass(void 0, void 0, dataListFilterUi?.preset)"
                 @click="applyScalarPreset(preset.value)"
               >
                 {{ preset.label }}
@@ -492,6 +565,7 @@ function areSameCalendarDay(left, right) {
   filterUi.scalar.display === 'calendar' || filterUi.scalar.display === 'input-calendar'
 "
               :model-value="localDate"
+              :size="size"
               :fixed-weeks="filterUi.scalar.calendar.fixedWeeks"
               :ui="{
   root: mergeDataListUiClass(
@@ -499,9 +573,6 @@ function areSameCalendarDay(left, right) {
     void 0,
     dataListFilterUi?.calendar
   ),
-  header: 'px-1 pb-2',
-  grid: 'gap-y-1',
-  cell: 'p-0.5',
   cellTrigger: 'rounded-md'
 }"
               @update:model-value="setSingleDate"
@@ -512,7 +583,7 @@ function areSameCalendarDay(left, right) {
             v-if="filterUi.commitMode === 'manual'"
             :class="
   mergeDataListUiClass(
-    `flex items-center border-t border-default p-2 ${operator === 'between' ? 'justify-between' : 'justify-end'}`,
+    `flex items-center border-t border-default ${sizeClasses.footer} ${operator === 'between' ? 'justify-between' : 'justify-end'}`,
     void 0,
     dataListFilterUi?.footer
   )
@@ -527,7 +598,7 @@ function areSameCalendarDay(left, right) {
               :ui="{ base: dataListFilterUi?.clear }"
               @click="clearFilter"
             />
-            <div class="flex items-center gap-2">
+            <div :class="['flex items-center', geometry.toolbarGap]">
               <UButton
                 v-if="operator !== 'between'"
                 color="neutral"

package/dist/runtime/table/components/filters/tags/{DateFilterTag.vue.d.ts → date-filter-tag.vue.d.ts}

@@ -8,7 +8,14 @@ type __VLS_Props = {
     initialOperator?: TableFilterOperator;
 };
 declare var __VLS_10: {
-    preview: import("../../../utils/index.js").FilterPreviewResult;
+    preview: {
+        active: boolean;
+        dirty: boolean;
+        count: number;
+        tags: string[];
+        entries: import("../../../utils/filters/preview/types.js").FilterPreviewEntry[];
+        summary: string;
+    };
     active: boolean;
     open: boolean;
     triggerProps: {

package/dist/runtime/table/components/filters/tags/{FilterTagsBar.d.vue.ts → filter-tags-bar.d.vue.ts}

@@ -3,7 +3,7 @@ type __VLS_Props = {
     showAdd?: boolean;
     showClear?: boolean;
 };
-declare var __VLS_10: any, __VLS_22: {
+declare var __VLS_17: any, __VLS_29: {
     open: () => void;
     close: () => void;
     toggle: () => void;
@@ -14,17 +14,17 @@ declare var __VLS_10: any, __VLS_22: {
         type: string;
         'aria-expanded': boolean;
     };
-}, __VLS_32: {};
+}, __VLS_39: {};
 type __VLS_Slots = {} & {
-    filter?: (props: typeof __VLS_10) => any;
+    filter?: (props: typeof __VLS_17) => any;
 } & {
-    'add-filter-trigger'?: (props: typeof __VLS_22) => any;
+    'add-filter-trigger'?: (props: typeof __VLS_29) => any;
 } & {
-    'clear-filter-label'?: (props: typeof __VLS_32) => any;
+    'clear-filter-label'?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    showAdd: boolean;
     showClear: boolean;
+    showAdd: boolean;
 }, {}, {}, {}, 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/tags/{FilterTagsBar.vue → filter-tags-bar.vue}

@@ -1,13 +1,15 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
-import { computed } from "vue";
+import { computed, TransitionGroup } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useDataListUi } from "../../../composables/use-data-list-ui";
 import { useTableInternals } from "../../../composables/use-table-internals";
-import { getFilterLabelText, mergeDataListUiClass } from "../../../utils";
-import DynamicFilterPicker from "../shared/DynamicFilterPicker.vue";
+import { getFilterLabelText, mergeDataListProps, mergeDataListUiClass } from "../../../utils";
+import DynamicFilterPicker from "../shared/dynamic-filter-picker.vue";
 import { resolveFilterTagComponent } from "./registry";
 const internals = useTableInternals();
 const dataListUi = useDataListUi();
+const { t } = useUiToolsLocale();
 const props = defineProps({
   showAdd: { type: Boolean, required: false, default: true },
   showClear: { type: Boolean, required: false, default: true }
@@ -19,17 +21,33 @@ const visibleDefinitions = computed(() => [
 const dynamicSessionDefinition = computed(
   () => internals.filterPresentation.dynamicSessionDefinition.value
 );
+function clearAll() {
+  internals.filters.clearAllFilters();
+  internals.filters.searchQuery.value = "";
+}
 function getFilterLabel(definition) {
   return getFilterLabelText({ label: definition.label });
 }
 </script>
 
 <template>
-  <div
+  <TransitionGroup
     v-if="
   visibleDefinitions.length || internals.filterPresentation.dormantDynamicDefinitions.value.length || internals.filters.hasActiveUiFilters.value
 "
-    :class="mergeDataListUiClass('contents', void 0, dataListUi.ui.value.filterTags?.ui?.root)"
+    tag="div"
+    :class="
+  mergeDataListUiClass(
+    'nut-dl-tags relative flex min-w-0 flex-wrap items-center gap-2',
+    void 0,
+    dataListUi.ui.value.filterTags?.ui?.root
+  )
+"
+    move-class="nut-dl-tag--moving"
+    enter-active-class="nut-dl-tag--entering"
+    enter-from-class="nut-dl-tag--hidden"
+    leave-active-class="nut-dl-tag--leaving"
+    leave-to-class="nut-dl-tag--hidden"
   >
     <component
       :is="resolveFilterTagComponent(definition)"
@@ -53,6 +71,7 @@ function getFilterLabel(definition) {
     </component>
 
     <DynamicFilterPicker
+      key="__add"
       v-if="
   props.showAdd && (internals.filterPresentation.dormantDynamicDefinitions.value.length || dynamicSessionDefinition)
 "
@@ -75,21 +94,35 @@ function getFilterLabel(definition) {
     </DynamicFilterPicker>
 
     <UButton
-      v-if="props.showClear && internals.filters.hasActiveUiFilters.value"
-      color="neutral"
-      variant="outline"
-      :size="dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value"
-      icon="i-lucide-x"
+      v-if="
+  props.showClear && (internals.filters.hasActiveUiFilters.value || internals.filters.searchQuery.value)
+"
+      key="__clear"
+      v-bind="
+  mergeDataListProps(
+    {
+      color: 'neutral',
+      variant: 'ghost',
+      size: dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value
+    },
+    dataListUi.ui.value.filterTags?.props?.clearTrigger
+  )
+"
+      icon="i-lucide-rotate-ccw"
       :ui="{
   base: mergeDataListUiClass(
-    'shrink-0 border-dashed',
+    'nut-dl-tag nut-dl-tag--clear shrink-0 text-muted hover:text-default',
     void 0,
     dataListUi.ui.value.filterTags?.ui?.clearTrigger
   )
 }"
-      @click="internals.filters.clearAllFilters()"
+      @click="clearAll"
     >
-      <slot name="clear-filter-label" />
+      <slot name="clear-filter-label">{{ t("table.controls.resetFilters") }}</slot>
     </UButton>
-  </div>
+  </TransitionGroup>
 </template>
+
+<style>
+.nut-dl-tag--moving{transition:transform .24s cubic-bezier(.2,.9,.3,1)}.nut-dl-tag--entering{transition:opacity .16s ease,transform .22s cubic-bezier(.2,.9,.3,1)}.nut-dl-tag--leaving{position:absolute;transition:opacity .12s ease,transform .12s ease}.nut-dl-tag--hidden{opacity:0;transform:translateY(3px) scale(.98)}@media (prefers-reduced-motion:reduce){.nut-dl-tag--entering,.nut-dl-tag--leaving,.nut-dl-tag--moving{transition:none}}
+</style>

package/dist/runtime/table/components/filters/tags/{FilterTagsBar.vue.d.ts → filter-tags-bar.vue.d.ts}

@@ -3,7 +3,7 @@ type __VLS_Props = {
     showAdd?: boolean;
     showClear?: boolean;
 };
-declare var __VLS_10: any, __VLS_22: {
+declare var __VLS_17: any, __VLS_29: {
     open: () => void;
     close: () => void;
     toggle: () => void;
@@ -14,17 +14,17 @@ declare var __VLS_10: any, __VLS_22: {
         type: string;
         'aria-expanded': boolean;
     };
-}, __VLS_32: {};
+}, __VLS_39: {};
 type __VLS_Slots = {} & {
-    filter?: (props: typeof __VLS_10) => any;
+    filter?: (props: typeof __VLS_17) => any;
 } & {
-    'add-filter-trigger'?: (props: typeof __VLS_22) => any;
+    'add-filter-trigger'?: (props: typeof __VLS_29) => any;
 } & {
-    'clear-filter-label'?: (props: typeof __VLS_32) => any;
+    'clear-filter-label'?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    showAdd: boolean;
     showClear: boolean;
+    showAdd: boolean;
 }, {}, {}, {}, 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/tags/{NumberFilterTag.d.vue.ts → number-filter-tag.d.vue.ts}

@@ -7,7 +7,14 @@ type __VLS_Props = {
     initialOperator?: TableFilterOperator;
 };
 declare var __VLS_10: {
-    preview: import("../../../utils/index.js").FilterPreviewResult;
+    preview: {
+        active: boolean;
+        dirty: boolean;
+        count: number;
+        tags: string[];
+        entries: import("../../../utils/filters/preview/types.js").FilterPreviewEntry[];
+        summary: string;
+    };
     active: boolean;
     open: boolean;
     triggerProps: {