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

package/esm/components/FontStyleSetter/index.js

@@ -1,88 +1,172 @@
-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';
+import { Field, observer, useField } from '@formily/react'
+import { IconWidget, usePrefix } from '@thienvu18/designable-react'
+import { NumberPicker, Radio, Select } from '@thienvu18/formily-antd-v6'
+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'
 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,
-        };
-    });
-};
+  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',
-]);
+  '宋体=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' }] }) })] }) })] }));
-});
+  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

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

package/esm/components/ImageInput/index.js

@@ -1,41 +1,61 @@
-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';
+import { IconWidget, usePrefix } from '@thienvu18/designable-react'
+import { Input, Upload } from 'antd'
+import cls from 'classnames'
+import { useContext } from 'react'
+import { jsx as _jsx } from 'react/jsx-runtime'
+import { SettingsFormContext } from '../../shared/context'
+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' } }) }) }) }));
-};
+  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));
-        } }));
-};
+  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/InputItems/index.d.ts

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

package/esm/components/InputItems/index.js

@@ -1,18 +1,44 @@
-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);
+import { IconWidget, usePrefix } from '@thienvu18/designable-react'
+import cls from 'classnames'
+import React, { useContext } from 'react'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+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 }) }));
-};
+  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 })] }));
-};
+  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/MonacoInput/config.d.ts

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

package/esm/components/MonacoInput/config.js

@@ -1,39 +1,41 @@
-import { loader } from '@monaco-editor/react';
-import chromeTheme from './themes/chrome';
-import monokaiTheme from './themes/monokai';
-import { format } from './format';
-let initialized = false;
+import { loader } from '@monaco-editor/react'
+import { format } from './format'
+import chromeTheme from './themes/chrome'
+import monokaiTheme from './themes/monokai'
+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;
-    });
-};
+  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

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

package/esm/components/MonacoInput/format.js

@@ -1,31 +1,35 @@
-import { parse } from '@babel/parser';
-import { getNpmCDNRegistry } from '../../registry';
+import { parse } from '@babel/parser'
+import { getNpmCDNRegistry } from '../../registry'
 const cache = {
-    prettier: null,
-};
+  prettier: null,
+}
 export const format = async (language, source) => {
-    cache.prettier =
-        cache.prettier ||
-            new Function(`return import("${getNpmCDNRegistry()}/prettier@2.x/esm/standalone.mjs")`)();
-    return cache.prettier.then((module) => {
-        if (language === 'javascript.expression' ||
-            language === 'typescript.expression') {
-            return source;
-        }
-        if (/(?:javascript|typescript)/gi.test(language)) {
-            return module.default.format(source, {
-                semi: false,
-                parser(text) {
-                    return parse(text, {
-                        sourceType: 'module',
-                        plugins: ['typescript', 'jsx'],
-                    });
-                },
-            });
-        }
-        if (language === 'json') {
-            return JSON.stringify(JSON.parse(source), null, 2);
-        }
-        return source;
-    });
-};
+  cache.prettier =
+    cache.prettier ||
+    new Function(
+      `return import("${getNpmCDNRegistry()}/prettier@2.x/esm/standalone.mjs")`
+    )()
+  return cache.prettier.then((module) => {
+    if (
+      language === 'javascript.expression' ||
+      language === 'typescript.expression'
+    ) {
+      return source
+    }
+    if (/(?:javascript|typescript)/gi.test(language)) {
+      return module.default.format(source, {
+        semi: false,
+        parser(text) {
+          return parse(text, {
+            sourceType: 'module',
+            plugins: ['typescript', 'jsx'],
+          })
+        },
+      })
+    }
+    if (language === 'json') {
+      return JSON.stringify(JSON.parse(source), null, 2)
+    }
+    return source
+  })
+}