@pisell/materials 1.0.1 → 1.0.2

package/lowcode/tag/snippets.ts

@@ -0,0 +1,13 @@
+export default [
+  {
+    title: '标签',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/tag-1.png',
+    schema: {
+      componentName: 'Tag',
+      props: {
+        color: 'magenta',
+        children: 'tag',
+      },
+    },
+  },
+];

package/lowcode/time-picker/meta.ts

@@ -0,0 +1,224 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'TimePicker',
+  title: '时间选择框',
+  category: '表单',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "TimePicker",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'defaultValue',
+      title: { label: '默认时间', tip: '默认时间' },
+      propType: 'date',
+      setter: 'DateSetter',
+    },
+    {
+      name: 'value',
+      title: { label: '当前时间', tip: '当前时间' },
+      propType: 'date',
+      setter: 'DateSetter',
+    },
+    {
+      name: 'allowClear',
+      title: { label: '支持清除', tip: '是否允许清除' },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'autoFocus',
+      title: { label: '自动聚焦', tip: '自动获取焦点' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'bordered',
+      title: { label: '显示边框', tip: '是否有边框' },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'className',
+      title: { label: '选择器类名', tip: '选择器类名' },
+      propType: 'string',
+      setter: 'StringSetter'
+    },
+    {
+      name: 'clearText',
+      title: { label: '清除按钮的提示文案', tip: '清除按钮的提示文案' },
+      propType: 'string',
+      setter: 'StringSetter'
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否为禁用状态' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'disabledHours',
+      title: { label: '禁止选择部分小时选项', tip: '禁止选择部分小时选项' },
+      propType: 'func',
+    },
+    {
+      name: 'disabledMinutes',
+      title: { label: '禁止选择部分分钟选项', tip: '禁止选择部分分钟选项' },
+      propType: 'func',
+    },
+    {
+      name: 'disabledSeconds',
+      title: { label: '禁止选择部分秒选项', tip: '禁止选择部分秒选项' },
+      propType: 'func',
+    },
+    {
+      name: 'format',
+      title: { label: '展示的时间格式', tip: '展示的时间格式' },
+      propType: 'string',
+      setter: 'StringSetter'
+    },
+    {
+      name: 'getPopupContainer',
+      title: {
+        label: '定义浮层的容器',
+        tip: '定义浮层的容器，默认为 body 上新建 div',
+      },
+      propType: 'func',
+    },
+    {
+      name: 'hideDisabledOptions',
+      title: { label: '隐藏禁止选择的选项', tip: '隐藏禁止选择的选项' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'hourStep',
+      title: { label: '小时选项间隔', tip: '小时选项间隔' },
+      propType: 'number',
+      setter: 'NumberSetter'
+    },
+    {
+      name: 'inputReadOnly',
+      title: {
+        label: '只读',
+        tip: '设置输入框为只读（避免在移动设备上打开虚拟键盘）',
+      },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'minuteStep',
+      title: { label: '分钟选项间隔', tip: '分钟选项间隔' },
+      propType: 'number',
+      setter: 'NumberSetter'
+    },
+    // {
+    //   name: 'open',
+    //   title: { label: '面板是否打开', tip: '面板是否打开' },
+    //   propType: 'bool',
+    //   // defaultValue: false,
+    //   setter: 'BoolSetter'
+    // },
+    {
+      name: 'placeholder',
+      title: { label: '空值提示', tip: '没有值的时候显示的内容' },
+      propType: {
+        type: 'oneOfType',
+        value: ['string', { type: 'arrayOf', value: 'string' }],
+      },
+    },
+    {
+      name: 'popupClassName',
+      title: { label: '弹出层类名', tip: '弹出层类名' },
+      propType: 'string',
+      setter: 'StringSetter'
+    },
+    // {
+    //   name: 'popupStyle',
+    //   title: { label: '弹出层样式对象', tip: '弹出层样式对象' },
+    //   propType: 'object',
+    // },
+    {
+      name: 'secondStep',
+      title: { label: '秒选项间隔', tip: '秒选项间隔' },
+      propType: 'number',
+      setter: 'NumberSetter'
+    },
+    // {
+    //   name: 'suffixIcon',
+    //   title: { label: '自定义的选择框后缀图标', tip: '自定义的选择框后缀图标' },
+    //   propType: 'node',
+    // },
+    // {
+    //   name: 'clearIcon',
+    //   title: { label: '自定义的清除图标', tip: '自定义的清除图标' },
+    //   propType: 'node',
+    // },
+    // {
+    //   name: 'renderExtraFooter',
+    //   title: {
+    //     label: '选择框底部显示自定义的内容',
+    //     tip: '选择框底部显示自定义的内容',
+    //   },
+    //   propType: 'func',
+    // },
+    {
+      name: 'use12Hours',
+      title: {
+        label: '12小时制',
+        tip: '使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a`',
+      },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'onChange',
+      title: { label: '时间发生变化的回调', tip: '时间发生变化的回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onOpenChange',
+      title: { label: '面板打开/关闭时的回调', tip: '面板打开/关闭时的回调' },
+      propType: 'func',
+    },
+    {
+      name: 'showNow',
+      title: { label: '“此刻”按钮', tip: '面板是否显示“此刻”按钮' },
+      propType: 'bool',
+      setter: 'BoolSetter'
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(time,timeString,${extParams}){\n// 时间发生变化的回调\nconsole.log('onChange',time,timeString);}",
+        },
+        {
+          name: 'onOpenChange',
+          template:
+            "onOpenChange(open,${extParams}){\n// 面板打开/关闭时的回调\nconsole.log('onOpenChange',open);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/time-picker/snippets.ts

@@ -0,0 +1,10 @@
+export default [
+  {
+    title: '时间选择框',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/time-picker-1.png',
+    schema: {
+      componentName: 'TimePicker',
+      props: {},
+    },
+  },
+];

package/lowcode/timeline/meta.ts

@@ -0,0 +1,189 @@
+import { uuid } from '../_utils/utils';
+
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Timeline',
+  title: '时间轴',
+  category: '数据展示',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Timeline",
+    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: 'color',
+                    title: '圆圈颜色',
+                    setter: 'StringSetter',
+                  },
+                  {
+                    name: 'dot',
+                    title: '自定义时间轴点',
+                    setter: 'node',
+                  },
+                  {
+                    name: 'label',
+                    title: '设置标签',
+                    setter: 'StringSetter',
+                  },
+                  {
+                    name: 'position',
+                    title: {
+                      label: '自定义节点位置',
+                      tip: '自定义节点位置',
+                    },
+                    propType: {
+                      type: 'oneOf',
+                      value: ['left', 'right'],
+                    },
+                    setter: [
+                      {
+                        componentName: 'RadioGroupSetter',
+                        props: {
+                          options: [
+                            {
+                              title: 'left',
+                              value: 'left',
+                            },
+                            {
+                              title: 'right',
+                              value: 'right',
+                            },
+                          ],
+                        },
+                      },
+                      'VariableSetter',
+                    ],
+                  },
+                ],
+              },
+            },
+            initialValue: () => {
+              return {
+                key: `timeLine${uuid()}`,
+                label: '时间轴',
+              };
+            },
+          },
+        },
+      },
+      extraProps: {
+        getValue(target, fieldValue, a, b, c) {
+          const map = target.node.children.map((child) => {
+            const key = child.getPropValue('key') ? String(child.getPropValue('key')) : child.id;
+            const result = { key };
+            ['color', 'dot', 'label', 'position'].forEach((propKey) => {
+              result[propKey] = child.getPropValue(propKey);
+            });
+            return result;
+          });
+          return map.length === 0 ? fieldValue : 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)) {
+                ['color', 'dot', 'label', 'position'].forEach((propKey) => {
+                  child.setPropValue(propKey, map[key][propKey]);
+                });
+                delete map[key];
+                return false;
+              }
+              return true;
+            },
+            () => {
+              const items = [];
+              for (const key in map) {
+                if (Object.hasOwnProperty.call(map, key)) {
+                  items.push({
+                    componentName: 'Timeline.Item',
+                    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: 'mode',
+      title: {
+        label: '模式',
+        tip: '通过设置 `mode` 可以改变时间轴和内容的相对位置',
+      },
+      propType: { type: 'oneOf', value: ['left', 'alternate', 'right'] },
+    },
+    {
+      name: 'pending',
+      title: {
+        label: '存在最后节点',
+        tip: '指定最后一个幽灵节点是否存在',
+      },
+      propType: 'bool',
+    },
+    {
+      name: 'pendingDot',
+      title: {
+        label: '当最后一个幽灵节点存在時，指定其时间图点',
+        tip: '当最后一个幽灵节点存在時，指定其时间图点',
+      },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'reverse',
+      title: { label: '节点排序', tip: '节点排序' },
+      propType: 'bool',
+      defaultValue: false,
+    },
+  ],
+  configure: { supports: { style: true } },
+};

package/lowcode/timeline/snippets.ts

@@ -0,0 +1,21 @@
+export default [
+  {
+    title: '时间轴',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/timeline-1.jpg',
+    schema: {
+      componentName: 'Timeline',
+      props: {
+        steps: [
+          {
+            key: 'timeLinei5wd',
+            label: '时间轴',
+          },
+          {
+            key: 'timeLinei5wx',
+            label: '时间轴',
+          },
+        ],
+      },
+    },
+  },
+];

package/lowcode/timeline.item/meta.ts

@@ -0,0 +1,53 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Timeline.Item',
+  title: '时间轴项',
+  category: '',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Timeline",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "Item",
+  },
+  props: [
+    {
+      name: 'color',
+      title: { label: '颜色', tip: '颜色' },
+      propType: 'string',
+      defaultValue: '#00f',
+      setter: 'ColorSetter',
+    },
+    {
+      name: 'dot',
+      title: {
+        label: '时间轴点',
+        tip: '时间轴点',
+      },
+      propType: 'node',
+    },
+    {
+      name: 'label',
+      title: {
+        label: '标签',
+        tip: '标签',
+      },
+      propType: { type: 'oneOfType', value: ['string', 'node', 'func'] },
+    },
+    {
+      name: 'position',
+      title: {
+        label: '位置',
+        tip: '位置',
+      },
+      propType: { type: 'oneOf', value: ['left', 'right'] },
+    },
+  ],
+  configure: { supports: { style: true } },
+};

package/lowcode/timeline.item/snippets.ts

@@ -0,0 +1,10 @@
+export default [
+  // {
+  //   title: '时间轴',
+  //   screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/timeline-1.jpg',
+  //   schema: {
+  //     componentName: 'Timeline',
+  //     props: {},
+  //   },
+  // },
+];