nuxt-ui-tools 0.1.3 → 1.0.1

package/dist/runtime/table/utils/columns/state.d.ts

@@ -1,40 +1,40 @@
 import type { TableSchemaView } from '../../types/index.js';
-import { type TableColumnState } from './types.js';
+import type { TableColumnState } from './types.js';
 export declare function createDefaultColumnState(): {
     columnOrder: never[];
-    columnVisibility: {};
     columnPinning: {
         left: string[];
         right: never[];
     };
     columnSizing: {};
     columnSizingInfo: {
-        startOffset: null;
-        startSize: null;
+        columnSizingStart: never[];
         deltaOffset: null;
         deltaPercentage: null;
         isResizingColumn: false;
-        columnSizingStart: Array<[string, number]>;
+        startOffset: null;
+        startSize: null;
     };
+    columnVisibility: {};
     sorting: never[];
 };
 export declare function syncColumnState(options: {
     schema: TableSchemaView;
-    runtimeColumns: Array<{
+    runtimeColumns: {
         id: string;
         defaultVisible: boolean;
         pinned?: 'left' | 'right';
-    }>;
+    }[];
     currentState: TableColumnState;
 }): {
     columnOrder: string[];
-    columnVisibility: {
-        [k: string]: boolean;
-    };
     columnPinning: {
         left: string[];
         right: string[];
     };
+    columnVisibility: {
+        [k: string]: boolean;
+    };
     columnSizing: Record<string, number>;
     columnSizingInfo: {
         startOffset: number | null;
@@ -42,12 +42,12 @@ export declare function syncColumnState(options: {
         deltaOffset: number | null;
         deltaPercentage: number | null;
         isResizingColumn: false | string;
-        columnSizingStart: Array<[string, number]>;
+        columnSizingStart: [string, number][];
     };
-    sorting: Array<{
+    sorting: {
         id: string;
         desc: boolean;
-    }>;
+    }[];
 };
 export declare function syncSortingState(options: {
     currentState: TableColumnState;
@@ -57,8 +57,8 @@ export declare function syncSortingState(options: {
     } | null | undefined;
 }): {
     sorting: {
-        id: string;
         desc: boolean;
+        id: string;
     }[];
     columnOrder: string[];
     columnVisibility: Record<string, boolean>;
@@ -73,7 +73,7 @@ export declare function syncSortingState(options: {
         deltaOffset: number | null;
         deltaPercentage: number | null;
         isResizingColumn: false | string;
-        columnSizingStart: Array<[string, number]>;
+        columnSizingStart: [string, number][];
     };
 };
 export declare function updateColumnVisibilityState(options: {
@@ -81,13 +81,13 @@ export declare function updateColumnVisibilityState(options: {
     columnId: string;
     visible: boolean;
 }): {
-    columnVisibility: {
-        [x: string]: boolean;
-    };
     columnPinning: {
         left: string[];
         right: string[];
     };
+    columnVisibility: {
+        [x: string]: boolean;
+    };
     columnOrder: string[];
     columnSizing: Record<string, number>;
     columnSizingInfo: {
@@ -96,12 +96,12 @@ export declare function updateColumnVisibilityState(options: {
         deltaOffset: number | null;
         deltaPercentage: number | null;
         isResizingColumn: false | string;
-        columnSizingStart: Array<[string, number]>;
+        columnSizingStart: [string, number][];
     };
-    sorting: Array<{
+    sorting: {
         id: string;
         desc: boolean;
-    }>;
+    }[];
 };
 export declare function updateColumnPinningState(options: {
     currentState: TableColumnState;
@@ -121,12 +121,12 @@ export declare function updateColumnPinningState(options: {
         deltaOffset: number | null;
         deltaPercentage: number | null;
         isResizingColumn: false | string;
-        columnSizingStart: Array<[string, number]>;
+        columnSizingStart: [string, number][];
     };
-    sorting: Array<{
+    sorting: {
         id: string;
         desc: boolean;
-    }>;
+    }[];
 };
 export declare function updateColumnOrderState(options: {
     currentState: TableColumnState;
@@ -145,43 +145,43 @@ export declare function updateColumnOrderState(options: {
         deltaOffset: number | null;
         deltaPercentage: number | null;
         isResizingColumn: false | string;
-        columnSizingStart: Array<[string, number]>;
+        columnSizingStart: [string, number][];
     };
-    sorting: Array<{
+    sorting: {
         id: string;
         desc: boolean;
-    }>;
+    }[];
 };
 export declare function createResetColumnState(options: {
     schema: TableSchemaView;
-    runtimeColumns: Array<{
+    runtimeColumns: {
         id: string;
         defaultVisible: boolean;
         pinned?: 'left' | 'right';
-    }>;
+    }[];
     currentState: TableColumnState;
 }): {
     columnOrder: string[];
-    columnVisibility: {
-        [k: string]: boolean;
-    };
     columnPinning: {
         left: string[];
         right: string[];
     };
     columnSizing: {};
     columnSizingInfo: {
-        startOffset: null;
-        startSize: null;
+        columnSizingStart: never[];
         deltaOffset: null;
         deltaPercentage: null;
         isResizingColumn: false;
-        columnSizingStart: Array<[string, number]>;
+        startOffset: null;
+        startSize: null;
     };
-    sorting: Array<{
+    columnVisibility: {
+        [k: string]: boolean;
+    };
+    sorting: {
         id: string;
         desc: boolean;
-    }>;
+    }[];
 };
 export declare function getPinnedState(options: {
     currentState: TableColumnState;

package/dist/runtime/table/utils/columns/state.js

@@ -3,17 +3,17 @@ import { ROW_ACTIONS_COLUMN_ID, SELECT_COLUMN_ID } from "./types.js";
 export function createDefaultColumnState() {
   return {
     columnOrder: [],
-    columnVisibility: {},
     columnPinning: { left: [SELECT_COLUMN_ID], right: [] },
     columnSizing: {},
     columnSizingInfo: {
-      startOffset: null,
-      startSize: null,
+      columnSizingStart: [],
       deltaOffset: null,
       deltaPercentage: null,
       isResizingColumn: false,
-      columnSizingStart: []
+      startOffset: null,
+      startSize: null
     },
+    columnVisibility: {},
     sorting: []
   };
 }
@@ -37,19 +37,19 @@ export function syncColumnState(options) {
   return {
     ...options.currentState,
     columnOrder: nextColumnOrder,
-    columnVisibility: nextVisibility,
     columnPinning: sanitizeColumnPinning({
-      schema: options.schema,
+      currentPinning: options.currentState.columnPinning,
       runtimeColumns: options.runtimeColumns,
-      visibleColumnIds,
-      currentPinning: options.currentState.columnPinning
-    })
+      schema: options.schema,
+      visibleColumnIds
+    }),
+    columnVisibility: nextVisibility
   };
 }
 export function syncSortingState(options) {
   return {
     ...options.currentState,
-    sorting: options.sorting?.sortKey ? [{ id: options.sorting.sortKey, desc: options.sorting.sortDirection === "desc" }] : []
+    sorting: options.sorting?.sortKey ? [{ desc: options.sorting.sortDirection === "desc", id: options.sorting.sortKey }] : []
   };
 }
 export function updateColumnVisibilityState(options) {
@@ -61,10 +61,6 @@ export function updateColumnVisibilityState(options) {
   );
   return {
     ...options.currentState,
-    columnVisibility: {
-      ...options.currentState.columnVisibility,
-      [options.columnId]: options.visible
-    },
     columnPinning: {
       left: uniqueColumnIds({
         columnIds: [SELECT_COLUMN_ID, ...left.filter((id) => id !== SELECT_COLUMN_ID)]
@@ -72,6 +68,10 @@ export function updateColumnVisibilityState(options) {
       right: normalizeRightPinnedIds({
         columnIds: right.filter((id) => id !== SELECT_COLUMN_ID)
       })
+    },
+    columnVisibility: {
+      ...options.currentState.columnVisibility,
+      [options.columnId]: options.visible
     }
   };
 }
@@ -111,18 +111,15 @@ export function createResetColumnState(options) {
   return {
     ...options.currentState,
     columnOrder: options.runtimeColumns.map((column) => column.id),
-    columnVisibility: Object.fromEntries(
-      options.runtimeColumns.map((column) => [column.id, column.defaultVisible])
-    ),
     columnPinning: {
       left: uniqueColumnIds({
         columnIds: [
           SELECT_COLUMN_ID,
           ...options.runtimeColumns.filter(
             (column) => resolvePinnedSide({
-              schema: options.schema,
               columnId: column.id,
-              pinned: column.pinned
+              pinned: column.pinned,
+              schema: options.schema
             }) === "left"
           ).map((column) => column.id)
         ]
@@ -130,15 +127,18 @@ export function createResetColumnState(options) {
       right: normalizeRightPinnedIds({
         columnIds: options.runtimeColumns.filter(
           (column) => resolvePinnedSide({
-            schema: options.schema,
             columnId: column.id,
-            pinned: column.pinned
+            pinned: column.pinned,
+            schema: options.schema
           }) === "right"
         ).map((column) => column.id)
       })
     },
     columnSizing: {},
-    columnSizingInfo: createDefaultColumnState().columnSizingInfo
+    columnSizingInfo: createDefaultColumnState().columnSizingInfo,
+    columnVisibility: Object.fromEntries(
+      options.runtimeColumns.map((column) => [column.id, column.defaultVisible])
+    )
   };
 }
 export function getPinnedState(options) {
@@ -151,20 +151,18 @@ export function getPinnedState(options) {
   return null;
 }
 function sanitizeColumnPinning(options) {
-  const columnIds = options.runtimeColumns.map((column) => column.id);
+  const columnIds = new Set(options.runtimeColumns.map((column) => column.id));
   const pinnedLeft = uniqueColumnIds({
     columnIds: [
       SELECT_COLUMN_ID,
       ...options.runtimeColumns.filter(
         (column) => resolvePinnedSide({
-          schema: options.schema,
           columnId: column.id,
-          pinned: column.pinned
+          pinned: column.pinned,
+          schema: options.schema
         }) === "left"
       ).map((column) => column.id),
-      ...(options.currentPinning?.left ?? []).filter(
-        (columnId) => columnIds.includes(columnId)
-      )
+      ...(options.currentPinning?.left ?? []).filter((columnId) => columnIds.has(columnId))
     ]
   }).filter(
     (columnId) => columnId === SELECT_COLUMN_ID || options.visibleColumnIds.includes(columnId)
@@ -174,14 +172,12 @@ function sanitizeColumnPinning(options) {
       columnIds: [
         ...options.runtimeColumns.filter(
           (column) => resolvePinnedSide({
-            schema: options.schema,
             columnId: column.id,
-            pinned: column.pinned
+            pinned: column.pinned,
+            schema: options.schema
           }) === "right"
         ).map((column) => column.id),
-        ...(options.currentPinning?.right ?? []).filter(
-          (columnId) => columnIds.includes(columnId)
-        )
+        ...(options.currentPinning?.right ?? []).filter((columnId) => columnIds.has(columnId))
       ]
     }).filter(
       (columnId) => options.visibleColumnIds.includes(columnId) && !pinnedLeft.includes(columnId)
@@ -193,12 +189,14 @@ function sanitizeColumnPinning(options) {
   };
 }
 function resolvePinnedSide(options) {
-  return options.pinned ?? findSchemaColumn({ schema: options.schema, columnId: options.columnId })?.pinned;
+  return options.pinned ?? findSchemaColumn({ columnId: options.columnId, schema: options.schema })?.pinned;
 }
 function normalizeRightPinnedIds(options) {
   const ids = uniqueColumnIds({
     columnIds: options.columnIds.filter((id) => id !== SELECT_COLUMN_ID)
   });
-  if (!ids.includes(ROW_ACTIONS_COLUMN_ID)) return ids;
+  if (!ids.includes(ROW_ACTIONS_COLUMN_ID)) {
+    return ids;
+  }
   return [...ids.filter((id) => id !== ROW_ACTIONS_COLUMN_ID), ROW_ACTIONS_COLUMN_ID];
 }

package/dist/runtime/table/utils/columns/types.d.ts

@@ -1,21 +1,29 @@
 import type { ComputedRef, ShallowRef } from 'vue';
 import type { UseTableDataReturn } from '../../composables/use-table-data.js';
 import type { useTableState } from '../../composables/use-table-state.js';
-import type { TableApi, TableColumnPinned, GenericObject, TableLayout, TableSchemaView } from '../../types/index.js';
+import type { TableApi, TableColumnAlign, TableColumnPinned, GenericObject, TableLayout, TableSchemaView, TableRuntimeRecord, TableColumnSkeleton, TableColumnSummary } from '../../types/index.js';
 export declare const SELECT_COLUMN_ID = "__select";
-export declare const SELECT_COLUMN_WIDTH = 56;
+export declare const SELECT_COLUMN_WIDTH = 44;
 export declare const ROW_ACTIONS_COLUMN_ID = "__row-actions";
-export declare const ROW_ACTIONS_COLUMN_WIDTH = 52;
+export declare const ROW_ACTIONS_COLUMN_WIDTH = 56;
 export type SchemaTableColumn = NonNullable<NonNullable<TableSchemaView['table']>['columns']>[number];
 export interface TableRuntimeColumn {
     id: string;
     label: string;
     icon?: string;
+    width?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    align?: TableColumnAlign;
     sortableKey?: string;
     canHide: boolean;
     defaultVisible: boolean;
     configurable?: boolean;
     pinned?: TableColumnPinned;
+    summary?: TableColumnSummary;
+    ellipsis?: boolean;
+    skeleton?: TableColumnSkeleton;
+    lines?: number;
 }
 export interface TableColumnState {
     columnOrder: string[];
@@ -31,12 +39,12 @@ export interface TableColumnState {
         deltaOffset: number | null;
         deltaPercentage: number | null;
         isResizingColumn: false | string;
-        columnSizingStart: Array<[string, number]>;
+        columnSizingStart: [string, number][];
     };
-    sorting: Array<{
+    sorting: {
         id: string;
         desc: boolean;
-    }>;
+    }[];
 }
 export interface TableColumnsSelectionState {
     selectionEnabled: ComputedRef<boolean>;
@@ -54,6 +62,10 @@ export interface TableColumnsSelectionState {
     isRowSelected: (params: {
         rowId: string;
     }) => boolean;
+    getRowId: (params: {
+        row: GenericObject;
+        index?: number;
+    }) => string;
 }
 export interface UseTableColumnsParams {
     schema: ComputedRef<TableSchemaView>;
@@ -72,8 +84,37 @@ export interface TableColumnRenderParams {
 export interface TableCellRenderContext {
     row: GenericObject;
     index: number;
-    context: Record<string, unknown>;
-    pageContext: Record<string, unknown>;
+    context: TableRuntimeRecord;
+    pageContext: TableRuntimeRecord;
     tableApi: TableApi<unknown>;
     layout: TableLayout;
 }
+export type DataListColumnInternalKind = 'selection' | 'actions';
+export interface DataListColumnMeta {
+    label: string;
+    icon?: string;
+    align?: TableColumnAlign;
+    sortable: boolean;
+    sortableKey?: string;
+    canHide: boolean;
+    internal?: DataListColumnInternalKind;
+    ellipsis?: boolean;
+    skeleton?: TableColumnSkeleton;
+    lines?: number;
+    render: (params: {
+        row: GenericObject;
+        index: number;
+    }) => import('vue').VNodeChild;
+    renderHeader?: () => import('vue').VNodeChild;
+}
+export interface DataListColumnDef {
+    id: string;
+    size: number;
+    minSize: number;
+    maxSize: number;
+    enableResizing: boolean;
+    meta: DataListColumnMeta;
+}
+export declare const DEFAULT_COLUMN_SIZE = 150;
+export declare const MIN_COLUMN_SIZE = 64;
+export declare const MAX_COLUMN_SIZE = 900;

package/dist/runtime/table/utils/columns/types.js

@@ -1,4 +1,7 @@
 export const SELECT_COLUMN_ID = "__select";
-export const SELECT_COLUMN_WIDTH = 56;
+export const SELECT_COLUMN_WIDTH = 44;
 export const ROW_ACTIONS_COLUMN_ID = "__row-actions";
-export const ROW_ACTIONS_COLUMN_WIDTH = 52;
+export const ROW_ACTIONS_COLUMN_WIDTH = 56;
+export const DEFAULT_COLUMN_SIZE = 150;
+export const MIN_COLUMN_SIZE = 64;
+export const MAX_COLUMN_SIZE = 900;

package/dist/runtime/table/utils/cursor-query.d.ts

@@ -0,0 +1,2 @@
+import type { QueryKey } from '@tanstack/vue-query';
+export declare function createTableCursorQueryKey(queryKey: QueryKey, revision: number): unknown[];

package/dist/runtime/table/utils/cursor-query.js

@@ -0,0 +1,3 @@
+export function createTableCursorQueryKey(queryKey, revision) {
+  return [...queryKey, { tableCursorRevision: revision }];
+}

package/dist/runtime/table/utils/data-list-ui.d.ts

@@ -1,5 +1,127 @@
-import type { DataListDensity, DataListUiClass, DataListUiConfig } from '../types/index.js';
+import type { DataListControlSize, DataListContentSurface, DataListDensity, DataListPopoverSizing, DataListUiClass, DataListUiConfig } from '../types/index.js';
+/** Merges control prop layers: later layers win, nested control objects merge one level deep. */
+export declare function mergeDataListProps<TProps extends object>(...layers: (TProps | undefined)[]): TProps;
 /** Merges DataList slot classes with the same conflict resolution used by Nuxt UI. */
 export declare function mergeDataListUiClass(defaults?: DataListUiClass, root?: DataListUiClass, local?: DataListUiClass): string;
+/** Resolves a table popover sizing mode while constraining nested panels to its container. */
+export declare function resolveDataListPopoverContentClass(sizing: DataListPopoverSizing, local?: DataListUiClass): string;
+/** Maps a resolved control size to spacing, typography, and icon geometry. */
+export declare function resolveDataListControlGeometry(size: DataListControlSize): {
+    caption: string;
+    fieldGap: string;
+    floating: string;
+    footer: string;
+    icon: string;
+    listPadding: string;
+    panelGap: string;
+    panelPadding: string;
+    row: string;
+    smallIcon: string;
+    text: string;
+    toolbarGap: string;
+} | {
+    caption: string;
+    fieldGap: string;
+    floating: string;
+    footer: string;
+    icon: string;
+    listPadding: string;
+    panelGap: string;
+    panelPadding: string;
+    row: string;
+    smallIcon: string;
+    text: string;
+    toolbarGap: string;
+} | {
+    caption: string;
+    fieldGap: string;
+    floating: string;
+    footer: string;
+    icon: string;
+    listPadding: string;
+    panelGap: string;
+    panelPadding: string;
+    row: string;
+    smallIcon: string;
+    text: string;
+    toolbarGap: string;
+} | {
+    caption: string;
+    fieldGap: string;
+    floating: string;
+    footer: string;
+    icon: string;
+    listPadding: string;
+    panelGap: string;
+    panelPadding: string;
+    row: string;
+    smallIcon: string;
+    text: string;
+    toolbarGap: string;
+} | {
+    caption: string;
+    fieldGap: string;
+    floating: string;
+    footer: string;
+    icon: string;
+    listPadding: string;
+    panelGap: string;
+    panelPadding: string;
+    row: string;
+    smallIcon: string;
+    text: string;
+    toolbarGap: string;
+};
+/** Downsizes controls nested inside another control, such as preview badges in filter tags. */
+export declare function resolveDataListNestedControlSize(size: DataListControlSize): "sm" | "md" | "lg" | "xs";
+/** Maps the resolved DataList size to table header, row, cell, and skeleton geometry. */
+export declare function resolveDataListTableSize(size: DataListControlSize): {
+    cell: string;
+    header: string;
+    row: string;
+    rowHeight: number;
+} | {
+    cell: string;
+    header: string;
+    row: string;
+    rowHeight: number;
+} | {
+    cell: string;
+    header: string;
+    row: string;
+    rowHeight: number;
+} | {
+    cell: string;
+    header: string;
+    row: string;
+    rowHeight: number;
+} | {
+    cell: string;
+    header: string;
+    row: string;
+    rowHeight: number;
+};
+/** Maps the legacy density fallback to the equivalent table size geometry. */
+export declare function resolveDataListTableDensity(density: DataListDensity): {
+    cell: string;
+    header: string;
+    row: string;
+    rowHeight: number;
+} | {
+    cell: string;
+    header: string;
+    row: string;
+    rowHeight: number;
+} | {
+    cell: string;
+    header: string;
+    row: string;
+    rowHeight: number;
+};
+/** Resolves the boundary owned by assembled content versus a granular content part. */
+export declare function resolveDataListContentShellClass(options: {
+    layout: 'table' | 'grid';
+    surface: DataListContentSurface;
+}): "overflow-hidden" | "grid gap-5 overflow-hidden rounded-md border border-default bg-default" | "grid gap-5" | "overflow-hidden rounded-md border border-default bg-default";
 /** Merges application and root DataList defaults without losing nested UI slots. */
-export declare function mergeDataListUiConfig(appUi: DataListUiConfig | undefined, componentUi: DataListUiConfig | undefined, density: DataListDensity | undefined): DataListUiConfig;
+export declare function mergeDataListUiConfig(appUi: DataListUiConfig | undefined, componentUi: DataListUiConfig | undefined, density?: DataListDensity, size?: DataListControlSize): DataListUiConfig;