nuxt-ui-tools 0.1.0

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

@@ -0,0 +1,257 @@
+import { computed, ref } from "vue";
+import {
+  collectSelectedBranchIds,
+  collectSelectableDescendantValues,
+  flattenFilterOptionEntries,
+  flattenVisibleFilterOptionTree,
+  resolveOptionFilterUi
+} from "../utils/index.js";
+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,
+    filters: options.filters,
+    queryContent: options.queryContent,
+    schema: options.schema
+  });
+  const filterUi = computed(() => resolveOptionFilterUi(options.definition, options.operator.value));
+  const displayEntries = computed(
+    () => 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))
+    }))
+  );
+  const displayTreeEntries = computed(
+    () => mapSelectedTreeEntries({
+      entries: optionSource.filteredTreeEntries.value,
+      selectedValues: options.selectedValues.value,
+      filterUi: filterUi.value
+    })
+  );
+  const selectedExpandedIds = computed(
+    () => new Set(collectSelectedBranchIds(displayTreeEntries.value))
+  );
+  const effectiveExpandedIds = computed(
+    () => /* @__PURE__ */ new Set([
+      ...optionSource.searchExpandedIds.value,
+      ...selectedExpandedIds.value,
+      ...expandedIds.value
+    ])
+  );
+  const selectedValueKeys = computed(
+    () => new Set(options.selectedValues.value.map((value) => String(value)))
+  );
+  const flatTreeEntryMap = computed(
+    () => new Map(
+      flattenFilterOptionEntries(displayTreeEntries.value).map(
+        (entry) => [entry.id, entry]
+      )
+    )
+  );
+  const visibleTreeEntries = computed(
+    () => flattenVisibleFilterOptionTree({
+      entries: displayTreeEntries.value,
+      expandedIds: effectiveExpandedIds.value,
+      selectable: filterUi.value.tree.selectable,
+      branchSelection: filterUi.value.tree.branchSelection
+    }).map((entry) => {
+      if (!entry.branchSelectable) {
+        return {
+          ...entry,
+          expanded: effectiveExpandedIds.value.has(entry.id),
+          indeterminate: false
+        };
+      }
+      const sourceEntry = flatTreeEntryMap.value.get(entry.id);
+      const descendantValues = sourceEntry ? collectSelectableDescendantValues({
+        entry: sourceEntry,
+        selectable: filterUi.value.tree.selectable
+      }) : [];
+      const selectedCount = descendantValues.filter(
+        (value) => selectedValueKeys.value.has(String(value))
+      ).length;
+      return {
+        ...entry,
+        selected: descendantValues.length > 0 && selectedCount === descendantValues.length,
+        indeterminate: selectedCount > 0 && selectedCount < descendantValues.length,
+        expanded: effectiveExpandedIds.value.has(entry.id)
+      };
+    })
+  );
+  const flatRadioItems = computed(
+    () => displayEntries.value.map((entry) => ({
+      label: entry.label,
+      value: String(entry.value),
+      count: filterUi.value.row.showCounts ? entry.count : void 0,
+      icon: entry.icon,
+      truncate: filterUi.value.row.truncate
+    }))
+  );
+  const flatRadioValue = computed({
+    get: () => options.selectedValues.value[0] != null ? String(options.selectedValues.value[0]) : void 0,
+    set: (value) => {
+      if (value == null) return;
+      const match = displayEntries.value.find((entry) => String(entry.value) === value);
+      if (!match) return;
+      options.setSelectedValues([match.value]);
+    }
+  });
+  const treeRadioItems = computed(
+    () => visibleTreeEntries.value.map((entry) => ({
+      id: entry.id,
+      label: entry.label,
+      value: entry.id,
+      count: filterUi.value.row.showCounts ? entry.count : void 0,
+      icon: entry.icon,
+      truncate: filterUi.value.row.truncate,
+      depth: entry.depth,
+      expandable: entry.expandable,
+      expanded: entry.expanded,
+      selectable: entry.selectable,
+      disabled: !entry.selectable
+    }))
+  );
+  const treeRadioValue = computed({
+    get: () => {
+      const selected = options.selectedValues.value[0];
+      if (selected == null) return void 0;
+      return visibleTreeEntries.value.find(
+        (entry) => entry.value != null && String(entry.value) === String(selected)
+      )?.id;
+    },
+    set: (value) => {
+      if (value == null) return;
+      const match = visibleTreeEntries.value.find((entry) => entry.id === value);
+      if (!match || !match.selectable || match.value == null) return;
+      options.setSelectedValues([match.value]);
+    }
+  });
+  const triggerSummary = computed(() => {
+    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))
+    ).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(", ");
+    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;
+        options.setSelectedValues([]);
+        return;
+      }
+      options.setSelectedValues([value]);
+      return;
+    }
+    if (exists) {
+      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)
+      return;
+    options.setSelectedValues([...options.selectedValues.value, value]);
+  }
+  function toggleTreeEntry(entry) {
+    if (entry.branchSelectable) {
+      toggleBranchSelection(entry.id);
+      return;
+    }
+    if (!entry.selectable) {
+      if (entry.expandable) toggleExpanded(entry.id);
+      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);
+    expandedIds.value = next;
+  }
+  function toggleBranchSelection(id) {
+    if (filterUi.value.selection.mode !== "multiple") return;
+    const entry = flatTreeEntryMap.value.get(id);
+    if (!entry) return;
+    const descendantValues = collectSelectableDescendantValues({
+      entry,
+      selectable: filterUi.value.tree.selectable
+    });
+    if (!descendantValues.length) {
+      if (entry.children.length) toggleExpanded(id);
+      return;
+    }
+    const currentKeys = selectedValueKeys.value;
+    const allSelected = descendantValues.every((value) => currentKeys.has(String(value)));
+    if (allSelected) {
+      const nextValues2 = options.selectedValues.value.filter(
+        (value) => !descendantValues.some((descendant) => String(descendant) === String(value))
+      );
+      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)
+      return;
+    options.setSelectedValues(nextValues);
+  }
+  function resetExpandedIds() {
+    expandedIds.value = /* @__PURE__ */ new Set();
+  }
+  return {
+    optionSource,
+    filterUi,
+    displayEntries,
+    visibleTreeEntries,
+    flatRadioItems,
+    flatRadioValue,
+    treeRadioItems,
+    treeRadioValue,
+    triggerSummary,
+    toggleValue,
+    toggleTreeEntry,
+    toggleExpanded,
+    resetExpandedIds
+  };
+}
+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,
+    count: options.entry.count,
+    ...options.entry.icon ? { icon: options.entry.icon } : {}
+  }) ?? options.entry.icon;
+}
+function mapSelectedTreeEntries(options) {
+  return options.entries.map((entry) => ({
+    ...entry,
+    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
+    })
+  }));
+}

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

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

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

@@ -0,0 +1,151 @@
+import { computed, ref } from "vue";
+import {
+  useQueryStates,
+  dynamicQueryState,
+  numberCodec,
+  stringCodec,
+  createEnumCodec
+} from "#ui-tools/query-state";
+import {
+  createTableFilterValueCodec,
+  getDefaultPageSize,
+  getDefaultSort,
+  getPaginationMode,
+  normalizeFilterDefinition,
+  resolveFilterDefaultOperator,
+  resolveFilterSupportedOperators
+} from "../utils/index.js";
+export function useQueryState(params) {
+  const defaultPageSize = getDefaultPageSize({
+    schema: params.schema.value,
+    layout: params.activeLayout.value
+  });
+  const defaultSort = getDefaultSort({
+    schema: params.schema.value,
+    layout: params.activeLayout.value
+  });
+  const paginationMode = getPaginationMode(params.schema.value);
+  const paginationRevision = ref(0);
+  const offsetPagination = paginationMode === "offset" ? useQueryStates({
+    prefix: "p",
+    schema: {
+      pageIndex: { urlKey: "page", codec: numberCodec, defaultValue: 1 },
+      pageSize: { urlKey: "size", codec: numberCodec, defaultValue: defaultPageSize }
+    },
+    historyMode: "push"
+  }) : null;
+  const pagination = computed(() => {
+    if (paginationMode === "none") return { mode: "none" };
+    if (paginationMode === "cursor")
+      return {
+        mode: "cursor",
+        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"
+      };
+    return {
+      mode: "offset",
+      pageIndex: offsetPagination?.value.pageIndex ?? 1,
+      pageSize: offsetPagination?.value.pageSize ?? defaultPageSize,
+      count: "exact"
+    };
+  });
+  function resetPagination() {
+    if (paginationMode === "cursor") {
+      paginationRevision.value++;
+      return;
+    }
+    if (!offsetPagination) return;
+    offsetPagination.value = {
+      pageIndex: 1,
+      pageSize: offsetPagination.value.pageSize
+    };
+  }
+  function setOffsetPagination(value) {
+    if (!offsetPagination) return;
+    offsetPagination.value = value;
+  }
+  const sortingState = useQueryStates({
+    prefix: "s",
+    schema: {
+      key: { codec: stringCodec, defaultValue: defaultSort?.key ?? "" },
+      dir: { codec: createEnumCodec(["asc", "desc"]), defaultValue: defaultSort?.dir }
+    },
+    historyMode: "push"
+  });
+  const sorting = computed({
+    get() {
+      const { key, dir } = sortingState.value;
+      if (!key) return null;
+      return { key, dir: dir ?? "asc" };
+    },
+    set(value) {
+      sortingState.value = value ? { key: value.key, dir: value.dir } : { key: "", dir: void 0 };
+    }
+  });
+  const filters = useQueryStates({
+    prefix: "f",
+    schema: {
+      search: { codec: stringCodec, defaultValue: "" },
+      ui: dynamicQueryState({
+        urlPrefix: "ui",
+        definitions: () => params.schema.value.filters?.ui ?? [],
+        defaultValue: [],
+        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
+          }));
+        },
+        parse(entries, definitions) {
+          const rules = [];
+          for (const filter of definitions) {
+            const definition = normalizeFilterDefinition(filter);
+            const operators = resolveFilterSupportedOperators(definition);
+            const defaultOp = resolveFilterDefaultOperator(definition);
+            for (const op of operators) {
+              const urlKey = op === defaultOp ? definition.key : `${definition.key}~${op}`;
+              const value = entries.get(urlKey);
+              if (value != null) {
+                rules.push({
+                  key: definition.key,
+                  operator: op,
+                  value
+                });
+                break;
+              }
+            }
+          }
+          return rules;
+        },
+        serialize(rules, definitions) {
+          const result = /* @__PURE__ */ new Map();
+          for (const rule of rules) {
+            const filter = definitions.find((f) => f.key === rule.key);
+            if (!filter) continue;
+            const definition = normalizeFilterDefinition(filter);
+            const operator = rule.operator ?? resolveFilterDefaultOperator(definition);
+            const defaultOp = resolveFilterDefaultOperator(definition);
+            const urlKey = operator === defaultOp ? definition.key : `${definition.key}~${operator}`;
+            result.set(urlKey, rule.value);
+          }
+          return result;
+        }
+      })
+    },
+    historyMode: "push"
+  });
+  return {
+    pagination,
+    paginationMode,
+    paginationRevision,
+    resetPagination,
+    setOffsetPagination,
+    sorting,
+    filters
+  };
+}

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

@@ -0,0 +1,22 @@
+import { type ComputedRef } from 'vue';
+import type { TableApi, TableSchemaView } from '../types/index.js';
+import type { useTableColumns } from './use-table-columns.js';
+import type { useTableControls } from './use-table-controls.js';
+import type { UseTableDataReturn } from './use-table-data.js';
+import type { useTableFilters } from './use-table-filters.js';
+import type { useTableLayout } from './use-table-layout.js';
+import type { useTablePagination } from './use-table-pagination.js';
+import type { useTableSelection } from './use-table-selection.js';
+import type { useTableState } from './use-table-state.js';
+export interface UseTableApiParams {
+    runtimeSchema: ComputedRef<TableSchemaView>;
+    layout: ReturnType<typeof useTableLayout>;
+    state: ReturnType<typeof useTableState>;
+    selection: ReturnType<typeof useTableSelection>;
+    controls: ReturnType<typeof useTableControls>;
+    columns: ReturnType<typeof useTableColumns>;
+    filters: ReturnType<typeof useTableFilters>;
+    pagination: ReturnType<typeof useTablePagination>;
+    queryContent: UseTableDataReturn;
+}
+export declare function useTableApi<TSchema = TableSchemaView>(params: UseTableApiParams): TableApi<TSchema>;

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

@@ -0,0 +1,133 @@
+import { computed } from "vue";
+import { getDefaultSort, mapPublicQueryState } from "../utils/index.js";
+export function useTableApi(params) {
+  const state = {
+    layout: params.layout.activeLayout,
+    query: computed(
+      () => mapPublicQueryState({
+        queryState: params.state.queryState,
+        activeLayout: params.layout.activeLayout.value
+      })
+    ),
+    initialized: computed(() => params.queryContent.status.value.initialized),
+    isEmpty: computed(() => params.queryContent.data.value.rowCount === 0),
+    isLoading: computed(() => params.queryContent.status.value.isPending),
+    isRefreshing: computed(() => params.queryContent.status.value.isRefreshing)
+  };
+  const data = {
+    rows: computed(() => params.queryContent.data.value.rows),
+    rowCount: computed(() => params.queryContent.data.value.rowCount),
+    loadedRowCount: computed(() => params.queryContent.data.value.rows.length),
+    totalRowCount: computed(() => params.queryContent.data.value.rowCount),
+    rawRows: computed(() => params.queryContent.rawData.value.rows),
+    rawRowCount: computed(() => params.queryContent.rawData.value.rowCount),
+    context: computed(
+      () => params.queryContent.contextData.value
+    ),
+    pageContext: computed(
+      () => params.queryContent.pageContextData.value
+    ),
+    requestContext: params.queryContent.requestContext,
+    error: params.queryContent.error,
+    status: params.queryContent.status,
+    refresh: params.queryContent.refreshData(),
+    updateRow(row) {
+      params.queryContent.updateRows([row]);
+    },
+    updateRows(rows) {
+      params.queryContent.updateRows(rows);
+    }
+  };
+  const layoutApi = {
+    state: params.controls.layoutState,
+    set: params.controls.setTableLayout
+  };
+  const filters = {
+    state: computed(() => params.state.queryState.filters.value),
+    search: params.filters.searchQuery,
+    activeCount: computed(() => params.filters.activeUiFilters.value.length),
+    clear: params.filters.clearAllFilters,
+    remove: (key) => params.filters.clearFilter({ key }),
+    replace: (rules) => params.filters.replaceFilters({ rules })
+  };
+  const pagination = createPublicPaginationApi(params.pagination);
+  const sorting = {
+    state: params.columns.sortingState,
+    sortKeys: params.columns.sortKeys,
+    set: params.columns.setSorting,
+    setKey: params.columns.setSortKey,
+    setDirection: params.columns.setSortDirection,
+    clear: params.columns.clearSorting,
+    toggle: params.columns.toggleSorting
+  };
+  const selection = {
+    state: computed(() => ({
+      selectedKeys: params.selection.selectedKeys.value,
+      selectedCount: params.selection.selectedCount.value,
+      allSelected: params.selection.allSelected.value,
+      partiallySelected: params.selection.partiallySelected.value
+    })),
+    clear: params.selection.clearSelection,
+    selectAll: params.selection.selectAllRows,
+    selectRows: (rowIds) => params.selection.selectRows({ rowIds }),
+    unselectRows: (rowIds) => params.selection.unselectRows({ rowIds }),
+    toggle: params.selection.toggleRowSelection,
+    isSelected: (rowId) => params.selection.isRowSelected({ rowId })
+  };
+  const reset = {
+    query() {
+      const defaultLayout = params.runtimeSchema.value.defaultLayout;
+      const nextLayout = defaultLayout ?? "table";
+      const defaultSort = getDefaultSort({ schema: params.runtimeSchema.value, layout: nextLayout });
+      params.layout.activeLayout.value = nextLayout;
+      params.pagination.reset();
+      params.columns.setSorting(defaultSort);
+      params.state.queryState.filters.value = {
+        search: "",
+        ui: []
+      };
+    },
+    all() {
+      reset.query();
+      selection.clear();
+    }
+  };
+  return {
+    state,
+    data,
+    layout: layoutApi,
+    filters,
+    pagination,
+    sorting,
+    selection,
+    reset,
+    refresh: params.queryContent.refreshData(),
+    updateRow: data.updateRow,
+    updateRows: data.updateRows
+  };
+}
+function createPublicPaginationApi(pagination) {
+  if (pagination.mode.value === "cursor")
+    return {
+      mode: "cursor",
+      state: pagination.state,
+      loadMore: pagination.loadMore,
+      reset: pagination.reset
+    };
+  if (pagination.mode.value === "none")
+    return {
+      mode: "none",
+      state: pagination.state,
+      reset: pagination.reset
+    };
+  return {
+    mode: "offset",
+    state: pagination.state,
+    pageSizeOptions: pagination.pageSizeOptions,
+    setPage: pagination.setPage,
+    setPageSize: pagination.setPageSize,
+    next: pagination.next,
+    previous: pagination.previous,
+    reset: pagination.reset
+  };
+}