nuxt-ui-tools 0.1.3 → 1.0.1

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

@@ -1,23 +1,29 @@
 import { computed, ref, watch } from "vue";
-import { resolveTableRowId } from "../utils/index.js";
+import { hasConfiguredTableActions, resolveTableRowId } from "../utils/index.js";
 export function useTableSelection(options) {
   const selectedKeys = ref([]);
+  const bulkScope = ref("selection");
   const lastTouchedRowId = ref(null);
   const pageRows = computed(() => options.queryContent.data.value.rows);
   const selectionEnabled = computed(() => {
     const mode = options.schema.value.table?.selection ?? options.schema.value.selection?.mode ?? "auto";
-    return mode !== false;
+    if (mode !== "auto") {
+      return mode;
+    }
+    return hasConfiguredTableActions(options.schema.value);
   });
   const selectionScope = computed(() => {
-    if (options.schema.value.source.mode === "remote") return "page";
+    if (options.schema.value.source.mode === "remote") {
+      return "page";
+    }
     return options.schema.value.selection?.scope ?? "all";
   });
   const selectionRows = computed(
     () => selectionScope.value === "all" ? options.queryContent.selectableRows.value : pageRows.value
   );
-  const pageRowIds = computed(() => pageRows.value.map((row, index) => getRowId({ row, index })));
+  const pageRowIds = computed(() => pageRows.value.map((row, index) => getRowId({ index, row })));
   const scopeRowIds = computed(
-    () => selectionRows.value.map((row, index) => getRowId({ row, index }))
+    () => selectionRows.value.map((row, index) => getRowId({ index, row }))
   );
   const rowSelection = computed({
     get: () => Object.fromEntries(
@@ -34,15 +40,15 @@ export function useTableSelection(options) {
   );
   const selectedRows = computed(
     () => selectionRows.value.filter(
-      (row, index) => selectedKeys.value.includes(getRowId({ row, index }))
+      (row, index) => selectedKeys.value.includes(getRowId({ index, row }))
     )
   );
   function getRowId(params) {
     return String(
       resolveTableRowId({
-        rowKey: options.schema.value.rowKey,
+        index: params.index,
         row: params.row,
-        index: params.index
+        rowKey: options.schema.value.rowKey
       })
     );
   }
@@ -118,7 +124,9 @@ export function useTableSelection(options) {
   watch(
     scopeRowIds,
     (rowIds) => {
-      if (!selectedKeys.value.length && !lastTouchedRowId.value) return;
+      if (!selectedKeys.value.length && !lastTouchedRowId.value) {
+        return;
+      }
       const visibleIdSet = new Set(rowIds);
       selectedKeys.value = selectedKeys.value.filter((rowId) => visibleIdSet.has(rowId));
       if (lastTouchedRowId.value && !visibleIdSet.has(lastTouchedRowId.value)) {
@@ -127,26 +135,36 @@ export function useTableSelection(options) {
     },
     { immediate: true }
   );
+  function setBulkScope(scope) {
+    bulkScope.value = scope;
+  }
+  watch(selectedCount, (count) => {
+    if (count === 0) {
+      bulkScope.value = "selection";
+    }
+  });
   return {
-    selectionEnabled,
-    rowSelection,
-    selectedKeys,
-    selectedRows,
-    selectedCount,
     allSelected,
-    partiallySelected,
-    lastTouchedRowId,
+    bulkScope,
+    clearSelection,
     getRowId,
     isRowSelected,
-    setRowSelection,
-    selectRows,
-    unselectRows,
-    clearSelection,
+    lastTouchedRowId,
+    partiallySelected,
+    rowSelection,
     selectAllRows,
+    selectRows,
+    selectedCount,
+    selectedKeys,
+    selectedRows,
+    selectionEnabled,
+    setBulkScope,
+    setRowSelection,
     toggleAllRows,
-    toggleRowSelection
+    toggleRowSelection,
+    unselectRows
   };
 }
 function uniqueRowIds(rowIds) {
-  return Array.from(new Set(rowIds));
+  return [...new Set(rowIds)];
 }

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

@@ -1,11 +1,11 @@
 type TableStartupPhase = 'booting' | 'scheduled' | 'active';
 export declare function useTableStartup(): {
-    phase: import("vue").ShallowRef<TableStartupPhase, TableStartupPhase>;
-    isBooting: import("vue").ComputedRef<boolean>;
+    dispose: () => void;
     isActive: import("vue").ComputedRef<boolean>;
-    start: () => void;
+    isBooting: import("vue").ComputedRef<boolean>;
+    phase: import("vue").ShallowRef<TableStartupPhase, TableStartupPhase>;
     scheduleStart: () => void;
-    dispose: () => void;
+    start: () => void;
 };
 export type UseTableStartupReturn = ReturnType<typeof useTableStartup>;
 export {};

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

@@ -1,4 +1,5 @@
 import { shallowRef, computed } from "vue";
+import { isNullish } from "../../shared/utils/predicate.js";
 export function useTableStartup() {
   const phase = shallowRef("booting");
   const firstFrameId = shallowRef(null);
@@ -6,13 +7,15 @@ export function useTableStartup() {
   const isBooting = computed(() => phase.value !== "active");
   const isActive = computed(() => phase.value === "active");
   function dispose() {
-    if (typeof window === "undefined") return;
-    if (firstFrameId.value != null) {
-      window.cancelAnimationFrame(firstFrameId.value);
+    if (!("window" in globalThis)) {
+      return;
+    }
+    if (!isNullish(firstFrameId.value)) {
+      globalThis.window.cancelAnimationFrame(firstFrameId.value);
       firstFrameId.value = null;
     }
-    if (secondFrameId.value != null) {
-      window.cancelAnimationFrame(secondFrameId.value);
+    if (!isNullish(secondFrameId.value)) {
+      globalThis.window.cancelAnimationFrame(secondFrameId.value);
       secondFrameId.value = null;
     }
   }
@@ -21,27 +24,29 @@ export function useTableStartup() {
     phase.value = "active";
   }
   function scheduleStart() {
-    if (phase.value === "active") return;
-    if (typeof window === "undefined") {
+    if (phase.value === "active") {
+      return;
+    }
+    if (!("window" in globalThis)) {
       start();
       return;
     }
     dispose();
     phase.value = "scheduled";
-    firstFrameId.value = window.requestAnimationFrame(() => {
+    firstFrameId.value = globalThis.window.requestAnimationFrame(() => {
       firstFrameId.value = null;
-      secondFrameId.value = window.requestAnimationFrame(() => {
+      secondFrameId.value = globalThis.window.requestAnimationFrame(() => {
         secondFrameId.value = null;
         start();
       });
     });
   }
   return {
-    phase,
-    isBooting,
+    dispose,
     isActive,
-    start,
+    isBooting,
+    phase,
     scheduleStart,
-    dispose
+    start
   };
 }

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

@@ -1,4 +1,4 @@
-import { type ComputedRef } from 'vue';
+import type { ComputedRef } from 'vue';
 import type { TableResolvedFilterGroup, TableSchemaView } from '../types/index.js';
 import type { useTableLayout } from './use-table-layout.js';
 export interface UseTableStateParams {
@@ -7,23 +7,30 @@ export interface UseTableStateParams {
 }
 export declare function useTableState(params: UseTableStateParams): {
     queryState: {
+        filters: import("vue").WritableComputedRef<{
+            search: string;
+            ui: import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[];
+        }, {
+            search: string;
+            ui: import("../types/index.js").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";
@@ -34,19 +41,12 @@ export declare function useTableState(params: UseTableStateParams): {
             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: import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[];
-        }, {
-            search: string;
-            ui: import("../types/index.js").TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[];
-        }>;
     };
     resolvedFilterState: ComputedRef<TableResolvedFilterGroup<string>>;
 };

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

@@ -3,8 +3,8 @@ import { createResolvedFilterState } from "../utils/index.js";
 import { useQueryState } from "./use-query-state.js";
 export function useTableState(params) {
   const queryState = useQueryState({
-    schema: params.schema,
-    activeLayout: params.layout.activeLayout
+    activeLayout: params.layout.activeLayout,
+    schema: params.schema
   });
   const resolvedFilterState = computed(
     () => createResolvedFilterState({

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

@@ -0,0 +1,30 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { TableSchemaView, TableSummaryScope, TableSummaryValue } from '../types/index.js';
+import type { TableRuntimeColumn } from '../utils/columns/types.js';
+import type { useTableData } from './use-table-data.js';
+import type { useTableSelection } from './use-table-selection.js';
+export interface UseTableSummariesParams {
+    schema: ComputedRef<TableSchemaView>;
+    queryContent: ReturnType<typeof useTableData>;
+    selection: ReturnType<typeof useTableSelection>;
+    runtimeColumns: ComputedRef<TableRuntimeColumn[]>;
+}
+export interface TableSummaryCell {
+    value: TableSummaryValue;
+    loading: boolean;
+    error: Error | null;
+}
+export declare function useTableSummaries(params: UseTableSummariesParams): {
+    cell: (columnId: string) => TableSummaryCell;
+    cells: import("vue").ShallowRef<Record<string, TableSummaryCell>, Record<string, TableSummaryCell>>;
+    columns: ComputedRef<TableRuntimeColumn[]>;
+    count: ComputedRef<number>;
+    enabled: ComputedRef<boolean>;
+    format: (columnId: string) => TableSummaryValue;
+    label: ComputedRef<import("../types/index.js").LazyTextValue | undefined>;
+    loading: ComputedRef<boolean>;
+    rows: ComputedRef<object[]>;
+    scope: Ref<TableSummaryScope, TableSummaryScope>;
+    scopes: ComputedRef<TableSummaryScope[]>;
+    setScope: (next: TableSummaryScope) => void;
+};

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

@@ -0,0 +1,223 @@
+import { computed, ref, shallowRef, watch } from "vue";
+import { isDate, isFunction, isObject } from "../../shared/utils/predicate.js";
+export function useTableSummaries(params) {
+  const config = computed(() => params.schema.value.table?.summaries);
+  const columns = computed(() => params.runtimeColumns.value.filter((column) => column.summary));
+  const enabled = computed(() => columns.value.length > 0 || Boolean(config.value?.resolve));
+  const scopes = computed(
+    () => config.value?.scopes ?? (params.selection.selectionEnabled.value ? ["filtered", "page", "selection"] : ["filtered", "page"])
+  );
+  const scope = ref(config.value?.scope ?? "filtered");
+  const rows = computed(() => {
+    if (scope.value === "selection") {
+      return params.selection.selectedRows.value;
+    }
+    if (scope.value === "page") {
+      return params.queryContent.data.value.rows;
+    }
+    return params.queryContent.selectableRows.value;
+  });
+  const count = computed(
+    () => scope.value === "filtered" && params.schema.value.source.mode !== "client" ? params.queryContent.data.value.rowCount ?? rows.value.length : rows.value.length
+  );
+  const cells = shallowRef({});
+  const loading = computed(() => Object.values(cells.value).some((cell2) => cell2.loading));
+  let token = 0;
+  function setScope(next) {
+    scope.value = next;
+  }
+  function cell(columnId) {
+    return cells.value[columnId] ?? { error: null, loading: false, value: void 0 };
+  }
+  function format(columnId) {
+    const column = columns.value.find((entry) => entry.id === columnId);
+    const summary = column?.summary;
+    const current = cell(columnId);
+    const context = createContext(columnId);
+    const formatter = isConfig(summary) ? summary.format : void 0;
+    if (formatter && !current.loading) {
+      return formatter(current.value, context);
+    }
+    return current.value;
+  }
+  function createContext(columnId) {
+    return {
+      columnKey: columnId,
+      request: params.queryContent.requestContext.value,
+      rows: rows.value,
+      scope: scope.value
+    };
+  }
+  async function compute() {
+    token += 1;
+    const run = token;
+    if (!enabled.value) {
+      cells.value = {};
+      return;
+    }
+    const next = {};
+    const pending = [];
+    const remoteFiltered = scope.value === "filtered" && params.schema.value.source.mode !== "client";
+    for (const column of columns.value) {
+      const { summary } = column;
+      if (!summary) {
+        continue;
+      }
+      const context = createContext(column.id);
+      const resolver = isResolver(summary) ? summary : isConfig(summary) ? summary.resolve : void 0;
+      const kind = isResolver(summary) ? void 0 : isConfig(summary) ? summary.kind : summary;
+      if (resolver) {
+        next[column.id] = { error: null, loading: true, value: cells.value[column.id]?.value };
+        pending.push(
+          Promise.resolve().then(() => resolver(context)).then((value) => {
+            if (run !== token) {
+              return;
+            }
+            cells.value = { ...cells.value, [column.id]: { error: null, loading: false, value } };
+          }).catch((error) => {
+            if (run !== token) {
+              return;
+            }
+            cells.value = {
+              ...cells.value,
+              [column.id]: { error: toError(error), loading: false, value: void 0 }
+            };
+          })
+        );
+        continue;
+      }
+      if (kind && !remoteFiltered) {
+        next[column.id] = {
+          error: null,
+          loading: false,
+          value: derive(kind, rows.value, column.id)
+        };
+        continue;
+      }
+      next[column.id] = { error: null, loading: true, value: cells.value[column.id]?.value };
+    }
+    cells.value = next;
+    const resolveAll = config.value?.resolve;
+    if (resolveAll) {
+      pending.push(
+        Promise.resolve().then(
+          () => resolveAll({
+            request: params.queryContent.requestContext.value,
+            rows: rows.value,
+            scope: scope.value
+          })
+        ).then((values) => {
+          if (run !== token) {
+            return;
+          }
+          const merged = { ...cells.value };
+          for (const [key, value] of Object.entries(values ?? {})) {
+            merged[key] = { error: null, loading: false, value };
+          }
+          for (const column of columns.value) {
+            if (merged[column.id]?.loading) {
+              merged[column.id] = { ...merged[column.id], loading: false };
+            }
+          }
+          cells.value = merged;
+        }).catch((error) => {
+          if (run !== token) {
+            return;
+          }
+          const merged = { ...cells.value };
+          for (const column of columns.value) {
+            if (merged[column.id]?.loading) {
+              merged[column.id] = { error: toError(error), loading: false, value: void 0 };
+            }
+          }
+          cells.value = merged;
+        })
+      );
+    } else if (remoteFiltered) {
+      const merged = { ...cells.value };
+      for (const column of columns.value) {
+        if (merged[column.id]?.loading && !isResolver(column.summary) && !(isConfig(column.summary) && column.summary.resolve)) {
+          merged[column.id] = { error: null, loading: false, value: void 0 };
+        }
+      }
+      cells.value = merged;
+    }
+    await Promise.all(pending);
+  }
+  watch(
+    [rows, scope, columns, () => params.queryContent.status.value.isFetching],
+    ([, , , fetching]) => {
+      if (fetching) {
+        return;
+      }
+      void compute();
+    },
+    { flush: "post", immediate: true }
+  );
+  return {
+    cell,
+    cells,
+    columns,
+    count,
+    enabled,
+    format,
+    label: computed(() => config.value?.label),
+    loading,
+    rows,
+    scope,
+    scopes,
+    setScope
+  };
+}
+function isConfig(value) {
+  return isObject(value);
+}
+function isResolver(value) {
+  return isFunction(value);
+}
+function toError(cause) {
+  return cause instanceof Error ? cause : new Error(String(cause));
+}
+function readPath(row, path) {
+  let current = row;
+  for (const key of path.split(".")) {
+    if (!isObject(current) || isDate(current)) {
+      return void 0;
+    }
+    const next = current[key];
+    if (isObject(next) || isDate(next) || isPrimitiveSummary(next)) {
+      current = next;
+    } else {
+      return void 0;
+    }
+  }
+  if (isDate(current) || isPrimitiveSummary(current)) {
+    return current;
+  }
+  return void 0;
+}
+function isPrimitiveSummary(value) {
+  return value === null || value === void 0 || typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+function derive(kind, rows, key) {
+  if (kind === "count") {
+    return rows.length;
+  }
+  const numbers = rows.map((row) => readPath(row, key)).filter((value) => typeof value === "number" && Number.isFinite(value));
+  if (!numbers.length) {
+    return kind === "sum" ? 0 : null;
+  }
+  if (kind === "sum") {
+    return numbers.reduce((total, value) => total + value, 0);
+  }
+  if (kind === "avg") {
+    return numbers.reduce((total, value) => total + value, 0) / numbers.length;
+  }
+  if (kind === "min") {
+    return Math.min(...numbers);
+  }
+  if (kind === "max") {
+    return Math.max(...numbers);
+  }
+  return null;
+}

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

@@ -1,6 +1,6 @@
 import type { ComputedRef, MaybeRefOrGetter } from 'vue';
 import type { TableApi } from '../types/index.js';
-import { type TableInternals } from './use-table-internals.js';
+import type { TableInternals } from './use-table-internals.js';
 export declare function useTable<TSchema>(schema: MaybeRefOrGetter<TSchema>): TableApi<TSchema> & {
     schema: ComputedRef<TSchema>;
     __internals: TableInternals;

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

@@ -7,7 +7,7 @@ export function useTable(schema) {
   });
   return {
     ...internals.tableApi,
-    schema: resolvedSchema,
-    __internals: internals
+    __internals: internals,
+    schema: resolvedSchema
   };
 }

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

@@ -0,0 +1,50 @@
+import type { columnResizingState } from '@tanstack/vue-table';
+import type { ComputedRef, Ref } from 'vue';
+import type { GenericObject } from '../types/index.js';
+import type { DataListColumnDef, DataListColumnMeta } from '../utils/columns/types.js';
+declare const dataListFeatures: {
+    columnPinningFeature: import("@tanstack/table-core").TableFeature;
+    columnResizingFeature: import("@tanstack/table-core").TableFeature;
+    columnSizingFeature: import("@tanstack/table-core").TableFeature;
+    columnVisibilityFeature: import("@tanstack/table-core").TableFeature;
+    coreRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
+    columnMeta: DataListColumnMeta;
+};
+export type DataListTableFeatures = typeof dataListFeatures;
+export interface UseTanstackTableParams {
+    columns: ComputedRef<DataListColumnDef[]>;
+    data: ComputedRef<GenericObject[]>;
+    getRowId: (row: GenericObject, index: number) => string;
+    pinned: ComputedRef<{
+        start: string[];
+        end: string[];
+    }>;
+    columnSizing: Ref<Record<string, number>>;
+}
+export declare function useTanstackTable(params: UseTanstackTableParams): {
+    columnResizing: Ref<{
+        columnSizingStart: Array<[string, number]>;
+        deltaOffset: null | number;
+        deltaPercentage: null | number;
+        isResizingColumn: false | string;
+        startOffset: null | number;
+        startSize: null | number;
+    }, columnResizingState | {
+        columnSizingStart: Array<[string, number]>;
+        deltaOffset: null | number;
+        deltaPercentage: null | number;
+        isResizingColumn: false | string;
+        startOffset: null | number;
+        startSize: null | number;
+    }>;
+    resetColumnSizing: () => void;
+    table: import("@tanstack/vue-table").VueTable<{
+        columnPinningFeature: import("@tanstack/table-core").TableFeature;
+        columnResizingFeature: import("@tanstack/table-core").TableFeature;
+        columnSizingFeature: import("@tanstack/table-core").TableFeature;
+        columnVisibilityFeature: import("@tanstack/table-core").TableFeature;
+        coreRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
+        columnMeta: DataListColumnMeta;
+    }, object>;
+};
+export {};

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

@@ -0,0 +1,64 @@
+import {
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createCoreRowModel,
+  functionalUpdate,
+  tableFeatures,
+  useTable as useTanstack
+} from "@tanstack/vue-table";
+import { ref } from "vue";
+const dataListFeatures = tableFeatures({
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  coreRowModel: createCoreRowModel(),
+  // SAFETY: TanStack requires a seed value for the feature metadata slot; every column def supplies the full meta contract.
+  columnMeta: {}
+});
+const BLANK_RESIZING = {
+  columnSizingStart: [],
+  deltaOffset: null,
+  deltaPercentage: null,
+  isResizingColumn: false,
+  startOffset: null,
+  startSize: null
+};
+export function useTanstackTable(params) {
+  const columnResizing = ref({ ...BLANK_RESIZING });
+  const table = useTanstack({
+    columnResizeMode: "onChange",
+    get columns() {
+      return params.columns.value;
+    },
+    get data() {
+      return params.data.value;
+    },
+    enableColumnResizing: true,
+    features: dataListFeatures,
+    getRowId: (row, index) => params.getRowId(row, index),
+    onColumnResizingChange: (updater) => {
+      columnResizing.value = functionalUpdate(updater, columnResizing.value);
+    },
+    onColumnSizingChange: (updater) => {
+      params.columnSizing.value = functionalUpdate(updater, params.columnSizing.value);
+    },
+    state: {
+      get columnPinning() {
+        return params.pinned.value;
+      },
+      get columnResizing() {
+        return columnResizing.value;
+      },
+      get columnSizing() {
+        return params.columnSizing.value;
+      }
+    }
+  });
+  function resetColumnSizing() {
+    params.columnSizing.value = {};
+  }
+  return { columnResizing, resetColumnSizing, table };
+}

package/dist/runtime/table/constants/grid.d.ts

@@ -1,8 +1,8 @@
 export declare const GRID_DEFAULTS: {
-    readonly mode: "flow";
     readonly columns: 1;
-    readonly itemSpan: 1;
     readonly estimatedRowHeight: 272;
-    readonly skeletonRows: 6;
+    readonly itemSpan: 1;
+    readonly mode: "flow";
     readonly overscan: 3;
+    readonly skeletonRows: 6;
 };