nuxt-ui-tools 0.1.3 → 1.0.0

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

@@ -1,12 +1,17 @@
-import { jsx, jsxs } from "vue/jsx-runtime";
-import UButton from "@nuxt/ui/components/Button.vue";
-import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
-import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
-import UIcon from "@nuxt/ui/components/Icon.vue";
-import RowActions from "../../components/actions/RowActions.vue";
-import TableRowScopeProvider from "../../components/actions/TableRowScopeProvider.vue";
-import TableCellEllipsis from "../../components/table/TableCellEllipsis.js";
-import { getColumnHeaderIcon } from "./menu.js";
+import { jsx } from "vue/jsx-runtime";
+import {
+  isArray,
+  isFunction,
+  isNumber,
+  isObject,
+  isString,
+  isNullish
+} from "../../../shared/utils/predicate.js";
+import TableRowScopeProvider from "../../components/actions/table-row-scope-provider.vue";
+import TableCellEllipsis from "../../components/table/table-cell-ellipsis.js";
+import TableColumnHeader from "../../components/table/table-column-header.vue";
+import TableRowActionsControl from "../../components/table/table-row-actions-control.vue";
+import TableSelectionControl from "../../components/table/table-selection-control.vue";
 import { findSchemaColumn } from "./schema.js";
 import {
   ROW_ACTIONS_COLUMN_ID,
@@ -17,75 +22,55 @@ import {
 const PLAIN_RENDER_CONTEXT_CACHE = /* @__PURE__ */ new WeakMap();
 export function createSelectionColumn(options) {
   return {
-    id: SELECT_COLUMN_ID,
-    header: () => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        class: "inline-flex items-center",
-        onClick: (event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          options.params.selection.toggleAllRows({
-            selected: !options.params.selection.allSelected.value
-          });
-        },
-        children: /* @__PURE__ */ jsx(
-          UCheckbox,
-          {
-            modelValue: options.params.selection.allSelected.value ? true : options.params.selection.partiallySelected.value ? "indeterminate" : false,
-            color: "neutral"
-          }
-        )
-      }
-    ),
-    cell: ({ row }) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        class: "inline-flex items-center",
-        onClick: (event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          const rowId = String(row.id);
-          options.params.selection.toggleRowSelection({
+    cell: ({ row }) => {
+      const rowId = String(row.id);
+      return /* @__PURE__ */ jsx(
+        TableSelectionControl,
+        {
+          modelValue: options.params.selection.isRowSelected({ rowId }),
+          ariaLabel: "Select row",
+          onToggle: (event) => options.params.selection.toggleRowSelection({
             rowId,
             selected: !options.params.selection.isRowSelected({ rowId }),
             shiftKey: event.shiftKey
-          });
-        },
-        children: /* @__PURE__ */ jsx(
-          UCheckbox,
-          {
-            modelValue: options.params.selection.isRowSelected({ rowId: String(row.id) }),
-            color: "neutral"
-          }
-        )
-      }
-    ),
-    size: SELECT_COLUMN_WIDTH,
-    enableSorting: false,
+          })
+        }
+      );
+    },
     enableHiding: false,
     enablePinning: true,
     enableResizing: false,
+    enableSorting: false,
+    header: () => /* @__PURE__ */ jsx(
+      TableSelectionControl,
+      {
+        modelValue: options.params.selection.allSelected.value ? true : options.params.selection.partiallySelected.value ? "indeterminate" : false,
+        ariaLabel: "Select all rows",
+        onToggle: () => options.params.selection.toggleAllRows({
+          selected: !options.params.selection.allSelected.value
+        })
+      }
+    ),
+    id: SELECT_COLUMN_ID,
     meta: {
       class: {
-        th: "w-14 px-4",
-        td: "w-14 px-4"
+        td: "w-14 px-4",
+        th: "w-14 px-4"
       },
       style: {
-        th: () => ({
-          width: `${SELECT_COLUMN_WIDTH}px`,
+        td: () => ({
+          maxWidth: `${SELECT_COLUMN_WIDTH}px`,
           minWidth: `${SELECT_COLUMN_WIDTH}px`,
-          maxWidth: `${SELECT_COLUMN_WIDTH}px`
+          width: `${SELECT_COLUMN_WIDTH}px`
         }),
-        td: () => ({
-          width: `${SELECT_COLUMN_WIDTH}px`,
+        th: () => ({
+          maxWidth: `${SELECT_COLUMN_WIDTH}px`,
           minWidth: `${SELECT_COLUMN_WIDTH}px`,
-          maxWidth: `${SELECT_COLUMN_WIDTH}px`
+          width: `${SELECT_COLUMN_WIDTH}px`
         })
       }
-    }
+    },
+    size: SELECT_COLUMN_WIDTH
   };
 }
 export function createDataColumns(options) {
@@ -96,183 +81,128 @@ export function createDataColumns(options) {
       });
     }
     const column = findSchemaColumn({
-      schema: options.params.schema.value,
-      columnId: runtimeColumn.id
+      columnId: runtimeColumn.id,
+      schema: options.params.schema.value
     });
     if (!column) {
       return null;
     }
     return {
-      id: runtimeColumn.id,
-      accessorFn: column.kind === "field" ? (row) => getPathValue({ row, path: column.field }) : void 0,
-      header: ({
-        column: tableColumn,
-        header
-      }) => /* @__PURE__ */ jsxs("div", { class: "group/column-header relative flex h-full w-full items-center", children: [
-        /* @__PURE__ */ jsx(
-          UDropdownMenu,
-          {
-            size: "sm",
-            items: options.getMenuItems({ columnId: runtimeColumn.id }),
-            content: { align: "start", side: "bottom", sideOffset: 10 },
-            modal: false,
-            ui: { content: "w-fit p-1 shadow-none" },
-            "v-slots": {
-              default: () => /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  class: "inline-flex h-8 min-w-0 max-w-full items-center gap-2 rounded-md px-2.5 text-left text-sm text-default transition-colors hover:bg-elevated",
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { class: "flex min-w-0 items-center gap-2.5", children: [
-                      runtimeColumn.icon ? /* @__PURE__ */ jsx(UIcon, { name: runtimeColumn.icon, class: "size-4 shrink-0 text-muted" }) : null,
-                      /* @__PURE__ */ jsx(
-                        TableCellEllipsis,
-                        {
-                          title: runtimeColumn.label,
-                          wrapperClass: "min-w-0 max-w-full",
-                          children: runtimeColumn.label
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      UIcon,
-                      {
-                        name: getColumnHeaderIcon({
-                          columnId: runtimeColumn.id,
-                          canHide: tableColumn.getCanHide?.(),
-                          getSortState: options.getSortState,
-                          getPinnedState: options.getPinnedState
-                        }),
-                        class: "size-4 shrink-0 text-muted"
-                      }
-                    ),
-                    options.getPinnedState({ columnId: runtimeColumn.id }) ? /* @__PURE__ */ jsx(UIcon, { name: "i-lucide-pin", class: "size-3.5 shrink-0 text-muted" }) : null
-                  ]
-                }
-              )
-            }
-          }
-        ),
-        column.resizable !== false ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-label": `Resize ${runtimeColumn.label} column`,
-            role: "separator",
-            class: [
-              "absolute inset-y-1 -right-1 z-20 w-3 cursor-col-resize touch-none select-none opacity-0",
-              "transition-opacity duration-150 after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:rounded-full after:content-['']",
-              header.getIsResizing?.() ? "opacity-100 after:bg-primary" : "group-hover/table-head:opacity-100 hover:opacity-100 after:bg-accented/70"
-            ],
-            onDblclick: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              tableColumn.resetSize?.();
-            },
-            onMousedown: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              header.getResizeHandler?.()(event);
-            },
-            onTouchstart: (event) => {
-              event.stopPropagation();
-              header.getResizeHandler?.()(event);
-            }
-          }
-        ) : null
-      ] }),
+      accessorFn: column.kind === "field" ? (row) => getPathValue({ path: column.field, row }) : void 0,
       cell: ({ row }) => renderColumnCell({
         column,
+        params: options.params,
         row: row.original,
-        rowIndex: row.index,
-        params: options.params
+        rowIndex: row.index
       }),
-      enableSorting: false,
       enableHiding: runtimeColumn.canHide,
       enablePinning: true,
       enableResizing: column.resizable !== false,
-      size: normalizeColumnSize({ size: column.width }),
-      minSize: normalizeColumnSize({ size: column.minWidth }) ?? 120,
+      enableSorting: false,
+      header: ({
+        column: tableColumn,
+        header
+      }) => /* @__PURE__ */ jsx(
+        TableColumnHeader,
+        {
+          label: runtimeColumn.label,
+          icon: runtimeColumn.icon,
+          sortable: Boolean(runtimeColumn.sortableKey),
+          sortState: options.getSortState({ columnId: runtimeColumn.id }),
+          pinned: Boolean(options.getPinnedState({ columnId: runtimeColumn.id })),
+          items: options.getMenuItems({ columnId: runtimeColumn.id }),
+          resizable: column.resizable !== false,
+          resizing: header.getIsResizing?.() ?? false,
+          resetSize: tableColumn.resetSize,
+          resize: header.getResizeHandler?.()
+        }
+      ),
+      id: runtimeColumn.id,
       maxSize: normalizeColumnSize({ size: column.maxWidth }),
       meta: {
         class: {
-          th: getColumnHeaderClass({ column }),
-          td: getColumnCellClass({ column })
+          td: getColumnCellClass({ column }),
+          th: getColumnHeaderClass({ column })
         },
         style: {
-          th: ({ column: headerColumn }) => ({
-            width: `${headerColumn.getSize()}px`,
-            minWidth: `${headerColumn.getSize()}px`,
-            maxWidth: `${headerColumn.getSize()}px`
-          }),
           td: ({ column: cellColumn }) => ({
-            width: `${cellColumn.getSize()}px`,
+            maxWidth: `${cellColumn.getSize()}px`,
             minWidth: `${cellColumn.getSize()}px`,
-            maxWidth: `${cellColumn.getSize()}px`
+            width: `${cellColumn.getSize()}px`
+          }),
+          th: ({ column: headerColumn }) => ({
+            maxWidth: `${headerColumn.getSize()}px`,
+            minWidth: `${headerColumn.getSize()}px`,
+            width: `${headerColumn.getSize()}px`
           })
         }
-      }
+      },
+      minSize: normalizeColumnSize({ size: column.minWidth }) ?? 120,
+      size: normalizeColumnSize({ size: column.width })
     };
   }).filter((column) => column !== null);
 }
 export function renderColumnCell(options) {
   const cellContext = createCellRenderContext({
+    params: options.params,
     row: options.row,
-    rowIndex: options.rowIndex,
-    params: options.params
+    rowIndex: options.rowIndex
   });
   if (options.column.kind === "field") {
     const value = getPathValue({
-      row: options.row,
-      path: options.column.field
+      path: options.column.field,
+      row: options.row
     });
     if (options.column.render) {
       return wrapRowScope({
-        scope: cellContext,
         content: wrapEllipsisContent({
           column: options.column,
+          // SAFETY: field-column render receives the schema-derived row/value context.
           content: options.column.render({
             ...cellContext,
+            // SAFETY: path resolution is checked by the schema field contract at column creation.
             value
           }),
           title: resolveEllipsisTitle({
             column: options.column,
+            fallbackValue: value,
             params: {
               ...cellContext,
               value
-            },
-            fallbackValue: value
+            }
           })
-        })
+        }),
+        scope: cellContext
       });
     }
     return wrapRowScope({
-      scope: cellContext,
       content: wrapEllipsisContent({
         column: options.column,
         content: formatCellValue({ value }),
         title: resolveEllipsisTitle({
           column: options.column,
+          fallbackValue: value,
           params: {
             ...cellContext,
             value
-          },
-          fallbackValue: value
+          }
         })
-      })
+      }),
+      scope: cellContext
     });
   }
   return wrapRowScope({
-    scope: cellContext,
     content: wrapEllipsisContent({
       column: options.column,
+      // SAFETY: composite/display render receives the schema-derived row context.
       content: options.column.render(cellContext),
       title: resolveEllipsisTitle({
         column: options.column,
-        params: cellContext,
-        fallbackValue: null
+        fallbackValue: null,
+        params: cellContext
       })
-    })
+    }),
+    scope: cellContext
   });
 }
 export function wrapEllipsisContent(options) {
@@ -297,84 +227,64 @@ export function getColumnCellClass(options) {
   ].filter(Boolean).join(" ");
 }
 export function normalizeColumnSize(options) {
-  if (typeof options.size === "number") {
+  if (isNumber(options.size)) {
     return options.size;
   }
-  if (typeof options.size === "string") {
+  if (isString(options.size)) {
     const parsed = Number.parseFloat(options.size);
     return Number.isFinite(parsed) ? parsed : void 0;
   }
-  return void 0;
 }
 function createCellRenderContext(options) {
   const tableApi = options.params.tableApi.value;
-  if (!tableApi) throw new Error("Table API is not ready");
+  if (!tableApi) {
+    throw new Error("Table API is not ready");
+  }
   const plainRenderContext = resolvePlainRenderContext(options.params);
   return {
-    row: options.row,
-    index: options.rowIndex,
     context: plainRenderContext.plainContext,
+    index: options.rowIndex,
+    layout: options.params.tableLayout.value,
     pageContext: plainRenderContext.plainPageContext,
-    tableApi,
-    layout: options.params.tableLayout.value
+    row: options.row,
+    tableApi
   };
 }
-function createRowActionsColumn(options) {
+export function createRowActionsColumn(options) {
   return {
-    id: ROW_ACTIONS_COLUMN_ID,
-    header: () => null,
     cell: ({ row }) => {
       const scope = createCellRenderContext({
+        params: options.params,
         row: row.original,
-        rowIndex: row.index,
-        params: options.params
+        rowIndex: row.index
       });
-      return /* @__PURE__ */ jsx(TableRowScopeProvider, { scope, children: /* @__PURE__ */ jsx("div", { class: "flex justify-end", children: /* @__PURE__ */ jsx(
-        RowActions,
-        {
-          size: "sm",
-          content: { align: "end", side: "bottom", sideOffset: 8 },
-          modal: false,
-          portal: true,
-          ui: { content: "z-[80] min-w-48" },
-          children: /* @__PURE__ */ jsx(
-            UButton,
-            {
-              color: "neutral",
-              variant: "ghost",
-              icon: "i-lucide-ellipsis-vertical",
-              size: "sm",
-              square: true,
-              "aria-label": "Row actions",
-              class: "bg-transparent text-muted shadow-none ring-0 hover:bg-accented/60 hover:text-default focus-visible:bg-accented/60 focus-visible:text-default"
-            }
-          )
-        }
-      ) }) });
+      return /* @__PURE__ */ jsx(TableRowScopeProvider, { scope, children: /* @__PURE__ */ jsx(TableRowActionsControl, {}) });
     },
-    size: ROW_ACTIONS_COLUMN_WIDTH,
-    enableSorting: false,
     enableHiding: false,
     enablePinning: true,
     enableResizing: false,
+    enableSorting: false,
+    header: () => null,
+    id: ROW_ACTIONS_COLUMN_ID,
     meta: {
       class: {
-        th: "w-13 px-2",
-        td: "w-13 px-2"
+        td: "w-13 px-2",
+        th: "w-13 px-2"
       },
       style: {
-        th: () => ({
-          width: `${ROW_ACTIONS_COLUMN_WIDTH}px`,
+        td: () => ({
+          maxWidth: `${ROW_ACTIONS_COLUMN_WIDTH}px`,
           minWidth: `${ROW_ACTIONS_COLUMN_WIDTH}px`,
-          maxWidth: `${ROW_ACTIONS_COLUMN_WIDTH}px`
+          width: `${ROW_ACTIONS_COLUMN_WIDTH}px`
         }),
-        td: () => ({
-          width: `${ROW_ACTIONS_COLUMN_WIDTH}px`,
+        th: () => ({
+          maxWidth: `${ROW_ACTIONS_COLUMN_WIDTH}px`,
           minWidth: `${ROW_ACTIONS_COLUMN_WIDTH}px`,
-          maxWidth: `${ROW_ACTIONS_COLUMN_WIDTH}px`
+          width: `${ROW_ACTIONS_COLUMN_WIDTH}px`
         })
       }
-    }
+    },
+    size: ROW_ACTIONS_COLUMN_WIDTH
   };
 }
 function wrapRowScope(options) {
@@ -384,8 +294,9 @@ function resolvePlainRenderContext(params) {
   const contextSource = params.data.contextData.value;
   const pageContextSource = params.data.pageContextData.value;
   const cached = PLAIN_RENDER_CONTEXT_CACHE.get(params);
-  if (cached && cached.contextSource === contextSource && cached.pageContextSource === pageContextSource)
+  if (cached && cached.contextSource === contextSource && cached.pageContextSource === pageContextSource) {
     return cached;
+  }
   const nextCache = {
     contextSource,
     pageContextSource,
@@ -402,39 +313,39 @@ function resolveEllipsisTitle(options) {
   if (!options.column.ellipsis) {
     return null;
   }
-  if (typeof options.column.ellipsis === "object" && options.column.ellipsis !== null) {
+  if (isObject(options.column.ellipsis)) {
     const title = "title" in options.column.ellipsis ? options.column.ellipsis.title : void 0;
     if (isEllipsisTitleResolver(title)) {
       return String(title(options.params));
     }
-    if (title != null) {
+    if (!isNullish(title)) {
       return String(title);
     }
   }
-  return options.fallbackValue == null ? null : String(options.fallbackValue);
+  return isNullish(options.fallbackValue) ? null : String(options.fallbackValue);
 }
 function isEllipsisTitleResolver(value) {
-  return typeof value === "function";
+  return isFunction(value);
 }
 function formatCellValue(options) {
-  if (options.value == null) {
+  if (isNullish(options.value)) {
     return "\u2014";
   }
   if (options.value instanceof Date) {
     return options.value.toLocaleString();
   }
-  if (Array.isArray(options.value)) {
+  if (isArray(options.value)) {
     return options.value.join(", ");
   }
-  if (typeof options.value === "object") {
+  if (isObject(options.value)) {
     return JSON.stringify(options.value);
   }
   return String(options.value);
 }
 function getPathValue(options) {
   return options.path.split(".").reduce((value, key) => {
-    if (value == null || typeof value !== "object") {
-      return void 0;
+    if (!isObject(value)) {
+      return;
     }
     return value[key];
   }, options.row);

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

@@ -1,4 +1,4 @@
-import type { GenericObject, TableSchemaView } from '../../types/index.js';
+import type { TableRuntimeRecord, TableSchemaView } from '../../types/index.js';
 import type { SchemaTableColumn, TableRuntimeColumn } from './types.js';
 export declare function findSchemaColumn(options: {
     schema: TableSchemaView;
@@ -6,7 +6,7 @@ export declare function findSchemaColumn(options: {
 }): SchemaTableColumn | undefined;
 export declare function createRuntimeColumns(options: {
     schema: TableSchemaView;
-    context: GenericObject;
+    context: TableRuntimeRecord;
 }): TableRuntimeColumn[];
 export declare function createOrderedColumns(options: {
     runtimeColumns: TableRuntimeColumn[];
@@ -21,7 +21,7 @@ export declare function resolveColumnLabel(options: {
 }): string;
 export declare function resolveColumnVisibility(options: {
     column: SchemaTableColumn;
-    context: GenericObject;
+    context: TableRuntimeRecord;
 }): boolean;
 export declare function getSortableKey(options: {
     column: SchemaTableColumn;

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

@@ -1,23 +1,30 @@
 import { resolveTextValue } from "#ui-tools/shared/utils/render";
+import { isFunction, isNumber, isString } from "../../../shared/utils/predicate.js";
 export function findSchemaColumn(options) {
   return (options.schema.table?.columns ?? []).find((column) => column.key === options.columnId);
 }
 export function createRuntimeColumns(options) {
-  return (options.schema.table?.columns ?? []).filter((column) => (column.condition?.() ?? true) && (column.enabled ?? true)).map(
-    (column) => ({
-      id: column.key,
-      label: resolveColumnLabel({ column }),
-      icon: column.icon,
-      sortableKey: getSortableKey({ column }),
-      canHide: !column.required,
-      defaultVisible: resolveColumnVisibility({
-        column,
-        context: options.context
-      }),
-      configurable: true,
-      pinned: column.pinned
-    })
-  );
+  return (options.schema.table?.columns ?? []).filter((column) => (column.condition?.() ?? true) && (column.enabled ?? true)).map((column) => ({
+    align: column.align,
+    canHide: !column.required,
+    configurable: true,
+    defaultVisible: resolveColumnVisibility({
+      column,
+      context: options.context
+    }),
+    ellipsis: column.ellipsis === true,
+    icon: column.icon,
+    id: column.key,
+    label: resolveColumnLabel({ column }),
+    lines: column.lines,
+    maxWidth: column.maxWidth,
+    minWidth: column.minWidth,
+    pinned: column.pinned,
+    skeleton: column.skeleton,
+    sortableKey: getSortableKey({ column }),
+    summary: column.summary,
+    width: column.width
+  }));
 }
 export function createOrderedColumns(options) {
   const lookup = new Map(options.runtimeColumns.map((column) => [column.id, column]));
@@ -28,18 +35,21 @@ export function createVisibleOrderedColumns(options) {
   return options.orderedColumns.filter((column) => options.columnVisibility?.[column.id] !== false);
 }
 export function resolveColumnLabel(options) {
-  if (typeof options.column.label === "function") {
+  if (isFunction(options.column.label)) {
     const resolved = options.column.label();
-    return typeof resolved === "string" || typeof resolved === "number" ? String(resolved) : humanizeKey({ value: options.column.key });
+    return isString(resolved) || isNumber(resolved) ? String(resolved) : humanizeKey({ value: options.column.key });
   }
   return resolveTextValue(options.column.label, humanizeKey({ value: options.column.key }));
 }
 export function resolveColumnVisibility(options) {
-  if (typeof options.column.visible === "function") {
+  if (isVisibilityResolver(options.column.visible)) {
     return options.column.visible(options.context);
   }
   return options.column.visible ?? true;
 }
+function isVisibilityResolver(value) {
+  return isFunction(value);
+}
 export function getSortableKey(options) {
   if (options.column.kind === "field" && options.column.sortable !== false) {
     return options.column.field;
@@ -47,11 +57,10 @@ export function getSortableKey(options) {
   if (options.column.kind === "composite") {
     return options.column.sortableKey;
   }
-  return void 0;
 }
 export function uniqueColumnIds(options) {
-  return Array.from(new Set(options.columnIds));
+  return [...new Set(options.columnIds)];
 }
 function humanizeKey(options) {
-  return options.value.replace(/[_-]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\s+/g, " ").trim().replace(/^./, (char) => char.toUpperCase());
+  return options.value.replaceAll(/[_-]+/gu, " ").replaceAll(/([a-z])([A-Z])/gu, "$1 $2").replaceAll(/\s+/gu, " ").trim().replace(/^./u, (char) => char.toUpperCase());
 }