@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/ProTable/parts/SearchForm.mjs

@@ -0,0 +1,180 @@
+import Button from "../../Button/Button.mjs";
+import { Form } from "../../FormKit/index.mjs";
+import { styles } from "../style.mjs";
+import { rulesToFieldProps } from "../hooks/useSearchForm.mjs";
+import FieldControl from "./FieldControl.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from "lucide-react";
+//#region src/ProTable/parts/SearchForm.tsx
+const colsForWidth = (width) => {
+	if (width <= 0) return 3;
+	if (width < 576) return 1;
+	if (width < 900) return 2;
+	if (width < 1200) return 3;
+	return 4;
+};
+const SPAN_BREAKPOINTS = [
+	["xxl", 1600],
+	["xl", 1200],
+	["lg", 992],
+	["md", 768],
+	["sm", 576],
+	["xs", 0]
+];
+const resolveSpan = (span, width) => {
+	if (span === void 0 || typeof span === "number") return span || void 0;
+	const reached = SPAN_BREAKPOINTS.findIndex(([, min]) => width >= min);
+	const start = reached === -1 ? SPAN_BREAKPOINTS.length - 1 : reached;
+	for (let i = start; i < SPAN_BREAKPOINTS.length; i++) {
+		const value = span[SPAN_BREAKPOINTS[i][0]];
+		if (value) return value;
+	}
+	for (let i = start - 1; i >= 0; i--) {
+		const value = span[SPAN_BREAKPOINTS[i][0]];
+		if (value) return value;
+	}
+};
+const useWidth = () => {
+	const ref = useRef(null);
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		const node = ref.current;
+		if (!node || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	return {
+		ref,
+		width
+	};
+};
+const SearchLabel = ({ text }) => /* @__PURE__ */ jsx("span", {
+	className: styles.searchLabelText,
+	onMouseEnter: (event) => {
+		const el = event.currentTarget;
+		const box = el.closest("label") ?? el;
+		if (box.scrollWidth > box.clientWidth) el.title = text;
+		else el.removeAttribute("title");
+	},
+	children: text
+});
+const verticalColsForWidth = (width) => {
+	if (width <= 0) return 3;
+	if (width < 576) return 1;
+	if (width < 768) return 2;
+	if (width < 1200) return 3;
+	return 4;
+};
+const SearchForm = ({ config, fields, form, ignoreRules, layout: formLayout, loading, locale, onReset }) => {
+	const { ref, width } = useWidth();
+	const [innerCollapsed, setInnerCollapsed] = useState(config.defaultCollapsed ?? true);
+	const collapsed = config.collapsed ?? innerCollapsed;
+	const setCollapsed = (next) => {
+		setInnerCollapsed(next);
+		config.onCollapse?.(next);
+	};
+	const span = resolveSpan(config.span, width);
+	const cols = span ? Math.max(1, Math.round(24 / span)) : config.layout === "vertical" ? verticalColsForWidth(width) : colsForWidth(width);
+	const layout = config.layout ?? formLayout ?? (cols === 1 ? "vertical" : "horizontal");
+	const labelWidth = config.labelWidth ?? 80;
+	const visibleCount = config.defaultColsNumber ?? Math.max(1, cols - 1);
+	let used = 0;
+	const visibility = fields.map(({ column }) => {
+		used += Math.min(column.colSize ?? 1, cols);
+		return !collapsed || used <= visibleCount;
+	});
+	const collapsible = fields.reduce((sum, { column }) => sum + Math.min(column.colSize ?? 1, cols), 0) > visibleCount;
+	const submit = () => void form.submit();
+	const resetDom = /* @__PURE__ */ jsx(Button, {
+		onClick: onReset,
+		children: config.resetText ?? locale.reset
+	}, "reset");
+	const submitDom = /* @__PURE__ */ jsx(Button, {
+		htmlType: "submit",
+		loading,
+		type: "primary",
+		children: config.searchText ?? config.submitText ?? locale.search
+	}, "submit");
+	const buttons = config.optionRender === false ? [] : config.optionRender ? config.optionRender({
+		form,
+		onReset,
+		onSubmit: submit
+	}, [resetDom, submitDom]) : [resetDom, submitDom];
+	let collapseDom = null;
+	if (collapsible && config.collapseRender !== false) collapseDom = /* @__PURE__ */ jsx(Button, {
+		icon: collapsed ? ChevronDown : ChevronUp,
+		iconPosition: "end",
+		type: "link",
+		onClick: () => setCollapsed(!collapsed),
+		children: config.collapseRender ? config.collapseRender(collapsed) : collapsed ? locale.expand : locale.collapse
+	}, "collapse");
+	const gridStyle = {
+		"--lobe-pro-table-label-width": layout === "vertical" || labelWidth === "auto" ? "auto" : `${labelWidth}px`,
+		"display": "grid",
+		"gap": "16px 24px",
+		"gridTemplateColumns": `repeat(${cols}, minmax(0, 1fr))`
+	};
+	return /* @__PURE__ */ jsxs(Form, {
+		className: styles.search,
+		"data-pro-table-search": "",
+		form,
+		layout,
+		ref,
+		style: gridStyle,
+		variant: "borderless",
+		children: [
+			fields.map(({ column, name }, index) => {
+				if (!visibility[index]) return null;
+				const label = column.formItemProps?.label ?? column.title;
+				const { required, validate } = ignoreRules ? {
+					required: void 0,
+					validate: void 0
+				} : rulesToFieldProps(column.formItemProps?.rules, column.formItemProps?.required);
+				return /* @__PURE__ */ jsx("div", {
+					className: styles.searchField,
+					"data-layout": layout,
+					style: {
+						gridColumn: `span ${Math.min(column.colSize ?? 1, cols)}`,
+						...column.formItemProps?.style
+					},
+					children: /* @__PURE__ */ jsx(Form.Field, {
+						extra: column.formItemProps?.extra,
+						label: typeof label === "string" ? /* @__PURE__ */ jsx(SearchLabel, { text: label }) : label,
+						layout,
+						name,
+						required,
+						validate,
+						render: ({ value, onChange, onBlur }) => /* @__PURE__ */ jsx("div", {
+							onBlur,
+							children: /* @__PURE__ */ jsx(FieldControl, {
+								column,
+								form,
+								value,
+								placeholder: {
+									input: locale.inputPlaceholder,
+									select: locale.selectPlaceholder
+								},
+								onChange
+							})
+						})
+					})
+				}, name);
+			}),
+			/* @__PURE__ */ jsx("button", {
+				hidden: true,
+				type: "submit"
+			}),
+			(buttons.length > 0 || collapseDom) && /* @__PURE__ */ jsxs("div", {
+				className: styles.searchActions,
+				"data-layout": layout,
+				children: [buttons, collapseDom]
+			})
+		]
+	});
+};
+//#endregion
+export { SearchLabel, SearchForm as default, resolveSpan };
+
+//# sourceMappingURL=SearchForm.mjs.map

package/es/ProTable/parts/SearchForm.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchForm.mjs","names":[],"sources":["../../../src/ProTable/parts/SearchForm.tsx"],"sourcesContent":["import Form from '@lobehub/ui/form';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport Button from '@/Button';\n\nimport { rulesToFieldProps, type SearchFieldSchema } from '../hooks/useSearchForm';\nimport { styles } from '../style';\nimport type {\n  ProTableFormInstance,\n  ProTableLocale,\n  ProTableSearchConfig,\n  ProTableSpanBreakpoint,\n  ProTableSpanConfig,\n} from '../type';\nimport FieldControl from './FieldControl';\n\nexport interface SearchFormProps {\n  config: ProTableSearchConfig;\n  fields: SearchFieldSchema[];\n  form: ProTableFormInstance;\n  ignoreRules?: boolean;\n  layout?: 'horizontal' | 'vertical';\n  loading?: boolean;\n  locale: Required<Pick<ProTableLocale, 'collapse' | 'expand' | 'reset' | 'search'>> & {\n    inputPlaceholder: string;\n    selectPlaceholder: string;\n  };\n  onReset: () => void;\n}\n\nconst colsForWidth = (width: number) => {\n  if (width <= 0) return 3;\n  if (width < 576) return 1;\n  if (width < 900) return 2;\n  if (width < 1200) return 3;\n  return 4;\n};\n\nconst SPAN_BREAKPOINTS: [ProTableSpanBreakpoint, number][] = [\n  ['xxl', 1600],\n  ['xl', 1200],\n  ['lg', 992],\n  ['md', 768],\n  ['sm', 576],\n  ['xs', 0],\n];\n\nexport const resolveSpan = (\n  span: number | ProTableSpanConfig | undefined,\n  width: number,\n): number | undefined => {\n  if (span === undefined || typeof span === 'number') return span || undefined;\n  const reached = SPAN_BREAKPOINTS.findIndex(([, min]) => width >= min);\n  const start = reached === -1 ? SPAN_BREAKPOINTS.length - 1 : reached;\n  for (let i = start; i < SPAN_BREAKPOINTS.length; i++) {\n    const value = span[SPAN_BREAKPOINTS[i][0]];\n    if (value) return value;\n  }\n  for (let i = start - 1; i >= 0; i--) {\n    const value = span[SPAN_BREAKPOINTS[i][0]];\n    if (value) return value;\n  }\n  return undefined;\n};\n\nconst useWidth = () => {\n  const ref = useRef<HTMLFormElement>(null);\n  const [width, setWidth] = useState(0);\n  useEffect(() => {\n    const node = ref.current;\n    if (!node || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n  return { ref, width };\n};\n\nexport const SearchLabel = ({ text }: { text: string }) => (\n  <span\n    className={styles.searchLabelText}\n    onMouseEnter={(event) => {\n      const el = event.currentTarget;\n      const box = el.closest('label') ?? el;\n      if (box.scrollWidth > box.clientWidth) el.title = text;\n      else el.removeAttribute('title');\n    }}\n  >\n    {text}\n  </span>\n);\n\nconst verticalColsForWidth = (width: number) => {\n  if (width <= 0) return 3;\n  if (width < 576) return 1;\n  if (width < 768) return 2;\n  if (width < 1200) return 3;\n  return 4;\n};\n\nconst SearchForm = ({\n  config,\n  fields,\n  form,\n  ignoreRules,\n  layout: formLayout,\n  loading,\n  locale,\n  onReset,\n}: SearchFormProps) => {\n  const { ref, width } = useWidth();\n  const [innerCollapsed, setInnerCollapsed] = useState(config.defaultCollapsed ?? true);\n  const collapsed = config.collapsed ?? innerCollapsed;\n  const setCollapsed = (next: boolean) => {\n    setInnerCollapsed(next);\n    config.onCollapse?.(next);\n  };\n\n  const span = resolveSpan(config.span, width);\n  const cols = span\n    ? Math.max(1, Math.round(24 / span))\n    : config.layout === 'vertical'\n      ? verticalColsForWidth(width)\n      : colsForWidth(width);\n  const layout = config.layout ?? formLayout ?? (cols === 1 ? 'vertical' : 'horizontal');\n  // Pro default: an 80px label column, long labels end in an ellipsis; 'auto' sizes to the text.\n  const labelWidth = config.labelWidth ?? 80;\n\n  // Collapsed: one row, the action cell takes the last slot (Pro `defaultColsNumber`).\n  const visibleCount = config.defaultColsNumber ?? Math.max(1, cols - 1);\n  let used = 0;\n  const visibility = fields.map(({ column }) => {\n    used += Math.min(column.colSize ?? 1, cols);\n    return !collapsed || used <= visibleCount;\n  });\n  const collapsible =\n    fields.reduce((sum, { column }) => sum + Math.min(column.colSize ?? 1, cols), 0) > visibleCount;\n\n  const submit = () => void form.submit();\n\n  const resetDom = (\n    <Button key=\"reset\" onClick={onReset}>\n      {config.resetText ?? locale.reset}\n    </Button>\n  );\n  const submitDom = (\n    <Button htmlType=\"submit\" key=\"submit\" loading={loading} type=\"primary\">\n      {config.searchText ?? config.submitText ?? locale.search}\n    </Button>\n  );\n  const buttons: ReactNode[] =\n    config.optionRender === false\n      ? []\n      : config.optionRender\n        ? config.optionRender({ form, onReset, onSubmit: submit }, [resetDom, submitDom])\n        : [resetDom, submitDom];\n\n  let collapseDom: ReactNode = null;\n  if (collapsible && config.collapseRender !== false) {\n    collapseDom = (\n      <Button\n        icon={collapsed ? ChevronDown : ChevronUp}\n        iconPosition=\"end\"\n        key=\"collapse\"\n        type=\"link\"\n        onClick={() => setCollapsed(!collapsed)}\n      >\n        {config.collapseRender\n          ? config.collapseRender(collapsed)\n          : collapsed\n            ? locale.expand\n            : locale.collapse}\n      </Button>\n    );\n  }\n\n  const gridStyle = {\n    '--lobe-pro-table-label-width':\n      layout === 'vertical' || labelWidth === 'auto' ? 'auto' : `${labelWidth}px`,\n    'display': 'grid',\n    'gap': '16px 24px',\n    'gridTemplateColumns': `repeat(${cols}, minmax(0, 1fr))`,\n  } as CSSProperties;\n\n  return (\n    <Form\n      className={styles.search}\n      data-pro-table-search=\"\"\n      form={form}\n      layout={layout}\n      ref={ref}\n      style={gridStyle}\n      variant=\"borderless\"\n    >\n      {fields.map(({ column, name }, index) => {\n        if (!visibility[index]) return null;\n        const label = column.formItemProps?.label ?? column.title;\n        const { required, validate } = ignoreRules\n          ? { required: undefined, validate: undefined }\n          : rulesToFieldProps(column.formItemProps?.rules, column.formItemProps?.required);\n        return (\n          <div\n            className={styles.searchField}\n            data-layout={layout}\n            key={name}\n            style={{\n              gridColumn: `span ${Math.min(column.colSize ?? 1, cols)}`,\n              ...column.formItemProps?.style,\n            }}\n          >\n            <Form.Field\n              extra={column.formItemProps?.extra}\n              label={typeof label === 'string' ? <SearchLabel text={label} /> : label}\n              layout={layout}\n              name={name}\n              required={required}\n              validate={validate}\n              render={({ value, onChange, onBlur }) => (\n                <div onBlur={onBlur}>\n                  <FieldControl\n                    column={column}\n                    form={form}\n                    value={value}\n                    placeholder={{\n                      input: locale.inputPlaceholder,\n                      select: locale.selectPlaceholder,\n                    }}\n                    onChange={onChange}\n                  />\n                </div>\n              )}\n            />\n          </div>\n        );\n      })}\n      {/* Enter in a text field submits even without a visible submit button. */}\n      <button hidden type=\"submit\" />\n      {(buttons.length > 0 || collapseDom) && (\n        <div className={styles.searchActions} data-layout={layout}>\n          {buttons}\n          {collapseDom}\n        </div>\n      )}\n    </Form>\n  );\n};\n\nexport default SearchForm;\n"],"mappings":"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"}

package/es/ProTable/parts/SearchSection.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { partClass } from "../style.mjs";
+import SearchForm from "./SearchForm.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/ProTable/parts/SearchSection.tsx
+const SearchSection = ({ fields, form, loading, locale, onReset, props }) => {
+	const { cardBordered, form: formConfig, search, searchFormRender } = props;
+	const formDom = /* @__PURE__ */ jsx("div", {
+		className: partClass(cardBordered, "search"),
+		children: /* @__PURE__ */ jsx(SearchForm, {
+			config: search || {},
+			fields,
+			form,
+			ignoreRules: formConfig?.ignoreRules,
+			layout: formConfig?.layout,
+			loading,
+			locale: {
+				collapse: locale.collapse,
+				expand: locale.expand,
+				inputPlaceholder: locale.searchPlaceholder,
+				reset: locale.reset,
+				search: locale.search,
+				selectPlaceholder: locale.selectPlaceholder
+			},
+			onReset
+		})
+	});
+	return searchFormRender ? searchFormRender(props, formDom) : formDom;
+};
+//#endregion
+export { SearchSection as default };
+
+//# sourceMappingURL=SearchSection.mjs.map

package/es/ProTable/parts/SearchSection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchSection.mjs","names":[],"sources":["../../../src/ProTable/parts/SearchSection.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\n\nimport type { SearchFieldSchema } from '../hooks/useSearchForm';\nimport type { ProTableLocaleResolved } from '../locale';\nimport { partClass } from '../style';\nimport type { ProTableFormInstance, ProTableProps } from '../type';\nimport SearchForm from './SearchForm';\n\ninterface SearchSectionProps<T> {\n  fields: SearchFieldSchema[];\n  form: ProTableFormInstance;\n  loading: boolean;\n  locale: ProTableLocaleResolved;\n  onReset: () => void;\n  props: ProTableProps<T, any>;\n}\n\nconst SearchSection = <T,>({\n  fields,\n  form,\n  loading,\n  locale,\n  onReset,\n  props,\n}: SearchSectionProps<T>): ReactNode => {\n  const { cardBordered, form: formConfig, search, searchFormRender } = props;\n  const formDom = (\n    <div className={partClass(cardBordered, 'search')}>\n      <SearchForm\n        config={search || {}}\n        fields={fields}\n        form={form}\n        ignoreRules={formConfig?.ignoreRules}\n        layout={formConfig?.layout}\n        loading={loading}\n        locale={{\n          collapse: locale.collapse,\n          expand: locale.expand,\n          inputPlaceholder: locale.searchPlaceholder,\n          reset: locale.reset,\n          search: locale.search,\n          selectPlaceholder: locale.selectPlaceholder,\n        }}\n        onReset={onReset}\n      />\n    </div>\n  );\n  return searchFormRender ? searchFormRender(props, formDom) : formDom;\n};\n\nexport default SearchSection;\n"],"mappings":";;;;;AAmBA,MAAM,iBAAqB,EACzB,QACA,MACA,SACA,QACA,SACA,YACsC;CACtC,MAAM,EAAE,cAAc,MAAM,YAAY,QAAQ,qBAAqB;CACrE,MAAM,UACJ,oBAAC,OAAD;EAAK,WAAW,UAAU,cAAc,QAAQ;EAC9C,UAAA,oBAAC,YAAD;GACE,QAAQ,UAAU,CAAC;GACX;GACF;GACN,aAAa,YAAY;GACzB,QAAQ,YAAY;GACX;GACT,QAAQ;IACN,UAAU,OAAO;IACjB,QAAQ,OAAO;IACf,kBAAkB,OAAO;IACzB,OAAO,OAAO;IACd,QAAQ,OAAO;IACf,mBAAmB,OAAO;GAC5B;GACS;EACV,CAAA;CACE,CAAA;CAEP,OAAO,mBAAmB,iBAAiB,OAAO,OAAO,IAAI;AAC/D"}

package/es/ProTable/parts/TableAlert.mjs

@@ -0,0 +1,38 @@
+"use client";
+import Button from "../../Button/Button.mjs";
+import { PRO_PREFIX_CLS, styles } from "../style.mjs";
+import { useSelectedRowKeys } from "../hooks/useTableSelection.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/ProTable/parts/TableAlert.tsx
+const TableAlert = ({ alwaysShow, getRow, handleRef, locale, onClear, optionRender, render }) => {
+	const selectedRowKeys = useSelectedRowKeys(handleRef);
+	if (render === false || selectedRowKeys.length === 0 && !alwaysShow) return null;
+	const props = {
+		onCleanSelected: onClear,
+		selectedRowKeys,
+		selectedRows: selectedRowKeys.map((key) => getRow(key)).filter((row) => row !== void 0)
+	};
+	const info = render ? render(props) : locale.alertSelected(selectedRowKeys.length);
+	const option = optionRender === false ? null : optionRender ? optionRender(props) : /* @__PURE__ */ jsx(Button, {
+		size: "small",
+		type: "link",
+		onClick: onClear,
+		children: locale.alertClear
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx$1(styles.alert, `${PRO_PREFIX_CLS}-alert`),
+		role: "status",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: styles.alertInfo,
+			children: info
+		}), option && /* @__PURE__ */ jsx("div", {
+			className: styles.alertOption,
+			children: option
+		})]
+	});
+};
+//#endregion
+export { TableAlert as default };
+
+//# sourceMappingURL=TableAlert.mjs.map

package/es/ProTable/parts/TableAlert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableAlert.mjs","names":["clsx"],"sources":["../../../src/ProTable/parts/TableAlert.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { Key, RefObject } from 'react';\n\nimport Button from '@/Button';\nimport type { TableInternalHandle } from '@/Table/internal';\n\nimport { useSelectedRowKeys } from '../hooks/useTableSelection';\nimport type { ProTableLocaleResolved } from '../locale';\nimport { PRO_PREFIX_CLS, styles } from '../style';\nimport type { ProTableAlertRender } from '../type';\n\ninterface TableAlertProps<T> {\n  alwaysShow?: boolean;\n  getRow: (key: Key) => T | undefined;\n  handleRef: RefObject<TableInternalHandle | null>;\n  locale: ProTableLocaleResolved;\n  onClear: () => void;\n  optionRender?: ProTableAlertRender<T>;\n  render?: ProTableAlertRender<T>;\n}\n\nconst TableAlert = <T,>({\n  alwaysShow,\n  getRow,\n  handleRef,\n  locale,\n  onClear,\n  optionRender,\n  render,\n}: TableAlertProps<T>) => {\n  const selectedRowKeys = useSelectedRowKeys(handleRef);\n  if (render === false || (selectedRowKeys.length === 0 && !alwaysShow)) return null;\n\n  const selectedRows = selectedRowKeys\n    .map((key) => getRow(key))\n    .filter((row): row is T => row !== undefined);\n  const props = { onCleanSelected: onClear, selectedRowKeys, selectedRows };\n  const info = render ? render(props) : locale.alertSelected(selectedRowKeys.length);\n  const option =\n    optionRender === false ? null : optionRender ? (\n      optionRender(props)\n    ) : (\n      <Button size=\"small\" type=\"link\" onClick={onClear}>\n        {locale.alertClear}\n      </Button>\n    );\n\n  return (\n    <div className={clsx(styles.alert, `${PRO_PREFIX_CLS}-alert`)} role=\"status\">\n      <div className={styles.alertInfo}>{info}</div>\n      {option && <div className={styles.alertOption}>{option}</div>}\n    </div>\n  );\n};\n\nexport default TableAlert;\n"],"mappings":";;;;;;;AAuBA,MAAM,cAAkB,EACtB,YACA,QACA,WACA,QACA,SACA,cACA,aACwB;CACxB,MAAM,kBAAkB,mBAAmB,SAAS;CACpD,IAAI,WAAW,SAAU,gBAAgB,WAAW,KAAK,CAAC,YAAa,OAAO;CAK9E,MAAM,QAAQ;EAAE,iBAAiB;EAAS;EAAiB,cAHtC,gBAClB,KAAK,QAAQ,OAAO,GAAG,CAAC,CAAC,CACzB,QAAQ,QAAkB,QAAQ,KAAA,CACiC;CAAE;CACxE,MAAM,OAAO,SAAS,OAAO,KAAK,IAAI,OAAO,cAAc,gBAAgB,MAAM;CACjF,MAAM,SACJ,iBAAiB,QAAQ,OAAO,eAC9B,aAAa,KAAK,IAElB,oBAAC,QAAD;EAAQ,MAAK;EAAQ,MAAK;EAAO,SAAS;EACvC,UAAA,OAAO;CACF,CAAA;CAGZ,OACE,qBAAC,OAAD;EAAK,WAAWA,OAAK,OAAO,OAAO,GAAG,eAAe,OAAO;EAAG,MAAK;EAApE,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAY,UAAA;EAAU,CAAA,GAC5C,UAAU,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAc,UAAA;EAAY,CAAA,CACzD;;AAET"}

package/es/ProTable/parts/Toolbar.mjs

@@ -0,0 +1,50 @@
+"use client";
+import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
+import { PRO_PREFIX_CLS, styles } from "../style.mjs";
+import { useSelectedRowKeys } from "../hooks/useTableSelection.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { CircleHelp } from "lucide-react";
+//#region src/ProTable/parts/Toolbar.tsx
+const Toolbar = ({ actionRef, actions, filter, getRow, handleRef, keyword, settings, subTitle, title, toolBarRender, tooltip }) => {
+	const selectedRowKeys = useSelectedRowKeys(handleRef);
+	const rendered = toolBarRender ? toolBarRender(actionRef.current, {
+		selectedRowKeys,
+		selectedRows: selectedRowKeys.map((key) => getRow(key)).filter((row) => row !== void 0)
+	}) : [];
+	if (title === void 0 && !subTitle && !filter && !keyword && !actions?.length && !rendered.length && !settings) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx$1(styles.toolbar, `${PRO_PREFIX_CLS}-toolbar`),
+		children: [(title !== void 0 || subTitle) && /* @__PURE__ */ jsxs("div", {
+			className: styles.title,
+			children: [
+				title,
+				tooltip && /* @__PURE__ */ jsx(ActionIcon, {
+					icon: CircleHelp,
+					size: "small",
+					title: tooltip
+				}),
+				subTitle && /* @__PURE__ */ jsx("span", {
+					className: styles.titleSub,
+					children: subTitle
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: styles.toolbarActions,
+			children: [
+				filter,
+				keyword,
+				actions,
+				rendered,
+				settings && /* @__PURE__ */ jsx("div", {
+					className: styles.toolbarOptions,
+					children: settings
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { Toolbar as default };
+
+//# sourceMappingURL=Toolbar.mjs.map

package/es/ProTable/parts/Toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.mjs","names":["clsx"],"sources":["../../../src/ProTable/parts/Toolbar.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { CircleHelp } from 'lucide-react';\nimport type { Key, ReactNode, RefObject } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport type { TableInternalHandle } from '@/Table/internal';\n\nimport { useSelectedRowKeys } from '../hooks/useTableSelection';\nimport { PRO_PREFIX_CLS, styles } from '../style';\nimport type { ProTableActionType, ProTableProps } from '../type';\n\ninterface ToolbarProps<T> {\n  actionRef: RefObject<ProTableActionType | undefined>;\n  actions?: ReactNode[];\n  filter?: ReactNode;\n  getRow: (key: Key) => T | undefined;\n  handleRef: RefObject<TableInternalHandle | null>;\n  keyword?: ReactNode;\n  settings: ReactNode;\n  subTitle?: ReactNode;\n  title?: ReactNode;\n  toolBarRender?: Exclude<ProTableProps<T>['toolBarRender'], false>;\n  tooltip?: ReactNode;\n}\n\nconst Toolbar = <T,>({\n  actionRef,\n  actions,\n  filter,\n  getRow,\n  handleRef,\n  keyword,\n  settings,\n  subTitle,\n  title,\n  toolBarRender,\n  tooltip,\n}: ToolbarProps<T>) => {\n  const selectedRowKeys = useSelectedRowKeys(handleRef);\n  const rendered = toolBarRender\n    ? toolBarRender(actionRef.current, {\n        selectedRowKeys,\n        selectedRows: selectedRowKeys\n          .map((key) => getRow(key))\n          .filter((row): row is T => row !== undefined),\n      })\n    : [];\n  const empty =\n    title === undefined &&\n    !subTitle &&\n    !filter &&\n    !keyword &&\n    !actions?.length &&\n    !rendered.length &&\n    !settings;\n  if (empty) return null;\n\n  return (\n    <div className={clsx(styles.toolbar, `${PRO_PREFIX_CLS}-toolbar`)}>\n      {(title !== undefined || subTitle) && (\n        <div className={styles.title}>\n          {title}\n          {tooltip && <ActionIcon icon={CircleHelp} size=\"small\" title={tooltip} />}\n          {subTitle && <span className={styles.titleSub}>{subTitle}</span>}\n        </div>\n      )}\n      <div className={styles.toolbarActions}>\n        {filter}\n        {keyword}\n        {actions}\n        {rendered}\n        {settings && <div className={styles.toolbarOptions}>{settings}</div>}\n      </div>\n    </div>\n  );\n};\n\nexport default Toolbar;\n"],"mappings":";;;;;;;;AA2BA,MAAM,WAAe,EACnB,WACA,SACA,QACA,QACA,WACA,SACA,UACA,UACA,OACA,eACA,cACqB;CACrB,MAAM,kBAAkB,mBAAmB,SAAS;CACpD,MAAM,WAAW,gBACb,cAAc,UAAU,SAAS;EAC/B;EACA,cAAc,gBACX,KAAK,QAAQ,OAAO,GAAG,CAAC,CAAC,CACzB,QAAQ,QAAkB,QAAQ,KAAA,CAAS;CAChD,CAAC,IACD,CAAC;CASL,IAPE,UAAU,KAAA,KACV,CAAC,YACD,CAAC,UACD,CAAC,WACD,CAAC,SAAS,UACV,CAAC,SAAS,UACV,CAAC,UACQ,OAAO;CAElB,OACE,qBAAC,OAAD;EAAK,WAAWA,OAAK,OAAO,SAAS,GAAG,eAAe,SAAS;EAAhE,UAAA,EACI,UAAU,KAAA,KAAa,aACvB,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA;IACG;IACA,WAAW,oBAAC,YAAD;KAAY,MAAM;KAAY,MAAK;KAAQ,OAAO;IAAU,CAAA;IACvE,YAAY,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAW,UAAA;IAAe,CAAA;GAC5D;EAEP,CAAA,GAAA,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA;IACG;IACA;IACA;IACA;IACA,YAAY,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAiB,UAAA;IAAc,CAAA;GAChE;EACF,CAAA,CAAA;;AAET"}

package/es/ProTable/parts/ToolbarOptions.mjs

@@ -0,0 +1,103 @@
+"use client";
+import ActionIconGroup from "../../ActionIconGroup/ActionIconGroup.mjs";
+import { PRO_PREFIX_CLS, styles } from "../style.mjs";
+import ColumnSetting from "./ColumnSetting.mjs";
+import OptionPopover from "./OptionPopover.mjs";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Check, Fullscreen, Minimize, RotateCw, Rows3, Settings } from "lucide-react";
+//#region src/ProTable/parts/ToolbarOptions.tsx
+const DENSITIES = [
+	"large",
+	"middle",
+	"small"
+];
+const ToolbarOptions = ({ columnsState, config, fullscreen, locale, onColumnsStateChange, onColumnsStateReset, onReload, onSizeChange, onToggleFullScreen, reloading, settingColumns, size }) => {
+	const [open, setOpen] = useState(null);
+	const toggle = (key, event) => {
+		const anchor = event?.currentTarget ?? null;
+		setOpen((prev) => prev?.key === key || !anchor ? null : {
+			anchor,
+			key
+		});
+	};
+	const close = () => setOpen(null);
+	const { density, fullScreen, reload, setting } = config;
+	const items = [];
+	if (reload) items.push({
+		icon: RotateCw,
+		key: "reload",
+		label: locale.reload,
+		loading: reloading,
+		onClick: () => typeof reload === "function" ? reload() : onReload()
+	});
+	if (density) items.push({
+		icon: Rows3,
+		key: "density",
+		label: locale.density,
+		onClick: ((event) => toggle("density", event))
+	});
+	if (fullScreen) items.push({
+		icon: fullscreen ? Minimize : Fullscreen,
+		key: "fullScreen",
+		label: locale.fullScreen,
+		onClick: () => typeof fullScreen === "function" ? fullScreen() : onToggleFullScreen()
+	});
+	if (setting) items.push({
+		icon: Settings,
+		key: "setting",
+		label: locale.columnSetting,
+		onClick: ((event) => toggle("setting", event))
+	});
+	if (items.length === 0) return null;
+	const settingProps = typeof setting === "object" ? setting : {};
+	const densityLabel = (item) => item === "large" ? locale.densityLarge : item === "middle" ? locale.densityMedium : locale.densitySmall;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(ActionIconGroup, {
+			className: `${PRO_PREFIX_CLS}-options`,
+			items,
+			size: "small",
+			variant: "outlined"
+		}),
+		/* @__PURE__ */ jsx(OptionPopover, {
+			anchor: open?.key === "density" ? open.anchor : null,
+			open: open?.key === "density",
+			onOpenChange: (next) => !next && close(),
+			children: /* @__PURE__ */ jsx("div", {
+				className: styles.density,
+				"data-pro-table-density": "",
+				role: "menu",
+				children: DENSITIES.map((item) => /* @__PURE__ */ jsxs("button", {
+					"aria-checked": size === item,
+					className: styles.densityItem,
+					role: "menuitemradio",
+					type: "button",
+					onClick: () => {
+						onSizeChange(item);
+						close();
+					},
+					children: [/* @__PURE__ */ jsx("span", { children: densityLabel(item) }), size === item && /* @__PURE__ */ jsx(Check, { size: 14 })]
+				}, item))
+			})
+		}),
+		/* @__PURE__ */ jsx(OptionPopover, {
+			anchor: open?.key === "setting" ? open.anchor : null,
+			open: open?.key === "setting",
+			onOpenChange: (next) => !next && close(),
+			children: /* @__PURE__ */ jsx(ColumnSetting, {
+				checkable: settingProps.checkable,
+				columns: settingColumns,
+				draggable: settingProps.draggable,
+				locale,
+				showListItemOption: settingProps.showListItemOption,
+				state: columnsState,
+				onChange: onColumnsStateChange,
+				onReset: onColumnsStateReset
+			})
+		})
+	] });
+};
+//#endregion
+export { ToolbarOptions as default };
+
+//# sourceMappingURL=ToolbarOptions.mjs.map

package/es/ProTable/parts/ToolbarOptions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarOptions.mjs","names":[],"sources":["../../../src/ProTable/parts/ToolbarOptions.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Fullscreen, Minimize, RotateCw, Rows3, Settings } from 'lucide-react';\nimport { useState } from 'react';\n\nimport ActionIconGroup, { type ActionIconGroupItemType } from '@/ActionIconGroup';\n\nimport type { ProTableLocaleResolved } from '../locale';\nimport { PRO_PREFIX_CLS, styles } from '../style';\nimport type { ProTableColumnsStateMap, ProTableDensity, ProTableOptionConfig } from '../type';\nimport ColumnSetting, { type SettingColumn } from './ColumnSetting';\nimport OptionPopover from './OptionPopover';\n\nconst DENSITIES: ProTableDensity[] = ['large', 'middle', 'small'];\n\ninterface ToolbarOptionsProps {\n  columnsState: ProTableColumnsStateMap;\n  config: ProTableOptionConfig;\n  fullscreen: boolean;\n  locale: ProTableLocaleResolved;\n  onColumnsStateChange: (map: ProTableColumnsStateMap) => void;\n  onColumnsStateReset: () => void;\n  onReload: () => void;\n  onSizeChange: (size: ProTableDensity) => void;\n  onToggleFullScreen: () => void;\n  reloading: boolean;\n  settingColumns: SettingColumn[];\n  size: ProTableDensity;\n}\n\nconst ToolbarOptions = ({\n  columnsState,\n  config,\n  fullscreen,\n  locale,\n  onColumnsStateChange,\n  onColumnsStateReset,\n  onReload,\n  onSizeChange,\n  onToggleFullScreen,\n  reloading,\n  settingColumns,\n  size,\n}: ToolbarOptionsProps) => {\n  const [open, setOpen] = useState<{ anchor: HTMLElement; key: string } | null>(null);\n  const toggle = (key: string, event: unknown) => {\n    const anchor = (event as { currentTarget?: HTMLElement } | undefined)?.currentTarget ?? null;\n    setOpen((prev) => (prev?.key === key || !anchor ? null : { anchor, key }));\n  };\n  const close = () => setOpen(null);\n\n  const { density, fullScreen, reload, setting } = config;\n  const items: ActionIconGroupItemType[] = [];\n  if (reload) {\n    items.push({\n      icon: RotateCw,\n      key: 'reload',\n      label: locale.reload,\n      loading: reloading,\n      onClick: () => (typeof reload === 'function' ? reload() : onReload()),\n    });\n  }\n  if (density) {\n    items.push({\n      icon: Rows3,\n      key: 'density',\n      label: locale.density,\n      onClick: ((event: unknown) => toggle('density', event)) as any,\n    });\n  }\n  if (fullScreen) {\n    items.push({\n      icon: fullscreen ? Minimize : Fullscreen,\n      key: 'fullScreen',\n      label: locale.fullScreen,\n      onClick: () => (typeof fullScreen === 'function' ? fullScreen() : onToggleFullScreen()),\n    });\n  }\n  if (setting) {\n    items.push({\n      icon: Settings,\n      key: 'setting',\n      label: locale.columnSetting,\n      onClick: ((event: unknown) => toggle('setting', event)) as any,\n    });\n  }\n  if (items.length === 0) return null;\n\n  const settingProps = typeof setting === 'object' ? setting : {};\n  const densityLabel = (item: ProTableDensity) =>\n    item === 'large'\n      ? locale.densityLarge\n      : item === 'middle'\n        ? locale.densityMedium\n        : locale.densitySmall;\n\n  return (\n    <>\n      <ActionIconGroup\n        className={`${PRO_PREFIX_CLS}-options`}\n        items={items}\n        size=\"small\"\n        variant=\"outlined\"\n      />\n      <OptionPopover\n        anchor={open?.key === 'density' ? open.anchor : null}\n        open={open?.key === 'density'}\n        onOpenChange={(next) => !next && close()}\n      >\n        <div className={styles.density} data-pro-table-density=\"\" role=\"menu\">\n          {DENSITIES.map((item) => (\n            <button\n              aria-checked={size === item}\n              className={styles.densityItem}\n              key={item}\n              role=\"menuitemradio\"\n              type=\"button\"\n              onClick={() => {\n                onSizeChange(item);\n                close();\n              }}\n            >\n              <span>{densityLabel(item)}</span>\n              {size === item && <Check size={14} />}\n            </button>\n          ))}\n        </div>\n      </OptionPopover>\n      <OptionPopover\n        anchor={open?.key === 'setting' ? open.anchor : null}\n        open={open?.key === 'setting'}\n        onOpenChange={(next) => !next && close()}\n      >\n        <ColumnSetting\n          checkable={settingProps.checkable}\n          columns={settingColumns}\n          draggable={settingProps.draggable}\n          locale={locale}\n          showListItemOption={settingProps.showListItemOption}\n          state={columnsState}\n          onChange={onColumnsStateChange}\n          onReset={onColumnsStateReset}\n        />\n      </OptionPopover>\n    </>\n  );\n};\n\nexport default ToolbarOptions;\n"],"mappings":";;;;;;;;;AAaA,MAAM,YAA+B;CAAC;CAAS;CAAU;AAAO;AAiBhE,MAAM,kBAAkB,EACtB,cACA,QACA,YACA,QACA,sBACA,qBACA,UACA,cACA,oBACA,WACA,gBACA,WACyB;CACzB,MAAM,CAAC,MAAM,WAAW,SAAsD,IAAI;CAClF,MAAM,UAAU,KAAa,UAAmB;EAC9C,MAAM,SAAU,OAAuD,iBAAiB;EACxF,SAAS,SAAU,MAAM,QAAQ,OAAO,CAAC,SAAS,OAAO;GAAE;GAAQ;EAAI,CAAE;CAC3E;CACA,MAAM,cAAc,QAAQ,IAAI;CAEhC,MAAM,EAAE,SAAS,YAAY,QAAQ,YAAY;CACjD,MAAM,QAAmC,CAAC;CAC1C,IAAI,QACF,MAAM,KAAK;EACT,MAAM;EACN,KAAK;EACL,OAAO,OAAO;EACd,SAAS;EACT,eAAgB,OAAO,WAAW,aAAa,OAAO,IAAI,SAAS;CACrE,CAAC;CAEH,IAAI,SACF,MAAM,KAAK;EACT,MAAM;EACN,KAAK;EACL,OAAO,OAAO;EACd,WAAW,UAAmB,OAAO,WAAW,KAAK;CACvD,CAAC;CAEH,IAAI,YACF,MAAM,KAAK;EACT,MAAM,aAAa,WAAW;EAC9B,KAAK;EACL,OAAO,OAAO;EACd,eAAgB,OAAO,eAAe,aAAa,WAAW,IAAI,mBAAmB;CACvF,CAAC;CAEH,IAAI,SACF,MAAM,KAAK;EACT,MAAM;EACN,KAAK;EACL,OAAO,OAAO;EACd,WAAW,UAAmB,OAAO,WAAW,KAAK;CACvD,CAAC;CAEH,IAAI,MAAM,WAAW,GAAG,OAAO;CAE/B,MAAM,eAAe,OAAO,YAAY,WAAW,UAAU,CAAC;CAC9D,MAAM,gBAAgB,SACpB,SAAS,UACL,OAAO,eACP,SAAS,WACP,OAAO,gBACP,OAAO;CAEf,OACE,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,iBAAD;GACE,WAAW,GAAG,eAAe;GACtB;GACP,MAAK;GACL,SAAQ;EACT,CAAA;EACD,oBAAC,eAAD;GACE,QAAQ,MAAM,QAAQ,YAAY,KAAK,SAAS;GAChD,MAAM,MAAM,QAAQ;GACpB,eAAe,SAAS,CAAC,QAAQ,MAAM;GAEvC,UAAA,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAS,0BAAuB;IAAG,MAAK;IAC5D,UAAA,UAAU,KAAK,SACd,qBAAC,UAAD;KACE,gBAAc,SAAS;KACvB,WAAW,OAAO;KAElB,MAAK;KACL,MAAK;KACL,eAAe;MACb,aAAa,IAAI;MACjB,MAAM;KACR;KATF,UAAA,CAWE,oBAAC,QAAD,EAAA,UAAO,aAAa,IAAI,EAAQ,CAAA,GAC/B,SAAS,QAAQ,oBAAC,OAAD,EAAO,MAAM,GAAK,CAAA,CAC9B;IAVD,GAAA,IAUC,CACT;GACE,CAAA;EACQ,CAAA;EACf,oBAAC,eAAD;GACE,QAAQ,MAAM,QAAQ,YAAY,KAAK,SAAS;GAChD,MAAM,MAAM,QAAQ;GACpB,eAAe,SAAS,CAAC,QAAQ,MAAM;GAEvC,UAAA,oBAAC,eAAD;IACE,WAAW,aAAa;IACxB,SAAS;IACT,WAAW,aAAa;IAChB;IACR,oBAAoB,aAAa;IACjC,OAAO;IACP,UAAU;IACV,SAAS;GACV,CAAA;EACY,CAAA;CACf,EAAA,CAAA;AAEN"}

package/es/ProTable/parts/renderValue.mjs

@@ -0,0 +1,118 @@
+import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
+import Progress from "../../Progress/Progress.mjs";
+import { findValueEnum, formatDate, isEmptyValue, isNil, toDate } from "../utils.mjs";
+import { styles } from "../style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { Copy } from "lucide-react";
+//#region src/ProTable/parts/renderValue.tsx
+const STATUS_COLOR = {
+	Default: "var(--lobe-pro-table-status-default)",
+	Error: "var(--lobe-pro-table-status-error)",
+	Processing: "var(--lobe-pro-table-status-processing)",
+	Success: "var(--lobe-pro-table-status-success)",
+	Warning: "var(--lobe-pro-table-status-warning)"
+};
+const StatusText = ({ color, status, text }) => {
+	if (!status && !color) return /* @__PURE__ */ jsx(Fragment, { children: text });
+	return /* @__PURE__ */ jsxs("span", {
+		className: styles.status,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: clsx$1(styles.statusDot, status === "Processing" && styles.statusProcessing),
+			"data-status": status,
+			style: { background: color ?? STATUS_COLOR[status ?? "Default"] }
+		}), text]
+	});
+};
+const renderEnum = (valueEnum, value) => {
+	if (Array.isArray(value)) return /* @__PURE__ */ jsx("span", {
+		className: styles.enumList,
+		children: value.map((item) => /* @__PURE__ */ jsx("span", { children: renderEnum(valueEnum, item) }, String(item)))
+	});
+	const item = findValueEnum(valueEnum, value);
+	if (!item) return String(value);
+	return /* @__PURE__ */ jsx(StatusText, {
+		color: item.color,
+		status: item.status,
+		text: item.text
+	});
+};
+const formatNumber = (value, precision) => value.toLocaleString("en-US", {
+	maximumFractionDigits: precision ?? 20,
+	minimumFractionDigits: precision ?? 0
+});
+const renderValue = (value, options) => {
+	const { emptyText, fieldProps = {}, rowIndex, valueEnum, valueType } = options;
+	if (valueType === "index") return rowIndex + 1;
+	if (valueType === "indexBorder") return /* @__PURE__ */ jsx("span", {
+		className: styles.indexBorder,
+		"data-top": rowIndex < 3 ? "" : void 0,
+		children: rowIndex + 1
+	});
+	if (valueType === "option") return value;
+	if (isEmptyValue(value)) return emptyText;
+	if (valueEnum) return renderEnum(valueEnum, value);
+	switch (valueType) {
+		case "password": return "********";
+		case "digit": return typeof value === "number" ? formatNumber(value, fieldProps.precision) : value;
+		case "money": {
+			const symbol = fieldProps.customSymbol ?? "¥";
+			const number = Number(value);
+			if (Number.isNaN(number)) return value;
+			return `${number < 0 ? "-" : ""}${symbol}${formatNumber(Math.abs(number), fieldProps.precision ?? 2)}`;
+		}
+		case "percent": {
+			const number = Number(value);
+			if (Number.isNaN(number)) return value;
+			return `${formatNumber(number, fieldProps.precision)}%`;
+		}
+		case "progress": {
+			const number = Number(value);
+			return /* @__PURE__ */ jsx(Progress, {
+				percent: Number.isNaN(number) ? 0 : number,
+				size: "small",
+				style: { minWidth: 100 },
+				variant: "inset"
+			});
+		}
+		case "switch": return value ? fieldProps.checkedChildren ?? "On" : fieldProps.unCheckedChildren ?? "Off";
+		case "date":
+		case "dateTime":
+		case "time": {
+			const date = toDate(value);
+			if (!date) return String(value);
+			return formatDate(date, valueType === "dateTime", valueType === "time");
+		}
+		case "dateRange":
+		case "dateTimeRange":
+			if (!Array.isArray(value)) return String(value);
+			return value.map((item) => {
+				const date = toDate(item);
+				return date ? formatDate(date, valueType === "dateTimeRange") : "";
+			}).join(" ~ ");
+		case "code": return /* @__PURE__ */ jsx("code", {
+			className: styles.code,
+			children: String(value)
+		});
+		default: return isNil(value) || typeof value === "object" ? value : String(value);
+	}
+};
+const CopyableText = ({ children, label, text }) => /* @__PURE__ */ jsxs("span", {
+	className: styles.copyable,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: styles.copyableText,
+		children
+	}), /* @__PURE__ */ jsx(ActionIcon, {
+		icon: Copy,
+		size: "small",
+		title: label,
+		onClick: (event) => {
+			event.stopPropagation();
+			navigator.clipboard?.writeText(text);
+		}
+	})]
+});
+//#endregion
+export { CopyableText, StatusText, renderValue };
+
+//# sourceMappingURL=renderValue.mjs.map

package/es/ProTable/parts/renderValue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderValue.mjs","names":["cx"],"sources":["../../../src/ProTable/parts/renderValue.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { Copy } from 'lucide-react';\nimport { type ReactNode } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Progress from '@/Progress';\n\nimport { styles } from '../style';\nimport type { ProTableStatus, ProTableValueEnum, ProTableValueType } from '../type';\nimport { findValueEnum, formatDate, isEmptyValue, isNil, toDate } from '../utils';\n\nconst STATUS_COLOR: Record<ProTableStatus, string> = {\n  Default: 'var(--lobe-pro-table-status-default)',\n  Error: 'var(--lobe-pro-table-status-error)',\n  Processing: 'var(--lobe-pro-table-status-processing)',\n  Success: 'var(--lobe-pro-table-status-success)',\n  Warning: 'var(--lobe-pro-table-status-warning)',\n};\n\nexport const StatusText = ({\n  color,\n  status,\n  text,\n}: {\n  color?: string;\n  status?: ProTableStatus;\n  text: ReactNode;\n}) => {\n  if (!status && !color) return <>{text}</>;\n  return (\n    <span className={styles.status}>\n      <span\n        className={cx(styles.statusDot, status === 'Processing' && styles.statusProcessing)}\n        data-status={status}\n        style={{ background: color ?? STATUS_COLOR[status ?? 'Default'] }}\n      />\n      {text}\n    </span>\n  );\n};\n\nconst renderEnum = (valueEnum: ProTableValueEnum, value: unknown): ReactNode => {\n  if (Array.isArray(value)) {\n    return (\n      <span className={styles.enumList}>\n        {value.map((item) => (\n          <span key={String(item)}>{renderEnum(valueEnum, item)}</span>\n        ))}\n      </span>\n    );\n  }\n  const item = findValueEnum(valueEnum, value);\n  if (!item) return String(value);\n  return <StatusText color={item.color} status={item.status} text={item.text} />;\n};\n\nexport interface RenderValueOptions {\n  copyText?: string;\n  emptyText: ReactNode;\n  fieldProps?: Record<string, any>;\n  rowIndex: number;\n  valueEnum?: ProTableValueEnum;\n  valueType?: ProTableValueType;\n}\n\nconst formatNumber = (value: number, precision?: number) =>\n  value.toLocaleString('en-US', {\n    maximumFractionDigits: precision ?? 20,\n    minimumFractionDigits: precision ?? 0,\n  });\n\nexport const renderValue = (value: any, options: RenderValueOptions): ReactNode => {\n  const { emptyText, fieldProps = {}, rowIndex, valueEnum, valueType } = options;\n\n  if (valueType === 'index') return rowIndex + 1;\n  if (valueType === 'indexBorder')\n    return (\n      <span className={styles.indexBorder} data-top={rowIndex < 3 ? '' : undefined}>\n        {rowIndex + 1}\n      </span>\n    );\n  if (valueType === 'option') return value;\n\n  if (isEmptyValue(value)) return emptyText;\n  if (valueEnum) return renderEnum(valueEnum, value);\n\n  switch (valueType) {\n    case 'password': {\n      return '********';\n    }\n    case 'digit': {\n      return typeof value === 'number' ? formatNumber(value, fieldProps.precision) : value;\n    }\n    case 'money': {\n      const symbol = fieldProps.customSymbol ?? '¥';\n      const number = Number(value);\n      if (Number.isNaN(number)) return value;\n      return `${number < 0 ? '-' : ''}${symbol}${formatNumber(Math.abs(number), fieldProps.precision ?? 2)}`;\n    }\n    case 'percent': {\n      const number = Number(value);\n      if (Number.isNaN(number)) return value;\n      return `${formatNumber(number, fieldProps.precision)}%`;\n    }\n    case 'progress': {\n      const number = Number(value);\n      return (\n        <Progress\n          percent={Number.isNaN(number) ? 0 : number}\n          size=\"small\"\n          style={{ minWidth: 100 }}\n          variant=\"inset\"\n        />\n      );\n    }\n    case 'switch': {\n      return value ? (fieldProps.checkedChildren ?? 'On') : (fieldProps.unCheckedChildren ?? 'Off');\n    }\n    case 'date':\n    case 'dateTime':\n    case 'time': {\n      const date = toDate(value);\n      if (!date) return String(value);\n      return formatDate(date, valueType === 'dateTime', valueType === 'time');\n    }\n    case 'dateRange':\n    case 'dateTimeRange': {\n      if (!Array.isArray(value)) return String(value);\n      return value\n        .map((item) => {\n          const date = toDate(item);\n          return date ? formatDate(date, valueType === 'dateTimeRange') : '';\n        })\n        .join(' ~ ');\n    }\n    case 'code': {\n      return <code className={styles.code}>{String(value)}</code>;\n    }\n    default: {\n      return isNil(value) || typeof value === 'object' ? value : String(value);\n    }\n  }\n};\n\nexport const CopyableText = ({\n  children,\n  label,\n  text,\n}: {\n  children: ReactNode;\n  label: string;\n  text: string;\n}) => (\n  <span className={styles.copyable}>\n    <span className={styles.copyableText}>{children}</span>\n    <ActionIcon\n      icon={Copy}\n      size=\"small\"\n      title={label}\n      onClick={(event) => {\n        event.stopPropagation();\n        void navigator.clipboard?.writeText(text);\n      }}\n    />\n  </span>\n);\n"],"mappings":"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"}