nuxt-ui-tools 0.1.3 → 1.0.1

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

@@ -1,28 +1,37 @@
 import { computed, ref } from "vue";
-import { resolveFilterDisplayLocation, resolveFilterDisplayOrder } from "../utils/index.js";
+import { isNullish } from "../../shared/utils/predicate.js";
+import { resolvePanelCommitRules, resolvePanelDefaultRules } from "../utils/filter-presentation.js";
+import {
+  resolveFilterDisplayLocation,
+  resolveFilterDisplayOrder
+} from "../utils/filters/presentation.js";
+export { resolvePanelCommitRules, resolvePanelDefaultRules } from "../utils/filter-presentation.js";
 export function useTableFilterPresentation(options) {
   const dynamicSessionKey = ref(null);
   const panelOpen = ref(false);
+  const panelCommitMode = ref("submit");
   const panelDraftFilters = ref([]);
   const definitions = computed(
     () => [...options.filters.definitions.value].sort((left, right) => {
       const orderDiff = resolveFilterDisplayOrder(left) - resolveFilterDisplayOrder(right);
-      if (orderDiff !== 0) return orderDiff;
+      if (orderDiff !== 0) {
+        return orderDiff;
+      }
       return left.key.localeCompare(right.key);
     })
   );
   const resolved = computed(
     () => definitions.value.map((definition) => {
-      const active = options.filters.getActiveFilterState({ key: definition.key }) != null;
+      const active = !isNullish(options.filters.getActiveFilterState({ key: definition.key }));
       const location = resolveFilterDisplayLocation(definition.display?.location);
       const visible = location !== "tag-dynamic" || active;
       return {
+        active,
+        group: definition.display?.group,
         key: definition.key,
         location,
         order: resolveFilterDisplayOrder(definition),
-        group: definition.display?.group,
         panelSection: definition.display?.panel?.section,
-        active,
         visible
       };
     })
@@ -46,7 +55,7 @@ export function useTableFilterPresentation(options) {
     })
   );
   const dynamicSessionDefinition = computed(
-    () => dynamicSessionKey.value == null ? void 0 : definitions.value.find((definition) => definition.key === dynamicSessionKey.value)
+    () => isNullish(dynamicSessionKey.value) ? void 0 : definitions.value.find((definition) => definition.key === dynamicSessionKey.value)
   );
   const panelDefinitions = computed(
     () => definitions.value.filter((definition) => {
@@ -57,7 +66,7 @@ export function useTableFilterPresentation(options) {
   const hasPanelFilters = computed(() => panelDefinitions.value.length > 0);
   const activePanelCount = computed(
     () => panelDefinitions.value.filter(
-      (definition) => options.filters.getActiveFilterState({ key: definition.key }) != null
+      (definition) => !isNullish(options.filters.getActiveFilterState({ key: definition.key }))
     ).length
   );
   const panelSections = computed(() => {
@@ -65,59 +74,72 @@ export function useTableFilterPresentation(options) {
     for (const definition of panelDefinitions.value) {
       const section = definition.display?.panel?.section ?? definition.display?.group ?? "Filters";
       const existing = sections.get(section);
-      if (existing) existing.push(definition);
-      else sections.set(section, [definition]);
+      if (existing) {
+        existing.push(definition);
+      } else {
+        sections.set(section, [definition]);
+      }
     }
     return [...sections.entries()].map(([label, items]) => ({
-      label,
-      items
+      items,
+      label
     }));
   });
   function activateDynamicFilter(input) {
     dynamicSessionKey.value = input.key;
   }
   function releaseDynamicSession(input) {
-    if (dynamicSessionKey.value !== input.key) return;
+    if (dynamicSessionKey.value !== input.key) {
+      return;
+    }
     dynamicSessionKey.value = null;
   }
   function openPanel() {
-    panelDraftFilters.value = options.filters.effectiveUiFilters.value.filter((rule) => isPanelKey(rule.key)).map((rule) => ({ ...rule }));
+    syncPanelDraft();
     panelOpen.value = true;
   }
+  function setPanelCommitMode(mode) {
+    panelCommitMode.value = mode;
+    syncPanelDraft();
+  }
   function closePanel() {
     panelOpen.value = false;
   }
   function resetPanelDraft() {
-    panelDraftFilters.value = options.filters.effectiveUiFilters.value.filter((rule) => isPanelKey(rule.key)).map((rule) => ({ ...rule }));
+    syncPanelDraft();
   }
   function clearPanelDraft() {
-    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, ...panelDraftFilters.value]
+    panelDraftFilters.value = resolvePanelDefaultRules({
+      definitions: panelDefinitions.value,
+      getDefault: (key) => options.filters.getDefaultFilterState({ key })
     });
+    if (panelCommitMode.value === "live") {
+      commitPanelDraft({ close: false });
+    }
   }
   function applyPanelDraft() {
-    const nextPanelRules = panelDraftFilters.value.map((rule) => ({ ...rule }));
-    const preservedRules = options.filters.effectiveUiFilters.value.filter(
-      (rule) => !isPanelKey(rule.key)
-    );
+    commitPanelDraft({ close: true });
+  }
+  function commitPanelDraft(input = {}) {
     options.filters.replaceFilters({
-      rules: [...preservedRules, ...nextPanelRules]
+      rules: resolvePanelCommitRules({
+        currentRules: options.filters.effectiveUiFilters.value,
+        panelKeys: panelDefinitions.value.map((definition) => definition.key),
+        panelRules: panelDraftFilters.value
+      })
     });
-    panelOpen.value = false;
+    if (input.close !== false) {
+      panelOpen.value = false;
+    }
   }
   function getPanelDraftFilterState(input) {
     return panelDraftFilters.value.find((rule) => rule.key === input.key);
   }
   function getPanelFilterOperator(input) {
     const rule = getPanelDraftFilterState(input);
-    if (rule?.operator) return rule.operator;
+    if (rule?.operator) {
+      return rule.operator;
+    }
     return options.filters.getFilterOperator({ key: input.key });
   }
   function setPanelFilterOperator(input) {
@@ -125,8 +147,8 @@ export function useTableFilterPresentation(options) {
     if (current) {
       upsertPanelRule({
         key: input.key,
-        value: current.value,
-        operator: input.operator
+        operator: input.operator,
+        value: current.value
       });
       return;
     }
@@ -136,19 +158,19 @@ export function useTableFilterPresentation(options) {
     });
     upsertPanelRule({
       key: input.key,
-      value,
-      operator: input.operator
+      operator: input.operator,
+      value
     });
   }
   function setPanelScalarFilterValue(input) {
-    if (input.value == null || input.value === "") {
+    if (isNullish(input.value) || input.value === "") {
       clearPanelFilter({ key: input.key });
       return;
     }
     upsertPanelRule({
       key: input.key,
-      value: input.value,
-      operator: input.operator ?? getPanelFilterOperator({ key: input.key })
+      operator: input.operator ?? getPanelFilterOperator({ key: input.key }),
+      value: input.value
     });
   }
   function setPanelOptionFilterValues(input) {
@@ -158,8 +180,8 @@ export function useTableFilterPresentation(options) {
     }
     upsertPanelRule({
       key: input.key,
-      value: input.values,
-      operator: input.operator ?? getPanelFilterOperator({ key: input.key })
+      operator: input.operator ?? getPanelFilterOperator({ key: input.key }),
+      value: input.values
     });
   }
   function clearPanelFilter(input) {
@@ -168,6 +190,9 @@ export function useTableFilterPresentation(options) {
       ...panelDraftFilters.value.filter((rule) => rule.key !== input.key),
       ...defaultRule ? [{ ...defaultRule }] : []
     ];
+    if (panelCommitMode.value === "live") {
+      commitPanelDraft({ close: false });
+    }
   }
   function isPanelKey(key) {
     return panelDefinitions.value.some((definition) => definition.key === key);
@@ -177,30 +202,39 @@ export function useTableFilterPresentation(options) {
       ...panelDraftFilters.value.filter((item) => item.key !== rule.key),
       rule
     ];
+    if (panelCommitMode.value === "live") {
+      commitPanelDraft({ close: false });
+    }
+  }
+  function syncPanelDraft() {
+    panelDraftFilters.value = options.filters.effectiveUiFilters.value.filter((rule) => isPanelKey(rule.key)).map((rule) => ({ ...rule }));
   }
   return {
-    resolved,
-    tagDefinitions,
+    activateDynamicFilter,
     activeDynamicDefinitions,
+    activePanelCount,
+    applyPanelDraft,
+    clearPanelDraft,
+    clearPanelFilter,
+    closePanel,
+    commitPanelDraft,
     dormantDynamicDefinitions,
     dynamicSessionDefinition,
-    panelDefinitions,
-    panelSections,
+    getPanelDraftFilterState,
+    getPanelFilterOperator,
     hasPanelFilters,
-    activePanelCount,
+    openPanel,
+    panelCommitMode,
+    panelDefinitions,
     panelOpen,
-    activateDynamicFilter,
+    panelSections,
     releaseDynamicSession,
-    openPanel,
-    closePanel,
     resetPanelDraft,
-    clearPanelDraft,
-    applyPanelDraft,
-    getPanelDraftFilterState,
-    getPanelFilterOperator,
+    resolved,
+    setPanelCommitMode,
     setPanelFilterOperator,
-    setPanelScalarFilterValue,
     setPanelOptionFilterValues,
-    clearPanelFilter
+    setPanelScalarFilterValue,
+    tagDefinitions
   };
 }

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

@@ -1,6 +1,7 @@
-import { type ComputedRef } from 'vue';
+import type { ComputedRef } from 'vue';
 import type { TableFilterOptionEntry, TableFilterOperator, TableFilterPrimitiveValue, TableQueryStateFilterRule, TableQueryStateFilterValue, TableSchemaView, TableUiFilterDefinition } from '../types/index.js';
 import { getFilterLabelText } from '../utils/index.js';
+import type { FilterPreviewOptionEntry } from '../utils/filters/preview.js';
 import type { UseTableDataReturn } from './use-table-data.js';
 import type { useTableState } from './use-table-state.js';
 export interface UseTableFiltersParams {
@@ -9,55 +10,67 @@ export interface UseTableFiltersParams {
     queryContent: Pick<UseTableDataReturn, 'rawData' | 'data'>;
 }
 export declare function useTableFilters(params: UseTableFiltersParams): {
-    searchQuery: import("vue").WritableComputedRef<string, string>;
-    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: {
-        key: string;
-    }) => TableUiFilterDefinition | undefined;
-    getFilterState: (input: {
+    clearAllFilters: () => void;
+    clearFilter: (input: {
         key: string;
-    }) => TableQueryStateFilterRule<string, TableFilterOperator, TableQueryStateFilterValue> | undefined;
+    }) => void;
+    definitions: ComputedRef<TableUiFilterDefinition[]>;
+    effectiveUiFilters: ComputedRef<TableQueryStateFilterRule<string, TableFilterOperator, TableQueryStateFilterValue>[]>;
     getActiveFilterState: (input: {
         key: string;
     }) => TableQueryStateFilterRule<string, TableFilterOperator, TableQueryStateFilterValue> | undefined;
     getDefaultFilterState: (input: {
         key: string;
     }) => TableQueryStateFilterRule<string, TableFilterOperator, TableQueryStateFilterValue> | undefined;
+    getDefaultFilterValueForOperator: (input: {
+        key: string;
+        operator: TableFilterOperator;
+    }) => TableQueryStateFilterValue;
+    getDefinition: (input: {
+        key: string;
+    }) => TableUiFilterDefinition | undefined;
+    getFilterLabelText: typeof getFilterLabelText;
+    getFilterOperator: (input: {
+        key: string;
+    }) => TableFilterOperator | undefined;
+    getFilterOperatorOptions: (input: {
+        key: string;
+    }) => {
+        label: string;
+        value: TableFilterOperator;
+    }[];
     getFilterOptionEntries: (input: {
         key: string;
         entries?: TableFilterOptionEntry[];
-        facetCounts?: Array<{
+        facetCounts?: {
             value: string | number | boolean;
             count: number;
-        }>;
+        }[];
     }) => (import("../types/index.js").TableResolvedFilterOptionEntry<TableFilterPrimitiveValue> & {
         value: string | number | boolean;
     })[];
     getFilterPreview: (input: {
         key: string;
-        entries?: Array<{
-            label: string;
-            value: string | number | boolean;
-        }>;
-    }) => import("../utils/index.js").FilterPreviewResult;
-    getFilterOperator: (input: {
-        key: string;
-    }) => TableFilterOperator | undefined;
-    getFilterOperatorOptions: (input: {
-        key: string;
+        entries?: FilterPreviewOptionEntry[];
     }) => {
-        value: TableFilterOperator;
-        label: string;
-    }[];
-    getDefaultFilterValueForOperator: (input: {
+        active: boolean;
+        dirty: boolean;
+        count: number;
+        tags: string[];
+        entries: import("../utils/filters/preview/types.js").FilterPreviewEntry[];
+        summary: string;
+    };
+    getFilterState: (input: {
         key: string;
-        operator: TableFilterOperator;
-    }) => TableQueryStateFilterValue;
+    }) => TableQueryStateFilterRule<string, TableFilterOperator, TableQueryStateFilterValue> | undefined;
+    hasActiveSearch: ComputedRef<boolean>;
+    hasActiveUiFilters: ComputedRef<boolean>;
+    replaceFilters: (input: {
+        rules: TableQueryStateFilterRule[];
+    }) => void;
+    searchPlaceholder: ComputedRef<string>;
+    searchQuery: import("vue").WritableComputedRef<string, string>;
     setFilterOperator: (input: {
         key: string;
         operator: TableFilterOperator;
@@ -67,22 +80,14 @@ export declare function useTableFilters(params: UseTableFiltersParams): {
         values: TableFilterPrimitiveValue[];
         operator?: TableFilterOperator;
     }) => void;
-    toggleOptionFilterValue: (input: {
-        key: string;
-        value: TableFilterPrimitiveValue;
-        operator?: TableFilterOperator;
-    }) => void;
     setScalarFilterValue: (input: {
         key: string;
         value: TableQueryStateFilterValue | null | undefined;
         operator?: TableFilterOperator;
     }) => void;
-    clearFilter: (input: {
+    toggleOptionFilterValue: (input: {
         key: string;
+        value: TableFilterPrimitiveValue;
+        operator?: TableFilterOperator;
     }) => void;
-    clearAllFilters: () => void;
-    replaceFilters: (input: {
-        rules: TableQueryStateFilterRule[];
-    }) => void;
-    getFilterLabelText: typeof getFilterLabelText;
 };

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

@@ -1,5 +1,6 @@
 import { computed } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isBoolean, isNumber, isString, isNullish } from "../../shared/utils/predicate.js";
 import {
   buildFilterPreview,
   createFilterValueForOperator,
@@ -14,8 +15,8 @@ import { useTableSearch } from "./use-table-search.js";
 export function useTableFilters(params) {
   const { t } = useUiToolsLocale();
   const search = useTableSearch({
-    schema: params.schema,
-    queryState: params.state.queryState
+    queryState: params.state.queryState,
+    schema: params.schema
   });
   const definitions = computed(
     () => params.schema.value.filters?.ui ?? []
@@ -28,8 +29,8 @@ export function useTableFilters(params) {
   );
   const activeUiFilters = computed(
     () => resolveTableActiveFilterRules({
-      rules: effectiveUiFilters.value,
-      definitions: definitions.value
+      definitions: definitions.value,
+      rules: effectiveUiFilters.value
     })
   );
   const hasActiveUiFilters = computed(() => activeUiFilters.value.length > 0);
@@ -55,39 +56,46 @@ export function useTableFilters(params) {
       return [];
     }
     const rule = getFilterState({ key: input.key });
-    const selectedValues = Array.isArray(rule?.value) ? rule.value : rule?.value != null ? [rule.value] : [];
+    const selectedValues = Array.isArray(rule?.value) ? rule.value : isNullish(rule?.value) ? [] : [rule.value];
     return flattenFilterOptionEntries(
       resolveFilterOptionEntries({
         definition,
-        rows: [],
-        options: input.entries,
+        deriveCounts: false,
         facetCounts: input.facetCounts,
-        selectedValues,
-        deriveCounts: false
+        options: input.entries,
+        rows: [],
+        selectedValues
       })
     ).filter(
-      (entry) => entry.value != null
+      (entry) => !isNullish(entry.value)
     );
   }
   function getFilterPreview(input) {
     const definition = getDefinition({ key: input.key });
     if (!definition) {
-      return buildFilterPreview({
-        definition: {
-          kind: "text",
-          key: input.key,
-          label: input.key
-        }
-      });
+      return {
+        ...buildFilterPreview({
+          definition: {
+            key: input.key,
+            kind: "text",
+            label: input.key
+          }
+        }),
+        active: false,
+        dirty: false
+      };
     }
     const preview = buildFilterPreview({
       definition,
-      rule: getFilterState({ key: input.key }),
-      optionEntries: input.entries
+      optionEntries: input.entries,
+      rule: getFilterState({ key: input.key })
     });
+    const rule = getFilterState({ key: input.key });
+    const hasValue = Boolean(preview.tags?.length) || Boolean(preview.summary);
     return {
       ...preview,
-      active: getActiveFilterState({ key: input.key }) != null
+      active: !isNullish(rule) && hasValue,
+      dirty: !isNullish(getActiveFilterState({ key: input.key }))
     };
   }
   function getFilterOperator(input) {
@@ -103,8 +111,8 @@ export function useTableFilters(params) {
   }
   function getFilterOperatorOptions(input) {
     return getFilterOperators(input.key).map((operator) => ({
-      value: operator,
-      label: t(`table.filters.operators.${operator}`)
+      label: t(`table.filters.operators.${operator}`),
+      value: operator
     }));
   }
   function setFilterOperator(input) {
@@ -140,33 +148,33 @@ export function useTableFilters(params) {
     }
     addFilter(input.key, input.values, {
       operator: resolveActiveOperator({
-        inputOperator: input.operator,
-        currentOperator: currentRule?.operator
+        currentOperator: currentRule?.operator,
+        inputOperator: input.operator
       })
     });
   }
   function toggleOptionFilterValue(input) {
     const currentRule = getFilterState({ key: input.key });
     const currentValues = Array.isArray(currentRule?.value) ? currentRule.value.filter(
-      (value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean"
-    ) : currentRule?.value != null ? typeof currentRule.value === "string" || typeof currentRule.value === "number" || typeof currentRule.value === "boolean" ? [currentRule.value] : [] : [];
+      (value) => isString(value) || isNumber(value) || isBoolean(value)
+    ) : isNullish(currentRule?.value) ? [] : isString(currentRule.value) || isNumber(currentRule.value) || isBoolean(currentRule.value) ? [currentRule.value] : [];
     const nextValues = currentValues.some((value) => String(value) === String(input.value)) ? currentValues.filter((value) => String(value) !== String(input.value)) : [...currentValues, input.value];
     setOptionFilterValues({
       key: input.key,
-      values: nextValues,
-      operator: input.operator
+      operator: input.operator,
+      values: nextValues
     });
   }
   function setScalarFilterValue(input) {
     const currentRule = getFilterState({ key: input.key });
-    if (input.value == null || input.value === "") {
+    if (isNullish(input.value) || input.value === "") {
       apiRemoveFilter({ key: input.key });
       return;
     }
     addFilter(input.key, input.value, {
       operator: resolveActiveOperator({
-        inputOperator: input.operator,
-        currentOperator: currentRule?.operator
+        currentOperator: currentRule?.operator,
+        inputOperator: input.operator
       })
     });
   }
@@ -174,11 +182,10 @@ export function useTableFilters(params) {
     removeFilter(input.key);
   }
   function addFilter(key, value, options) {
-    const nextRule = {
-      key,
-      ...options?.operator ? { operator: options.operator } : {},
-      value
-    };
+    const nextRule = { key, value };
+    if (options?.operator) {
+      nextRule.operator = options.operator;
+    }
     params.state.queryState.resetPagination();
     params.state.queryState.filters.value = {
       ...params.state.queryState.filters.value,
@@ -220,36 +227,36 @@ export function useTableFilters(params) {
     params.state.queryState.filters.value = {
       ...params.state.queryState.filters.value,
       ui: mergeTableFilterDefaultRules({
-        rules: input.rules,
-        definitions: definitions.value
+        definitions: definitions.value,
+        rules: input.rules
       })
     };
   }
   return {
-    searchQuery: search.searchQuery,
-    searchPlaceholder: search.searchPlaceholder,
-    hasActiveSearch: search.hasActiveSearch,
+    activeUiFilters,
+    clearAllFilters,
+    clearFilter: apiRemoveFilter,
     definitions,
     effectiveUiFilters,
-    activeUiFilters,
-    hasActiveUiFilters,
-    getDefinition,
-    getFilterState,
     getActiveFilterState,
     getDefaultFilterState,
-    getFilterOptionEntries,
-    getFilterPreview,
+    getDefaultFilterValueForOperator,
+    getDefinition,
+    getFilterLabelText,
     getFilterOperator,
     getFilterOperatorOptions,
-    getDefaultFilterValueForOperator,
+    getFilterOptionEntries,
+    getFilterPreview,
+    getFilterState,
+    hasActiveSearch: search.hasActiveSearch,
+    hasActiveUiFilters,
+    replaceFilters,
+    searchPlaceholder: search.searchPlaceholder,
+    searchQuery: search.searchQuery,
     setFilterOperator,
     setOptionFilterValues,
-    toggleOptionFilterValue,
     setScalarFilterValue,
-    clearFilter: apiRemoveFilter,
-    clearAllFilters,
-    replaceFilters,
-    getFilterLabelText
+    toggleOptionFilterValue
   };
 }
 function resolveActiveOperator(options) {

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

@@ -1,4 +1,4 @@
-import { type ComputedRef } from 'vue';
+import type { ComputedRef } from 'vue';
 import type { GenericObject, TableExternalState, TableGridMode, TableSchemaView } from '../types/index.js';
 export interface GridRowChunk<TRow = unknown> {
     index: number;
@@ -11,10 +11,10 @@ export interface UseTableGridParams<TRow extends GenericObject = GenericObject>
     data: ComputedRef<TableExternalState<TRow>>;
 }
 export declare function useTableGrid<TRow extends GenericObject>(options: UseTableGridParams<TRow>): {
-    mode: ComputedRef<TableGridMode>;
-    rows: ComputedRef<TRow[]>;
-    rowChunks: ComputedRef<GridRowChunk<TRow>[]>;
+    cardsPerRow: ComputedRef<number>;
     columnCount: ComputedRef<number>;
     itemColumnSpan: ComputedRef<number>;
-    cardsPerRow: ComputedRef<number>;
+    mode: ComputedRef<TableGridMode>;
+    rowChunks: ComputedRef<GridRowChunk<TRow>[]>;
+    rows: ComputedRef<TRow[]>;
 };