nuxt-ui-tools 0.1.0

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

@@ -0,0 +1,77 @@
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { findSchemaColumn } from "./schema.js";
+export function createColumnMenuItems(options) {
+  const { t } = useUiToolsLocale();
+  const column = options.orderedColumns.find((entry) => entry.id === options.columnId);
+  const schemaColumn = findSchemaColumn({ schema: options.schema, columnId: options.columnId });
+  const sortState = options.getSortState({ columnId: options.columnId });
+  const pinnedState = options.getPinnedState({ columnId: options.columnId });
+  return [
+    column?.sortableKey ? [
+      {
+        label: t("table.columnsMenu.sortAsc"),
+        icon: sortState === "asc" ? "i-lucide-check" : "i-lucide-chevron-up",
+        color: "neutral",
+        onSelect: () => options.setSorting({
+          key: column.sortableKey,
+          dir: "asc"
+        })
+      },
+      {
+        label: t("table.columnsMenu.sortDesc"),
+        icon: sortState === "desc" ? "i-lucide-check" : "i-lucide-chevron-down",
+        color: "neutral",
+        onSelect: () => options.setSorting({
+          key: column.sortableKey,
+          dir: "desc"
+        })
+      },
+      ...sortState ? [
+        {
+          label: t("table.columnsMenu.clearSort"),
+          icon: "i-lucide-x",
+          color: "neutral",
+          onSelect: () => options.setSorting(null)
+        }
+      ] : []
+    ] : [],
+    [
+      {
+        label: t("table.columnsMenu.pinToLeft"),
+        icon: pinnedState === "left" ? "i-lucide-check" : "i-lucide-pin",
+        color: "neutral",
+        onSelect: () => options.setPinning({ columnId: options.columnId, pinned: "left" })
+      },
+      {
+        label: t("table.columnsMenu.pinToRight"),
+        icon: pinnedState === "right" ? "i-lucide-check" : "i-lucide-pin",
+        color: "neutral",
+        onSelect: () => options.setPinning({ columnId: options.columnId, pinned: "right" })
+      },
+      ...pinnedState ? [
+        {
+          label: t("table.columnsMenu.unpinColumn"),
+          icon: "i-lucide-pin-off",
+          onSelect: () => options.setPinning({ columnId: options.columnId })
+        }
+      ] : []
+    ],
+    schemaColumn?.required ? [] : [
+      {
+        label: t("table.columnsMenu.hideColumn"),
+        icon: "i-lucide-eye-off",
+        onSelect: () => options.setVisibility({ columnId: options.columnId, visible: false })
+      }
+    ]
+  ].filter((group) => group.length > 0);
+}
+export function getColumnHeaderIcon(options) {
+  const sortState = options.getSortState({ columnId: options.columnId });
+  if (sortState === "asc") {
+    return "i-lucide-arrow-up";
+  }
+  if (sortState === "desc") {
+    return "i-lucide-arrow-down";
+  }
+  return options.canHide ? "i-lucide-chevrons-up-down" : "i-lucide-grip-vertical";
+}

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

@@ -0,0 +1,158 @@
+/** @jsxImportSource vue */
+import type { VNodeChild } from 'vue';
+import type { GenericObject } from '../../types/index.js';
+import { type SchemaTableColumn, type TableColumnRenderParams, type TableRuntimeColumn, type UseTableColumnsParams } from './types.js';
+type ColumnMenuItem = {
+    label?: string;
+    icon?: string;
+    color?: string;
+    class?: string;
+    onSelect?: () => void;
+};
+export declare function createSelectionColumn(options: {
+    params: UseTableColumnsParams;
+}): {
+    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;
+    meta: {
+        class: {
+            th: string;
+            td: string;
+        };
+        style: {
+            th: () => {
+                width: string;
+                minWidth: string;
+                maxWidth: string;
+            };
+            td: () => {
+                width: string;
+                minWidth: string;
+                maxWidth: string;
+            };
+        };
+    };
+};
+export declare function createDataColumns(options: {
+    params: UseTableColumnsParams;
+    visibleOrderedColumns: TableRuntimeColumn[];
+    getMenuItems: (options: {
+        columnId: string;
+    }) => ColumnMenuItem[][];
+    getPinnedState: (options: {
+        columnId: string;
+    }) => 'left' | 'right' | null;
+    getSortState: (options: {
+        columnId: string;
+    }) => 'asc' | 'desc' | null;
+}): ({
+    id: string;
+    header: () => null;
+    cell: ({ row }: {
+        row: {
+            original: GenericObject;
+            index: number;
+        };
+    }) => import("vue/jsx-runtime").JSX.Element;
+    size: number;
+    enableSorting: boolean;
+    enableHiding: boolean;
+    enablePinning: boolean;
+    enableResizing: boolean;
+    meta: {
+        class: {
+            th: string;
+            td: string;
+        };
+        style: {
+            th: () => {
+                width: string;
+                minWidth: string;
+                maxWidth: string;
+            };
+            td: () => {
+                width: string;
+                minWidth: string;
+                maxWidth: string;
+            };
+        };
+    };
+} | {
+    id: string;
+    accessorFn: ((row: GenericObject) => unknown) | undefined;
+    header: ({ column: tableColumn, header, }: {
+        column: {
+            getCanHide?: () => boolean;
+            resetSize?: () => void;
+        };
+        header: {
+            getIsResizing?: () => boolean;
+            getResizeHandler?: () => (event: Event) => void;
+        };
+    }) => import("vue/jsx-runtime").JSX.Element;
+    cell: ({ row }: {
+        row: {
+            original: GenericObject;
+            index: number;
+        };
+    }) => import("vue/jsx-runtime").JSX.Element;
+    enableSorting: boolean;
+    enableHiding: boolean;
+    enablePinning: boolean;
+    enableResizing: boolean;
+    size: number | undefined;
+    minSize: number;
+    maxSize: number | undefined;
+    meta: {
+        class: {
+            th: string;
+            td: string;
+        };
+        style: {
+            th: ({ column: headerColumn }: {
+                column: {
+                    getSize: () => number;
+                };
+            }) => {
+                width: string;
+                minWidth: string;
+                maxWidth: string;
+            };
+            td: ({ column: cellColumn }: {
+                column: {
+                    getSize: () => number;
+                };
+            }) => {
+                width: string;
+                minWidth: string;
+                maxWidth: string;
+            };
+        };
+    };
+})[];
+export declare function renderColumnCell(options: TableColumnRenderParams): import("vue/jsx-runtime").JSX.Element;
+export declare function wrapEllipsisContent(options: {
+    column: SchemaTableColumn;
+    content: VNodeChild;
+    title?: string | null;
+}): import("vue/jsx-runtime").JSX.Element;
+export declare function getColumnHeaderClass(options: {
+    column: SchemaTableColumn;
+}): string;
+export declare function getColumnCellClass(options: {
+    column: SchemaTableColumn;
+}): string;
+export declare function normalizeColumnSize(options: {
+    size?: number | string;
+}): number | undefined;
+export {};

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

@@ -0,0 +1,432 @@
+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 { findSchemaColumn } from "./schema.js";
+import {
+  ROW_ACTIONS_COLUMN_ID,
+  ROW_ACTIONS_COLUMN_WIDTH,
+  SELECT_COLUMN_ID,
+  SELECT_COLUMN_WIDTH
+} from "./types.js";
+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",
+            ui: { base: "!rounded-md", indicator: "!rounded-none" }
+          }
+        )
+      }
+    ),
+    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({
+            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",
+            ui: { base: "!rounded-md", indicator: "!rounded-none" }
+          }
+        )
+      }
+    ),
+    size: SELECT_COLUMN_WIDTH,
+    enableSorting: false,
+    enableHiding: false,
+    enablePinning: true,
+    enableResizing: false,
+    meta: {
+      class: {
+        th: "w-14 px-4",
+        td: "w-14 px-4"
+      },
+      style: {
+        th: () => ({
+          width: `${SELECT_COLUMN_WIDTH}px`,
+          minWidth: `${SELECT_COLUMN_WIDTH}px`,
+          maxWidth: `${SELECT_COLUMN_WIDTH}px`
+        }),
+        td: () => ({
+          width: `${SELECT_COLUMN_WIDTH}px`,
+          minWidth: `${SELECT_COLUMN_WIDTH}px`,
+          maxWidth: `${SELECT_COLUMN_WIDTH}px`
+        })
+      }
+    }
+  };
+}
+export function createDataColumns(options) {
+  return options.visibleOrderedColumns.map((runtimeColumn) => {
+    if (runtimeColumn.id === ROW_ACTIONS_COLUMN_ID) {
+      return createRowActionsColumn({
+        params: options.params
+      });
+    }
+    const column = findSchemaColumn({
+      schema: options.params.schema.value,
+      columnId: runtimeColumn.id
+    });
+    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,
+          {
+            items: options.getMenuItems({ columnId: runtimeColumn.id }),
+            content: { align: "start", side: "bottom", sideOffset: 10 },
+            modal: false,
+            ui: { content: "w-fit p-1 shadow-none" },
+            children: /* @__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
+      ] }),
+      cell: ({ row }) => renderColumnCell({
+        column,
+        row: row.original,
+        rowIndex: row.index,
+        params: options.params
+      }),
+      enableSorting: false,
+      enableHiding: runtimeColumn.canHide,
+      enablePinning: true,
+      enableResizing: column.resizable !== false,
+      size: normalizeColumnSize({ size: column.width }),
+      minSize: normalizeColumnSize({ size: column.minWidth }) ?? 120,
+      maxSize: normalizeColumnSize({ size: column.maxWidth }),
+      meta: {
+        class: {
+          th: getColumnHeaderClass({ column }),
+          td: getColumnCellClass({ column })
+        },
+        style: {
+          th: ({ column: headerColumn }) => ({
+            width: `${headerColumn.getSize()}px`,
+            minWidth: `${headerColumn.getSize()}px`,
+            maxWidth: `${headerColumn.getSize()}px`
+          }),
+          td: ({ column: cellColumn }) => ({
+            width: `${cellColumn.getSize()}px`,
+            minWidth: `${cellColumn.getSize()}px`,
+            maxWidth: `${cellColumn.getSize()}px`
+          })
+        }
+      }
+    };
+  }).filter((column) => column !== null);
+}
+export function renderColumnCell(options) {
+  const cellContext = createCellRenderContext({
+    row: options.row,
+    rowIndex: options.rowIndex,
+    params: options.params
+  });
+  if (options.column.kind === "field") {
+    const value = getPathValue({
+      row: options.row,
+      path: options.column.field
+    });
+    if (options.column.render) {
+      return wrapRowScope({
+        scope: cellContext,
+        content: wrapEllipsisContent({
+          column: options.column,
+          content: options.column.render({
+            ...cellContext,
+            value
+          }),
+          title: resolveEllipsisTitle({
+            column: options.column,
+            params: {
+              ...cellContext,
+              value
+            },
+            fallbackValue: value
+          })
+        })
+      });
+    }
+    return wrapRowScope({
+      scope: cellContext,
+      content: wrapEllipsisContent({
+        column: options.column,
+        content: formatCellValue({ value }),
+        title: resolveEllipsisTitle({
+          column: options.column,
+          params: {
+            ...cellContext,
+            value
+          },
+          fallbackValue: value
+        })
+      })
+    });
+  }
+  return wrapRowScope({
+    scope: cellContext,
+    content: wrapEllipsisContent({
+      column: options.column,
+      content: options.column.render(cellContext),
+      title: resolveEllipsisTitle({
+        column: options.column,
+        params: cellContext,
+        fallbackValue: null
+      })
+    })
+  });
+}
+export function wrapEllipsisContent(options) {
+  const baseClass = "min-w-0 max-w-full overflow-hidden";
+  if (!options.column.ellipsis) {
+    return /* @__PURE__ */ jsx("div", { class: baseClass, children: options.content });
+  }
+  return /* @__PURE__ */ jsx(TableCellEllipsis, { title: options.title ?? void 0, wrapperClass: baseClass, children: options.content });
+}
+export function getColumnHeaderClass(options) {
+  return [
+    "bg-default",
+    options.column.labelAlign === "right" ? "text-right" : "",
+    options.column.labelAlign === "center" ? "text-center" : ""
+  ].filter(Boolean).join(" ");
+}
+export function getColumnCellClass(options) {
+  return [
+    "overflow-hidden",
+    options.column.align === "right" ? "text-right" : "",
+    options.column.align === "center" ? "text-center" : ""
+  ].filter(Boolean).join(" ");
+}
+export function normalizeColumnSize(options) {
+  if (typeof options.size === "number") {
+    return options.size;
+  }
+  if (typeof options.size === "string") {
+    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");
+  const plainRenderContext = resolvePlainRenderContext(options.params);
+  return {
+    row: options.row,
+    index: options.rowIndex,
+    context: plainRenderContext.plainContext,
+    pageContext: plainRenderContext.plainPageContext,
+    tableApi,
+    layout: options.params.tableLayout.value
+  };
+}
+function createRowActionsColumn(options) {
+  return {
+    id: ROW_ACTIONS_COLUMN_ID,
+    header: () => null,
+    cell: ({ row }) => {
+      const scope = createCellRenderContext({
+        row: row.original,
+        rowIndex: row.index,
+        params: options.params
+      });
+      return /* @__PURE__ */ jsx(TableRowScopeProvider, { scope, children: /* @__PURE__ */ jsx("div", { class: "flex justify-end", children: /* @__PURE__ */ jsx(
+        RowActions,
+        {
+          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"
+            }
+          )
+        }
+      ) }) });
+    },
+    size: ROW_ACTIONS_COLUMN_WIDTH,
+    enableSorting: false,
+    enableHiding: false,
+    enablePinning: true,
+    enableResizing: false,
+    meta: {
+      class: {
+        th: "w-13 px-2",
+        td: "w-13 px-2"
+      },
+      style: {
+        th: () => ({
+          width: `${ROW_ACTIONS_COLUMN_WIDTH}px`,
+          minWidth: `${ROW_ACTIONS_COLUMN_WIDTH}px`,
+          maxWidth: `${ROW_ACTIONS_COLUMN_WIDTH}px`
+        }),
+        td: () => ({
+          width: `${ROW_ACTIONS_COLUMN_WIDTH}px`,
+          minWidth: `${ROW_ACTIONS_COLUMN_WIDTH}px`,
+          maxWidth: `${ROW_ACTIONS_COLUMN_WIDTH}px`
+        })
+      }
+    }
+  };
+}
+function wrapRowScope(options) {
+  return /* @__PURE__ */ jsx(TableRowScopeProvider, { scope: options.scope, children: options.content });
+}
+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)
+    return cached;
+  const nextCache = {
+    contextSource,
+    pageContextSource,
+    plainContext: toPlainRecord(contextSource),
+    plainPageContext: toPlainRecord(pageContextSource)
+  };
+  PLAIN_RENDER_CONTEXT_CACHE.set(params, nextCache);
+  return nextCache;
+}
+function toPlainRecord(value) {
+  return Object.fromEntries(Object.entries(value));
+}
+function resolveEllipsisTitle(options) {
+  if (!options.column.ellipsis) {
+    return null;
+  }
+  if (typeof options.column.ellipsis === "object" && options.column.ellipsis !== null) {
+    const title = "title" in options.column.ellipsis ? options.column.ellipsis.title : void 0;
+    if (isEllipsisTitleResolver(title)) {
+      return String(title(options.params));
+    }
+    if (title != null) {
+      return String(title);
+    }
+  }
+  return options.fallbackValue == null ? null : String(options.fallbackValue);
+}
+function isEllipsisTitleResolver(value) {
+  return typeof value === "function";
+}
+function formatCellValue(options) {
+  if (options.value == null) {
+    return "\u2014";
+  }
+  if (options.value instanceof Date) {
+    return options.value.toLocaleString();
+  }
+  if (Array.isArray(options.value)) {
+    return options.value.join(", ");
+  }
+  if (typeof options.value === "object") {
+    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;
+    }
+    return value[key];
+  }, options.row);
+}

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

@@ -0,0 +1,31 @@
+import type { GenericObject, TableSchemaView } from '../../types/index.js';
+import type { SchemaTableColumn, TableRuntimeColumn } from './types.js';
+export declare function findSchemaColumn(options: {
+    schema: TableSchemaView;
+    columnId: string;
+}): SchemaTableColumn | undefined;
+export declare function createRuntimeColumns(options: {
+    schema: TableSchemaView;
+    context: GenericObject;
+}): TableRuntimeColumn[];
+export declare function createOrderedColumns(options: {
+    runtimeColumns: TableRuntimeColumn[];
+    columnOrder: string[];
+}): TableRuntimeColumn[];
+export declare function createVisibleOrderedColumns(options: {
+    orderedColumns: TableRuntimeColumn[];
+    columnVisibility: Record<string, boolean>;
+}): TableRuntimeColumn[];
+export declare function resolveColumnLabel(options: {
+    column: SchemaTableColumn;
+}): string;
+export declare function resolveColumnVisibility(options: {
+    column: SchemaTableColumn;
+    context: GenericObject;
+}): boolean;
+export declare function getSortableKey(options: {
+    column: SchemaTableColumn;
+}): string | undefined;
+export declare function uniqueColumnIds(options: {
+    columnIds: string[];
+}): string[];