@thienvu18/designable-react-settings-form 2.0.0

package/lib/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/lib/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/lib/components/DisplayStyleSetter/index.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayStyleSetter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@formily/react");
+const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
+const antd_1 = require("antd");
+const designable_react_1 = require("@thienvu18/designable-react");
+const FlexStyleSetter_1 = require("../FlexStyleSetter");
+const classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+exports.DisplayStyleSetter = (0, react_1.observer)((props) => {
+    const field = (0, react_1.useField)();
+    const prefix = (0, designable_react_1.usePrefix)('display-style-setter');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formily_antd_v6_1.FormItem.BaseItem, { label: field.title, className: (0, classnames_1.default)(prefix, props.className), style: props.style, children: (0, jsx_runtime_1.jsx)(antd_1.Radio.Group, { className: prefix + '-radio', options: [
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "DisplayBlock", size: 16 }),
+                            value: 'block',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "DisplayInlineBlock", size: 16 }),
+                            value: 'inline-block',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "DisplayInline", size: 16 }),
+                            value: 'inline',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "DisplayFlex", size: 16 }),
+                            value: 'flex',
+                        },
+                    ], value: props.value, onChange: (e) => {
+                        props.onChange?.(e.target.value);
+                    }, optionType: "button" }) }), (0, jsx_runtime_1.jsx)(react_1.Field, { name: "flex", basePath: field.address.parent(), visible: false, reactions: (flexField) => {
+                    flexField.visible = field.value === 'flex';
+                }, component: [FlexStyleSetter_1.FlexStyleSetter] })] }));
+});

package/lib/components/DisplayStyleSetter/styles.less

@@ -0,0 +1,15 @@
+@ant-prefix: ant;
+.dn-display-style-setter {
+  &-radio {
+    display: flex !important;
+    width: 100%;
+
+    .@{ant-prefix}-radio-button-wrapper {
+      flex-grow: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0;
+    }
+  }
+}

package/lib/components/DrawerSetter/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from 'antd';
+import './styles.less';
+export interface IDrawerSetterProps {
+    text: React.ReactNode;
+    triggerProps: ButtonProps;
+}
+export declare const DrawerSetter: React.FC<IDrawerSetterProps>;

package/lib/components/DrawerSetter/index.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerSetter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const react_2 = require("@formily/react");
+const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
+const designable_react_1 = require("@thienvu18/designable-react");
+const antd_1 = require("antd");
+const classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+exports.DrawerSetter = (0, react_2.observer)((props) => {
+    const node = (0, designable_react_1.useTreeNode)();
+    const field = (0, react_2.useField)();
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [remove, setRemove] = (0, react_1.useState)(false);
+    const [root, setRoot] = (0, react_1.useState)();
+    const prefix = (0, designable_react_1.usePrefix)('drawer-setter');
+    const formWrapperCls = (0, designable_react_1.usePrefix)('settings-form-wrapper');
+    (0, react_1.useLayoutEffect)(() => {
+        const wrapper = document.querySelector('.' + formWrapperCls);
+        if (wrapper) {
+            setRoot(wrapper);
+        }
+    }, [node]);
+    const renderDrawer = () => {
+        if (root && visible) {
+            return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(prefix, 'animate__animated animate__slideInRight', {
+                    animate__slideOutRight: remove,
+                }), children: [(0, jsx_runtime_1.jsxs)("div", { className: prefix + '-header', onClick: handleClose, children: [(0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "Return", size: 18 }), (0, jsx_runtime_1.jsx)("span", { className: prefix + '-header-text', children: props.text || field.title })] }), (0, jsx_runtime_1.jsx)("div", { className: prefix + '-body', children: (0, jsx_runtime_1.jsx)(formily_antd_v6_1.FormLayout, { colon: false, labelWidth: 120, labelAlign: "left", wrapperAlign: "right", feedbackLayout: "none", tooltipLayout: "text", children: props.children }) })] }), root);
+        }
+        return null;
+    };
+    const handleOpen = () => {
+        setVisible(true);
+    };
+    const handleClose = () => {
+        setRemove(true);
+        setTimeout(() => {
+            setVisible(false);
+            setRemove(false);
+        }, 150);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(antd_1.Button, { block: true, onClick: handleOpen, ...props.triggerProps, children: props.text || field.title }), renderDrawer()] }));
+});

package/lib/components/DrawerSetter/styles.less

@@ -0,0 +1,54 @@
+
+.dn-drawer-setter {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  background: var(--dn-composite-panel-tabs-content-bg-color);
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+
+  &-header {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    flex-grow: 0;
+    padding: 5px 10px;
+    color: var(--dn-color-text, rgba(0, 0, 0, 0.88));
+    border-bottom: 1px solid var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06));
+    cursor: pointer;
+  }
+
+  &-header-text {
+    margin-left: 4px;
+  }
+
+  &-body {
+    padding: 10px 20px;
+    overflow: overlay;
+    overflow-x: hidden;
+    flex-grow: 2;
+  }
+}
+
+.dn-drawer-wrapper {
+  transition: all 0.16s ease-in-out;
+
+  &-enter {
+    transform: translateX(100%);
+  }
+
+  &-enter-active {
+    transform: translateX(0);
+  }
+
+  &-exit {
+    transform: translateX(0);
+  }
+
+  &-exit-active {
+    transform: translateX(100%);
+  }
+}

package/lib/components/FlexStyleSetter/index.d.ts

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

package/lib/components/FlexStyleSetter/index.js

@@ -0,0 +1,117 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexStyleSetter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@formily/react");
+const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
+const designable_react_1 = require("@thienvu18/designable-react");
+const InputItems_1 = require("../InputItems");
+const classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+exports.FlexStyleSetter = (0, react_1.observer)((props) => {
+    const field = (0, react_1.useField)();
+    const prefix = (0, designable_react_1.usePrefix)('flex-style-setter');
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(prefix, props.className), style: props.style, children: (0, jsx_runtime_1.jsxs)(InputItems_1.InputItems, { vertical: true, children: [(0, jsx_runtime_1.jsx)(react_1.Field, { name: "flexDirection", basePath: field.address.parent(), dataSource: [
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexDirectionRow" }),
+                            value: 'row',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexDirectionColumn" }),
+                            value: 'column',
+                        },
+                    ], reactions: (field) => {
+                        field.decorator[1].title = `Flex Direction : ${field.value || ''}`;
+                    }, decorator: [InputItems_1.InputItems.Item], component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }] }), (0, jsx_runtime_1.jsx)(react_1.Field, { name: "flexWrap", basePath: field.address.parent(), dataSource: [
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexNoWrap" }),
+                            value: 'nowrap',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexWrap" }),
+                            value: 'wrap',
+                        },
+                    ], reactions: (field) => {
+                        field.decorator[1].title = `Flex Wrap : ${field.value || ''}`;
+                    }, decorator: [InputItems_1.InputItems.Item], component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }] }), (0, jsx_runtime_1.jsx)(react_1.Field, { name: "alignContent", basePath: field.address.parent(), dataSource: [
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignContentCenter" }),
+                            value: 'center',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignContentStart" }),
+                            value: 'flex-start',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignContentEnd" }),
+                            value: 'flex-end',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignContentSpaceAround" }),
+                            value: 'space-around',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignContentSpaceBetween" }),
+                            value: 'space-between',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignContentStretch" }),
+                            value: 'stretch',
+                        },
+                    ], reactions: (field) => {
+                        field.decorator[1].title = `Align Content : ${field.value || ''}`;
+                    }, decorator: [InputItems_1.InputItems.Item], component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }] }), (0, jsx_runtime_1.jsx)(react_1.Field, { name: "justifyContent", basePath: field.address.parent(), dataSource: [
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexJustifyCenter" }),
+                            value: 'center',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexJustifyStart" }),
+                            value: 'flex-start',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexJustifyEnd" }),
+                            value: 'flex-end',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexJustifySpaceAround" }),
+                            value: 'space-around',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexJustifySpaceBetween" }),
+                            value: 'space-between',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexJustifySpaceEvenly" }),
+                            value: 'space-evenly',
+                        },
+                    ], reactions: (field) => {
+                        field.decorator[1].title = `Justify Content : ${field.value || ''}`;
+                    }, decorator: [InputItems_1.InputItems.Item], component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }] }), (0, jsx_runtime_1.jsx)(react_1.Field, { name: "alignItems", basePath: field.address.parent(), dataSource: [
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignItemsCenter" }),
+                            value: 'center',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignItemsStart" }),
+                            value: 'flex-start',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignItemsEnd" }),
+                            value: 'flex-end',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignItemsStretch" }),
+                            value: 'stretch',
+                        },
+                        {
+                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignItemsBaseline" }),
+                            value: 'baseline',
+                        },
+                    ], reactions: (field) => {
+                        field.decorator[1].title = `Align Items : ${field.value || ''}`;
+                    }, decorator: [InputItems_1.InputItems.Item], component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }] })] }) }));
+});

package/lib/components/FlexStyleSetter/styles.less

@@ -0,0 +1,23 @@
+@ant-prefix: ant;
+.dn-flex-style-setter {
+  .dn-input-items {
+    margin-top: -10px;
+    margin-left: -10px;
+    margin-right: -10px;
+    margin-bottom: 10px;
+    padding: 10px 10px 0 10px;
+    background-color: var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06));
+
+    .@{ant-prefix}-radio-group {
+      display: flex;
+      width: 100%;
+
+      .@{ant-prefix}-radio-button-wrapper {
+        flex-grow: 1;
+        display: flex;
+        justify-content: center;
+        padding: 0;
+      }
+    }
+  }
+}

package/lib/components/FoldItem/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IFormItemProps } from '@thienvu18/formily-antd-v6';
+import './styles.less';
+export declare const FoldItem: React.FC<React.PropsWithChildren<IFormItemProps>> & {
+    Base?: React.FC<React.PropsWithChildren<{}>>;
+    Extra?: React.FC<React.PropsWithChildren<{}>>;
+};

package/lib/components/FoldItem/index.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FoldItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
+const react_2 = require("@formily/react");
+const reactive_1 = require("@formily/reactive");
+const designable_react_1 = require("@thienvu18/designable-react");
+const classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+const ExpandedMap = new Map();
+exports.FoldItem = (0, react_2.observer)(({ className, style, children, ...props }) => {
+    const prefix = (0, designable_react_1.usePrefix)('fold-item');
+    const field = (0, react_2.useField)();
+    const expand = (0, react_1.useMemo)(() => reactive_1.observable.ref(ExpandedMap.get(field?.address?.toString() || '')), [field?.address]);
+    const slots = (0, react_1.useRef)({
+        base: null,
+        extra: null,
+    });
+    slots.current = { base: null, extra: null };
+    react_1.default.Children.forEach(children, (node) => {
+        if (react_1.default.isValidElement(node)) {
+            if (node?.type?.displayName === 'FoldItem.Base') {
+                slots.current.base = node.props?.children;
+            }
+            if (node?.type?.displayName === 'FoldItem.Extra') {
+                slots.current.extra = node.props?.children;
+            }
+        }
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(prefix, className), style: style, children: [(0, jsx_runtime_1.jsx)("div", { className: prefix + '-base', onClick: () => {
+                    expand.value = !expand.value;
+                    if (field?.address) {
+                        ExpandedMap.set(field.address.toString(), expand.value);
+                    }
+                }, children: (0, jsx_runtime_1.jsx)(formily_antd_v6_1.FormItem.BaseItem, { ...props, label: (0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)(prefix + '-title', {
+                            expand: expand.value,
+                        }), children: [slots.current.extra && (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "Expand", size: 10 }), props.label] }), children: (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, onClick: (e) => {
+                            e.stopPropagation();
+                        }, children: slots.current.base }) }) }), expand.value && slots.current.extra && ((0, jsx_runtime_1.jsx)("div", { className: prefix + '-extra', children: slots.current.extra }))] }));
+});
+const Base = () => {
+    return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
+};
+Base.displayName = 'FoldItem.Base';
+const Extra = () => {
+    return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
+};
+Extra.displayName = 'FoldItem.Extra';
+exports.FoldItem.Base = Base;
+exports.FoldItem.Extra = Extra;

package/lib/components/FoldItem/styles.less

@@ -0,0 +1,42 @@
+@ant-prefix: ant;
+.dn-fold-item {
+  .@{ant-prefix}-formily-item-label-content {
+    overflow: visible;
+  }
+
+  &-base {
+    cursor: pointer;
+  }
+
+  &-title {
+    display: flex;
+    align-items: center;
+    margin-left: -10px;
+    cursor: pointer;
+    .dn-icon {
+      transform: translateX(-3px);
+
+      svg {
+        transition: all 0.15s ease-in-out;
+        transform: rotate(-90deg);
+      }
+    }
+
+    &.expand {
+      .dn-icon {
+        svg {
+          transform: rotate(0deg);
+        }
+      }
+    }
+  }
+
+  &-extra {
+    margin-top: -10px;
+    margin-left: -10px;
+    margin-right: -10px;
+    margin-bottom: 10px;
+    padding: 10px 10px 0 10px;
+    background-color: var(--dn-composite-panel-highlight-bg-color);
+  }
+}

package/lib/components/FontStyleSetter/index.d.ts

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

package/lib/components/FontStyleSetter/index.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontStyleSetter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const designable_react_1 = require("@thienvu18/designable-react");
+const react_1 = require("@formily/react");
+const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
+const FoldItem_1 = require("../FoldItem");
+const InputItems_1 = require("../InputItems");
+const SizeInput_1 = require("../SizeInput");
+const ColorInput_1 = require("../ColorInput");
+const classnames_1 = __importDefault(require("classnames"));
+const createFontFamilyOptions = (fonts) => {
+    return fonts.map((font) => {
+        const splited = font.split('=');
+        const label = splited?.[0];
+        const value = splited?.[1];
+        return {
+            label: (0, jsx_runtime_1.jsx)("span", { style: { fontFamily: value }, children: label }),
+            value,
+        };
+    });
+};
+const FontFamilyOptions = createFontFamilyOptions([
+    '宋体=SimSun',
+    '微软雅黑=Microsoft Yahei',
+    '苹方=PingFang SC',
+    'Andale Mono=andale mono,monospace',
+    'Arial=arial,helvetica,sans-serif',
+    'Arial Black=arial black,sans-serif',
+    'Book Antiqua=book antiqua,palatino,serif',
+    'Comic Sans MS=comic sans ms,sans-serif',
+    'Courier New=courier new,courier,monospace',
+    'Georgia=georgia,palatino,serif',
+    'Helvetica Neue=Helvetica Neue',
+    'Helvetica=helvetica,arial,sans-serif',
+    'Impact=impact,sans-serif',
+    'Symbol=symbol',
+    'Tahoma=tahoma,arial,helvetica,sans-serif',
+    'Terminal=terminal,monaco,monospace',
+    'Times New Roman=times new roman,times,serif',
+    'Trebuchet MS=trebuchet ms,geneva,sans-serif',
+    'Verdana=verdana,geneva,sans-serif',
+]);
+exports.FontStyleSetter = (0, react_1.observer)((props) => {
+    const field = (0, react_1.useField)();
+    const prefix = (0, designable_react_1.usePrefix)('font-style-setter');
+    return ((0, jsx_runtime_1.jsxs)(FoldItem_1.FoldItem, { label: field.title, className: (0, classnames_1.default)(prefix, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Base, { children: (0, jsx_runtime_1.jsx)(react_1.Field, { name: "fontFamily", basePath: field.address.parent(), component: [
+                        formily_antd_v6_1.Select,
+                        { style: { width: '100%' }, placeholder: 'Helvetica Neue' },
+                    ], dataSource: FontFamilyOptions }) }), (0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Extra, { children: (0, jsx_runtime_1.jsxs)(InputItems_1.InputItems, { children: [(0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "FontWeight", width: "50%", children: (0, jsx_runtime_1.jsx)(react_1.Field, { name: "fontWeight", basePath: field.address.parent(), component: [formily_antd_v6_1.NumberPicker, { placeholder: '400' }] }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "FontStyle", width: "50%", children: (0, jsx_runtime_1.jsx)(react_1.Field, { name: "fontStyle", basePath: field.address.parent(), dataSource: [
+                                    {
+                                        label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "NormalFontStyle" }),
+                                        value: 'normal',
+                                    },
+                                    {
+                                        label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "ItalicFontStyle" }),
+                                        value: 'italic',
+                                    },
+                                ], component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }] }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "FontColor", width: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Field, { name: "color", basePath: field.address.parent(), component: [ColorInput_1.ColorInput] }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "FontSize", width: "50%", children: (0, jsx_runtime_1.jsx)(react_1.Field, { name: "fontSize", basePath: field.address.parent(), component: [SizeInput_1.SizeInput, { exclude: ['auto'] }] }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "LineHeight", width: "50%", children: (0, jsx_runtime_1.jsx)(react_1.Field, { name: "lineHeight", basePath: field.address.parent(), component: [SizeInput_1.SizeInput, { exclude: ['auto'] }] }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "TextAlign", children: (0, jsx_runtime_1.jsx)(react_1.Field, { name: "textAlign", basePath: field.address.parent(), dataSource: [
+                                    {
+                                        label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "TextAlignLeft" }),
+                                        value: 'left',
+                                    },
+                                    {
+                                        label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "TextAlignCenter" }),
+                                        value: 'center',
+                                    },
+                                    {
+                                        label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "TextAlignRight" }),
+                                        value: 'right',
+                                    },
+                                    {
+                                        label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "TextAlignJustify" }),
+                                        value: 'justify',
+                                    },
+                                ], component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }] }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "TextDecoration", children: (0, jsx_runtime_1.jsx)(react_1.Field, { name: "textDecoration", basePath: field.address.parent(), dataSource: [
+                                    {
+                                        label: '--',
+                                        value: 'none',
+                                    },
+                                    {
+                                        label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "TextUnderline" }),
+                                        value: 'underline',
+                                    },
+                                    {
+                                        label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "TextLineThrough" }),
+                                        value: 'line-through',
+                                    },
+                                ], component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }] }) })] }) })] }));
+});

package/lib/components/ImageInput/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { InputProps } from 'antd';
+import './styles.less';
+export interface ImageInputProps extends Omit<InputProps, 'onChange'> {
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const ImageInput: React.FC<ImageInputProps>;
+export declare const BackgroundImageInput: React.FC<ImageInputProps>;

package/lib/components/ImageInput/index.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackgroundImageInput = exports.ImageInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const antd_1 = require("antd");
+const designable_react_1 = require("@thienvu18/designable-react");
+const context_1 = require("../../shared/context");
+const classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+const ImageInput = ({ className, style, ...props }) => {
+    const prefix = (0, designable_react_1.usePrefix)('image-input');
+    const context = (0, react_1.useContext)(context_1.SettingsFormContext);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(prefix, className), style: style, children: (0, jsx_runtime_1.jsx)(antd_1.Input, { ...props, onChange: (e) => {
+                props.onChange?.(e?.target?.['value']);
+            }, prefix: (0, jsx_runtime_1.jsx)(antd_1.Upload, { action: context.uploadAction, itemRender: () => null, maxCount: 1, onChange: (params) => {
+                    const response = params.file?.response;
+                    const url = response?.url ||
+                        response?.downloadURL ||
+                        response?.imageURL ||
+                        response?.thumbUrl;
+                    if (!url)
+                        return;
+                    props.onChange?.(url);
+                }, children: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "CloudUpload", style: { cursor: 'pointer' } }) }) }) }));
+};
+exports.ImageInput = ImageInput;
+const BackgroundImageInput = (props) => {
+    const addBgValue = (value) => {
+        if (/url\([^)]+\)/.test(value)) {
+            return value;
+        }
+        return `url(${value})`;
+    };
+    const removeBgValue = (value) => {
+        const matched = String(value).match(/url\(\s*([^)]+)\s*\)/);
+        if (matched?.[1]) {
+            return matched?.[1];
+        }
+        return value;
+    };
+    return ((0, jsx_runtime_1.jsx)(exports.ImageInput, { value: removeBgValue(props.value), onChange: (url) => {
+            props.onChange?.(addBgValue(url));
+        } }));
+};
+exports.BackgroundImageInput = BackgroundImageInput;

package/lib/components/ImageInput/styles.less

@@ -0,0 +1,3 @@
+.dn-image-input {
+  width: 100%;
+}