nuxt-ui-tools 0.1.3 → 1.0.0

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

@@ -0,0 +1,111 @@
+import { computed, ref } from "vue";
+import { isFunction } from "../../shared/utils/predicate.js";
+import { resolveTableActionDefinitions } from "../utils/actions.js";
+export function useTableActions(options) {
+  const runningKeys = ref([]);
+  const tableApi = options.tableApi.value;
+  if (!tableApi) {
+    throw new Error("Table API is not ready");
+  }
+  const selectionApi = tableApi.selection;
+  const resolvedDefinitions = computed(() => resolveTableActionDefinitions(options.schema.value));
+  const bulkDefinitions = computed(
+    () => resolvedDefinitions.value.bulkActions
+  );
+  const toolbarDefinitions = computed(
+    () => resolvedDefinitions.value.toolbarActions
+  );
+  const definitions = computed(() => [
+    ...bulkDefinitions.value,
+    ...toolbarDefinitions.value
+  ]);
+  const context = computed(() => ({
+    context: toPlainRecord(options.queryContent.contextData.value),
+    matchingCount: options.queryContent.data.value.rowCount ?? null,
+    pageContext: toPlainRecord(options.queryContent.pageContextData.value),
+    request: {
+      ...options.queryContent.requestContext.value,
+      context: toPlainRecord(options.queryContent.requestContext.value.context)
+    },
+    scope: options.selection.bulkScope.value,
+    selectedRows: options.selection.selectedRows.value
+  }));
+  function isRunning(key) {
+    return runningKeys.value.includes(key);
+  }
+  function resolveState(definition) {
+    const actionContext = context.value;
+    const condition = resolveCondition(definition.condition, actionContext.context);
+    const disabled = resolveFlag(definition.disabled, actionContext);
+    const loading = resolveFlag(definition.loading, actionContext);
+    const requiresSelection = "requiresSelection" in definition && definition.requiresSelection;
+    return {
+      disabled: disabled || Boolean(requiresSelection && !actionContext.selectedRows.length),
+      loading,
+      running: isRunning(definition.key),
+      visible: condition
+    };
+  }
+  async function execute(definition) {
+    const state = resolveState(definition);
+    if (!state.visible || state.disabled || state.loading || state.running) {
+      return;
+    }
+    if (!definition.action) {
+      return;
+    }
+    runningKeys.value = [...runningKeys.value, definition.key];
+    try {
+      await definition.action(context.value);
+    } finally {
+      runningKeys.value = runningKeys.value.filter((key) => key !== definition.key);
+    }
+  }
+  function resolveControllers(actionDefinitions) {
+    return actionDefinitions.flatMap((definition) => {
+      const state = resolveState(definition);
+      if (!state.visible) {
+        return [];
+      }
+      return [
+        {
+          definition,
+          execute: () => execute(definition),
+          running: state.running,
+          selection: selectionApi,
+          state
+        }
+      ];
+    });
+  }
+  const bulkActions = computed(
+    () => resolveControllers(bulkDefinitions.value)
+  );
+  const toolbarActions = computed(
+    () => resolveControllers(toolbarDefinitions.value)
+  );
+  const actions = computed(() => [
+    ...bulkActions.value,
+    ...toolbarActions.value
+  ]);
+  return {
+    actions,
+    bulkActions,
+    definitions,
+    execute,
+    runningKeys,
+    toolbarActions
+  };
+}
+function resolveCondition(value, context) {
+  return isBooleanResolver(value) ? value(context) : value ?? true;
+}
+function resolveFlag(value, context) {
+  return isBooleanResolver(value) ? value(context) : value ?? false;
+}
+function isBooleanResolver(value) {
+  return isFunction(value);
+}
+function toPlainRecord(value) {
+  return Object.fromEntries(Object.entries(value));
+}

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

@@ -1,4 +1,4 @@
-import { type ComputedRef } from 'vue';
+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';
@@ -8,8 +8,9 @@ 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 {
+export interface UseTableApiParams<TSchema = TableSchemaView> {
     runtimeSchema: ComputedRef<TableSchemaView>;
+    publicSchema: ComputedRef<TSchema>;
     layout: ReturnType<typeof useTableLayout>;
     state: ReturnType<typeof useTableState>;
     selection: ReturnType<typeof useTableSelection>;
@@ -19,4 +20,4 @@ export interface UseTableApiParams {
     pagination: ReturnType<typeof useTablePagination>;
     queryContent: UseTableDataReturn;
 }
-export declare function useTableApi<TSchema = TableSchemaView>(params: UseTableApiParams): TableApi<TSchema>;
+export declare function useTableApi<TSchema = TableSchemaView>(params: UseTableApiParams<TSchema>): TableApi<TSchema>;

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

@@ -2,29 +2,33 @@ import { computed } from "vue";
 import { getDefaultSort, mapPublicQueryState, resolveTableFilterDefaultRules } from "../utils/index.js";
 export function useTableApi(params) {
   const state = {
+    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),
     layout: params.layout.activeLayout,
     query: computed(
       () => mapPublicQueryState({
-        queryState: params.state.queryState,
-        activeLayout: params.layout.activeLayout.value
+        activeLayout: params.layout.activeLayout.value,
+        queryState: params.state.queryState
       })
-    ),
-    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 = {
+    // SAFETY: runtime rows are decoded by the schema source; this projects the public generic row type.
     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),
+    // SAFETY: raw rows follow the same schema source contract before client-side shaping.
     rawRows: computed(() => params.queryContent.rawData.value.rows),
     rawRowCount: computed(() => params.queryContent.rawData.value.rowCount),
     context: computed(
+      // SAFETY: context keys are decoded from the schema context items before publication.
       () => params.queryContent.contextData.value
     ),
     pageContext: computed(
+      // SAFETY: page-context keys are decoded from the schema page-context items before publication.
       () => params.queryContent.pageContextData.value
     ),
     requestContext: params.queryContent.requestContext,
@@ -39,46 +43,50 @@ export function useTableApi(params) {
     }
   };
   const layoutApi = {
-    state: params.controls.layoutState,
-    set: params.controls.setTableLayout
+    set: params.controls.setTableLayout,
+    state: params.controls.layoutState
   };
   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 })
+    replace: (rules) => params.filters.replaceFilters({ rules }),
+    search: params.filters.searchQuery,
+    state: computed(() => params.state.queryState.filters.value)
   };
-  const pagination = createPublicPaginationApi(params.pagination);
+  const pagination = createPublicPaginationApi(params.pagination, params.publicSchema);
   const sorting = {
-    state: params.columns.sortingState,
-    sortKeys: params.columns.sortKeys,
+    clear: params.columns.clearSorting,
     set: params.columns.setSorting,
-    setKey: params.columns.setSortKey,
     setDirection: params.columns.setSortDirection,
-    clear: params.columns.clearSorting,
+    setKey: params.columns.setSortKey,
+    sortKeys: params.columns.sortKeys,
+    state: params.columns.sortingState,
     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,
+    isSelected: (rowId) => params.selection.isRowSelected({ rowId }),
     selectAll: params.selection.selectAllRows,
     selectRows: (rowIds) => params.selection.selectRows({ rowIds }),
-    unselectRows: (rowIds) => params.selection.unselectRows({ rowIds }),
+    state: computed(() => ({
+      allSelected: params.selection.allSelected.value,
+      partiallySelected: params.selection.partiallySelected.value,
+      selectedCount: params.selection.selectedCount.value,
+      selectedKeys: params.selection.selectedKeys.value
+    })),
     toggle: params.selection.toggleRowSelection,
-    isSelected: (rowId) => params.selection.isRowSelected({ rowId })
+    unselectRows: (rowIds) => params.selection.unselectRows({ rowIds })
   };
   const reset = {
+    all() {
+      reset.query();
+      selection.clear();
+    },
     query() {
-      const defaultLayout = params.runtimeSchema.value.defaultLayout;
+      const { defaultLayout } = params.runtimeSchema.value;
       const nextLayout = defaultLayout ?? "table";
-      const defaultSort = getDefaultSort({ schema: params.runtimeSchema.value, layout: nextLayout });
+      const defaultSort = getDefaultSort({ layout: nextLayout, schema: params.runtimeSchema.value });
       params.layout.activeLayout.value = nextLayout;
       params.pagination.reset();
       params.columns.setSorting(defaultSort);
@@ -86,48 +94,46 @@ export function useTableApi(params) {
         search: "",
         ui: resolveTableFilterDefaultRules(params.runtimeSchema.value.filters?.ui ?? [])
       };
-    },
-    all() {
-      reset.query();
-      selection.clear();
     }
   };
   return {
-    state,
     data,
-    layout: layoutApi,
     filters,
+    layout: layoutApi,
     pagination,
-    sorting,
-    selection,
-    reset,
     refresh: params.queryContent.refreshData(),
+    reset,
+    selection,
+    sorting,
+    state,
     updateRow: data.updateRow,
     updateRows: data.updateRows
   };
 }
-function createPublicPaginationApi(pagination) {
-  if (pagination.mode.value === "cursor")
+function createPublicPaginationApi(pagination, _schema) {
+  if (pagination.mode.value === "cursor") {
     return {
-      mode: "cursor",
-      state: pagination.state,
       loadMore: pagination.loadMore,
-      reset: pagination.reset
+      mode: "cursor",
+      reset: pagination.reset,
+      state: pagination.cursorState
     };
-  if (pagination.mode.value === "none")
+  }
+  if (pagination.mode.value === "none") {
     return {
       mode: "none",
-      state: pagination.state,
-      reset: pagination.reset
+      reset: pagination.reset,
+      state: pagination.noneState
     };
+  }
   return {
     mode: "offset",
-    state: pagination.state,
+    next: pagination.next,
     pageSizeOptions: pagination.pageSizeOptions,
+    previous: pagination.previous,
+    reset: pagination.reset,
     setPage: pagination.setPage,
     setPageSize: pagination.setPageSize,
-    next: pagination.next,
-    previous: pagination.previous,
-    reset: pagination.reset
+    state: pagination.offsetState
   };
 }

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

@@ -1,112 +1,117 @@
-import { type TableColumnState, type UseTableColumnsParams } from '../utils/index.js';
+import type { TableColumnState, UseTableColumnsParams } from '../utils/index.js';
 export declare function useTableColumns(params: UseTableColumnsParams): {
-    tableState: import("vue").Ref<{
-        columnOrder: string[];
-        columnVisibility: Record<string, boolean>;
-        columnPinning: {
-            left?: string[] | undefined;
-            right?: string[] | undefined;
-        };
-        columnSizing: Record<string, number>;
-        columnSizingInfo: {
-            startOffset: number | null;
-            startSize: number | null;
-            deltaOffset: number | null;
-            deltaPercentage: number | null;
-            isResizingColumn: false | string;
-            columnSizingStart: Array<[string, number]>;
-        };
-        sorting: {
-            id: string;
-            desc: boolean;
-        }[];
-    }, TableColumnState | {
-        columnOrder: string[];
-        columnVisibility: Record<string, boolean>;
-        columnPinning: {
-            left?: string[] | undefined;
-            right?: string[] | undefined;
-        };
-        columnSizing: Record<string, number>;
-        columnSizingInfo: {
-            startOffset: number | null;
-            startSize: number | null;
-            deltaOffset: number | null;
-            deltaPercentage: number | null;
-            isResizingColumn: false | string;
-            columnSizingStart: Array<[string, number]>;
-        };
-        sorting: {
-            id: string;
-            desc: boolean;
-        }[];
+    clearSorting: () => void;
+    columnDefs: import("vue").ComputedRef<import("../utils/index.js").DataListColumnDef[]>;
+    getMenuItems: (options: {
+        columnId: string;
+    }) => import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[][];
+    getPinnedState: (options: {
+        columnId: string;
+    }) => "right" | "left" | null;
+    getSortState: (options: {
+        columnId: string;
+    }) => "desc" | "asc" | null;
+    orderedColumns: import("vue").ComputedRef<import("../utils/index.js").TableRuntimeColumn[]>;
+    reset: () => void;
+    runtimeColumns: import("vue").ComputedRef<import("../utils/index.js").TableRuntimeColumn[]>;
+    setOrder: (options: {
+        columnIds: string[];
+    }) => void;
+    setPinning: (options: {
+        columnId: string;
+        pinned?: "left" | "right";
+    }) => void;
+    setSortDirection: (direction: "asc" | "desc") => void;
+    setSortKey: (key?: string) => void;
+    setSorting: (sorting: {
+        key: string;
+        dir: "asc" | "desc";
+    } | null) => void;
+    setVisibility: (options: {
+        columnId: string;
+        visible: boolean;
+    }) => void;
+    sortKeys: import("vue").ComputedRef<string[]>;
+    sortingState: import("vue").ComputedRef<{
+        active: boolean;
+        dir: "desc" | "asc" | undefined;
+        key: string | undefined;
     }>;
     tableColumns: import("vue").ComputedRef<({
-        id: string;
-        header: () => import("vue/jsx-runtime").JSX.Element;
         cell: ({ row }: {
             row: {
                 id: string;
             };
         }) => import("vue/jsx-runtime").JSX.Element;
-        size: number;
-        enableSorting: boolean;
         enableHiding: boolean;
         enablePinning: boolean;
         enableResizing: boolean;
+        enableSorting: boolean;
+        header: () => import("vue/jsx-runtime").JSX.Element;
+        id: string;
         meta: {
             class: {
-                th: string;
                 td: string;
+                th: string;
             };
             style: {
-                th: () => {
-                    width: string;
-                    minWidth: string;
-                    maxWidth: string;
-                };
                 td: () => {
-                    width: string;
+                    maxWidth: string;
                     minWidth: string;
+                    width: string;
+                };
+                th: () => {
                     maxWidth: string;
+                    minWidth: string;
+                    width: string;
                 };
             };
         };
+        size: number;
     } | {
-        id: string;
-        header: () => null;
         cell: ({ row }: {
             row: {
                 original: import("../types/index.js").GenericObject;
                 index: number;
             };
         }) => import("vue/jsx-runtime").JSX.Element;
-        size: number;
-        enableSorting: boolean;
         enableHiding: boolean;
         enablePinning: boolean;
         enableResizing: boolean;
+        enableSorting: boolean;
+        header: () => null;
+        id: string;
         meta: {
             class: {
-                th: string;
                 td: string;
+                th: string;
             };
             style: {
-                th: () => {
-                    width: string;
-                    minWidth: string;
-                    maxWidth: string;
-                };
                 td: () => {
-                    width: string;
+                    maxWidth: string;
                     minWidth: string;
+                    width: string;
+                };
+                th: () => {
                     maxWidth: string;
+                    minWidth: string;
+                    width: string;
                 };
             };
         };
+        size: number;
     } | {
-        id: string;
         accessorFn: ((row: import("../types/index.js").GenericObject) => unknown) | undefined;
+        cell: ({ row }: {
+            row: {
+                original: import("../types/index.js").GenericObject;
+                index: number;
+            };
+        }) => import("vue/jsx-runtime").JSX.Element;
+        enableHiding: boolean;
+        enablePinning: boolean;
+        enableResizing: boolean;
+        enableSorting: boolean;
         header: ({ column: tableColumn, header, }: {
             column: {
                 getCanHide?: () => boolean;
@@ -117,82 +122,78 @@ export declare function useTableColumns(params: UseTableColumnsParams): {
                 getResizeHandler?: () => (event: Event) => void;
             };
         }) => import("vue/jsx-runtime").JSX.Element;
-        cell: ({ row }: {
-            row: {
-                original: import("../types/index.js").GenericObject;
-                index: number;
-            };
-        }) => import("vue/jsx-runtime").JSX.Element;
-        enableSorting: boolean;
-        enableHiding: boolean;
-        enablePinning: boolean;
-        enableResizing: boolean;
-        size: number | undefined;
-        minSize: number;
+        id: string;
         maxSize: number | undefined;
         meta: {
             class: {
-                th: string;
                 td: string;
+                th: string;
             };
             style: {
-                th: ({ column: headerColumn }: {
+                td: ({ column: cellColumn }: {
                     column: {
                         getSize: () => number;
                     };
                 }) => {
-                    width: string;
-                    minWidth: string;
                     maxWidth: string;
+                    minWidth: string;
+                    width: string;
                 };
-                td: ({ column: cellColumn }: {
+                th: ({ column: headerColumn }: {
                     column: {
                         getSize: () => number;
                     };
                 }) => {
-                    width: string;
-                    minWidth: string;
                     maxWidth: string;
+                    minWidth: string;
+                    width: string;
                 };
             };
         };
+        minSize: number;
+        size: number | undefined;
     })[]>;
-    runtimeColumns: import("vue").ComputedRef<import("../utils/index.js").TableRuntimeColumn[]>;
-    orderedColumns: import("vue").ComputedRef<import("../utils/index.js").TableRuntimeColumn[]>;
-    visibleOrderedColumns: import("vue").ComputedRef<import("../utils/index.js").TableRuntimeColumn[]>;
-    reset: () => void;
-    setVisibility: (options: {
-        columnId: string;
-        visible: boolean;
-    }) => void;
-    setPinning: (options: {
-        columnId: string;
-        pinned?: "left" | "right";
-    }) => void;
-    setOrder: (options: {
-        columnIds: string[];
-    }) => void;
-    getSortState: (options: {
-        columnId: string;
-    }) => "desc" | "asc" | null;
-    getPinnedState: (options: {
-        columnId: string;
-    }) => "right" | "left" | null;
-    getMenuItems: (options: {
-        columnId: string;
-    }) => import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[][];
-    sortingState: import("vue").ComputedRef<{
-        key: string | undefined;
-        dir: "desc" | "asc" | undefined;
-        active: boolean;
+    tableState: import("vue").Ref<{
+        columnOrder: string[];
+        columnVisibility: Record<string, boolean>;
+        columnPinning: {
+            left?: string[] | undefined;
+            right?: string[] | undefined;
+        };
+        columnSizing: Record<string, number>;
+        columnSizingInfo: {
+            startOffset: number | null;
+            startSize: number | null;
+            deltaOffset: number | null;
+            deltaPercentage: number | null;
+            isResizingColumn: false | string;
+            columnSizingStart: [string, number][];
+        };
+        sorting: {
+            id: string;
+            desc: boolean;
+        }[];
+    }, TableColumnState | {
+        columnOrder: string[];
+        columnVisibility: Record<string, boolean>;
+        columnPinning: {
+            left?: string[] | undefined;
+            right?: string[] | undefined;
+        };
+        columnSizing: Record<string, number>;
+        columnSizingInfo: {
+            startOffset: number | null;
+            startSize: number | null;
+            deltaOffset: number | null;
+            deltaPercentage: number | null;
+            isResizingColumn: false | string;
+            columnSizingStart: [string, number][];
+        };
+        sorting: {
+            id: string;
+            desc: boolean;
+        }[];
     }>;
-    sortKeys: import("vue").ComputedRef<string[]>;
-    setSorting: (sorting: {
-        key: string;
-        dir: "asc" | "desc";
-    } | null) => void;
-    setSortKey: (key?: string) => void;
-    setSortDirection: (direction: "asc" | "desc") => void;
-    clearSorting: () => void;
     toggleSorting: (key: string) => void;
+    visibleOrderedColumns: import("vue").ComputedRef<import("../utils/index.js").TableRuntimeColumn[]>;
 };