nuxt-ui-tools 1.5.0 → 1.6.1

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -36,6 +36,7 @@ function getPublicComponents(runtimeDir, options) {
       "SortMenu",
       "LayoutSwitch",
       "Content",
+      "ErrorState",
       "Table",
       "Grid",
       "Pagination",

package/dist/runtime/i18n/locales/en.js

@@ -369,6 +369,7 @@ export default defineUiToolsLocale({
         loadMore: "Load more",
         loadingMore: "Loading\u2026",
         noMatchingFilters: "No matching filters.",
+        clearSearch: "Clear search",
         resetColumns: "Default",
         resetFilters: "Reset",
         searchColumns: "Search columns...",
@@ -422,6 +423,24 @@ export default defineUiToolsLocale({
           done: "Done",
           order: "Order",
           sortBy: "Sort by"
+        },
+        date: {
+          custom: "Custom range",
+          end: "End",
+          presets: {
+            last30Days: "Last 30 days",
+            last7Days: "Last 7 days",
+            lastMonth: "Last month",
+            sevenDaysAgo: "7 days ago",
+            startOfMonth: "Start of month",
+            startOfYear: "Start of year",
+            thisMonth: "This month",
+            today: "Today",
+            yearToDate: "Year to date",
+            yesterday: "Yesterday"
+          },
+          range: "Date range",
+          start: "Start"
         }
       },
       footer: {
@@ -463,8 +482,8 @@ export default defineUiToolsLocale({
         },
         gridError: {
           action: "Retry",
-          description: "The latest request failed. Try again once the data source is available.",
-          title: "Unable to load this grid"
+          description: "The last request failed. Try again in a moment.",
+          title: "This list could not be loaded"
         },
         loaded: "{count} loaded",
         loadingMore: "Loading more\u2026"
@@ -472,6 +491,8 @@ export default defineUiToolsLocale({
       summaries: {
         filtered: "Filtered",
         page: "Page",
+        rowOne: "row",
+        rowOther: "rows",
         selection: "Selection",
         total: "Total"
       }

package/dist/runtime/i18n/locales/fr.js

@@ -369,6 +369,7 @@ export default defineUiToolsLocale({
         loadMore: "Charger plus",
         loadingMore: "Chargement\u2026",
         noMatchingFilters: "Aucun filtre correspondant.",
+        clearSearch: "Effacer la recherche",
         resetColumns: "Par d\xE9faut",
         resetFilters: "R\xE9initialiser",
         searchColumns: "Rechercher des colonnes...",
@@ -422,6 +423,24 @@ export default defineUiToolsLocale({
           done: "Termin\xE9",
           order: "Ordre",
           sortBy: "Trier par"
+        },
+        date: {
+          custom: "P\xE9riode personnalis\xE9e",
+          end: "Fin",
+          presets: {
+            last30Days: "30 derniers jours",
+            last7Days: "7 derniers jours",
+            lastMonth: "Le mois dernier",
+            sevenDaysAgo: "Il y a 7 jours",
+            startOfMonth: "D\xE9but du mois",
+            startOfYear: "D\xE9but de l'ann\xE9e",
+            thisMonth: "Ce mois-ci",
+            today: "Aujourd'hui",
+            yearToDate: "Depuis le d\xE9but de l'ann\xE9e",
+            yesterday: "Hier"
+          },
+          range: "P\xE9riode",
+          start: "D\xE9but"
         }
       },
       footer: {
@@ -463,8 +482,8 @@ export default defineUiToolsLocale({
         },
         gridError: {
           action: "R\xE9essayer",
-          description: "La derni\xE8re requ\xEAte a \xE9chou\xE9. R\xE9essayez une fois la source de donn\xE9es disponible.",
-          title: "Impossible de charger cette grille"
+          description: "La derni\xE8re requ\xEAte a \xE9chou\xE9. R\xE9essayez dans un instant.",
+          title: "Impossible de charger cette liste"
         },
         loaded: "{count} charg\xE9s",
         loadingMore: "Chargement en cours\u2026"
@@ -472,6 +491,8 @@ export default defineUiToolsLocale({
       summaries: {
         filtered: "Filtr\xE9s",
         page: "Page",
+        rowOne: "ligne",
+        rowOther: "lignes",
         selection: "S\xE9lection",
         total: "Total"
       }

package/dist/runtime/i18n/types.d.ts

@@ -21,6 +21,7 @@ export interface UiToolsTableMessages {
     };
     controls: {
         addFilter: string;
+        clearSearch: string;
         resetFilters: string;
         columnsCount: string;
         close: string;
@@ -46,6 +47,8 @@ export interface UiToolsTableMessages {
         page: string;
         filtered: string;
         selection: string;
+        rowOne: string;
+        rowOther: string;
     };
     columnsMenu: {
         sortAsc: string;
@@ -66,6 +69,24 @@ export interface UiToolsTableMessages {
             sortBy: string;
             order: string;
         };
+        date: {
+            range: string;
+            custom: string;
+            start: string;
+            end: string;
+            presets: {
+                today: string;
+                yesterday: string;
+                sevenDaysAgo: string;
+                startOfMonth: string;
+                startOfYear: string;
+                last7Days: string;
+                last30Days: string;
+                thisMonth: string;
+                lastMonth: string;
+                yearToDate: string;
+            };
+        };
         panel: {
             trigger: string;
             clearAll: string;

package/dist/runtime/table/components/data-list/data-list-content.vue

@@ -104,7 +104,13 @@ watch(
       :error="error"
       :retry="refresh"
     >
-      <DataListErrorState min-height="16rem" :size="resolvedSize" :ui="ui" @retry="refresh" />
+      <DataListErrorState
+        :min-height="fit === 'content' ? '16rem' : void 0"
+        :class="fit === 'content' ? '' : 'min-h-0 flex-1'"
+        :size="resolvedSize"
+        :ui="ui"
+        @retry="refresh"
+      />
     </slot>
     <slot
       v-else-if="empty && $slots.empty"

package/dist/runtime/table/components/data-list/data-list-error-state.d.vue.ts

@@ -3,11 +3,28 @@ type __VLS_Props = {
     minHeight?: string;
     size?: DataListControlSize;
     ui?: DataListContentUi;
+    /** Replaces the localized default title. */
+    title?: string;
+    /** Replaces the localized default description. */
+    description?: string;
+    /** Support reference shown under the description, such as a request identifier. */
+    reference?: string;
+    icon?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRetry?: (() => 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/data-list/data-list-error-state.vue

@@ -4,11 +4,15 @@ import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useDataListUi } from "../../composables/use-data-list-ui";
-import { mergeDataListUiClass, resolveDataListControlGeometry } from "../../utils";
+import { mergeDataListUiClass } from "../../utils";
 const props = defineProps({
   minHeight: { type: String, required: false },
   size: { type: String, required: false },
-  ui: { type: Object, required: false }
+  ui: { type: Object, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  reference: { type: String, required: false },
+  icon: { type: String, required: false }
 });
 const emit = defineEmits(["retry"]);
 const dataListUi = useDataListUi();
@@ -17,75 +21,95 @@ const rootUi = computed(() => dataListUi.ui.value.content?.ui);
 const resolvedSize = computed(
   () => props.size ?? dataListUi.ui.value.content?.size ?? dataListUi.controlSize.value
 );
-const geometry = computed(() => resolveDataListControlGeometry(resolvedSize.value));
+const resolvedTitle = computed(() => props.title ?? t("table.states.gridError.title"));
+const resolvedDescription = computed(
+  () => props.description ?? t("table.states.gridError.description")
+);
 </script>
 
 <template>
   <div
     :class="
   mergeDataListUiClass(
-    'grid place-items-center px-4 py-10 text-center',
+    'nut-dl-error flex w-full flex-col items-center justify-center px-6 py-12 text-center',
     rootUi?.error,
     ui?.error
   )
 "
     :style="{ minHeight }"
+    role="alert"
   >
     <div
       :class="
   mergeDataListUiClass(
-    `flex max-w-md items-start text-left ${geometry.toolbarGap}`,
-    rootUi?.errorBody,
-    ui?.errorBody
+    'nut-dl-error__art relative mb-4 flex size-14 items-center justify-center',
+    rootUi?.errorIcon,
+    ui?.errorIcon
   )
 "
     >
       <span
+        class="nut-dl-error__ring absolute inset-0 rounded-2xl bg-error/10 ring ring-inset ring-error/15"
+      />
+      <span
+        class="nut-dl-error__ring nut-dl-error__ring--back absolute inset-1.5 -z-10 -rotate-6 rounded-xl bg-error/5"
+      />
+      <UIcon :name="icon ?? 'i-lucide-cloud-alert'" class="relative size-5 text-error" />
+    </div>
+    <div :class="mergeDataListUiClass('min-w-0 max-w-md', rootUi?.errorCopy, ui?.errorCopy)">
+      <div
         :class="
   mergeDataListUiClass(
-    'grid size-9 shrink-0 place-items-center rounded-md bg-error/10 text-error',
-    rootUi?.errorIcon,
-    ui?.errorIcon
+    'nut-dl-error__title text-[14px] font-medium text-highlighted',
+    rootUi?.errorTitle,
+    ui?.errorTitle
   )
 "
       >
-        <UIcon name="i-lucide-cloud-alert" class="size-4" />
-      </span>
-      <div
+        {{ resolvedTitle }}
+      </div>
+      <p
         :class="
-  mergeDataListUiClass(`min-w-0 flex-1 ${geometry.text}`, rootUi?.errorCopy, ui?.errorCopy)
-"
-      >
-        <div
-          :class="
-  mergeDataListUiClass('font-medium text-highlighted', rootUi?.errorTitle, ui?.errorTitle)
-"
-        >
-          {{ t("table.states.gridError.title") }}
-        </div>
-        <p
-          :class="
   mergeDataListUiClass(
-    'mt-0.5 leading-5 text-muted',
+    'nut-dl-error__description mx-auto mt-1 max-w-[40ch] text-[12.5px] leading-relaxed text-muted',
     rootUi?.errorDescription,
     ui?.errorDescription
   )
 "
-        >
-          {{ t("table.states.gridError.description") }}
-        </p>
-        <UButton
-          color="neutral"
-          variant="soft"
-          :size="resolvedSize"
-          icon="i-lucide-refresh-cw"
-          class="mt-3"
-          :ui="{ base: mergeDataListUiClass(rootUi?.retry, ui?.retry) }"
-          @click="emit('retry')"
-        >
-          {{ t("table.states.gridError.action") }}
-        </UButton>
-      </div>
+      >
+        {{ resolvedDescription }}
+      </p>
+      <code
+        v-if="reference"
+        class="nut-dl-error__reference mt-2.5 inline-block rounded-md bg-elevated px-2 py-1 font-mono text-[11.5px] text-muted select-all"
+      >
+        {{ reference }}
+      </code>
+    </div>
+    <div
+      :class="
+  mergeDataListUiClass(
+    'nut-dl-error__actions mt-4 flex items-center gap-2',
+    rootUi?.errorBody,
+    ui?.errorBody
+  )
+"
+    >
+      <UButton
+        color="neutral"
+        variant="outline"
+        :size="resolvedSize"
+        icon="i-lucide-refresh-cw"
+        :ui="{ base: mergeDataListUiClass(rootUi?.retry, ui?.retry) }"
+        @click="emit('retry')"
+      >
+        {{ t("table.states.gridError.action") }}
+      </UButton>
+      <slot name="actions" />
     </div>
   </div>
 </template>
+
+<style>
+.nut-dl-error{animation:nut-dl-error-in .24s cubic-bezier(.2,.9,.3,1) both}@keyframes nut-dl-error-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.nut-dl-error{animation:none}}
+</style>

package/dist/runtime/table/components/data-list/data-list-error-state.vue.d.ts

@@ -3,11 +3,28 @@ type __VLS_Props = {
     minHeight?: string;
     size?: DataListControlSize;
     ui?: DataListContentUi;
+    /** Replaces the localized default title. */
+    title?: string;
+    /** Replaces the localized default description. */
+    description?: string;
+    /** Support reference shown under the description, such as a request identifier. */
+    reference?: string;
+    icon?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRetry?: (() => 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/data-list/sort-menu-panel.vue

@@ -31,7 +31,7 @@ function humanize(value) {
         v-for="key in keys"
         :key="key"
         type="button"
-        class="nut-dl-sort__row flex w-full items-center gap-[10px] rounded-lg text-left transition-colors hover:bg-elevated active:bg-elevated"
+        class="nut-dl-sort__row flex w-full items-center gap-[10px] rounded-lg text-left outline-none transition-colors hover:bg-elevated focus-visible:ring-2 focus-visible:ring-primary/40 active:bg-elevated"
         :class="[
   compact ? 'h-8 px-2.5 text-[13px]' : 'h-[46px] px-[10px] text-[15px]',
   activeKey === key ? 'nut-dl-sort__row--active font-semibold text-highlighted' : 'text-default'
@@ -52,35 +52,43 @@ function humanize(value) {
         />
       </button>
     </div>
-    <div
-      class="nut-dl-sort__caption border-t border-default font-semibold tracking-[0.06em] text-dimmed uppercase"
-      :class="
-  compact ? 'mx-1 mt-1.5 px-1.5 pt-2 pb-1 text-[10.5px]' : 'mt-2 px-5 pt-4 pb-2 text-[11px]'
-"
-    >
-      {{ t("table.filters.sheet.order") }}
+    <div class="w-full min-w-0" :class="compact ? 'mt-1.5 px-1' : 'mt-2'">
+      <div
+        class="nut-dl-sort__caption border-t border-default font-semibold tracking-[0.06em] text-dimmed uppercase"
+        :class="compact ? 'px-1.5 pt-2 pb-1 text-[10.5px]' : 'px-5 pt-4 pb-2 text-[11px]'"
+      >
+        {{ t("table.filters.sheet.order") }}
+      </div>
     </div>
     <div
-      class="nut-dl-sort__dir grid grid-cols-[repeat(2,minmax(0,1fr))] gap-0.5 overflow-hidden rounded-md bg-elevated p-0.5"
-      :class="compact ? 'mx-2.5 mb-2.5' : 'mx-4 mb-5'"
+      class="nut-dl-sort__dir-wrap w-full min-w-0"
+      :class="compact ? 'px-2.5 pb-2.5' : 'px-4 pb-5'"
     >
-      <button
-        v-for="dir in ['asc', 'desc']"
-        :key="dir"
-        type="button"
-        class="flex min-w-0 items-center justify-center gap-1.5 rounded-[5px] px-1 font-medium whitespace-nowrap"
-        :class="[
+      <div
+        class="nut-dl-sort__dir grid w-full min-w-0 grid-cols-[repeat(2,minmax(0,1fr))] gap-0.5 overflow-hidden rounded-md bg-elevated p-0.5"
+        role="radiogroup"
+        :aria-label="t('table.filters.sheet.order')"
+      >
+        <button
+          v-for="dir in ['asc', 'desc']"
+          :key="dir"
+          type="button"
+          role="radio"
+          :aria-checked="activeDirection === dir"
+          class="flex min-w-0 items-center justify-center gap-1.5 overflow-hidden rounded-[5px] px-1 font-medium whitespace-nowrap outline-none transition-colors focus-visible:ring-2 focus-visible:ring-primary/40"
+          :class="[
   compact ? 'h-7 text-[12px]' : 'h-8 text-[12.5px]',
-  activeDirection === dir ? 'nut-dl-sort__dir--active bg-default text-highlighted shadow-[0_0_0_1px_var(--ui-border)]' : 'text-muted'
+  activeDirection === dir ? 'nut-dl-sort__dir--active bg-default text-highlighted shadow-[0_0_0_1px_var(--ui-border)]' : 'text-muted hover:text-default'
 ]"
-        @click="emit('selectDirection', dir)"
-      >
-        <UIcon
-          :name="dir === 'asc' ? 'i-lucide-arrow-up' : 'i-lucide-arrow-down'"
-          class="size-3.5"
-        />
-        {{ dir === "asc" ? "A \u2192 Z" : "Z \u2192 A" }}
-      </button>
+          @click="emit('selectDirection', dir)"
+        >
+          <UIcon
+            :name="dir === 'asc' ? 'i-lucide-arrow-up' : 'i-lucide-arrow-down'"
+            class="size-3.5 shrink-0"
+          />
+          <span class="truncate">{{ dir === "asc" ? "A \u2192 Z" : "Z \u2192 A" }}</span>
+        </button>
+      </div>
     </div>
   </div>
 </template>

package/dist/runtime/table/components/drawers/column-panel.vue

@@ -124,6 +124,15 @@ function toggleColumn(columnId) {
   const isVisible2 = internals.tableColumns.tableState.value.columnVisibility?.[columnId] !== false;
   internals.tableColumns.setVisibility({ columnId, visible: !isVisible2 });
 }
+function toggleRow(event, column) {
+  if (event.target instanceof Element && event.target.closest('button, input, [role="checkbox"]')) {
+    return;
+  }
+  if (isRequired(column)) {
+    return;
+  }
+  toggleColumn(column.id);
+}
 function open() {
   internals.controls.columnsPanelOpen.value = true;
 }
@@ -226,7 +235,7 @@ function toggle() {
         <div
           :class="
   mergeDataListUiClass(
-    'nut-dl-colpanel__list grid max-h-80 gap-px overflow-y-auto px-2 py-1',
+    'nut-dl-colpanel__list grid max-h-80 grid-cols-1 gap-px overflow-y-auto px-2 py-1',
     void 0,
     ui.list
   )
@@ -238,11 +247,12 @@ function toggle() {
               :key="column.id"
               :class="
   mergeDataListUiClass(
-    'nut-dl-colpanel__row group/col flex h-8 items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
+    'nut-dl-colpanel__row group/col flex h-8 cursor-pointer items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
     void 0,
     ui.row
   )
 "
+              @click="toggleRow($event, column)"
             >
               <UCheckbox
                 v-bind="checkboxProps"
@@ -278,18 +288,19 @@ function toggle() {
               ghost-class="column-panel-row-ghost"
               chosen-class="column-panel-row-chosen"
               drag-class="column-panel-row-dragging"
-              :class="mergeDataListUiClass('grid gap-px', void 0, ui.section)"
+              :class="mergeDataListUiClass('grid grid-cols-1 gap-px', void 0, ui.section)"
             >
               <div
                 v-for="column in draggableColumns"
                 :key="column.id"
                 :class="
   mergeDataListUiClass(
-    'nut-dl-colpanel__row group/col flex h-8 items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
+    'nut-dl-colpanel__row group/col flex h-8 cursor-pointer items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
     void 0,
     ui.row
   )
 "
+                @click="toggleRow($event, column)"
               >
                 <UCheckbox
                   v-bind="checkboxProps"
@@ -328,11 +339,12 @@ function toggle() {
               :key="column.id"
               :class="
   mergeDataListUiClass(
-    'nut-dl-colpanel__row group/col flex h-8 items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
+    'nut-dl-colpanel__row group/col flex h-8 cursor-pointer items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
     void 0,
     ui.row
   )
 "
+              @click="toggleRow($event, column)"
             >
               <UCheckbox
                 v-bind="checkboxProps"
@@ -365,11 +377,12 @@ function toggle() {
               :key="column.id"
               :class="
   mergeDataListUiClass(
-    'nut-dl-colpanel__row flex h-8 items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
+    'nut-dl-colpanel__row flex h-8 cursor-pointer items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
     void 0,
     ui.row
   )
 "
+              @click="toggleRow($event, column)"
             >
               <UCheckbox
                 v-bind="checkboxProps"

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

@@ -203,7 +203,7 @@ function toggle() {
 "
         :ui="{
   base: mergeDataListUiClass(
-    `nut-dl-tag nut-dl-tag--add shrink-0 ${selectedDefinition ? '' : 'border border-dashed border-[var(--ui-border-accented)] text-muted hover:text-default hover:border-[var(--ui-text-dimmed)]'}`,
+    'nut-dl-tag nut-dl-tag--add shrink-0 border border-dashed border-[var(--ui-border-accented)] text-muted hover:text-default hover:border-[var(--ui-text-dimmed)]',
     void 0,
     ui?.trigger
   ),

package/dist/runtime/table/components/filters/shared/filter-editor-header.d.vue.ts

@@ -0,0 +1,16 @@
+import type { DataListFilterEditorUi } from '../../../types/index.js';
+type __VLS_Props = {
+    label: string;
+    active?: boolean;
+    embedded?: boolean;
+    ui?: DataListFilterEditorUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/filters/shared/filter-editor-header.vue

@@ -0,0 +1,46 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { mergeDataListUiClass } from "../../../utils";
+defineProps({
+  label: { type: String, required: true },
+  active: { type: Boolean, required: false },
+  embedded: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["back", "clear"]);
+const { t } = useUiToolsLocale();
+</script>
+
+<template>
+  <div
+    :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',
+    ui?.editorHeader
+  )
+"
+  >
+    <button
+      v-if="embedded"
+      type="button"
+      class="nut-dl-editor__back flex size-6 items-center justify-center rounded-md text-muted outline-none hover:bg-elevated hover:text-default focus-visible:ring-2 focus-visible:ring-primary/40"
+      :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">
+      {{ label }}
+    </span>
+    <button
+      type="button"
+      class="nut-dl-editor__clear rounded text-[12.5px] font-semibold text-primary outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:opacity-40"
+      :disabled="!active"
+      @click="emit('clear')"
+    >
+      {{ t("table.filters.editor.clear") }}
+    </button>
+  </div>
+</template>

package/dist/runtime/table/components/filters/shared/filter-editor-header.vue.d.ts

@@ -0,0 +1,16 @@
+import type { DataListFilterEditorUi } from '../../../types/index.js';
+type __VLS_Props = {
+    label: string;
+    active?: boolean;
+    embedded?: boolean;
+    ui?: DataListFilterEditorUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;