nuxt-ui-tools 1.5.0 → 1.6.0

package/dist/runtime/table/components/filters/shared/filter-option-multiple-list.d.vue.ts

@@ -36,6 +36,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         index: number;
         sectionKey: string;
     }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    truncate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/table/components/filters/shared/filter-option-multiple-list.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   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, default: true },
   size: { type: String, required: false },
   ui: { type: Object, required: false }
 });
@@ -36,7 +36,7 @@ const geometry = computed(() => resolveDataListControlGeometry(size.value));
 </script>
 
 <template>
-  <div :class="mergeDataListUiClass('grid gap-0.5', void 0, ui?.list)">
+  <div :class="mergeDataListUiClass('grid grid-cols-1 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"
@@ -48,7 +48,7 @@ const geometry = computed(() => resolveDataListControlGeometry(size.value));
         :key="entry.value == null ? entry.label : String(entry.value)"
         :class="
   mergeDataListUiClass(
-    `nut-dl-option flex cursor-pointer items-center rounded-md text-left outline-none transition-colors hover:bg-elevated ${sizeClasses.option} ${entry.selected ? 'text-highlighted' : 'text-default'}`,
+    `nut-dl-option flex min-w-0 cursor-pointer items-center rounded-md text-left outline-none transition-colors hover:bg-elevated ${sizeClasses.option} ${entry.selected ? 'text-highlighted' : 'text-default'}`,
     void 0,
     ui?.option
   )
@@ -89,11 +89,12 @@ const geometry = computed(() => resolveDataListControlGeometry(size.value));
           <span
             :class="
   mergeDataListUiClass(
-    `min-w-0 flex-1 ${sizeClasses.optionLabel} ${props.truncate ?? true ? 'truncate' : ''}`,
+    `min-w-0 flex-1 ${sizeClasses.optionLabel} ${props.truncate ? 'truncate' : ''}`,
     void 0,
     ui?.optionLabel
   )
 "
+            :title="entry.label"
           >
             {{ entry.label }}
           </span>

package/dist/runtime/table/components/filters/shared/filter-option-multiple-list.vue.d.ts

@@ -36,6 +36,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         index: number;
         sectionKey: string;
     }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    truncate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/table/components/filters/shared/filter-option-picker-content.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useMediaQuery } from "@vueuse/core";
 import { isNullish } from "../../../../shared/utils/predicate";
 import FilterOptionListEnd from "./filter-option-list-end.vue";
 import FilterOptionLoadingList from "./filter-option-loading-list.vue";
@@ -13,6 +14,7 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const searchQuery = defineModel("searchQuery", { type: String, ...{ default: "" } });
+const finePointer = useMediaQuery("(pointer: fine)");
 const flatRadioValue = defineModel("flatRadioValue", { type: null, ...{ default: void 0 } });
 const treeRadioValue = defineModel("treeRadioValue", { type: null, ...{ default: void 0 } });
 const emit = defineEmits(["selectEntry", "toggleTreeEntry", "toggleExpanded"]);
@@ -33,10 +35,11 @@ function handleSelect(options) {
   <FilterSearchablePanel
     v-model:search-query="searchQuery"
     :searchable="props.state.filterUi.value.searchable"
+    :autofocus="props.state.filterUi.value.searchable && finePointer"
     :search-placeholder="props.state.filterUi.value.labels.searchPlaceholder"
     :search-loading="props.state.optionSource.isStaleLoading.value"
     :show-empty="
-  !props.state.optionSource.isLoading.value && !props.state.displayEntries.value.length && !props.state.visibleTreeEntries.value.length
+  !props.state.optionSource.isLoading.value && (props.state.filterUi.value.presentation === 'tree' ? !props.state.visibleTreeEntries.value.length : !props.state.displayEntries.value.length)
 "
     :empty-label="props.state.filterUi.value.labels.empty"
     :size="props.size"

package/dist/runtime/table/components/filters/shared/filter-option-single-list.vue

@@ -37,9 +37,9 @@ const modelValue = defineModel({ type: null, ...{
     :size="size"
     :ui="{
   root: 'w-full',
-  fieldset: mergeDataListUiClass('grid gap-0.5', void 0, ui?.list),
+  fieldset: mergeDataListUiClass('grid grid-cols-1 gap-0.5', void 0, ui?.list),
   item: mergeDataListUiClass(
-    `relative flex cursor-pointer items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated ${sizeClasses.option}`,
+    `relative flex min-w-0 cursor-pointer items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated ${sizeClasses.option}`,
     void 0,
     ui?.option
   ),
@@ -67,7 +67,7 @@ const modelValue = defineModel({ type: null, ...{
 "
         />
 
-        <span class="min-w-0 flex-1 truncate">
+        <span class="min-w-0 flex-1 truncate" :title="item.label">
           {{ item.label }}
         </span>
         <USkeleton

package/dist/runtime/table/components/filters/shared/filter-option-tree-content.vue

@@ -55,7 +55,10 @@ function activateTreeEntry(entry) {
 </script>
 
 <template>
-  <div v-if="multiple" :class="mergeDataListUiClass('grid gap-0.5', void 0, ui?.list)">
+  <div
+    v-if="multiple"
+    :class="mergeDataListUiClass('grid grid-cols-1 gap-0.5', void 0, ui?.list)"
+  >
     <div
       v-for="entry in entries"
       :key="entry.id"
@@ -132,6 +135,7 @@ function activateTreeEntry(entry) {
     ui?.optionLabel
   )
 "
+          :title="entry.label"
         >
           {{ entry.label }}
         </span>
@@ -159,7 +163,7 @@ function activateTreeEntry(entry) {
     :size="size"
     :ui="{
   root: 'w-full',
-  fieldset: mergeDataListUiClass('grid gap-0.5', void 0, ui?.list),
+  fieldset: mergeDataListUiClass('grid grid-cols-1 gap-0.5', void 0, ui?.list),
   item: mergeDataListUiClass(
     `relative flex cursor-pointer items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated ${sizeClasses.option}`,
     void 0,
@@ -206,7 +210,7 @@ function activateTreeEntry(entry) {
           :class="[sizeClasses.optionIcon, 'shrink-0 text-muted']"
         />
 
-        <span class="min-w-0 flex-1" :class="item.truncate ? 'truncate' : ''">
+        <span class="min-w-0 flex-1" :class="item.truncate ? 'truncate' : ''" :title="item.label">
           {{ item.label }}
         </span>
         <USkeleton

package/dist/runtime/table/components/filters/shared/filter-popover-shell.vue

@@ -12,6 +12,14 @@ const resolvedContentClass = computed(
   () => resolveDataListPopoverContentClass("fit", props.contentClass)
 );
 const emit = defineEmits(["updateOpen"]);
+function focusContent(event) {
+  const scope = event.target instanceof HTMLElement ? event.target : null;
+  const dialog = scope?.closest('[role="dialog"]') ?? scope?.querySelector('[role="dialog"]');
+  if (dialog instanceof HTMLElement) {
+    event.preventDefault();
+    dialog.focus({ preventScroll: true });
+  }
+}
 function handleFocusOutside(event) {
   if (props.transitioning) {
     event.preventDefault();
@@ -31,7 +39,8 @@ function handleFocusOutside(event) {
   side: 'bottom',
   align: 'start',
   sideOffset: 8,
-  onFocusOutside: handleFocusOutside
+  onFocusOutside: handleFocusOutside,
+  onOpenAutoFocus: focusContent
 }"
       :ui="{ content: resolvedContentClass }"
       @update:open="emit('updateOpen', $event)"

package/dist/runtime/table/components/filters/shared/filter-searchable-panel.vue

@@ -1,4 +1,5 @@
 <script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
 import UInput from "@nuxt/ui/components/Input.vue";
 import UScrollArea from "@nuxt/ui/components/ScrollArea.vue";
 import { computed } from "vue";
@@ -78,15 +79,22 @@ const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size));
       <div
         v-if="showEmpty"
         :class="
-  mergeDataListUiClass(`${sizeClasses.empty} text-center text-muted`, void 0, ui?.empty)
+  mergeDataListUiClass(
+    `nut-dl-editor__empty ${sizeClasses.empty} text-center text-muted`,
+    void 0,
+    ui?.empty
+  )
 "
       >
         <slot name="empty">
-          <div class="grid justify-items-center gap-2">
-            <span class="flex size-8 items-center justify-center rounded-full bg-elevated">
-              <span class="i-lucide-search-x size-4" aria-hidden="true" />
-            </span>
-            <span>{{ emptyLabel }}</span>
+          <div class="grid justify-items-center gap-1.5">
+            <UIcon name="i-lucide-search-x" class="size-4 text-dimmed" aria-hidden="true" />
+            <span class="text-[12.5px] leading-[18px]">{{ emptyLabel }}</span>
+            <span
+              v-if="searchQuery.trim()"
+              class="max-w-full truncate text-[12px] leading-[16px] text-dimmed"
+              >« {{ searchQuery.trim() }} »</span
+            >
           </div>
         </slot>
       </div>

package/dist/runtime/table/components/filters/shared/filter-trigger-tag.vue

@@ -114,7 +114,7 @@ const labelClass = computed(() => `flex min-w-0 items-center ${geometry.value.to
       :size="size"
       :class="
   mergeDataListUiClass(
-    'nut-dl-tag nut-dl-tag--active min-w-0 max-w-full rounded-md bg-elevated ring ring-inset ring-default',
+    'nut-dl-tag nut-dl-tag--active min-w-0 max-w-full rounded-md ring ring-inset ring-default',
     void 0,
     ui?.activeRoot
   )
@@ -231,3 +231,7 @@ const labelClass = computed(() => `flex min-w-0 items-center ${geometry.value.to
     </UFieldGroup>
   </div>
 </template>
+
+<style>
+.nut-dl-tag--active{--nut-dl-tag-bg:var(--ui-bg-elevated);background-color:var(--nut-dl-tag-bg);transition:background-color .12s ease}.nut-dl-tag--active:hover{--tw-ring-color:var(--ui-border-accented);background-color:color-mix(in srgb,var(--nut-dl-tag-bg),var(--ui-text-highlighted) 6%)}
+</style>

package/dist/runtime/table/components/filters/tags/boolean-filter-tag.d.vue.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     dynamic?: boolean;
     session?: boolean;
     embedded?: boolean;
+    header?: boolean;
 };
 declare var __VLS_10: {
     preview: {
@@ -27,11 +28,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: () => any;
+    back: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDismiss?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    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/boolean-filter-tag.vue

@@ -16,21 +16,26 @@ import {
   resolveFilterEditorSizeClasses,
   resolveFilterTriggerIcon
 } from "../../../utils";
+import FilterEditorHeader from "../shared/filter-editor-header.vue";
 import FilterPopoverShell from "../shared/filter-popover-shell.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 }
+  embedded: { type: Boolean, required: false },
+  header: { type: Boolean, required: false, default: true }
 });
-const emit = defineEmits(["dismiss", "sessionClosed"]);
+const emit = defineEmits(["back", "dismiss", "sessionClosed"]);
 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 showHeader = computed(
+  () => props.header && dataListUi.ui.value.filterTags?.props?.editorHeader !== false
+);
 const searchQuery = ref("");
 const isSessionOpen = ref(false);
 const isContentReady = ref(false);
@@ -186,6 +191,15 @@ function clearFilter() {
 "
         @vue:mounted="handleContentMounted"
       >
+        <FilterEditorHeader
+          v-if="showHeader"
+          :label="internals.filters.getFilterLabelText({ label: definition.label })"
+          :active="preview.active"
+          :embedded="embedded"
+          :ui="dataListFilterUi"
+          @back="emit('back')"
+          @clear="clearFilter"
+        />
         <div
           :class="mergeDataListUiClass(sizeClasses.scrollArea, void 0, dataListFilterUi?.list)"
         >
@@ -199,7 +213,7 @@ function clearFilter() {
   root: 'w-full',
   fieldset: 'grid gap-0.5',
   item: mergeDataListUiClass(
-    `flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated ${sizeClasses.option}`,
+    `relative flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated ${sizeClasses.option}`,
     void 0,
     dataListFilterUi?.option
   ),
@@ -207,7 +221,7 @@ function clearFilter() {
   base: 'cursor-pointer',
   wrapper: 'min-w-0 flex-1',
   label: mergeDataListUiClass(
-    `w-full cursor-pointer text-default ${sizeClasses.optionLabel}`,
+    `w-full cursor-pointer text-default before:absolute before:inset-0 ${sizeClasses.optionLabel}`,
     void 0,
     dataListFilterUi?.optionLabel
   )
@@ -249,7 +263,7 @@ function clearFilter() {
         </div>
 
         <div
-          v-if="filterUi.commitMode === 'manual'"
+          v-if="filterUi.commitMode !== 'auto'"
           :class="
   mergeDataListUiClass(
     `flex items-center justify-between border-t border-default ${sizeClasses.footer}`,

package/dist/runtime/table/components/filters/tags/boolean-filter-tag.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     dynamic?: boolean;
     session?: boolean;
     embedded?: boolean;
+    header?: boolean;
 };
 declare var __VLS_10: {
     preview: {
@@ -27,11 +28,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: () => any;
+    back: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDismiss?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    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/date-filter-tag.d.vue.ts

@@ -5,6 +5,7 @@ type __VLS_Props = {
     dynamic?: boolean;
     session?: boolean;
     embedded?: boolean;
+    header?: boolean;
     initialOperator?: TableFilterOperator;
 };
 declare var __VLS_10: {
@@ -29,11 +30,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: () => any;
+    back: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDismiss?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    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/date-filter-tag.vue

@@ -15,6 +15,7 @@ import {
   isNullish
 } from "../../../../shared/utils/predicate";
 import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { useDeferredCommit } from "../../../composables/use-deferred-commit";
 import { useFilterTagSession } from "../../../composables/use-filter-tag-session";
 import { useTableInternals } from "../../../composables/use-table-internals";
 import {
@@ -29,6 +30,7 @@ import {
   resolveDateFilterScalarPresets,
   resolveDateFilterUi
 } from "../../../utils";
+import FilterEditorHeader from "../shared/filter-editor-header.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";
@@ -38,15 +40,19 @@ const props = defineProps({
   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 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 showHeader = computed(
+  () => props.header && dataListUi.ui.value.filterTags?.props?.editorHeader !== false
+);
 const { t } = useUiToolsLocale();
 const isMobile = useMediaQuery("(max-width: 639px)");
 const pendingOperator = ref(props.initialOperator);
@@ -68,6 +74,8 @@ const operator = computed(() => {
   return value === "isNot" || value === "before" || value === "after" || value === "between" ? value : "is";
 });
 const filterUi = computed(() => resolveDateFilterUi(props.definition, operator.value));
+const autoCommit = computed(() => filterUi.value.commitMode === "auto");
+const deferred = useDeferredCommit({ commit: commitValue, flushOnDispose: props.embedded });
 const operatorLabel = computed(
   () => internals.filters.getFilterOperatorOptions({
     key: props.definition.key
@@ -81,12 +89,14 @@ const operatorItems = computed(
 const scalarPresets = computed(
   () => resolveDateFilterScalarPresets({
     definition: props.definition,
-    operator: operator.value === "before" || operator.value === "after" || operator.value === "isNot" ? operator.value : "is"
+    operator: operator.value === "before" || operator.value === "after" || operator.value === "isNot" ? operator.value : "is",
+    translate: (key) => t(`table.filters.date.presets.${key}`)
   })
 );
 const rangePresets = computed(
   () => resolveDateFilterRangePresets({
-    definition: props.definition
+    definition: props.definition,
+    translate: (key) => t(`table.filters.date.presets.${key}`)
   })
 );
 const rangeCalendarPanels = computed(
@@ -141,6 +151,11 @@ const session = useFilterTagSession({
   embedded: props.embedded,
   hasCommittedState: () => !isNullish(internals.filters.getActiveFilterState({ key: props.definition.key })),
   onClose: () => {
+    if (autoCommit.value) {
+      deferred.flush();
+    } else {
+      deferred.cancel();
+    }
     pendingOperator.value = void 0;
   },
   onDismiss: () => emit("dismiss"),
@@ -184,11 +199,8 @@ function initLocalState() {
   localRangeStart.value = void 0;
   localRangeEnd.value = void 0;
 }
-function applyFilter() {
-  const currentOperator = operator.value;
-  const nextOperator = pendingOperator.value;
-  pendingOperator.value = void 0;
-  if (currentOperator === "between") {
+function commitValue() {
+  if (operator.value === "between") {
     const from = localRangeStart.value ? toJsDate(localRangeStart.value) : void 0;
     const to = localRangeEnd.value ? toJsDate(localRangeEnd.value) : void 0;
     const value = {};
@@ -200,20 +212,30 @@ function applyFilter() {
     }
     internals.filters.setScalarFilterValue({
       key: props.definition.key,
-      operator: nextOperator,
+      operator: pendingOperator.value,
       value: from || to ? value : void 0
     });
-    session.close();
     return;
   }
   internals.filters.setScalarFilterValue({
     key: props.definition.key,
-    operator: nextOperator,
+    operator: pendingOperator.value,
     value: localDate.value ? toJsDate(localDate.value) : void 0
   });
+}
+function applyFilter() {
+  deferred.cancel();
+  commitValue();
+  pendingOperator.value = void 0;
   session.close();
 }
+function scheduleCommit() {
+  if (autoCommit.value) {
+    deferred.schedule();
+  }
+}
 function clearFilter() {
+  deferred.cancel();
   internals.filters.clearFilter({ key: props.definition.key });
   localDate.value = void 0;
   localRangeStart.value = void 0;
@@ -221,6 +243,7 @@ function clearFilter() {
   session.close();
 }
 function handleOperatorChange(op) {
+  deferred.cancel();
   localDate.value = void 0;
   localRangeStart.value = void 0;
   localRangeEnd.value = void 0;
@@ -231,14 +254,14 @@ function handleOperatorChange(op) {
 }
 function applyScalarPreset(value) {
   localDate.value = toCalendarDate(value);
-  if (filterUi.value.commitMode === "auto") {
+  if (autoCommit.value) {
     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") {
+  if (autoCommit.value) {
     applyFilter();
   }
 }
@@ -247,23 +270,23 @@ function isRangePresetActive(value) {
   const toMatches = areSameCalendarDay(localRangeEnd.value, toCalendarDate(value.to));
   return fromMatches && toMatches;
 }
-function setSingleDate(value) {
+function pickSingleDate(value) {
   localDate.value = coerceCalendarDate(value);
-  if (filterUi.value.commitMode === "auto") {
+  if (autoCommit.value) {
     applyFilter();
   }
 }
+function typeSingleDate(value) {
+  localDate.value = coerceCalendarDate(value);
+  scheduleCommit();
+}
 function setRangeStart(value) {
   localRangeStart.value = coerceCalendarDate(value);
-  if (filterUi.value.commitMode === "auto" && filterUi.value.range.display === "inputs") {
-    applyFilter();
-  }
+  scheduleCommit();
 }
 function setRangeEnd(value) {
   localRangeEnd.value = coerceCalendarDate(value);
-  if (filterUi.value.commitMode === "auto" && filterUi.value.range.display === "inputs") {
-    applyFilter();
-  }
+  scheduleCommit();
 }
 function setCalendarRange(value) {
   if (!isObject(value) || isArray(value)) {
@@ -273,7 +296,7 @@ function setCalendarRange(value) {
   }
   localRangeStart.value = "start" in value ? coerceCalendarDate(value.start) : void 0;
   localRangeEnd.value = "end" in value ? coerceCalendarDate(value.end) : void 0;
-  if (filterUi.value.commitMode === "auto" && filterUi.value.range.display === "calendar") {
+  if (autoCommit.value && localRangeStart.value && localRangeEnd.value) {
     applyFilter();
   }
 }
@@ -374,6 +397,15 @@ function areSameCalendarDay(left, right) {
   )
 "
         >
+          <FilterEditorHeader
+            v-if="showHeader"
+            :label="internals.filters.getFilterLabelText({ label: definition.label })"
+            :active="preview.active"
+            :embedded="embedded"
+            :ui="dataListFilterUi"
+            @back="emit('back')"
+            @clear="clearFilter"
+          />
           <div v-if="operator === 'between'">
             <div
               class="grid gap-0"
@@ -394,7 +426,7 @@ function areSameCalendarDay(left, right) {
                 <div
                   :class="[geometry.caption, 'font-medium uppercase tracking-[0.14em] text-muted']"
                 >
-                  Date range
+                  {{ t("table.filters.date.range") }}
                 </div>
 
                 <div
@@ -466,7 +498,7 @@ function areSameCalendarDay(left, right) {
                 <div
                   :class="[geometry.caption, 'font-medium uppercase tracking-[0.14em] text-muted']"
                 >
-                  Custom range
+                  {{ t("table.filters.date.custom") }}
                 </div>
                 <div :class="[geometry.caption, 'truncate text-muted']">
                   {{ rangeSummary }}
@@ -475,7 +507,9 @@ function areSameCalendarDay(left, right) {
 
               <div :class="['mt-2 grid sm:grid-cols-2', geometry.toolbarGap]">
                 <div class="space-y-1">
-                  <span :class="[geometry.caption, 'px-1 text-muted']">Start</span>
+                  <span :class="[geometry.caption, 'px-1 text-muted']">{{
+                    t("table.filters.date.start")
+                  }}</span>
                   <UInputDate
                     :model-value="localRangeStart"
                     leading
@@ -492,7 +526,9 @@ function areSameCalendarDay(left, right) {
                 </div>
 
                 <div class="space-y-1">
-                  <span :class="[geometry.caption, 'px-1 text-muted']">End</span>
+                  <span :class="[geometry.caption, 'px-1 text-muted']">{{
+                    t("table.filters.date.end")
+                  }}</span>
                   <UInputDate
                     :model-value="localRangeEnd"
                     leading
@@ -557,7 +593,7 @@ function areSameCalendarDay(left, right) {
               leading-icon="i-lucide-calendar-days"
               :size="size"
               class="w-full"
-              @update:model-value="setSingleDate"
+              @update:model-value="typeSingleDate"
             />
 
             <UCalendar
@@ -575,12 +611,12 @@ function areSameCalendarDay(left, right) {
   ),
   cellTrigger: 'rounded-md'
 }"
-              @update:model-value="setSingleDate"
+              @update:model-value="pickSingleDate"
             />
           </div>
 
           <div
-            v-if="filterUi.commitMode === 'manual'"
+            v-if="!autoCommit"
             :class="
   mergeDataListUiClass(
     `flex items-center border-t border-default ${sizeClasses.footer} ${operator === 'between' ? 'justify-between' : 'justify-end'}`,

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

@@ -5,6 +5,7 @@ type __VLS_Props = {
     dynamic?: boolean;
     session?: boolean;
     embedded?: boolean;
+    header?: boolean;
     initialOperator?: TableFilterOperator;
 };
 declare var __VLS_10: {
@@ -29,11 +30,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: () => any;
+    back: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDismiss?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    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;