@tendaui/react 1.1.1 → 1.1.2

package/es/checkbox/type.d.ts

@@ -0,0 +1,115 @@
+import { TNode } from "../common";
+import { MouseEvent, ChangeEvent } from "react";
+export interface TdCheckboxProps {
+    /**
+     * 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用
+     * @default false
+     */
+    checkAll?: boolean;
+    /**
+     * 是否选中
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * 是否选中，非受控属性
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * 多选框内容，同 label
+     */
+    children?: TNode;
+    /**
+     * 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。Checkbox.disabled 优先级高于 CheckboxGroup.disabled
+     */
+    disabled?: boolean;
+    /**
+     * 是否为半选
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * 主文案
+     */
+    label?: TNode;
+    /**
+     * HTML 元素原生属性
+     * @default ''
+     */
+    name?: string;
+    /**
+     * 只读状态
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * HTML 原生属性
+     * @default ''
+     */
+    title?: string;
+    /**
+     * 多选框的值
+     */
+    value?: string | number | boolean;
+    /**
+     * 值变化时触发
+     */
+    onChange?: (checked: boolean, context: {
+        e: ChangeEvent<HTMLInputElement>;
+    }) => void;
+    /**
+     * 点击时触发，一般用于外层阻止冒泡场景
+     */
+    onClick?: (context: {
+        e: MouseEvent<HTMLLabelElement>;
+    }) => void;
+}
+export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
+    /**
+     * 是否禁用组件，默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled
+     */
+    disabled?: boolean;
+    /**
+     * 支持最多选中的数量
+     */
+    max?: number;
+    /**
+     * 统一设置内部复选框 HTML 属性
+     * @default ''
+     */
+    name?: string;
+    /**
+     * 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」
+     */
+    options?: Array<CheckboxOption>;
+    /**
+     * 选中值
+     * @default []
+     */
+    value?: T;
+    /**
+     * 选中值，非受控属性
+     * @default []
+     */
+    defaultValue?: T;
+    /**
+     * 值变化时触发，`context.current` 表示当前变化的数据值，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中；`context.option` 表示当前变化的数据项
+     */
+    onChange?: (value: T, context: CheckboxGroupChangeContext) => void;
+}
+export type CheckboxOption = string | number | CheckboxOptionObj;
+export interface CheckboxOptionObj {
+    label?: string | TNode;
+    value?: string | number;
+    disabled?: boolean;
+    name?: string;
+    checkAll?: true;
+}
+export type CheckboxGroupValue = Array<string | number | boolean>;
+export interface CheckboxGroupChangeContext {
+    e: ChangeEvent<HTMLDivElement>;
+    current: CheckboxOption | TdCheckboxProps;
+    option: CheckboxOption | TdCheckboxProps;
+    type: "check" | "uncheck";
+}

package/es/color-picker/ColorPickPanel.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ColorPickerProps } from "./type";
+declare const _default: React.NamedExoticComponent<ColorPickerProps>;
+export default _default;

package/es/color-picker/ColorPickPanel.js

@@ -0,0 +1,44 @@
+import { _ as _defineProperty } from '../_chunks/dep-Cwish4GD.js';
+import React from 'react';
+import { C as ColorPanel } from '../_chunks/dep-DURB9x8g.js';
+import '../_chunks/dep-D-UKOauR.js';
+import '../_chunks/dep-CgyDw_YI.js';
+import '../_chunks/dep-CzLhKWCf.js';
+import 'classnames';
+import './utils/color-picker/index.js';
+import '../_chunks/dep-DJmE940f.js';
+import '../_chunks/dep-Chz4ZJCb.js';
+import '../_chunks/dep-zOZQ0R9g.js';
+import 'lodash-es';
+import '../_chunks/dep-DTlQ2dCA.js';
+import '../_chunks/dep-gy8uvBaS.js';
+import '../_chunks/dep-5U9UjDaf.js';
+import 'dayjs';
+import '../_chunks/dep-DwWrhxkd.js';
+import '../_chunks/dep-DGvfel3I.js';
+import '../_chunks/dep-CD_4-1Xb.js';
+import '../config-provider/index.js';
+import '../config-provider/ConfigProvider.js';
+import '../_chunks/dep-oUgTcXgm.js';
+import './components/panel/alpha.js';
+import '../_chunks/dep-DN7d1SzH.js';
+import './components/panel/slider.js';
+import '../_chunks/dep-BbeHB7S3.js';
+import './components/panel/hue.js';
+import './components/panel/saturation.js';
+import './components/panel/swatches.js';
+import '@tendaui/icons';
+import '../_chunks/dep-ByzdZjUR.js';
+
+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; }
+var ColorPickerPanel = function ColorPickerPanel(props) {
+  return /* @__PURE__ */React.createElement(ColorPanel, _objectSpread(_objectSpread({}, props), {}, {
+    popupProps: null
+  }));
+};
+ColorPickerPanel.displayName = "ColorPickerPanel";
+var _ColorPickPanel = /*#__PURE__*/React.memo(ColorPickerPanel);
+
+export { _ColorPickPanel as default };
+//# sourceMappingURL=ColorPickPanel.js.map

package/es/color-picker/ColorPickPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickPanel.js","sources":["../../../components/color-picker/ColorPickPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport ColorPanel from \"./components/panel\";\nimport { ColorPickerProps } from \"./type\";\n\nconst ColorPickerPanel: React.FC<ColorPickerProps> = (props) => <ColorPanel {...props} popupProps={null} />;\n\nColorPickerPanel.displayName = \"ColorPickerPanel\";\n\nexport default React.memo(ColorPickerPanel);\n"],"names":["ColorPickerPanel","props","React","createElement","ColorPanel","popupProps","displayName","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,gBAAA,GAA+C,SAA/CA,gBAAAA,CAAgDC,KAAA,EAAA;EAAA,sBAAUC,KAAA,CAAAC,aAAA,CAACC,4CAAeH,KAAA,CAAA,EAAA,EAAA,EAAA;AAAOI,IAAAA,YAAY;AAAA,GAAA,CAAM,CAAA;AAAA,CAAA;AAEzGL,gBAAA,CAAiBM,WAAA,GAAc,kBAAA;AAE/B,sBAAA,aAAeJ,KAAA,CAAMK,KAAKP,gBAAgB,CAAA;;;;"}

package/es/color-picker/ColorPicker.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ColorPickerProps } from "./type";
+declare const _default: React.NamedExoticComponent<ColorPickerProps>;
+export default _default;

package/es/color-picker/ColorPicker.js

@@ -0,0 +1,118 @@
+import { _ as _defineProperty } from '../_chunks/dep-Cwish4GD.js';
+import { _ as _slicedToArray } from '../_chunks/dep-CzLhKWCf.js';
+import { _ as _objectWithoutProperties } from '../_chunks/dep-DN7d1SzH.js';
+import React, { useRef } from 'react';
+import classNames from 'classnames';
+import { Popup } from '../popup/index.js';
+import { u as useClassNames } from '../_chunks/dep-oUgTcXgm.js';
+import { u as useControlled } from '../_chunks/dep-DwWrhxkd.js';
+import ColorTrigger from './components/trigger.js';
+import { c as colorPickerDefaultProps, C as ColorPanel } from '../_chunks/dep-DURB9x8g.js';
+import { u as useDefaultProps } from '../_chunks/dep-DGvfel3I.js';
+import '../_chunks/dep-D-UKOauR.js';
+import '../popup/Popup.js';
+import 'lodash-es';
+import '../portal/Portal.js';
+import 'react-dom';
+import '../_chunks/dep-DRwijJcv.js';
+import '../_chunks/dep-BRbJGDI9.js';
+import '../_chunks/dep-CkmtEv0Y.js';
+import 'react-is';
+import '../_chunks/dep-C1XcmShP.js';
+import '../_chunks/dep-Ccktr_jk.js';
+import '../_chunks/dep-CgyDw_YI.js';
+import '@popperjs/core';
+import 'react-fast-compare';
+import 'react-transition-group';
+import '../_chunks/dep-DbVHGoUC.js';
+import '../_chunks/dep-gy8uvBaS.js';
+import '../_chunks/dep-5U9UjDaf.js';
+import 'dayjs';
+import '../popup/style/css.js';
+import '../_chunks/dep-DJmE940f.js';
+import '../_chunks/dep-Chz4ZJCb.js';
+import '../_chunks/dep-zOZQ0R9g.js';
+import '../input/index.js';
+import '../input/Input.js';
+import '@tendaui/icons';
+import '../_chunks/dep-D6YxJv-F.js';
+import '../input/InputGroup.js';
+import '../input/style/css.js';
+import '../_chunks/dep-U1T8CQY9.js';
+import './utils/color-picker/index.js';
+import '../_chunks/dep-DTlQ2dCA.js';
+import '../_chunks/dep-CD_4-1Xb.js';
+import '../config-provider/index.js';
+import '../config-provider/ConfigProvider.js';
+import './components/panel/alpha.js';
+import './components/panel/slider.js';
+import '../_chunks/dep-BbeHB7S3.js';
+import './components/panel/hue.js';
+import './components/panel/saturation.js';
+import './components/panel/swatches.js';
+import '../_chunks/dep-ByzdZjUR.js';
+
+var _excluded = ["popupProps", "clearable", "disabled", "borderless", "inputProps", "onChange", "onClear"],
+  _excluded2 = ["overlayClassName", "overlayInnerStyle"];
+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; }
+var ColorPicker = function ColorPicker(props) {
+  var baseClassName = useClassNames();
+  var _useDefaultProps = useDefaultProps(props, colorPickerDefaultProps),
+    popupProps = _useDefaultProps.popupProps,
+    clearable = _useDefaultProps.clearable,
+    disabled = _useDefaultProps.disabled,
+    borderless = _useDefaultProps.borderless,
+    inputProps = _useDefaultProps.inputProps,
+    onChange = _useDefaultProps.onChange,
+    onClear = _useDefaultProps.onClear,
+    panelProps = _objectWithoutProperties(_useDefaultProps, _excluded);
+  var _ref = popupProps || {},
+    overlayClassName = _ref.overlayClassName,
+    _ref$overlayInnerStyl = _ref.overlayInnerStyle,
+    overlayInnerStyle = _ref$overlayInnerStyl === void 0 ? {} : _ref$overlayInnerStyl,
+    restPopupProps = _objectWithoutProperties(_ref, _excluded2);
+  var _useControlled = useControlled(props, "value", onChange),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    innerValue = _useControlled2[0],
+    setInnerValue = _useControlled2[1];
+  var triggerRef = useRef(null);
+  var colorPanelRef = useRef(null);
+  var popProps = _objectSpread(_objectSpread({
+    placement: "bottom-left",
+    expandAnimation: true,
+    trigger: "click"
+  }, restPopupProps), {}, {
+    overlayClassName: classNames(baseClassName, overlayClassName),
+    overlayInnerStyle: _objectSpread({
+      padding: 0
+    }, overlayInnerStyle)
+  });
+  return /* @__PURE__ */React.createElement(Popup, _objectSpread(_objectSpread({}, popProps), {}, {
+    content: !disabled && /* @__PURE__ */React.createElement(ColorPanel, _objectSpread(_objectSpread({}, panelProps), {}, {
+      clearable: clearable,
+      disabled: disabled,
+      value: innerValue,
+      onChange: function onChange(value, context) {
+        return setInnerValue(value, context);
+      },
+      ref: colorPanelRef
+    }))
+  }), /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__trigger"),
+    ref: triggerRef
+  }, /* @__PURE__ */React.createElement(ColorTrigger, {
+    clearable: clearable,
+    disabled: disabled,
+    borderless: borderless,
+    inputProps: inputProps,
+    value: innerValue,
+    onChange: setInnerValue,
+    onClear: onClear
+  })));
+};
+ColorPicker.displayName = "ColorPicker";
+var _ColorPicker = /*#__PURE__*/React.memo(ColorPicker);
+
+export { _ColorPicker as default };
+//# sourceMappingURL=ColorPicker.js.map

package/es/color-picker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sources":["../../../components/color-picker/ColorPicker.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport classNames from \"classnames\";\nimport { Popup, PopupProps } from \"../popup\";\nimport { ColorPickerProps, TdColorContext } from \"./type\";\nimport useClassName from \"./hooks/useClassNames\";\nimport useControlled from \"../hooks/useControlled\";\nimport ColorTrigger from \"./components/trigger\";\nimport ColorPanel from \"./components/panel/index\";\nimport { colorPickerDefaultProps } from \"./defaultProps\";\nimport useDefaultProps from \"../hooks/useDefaultProps\";\n\nconst ColorPicker: React.FC<ColorPickerProps> = (props) => {\n  const baseClassName = useClassName();\n  const { popupProps, clearable, disabled, borderless, inputProps, onChange, onClear, ...panelProps } =\n    useDefaultProps<ColorPickerProps>(props, colorPickerDefaultProps);\n  const { overlayClassName, overlayInnerStyle = {}, ...restPopupProps } = popupProps || {};\n\n  const [innerValue, setInnerValue] = useControlled(props, \"value\", onChange);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const colorPanelRef = useRef<HTMLDivElement>(null);\n\n  const popProps: PopupProps = {\n    placement: \"bottom-left\",\n    expandAnimation: true,\n    trigger: \"click\",\n    ...restPopupProps,\n    overlayClassName: classNames(baseClassName, overlayClassName),\n    overlayInnerStyle: {\n      padding: 0,\n      ...overlayInnerStyle\n    }\n  };\n\n  return (\n    <Popup\n      {...popProps}\n      content={\n        !disabled && (\n          <ColorPanel\n            {...panelProps}\n            clearable={clearable}\n            disabled={disabled}\n            value={innerValue}\n            onChange={(value: string, context: TdColorContext) => setInnerValue(value, context)}\n            ref={colorPanelRef}\n          />\n        )\n      }\n    >\n      <div className={`${baseClassName}__trigger`} ref={triggerRef}>\n        <ColorTrigger\n          clearable={clearable}\n          disabled={disabled}\n          borderless={borderless}\n          inputProps={inputProps}\n          value={innerValue}\n          onChange={setInnerValue}\n          onClear={onClear}\n        />\n      </div>\n    </Popup>\n  );\n};\n\nColorPicker.displayName = \"ColorPicker\";\n\nexport default React.memo(ColorPicker);\n"],"names":["ColorPicker","props","baseClassName","useClassName","_useDefaultProps","useDefaultProps","colorPickerDefaultProps","popupProps","clearable","disabled","borderless","inputProps","onChange","onClear","panelProps","_objectWithoutProperties","_excluded","_ref","overlayClassName","overlayInnerStyle","_ref$overlayInnerStyl","restPopupProps","_excluded2","_useControlled","useControlled","_useControlled2","_slicedToArray","innerValue","setInnerValue","triggerRef","useRef","colorPanelRef","popProps","_objectSpread","placement","expandAnimation","trigger","classNames","padding","React","createElement","Popup","content","ColorPanel","value","context","ref","className","concat","ColorTrigger","displayName","memo"],"mappings":"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"}

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

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

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

@@ -0,0 +1,44 @@
+import { _ as _defineProperty } from '../../../_chunks/dep-Cwish4GD.js';
+import { _ as _objectWithoutProperties } from '../../../_chunks/dep-DN7d1SzH.js';
+import React from 'react';
+import classNames from 'classnames';
+import ColorSlider from './slider.js';
+import '../../../_chunks/dep-D-UKOauR.js';
+import '../../utils/color-picker/index.js';
+import '../../../_chunks/dep-DJmE940f.js';
+import '../../../_chunks/dep-CzLhKWCf.js';
+import '../../../_chunks/dep-Chz4ZJCb.js';
+import '../../../_chunks/dep-zOZQ0R9g.js';
+import 'lodash-es';
+import '../../../_chunks/dep-CgyDw_YI.js';
+import '../../../_chunks/dep-BbeHB7S3.js';
+
+var _excluded = ["color", "baseClassName", "onChange"];
+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; }
+var Alpha = function Alpha(props) {
+  var color = props.color,
+    baseClassName = props.baseClassName,
+    onChange = props.onChange,
+    rest = _objectWithoutProperties(props, _excluded);
+  var handleChange = function handleChange(v) {
+    onChange === null || onChange === void 0 || onChange(v / 100);
+  };
+  var railStyle = {
+    background: "linear-gradient(to right, rgba(0, 0, 0, 0), ".concat(props.color.rgb, ")")
+  };
+  return /* @__PURE__ */React.createElement(ColorSlider, _objectSpread({
+    baseClassName: baseClassName,
+    className: classNames(["".concat(baseClassName, "__alpha"), "".concat(baseClassName, "--bg-alpha")]),
+    color: color,
+    value: color.alpha * 100,
+    onChange: handleChange,
+    railStyle: railStyle,
+    type: "alpha",
+    maxValue: 100
+  }, rest));
+};
+var AlphaSlider = /*#__PURE__*/React.memo(Alpha);
+
+export { AlphaSlider as default };
+//# sourceMappingURL=alpha.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alpha.js","sources":["../../../../../components/color-picker/components/panel/alpha.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport type { TdColorBaseProps } from \"../../type\";\nimport ColorSlider from \"./slider\";\n\nconst Alpha = (props: TdColorBaseProps) => {\n  const { color, baseClassName, onChange, ...rest } = props;\n\n  const handleChange = (v: number) => {\n    onChange?.(v / 100);\n  };\n\n  const railStyle = {\n    background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${props.color.rgb})`\n  };\n\n  return (\n    <ColorSlider\n      baseClassName={baseClassName}\n      className={classNames([`${baseClassName}__alpha`, `${baseClassName}--bg-alpha`])}\n      color={color}\n      value={color.alpha * 100}\n      onChange={handleChange}\n      railStyle={railStyle}\n      type=\"alpha\"\n      maxValue={100}\n      {...rest}\n    />\n  );\n};\n\nexport default React.memo(Alpha);\n"],"names":["Alpha","props","color","baseClassName","onChange","rest","_excluded","handleChange","v","railStyle","background","concat","rgb","React","createElement","ColorSlider","_objectSpread","className","classNames","value","alpha","type","maxValue","memo"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,IAAMA,KAAA,GAAQ,SAARA,KAAAA,CAASC,KAAA,EAA4B;AACzC,EAAA,IAAQC,KAAA,GAA4CD,KAAA,CAA5CC,KAAA;IAAOC,aAAA,GAAqCF,KAAA,CAArCE,aAAA;IAAeC,QAAA,GAAsBH,KAAA,CAAtBG,QAAA;AAAaC,IAAAA,gCAASJ,KAAA,EAAAK,SAAA,CAAA;AAEpD,EAAA,IAAMC,YAAA,GAAe,SAAfA,YAAAA,CAAgBC,CAAA,EAAc;IAClCJ,QAAA,KAAA,IAAA,IAAAA,QAAA,KAAA,KAAA,CAAA,IAAAA,QAAA,CAAWI,IAAI,GAAG,CAAA;EACpB,CAAA;AAEA,EAAA,IAAMC,SAAA,GAAY;AAChBC,IAAAA,UAAA,iDAAAC,MAAA,CAA2DV,KAAA,CAAMC,KAAA,CAAMU,GAAG,EAAA,GAAA;GAC5E;AAEA,EAAA,sBACEC,KAAA,CAAAC,aAAA,CAACC,WAAA,EAAAC,aAAA,CAAA;AACCb,IAAAA,aAAA,EAAAA,aAAA;AACAc,IAAAA,SAAA,EAAWC,WAAW,CAAA,EAAA,CAAAP,MAAA,CAAIR,aAAa,EAAA,SAAA,CAAA,EAAA,EAAA,CAAAQ,MAAA,CAAcR,aAAa,EAAA,YAAA,CAAA,CAAa,CAAA;AAC/ED,IAAAA,KAAA,EAAAA,KAAA;AACAiB,IAAAA,KAAA,EAAOjB,MAAMkB,KAAA,GAAQ,GAAA;AACrBhB,IAAAA,QAAA,EAAUG,YAAA;AACVE,IAAAA,SAAA,EAAAA,SAAA;AACAY,IAAAA,IAAA,EAAK,OAAA;AACLC,IAAAA,QAAA,EAAU;GAAA,EACNjB,IAAA,CACN,CAAA;AAEJ,CAAA;AAEA,kBAAA,aAAeQ,KAAA,CAAMU,KAAKvB,KAAK,CAAA;;;;"}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { Color } from "../../../utils/color-picker";
+import type { TdColorPickerProps } from "../../../type";
+export interface TdColorFormatProps extends TdColorPickerProps {
+    onInputChange: () => void;
+    baseClassName: string;
+    color: Color;
+}
+declare const _default: React.MemoExoticComponent<(props: TdColorFormatProps) => React.JSX.Element>;
+export default _default;

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

@@ -0,0 +1,128 @@
+import { _ as _defineProperty } from '../../../../_chunks/dep-Cwish4GD.js';
+import { _ as _slicedToArray } from '../../../../_chunks/dep-CzLhKWCf.js';
+import React, { useState } from 'react';
+import { getColorFormatOptions } from '../../../utils/color-picker/index.js';
+import { Select } from '../../../../select/index.js';
+import FormatInputs from './inputs.js';
+import '../../../../_chunks/dep-D-UKOauR.js';
+import '../../../../_chunks/dep-DJmE940f.js';
+import '../../../../_chunks/dep-Chz4ZJCb.js';
+import '../../../../_chunks/dep-zOZQ0R9g.js';
+import 'lodash-es';
+import '../../../../_chunks/dep-CgyDw_YI.js';
+import '../../../../select/Select.js';
+import '../../../../_chunks/dep-DN7d1SzH.js';
+import 'classnames';
+import '../../../../_chunks/dep-DQ6kXoi8.js';
+import '../../../../_chunks/dep-DwWrhxkd.js';
+import '../../../../_chunks/dep-gy8uvBaS.js';
+import '../../../../_chunks/dep-5U9UjDaf.js';
+import 'dayjs';
+import '../../../../_chunks/dep-BP0-apUT.js';
+import 'hoist-non-react-statics';
+import '../../../../_chunks/dep-CJCt0IS0.js';
+import '../../../../_chunks/dep-Bjfn7Zv_.js';
+import '../../../../_chunks/dep-DGvfel3I.js';
+import '../../../../select/Option.js';
+import '../../../../_chunks/dep-PPA-yoAy.js';
+import '../../../../_chunks/dep-Dlppf0JU.js';
+import '../../../../_chunks/dep-U1T8CQY9.js';
+import '../../../../common/FakeArrow.js';
+import '../../../../loading/index.js';
+import '../../../../loading/Loading.js';
+import '../../../../_chunks/dep-DRwijJcv.js';
+import '../../../../common/Portal.js';
+import 'react-dom';
+import '../../../../_chunks/dep-BRbJGDI9.js';
+import '../../../../loading/Gradient.js';
+import '../../../../_chunks/dep-DbVHGoUC.js';
+import '../../../../loading/style/css.js';
+import '../../../../select-input/index.js';
+import '../../../../select-input/SelectInput.js';
+import '../../../../select-input/hook/useSingle.js';
+import '../../../../input/index.js';
+import '../../../../input/Input.js';
+import '@tendaui/icons';
+import '../../../../_chunks/dep-D6YxJv-F.js';
+import '../../../../input/InputGroup.js';
+import '../../../../input/style/css.js';
+import '../../../../select-input/hook/useMultiple.js';
+import '../../../../tag-input/index.js';
+import '../../../../tag-input/TagInput.js';
+import '../../../../tag-input/hooks/useTagList.js';
+import '../../../../tag/index.js';
+import '../../../../tag/Tag.js';
+import '../../../../_chunks/dep-ByzdZjUR.js';
+import '../../../../tag/style/css.js';
+import '../../../../hooks/useDragSorter.js';
+import '../../../../tag-input/style/css.js';
+import '../../../../popup/index.js';
+import '../../../../popup/Popup.js';
+import '../../../../portal/Portal.js';
+import '../../../../_chunks/dep-CkmtEv0Y.js';
+import 'react-is';
+import '../../../../_chunks/dep-C1XcmShP.js';
+import '../../../../_chunks/dep-Ccktr_jk.js';
+import '@popperjs/core';
+import 'react-fast-compare';
+import 'react-transition-group';
+import '../../../../popup/style/css.js';
+import '../../../../select-input/style/css.js';
+import '../../../../_chunks/dep-D8jki30S.js';
+import '../../../../select/style/css.js';
+import '../../../../input-number/index.js';
+import '../../../../input-number/InputNumber.js';
+import '../../../../button/index.js';
+import '../../../../button/Button.js';
+import '../../../../button/style/css.js';
+import '../../../../input-number/useInputNumber.js';
+import '../../../../utils/log/index.js';
+import '../../../../_chunks/dep-DTlQ2dCA.js';
+import '../../../../input-number/style/css.js';
+
+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; }
+var FormatPanel = function FormatPanel(props) {
+  var enableAlpha = props.enableAlpha,
+    baseClassName = props.baseClassName,
+    format = props.format,
+    selectInputProps = props.selectInputProps;
+  var _useState = useState(format),
+    _useState2 = _slicedToArray(_useState, 2),
+    formatMode = _useState2[0],
+    setFormatMode = _useState2[1];
+  var handleModeChange = function handleModeChange(v) {
+    setFormatMode(v);
+  };
+  return /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__format")
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__format--item")
+  }, /* @__PURE__ */React.createElement(Select, {
+    size: "small",
+    className: "".concat(baseClassName, "__format-mode-select"),
+    popupProps: _objectSpread({
+      overlayClassName: "".concat(baseClassName, "__select-options")
+    }, selectInputProps === null || selectInputProps === void 0 ? void 0 : selectInputProps.popupProps),
+    autoWidth: true,
+    value: formatMode,
+    onChange: handleModeChange
+  }, getColorFormatOptions(enableAlpha).map(function (item) {
+    return /* @__PURE__ */React.createElement(Select.Option, {
+      key: item,
+      value: item,
+      label: item,
+      style: {
+        fontSize: "12px"
+      }
+    });
+  }))), /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__format--item")
+  }, /* @__PURE__ */React.createElement(FormatInputs, _objectSpread(_objectSpread({}, props), {}, {
+    format: formatMode
+  }))));
+};
+var index = /*#__PURE__*/React.memo(FormatPanel);
+
+export { index 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":["../../../../../../components/color-picker/components/panel/format/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Color, getColorFormatOptions } from \"../../../utils/color-picker\";\nimport Select from \"../../../../select\";\nimport type { TdColorPickerProps } from \"../../../type\";\nimport FormatInputs from \"./inputs\";\n\nexport interface TdColorFormatProps extends TdColorPickerProps {\n  onInputChange: () => void;\n  baseClassName: string;\n  color: Color;\n}\n\nconst FormatPanel = (props: TdColorFormatProps) => {\n  const { enableAlpha, baseClassName, format, selectInputProps } = props;\n  const [formatMode, setFormatMode] = useState(format);\n\n  const handleModeChange = (v: TdColorPickerProps[\"format\"]) => {\n    setFormatMode(v);\n  };\n\n  return (\n    <div className={`${baseClassName}__format`}>\n      <div className={`${baseClassName}__format--item`}>\n        <Select\n          size=\"small\"\n          className={`${baseClassName}__format-mode-select`}\n          popupProps={{\n            overlayClassName: `${baseClassName}__select-options`,\n            ...selectInputProps?.popupProps\n          }}\n          autoWidth\n          value={formatMode}\n          onChange={handleModeChange}\n        >\n          {getColorFormatOptions(enableAlpha).map((item) => (\n            <Select.Option key={item} value={item} label={item} style={{ fontSize: \"12px\" }} />\n          ))}\n        </Select>\n      </div>\n      <div className={`${baseClassName}__format--item`}>\n        <FormatInputs {...props} format={formatMode} />\n      </div>\n    </div>\n  );\n};\n\nexport default React.memo(FormatPanel);\n"],"names":["FormatPanel","props","enableAlpha","baseClassName","format","selectInputProps","_useState","useState","_useState2","_slicedToArray","formatMode","setFormatMode","handleModeChange","v","React","createElement","className","concat","Select","size","popupProps","_objectSpread","overlayClassName","autoWidth","value","onChange","getColorFormatOptions","map","item","Option","key","label","style","fontSize","FormatInputs","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,IAAMA,WAAA,GAAc,SAAdA,WAAAA,CAAeC,KAAA,EAA8B;AACjD,EAAA,IAAQC,WAAA,GAAyDD,KAAA,CAAzDC,WAAA;IAAaC,aAAA,GAA4CF,KAAA,CAA5CE,aAAA;IAAeC,MAAA,GAA6BH,KAAA,CAA7BG,MAAA;IAAQC,mBAAqBJ,KAAA,CAArBI;AAC5C,EAAA,IAAAC,SAAA,GAAoCC,SAASH,MAAM,CAAA;IAAAI,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA5CI,IAAAA,UAAA,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAYG,IAAAA,aAAa,GAAAH,UAAA,CAAA,CAAA,CAAA;AAEhC,EAAA,IAAMI,gBAAA,GAAmB,SAAnBA,gBAAAA,CAAoBC,CAAA,EAAoC;IAC5DF,aAAA,CAAcE,CAAC,CAAA;EACjB,CAAA;AAEA,EAAA,sBACEC,KAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;IAAIC,SAAA,EAAA,EAAA,CAAAC,MAAA,CAAcd,aAAa,EAAA,UAAA;AAAA,GAAA,iBAC9BW,KAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;IAAIC,SAAA,EAAA,EAAA,CAAAC,MAAA,CAAcd,aAAa,EAAA,gBAAA;AAAA,GAAA,iBAC9BW,KAAA,CAAAC,aAAA,CAACG,MAAA,EAAA;AACCC,IAAAA,IAAA,EAAK,OAAA;AACLH,IAAAA,SAAA,EAAA,EAAA,CAAAC,MAAA,CAAcd,aAAa,EAAA,sBAAA,CAAA;AAC3BiB,IAAAA,UAAA,EAAAC,aAAA,CAAA;MACEC,gBAAA,EAAA,EAAA,CAAAL,MAAA,CAAqBd,aAAa,EAAA,kBAAA;AAAA,KAAA,EAC/BE,gBAAA,KAAA,IAAA,IAAAA,gBAAA,uBAAAA,gBAAA,CAAkBe,UAAA,CACvB;AACAG,IAAAA,SAAA,EAAS,IAAA;AACTC,IAAAA,KAAA,EAAOd,UAAA;AACPe,IAAAA,QAAA,EAAUb;GAAA,EAETc,qBAAA,CAAsBxB,WAAW,CAAA,CAAEyB,GAAA,CAAI,UAACC,IAAA,EAAA;IAAA,sBACvCd,KAAA,CAAAC,aAAA,CAACG,OAAOW,MAAA,EAAP;AAAcC,MAAAA,KAAKF,IAAA;AAAMJ,MAAAA,KAAA,EAAOI;AAAMG,MAAAA,KAAA,EAAOH,IAAA;AAAMI,MAAAA,OAAO;AAAEC,QAAAA,QAAA,EAAU;AAAO;AAAA,KAAG,CAClF;EAAA,CAAA,CACH,CACF,CAAA,iBACAnB,KAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;IAAIC,qBAAcb,aAAa,EAAA,gBAAA;AAAA,GAAA,iBAC9BW,KAAA,CAAAC,aAAA,CAACmB,8CAAiBjC,KAAA,CAAA,EAAA,EAAA,EAAA;AAAOG,IAAAA,MAAA,EAAQM;GAAA,CAAY,CAC/C,CACF,CAAA;AAEJ,CAAA;AAEA,YAAA,aAAeI,KAAA,CAAMqB,KAAKnC,WAAW,CAAA;;;;"}

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

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