nuxt-ui-tools 0.1.3 → 1.0.0

package/dist/runtime/table/composables/use-option-filter-editor-state.js

@@ -1,4 +1,5 @@
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
+import { isNullish } from "../../shared/utils/predicate.js";
 import {
   collectSelectedBranchIds,
   collectSelectableDescendantValues,
@@ -10,30 +11,51 @@ import { useTableFilterOptions } from "./use-table-filter-options.js";
 export function useOptionFilterEditorState(options) {
   const expandedIds = ref(/* @__PURE__ */ new Set());
   const optionSource = useTableFilterOptions({
-    definition: options.definition,
-    searchQuery: options.searchQuery,
     active: options.active,
-    ready: options.ready,
+    definition: options.definition,
     filters: options.filters,
     queryContent: options.queryContent,
-    schema: options.schema
+    ready: options.ready,
+    schema: options.schema,
+    searchQuery: options.searchQuery
   });
   const filterUi = computed(() => resolveOptionFilterUi(options.definition, options.operator.value));
-  const displayEntries = computed(
-    () => optionSource.filteredEntries.value.map((entry) => ({
+  const frozenOrder = ref(null);
+  watch(
+    [() => options.active?.value ?? true, () => optionSource.filteredEntries.value.length],
+    ([active, count]) => {
+      if (!active) {
+        frozenOrder.value = null;
+        return;
+      }
+      if (!frozenOrder.value && count > 0) {
+        frozenOrder.value = new Map(
+          optionSource.filteredEntries.value.map((entry, index) => [entryKey(entry), index])
+        );
+      }
+    },
+    { immediate: true }
+  );
+  const displayEntries = computed(() => {
+    const mapped = optionSource.filteredEntries.value.map((entry) => ({
       ...entry,
       icon: resolveRowIcon({
         entry,
         filterUi: filterUi.value
       }),
-      selected: entry.value != null && options.selectedValues.value.some((value) => String(value) === String(entry.value))
-    }))
-  );
+      selected: !isNullish(entry.value) && options.selectedValues.value.some((value) => String(value) === String(entry.value))
+    }));
+    const order = frozenOrder.value;
+    if (!order) {
+      return mapped;
+    }
+    return mapped.map((entry, index) => ({ entry, rank: order.get(entryKey(entry)) ?? order.size + index })).sort((left, right) => left.rank - right.rank).map((item) => item.entry);
+  });
   const displayTreeEntries = computed(
     () => mapSelectedTreeEntries({
       entries: optionSource.filteredTreeEntries.value,
-      selectedValues: options.selectedValues.value,
-      filterUi: filterUi.value
+      filterUi: filterUi.value,
+      selectedValues: options.selectedValues.value
     })
   );
   const selectedExpandedIds = computed(
@@ -58,10 +80,10 @@ export function useOptionFilterEditorState(options) {
   );
   const visibleTreeEntries = computed(
     () => flattenVisibleFilterOptionTree({
+      branchSelection: filterUi.value.tree.branchSelection,
       entries: displayTreeEntries.value,
       expandedIds: effectiveExpandedIds.value,
-      selectable: filterUi.value.tree.selectable,
-      branchSelection: filterUi.value.tree.branchSelection
+      selectable: filterUi.value.tree.selectable
     }).map((entry) => {
       if (!entry.branchSelectable) {
         return {
@@ -80,75 +102,97 @@ export function useOptionFilterEditorState(options) {
       ).length;
       return {
         ...entry,
-        selected: descendantValues.length > 0 && selectedCount === descendantValues.length,
+        expanded: effectiveExpandedIds.value.has(entry.id),
         indeterminate: selectedCount > 0 && selectedCount < descendantValues.length,
-        expanded: effectiveExpandedIds.value.has(entry.id)
+        selected: descendantValues.length > 0 && selectedCount === descendantValues.length
       };
     })
   );
   const flatRadioItems = computed(
     () => displayEntries.value.map((entry) => ({
-      label: entry.label,
-      value: String(entry.value),
+      color: entry.color,
       count: filterUi.value.row.showCounts ? entry.count : void 0,
       icon: entry.icon,
-      truncate: filterUi.value.row.truncate
+      label: entry.label,
+      truncate: filterUi.value.row.truncate,
+      value: String(entry.value)
     }))
   );
   const flatRadioValue = computed({
-    get: () => options.selectedValues.value[0] != null ? String(options.selectedValues.value[0]) : void 0,
+    get: () => isNullish(options.selectedValues.value[0]) ? void 0 : String(options.selectedValues.value[0]),
     set: (value) => {
-      if (value == null) return;
+      if (isNullish(value)) {
+        return;
+      }
       const match = displayEntries.value.find((entry) => String(entry.value) === value);
-      if (!match) return;
+      if (!match) {
+        return;
+      }
       options.setSelectedValues([match.value]);
     }
   });
   const treeRadioItems = computed(
     () => visibleTreeEntries.value.map((entry) => ({
-      id: entry.id,
-      label: entry.label,
-      value: entry.id,
+      color: entry.color,
       count: filterUi.value.row.showCounts ? entry.count : void 0,
-      icon: entry.icon,
-      truncate: filterUi.value.row.truncate,
       depth: entry.depth,
+      disabled: !entry.selectable,
       expandable: entry.expandable,
       expanded: entry.expanded,
+      icon: entry.icon,
+      id: entry.id,
+      label: entry.label,
       selectable: entry.selectable,
-      disabled: !entry.selectable
+      truncate: filterUi.value.row.truncate,
+      value: entry.id
     }))
   );
   const treeRadioValue = computed({
     get: () => {
       const selected = options.selectedValues.value[0];
-      if (selected == null) return void 0;
+      if (isNullish(selected)) {
+        return;
+      }
       return visibleTreeEntries.value.find(
-        (entry) => entry.value != null && String(entry.value) === String(selected)
+        (entry) => !isNullish(entry.value) && String(entry.value) === String(selected)
       )?.id;
     },
     set: (value) => {
-      if (value == null) return;
+      if (isNullish(value)) {
+        return;
+      }
       const match = visibleTreeEntries.value.find((entry) => entry.id === value);
-      if (!match || !match.selectable || match.value == null) return;
+      if (!match || !match.selectable || isNullish(match.value)) {
+        return;
+      }
       options.setSelectedValues([match.value]);
     }
   });
   const triggerSummary = computed(() => {
-    if (!options.selectedValues.value.length) return "";
+    if (!options.selectedValues.value.length) {
+      return "";
+    }
     const labels = optionSource.sourceEntries.value.filter(
-      (entry) => entry.value != null && options.selectedValues.value.some((value) => String(value) === String(entry.value))
+      (entry) => !isNullish(entry.value) && options.selectedValues.value.some((value) => String(value) === String(entry.value))
     ).map((entry) => entry.label);
-    if (!labels.length) return `${options.selectedValues.value.length} selected`;
-    if (labels.length === 1) return labels[0];
-    if (labels.length === 2) return labels.join(", ");
+    if (!labels.length) {
+      return `${options.selectedValues.value.length} selected`;
+    }
+    if (labels.length === 1) {
+      return labels[0];
+    }
+    if (labels.length === 2) {
+      return labels.join(", ");
+    }
     return `${labels[0]}, ${labels[1]} +${labels.length - 2}`;
   });
   function toggleValue(value) {
     const exists = options.selectedValues.value.some((entry) => String(entry) === String(value));
     if (filterUi.value.selection.mode === "single") {
       if (exists) {
-        if (!filterUi.value.selection.allowEmpty) return;
+        if (!filterUi.value.selection.allowEmpty) {
+          return;
+        }
         options.setSelectedValues([]);
         return;
       }
@@ -156,14 +200,17 @@ export function useOptionFilterEditorState(options) {
       return;
     }
     if (exists) {
-      if (!filterUi.value.selection.allowEmpty && options.selectedValues.value.length === 1) return;
+      if (!filterUi.value.selection.allowEmpty && options.selectedValues.value.length === 1) {
+        return;
+      }
       options.setSelectedValues(
         options.selectedValues.value.filter((entry) => String(entry) !== String(value))
       );
       return;
     }
-    if (filterUi.value.selection.max != null && options.selectedValues.value.length >= filterUi.value.selection.max)
+    if (!isNullish(filterUi.value.selection.max) && options.selectedValues.value.length >= filterUi.value.selection.max) {
       return;
+    }
     options.setSelectedValues([...options.selectedValues.value, value]);
   }
   function toggleTreeEntry(entry) {
@@ -172,28 +219,41 @@ export function useOptionFilterEditorState(options) {
       return;
     }
     if (!entry.selectable) {
-      if (entry.expandable) toggleExpanded(entry.id);
+      if (entry.expandable) {
+        toggleExpanded(entry.id);
+      }
+      return;
+    }
+    if (isNullish(entry.value)) {
       return;
     }
-    if (entry.value == null) return;
     toggleValue(entry.value);
   }
   function toggleExpanded(id) {
     const next = new Set(expandedIds.value);
-    if (next.has(id)) next.delete(id);
-    else next.add(id);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
     expandedIds.value = next;
   }
   function toggleBranchSelection(id) {
-    if (filterUi.value.selection.mode !== "multiple") return;
+    if (filterUi.value.selection.mode !== "multiple") {
+      return;
+    }
     const entry = flatTreeEntryMap.value.get(id);
-    if (!entry) return;
+    if (!entry) {
+      return;
+    }
     const descendantValues = collectSelectableDescendantValues({
       entry,
       selectable: filterUi.value.tree.selectable
     });
     if (!descendantValues.length) {
-      if (entry.children.length) toggleExpanded(id);
+      if (entry.children.length) {
+        toggleExpanded(id);
+      }
       return;
     }
     const currentKeys = selectedValueKeys.value;
@@ -202,56 +262,67 @@ export function useOptionFilterEditorState(options) {
       const nextValues2 = options.selectedValues.value.filter(
         (value) => !descendantValues.some((descendant) => String(descendant) === String(value))
       );
-      if (!filterUi.value.selection.allowEmpty && !nextValues2.length) return;
+      if (!filterUi.value.selection.allowEmpty && !nextValues2.length) {
+        return;
+      }
       options.setSelectedValues(nextValues2);
       return;
     }
     const missingValues = descendantValues.filter((value) => !currentKeys.has(String(value)));
     const nextValues = [...options.selectedValues.value, ...missingValues];
-    if (filterUi.value.selection.max != null && nextValues.length > filterUi.value.selection.max)
+    if (!isNullish(filterUi.value.selection.max) && nextValues.length > filterUi.value.selection.max) {
       return;
+    }
     options.setSelectedValues(nextValues);
   }
   function resetExpandedIds() {
     expandedIds.value = /* @__PURE__ */ new Set();
   }
   return {
-    optionSource,
-    filterUi,
     displayEntries,
-    visibleTreeEntries,
+    filterUi,
     flatRadioItems,
     flatRadioValue,
+    optionSource,
+    resetExpandedIds,
+    toggleExpanded,
+    toggleTreeEntry,
+    toggleValue,
     treeRadioItems,
     treeRadioValue,
     triggerSummary,
-    toggleValue,
-    toggleTreeEntry,
-    toggleExpanded,
-    resetExpandedIds
+    visibleTreeEntries
   };
 }
 function resolveRowIcon(options) {
-  if (options.entry.value == null) return options.entry.icon;
-  return options.filterUi.row.getIcon?.({
-    label: options.entry.label,
-    value: options.entry.value,
+  if (isNullish(options.entry.value)) {
+    return options.entry.icon;
+  }
+  const iconOptions = {
     count: options.entry.count,
-    ...options.entry.icon ? { icon: options.entry.icon } : {}
-  }) ?? options.entry.icon;
+    label: options.entry.label,
+    value: options.entry.value
+  };
+  if (options.entry.icon) {
+    iconOptions.icon = options.entry.icon;
+  }
+  return options.filterUi.row.getIcon?.(iconOptions) ?? options.entry.icon;
 }
 function mapSelectedTreeEntries(options) {
   return options.entries.map((entry) => ({
     ...entry,
+    children: mapSelectedTreeEntries({
+      entries: entry.children,
+      filterUi: options.filterUi,
+      selectedValues: options.selectedValues
+    }),
     icon: resolveRowIcon({
       entry,
       filterUi: options.filterUi
     }),
-    selected: entry.value != null && options.selectedValues.some((value) => String(value) === String(entry.value)),
-    children: mapSelectedTreeEntries({
-      entries: entry.children,
-      selectedValues: options.selectedValues,
-      filterUi: options.filterUi
-    })
+    selected: !isNullish(entry.value) && options.selectedValues.some((value) => String(value) === String(entry.value))
   }));
 }
+function entryKey(entry) {
+  return entry.value === void 0 ? entry.id : String(entry.value);
+}

package/dist/runtime/table/composables/use-query-state.d.ts

@@ -1,27 +1,34 @@
-import { type ComputedRef } from 'vue';
+import type { ComputedRef } from 'vue';
 import type { TableLayout, TableQueryStateFilterRule, TableSchemaView } from '../types/index.js';
 export interface UseQueryStateParams {
     schema: ComputedRef<TableSchemaView>;
     activeLayout: ComputedRef<TableLayout>;
 }
 export declare function useQueryState(params: UseQueryStateParams): {
+    filters: import("vue").WritableComputedRef<{
+        search: string;
+        ui: TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[];
+    }, {
+        search: string;
+        ui: TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[];
+    }>;
     pagination: ComputedRef<{
         readonly mode: "none";
+        readonly count?: undefined;
         readonly cursor?: undefined;
         readonly pageSize?: undefined;
-        readonly count?: undefined;
         readonly pageIndex?: undefined;
     } | {
-        readonly mode: "cursor";
+        readonly count: "exact" | "none";
         readonly cursor: null;
+        readonly mode: "cursor";
         readonly pageSize: number;
-        readonly count: "exact" | "none";
         readonly pageIndex?: undefined;
     } | {
+        readonly count: "exact";
         readonly mode: "offset";
         readonly pageIndex: number;
         readonly pageSize: number;
-        readonly count: "exact";
         readonly cursor?: undefined;
     }>;
     paginationMode: "none" | "offset" | "cursor";
@@ -32,17 +39,10 @@ export declare function useQueryState(params: UseQueryStateParams): {
         pageSize: number;
     }) => void;
     sorting: import("vue").WritableComputedRef<{
-        key: string;
         dir: "desc" | "asc";
+        key: string;
     } | null, {
         key: string;
         dir: "asc" | "desc";
     } | null>;
-    filters: import("vue").WritableComputedRef<{
-        search: string;
-        ui: TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[];
-    }, {
-        search: string;
-        ui: TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[];
-    }>;
 };

package/dist/runtime/table/composables/use-query-state.js

@@ -6,6 +6,7 @@ import {
   stringCodec,
   createEnumCodec
 } from "#ui-tools/query-state";
+import { isObject } from "../../shared/utils/predicate.js";
 import {
   createTableFilterValueCodec,
   getDefaultPageSize,
@@ -20,107 +21,116 @@ import {
 } from "../utils/index.js";
 export function useQueryState(params) {
   const defaultPageSize = getDefaultPageSize({
-    schema: params.schema.value,
-    layout: params.activeLayout.value
+    layout: params.activeLayout.value,
+    schema: params.schema.value
   });
   const defaultSort = getDefaultSort({
-    schema: params.schema.value,
-    layout: params.activeLayout.value
+    layout: params.activeLayout.value,
+    schema: params.schema.value
   });
   const paginationMode = getPaginationMode(params.schema.value);
   const paginationRevision = ref(0);
   const offsetPagination = paginationMode === "offset" ? useQueryStates({
+    historyMode: "push",
     prefix: "p",
     schema: {
-      pageIndex: { urlKey: "page", codec: numberCodec, defaultValue: 1 },
-      pageSize: { urlKey: "size", codec: numberCodec, defaultValue: defaultPageSize }
-    },
-    historyMode: "push"
+      pageIndex: { codec: numberCodec, defaultValue: 1, urlKey: "page" },
+      pageSize: { codec: numberCodec, defaultValue: defaultPageSize, urlKey: "size" }
+    }
   }) : null;
   const pagination = computed(() => {
-    if (paginationMode === "none") return { mode: "none" };
-    if (paginationMode === "cursor")
+    if (paginationMode === "none") {
+      return { mode: "none" };
+    }
+    if (paginationMode === "cursor") {
       return {
-        mode: "cursor",
+        count: params.schema.value.pagination && isObject(params.schema.value.pagination) && "mode" in params.schema.value.pagination && params.schema.value.pagination.mode === "cursor" ? params.schema.value.pagination.count ?? "none" : "none",
         cursor: null,
-        pageSize: defaultPageSize,
-        count: params.schema.value.pagination && typeof params.schema.value.pagination === "object" && "mode" in params.schema.value.pagination && params.schema.value.pagination.mode === "cursor" ? params.schema.value.pagination.count ?? "none" : "none"
+        mode: "cursor",
+        pageSize: defaultPageSize
       };
+    }
     return {
+      count: "exact",
       mode: "offset",
       pageIndex: offsetPagination?.value.pageIndex ?? 1,
-      pageSize: offsetPagination?.value.pageSize ?? defaultPageSize,
-      count: "exact"
+      pageSize: offsetPagination?.value.pageSize ?? defaultPageSize
     };
   });
   function resetPagination() {
     if (paginationMode === "cursor") {
-      paginationRevision.value++;
+      paginationRevision.value += 1;
+      return;
+    }
+    if (!offsetPagination) {
       return;
     }
-    if (!offsetPagination) return;
     offsetPagination.value = {
       pageIndex: 1,
       pageSize: offsetPagination.value.pageSize
     };
   }
   function setOffsetPagination(value) {
-    if (!offsetPagination) return;
+    if (!offsetPagination) {
+      return;
+    }
     offsetPagination.value = value;
   }
   const sortingState = useQueryStates({
+    historyMode: "push",
     prefix: "s",
     schema: {
-      key: { codec: stringCodec, defaultValue: defaultSort?.key ?? "" },
-      dir: { codec: createEnumCodec(["asc", "desc"]), defaultValue: defaultSort?.dir }
-    },
-    historyMode: "push"
+      dir: { codec: createEnumCodec(["asc", "desc"]), defaultValue: defaultSort?.dir },
+      key: { codec: stringCodec, defaultValue: defaultSort?.key ?? "" }
+    }
   });
   const sorting = computed({
     get() {
       const { key, dir } = sortingState.value;
-      if (!key) return null;
-      return { key, dir: dir ?? "asc" };
+      if (!key) {
+        return null;
+      }
+      return { dir: dir ?? "asc", key };
     },
     set(value) {
-      sortingState.value = value ? { key: value.key, dir: value.dir } : { key: "", dir: void 0 };
+      sortingState.value = value ? { dir: value.dir, key: value.key } : { dir: void 0, key: "" };
     }
   });
   const filters = useQueryStates({
+    historyMode: "push",
     prefix: "f",
     schema: {
       search: { codec: stringCodec, defaultValue: "" },
       ui: dynamicQueryState({
-        urlPrefix: "ui",
-        definitions: () => params.schema.value.filters?.ui ?? [],
         defaultValue: resolveTableFilterDefaultRules(params.schema.value.filters?.ui ?? []),
+        definitions: () => params.schema.value.filters?.ui ?? [],
+        parse(entries, definitions) {
+          return parseTableFilterQueryState({ definitions, entries });
+        },
         resolve(filter) {
           const definition = normalizeFilterDefinition(filter);
           const operators = resolveFilterSupportedOperators(definition);
           const defaultOp = resolveFilterDefaultOperator(definition);
           const codec = createTableFilterValueCodec(definition);
           return operators.map((op) => ({
-            urlKey: op === defaultOp ? definition.key : `${definition.key}~${op}`,
-            codec
+            codec,
+            urlKey: op === defaultOp ? definition.key : `${definition.key}~${op}`
           }));
         },
-        parse(entries, definitions) {
-          return parseTableFilterQueryState({ entries, definitions });
-        },
         serialize(rules, definitions) {
-          return serializeTableFilterQueryState({ rules, definitions });
-        }
+          return serializeTableFilterQueryState({ definitions, rules });
+        },
+        urlPrefix: "ui"
       })
-    },
-    historyMode: "push"
+    }
   });
   return {
+    filters,
     pagination,
     paginationMode,
     paginationRevision,
     resetPagination,
     setOffsetPagination,
-    sorting,
-    filters
+    sorting
   };
 }

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

@@ -0,0 +1,28 @@
+import type { ComputedRef } from 'vue';
+import type { TableActionSlotProps, TableSchemaView, GenericObject, TableApi, TableRuntimeRecord } from '../types/index.js';
+import type { UseTableDataReturn } from './use-table-data.js';
+import type { useTableSelection } from './use-table-selection.js';
+type TableActionDefinition = NonNullable<TableSchemaView['actions']>[number] | NonNullable<TableSchemaView['toolbarActions']>[number];
+export interface TableActionController extends TableActionSlotProps<GenericObject, TableRuntimeRecord, TableRuntimeRecord> {
+    definition: TableActionDefinition;
+}
+export interface UseTableActionsParams {
+    schema: ComputedRef<TableSchemaView>;
+    queryContent: UseTableDataReturn;
+    selection: ReturnType<typeof useTableSelection>;
+    tableApi: {
+        value: {
+            selection: TableApi['selection'];
+        } | null;
+    };
+}
+/** Owns normalized bulk/toolbar action state and execution for a table. */
+export declare function useTableActions(options: UseTableActionsParams): {
+    actions: ComputedRef<TableActionController[]>;
+    bulkActions: ComputedRef<TableActionController[]>;
+    definitions: ComputedRef<TableActionDefinition[]>;
+    execute: (definition: TableActionDefinition) => Promise<void>;
+    runningKeys: import("vue").Ref<string[], string[]>;
+    toolbarActions: ComputedRef<TableActionController[]>;
+};
+export {};