@thienvu18/designable-react-settings-form 2.0.0

package/esm/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/esm/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/esm/components/DrawerSetter/index.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { observer, useField } from '@formily/react';
+import { FormLayout } from '@thienvu18/formily-antd-v6';
+import { IconWidget, usePrefix, useTreeNode } from '@thienvu18/designable-react';
+import { Button } from 'antd';
+import cls from 'classnames';
+import './styles.less';
+export const DrawerSetter = observer((props) => {
+    const node = useTreeNode();
+    const field = useField();
+    const [visible, setVisible] = useState(false);
+    const [remove, setRemove] = useState(false);
+    const [root, setRoot] = useState();
+    const prefix = usePrefix('drawer-setter');
+    const formWrapperCls = usePrefix('settings-form-wrapper');
+    useLayoutEffect(() => {
+        const wrapper = document.querySelector('.' + formWrapperCls);
+        if (wrapper) {
+            setRoot(wrapper);
+        }
+    }, [node]);
+    const renderDrawer = () => {
+        if (root && visible) {
+            return createPortal(_jsxs("div", { className: cls(prefix, 'animate__animated animate__slideInRight', {
+                    animate__slideOutRight: remove,
+                }), children: [_jsxs("div", { className: prefix + '-header', onClick: handleClose, children: [_jsx(IconWidget, { infer: "Return", size: 18 }), _jsx("span", { className: prefix + '-header-text', children: props.text || field.title })] }), _jsx("div", { className: prefix + '-body', children: _jsx(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 (_jsxs(Fragment, { children: [_jsx(Button, { block: true, onClick: handleOpen, ...props.triggerProps, children: props.text || field.title }), renderDrawer()] }));
+});

package/esm/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/esm/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/esm/components/FlexStyleSetter/index.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field, useField, observer } from '@formily/react';
+import { Radio } from '@thienvu18/formily-antd-v6';
+import { usePrefix, IconWidget } from '@thienvu18/designable-react';
+import { InputItems } from '../InputItems';
+import cls from 'classnames';
+import './styles.less';
+export const FlexStyleSetter = observer((props) => {
+    const field = useField();
+    const prefix = usePrefix('flex-style-setter');
+    return (_jsx("div", { className: cls(prefix, props.className), style: props.style, children: _jsxs(InputItems, { vertical: true, children: [_jsx(Field, { name: "flexDirection", basePath: field.address.parent(), dataSource: [
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexDirectionRow" }),
+                            value: 'row',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexDirectionColumn" }),
+                            value: 'column',
+                        },
+                    ], reactions: (field) => {
+                        field.decorator[1].title = `Flex Direction : ${field.value || ''}`;
+                    }, decorator: [InputItems.Item], component: [Radio.Group, { optionType: 'button' }] }), _jsx(Field, { name: "flexWrap", basePath: field.address.parent(), dataSource: [
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexNoWrap" }),
+                            value: 'nowrap',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexWrap" }),
+                            value: 'wrap',
+                        },
+                    ], reactions: (field) => {
+                        field.decorator[1].title = `Flex Wrap : ${field.value || ''}`;
+                    }, decorator: [InputItems.Item], component: [Radio.Group, { optionType: 'button' }] }), _jsx(Field, { name: "alignContent", basePath: field.address.parent(), dataSource: [
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexAlignContentCenter" }),
+                            value: 'center',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexAlignContentStart" }),
+                            value: 'flex-start',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexAlignContentEnd" }),
+                            value: 'flex-end',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexAlignContentSpaceAround" }),
+                            value: 'space-around',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexAlignContentSpaceBetween" }),
+                            value: 'space-between',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexAlignContentStretch" }),
+                            value: 'stretch',
+                        },
+                    ], reactions: (field) => {
+                        field.decorator[1].title = `Align Content : ${field.value || ''}`;
+                    }, decorator: [InputItems.Item], component: [Radio.Group, { optionType: 'button' }] }), _jsx(Field, { name: "justifyContent", basePath: field.address.parent(), dataSource: [
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexJustifyCenter" }),
+                            value: 'center',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexJustifyStart" }),
+                            value: 'flex-start',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexJustifyEnd" }),
+                            value: 'flex-end',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexJustifySpaceAround" }),
+                            value: 'space-around',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexJustifySpaceBetween" }),
+                            value: 'space-between',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexJustifySpaceEvenly" }),
+                            value: 'space-evenly',
+                        },
+                    ], reactions: (field) => {
+                        field.decorator[1].title = `Justify Content : ${field.value || ''}`;
+                    }, decorator: [InputItems.Item], component: [Radio.Group, { optionType: 'button' }] }), _jsx(Field, { name: "alignItems", basePath: field.address.parent(), dataSource: [
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexAlignItemsCenter" }),
+                            value: 'center',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexAlignItemsStart" }),
+                            value: 'flex-start',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexAlignItemsEnd" }),
+                            value: 'flex-end',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexAlignItemsStretch" }),
+                            value: 'stretch',
+                        },
+                        {
+                            label: _jsx(IconWidget, { infer: "FlexAlignItemsBaseline" }),
+                            value: 'baseline',
+                        },
+                    ], reactions: (field) => {
+                        field.decorator[1].title = `Align Items : ${field.value || ''}`;
+                    }, decorator: [InputItems.Item], component: [Radio.Group, { optionType: 'button' }] })] }) }));
+});

package/esm/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/esm/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/esm/components/FoldItem/index.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Fragment, useRef, useMemo } from 'react';
+import { FormItem } from '@thienvu18/formily-antd-v6';
+import { useField, observer } from '@formily/react';
+import { observable } from '@formily/reactive';
+import { IconWidget, usePrefix } from '@thienvu18/designable-react';
+import cls from 'classnames';
+import './styles.less';
+const ExpandedMap = new Map();
+export const FoldItem = observer(({ className, style, children, ...props }) => {
+    const prefix = usePrefix('fold-item');
+    const field = useField();
+    const expand = useMemo(() => observable.ref(ExpandedMap.get(field?.address?.toString() || '')), [field?.address]);
+    const slots = useRef({
+        base: null,
+        extra: null,
+    });
+    slots.current = { base: null, extra: null };
+    React.Children.forEach(children, (node) => {
+        if (React.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 (_jsxs("div", { className: cls(prefix, className), style: style, children: [_jsx("div", { className: prefix + '-base', onClick: () => {
+                    expand.value = !expand.value;
+                    if (field?.address) {
+                        ExpandedMap.set(field.address.toString(), expand.value);
+                    }
+                }, children: _jsx(FormItem.BaseItem, { ...props, label: _jsxs("span", { className: cls(prefix + '-title', {
+                            expand: expand.value,
+                        }), children: [slots.current.extra && _jsx(IconWidget, { infer: "Expand", size: 10 }), props.label] }), children: _jsx("div", { style: { width: '100%' }, onClick: (e) => {
+                            e.stopPropagation();
+                        }, children: slots.current.base }) }) }), expand.value && slots.current.extra && (_jsx("div", { className: prefix + '-extra', children: slots.current.extra }))] }));
+});
+const Base = () => {
+    return _jsx(Fragment, {});
+};
+Base.displayName = 'FoldItem.Base';
+const Extra = () => {
+    return _jsx(Fragment, {});
+};
+Extra.displayName = 'FoldItem.Extra';
+FoldItem.Base = Base;
+FoldItem.Extra = Extra;

package/esm/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/esm/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/esm/components/FontStyleSetter/index.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePrefix, IconWidget } from '@thienvu18/designable-react';
+import { useField, Field, observer } from '@formily/react';
+import { Select, Radio, NumberPicker } from '@thienvu18/formily-antd-v6';
+import { FoldItem } from '../FoldItem';
+import { InputItems } from '../InputItems';
+import { SizeInput } from '../SizeInput';
+import { ColorInput } from '../ColorInput';
+import cls from 'classnames';
+const createFontFamilyOptions = (fonts) => {
+    return fonts.map((font) => {
+        const splited = font.split('=');
+        const label = splited?.[0];
+        const value = splited?.[1];
+        return {
+            label: _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',
+]);
+export const FontStyleSetter = observer((props) => {
+    const field = useField();
+    const prefix = usePrefix('font-style-setter');
+    return (_jsxs(FoldItem, { label: field.title, className: cls(prefix, props.className), style: props.style, children: [_jsx(FoldItem.Base, { children: _jsx(Field, { name: "fontFamily", basePath: field.address.parent(), component: [
+                        Select,
+                        { style: { width: '100%' }, placeholder: 'Helvetica Neue' },
+                    ], dataSource: FontFamilyOptions }) }), _jsx(FoldItem.Extra, { children: _jsxs(InputItems, { children: [_jsx(InputItems.Item, { icon: "FontWeight", width: "50%", children: _jsx(Field, { name: "fontWeight", basePath: field.address.parent(), component: [NumberPicker, { placeholder: '400' }] }) }), _jsx(InputItems.Item, { icon: "FontStyle", width: "50%", children: _jsx(Field, { name: "fontStyle", basePath: field.address.parent(), dataSource: [
+                                    {
+                                        label: _jsx(IconWidget, { infer: "NormalFontStyle" }),
+                                        value: 'normal',
+                                    },
+                                    {
+                                        label: _jsx(IconWidget, { infer: "ItalicFontStyle" }),
+                                        value: 'italic',
+                                    },
+                                ], component: [Radio.Group, { optionType: 'button' }] }) }), _jsx(InputItems.Item, { icon: "FontColor", width: "100%", children: _jsx(Field, { name: "color", basePath: field.address.parent(), component: [ColorInput] }) }), _jsx(InputItems.Item, { icon: "FontSize", width: "50%", children: _jsx(Field, { name: "fontSize", basePath: field.address.parent(), component: [SizeInput, { exclude: ['auto'] }] }) }), _jsx(InputItems.Item, { icon: "LineHeight", width: "50%", children: _jsx(Field, { name: "lineHeight", basePath: field.address.parent(), component: [SizeInput, { exclude: ['auto'] }] }) }), _jsx(InputItems.Item, { icon: "TextAlign", children: _jsx(Field, { name: "textAlign", basePath: field.address.parent(), dataSource: [
+                                    {
+                                        label: _jsx(IconWidget, { infer: "TextAlignLeft" }),
+                                        value: 'left',
+                                    },
+                                    {
+                                        label: _jsx(IconWidget, { infer: "TextAlignCenter" }),
+                                        value: 'center',
+                                    },
+                                    {
+                                        label: _jsx(IconWidget, { infer: "TextAlignRight" }),
+                                        value: 'right',
+                                    },
+                                    {
+                                        label: _jsx(IconWidget, { infer: "TextAlignJustify" }),
+                                        value: 'justify',
+                                    },
+                                ], component: [Radio.Group, { optionType: 'button' }] }) }), _jsx(InputItems.Item, { icon: "TextDecoration", children: _jsx(Field, { name: "textDecoration", basePath: field.address.parent(), dataSource: [
+                                    {
+                                        label: '--',
+                                        value: 'none',
+                                    },
+                                    {
+                                        label: _jsx(IconWidget, { infer: "TextUnderline" }),
+                                        value: 'underline',
+                                    },
+                                    {
+                                        label: _jsx(IconWidget, { infer: "TextLineThrough" }),
+                                        value: 'line-through',
+                                    },
+                                ], component: [Radio.Group, { optionType: 'button' }] }) })] }) })] }));
+});

package/esm/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/esm/components/ImageInput/index.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { Input, Upload } from 'antd';
+import { usePrefix, IconWidget } from '@thienvu18/designable-react';
+import { SettingsFormContext } from '../../shared/context';
+import cls from 'classnames';
+import './styles.less';
+export const ImageInput = ({ className, style, ...props }) => {
+    const prefix = usePrefix('image-input');
+    const context = useContext(SettingsFormContext);
+    return (_jsx("div", { className: cls(prefix, className), style: style, children: _jsx(Input, { ...props, onChange: (e) => {
+                props.onChange?.(e?.target?.['value']);
+            }, prefix: _jsx(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: _jsx(IconWidget, { infer: "CloudUpload", style: { cursor: 'pointer' } }) }) }) }));
+};
+export 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 (_jsx(ImageInput, { value: removeBgValue(props.value), onChange: (url) => {
+            props.onChange?.(addBgValue(url));
+        } }));
+};

package/esm/components/ImageInput/styles.less

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import './styles.less';
+export interface IInputItemsContext {
+    width?: string | number;
+    vertical?: boolean;
+}
+export interface IInputItemsProps {
+    className?: string;
+    style?: React.CSSProperties;
+    width?: string | number;
+    vertical?: boolean;
+}
+export interface IInputItemProps {
+    className?: string;
+    style?: React.CSSProperties;
+    icon?: React.ReactNode;
+    width?: string | number;
+    vertical?: boolean;
+    title?: React.ReactNode;
+}
+export declare const InputItems: React.FC<React.PropsWithChildren<IInputItemsProps>> & {
+    Item: React.FC<React.PropsWithChildren<IInputItemProps>>;
+};

package/esm/components/InputItems/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useContext } from 'react';
+import { usePrefix, IconWidget } from '@thienvu18/designable-react';
+import cls from 'classnames';
+import './styles.less';
+const InputItemsContext = React.createContext(null);
+export const InputItems = (props) => {
+    const { width = '100%', className, style, children } = props;
+    const prefix = usePrefix('input-items');
+    return (_jsx(InputItemsContext.Provider, { value: { width, vertical: props.vertical }, children: _jsx("div", { className: cls(prefix, className), style: style, children: children }) }));
+};
+InputItems.Item = (props) => {
+    const prefix = usePrefix('input-items-item');
+    const ctx = useContext(InputItemsContext);
+    return (_jsxs("div", { className: cls(prefix, props.className, {
+            vertical: props.vertical || ctx?.vertical,
+        }), style: { width: props.width || ctx?.width, ...props.style }, children: [props.icon && (_jsx("div", { className: prefix + '-icon', children: typeof props.icon === 'string' ? (_jsx(IconWidget, { infer: props.icon, size: 16 })) : (props.icon) })), props.title && _jsx("div", { className: prefix + '-title', children: props.title }), _jsx("div", { className: prefix + '-controller', children: props.children })] }));
+};

package/esm/components/InputItems/styles.less

@@ -0,0 +1,45 @@
+@ant-prefix: ant;
+.dn-input-items {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -8px;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    color: var(--dn-color-text, rgba(0, 0, 0, 0.88));
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 8px;
+      flex-shrink: 0;
+      flex-grow: 0;
+      color: var(--dn-color-text, rgba(0, 0, 0, 0.88));
+    }
+
+    &-controller {
+      min-width: 0;
+      flex-shrink: 1;
+      flex-grow: 1;
+
+      .@{ant-prefix}-radio-group {
+        display: flex;
+
+        .@{ant-prefix}-radio-button-wrapper {
+          flex-grow: 1;
+          display: flex;
+          justify-content: center;
+        }
+      }
+    }
+    &.vertical {
+      flex-direction: column;
+      align-items: flex-start;
+      .dn-input-items-item-controller {
+        width: 100%;
+      }
+    }
+  }
+}

package/esm/components/MonacoInput/config.d.ts

@@ -0,0 +1 @@
+export declare const initMonaco: () => void;

package/esm/components/MonacoInput/config.js

@@ -0,0 +1,39 @@
+import { loader } from '@monaco-editor/react';
+import chromeTheme from './themes/chrome';
+import monokaiTheme from './themes/monokai';
+import { format } from './format';
+let initialized = false;
+export const initMonaco = () => {
+    if (initialized)
+        return;
+    loader.init().then((monaco) => {
+        monaco.editor.defineTheme('monokai', monokaiTheme);
+        monaco.editor.defineTheme('chrome-devtools', chromeTheme);
+        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+            target: monaco.languages.typescript.ScriptTarget.Latest,
+            allowNonTsExtensions: true,
+            moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+            module: monaco.languages.typescript.ModuleKind.CommonJS,
+            noEmit: true,
+            esModuleInterop: true,
+            jsx: monaco.languages.typescript.JsxEmit.React,
+            reactNamespace: 'React',
+            allowJs: true,
+        });
+        monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+            noSemanticValidation: false,
+            noSyntaxValidation: true,
+        });
+        monaco.languages.registerDocumentFormattingEditProvider('typescript', {
+            async provideDocumentFormattingEdits(model) {
+                return [
+                    {
+                        text: await format(model['getDesignerLanguage']?.() || 'typescript', model.getValue()),
+                        range: model.getFullModelRange(),
+                    },
+                ];
+            },
+        });
+        initialized = true;
+    });
+};

package/esm/components/MonacoInput/format.d.ts

@@ -0,0 +1 @@
+export declare const format: (language: string, source: string) => Promise<string>;