@movk/nuxt 1.2.0 → 1.3.0

package/dist/runtime/{auto-form/reactive-utils.d.ts → domains/auto-form/reactive.d.ts}

@@ -1,11 +1,11 @@
-import type { ReactiveValue, AnyObject } from '@movk/core';
-import type { AutoFormFieldContext } from '../types/auto-form.js';
+import type { AnyObject } from '@movk/core';
+import type { ResolvedAutoFormFieldContext } from '../../types/auto-form';
 /** 解析单个响应式值：函数则以 context 调用，ref 则解包，否则原样返回 */
-export declare function resolveReactiveValue(value: ReactiveValue<any, any>, context: AutoFormFieldContext): any;
+export declare function resolveReactiveValue(value: unknown, context: ResolvedAutoFormFieldContext): any;
 /** 递归解析对象/数组中所有响应式值，VNode 和 ref 不再展开以防止意外渲染 */
-export declare function resolveReactiveObject<T extends Record<string, any>>(obj: T, context: AutoFormFieldContext, depth?: number): T;
+export declare function resolveReactiveObject<T extends Record<string, any>>(obj: T, context: ResolvedAutoFormFieldContext, depth?: number): T;
 /** 为 onXxx 事件 prop 自动追加 context 作为最后一个参数，方便用户在事件回调中访问表单状态 */
-export declare function enhanceEventProps(originalProps: AnyObject, ctx: AutoFormFieldContext): Record<string, any>;
+export declare function enhanceEventProps(originalProps: AnyObject, ctx: ResolvedAutoFormFieldContext): Record<string, any>;
 /** 渲染任意 VNode 内容（slot 函数返回值、h() 结果等），单子节点直接返回，多个节点包入 Fragment */
 export declare function VNodeRender(props: {
     node: unknown;

package/dist/runtime/{auto-form/reactive-utils.js → domains/auto-form/reactive.js}

@@ -1,6 +1,6 @@
 import { isFunction, isObject } from "@movk/core";
 import { Fragment, h, isRef, isVNode, unref } from "vue";
-import { AUTOFORM_LIMITS, AUTOFORM_PATTERNS } from "../constants/auto-form.js";
+import { AUTOFORM_LIMITS, AUTOFORM_PATTERNS } from "./constants.js";
 function validateContext(context) {
   if (!context || typeof context !== "object") {
     throw new TypeError("AutoFormFieldContext must be a valid object");

package/dist/runtime/{auto-form/schema-introspector.d.ts → domains/auto-form/schema.d.ts}

@@ -1,6 +1,6 @@
 import type { z } from 'zod';
-import type { AutoFormControls, AutoFormField } from '../types/auto-form.js';
-import type { ZodAutoFormFieldMeta } from '../types/zod.js';
+import type { AutoFormControls, AutoFormField } from '../../types/auto-form';
+import type { ZodAutoFormFieldMeta } from '../../types/zod';
 /** 将 Zod schema 递归解析为 AutoFormField 列表（schema 遍历的核心入口） */
 export declare function introspectSchema(schema: z.ZodType, mapping: AutoFormControls, path: string, globalMeta?: ZodAutoFormFieldMeta): AutoFormField[];
 /** 将含布局标记的 schema 还原为纯字段 schema，用于 Zod 表单校验 */

package/dist/runtime/{auto-form/schema-introspector.js → domains/auto-form/schema.js}

@@ -2,7 +2,7 @@ import { markRaw } from "vue";
 import { z as zod } from "zod";
 import { joinPath, startCase, toPath, isFunction, isObject } from "@movk/core";
 import { getAutoFormMetadata } from "./metadata.js";
-import { AUTOFORM_LIMITS, AUTOFORM_META } from "../constants/auto-form.js";
+import { AUTOFORM_LIMITS, AUTOFORM_META } from "./constants.js";
 function getUnwrappedSchema(schema) {
   const def = schema?.def || schema?._def;
   return def?.innerType || def?.in || def?.schema || void 0;

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

@@ -0,0 +1,50 @@
+import type { ColumnDef, ColumnMeta, ColumnPinningState, ColumnSizingState, VisibilityState } from '@tanstack/vue-table';
+import type { DataTableDensityPreset, DataTableSizePreset, DataTableTreeSelectionStrategy } from '../../../types/data-table';
+import type { DataTableProps } from '../../../types/data-table/component';
+export declare const DENSITY_PRESETS: Record<DataTableDensityPreset, {
+    th?: string;
+    td?: string;
+}>;
+export declare const SIZE_PRESET_MAP: Record<DataTableSizePreset, number>;
+export interface SpecialColumnDefaults {
+    id: string;
+    fixed?: 'left' | 'right';
+    size?: number;
+    align?: 'left' | 'center' | 'right';
+    header?: string;
+    tdClass?: string;
+}
+export type SpecialColumnType = 'selection' | 'index' | 'expand' | 'row-pinning' | 'actions';
+export declare const SPECIAL_COLUMN_DEFAULTS: Record<SpecialColumnType, SpecialColumnDefaults>;
+export interface ResolvedColumnState<T> {
+    columnDefs: ColumnDef<T, unknown>[];
+    initialPinning: ColumnPinningState;
+    initialVisibility: VisibilityState;
+    initialSizing: ColumnSizingState;
+    hasColumnPinning: boolean;
+    hasColumnResizing: boolean;
+    hasColumnSort: boolean;
+    hasExpandColumn: boolean;
+    selectionMode?: 'single' | 'multiple';
+    selectionStrategy?: DataTableTreeSelectionStrategy;
+    subRowSelection?: boolean;
+    allColumnIds: string[];
+}
+export interface ResolveContext<T> {
+    options: DataTableProps<T>;
+    density: ColumnMeta<T, unknown>['class'] | null;
+    pinning: ColumnPinningState;
+    visibility: VisibilityState;
+    sizing: ColumnSizingState;
+    flags: {
+        hasPinning: boolean;
+        hasResizing: boolean;
+        hasSort: boolean;
+        hasExpand: boolean;
+    };
+    selectionMode?: 'single' | 'multiple';
+    selectionStrategy?: DataTableTreeSelectionStrategy;
+    subRowSelection?: boolean;
+    nextGroupId: () => number;
+    allColumnIds: string[];
+}

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

@@ -0,0 +1,19 @@
+export const DENSITY_PRESETS = {
+  compact: { td: "px-3 py-1.5", th: "px-3 py-2" },
+  normal: { td: "px-4 py-2.5", th: "px-4 py-3" },
+  comfortable: { td: "p-4", th: "p-4" }
+};
+export const SIZE_PRESET_MAP = {
+  xs: 80,
+  sm: 120,
+  md: 180,
+  lg: 260,
+  xl: 400
+};
+export const SPECIAL_COLUMN_DEFAULTS = {
+  "selection": { id: "__selection", size: 60, align: "center" },
+  "index": { id: "__index", size: 60, align: "center", header: "#", tdClass: "text-muted" },
+  "expand": { id: "__expand", size: 60, align: "center" },
+  "row-pinning": { id: "__row_pinning", size: 60, align: "center" },
+  "actions": { id: "__actions", size: 60, header: "\u64CD\u4F5C", align: "center" }
+};

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

@@ -0,0 +1,4 @@
+import type { DataTableColumn } from '../../../types/data-table';
+import type { ResolvedColumnState } from './constants';
+import type { DataTableProps } from '../../../types/data-table/component';
+export declare function resolveColumns<T>(columns: DataTableColumn<T>[], options: DataTableProps<T>): ResolvedColumnState<T>;

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>;