@thienvu18/designable-react-settings-form 2.0.0

package/esm/SchemaField.js

@@ -0,0 +1,42 @@
+import { createSchemaField } from '@formily/react';
+import { FormItem, Input, NumberPicker, DatePicker, TimePicker, Select, Radio, Switch, Space, ArrayItems, ArrayTable, FormCollapse, FormGrid, FormLayout, FormTab, } from '@thienvu18/formily-antd-v6';
+import { Slider } from 'antd';
+import { SizeInput, ColorInput, ImageInput, BackgroundImageInput, PositionInput, CornerInput, MonacoInput, ValueInput, BoxStyleSetter, BorderStyleSetter, BorderRadiusStyleSetter, BackgroundStyleSetter, BoxShadowStyleSetter, FontStyleSetter, DisplayStyleSetter, FlexStyleSetter, DrawerSetter, CollapseItem, } from './components';
+export const SchemaField = createSchemaField({
+    components: {
+        FormItem,
+        CollapseItem,
+        Input,
+        ValueInput,
+        SizeInput,
+        ColorInput,
+        ImageInput,
+        MonacoInput,
+        PositionInput,
+        CornerInput,
+        BackgroundImageInput,
+        BackgroundStyleSetter,
+        BoxStyleSetter,
+        BorderStyleSetter,
+        BorderRadiusStyleSetter,
+        DisplayStyleSetter,
+        BoxShadowStyleSetter,
+        FlexStyleSetter,
+        FontStyleSetter,
+        DrawerSetter,
+        NumberPicker,
+        DatePicker,
+        TimePicker,
+        Select,
+        Radio,
+        Slider,
+        Switch,
+        Space,
+        ArrayItems,
+        ArrayTable,
+        FormCollapse,
+        FormGrid,
+        FormLayout,
+        FormTab,
+    },
+});

package/esm/SettingsForm.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISettingFormProps } from './types';
+import './styles.less';
+export declare const SettingsForm: React.FC<ISettingFormProps>;

package/esm/SettingsForm.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { createForm } from '@formily/core';
+import { Form } from '@thienvu18/formily-antd-v6';
+import { observer } from '@formily/react';
+import { requestIdle, cancelIdle } from '@thienvu18/designable-shared';
+import { usePrefix, useSelected, useOperation, useSelectedNode, useWorkbench, IconWidget, NodePathWidget, } from '@thienvu18/designable-react';
+import { SchemaField } from './SchemaField';
+import { SettingsFormContext } from './shared/context';
+import { useLocales, useSnapshot } from './effects';
+import { Empty } from 'antd';
+import cls from 'classnames';
+import './styles.less';
+const GlobalState = {
+    idleRequest: null,
+};
+export const SettingsForm = observer((props) => {
+    const workbench = useWorkbench();
+    const currentWorkspace = workbench?.activeWorkspace || workbench?.currentWorkspace;
+    const currentWorkspaceId = currentWorkspace?.id;
+    const operation = useOperation(currentWorkspaceId);
+    const node = useSelectedNode(currentWorkspaceId);
+    const selected = useSelected(currentWorkspaceId);
+    const prefix = usePrefix('settings-form');
+    const schema = node?.designerProps?.propsSchema;
+    const isEmpty = !(node &&
+        node.designerProps?.propsSchema &&
+        selected.length === 1);
+    const form = useMemo(() => {
+        return createForm({
+            initialValues: node?.designerProps?.defaultProps,
+            values: node?.props,
+            effects(form) {
+                useLocales(node);
+                useSnapshot(operation);
+                props.effects?.(form);
+            },
+        });
+    }, [node, node?.props, schema, operation, isEmpty]);
+    const render = () => {
+        if (!isEmpty) {
+            return (_jsx("div", { className: cls(prefix, props.className), style: props.style, children: _jsx(SettingsFormContext.Provider, { value: props, children: _jsx(Form, { form: form, colon: false, labelWidth: 120, labelAlign: "left", wrapperAlign: "right", feedbackLayout: "none", tooltipLayout: "text", children: _jsx(SchemaField, { schema: schema, components: props.components, scope: { $node: node, ...props.scope } }) }) }) }, node.id));
+        }
+        return (_jsx("div", { className: prefix + '-empty', children: _jsx(Empty, {}) }));
+    };
+    return (_jsx(IconWidget.Provider, { tooltip: true, children: _jsxs("div", { className: prefix + '-wrapper', children: [!isEmpty && _jsx(NodePathWidget, { workspaceId: currentWorkspaceId }), _jsx("div", { className: prefix + '-content', children: render() })] }) }));
+}, {
+    scheduler: (update) => {
+        cancelIdle(GlobalState.idleRequest);
+        GlobalState.idleRequest = requestIdle(update, {
+            timeout: 500,
+        });
+    },
+});

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IBackgroundStyleSetterProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const BackgroundStyleSetter: React.FC<IBackgroundStyleSetterProps>;

package/esm/components/BackgroundStyleSetter/index.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField, Field, observer } from '@formily/react';
+import { usePrefix } from '@thienvu18/designable-react';
+import { Select, Input } from '@thienvu18/formily-antd-v6';
+import { FoldItem } from '../FoldItem';
+import { ColorInput } from '../ColorInput';
+import { BackgroundSizeInput } from '../SizeInput';
+import { BackgroundImageInput } from '../ImageInput';
+import { InputItems } from '../InputItems';
+import cls from 'classnames';
+export const BackgroundStyleSetter = observer((props) => {
+    const field = useField();
+    const prefix = usePrefix('background-style-setter');
+    return (_jsxs(FoldItem, { className: cls(prefix, props.className), label: field.title, children: [_jsx(FoldItem.Base, { children: _jsx(Field, { name: "backgroundColor", basePath: field.address.parent(), component: [ColorInput] }) }), _jsx(FoldItem.Extra, { children: _jsxs(InputItems, { children: [_jsx(InputItems.Item, { icon: "Image", children: _jsx(Field, { name: "backgroundImage", basePath: field.address.parent(), component: [BackgroundImageInput] }) }), _jsx(InputItems.Item, { icon: "ImageSize", width: "50%", children: _jsx(Field, { name: "backgroundSize", basePath: field.address.parent(), component: [BackgroundSizeInput] }) }), _jsx(InputItems.Item, { icon: "Repeat", width: "50%", children: _jsx(Field, { name: "backgroundRepeat", basePath: field.address.parent(), component: [
+                                    Select,
+                                    { style: { width: '100%' }, placeholder: 'Repeat' },
+                                ], dataSource: [
+                                    {
+                                        label: 'No Repeat',
+                                        value: 'no-repeat',
+                                    },
+                                    {
+                                        label: 'Repeat',
+                                        value: 'repeat',
+                                    },
+                                    {
+                                        label: 'Repeat X',
+                                        value: 'repeat-x',
+                                    },
+                                    {
+                                        label: 'Repeat Y',
+                                        value: 'repeat-y',
+                                    },
+                                    {
+                                        label: 'Space',
+                                        value: 'space',
+                                    },
+                                    {
+                                        label: 'Round',
+                                        value: 'round',
+                                    },
+                                ] }) }), _jsx(InputItems.Item, { icon: "Position", children: _jsx(Field, { name: "backgroundPosition", basePath: field.address.parent(), component: [Input, { placeholder: 'center center' }] }) })] }) })] }));
+});

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IBorderRadiusStyleSetterProps {
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const BorderRadiusStyleSetter: React.FC<IBorderRadiusStyleSetterProps>;

package/esm/components/BorderRadiusStyleSetter/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconWidget } from '@thienvu18/designable-react';
+import { BoxStyleSetter } from '../BoxStyleSetter';
+export const BorderRadiusStyleSetter = (props) => {
+    return (_jsx(BoxStyleSetter, { ...props, labels: [
+            _jsx(IconWidget, { infer: "TopLeft", size: 16 }, "1"),
+            _jsx(IconWidget, { infer: "TopRight", size: 16 }, "2"),
+            _jsx(IconWidget, { infer: "BottomRight", size: 16 }, "3"),
+            _jsx(IconWidget, { infer: "BottomLeft", size: 16 }, "4"),
+        ] }));
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import './styles.less';
+export interface IBorderStyleSetterProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const BorderStyleSetter: React.FC<IBorderStyleSetterProps>;

package/esm/components/BorderStyleSetter/index.js

@@ -0,0 +1,74 @@
+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'];
+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',
+    },
+];
+const createBorderProp = (position, 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;
+        }
+    }
+    return 'center';
+};
+export const BorderStyleSetter = observer(({ className, style }) => {
+    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));
+                        }) })] }) }) }));
+});

package/esm/components/BorderStyleSetter/styles.less

@@ -0,0 +1,70 @@
+.dn-border-style-setter {
+  display: flex;
+  &-position {
+    margin-left: -10px;
+  }
+  &-input {
+    height: 110px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+}
+
+.border-style-solid-line {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: block;
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    display: block;
+    content: '';
+    height: 0;
+    width: 100%;
+    border-top: 2px solid currentColor;
+    transform: translateY(-50%);
+  }
+}
+
+.border-style-dashed-line {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: block;
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    display: block;
+    content: '';
+    height: 0;
+    width: 100%;
+    border-top: 2px dashed currentColor;
+    transform: translateY(-50%);
+  }
+}
+
+.border-style-dotted-line {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: block;
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    display: block;
+    content: '';
+    height: 0;
+    width: 100%;
+    border-top: 2px dotted currentColor;
+    transform: translateY(-50%);
+  }
+}

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

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

package/esm/components/BoxShadowStyleSetter/index.js

@@ -0,0 +1,25 @@
+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';
+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) }) })] }) })] }));
+});

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

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

package/esm/components/BoxStyleSetter/index.js

@@ -0,0 +1,49 @@
+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';
+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\.+-]+))?)?)?/;
+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"),
+];
+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'] }) })] }) })] }));
+});

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

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

package/esm/components/CollapseItem/index.js

@@ -0,0 +1,16 @@
+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';
+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 })] }));
+});

package/esm/components/CollapseItem/styles.less

@@ -0,0 +1,45 @@
+.dn-collapse-item {
+  flex-wrap: wrap;
+
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: 5px 20px;
+    margin: -1px -20px 0 -20px;
+    color: var(--dn-collapse-header-color);
+    border-top: 1px solid var(--dn-panel-border-color);
+    border-bottom: 1px solid var(--dn-panel-border-color);
+    background-color: var(--dn-panel-active-bg-color);
+    cursor: pointer;
+    transition: all 0.25s ease-in-out;
+    font-size: 13px;
+
+    &-expand {
+      margin-left: -13px;
+      transform: rotate(-90deg);
+      font-size: 12px;
+      transition: all 0.15s ease-in-out;
+      margin-right: 3px;
+    }
+  }
+
+  &-content {
+    display: none;
+    width: 100%;
+    padding-top: 4px;
+
+    & > div:last-child {
+      border-bottom: none !important;
+    }
+  }
+
+  &.expand {
+    .dn-collapse-item-content {
+      display: block;
+    }
+
+    .dn-collapse-item-header-expand {
+      transform: rotate(0);
+    }
+  }
+}

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

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

package/esm/components/ColorInput/index.js

@@ -0,0 +1,18 @@
+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';
+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,
+                    } }) }) }) }));
+};

package/esm/components/ColorInput/styles.less

@@ -0,0 +1,17 @@
+@ant-prefix: ant;
+.dn-color-input {
+  width: 100%;
+
+  .@{ant-prefix}-popover-inner-content {
+    padding: 0 !important;
+    user-select: none;
+  }
+
+  &-color-tips {
+    width: 20px;
+    height: 20px;
+    border-radius: 2px;
+    border: 1px solid var(--dn-color-border, #d9d9d9);
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import './styles.less';
+export interface ICornerInputProps {
+    className?: string;
+    style?: React.CSSProperties;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const CornerInput: React.FC<ICornerInputProps>;

package/esm/components/CornerInput/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { usePrefix } from '@thienvu18/designable-react';
+import cls from 'classnames';
+import './styles.less';
+export const CornerInput = (props) => {
+    const prefix = usePrefix('corner-input');
+    const [current, setCurrent] = useState(props.value);
+    useEffect(() => {
+        if (!props.value) {
+            setCurrent('all');
+        }
+    }, [props.value]);
+    const createCellProps = (type) => ({
+        className: cls(prefix + '-cell', { active: current === type }),
+        onClick() {
+            setCurrent(type);
+            props.onChange?.(type);
+        },
+    });
+    return (_jsxs("div", { className: cls(prefix, props.className), style: props.style, children: [_jsxs("div", { className: prefix + '-column', children: [_jsx("div", { ...createCellProps('topLeft'), children: "\u250F" }), _jsx("div", { ...createCellProps('bottomLeft'), children: "\u2517" })] }), _jsx("div", { className: prefix + '-column', children: _jsx("div", { ...createCellProps('all'), children: "\u254B" }) }), _jsxs("div", { className: prefix + '-column', children: [_jsx("div", { ...createCellProps('topRight'), children: "\u2513" }), _jsx("div", { ...createCellProps('bottomRight'), children: "\u251B" })] })] }));
+};

package/esm/components/CornerInput/styles.less

@@ -0,0 +1,25 @@
+.dn-corner-input {
+  display: flex;
+  &-column {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &-cell {
+    width: 26px;
+    height: 26px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 3px;
+    color: rgba(0, 0, 0, 0.6);
+    margin: 5px;
+    &.active {
+      background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import './styles.less';
+export interface IDisplayStyleSetterProps {
+    className?: string;
+    style?: React.CSSProperties;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const DisplayStyleSetter: React.FC<IDisplayStyleSetterProps>;

package/esm/components/DisplayStyleSetter/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField, Field, observer } from '@formily/react';
+import { FormItem } from '@thienvu18/formily-antd-v6';
+import { Radio } from 'antd';
+import { usePrefix, IconWidget } from '@thienvu18/designable-react';
+import { FlexStyleSetter } from '../FlexStyleSetter';
+import cls from 'classnames';
+import './styles.less';
+export const DisplayStyleSetter = observer((props) => {
+    const field = useField();
+    const prefix = usePrefix('display-style-setter');
+    return (_jsxs(_Fragment, { children: [_jsx(FormItem.BaseItem, { label: field.title, className: cls(prefix, props.className), style: props.style, children: _jsx(Radio.Group, { className: prefix + '-radio', options: [
+                        {
+                            label: _jsx(IconWidget, { infer: "DisplayBlock", size: 16 }),
+                            value: 'block',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "DisplayInlineBlock", size: 16 }),
+                            value: 'inline-block',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "DisplayInline", size: 16 }),
+                            value: 'inline',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "DisplayFlex", size: 16 }),
+                            value: 'flex',
+                        },
+                    ], value: props.value, onChange: (e) => {
+                        props.onChange?.(e.target.value);
+                    }, optionType: "button" }) }), _jsx(Field, { name: "flex", basePath: field.address.parent(), visible: false, reactions: (flexField) => {
+                    flexField.visible = field.value === 'flex';
+                }, component: [FlexStyleSetter] })] }));
+});