@pisell/materials 1.0.1 → 1.0.2

package/lowcode/steps/meta.ts

@@ -0,0 +1,281 @@
+import { uuid } from '../_utils/utils';
+
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Steps',
+  title: '步骤条',
+  category: '导航',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Steps",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'steps',
+      title: '步骤配置',
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'key',
+                    title: 'key',
+                    setter: 'StringSetter',
+                    initialValue: (val) => val || uuid(),
+                  },
+                  {
+                    name: 'title',
+                    title: '标题',
+                    setter: 'StringSetter',
+                  },
+                  {
+                    name: 'subTitle',
+                    title: '子标题',
+                    setter: 'StringSetter',
+                  },
+                  {
+                    name: 'description',
+                    title: '详细描述',
+                    setter: 'StringSetter',
+                  },
+                  {
+                    name: 'disabled',
+                    title: '禁用',
+                    setter: 'BoolSetter',
+                    initialValue: false,
+                  },
+                  {
+                    name: 'status',
+                    title: { label: '状态', tip: '选择框大小' },
+                    setter: {
+                      componentName: 'RadioGroupSetter',
+                      props: {
+                        options: [
+                          {
+                            title: 'wait',
+                            value: 'wait',
+                          },
+                          {
+                            title: 'process',
+                            value: 'process',
+                          },
+                          {
+                            title: 'finish',
+                            value: 'finish',
+                          },
+                          {
+                            title: 'error',
+                            value: 'error',
+                          },
+                        ],
+                      },
+                    },
+                    propType: {
+                      type: 'oneOf',
+                      value: ['wait', 'process', 'finish', 'error'],
+                    },
+                    defaultValue: 'wait',
+                  },
+                ],
+              },
+            },
+            initialValue: () => {
+              return {
+                key: `Steps${uuid()}`,
+                title: '步骤',
+                disabled: false,
+              };
+            },
+          },
+        },
+      },
+      extraProps: {
+        getValue(target, fieldValue) {
+          const map = target.node.children.map((child) => {
+            const key = child.getPropValue('key') ? String(child.getPropValue('key')) : child.id;
+            return {
+              key,
+              title: child.getPropValue('title'),
+              subTitle: child.getPropValue('subTitle'),
+              description: child.getPropValue('description'),
+              disabled: child.getPropValue('disabled'),
+              status: child.getPropValue('status'),
+            };
+          });
+          return map;
+        },
+        setValue(target, value) {
+          const { node } = target;
+          const map = {};
+
+          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('title', map[key].title);
+                child.setPropValue('subTitle', map[key].subTitle);
+                child.setPropValue('description', map[key].description);
+                child.setPropValue('disabled', map[key].disabled);
+                child.setPropValue('status', map[key].status);
+
+                delete map[key];
+                return false;
+              }
+              return true;
+            },
+            () => {
+              const items = [];
+              for (const key in map) {
+                if (Object.hasOwnProperty.call(map, key)) {
+                  items.push({
+                    componentName: 'Steps.Step',
+                    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: 'className',
+      title: { label: '步骤条类名', tip: '步骤条类名' },
+      propType: 'string',
+    },
+    {
+      name: 'type',
+      title: {
+        label: '类型',
+        tip: '步骤条类型，有 `default` 和 `navigation` 两种',
+      },
+      propType: { type: 'oneOf', value: ['default', 'navigation'] },
+      defaultValue: 'default',
+    },
+    {
+      name: 'current',
+      title: {
+        label: '当前步骤',
+        tip: '指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态',
+      },
+      propType: 'number',
+    },
+    {
+      name: 'direction',
+      title: {
+        label: '步骤条方向',
+        tip: '指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向',
+      },
+      propType: {
+        type: 'oneOf',
+        value: ['horizontal', 'vertical'],
+      },
+    },
+    {
+      name: 'labelPlacement',
+      title: {
+        label: '标签放置位置',
+        tip: '指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方',
+      },
+      propType: {
+        type: 'oneOf',
+        value: ['horizontal', 'vertical'],
+      },
+      defaultValue: 'horizontal',
+    },
+    {
+      name: 'progressDot',
+      title: {
+        label: '点状步骤条',
+        tip: '点状步骤条，可以设置为一个 func',
+      },
+      propType: { type: 'oneOfType', value: ['bool', 'func'] },
+    },
+    {
+      name: 'size',
+      title: {
+        label: '尺寸',
+        tip: '指定大小',
+      },
+      propType: {
+        type: 'oneOf',
+        value: ['default', 'small'],
+      },
+      defaultValue: 'default',
+    },
+    {
+      name: 'status',
+      title: {
+        label: '当前步骤状态',
+        tip: '指定当前步骤的状态，可选 `wait` `process` `finish` `error`',
+      },
+      propType: {
+        type: 'oneOf',
+        value: ['wait', 'process', 'finish', 'error'],
+      },
+      defaultValue: 'process',
+    },
+    {
+      name: 'initial',
+      title: {
+        label: '起始序号',
+        tip: '起始序号，从 0 开始记数',
+      },
+      propType: 'number',
+      defaultValue: 0,
+    },
+    {
+      name: 'onChange',
+      title: { label: '点击切换步骤时触发', tip: '点击切换步骤时触发' },
+      propType: 'func',
+    },
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+      nestingRule: { childWhitelist: ['Steps.Step'] },
+    },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(current,${extParams}){\n// 点击切换步骤时触发\nconsole.log('onChange',current);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/steps/snippets.ts

@@ -0,0 +1,36 @@
+export default [
+  {
+    title: '步骤条',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/steps-1.png',
+    schema: {
+      componentName: 'Steps',
+      props: {
+        current: 1,
+      },
+      children: [
+        {
+          componentName: 'Steps.Step',
+          props: {
+            title: 'Finished',
+            description: 'This is a description.',
+          },
+        },
+        {
+          componentName: 'Steps.Step',
+          props: {
+            title: 'In Progress',
+            subTitle: 'Left 00:00:08',
+            description: 'This is a description.',
+          },
+        },
+        {
+          componentName: 'Steps.Step',
+          props: {
+            title: 'Waiting',
+            description: 'This is a description.',
+          },
+        },
+      ],
+    },
+  },
+];

package/lowcode/steps.step/meta.ts

@@ -0,0 +1,54 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Steps.Step',
+  title: '步骤项',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Steps",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "Step",
+  },
+  props: [
+    {
+      name: 'title',
+      title: { label: '标题', tip: '标题' },
+      propType: 'string',
+    },
+    {
+      name: 'subTitle',
+      title: { label: '子标题', tip: '子标题' },
+      propType: 'string',
+    },
+    {
+      name: 'description',
+      title: { label: '步骤描述', tip: '步骤描述' },
+      propType: 'string',
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否为禁用状态' },
+      propType: 'bool',
+    },
+    {
+      name: 'icon',
+      title: { label: '图标', tip: '图标' },
+      propType: 'node',
+    },
+    {
+      name: 'status',
+      title: { label: '状态', tip: '状态' },
+      propType: 'string',
+    },
+  ],
+  configure: {
+    component: { nestingRule: { parentWhitelist: ['Steps'] } },
+    supports: { style: true },
+  },
+};

package/lowcode/steps.step/snippets.ts

@@ -0,0 +1 @@
+export default [];

package/lowcode/switch/meta.ts

@@ -0,0 +1,122 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Switch',
+  title: '开关',
+  category: '表单',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Switch",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'defaultChecked',
+      title: { label: '默认选中', tip: '默认是否选中' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'checked',
+      title: { label: '是否选中', tip: '当前是否选中' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true,
+    },
+    {
+      name: 'autoFocus',
+      title: { label: '自动聚焦', tip: '组件自动获取焦点' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'checkedChildren',
+      title: { label: '选中时内容', tip: '选中时的内容' },
+      propType: 'string',
+      setter: 'StringSetter'
+    },
+    {
+      name: 'unCheckedChildren',
+      title: { label: '非选中时内容', tip: '非选中时的内容' },
+      propType: 'string',
+      setter: 'StringSetter'
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否为禁用状态' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'loading',
+      title: { label: '加载中', tip: '加载中' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'size',
+      title: { label: '尺寸', tip: '开关大小' },
+      propType: { type: 'oneOf', value: ['default', 'small'] },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '默认',
+              value: 'default',
+            },
+            {
+              title: '小',
+              value: 'small',
+            },
+          ],
+        },
+      },
+      defaultValue: 'default',
+    },
+    {
+      name: 'onChange',
+      title: { label: '变化时回调函数', tip: '变化时回调函数' },
+      propType: 'func',
+    },
+    {
+      name: 'onClick',
+      title: { label: '点击时回调函数', tip: '点击时回调函数' },
+      propType: 'func',
+    },
+    // {
+    //   name: 'className',
+    //   title: { label: '类名', tip: '类名' },
+    //   propType: 'string',
+    // },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(checked,event,${extParams}){\n// 变化时回调函数\nconsole.log('onChange',checked,event);}",
+        },
+        {
+          name: 'onClick',
+          template:
+            "onClick(checked,event,${extParams}){\n// 点击时回调函数\nconsole.log('onClick',checked,event);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/switch/snippets.ts

@@ -0,0 +1,12 @@
+export default [
+  {
+    title: '开关',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/switch-1.png',
+    schema: {
+      componentName: 'Switch',
+      props: {
+        defaultChecked: true,
+      },
+    },
+  },
+];