@pisell/materials 2.2.41 → 2.2.43

package/lowcode/pisell-image-carousels/meta.ts

@@ -0,0 +1,143 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'PisellImageCarousels',
+  title: '轮播图',
+  category: '数据展示',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'PisellImageCarousels',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  props: [
+    {
+      title: '数据源',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'dataSource',
+          title: { label: '列表数据源', tip: '列表数据源' },
+          propType: { type: 'arrayOf', value: 'any' },
+          setter: ['JsonSetter', 'VariableSetter'],
+        },
+        {
+          name: 'rowKey',
+          title: {
+            label: '行Key',
+            tip: 'rowKey | 当 renderItem 自定义渲染列表项有效时，自定义每一行的 key 的获取方式',
+          },
+          propType: {
+            type: 'oneOfType',
+            value: ['string', 'function'],
+          },
+          defaultValue: 'id',
+          setter: [
+            'StringSetter',
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'rowKey(item,${extParams}){\n// 自定义每一行的 key\nreturn `key-${item.id}`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+      ],
+    },
+    {
+      title: '轮播设置',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'showDots',
+          title: { label: '显示翻页点', tip: 'showDots | 显示翻页点' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: true,
+        },
+        {
+          name: 'showArrows',
+          title: { label: '显示箭头', tip: 'showArrows | 显示箭头' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: true,
+        },
+        {
+          name: 'autoplay',
+          title: { label: '自动切换', tip: 'autoplay | 自动切换' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: true,
+        },
+        {
+          name: 'interval',
+          title: { label: '切换的间隔 (毫秒)', tip: 'interval | 切换的间隔 (毫秒)' },
+          setter: {
+            componentName: "NumberSetter",
+            props: {
+              min: 0,
+            },
+          },
+          defaultValue: 3000,
+        },
+      ],
+    },
+    {
+      title: '图片设置',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'borderRadius',
+          title: { label: '圆角度数', tip: 'borderRadius | 圆角度数' },
+          setter: {
+            componentName: "NumberSetter",
+            props: {
+              min: 0,
+            },
+          },
+          defaultValue: 8,
+        },
+        {
+          name: 'width',
+          title: { label: '图片宽度', tip: 'width | 图片宽度' },
+          setter: {
+            componentName: "NumberSetter",
+            props: {
+              min: 0,
+            },
+          },
+          defaultValue: 640,
+        },
+        {
+          name: 'height',
+          title: { label: '图片高度', tip: 'height | 图片高度' },
+          setter: {
+            componentName: "NumberSetter",
+            props: {
+              min: 0,
+            },
+          },
+          defaultValue: 400,
+        },
+      ],
+    },
+  ],
+
+  configure: {
+    supports: {
+      style: true,
+      events: [],
+    },
+  },
+};

package/lowcode/pisell-image-carousels/snippets.ts

@@ -0,0 +1,20 @@
+export default [
+  {
+    title: '轮播图',
+    schema: {
+      componentName: 'PisellImageCarousels',
+      props: {
+        dataSource: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          'https://gw.alicdn.com/bao/uploaded/i1/1115405069/O1CN01IYXdQb1nJebqPtA8S_!!1115405069.jpg_.webp'
+        ],
+        showDots: true,
+        showArrows: true,
+        autoplay: true,
+        interval: 3000,
+        borderRadius: 8,
+        height: 400,
+        width: 640,
+      },
+    },
+  },
+];

package/lowcode/pisell-list01/meta.ts

@@ -0,0 +1,74 @@
+import snippets from "./snippets";
+
+export default {
+  snippets,
+  componentName: "PisellList01",
+  title: "列表1号",
+  category: "Layout",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "PisellList01",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      title: '数据源',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'dataSource',
+          title: { label: '列表数据源', tip: 'dataSource | 列表数据源' },
+          propType: { type: 'arrayOf', value: 'any' },
+          setter: ['JsonSetter', 'VariableSetter'],
+        },
+        {
+          name: 'rowKey',
+          title: {
+            label: '行Key',
+            tip: 'rowKey | 当 renderItem 自定义渲染列表项有效时，自定义每一行的 key 的获取方式',
+          },
+          propType: {
+            type: 'oneOfType',
+            value: ['string', 'function'],
+          },
+          defaultValue: 'id',
+          setter: [
+            'StringSetter',
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'rowKey(item,${extParams}){\n// 自定义每一行的 key\nreturn `key-${item.id}`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+      ],
+    },
+    {
+      name: 'showSearch',
+      title: { label: '显示搜索', tip: 'showSearch | 显示搜索' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'showCategory',
+      title: { label: '显示分类', tip: 'showCategory | 显示分类' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+      ],
+    },
+  },
+};

package/lowcode/pisell-list01/snippets.ts

@@ -0,0 +1,35 @@
+export default [
+  {
+    title: '列表1号',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/avatar-1.jpg',
+    schema: {
+      componentName: 'PisellList01',
+      props: {
+        showSearch: true,
+        showCategory: true,
+        dataSource: [
+          {
+            key: '1',
+            title: '分类1',
+            href: '#1',
+            children: [{
+              id: 1,
+              name: '产品1',
+              price: 100,
+            }]
+          },
+          {
+            key: '2',
+            title: '分类2',
+            href: '#2',
+            children: [{
+              id: 2,
+              name: '产品2',
+              price: 100,
+            }]
+          }
+        ]
+      },
+    },
+  },
+];

package/lowcode/pisell-section-headers/meta.ts

@@ -0,0 +1,91 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'PisellSectionHeaders',
+  title: '顶部内容区块',
+  category: '数据展示',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'PisellSectionHeaders',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  props: [
+    // {
+    //   title: '基础',
+    //   display: 'block',
+    //   type: 'group',
+    //   items: [
+    //     {
+    //       name: 'background',
+    //       title: { label: '背景色', tip: 'background | 背景色' },
+    //       propType: 'string',
+    //       setter: 'ColorSetter',
+    //     },
+    //   ],
+    // },
+    {
+      name: 'backNode',
+      title: { label: '返回区域', tip: 'backNode | 返回区域' },
+      propType: 'node',
+      setter: {
+        componentName: 'SlotSetter',
+        initialValue: {
+          type: 'JSSlot',
+          value: [],
+        },
+      },
+
+    },
+    {
+      name: 'centerNode',
+      title: { label: '中间区域', tip: 'centerNode | 中间区域' },
+      propType: 'node',
+      setter: {
+        componentName: 'SlotSetter',
+        initialValue: {
+          type: 'JSSlot',
+          value: [],
+        },
+      },
+    },
+    {
+      name: 'actionNode',
+      title: { label: '操作区域', tip: 'actionNode | 操作区域' },
+      propType: 'node',
+      setter: {
+        componentName: 'SlotSetter',
+        initialValue: {
+          type: 'JSSlot',
+          value: [],
+        },
+      },
+    },
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+    },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onBack',
+          template:
+            "onBack(value,${extParams}){\n// 返回事件的回调\nconsole.log('onBack',value);}",
+        },
+        {
+          name: 'onAction',
+          template:
+            "onAction(value,${extParams}){\n// 右侧操作事件的回调\nconsole.log('onAction',value);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/pisell-section-headers/snippets.ts

@@ -0,0 +1,22 @@
+export default [
+  {
+    title: '顶部内容区块',
+    schema: {
+      componentName: 'PisellSectionHeaders',
+      props: {
+        backNode: {
+          type: "JSSlot",
+          value: [],
+        },
+        centerNode: {
+          type: "JSSlot",
+          value: [],
+        },
+        actionNode: {
+          type: "JSSlot",
+          value: [],
+        },
+      },
+    },
+  },
+];

package/lowcode/pisell-view-grid/meta.ts

@@ -0,0 +1,167 @@
+import snippets from "./snippets";
+
+export default {
+  snippets,
+  componentName: "PisellViewGrid",
+  title: "栅格视图",
+  category: "数据展示",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "PisellViewGrid",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      title: '数据源',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'dataSource',
+          title: { label: '列表数据源', tip: 'dataSource | 列表数据源' },
+          propType: { type: 'arrayOf', value: 'any' },
+          setter: ['JsonSetter', 'VariableSetter'],
+        },
+        {
+          name: 'loading',
+          title: {
+            label: '是否加载中',
+            tip: 'loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位',
+          },
+          propType: 'bool',
+          defaultValue: false,
+          setter: ['BoolSetter', 'VariableSetter'],
+        },
+        {
+          name: 'rowKey',
+          title: {
+            label: '行Key',
+            tip: 'rowKey | 当 renderItem 自定义渲染列表项有效时，自定义每一行的 key 的获取方式',
+          },
+          propType: {
+            type: 'oneOfType',
+            value: ['string', 'function'],
+          },
+          defaultValue: 'id',
+          setter: [
+            'StringSetter',
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'rowKey(item,${extParams}){\n// 自定义每一行的 key\nreturn `key-${item.id}`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+      ],
+    },
+    {
+      title: '栅格  ',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'columns',
+          title: { label: '列数', tip: 'columns | 列数' },
+          propType: 'number',
+          setter: 'NumberSetter',
+          defaultValue: 3,
+        },
+        {
+          name: 'horizontalGap',
+          title: { label: '水平间隔', tip: 'horizontalGap | 栅格水平间隔，单位为像素(px)' },
+          propType: 'number',
+          setter: {
+            componentName: 'NumberSetter', props: {
+              min: 0,
+            },
+          },
+          defaultValue: 10,
+        },
+        {
+          name: 'verticalGap',
+          title: { label: '垂直间隔', tip: 'verticalGap | 栅格垂直间隔，单位为像素(px)' },
+          propType: 'number',
+          setter: {
+            componentName: 'NumberSetter',
+            props: {
+              min: 0,
+            },
+          },
+          defaultValue: 10,
+        },
+        {
+          name: 'singleRow',
+          title: { label: '一行展示', tip: 'singleRow | 一行展示' },
+          propType: 'boolean',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+      ]
+    },
+    {
+      title: '扩展',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'renderItem',
+          title: {
+            label: '渲染函数',
+            tip: 'renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项',
+          },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'SlotSetter',
+              title: '渲染函数插槽',
+              initialValue: {
+                type: 'JSSlot',
+                params: ['item'],
+                value: [
+                  {
+                    componentName: 'List.Item',
+                    props: {},
+                    children: {
+                      componentName: 'Typography.Text',
+                      props: {
+                        children: {
+                          type: 'JSExpression',
+                          value: 'this.item.text',
+                        },
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template: 'renderItem(item,${extParams}){\n// 自定义渲染列表项\nreturn `item`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+      ],
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [],
+    },
+    component: {
+      isContainer: true,
+    },
+  },
+};

package/lowcode/pisell-view-grid/snippets.ts

@@ -0,0 +1,54 @@
+export default [
+  {
+    title: '栅格视图',
+    schema: {
+      componentName: 'PisellViewGrid',
+      props: {
+        dataSource: [
+          {
+            id: 1,
+            text: "Racing car sprays burning fuel into crowd.",
+          },
+          {
+            id: 2,
+            text: "Japanese princess to wed commoner.",
+          },
+          {
+            id: 3,
+            text: "Australian walks 100km after outback crash.",
+          },
+          {
+            id: 4,
+            text: "Man charged over missing wedding girl.",
+          },
+          {
+            id: 5,
+            text: "Los Angeles battles huge wildfires.",
+          },
+        ],
+        columns: 3,
+        horizontalGap: 10,
+        verticalGap: 10,
+        renderItem: {
+          type: "JSSlot",
+          params: ["item"],
+          value: [
+            {
+              componentName: "List.Item",
+              props: {},
+              children: {
+                componentName: "Typography.Text",
+                props: {
+                  children: {
+                    type: "JSExpression",
+                    value: "this.item.text",
+                  },
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+];

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: [],
+                }
+            }
+        }
+    }]