nuxt-ui-tools 0.1.2 → 1.0.0

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

@@ -1,5 +1,6 @@
 import { computed, inject, provide, shallowRef } from "vue";
 import { resolveSchemaSource } from "../utils/index.js";
+import { useTableActions } from "./use-table-actions.js";
 import { useTableApi } from "./use-table-api.js";
 import { useTableColumns } from "./use-table-columns.js";
 import { useTableControls } from "./use-table-controls.js";
@@ -12,6 +13,7 @@ import { useTablePagination } from "./use-table-pagination.js";
 import { useTableSelection } from "./use-table-selection.js";
 import { useTableStartup } from "./use-table-startup.js";
 import { useTableState } from "./use-table-state.js";
+import { useTableSummaries } from "./use-table-summaries.js";
 function createTableInternals(options) {
   const publicSchema = computed(() => resolveSchemaSource({ schema: options.rawSchema }));
   const schema = computed(() => publicSchema.value);
@@ -19,75 +21,92 @@ function createTableInternals(options) {
   const startup = useTableStartup();
   const layout = useTableLayout({ schema });
   const state = useTableState({
-    schema,
-    layout
+    layout,
+    schema
   });
   const queryContent = useTableData({
     schema,
-    state,
-    startup
+    startup,
+    state
   });
   const selection = useTableSelection({
-    schema,
-    queryContent
+    queryContent,
+    schema
   });
   const controls = useTableControls({
-    schema,
-    layout
+    layout,
+    schema
   });
   const filters = useTableFilters({
+    queryContent,
     schema,
-    state,
-    queryContent
+    state
   });
   const filterPresentation = useTableFilterPresentation({
     filters
   });
   const grid = useTableGrid({
-    schema,
-    data: queryContent.data
+    data: queryContent.data,
+    schema
   });
   const tableColumns = useTableColumns({
-    schema,
-    state,
     data: queryContent,
+    schema,
     selection,
-    tableLayout: controls.tableLayout,
-    tableApi
+    state,
+    tableApi,
+    tableLayout: controls.tableLayout
   });
-  const pagination = useTablePagination({
+  const summaries = useTableSummaries({
+    queryContent,
+    runtimeColumns: tableColumns.runtimeColumns,
     schema,
+    selection
+  });
+  const pagination = useTablePagination({
     layout,
-    state,
-    queryContent
+    queryContent,
+    schema,
+    state
   });
   tableApi.value = useTableApi({
-    runtimeSchema: schema,
-    layout,
-    state,
-    selection,
-    controls,
     columns: tableColumns,
+    controls,
     filters,
+    layout,
     pagination,
-    queryContent
+    publicSchema,
+    queryContent,
+    runtimeSchema: schema,
+    selection,
+    state
   });
-  if (!tableApi.value) throw new Error("Failed to initialize table API");
-  return {
+  if (!tableApi.value) {
+    throw new Error("Failed to initialize table API");
+  }
+  const actions = useTableActions({
+    queryContent,
     schema,
+    selection,
+    tableApi
+  });
+  return {
+    actions,
+    controls,
+    filterPresentation,
+    filters,
+    grid,
     layout,
-    startup,
+    pagination,
+    queryContent,
     queryState: state.queryState,
     resolvedFilterState: state.resolvedFilterState,
-    queryContent,
-    tableApi: tableApi.value,
+    schema,
     selection,
-    filters,
-    filterPresentation,
-    grid,
-    controls,
-    tableColumns,
-    pagination
+    startup,
+    summaries,
+    tableApi: tableApi.value,
+    tableColumns
   };
 }
 const TABLE_INTERNALS_KEY = Symbol("nuxt-ui-tools.table.internals");
@@ -101,7 +120,9 @@ function useProvideTableInternals(options) {
 }
 function useTableInternals() {
   const internals = inject(TABLE_INTERNALS_KEY, null);
-  if (!internals) throw new Error("useTableInternals must be called inside a <DataList> component");
+  if (!internals) {
+    throw new Error("useTableInternals must be called inside a <DataList> component");
+  }
   return internals;
 }
 export { createTableInternals, provideTableInternals, useProvideTableInternals, useTableInternals };

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

@@ -1,11 +1,11 @@
-import { type ComputedRef } from 'vue';
-import type { TableSchemaView } from '../types/index.js';
+import type { ComputedRef } from 'vue';
+import type { TableLayout, TableSchemaView } from '../types/index.js';
 interface UseTableLayoutParams {
     schema: ComputedRef<TableSchemaView>;
 }
 export declare function useTableLayout({ schema }: UseTableLayoutParams): {
-    activeLayout: import("vue").WritableComputedRef<"table" | "grid", "table" | "grid">;
-    gridEnabled: ComputedRef<string | boolean | (() => boolean | string) | null>;
-    tableEnabled: ComputedRef<string | boolean | (() => boolean | string) | null>;
+    activeLayout: import("vue").WritableComputedRef<TableLayout, TableLayout>;
+    gridEnabled: ComputedRef<boolean>;
+    tableEnabled: ComputedRef<boolean>;
 };
 export {};

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

@@ -1,31 +1,50 @@
-import { computed, watch } from "vue";
+import { computed } from "vue";
 import { useQueryState, createEnumCodec } from "#ui-tools/query-state";
 import { useResponsiveValue } from "#ui-tools/shared";
+import { isFunction } from "../../shared/utils/predicate.js";
+import { syncViewportBreakpoint } from "./use-data-list-breakpoint.js";
+function resolveEnabled(value, fallback) {
+  const resolved = isFunction(value) ? value() : value;
+  return resolved ?? fallback;
+}
 export function useTableLayout({ schema }) {
+  syncViewportBreakpoint();
   const defaultLayout = computed(() => schema.value.defaultLayout ?? "table");
-  const gridEnabled = useResponsiveValue(
-    () => schema.value.grid?.enabled ?? Boolean(schema.value.grid)
+  const gridEnabledRaw = useResponsiveValue(
+    () => String(resolveEnabled(schema.value.grid?.enabled, Boolean(schema.value.grid))),
+    "boolean"
   );
-  const tableEnabled = useResponsiveValue(
-    () => schema.value.table?.enabled ?? Boolean(schema.value.table)
+  const tableEnabledRaw = useResponsiveValue(
+    () => String(resolveEnabled(schema.value.table?.enabled, Boolean(schema.value.table))),
+    "boolean"
   );
+  const gridEnabled = computed(() => gridEnabledRaw.value ?? Boolean(schema.value.grid));
+  const tableEnabled = computed(() => tableEnabledRaw.value ?? Boolean(schema.value.table));
   const activeLayout = useQueryState({
-    key: "l",
     codec: createEnumCodec(["grid", "table"]),
     defaultValue: defaultLayout.value,
+    key: "l",
     omitDefault: true
   });
-  watch(
-    [gridEnabled, tableEnabled, defaultLayout],
-    ([grid, table, fallbackLayout]) => {
-      if (!grid && activeLayout.value === "grid") activeLayout.value = "table";
-      if (!table && activeLayout.value === "table") activeLayout.value = "grid";
-      if (!grid && !table) activeLayout.value = fallbackLayout;
+  const effectiveLayout = computed({
+    get: () => {
+      const grid = gridEnabled.value;
+      const table = tableEnabled.value;
+      const chosen = activeLayout.value;
+      if (chosen === "grid" && !grid && table) {
+        return "table";
+      }
+      if (chosen === "table" && !table && grid) {
+        return "grid";
+      }
+      return chosen;
     },
-    { immediate: true }
-  );
+    set: (layout) => {
+      activeLayout.value = layout;
+    }
+  });
   return {
-    activeLayout,
+    activeLayout: effectiveLayout,
     gridEnabled,
     tableEnabled
   };

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

@@ -1,4 +1,4 @@
-import { type ComputedRef } from 'vue';
+import type { ComputedRef } from 'vue';
 import type { TableSchemaView } from '../types/index.js';
 import type { useTableData } from './use-table-data.js';
 import type { useTableLayout } from './use-table-layout.js';
@@ -10,33 +10,56 @@ export interface UseTablePaginationParams {
     queryContent: ReturnType<typeof useTableData>;
 }
 export declare function useTablePagination(options: UseTablePaginationParams): {
-    mode: ComputedRef<"offset" | "cursor" | "none">;
-    rowCount: ComputedRef<number | null>;
-    loadedCount: ComputedRef<number>;
-    currentPage: ComputedRef<number>;
-    pageSize: ComputedRef<number>;
-    totalPages: ComputedRef<number>;
-    canPreviousPage: ComputedRef<boolean>;
     canNextPage: ComputedRef<boolean>;
+    canPreviousPage: ComputedRef<boolean>;
+    currentPage: ComputedRef<number>;
+    cursorState: ComputedRef<{
+        hasNextPage: boolean;
+        isLoadingMore: boolean;
+        loadMoreError: unknown;
+        loadedCount: number;
+        mode: "cursor";
+        totalCount: number | null;
+    }>;
     isLoadingMore: ComputedRef<boolean>;
+    loadMore: () => Promise<import("@tanstack/vue-query").InfiniteQueryObserverRefetchErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverSuccessResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverLoadingErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPendingResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPlaceholderResult<unknown, unknown> | undefined>;
     loadMoreError: ComputedRef<unknown>;
-    state: ComputedRef<{
-        mode: "offset" | "cursor" | "none";
-        pageIndex: number;
-        pageSize: number;
-        pageCount: number;
+    loadedCount: ComputedRef<number>;
+    mode: ComputedRef<"none" | "offset" | "cursor">;
+    next: () => void;
+    noneState: ComputedRef<{
         loadedCount: number;
+        mode: "none";
         totalCount: number | null;
+    }>;
+    offsetState: ComputedRef<{
         hasNextPage: boolean;
         hasPreviousPage: boolean;
-        isLoadingMore: boolean;
-        loadMoreError: unknown;
+        loadedCount: number;
+        mode: "offset";
+        pageCount: number;
+        pageIndex: number;
+        pageSize: number;
+        totalCount: number;
     }>;
+    pageSize: ComputedRef<number>;
     pageSizeOptions: ComputedRef<number[]>;
-    setPage: (page: number) => void;
-    setPageSize: (nextPageSize: number) => void;
-    next: () => void;
     previous: () => void;
     reset: () => void;
-    loadMore: () => Promise<import("@tanstack/vue-query").InfiniteQueryObserverRefetchErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverSuccessResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverLoadingErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPendingResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPlaceholderResult<unknown, unknown> | undefined>;
+    rowCount: ComputedRef<number | null>;
+    setPage: (page: number) => void;
+    setPageSize: (nextPageSize: number) => void;
+    state: ComputedRef<{
+        hasNextPage: boolean;
+        hasPreviousPage: boolean;
+        isLoadingMore: boolean;
+        loadMoreError: unknown;
+        loadedCount: number;
+        mode: "none" | "offset" | "cursor";
+        pageCount: number;
+        pageIndex: number;
+        pageSize: number;
+        totalCount: number | null;
+    }>;
+    totalPages: ComputedRef<number>;
 };

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

@@ -13,7 +13,9 @@ export function useTablePagination(options) {
   });
   const pageSize = computed(() => {
     const pagination = options.state.queryState.pagination.value;
-    if (pagination.mode === "none") return Math.max(1, loadedCount.value);
+    if (pagination.mode === "none") {
+      return Math.max(1, loadedCount.value);
+    }
     return pagination.pageSize;
   });
   const totalPages = computed(
@@ -21,8 +23,12 @@ export function useTablePagination(options) {
   );
   const canPreviousPage = computed(() => mode.value === "offset" && currentPage.value > 1);
   const canNextPage = computed(() => {
-    if (mode.value === "cursor") return infiniteHasNextPage.value;
-    if (mode.value === "none") return false;
+    if (mode.value === "cursor") {
+      return infiniteHasNextPage.value;
+    }
+    if (mode.value === "none") {
+      return false;
+    }
     return currentPage.value < totalPages.value;
   });
   const infiniteHasNextPage = computed(() => options.queryContent.infiniteQuery.hasNextPage.value);
@@ -31,39 +37,68 @@ export function useTablePagination(options) {
     () => options.queryContent.infiniteQuery.isFetchNextPageError.value ? options.queryContent.infiniteQuery.error.value : null
   );
   const state = computed(() => ({
+    hasNextPage: canNextPage.value,
+    hasPreviousPage: canPreviousPage.value,
+    isLoadingMore: isLoadingMore.value,
+    loadMoreError: loadMoreError.value,
+    loadedCount: loadedCount.value,
     mode: mode.value,
+    pageCount: totalPages.value,
     pageIndex: currentPage.value,
     pageSize: pageSize.value,
-    pageCount: totalPages.value,
-    loadedCount: loadedCount.value,
-    totalCount: rowCount.value,
+    totalCount: rowCount.value
+  }));
+  const offsetState = computed(() => ({
     hasNextPage: canNextPage.value,
     hasPreviousPage: canPreviousPage.value,
+    loadedCount: loadedCount.value,
+    mode: "offset",
+    pageCount: totalPages.value,
+    pageIndex: currentPage.value,
+    pageSize: pageSize.value,
+    totalCount: rowCount.value ?? loadedCount.value
+  }));
+  const cursorState = computed(() => ({
+    hasNextPage: canNextPage.value,
     isLoadingMore: isLoadingMore.value,
-    loadMoreError: loadMoreError.value
+    loadMoreError: loadMoreError.value,
+    loadedCount: loadedCount.value,
+    mode: "cursor",
+    totalCount: rowCount.value
+  }));
+  const noneState = computed(() => ({
+    loadedCount: loadedCount.value,
+    mode: "none",
+    totalCount: rowCount.value
   }));
   const pageSizeOptions = computed(
     () => getPageSizeOptions({
-      schema: options.schema.value,
-      layout: options.layout.activeLayout.value
+      layout: options.layout.activeLayout.value,
+      schema: options.schema.value
     })
   );
   const compatiblePageSize = computed(() => {
-    if (pageSizeOptions.value.includes(pageSize.value)) return pageSize.value;
+    if (pageSizeOptions.value.includes(pageSize.value)) {
+      return pageSize.value;
+    }
     return getDefaultPageSize({
-      schema: options.schema.value,
-      layout: options.layout.activeLayout.value
+      layout: options.layout.activeLayout.value,
+      schema: options.schema.value
     });
   });
   function setPage(page) {
-    if (mode.value !== "offset") return;
+    if (mode.value !== "offset") {
+      return;
+    }
     options.state.queryState.setOffsetPagination({
       pageIndex: Math.max(1, Math.min(page, totalPages.value)),
       pageSize: pageSize.value
     });
   }
   function setPageSize(nextPageSize) {
-    if (mode.value !== "offset") return;
+    if (mode.value !== "offset") {
+      return;
+    }
     options.state.queryState.setOffsetPagination({ pageIndex: 1, pageSize: nextPageSize });
   }
   function next() {
@@ -76,15 +111,23 @@ export function useTablePagination(options) {
     options.state.queryState.resetPagination();
   }
   async function loadMore() {
-    if (mode.value !== "cursor" || !infiniteHasNextPage.value || isLoadingMore.value) return;
+    if (mode.value !== "cursor" || !infiniteHasNextPage.value || isLoadingMore.value) {
+      return;
+    }
     return options.queryContent.infiniteQuery.fetchNextPage();
   }
   watch(
     [pageSizeOptions, compatiblePageSize],
     ([optionsList, nextPageSize]) => {
-      if (mode.value !== "offset") return;
-      if (optionsList.includes(pageSize.value)) return;
-      if (nextPageSize === pageSize.value) return;
+      if (mode.value !== "offset") {
+        return;
+      }
+      if (optionsList.includes(pageSize.value)) {
+        return;
+      }
+      if (nextPageSize === pageSize.value) {
+        return;
+      }
       setPageSize(nextPageSize);
     },
     { immediate: true }
@@ -99,29 +142,34 @@ export function useTablePagination(options) {
         stableRemoteRowCount.value = nextRowCount;
         return;
       }
-      if (isFetching) return;
+      if (isFetching) {
+        return;
+      }
       stableRemoteRowCount.value = nextRowCount;
     },
     { immediate: true }
   );
   return {
-    mode,
-    rowCount,
-    loadedCount,
-    currentPage,
-    pageSize,
-    totalPages,
-    canPreviousPage,
     canNextPage,
+    canPreviousPage,
+    currentPage,
+    cursorState,
     isLoadingMore,
+    loadMore,
     loadMoreError,
-    state,
-    pageSizeOptions,
-    setPage,
-    setPageSize,
+    loadedCount,
+    mode,
     next,
+    noneState,
+    offsetState,
+    pageSize,
+    pageSizeOptions,
     previous,
     reset,
-    loadMore
+    rowCount,
+    setPage,
+    setPageSize,
+    state,
+    totalPages
   };
 }

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

@@ -1,5 +1,5 @@
-import { type ComputedRef } from 'vue';
-import type { GenericObject, TableRowActionContext } from '../types/index.js';
-export type TableInjectedRowActionScope = TableRowActionContext<GenericObject, Record<string, unknown>, Record<string, unknown>>;
+import type { ComputedRef } from 'vue';
+import type { GenericObject, TableRowActionContext, TableRuntimeRecord } from '../types/index.js';
+export type TableInjectedRowActionScope = TableRowActionContext<GenericObject, TableRuntimeRecord, TableRuntimeRecord>;
 export declare function provideTableRowActionScope(scope: ComputedRef<TableInjectedRowActionScope>): void;
 export declare function useTableRowActionScope(): ComputedRef<TableInjectedRowActionScope> | null;

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

@@ -1,4 +1,4 @@
-import { type ComputedRef } from 'vue';
+import type { ComputedRef } from 'vue';
 import type { TableSchemaView } from '../types/index.js';
 import type { useQueryState } from './use-query-state.js';
 export interface UseTableSearchParams {
@@ -6,7 +6,7 @@ export interface UseTableSearchParams {
     queryState: ReturnType<typeof useQueryState>;
 }
 export declare function useTableSearch(options: UseTableSearchParams): {
-    searchQuery: import("vue").WritableComputedRef<string, string>;
-    searchPlaceholder: ComputedRef<string>;
     hasActiveSearch: ComputedRef<boolean>;
+    searchPlaceholder: ComputedRef<string>;
+    searchQuery: import("vue").WritableComputedRef<string, string>;
 };

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

@@ -13,14 +13,14 @@ export function useTableSearch(options) {
   });
   const searchPlaceholder = computed(
     () => getFilterTextValue({
-      value: options.schema.value.filters?.search?.placeholder,
-      fallback: "Search rows\u2026"
+      fallback: "Search rows\u2026",
+      value: options.schema.value.filters?.search?.placeholder
     })
   );
   const hasActiveSearch = computed(() => searchQuery.value.trim().length > 0);
   return {
-    searchQuery,
+    hasActiveSearch,
     searchPlaceholder,
-    hasActiveSearch
+    searchQuery
   };
 }

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

@@ -1,4 +1,4 @@
-import { type ComputedRef } from 'vue';
+import type { ComputedRef } from 'vue';
 import type { GenericObject, TableSchemaView } from '../types/index.js';
 import type { useTableData } from './use-table-data.js';
 export interface UseTableSelectionParams {
@@ -6,16 +6,9 @@ export interface UseTableSelectionParams {
     queryContent: ReturnType<typeof useTableData>;
 }
 export declare function useTableSelection(options: UseTableSelectionParams): {
-    selectionEnabled: ComputedRef<boolean>;
-    rowSelection: import("vue").WritableComputedRef<{
-        [k: string]: boolean;
-    }, Record<string, boolean> | undefined>;
-    selectedKeys: import("vue").Ref<string[], string[]>;
-    selectedRows: ComputedRef<object[]>;
-    selectedCount: ComputedRef<number>;
     allSelected: ComputedRef<boolean>;
-    partiallySelected: ComputedRef<boolean>;
-    lastTouchedRowId: import("vue").Ref<string | null, string | null>;
+    bulkScope: import("vue").Ref<"selection" | "all", "selection" | "all">;
+    clearSelection: () => void;
     getRowId: (params: {
         row: GenericObject;
         index?: number;
@@ -23,17 +16,23 @@ export declare function useTableSelection(options: UseTableSelectionParams): {
     isRowSelected: (params: {
         rowId: string;
     }) => boolean;
-    setRowSelection: (params: {
-        selection: Record<string, boolean>;
-    }) => void;
+    lastTouchedRowId: import("vue").Ref<string | null, string | null>;
+    partiallySelected: ComputedRef<boolean>;
+    rowSelection: import("vue").WritableComputedRef<{
+        [k: string]: boolean;
+    }, Record<string, boolean> | undefined>;
+    selectAllRows: () => void;
     selectRows: (params: {
         rowIds: string[];
     }) => void;
-    unselectRows: (params: {
-        rowIds: string[];
+    selectedCount: ComputedRef<number>;
+    selectedKeys: import("vue").Ref<string[], string[]>;
+    selectedRows: ComputedRef<object[]>;
+    selectionEnabled: ComputedRef<boolean>;
+    setBulkScope: (scope: "selection" | "all") => void;
+    setRowSelection: (params: {
+        selection: Record<string, boolean>;
     }) => void;
-    clearSelection: () => void;
-    selectAllRows: () => void;
     toggleAllRows: (params: {
         selected: boolean;
     }) => void;
@@ -42,4 +41,7 @@ export declare function useTableSelection(options: UseTableSelectionParams): {
         selected?: boolean;
         shiftKey?: boolean;
     }) => void;
+    unselectRows: (params: {
+        rowIds: string[];
+    }) => void;
 };