@hanwenbo/x-web-pro-components 0.0.1

package/es/components/field/index.js

@@ -0,0 +1,761 @@
+var _excluded = ["options"],
+  _excluded2 = ["options", "treeData"],
+  _excluded3 = ["options"],
+  _excluded4 = ["request", "params", "debounceTime", "valueEnum"],
+  _excluded5 = ["text", "valueType", "mode", "readonly", "valueEnum", "fieldProps", "placeholder", "emptyText", "render", "formItemRender", "disabled"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import React, { useEffect, useMemo, useState } from 'react';
+import dayjs from 'dayjs';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+import isoWeek from 'dayjs/plugin/isoWeek';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+import weekOfYear from 'dayjs/plugin/weekOfYear';
+import { Avatar } from '@hanwenbo/x-web-ui/avatar';
+import { Checkbox, CheckboxGroup } from '@hanwenbo/x-web-ui/checkbox';
+import { Image } from '@hanwenbo/x-web-ui/image';
+import { InputItem } from '@hanwenbo/x-web-ui/inputItem';
+import { ProgressBar } from '@hanwenbo/x-web-ui/progressBar';
+import { Radio, RadioGroup } from '@hanwenbo/x-web-ui/radio';
+import { Rate } from '@hanwenbo/x-web-ui/rate';
+import { Segmented } from '@hanwenbo/x-web-ui/segmented';
+import { Select } from '@hanwenbo/x-web-ui/select';
+import { Slider } from '@hanwenbo/x-web-ui/slider';
+import { Switch } from '@hanwenbo/x-web-ui/switch';
+import { TextArea } from '@hanwenbo/x-web-ui/textArea';
+import { TreeSelect } from '@hanwenbo/x-web-ui/treeSelect';
+import { cn } from '@hanwenbo/x-web-ui/utils/cn';
+import { useProConfig } from "../provider";
+import { CascaderFieldControl, DatePickerFieldControl, DateRangeFieldControl, DigitRangeFieldControl } from "../form/fieldControls";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+dayjs.extend(relativeTime);
+dayjs.extend(advancedFormat);
+dayjs.extend(isoWeek);
+dayjs.extend(quarterOfYear);
+dayjs.extend(weekOfYear);
+var STATUS_CLASS_MAP = {
+  default: 'border-border bg-muted/50 text-muted-foreground',
+  success: 'border-success/30 bg-success/10 text-success',
+  processing: 'border-primary/30 bg-primary/10 text-primary',
+  warning: 'border-warning/30 bg-warning/10 text-warning',
+  error: 'border-destructive/30 bg-destructive/10 text-destructive'
+};
+var OPTION_LIKE_VALUE_TYPES = new Set(['select', 'tag', 'checkbox', 'radio', 'treeSelect', 'cascader', 'segmented']);
+var toValueEnumEntries = function toValueEnumEntries(valueEnum) {
+  if (!valueEnum) {
+    return [];
+  }
+  if (valueEnum instanceof Map) {
+    return Array.from(valueEnum.entries());
+  }
+  return Object.entries(valueEnum);
+};
+var normalizeValueEnumItem = function normalizeValueEnumItem(item) {
+  if (item === undefined || item === null) {
+    return undefined;
+  }
+  if ( /*#__PURE__*/React.isValidElement(item) || _typeof(item) !== 'object' || !('text' in item)) {
+    return {
+      text: item
+    };
+  }
+  var normalizedItem = item;
+  var normalizedStatus = typeof normalizedItem.status === 'string' ? normalizedItem.status.toLowerCase() : normalizedItem.status;
+  return _objectSpread(_objectSpread({}, normalizedItem), {}, {
+    status: normalizedStatus
+  });
+};
+var getValueEnumItem = function getValueEnumItem(valueEnum, value) {
+  var entries = toValueEnumEntries(valueEnum);
+  var hit = entries.find(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 1),
+      key = _ref2[0];
+    return String(key) === String(value);
+  });
+  return normalizeValueEnumItem(hit === null || hit === void 0 ? void 0 : hit[1]);
+};
+export var proFieldParsingValueEnumToArray = function proFieldParsingValueEnumToArray(valueEnum) {
+  return toValueEnumEntries(valueEnum).map(function (_ref3) {
+    var _normalizedItem$text;
+    var _ref4 = _slicedToArray(_ref3, 2),
+      value = _ref4[0],
+      item = _ref4[1];
+    var normalizedItem = normalizeValueEnumItem(item);
+    return {
+      label: (_normalizedItem$text = normalizedItem === null || normalizedItem === void 0 ? void 0 : normalizedItem.text) !== null && _normalizedItem$text !== void 0 ? _normalizedItem$text : String(value),
+      value: value,
+      disabled: normalizedItem === null || normalizedItem === void 0 ? void 0 : normalizedItem.disabled
+    };
+  });
+};
+export var getEffectiveValueType = function getEffectiveValueType(valueType, valueEnum) {
+  var legacyValueType = String(valueType || 'text');
+  var normalizedValueType = legacyValueType;
+  if (legacyValueType === 'number') {
+    normalizedValueType = 'digit';
+  } else if (legacyValueType === 'img') {
+    normalizedValueType = 'image';
+  } else if (legacyValueType === 'status') {
+    normalizedValueType = 'tag';
+  }
+  if ((valueType === undefined || valueType === null || legacyValueType === 'text') && toValueEnumEntries(valueEnum).length > 0) {
+    return 'select';
+  }
+  return normalizedValueType;
+};
+export var isOptionLikeValueType = function isOptionLikeValueType(valueType) {
+  return OPTION_LIKE_VALUE_TYPES.has(String(valueType || 'text'));
+};
+export var defaultRenderText = function defaultRenderText(text) {
+  var emptyText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '-';
+  if (text === undefined || text === null || text === '') {
+    return /*#__PURE__*/_jsx("span", {
+      className: "text-muted-foreground",
+      children: emptyText
+    });
+  }
+  if (typeof text === 'string' || typeof text === 'number' || typeof text === 'boolean' || typeof text === 'bigint') {
+    return /*#__PURE__*/_jsx("span", {
+      children: String(text)
+    });
+  }
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: text
+  });
+};
+var getDefaultEditPlaceholder = function getDefaultEditPlaceholder(valueType, placeholder) {
+  if (placeholder !== undefined) {
+    return Array.isArray(placeholder) ? placeholder[0] : placeholder;
+  }
+  switch (valueType) {
+    case 'select':
+    case 'tag':
+    case 'treeSelect':
+    case 'cascader':
+    case 'segmented':
+    case 'date':
+    case 'dateMonth':
+    case 'dateYear':
+    case 'dateTime':
+    case 'time':
+      return '请选择';
+    default:
+      return '请输入';
+  }
+};
+var OptionFieldControl = function OptionFieldControl(_ref5) {
+  var valueType = _ref5.valueType,
+    fieldProps = _ref5.fieldProps,
+    valueEnum = _ref5.valueEnum,
+    placeholder = _ref5.placeholder,
+    disabled = _ref5.disabled;
+  var fallbackOptions = useMemo(function () {
+    return (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.options) || proFieldParsingValueEnumToArray(valueEnum);
+  }, [fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.options, valueEnum]);
+  var _useState = useState(fallbackOptions),
+    _useState2 = _slicedToArray(_useState, 2),
+    requestOptions = _useState2[0],
+    setRequestOptions = _useState2[1];
+  useEffect(function () {
+    if (!(fieldProps !== null && fieldProps !== void 0 && fieldProps.request)) {
+      setRequestOptions(fallbackOptions);
+      return;
+    }
+    var active = true;
+    Promise.resolve(fieldProps.request(fieldProps.params)).then(function (result) {
+      if (!active) {
+        return;
+      }
+      setRequestOptions(Array.isArray(result) ? result : []);
+    }).catch(function (error) {
+      console.error('ProField request options error:', error);
+    });
+    return function () {
+      active = false;
+    };
+  }, [fallbackOptions, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.params, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.request]);
+  var mergedFieldProps = _objectSpread({
+    placeholder: getDefaultEditPlaceholder(valueType, placeholder),
+    disabled: disabled
+  }, fieldProps || {});
+  var resolvedOptions = requestOptions;
+  var checkboxOptions = Array.isArray(resolvedOptions) ? resolvedOptions : [];
+  var radioOptions = Array.isArray(resolvedOptions) ? resolvedOptions : [];
+  switch (valueType) {
+    case 'select':
+    case 'tag':
+      {
+        var _ignoredOptions = mergedFieldProps.options,
+          selectFieldProps = _objectWithoutProperties(mergedFieldProps, _excluded);
+        return /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({}, selectFieldProps), {}, {
+          options: resolvedOptions
+        }));
+      }
+    case 'checkbox':
+      if (checkboxOptions.length > 0 || mergedFieldProps.mode === 'multiple') {
+        return /*#__PURE__*/_jsx(CheckboxGroup, _objectSpread(_objectSpread({}, mergedFieldProps), {}, {
+          children: checkboxOptions.map(function (option) {
+            return /*#__PURE__*/_jsx(Checkbox, {
+              value: option.value,
+              disabled: option.disabled,
+              children: option.label
+            }, String(option.value));
+          })
+        }));
+      }
+      return /*#__PURE__*/_jsx(Checkbox, _objectSpread(_objectSpread({}, mergedFieldProps), {}, {
+        children: mergedFieldProps.children || placeholder
+      }));
+    case 'radio':
+      if (radioOptions.length > 0) {
+        return /*#__PURE__*/_jsx(RadioGroup, _objectSpread(_objectSpread({}, mergedFieldProps), {}, {
+          children: radioOptions.map(function (option) {
+            return /*#__PURE__*/_jsx(Radio, {
+              value: option.value,
+              disabled: option.disabled,
+              children: option.label
+            }, String(option.value));
+          })
+        }));
+      }
+      return /*#__PURE__*/_jsx(Radio, _objectSpread(_objectSpread({}, mergedFieldProps), {}, {
+        children: mergedFieldProps.children || placeholder
+      }));
+    case 'treeSelect':
+      {
+        var _ignoredOptions2 = mergedFieldProps.options,
+          treeData = mergedFieldProps.treeData,
+          treeSelectFieldProps = _objectWithoutProperties(mergedFieldProps, _excluded2);
+        return /*#__PURE__*/_jsx(TreeSelect, _objectSpread(_objectSpread({}, treeSelectFieldProps), {}, {
+          treeData: treeData || resolvedOptions || []
+        }));
+      }
+    case 'cascader':
+      return /*#__PURE__*/_jsx(CascaderFieldControl, {
+        value: mergedFieldProps.value,
+        onChange: mergedFieldProps.onChange,
+        className: mergedFieldProps.className,
+        placeholder: mergedFieldProps.placeholder,
+        fieldProps: _objectSpread(_objectSpread({}, mergedFieldProps), {}, {
+          options: resolvedOptions
+        })
+      });
+    case 'segmented':
+      {
+        var _ignoredOptions3 = mergedFieldProps.options,
+          segmentedFieldProps = _objectWithoutProperties(mergedFieldProps, _excluded3);
+        return /*#__PURE__*/_jsx(Segmented, _objectSpread(_objectSpread({}, segmentedFieldProps), {}, {
+          options: resolvedOptions
+        }));
+      }
+    default:
+      return null;
+  }
+};
+var renderTag = function renderTag(text, status, color) {
+  var className = STATUS_CLASS_MAP[status || 'default'] || STATUS_CLASS_MAP.default;
+  return /*#__PURE__*/_jsx("span", {
+    className: cn('inline-flex shrink-0 items-center whitespace-nowrap rounded-full border px-2.5 py-1 text-xs font-medium', className),
+    style: color ? {
+      color: color,
+      borderColor: color
+    } : undefined,
+    children: text
+  });
+};
+var formatDateValue = function formatDateValue(text, format) {
+  if (!text) {
+    return undefined;
+  }
+  if (Array.isArray(text)) {
+    return text.map(function (item) {
+      return dayjs(item).format(format);
+    }).filter(Boolean).join(' ~ ');
+  }
+  return dayjs(text).format(format);
+};
+var formatQuarterValue = function formatQuarterValue(text) {
+  if (!text) {
+    return undefined;
+  }
+  var formatQuarter = function formatQuarter(value) {
+    var current = dayjs(value);
+    return "".concat(current.year(), "-Q").concat(Math.floor(current.month() / 3) + 1);
+  };
+  if (Array.isArray(text)) {
+    return text.map(function (item) {
+      return formatQuarter(item);
+    }).join(' ~ ');
+  }
+  return formatQuarter(text);
+};
+var formatWeekValue = function formatWeekValue(text) {
+  if (!text) {
+    return undefined;
+  }
+  var formatWeek = function formatWeek(value) {
+    var _ref6, _week, _week2, _ref7, _isoWeek, _ref8;
+    var current = dayjs(value);
+    var weekNumber = (_ref6 = (_week = (_week2 = (_ref7 = current).week) === null || _week2 === void 0 ? void 0 : _week2.call(_ref7)) !== null && _week !== void 0 ? _week : (_isoWeek = (_ref8 = current).isoWeek) === null || _isoWeek === void 0 ? void 0 : _isoWeek.call(_ref8)) !== null && _ref6 !== void 0 ? _ref6 : 0;
+    return "".concat(current.year(), "-").concat(String(weekNumber).padStart(2, '0'));
+  };
+  if (Array.isArray(text)) {
+    return text.map(function (item) {
+      return formatWeek(item);
+    }).join(' ~ ');
+  }
+  return formatWeek(text);
+};
+var formatJsonCodeValue = function formatJsonCodeValue(text) {
+  if (text === undefined || text === null || text === '') {
+    return undefined;
+  }
+  if (typeof text === 'string') {
+    try {
+      return JSON.stringify(JSON.parse(text), null, 2);
+    } catch (error) {
+      return text;
+    }
+  }
+  try {
+    return JSON.stringify(text, null, 2);
+  } catch (error) {
+    return String(text);
+  }
+};
+var renderValueEnumCollection = function renderValueEnumCollection(text, valueEnum, emptyText) {
+  if (Array.isArray(text)) {
+    if (!text.length) {
+      return defaultRenderText(undefined, emptyText);
+    }
+    var renderedItems = text.map(function (item) {
+      var _valueEnumItem$text;
+      var valueEnumItem = getValueEnumItem(valueEnum, item);
+      return /*#__PURE__*/_jsx(React.Fragment, {
+        children: renderTag((_valueEnumItem$text = valueEnumItem === null || valueEnumItem === void 0 ? void 0 : valueEnumItem.text) !== null && _valueEnumItem$text !== void 0 ? _valueEnumItem$text : item, valueEnumItem === null || valueEnumItem === void 0 ? void 0 : valueEnumItem.status, valueEnumItem === null || valueEnumItem === void 0 ? void 0 : valueEnumItem.color)
+      }, String(item));
+    });
+    return /*#__PURE__*/_jsx("div", {
+      className: "flex flex-wrap items-center gap-2",
+      children: renderedItems
+    });
+  }
+  var valueEnumItem = getValueEnumItem(valueEnum, text);
+  if (valueEnumItem) {
+    return renderTag(valueEnumItem.text, valueEnumItem.status, valueEnumItem.color);
+  }
+  return defaultRenderText(text, emptyText);
+};
+var renderReadMode = function renderReadMode(text, valueType, valueEnum, emptyText, fieldProps, moneySymbol) {
+  var valueEnumItem = getValueEnumItem(valueEnum, text);
+  if (valueEnumItem && ['select', 'tag', 'text'].includes(valueType)) {
+    return renderTag(valueEnumItem.text, valueEnumItem.status, valueEnumItem.color);
+  }
+  switch (valueType) {
+    case 'money':
+      return defaultRenderText(text !== undefined && text !== null && text !== '' ? "".concat(moneySymbol === false ? '' : moneySymbol || '￥').concat(Number(text).toLocaleString('zh-CN')) : undefined, emptyText);
+    case 'percent':
+      return defaultRenderText(text !== undefined && text !== null && text !== '' ? "".concat(text, "%") : undefined, emptyText);
+    case 'date':
+      return defaultRenderText(formatDateValue(text, 'YYYY-MM-DD'), emptyText);
+    case 'dateWeek':
+      return defaultRenderText(formatWeekValue(text), emptyText);
+    case 'dateMonth':
+      return defaultRenderText(formatDateValue(text, 'YYYY-MM'), emptyText);
+    case 'dateQuarter':
+      return defaultRenderText(formatQuarterValue(text), emptyText);
+    case 'dateYear':
+      return defaultRenderText(formatDateValue(text, 'YYYY'), emptyText);
+    case 'dateTime':
+      return defaultRenderText(formatDateValue(text, 'YYYY-MM-DD HH:mm:ss'), emptyText);
+    case 'time':
+      return defaultRenderText(formatDateValue(text, 'HH:mm:ss'), emptyText);
+    case 'dateRange':
+      return defaultRenderText(formatDateValue(text, 'YYYY-MM-DD'), emptyText);
+    case 'dateWeekRange':
+      return defaultRenderText(formatWeekValue(text), emptyText);
+    case 'dateMonthRange':
+      return defaultRenderText(formatDateValue(text, 'YYYY-MM'), emptyText);
+    case 'dateQuarterRange':
+      return defaultRenderText(formatQuarterValue(text), emptyText);
+    case 'dateTimeRange':
+      return defaultRenderText(formatDateValue(text, 'YYYY-MM-DD HH:mm:ss'), emptyText);
+    case 'dateYearRange':
+      return defaultRenderText(formatDateValue(text, 'YYYY'), emptyText);
+    case 'timeRange':
+      return defaultRenderText(formatDateValue(text, 'HH:mm:ss'), emptyText);
+    case 'fromNow':
+      return defaultRenderText(text ? dayjs(text).fromNow() : undefined, emptyText);
+    case 'second':
+      return defaultRenderText(text !== undefined && text !== null && text !== '' ? "".concat(Number(text).toLocaleString('zh-CN'), " \u79D2") : undefined, emptyText);
+    case 'password':
+      return defaultRenderText(text ? '•'.repeat(Math.max(String(text).length, 6)) : undefined, emptyText);
+    case 'textarea':
+      return text === undefined || text === null || text === '' ? defaultRenderText(undefined, emptyText) : /*#__PURE__*/_jsx("div", {
+        className: "whitespace-pre-wrap break-words",
+        children: String(text)
+      });
+    case 'code':
+      return text ? /*#__PURE__*/_jsx("pre", {
+        className: "bg-muted/20 overflow-auto rounded-xl border border-border p-3 font-mono text-xs text-foreground",
+        children: String(text)
+      }) : defaultRenderText(undefined, emptyText);
+    case 'jsonCode':
+      return text ? /*#__PURE__*/_jsx("pre", {
+        className: "bg-muted/20 overflow-auto rounded-xl border border-border p-3 font-mono text-xs text-foreground",
+        children: formatJsonCodeValue(text)
+      }) : defaultRenderText(undefined, emptyText);
+    case 'color':
+      return text ? /*#__PURE__*/_jsxs("div", {
+        className: "inline-flex items-center gap-2 rounded-full border border-border bg-background px-2.5 py-1 text-xs text-foreground",
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "h-3 w-3 rounded-full border border-border",
+          style: {
+            backgroundColor: String(text)
+          }
+        }), /*#__PURE__*/_jsx("span", {
+          children: String(text)
+        })]
+      }) : defaultRenderText(undefined, emptyText);
+    case 'progress':
+      return /*#__PURE__*/_jsx("div", {
+        className: "min-w-[160px]",
+        children: /*#__PURE__*/_jsx(ProgressBar, {
+          percent: Number(text) || 0,
+          showText: true
+        })
+      });
+    case 'rate':
+      return /*#__PURE__*/_jsx(Rate, {
+        value: Number(text) || 0,
+        readOnly: true
+      });
+    case 'switch':
+      return renderTag(Boolean(text) ? '已开启' : '已关闭', Boolean(text) ? 'success' : 'default');
+    case 'image':
+      {
+        var _fieldProps$size, _fieldProps$width, _fieldProps$height;
+        var imageSize = (_fieldProps$size = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.size) !== null && _fieldProps$size !== void 0 ? _fieldProps$size : 30;
+        return typeof text === 'string' && text ? /*#__PURE__*/_jsx(Image, {
+          src: text,
+          alt: (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.alt) || 'image',
+          width: (_fieldProps$width = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.width) !== null && _fieldProps$width !== void 0 ? _fieldProps$width : imageSize,
+          height: (_fieldProps$height = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.height) !== null && _fieldProps$height !== void 0 ? _fieldProps$height : imageSize,
+          className: cn('rounded-md', fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.className),
+          style: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style
+        }) : defaultRenderText(undefined, emptyText);
+      }
+    case 'avatar':
+      return typeof text === 'string' && text.startsWith('http') ? /*#__PURE__*/_jsx(Avatar, {
+        src: text,
+        alt: (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.alt) || 'avatar'
+      }) : /*#__PURE__*/_jsx(Avatar, {
+        text: String(text || ''),
+        alt: (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.alt) || 'avatar'
+      });
+    case 'option':
+      if (Array.isArray(text)) {
+        return /*#__PURE__*/_jsx("div", {
+          className: "flex flex-wrap items-center gap-2",
+          children: text
+        });
+      }
+      return defaultRenderText(text, emptyText);
+    case 'select':
+    case 'checkbox':
+    case 'radio':
+    case 'treeSelect':
+    case 'cascader':
+    case 'segmented':
+      return renderValueEnumCollection(text, valueEnum, emptyText);
+    case 'tag':
+      return renderTag(text, valueEnumItem === null || valueEnumItem === void 0 ? void 0 : valueEnumItem.status, valueEnumItem === null || valueEnumItem === void 0 ? void 0 : valueEnumItem.color);
+    case 'index':
+    case 'indexBorder':
+      return /*#__PURE__*/_jsx("span", {
+        className: cn('inline-flex h-7 min-w-7 items-center justify-center rounded-full text-xs font-semibold', valueType === 'indexBorder' ? 'border border-border bg-background text-foreground' : 'bg-muted text-muted-foreground'),
+        children: text
+      });
+    default:
+      return defaultRenderText(text, emptyText);
+  }
+};
+var omitNonControlFieldProps = function omitNonControlFieldProps(fieldProps) {
+  if (!fieldProps) {
+    return {};
+  }
+  var _request = fieldProps.request,
+    _params = fieldProps.params,
+    _debounceTime = fieldProps.debounceTime,
+    _valueEnum = fieldProps.valueEnum,
+    restFieldProps = _objectWithoutProperties(fieldProps, _excluded4);
+  return restFieldProps;
+};
+var renderEditMode = function renderEditMode(valueType, fieldProps, placeholder, disabled, valueEnum) {
+  var effectiveValueType = getEffectiveValueType(valueType, valueEnum);
+  var sanitizedFieldProps = omitNonControlFieldProps(fieldProps);
+  var mergedFieldProps = _objectSpread({
+    placeholder: getDefaultEditPlaceholder(effectiveValueType, placeholder),
+    disabled: disabled
+  }, sanitizedFieldProps);
+  switch (effectiveValueType) {
+    case 'textarea':
+      return /*#__PURE__*/_jsx(TextArea, _objectSpread({}, mergedFieldProps));
+    case 'digit':
+    case 'money':
+    case 'percent':
+    case 'second':
+      return /*#__PURE__*/_jsx(InputItem, _objectSpread({
+        type: "number"
+      }, mergedFieldProps));
+    case 'digitRange':
+      return /*#__PURE__*/_jsx(DigitRangeFieldControl, _objectSpread(_objectSpread({}, mergedFieldProps), {}, {
+        placeholder: placeholder
+      }));
+    case 'date':
+      return /*#__PURE__*/_jsx(DatePickerFieldControl, {
+        className: mergedFieldProps.className,
+        value: mergedFieldProps.value,
+        onChange: mergedFieldProps.onChange,
+        placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder,
+        precision: sanitizedFieldProps.precision || 'day',
+        fieldProps: mergedFieldProps
+      });
+    case 'dateMonth':
+      return /*#__PURE__*/_jsx(DatePickerFieldControl, {
+        className: mergedFieldProps.className,
+        value: mergedFieldProps.value,
+        onChange: mergedFieldProps.onChange,
+        placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder,
+        precision: sanitizedFieldProps.precision || 'month',
+        fieldProps: mergedFieldProps
+      });
+    case 'dateWeek':
+      return /*#__PURE__*/_jsx(DatePickerFieldControl, {
+        className: mergedFieldProps.className,
+        value: mergedFieldProps.value,
+        onChange: mergedFieldProps.onChange,
+        placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder,
+        precision: sanitizedFieldProps.precision || 'day',
+        fieldProps: _objectSpread(_objectSpread({}, mergedFieldProps), {}, {
+          picker: 'week'
+        })
+      });
+    case 'dateQuarter':
+      return /*#__PURE__*/_jsx(DatePickerFieldControl, {
+        className: mergedFieldProps.className,
+        value: mergedFieldProps.value,
+        onChange: mergedFieldProps.onChange,
+        placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder,
+        precision: sanitizedFieldProps.precision || 'month',
+        fieldProps: _objectSpread(_objectSpread({}, mergedFieldProps), {}, {
+          picker: 'quarter'
+        })
+      });
+    case 'dateYear':
+      return /*#__PURE__*/_jsx(DatePickerFieldControl, {
+        className: mergedFieldProps.className,
+        value: mergedFieldProps.value,
+        onChange: mergedFieldProps.onChange,
+        placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder,
+        precision: sanitizedFieldProps.precision || 'year',
+        fieldProps: mergedFieldProps
+      });
+    case 'dateTime':
+      return /*#__PURE__*/_jsx(DatePickerFieldControl, {
+        className: mergedFieldProps.className,
+        value: mergedFieldProps.value,
+        onChange: mergedFieldProps.onChange,
+        placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder,
+        precision: sanitizedFieldProps.precision || 'second',
+        fieldProps: mergedFieldProps
+      });
+    case 'time':
+      return /*#__PURE__*/_jsx(DatePickerFieldControl, {
+        className: mergedFieldProps.className,
+        value: mergedFieldProps.value,
+        onChange: mergedFieldProps.onChange,
+        placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder,
+        precision: sanitizedFieldProps.precision || 'second',
+        fieldProps: mergedFieldProps
+      });
+    case 'dateRange':
+    case 'dateMonthRange':
+    case 'dateWeekRange':
+    case 'dateQuarterRange':
+    case 'dateTimeRange':
+    case 'dateYearRange':
+    case 'timeRange':
+      return /*#__PURE__*/_jsx(DateRangeFieldControl, _objectSpread(_objectSpread({}, mergedFieldProps), {}, {
+        placeholder: placeholder,
+        precision: sanitizedFieldProps.precision || (valueType === 'dateTimeRange' ? 'second' : valueType === 'dateMonthRange' ? 'month' : valueType === 'dateYearRange' ? 'year' : 'day'),
+        fieldProps: _objectSpread(_objectSpread({}, mergedFieldProps), {}, {
+          picker: valueType === 'dateWeekRange' ? 'week' : valueType === 'dateQuarterRange' ? 'quarter' : sanitizedFieldProps.picker
+        })
+      }));
+    case 'select':
+    case 'tag':
+    case 'checkbox':
+    case 'radio':
+    case 'treeSelect':
+    case 'cascader':
+    case 'segmented':
+      return /*#__PURE__*/_jsx(OptionFieldControl, {
+        valueType: effectiveValueType,
+        fieldProps: fieldProps,
+        valueEnum: valueEnum,
+        placeholder: placeholder,
+        disabled: disabled
+      });
+    case 'password':
+      return /*#__PURE__*/_jsx(InputItem, _objectSpread({
+        type: "password"
+      }, mergedFieldProps));
+    case 'code':
+      return /*#__PURE__*/_jsx(TextArea, _objectSpread(_objectSpread({}, mergedFieldProps), {}, {
+        className: cn('font-mono', mergedFieldProps.className)
+      }));
+    case 'jsonCode':
+      return /*#__PURE__*/_jsx(TextArea, _objectSpread(_objectSpread({}, mergedFieldProps), {}, {
+        className: cn('font-mono', mergedFieldProps.className),
+        value: formatJsonCodeValue(mergedFieldProps.value)
+      }));
+    case 'color':
+      return /*#__PURE__*/_jsx(InputItem, _objectSpread({
+        type: "color"
+      }, mergedFieldProps));
+    case 'switch':
+      return /*#__PURE__*/_jsx(Switch, _objectSpread({}, mergedFieldProps));
+    case 'rate':
+      return /*#__PURE__*/_jsx(Rate, _objectSpread({}, mergedFieldProps));
+    case 'progress':
+      return /*#__PURE__*/_jsx(Slider, _objectSpread({}, mergedFieldProps));
+    case 'image':
+    case 'avatar':
+      return /*#__PURE__*/_jsx(InputItem, _objectSpread({}, mergedFieldProps));
+    default:
+      return /*#__PURE__*/_jsx(InputItem, _objectSpread({}, mergedFieldProps));
+  }
+};
+export var ProField = function ProField(_ref9) {
+  var text = _ref9.text,
+    _ref9$valueType = _ref9.valueType,
+    valueType = _ref9$valueType === void 0 ? 'text' : _ref9$valueType,
+    _ref9$mode = _ref9.mode,
+    mode = _ref9$mode === void 0 ? 'read' : _ref9$mode,
+    readonly = _ref9.readonly,
+    valueEnum = _ref9.valueEnum,
+    fieldProps = _ref9.fieldProps,
+    placeholder = _ref9.placeholder,
+    _ref9$emptyText = _ref9.emptyText,
+    emptyText = _ref9$emptyText === void 0 ? '-' : _ref9$emptyText,
+    render = _ref9.render,
+    formItemRender = _ref9.formItemRender,
+    disabled = _ref9.disabled,
+    controlProps = _objectWithoutProperties(_ref9, _excluded5);
+  var _useProConfig = useProConfig(),
+    valueTypeMap = _useProConfig.valueTypeMap,
+    intl = _useProConfig.intl;
+  var effectiveValueType = getEffectiveValueType(valueType, valueEnum);
+  var customRenderer = valueTypeMap[effectiveValueType] || valueTypeMap[valueType];
+  var resolvedMode = readonly ? 'read' : mode;
+  var fieldText = text !== undefined ? text : controlProps.value;
+  var dom = resolvedMode === 'read' ? renderReadMode(fieldText, effectiveValueType, valueEnum, emptyText, fieldProps, controlProps.moneySymbol === undefined ? intl.getMessage('moneySymbol', '¥') : controlProps.moneySymbol) : renderEditMode(effectiveValueType, _objectSpread(_objectSpread({}, fieldProps || {}), controlProps), placeholder, disabled, valueEnum);
+  if (resolvedMode === 'read' && (render || customRenderer !== null && customRenderer !== void 0 && customRenderer.render)) {
+    var _ref10;
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: (_ref10 = render || (customRenderer === null || customRenderer === void 0 ? void 0 : customRenderer.render)) === null || _ref10 === void 0 ? void 0 : _ref10(fieldText, {
+        mode: resolvedMode,
+        valueType: effectiveValueType,
+        fieldProps: fieldProps,
+        valueEnum: valueEnum,
+        placeholder: placeholder,
+        emptyText: emptyText
+      }, /*#__PURE__*/_jsx(_Fragment, {
+        children: dom
+      }))
+    });
+  }
+  if (resolvedMode !== 'read' && (formItemRender || customRenderer !== null && customRenderer !== void 0 && customRenderer.formItemRender)) {
+    var _ref11;
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: (_ref11 = formItemRender || (customRenderer === null || customRenderer === void 0 ? void 0 : customRenderer.formItemRender)) === null || _ref11 === void 0 ? void 0 : _ref11(fieldText, {
+        mode: resolvedMode,
+        valueType: effectiveValueType,
+        fieldProps: fieldProps,
+        valueEnum: valueEnum,
+        placeholder: placeholder,
+        disabled: disabled
+      }, /*#__PURE__*/_jsx(_Fragment, {
+        children: dom
+      }))
+    });
+  }
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: dom
+  });
+};
+export var PureProField = ProField;
+var createFieldWithType = function createFieldWithType(valueType) {
+  var FieldComponent = function FieldComponent(props) {
+    return /*#__PURE__*/_jsx(ProField, _objectSpread(_objectSpread({}, props), {}, {
+      valueType: props.valueType || valueType
+    }));
+  };
+  FieldComponent.displayName = "Field".concat(valueType);
+  return FieldComponent;
+};
+export var FieldText = createFieldWithType('text');
+export var FieldTextArea = createFieldWithType('textarea');
+export var FieldDigit = createFieldWithType('digit');
+export var FieldDigitRange = createFieldWithType('digitRange');
+export var FieldMoney = createFieldWithType('money');
+export var FieldPercent = createFieldWithType('percent');
+export var FieldDatePicker = createFieldWithType('date');
+export var FieldDateWeekPicker = createFieldWithType('dateWeek');
+export var FieldDateMonthPicker = createFieldWithType('dateMonth');
+export var FieldDateQuarterPicker = createFieldWithType('dateQuarter');
+export var FieldDateYearPicker = createFieldWithType('dateYear');
+export var FieldTimePicker = createFieldWithType('time');
+export var FieldTimeRangePicker = createFieldWithType('timeRange');
+export var FieldRangePicker = createFieldWithType('dateRange');
+export var FieldDateWeekRangePicker = createFieldWithType('dateWeekRange');
+export var FieldDateMonthRangePicker = createFieldWithType('dateMonthRange');
+export var FieldDateQuarterRangePicker = createFieldWithType('dateQuarterRange');
+export var FieldDateYearRangePicker = createFieldWithType('dateYearRange');
+export var FieldPassword = createFieldWithType('password');
+export var FieldFromNow = createFieldWithType('fromNow');
+export var FieldSecond = createFieldWithType('second');
+export var FieldCode = createFieldWithType('code');
+export var FieldColorPicker = createFieldWithType('color');
+export var FieldSelect = createFieldWithType('select');
+export var FieldCheckbox = createFieldWithType('checkbox');
+export var FieldRadio = createFieldWithType('radio');
+export var FieldTreeSelect = createFieldWithType('treeSelect');
+export var FieldCascader = createFieldWithType('cascader');
+export var FieldSegmented = createFieldWithType('segmented');
+export var FieldSwitch = createFieldWithType('switch');
+export var FieldRate = createFieldWithType('rate');
+export var FieldSlider = createFieldWithType('progress');
+export var FieldProgress = FieldSlider;
+export var FieldOptions = createFieldWithType('option');
+export var FieldImage = createFieldWithType('image');
+export var FieldIndexColumn = createFieldWithType('index');
+export var FieldStatus = createFieldWithType('status');
+export { renderTag as ProFieldBadgeColor };
+export default ProField;