nuxt-ui-tools 0.1.1 → 0.1.3

package/dist/module.json

@@ -5,7 +5,7 @@
   "compatibility": {
     "nuxt": ">=4.4.0"
   },
-  "version": "0.1.1",
+  "version": "0.1.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/table/components/filters/tags/BooleanFilterTag.vue

@@ -82,7 +82,7 @@ const session = useFilterTagSession({
   session: props.session,
   dynamic: props.dynamic,
   embedded: props.embedded,
-  hasCommittedState: () => internals.filters.getFilterState({ key: props.definition.key }) != null,
+  hasCommittedState: () => internals.filters.getActiveFilterState({ key: props.definition.key }) != null,
   onOpen: initLocalState,
   onClose: () => {
     isContentReady.value = false;

package/dist/runtime/table/components/filters/tags/DateFilterTag.vue

@@ -102,7 +102,7 @@ const session = useFilterTagSession({
   session: props.session,
   dynamic: props.dynamic,
   embedded: props.embedded,
-  hasCommittedState: () => internals.filters.getFilterState({ key: props.definition.key }) != null,
+  hasCommittedState: () => internals.filters.getActiveFilterState({ key: props.definition.key }) != null,
   onOpen: initLocalState,
   onClose: () => {
     pendingOperator.value = void 0;

package/dist/runtime/table/components/filters/tags/NumberFilterTag.vue

@@ -75,7 +75,7 @@ const session = useFilterTagSession({
   session: props.session,
   dynamic: props.dynamic,
   embedded: props.embedded,
-  hasCommittedState: () => internals.filters.getFilterState({ key: props.definition.key }) != null,
+  hasCommittedState: () => internals.filters.getActiveFilterState({ key: props.definition.key }) != null,
   onOpen: initLocalState,
   onClose: () => {
     pendingOperator.value = void 0;

package/dist/runtime/table/components/filters/tags/OptionFilterTag.vue

@@ -61,7 +61,7 @@ const session = useFilterTagSession({
   session: props.session,
   dynamic: props.dynamic,
   embedded: props.embedded,
-  hasCommittedState: () => internals.filters.getFilterState({ key: props.definition.key }) != null,
+  hasCommittedState: () => internals.filters.getActiveFilterState({ key: props.definition.key }) != null,
   onOpen: () => {
     isContentReady.value = false;
     initLocalState();

package/dist/runtime/table/components/filters/tags/TextFilterTag.vue

@@ -59,7 +59,7 @@ const session = useFilterTagSession({
   session: props.session,
   dynamic: props.dynamic,
   embedded: props.embedded,
-  hasCommittedState: () => internals.filters.getFilterState({ key: props.definition.key }) != null,
+  hasCommittedState: () => internals.filters.getActiveFilterState({ key: props.definition.key }) != null,
   onOpen: initLocalState,
   onClose: () => {
     pendingOperator.value = void 0;

package/dist/runtime/table/components/table/TableRenderer.vue

@@ -120,9 +120,12 @@ watch(tableEmpty, (isEmpty) => {
 "
     >
       <template #empty>
-        <slot name="empty">
-          <div />
-        </slot>
+        <template v-if="tableEmpty">
+          <slot name="empty">
+            <div />
+          </slot>
+        </template>
+        <div v-else />
       </template>
     </UTable>
 

package/dist/runtime/table/composables/use-table-filter-presentation.js

@@ -13,7 +13,7 @@ export function useTableFilterPresentation(options) {
   );
   const resolved = computed(
     () => definitions.value.map((definition) => {
-      const active = options.filters.getFilterState({ key: definition.key }) != null;
+      const active = options.filters.getActiveFilterState({ key: definition.key }) != null;
       const location = resolveFilterDisplayLocation(definition.display?.location);
       const visible = location !== "tag-dynamic" || active;
       return {
@@ -57,7 +57,7 @@ export function useTableFilterPresentation(options) {
   const hasPanelFilters = computed(() => panelDefinitions.value.length > 0);
   const activePanelCount = computed(
     () => panelDefinitions.value.filter(
-      (definition) => options.filters.getFilterState({ key: definition.key }) != null
+      (definition) => options.filters.getActiveFilterState({ key: definition.key }) != null
     ).length
   );
   const panelSections = computed(() => {
@@ -81,27 +81,30 @@ export function useTableFilterPresentation(options) {
     dynamicSessionKey.value = null;
   }
   function openPanel() {
-    panelDraftFilters.value = options.filters.activeUiFilters.value.filter((rule) => isPanelKey(rule.key)).map((rule) => ({ ...rule }));
+    panelDraftFilters.value = options.filters.effectiveUiFilters.value.filter((rule) => isPanelKey(rule.key)).map((rule) => ({ ...rule }));
     panelOpen.value = true;
   }
   function closePanel() {
     panelOpen.value = false;
   }
   function resetPanelDraft() {
-    panelDraftFilters.value = options.filters.activeUiFilters.value.filter((rule) => isPanelKey(rule.key)).map((rule) => ({ ...rule }));
+    panelDraftFilters.value = options.filters.effectiveUiFilters.value.filter((rule) => isPanelKey(rule.key)).map((rule) => ({ ...rule }));
   }
   function clearPanelDraft() {
-    panelDraftFilters.value = [];
-    const preservedRules = options.filters.activeUiFilters.value.filter(
+    panelDraftFilters.value = panelDefinitions.value.flatMap((definition) => {
+      const defaultRule = options.filters.getDefaultFilterState({ key: definition.key });
+      return defaultRule ? [{ ...defaultRule }] : [];
+    });
+    const preservedRules = options.filters.effectiveUiFilters.value.filter(
       (rule) => !isPanelKey(rule.key)
     );
     options.filters.replaceFilters({
-      rules: preservedRules
+      rules: [...preservedRules, ...panelDraftFilters.value]
     });
   }
   function applyPanelDraft() {
     const nextPanelRules = panelDraftFilters.value.map((rule) => ({ ...rule }));
-    const preservedRules = options.filters.activeUiFilters.value.filter(
+    const preservedRules = options.filters.effectiveUiFilters.value.filter(
       (rule) => !isPanelKey(rule.key)
     );
     options.filters.replaceFilters({
@@ -160,7 +163,11 @@ export function useTableFilterPresentation(options) {
     });
   }
   function clearPanelFilter(input) {
-    panelDraftFilters.value = panelDraftFilters.value.filter((rule) => rule.key !== input.key);
+    const defaultRule = options.filters.getDefaultFilterState(input);
+    panelDraftFilters.value = [
+      ...panelDraftFilters.value.filter((rule) => rule.key !== input.key),
+      ...defaultRule ? [{ ...defaultRule }] : []
+    ];
   }
   function isPanelKey(key) {
     return panelDefinitions.value.some((definition) => definition.key === key);

package/dist/runtime/table/composables/use-table-filters.d.ts

@@ -13,6 +13,7 @@ export declare function useTableFilters(params: UseTableFiltersParams): {
     searchPlaceholder: ComputedRef<string>;
     hasActiveSearch: ComputedRef<boolean>;
     definitions: ComputedRef<TableUiFilterDefinition[]>;
+    effectiveUiFilters: ComputedRef<TableQueryStateFilterRule<string, TableFilterOperator, TableQueryStateFilterValue>[]>;
     activeUiFilters: ComputedRef<TableQueryStateFilterRule<string, TableFilterOperator, TableQueryStateFilterValue>[]>;
     hasActiveUiFilters: ComputedRef<boolean>;
     getDefinition: (input: {
@@ -21,6 +22,12 @@ export declare function useTableFilters(params: UseTableFiltersParams): {
     getFilterState: (input: {
         key: string;
     }) => TableQueryStateFilterRule<string, TableFilterOperator, TableQueryStateFilterValue> | undefined;
+    getActiveFilterState: (input: {
+        key: string;
+    }) => TableQueryStateFilterRule<string, TableFilterOperator, TableQueryStateFilterValue> | undefined;
+    getDefaultFilterState: (input: {
+        key: string;
+    }) => TableQueryStateFilterRule<string, TableFilterOperator, TableQueryStateFilterValue> | undefined;
     getFilterOptionEntries: (input: {
         key: string;
         entries?: TableFilterOptionEntry[];

package/dist/runtime/table/composables/use-table-filters.js

@@ -6,6 +6,7 @@ import {
   flattenFilterOptionEntries,
   getFilterLabelText,
   mergeTableFilterDefaultRules,
+  resolveTableActiveFilterRules,
   resolveTableFilterDefaultRules,
   resolveFilterOptionEntries
 } from "../utils/index.js";
@@ -19,12 +20,18 @@ export function useTableFilters(params) {
   const definitions = computed(
     () => params.schema.value.filters?.ui ?? []
   );
-  const activeUiFilters = computed(
+  const effectiveUiFilters = computed(
     () => params.state.queryState.filters.value.ui ?? []
   );
   const defaultUiFilters = computed(
     () => resolveTableFilterDefaultRules(definitions.value)
   );
+  const activeUiFilters = computed(
+    () => resolveTableActiveFilterRules({
+      rules: effectiveUiFilters.value,
+      definitions: definitions.value
+    })
+  );
   const hasActiveUiFilters = computed(() => activeUiFilters.value.length > 0);
   function getDefinition(input) {
     return definitions.value.find(
@@ -32,8 +39,16 @@ export function useTableFilters(params) {
     );
   }
   function getFilterState(input) {
+    return effectiveUiFilters.value.find(
+      (rule) => rule.key === input.key
+    );
+  }
+  function getActiveFilterState(input) {
     return activeUiFilters.value.find((rule) => rule.key === input.key);
   }
+  function getDefaultFilterState(input) {
+    return defaultUiFilters.value.find((rule) => rule.key === input.key);
+  }
   function getFilterOptionEntries(input) {
     const definition = getDefinition({ key: input.key });
     if (!definition) {
@@ -65,11 +80,15 @@ export function useTableFilters(params) {
         }
       });
     }
-    return buildFilterPreview({
+    const preview = buildFilterPreview({
       definition,
       rule: getFilterState({ key: input.key }),
       optionEntries: input.entries
     });
+    return {
+      ...preview,
+      active: getActiveFilterState({ key: input.key }) != null
+    };
   }
   function getFilterOperator(input) {
     const definition = getDefinition({ key: input.key });
@@ -211,10 +230,13 @@ export function useTableFilters(params) {
     searchPlaceholder: search.searchPlaceholder,
     hasActiveSearch: search.hasActiveSearch,
     definitions,
+    effectiveUiFilters,
     activeUiFilters,
     hasActiveUiFilters,
     getDefinition,
     getFilterState,
+    getActiveFilterState,
+    getDefaultFilterState,
     getFilterOptionEntries,
     getFilterPreview,
     getFilterOperator,

package/dist/runtime/table/composables/use-table-internals.d.ts

@@ -104,6 +104,7 @@ declare function createTableInternals<TSchema>(options: {
         searchPlaceholder: import("vue").ComputedRef<string>;
         hasActiveSearch: import("vue").ComputedRef<boolean>;
         definitions: import("vue").ComputedRef<import("../types/index.js").TableUiFilterDefinition[]>;
+        effectiveUiFilters: import("vue").ComputedRef<import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[]>;
         activeUiFilters: import("vue").ComputedRef<import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[]>;
         hasActiveUiFilters: import("vue").ComputedRef<boolean>;
         getDefinition: (input: {
@@ -112,6 +113,12 @@ declare function createTableInternals<TSchema>(options: {
         getFilterState: (input: {
             key: string;
         }) => import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue> | undefined;
+        getActiveFilterState: (input: {
+            key: string;
+        }) => import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue> | undefined;
+        getDefaultFilterState: (input: {
+            key: string;
+        }) => import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue> | undefined;
         getFilterOptionEntries: (input: {
             key: string;
             entries?: import("../types/index.js").TableFilterOptionEntry[];
@@ -583,6 +590,7 @@ declare function useProvideTableInternals<TSchema>(options: {
         searchPlaceholder: import("vue").ComputedRef<string>;
         hasActiveSearch: import("vue").ComputedRef<boolean>;
         definitions: import("vue").ComputedRef<import("../types/index.js").TableUiFilterDefinition[]>;
+        effectiveUiFilters: import("vue").ComputedRef<import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[]>;
         activeUiFilters: import("vue").ComputedRef<import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[]>;
         hasActiveUiFilters: import("vue").ComputedRef<boolean>;
         getDefinition: (input: {
@@ -591,6 +599,12 @@ declare function useProvideTableInternals<TSchema>(options: {
         getFilterState: (input: {
             key: string;
         }) => import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue> | undefined;
+        getActiveFilterState: (input: {
+            key: string;
+        }) => import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue> | undefined;
+        getDefaultFilterState: (input: {
+            key: string;
+        }) => import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue> | undefined;
         getFilterOptionEntries: (input: {
             key: string;
             entries?: import("../types/index.js").TableFilterOptionEntry[];
@@ -1059,6 +1073,7 @@ declare function useTableInternals(): {
         searchPlaceholder: import("vue").ComputedRef<string>;
         hasActiveSearch: import("vue").ComputedRef<boolean>;
         definitions: import("vue").ComputedRef<import("../types/index.js").TableUiFilterDefinition[]>;
+        effectiveUiFilters: import("vue").ComputedRef<import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[]>;
         activeUiFilters: import("vue").ComputedRef<import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[]>;
         hasActiveUiFilters: import("vue").ComputedRef<boolean>;
         getDefinition: (input: {
@@ -1067,6 +1082,12 @@ declare function useTableInternals(): {
         getFilterState: (input: {
             key: string;
         }) => import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue> | undefined;
+        getActiveFilterState: (input: {
+            key: string;
+        }) => import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue> | undefined;
+        getDefaultFilterState: (input: {
+            key: string;
+        }) => import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue> | undefined;
         getFilterOptionEntries: (input: {
             key: string;
             entries?: import("../types/index.js").TableFilterOptionEntry[];

package/dist/runtime/table/types/filters.d.ts

@@ -19,7 +19,8 @@ export type TableFilterDisplayLocationValue = TableFilterDisplayLocation | strin
 export interface TableFilterBehaviorCommon<TOperator extends TableFilterOperator = TableFilterOperator> {
     /**
      * Effective filter value when the URL has no override for this definition.
-     * The default stays active but is omitted from the URL; clearing the filter restores it.
+     * The default drives queries but is omitted from the URL and does not count as active UI state.
+     * Clearing an override restores this value.
      */
     defaultValue?: TableQueryStateFilterValue;
     operators?: TOperator[];

package/dist/runtime/table/types/table-api.d.ts

@@ -95,6 +95,7 @@ export interface TableApi<TSchema = TableSchemaView> {
     filters: {
         state: ComputedRef<TableFilterState>;
         search: WritableComputedRef<string>;
+        /** Number of UI filter rules that differ from their configured defaults. */
         activeCount: ComputedRef<number>;
         clear: () => void;
         remove: (key: string) => void;

package/dist/runtime/table/utils/columns/render.js

@@ -117,32 +117,41 @@ export function createDataColumns(options) {
             content: { align: "start", side: "bottom", sideOffset: 10 },
             modal: false,
             ui: { content: "w-fit p-1 shadow-none" },
-            children: /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                class: "inline-flex h-8 min-w-0 max-w-full items-center gap-2 rounded-md px-2.5 text-left text-sm text-default transition-colors hover:bg-elevated",
-                children: [
-                  /* @__PURE__ */ jsxs("div", { class: "flex min-w-0 items-center gap-2.5", children: [
-                    runtimeColumn.icon ? /* @__PURE__ */ jsx(UIcon, { name: runtimeColumn.icon, class: "size-4 shrink-0 text-muted" }) : null,
-                    /* @__PURE__ */ jsx(TableCellEllipsis, { title: runtimeColumn.label, wrapperClass: "min-w-0 max-w-full", children: runtimeColumn.label })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    UIcon,
-                    {
-                      name: getColumnHeaderIcon({
-                        columnId: runtimeColumn.id,
-                        canHide: tableColumn.getCanHide?.(),
-                        getSortState: options.getSortState,
-                        getPinnedState: options.getPinnedState
-                      }),
-                      class: "size-4 shrink-0 text-muted"
-                    }
-                  ),
-                  options.getPinnedState({ columnId: runtimeColumn.id }) ? /* @__PURE__ */ jsx(UIcon, { name: "i-lucide-pin", class: "size-3.5 shrink-0 text-muted" }) : null
-                ]
-              }
-            )
+            "v-slots": {
+              default: () => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  class: "inline-flex h-8 min-w-0 max-w-full items-center gap-2 rounded-md px-2.5 text-left text-sm text-default transition-colors hover:bg-elevated",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { class: "flex min-w-0 items-center gap-2.5", children: [
+                      runtimeColumn.icon ? /* @__PURE__ */ jsx(UIcon, { name: runtimeColumn.icon, class: "size-4 shrink-0 text-muted" }) : null,
+                      /* @__PURE__ */ jsx(
+                        TableCellEllipsis,
+                        {
+                          title: runtimeColumn.label,
+                          wrapperClass: "min-w-0 max-w-full",
+                          children: runtimeColumn.label
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      UIcon,
+                      {
+                        name: getColumnHeaderIcon({
+                          columnId: runtimeColumn.id,
+                          canHide: tableColumn.getCanHide?.(),
+                          getSortState: options.getSortState,
+                          getPinnedState: options.getPinnedState
+                        }),
+                        class: "size-4 shrink-0 text-muted"
+                      }
+                    ),
+                    options.getPinnedState({ columnId: runtimeColumn.id }) ? /* @__PURE__ */ jsx(UIcon, { name: "i-lucide-pin", class: "size-3.5 shrink-0 text-muted" }) : null
+                  ]
+                }
+              )
+            }
           }
         ),
         column.resizable !== false ? /* @__PURE__ */ jsx(

package/dist/runtime/table/utils/query-state.d.ts

@@ -36,6 +36,18 @@ export declare function isTableFilterRuleDefault(options: {
     rule: TableQueryStateFilterRule;
     definition: TableUiFilterDefinition;
 }): boolean;
+/**
+ * Returns only filter rules that deviate from their schema defaults.
+ *
+ * The full rule set remains effective for data queries, while this subset drives active-filter UI,
+ * counts, and reset affordances. Rules without a matching UI definition are treated as active.
+ */
+export declare function resolveTableActiveFilterRules(options: {
+    /** Effective filter rules, including materialized schema defaults. */
+    rules: TableQueryStateFilterRule[];
+    /** UI filter definitions that own the default baseline. */
+    definitions: TableUiFilterDefinition[];
+}): TableQueryStateFilterRule[];
 export declare function parseTableFilterQueryState(options: {
     entries: ReadonlyMap<string, unknown>;
     definitions: TableUiFilterDefinition[];

package/dist/runtime/table/utils/query-state.js

@@ -193,6 +193,12 @@ export function isTableFilterRuleDefault(options) {
   const defaultValue = normalizedDefinition.defaultValue;
   return defaultValue !== void 0 && (options.rule.operator ?? resolveFilterDefaultOperator(normalizedDefinition)) === resolveFilterDefaultOperator(normalizedDefinition) && areFilterValuesEqual(options.rule.value, defaultValue);
 }
+export function resolveTableActiveFilterRules(options) {
+  return options.rules.filter((rule) => {
+    const definition = options.definitions.find((candidate) => candidate.key === rule.key);
+    return !definition || !isTableFilterRuleDefault({ rule, definition });
+  });
+}
 export function parseTableFilterQueryState(options) {
   const rules = [];
   for (const filter of options.definitions) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",