@lobehub/ui 5.61.1 → 5.62.0

package/es/base-ui/ProTable/ColumnSetting.mjs

@@ -0,0 +1,156 @@
+import Button from "../Button/Button.mjs";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import Checkbox_default from "../Checkbox/Checkbox.mjs";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowLeftToLine, ArrowRightToLine, ArrowUp, PinOff } from "lucide-react";
+//#region src/base-ui/ProTable/ColumnSetting.tsx
+const fixedGroupOf = (fixed) => {
+	if (fixed === true || fixed === "left" || fixed === "start") return "start";
+	if (fixed === "right" || fixed === "end") return "end";
+	return "none";
+};
+/** Toolbar "column setting" panel (rendered in an `OptionPopover`): show / hide, pin to start / end, reorder, reset. */
+const ColumnSetting = ({ checkable = true, columns, draggable = true, locale, onChange, onReset, showListItemOption = true, state }) => {
+	const isShown = (key) => state[key]?.show !== false;
+	const toggleable = columns.filter((column) => !column.disabled);
+	const shownCount = toggleable.filter((column) => isShown(column.key)).length;
+	const patch = (key, value) => onChange({
+		...state,
+		[key]: {
+			...state[key],
+			...value
+		}
+	});
+	const setAll = (show) => {
+		const next = { ...state };
+		toggleable.forEach(({ key }) => {
+			next[key] = {
+				...next[key],
+				show
+			};
+		});
+		onChange(next);
+	};
+	const groups = {
+		end: [],
+		none: [],
+		start: []
+	};
+	columns.forEach((column) => groups[fixedGroupOf(state[column.key]?.fixed)].push(column));
+	const move = (key, delta) => {
+		const keys = columns.map((column) => column.key);
+		const from = keys.indexOf(key);
+		const to = from + delta;
+		if (from < 0 || to < 0 || to >= keys.length) return;
+		[keys[from], keys[to]] = [keys[to], keys[from]];
+		const next = { ...state };
+		keys.forEach((k, order) => {
+			next[k] = {
+				...next[k],
+				order
+			};
+		});
+		onChange(next);
+	};
+	const renderItem = (column, group) => {
+		const position = columns.indexOf(column);
+		return /* @__PURE__ */ jsxs("div", {
+			className: styles.settingItem,
+			"data-column-key": column.key,
+			children: [
+				checkable ? /* @__PURE__ */ jsx(Checkbox_default, {
+					checked: isShown(column.key),
+					disabled: column.disabled,
+					onChange: (checked) => patch(column.key, { show: checked }),
+					children: /* @__PURE__ */ jsx("span", {
+						className: styles.settingItemTitle,
+						children: column.title
+					})
+				}) : /* @__PURE__ */ jsx("span", {
+					className: styles.settingItemTitle,
+					children: column.title
+				}),
+				/* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+				/* @__PURE__ */ jsxs("span", {
+					className: styles.settingItemActions,
+					"data-setting-actions": "",
+					children: [
+						showListItemOption && group !== "start" && /* @__PURE__ */ jsx(ActionIcon, {
+							"aria-label": locale.fixedStart,
+							icon: ArrowLeftToLine,
+							size: "small",
+							onClick: () => patch(column.key, { fixed: "start" })
+						}),
+						showListItemOption && group !== "none" && /* @__PURE__ */ jsx(ActionIcon, {
+							"aria-label": locale.noFixed,
+							icon: PinOff,
+							size: "small",
+							onClick: () => patch(column.key, { fixed: void 0 })
+						}),
+						showListItemOption && group !== "end" && /* @__PURE__ */ jsx(ActionIcon, {
+							"aria-label": locale.fixedEnd,
+							icon: ArrowRightToLine,
+							size: "small",
+							onClick: () => patch(column.key, { fixed: "end" })
+						}),
+						draggable && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ActionIcon, {
+							"aria-label": locale.moveUp,
+							disabled: position === 0,
+							icon: ArrowUp,
+							size: "small",
+							onClick: () => move(column.key, -1)
+						}), /* @__PURE__ */ jsx(ActionIcon, {
+							"aria-label": locale.moveDown,
+							disabled: position === columns.length - 1,
+							icon: ArrowDown,
+							size: "small",
+							onClick: () => move(column.key, 1)
+						})] })
+					]
+				})
+			]
+		}, column.key);
+	};
+	const titles = {
+		end: locale.fixedEndTitle,
+		none: locale.unfixedTitle,
+		start: locale.fixedStartTitle
+	};
+	const pinnedAny = groups.start.length > 0 || groups.end.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: styles.setting,
+		"data-pro-table-setting": "",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: styles.settingHeader,
+			children: [checkable ? /* @__PURE__ */ jsx(Checkbox_default, {
+				checked: shownCount > 0 && shownCount === toggleable.length,
+				indeterminate: shownCount > 0 && shownCount < toggleable.length,
+				onChange: (checked) => setAll(checked),
+				children: locale.columnSettingTitle
+			}) : /* @__PURE__ */ jsx("span", { children: locale.columnSettingTitle }), /* @__PURE__ */ jsx(Button, {
+				size: "small",
+				type: "link",
+				onClick: onReset,
+				children: locale.columnSettingReset
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: styles.settingList,
+			children: [
+				"start",
+				"none",
+				"end"
+			].map((group) => groups[group].length === 0 ? null : /* @__PURE__ */ jsxs("div", {
+				"data-group": group,
+				children: [pinnedAny && /* @__PURE__ */ jsx("div", {
+					className: styles.settingGroupTitle,
+					children: titles[group]
+				}), groups[group].map((column) => renderItem(column, group))]
+			}, group))
+		})]
+	});
+};
+//#endregion
+export { ColumnSetting as default, fixedGroupOf };
+
+//# sourceMappingURL=ColumnSetting.mjs.map

package/es/base-ui/ProTable/ColumnSetting.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnSetting.mjs","names":["Checkbox"],"sources":["../../../src/base-ui/ProTable/ColumnSetting.tsx"],"sourcesContent":["import { ArrowDown, ArrowLeftToLine, ArrowRightToLine, ArrowUp, PinOff } from 'lucide-react';\nimport { type ReactNode } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport Button from '@/base-ui/Button';\nimport Checkbox from '@/base-ui/Checkbox/Checkbox';\n\nimport { styles } from './style';\nimport type { ProTableColumnsStateItem, ProTableColumnsStateMap, ProTableLocale } from './type';\n\nexport interface SettingColumn {\n  disabled: boolean;\n  key: string;\n  title: ReactNode;\n}\n\ntype FixedGroup = 'start' | 'none' | 'end';\n\nexport const fixedGroupOf = (fixed: ProTableColumnsStateItem['fixed']): FixedGroup => {\n  if (fixed === true || fixed === 'left' || fixed === 'start') return 'start';\n  if (fixed === 'right' || fixed === 'end') return 'end';\n  return 'none';\n};\n\nexport interface ColumnSettingProps {\n  checkable?: boolean;\n  columns: SettingColumn[];\n  draggable?: boolean;\n  locale: Required<\n    Pick<\n      ProTableLocale,\n      | 'columnSetting'\n      | 'columnSettingReset'\n      | 'columnSettingTitle'\n      | 'fixedEnd'\n      | 'fixedEndTitle'\n      | 'fixedStart'\n      | 'fixedStartTitle'\n      | 'moveDown'\n      | 'moveUp'\n      | 'noFixed'\n      | 'unfixedTitle'\n    >\n  >;\n  onChange: (map: ProTableColumnsStateMap) => void;\n  onReset: () => void;\n  showListItemOption?: boolean;\n  state: ProTableColumnsStateMap;\n}\n\n/** Toolbar \"column setting\" panel (rendered in an `OptionPopover`): show / hide, pin to start / end, reorder, reset. */\nconst ColumnSetting = ({\n  checkable = true,\n  columns,\n  draggable = true,\n  locale,\n  onChange,\n  onReset,\n  showListItemOption = true,\n  state,\n}: ColumnSettingProps) => {\n  const isShown = (key: string) => state[key]?.show !== false;\n  const toggleable = columns.filter((column) => !column.disabled);\n  const shownCount = toggleable.filter((column) => isShown(column.key)).length;\n\n  const patch = (key: string, value: Partial<ProTableColumnsStateItem>) =>\n    onChange({ ...state, [key]: { ...state[key], ...value } });\n\n  const setAll = (show: boolean) => {\n    const next = { ...state };\n    toggleable.forEach(({ key }) => {\n      next[key] = { ...next[key], show };\n    });\n    onChange(next);\n  };\n\n  const groups: Record<FixedGroup, SettingColumn[]> = { end: [], none: [], start: [] };\n  columns.forEach((column) => groups[fixedGroupOf(state[column.key]?.fixed)].push(column));\n\n  // Reorder within the full list; `order` is rewritten for every column so it stays dense.\n  const move = (key: string, delta: -1 | 1) => {\n    const keys = columns.map((column) => column.key);\n    const from = keys.indexOf(key);\n    const to = from + delta;\n    if (from < 0 || to < 0 || to >= keys.length) return;\n    [keys[from], keys[to]] = [keys[to], keys[from]];\n    const next = { ...state };\n    keys.forEach((k, order) => {\n      next[k] = { ...next[k], order };\n    });\n    onChange(next);\n  };\n\n  const renderItem = (column: SettingColumn, group: FixedGroup) => {\n    const position = columns.indexOf(column);\n    return (\n      <div className={styles.settingItem} data-column-key={column.key} key={column.key}>\n        {checkable ? (\n          <Checkbox\n            checked={isShown(column.key)}\n            disabled={column.disabled}\n            onChange={(checked) => patch(column.key, { show: checked })}\n          >\n            <span className={styles.settingItemTitle}>{column.title}</span>\n          </Checkbox>\n        ) : (\n          <span className={styles.settingItemTitle}>{column.title}</span>\n        )}\n        <span style={{ flex: 1 }} />\n        <span className={styles.settingItemActions} data-setting-actions=\"\">\n          {showListItemOption && group !== 'start' && (\n            <ActionIcon\n              aria-label={locale.fixedStart}\n              icon={ArrowLeftToLine}\n              size=\"small\"\n              onClick={() => patch(column.key, { fixed: 'start' })}\n            />\n          )}\n          {showListItemOption && group !== 'none' && (\n            <ActionIcon\n              aria-label={locale.noFixed}\n              icon={PinOff}\n              size=\"small\"\n              onClick={() => patch(column.key, { fixed: undefined })}\n            />\n          )}\n          {showListItemOption && group !== 'end' && (\n            <ActionIcon\n              aria-label={locale.fixedEnd}\n              icon={ArrowRightToLine}\n              size=\"small\"\n              onClick={() => patch(column.key, { fixed: 'end' })}\n            />\n          )}\n          {draggable && (\n            <>\n              <ActionIcon\n                aria-label={locale.moveUp}\n                disabled={position === 0}\n                icon={ArrowUp}\n                size=\"small\"\n                onClick={() => move(column.key, -1)}\n              />\n              <ActionIcon\n                aria-label={locale.moveDown}\n                disabled={position === columns.length - 1}\n                icon={ArrowDown}\n                size=\"small\"\n                onClick={() => move(column.key, 1)}\n              />\n            </>\n          )}\n        </span>\n      </div>\n    );\n  };\n\n  const titles: Record<FixedGroup, ReactNode> = {\n    end: locale.fixedEndTitle,\n    none: locale.unfixedTitle,\n    start: locale.fixedStartTitle,\n  };\n  const pinnedAny = groups.start.length > 0 || groups.end.length > 0;\n\n  const panel = (\n    <div className={styles.setting} data-pro-table-setting=\"\">\n      <div className={styles.settingHeader}>\n        {checkable ? (\n          <Checkbox\n            checked={shownCount > 0 && shownCount === toggleable.length}\n            indeterminate={shownCount > 0 && shownCount < toggleable.length}\n            onChange={(checked) => setAll(checked)}\n          >\n            {locale.columnSettingTitle}\n          </Checkbox>\n        ) : (\n          <span>{locale.columnSettingTitle}</span>\n        )}\n        <Button size=\"small\" type=\"link\" onClick={onReset}>\n          {locale.columnSettingReset}\n        </Button>\n      </div>\n      <div className={styles.settingList}>\n        {(['start', 'none', 'end'] as FixedGroup[]).map((group) =>\n          groups[group].length === 0 ? null : (\n            <div data-group={group} key={group}>\n              {pinnedAny && <div className={styles.settingGroupTitle}>{titles[group]}</div>}\n              {groups[group].map((column) => renderItem(column, group))}\n            </div>\n          ),\n        )}\n      </div>\n    </div>\n  );\n\n  return panel;\n};\n\nexport default ColumnSetting;\n"],"mappings":"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"}

package/es/base-ui/ProTable/FieldControl.mjs

@@ -0,0 +1,108 @@
+import Switch from "../Switch/Switch.mjs";
+import Input_default from "../Input/Input.mjs";
+import InputNumber_default from "../Input/InputNumber.mjs";
+import Select from "../Select/Select.mjs";
+import DatePicker from "../DatePicker/DatePicker.mjs";
+import DateRangePicker from "../DatePicker/DateRangePicker.mjs";
+import { resolveValueEnum, resolveValueType, valueEnumToList } from "./utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useThemeMode } from "antd-style";
+//#region src/base-ui/ProTable/FieldControl.tsx
+const SELECT_TYPES = /* @__PURE__ */ new Set([
+	"select",
+	"radio",
+	"checkbox"
+]);
+/** The search-form control of a column (Pro "edit" mode, query flavor). */
+const FieldControl = ({ column, form, light, onChange, placeholder, value }) => {
+	const valueType = resolveValueType(column) ?? "text";
+	const valueEnum = resolveValueEnum(column);
+	const { fieldProps = {} } = column;
+	const label = typeof column.title === "string" ? column.title : void 0;
+	const size = light ? "small" : void 0;
+	const { isDarkMode } = useThemeMode();
+	const variant = light ? isDarkMode ? "filled" : "outlined" : void 0;
+	if (column.renderFormItem) return column.renderFormItem(column, {
+		form,
+		isQuery: !light,
+		onChange,
+		value
+	}, form);
+	if (valueEnum || SELECT_TYPES.has(valueType)) {
+		const options = fieldProps.options ?? valueEnumToList(valueEnum).map((item) => ({
+			disabled: item.disabled,
+			label: item.text,
+			value: item.value
+		}));
+		return /* @__PURE__ */ jsx(Select, {
+			allowClear: true,
+			mode: valueType === "checkbox" ? "multiple" : void 0,
+			options,
+			placeholder: light ? label : placeholder.select,
+			size,
+			style: { width: "100%" },
+			value: value ?? (valueType === "checkbox" ? [] : null),
+			variant,
+			...fieldProps,
+			onChange: (next) => onChange(next ?? void 0)
+		});
+	}
+	switch (valueType) {
+		case "digit":
+		case "money":
+		case "percent":
+		case "progress": return /* @__PURE__ */ jsx(InputNumber_default, {
+			placeholder: light ? label : placeholder.input,
+			size,
+			style: { width: "100%" },
+			value: value ?? null,
+			variant,
+			...fieldProps,
+			onChange: (next) => onChange(next ?? void 0)
+		});
+		case "switch": return /* @__PURE__ */ jsx(Switch, {
+			checked: !!value,
+			...fieldProps,
+			onChange: (next) => onChange(next)
+		});
+		case "date":
+		case "dateTime": return /* @__PURE__ */ jsx(DatePicker, {
+			allowClear: true,
+			placeholder: light ? label : placeholder.select,
+			size,
+			style: { width: "100%" },
+			value: value ?? null,
+			variant,
+			...fieldProps,
+			onChange: (next) => onChange(next ?? void 0)
+		});
+		case "dateRange":
+		case "dateTimeRange": return /* @__PURE__ */ jsx(DateRangePicker, {
+			allowClear: true,
+			size,
+			style: { width: "100%" },
+			value: value ?? [null, null],
+			variant,
+			...fieldProps,
+			onChange: (next) => onChange(next && (next[0] || next[1]) ? next : void 0)
+		});
+		default: return /* @__PURE__ */ jsx(Input_default, {
+			allowClear: true,
+			placeholder: light ? label : placeholder.input,
+			size,
+			type: valueType === "password" ? "password" : void 0,
+			value: value ?? "",
+			variant,
+			...fieldProps,
+			onChange: (event) => onChange(event.target.value === "" ? void 0 : event.target.value),
+			onClear: () => {
+				onChange(void 0);
+				fieldProps.onClear?.();
+			}
+		});
+	}
+};
+//#endregion
+export { FieldControl as default };
+
+//# sourceMappingURL=FieldControl.mjs.map

package/es/base-ui/ProTable/FieldControl.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldControl.mjs","names":["InputNumber","Input"],"sources":["../../../src/base-ui/ProTable/FieldControl.tsx"],"sourcesContent":["import { useThemeMode } from 'antd-style';\nimport { type ReactNode } from 'react';\n\nimport DatePicker from '@/base-ui/DatePicker/DatePicker';\nimport DateRangePicker from '@/base-ui/DatePicker/DateRangePicker';\nimport Input from '@/base-ui/Input/Input';\nimport InputNumber from '@/base-ui/Input/InputNumber';\nimport Select from '@/base-ui/Select';\nimport Switch from '@/base-ui/Switch';\n\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 filter bar: small controls, outlined in light mode and filled in dark mode. */\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/** The search-form control of a column (Pro \"edit\" mode, query flavor). */\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\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 (valueEnum || SELECT_TYPES.has(valueType)) {\n    const 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        mode={valueType === 'checkbox' ? 'multiple' : undefined}\n        options={options}\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      />\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={value ?? null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(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 ?? [null, null]}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(next && (next[0] || next[1]) ? next : undefined)}\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":";;;;;;;;;;AAuBA,MAAM,+BAAe,IAAI,IAAuB;CAAC;CAAU;CAAS;AAAU,CAAC;;AAG/E,MAAM,gBAAgB,EAAE,QAAQ,MAAM,OAAO,UAAU,aAAa,YAA+B;CACjG,MAAM,YAAY,iBAAiB,MAAM,KAAK;CAC9C,MAAM,YAAY,iBAAiB,MAAM;CACzC,MAAM,EAAE,aAAa,CAAC,MAAM;CAC5B,MAAM,QAAQ,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ,KAAA;CAChE,MAAM,OAAO,QAAQ,UAAU,KAAA;CAC/B,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,UAAU,QAAS,aAAa,WAAW,aAAc,KAAA;CAE/D,IAAI,OAAO,gBACT,OAAO,OAAO,eACZ,QACA;EAAE;EAAM,SAAS,CAAC;EAAO;EAAU;CAAM,GACzC,IACF;CAGF,IAAI,aAAa,aAAa,IAAI,SAAS,GAAG;EAC5C,MAAM,UACJ,WAAW,WACX,gBAAgB,SAAS,CAAC,CAAC,KAAK,UAAU;GACxC,UAAU,KAAK;GACf,OAAO,KAAK;GACZ,OAAO,KAAK;EACd,EAAE;EACJ,OACE,oBAAC,QAAD;GACE,YAAA;GACA,MAAM,cAAc,aAAa,aAAa,KAAA;GACrC;GACT,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,UAAU,cAAc,aAAa,CAAC,IAAI;GACxC;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,QAAQ,KAAA,CAAS;EAC/C,CAAA;CAEL;CAEA,QAAQ,WAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,YACH,OACE,oBAACA,qBAAD;GACE,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,SAAS;GACP;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,QAAQ,KAAA,CAAS;EAC/C,CAAA;EAGL,KAAK,UACH,OAAO,oBAAC,QAAD;GAAQ,SAAS,CAAC,CAAC;GAAO,GAAI;GAAY,WAAW,SAAS,SAAS,IAAI;EAAI,CAAA;EAExF,KAAK;EACL,KAAK,YACH,OACE,oBAAC,YAAD;GACE,YAAA;GACA,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,SAAS;GACP;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,QAAQ,KAAA,CAAS;EAC/C,CAAA;EAGL,KAAK;EACL,KAAK,iBACH,OACE,oBAAC,iBAAD;GACE,YAAA;GACM;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,SAAS,CAAC,MAAM,IAAI;GAClB;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,SAAS,KAAK,MAAM,KAAK,MAAM,OAAO,KAAA,CAAS;EAC7E,CAAA;EAGL,SACE,OACE,oBAACC,eAAD;GACE,YAAA;GACA,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,MAAM,cAAc,aAAa,aAAa,KAAA;GAC9C,OAAO,SAAS;GACP;GACT,GAAI;GACJ,WAAW,UAAU,SAAS,MAAM,OAAO,UAAU,KAAK,KAAA,IAAY,MAAM,OAAO,KAAK;GACxF,eAAe;IACb,SAAS,KAAA,CAAS;IAClB,WAAW,UAAU;GACvB;EACD,CAAA;CAGP;AACF"}

package/es/base-ui/ProTable/LightFilter.mjs

@@ -0,0 +1,71 @@
+import { Form } from "../FormKit/index.mjs";
+import { styles } from "./style.mjs";
+import FieldControl from "./FieldControl.mjs";
+import { rulesToFieldProps } from "./useSearchForm.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/base-ui/ProTable/LightFilter.tsx
+const TEXT_TYPES = /* @__PURE__ */ new Set([
+	"text",
+	"textarea",
+	"password",
+	"code"
+]);
+/**
+* Pro `LightFilter` (`search.filterType: 'light'`): the same base-ui Form instance rendered as
+* bare inline fields in the toolbar; select-like fields query on change, text fields on Enter / clear.
+*/
+const LightFilter = ({ fields, form, 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.renderFormItem && (!column.valueType || TEXT_TYPES.has(column.valueType));
+		const wrapped = isText ? {
+			...column,
+			fieldProps: {
+				...column.fieldProps,
+				onClear: () => void form.submit()
+			}
+		} : column;
+		const { required, validate } = 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/base-ui/ProTable/LightFilter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightFilter.mjs","names":[],"sources":["../../../src/base-ui/ProTable/LightFilter.tsx"],"sourcesContent":["import Form from '@lobehub/ui/base-ui/form';\n\nimport FieldControl from './FieldControl';\nimport { styles } from './style';\nimport type { ProTableFormInstance } from './type';\nimport { rulesToFieldProps, type SearchFieldSchema } from './useSearchForm';\n\nexport interface LightFilterProps {\n  fields: SearchFieldSchema[];\n  form: ProTableFormInstance;\n  placeholder: { input: string; select: string };\n}\n\nconst TEXT_TYPES = new Set(['text', 'textarea', 'password', 'code']);\n\n/**\n * Pro `LightFilter` (`search.filterType: 'light'`): the same base-ui Form instance rendered as\n * bare inline fields in the toolbar; select-like fields query on change, text fields on Enter / clear.\n */\nconst LightFilter = ({ fields, form, 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.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 } = rulesToFieldProps(\n        column.formItemProps?.rules,\n        column.formItemProps?.required,\n      );\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":";;;;;;AAaA,MAAM,6BAAa,IAAI,IAAI;CAAC;CAAQ;CAAY;CAAY;AAAM,CAAC;;;;;AAMnE,MAAM,eAAe,EAAE,QAAQ,MAAM,kBACnC,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,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,kBAC7B,OAAO,eAAe,OACtB,OAAO,eAAe,QACxB;EACA,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/base-ui/ProTable/OptionPopover.mjs

@@ -0,0 +1,21 @@
+import { PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot } from "../Popover/atoms.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/base-ui/ProTable/OptionPopover.tsx
+/**
+* A controlled popover anchored to an `ActionIconGroup` item. The group only renders plain
+* buttons, so the density menu and column setting panel open from their click handlers.
+*/
+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/base-ui/ProTable/OptionPopover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionPopover.mjs","names":[],"sources":["../../../src/base-ui/ProTable/OptionPopover.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\n\nimport { PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot } from '@/base-ui/Popover';\n\nexport interface OptionPopoverProps {\n  /** The toolbar icon that was clicked; the popup is positioned against it. */\n  anchor: HTMLElement | null;\n  children: ReactNode;\n  onOpenChange: (open: boolean) => void;\n  open: boolean;\n}\n\n/**\n * A controlled popover anchored to an `ActionIconGroup` item. The group only renders plain\n * buttons, so the density menu and column setting panel open from their click handlers.\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":";;;;;;;AAgBA,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/base-ui/ProTable/ProTable.d.mts

@@ -0,0 +1,13 @@
+import { ProTableLocale, ProTableProps } from "./type.mjs";
+import { ReactNode } from "react";
+//#region src/base-ui/ProTable/ProTable.d.ts
+declare const DEFAULT_PRO_TABLE_LOCALE: Required<Omit<ProTableLocale, 'alertSelected'>> & {
+  alertSelected: (count: number) => ReactNode;
+};
+declare const ProTable: {
+  <T extends Record<string, any> = any, Params extends Record<string, any> = Record<string, any>>(props: ProTableProps<T, Params>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { DEFAULT_PRO_TABLE_LOCALE, ProTable as default };
+//# sourceMappingURL=ProTable.d.mts.map