@pisell/materials 2.2.48 → 2.2.49

package/lowcode/form.item/meta.ts

@@ -1,20 +1,22 @@
 import snippets from './snippets';
+import { createFormItemChildren } from '../form/meta';
+import { getVariable } from '../data-source-form/utils';
 
 export default {
   snippets,
   componentName: 'Form.Item',
   title: '表单项',
   category: '表单',
-  docUrl: "",
-  screenshot: "",
-  devMode: "proCode",
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
   npm: {
-    package: "@pisell/materials",
-    version: "1.0.1",
-    exportName: "Form",
-    main: "src/index.tsx",
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'Form',
+    main: 'src/index.tsx',
     destructuring: true,
-    subName: "Item",
+    subName: 'Item',
   },
   props: [
     {
@@ -22,8 +24,54 @@ export default {
       title: { label: '字段名', tip: '字段名' },
       isRequired: true,
       propType: 'string',
-      setter: 'StringSetter',
-      supportVariable: true
+      setter: [
+        {
+          componentName: 'SelectSetter',
+          condition: (target) => {
+            // 获取表单容器组件的currentFields
+            const fields = getVariable(target.node.parent, 'currentFields');
+            // 如果fields存在且长度大于0，则显示选择器
+            return fields && fields.length > 0;
+          },
+          props: (target) => {
+            // 获取表单容器组件的currentFields
+            const fields = getVariable(target.node.parent, 'currentFields');
+            // 已有字段key
+            const fieldsKey = target.node.parent.children.map(item => item.getProps().getPropValue('name'));
+
+            const options = fields?.map?.((item) => ({
+              title: item.uiSchema.title,
+              value: item.name,
+              disabled: fieldsKey.includes(item.name),
+            }));
+
+            return {
+              mode: 'single',
+              options:options || [],
+            };
+          },
+        },
+        'StringSetter',
+      ],
+      extraProps: {
+        setValue(target: any, value: string | any) {
+          // 获取表单容器组件的currentFields
+          const fields = getVariable(target.node.parent, 'currentFields');
+          // 根据value值找到对应的label
+          const field = fields.find((item: any) => item.name === value);
+          // 设置label
+          if (field) {
+            target.getProps().setPropValue('label', field.uiSchema.title);
+            target.node.children.importSchema([createFormItemChildren(field)])
+            // 插入schema后 有概率不生效，所以这里手动rerender
+            setTimeout(() => {
+              target.document.project.simulatorHost.rerender();
+            });
+          }
+          return target.getProps().setPropValue('name', value);
+        },
+      },
+      supportVariable: true,
     },
     {
       name: 'label',
@@ -59,9 +107,8 @@ export default {
         tip: '配合 label 属性使用，表示是否显示 label 后面的冒号',
       },
       propType: 'bool',
-      defaultValue: true,
       setter: 'BoolSetter',
-      supportVariable: true
+      supportVariable: true,
     },
     {
       name: 'extra',
@@ -70,7 +117,7 @@ export default {
         tip: '额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。',
       },
       propType: { type: 'oneOfType', value: ['string', 'node'] },
-      setter: ['PisellI18nSetter', 'SlotSetter']
+      setter: ['PisellI18nSetter', 'SlotSetter'],
     },
     {
       name: 'tooltip',
@@ -79,7 +126,7 @@ export default {
         tip: '标签提示信息，当需要对标签进行解释时，可以使用这个。',
       },
       propType: { type: 'oneOfType', value: ['string', 'node'] },
-      setter: ['PisellI18nSetter', 'SlotSetter']
+      setter: ['PisellI18nSetter', 'SlotSetter'],
     },
     {
       name: 'required',
@@ -90,7 +137,7 @@ export default {
       propType: 'bool',
       defaultValue: false,
       setter: 'BoolSetter',
-      supportVariable: true
+      supportVariable: true,
     },
     // {
     //   name: 'hasFeedback',
@@ -110,7 +157,7 @@ export default {
       },
       propType: 'string',
       setter: 'PisellI18nSetter',
-      supportVariable: true
+      supportVariable: true,
     },
     {
       name: 'noStyle',
@@ -121,7 +168,7 @@ export default {
       propType: 'bool',
       defaultValue: false,
       setter: 'BoolSetter',
-      supportVariable: true
+      supportVariable: true,
     },
     {
       name: 'valuePropName',
@@ -132,7 +179,7 @@ export default {
       propType: 'string',
       defaultValue: 'value',
       setter: 'StringSetter',
-      supportVariable: true
+      supportVariable: true,
     },
     {
       name: 'getValueFromEvent',
@@ -142,6 +189,22 @@ export default {
       },
       propType: 'func',
     },
+    {
+      name: 'normalize',
+      title: {
+        label: '值转换器',
+        tip: `组件获取值后进行转换，再放入 Form 中。不支持异步	`,
+      },
+      propType: 'func',
+    },
+    {
+      name: 'getValueProps',
+      title: {
+        label: 'getValueProps',
+        tip: `为子元素添加额外的属性 (不建议通过 getValueProps 生成动态函数 prop，请直接将其传递给子组件)`,
+      },
+      propType: 'func',
+    },
     {
       type: 'group',
       title: '布局',
@@ -220,7 +283,8 @@ export default {
               },
             },
           },
-          description: '需要为输入控件设置布局样式时，使用该属性，用法同 labelCol',
+          description:
+            '需要为输入控件设置布局样式时，使用该属性，用法同 labelCol',
         },
       ],
     },
@@ -240,15 +304,15 @@ export default {
               setValue(target: any, value: boolean) {
                 // 同步 必填标记
                 target.parent.parent.setPropValue('required', value);
-              }
-            }
+              },
+            },
           },
           {
             name: 'message',
             title: '错误信息提示',
             propType: 'string',
             setter: 'PisellI18nSetter',
-            supportVariable: true
+            supportVariable: true,
           },
         ],
       },
@@ -290,7 +354,12 @@ export default {
               value: ['string', 'number', 'email', 'url'],
             },
           },
-          { name: 'message', title: '错误信息提示', propType: 'string', setter: 'PisellI18nSetter' },
+          {
+            name: 'message',
+            title: '错误信息提示',
+            propType: 'string',
+            setter: 'PisellI18nSetter',
+          },
         ],
       },
     },
@@ -303,7 +372,12 @@ export default {
           // { name: 'len', title: '固定长度', propType: 'string' },
           { name: 'max', title: '最大长度', propType: 'number' },
           { name: 'min', title: '最小长度', propType: 'number' },
-          { name: 'message', title: '错误信息提示', propType: 'string', setter: "PisellI18nSetter" },
+          {
+            name: 'message',
+            title: '错误信息提示',
+            propType: 'string',
+            setter: 'PisellI18nSetter',
+          },
         ],
       },
     },
@@ -314,7 +388,60 @@ export default {
         type: 'shape',
         value: [
           { name: 'pattern', title: '正则', propType: 'string' },
-          { name: 'message', title: '错误信息提示', propType: 'string', setter: "PisellI18nSetter" },
+          {
+            name: 'message',
+            title: '错误信息提示',
+            propType: 'string',
+            setter: 'PisellI18nSetter',
+          },
+        ],
+      },
+    },
+    {
+      name: 'subdomainobj',
+      title: { label: '子域名校验设置', tip: '子域名校验设置' },
+      propType: {
+        type: 'shape',
+        value: [
+          { name: 'subdomain', title: '子域名校验设置', propType: 'string' },
+          {
+            name: 'message',
+            title: '错误信息提示',
+            propType: 'string',
+            setter: 'PisellI18nSetter',
+          },
+        ],
+      },
+    },
+    {
+      name: 'phoneobj',
+      title: { label: '电话号码校验设置', tip: '电话号码校验设置' },
+      propType: {
+        type: 'shape',
+        value: [
+          { name: 'phone', title: '电话号码校验设置', propType: 'string' },
+          {
+            name: 'message',
+            title: '错误信息提示',
+            propType: 'string',
+            setter: 'PisellI18nSetter',
+          },
+        ],
+      },
+    },
+    {
+      name: 'mobileobj',
+      title: { label: '手机号码校验设置', tip: '手机号码校验设置' },
+      propType: {
+        type: 'shape',
+        value: [
+          { name: 'mobile', title: '手机号码校验设置', propType: 'string' },
+          {
+            name: 'message',
+            title: '错误信息提示',
+            propType: 'string',
+            setter: 'PisellI18nSetter',
+          },
         ],
       },
     },

package/lowcode/icon-select/meta.ts

@@ -0,0 +1,98 @@
+import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
+import { AntdIconSetter } from '../_setters';
+
+const IconSelectMeta: ComponentMetadata = {
+  componentName: 'IconSelect',
+  title: '选择图标',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '0.1.0',
+    exportName: 'IconSelect',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    props: [
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'value',
+            'zh-CN': '当前图标',
+          },
+        },
+        name: 'value',
+        setter: AntdIconSetter,
+        supportVariable: true,
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'defaultValue',
+            'zh-CN': '默认图标',
+          },
+        },
+        name: 'defaultValue',
+        setter: AntdIconSetter,
+        supportVariable: true,
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'disabled',
+            'zh-CN': '是否禁用',
+          },
+        },
+        name: 'disabled',
+        setter: 'BoolSetter',
+        defaultValue: false,
+        supportVariable: true,
+      },
+    ],
+    supports: {
+      style: true,
+      className: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(icon,${extParams}){\n// 选择icon变化时的回调\nconsole.log('onChange',icon);}",
+        },
+      ],
+    },
+    component: {
+      isContainer: false,
+      nestingRule: {
+        childWhitelist: [],
+      },
+    },
+  },
+  experimental: {
+    callbacks: {},
+  },
+  category: '表单',
+};
+
+const snippets: Snippet[] = [
+  {
+    title: '选择图标',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/icon-1.jpg',
+    schema: {
+      componentName: 'IconSelect',
+      props: {
+        placeholder: '选择图标',
+      },
+    },
+  },
+];
+
+export default {
+  ...IconSelectMeta,
+  snippets,
+};

package/lowcode/image/meta.ts

@@ -49,6 +49,25 @@ export default {
       title: { label: "高度", tip: "高度" },
       propType: "number",
     },
+    {
+      name: "fallbackType",
+      title: { label: "占位图", tip: "占位图类型" },
+      propType: {
+        type: "oneOf",
+        value: ["image", "avatar", "product"]
+      },
+      defaultValue: "image",
+      setter: {
+        componentName: "SelectSetter",
+        props: {
+          options: [
+            { label: "图片", value: "image" },
+            { label: "人像", value: "avatar" }, 
+            { label: "商品", value: "product" }
+          ]
+        }
+      }
+    }
   ],
   configure: {
     supports: {

package/lowcode/image/snippets.ts

@@ -5,6 +5,7 @@ export default [
     schema: {
       componentName: 'Image',
       props: {
+        fallbackType: "image",
         src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
         height: 120,
         width: 120,

package/lowcode/input.text-area/meta.ts

@@ -3,7 +3,7 @@ import snippets from './snippets';
 export default {
   snippets,
   componentName: 'Input.TextArea',
-  title: '长文本',
+  title: '多行文本',
   category: '表单',
   docUrl: "",
   screenshot: "",

package/lowcode/input.text-area/snippets.ts

@@ -1,14 +1,10 @@
 export default [
   {
-    title: '长文本',
+    title: '多行文本',
     screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/input-text-area-1.png',
     schema: {
       componentName: 'Input.TextArea',
       props: {
-        autoSize: {
-          minRows: 3,
-          maxRows: 3,
-        },
         placeholder: '请输入',
       },
     },

package/lowcode/json-wrapper/meta.ts

@@ -0,0 +1,65 @@
+
+import { ComponentMetadata } from '@alilc/lowcode-types';
+import snippets from './snippets';
+
+const JsonWrapperMeta: ComponentMetadata = {
+  componentName: 'JsonWrapper',
+  title: 'JSON包装器',
+  category: '无代码表单',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'JsonWrapper',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    props: [
+      {
+        name: 'prefix',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Prefix Path',
+            'zh-CN': '前缀路径',
+          },
+          tip: '用于指定JSON数据的路径前缀',
+        },
+        propType: {
+          type: 'oneOfType',
+          value: ['string', 'number', { type: 'arrayOf', value: ['string', 'number'] }]
+        },
+        setter: ['StringSetter', 'NumberSetter', 'ArraySetter', 'VariableSetter'],
+        defaultValue: '',
+      },
+      {
+        name: 'label',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Label',
+            'zh-CN': '标签',
+          },
+        },
+        propType: 'string',
+        setter: ['StringSetter', 'PisellI18nSetter'],
+      }
+    ],
+    supports: {
+      style: true,
+      className: true,
+      isContainer: true,
+    },
+    component: {
+        isContainer: true,
+      },
+  },
+  snippets,
+};
+
+export default JsonWrapperMeta;

package/lowcode/json-wrapper/snippets.ts

@@ -0,0 +1,16 @@
+
+const snippets = [
+  {
+    title: 'JSON包装器',
+    screenshot: '',
+    schema: {
+      componentName: 'JsonWrapper',
+      props: {
+        prefix: '',
+        label: '标签'
+      }
+    }
+  }
+];
+
+export default snippets;