@thienvu18/designable-react-settings-form 2.0.1 → 2.0.2

package/esm/components/BorderStyleSetter/index.js

@@ -1,74 +1,127 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useMemo } from 'react';
-import { usePrefix } from '@thienvu18/designable-react';
-import { camelCase } from '@formily/shared';
-import { Select } from '@thienvu18/formily-antd-v6';
-import { observable } from '@formily/reactive';
-import { useField, Field, observer } from '@formily/react';
-import { FoldItem } from '../FoldItem';
-import { ColorInput } from '../ColorInput';
-import { SizeInput } from '../SizeInput';
-import { PositionInput } from '../PositionInput';
-import cls from 'classnames';
-import './styles.less';
-const Positions = ['center', 'top', 'right', 'bottom', 'left'];
+import { Field, observer, useField } from '@formily/react'
+import { observable } from '@formily/reactive'
+import { camelCase } from '@formily/shared'
+import { usePrefix } from '@thienvu18/designable-react'
+import { Select } from '@thienvu18/formily-antd-v6'
+import cls from 'classnames'
+import { Fragment, useMemo } from 'react'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import { ColorInput } from '../ColorInput'
+import { FoldItem } from '../FoldItem'
+import { PositionInput } from '../PositionInput'
+import { SizeInput } from '../SizeInput'
+import './styles.less'
+const Positions = ['center', 'top', 'right', 'bottom', 'left']
 const BorderStyleOptions = [
-    {
-        label: 'None',
-        value: 'none',
-    },
-    {
-        label: _jsx("span", { className: "border-style-solid-line" }),
-        value: 'solid',
-    },
-    {
-        label: _jsx("span", { className: "border-style-dashed-line" }),
-        value: 'dashed',
-    },
-    {
-        label: _jsx("span", { className: "border-style-dotted-line" }),
-        value: 'dotted',
-    },
-];
+  {
+    label: 'None',
+    value: 'none',
+  },
+  {
+    label: _jsx('span', { className: 'border-style-solid-line' }),
+    value: 'solid',
+  },
+  {
+    label: _jsx('span', { className: 'border-style-dashed-line' }),
+    value: 'dashed',
+  },
+  {
+    label: _jsx('span', { className: 'border-style-dotted-line' }),
+    value: 'dotted',
+  },
+]
 const createBorderProp = (position, key) => {
-    const insert = position === 'center' ? '' : `-${position}`;
-    return camelCase(`border${insert}-${key}`);
-};
+  const insert = position === 'center' ? '' : `-${position}`
+  return camelCase(`border${insert}-${key}`)
+}
 const parseInitPosition = (field) => {
-    const basePath = field.address.parent();
-    for (let i = 0; i < Positions.length; i++) {
-        const position = Positions[i];
-        const stylePath = `${basePath}.${createBorderProp(position, 'style')}`;
-        const widthPath = `${basePath}.${createBorderProp(position, 'width')}`;
-        const colorPath = `${basePath}.${createBorderProp(position, 'color')}`;
-        if (field.query(stylePath).value() ||
-            field.query(widthPath).value() ||
-            field.query(colorPath).value()) {
-            return position;
-        }
+  const basePath = field.address.parent()
+  for (let i = 0; i < Positions.length; i++) {
+    const position = Positions[i]
+    const stylePath = `${basePath}.${createBorderProp(position, 'style')}`
+    const widthPath = `${basePath}.${createBorderProp(position, 'width')}`
+    const colorPath = `${basePath}.${createBorderProp(position, 'color')}`
+    if (
+      field.query(stylePath).value() ||
+      field.query(widthPath).value() ||
+      field.query(colorPath).value()
+    ) {
+      return position
     }
-    return 'center';
-};
+  }
+  return 'center'
+}
 export const BorderStyleSetter = observer(({ className, style }) => {
-    const field = useField();
-    const currentPosition = useMemo(() => observable({
+  const field = useField()
+  const currentPosition = useMemo(
+    () =>
+      observable({
         value: parseInitPosition(field),
-    }), [field.value]);
-    const prefix = usePrefix('border-style-setter');
-    const createReaction = (position) => (field) => {
-        field.display = currentPosition.value === position ? 'visible' : 'hidden';
-        if (position !== 'center') {
-            const borderStyle = field.query('.borderStyle').value();
-            const borderWidth = field.query('.borderWidth').value();
-            const borderColor = field.query('.borderColor').value();
-            if (borderStyle || borderWidth || borderColor) {
-                field.value = undefined;
-            }
-        }
-    };
-    return (_jsx(FoldItem, { label: field.title, children: _jsx(FoldItem.Extra, { children: _jsxs("div", { className: cls(prefix, className), style: style, children: [_jsx("div", { className: prefix + '-position', children: _jsx(PositionInput, { value: currentPosition.value, onChange: (value) => {
-                                currentPosition.value = value;
-                            } }) }), _jsx("div", { className: prefix + '-input', children: Positions.map((position, key) => {
-                            return (_jsxs(Fragment, { children: [_jsx(Field, { name: createBorderProp(position, 'style'), basePath: field.address.parent(), dataSource: BorderStyleOptions, reactions: createReaction(position), component: [Select, { placeholder: 'Please Select' }] }), _jsx(Field, { name: createBorderProp(position, 'width'), basePath: field.address.parent(), reactions: createReaction(position), component: [SizeInput, { exclude: ['auto'] }] }), _jsx(Field, { name: createBorderProp(position, 'color'), basePath: field.address.parent(), reactions: createReaction(position), component: [ColorInput] })] }, key));
-                        }) })] }) }) }));
-});
+      }),
+    [field.value]
+  )
+  const prefix = usePrefix('border-style-setter')
+  const createReaction = (position) => (field) => {
+    field.display = currentPosition.value === position ? 'visible' : 'hidden'
+    if (position !== 'center') {
+      const borderStyle = field.query('.borderStyle').value()
+      const borderWidth = field.query('.borderWidth').value()
+      const borderColor = field.query('.borderColor').value()
+      if (borderStyle || borderWidth || borderColor) {
+        field.value = undefined
+      }
+    }
+  }
+  return _jsx(FoldItem, {
+    label: field.title,
+    children: _jsx(FoldItem.Extra, {
+      children: _jsxs('div', {
+        className: cls(prefix, className),
+        style: style,
+        children: [
+          _jsx('div', {
+            className: prefix + '-position',
+            children: _jsx(PositionInput, {
+              value: currentPosition.value,
+              onChange: (value) => {
+                currentPosition.value = value
+              },
+            }),
+          }),
+          _jsx('div', {
+            className: prefix + '-input',
+            children: Positions.map((position, key) => {
+              return _jsxs(
+                Fragment,
+                {
+                  children: [
+                    _jsx(Field, {
+                      name: createBorderProp(position, 'style'),
+                      basePath: field.address.parent(),
+                      dataSource: BorderStyleOptions,
+                      reactions: createReaction(position),
+                      component: [Select, { placeholder: 'Please Select' }],
+                    }),
+                    _jsx(Field, {
+                      name: createBorderProp(position, 'width'),
+                      basePath: field.address.parent(),
+                      reactions: createReaction(position),
+                      component: [SizeInput, { exclude: ['auto'] }],
+                    }),
+                    _jsx(Field, {
+                      name: createBorderProp(position, 'color'),
+                      basePath: field.address.parent(),
+                      reactions: createReaction(position),
+                      component: [ColorInput],
+                    }),
+                  ],
+                },
+                key
+              )
+            }),
+          }),
+        ],
+      }),
+    }),
+  })
+})

package/esm/components/BoxShadowStyleSetter/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from 'react'
 export interface IBoxShadowStyleSetterProps {
-    className?: string;
-    style?: React.CSSProperties;
-    value?: string;
-    onChange?: (value: string) => void;
+  className?: string
+  style?: React.CSSProperties
+  value?: string
+  onChange?: (value: string) => void
 }
-export declare const BoxShadowStyleSetter: React.FC<IBoxShadowStyleSetterProps>;
+export declare const BoxShadowStyleSetter: React.FC<IBoxShadowStyleSetterProps>

package/esm/components/BoxShadowStyleSetter/index.js

@@ -1,25 +1,73 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePrefix } from '@thienvu18/designable-react';
-import { useField, observer } from '@formily/react';
-import { FoldItem } from '../FoldItem';
-import { ColorInput } from '../ColorInput';
-import { SizeInput } from '../SizeInput';
-import { InputItems } from '../InputItems';
-import cls from 'classnames';
+import { observer, useField } from '@formily/react'
+import { usePrefix } from '@thienvu18/designable-react'
+import cls from 'classnames'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import { ColorInput } from '../ColorInput'
+import { FoldItem } from '../FoldItem'
+import { InputItems } from '../InputItems'
+import { SizeInput } from '../SizeInput'
 export const BoxShadowStyleSetter = observer((props) => {
-    const field = useField();
-    const prefix = usePrefix('shadow-style-setter');
-    const createBoxShadowConnector = (position) => {
-        const splited = String(props.value || '')
-            .trim()
-            .split(' ');
-        return {
-            value: splited[position],
-            onChange: (value) => {
-                splited[position] = value;
-                props.onChange?.(`${splited[0] || ''} ${splited[1] || ''} ${splited[2] || ''} ${splited[3] || ''} ${splited[4] || ''}`);
-            },
-        };
-    };
-    return (_jsxs(FoldItem, { className: cls(prefix, props.className), style: props.style, label: field.title, children: [_jsx(FoldItem.Base, { children: _jsx(ColorInput, { ...createBoxShadowConnector(4) }) }), _jsx(FoldItem.Extra, { children: _jsxs(InputItems, { width: "50%", children: [_jsx(InputItems.Item, { icon: "AxisX", children: _jsx(SizeInput, { exclude: ['inherit', 'auto'], ...createBoxShadowConnector(0) }) }), _jsx(InputItems.Item, { icon: "AxisY", children: _jsx(SizeInput, { exclude: ['inherit', 'auto'], ...createBoxShadowConnector(1) }) }), _jsx(InputItems.Item, { icon: "Blur", children: _jsx(SizeInput, { exclude: ['inherit', 'auto'], ...createBoxShadowConnector(2) }) }), _jsx(InputItems.Item, { icon: "Shadow", children: _jsx(SizeInput, { exclude: ['inherit', 'auto'], ...createBoxShadowConnector(3) }) })] }) })] }));
-});
+  const field = useField()
+  const prefix = usePrefix('shadow-style-setter')
+  const createBoxShadowConnector = (position) => {
+    const splited = String(props.value || '')
+      .trim()
+      .split(' ')
+    return {
+      value: splited[position],
+      onChange: (value) => {
+        splited[position] = value
+        props.onChange?.(
+          `${splited[0] || ''} ${splited[1] || ''} ${splited[2] || ''} ${
+            splited[3] || ''
+          } ${splited[4] || ''}`
+        )
+      },
+    }
+  }
+  return _jsxs(FoldItem, {
+    className: cls(prefix, props.className),
+    style: props.style,
+    label: field.title,
+    children: [
+      _jsx(FoldItem.Base, {
+        children: _jsx(ColorInput, { ...createBoxShadowConnector(4) }),
+      }),
+      _jsx(FoldItem.Extra, {
+        children: _jsxs(InputItems, {
+          width: '50%',
+          children: [
+            _jsx(InputItems.Item, {
+              icon: 'AxisX',
+              children: _jsx(SizeInput, {
+                exclude: ['inherit', 'auto'],
+                ...createBoxShadowConnector(0),
+              }),
+            }),
+            _jsx(InputItems.Item, {
+              icon: 'AxisY',
+              children: _jsx(SizeInput, {
+                exclude: ['inherit', 'auto'],
+                ...createBoxShadowConnector(1),
+              }),
+            }),
+            _jsx(InputItems.Item, {
+              icon: 'Blur',
+              children: _jsx(SizeInput, {
+                exclude: ['inherit', 'auto'],
+                ...createBoxShadowConnector(2),
+              }),
+            }),
+            _jsx(InputItems.Item, {
+              icon: 'Shadow',
+              children: _jsx(SizeInput, {
+                exclude: ['inherit', 'auto'],
+                ...createBoxShadowConnector(3),
+              }),
+            }),
+          ],
+        }),
+      }),
+    ],
+  })
+})

package/esm/components/BoxStyleSetter/index.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from 'react'
 export interface IMarginStyleSetterProps {
-    className?: string;
-    style?: React.CSSProperties;
-    labels?: React.ReactNode[];
-    value?: string;
-    onChange?: (value: string) => void;
+  className?: string
+  style?: React.CSSProperties
+  labels?: React.ReactNode[]
+  value?: string
+  onChange?: (value: string) => void
 }
-export declare const BoxStyleSetter: React.FC<IMarginStyleSetterProps>;
+export declare const BoxStyleSetter: React.FC<IMarginStyleSetterProps>

package/esm/components/BoxStyleSetter/index.js

@@ -1,49 +1,101 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useField, observer } from '@formily/react';
-import { usePrefix, IconWidget } from '@thienvu18/designable-react';
-import { FoldItem } from '../FoldItem';
-import { SizeInput } from '../SizeInput';
-import { InputItems } from '../InputItems';
-import cls from 'classnames';
+import { observer, useField } from '@formily/react'
+import { IconWidget, usePrefix } from '@thienvu18/designable-react'
+import cls from 'classnames'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import { FoldItem } from '../FoldItem'
+import { InputItems } from '../InputItems'
+import { SizeInput } from '../SizeInput'
 const PositionMap = {
-    top: 1,
-    right: 2,
-    bottom: 3,
-    left: 4,
-    all: 1,
-};
-const BoxRex = /([\d\.]+[^\d\s\.+-]+)(?:\s+([\d\.]+[^\d\s\.+-]+)(?:\s+([\d\.]+[^\d\s\.+-]+)(?:\s+([\d\.]+[^\d\s\.+-]+))?)?)?/;
+  top: 1,
+  right: 2,
+  bottom: 3,
+  left: 4,
+  all: 1,
+}
+const BoxRex =
+  /([\d\.]+[^\d\s\.+-]+)(?:\s+([\d\.]+[^\d\s\.+-]+)(?:\s+([\d\.]+[^\d\s\.+-]+)(?:\s+([\d\.]+[^\d\s\.+-]+))?)?)?/
 const defaultLabels = [
-    _jsx(IconWidget, { infer: "Top", size: 16 }, "1"),
-    _jsx(IconWidget, { infer: "Right", size: 16 }, "2"),
-    _jsx(IconWidget, { infer: "Bottom", size: 16 }, "3"),
-    _jsx(IconWidget, { infer: "Left", size: 16 }, "4"),
-];
+  _jsx(IconWidget, { infer: 'Top', size: 16 }, '1'),
+  _jsx(IconWidget, { infer: 'Right', size: 16 }, '2'),
+  _jsx(IconWidget, { infer: 'Bottom', size: 16 }, '3'),
+  _jsx(IconWidget, { infer: 'Left', size: 16 }, '4'),
+]
 export const BoxStyleSetter = observer((props) => {
-    const { labels = defaultLabels, className } = props;
-    const field = useField();
-    const prefix = usePrefix('box-style-setter');
-    const createPositionHandler = (position, setterProps) => {
-        const matched = String(setterProps.value).match(BoxRex) || [];
-        const value = matched[PositionMap[position]];
-        const v1 = matched[1];
-        const v2 = matched[2];
-        const v3 = matched[3];
-        const v4 = matched[4];
-        const allEqualls = v1 === v2 && v2 === v3 && v3 === v4;
-        return {
-            ...setterProps,
-            value: position === 'all' ? (allEqualls ? v1 : undefined) : value,
-            onChange(val) {
-                if (position === 'all') {
-                    setterProps.onChange?.(`${val || '0px'} ${val || '0px'} ${val || '0px'} ${val || '0px'}`);
-                }
-                else {
-                    matched[PositionMap[position]] = val;
-                    setterProps.onChange?.(`${matched[1] || '0px'} ${matched[2] || '0px'} ${matched[3] || '0px'} ${matched[4] || '0px'}`);
-                }
-            },
-        };
-    };
-    return (_jsxs(FoldItem, { className: cls(prefix, className), label: field.title, children: [_jsx(FoldItem.Base, { children: _jsx(SizeInput, { ...createPositionHandler('all', props), exclude: ['inherit', 'auto'] }) }), _jsx(FoldItem.Extra, { children: _jsxs(InputItems, { width: "50%", children: [_jsx(InputItems.Item, { icon: labels[0], children: _jsx(SizeInput, { ...createPositionHandler('top', props), exclude: ['inherit', 'auto'] }) }), _jsx(InputItems.Item, { icon: labels[1], children: _jsx(SizeInput, { ...createPositionHandler('right', props), exclude: ['inherit', 'auto'] }) }), _jsx(InputItems.Item, { icon: labels[2], children: _jsx(SizeInput, { ...createPositionHandler('bottom', props), exclude: ['inherit', 'auto'] }) }), _jsx(InputItems.Item, { icon: labels[3], children: _jsx(SizeInput, { ...createPositionHandler('left', props), exclude: ['inherit', 'auto'] }) })] }) })] }));
-});
+  const { labels = defaultLabels, className } = props
+  const field = useField()
+  const prefix = usePrefix('box-style-setter')
+  const createPositionHandler = (position, setterProps) => {
+    const matched = String(setterProps.value).match(BoxRex) || []
+    const value = matched[PositionMap[position]]
+    const v1 = matched[1]
+    const v2 = matched[2]
+    const v3 = matched[3]
+    const v4 = matched[4]
+    const allEqualls = v1 === v2 && v2 === v3 && v3 === v4
+    return {
+      ...setterProps,
+      value: position === 'all' ? (allEqualls ? v1 : undefined) : value,
+      onChange(val) {
+        if (position === 'all') {
+          setterProps.onChange?.(
+            `${val || '0px'} ${val || '0px'} ${val || '0px'} ${val || '0px'}`
+          )
+        } else {
+          matched[PositionMap[position]] = val
+          setterProps.onChange?.(
+            `${matched[1] || '0px'} ${matched[2] || '0px'} ${
+              matched[3] || '0px'
+            } ${matched[4] || '0px'}`
+          )
+        }
+      },
+    }
+  }
+  return _jsxs(FoldItem, {
+    className: cls(prefix, className),
+    label: field.title,
+    children: [
+      _jsx(FoldItem.Base, {
+        children: _jsx(SizeInput, {
+          ...createPositionHandler('all', props),
+          exclude: ['inherit', 'auto'],
+        }),
+      }),
+      _jsx(FoldItem.Extra, {
+        children: _jsxs(InputItems, {
+          width: '50%',
+          children: [
+            _jsx(InputItems.Item, {
+              icon: labels[0],
+              children: _jsx(SizeInput, {
+                ...createPositionHandler('top', props),
+                exclude: ['inherit', 'auto'],
+              }),
+            }),
+            _jsx(InputItems.Item, {
+              icon: labels[1],
+              children: _jsx(SizeInput, {
+                ...createPositionHandler('right', props),
+                exclude: ['inherit', 'auto'],
+              }),
+            }),
+            _jsx(InputItems.Item, {
+              icon: labels[2],
+              children: _jsx(SizeInput, {
+                ...createPositionHandler('bottom', props),
+                exclude: ['inherit', 'auto'],
+              }),
+            }),
+            _jsx(InputItems.Item, {
+              icon: labels[3],
+              children: _jsx(SizeInput, {
+                ...createPositionHandler('left', props),
+                exclude: ['inherit', 'auto'],
+              }),
+            }),
+          ],
+        }),
+      }),
+    ],
+  })
+})

package/esm/components/CollapseItem/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import './styles.less';
+import React from 'react'
+import './styles.less'
 export interface ICollapseItemProps {
-    className?: string;
-    style?: React.CSSProperties;
-    defaultExpand?: boolean;
+  className?: string
+  style?: React.CSSProperties
+  defaultExpand?: boolean
 }
-export declare const CollapseItem: React.FC<ICollapseItemProps>;
+export declare const CollapseItem: React.FC<ICollapseItemProps>

package/esm/components/CollapseItem/index.js

@@ -1,16 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { useField, observer } from '@formily/react';
-import { usePrefix, IconWidget } from '@thienvu18/designable-react';
-import cls from 'classnames';
-import './styles.less';
+import { observer, useField } from '@formily/react'
+import { IconWidget, usePrefix } from '@thienvu18/designable-react'
+import cls from 'classnames'
+import { useState } from 'react'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import './styles.less'
 export const CollapseItem = observer((props) => {
-    const prefix = usePrefix('collapse-item');
-    const field = useField();
-    const [expand, setExpand] = useState(props.defaultExpand ?? true);
-    return (_jsxs("div", { className: cls(prefix, props.className, { expand }), style: props.style, children: [_jsxs("div", { className: prefix + '-header', onClick: (e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    setExpand(!expand);
-                }, children: [_jsx("div", { className: prefix + '-header-expand', children: _jsx(IconWidget, { infer: "Expand", size: 10 }) }), _jsx("div", { className: prefix + '-header-content', children: field.title })] }), _jsx("div", { className: prefix + '-content', children: props.children })] }));
-});
+  const prefix = usePrefix('collapse-item')
+  const field = useField()
+  const [expand, setExpand] = useState(props.defaultExpand ?? true)
+  return _jsxs('div', {
+    className: cls(prefix, props.className, { expand }),
+    style: props.style,
+    children: [
+      _jsxs('div', {
+        className: prefix + '-header',
+        onClick: (e) => {
+          e.stopPropagation()
+          e.preventDefault()
+          setExpand(!expand)
+        },
+        children: [
+          _jsx('div', {
+            className: prefix + '-header-expand',
+            children: _jsx(IconWidget, { infer: 'Expand', size: 10 }),
+          }),
+          _jsx('div', {
+            className: prefix + '-header-content',
+            children: field.title,
+          }),
+        ],
+      }),
+      _jsx('div', { className: prefix + '-content', children: props.children }),
+    ],
+  })
+})

package/esm/components/ColorInput/index.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import './styles.less';
+import React from 'react'
+import './styles.less'
 export interface IColorInputProps {
-    value?: string;
-    onChange?: (color: string) => void;
+  value?: string
+  onChange?: (color: string) => void
 }
-export declare const ColorInput: React.FC<IColorInputProps>;
+export declare const ColorInput: React.FC<IColorInputProps>

package/esm/components/ColorInput/index.js

@@ -1,18 +1,36 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { Input, Popover } from 'antd';
-import { usePrefix } from '@thienvu18/designable-react';
-import { SketchPicker } from 'react-color';
-import './styles.less';
+import { usePrefix } from '@thienvu18/designable-react'
+import { ColorPicker, Input } from 'antd'
+import { useRef } from 'react'
+import { jsx as _jsx } from 'react/jsx-runtime'
+import './styles.less'
 export const ColorInput = (props) => {
-    const container = useRef(null);
-    const prefix = usePrefix('color-input');
-    const color = props.value;
-    return (_jsx("div", { ref: container, className: prefix, children: _jsx(Input, { value: props.value, onChange: (e) => {
-                props.onChange?.(e.target.value);
-            }, placeholder: "Color", prefix: _jsx(Popover, { autoAdjustOverflow: true, trigger: "click", styles: { content: { padding: 0 } }, getPopupContainer: () => container.current || document.body, content: _jsx(SketchPicker, { color: color, onChange: ({ rgb }) => {
-                        props.onChange?.(`rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`);
-                    } }), children: _jsx("div", { className: prefix + '-color-tips', style: {
-                        backgroundColor: color,
-                    } }) }) }) }));
-};
+  const container = useRef(null)
+  const prefix = usePrefix('color-input')
+  const color = props.value
+  return _jsx('div', {
+    ref: container,
+    className: prefix,
+    children: _jsx(Input, {
+      value: props.value,
+      onChange: (e) => {
+        props.onChange?.(e.target.value)
+      },
+      placeholder: 'Color',
+      prefix: _jsx(ColorPicker, {
+        value: color,
+        autoAdjustOverflow: true,
+        getPopupContainer: () => container.current || document.body,
+        onChange: (nextColor) => {
+          const { r, g, b, a } = nextColor.toRgb()
+          props.onChange?.(`rgba(${r},${g},${b},${a})`)
+        },
+        children: _jsx('div', {
+          className: prefix + '-color-tips',
+          style: {
+            backgroundColor: color,
+          },
+        }),
+      }),
+    }),
+  })
+}

package/esm/components/ColorInput/styles.less

@@ -2,11 +2,6 @@
 .dn-color-input {
   width: 100%;
 
-  .@{ant-prefix}-popover-inner-content {
-    padding: 0 !important;
-    user-select: none;
-  }
-
   &-color-tips {
     width: 20px;
     height: 20px;