@hkyhy/marsun-components-core 0.1.80 → 0.1.81

package/dist/components/Table/ResizableHeaderCell.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode, ThHTMLAttributes } from 'react';
+export type ResizableHeaderCellProps = ThHTMLAttributes<HTMLTableCellElement> & {
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    /** 开始拖拽前调用（用于锁死其它列宽） */
+    onResizeStart?: () => void;
+    onResize?: (width: number) => void;
+    onResizeStop?: (width: number) => void;
+    /** 双击把手：清除自定义 width */
+    onReset?: () => void;
+    children?: ReactNode;
+};
+/**
+ * antd Table header.cell：表头右缘拖拽调宽；无 onResize 时退化为普通 th。
+ */
+export default function ResizableHeaderCell({ width, minWidth, maxWidth, onResizeStart, onResize, onResizeStop, onReset, children, className, style, ...rest }: ResizableHeaderCellProps): import("react").JSX.Element;

package/dist/components/Table/ResizableHeaderCell.js

@@ -0,0 +1,70 @@
+import { jsx as C, jsxs as H } from "react/jsx-runtime";
+import I from "classnames";
+import { useRef as D } from "react";
+import { COLUMN_RESIZE_MIN_WIDTH as g, COLUMN_RESIZE_MAX_WIDTH as x, clampColumnWidth as X } from "./columnConfigUtils.js";
+import N from "./style.module.scss.js";
+function O({
+  width: t,
+  minWidth: a = g,
+  maxWidth: L = x,
+  onResizeStart: r,
+  onResize: c,
+  onResizeStop: n,
+  onReset: s,
+  children: m,
+  className: i,
+  style: f,
+  ...p
+}) {
+  const l = D(null), u = D(
+    typeof t == "number" && Number.isFinite(t) ? t : void 0
+  );
+  if (!c)
+    return /* @__PURE__ */ C("th", { ...p, className: i, style: f, ref: l, children: m });
+  const M = (e) => {
+    var y;
+    e.preventDefault(), e.stopPropagation(), r == null || r();
+    const W = ((y = l.current) == null ? void 0 : y.offsetWidth) || (typeof t == "number" && Number.isFinite(t) && t > 0 ? t : a), _ = e.clientX, d = W;
+    u.current = d;
+    const v = (o) => {
+      const E = X(d + (o.clientX - _), a, L);
+      u.current = E, c(E);
+    }, b = () => {
+      document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", b), document.body.style.cursor = "", document.body.style.userSelect = "";
+      const o = u.current;
+      typeof o == "number" && (n == null || n(o));
+    };
+    document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("mousemove", v), document.addEventListener("mouseup", b);
+  };
+  return /* @__PURE__ */ H(
+    "th",
+    {
+      ...p,
+      ref: l,
+      className: I(i, N.resizableHeaderCell),
+      style: { ...f, position: "relative", overflow: "visible" },
+      children: [
+        m,
+        /* @__PURE__ */ C(
+          "span",
+          {
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": "拖拽调整列宽，双击重置",
+            title: "拖拽调宽 · 双击重置",
+            className: N.resizeHandle,
+            onClick: (e) => e.stopPropagation(),
+            onMouseDown: M,
+            onDoubleClick: (e) => {
+              e.preventDefault(), e.stopPropagation(), s == null || s();
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  O as default
+};
+//# sourceMappingURL=ResizableHeaderCell.js.map

package/dist/components/Table/ResizableHeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableHeaderCell.js","sources":["../../../src/components/Table/ResizableHeaderCell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n  type ThHTMLAttributes,\n} from 'react';\nimport {\n  clampColumnWidth,\n  COLUMN_RESIZE_MAX_WIDTH,\n  COLUMN_RESIZE_MIN_WIDTH,\n} from './columnConfigUtils';\nimport styles from './style.module.scss';\n\nexport type ResizableHeaderCellProps = ThHTMLAttributes<HTMLTableCellElement> & {\n  width?: number;\n  minWidth?: number;\n  maxWidth?: number;\n  /** 开始拖拽前调用（用于锁死其它列宽） */\n  onResizeStart?: () => void;\n  onResize?: (width: number) => void;\n  onResizeStop?: (width: number) => void;\n  /** 双击把手：清除自定义 width */\n  onReset?: () => void;\n  children?: ReactNode;\n};\n\n/**\n * antd Table header.cell：表头右缘拖拽调宽；无 onResize 时退化为普通 th。\n */\nexport default function ResizableHeaderCell({\n  width,\n  minWidth = COLUMN_RESIZE_MIN_WIDTH,\n  maxWidth = COLUMN_RESIZE_MAX_WIDTH,\n  onResizeStart,\n  onResize,\n  onResizeStop,\n  onReset,\n  children,\n  className,\n  style,\n  ...rest\n}: ResizableHeaderCellProps) {\n  const thRef = useRef<HTMLTableCellElement>(null);\n  const lastWidthRef = useRef<number | undefined>(\n    typeof width === 'number' && Number.isFinite(width) ? width : undefined,\n  );\n\n  if (!onResize) {\n    return (\n      <th {...rest} className={className} style={style} ref={thRef}>\n        {children}\n      </th>\n    );\n  }\n\n  const startDrag = (e: ReactMouseEvent<HTMLSpanElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    // 先锁兄弟列，再量本列（锁宽可能触发重排，故本列尽量用当前 offsetWidth）\n    onResizeStart?.();\n    const measured =\n      thRef.current?.offsetWidth ||\n      (typeof width === 'number' && Number.isFinite(width) && width > 0 ? width : minWidth);\n    const startX = e.clientX;\n    const startW = measured;\n    lastWidthRef.current = startW;\n\n    const onMove = (ev: MouseEvent) => {\n      const next = clampColumnWidth(startW + (ev.clientX - startX), minWidth, maxWidth);\n      lastWidthRef.current = next;\n      onResize(next);\n    };\n    const onUp = () => {\n      document.removeEventListener('mousemove', onMove);\n      document.removeEventListener('mouseup', onUp);\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      const finalW = lastWidthRef.current;\n      if (typeof finalW === 'number') onResizeStop?.(finalW);\n    };\n    document.body.style.cursor = 'col-resize';\n    document.body.style.userSelect = 'none';\n    document.addEventListener('mousemove', onMove);\n    document.addEventListener('mouseup', onUp);\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={thRef}\n      className={classNames(className, styles.resizableHeaderCell)}\n      style={{ ...style, position: 'relative', overflow: 'visible' }}\n    >\n      {children}\n      <span\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        aria-label=\"拖拽调整列宽，双击重置\"\n        title=\"拖拽调宽 · 双击重置\"\n        className={styles.resizeHandle}\n        onClick={(e) => e.stopPropagation()}\n        onMouseDown={startDrag}\n        onDoubleClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n          onReset?.();\n        }}\n      />\n    </th>\n  );\n}\n"],"names":["ResizableHeaderCell","width","minWidth","COLUMN_RESIZE_MIN_WIDTH","maxWidth","COLUMN_RESIZE_MAX_WIDTH","onResizeStart","onResize","onResizeStop","onReset","children","className","style","rest","thRef","useRef","lastWidthRef","jsx","startDrag","measured","_a","startX","startW","onMove","ev","next","clampColumnWidth","onUp","finalW","jsxs","classNames","styles"],"mappings":";;;;;AA8BA,SAAwBA,EAAoB;AAAA,EAC1C,OAAAC;AAAA,EACA,UAAAC,IAAWC;AAAA,EACX,UAAAC,IAAWC;AAAA,EACX,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAA6B;AAC3B,QAAMC,IAAQC,EAA6B,IAAI,GACzCC,IAAeD;AAAA,IACnB,OAAOd,KAAU,YAAY,OAAO,SAASA,CAAK,IAAIA,IAAQ;AAAA,EAAA;AAGhE,MAAI,CAACM;AACH,WACE,gBAAAU,EAAC,QAAI,GAAGJ,GAAM,WAAAF,GAAsB,OAAAC,GAAc,KAAKE,GACpD,UAAAJ,GACH;AAIJ,QAAMQ,IAAY,CAAC,MAAwC;;AACzD,MAAE,eAAA,GACF,EAAE,gBAAA,GAEFZ,KAAA,QAAAA;AACA,UAAMa,MACJC,IAAAN,EAAM,YAAN,gBAAAM,EAAe,iBACd,OAAOnB,KAAU,YAAY,OAAO,SAASA,CAAK,KAAKA,IAAQ,IAAIA,IAAQC,IACxEmB,IAAS,EAAE,SACXC,IAASH;AACf,IAAAH,EAAa,UAAUM;AAEvB,UAAMC,IAAS,CAACC,MAAmB;AACjC,YAAMC,IAAOC,EAAiBJ,KAAUE,EAAG,UAAUH,IAASnB,GAAUE,CAAQ;AAChF,MAAAY,EAAa,UAAUS,GACvBlB,EAASkB,CAAI;AAAA,IACf,GACME,IAAO,MAAM;AACjB,eAAS,oBAAoB,aAAaJ,CAAM,GAChD,SAAS,oBAAoB,WAAWI,CAAI,GAC5C,SAAS,KAAK,MAAM,SAAS,IAC7B,SAAS,KAAK,MAAM,aAAa;AACjC,YAAMC,IAASZ,EAAa;AAC5B,MAAI,OAAOY,KAAW,aAAUpB,KAAA,QAAAA,EAAeoB;AAAA,IACjD;AACA,aAAS,KAAK,MAAM,SAAS,cAC7B,SAAS,KAAK,MAAM,aAAa,QACjC,SAAS,iBAAiB,aAAaL,CAAM,GAC7C,SAAS,iBAAiB,WAAWI,CAAI;AAAA,EAC3C;AAEA,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGhB;AAAA,MACJ,KAAKC;AAAA,MACL,WAAWgB,EAAWnB,GAAWoB,EAAO,mBAAmB;AAAA,MAC3D,OAAO,EAAE,GAAGnB,GAAO,UAAU,YAAY,UAAU,UAAA;AAAA,MAElD,UAAA;AAAA,QAAAF;AAAA,QACD,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,oBAAiB;AAAA,YACjB,cAAW;AAAA,YACX,OAAM;AAAA,YACN,WAAWc,EAAO;AAAA,YAClB,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,YAClB,aAAab;AAAA,YACb,eAAe,CAAC,MAAM;AACpB,gBAAE,eAAA,GACF,EAAE,gBAAA,GACFT,KAAA,QAAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Table/Table.d.ts

@@ -1,7 +1,7 @@
 import { TableProps as AntTableProps } from 'antd';
 import { Key, ReactElement, ReactNode, Ref } from 'react';
 import { TableColumnConfigFetcher, TableColumnConfigItem, TableColumnConfigSaver } from './columnConfigTypes';
-import { applyColumnConfig, COLUMN_CONFIG_COL_KEY, columnsToConfig, FLEX_SPACER_COL_KEY, hideColumnAtPath, isInternalColumnKey } from './columnConfigUtils';
+import { applyColumnConfig, applyLeafWidthOverrides, clearColumnWidthAtPath, clampColumnWidth, columnsLeafPathSignature, COLUMN_CONFIG_COL_KEY, COLUMN_RESIZE_MAX_WIDTH, COLUMN_RESIZE_MIN_WIDTH, columnsToConfig, configHasLeafWidths, copyColumnWidths, FLEX_SPACER_COL_KEY, hideColumnAtPath, isInternalColumnKey, setColumnWidthAtPath } from './columnConfigUtils';
 import { TablePrefs, TablePrefsFetcher, TablePrefsSaver } from './tablePrefsTypes';
 import { TableFetchHandle, TableFetchMapped, TableFetchQuery } from './useTableFetch';
 export type { TableColumnConfigFetcher, TableColumnConfigItem, TableColumnConfigSaver, TableFetchHandle, TableFetchMapped, TableFetchQuery, TablePrefs, TablePrefsFetcher, TablePrefsSaver, };
@@ -30,6 +30,12 @@ export type TableProps<RecordType extends object = Record<string, unknown>> = An
     rowHideSelectedKeys?: Key[];
     /** 自定义行隐藏工具条；默认内置按钮 */
     rowConfigToolbar?: ReactNode | false;
+    /** 叶子列拖宽；默认 !!tableName */
+    columnResizeEnabled?: boolean;
+    /** 拖宽最小 px；默认 48 */
+    columnResizeMinWidth?: number;
+    /** 拖宽最大 px；默认 480 */
+    columnResizeMaxWidth?: number;
     /**
      * Fetch 模式：`dataSource === undefined` 且提供本回调（或 fetchUrl）时由 Table 拉数。
      * 优先于 fetchUrl。Marsun typed list 主路径。
@@ -55,4 +61,4 @@ declare const Table: <RecordType extends object = Record<string, unknown>>(props
 export default Table;
 export { emptyTablePrefs } from './tablePrefsTypes';
 export { applyHiddenRows, mergeTablePrefs, normalizeHiddenRowKeys, parseTablePrefs, serializeTablePrefs, } from './tablePrefsUtils';
-export { applyColumnConfig, COLUMN_CONFIG_COL_KEY, columnsToConfig, FLEX_SPACER_COL_KEY, hideColumnAtPath, isInternalColumnKey, };
+export { applyColumnConfig, applyLeafWidthOverrides, clearColumnWidthAtPath, clampColumnWidth, columnsLeafPathSignature, COLUMN_CONFIG_COL_KEY, COLUMN_RESIZE_MAX_WIDTH, COLUMN_RESIZE_MIN_WIDTH, columnsToConfig, configHasLeafWidths, copyColumnWidths, FLEX_SPACER_COL_KEY, hideColumnAtPath, isInternalColumnKey, setColumnWidthAtPath, };