@movk/nuxt 1.1.2 → 1.3.0

package/dist/runtime/domains/data-table/columns/resolve-columns.js

@@ -0,0 +1,59 @@
+import { isDataColumn, isGroupColumn } from "../../../types/data-table/index.js";
+import { isString } from "@movk/core";
+import { DENSITY_PRESETS } from "./constants.js";
+import { resolveDataColumn } from "./resolve-data-column.js";
+import { resolveGroupColumn } from "./resolve-group-column.js";
+import {
+  resolveActionsColumn,
+  resolveExpandColumn,
+  resolveIndexColumn,
+  resolveRowPinningColumn,
+  resolveSelectionColumn
+} from "./resolve-special-columns.js";
+function resolveColumn(col, ctx, inheritedFixed) {
+  if (isGroupColumn(col)) return resolveGroupColumn(col, ctx, resolveColumn, inheritedFixed);
+  if (isDataColumn(col)) return resolveDataColumn(col, ctx, inheritedFixed);
+  if ("type" in col) {
+    switch (col.type) {
+      case "selection":
+        return resolveSelectionColumn(col, ctx);
+      case "index":
+        return resolveIndexColumn(col, ctx);
+      case "expand":
+        return resolveExpandColumn(col, ctx);
+      case "row-pinning":
+        return resolveRowPinningColumn(col, ctx);
+      case "actions":
+        return resolveActionsColumn(col, ctx);
+    }
+  }
+  return col;
+}
+export function resolveColumns(columns, options) {
+  let groupCounter = 0;
+  const ctx = {
+    options,
+    density: options.density ? isString(options.density) ? DENSITY_PRESETS[options.density] : options.density : null,
+    pinning: { left: [], right: [] },
+    visibility: {},
+    sizing: {},
+    flags: { hasPinning: false, hasResizing: false, hasSort: false, hasExpand: false },
+    nextGroupId: () => groupCounter++,
+    allColumnIds: []
+  };
+  const columnDefs = columns.map((col) => resolveColumn(col, ctx));
+  return {
+    columnDefs,
+    initialPinning: ctx.pinning,
+    initialVisibility: ctx.visibility,
+    initialSizing: ctx.sizing,
+    hasColumnPinning: ctx.flags.hasPinning,
+    hasColumnResizing: ctx.flags.hasResizing,
+    hasColumnSort: ctx.flags.hasSort,
+    hasExpandColumn: ctx.flags.hasExpand,
+    selectionMode: ctx.selectionMode,
+    selectionStrategy: ctx.selectionStrategy,
+    subRowSelection: ctx.subRowSelection,
+    allColumnIds: ctx.allColumnIds
+  };
+}

package/dist/runtime/domains/data-table/columns/resolve-data-column.d.ts

@@ -0,0 +1,9 @@
+import type { ColumnDef, HeaderContext } from '@tanstack/vue-table';
+import type { VNode } from 'vue';
+import type { DataTableDataColumn } from '../../../types/data-table';
+import type { ResolveContext } from './constants';
+import type { DataTableProps } from '../../../types/data-table/component';
+export declare function renderHeaderActions<T>(ctx: HeaderContext<T, unknown>, col: Pick<DataTableDataColumn<T>, 'pinButtonProps' | 'sortButtonProps'>, options: DataTableProps<T>, label: unknown, sortable: boolean, pinable: boolean, resizable: boolean): VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>;
+export declare function resolveDataColumn<T>(col: DataTableDataColumn<T>, ctx: ResolveContext<T>, inheritedFixed?: 'left' | 'right'): ColumnDef<T, unknown>;

package/dist/runtime/domains/data-table/columns/resolve-data-column.js

@@ -0,0 +1,164 @@
+import { h, isVNode } from "vue";
+import { resolveCallbackValue, resolveColumnFlag, resolveTemplate } from "./utils.js";
+import DataTableCellTooltip from "../components/CellTooltip.vue";
+import { UButton } from "#components";
+import { applyBaseState, buildClassMeta, makeColumnStyle, resolveAlignClass } from "./style.js";
+function buildDataCellRenderer(col, options) {
+  const maybeTooltip = col.tooltip !== void 0 ? !!col.tooltip : !!options.tooltip;
+  const maybeTruncate = col.truncate !== void 0 ? !!col.truncate : !!options.truncate;
+  const needCustomCell = !!(col.cell || maybeTooltip || maybeTruncate || col.emptyCell !== void 0 || options.emptyCell !== false);
+  if (!needCustomCell) return void 0;
+  return (ctx) => {
+    const raw = ctx.getValue();
+    const emptyText = col.emptyCell !== void 0 ? col.emptyCell : options.emptyCell;
+    if ((raw == null || raw === "") && emptyText !== false) {
+      return emptyText != null ? resolveTemplate(emptyText, ctx) : null;
+    }
+    const formatted = col.cell ? resolveTemplate(col.cell, ctx) : String(raw ?? "");
+    if (isVNode(formatted)) return formatted;
+    const tooltipRaw = col.tooltip !== void 0 ? col.tooltip : options.tooltip;
+    const tooltipVal = resolveCallbackValue(tooltipRaw, ctx);
+    if (tooltipVal) {
+      return h(DataTableCellTooltip, {
+        text: String(formatted ?? ""),
+        lines: tooltipVal === true ? void 0 : tooltipVal,
+        ...options.tooltipProps ?? {},
+        ...col.tooltipProps ?? {}
+      });
+    }
+    const truncateRaw = col.truncate !== void 0 ? col.truncate : options.truncate;
+    const truncateVal = resolveCallbackValue(truncateRaw, ctx);
+    if (truncateVal) {
+      if (truncateVal === true) {
+        return h("div", { class: "truncate" }, String(formatted ?? ""));
+      }
+      return h("div", {
+        style: {
+          "-webkit-line-clamp": truncateVal,
+          "display": "-webkit-box",
+          "-webkit-box-orient": "vertical",
+          "overflow": "hidden",
+          "white-space": "normal",
+          "word-break": "break-all"
+        }
+      }, String(formatted ?? ""));
+    }
+    return formatted;
+  };
+}
+function buildSortAction(col, options) {
+  return {
+    id: "sort",
+    position: "trailing",
+    render: (ctx) => {
+      const isSorted = ctx.column.getIsSorted();
+      const sortCtx = { isSorted, headerContext: ctx };
+      const icon = isSorted === "asc" ? "i-lucide-arrow-up-narrow-wide" : isSorted === "desc" ? "i-lucide-arrow-down-wide-narrow" : "i-lucide-arrow-up-down";
+      return h(UButton, {
+        size: "xs",
+        variant: "ghost",
+        color: "neutral",
+        class: isSorted ? "opacity-100" : "opacity-60 group-hover:opacity-100",
+        icon,
+        onClick: ctx.column.getToggleSortingHandler(),
+        ...resolveCallbackValue(options.sortButtonProps ?? {}, sortCtx),
+        ...resolveCallbackValue(col.sortButtonProps ?? {}, sortCtx)
+      });
+    }
+  };
+}
+function buildPinAction(col, options) {
+  return {
+    id: "pin",
+    position: "leading",
+    render: (ctx) => {
+      const pinned = ctx.column.getIsPinned();
+      const pinCtx = { pinned, headerContext: ctx };
+      return h(UButton, {
+        "size": "xs",
+        "variant": "ghost",
+        "color": pinned ? "primary" : "neutral",
+        "class": pinned ? "opacity-100" : "opacity-60 group-hover:opacity-100",
+        "icon": pinned ? "i-lucide-pin-off" : "i-lucide-pin",
+        "aria-label": pinned ? "Cancel column pin" : "Pin column",
+        "onClick": (event) => {
+          event.stopPropagation();
+          if (pinned === "left") {
+            ctx.column.pin("right");
+            return;
+          }
+          if (pinned === "right") {
+            ctx.column.pin(false);
+            return;
+          }
+          const th = event.target.closest("th");
+          if (th) {
+            const w = Math.ceil(th.getBoundingClientRect().width);
+            if (w > 0) ctx.table.setColumnSizing((prev) => ({ ...prev, [ctx.column.id]: w }));
+          }
+          ctx.column.pin("left");
+        },
+        ...resolveCallbackValue(options.pinButtonProps ?? {}, pinCtx),
+        ...resolveCallbackValue(col.pinButtonProps ?? {}, pinCtx)
+      });
+    }
+  };
+}
+export function renderHeaderActions(ctx, col, options, label, sortable, pinable, resizable) {
+  const actions = [];
+  if (pinable) actions.push(buildPinAction(col, options));
+  if (sortable) actions.push(buildSortAction(col, options));
+  const leading = actions.filter((a) => a.position === "leading").map((a) => a.render(ctx));
+  const trailing = actions.filter((a) => a.position === "trailing").map((a) => a.render(ctx));
+  const resizeHandle = resizable ? h("div", {
+    class: "absolute top-0 bottom-0 right-0 w-4 -mr-2 cursor-col-resize select-none touch-none flex items-center justify-center group/resize",
+    onMousedown: ctx.header.getResizeHandler(),
+    onTouchstart: ctx.header.getResizeHandler(),
+    onClick: (e) => e.stopPropagation()
+  }, [
+    h("div", {
+      class: [
+        "h-full transition-colors",
+        ctx.column.getIsResizing() ? "w-0.5 bg-primary" : "w-px opacity-50 group-hover:opacity-100 bg-(--ui-border-accented) group-hover/resize:w-0.5 group-hover/resize:bg-primary"
+      ].join(" ")
+    })
+  ]) : null;
+  const labelNode = isVNode(label) ? label : h("span", { class: "truncate" }, String(label ?? ""));
+  return h("div", { class: "flex items-center gap-1 relative group" }, [
+    ...leading,
+    labelNode,
+    ...trailing,
+    resizeHandle
+  ]);
+}
+export function resolveDataColumn(col, ctx, inheritedFixed) {
+  const { options, density } = ctx;
+  const id = col.accessorKey;
+  const effectiveSortable = resolveColumnFlag(col.sortable, options.sortable, col);
+  const effectivePinable = resolveColumnFlag(col.pinable, options.pinable, col);
+  const effectiveResizable = resolveColumnFlag(col.resizable, options.resizable, col);
+  ctx.flags.hasPinning ||= effectivePinable;
+  ctx.flags.hasResizing ||= effectiveResizable;
+  ctx.flags.hasSort ||= effectiveSortable;
+  const resolvedSize = applyBaseState(id, col.fixed ?? inheritedFixed, col.size, ctx);
+  if (col.visibility === false) ctx.visibility[id] = false;
+  ctx.allColumnIds.push(id);
+  const cellRenderer = buildDataCellRenderer(col, options);
+  const def = {
+    accessorKey: id,
+    header: effectiveSortable || effectivePinable || effectiveResizable ? (hctx) => renderHeaderActions(hctx, col, options, col.header ?? id, effectiveSortable, effectivePinable, effectiveResizable) : col.header ?? id,
+    ...col.minSize != null && { minSize: col.minSize },
+    ...col.maxSize != null && { maxSize: col.maxSize },
+    ...resolvedSize != null && { size: resolvedSize },
+    enableSorting: effectiveSortable,
+    enablePinning: effectivePinable,
+    enableResizing: effectiveResizable,
+    ...cellRenderer && { cell: cellRenderer },
+    meta: {
+      class: buildClassMeta(density, resolveAlignClass(col.align), effectiveResizable),
+      style: makeColumnStyle(col.align)
+    }
+  };
+  if (col._raw) Object.assign(def, col._raw);
+  return def;
+}

package/dist/runtime/domains/data-table/columns/resolve-group-column.d.ts

@@ -0,0 +1,4 @@
+import type { ColumnDef } from '@tanstack/vue-table';
+import type { DataTableColumn, DataTableGroupColumn } from '../../../types/data-table';
+import type { ResolveContext } from './constants';
+export declare function resolveGroupColumn<T>(col: DataTableGroupColumn<T>, ctx: ResolveContext<T>, resolveChild: (col: DataTableColumn<T>, ctx: ResolveContext<T>, inheritedFixed?: 'left' | 'right') => ColumnDef<T, unknown>, inheritedFixed?: 'left' | 'right'): ColumnDef<T, unknown>;

package/dist/runtime/domains/data-table/columns/resolve-group-column.js

@@ -0,0 +1,19 @@
+import { isString } from "@movk/core";
+import { resolvePresetSize } from "./utils.js";
+import { groupHeaderStyle, resolveAlignClass } from "./style.js";
+export function resolveGroupColumn(col, ctx, resolveChild, inheritedFixed) {
+  const effectiveFixed = col.fixed ?? inheritedFixed;
+  const resolvedSize = col.size != null ? isString(col.size) ? resolvePresetSize(col.size) : col.size : void 0;
+  return {
+    id: `group-${ctx.nextGroupId()}-${col.header ?? "unnamed"}`,
+    header: col.header,
+    ...resolvedSize != null && { size: resolvedSize },
+    ...col.minSize != null && { minSize: col.minSize },
+    ...col.maxSize != null && { maxSize: col.maxSize },
+    columns: col.children?.map((child) => resolveChild(child, ctx, effectiveFixed)),
+    meta: {
+      class: { th: resolveAlignClass(col.align) || void 0 },
+      style: { th: (header) => groupHeaderStyle(header, effectiveFixed) }
+    }
+  };
+}

package/dist/runtime/domains/data-table/columns/resolve-special-columns.d.ts

@@ -0,0 +1,8 @@
+import type { ColumnDef } from '@tanstack/vue-table';
+import type { DataTableActionsColumn, DataTableExpandColumn, DataTableIndexColumn, DataTableRowPinningColumn, DataTableSelectionColumn } from '../../../types/data-table';
+import type { ResolveContext } from './constants';
+export declare function resolveSelectionColumn<T>(col: DataTableSelectionColumn<T>, ctx: ResolveContext<T>): ColumnDef<T, unknown>;
+export declare function resolveIndexColumn<T>(col: DataTableIndexColumn<T>, ctx: ResolveContext<T>): ColumnDef<T, unknown>;
+export declare function resolveExpandColumn<T>(col: DataTableExpandColumn<T>, ctx: ResolveContext<T>): ColumnDef<T, unknown>;
+export declare function resolveRowPinningColumn<T>(col: DataTableRowPinningColumn<T>, ctx: ResolveContext<T>): ColumnDef<T, unknown>;
+export declare function resolveActionsColumn<T>(col: DataTableActionsColumn<T>, ctx: ResolveContext<T>): ColumnDef<T, unknown>;

package/dist/runtime/domains/data-table/columns/resolve-special-columns.js

@@ -0,0 +1,232 @@
+import { h } from "vue";
+import { isFunction } from "@movk/core";
+import { SPECIAL_COLUMN_DEFAULTS } from "./constants.js";
+import { resolveCallbackValue } from "./utils.js";
+import DataTableActionsCell from "../components/ActionsCell.vue";
+import { UButton, UCheckbox } from "#components";
+import { applyBaseState, buildClassMeta, makeColumnStyle, resolveAlignClass } from "./style.js";
+import { renderHeaderActions } from "./resolve-data-column.js";
+function computeLeafAggregate(row) {
+  let total = 0;
+  let selected = 0;
+  const walk = (rows) => {
+    for (const r of rows) {
+      if (r.subRows.length === 0) {
+        total++;
+        if (r.getIsSelected()) selected++;
+      } else {
+        walk(r.subRows);
+      }
+    }
+  };
+  walk(row.subRows);
+  if (total === 0) return { all: false, some: false };
+  return { all: selected === total, some: selected > 0 && selected < total };
+}
+function buildSpecialColumnDef(col, type, ctx, render) {
+  const defaults = SPECIAL_COLUMN_DEFAULTS[type];
+  const { options, density } = ctx;
+  const { id } = defaults;
+  const resolvedSize = applyBaseState(
+    id,
+    col.fixed ?? defaults.fixed,
+    col.size ?? defaults.size,
+    ctx
+  );
+  if (col.visibility === false) ctx.visibility[id] = false;
+  ctx.allColumnIds.push(id);
+  const effectivePinable = col.pinable ?? options.pinable === true;
+  const effectiveResizable = col.resizable ?? options.resizable === true;
+  ctx.flags.hasPinning ||= effectivePinable;
+  ctx.flags.hasResizing ||= effectiveResizable;
+  const effectiveAlign = col.align ?? defaults.align;
+  const alignClass = resolveAlignClass(effectiveAlign);
+  const resolvedHeader = effectivePinable || effectiveResizable ? (hctx) => {
+    const label = isFunction(render.header) ? render.header(hctx) : render.header ?? "";
+    return renderHeaderActions(hctx, col, options, label, false, effectivePinable, effectiveResizable);
+  } : render.header;
+  const classMeta = buildClassMeta(density, alignClass, effectiveResizable, defaults.tdClass);
+  const checkboxClass = type === "selection" ? {
+    td: [classMeta?.td, "[&:has([role=checkbox])]:px-0"].filter(Boolean).join(" "),
+    th: [classMeta?.th, "[&:has([role=checkbox])]:px-0"].filter(Boolean).join(" ")
+  } : classMeta;
+  const def = {
+    id,
+    header: resolvedHeader,
+    ...resolvedSize != null && { size: resolvedSize },
+    ...col.minSize != null && { minSize: col.minSize },
+    ...col.maxSize != null && { maxSize: col.maxSize },
+    enableSorting: false,
+    enableResizing: effectiveResizable,
+    enablePinning: effectivePinable,
+    cell: render.cell,
+    meta: {
+      class: checkboxClass,
+      style: makeColumnStyle(effectiveAlign)
+    }
+  };
+  if (col._raw) Object.assign(def, col._raw);
+  return def;
+}
+export function resolveSelectionColumn(col, ctx) {
+  ctx.selectionMode = col.mode ?? "multiple";
+  const isTree = !!ctx.options.childrenKey;
+  const strategy = col.strategy ?? "cascade";
+  ctx.selectionStrategy = strategy;
+  if (isTree && (strategy !== "cascade" || ctx.selectionMode === "single")) ctx.subRowSelection = false;
+  const isLeafStrategy = isTree && strategy === "leaf";
+  return buildSpecialColumnDef(col, "selection", ctx, {
+    header: ctx.selectionMode === "multiple" ? (hctx) => {
+      const isIndeterminate = hctx.table.getIsSomePageRowsSelected();
+      const isAllSelected = hctx.table.getIsAllPageRowsSelected();
+      const cbCtx = {
+        scope: "header",
+        headerContext: hctx,
+        isAllSelected,
+        isIndeterminate
+      };
+      return h(UCheckbox, {
+        "aria-label": "Select all rows",
+        "class": "inline-flex",
+        "modelValue": isIndeterminate ? "indeterminate" : isAllSelected,
+        "onUpdate:modelValue": (value) => hctx.table.toggleAllPageRowsSelected(!!value),
+        ...resolveCallbackValue(col.checkboxProps ?? {}, cbCtx)
+      });
+    } : col.header ?? SPECIAL_COLUMN_DEFAULTS.selection.header,
+    cell: (cellCtx) => {
+      if (isLeafStrategy && cellCtx.row.subRows.length > 0) {
+        const { all, some } = computeLeafAggregate(cellCtx.row);
+        const cbCtx2 = {
+          scope: "cell",
+          cellContext: cellCtx,
+          isSelected: all,
+          isIndeterminate: some,
+          isLeafAggregate: true
+        };
+        return h(UCheckbox, {
+          "aria-label": "Select parent row",
+          "class": "inline-flex",
+          "disabled": true,
+          "modelValue": all ? true : some ? "indeterminate" : false,
+          ...resolveCallbackValue(col.checkboxProps ?? {}, cbCtx2)
+        });
+      }
+      const isCascadeParent = isTree && strategy === "cascade" && cellCtx.row.subRows.length > 0;
+      const isSelected = isCascadeParent ? cellCtx.row.getIsSelected() || cellCtx.row.getIsAllSubRowsSelected() : cellCtx.row.getIsSelected();
+      const isIndeterminate = isCascadeParent ? !isSelected && cellCtx.row.getIsSomeSelected() : cellCtx.row.getIsSomeSelected();
+      const cbCtx = {
+        scope: "cell",
+        cellContext: cellCtx,
+        isSelected,
+        isIndeterminate,
+        isLeafAggregate: false
+      };
+      return h(UCheckbox, {
+        "aria-label": "Select row",
+        "class": "inline-flex",
+        "modelValue": isSelected ? true : isIndeterminate ? "indeterminate" : false,
+        "onUpdate:modelValue": (value) => cellCtx.row.toggleSelected(!!value),
+        ...resolveCallbackValue(col.checkboxProps ?? {}, cbCtx)
+      });
+    }
+  });
+}
+export function resolveIndexColumn(col, ctx) {
+  return buildSpecialColumnDef(col, "index", ctx, {
+    header: col.header ?? SPECIAL_COLUMN_DEFAULTS.index.header,
+    cell: (cellCtx) => cellCtx.row.index + 1
+  });
+}
+export function resolveExpandColumn(col, ctx) {
+  ctx.flags.hasExpand = true;
+  const isTreeMode = ctx.options.childrenKey != null;
+  const showToggleAll = col.toggleAll !== false;
+  return buildSpecialColumnDef(col, "expand", ctx, {
+    header: showToggleAll ? (hctx) => {
+      const isAllExpanded = hctx.table.getIsAllRowsExpanded();
+      const isSomeExpanded = hctx.table.getIsSomeRowsExpanded();
+      const toggleCtx = {
+        headerContext: hctx,
+        isAllExpanded,
+        isSomeExpanded
+      };
+      return h(UButton, {
+        "variant": "outline",
+        "size": "xs",
+        "color": "neutral",
+        "aria-label": isAllExpanded ? "Collapse all rows" : "Expand all rows",
+        "icon": isAllExpanded ? "i-lucide-minus" : "i-lucide-plus",
+        "ui": {
+          base: "p-0.5 rounded-sm",
+          leadingIcon: "size-4"
+        },
+        "onClick": (event) => {
+          event.stopPropagation();
+          hctx.table.toggleAllRowsExpanded();
+        },
+        ...resolveCallbackValue(col.toggleAllButtonProps ?? {}, toggleCtx)
+      });
+    } : void 0,
+    cell: (cellCtx) => {
+      if (isTreeMode && !cellCtx.row.getCanExpand()) return null;
+      const depth = cellCtx.row.depth;
+      const indentSize = ctx.options.indentSize ?? "1rem";
+      const marginLeft = isTreeMode ? isFunction(indentSize) ? indentSize(cellCtx) : typeof indentSize === "number" ? `${depth * indentSize}px` : depth > 0 ? `calc(${depth} * ${indentSize})` : "0px" : "0px";
+      const isExpanded = cellCtx.row.getIsExpanded();
+      const expandCtx = {
+        cellContext: cellCtx,
+        isExpanded,
+        depth,
+        canExpand: true
+      };
+      return h(UButton, {
+        variant: "outline",
+        size: "xs",
+        color: "neutral",
+        icon: isExpanded ? "i-lucide-minus" : "i-lucide-plus",
+        ui: {
+          base: "p-0.5 rounded-sm",
+          leadingIcon: "size-4"
+        },
+        style: { marginLeft },
+        onClick: (event) => {
+          event.stopPropagation();
+          cellCtx.row.toggleExpanded();
+        },
+        ...resolveCallbackValue(col.buttonProps ?? {}, expandCtx)
+      });
+    }
+  });
+}
+export function resolveRowPinningColumn(col, ctx) {
+  return buildSpecialColumnDef(col, "row-pinning", ctx, {
+    header: col.header ?? SPECIAL_COLUMN_DEFAULTS["row-pinning"].header,
+    cell: (cellCtx) => {
+      const pinned = cellCtx.row.getIsPinned();
+      const position = col.position ?? "top";
+      const rpCtx = { cellContext: cellCtx, pinned, position };
+      return h(UButton, {
+        "variant": "ghost",
+        "size": "xs",
+        "color": pinned ? "primary" : "neutral",
+        "icon": "i-lucide-star",
+        "aria-label": pinned ? "Cancel row pin" : "Pin row",
+        "onClick": (event) => {
+          event.stopPropagation();
+          if (pinned) {
+            cellCtx.row.pin(false);
+            return;
+          }
+          cellCtx.row.pin(position);
+        },
+        ...resolveCallbackValue(col.buttonProps ?? {}, rpCtx)
+      });
+    }
+  });
+}
+export function resolveActionsColumn(col, ctx) {
+  return buildSpecialColumnDef(col, "actions", ctx, {
+    header: col.header ?? SPECIAL_COLUMN_DEFAULTS.actions.header,
+    cell: (cellCtx) => h(DataTableActionsCell, { col, cellCtx, options: ctx.options })
+  });
+}

package/dist/runtime/domains/data-table/columns/style.d.ts

@@ -0,0 +1,11 @@
+import type { Cell, ColumnMeta, Header } from '@tanstack/vue-table';
+import type { ResolveContext } from './constants';
+export declare function resolveColumnSize<T>(ctx: Header<T, unknown> | Cell<T, unknown>): Record<string, string>;
+export declare function makeColumnStyle<T>(align?: 'left' | 'center' | 'right'): {
+    th: (ctx: Header<T, unknown>) => Record<string, string>;
+    td: (ctx: Cell<T, unknown>) => Record<string, string>;
+};
+export declare function applyBaseState(id: string, fixed: 'left' | 'right' | undefined, size: number | string | undefined, ctx: ResolveContext<unknown>): number | undefined;
+export declare function resolveAlignClass(align?: 'left' | 'center' | 'right'): string;
+export declare function buildClassMeta<T, V>(density: ColumnMeta<T, unknown>['class'] | null, align?: string, resizable?: boolean, tdClass?: string): ColumnMeta<T, V>['class'];
+export declare function groupHeaderStyle<T>(header: Header<T, unknown>, fixed?: 'left' | 'right'): Record<string, string>;

package/dist/runtime/domains/data-table/columns/style.js

@@ -0,0 +1,67 @@
+import { isString } from "@movk/core";
+import { resolvePresetSize } from "./utils.js";
+export function resolveColumnSize(ctx) {
+  const { columnDef } = ctx.column;
+  const table = ctx.getContext().table;
+  const isPinned = ctx.column.getIsPinned();
+  const hasMeasuredSize = isPinned && ctx.column.id in table.getState().columnSizing;
+  if (hasMeasuredSize || columnDef.size != table._getDefaultColumnDef().size || columnDef.enableResizing === true) {
+    const w = `${ctx.column.getSize()}px`;
+    return { width: w, minWidth: w, maxWidth: w };
+  }
+  const style = {};
+  if (columnDef.minSize != null) style.minWidth = `${columnDef.minSize}px`;
+  if (columnDef.maxSize != null) style.maxWidth = `${columnDef.maxSize}px`;
+  return style;
+}
+export function makeColumnStyle(align) {
+  const resolver = (ctx) => align ? { ...resolveColumnSize(ctx), textAlign: align } : resolveColumnSize(ctx);
+  return { th: resolver, td: resolver };
+}
+export function applyBaseState(id, fixed, size, ctx) {
+  if (fixed) {
+    ctx.pinning[fixed].push(id);
+  }
+  const resolvedSize = size != null ? isString(size) ? resolvePresetSize(size) : size : void 0;
+  if (resolvedSize != null) {
+    ctx.sizing[id] = resolvedSize;
+  }
+  return resolvedSize;
+}
+export function resolveAlignClass(align) {
+  switch (align) {
+    case "center":
+      return "text-center";
+    case "right":
+      return "text-right";
+    default:
+      return "";
+  }
+}
+export function buildClassMeta(density, align, resizable, tdClass) {
+  return {
+    td: [align, density?.td, tdClass].filter(Boolean).join(" ") || void 0,
+    th: [resizable ? "relative" : "", align, density?.th].filter(Boolean).join(" ") || void 0
+  };
+}
+function getFirstLeafHeader(header) {
+  return header.subHeaders.length ? getFirstLeafHeader(header.subHeaders[0]) : header;
+}
+function getLastLeafHeader(header) {
+  return header.subHeaders.length ? getLastLeafHeader(header.subHeaders[header.subHeaders.length - 1]) : header;
+}
+export function groupHeaderStyle(header, fixed) {
+  const w = `${header.getSize()}px`;
+  const style = { width: w, minWidth: w };
+  const pinned = fixed ?? header.column.getIsPinned();
+  if (pinned === "left") {
+    const first = getFirstLeafHeader(header);
+    style.position = "sticky";
+    style.left = `${first.column.getStart("left")}px`;
+  } else if (pinned === "right") {
+    const last = getLastLeafHeader(header);
+    style.position = "sticky";
+    style.right = `${last.column.getAfter("right")}px`;
+  }
+  return style;
+}

package/dist/runtime/domains/data-table/columns/utils.d.ts

@@ -0,0 +1,6 @@
+import type { ColumnDefTemplate } from '@tanstack/vue-table';
+import type { DataTableDataColumn, DataTableSizePreset } from '../../../types/data-table';
+export declare function resolveCallbackValue<V, A>(valueOrFn: V | ((arg: A) => V), arg: A): V;
+export declare function resolveColumnFlag<T>(colValue: boolean | undefined, globalValue: boolean | ((col: DataTableDataColumn<T>) => boolean) | undefined, col: DataTableDataColumn<T>, fallback?: boolean): boolean;
+export declare function resolveTemplate<TProps extends object>(template: ColumnDefTemplate<TProps>, props: TProps): unknown;
+export declare function resolvePresetSize(size: number | DataTableSizePreset): number;

package/dist/runtime/domains/data-table/columns/utils.js

@@ -0,0 +1,16 @@
+import { isFunction, isString } from "@movk/core";
+import { SIZE_PRESET_MAP } from "./constants.js";
+export function resolveCallbackValue(valueOrFn, arg) {
+  return isFunction(valueOrFn) ? valueOrFn(arg) : valueOrFn;
+}
+export function resolveColumnFlag(colValue, globalValue, col, fallback = false) {
+  if (colValue !== void 0) return colValue;
+  if (typeof globalValue === "function") return globalValue(col);
+  return globalValue ?? fallback;
+}
+export function resolveTemplate(template, props) {
+  return isFunction(template) ? template(props) : template;
+}
+export function resolvePresetSize(size) {
+  return isString(size) ? SIZE_PRESET_MAP[size] : size;
+}

package/dist/runtime/domains/data-table/components/ActionConfirm.d.vue.ts

@@ -0,0 +1,10 @@
+import type { ButtonProps } from '@nuxt/ui';
+import type { DataTableAction, DataTableActionButtonContext, DataTableDynamic } from '../../../types/data-table';
+interface DataTableRendererActionConfirmProps {
+    action: DataTableAction<unknown>;
+    ctx: DataTableActionButtonContext<unknown>;
+    globalButtonProps?: DataTableDynamic<ButtonProps, DataTableActionButtonContext<unknown>>;
+}
+declare const __VLS_export: import("vue").DefineComponent<DataTableRendererActionConfirmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DataTableRendererActionConfirmProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/domains/data-table/components/ActionConfirm.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { computed, ref } from "vue";
+import { resolveCallbackValue } from "../columns/utils";
+import { useMessageBox } from "../../../composables/useMessageBox";
+const props = defineProps({
+  action: { type: Object, required: true },
+  ctx: { type: Object, required: true },
+  globalButtonProps: { type: [Object, Function], required: false }
+});
+const { confirm } = useMessageBox();
+const loading = ref(false);
+const resolvedButtonProps = computed(() => ({
+  variant: "ghost",
+  size: "xs",
+  color: "neutral",
+  ...resolveCallbackValue(props.globalButtonProps ?? {}, props.ctx),
+  ...resolveCallbackValue(props.action.buttonProps ?? {}, props.ctx)
+}));
+const disabled = computed(
+  () => loading.value || resolveCallbackValue(props.action.disabled ?? false, props.ctx)
+);
+async function handleClick(event) {
+  event.stopPropagation();
+  if (props.action.confirm) {
+    const ok = await confirm(resolveCallbackValue(props.action.confirmProps ?? {}, props.ctx));
+    if (!ok) return;
+  }
+  loading.value = true;
+  try {
+    await props.action.onClick(props.ctx);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <UButton v-bind="resolvedButtonProps" :loading="loading" :disabled="disabled" @click="handleClick" />
+</template>