@pisell/materials 6.0.19 → 6.0.20

package/lowcode/card-pro/snippe.ts

@@ -0,0 +1,39 @@
+import { uuid } from "../_utils/utils";
+
+export default [{
+    componentName: 'CardPro',
+    title: 'CardPro',
+    schema: {
+        componentName: 'CardPro',
+        props: {
+
+            actionButtons: [
+                {
+                    key: uuid(),
+                    button: {
+                        type: "JSSlot",
+                        value: {
+                            componentName: "Button",
+                            props: {
+                                children: "主按钮",
+                                type: "primary"
+                            },
+                        },
+                    }
+                }, {
+                    key: uuid(),
+                    button: {
+                        type: "JSSlot",
+                        value: {
+                            componentName: "Button",
+                            props: {
+                                children: "副按钮",
+                                type: "default"
+                            },
+                        },
+                    }
+                }
+            ]
+        }
+    }
+}]

package/lowcode/crop-photo/meta.ts

@@ -0,0 +1,77 @@
+import snippets from './snippe';
+
+export default {
+  snippets,
+  componentName: 'CropPhoto',
+  title: '图片裁切',
+  category: '通用',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "CropPhoto",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'cropShape',
+      title: '裁剪框形状',
+      propType: {
+        type: 'oneOf',
+        value: ['rect', 'round'],
+      },
+      defaultValue: 'rect',
+      setter: [
+        {
+          componentName: 'RadioGroupSetter',
+          props: {
+            options: [
+              {
+                title: '正方形',
+                value: 'rect',
+              },
+              {
+                title: '圆形',
+                value: 'round',
+              },
+            ],
+          },
+        },
+        'VariableSetter',
+      ],
+
+    }
+  ],
+  configure: {
+    component: { isContainer: true },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange({file,fileList,event},${extParams}){\n// 上传文件改变时的回调\nconsole.log('onChange',file,fileList,event);}",
+        },
+        {
+          name: 'onPreview',
+          template:
+            "onPreview(file,${extParams}){\n// 点击文件链接或预览图标时的回调\nconsole.log('onPreview',file);}",
+        },
+        {
+          name: 'onRemove',
+          template:
+            "onRemove(file,${extParams}){\n// 点击移除文件时的回调\nconsole.log('onRemove',file);}",
+        },
+        {
+          name: 'onDownload',
+          template:
+            "onDownload(file,${extParams}){\n// 点击下载文件时的回调\nconsole.log('onDownload',file);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/crop-photo/snippe.ts

@@ -0,0 +1,12 @@
+export default [
+  {
+    title: '图片裁切',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/upload-1.png',
+    schema: {
+      componentName: 'CropPhoto',
+      props: {
+        cropShape: 'rect',
+      },
+    },
+  },
+];

package/lowcode/form-item-upload/meta.ts

@@ -182,6 +182,17 @@ export default {
           setter: {
             componentName: 'PisellMediaPresetTypeSetter',
           },
+          extraProps: {
+            setValue(target: any, values: any) {
+              const { value, options } = values;
+              const presetTypeString: any[] = [];
+              options.forEach((item: any) => {
+                presetTypeString.push(...(item.extensions || []).map((item: any) => `.${item}`));
+              });
+              target.getProps().setPropValue('presetTypeString', presetTypeString);
+              target.getProps().setPropValue('presetType', value);
+            },
+          },
         },
         {
           name: 'enableCustomType',

package/lowcode/pisell-anchor/meta.ts

@@ -0,0 +1,118 @@
+import { IPublicTypeComponentMetadata } from '@alilc/lowcode-types';
+import { uuid } from '../_utils/utils';
+
+import snippets from "./snippets";
+
+const AnchorMeta: IPublicTypeComponentMetadata = {
+  componentName: "PisellAnchor",
+  title: "锚点导航",
+  category: "导航",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "PisellAnchor",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'options',
+      title: { label: '选项列表', tip: '导航选项列表' },
+      propType: {
+        type: 'arrayOf',
+        value: {
+          type: 'shape',
+          value: [
+            {
+              name: 'id',
+              propType: 'string',
+              description: '选项ID',
+              defaultValue: '',
+            },
+            {
+              name: 'name',
+              propType: 'node',
+              description: '选项名称',
+              defaultValue: '',
+            }
+          ],
+        },
+      },
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'id',
+                    title: '选项ID',
+                    setter: 'StringSetter',
+                    isRequired: true
+                  },
+                  {
+                    name: 'name',
+                    title: '选项名称',
+                    setter: ['StringSetter', 'ExpressionSetter'],
+                    isRequired: true
+                  }
+                ],
+              },
+            },
+            initialValue: () => {
+              const id = uuid();
+              return {
+                id,
+                name: `选项${id}`,
+              };
+            },
+          },
+        },
+      },
+    },
+    {
+      name: 'tab',
+      title: { label: '当前选中项', tip: '当前选中的选项ID' },
+      propType: 'string',
+    },
+    {
+      name: 'className',
+      title: { label: '自定义类名', tip: '自定义类名' },
+      propType: 'string',
+    },
+    {
+      name: 'style',
+      title: { label: '自定义样式', tip: '自定义样式' },
+      propType: 'object',
+    }
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: "onChange",
+          template:
+            "onChange(key){\n// 选项切换时的回调\nconsole.log('onChange', key);}",
+        }
+      ],
+    },
+    component: {
+      isContainer: false,
+      nestingRule: {
+        childWhitelist: []
+      },
+    },
+  },
+};
+
+export default {
+  ...AnchorMeta,
+  snippets,
+};

package/lowcode/pisell-anchor/snippets.ts

@@ -0,0 +1,26 @@
+export default [
+  {
+    title: '锚点导航',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellAnchor',
+      props: {
+        options: [
+          {
+            id: '1',
+            name: '选项1'
+          },
+          {
+            id: '2',
+            name: '选项2'
+          },
+          {
+            id: '3',
+            name: '选项3'
+          }
+        ],
+        tab: '1'
+      }
+    }
+  }
+];

package/lowcode/pisell-card/meta.ts

@@ -1,3 +1,4 @@
+import { set } from "../_utils/utils";
 import snippets from "./snippets";
 
 export default {
@@ -18,12 +19,12 @@ export default {
   },
   experimental: { hideSelectTools: true },
   props: [
-    {
-      name: "title",
-      title: { label: "卡片标题", tip: "卡片标题" },
-      propType: { type: "oneOfType", value: ["string", "node"] },
-      setter: ['PisellI18nSetter', 'SlotSetter']
-    },
+    // {
+    //   name: "title",
+    //   title: { label: "卡片标题", tip: "卡片标题" },
+    //   propType: { type: "oneOfType", value: ["string", "node"] },
+    //   setter: ['PisellI18nSetter', 'SlotSetter']
+    // },
     // {
     //   name: 'actions',
     //   title: { label: '卡片操作组', tip: '卡片操作组，位置在卡片底部' },
@@ -46,22 +47,28 @@ export default {
       defaultValue: true,
     },
     {
-      name: "cover",
-      title: { label: "卡片封面", tip: "卡片封面" },
-      propType: "node",
-    },
-    {
-      name: "extra",
-      title: { label: "额外元素", tip: "卡片右上角的操作区域" },
-      propType: { type: "oneOfType", value: ["string", "node"] },
-      setter: ['PisellI18nSetter', 'SlotSetter']
-    },
-    {
-      name: "hoverable",
-      title: { label: "可浮起", tip: "鼠标移过时可浮起" },
+      name: "selected",
+      title: { label: "是否选中", tip: "是否选中" },
       propType: "bool",
       defaultValue: false,
     },
+    // {
+    //   name: "cover",
+    //   title: { label: "卡片封面", tip: "卡片封面" },
+    //   propType: "node",
+    // },
+    // {
+    //   name: "extra",
+    //   title: { label: "额外元素", tip: "卡片右上角的操作区域" },
+    //   propType: { type: "oneOfType", value: ["string", "node"] },
+    //   setter: ['PisellI18nSetter', 'SlotSetter']
+    // },
+    // {
+    //   name: "hoverable",
+    //   title: { label: "可浮起", tip: "鼠标移过时可浮起" },
+    //   propType: "bool",
+    //   defaultValue: false,
+    // },
     {
       name: "loading",
       title: {
@@ -72,17 +79,46 @@ export default {
       defaultValue: false,
     },
     {
-      name: "size",
-      title: { label: "尺寸", tip: "card 的尺寸" },
-      propType: { type: "oneOf", value: ["default", "small"] },
-      defaultValue: "default",
+      name: "disabled",
+      title: {
+        label: "是否禁用",
+        tip: "是否禁用该卡片",
+      },
+      propType: "bool",
+      defaultValue: false,
     },
     {
-      name: "type",
-      title: { label: "卡片类型", tip: "卡片类型" },
-      propType: { type: "oneOf", value: ["default", "inner"] },
-      defaultValue: "default",
+      name: "padding",
+      title: {
+        label: "内边距",
+        tip: "控制内边距大小 数值",
+      },
+      propType: "number",
+      setter: "NumberSetter",
+      defaultValue: 16
     },
+    {
+      name: "borderRadius",
+      title: {
+        label: "边框圆角",
+        tip: "控制四个圆角大小 数值",
+      },
+      propType: "number",
+      setter: "NumberSetter",
+      defaultValue: 12
+    }
+    // {
+    //   name: "size",
+    //   title: { label: "尺寸", tip: "card 的尺寸" },
+    //   propType: { type: "oneOf", value: ["default", "small"] },
+    //   defaultValue: "default",
+    // },
+    // {
+    //   name: "type",
+    //   title: { label: "卡片类型", tip: "卡片类型" },
+    //   propType: { type: "oneOf", value: ["default", "inner"] },
+    //   defaultValue: "default",
+    // },
   ],
   configure: {
     component: { isContainer: true },

package/lowcode/pisell-card/snippets.ts

@@ -4,6 +4,12 @@ export default [
     schema: {
       componentName: 'PisellCard',
       props: {
+        bordered: true,
+        selected: false,
+        loading: false,
+        padding: 16,
+        disabled: false,
+        borderRadius: 12
       },
     },
   },

package/lowcode/pisell-modal.information/meta.ts

@@ -82,6 +82,14 @@ export default {
       title: { label: "取消按钮配置", tip: "详见 antd Modal cancelButtonProps" },
       setter: [ "JSONSetter"],
     },
+    {
+      name: "destroyOnClose",
+      title: { label: "销毁子元素", tip: "关闭时销毁 Modal 里的子元素" },
+      propType: "bool",
+      defaultValue: false,
+      setter: "BoolSetter",
+      supportVariable: true,
+    },
   ],
   configure: {
     component: {

package/lowcode/pisell-qrcode/meta.ts

@@ -0,0 +1,46 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'PisellQrcode',
+  title: '二维码预览',
+  category: '通用',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "PisellQrcode",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'size',
+      title: '二维码尺寸',
+      propType: 'number'
+    }, {
+      name: 'platform',
+      title: 'PC端&移动端',
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            { title: 'PC端', value: 'pc' },
+            { title: 'h5', value: 'h5' },
+            { title: 'ipad', value: 'ipad' },
+          ],
+        },
+      },
+    },
+  ],
+  configure: {
+    component: { isContainer: true },
+    supports: {
+      style: true,
+      events: [],
+    },
+  },
+};

package/lowcode/pisell-qrcode/snippets.ts

@@ -0,0 +1,13 @@
+export default [
+  {
+    title: '二维码预览',
+    schema: {
+      componentName: 'PisellQrcode',
+      props: {
+        size: 200,
+        platform: 'pc',
+        value: 'https://www.pisell.com',
+      },
+    },
+  },
+];

package/lowcode/pisell-tooltip/meta.ts

@@ -29,7 +29,7 @@ export default {
             tip: 'title | 提示文字',
           },
           propType: { type: 'oneOfType', value: ['string', 'node'] },
-          setter: ['PisellI18nSetter', 'SlotSetter', 'VariableSetter'],
+          setter: ['PisellI18nSetter', 'SlotSetter', 'VariableSetter', 'StringSetter',],
         },
       ],
     },

package/lowcode/record-view/meta.ts

@@ -207,6 +207,14 @@ const DivMeta: ComponentMetadata = {
         },
       },
     },
+    {
+      name: "doubleList",
+      title: {
+        label: "双重列表",
+        tip: "doubleList | 双重列表",
+      },
+      propType: "bool",
+    },
     {
       name: "search",
       title: {
@@ -223,6 +231,18 @@ const DivMeta: ComponentMetadata = {
       },
       propType: "bool",
     },
+
+    {
+      name: "pcDetailModalWidth",
+      title: {
+        label: "详情弹窗展示_（PC端） 宽度值",
+        tip: "pcDetailModalWidth | 详情弹窗展示_(PC端) 宽度值",
+      },
+      propType: "number",
+      condition: (target: any) => target.getProps().getPropValue('pcDetailModalDisplay')
+    },
+
+
     {
       name: "padDetailModalDisplay",
       title: {

package/lowcode/section-footers/meta.ts

@@ -0,0 +1,66 @@
+import snippets from "./snippe";
+
+export default {
+    snippets,
+    componentName: "SectionFooters",
+    title: "底部内容区块",
+    category: "通用",
+    docUrl: "",
+    screenshot: "",
+    devMode: "proCode",
+    npm: {
+        package: "@pisell/materials",
+        version: "1.0.1",
+        exportName: "SectionFooters",
+        main: "src/index.tsx",
+        destructuring: true,
+        subName: "",
+    },
+    props: [
+        {
+            name: 'left',
+            title: { label: '左边插槽', tip: '左边插槽' },
+            propType: 'node',
+            setter: {
+                componentName: 'SlotSetter',
+                initialValue: {
+                    type: 'JSSlot',
+                    value: [],
+                },
+            },
+        }, {
+            name: 'middle',
+            title: { label: '中间插槽', tip: '中间插槽' },
+            propType: 'node',
+            setter: {
+                componentName: 'SlotSetter',
+                initialValue: {
+                    type: 'JSSlot',
+                    value: [],
+                },
+            },
+        }, {
+            name: 'right',
+            title: { label: '右边插槽', tip: '右边插槽' },
+            propType: 'node',
+            setter: {
+                componentName: 'SlotSetter',
+                initialValue: {
+                    type: 'JSSlot',
+                    value: [],
+                },
+            },
+        }],
+
+    supports: {
+        style: true,
+        events: [
+            {
+                name: 'onChange',
+                template:
+                    "onChange(event,${extParams}){\n// 选项变化时的回调函数\nconsole.log('onChange',event);}",
+            },
+        ]
+    },
+    "component": {}
+}

package/lowcode/section-footers/snippe.ts

@@ -0,0 +1,21 @@
+export default [
+    {
+        title: '底部内容区块',
+        schema: {
+            componentName: 'SectionFooters',
+            props: {
+                left: {
+                    type: "JSSlot",
+                    value: [],
+                },
+                middle: {
+                    type: "JSSlot",
+                    value: [],
+                },
+                right: {
+                    type: "JSSlot",
+                    value: [],
+                }
+            }
+        }
+    }]

package/lowcode/spin/meta.ts

@@ -27,6 +27,15 @@ export default {
       title: { label: '加载指示符', tip: '加载指示符' },
       propType: 'node',
     },
+    {
+      name: 'fullscreen',
+      title: {
+        label: '全屏',
+        tip: '是否全屏加载',
+      },
+      propType: 'bool',
+      defaultValue: false,
+    },
     {
       name: 'size',
       title: {

package/lowcode/tag/meta.ts

@@ -44,6 +44,12 @@ export default {
       title: { label: '关闭时的回调', tip: '关闭时的回调' },
       propType: 'func',
     },
+    {
+      name: 'bordered',
+      title: { label: '是否显示边框', tip: '是否显示边框' },
+      propType: 'bool',
+      defaultValue: true,
+    },
     // {
     //   name: 'visible',
     //   title: { label: '是否显示标签', tip: '是否显示标签' },