@pisell/materials 1.0.1 → 1.0.3

package/lowcode/divider/meta.ts

@@ -0,0 +1,70 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: "Divider",
+  title: "分割线",
+  category: "布局",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Divider",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        name: "className",
+        title: { label: "分割线样式类", tip: "分割线样式类" },
+        propType: "string",
+      },
+      {
+        name: "dashed",
+        title: { label: "是否虚线", tip: "是否虚线" },
+        propType: "bool",
+        defaultValue: false,
+      },
+      {
+        name: "orientation",
+        title: { label: "标题位置", tip: "分割线标题的位置" },
+        propType: { type: "oneOf", value: ["left", "right", "center"] },
+      },
+      {
+        name: "orientationMargin",
+        title: {
+          label: "标题边距",
+          tip: "标题和最近 left/right 边框之间的距离，去除了分割线，同时 orientation 必须为 left 或 right",
+        },
+        propType: { type: "oneOfType", value: ["string", "number"] },
+      },
+      {
+        name: "style",
+        title: { label: "分割线样式对象", tip: "分割线样式对象" },
+        propType: "object",
+      },
+      {
+        name: "type",
+        title: { label: "方向", tip: "水平还是垂直类型" },
+        propType: { type: "oneOf", value: ["horizontal", "vertical"] },
+      },
+      {
+        name: "plain",
+        title: {
+          label: "普通正文样式",
+          tip: "文字是否显示为普通正文样式",
+        },
+        propType: "bool",
+        defaultValue: false,
+      },
+    ],
+    component: {
+      isContainer: true,
+    },
+    supports: { style: true, className: true },
+  },
+};

package/lowcode/divider/snippets.ts

@@ -0,0 +1,27 @@
+export default [
+  {
+    title: '分割线',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/divider-1.png',
+    schema: {
+      componentName: 'Divider',
+      props: {},
+    },
+  },
+  {
+    title: '带文字分割线',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/divider-2.png',
+    schema: {
+      componentName: 'Divider',
+      props: {
+        children: [
+          {
+            componentName: 'Typography.Text',
+            props: {
+              children: '分割文字',
+            },
+          },
+        ],
+      },
+    },
+  },
+];

package/lowcode/drawer/meta.ts

@@ -0,0 +1,420 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Drawer',
+  title: '抽屉',
+  category: '反馈',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Drawer",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        title: '基础',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'open',
+            title: { label: '是否可见', tip: 'open | Drawer 是否可见' },
+            propType: 'bool',
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'title',
+            title: { label: '标题', tip: 'title | 标题' },
+            propType: { type: 'oneOfType', value: ['string', 'node'] },
+            setter: [
+              'StringSetter',
+              {
+                componentName: 'SlotSetter',
+                title: '标题插槽',
+                initialValue: {
+                  type: 'JSSlot',
+                  value: [],
+                },
+              },
+              'VariableSetter',
+            ],
+          },
+        ],
+      },
+      {
+        title: '外观',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'placement',
+            title: { label: '位置', tip: 'placement | 抽屉的显示位置' },
+            propType: {
+              type: 'oneOf',
+              value: ['top', 'right', 'bottom', 'left'],
+            },
+            defaultValue: 'right',
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [
+                  {
+                    title: '上方',
+                    value: 'top',
+                  },
+                  {
+                    title: '右侧',
+                    value: 'right',
+                  },
+                  {
+                    title: '下方',
+                    value: 'bottom',
+                  },
+                  {
+                    title: '左侧',
+                    value: 'left',
+                  },
+                ],
+              },
+            },
+          },
+          {
+            name: 'size',
+            title: { label: '大小', tip: 'size | 抽屉的大小' },
+            propType: { type: 'oneOf', value: ['default', 'large'] },
+            defaultValue: 'default',
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  {
+                    title: '默认',
+                    value: 'default',
+                  },
+                  {
+                    title: '超大',
+                    value: 'large',
+                  },
+                ],
+              },
+            },
+          },
+          {
+            name: 'width',
+            title: { label: '宽度', tip: 'width | 宽度' },
+            propType: { type: 'oneOfType', value: ['string', 'number'] },
+            setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
+          },
+          {
+            name: 'height',
+            title: {
+              label: '高度',
+              tip: 'height | 高度, 在 placement 为 top 或 bottom 时使用',
+            },
+            propType: { type: 'oneOfType', value: ['string', 'number'] },
+            setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
+          },
+          {
+            name: 'zIndex',
+            title: { label: 'z-index', tip: '设置 Drawer 的 `z-index`' },
+            propType: 'number',
+            setter: 'NumberSetter',
+          },
+        ],
+      },
+      {
+        title: '功能',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'mask',
+            title: { label: '显示遮罩', tip: 'mask | 是否显示遮罩' },
+            propType: 'bool',
+            defaultValue: true,
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'maskClosable',
+            title: {
+              label: '点击遮罩关闭',
+              tip: 'maskClosable | 点击遮罩是否关闭抽屉',
+            },
+            propType: 'bool',
+            defaultValue: true,
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'autoFocus',
+            title: {
+              label: '自动获得焦点',
+              tip: 'autoFocus | 抽屉展开后是否将焦点切换至其 Dom 节点',
+            },
+            propType: 'bool',
+            defaultValue: true,
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'keyboard',
+            title: {
+              label: '键盘Esc关闭',
+              tip: 'keyboard | 是否支持键盘按 Esc 关闭',
+            },
+            propType: 'bool',
+            defaultValue: true,
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'destroyOnClose',
+            title: {
+              label: '关闭时销毁',
+              tip: 'destroyOnClose | 关闭时销毁 Drawer 里的子元素',
+            },
+            propType: 'bool',
+            defaultValue: false,
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'closable',
+            title: {
+              label: '关闭按钮',
+              tip: 'closable | 是否显示左上角的关闭按钮',
+            },
+            propType: 'bool',
+            defaultValue: true,
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'forceRender',
+            title: { label: '预渲染', tip: 'forceRender | 预渲染 Drawer 内元素' },
+            propType: 'bool',
+            defaultValue: false,
+            setter: 'BoolSetter',
+          },
+        ],
+      },
+      {
+        title: '插槽扩展',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'closeIcon',
+            title: { label: '关闭图标', tip: 'closeIcon | 自定义关闭图标' },
+            propType: 'node',
+            setter: {
+              componentName: 'SlotSetter',
+              title: '关闭图标插槽',
+              initialValue: {
+                type: 'JSSlot',
+                value: [
+                  {
+                    componentName: 'Icon',
+                    props: {
+                      type: 'CloseOutlined',
+                      size: 16
+                    },
+                  },
+                ],
+              },
+            },
+          },
+          {
+            name: 'extra',
+            title: { label: '操作区域', tip: 'extra | 抽屉右上角的操作区域' },
+            propType: 'node',
+            setter: {
+              componentName: 'SlotSetter',
+              title: '操作区域插槽',
+              initialValue: {
+                type: 'JSSlot',
+                value: [],
+              },
+            },
+          },
+          {
+            name: 'footer',
+            title: { label: '抽屉的页脚', tip: 'footer | 抽屉的页脚' },
+            propType: 'node',
+            setter: {
+              componentName: 'SlotSetter',
+              title: '抽屉页脚插槽',
+              initialValue: {
+                type: 'JSSlot',
+                value: [],
+              },
+            },
+          },
+        ],
+      },
+      {
+        title: '其它',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'className',
+            title: { label: '容器类名', tip: 'className | 对话框外层容器的类名' },
+            propType: 'string',
+            setter: 'StringSetter',
+          },
+          {
+            name: 'drawerStyle',
+            title: '弹出层样式',
+            type: 'group',
+            extraProps: {
+              display: 'entry',
+            },
+            items: [
+              {
+                name: 'drawerStyle',
+                title: {
+                  label: '样式设置',
+                  tip: 'drawerStyle | 用于设置 Drawer 弹出层的样式',
+                },
+                setter: 'StyleSetter',
+                extraProps: {
+                  display: 'block',
+                },
+              },
+            ],
+          },
+          {
+            name: 'contentWrapperStyle',
+            title: '包裹层样式',
+            type: 'group',
+            extraProps: {
+              display: 'entry',
+            },
+            items: [
+              {
+                name: 'contentWrapperStyle',
+                title: {
+                  label: '样式设置',
+                  tip: 'contentWrapperStyle | 可用于设置 Drawer 包裹内容部分的样式',
+                },
+                setter: 'StyleSetter',
+                extraProps: {
+                  display: 'block',
+                },
+              },
+            ],
+          },
+          {
+            name: 'headerStyle',
+            title: '头部样式',
+            type: 'group',
+            extraProps: {
+              display: 'entry',
+            },
+            items: [
+              {
+                name: 'headerStyle',
+                title: {
+                  label: '样式设置',
+                  tip: 'headerStyle | 用于设置 Drawer 头部的样式',
+                },
+                setter: 'StyleSetter',
+                extraProps: {
+                  display: 'block',
+                },
+              },
+            ],
+          },
+          {
+            name: 'bodyStyle',
+            title: '内容样式',
+            type: 'group',
+            extraProps: {
+              display: 'entry',
+            },
+            items: [
+              {
+                name: 'bodyStyle',
+                title: {
+                  label: '样式设置',
+                  tip: 'bodyStyle | 可用于设置 Drawer 内容部分的样式',
+                },
+                setter: 'StyleSetter',
+                extraProps: {
+                  display: 'block',
+                },
+              },
+            ],
+          },
+          {
+            name: 'footerStyle',
+            title: '页脚样式',
+            type: 'group',
+            extraProps: {
+              display: 'entry',
+            },
+            items: [
+              {
+                name: 'footerStyle',
+                title: {
+                  label: '样式设置',
+                  tip: 'footerStyle | 抽屉页脚部件的样式',
+                },
+                setter: 'StyleSetter',
+                extraProps: {
+                  display: 'block',
+                },
+              },
+            ],
+          },
+          {
+            name: 'maskStyle',
+            title: '遮罩样式',
+            type: 'group',
+            extraProps: {
+              display: 'entry',
+            },
+            items: [
+              {
+                name: 'maskStyle',
+                title: {
+                  label: '样式设置',
+                  tip: 'maskStyle | 遮罩样式',
+                },
+                setter: 'StyleSetter',
+                extraProps: {
+                  display: 'block',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    component: {
+      isContainer: true,
+      isModal: true,
+      nestingRule: {
+        parentWhitelist: ['Page', 'Component'],
+      },
+    },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onClose',
+          template:
+            "onClose(event,${extParams}){\n// 点击遮罩层或右上角叉或取消按钮的回调\nconsole.log('onClose',event);}",
+        },
+        {
+          name: 'afterOpenChange',
+          template:
+            "afterOpenChange(open,${extParams}){\n// 切换抽屉时动画结束后的回调\nconsole.log('afterOpenChange',open);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/drawer/snippets.ts

@@ -0,0 +1,40 @@
+export default [
+  {
+    title: '侧边抽屉',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/drawer-1.png',
+    schema: {
+      componentName: 'Drawer',
+      props: {
+        title: 'Basic Drawer',
+        open: true,
+        placement: 'right',
+        destroyOnClose: true,
+      },
+      children: [
+        {
+          componentName: 'Typography.Paragraph',
+          children: 'Some contents...',
+        },
+      ],
+    },
+  },
+  {
+    title: '底部抽屉',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/drawer-2.png',
+    schema: {
+      componentName: 'Drawer',
+      props: {
+        title: 'Basic Drawer',
+        open: true,
+        placement: 'bottom',
+        destroyOnClose: true,
+      },
+      children: [
+        {
+          componentName: 'Typography.Paragraph',
+          children: 'Some contents...',
+        },
+      ],
+    },
+  },
+];