@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.10

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldControl.mjs","names":["InputNumber","DatePicker","DateRangePicker","Input"],"sources":["../../../src/ProTable/parts/FieldControl.tsx"],"sourcesContent":["import dayjs, { type Dayjs } from 'dayjs';\nimport { type ReactNode } from 'react';\n\nimport DatePicker from '@/DatePicker/DayjsDatePicker';\nimport DateRangePicker from '@/DatePicker/DayjsDateRangePicker';\nimport Input from '@/Input/Input';\nimport InputNumber from '@/Input/InputNumber';\nimport Select from '@/Select';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport Switch from '@/Switch';\n\nimport { useColumnRequest } from '../hooks/useColumnRequest';\nimport type { ProColumnType, ProTableFormInstance, ProTableValueType } from '../type';\nimport { resolveValueEnum, resolveValueType, valueEnumToList } from '../utils';\n\nexport interface FieldControlProps {\n  column: ProColumnType<any>;\n  form: ProTableFormInstance;\n  light?: boolean;\n  onChange: (value: any) => void;\n  placeholder: { input: string; select: string };\n  value: any;\n}\n\nconst SELECT_TYPES = new Set<ProTableValueType>(['select', 'radio', 'checkbox']);\n\n// Form values stay native Date (ProTable's contract); the picker works in Dayjs.\nconst toDayjs = (value: unknown) => (value ? dayjs(value as Date) : null);\nconst toDate = (value: Dayjs | null | undefined) => value?.toDate() ?? null;\n\nconst FieldControl = ({ column, form, light, onChange, placeholder, value }: FieldControlProps) => {\n  const valueType = resolveValueType(column) ?? 'text';\n  const valueEnum = resolveValueEnum(column);\n  const { fieldProps = {} } = column;\n  const label = typeof column.title === 'string' ? column.title : undefined;\n  const size = light ? 'small' : undefined;\n  const { isDarkMode } = useThemeMode();\n  // Light filter: outlined on light backgrounds, filled in dark mode.\n  const variant = light ? (isDarkMode ? 'filled' : 'outlined') : undefined;\n  const remote = useColumnRequest(column);\n\n  if (column.renderFormItem) {\n    return column.renderFormItem(\n      column,\n      { form, isQuery: !light, onChange, value },\n      form,\n    ) as ReactNode;\n  }\n\n  if (remote.enabled || valueEnum || SELECT_TYPES.has(valueType)) {\n    const options =\n      remote.options ??\n      fieldProps.options ??\n      valueEnumToList(valueEnum).map((item) => ({\n        disabled: item.disabled,\n        label: item.text,\n        value: item.value,\n      }));\n    return (\n      <Select\n        allowClear\n        loading={remote.loading}\n        mode={valueType === 'checkbox' ? 'multiple' : undefined}\n        options={options as any}\n        placeholder={light ? label : placeholder.select}\n        size={size}\n        style={{ width: '100%' }}\n        value={value ?? (valueType === 'checkbox' ? [] : null)}\n        variant={variant}\n        {...fieldProps}\n        onChange={(next) => onChange(next ?? undefined)}\n        onSearch={\n          remote.onSearch\n            ? (keyWords: string) => {\n                remote.onSearch!(keyWords);\n                fieldProps.onSearch?.(keyWords);\n              }\n            : fieldProps.onSearch\n        }\n      />\n    );\n  }\n\n  switch (valueType) {\n    case 'digit':\n    case 'money':\n    case 'percent':\n    case 'progress': {\n      return (\n        <InputNumber\n          placeholder={light ? label : placeholder.input}\n          size={size}\n          style={{ width: '100%' }}\n          value={value ?? null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(next ?? undefined)}\n        />\n      );\n    }\n    case 'switch': {\n      return <Switch checked={!!value} {...fieldProps} onChange={(next) => onChange(next)} />;\n    }\n    case 'date':\n    case 'dateTime': {\n      return (\n        <DatePicker\n          allowClear\n          placeholder={light ? label : placeholder.select}\n          size={size}\n          style={{ width: '100%' }}\n          value={toDayjs(value)}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(toDate(next) ?? undefined)}\n        />\n      );\n    }\n    case 'dateRange':\n    case 'dateTimeRange': {\n      return (\n        <DateRangePicker\n          allowClear\n          size={size}\n          style={{ width: '100%' }}\n          value={value ? [toDayjs(value[0]), toDayjs(value[1])] : null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) =>\n            onChange(next && (next[0] || next[1]) ? [toDate(next[0]), toDate(next[1])] : undefined)\n          }\n        />\n      );\n    }\n    default: {\n      return (\n        <Input\n          allowClear\n          placeholder={light ? label : placeholder.input}\n          size={size}\n          type={valueType === 'password' ? 'password' : undefined}\n          value={value ?? ''}\n          variant={variant}\n          {...fieldProps}\n          onChange={(event) => onChange(event.target.value === '' ? undefined : event.target.value)}\n          onClear={() => {\n            onChange(undefined);\n            fieldProps.onClear?.();\n          }}\n        />\n      );\n    }\n  }\n};\n\nexport default FieldControl;\n"],"mappings":"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"}

package/es/ProTable/parts/KeywordInput.mjs

@@ -0,0 +1,19 @@
+"use client";
+import Input_default from "../../Input/Input.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/ProTable/parts/KeywordInput.tsx
+const KeywordInput = ({ config, onSearch, placeholder }) => /* @__PURE__ */ jsx(Input_default, {
+	allowClear: true,
+	placeholder: typeof config === "object" && config.placeholder || placeholder,
+	style: { width: 200 },
+	onClear: () => onSearch(void 0),
+	onPressEnter: (event) => {
+		const value = event.target.value;
+		if (typeof config === "object" && config.onSearch?.(value) === false) return;
+		onSearch(value);
+	}
+});
+//#endregion
+export { KeywordInput as default };
+
+//# sourceMappingURL=KeywordInput.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeywordInput.mjs","names":["Input"],"sources":["../../../src/ProTable/parts/KeywordInput.tsx"],"sourcesContent":["'use client';\n\nimport Input from '@/Input/Input';\n\nimport type { ProTableOptionConfig } from '../type';\n\ninterface KeywordInputProps {\n  config: NonNullable<ProTableOptionConfig['search']>;\n  onSearch: (value: string | undefined) => void;\n  placeholder: string;\n}\n\nconst KeywordInput = ({ config, onSearch, placeholder }: KeywordInputProps) => (\n  <Input\n    allowClear\n    placeholder={(typeof config === 'object' && config.placeholder) || placeholder}\n    style={{ width: 200 }}\n    onClear={() => onSearch(undefined)}\n    onPressEnter={(event) => {\n      const value = (event.target as HTMLInputElement).value;\n      if (typeof config === 'object' && config.onSearch?.(value) === false) return;\n      onSearch(value);\n    }}\n  />\n);\n\nexport default KeywordInput;\n"],"mappings":";;;;AAYA,MAAM,gBAAgB,EAAE,QAAQ,UAAU,kBACxC,oBAACA,eAAD;CACE,YAAA;CACA,aAAc,OAAO,WAAW,YAAY,OAAO,eAAgB;CACnE,OAAO,EAAE,OAAO,IAAI;CACpB,eAAe,SAAS,KAAA,CAAS;CACjC,eAAe,UAAU;EACvB,MAAM,QAAS,MAAM,OAA4B;EACjD,IAAI,OAAO,WAAW,YAAY,OAAO,WAAW,KAAK,MAAM,OAAO;EACtE,SAAS,KAAK;CAChB;AACD,CAAA"}

package/es/ProTable/parts/LightFilter.mjs

@@ -0,0 +1,70 @@
+import { Form } from "../../FormKit/index.mjs";
+import { styles } from "../style.mjs";
+import { rulesToFieldProps } from "../hooks/useSearchForm.mjs";
+import FieldControl from "./FieldControl.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ProTable/parts/LightFilter.tsx
+const TEXT_TYPES = /* @__PURE__ */ new Set([
+	"text",
+	"textarea",
+	"password",
+	"code"
+]);
+const LightFilter = ({ fields, form, ignoreRules, placeholder }) => /* @__PURE__ */ jsxs(Form, {
+	className: styles.lightFilter,
+	"data-pro-table-light-filter": "",
+	form,
+	variant: "borderless",
+	layout: "horizontal",
+	style: {
+		alignItems: "center",
+		display: "flex",
+		flex: "0 1 auto",
+		flexDirection: "row",
+		flexWrap: "wrap",
+		gap: 8,
+		minWidth: 0,
+		width: "auto"
+	},
+	children: [fields.map(({ column, name }) => {
+		const isText = !column.valueEnum && !column.request && !column.renderFormItem && (!column.valueType || TEXT_TYPES.has(column.valueType));
+		const wrapped = isText ? {
+			...column,
+			fieldProps: {
+				...column.fieldProps,
+				onClear: () => void form.submit()
+			}
+		} : column;
+		const { required, validate } = ignoreRules ? {
+			required: void 0,
+			validate: void 0
+		} : rulesToFieldProps(column.formItemProps?.rules, column.formItemProps?.required);
+		return /* @__PURE__ */ jsx("div", {
+			className: styles.lightFilterItem,
+			children: /* @__PURE__ */ jsx(Form.Field, {
+				bare: true,
+				name,
+				required,
+				validate,
+				render: ({ value, onChange }) => /* @__PURE__ */ jsx(FieldControl, {
+					light: true,
+					column: wrapped,
+					form,
+					placeholder,
+					value,
+					onChange: (next) => {
+						onChange(next);
+						if (!isText) form.submit();
+					}
+				})
+			})
+		}, name);
+	}), /* @__PURE__ */ jsx("button", {
+		hidden: true,
+		type: "submit"
+	})]
+});
+//#endregion
+export { LightFilter as default };
+
+//# sourceMappingURL=LightFilter.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LightFilter.mjs","names":[],"sources":["../../../src/ProTable/parts/LightFilter.tsx"],"sourcesContent":["import Form from '@lobehub/ui/form';\n\nimport { rulesToFieldProps, type SearchFieldSchema } from '../hooks/useSearchForm';\nimport { styles } from '../style';\nimport type { ProTableFormInstance } from '../type';\nimport FieldControl from './FieldControl';\n\nexport interface LightFilterProps {\n  fields: SearchFieldSchema[];\n  form: ProTableFormInstance;\n  ignoreRules?: boolean;\n  placeholder: { input: string; select: string };\n}\n\nconst TEXT_TYPES = new Set(['text', 'textarea', 'password', 'code']);\n\nconst LightFilter = ({ fields, form, ignoreRules, placeholder }: LightFilterProps) => (\n  <Form\n    className={styles.lightFilter}\n    data-pro-table-light-filter=\"\"\n    form={form}\n    variant=\"borderless\"\n    layout=\"horizontal\"\n    // The base-ui Form root stacks its children; the light filter is one wrapping row.\n    style={{\n      alignItems: 'center',\n      display: 'flex',\n      flex: '0 1 auto',\n      flexDirection: 'row',\n      flexWrap: 'wrap',\n      gap: 8,\n      minWidth: 0,\n      width: 'auto',\n    }}\n  >\n    {fields.map(({ column, name }) => {\n      const isText =\n        !column.valueEnum &&\n        !column.request &&\n        !column.renderFormItem &&\n        (!column.valueType || TEXT_TYPES.has(column.valueType as string));\n      const wrapped = isText\n        ? {\n            ...column,\n            fieldProps: {\n              ...column.fieldProps,\n              onClear: () => void form.submit(),\n            },\n          }\n        : column;\n      const { required, validate } = ignoreRules\n        ? { required: undefined, validate: undefined }\n        : rulesToFieldProps(column.formItemProps?.rules, column.formItemProps?.required);\n      return (\n        <div className={styles.lightFilterItem} key={name}>\n          <Form.Field\n            bare\n            name={name}\n            required={required}\n            validate={validate}\n            render={({ value, onChange }) => (\n              <FieldControl\n                light\n                column={wrapped}\n                form={form}\n                placeholder={placeholder}\n                value={value}\n                onChange={(next) => {\n                  onChange(next);\n                  if (!isText) void form.submit();\n                }}\n              />\n            )}\n          />\n        </div>\n      );\n    })}\n    {/* Text fields query on Enter through the native form submit. */}\n    <button hidden type=\"submit\" />\n  </Form>\n);\n\nexport default LightFilter;\n"],"mappings":";;;;;;AAcA,MAAM,6BAAa,IAAI,IAAI;CAAC;CAAQ;CAAY;CAAY;AAAM,CAAC;AAEnE,MAAM,eAAe,EAAE,QAAQ,MAAM,aAAa,kBAChD,qBAAC,MAAD;CACE,WAAW,OAAO;CAClB,+BAA4B;CACtB;CACN,SAAQ;CACR,QAAO;CAEP,OAAO;EACL,YAAY;EACZ,SAAS;EACT,MAAM;EACN,eAAe;EACf,UAAU;EACV,KAAK;EACL,UAAU;EACV,OAAO;CACT;CAhBF,UAAA,CAkBG,OAAO,KAAK,EAAE,QAAQ,WAAW;EAChC,MAAM,SACJ,CAAC,OAAO,aACR,CAAC,OAAO,WACR,CAAC,OAAO,mBACP,CAAC,OAAO,aAAa,WAAW,IAAI,OAAO,SAAmB;EACjE,MAAM,UAAU,SACZ;GACE,GAAG;GACH,YAAY;IACV,GAAG,OAAO;IACV,eAAe,KAAK,KAAK,OAAO;GAClC;EACF,IACA;EACJ,MAAM,EAAE,UAAU,aAAa,cAC3B;GAAE,UAAU,KAAA;GAAW,UAAU,KAAA;EAAU,IAC3C,kBAAkB,OAAO,eAAe,OAAO,OAAO,eAAe,QAAQ;EACjF,OACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GACrB,UAAA,oBAAC,KAAK,OAAN;IACE,MAAA;IACM;IACI;IACA;IACV,SAAS,EAAE,OAAO,eAChB,oBAAC,cAAD;KACE,OAAA;KACA,QAAQ;KACF;KACO;KACN;KACP,WAAW,SAAS;MAClB,SAAS,IAAI;MACb,IAAI,CAAC,QAAQ,KAAU,OAAO;KAChC;IACD,CAAA;GAEJ,CAAA;EACE,GApBwC,IAoBxC;CAET,CAAC,GAED,oBAAC,UAAD;EAAQ,QAAA;EAAO,MAAK;CAAU,CAAA,CAC1B"}

package/es/ProTable/parts/OptionPopover.mjs

@@ -0,0 +1,17 @@
+import { PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot } from "../../Popover/atoms.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/ProTable/parts/OptionPopover.tsx
+const OptionPopover = ({ anchor, children, onOpenChange, open }) => /* @__PURE__ */ jsx(PopoverRoot, {
+	open: open && !!anchor,
+	onOpenChange: (next) => onOpenChange(next),
+	children: /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
+		anchor,
+		placement: "bottomRight",
+		sideOffset: 4,
+		children: /* @__PURE__ */ jsx(PopoverPopup, { children })
+	}) })
+});
+//#endregion
+export { OptionPopover as default };
+
+//# sourceMappingURL=OptionPopover.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionPopover.mjs","names":[],"sources":["../../../src/ProTable/parts/OptionPopover.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\n\nimport { PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot } from '@/Popover';\n\nexport interface OptionPopoverProps {\n  anchor: HTMLElement | null;\n  children: ReactNode;\n  onOpenChange: (open: boolean) => void;\n  open: boolean;\n}\n\nconst OptionPopover = ({ anchor, children, onOpenChange, open }: OptionPopoverProps) => (\n  <PopoverRoot open={open && !!anchor} onOpenChange={(next) => onOpenChange(next)}>\n    <PopoverPortal>\n      <PopoverPositioner anchor={anchor} placement=\"bottomRight\" sideOffset={4}>\n        <PopoverPopup>{children}</PopoverPopup>\n      </PopoverPositioner>\n    </PopoverPortal>\n  </PopoverRoot>\n);\n\nexport default OptionPopover;\n"],"mappings":";;;AAWA,MAAM,iBAAiB,EAAE,QAAQ,UAAU,cAAc,WACvD,oBAAC,aAAD;CAAa,MAAM,QAAQ,CAAC,CAAC;CAAQ,eAAe,SAAS,aAAa,IAAI;CAC5E,UAAA,oBAAC,eAAD,EAAA,UACE,oBAAC,mBAAD;EAA2B;EAAQ,WAAU;EAAc,YAAY;EACrE,UAAA,oBAAC,cAAD,EAAe,SAAuB,CAAA;CACrB,CAAA,EACN,CAAA;AACJ,CAAA"}

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"}