@thienvu18/designable-react-settings-form 2.0.0

package/lib/effects/useLocales.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocales = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@formily/core");
+const designable_core_1 = require("@thienvu18/designable-core");
+const designable_shared_1 = require("@thienvu18/designable-shared");
+const designable_react_1 = require("@thienvu18/designable-react");
+const takeIcon = (message) => {
+    if (!(0, designable_shared_1.isStr)(message))
+        return;
+    const matched = message.match(/@([^:\s]+)(?:\s*\:\s*([\s\S]+))?/);
+    if (matched)
+        return [matched[1], matched[2]];
+    return;
+};
+const mapEnum = (dataSource) => (item, index) => {
+    const label = dataSource[index] || dataSource[item.value] || item.label;
+    const icon = takeIcon(label);
+    return {
+        ...item,
+        value: item?.value ?? null,
+        label: icon ? ((0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: icon[0], tooltip: icon[1] })) : (label?.label ?? label ?? 'Unknow'),
+    };
+};
+const useLocales = (node) => {
+    (0, core_1.onFieldReact)('*', (field) => {
+        const path = field.path.toString().replace(/\.[\d+]/g, '');
+        const takeMessage = (prop) => {
+            const token = `settings.${path}${prop ? `.${prop}` : ''}`;
+            return node.getMessage(token) || designable_core_1.GlobalRegistry.getDesignerMessage(token);
+        };
+        const title = takeMessage('title') || takeMessage();
+        const description = takeMessage('description');
+        const tooltip = takeMessage('tooltip');
+        const dataSource = takeMessage('dataSource');
+        const placeholder = takeMessage('placeholder');
+        if (title) {
+            field.title = title;
+        }
+        if (description) {
+            field.description = description;
+        }
+        if (tooltip) {
+            field.decorator[1] = field.decorator[1] || [];
+            field.decorator[1].tooltip = tooltip;
+        }
+        if (placeholder) {
+            field.component[1] = field.component[1] || [];
+            field.component[1].placeholder = placeholder;
+        }
+        if (!(0, core_1.isVoidField)(field)) {
+            if (dataSource?.length) {
+                if (field.dataSource?.length) {
+                    field.dataSource = field.dataSource.map(mapEnum(dataSource));
+                }
+                else {
+                    field.dataSource = dataSource.slice();
+                }
+            }
+            else {
+                field.dataSource = field.dataSource?.filter(Boolean);
+            }
+        }
+    });
+};
+exports.useLocales = useLocales;

package/lib/effects/useSnapshot.d.ts

@@ -0,0 +1,2 @@
+import { Operation } from '@thienvu18/designable-core';
+export declare const useSnapshot: (operation: Operation) => void;

package/lib/effects/useSnapshot.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnapshot = void 0;
+const core_1 = require("@formily/core");
+let timeRequest = null;
+const useSnapshot = (operation) => {
+    (0, core_1.onFieldInputValueChange)('*', () => {
+        clearTimeout(timeRequest);
+        timeRequest = setTimeout(() => {
+            operation.snapshot('update:node:props');
+        }, 1000);
+    });
+};
+exports.useSnapshot = useSnapshot;

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+import './locales';
+export * from './registry';
+export * from './components';
+export * from './SchemaField';
+export * from './SettingsForm';

package/lib/index.js

@@ -0,0 +1,21 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./locales");
+__exportStar(require("./registry"), exports);
+__exportStar(require("./components"), exports);
+__exportStar(require("./SchemaField"), exports);
+__exportStar(require("./SettingsForm"), exports);

package/lib/locales/en-US.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    'en-US': {
+        SettingComponents: {
+            ValueInput: {
+                expression: string;
+            };
+            MonacoInput: {
+                helpDocument: string;
+            };
+        };
+    };
+};
+export default _default;

package/lib/locales/en-US.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    'en-US': {
+        SettingComponents: {
+            ValueInput: {
+                expression: 'Expression',
+            },
+            MonacoInput: {
+                helpDocument: 'Help Documents',
+            },
+        },
+    },
+};

package/lib/locales/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/locales/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const designable_core_1 = require("@thienvu18/designable-core");
+const zh_CN_1 = __importDefault(require("./zh-CN"));
+const en_US_1 = __importDefault(require("./en-US"));
+const ko_KR_1 = __importDefault(require("./ko-KR"));
+designable_core_1.GlobalRegistry.registerDesignerLocales(zh_CN_1.default, en_US_1.default, ko_KR_1.default);

package/lib/locales/ko-KR.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    'ko-KR': {
+        SettingComponents: {
+            ValueInput: {
+                expression: string;
+            };
+            MonacoInput: {
+                helpDocument: string;
+            };
+        };
+    };
+};
+export default _default;

package/lib/locales/ko-KR.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    'ko-KR': {
+        SettingComponents: {
+            ValueInput: {
+                expression: '표현식',
+            },
+            MonacoInput: {
+                helpDocument: '도움말 문서',
+            },
+        },
+    },
+};

package/lib/locales/zh-CN.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    'zh-CN': {
+        SettingComponents: {
+            ValueInput: {
+                expression: string;
+            };
+            MonacoInput: {
+                helpDocument: string;
+            };
+        };
+    };
+};
+export default _default;

package/lib/locales/zh-CN.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    'zh-CN': {
+        SettingComponents: {
+            ValueInput: {
+                expression: '表达式',
+            },
+            MonacoInput: {
+                helpDocument: '帮助文档',
+            },
+        },
+    },
+};

package/lib/registry.d.ts

@@ -0,0 +1,2 @@
+export declare const setNpmCDNRegistry: (registry: string) => void;
+export declare const getNpmCDNRegistry: () => string;

package/lib/registry.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNpmCDNRegistry = exports.setNpmCDNRegistry = void 0;
+const loader_1 = __importDefault(require("@monaco-editor/loader"));
+const Registry = {
+    cdn: '//cdn.jsdelivr.net/npm',
+};
+const setNpmCDNRegistry = (registry) => {
+    Registry.cdn = registry;
+    loader_1.default.config({
+        paths: {
+            vs: `${registry}/monaco-editor@0.30.1/min/vs`,
+        },
+    });
+};
+exports.setNpmCDNRegistry = setNpmCDNRegistry;
+const getNpmCDNRegistry = () => String(Registry.cdn).replace(/\/$/, '');
+exports.getNpmCDNRegistry = getNpmCDNRegistry;

package/lib/shared/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ISettingFormProps } from '../types';
+export declare const SettingsFormContext: import("react").Context<ISettingFormProps>;

package/lib/shared/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsFormContext = void 0;
+const react_1 = require("react");
+exports.SettingsFormContext = (0, react_1.createContext)(null);

package/lib/shared/loadScript.d.ts

@@ -0,0 +1,7 @@
+export interface ILoadScriptProps {
+    package: string;
+    entry: string;
+    root: string;
+    base?: string;
+}
+export declare const loadScript: (props: ILoadScriptProps) => Promise<any>;

package/lib/shared/loadScript.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadScript = void 0;
+const registry_1 = require("../registry");
+const designable_shared_1 = require("@thienvu18/designable-shared");
+const loadScript = async (props) => {
+    const options = {
+        base: (0, registry_1.getNpmCDNRegistry)(),
+        ...props,
+    };
+    if (designable_shared_1.globalThisPolyfill[props.root])
+        return designable_shared_1.globalThisPolyfill[options.root];
+    const path = `${options.base}/${options.package}/${options.entry}`;
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.async = false;
+        script.src = path;
+        script.onload = () => {
+            const module = designable_shared_1.globalThisPolyfill[options.root];
+            designable_shared_1.globalThisPolyfill['define'] = define;
+            resolve(module);
+            script.remove();
+        };
+        script.onerror = (err) => {
+            reject(err);
+        };
+        const define = designable_shared_1.globalThisPolyfill['define'];
+        designable_shared_1.globalThisPolyfill['define'] = undefined;
+        document.body.appendChild(script);
+    });
+};
+exports.loadScript = loadScript;

package/lib/styles.less

@@ -0,0 +1,121 @@
+@ant-prefix: ant;
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes slideInRight {
+  0% {
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutRight {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.animate__slideInRight {
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+}
+
+.animate__slideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+}
+
+.animate__animated {
+  animation-delay: 0ms;
+  animation-duration: 0.25s;
+  animation-fill-mode: forwards;
+}
+
+.animate__fadeInUp {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+.dn-settings-form-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+
+  .dn-node-path {
+    flex-grow: 0;
+  }
+
+  .dn-settings-form-content {
+    flex-grow: 1;
+    overflow: overlay;
+  }
+
+  .@{ant-prefix}-formily-item {
+    border-bottom: 1px solid var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06));
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+    margin-top: 8px;
+
+    * {
+      font-size: 13px;
+    }
+
+    .@{ant-prefix}-formily-item-control-content-component {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      &>.@{ant-prefix}-radio-group {
+        display: flex !important;
+        width: 100%;
+
+        .@{ant-prefix}-radio-button-wrapper {
+          display: flex;
+          justify-content: center;
+          padding: 0 6px !important;
+          align-items: center;
+          flex-grow: 2;
+        }
+      }
+
+      &>.@{ant-prefix}-slider {
+        flex-shrink: 0;
+        min-width: 0;
+        width: 100%;
+      }
+
+      &>.@{ant-prefix}-select {
+        max-width: 140px;
+      }
+    }
+  }
+}
+
+.dn-settings-form {
+  padding: 0 20px;
+
+  &-empty {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    color: #888;
+  }
+}

package/lib/types.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Form } from '@formily/core';
+export interface ISettingFormProps {
+    className?: string;
+    style?: React.CSSProperties;
+    uploadAction?: string;
+    components?: Record<string, React.FC<any>>;
+    effects?: (form: Form) => void;
+    scope?: any;
+}

package/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@thienvu18/designable-react-settings-form",
+  "version": "2.0.0",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "types": "esm/index.d.ts",
+  "files": [
+    "lib",
+    "esm",
+    "README.md",
+    "LICENSE.md"
+  ],
+  "engines": {
+    "node": ">=20 <25"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thienvu18/designable.git"
+  },
+  "bugs": {
+    "url": "https://github.com/thienvu18/designable/issues"
+  },
+  "homepage": "https://github.com/thienvu18/designable#readme",
+  "scripts": {
+    "build": "rimraf -rf lib esm && npm run build:cjs && npm run build:esm && ts-node copy",
+    "build:cjs": "tsc --project tsconfig.build.json --outDir lib",
+    "build:esm": "tsc --project tsconfig.build.json --module es2020 --outDir esm"
+  },
+  "peerDependencies": {
+    "@formily/core": ">=2.3.7 <3",
+    "@formily/react": ">=2.3.7 <3",
+    "@formily/reactive": ">=2.3.7 <3",
+    "@formily/reactive-react": ">=2.3.7 <3",
+    "@formily/shared": ">=2.3.7 <3",
+    "@thienvu18/formily-antd-v6": ">=2 <3",
+    "antd": ">=6 <7",
+    "react": ">=19 <20",
+    "react-dom": ">=19 <20"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.24.0",
+    "@monaco-editor/react": "^4.6.0",
+    "@thienvu18/designable-core": "2.0.0",
+    "@thienvu18/designable-react": "2.0.0",
+    "@thienvu18/designable-shared": "2.0.0",
+    "classnames": "^2.3.2",
+    "monaco-editor": "^0.47.0",
+    "prettier": "^2.8.8",
+    "react-color": "^2.19.3",
+    "react-tiny-popover": "^8.1.6"
+  },
+  "devDependencies": {
+    "@formily/core": "^2.3.7",
+    "@formily/json-schema": "^2.3.7",
+    "@formily/path": "^2.3.7",
+    "@formily/react": "^2.3.7",
+    "@formily/reactive": "^2.3.7",
+    "@formily/reactive-react": "^2.3.7",
+    "@formily/shared": "^2.3.7",
+    "@thienvu18/formily-antd-v6": "^2.0.0",
+    "antd": "^6.6.3",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-is": "^19.2.8",
+    "typescript": "5.2.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}