@pisell/materials 1.0.1 → 1.0.3

package/lowcode/modal/snippets.ts

@@ -0,0 +1,33 @@
+export default [
+  {
+    title: '普通型',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/modal-1.png',
+    schema: {
+      componentName: 'Modal',
+      props: {
+        title: 'Basic Modal',
+        okText: '确认',
+        cancelText: '取消',
+        open: true,
+        destroyOnClose: true,
+      },
+      children: [],
+    },
+  },
+  {
+    title: '隐藏底部',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/modal-2.png',
+    schema: {
+      componentName: 'Modal',
+      props: {
+        title: 'Basic Modal',
+        okText: '确认',
+        cancelText: '取消',
+        open: true,
+        footer: null,
+        destroyOnClose: true,
+      },
+      children: [],
+    },
+  },
+];

package/lowcode/page-header/meta.ts

@@ -0,0 +1,157 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'PageHeader',
+  title: '页头',
+  category: '导航',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "PageHeader",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'title',
+      title: { label: '标题', tip: '自定义标题文字' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'subTitle',
+      title: { label: '二级标题', tip: '自定义的二级标题文字' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'ghost',
+      title: { label: 'ghost风格', tip: 'ghost风格' },
+      propType: 'bool',
+      defaultValue: true,
+    },
+    // {
+    //   name: 'backIcon',
+    //   title: {
+    //     label: '返回按钮',
+    //     tip: '自定义 back icon ，如果为 false 不渲染 back icon',
+    //   },
+    //   propType: { type: 'oneOfType', value: ['node', 'bool'] },
+    // },
+    {
+      name: 'tags',
+      title: { label: 'tag 列表', tip: 'title 旁的 tag 列表' },
+      propType: 'node',
+    },
+    {
+      name: 'extra',
+      title: { label: '操作区', tip: '操作区，位于 title 行的行尾' },
+      propType: 'node',
+    },
+    {
+      name: 'footer',
+      title: { label: '页脚', tip: 'PageHeader 的页脚，一般用于渲染 TabBar' },
+      propType: 'node',
+    },
+    {
+      name: 'avatar',
+      title: { label: '头像', tip: '标题栏旁的头像' },
+      propType: 'object',
+      supportVariable: false,
+      setter: [
+        {
+          componentName: 'ObjectSetter',
+          props: {
+            config: {
+              items: [
+                {
+                  name: 'src',
+                  title: { label: '地址', tip: '头像地址' },
+                  setter: {
+                    componentName: 'StringSetter',
+                  },
+                },
+              ],
+            },
+          },
+        },
+        'JsonSetter',
+      ],
+    },
+    {
+      name: 'breadcrumb',
+      title: { label: '面包屑的配置', tip: '面包屑的配置' },
+      propType: 'object',
+      supportVariable: false,
+      setter: [
+        {
+          componentName: 'ObjectSetter',
+          props: {
+            config: {
+              items: [
+                {
+                  name: 'routes',
+                  title: { label: '路由栈信息', tip: '路由栈信息' },
+                  setter: {
+                    componentName: 'ArraySetter',
+                    props: {
+                      itemSetter: {
+                        componentName: 'ObjectSetter',
+                        initialValue: {
+                          path: 'path',
+                          breadcrumbName: 'pathName',
+                        },
+                        isRequired: true,
+                        props: {
+                          config: {
+                            items: [
+                              {
+                                name: 'path',
+                                defaultValue: 'path',
+                                title: { label: '路径', tip: 'path | 路径' },
+                                setter: 'StringSetter',
+                              },
+                              {
+                                name: 'breadcrumbName',
+                                defaultValue: 'pathName',
+                                title: {
+                                  label: '名称',
+                                  tip: 'breadcrumbName | 名称',
+                                },
+                                setter: 'StringSetter',
+                              },
+                            ],
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+        'JsonSetter',
+      ],
+    },
+    {
+      name: 'onBack',
+      title: { label: '返回按钮的点击事件', tip: '返回按钮的点击事件' },
+      propType: 'func',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onBack',
+          template: "onBack(${extParams}){\n// 返回按钮的点击事件\nconsole.log('onBack');}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/page-header/snippets.ts

@@ -0,0 +1,13 @@
+export default [
+  {
+    title: '页头',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/page-header-1.jpg',
+    schema: {
+      componentName: 'PageHeader',
+      props: {
+        title: 'Title',
+        subTitle: 'This is a subtitle',
+      },
+    },
+  },
+];

package/lowcode/pagination/meta.ts

@@ -0,0 +1,231 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Pagination',
+  title: '分页',
+  category: '导航',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Pagination",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      title: '数据',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'defaultPageSize',
+          title: {
+            label: '默认每页条数',
+            tip: 'defaultPageSize | 默认每页条数',
+          },
+          propType: 'number',
+          setter: 'NumberSetter',
+          defaultValue: 10,
+        },
+        {
+          name: 'pageSize',
+          title: { label: '每页条数', tip: 'pageSize | 每页条数' },
+          propType: 'number',
+          setter: 'NumberSetter',
+          defaultValue: 10,
+        },
+        {
+          name: 'total',
+          title: { label: '数据总数', tip: 'total | 数据总数' },
+          propType: 'number',
+          setter: 'NumberSetter',
+          defaultValue: 15,
+        },
+        {
+          name: 'defaultCurrent',
+          title: {
+            label: '默认当前页',
+            tip: 'defaultCurrent | 默认的当前页数',
+          },
+          propType: 'number',
+          setter: 'NumberSetter',
+          defaultValue: 1,
+        },
+        {
+          name: 'current',
+          title: { label: '当前页数', tip: 'current | 当前页数' },
+          propType: 'number',
+          setter: 'NumberSetter',
+          defaultValue: 1,
+        },
+      ],
+    },
+    {
+      title: '功能',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'disabled',
+          title: {
+            label: '是否禁用',
+            tip: 'disabled | 是否禁用',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'showSizeChanger',
+          title: {
+            label: '页数切换',
+            tip: 'showSizeChanger | 是否展示 pageSize 切换器',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'showQuickJumper',
+          title: {
+            label: '快速跳转',
+            tip: 'showQuickJumper | 是否可以快速跳转至某页',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'hideOnSinglePage',
+          title: {
+            label: '单页隐藏',
+            tip: 'hideOnSinglePage | 只有一页时是否隐藏分页器',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'showLessItems',
+          title: {
+            label: '显示较少页面',
+            tip: 'showLessItems | 是否显示较少页面内容',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'pageSizeOptions',
+          title: {
+            label: '可选分页数',
+            tip: 'pageSizeOptions | 指定 pageSize切换器 可选择的每页条数',
+          },
+          propType: 'object',
+          setter: 'JsonSetter',
+        },
+      ],
+    },
+    {
+      title: '外观',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'simple',
+          title: { label: '简单分页', tip: 'simple | 简单分页' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'size',
+          title: { label: '分页尺寸', tip: 'size | 分页尺寸' },
+          propType: {
+            type: 'oneOf',
+            value: ['default', 'small'],
+          },
+          setter: [
+            {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  {
+                    title: '默认',
+                    value: 'default',
+                  },
+                  {
+                    title: '小',
+                    value: 'small',
+                  },
+                ],
+              },
+            },
+            'VariableSetter',
+          ],
+          defaultValue: 'default',
+        },
+        {
+          name: 'showTotal',
+          title: {
+            label: '显示总数',
+            tip: 'showTotal | 用于显示数据总量和当前数据顺序',
+          },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'showTotal(total,range,${extParams}){\n// 用于格式化显示表格数据总量\nreturn `共 ${total} 条`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'showTitle',
+          title: {
+            label: '页码提示',
+            tip: 'showTitle | 是否显示原生 tooltip 页码提示',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'responsive',
+          title: {
+            label: '宽度自适应',
+            tip: 'responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+      ],
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(page,pageSize,${extParams}){\n// 页码或 pageSize 改变的回调\nconsole.log('onChange',page,pageSize);}",
+        },
+        {
+          name: 'onShowSizeChange',
+          template:
+            "onShowSizeChange(current,size,${extParams}){\n// pageSize 变化的回调\nconsole.log('onShowSizeChange',current,size);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/pagination/snippets.ts

@@ -0,0 +1,14 @@
+export default [
+  {
+    title: '分页',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/pagination-1.jpg',
+    schema: {
+      componentName: 'Pagination',
+      props: {
+        pageSize: 10,
+        total: 50,
+        current: 1,
+      },
+    },
+  },
+];

package/lowcode/popconfirm/meta.ts

@@ -0,0 +1,121 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Popconfirm',
+  title: '气泡确认框',
+  category: '反馈',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Popconfirm",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'title',
+      title: { label: '确认框内容', tip: '确认框内容' },
+      propType: { type: 'oneOfType', value: ['string', 'node', 'func'] },
+    },
+    {
+      name: 'okText',
+      title: { label: '确认按钮文字', tip: '确认按钮文字' },
+      propType: 'string',
+      setter: 'StringSetter',
+      supportVariable: true
+    },
+    {
+      name: 'cancelText',
+      title: { label: '取消按钮文字', tip: '取消按钮文字' },
+      propType: 'string',
+      setter: 'StringSetter',
+      supportVariable: true
+    },
+    {
+      name: 'onConfirm',
+      title: { label: '点击确认回调', tip: '点击确认回调' },
+      propType: 'func',
+    },
+    // {
+    //   name: 'okType',
+    //   title: { label: '确认按钮类型', tip: '确认按钮类型' },
+    //   propType: {
+    //     type: 'oneOf',
+    //     value: ['primary', 'ghost', 'dashed', 'danger', 'link', 'text'],
+    //   },
+    //   setter: {
+    //     componentName: 'SelectSetter',
+    //     props: {
+    //       options: [
+    //         {
+    //           title: '主按钮',
+    //           value: 'primary',
+    //         },
+    //         {
+    //           title: '虚线框按钮',
+    //           value: 'dashed',
+    //         },
+    //         {
+    //           title: '危险按钮',
+    //           value: 'danger',
+    //         },
+    //         {
+    //           title: '链接按钮',
+    //           value: 'link',
+    //         },
+    //         {
+    //           title: '类文本按钮',
+    //           value: 'text',
+    //         },
+    //       ],
+    //     },
+    //   },
+    // },
+    // {
+    //   name: 'okButtonProps',
+    //   title: { label: 'ok按钮props', tip: 'ok按钮props' },
+    //   propType: 'object',
+    // },
+    // {
+    //   name: 'cancelButtonProps',
+    //   title: { label: 'cancel按钮props', tip: 'cancel按钮props' },
+    //   propType: 'object',
+    // },
+    // {
+    //   name: 'onCancel',
+    //   title: { label: '点击取消回调', tip: '点击取消回调' },
+    //   propType: 'func',
+    // },
+    // {
+    //   name: 'icon',
+    //   title: { label: '自定义Icon图标', tip: '自定义弹出气泡Icon图标' },
+    //   propType: 'node',
+    // },
+    // {
+    //   name: 'disabled',
+    //   title: {
+    //     label: '是否禁用',
+    //     tip: '是否为禁用状态',
+    //   },
+    //   propType: 'bool',
+    //   defaultValue: false,
+    // },
+  ],
+  configure: {
+    component: { isContainer: true },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onConfirm',
+          template: "onConfirm(${extParams}){\n// 点击确认的回调\nconsole.log('onConfirm');}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/popconfirm/snippets.ts

@@ -0,0 +1,21 @@
+export default [
+  {
+    title: '气泡确认框',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/popconfirm-1.jpg',
+    schema: {
+      componentName: 'Popconfirm',
+      props: {
+        title: '确定删除?',
+        okType: 'primary',
+        okText: '确定',
+        cancelText: '取消',
+      },
+      children: {
+        componentName: 'Button',
+        props: {
+          children: '删除',
+        },
+      },
+    },
+  },
+];