@superad/ui 0.1.1

package/es/Table/react/overlayChips.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { toneFor } from "../core/tagTone.mjs";
+import { Avatar, Tag } from "antd";
+import { useTheme } from "antd-style";
+import { jsx } from "react/jsx-runtime";
+//#region src/Table/react/overlayChips.tsx
+/**
+* 单元格与面板之外的**浮层**里用到的 chip / 头像。
+*
+* 常驻的单元格是画布画的（`canvas/chipPainters`），这里只服务 DOM 浮层：选择面板的候选行。
+* 两边的配色同源（都走 `toneFor`），所以同一个人在三处颜色一致。
+*/
+/**
+* 人员头像，走 antd 的 `Avatar`：有 `avatar` 用图片，没有则回退成首字。
+*/
+const UserAvatar = ({ size = 24, user }) => {
+	const { colorBgContainer, isDarkMode } = useTheme();
+	const tone = toneFor(user.name, void 0, isDarkMode, colorBgContainer);
+	return /* @__PURE__ */ jsx(Avatar, {
+		size,
+		src: user.avatar,
+		style: {
+			background: tone.bg,
+			color: tone.color
+		},
+		children: user.name.trim().slice(0, 1) || "?"
+	});
+};
+/**
+* 选择项在候选行里的样子。用 antd 的 `Tag`（尺寸、内边距、圆角都归它），只把配色换成
+* `toneFor` 的 —— 那套色与画布上画的 chip 同源，同一个选项在单元格和列表里颜色一致。
+* 文字色与画布同口径：浅色是主题 `colorText`（浅底 + 近黑字），暗色用 tone 的提亮色。
+*/
+const Chip = ({ option }) => {
+	const { colorBgContainer, colorText, isDarkMode } = useTheme();
+	const tone = toneFor(option.value, option.color, isDarkMode, colorBgContainer);
+	return /* @__PURE__ */ jsx(Tag, {
+		style: {
+			background: tone.bg,
+			borderColor: tone.border ?? "transparent",
+			color: isDarkMode ? tone.color : colorText,
+			marginInlineEnd: 0
+		},
+		children: option.label
+	});
+};
+//#endregion
+export { Chip, UserAvatar };
+
+//# sourceMappingURL=overlayChips.mjs.map

package/es/Table/react/overlayChips.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayChips.mjs","names":[],"sources":["../../../src/Table/react/overlayChips.tsx"],"sourcesContent":["'use client';\n\nimport { Avatar, Tag } from 'antd';\nimport { useTheme } from 'antd-style';\n\nimport { toneFor } from '../core/tagTone';\nimport type { TableSelectOption, TableUser } from '../type';\n\n/**\n * 单元格与面板之外的**浮层**里用到的 chip / 头像。\n *\n * 常驻的单元格是画布画的（`canvas/chipPainters`），这里只服务 DOM 浮层：选择面板的候选行。\n * 两边的配色同源（都走 `toneFor`），所以同一个人在三处颜色一致。\n */\n\n/**\n * 人员头像，走 antd 的 `Avatar`：有 `avatar` 用图片，没有则回退成首字。\n */\nexport const UserAvatar = ({ size = 24, user }: { size?: number; user: TableUser }) => {\n  const { colorBgContainer, isDarkMode } = useTheme();\n  const tone = toneFor(user.name, undefined, isDarkMode, colorBgContainer);\n\n  return (\n    <Avatar size={size} src={user.avatar} style={{ background: tone.bg, color: tone.color }}>\n      {user.name.trim().slice(0, 1) || '?'}\n    </Avatar>\n  );\n};\n\n/**\n * 选择项在候选行里的样子。用 antd 的 `Tag`（尺寸、内边距、圆角都归它），只把配色换成\n * `toneFor` 的 —— 那套色与画布上画的 chip 同源，同一个选项在单元格和列表里颜色一致。\n * 文字色与画布同口径：浅色是主题 `colorText`（浅底 + 近黑字），暗色用 tone 的提亮色。\n */\nexport const Chip = ({ option }: { option: TableSelectOption }) => {\n  const { colorBgContainer, colorText, isDarkMode } = useTheme();\n  const tone = toneFor(option.value, option.color, isDarkMode, colorBgContainer);\n\n  return (\n    <Tag\n      style={{\n        background: tone.bg,\n        borderColor: tone.border ?? 'transparent',\n        color: isDarkMode ? tone.color : colorText,\n        // Tag 默认带 8px 右外边距；行里是 flex + space-between，留着会把 ✓ 挤偏。\n        marginInlineEnd: 0,\n      }}\n    >\n      {option.label}\n    </Tag>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,cAAc,EAAE,OAAO,IAAI,WAA+C;CACrF,MAAM,EAAE,kBAAkB,eAAe,SAAS;CAClD,MAAM,OAAO,QAAQ,KAAK,MAAM,KAAA,GAAW,YAAY,gBAAgB;CAEvE,OACE,oBAAC,QAAD;EAAc;EAAM,KAAK,KAAK;EAAQ,OAAO;GAAE,YAAY,KAAK;GAAI,OAAO,KAAK;EAAM;EACnF,UAAA,KAAK,KAAK,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,KAAK;CAC3B,CAAA;AAEZ;;;;;;AAOA,MAAa,QAAQ,EAAE,aAA4C;CACjE,MAAM,EAAE,kBAAkB,WAAW,eAAe,SAAS;CAC7D,MAAM,OAAO,QAAQ,OAAO,OAAO,OAAO,OAAO,YAAY,gBAAgB;CAE7E,OACE,oBAAC,KAAD;EACE,OAAO;GACL,YAAY,KAAK;GACjB,aAAa,KAAK,UAAU;GAC5B,OAAO,aAAa,KAAK,QAAQ;GAEjC,iBAAiB;EACnB;EAEC,UAAA,OAAO;CACL,CAAA;AAET"}

package/es/Table/react/sameRenderInputs.mjs

@@ -0,0 +1,50 @@
+"use client";
+//#region src/Table/react/sameRenderInputs.ts
+const isPlainObject = (value) => {
+	if (value == null || typeof value !== "object") return false;
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+};
+/**
+* 渲染输入在**内容**上是否等价。
+*
+* 存在的理由：`createTableOption` 每次调用都会新建函数（`style` / `customLayout` / …）与编辑器
+* 实例，而 react-vtable 用 `isEqual(prev.option, next.option)` 判断要不要 `updateOption` ——
+* 那个实现对**非纯对象直接返回 false**（`if (!isPlainObject(a)) return !1;`），所以只要使用方
+* 把 `columns` / `records` 内联传进来（`columns={[...]}`），父组件每渲染一次就会整表重建一次。
+* 在上游按内容认出「其实没变」，复用上一次的 option 引用，`updateOption` 根本不会被触发。
+*
+* 两条刻意的取舍：
+*
+* 1. **函数按引用比较**（相同的引用仍走上面的快路径判等）。比的是**使用方的原始输入**
+*    （`useTableRenderState` 的 `optionInputs`），里面的函数就是使用方自己的闭包 —— 一律判等
+*    会让「闭包里的值变了」永远不被发现：`fieldFormat: (v) => prefix + v` 改了 `prefix`，表格
+*    照样拿旧闭包渲染，界面上没有任何信号。代价是内联 `columns={[{ fieldFormat: () => … }]}`
+*    每次渲染都会重建一次 —— 但这是**必要**的：新函数可能闭着新值，不重建就无从知道。
+*    不含函数的内联配置仍按内容判等，不重建。
+* 2. **非纯对象一律判不等**（`Map` / `Set` / 类实例）。按自有键比较会漏掉内部状态 ——
+*    `Object.keys(new Map())` 是空数组 —— 把它们判等会让变了的数据不重渲。宁可多重建一次。
+*    `Date` / `RegExp` 例外，它们按值比较。
+*/
+const sameRenderInputs = (left, right) => {
+	if (left === right) return true;
+	if (typeof left !== typeof right) return false;
+	if (typeof left === "function") return false;
+	if (left == null || right == null) return false;
+	if (typeof left !== "object") return false;
+	if (left instanceof Date || right instanceof Date) return left instanceof Date && right instanceof Date && left.getTime() === right.getTime();
+	if (left instanceof RegExp || right instanceof RegExp) return left instanceof RegExp && right instanceof RegExp && String(left) === String(right);
+	if (Array.isArray(left) || Array.isArray(right)) {
+		if (Array.isArray(left) === false || Array.isArray(right) === false) return false;
+		if (left.length !== right.length) return false;
+		return left.every((item, index) => sameRenderInputs(item, right[index]));
+	}
+	if (isPlainObject(left) === false || isPlainObject(right) === false) return false;
+	const keys = Object.keys(left);
+	if (keys.length !== Object.keys(right).length) return false;
+	return keys.every((key) => Object.hasOwn(right, key) && sameRenderInputs(left[key], right[key]));
+};
+//#endregion
+export { sameRenderInputs };
+
+//# sourceMappingURL=sameRenderInputs.mjs.map

package/es/Table/react/sameRenderInputs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sameRenderInputs.mjs","names":[],"sources":["../../../src/Table/react/sameRenderInputs.ts"],"sourcesContent":["'use client';\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> => {\n  if (value == null || typeof value !== 'object') return false;\n  const proto: unknown = Object.getPrototypeOf(value);\n  return proto === Object.prototype || proto === null;\n};\n\n/**\n * 渲染输入在**内容**上是否等价。\n *\n * 存在的理由：`createTableOption` 每次调用都会新建函数（`style` / `customLayout` / …）与编辑器\n * 实例，而 react-vtable 用 `isEqual(prev.option, next.option)` 判断要不要 `updateOption` ——\n * 那个实现对**非纯对象直接返回 false**（`if (!isPlainObject(a)) return !1;`），所以只要使用方\n * 把 `columns` / `records` 内联传进来（`columns={[...]}`），父组件每渲染一次就会整表重建一次。\n * 在上游按内容认出「其实没变」，复用上一次的 option 引用，`updateOption` 根本不会被触发。\n *\n * 两条刻意的取舍：\n *\n * 1. **函数按引用比较**（相同的引用仍走上面的快路径判等）。比的是**使用方的原始输入**\n *    （`useTableRenderState` 的 `optionInputs`），里面的函数就是使用方自己的闭包 —— 一律判等\n *    会让「闭包里的值变了」永远不被发现：`fieldFormat: (v) => prefix + v` 改了 `prefix`，表格\n *    照样拿旧闭包渲染，界面上没有任何信号。代价是内联 `columns={[{ fieldFormat: () => … }]}`\n *    每次渲染都会重建一次 —— 但这是**必要**的：新函数可能闭着新值，不重建就无从知道。\n *    不含函数的内联配置仍按内容判等，不重建。\n * 2. **非纯对象一律判不等**（`Map` / `Set` / 类实例）。按自有键比较会漏掉内部状态 ——\n *    `Object.keys(new Map())` 是空数组 —— 把它们判等会让变了的数据不重渲。宁可多重建一次。\n *    `Date` / `RegExp` 例外，它们按值比较。\n */\nexport const sameRenderInputs = (left: unknown, right: unknown): boolean => {\n  // 引用相同立即返回：大表靠这条走快路，不能逐行下探。\n  if (left === right) return true;\n  if (typeof left !== typeof right) return false;\n  if (typeof left === 'function') return false;\n  if (left == null || right == null) return false;\n  if (typeof left !== 'object') return false;\n\n  if (left instanceof Date || right instanceof Date) {\n    return left instanceof Date && right instanceof Date && left.getTime() === right.getTime();\n  }\n  if (left instanceof RegExp || right instanceof RegExp) {\n    return left instanceof RegExp && right instanceof RegExp && String(left) === String(right);\n  }\n\n  if (Array.isArray(left) || Array.isArray(right)) {\n    if (Array.isArray(left) === false || Array.isArray(right) === false) return false;\n    if (left.length !== right.length) return false;\n    return left.every((item, index) => sameRenderInputs(item, right[index]));\n  }\n\n  if (isPlainObject(left) === false || isPlainObject(right) === false) return false;\n\n  const keys = Object.keys(left);\n  if (keys.length !== Object.keys(right).length) return false;\n\n  return keys.every(\n    (key) =>\n      Object.hasOwn(right, key) &&\n      sameRenderInputs(\n        (left as Record<string, unknown>)[key],\n        (right as Record<string, unknown>)[key],\n      ),\n  );\n};\n"],"mappings":";;AAEA,MAAM,iBAAiB,UAAqD;CAC1E,IAAI,SAAS,QAAQ,OAAO,UAAU,UAAU,OAAO;CACvD,MAAM,QAAiB,OAAO,eAAe,KAAK;CAClD,OAAO,UAAU,OAAO,aAAa,UAAU;AACjD;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,oBAAoB,MAAe,UAA4B;CAE1E,IAAI,SAAS,OAAO,OAAO;CAC3B,IAAI,OAAO,SAAS,OAAO,OAAO,OAAO;CACzC,IAAI,OAAO,SAAS,YAAY,OAAO;CACvC,IAAI,QAAQ,QAAQ,SAAS,MAAM,OAAO;CAC1C,IAAI,OAAO,SAAS,UAAU,OAAO;CAErC,IAAI,gBAAgB,QAAQ,iBAAiB,MAC3C,OAAO,gBAAgB,QAAQ,iBAAiB,QAAQ,KAAK,QAAQ,MAAM,MAAM,QAAQ;CAE3F,IAAI,gBAAgB,UAAU,iBAAiB,QAC7C,OAAO,gBAAgB,UAAU,iBAAiB,UAAU,OAAO,IAAI,MAAM,OAAO,KAAK;CAG3F,IAAI,MAAM,QAAQ,IAAI,KAAK,MAAM,QAAQ,KAAK,GAAG;EAC/C,IAAI,MAAM,QAAQ,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,MAAM,OAAO,OAAO;EAC5E,IAAI,KAAK,WAAW,MAAM,QAAQ,OAAO;EACzC,OAAO,KAAK,OAAO,MAAM,UAAU,iBAAiB,MAAM,MAAM,MAAM,CAAC;CACzE;CAEA,IAAI,cAAc,IAAI,MAAM,SAAS,cAAc,KAAK,MAAM,OAAO,OAAO;CAE5E,MAAM,OAAO,OAAO,KAAK,IAAI;CAC7B,IAAI,KAAK,WAAW,OAAO,KAAK,KAAK,CAAC,CAAC,QAAQ,OAAO;CAEtD,OAAO,KAAK,OACT,QACC,OAAO,OAAO,OAAO,GAAG,KACxB,iBACG,KAAiC,MACjC,MAAkC,IACrC,CACJ;AACF"}