nuxt-ui-tools 0.1.2 → 1.0.0

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

@@ -3,18 +3,21 @@ import UButton from "@nuxt/ui/components/Button.vue";
 import UInputNumber from "@nuxt/ui/components/InputNumber.vue";
 import USlider from "@nuxt/ui/components/Slider.vue";
 import { computed, ref, watch } from "vue";
+import { isArray, isDate, isNumber, isObject, 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";
 import {
   mergeDataListUiClass,
+  resolveDataListControlGeometry,
+  resolveFilterEditorSizeClasses,
   resolveFilterTriggerIcon,
   resolveNumberFilterUi
 } 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 },
@@ -27,6 +30,8 @@ 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 pendingOperator = ref(props.initialOperator);
 const localValue = ref("");
 const rangeValue = ref({ from: "", to: "" });
@@ -60,33 +65,35 @@ const scalarValue = computed({
     return localValue.value === "" ? void 0 : Number(localValue.value);
   },
   set(value) {
-    localValue.value = value == null || Number.isNaN(value) ? "" : String(value);
+    localValue.value = isNullish(value) || Number.isNaN(value) ? "" : String(value);
   }
 });
 const sliderBounds = computed(() => ({
-  min: filterUi.value.min ?? 0,
-  max: filterUi.value.max ?? 100
+  max: filterUi.value.max ?? 100,
+  min: filterUi.value.min ?? 0
 }));
 const sliderRangeValue = computed(() => [
   rangeValue.value.from === "" ? sliderBounds.value.min : Number(rangeValue.value.from),
   rangeValue.value.to === "" ? sliderBounds.value.max : Number(rangeValue.value.to)
 ]);
 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 initLocalState() {
@@ -94,10 +101,10 @@ function initLocalState() {
     key: props.definition.key
   })?.value;
   if (operator.value === "between") {
-    if (value && typeof value === "object" && !Array.isArray(value) && !(value instanceof Date)) {
+    if (isObject(value) && !isDate(value)) {
       rangeValue.value = {
-        from: value.from == null ? "" : String(value.from),
-        to: value.to == null ? "" : String(value.to)
+        from: isNullish(value.from) ? "" : String(value.from),
+        to: isNullish(value.to) ? "" : String(value.to)
       };
     } else {
       rangeValue.value = { from: "", to: "" };
@@ -105,7 +112,7 @@ function initLocalState() {
     localValue.value = "";
     return;
   }
-  localValue.value = value == null ? "" : String(value);
+  localValue.value = isNullish(value) ? "" : String(value);
   rangeValue.value = { from: "", to: "" };
 }
 function handleActivate(op) {
@@ -129,7 +136,9 @@ function handleOperatorChange(op) {
   stage.value = "editor";
 }
 function commitIfAuto() {
-  if (filterUi.value.commitMode === "auto") applyFilter();
+  if (filterUi.value.commitMode === "auto") {
+    applyFilter();
+  }
 }
 function applyFilter() {
   const nextOperator = pendingOperator.value;
@@ -137,19 +146,21 @@ function applyFilter() {
   if (operator.value === "between") {
     internals.filters.setScalarFilterValue({
       key: props.definition.key,
-      value: rangeValue.value.from === "" && rangeValue.value.to === "" ? void 0 : {
-        ...rangeValue.value.from === "" ? {} : { from: Number(rangeValue.value.from) },
-        ...rangeValue.value.to === "" ? {} : { to: Number(rangeValue.value.to) }
-      },
-      operator: nextOperator
+      operator: nextOperator,
+      value: rangeValue.value.from === "" && rangeValue.value.to === "" ? void 0 : Object.fromEntries(
+        [
+          rangeValue.value.from === "" ? void 0 : ["from", Number(rangeValue.value.from)],
+          rangeValue.value.to === "" ? void 0 : ["to", Number(rangeValue.value.to)]
+        ].filter((entry) => entry !== void 0)
+      )
     });
     session.close();
     return;
   }
   internals.filters.setScalarFilterValue({
     key: props.definition.key,
-    value: scalarValue.value,
-    operator: nextOperator
+    operator: nextOperator,
+    value: scalarValue.value
   });
   session.close();
 }
@@ -164,26 +175,32 @@ function updateScalarValue(value) {
 function updateRangeFrom(value) {
   rangeValue.value = {
     ...rangeValue.value,
-    from: value == null ? "" : String(value)
+    from: isNullish(value) ? "" : String(value)
   };
   commitIfAuto();
 }
 function updateRangeTo(value) {
   rangeValue.value = {
     ...rangeValue.value,
-    to: value == null ? "" : String(value)
+    to: isNullish(value) ? "" : String(value)
   };
   commitIfAuto();
 }
 function updateSliderScalarValue(value) {
-  if (typeof value !== "number") return;
+  if (!isNumber(value)) {
+    return;
+  }
   scalarValue.value = value;
   commitIfAuto();
 }
 function updateSliderRangeValue(value) {
-  if (!Array.isArray(value) || value.length < 2) return;
+  if (!isArray(value) || value.length < 2) {
+    return;
+  }
   const [from, to] = value;
-  if (typeof from !== "number" || typeof to !== "number") return;
+  if (!isNumber(from) || !isNumber(to)) {
+    return;
+  }
   rangeValue.value = {
     from: String(from),
     to: String(to)
@@ -201,7 +218,11 @@ function resolveIncrementConfig(hideStepper) {
     :embedded="embedded"
     :transitioning="stageTransitioning"
     :content-class="
-  mergeDataListUiClass('w-fit overflow-hidden p-0', void 0, dataListFilterUi?.popoverContent)
+  mergeDataListUiClass(
+    `${sizeClasses.editor} overflow-hidden p-0`,
+    void 0,
+    dataListFilterUi?.popoverContent
+  )
 "
     @update-open="session.handleOpenChange"
   >
@@ -223,6 +244,7 @@ function resolveIncrementConfig(hideStepper) {
         :operator-label="operatorLabel"
         :operator-items="operatorItems"
         :preview-summary="preview.summary"
+        :dynamic="dynamic"
         :active="preview.active"
         @activate="handleActivate"
         @request-match-mode="handleRequestMatchMode"
@@ -248,7 +270,7 @@ function resolveIncrementConfig(hideStepper) {
           v-else
           :class="
   mergeDataListUiClass(
-    'min-w-[16rem] max-w-[calc(100vw-1rem)] bg-default',
+    `${sizeClasses.editor} w-full min-w-0 max-w-full bg-default`,
     void 0,
     dataListFilterUi?.editor
   )
@@ -258,7 +280,7 @@ function resolveIncrementConfig(hideStepper) {
             v-if="operator === 'between'"
             :class="
   mergeDataListUiClass(
-    'grid gap-3 border-b border-default p-3',
+    `grid border-b border-default ${geometry.toolbarGap} ${sizeClasses.searchHeader}`,
     void 0,
     dataListFilterUi?.inputs
   )
@@ -268,7 +290,7 @@ function resolveIncrementConfig(hideStepper) {
               v-if="
   filterUi.range.display === 'inputs' || filterUi.range.display === 'inputs-slider'
 "
-              class="grid grid-cols-2 gap-2"
+              :class="['grid grid-cols-2', geometry.toolbarGap]"
             >
               <UInputNumber
                 :model-value="rangeValue.from === '' ? void 0 : Number(rangeValue.from)"
@@ -281,11 +303,6 @@ function resolveIncrementConfig(hideStepper) {
                 :increment="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
                 :decrement="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
                 :size="size"
-                :ui="{
-  base: 'h-9 px-2',
-  increment: 'size-7 rounded-md',
-  decrement: 'size-7 rounded-md'
-}"
                 @update:model-value="updateRangeFrom"
                 @keydown.enter.prevent="applyFilter"
               />
@@ -301,11 +318,6 @@ function resolveIncrementConfig(hideStepper) {
                 :increment="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
                 :decrement="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
                 :size="size"
-                :ui="{
-  base: 'h-9 px-2',
-  increment: 'size-7 rounded-md',
-  decrement: 'size-7 rounded-md'
-}"
                 @update:model-value="updateRangeTo"
                 @keydown.enter.prevent="applyFilter"
               />
@@ -330,7 +342,7 @@ function resolveIncrementConfig(hideStepper) {
             v-else
             :class="
   mergeDataListUiClass(
-    'grid gap-3 border-b border-default p-3',
+    `grid border-b border-default ${geometry.toolbarGap} ${sizeClasses.searchHeader}`,
     void 0,
     dataListFilterUi?.inputs
   )
@@ -350,11 +362,6 @@ function resolveIncrementConfig(hideStepper) {
               :increment="resolveIncrementConfig(filterUi.scalar.input.hideStepper)"
               :decrement="resolveIncrementConfig(filterUi.scalar.input.hideStepper)"
               :size="size"
-              :ui="{
-  base: 'h-9 px-2',
-  increment: 'size-7 rounded-md',
-  decrement: 'size-7 rounded-md'
-}"
               @update:model-value="updateScalarValue"
               @keydown.enter.prevent="applyFilter"
             />
@@ -377,7 +384,7 @@ function resolveIncrementConfig(hideStepper) {
             v-if="filterUi.commitMode === 'manual'"
             :class="
   mergeDataListUiClass(
-    'flex items-center justify-between border-t border-default p-2',
+    `flex items-center justify-between border-t border-default ${sizeClasses.footer}`,
     void 0,
     dataListFilterUi?.footer
   )

package/dist/runtime/table/components/filters/tags/{NumberFilterTag.vue.d.ts → number-filter-tag.vue.d.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: {

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

@@ -4,10 +4,18 @@ type __VLS_Props = {
     dynamic?: boolean;
     session?: boolean;
     embedded?: boolean;
+    header?: boolean;
     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: {
@@ -22,10 +30,14 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: () => any;
     sessionClosed: () => any;
+    back: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDismiss?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    onBack?: (() => any) | undefined;
+}>, {
+    header: boolean;
+}, {}, {}, {}, 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;

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

@@ -1,7 +1,10 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed, ref } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useRangeSelect } from "../../../../shared";
+import { isBoolean, isNumber, isString, isNullish } from "../../../../shared/utils/predicate";
 import { useDataListUi } from "../../../composables/use-data-list-ui";
 import { useFilterTagSession } from "../../../composables/use-filter-tag-session";
 import { useOptionFilterEditorState } from "../../../composables/use-option-filter-editor-state";
@@ -11,21 +14,23 @@ import {
   resolveFilterEditorSizeClasses,
   resolveFilterTriggerIcon
 } from "../../../utils";
-import FilterMatchModePanel from "../shared/FilterMatchModePanel.vue";
-import FilterOptionPickerContent from "../shared/FilterOptionPickerContent.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 FilterOptionPickerContent from "../shared/filter-option-picker-content.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 },
   session: { type: Boolean, required: false },
   embedded: { type: Boolean, required: false },
+  header: { type: Boolean, required: false, default: true },
   initialOperator: { type: String, required: false }
 });
-const emit = defineEmits(["dismiss", "sessionClosed"]);
+const emit = defineEmits(["back", "dismiss", "sessionClosed"]);
 const internals = useTableInternals();
 const dataListUi = useDataListUi();
+const { t } = useUiToolsLocale();
 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));
@@ -45,27 +50,22 @@ const operator = computed(() => {
   return next === "isAnyOf" || next === "isNot" ? next : "is";
 });
 const state = useOptionFilterEditorState({
-  definition: props.definition,
-  operator,
-  selectedValues: localSelectedValues,
-  searchQuery,
   active: computed(() => isSessionOpen.value),
-  ready: isContentReady,
+  definition: props.definition,
   filters: internals.filters,
+  operator,
   queryContent: internals.queryContent,
+  ready: isContentReady,
   schema: internals.schema,
+  searchQuery,
+  selectedValues: localSelectedValues,
   setSelectedValues
 });
 const session = useFilterTagSession({
-  isOpen: isSessionOpen,
-  session: props.session,
   dynamic: props.dynamic,
   embedded: props.embedded,
-  hasCommittedState: () => internals.filters.getFilterState({ key: props.definition.key }) != null,
-  onOpen: () => {
-    isContentReady.value = false;
-    initLocalState();
-  },
+  hasCommittedState: () => !isNullish(internals.filters.getActiveFilterState({ key: props.definition.key })),
+  isOpen: isSessionOpen,
   onClose: () => {
     isContentReady.value = false;
     pendingOperator.value = void 0;
@@ -74,13 +74,18 @@ const session = useFilterTagSession({
     pinnedRangeSelect.reset();
     restRangeSelect.reset();
   },
+  onDismiss: () => emit("dismiss"),
+  onOpen: () => {
+    isContentReady.value = false;
+    initLocalState();
+  },
   onSessionClosed: () => emit("sessionClosed"),
-  onDismiss: () => emit("dismiss")
+  session: props.session
 });
 const preview = computed(
   () => internals.filters.getFilterPreview({
-    key: props.definition.key,
-    entries: state.optionSource.sourceEntries.value
+    entries: state.optionSource.sourceEntries.value,
+    key: props.definition.key
   })
 );
 const operatorLabel = computed(
@@ -103,14 +108,14 @@ const listSections = computed(() => {
   const sections = [];
   if (pinnedEntries.value.length) {
     sections.push({
-      key: "pinned",
-      entries: pinnedEntries.value
+      entries: pinnedEntries.value,
+      key: "pinned"
     });
   }
   sections.push({
-    key: "rest",
+    dividerBefore: pinnedEntries.value.length > 0,
     entries: restEntries.value,
-    dividerBefore: pinnedEntries.value.length > 0
+    key: "rest"
   });
   return sections;
 });
@@ -127,8 +132,8 @@ function initLocalState() {
     key: props.definition.key
   });
   const values = Array.isArray(committedRule?.value) ? committedRule.value.filter(
-    (value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean"
-  ) : committedRule?.value != null && (typeof committedRule.value === "string" || typeof committedRule.value === "number" || typeof committedRule.value === "boolean") ? [committedRule.value] : [];
+    (value) => isString(value) || isNumber(value) || isBoolean(value)
+  ) : !isNullish(committedRule?.value) && (isString(committedRule.value) || isNumber(committedRule.value) || isBoolean(committedRule.value)) ? [committedRule.value] : [];
   localSelectedValues.value = values;
   pinnedValues.value = new Set(values.map(String));
   state.resetExpandedIds();
@@ -159,23 +164,28 @@ function handleOperatorChange(op) {
 }
 function setSelectedValues(values) {
   localSelectedValues.value = values;
-  pinnedValues.value = new Set(values.map(String));
-  if (state.filterUi.value.commitMode === "auto") commitSelection();
+  if (state.filterUi.value.commitMode === "auto") {
+    commitSelection();
+  }
 }
 function commitSelection() {
-  if (state.filterUi.value.commitMode !== "auto") return;
+  if (state.filterUi.value.commitMode !== "auto") {
+    return;
+  }
   internals.filters.setOptionFilterValues({
     key: props.definition.key,
-    values: localSelectedValues.value,
-    operator: pendingOperator.value
+    operator: pendingOperator.value,
+    values: localSelectedValues.value
   });
-  if (state.filterUi.value.closeOnSelect) session.close();
+  if (state.filterUi.value.closeOnSelect) {
+    session.close();
+  }
 }
 function applyFilter() {
   internals.filters.setOptionFilterValues({
     key: props.definition.key,
-    values: localSelectedValues.value,
-    operator: pendingOperator.value
+    operator: pendingOperator.value,
+    values: localSelectedValues.value
   });
   pendingOperator.value = void 0;
   session.close();
@@ -188,17 +198,23 @@ function clearFilter() {
 function handleSelectEntry(options) {
   if (options.sectionKey === "pinned") {
     const entry2 = pinnedEntries.value.find((item) => String(item.value) === String(options.value));
-    if (!entry2) return;
+    if (!entry2) {
+      return;
+    }
     pinnedRangeSelect.handleClick(options.event, entry2, options.index);
     return;
   }
   const entry = restEntries.value.find((item) => String(item.value) === String(options.value));
-  if (!entry) return;
+  if (!entry) {
+    return;
+  }
   restRangeSelect.handleClick(options.event, entry, options.index);
 }
 function handleToggleTreeEntry(entryId) {
   const entry = state.visibleTreeEntries.value.find((item) => item.id === entryId);
-  if (!entry) return;
+  if (!entry) {
+    return;
+  }
   state.toggleTreeEntry(entry);
 }
 function handleContentMounted() {
@@ -212,7 +228,11 @@ function handleContentMounted() {
     :embedded="embedded"
     :transitioning="stageTransitioning"
     :content-class="
-  mergeDataListUiClass('w-fit overflow-hidden p-0', void 0, dataListFilterUi?.popoverContent)
+  mergeDataListUiClass(
+    `${sizeClasses.editor} overflow-hidden p-0`,
+    void 0,
+    dataListFilterUi?.popoverContent
+  )
 "
     @update-open="session.handleOpenChange"
   >
@@ -234,7 +254,9 @@ function handleContentMounted() {
         :operator-label="operatorLabel"
         :operator-items="operatorItems"
         :preview-tags="preview.tags"
+        :preview-entries="preview.entries"
         :preview-summary="preview.summary"
+        :dynamic="dynamic"
         :active="preview.active"
         @activate="handleActivate"
         @request-match-mode="handleRequestMatchMode"
@@ -260,13 +282,44 @@ function handleContentMounted() {
           v-else
           :class="
   mergeDataListUiClass(
-    `${sizeClasses.editor} max-w-[calc(100vw-1rem)] bg-default`,
+    `${sizeClasses.editor} w-full min-w-0 max-w-full bg-default`,
     void 0,
     dataListFilterUi?.editor
   )
 "
           @vue:mounted="handleContentMounted"
         >
+          <div
+            v-if="header !== false && dataListUi.ui.value.filterTags?.props?.editorHeader !== false"
+            :class="
+  mergeDataListUiClass(
+    'nut-dl-editor__head flex items-center gap-2 border-b border-default py-2 pr-3',
+    embedded ? 'pl-1.5' : 'pl-3',
+    dataListFilterUi?.editorHeader
+  )
+"
+          >
+            <button
+              v-if="embedded"
+              type="button"
+              class="nut-dl-editor__back flex size-6 items-center justify-center rounded-md text-muted hover:bg-elevated hover:text-default"
+              :aria-label="t('table.filters.sheet.back')"
+              @click="emit('back')"
+            >
+              <UIcon name="i-lucide-arrow-left" class="size-4" />
+            </button>
+            <span class="min-w-0 flex-1 truncate text-[12.5px] font-semibold text-highlighted">
+              {{ internals.filters.getFilterLabelText({ label: definition.label }) }}
+            </span>
+            <button
+              type="button"
+              class="rounded text-[12.5px] font-semibold text-primary outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:opacity-40"
+              :disabled="!preview.active"
+              @click="clearFilter"
+            >
+              {{ t("table.filters.editor.clear") }}
+            </button>
+          </div>
           <FilterOptionPickerContent
             v-model:search-query="searchQuery"
             :flat-radio-value="state.flatRadioValue.value"

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

@@ -4,10 +4,18 @@ type __VLS_Props = {
     dynamic?: boolean;
     session?: boolean;
     embedded?: boolean;
+    header?: boolean;
     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: {
@@ -22,10 +30,14 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: () => any;
     sessionClosed: () => any;
+    back: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDismiss?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    onBack?: (() => any) | undefined;
+}>, {
+    header: boolean;
+}, {}, {}, {}, 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;

package/dist/runtime/table/components/filters/tags/registry.js

@@ -1,13 +1,13 @@
-import BooleanFilterTag from "./BooleanFilterTag.vue";
-import DateFilterTag from "./DateFilterTag.vue";
-import NumberFilterTag from "./NumberFilterTag.vue";
-import OptionFilterTag from "./OptionFilterTag.vue";
-import TextFilterTag from "./TextFilterTag.vue";
+import BooleanFilterTag from "./boolean-filter-tag.vue";
+import DateFilterTag from "./date-filter-tag.vue";
+import NumberFilterTag from "./number-filter-tag.vue";
+import OptionFilterTag from "./option-filter-tag.vue";
+import TextFilterTag from "./text-filter-tag.vue";
 const FILTER_TAG_COMPONENTS = {
-  option: OptionFilterTag,
   boolean: BooleanFilterTag,
   date: DateFilterTag,
   number: NumberFilterTag,
+  option: OptionFilterTag,
   text: TextFilterTag
 };
 export function resolveFilterTagComponent(definition) {

package/dist/runtime/table/components/filters/tags/{TextFilterTag.d.vue.ts → text-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: {