@pisell/materials 1.0.472 → 1.0.474

package/lowcode/data-source-form/snippets.ts

@@ -7,6 +7,9 @@ export default [
       title: '表单(添加)',
       componentName: 'DataSourceForm',
       props: {
+        style: {
+          padding: '24px',
+        },
         mode: 'add',
         groupInfoPosition: 'top',
         labelWrap: true,
@@ -49,6 +52,9 @@ export default [
       title: '表单(编辑)',
       componentName: 'DataSourceForm',
       props: {
+        style: {
+          padding: '24px',
+        },
         mode: 'edit',
         groupInfoPosition: 'top',
         labelWrap: true,
@@ -92,6 +98,9 @@ export default [
       title: '详情',
       componentName: 'DataSourceForm',
       props: {
+        style: {
+          padding: '24px',
+        },
         mode: 'view',
         groupInfoPosition: 'top',
         labelWrap: true,

package/lowcode/data-source-form/utils.ts

@@ -35,6 +35,7 @@ export const createFormGroup = (children: any[]) => {
 export const createSubmitButton = (props: any = {}) => {
   return {
     componentName: 'SubmitButton',
+    title: '提交',
     props: {
       type: 'primary',
       size: 'large',
@@ -97,6 +98,7 @@ export const createFormItemSchema = (
     uiSchema: UiSchema;
     children?: any[];
     _children?: any[];
+    interface?: string;
   },
   mode: string
 ) => {
@@ -109,6 +111,8 @@ export const createFormItemSchema = (
     default: defaultValue,
   } = uiSchema;
 
+  let cptTitle = undefined;
+
   let props: Record<string, any> = {
     label: title,
     name,
@@ -119,6 +123,15 @@ export const createFormItemSchema = (
   let childrenSchema: any[] = [];
 
   if (validator && validator !== 'integer') {
+    console.log('validator', validator);
+    if (item?.interface === 'phone') {
+      cptTitle = '手机号码输入';
+      componentName = 'Input.Phone';
+    }
+    if (validator === 'email') {
+      cptTitle = '电子邮箱输入';
+      componentName = 'Input.Email';
+    }
     props.typeobj = {
       type: validator,
       enabled: true,
@@ -126,15 +139,35 @@ export const createFormItemSchema = (
   }
 
   if (xComponent === 'Input.JSON') {
-    props.prefix = name;
-
     const jsonChildren = item._children || item.children || [];
 
     // 如果有children属性,递归创建子表单项
     if (jsonChildren && jsonChildren.length > 0) {
+      props.prefix = name;
       childrenSchema = jsonChildren.map((child: any) =>
         createFormItemSchema(child, mode)
       );
+    } else {
+      componentName = 'Input.InputJSON';
+      props.autoSize = {
+        minRows: 4,
+      };
+      // props.validateTrigger = "onBlur";
+      props.normalize = {
+        type: 'JSExpression',
+        value:
+          '(value) => {\n  try {\n    return JSON.parse(value);\n  } catch(error) {\n    console.log(error)\n  }\n  return value\n}',
+      };
+      props.getValueProps = {
+        type: 'JSExpression',
+        value:
+          '(value) => {\n  try {\n   return { value: value != "" && typeof value === \'object\' ? JSON.stringify(value, null, 2) : value};\n  } catch(error) {\n    console.log(error)\n  }\n  return {value: value}\n}',
+      };
+      props.validator = {
+        type: 'JSExpression',
+        value:
+          "async (value) => {\n try {\n    if (typeof value === 'string' && value.trim() !== '') {\n      JSON.parse(value);\n    }\n  } catch (err) {\n    return Promise.reject(new Error(err.message));\n  }\n}",
+      };
     }
   }
 
@@ -159,6 +192,7 @@ export const createFormItemSchema = (
   }
 
   return {
+    title: cptTitle,
     componentName: nocobaseCpt2PisellCptMap[componentName],
     props,
     children: childrenSchema,
@@ -178,7 +212,11 @@ export const formSchema2PisellFieldsOptions = (
   formSchema: any,
   allFields: any[]
 ) => {
-  if (!['DataSourceForm', 'FormGroup'].includes(formSchema.componentName)) {
+  if (
+    !['DataSourceForm', 'FormGroup', 'DataSourceWrapper'].includes(
+      formSchema.componentName
+    )
+  ) {
     return [];
   }
 
@@ -295,7 +333,19 @@ export const setVariables = (
 export const setBatchVariables = (
   target: any,
   variables: Array<{
-    label: string;
+    /**
+     * currentFields 当前表单字段列表
+     * dataSourceTitle 数据源标题
+     * dataSourceValue 数据源值
+     * cptValuesVariables 组件值变量
+     */
+    label:
+      | 'currentFields'
+      | 'dataSourceTitle'
+      | 'dataSourceValue'
+      | 'cptValuesVariables'
+      | 'currentValueVariables'
+      | 'dataSourceVariables';
     value: any;
   }>
 ) => {
@@ -364,14 +414,16 @@ const getParentVariables = (target: any) => {
 export const getDataSourceVariables = (target: any) => {
   const variables = getParentVariables(target);
 
-  return variables?.map((item: VariablesItemType) => {
-    return {
-      label: item.title,
-      value: item.id,
-      children: item.variables.dataSourceVariables,
-      isVariable: true,
-    };
-  }).filter(item => item?.children?.length);
+  return variables
+    ?.map((item: VariablesItemType) => {
+      return {
+        label: item.title,
+        value: item.id,
+        children: item.variables.dataSourceVariables,
+        isVariable: true,
+      };
+    })
+    .filter((item) => item?.children?.length);
 };
 
 export const getCurrentValueVariables = (target: any) => {
@@ -399,9 +451,22 @@ export const getCurrentValueVariables = (target: any) => {
   return currentValueVariables;
 };
 
-export const getDataSourceValue = (target: any) => {
+export const getCptValuesVariables = (target: any) => {
   const variables = getParentVariables(target);
-  return variables?.find(item => item.variables.dataSourceValue)?.variables.dataSourceValue;
+  return variables
+    ?.map((item: VariablesItemType) => {
+      return {
+        label: `${item.title}-${item?.variables?.dataSourceTitle || ''}`,
+        value: item.id,
+        children: item.variables.cptValuesVariables,
+        isVariable: true,
+      };
+    })
+    .filter((item) => item?.children?.length);
 };
 
-
+export const getDataSourceValue = (target: any) => {
+  const variables = getParentVariables(target);
+  return variables?.find((item) => item.variables.dataSourceValue)?.variables
+    .dataSourceValue;
+};

package/lowcode/data-source-image/meta.ts

@@ -0,0 +1,74 @@
+import snippets from './snippets';
+import { genGeneralVariablesSetting } from '../_utils/defaultSchema';
+
+export default {
+  snippets,
+  componentName: 'DataSourceImage',
+  title: '图片',
+  category: '数据展示',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'DataSourceImage',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+
+  generalProps: [
+    genGeneralVariablesSetting({
+      name: 'src',
+      title: { label: '图片地址', tip: '图片地址' },
+    }),
+  ],
+  props: [
+    {
+      name: 'src',
+      title: { label: '图片地址', tip: '图片地址' },
+      propType: { type: 'string', isRequired: true },
+    },
+    {
+      name: 'alt',
+      title: { label: '替换文本', tip: '替换文本' },
+      propType: 'string',
+      setter: 'PisellI18nSetter',
+    },
+    {
+      name: 'preview',
+      title: { label: '支持预览', tip: '支持预览' },
+      defaultValue: true,
+      propType: 'bool',
+    },
+    {
+      name: 'fallback',
+      title: { label: '失败地址', tip: '加载失败容错地址' },
+      propType: 'string',
+    },
+    {
+      name: 'width',
+      title: { label: '宽度', tip: '宽度' },
+      propType: 'number',
+    },
+    {
+      name: 'height',
+      title: { label: '高度', tip: '高度' },
+      propType: 'number',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onClick',
+          template:
+            "onClick(event,${extParams}){\n// 点击时的回调\nconsole.log('onClick', event);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/data-source-image/snippets.ts

@@ -0,0 +1,14 @@
+export default [
+  {
+    title: '图片',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/image-1.png',
+    schema: {
+      componentName: 'DataSourceImage',
+      props: {
+        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        height: 120,
+        width: 120,
+      },
+    },
+  },
+];

package/lowcode/data-source-qrcode/meta.ts

@@ -0,0 +1,158 @@
+import snippets from './snippets';
+import { genGeneralVariablesSetting } from '../_utils/defaultSchema';
+
+export default {
+  snippets,
+  componentName: 'DataSourceQRCode',
+  title: '二维码',
+  category: '数据展示',
+  group: '无代码组件',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "DataSourceQRCode",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  generalProps: [
+    genGeneralVariablesSetting({
+      name: 'value',
+      title: { label: '内容', tip: '内容' },
+    }),
+  ],
+  props: [
+    {
+      name: 'value',
+      title: { label: '内容', tip: '内容' },
+      propType: 'string',
+    },
+    {
+      name: 'type',
+      title: { label: '渲染类型', tip: '渲染类型' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'Canvas',
+              value: 'canvas',
+            },
+            {
+              title: 'Svg',
+              value: 'svg',
+            },
+          ],
+        },
+      },
+    },
+    {
+      name: 'icon',
+      title: { label: '二维码中图片的地址', tip: '二维码中图片的地址（目前只支持图片地址）' },
+      propType: 'string',
+    },
+    {
+      name: 'size',
+      title: { label: '二维码大小', tip: '二维码大小' },
+      propType: 'number',
+    },
+    {
+      name: 'iconSize',
+      title: { label: '二维码中图片的大小', tip: '二维码中图片的大小' },
+      propType: 'number',
+    },
+    {
+      name: 'color',
+      description: '二维码颜色',
+      propType: 'string',
+      setter: 'ColorSetter',
+    },
+    {
+      name: 'bgColor',
+      description: '二维码背景颜色',
+      propType: 'string',
+      setter: 'ColorSetter',
+    },
+    {
+      name: 'bordered',
+      title: { label: '是否有边框', tip: '是否有边框' },
+      propType: 'bool',
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'errorLevel',
+      title: { label: '二维码纠错等级', tip: '通常情况下二维码分为 4 个纠错级别：L级 可纠正约 7% 错误、M级 可纠正约 15% 错误、Q级 可纠正约 25% 错误、H级 可纠正约30% 错误。并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'L',
+              value: 'L',
+            },
+            {
+              title: 'M',
+              value: 'M',
+            },
+            {
+              title: 'Q',
+              value: 'Q',
+            },
+            {
+              title: 'H',
+              value: 'H',
+            },
+          ],
+        },
+      },
+    },
+    {
+      name: 'preview',
+      title: { label: '预览功能', tip: '是否开启预览功能,点击放大展示' },
+      propType: 'bool',
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'status',
+      title: { label: '二维码状态', tip: '二维码状态' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'active',
+              value: 'active',
+            },
+            {
+              title: 'expired',
+              value: 'expired',
+            },
+            {
+              title: 'loading',
+              value: 'loading',
+            },
+          ],
+        },
+      },
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onRefresh',
+          template: "onRefresh(event,${extParams}){\n// 刷新\nconsole.log('onClose',event);}",
+        },
+        {
+          name: "onClick",
+          template:
+            "onClick(event,${extParams}){\n// 点击时的回调\nconsole.log('onClick', event);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/data-source-qrcode/snippets.ts

@@ -0,0 +1,20 @@
+export default [
+  {
+    title: '二维码',
+    screenshot: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original',
+    schema: {
+      componentName: 'DataSourceQRCode',
+      props: {
+        value: "pisell2",
+        size: 160,
+        iconSize: 40,
+        status: "active",
+        errorLevel: "L",
+        type: "canvas",
+        color: "#000",
+        bgColor: "transparent",
+        bordered: true,
+      },
+    },
+  },
+];