@pisell/materials 1.0.1 → 1.0.3

package/lowcode/cascader/snippets.ts

@@ -0,0 +1,46 @@
+export default [
+  {
+    title: '级联选择',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/cascader-1.png',
+    schema: {
+      componentName: 'Cascader',
+      props: {
+        options: [
+          {
+            value: 'zhejiang',
+            label: 'Zhejiang',
+            children: [
+              {
+                value: 'hangzhou',
+                label: 'Hangzhou',
+                children: [
+                  {
+                    value: 'xihu',
+                    label: 'West Lake',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            value: 'jiangsu',
+            label: 'Jiangsu',
+            children: [
+              {
+                value: 'nanjing',
+                label: 'Nanjing',
+                children: [
+                  {
+                    value: 'zhonghuamen',
+                    label: 'Zhong Hua Men',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        placeholder: '请选择',
+      },
+    },
+  },
+];

package/lowcode/checkbox/meta.ts

@@ -0,0 +1,85 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Checkbox',
+  title: '多选框',
+  category: '表单',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Checkbox",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        name: 'children',
+        title: { label: '内容', tip: '内容' },
+        propType: 'string',
+        setter: 'StringSetter',
+        supportVariable: true
+      },
+      {
+        name: 'autoFocus',
+        title: { label: '自动聚焦', tip: '自动获取焦点' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true
+      },
+      {
+        name: 'checked',
+        title: { label: '当前值', tip: '指定当前是否选中' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true
+      },
+      {
+        name: 'defaultChecked',
+        title: { label: '默认值', tip: '初始是否选中' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true
+      },
+      {
+        name: 'disabled',
+        title: { label: '是否禁用', tip: '是否为禁用状态' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true
+      },
+      {
+        name: 'indeterminate',
+        title: { label: '不确定状态', tip: 'indeterminate状态' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true
+      },
+      {
+        name: 'onChange',
+        title: { label: '变化时回调函数', tip: '变化时回调函数' },
+        propType: 'func',
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(event,${extParams}){\n// 变化时回调函数\nconsole.log('onChange', event);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/checkbox/snippets.ts

@@ -0,0 +1,35 @@
+export default [
+  {
+    title: '多选框',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/checkbox-1.png',
+    schema: {
+      componentName: 'Checkbox',
+      props: {
+        children: 'Checkbox',
+      },
+    },
+  },
+  {
+    title: '多选框组',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/checkbox-group-1.png',
+    schema: {
+      componentName: 'Checkbox.Group',
+      props: {
+        options: [
+          {
+            label: 'A',
+            value: 'A',
+          },
+          {
+            label: 'B',
+            value: 'B',
+          },
+          {
+            label: 'C',
+            value: 'C',
+          },
+        ],
+      },
+    },
+  },
+];

package/lowcode/checkbox.group/meta.ts

@@ -0,0 +1,150 @@
+import { uuid } from '../_utils/utils';
+
+export default {
+  componentName: 'Checkbox.Group',
+  title: '多选框组',
+  category: '表单',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Checkbox",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "Group",
+  },
+  configure: {
+    props: [
+      {
+        name: 'defaultValue',
+        title: { label: '默认值', tip: '默认选中值' },
+        propType: { type: 'arrayOf', value: 'string' },
+        defaultValue: [],
+        setter: {
+          componentName: 'ArraySetter',
+          props: {
+            itemSetter: {
+              componentName: 'StringSetter',
+            }
+          }
+        },
+        supportVariable: true
+      },
+      {
+        name: 'value',
+        title: { label: '当前值', tip: '当前选中的选项' },
+        propType: { type: 'arrayOf', value: 'string' },
+        setter: {
+          componentName: 'ArraySetter',
+          props: {
+            itemSetter: {
+              componentName: 'StringSetter',
+            }
+          }
+        },
+        supportVariable: true
+      },
+      {
+        name: 'disabled',
+        title: { label: '是否禁用', tip: '是否为禁用状态' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true
+      },
+      {
+        name: 'name',
+        title: { label: 'name属性', tip: 'name属性' },
+        propType: 'string',
+        setter: 'StringSetter',
+        supportVariable: true
+      },
+      {
+        name: 'options',
+        title: { label: '指定可选项', tip: '指定可选项' },
+        propType: {
+          type: 'arrayOf',
+          value: {
+            type: 'shape',
+            value: [
+              {
+                name: 'label',
+                description: '选项名',
+                propType: 'string',
+                defaultValue: '选项名',
+              },
+              {
+                name: 'value',
+                description: '选项值',
+                propType: 'string',
+                defaultValue: '选项值',
+              },
+              {
+                name: 'disabled',
+                description: '是否禁用',
+                propType: 'bool',
+                defaultValue: false,
+              },
+            ],
+          },
+        },
+        setter: {
+          componentName: 'ArraySetter',
+          props: {
+            itemSetter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'label',
+                      title: '选项名',
+                      setter: 'StringSetter',
+                      isRequired: true
+                    },
+                    {
+                      name: 'value',
+                      title: '选项值',
+                      setter: 'StringSetter',
+                      isRequired: true
+                    },
+                    {
+                      name: 'disabled',
+                      title: '是否禁用',
+                      setter: 'BoolSetter',
+                    },
+                  ],
+                },
+              },
+              initialValue: () => {
+                return {
+                  label: '选项名',
+                  value: uuid(),
+                  disabled: false,
+                };
+              },
+            },
+          },
+        },
+        supportVariable: true
+      },
+      {
+        name: 'onChange',
+        title: { label: '变化时回调函数', tip: '变化时回调函数' },
+        propType: 'func',
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(checkedValue,${extParams}){\n// 变化时回调函数\nconsole.log('onChange', checkedValue);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/collapse/meta.ts

@@ -0,0 +1,221 @@
+import { uuid } from '../_utils/utils';
+
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Collapse',
+  title: '折叠面板',
+  category: '数据展示',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Collapse",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        name: 'bordered',
+        title: { label: '显示边框', tip: '带边框风格的折叠面板' },
+        propType: 'bool',
+        defaultValue: true,
+        setter: 'BoolSetter',
+        supportVariable: true
+      },
+      {
+        name: 'accordion',
+        title: { label: '手风琴模式', tip: '手风琴模式' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true
+      },
+      {
+        name: 'collapsible',
+        title: '可折叠触发区域',
+        propType: {
+          type: 'oneOf',
+          value: ['-', 'header', 'disabled'],
+        },
+      },
+      // {
+      //   name: 'expandIcon',
+      //   title: { label: '自定义切换图标', tip: '自定义切换图标' },
+      //   propType: 'func',
+      // },
+      {
+        name: 'expandIconPosition',
+        title: { label: '图标位置', tip: '设置图标位置' },
+        propType: { type: 'oneOf', value: ['left', 'right'] },
+      },
+      {
+        name: 'destroyInactivePanel',
+        title: { label: '隐藏时销毁', tip: '销毁折叠隐藏的面板' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true
+      },
+      {
+        name: 'ghost',
+        title: { label: '透明无边框', tip: '使折叠面板透明且无边框' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true
+      },
+      {
+        name: 'collapses',
+        title: '折叠项',
+        setter: {
+          componentName: 'ArraySetter',
+          props: {
+            itemSetter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'key',
+                      title: 'key',
+                      setter: 'StringSetter',
+                      initialValue: (val) => val || uuid()
+                    },
+                    {
+                      name: 'header',
+                      title: '面板头内容',
+                      setter: 'StringSetter',
+                      initialValue: '折叠项'
+                    },
+                  ],
+                },
+              },
+              initialValue: () => {
+                return {
+                  key: uuid(),
+                  header: '折叠项',
+                  showArrow: true,
+                  collapsible: undefined,
+                  forceRender: false,
+                };
+              },
+            },
+          },
+        },
+        extraProps: {
+          getValue(target, fieldValue) {
+            console.log('getValue', target.node.children.length);
+            const map = target.node.children.map((child) => {
+              const key = child.getPropValue('key') ? String(child.getPropValue('key')) : child.id;
+              return {
+                key,
+                header: child.getPropValue('header'),
+                showArrow: child.getPropValue('showArrow'),
+                collapsible: child.getPropValue('collapsible'),
+                forceRender: child.getPropValue('forceRender'),
+              };
+            });
+            return map;
+          },
+          setValue(target, value) {
+            const { node } = target;
+            const map = {};
+
+            // console.log('setValue',value);
+
+            if (!Array.isArray(value)) {
+              value = [];
+            }
+            value.forEach((item) => {
+              const tabItem = Object.assign({}, item);
+              map[item.key] = tabItem;
+            });
+
+            node.children.mergeChildren(
+              (child) => {
+                const key = String(child.getPropValue('key'));
+                if (Object.hasOwnProperty.call(map, key)) {
+                  child.setPropValue('header', map[key].header);
+                  child.setPropValue('showArrow', map[key].showArrow);
+                  child.setPropValue('collapsible', map[key].collapsible);
+                  child.setPropValue('forceRender', map[key].forceRender);
+                  delete map[key];
+                  return false;
+                }
+                return true;
+              },
+              () => {
+                const items = [];
+                for (const key in map) {
+                  if (Object.hasOwnProperty.call(map, key)) {
+                    items.push({
+                      componentName: 'Collapse.Panel',
+                      props: map[key],
+                    });
+                  }
+                }
+                return items;
+              },
+              (child1, child2) => {
+                const a = value.findIndex(
+                  (item) => String(item.key) === String(child1.getPropValue('key')),
+                );
+                const b = value.findIndex(
+                  (item) => String(item.key) === String(child2.getPropValue('key')),
+                );
+                return a - b;
+              },
+            );
+          },
+        },
+      },
+      {
+        name: 'defaultActiveKey',
+        title: { label: '初始化选中面板的 key', tip: '初始化选中面板的 key' },
+        propType: {
+          type: 'oneOfType',
+          value: [
+            'string',
+            { type: 'arrayOf', value: 'string' },
+            'number',
+            { type: 'arrayOf', value: 'number' },
+          ],
+        },
+      },
+      {
+        name: 'activeKey',
+        title: {
+          label: '当前激活 tab 面板的 key',
+          tip: '当前激活 tab 面板的 key',
+        },
+        propType: {
+          type: 'oneOfType',
+          value: [
+            'string',
+            { type: 'arrayOf', value: 'string' },
+            'number',
+            { type: 'arrayOf', value: 'number' },
+          ],
+        },
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template: "onChange(${extParams}){\n// 切换面板的回调\nconsole.log('onChange');}",
+        },
+      ],
+    },
+    component: {
+      isContainer: true,
+    },
+  },
+};

package/lowcode/collapse/snippets.ts

@@ -0,0 +1,28 @@
+export default [
+  {
+    title: '折叠面板',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/collapse-1.png',
+    schema: {
+      componentName: 'Collapse',
+      props: {
+        defaultActiveKey: ['collapse-item-1'],
+      },
+      children: [
+        {
+          componentName: 'Collapse.Panel',
+          props: {
+            header: '折叠项1',
+            key: 'collapse-item-1',
+          },
+        },
+        {
+          componentName: 'Collapse.Panel',
+          props: {
+            header: '折叠项2',
+            key: 'collapse-item-2',
+          },
+        },
+      ],
+    },
+  },
+];

package/lowcode/collapse.pane/meta.ts

@@ -0,0 +1,84 @@
+// FIXME: 选中tabPane点复制，会出问题，因为复制的组件key一样
+
+export default {
+  componentName: 'Collapse.Panel',
+  title: '折叠项',
+  category: '',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Collapse",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "Panel",
+  },
+  configure: {
+    props: [
+      {
+        name: 'key',
+        title: {
+          label: 'key',
+          tip: 'key',
+        },
+        propType: 'string',
+        setter: 'StringSetter',
+        supportVariable: true
+      },
+      {
+        name: 'header',
+        title: {
+          label: '标题',
+          tip: '标题',
+        },
+        propType: { type: 'oneOfType', value: ['string', 'node'] },
+      },
+
+      {
+        name: 'extra',
+        title: {
+          label: '右上角内容',
+          tip: '自定义渲染每个面板右上角的内容',
+        },
+        propType: { type: 'oneOfType', value: ['string', 'node'] },
+      },
+      {
+        name: 'collapsible',
+        title: '可折叠触发区域',
+        propType: {
+          type: 'oneOf',
+          value: ['-', 'header', 'disabled'],
+        },
+      },
+      {
+        name: 'showArrow',
+        title: {
+          label: '显示折叠图标',
+          tip: '是否展示当前面板上的箭头',
+        },
+        propType: 'bool',
+        defaultValue: true,
+        setter: 'BoolSetter',
+        supportVariable: true
+      },
+      {
+        name: 'forceRender',
+        title: {
+          label: '隐藏时渲染',
+          tip: '被隐藏时是否渲染 DOM 结构',
+        },
+        propType: 'bool',
+        setter: 'BoolSetter',
+        supportVariable: true
+      },
+    ],
+    component: {
+      isContainer: true,
+      nestingRule: {
+        parentWhitelist: ['Collapse'],
+      },
+    },
+  },
+};