tdesign-react 0.31.2-alpha.1 → 0.31.2-alpha.2

package/es/color-picker/components/panel/format/index.js

@@ -0,0 +1,197 @@
+/**
+ * tdesign v0.31.1
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import { _ as _defineProperty } from '../../../../_chunks/dep-1628aaec.js';
+import { _ as _toConsumableArray } from '../../../../_chunks/dep-3cf23cb4.js';
+import { _ as _slicedToArray } from '../../../../_chunks/dep-aca05d9d.js';
+import React, { useState } from 'react';
+import { upperCase } from 'lodash';
+import { Select } from '../../../../select/index.js';
+import FormatInput from './inputs.js';
+import { FORMATS } from '../../../const.js';
+import '../../../../_chunks/dep-85a9595a.js';
+import '../../../../select/base/Select.js';
+import '../../../../_chunks/dep-ea842483.js';
+import 'classnames';
+import '../../../../_chunks/dep-d51fd958.js';
+import '../../../../_chunks/dep-8702aba9.js';
+import '../../../../_chunks/dep-db8880c0.js';
+import '../../../../_chunks/dep-8efaaac0.js';
+import '../../../../_chunks/dep-d539b435.js';
+import '../../../../_chunks/dep-83cb7911.js';
+import '../../../../_chunks/dep-83177e8d.js';
+import '../../../../_chunks/dep-ae52f85e.js';
+import '../../../../_chunks/dep-63ed508e.js';
+import '../../../../_chunks/dep-fd1b4e24.js';
+import '../../../../_chunks/dep-9b67144e.js';
+import '../../../../_chunks/dep-c47502ef.js';
+import '../../../../_chunks/dep-3a2f4bdf.js';
+import '../../../../_chunks/dep-2b0021c1.js';
+import '../../../../_chunks/dep-09299e3f.js';
+import '../../../../_chunks/dep-020d9062.js';
+import '../../../../_util/useDefault.js';
+import '../../../../_util/noop.js';
+import '../../../../locale/LocalReceiver.js';
+import '../../../../config-provider/index.js';
+import '../../../../config-provider/ConfigProvider.js';
+import '../../../../_chunks/dep-bbad8591.js';
+import '../../../../_chunks/dep-e9e7c24f.js';
+import '../../../../_chunks/dep-23b2574f.js';
+import '../../../../_chunks/dep-a1403158.js';
+import '../../../../_chunks/dep-c03c5f48.js';
+import '../../../../_chunks/dep-d038aaf3.js';
+import '../../../../_chunks/dep-00728537.js';
+import '../../../../_chunks/dep-32abd81f.js';
+import '../../../../_chunks/dep-f3e5eb4b.js';
+import '../../../../_chunks/dep-155571ca.js';
+import '../../../../_chunks/dep-81670ae9.js';
+import '../../../../locale/zh_CN.js';
+import '../../../../_common/js/global-config/locale/zh_CN.js';
+import '../../../../config-provider/zh_CN_config.js';
+import '../../../../_util/useConfig.js';
+import '../../../../_util/forwardRefWithStatics.js';
+import 'hoist-non-react-statics';
+import '../../../../select/util/helper.js';
+import '../../../../select/base/OptionGroup.js';
+import '../../../../select/base/Option.js';
+import '../../../../_chunks/dep-cf0a5e4d.js';
+import '../../../../_chunks/dep-c9e242b1.js';
+import '../../../../_util/useRipple.js';
+import '../../../../_util/useAnimation.js';
+import '../../../../_util/setStyle.js';
+import '../../../../_util/dom.js';
+import 'raf';
+import '../../../../_util/easing.js';
+import '../../../../common/FakeArrow.js';
+import '../../../../loading/index.js';
+import '../../../../loading/Loading.js';
+import '../../../../common/Portal.js';
+import 'react-dom';
+import '../../../../loading/gradient.js';
+import '../../../../_common/js/loading/circle-adapter.js';
+import '../../../../_common/js/utils/set-style.js';
+import '../../../../_common/js/utils/helper.js';
+import '../../../../loading/plugin.js';
+import './style/css.js';
+import '../../../../loading/type.js';
+import '../../../../select-input/index.js';
+import '../../../../select-input/SelectInput.js';
+import '../../../../popup/index.js';
+import '../../../../popup/Popup.js';
+import 'react-transition-group';
+import 'react-popper';
+import '../../../../_util/composeRefs.js';
+import '../../../../popup/hooks/useTriggerProps.js';
+import '../../../../_util/useClickOutside.js';
+import '../../../../popup/utils/getTransitionParams.js';
+import '../../../../_util/useMutationObserver.js';
+import '../../../../_chunks/dep-be94af1f.js';
+import '../../../../_chunks/dep-5e457cfd.js';
+import '../../../../_util/useWindowSize.js';
+import '../../../../popup/type.js';
+import '../../../../select-input/useSingle.js';
+import '../../../../_chunks/dep-41ddaf4d.js';
+import '../../../../_chunks/dep-3ce0d185.js';
+import '../../../../_chunks/dep-b1d1fc8a.js';
+import '../../../../_chunks/dep-65dde75f.js';
+import '../../../../_chunks/dep-6bf856c2.js';
+import '../../../../input/index.js';
+import '../../../../input/Input.js';
+import 'tdesign-icons-react';
+import '../../../../_util/helper.js';
+import '../../../../_chunks/dep-e0790d2e.js';
+import '../../../../_chunks/dep-0d23bb2c.js';
+import '../../../../_chunks/dep-db65b23a.js';
+import '../../../../input/InputGroup.js';
+import '../../../../_util/useDefaultValue.js';
+import '../../../../input/type.js';
+import '../../../../select-input/useMultiple.js';
+import '../../../../tag-input/index.js';
+import '../../../../tag-input/TagInput.js';
+import '../../../../_util/useDragSorter.js';
+import '../../../../tag-input/useTagScroll.js';
+import '../../../../tag-input/useTagList.js';
+import '../../../../tag/index.js';
+import '../../../../tag/Tag.js';
+import '../../../../tag/CheckTag.js';
+import '../../../../tag/type.js';
+import '../../../../tag-input/useHover.js';
+import '../../../../tag-input/type.js';
+import '../../../../select-input/useOverlayStyle.js';
+import '../../../../select-input/type.js';
+import '../../../../select/base/PopupContent.js';
+import '../../../../select/type.js';
+import '../../../../_common/js/color-picker/color.js';
+import '../../../../_chunks/dep-926c2765.js';
+import 'tinycolor2';
+import '../../../../_common/js/color-picker/cmyk.js';
+import '../../../../_common/js/color-picker/gradient.js';
+import '../../../../input-number/index.js';
+import '../../../../input-number/InputNumber.js';
+import '../../../../_util/useCommonClassName.js';
+import '../../../../_util/useUpdateEffect.js';
+import '../../../../_util/useLayoutEffect.js';
+import '../../../../input-number/StepHandler.js';
+import '../../../../button/index.js';
+import '../../../../button/Button.js';
+import '../../../../button/type.js';
+import '../../../../input-number/utils/numberUtils.js';
+import '../../../../input-number/type.js';
+import './config.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var FormatPanel = function FormatPanel(props) {
+  var baseClassName = props.baseClassName,
+      format = props.format,
+      onModeChange = props.onModeChange;
+
+  var _useState = useState(format),
+      _useState2 = _slicedToArray(_useState, 2),
+      formatMode = _useState2[0],
+      setFormatMode = _useState2[1];
+
+  var handleModeChange = function handleModeChange(v) {
+    setFormatMode(v);
+    onModeChange(v);
+  };
+
+  var formats = _toConsumableArray(FORMATS);
+
+  return /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__format")
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__format--item")
+  }, /* @__PURE__ */React.createElement(Select, {
+    size: "medium",
+    className: "".concat(baseClassName, "__format-mode-select"),
+    popupProps: {
+      overlayClassName: "".concat(baseClassName, "__select-options")
+    },
+    value: formatMode,
+    onChange: handleModeChange
+  }, formats.map(function (item) {
+    return /* @__PURE__ */React.createElement(Select.Option, {
+      key: item,
+      value: item,
+      label: upperCase(item),
+      style: {
+        fontSize: "12px"
+      }
+    });
+  }))), /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__format--item")
+  }, /* @__PURE__ */React.createElement(FormatInput, _objectSpread(_objectSpread({}, props), {}, {
+    format: formatMode
+  }))));
+};
+
+var FormatPanel$1 = /*#__PURE__*/React.memo(FormatPanel);
+
+export { FormatPanel$1 as default };
+//# sourceMappingURL=index.js.map

package/es/color-picker/components/panel/format/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/color-picker/components/panel/format/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { upperCase } from 'lodash';\nimport Select from '../../../../select';\nimport FormatInput from './inputs';\nimport Color from '../../../../_common/js/color-picker/color';\nimport { FORMATS } from '../../../const';\nimport { TdColorPickerProps } from '../../../type';\n\nexport interface TdColorFormatProps extends TdColorPickerProps {\n  onModeChange: Function;\n  onInputChange: Function;\n  baseClassName: string;\n  color: Color;\n}\n\nconst FormatPanel = (props: TdColorFormatProps) => {\n  const { baseClassName, format, onModeChange } = props;\n  const [formatMode, setFormatMode] = useState(format);\n\n  const handleModeChange = (v: TdColorPickerProps['format']) => {\n    setFormatMode(v);\n    onModeChange(v);\n  };\n\n  const formats: TdColorPickerProps['format'][] = [...FORMATS];\n\n  return (\n    <div className={`${baseClassName}__format`}>\n      <div className={`${baseClassName}__format--item`}>\n        <Select\n          size=\"medium\"\n          className={`${baseClassName}__format-mode-select`}\n          popupProps={{\n            overlayClassName: `${baseClassName}__select-options`,\n          }}\n          value={formatMode}\n          onChange={handleModeChange}\n        >\n          {formats.map((item) => (\n            <Select.Option key={item} value={item} label={upperCase(item)} style={{ fontSize: '12px' }} />\n          ))}\n        </Select>\n      </div>\n      <div className={`${baseClassName}__format--item`}>\n        <FormatInput {...props} format={formatMode} />\n      </div>\n    </div>\n  );\n};\n\nexport default React.memo(FormatPanel);\n"],"names":["FormatPanel","props","baseClassName","format","onModeChange","useState","formatMode","setFormatMode","handleModeChange","v","formats","FORMATS","React","createElement","className","Select","size","popupProps","overlayClassName","value","onChange","map","item","Option","key","label","upperCase","style","fontSize","FormatInput","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAW;AAC7B,EAAA,IAAQC,aAAR,GAAgDD,KAAhD,CAAQC,aAAR;AAAA,MAAuBC,MAAvB,GAAgDF,KAAhD,CAAuBE,MAAvB;AAAA,MAA+BC,YAA/B,GAAgDH,KAAhD,CAA+BG,YAA/B,CAAA;;AACA,EAAoCC,IAAAA,SAAAA,GAAAA,QAAQ,CAACF,MAAD,CAA5C;AAAA,MAAA,UAAA,GAAA,cAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAA,MAAOG,UAAP,GAAA,UAAA,CAAA,CAAA,CAAA;AAAA,MAAmBC,aAAnB,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;;AACA,EAAA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,CAAD,EAAO;AAC9BF,IAAAA,aAAa,CAACE,CAAD,CAAb,CAAA;AACAL,IAAAA,YAAY,CAACK,CAAD,CAAZ,CAAA;AACD,GAHD,CAAA;;AAIA,EAAMC,IAAAA,OAAO,GAAOC,kBAAAA,CAAAA,OAAP,CAAb,CAAA;;AACA,EAAA,sBAAuBC,KAAK,CAACC,aAAN,CAAoB,KAApB,EAA2B;AAChDC,IAAAA,SAAS,YAAKZ,aAAL,EAAA,UAAA,CAAA;AADuC,GAA3B,iBAEJU,KAAK,CAACC,aAAN,CAAoB,KAApB,EAA2B;AAC5CC,IAAAA,SAAS,YAAKZ,aAAL,EAAA,gBAAA,CAAA;AADmC,GAA3B,iBAEAU,KAAK,CAACC,aAAN,CAAoBE,MAApB,EAA4B;AAC7CC,IAAAA,IAAI,EAAE,QADuC;AAE7CF,IAAAA,SAAS,EAAKZ,EAAAA,CAAAA,MAAAA,CAAAA,aAAL,EAFoC,sBAAA,CAAA;AAG7Ce,IAAAA,UAAU,EAAE;AACVC,MAAAA,gBAAgB,YAAKhB,aAAL,EAAA,kBAAA,CAAA;AADN,KAHiC;AAM7CiB,IAAAA,KAAK,EAAEb,UANsC;AAO7Cc,IAAAA,QAAQ,EAAEZ,gBAAAA;AAPmC,GAA5B,EAQhBE,OAAO,CAACW,GAAR,CAAY,UAACC,IAAD,EAAA;AAAA,IAAU,sBAAgBV,KAAK,CAACC,aAAN,CAAoBE,MAAM,CAACQ,MAA3B,EAAmC;AAC1EC,MAAAA,GAAG,EAAEF,IADqE;AAE1EH,MAAAA,KAAK,EAAEG,IAFmE;AAG1EG,MAAAA,KAAK,EAAEC,SAAS,CAACJ,IAAD,CAH0D;AAI1EK,MAAAA,KAAK,EAAE;AAAEC,QAAAA,QAAQ,EAAE,MAAA;AAAZ,OAAA;AAJmE,KAAnC,CAA1B,CAAA;AAAA,GAAZ,CARgB,CAFA,CAFI,iBAiBAhB,KAAK,CAACC,aAAN,CAAoB,KAApB,EAA2B;AAChDC,IAAAA,SAAS,YAAKZ,aAAL,EAAA,gBAAA,CAAA;AADuC,GAA3B,iBAEJU,KAAK,CAACC,aAAN,CAAoBgB,WAApB,kCACd5B,KADc,CAAA,EAAA,EAAA,EAAA;AAEjBE,IAAAA,MAAM,EAAEG,UAAAA;AAFS,GAAA,CAAA,CAFI,CAjBA,CAAvB,CAAA;AAuBD,CA/BD,CAAA;;AAgCA,oBAAA,aAAeM,KAAK,CAACkB,IAAN,CAAW9B,WAAX,CAAf;;;;"}

package/es/color-picker/components/panel/format/inputs.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<(props: any) => JSX.Element>;
+export default _default;

package/es/color-picker/components/panel/format/inputs.js

@@ -0,0 +1,223 @@
+/**
+ * tdesign v0.31.1
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import { _ as _defineProperty } from '../../../../_chunks/dep-1628aaec.js';
+import { _ as _toConsumableArray } from '../../../../_chunks/dep-3cf23cb4.js';
+import React, { useRef, useEffect } from 'react';
+import { throttle } from 'lodash';
+import { Color } from '../../../../_common/js/color-picker/color.js';
+import { Input } from '../../../../input/index.js';
+import { InputNumber } from '../../../../input-number/index.js';
+import { FORMAT_INPUT_CONFIG } from './config.js';
+import '../../../../_chunks/dep-85a9595a.js';
+import '../../../../_chunks/dep-aca05d9d.js';
+import '../../../../_chunks/dep-926c2765.js';
+import 'tinycolor2';
+import '../../../../_common/js/color-picker/cmyk.js';
+import '../../../../_common/js/color-picker/gradient.js';
+import '../../../../input/Input.js';
+import '../../../../_chunks/dep-8efaaac0.js';
+import '../../../../_chunks/dep-ea842483.js';
+import 'classnames';
+import 'tdesign-icons-react';
+import '../../../../_chunks/dep-d51fd958.js';
+import '../../../../_chunks/dep-8702aba9.js';
+import '../../../../_chunks/dep-db8880c0.js';
+import '../../../../_chunks/dep-d539b435.js';
+import '../../../../_util/forwardRefWithStatics.js';
+import 'hoist-non-react-statics';
+import '../../../../_util/useConfig.js';
+import '../../../../_chunks/dep-bbad8591.js';
+import '../../../../_chunks/dep-e9e7c24f.js';
+import '../../../../_chunks/dep-c47502ef.js';
+import '../../../../_chunks/dep-3a2f4bdf.js';
+import '../../../../_chunks/dep-2b0021c1.js';
+import '../../../../_chunks/dep-09299e3f.js';
+import '../../../../_chunks/dep-23b2574f.js';
+import '../../../../_chunks/dep-a1403158.js';
+import '../../../../_chunks/dep-c03c5f48.js';
+import '../../../../_chunks/dep-9b67144e.js';
+import '../../../../_chunks/dep-d038aaf3.js';
+import '../../../../_chunks/dep-00728537.js';
+import '../../../../_chunks/dep-32abd81f.js';
+import '../../../../_chunks/dep-f3e5eb4b.js';
+import '../../../../_chunks/dep-ae52f85e.js';
+import '../../../../_chunks/dep-63ed508e.js';
+import '../../../../_chunks/dep-155571ca.js';
+import '../../../../_chunks/dep-81670ae9.js';
+import '../../../../locale/zh_CN.js';
+import '../../../../_common/js/global-config/locale/zh_CN.js';
+import '../../../../config-provider/zh_CN_config.js';
+import '../../../../_util/helper.js';
+import '../../../../_chunks/dep-e0790d2e.js';
+import '../../../../_chunks/dep-020d9062.js';
+import '../../../../_chunks/dep-fd1b4e24.js';
+import '../../../../_chunks/dep-0d23bb2c.js';
+import '../../../../_chunks/dep-db65b23a.js';
+import '../../../../input/InputGroup.js';
+import '../../../../_util/useDefaultValue.js';
+import '../../../../_util/useDefault.js';
+import '../../../../_util/noop.js';
+import '../../../../locale/LocalReceiver.js';
+import '../../../../config-provider/index.js';
+import '../../../../config-provider/ConfigProvider.js';
+import './style/css.js';
+import '../../../../input/type.js';
+import '../../../../input-number/InputNumber.js';
+import '../../../../_util/useCommonClassName.js';
+import '../../../../_util/useUpdateEffect.js';
+import '../../../../_util/useLayoutEffect.js';
+import '../../../../_util/dom.js';
+import 'raf';
+import '../../../../_chunks/dep-c9e242b1.js';
+import '../../../../_util/easing.js';
+import '../../../../input-number/StepHandler.js';
+import '../../../../button/index.js';
+import '../../../../button/Button.js';
+import '../../../../_util/useRipple.js';
+import '../../../../_util/useAnimation.js';
+import '../../../../_util/setStyle.js';
+import '../../../../loading/index.js';
+import '../../../../loading/Loading.js';
+import '../../../../common/Portal.js';
+import 'react-dom';
+import '../../../../loading/gradient.js';
+import '../../../../_common/js/loading/circle-adapter.js';
+import '../../../../_common/js/utils/set-style.js';
+import '../../../../_common/js/utils/helper.js';
+import '../../../../loading/plugin.js';
+import '../../../../loading/type.js';
+import '../../../../button/type.js';
+import '../../../../input-number/utils/numberUtils.js';
+import '../../../../input-number/type.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var FormatInputs = function FormatInputs(props) {
+  var format = props.format,
+      enableAlpha = props.enableAlpha,
+      inputProps = props.inputProps,
+      disabled = props.disabled,
+      onInputChange = props.onInputChange,
+      color = props.color;
+  var formatValue = useRef({});
+  var lastModelValue = useRef({});
+
+  var object2color = function object2color(f) {
+    return Color.object2color(formatValue.current, f);
+  };
+
+  var getFormatColorMap = function getFormatColorMap(type) {
+    if (type === "encode") {
+      return {
+        HSV: color.getHsva(),
+        HSL: color.getHsla(),
+        RGB: color.getRgba(),
+        CMYK: color.getCmyk(),
+        CSS: {
+          css: color.css
+        },
+        HEX: {
+          hex: color.hex
+        }
+      };
+    }
+
+    return {
+      HSV: object2color("HSV"),
+      HSL: object2color("HSL"),
+      RGB: object2color("RGB"),
+      CMYK: object2color("CMYK"),
+      CSS: formatValue.current.css,
+      HEX: formatValue.current.hex
+    };
+  };
+
+  var updateModelValue = function updateModelValue() {
+    var values = getFormatColorMap("encode")[format];
+    values.a = Math.round(color.alpha * 100);
+    Object.keys(values).forEach(function (key) {
+      formatValue.current[key] = values[key];
+      lastModelValue.current[key] = values[key];
+    });
+  };
+
+  updateModelValue();
+  var throttleUpdate = throttle(updateModelValue, 100);
+
+  var inputConfigs = function inputConfigs() {
+    var configs = _toConsumableArray(FORMAT_INPUT_CONFIG[format]);
+
+    if (enableAlpha) {
+      configs.push({
+        type: "inputNumber",
+        key: "a",
+        min: 0,
+        max: 100,
+        format: function format(value) {
+          return "".concat(value, "%");
+        },
+        flex: 1.15
+      });
+    }
+
+    return configs;
+  };
+
+  var handleInputChange = function handleInputChange(key, v) {
+    if (v === lastModelValue[key]) {
+      return;
+    }
+
+    formatValue.current[key] = v;
+    lastModelValue.current[key] = v;
+    var value = getFormatColorMap("decode")[format];
+    onInputChange(value, formatValue.current.a / 100, key, v);
+  };
+
+  useEffect(function () {
+    throttleUpdate();
+  }, [color.saturation, color.hue, color.value, color.alpha, format, throttleUpdate]);
+  return /* @__PURE__ */React.createElement("div", {
+    className: "input-group"
+  }, inputConfigs().map(function (config) {
+    var commonProps = _objectSpread(_objectSpread({}, inputProps), {}, {
+      title: formatValue.current[config.key],
+      value: formatValue.current[config.key],
+      align: "center",
+      disabled: disabled,
+      onBlur: function onBlur(v) {
+        return handleInputChange(config.key, v);
+      },
+      onEnter: function onEnter(v) {
+        return handleInputChange(config.key, v);
+      }
+    });
+
+    return /* @__PURE__ */React.createElement("div", {
+      className: "input-group__item",
+      key: config.key,
+      style: {
+        flex: config.flex || 1
+      }
+    }, config.type === "input" ? /* @__PURE__ */React.createElement(Input, _objectSpread(_objectSpread({}, commonProps), {}, {
+      maxlength: format === "HEX" ? 9 : void 0
+    })) : /* @__PURE__ */React.createElement(InputNumber, _objectSpread(_objectSpread({}, commonProps), {}, {
+      min: config.min,
+      max: config.max,
+      step: 1,
+      format: config.format,
+      theme: "normal"
+    })));
+  }));
+};
+
+var FormatInput = /*#__PURE__*/React.memo(FormatInputs);
+
+export { FormatInput as default };
+//# sourceMappingURL=inputs.js.map

package/es/color-picker/components/panel/format/inputs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputs.js","sources":["../../../../../src/color-picker/components/panel/format/inputs.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport { throttle } from 'lodash';\nimport Color from '../../../../_common/js/color-picker/color';\nimport Input from '../../../../input';\nimport InputNumber from '../../../../input-number';\nimport { FORMAT_INPUT_CONFIG } from './config';\n\nconst FormatInputs = (props) => {\n  const { format, enableAlpha, inputProps, disabled, onInputChange, color } = props;\n  const formatValue = useRef<any>({});\n  const lastModelValue = useRef({});\n\n  const object2color = (f: string) => Color.object2color(formatValue.current, f);\n\n  // 获取不同格式的输入输出值\n  const getFormatColorMap = (type: 'encode' | 'decode') => {\n    if (type === 'encode') {\n      return {\n        HSV: color.getHsva(),\n        HSL: color.getHsla(),\n        RGB: color.getRgba(),\n        CMYK: color.getCmyk(),\n        CSS: {\n          css: color.css,\n        },\n        HEX: {\n          hex: color.hex,\n        },\n      };\n    }\n    // decode\n    return {\n      HSV: object2color('HSV'),\n      HSL: object2color('HSL'),\n      RGB: object2color('RGB'),\n      CMYK: object2color('CMYK'),\n      CSS: formatValue.current.css,\n      HEX: formatValue.current.hex,\n    };\n  };\n\n  // 更新modelValue\n  const updateModelValue = () => {\n    const values: any = getFormatColorMap('encode')[format];\n    values.a = Math.round(color.alpha * 100);\n    Object.keys(values).forEach((key) => {\n      formatValue.current[key] = values[key];\n      lastModelValue.current[key] = values[key];\n    });\n  };\n\n  updateModelValue();\n\n  const throttleUpdate = throttle(updateModelValue, 100);\n\n  const inputConfigs = () => {\n    const configs = [...FORMAT_INPUT_CONFIG[format]];\n    if (enableAlpha) {\n      configs.push({\n        type: 'inputNumber',\n        key: 'a',\n        min: 0,\n        max: 100,\n        format: (value: number) => `${value}%`,\n        flex: 1.15,\n      });\n    }\n    return configs;\n  };\n\n  const handleInputChange = (key: string, v: number | string) => {\n    if (v === lastModelValue[key]) {\n      return;\n    }\n    formatValue.current[key] = v;\n    lastModelValue.current[key] = v;\n    const value = getFormatColorMap('decode')[format];\n    onInputChange(value, formatValue.current.a / 100, key, v);\n  };\n\n  useEffect(() => {\n    throttleUpdate();\n  }, [color.saturation, color.hue, color.value, color.alpha, format, throttleUpdate]);\n\n  return (\n    <div className=\"input-group\">\n      {inputConfigs().map((config) => {\n        const commonProps = {\n          ...inputProps,\n          title: formatValue.current[config.key],\n          value: formatValue.current[config.key],\n          align: 'center',\n          disabled,\n          onBlur: (v: string) => handleInputChange(config.key, v),\n          onEnter: (v: string) => handleInputChange(config.key, v),\n        };\n        return (\n          <div\n            className=\"input-group__item\"\n            key={config.key}\n            style={{\n              flex: config.flex || 1,\n            }}\n          >\n            {config.type === 'input' ? (\n              <Input {...commonProps} maxlength={format === 'HEX' ? 9 : undefined} />\n            ) : (\n              <InputNumber\n                {...commonProps}\n                min={config.min}\n                max={config.max}\n                step={1}\n                format={config.format}\n                theme=\"normal\"\n              />\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default React.memo(FormatInputs);\n"],"names":["FormatInputs","props","format","enableAlpha","inputProps","disabled","onInputChange","color","formatValue","useRef","lastModelValue","object2color","f","Color","current","getFormatColorMap","type","HSV","getHsva","HSL","getHsla","RGB","getRgba","CMYK","getCmyk","CSS","css","HEX","hex","updateModelValue","values","a","Math","round","alpha","Object","keys","forEach","key","throttleUpdate","throttle","inputConfigs","configs","FORMAT_INPUT_CONFIG","push","min","max","value","flex","handleInputChange","v","useEffect","saturation","hue","React","createElement","className","map","config","commonProps","title","align","onBlur","onEnter","style","Input","maxlength","InputNumber","step","theme","memo"],"mappings":"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"}

package/es/color-picker/components/panel/header.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RadioValue } from '../../../radio';
+import { TdColorModes } from '../../interface';
+import { TdColorPickerProps } from '../../type';
+export interface ColorPanelHeaderProps extends TdColorPickerProps {
+    mode?: TdColorModes;
+    togglePopup?: Function;
+    onModeChange?: (value: RadioValue, context: {
+        e: React.ChangeEvent<HTMLInputElement>;
+    }) => void;
+    baseClassName?: string;
+}
+declare const _default: React.MemoExoticComponent<(props: ColorPanelHeaderProps) => JSX.Element>;
+export default _default;

package/es/color-picker/components/panel/header.js

@@ -0,0 +1,100 @@
+/**
+ * tdesign v0.31.1
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import React from 'react';
+import classNames from 'classnames';
+import { CloseIcon } from 'tdesign-icons-react';
+import { COLOR_MODES } from '../../const.js';
+import { Radio } from '../../../radio/index.js';
+import '../../../_chunks/dep-07385e51.js';
+import '../../../_chunks/dep-1628aaec.js';
+import '../../../_util/forwardRefWithStatics.js';
+import 'hoist-non-react-statics';
+import '../../../common/Check.js';
+import '../../../_chunks/dep-aca05d9d.js';
+import '../../../_chunks/dep-85a9595a.js';
+import '../../../_chunks/dep-ea842483.js';
+import '../../../_util/helper.js';
+import '../../../_chunks/dep-e0790d2e.js';
+import '../../../_chunks/dep-8702aba9.js';
+import '../../../_chunks/dep-020d9062.js';
+import '../../../_chunks/dep-db8880c0.js';
+import '../../../_chunks/dep-8efaaac0.js';
+import '../../../_chunks/dep-ae52f85e.js';
+import '../../../_chunks/dep-63ed508e.js';
+import '../../../_chunks/dep-fd1b4e24.js';
+import '../../../_chunks/dep-9b67144e.js';
+import '../../../_chunks/dep-0d23bb2c.js';
+import '../../../_chunks/dep-db65b23a.js';
+import '../../../_util/useConfig.js';
+import '../../../_chunks/dep-bbad8591.js';
+import '../../../_chunks/dep-e9e7c24f.js';
+import '../../../_chunks/dep-c47502ef.js';
+import '../../../_chunks/dep-3a2f4bdf.js';
+import '../../../_chunks/dep-d51fd958.js';
+import '../../../_chunks/dep-d539b435.js';
+import '../../../_chunks/dep-2b0021c1.js';
+import '../../../_chunks/dep-09299e3f.js';
+import '../../../_chunks/dep-23b2574f.js';
+import '../../../_chunks/dep-a1403158.js';
+import '../../../_chunks/dep-c03c5f48.js';
+import '../../../_chunks/dep-d038aaf3.js';
+import '../../../_chunks/dep-00728537.js';
+import '../../../_chunks/dep-32abd81f.js';
+import '../../../_chunks/dep-f3e5eb4b.js';
+import '../../../_chunks/dep-155571ca.js';
+import '../../../_chunks/dep-81670ae9.js';
+import '../../../locale/zh_CN.js';
+import '../../../_common/js/global-config/locale/zh_CN.js';
+import '../../../config-provider/zh_CN_config.js';
+import '../../../_util/useDefault.js';
+import '../../../_util/noop.js';
+import '../../../_util/useCommonClassName.js';
+import '../../../_util/useMutationObserver.js';
+import '../../../_chunks/dep-be94af1f.js';
+import '../../../_chunks/dep-5e457cfd.js';
+import './style/css.js';
+import '../../../radio/type.js';
+
+var Header = function Header(props) {
+  var baseClassName = props.baseClassName,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? "monochrome" : _props$mode,
+      colorModes = props.colorModes,
+      togglePopup = props.togglePopup,
+      _props$closeBtn = props.closeBtn,
+      closeBtn = _props$closeBtn === void 0 ? true : _props$closeBtn,
+      onModeChange = props.onModeChange;
+
+  var handleClosePopup = function handleClosePopup() {
+    togglePopup === null || togglePopup === void 0 ? void 0 : togglePopup(false);
+  };
+
+  return /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__head")
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__mode")
+  }, (colorModes === null || colorModes === void 0 ? void 0 : colorModes.length) === 1 ? COLOR_MODES[colorModes[0]] : /* @__PURE__ */React.createElement(Radio.Group, {
+    variant: "default-filled",
+    size: "small",
+    value: mode,
+    onChange: onModeChange
+  }, Object.keys(COLOR_MODES).map(function (key) {
+    return /* @__PURE__ */React.createElement(Radio.Button, {
+      key: key,
+      value: key
+    }, COLOR_MODES[key]);
+  }))), closeBtn ? /* @__PURE__ */React.createElement("span", {
+    role: "button",
+    className: classNames("".concat(baseClassName, "__icon"), "".concat(baseClassName, "__close")),
+    onClick: handleClosePopup
+  }, /* @__PURE__ */React.createElement(CloseIcon, null)) : null);
+};
+
+var PanelHeader = /*#__PURE__*/React.memo(Header);
+
+export { PanelHeader as default };
+//# sourceMappingURL=header.js.map

package/es/color-picker/components/panel/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sources":["../../../../src/color-picker/components/panel/header.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { CloseIcon } from 'tdesign-icons-react';\nimport { COLOR_MODES } from '../../const';\nimport Radio, { RadioValue } from '../../../radio';\nimport { TdColorModes } from '../../interface';\nimport { TdColorPickerProps } from '../../type';\n\nexport interface ColorPanelHeaderProps extends TdColorPickerProps {\n  mode?: TdColorModes;\n  togglePopup?: Function;\n  onModeChange?: (value: RadioValue, context: { e: React.ChangeEvent<HTMLInputElement> }) => void;\n  baseClassName?: string;\n}\n\nconst Header = (props: ColorPanelHeaderProps) => {\n  const { baseClassName, mode = 'monochrome', colorModes, togglePopup, closeBtn = true, onModeChange } = props;\n\n  const handleClosePopup = () => {\n    togglePopup?.(false);\n  };\n\n  return (\n    <div className={`${baseClassName}__head`}>\n      <div className={`${baseClassName}__mode`}>\n        {colorModes?.length === 1 ? (\n          COLOR_MODES[colorModes[0]]\n        ) : (\n          <Radio.Group variant=\"default-filled\" size=\"small\" value={mode} onChange={onModeChange}>\n            {Object.keys(COLOR_MODES).map((key) => (\n              <Radio.Button key={key} value={key}>\n                {COLOR_MODES[key]}\n              </Radio.Button>\n            ))}\n          </Radio.Group>\n        )}\n      </div>\n      {closeBtn ? (\n        <span\n          role=\"button\"\n          className={classNames(`${baseClassName}__icon`, `${baseClassName}__close`)}\n          onClick={handleClosePopup}\n        >\n          <CloseIcon />\n        </span>\n      ) : null}\n    </div>\n  );\n};\n\nexport default React.memo(Header);\n"],"names":["Header","props","baseClassName","mode","colorModes","togglePopup","closeBtn","onModeChange","handleClosePopup","React","createElement","className","length","COLOR_MODES","Radio","Group","variant","size","value","onChange","Object","keys","map","key","Button","role","classNames","onClick","CloseIcon","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD,EAAW;AACxB,EAAA,IAAQC,aAAR,GAAuGD,KAAvG,CAAQC,aAAR;AAAA,MAAuGD,WAAAA,GAAAA,KAAvG,CAAuBE,IAAvB;AAAA,MAAuBA,IAAvB,4BAA8B,YAA9B,GAAA,WAAA;AAAA,MAA4CC,UAA5C,GAAuGH,KAAvG,CAA4CG,UAA5C;AAAA,MAAwDC,WAAxD,GAAuGJ,KAAvG,CAAwDI,WAAxD;AAAA,MAAuGJ,eAAAA,GAAAA,KAAvG,CAAqEK,QAArE;AAAA,MAAqEA,QAArE,gCAAgF,IAAhF,GAAA,eAAA;AAAA,MAAsFC,YAAtF,GAAuGN,KAAvG,CAAsFM,YAAtF,CAAA;;AACA,EAAA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAC7BH,IAAAA,WAAW,SAAX,IAAAA,WAAW,WAAX,GAAAA,KAAAA,CAAAA,GAAAA,WAAW,CAAG,KAAH,CAAX,CAAA;AACD,GAFD,CAAA;;AAGA,EAAA,sBAAuBI,KAAK,CAACC,aAAN,CAAoB,KAApB,EAA2B;AAChDC,IAAAA,SAAS,YAAKT,aAAL,EAAA,QAAA,CAAA;AADuC,GAA3B,iBAEJO,KAAK,CAACC,aAAN,CAAoB,KAApB,EAA2B;AAC5CC,IAAAA,SAAS,YAAKT,aAAL,EAAA,QAAA,CAAA;AADmC,GAA3B,EAEhB,CAAAE,UAAU,KAAA,IAAV,IAAAA,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,UAAU,CAAEQ,MAAZ,MAAuB,CAAvB,GAA2BC,WAAW,CAACT,UAAU,CAAC,CAAD,CAAX,CAAtC,kBAAwEK,KAAK,CAACC,aAAN,CAAoBI,KAAK,CAACC,KAA1B,EAAiC;AAC1GC,IAAAA,OAAO,EAAE,gBADiG;AAE1GC,IAAAA,IAAI,EAAE,OAFoG;AAG1GC,IAAAA,KAAK,EAAEf,IAHmG;AAI1GgB,IAAAA,QAAQ,EAAEZ,YAAAA;AAJgG,GAAjC,EAKxEa,MAAM,CAACC,IAAP,CAAYR,WAAZ,CAAyBS,CAAAA,GAAzB,CAA6B,UAACC,GAAD,EAAA;AAAA,IAAS,sBAAgBd,KAAK,CAACC,aAAN,CAAoBI,KAAK,CAACU,MAA1B,EAAkC;AACzFD,MAAAA,GAAG,EAAHA,GADyF;AAEzFL,MAAAA,KAAK,EAAEK,GAAAA;AAFkF,KAAlC,EAGtDV,WAAW,CAACU,GAAD,CAH2C,CAAzB,CAAA;AAAA,GAA7B,CALwE,CAFxD,CAFI,EAYEjB,QAAQ,kBAAmBG,KAAK,CAACC,aAAN,CAAoB,MAApB,EAA4B;AAC9Ee,IAAAA,IAAI,EAAE,QADwE;AAE9Ed,IAAAA,SAAS,EAAEe,UAAU,WAAIxB,aAAJ,EAAA,QAAA,CAAA,EAAA,EAAA,CAAA,MAAA,CAA8BA,aAA9B,EAFyD,SAAA,CAAA,CAAA;AAG9EyB,IAAAA,OAAO,EAAEnB,gBAAAA;AAHqE,GAA5B,iBAIjCC,KAAK,CAACC,aAAN,CAAoBkB,SAApB,EAA+B,IAA/B,CAJiC,CAAnB,GAI0B,IAhBpC,CAAvB,CAAA;AAiBD,CAtBD,CAAA;;AAuBA,kBAAA,aAAenB,KAAK,CAACoB,IAAN,CAAW7B,MAAX,CAAf;;;;"}

package/es/color-picker/components/panel/hue.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TdColorBaseProps } from '../../interface';
+declare const _default: React.MemoExoticComponent<(props: TdColorBaseProps) => JSX.Element>;
+export default _default;

package/es/color-picker/components/panel/hue.js

@@ -0,0 +1,32 @@
+/**
+ * tdesign v0.31.1
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import React from 'react';
+import ColorSlider from './slider.js';
+import '../../../_chunks/dep-1628aaec.js';
+import 'classnames';
+import '../../const.js';
+import '../../../_util/useDrag.js';
+
+var HUESlider = function HUESlider(props) {
+  var color = props.color,
+      baseClassName = props.baseClassName,
+      disabled = props.disabled,
+      onChange = props.onChange;
+  return /* @__PURE__ */React.createElement(ColorSlider, {
+    disabled: disabled,
+    baseClassName: baseClassName,
+    className: "".concat(baseClassName, "__hue"),
+    color: color,
+    value: color.hue,
+    onChange: onChange
+  });
+};
+
+var HUESlider$1 = /*#__PURE__*/React.memo(HUESlider);
+
+export { HUESlider$1 as default };
+//# sourceMappingURL=hue.js.map

package/es/color-picker/components/panel/hue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hue.js","sources":["../../../../src/color-picker/components/panel/hue.tsx"],"sourcesContent":["import React from 'react';\nimport ColorSlider from './slider';\nimport { TdColorBaseProps } from '../../interface';\n\nconst HUESlider = (props: TdColorBaseProps) => {\n  const { color, baseClassName, disabled, onChange } = props;\n  return (\n    <ColorSlider\n      disabled={disabled}\n      baseClassName={baseClassName}\n      className={`${baseClassName}__hue`}\n      color={color}\n      value={color.hue}\n      onChange={onChange}\n    />\n  );\n};\n\nexport default React.memo(HUESlider);\n"],"names":["HUESlider","props","color","baseClassName","disabled","onChange","React","createElement","ColorSlider","className","value","hue","memo"],"mappings":";;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD,EAAW;AAC3B,EAAA,IAAQC,KAAR,GAAqDD,KAArD,CAAQC,KAAR;AAAA,MAAeC,aAAf,GAAqDF,KAArD,CAAeE,aAAf;AAAA,MAA8BC,QAA9B,GAAqDH,KAArD,CAA8BG,QAA9B;AAAA,MAAwCC,QAAxC,GAAqDJ,KAArD,CAAwCI,QAAxC,CAAA;AACA,EAAA,sBAAuBC,KAAK,CAACC,aAAN,CAAoBC,WAApB,EAAiC;AACtDJ,IAAAA,QAAQ,EAARA,QADsD;AAEtDD,IAAAA,aAAa,EAAbA,aAFsD;AAGtDM,IAAAA,SAAS,EAAKN,EAAAA,CAAAA,MAAAA,CAAAA,aAAL,EAH6C,OAAA,CAAA;AAItDD,IAAAA,KAAK,EAALA,KAJsD;AAKtDQ,IAAAA,KAAK,EAAER,KAAK,CAACS,GALyC;AAMtDN,IAAAA,QAAQ,EAARA,QAAAA;AANsD,GAAjC,CAAvB,CAAA;AAQD,CAVD,CAAA;;AAWA,kBAAA,aAAeC,KAAK,CAACM,IAAN,CAAWZ,SAAX,CAAf;;;;"}

package/es/color-picker/components/panel/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ColorPickerProps } from '../../interface';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<ColorPickerProps, "value" | "style" | "className" | "disabled" | "multiple" | "defaultValue" | "format" | "onChange" | "popupProps" | "inputProps" | "selectInputProps" | "closeBtn" | "togglePopup" | "colorModes" | "enableAlpha" | "recentColors" | "defaultRecentColors" | "swatchColors" | "onPaletteBarChange" | "onRecentColorsChange"> & React.RefAttributes<HTMLDivElement>>>;
+export default _default;