@next-libs/visual-builder 1.5.2 → 1.6.1

package/dist/esm/visual-property-form/components/MessageEditor/MessageEditor.js

@@ -0,0 +1,77 @@
+import { Form, Input, Popover } from "antd";
+import React from "react";
+import styles from "./MessageEditor.module.css";
+import { GeneralIcon } from "@next-libs/basic-components";
+export function MessageEditor(_ref) {
+  var {
+    name,
+    label,
+    value = {},
+    required,
+    onChange
+  } = _ref;
+  var renderForm = value => {
+    return /*#__PURE__*/React.createElement(Form, {
+      layout: "horizontal",
+      labelAlign: "left",
+      labelCol: {
+        style: {
+          minWidth: "112px"
+        }
+      },
+      onValuesChange: onChange
+    }, /*#__PURE__*/React.createElement(Form.Item, {
+      name: "pattern",
+      label: "pattern"
+    }, /*#__PURE__*/React.createElement(Input, {
+      defaultValue: value.pattern
+    })), /*#__PURE__*/React.createElement(Form.Item, {
+      name: "required",
+      label: "required"
+    }, /*#__PURE__*/React.createElement(Input, {
+      defaultValue: value.required
+    })), /*#__PURE__*/React.createElement(Form.Item, {
+      name: "max",
+      label: "max"
+    }, /*#__PURE__*/React.createElement(Input, {
+      defaultValue: value.max
+    })), /*#__PURE__*/React.createElement(Form.Item, {
+      name: "min",
+      label: "min"
+    }, /*#__PURE__*/React.createElement(Input, {
+      defaultValue: value.min
+    })));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.messageEditorContainer
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    key: name,
+    name: name,
+    label: label,
+    rules: [{
+      required: required,
+      message: "\u8BF7\u8F93\u5165".concat(name)
+    }]
+  }, /*#__PURE__*/React.createElement(Popover, {
+    overlayStyle: {
+      zIndex: 999
+    },
+    content: renderForm(value),
+    title: "Detail",
+    trigger: "click",
+    placement: "left"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.editBtn
+  }, /*#__PURE__*/React.createElement(GeneralIcon, {
+    icon: {
+      lib: "easyops",
+      category: "default",
+      icon: "edit",
+      color: "gray"
+    },
+    style: {
+      padding: 4
+    }
+  })))));
+}
+//# sourceMappingURL=MessageEditor.js.map

package/dist/esm/visual-property-form/components/MessageEditor/MessageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageEditor.js","names":["Form","Input","Popover","React","styles","GeneralIcon","MessageEditor","name","label","value","required","onChange","renderForm","style","minWidth","pattern","max","min","messageEditorContainer","message","zIndex","editBtn","lib","category","icon","color","padding"],"sources":["../../../../../src/visual-property-form/components/MessageEditor/MessageEditor.tsx"],"sourcesContent":["import { Form, Input, Popover } from \"antd\";\nimport React from \"react\";\nimport styles from \"./MessageEditor.module.css\";\nimport { GeneralIcon } from \"@next-libs/basic-components\";\n\ninterface MessageEditorProps {\n  name?: string;\n  label?: string | React.ReactElement;\n  value?: Record<string, any>;\n  required?: boolean;\n  onChange?: (data: any) => void;\n}\n\nexport function MessageEditor({\n  name,\n  label,\n  value = {},\n  required,\n  onChange,\n}: MessageEditorProps): React.ReactElement {\n  const renderForm = (value: Record<string, any>) => {\n    return (\n      <Form\n        layout=\"horizontal\"\n        labelAlign=\"left\"\n        labelCol={{\n          style: {\n            minWidth: \"112px\",\n          },\n        }}\n        onValuesChange={onChange}\n      >\n        <Form.Item name=\"pattern\" label=\"pattern\">\n          <Input defaultValue={value.pattern} />\n        </Form.Item>\n        <Form.Item name=\"required\" label=\"required\">\n          <Input defaultValue={value.required} />\n        </Form.Item>\n        <Form.Item name=\"max\" label=\"max\">\n          <Input defaultValue={value.max} />\n        </Form.Item>\n        <Form.Item name=\"min\" label=\"min\">\n          <Input defaultValue={value.min} />\n        </Form.Item>\n      </Form>\n    );\n  };\n\n  return (\n    <div className={styles.messageEditorContainer}>\n      <Form.Item\n        key={name}\n        name={name}\n        label={label}\n        rules={[{ required: required, message: `请输入${name}` }]}\n      >\n        <Popover\n          overlayStyle={{\n            zIndex: 999,\n          }}\n          content={renderForm(value)}\n          title=\"Detail\"\n          trigger=\"click\"\n          placement=\"left\"\n        >\n          <div className={styles.editBtn}>\n            <GeneralIcon\n              icon={{\n                lib: \"easyops\",\n                category: \"default\",\n                icon: \"edit\",\n                color: \"gray\",\n              }}\n              style={{\n                padding: 4,\n              }}\n            />\n          </div>\n        </Popover>\n      </Form.Item>\n    </div>\n  );\n}\n"],"mappings":"AAAA,SAASA,IAAI,EAAEC,KAAK,EAAEC,OAAO,QAAQ,MAAM;AAC3C,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,4BAA4B;AAC/C,SAASC,WAAW,QAAQ,6BAA6B;AAUzD,OAAO,SAASC,aAAa,OAMc;EAAA,IANb;IAC5BC,IAAI;IACJC,KAAK;IACLC,KAAK,GAAG,CAAC,CAAC;IACVC,QAAQ;IACRC;EACkB,CAAC;EACnB,IAAMC,UAAU,GAAIH,KAA0B,IAAK;IACjD,oBACE,oBAAC,IAAI;MACH,MAAM,EAAC,YAAY;MACnB,UAAU,EAAC,MAAM;MACjB,QAAQ,EAAE;QACRI,KAAK,EAAE;UACLC,QAAQ,EAAE;QACZ;MACF,CAAE;MACF,cAAc,EAAEH;IAAS,gBAEzB,oBAAC,IAAI,CAAC,IAAI;MAAC,IAAI,EAAC,SAAS;MAAC,KAAK,EAAC;IAAS,gBACvC,oBAAC,KAAK;MAAC,YAAY,EAAEF,KAAK,CAACM;IAAQ,EAAG,CAC5B,eACZ,oBAAC,IAAI,CAAC,IAAI;MAAC,IAAI,EAAC,UAAU;MAAC,KAAK,EAAC;IAAU,gBACzC,oBAAC,KAAK;MAAC,YAAY,EAAEN,KAAK,CAACC;IAAS,EAAG,CAC7B,eACZ,oBAAC,IAAI,CAAC,IAAI;MAAC,IAAI,EAAC,KAAK;MAAC,KAAK,EAAC;IAAK,gBAC/B,oBAAC,KAAK;MAAC,YAAY,EAAED,KAAK,CAACO;IAAI,EAAG,CACxB,eACZ,oBAAC,IAAI,CAAC,IAAI;MAAC,IAAI,EAAC,KAAK;MAAC,KAAK,EAAC;IAAK,gBAC/B,oBAAC,KAAK;MAAC,YAAY,EAAEP,KAAK,CAACQ;IAAI,EAAG,CACxB,CACP;EAEX,CAAC;EAED,oBACE;IAAK,SAAS,EAAEb,MAAM,CAACc;EAAuB,gBAC5C,oBAAC,IAAI,CAAC,IAAI;IACR,GAAG,EAAEX,IAAK;IACV,IAAI,EAAEA,IAAK;IACX,KAAK,EAAEC,KAAM;IACb,KAAK,EAAE,CAAC;MAAEE,QAAQ,EAAEA,QAAQ;MAAES,OAAO,8BAAQZ,IAAI;IAAG,CAAC;EAAE,gBAEvD,oBAAC,OAAO;IACN,YAAY,EAAE;MACZa,MAAM,EAAE;IACV,CAAE;IACF,OAAO,EAAER,UAAU,CAACH,KAAK,CAAE;IAC3B,KAAK,EAAC,QAAQ;IACd,OAAO,EAAC,OAAO;IACf,SAAS,EAAC;EAAM,gBAEhB;IAAK,SAAS,EAAEL,MAAM,CAACiB;EAAQ,gBAC7B,oBAAC,WAAW;IACV,IAAI,EAAE;MACJC,GAAG,EAAE,SAAS;MACdC,QAAQ,EAAE,SAAS;MACnBC,IAAI,EAAE,MAAM;MACZC,KAAK,EAAE;IACT,CAAE;IACF,KAAK,EAAE;MACLC,OAAO,EAAE;IACX;EAAE,EACF,CACE,CACE,CACA,CACR;AAEV"}

package/dist/esm/visual-property-form/components/MessageEditor/MessageEditor.module.css

@@ -0,0 +1,19 @@
+.messageEditorContainer {
+  display: "flex";
+  align-items: "center";
+}
+
+.editBtn {
+  display: flex;
+  justify-content: center;
+  padding: 4px;
+  outline-width: 1px;
+  outline-style: solid;
+  outline-offset: -1px;
+  outline-color: var(--antd-input-border-color);
+}
+
+.editBtn:hover {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.5);
+}

package/dist/esm/visual-property-form/constant.js

@@ -1,12 +1,16 @@
 export var groupI18nMap = {
   basic: {
     en: "Basic",
-    zh: "常用"
+    zh: "基础"
   },
   ui: {
     en: "UI",
     zh: "外观"
   },
+  style: {
+    en: "Style",
+    zh: "样式"
+  },
   advanced: {
     en: "Advanced",
     zh: "高级"
@@ -19,6 +23,14 @@ export var groupI18nMap = {
     en: "Advanced Form Item",
     zh: "表单项高级"
   },
+  formValidation: {
+    en: "Validation",
+    zh: "数据验证"
+  },
+  formLabel: {
+    en: "Label",
+    zh: "标签"
+  },
   other: {
     en: "Other",
     zh: "其他"

package/dist/esm/visual-property-form/constant.js.map

@@ -1 +1 @@
-{"version":3,"file":"constant.js","names":["groupI18nMap","basic","en","zh","ui","advanced","basicFormItem","advancedFormItem","other","supportBasicType","supportMenuType","OTHER_FORM_ITEM_FIELD","defaultCommonProps","name","type","description","group","groupI18N"],"sources":["../../../src/visual-property-form/constant.ts"],"sourcesContent":["import { PropertyType } from \"../interfaces\";\n\nexport const groupI18nMap = {\n  basic: {\n    en: \"Basic\",\n    zh: \"常用\",\n  },\n  ui: {\n    en: \"UI\",\n    zh: \"外观\",\n  },\n  advanced: {\n    en: \"Advanced\",\n    zh: \"高级\",\n  },\n  basicFormItem: {\n    en: \"Basic Form Item\",\n    zh: \"表单项常用\",\n  },\n  advancedFormItem: {\n    en: \"Advanced Form Item\",\n    zh: \"表单项高级\",\n  },\n  other: {\n    en: \"Other\",\n    zh: \"其他\",\n  },\n};\n\nexport const supportBasicType = [\n  \"boolean\",\n  \"number\",\n  \"string\",\n  \"string[]\",\n  \"MenuIcon\",\n  \"Color\",\n];\n\nexport const supportMenuType = [\"Menu\", \"SidebarSubMenu\"];\n\nexport const OTHER_FORM_ITEM_FIELD = \"others\";\n\nexport const defaultCommonProps: PropertyType[] = [\n  {\n    name: \"id\",\n    type: \"string\",\n    description: \"构件 ID\",\n    group: \"basic\",\n    groupI18N: groupI18nMap,\n  },\n  {\n    name: \"style\",\n    type: \"Record<string, any>\",\n    description: \"构件样式\",\n    group: \"ui\",\n    groupI18N: groupI18nMap,\n  },\n];\n"],"mappings":"AAEA,OAAO,IAAMA,YAAY,GAAG;EAC1BC,KAAK,EAAE;IACLC,EAAE,EAAE,OAAO;IACXC,EAAE,EAAE;EACN,CAAC;EACDC,EAAE,EAAE;IACFF,EAAE,EAAE,IAAI;IACRC,EAAE,EAAE;EACN,CAAC;EACDE,QAAQ,EAAE;IACRH,EAAE,EAAE,UAAU;IACdC,EAAE,EAAE;EACN,CAAC;EACDG,aAAa,EAAE;IACbJ,EAAE,EAAE,iBAAiB;IACrBC,EAAE,EAAE;EACN,CAAC;EACDI,gBAAgB,EAAE;IAChBL,EAAE,EAAE,oBAAoB;IACxBC,EAAE,EAAE;EACN,CAAC;EACDK,KAAK,EAAE;IACLN,EAAE,EAAE,OAAO;IACXC,EAAE,EAAE;EACN;AACF,CAAC;AAED,OAAO,IAAMM,gBAAgB,GAAG,CAC9B,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,UAAU,EACV,OAAO,CACR;AAED,OAAO,IAAMC,eAAe,GAAG,CAAC,MAAM,EAAE,gBAAgB,CAAC;AAEzD,OAAO,IAAMC,qBAAqB,GAAG,QAAQ;AAE7C,OAAO,IAAMC,kBAAkC,GAAG,CAChD;EACEC,IAAI,EAAE,IAAI;EACVC,IAAI,EAAE,QAAQ;EACdC,WAAW,EAAE,OAAO;EACpBC,KAAK,EAAE,OAAO;EACdC,SAAS,EAAEjB;AACb,CAAC,EACD;EACEa,IAAI,EAAE,OAAO;EACbC,IAAI,EAAE,qBAAqB;EAC3BC,WAAW,EAAE,MAAM;EACnBC,KAAK,EAAE,IAAI;EACXC,SAAS,EAAEjB;AACb,CAAC,CACF"}
+{"version":3,"file":"constant.js","names":["groupI18nMap","basic","en","zh","ui","style","advanced","basicFormItem","advancedFormItem","formValidation","formLabel","other","supportBasicType","supportMenuType","OTHER_FORM_ITEM_FIELD","defaultCommonProps","name","type","description","group","groupI18N"],"sources":["../../../src/visual-property-form/constant.ts"],"sourcesContent":["import { PropertyType } from \"../interfaces\";\n\nexport const groupI18nMap = {\n  basic: {\n    en: \"Basic\",\n    zh: \"基础\",\n  },\n  ui: {\n    en: \"UI\",\n    zh: \"外观\",\n  },\n  style: {\n    en: \"Style\",\n    zh: \"样式\",\n  },\n  advanced: {\n    en: \"Advanced\",\n    zh: \"高级\",\n  },\n  basicFormItem: {\n    en: \"Basic Form Item\",\n    zh: \"表单项常用\",\n  },\n  advancedFormItem: {\n    en: \"Advanced Form Item\",\n    zh: \"表单项高级\",\n  },\n  formValidation: {\n    en: \"Validation\",\n    zh: \"数据验证\",\n  },\n  formLabel: {\n    en: \"Label\",\n    zh: \"标签\",\n  },\n  other: {\n    en: \"Other\",\n    zh: \"其他\",\n  },\n};\n\nexport const supportBasicType = [\n  \"boolean\",\n  \"number\",\n  \"string\",\n  \"string[]\",\n  \"MenuIcon\",\n  \"Color\",\n];\n\nexport const supportMenuType = [\"Menu\", \"SidebarSubMenu\"];\n\nexport const OTHER_FORM_ITEM_FIELD = \"others\";\n\nexport const defaultCommonProps: PropertyType[] = [\n  {\n    name: \"id\",\n    type: \"string\",\n    description: \"构件 ID\",\n    group: \"basic\",\n    groupI18N: groupI18nMap,\n  },\n  {\n    name: \"style\",\n    type: \"Record<string, any>\",\n    description: \"构件样式\",\n    group: \"ui\",\n    groupI18N: groupI18nMap,\n  },\n];\n"],"mappings":"AAEA,OAAO,IAAMA,YAAY,GAAG;EAC1BC,KAAK,EAAE;IACLC,EAAE,EAAE,OAAO;IACXC,EAAE,EAAE;EACN,CAAC;EACDC,EAAE,EAAE;IACFF,EAAE,EAAE,IAAI;IACRC,EAAE,EAAE;EACN,CAAC;EACDE,KAAK,EAAE;IACLH,EAAE,EAAE,OAAO;IACXC,EAAE,EAAE;EACN,CAAC;EACDG,QAAQ,EAAE;IACRJ,EAAE,EAAE,UAAU;IACdC,EAAE,EAAE;EACN,CAAC;EACDI,aAAa,EAAE;IACbL,EAAE,EAAE,iBAAiB;IACrBC,EAAE,EAAE;EACN,CAAC;EACDK,gBAAgB,EAAE;IAChBN,EAAE,EAAE,oBAAoB;IACxBC,EAAE,EAAE;EACN,CAAC;EACDM,cAAc,EAAE;IACdP,EAAE,EAAE,YAAY;IAChBC,EAAE,EAAE;EACN,CAAC;EACDO,SAAS,EAAE;IACTR,EAAE,EAAE,OAAO;IACXC,EAAE,EAAE;EACN,CAAC;EACDQ,KAAK,EAAE;IACLT,EAAE,EAAE,OAAO;IACXC,EAAE,EAAE;EACN;AACF,CAAC;AAED,OAAO,IAAMS,gBAAgB,GAAG,CAC9B,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,UAAU,EACV,OAAO,CACR;AAED,OAAO,IAAMC,eAAe,GAAG,CAAC,MAAM,EAAE,gBAAgB,CAAC;AAEzD,OAAO,IAAMC,qBAAqB,GAAG,QAAQ;AAE7C,OAAO,IAAMC,kBAAkC,GAAG,CAChD;EACEC,IAAI,EAAE,IAAI;EACVC,IAAI,EAAE,QAAQ;EACdC,WAAW,EAAE,OAAO;EACpBC,KAAK,EAAE,OAAO;EACdC,SAAS,EAAEpB;AACb,CAAC,EACD;EACEgB,IAAI,EAAE,OAAO;EACbC,IAAI,EAAE,qBAAqB;EAC3BC,WAAW,EAAE,MAAM;EACnBC,KAAK,EAAE,IAAI;EACXC,SAAS,EAAEpB;AACb,CAAC,CACF"}

package/dist/types/interfaces/brick-visualization.d.ts

@@ -13,7 +13,8 @@ export interface PropertyType {
     name: string;
     editor?: {
         model?: string;
-    };
+    } | string;
+    editorProps?: Record<string, any>;
     required?: Required;
     description?: string;
     default?: string;

package/dist/types/visual-property-form/components/MessageEditor/MessageEditor.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface MessageEditorProps {
+    name?: string;
+    label?: string | React.ReactElement;
+    value?: Record<string, any>;
+    required?: boolean;
+    onChange?: (data: any) => void;
+}
+export declare function MessageEditor({ name, label, value, required, onChange, }: MessageEditorProps): React.ReactElement;
+export {};

package/dist/types/visual-property-form/constant.d.ts

@@ -8,6 +8,10 @@ export declare const groupI18nMap: {
         en: string;
         zh: string;
     };
+    style: {
+        en: string;
+        zh: string;
+    };
     advanced: {
         en: string;
         zh: string;
@@ -20,6 +24,14 @@ export declare const groupI18nMap: {
         en: string;
         zh: string;
     };
+    formValidation: {
+        en: string;
+        zh: string;
+    };
+    formLabel: {
+        en: string;
+        zh: string;
+    };
     other: {
         en: string;
         zh: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-libs/visual-builder",
-  "version": "1.5.2",
+  "version": "1.6.1",
   "description": "> TODO: description",
   "homepage": "https://github.com/easyops-cn/next-libs/tree/master/libs/visual-builder",
   "license": "GPL-3.0",
@@ -30,10 +30,10 @@
   },
   "dependencies": {
     "@next-libs/basic-components": "^5.2.0",
-    "@next-libs/code-editor-components": "^4.8.3",
-    "@next-libs/forms": "^3.3.8",
+    "@next-libs/code-editor-components": "^4.8.4",
+    "@next-libs/forms": "^3.3.9",
     "@types/react-color": "^3.0.6",
     "react-color": "^2.19.3"
   },
-  "gitHead": "82b305b2a31b0f5a1ce83d8c07113558944b803e"
+  "gitHead": "4d3f0f71e38ed935172d1759e1808ebd0382835b"
 }