@pisell/materials 1.0.1 → 1.0.3

package/lowcode/tooltip/meta.ts

@@ -0,0 +1,306 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Tooltip',
+  title: '文字提示',
+  category: '数据展示',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Tooltip",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      title: '内容',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'title',
+          title: {
+            label: '提示文字',
+            tip: 'title | 提示文字',
+          },
+          propType: { type: 'oneOfType', value: ['string', 'node'] },
+          setter: ['StringSetter', 'SlotSetter', 'VariableSetter'],
+        },
+      ],
+    },
+    {
+      title: '控制',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'defaultOpen',
+          title: {
+            label: '默认显隐',
+            tip: 'defaultOpen | 默认是否显隐',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'open',
+          title: {
+            label: '当前显隐',
+            tip: 'open | 当前是否显隐',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+        },
+      ],
+    },
+    {
+      title: '外观',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'placement',
+          title: { label: '气泡位置', tip: 'placement | 气泡位置' },
+          propType: {
+            type: 'oneOf',
+            value: [
+              'top',
+              'left',
+              'right',
+              'bottom',
+              'topLeft',
+              'topRight',
+              'bottomLeft',
+              'bottomRight',
+              'leftTop',
+              'leftBottom',
+              'rightTop',
+              'rightBottom',
+            ],
+          },
+          defaultValue: 'top',
+          setter: {
+            componentName: 'SelectSetter',
+            props: {
+              options: [
+                {
+                  title: '上',
+                  value: 'top',
+                },
+                {
+                  title: '左',
+                  value: 'left',
+                },
+                {
+                  title: '右',
+                  value: 'right',
+                },
+                {
+                  title: '下',
+                  value: 'bottom',
+                },
+                {
+                  title: '上左',
+                  value: 'topLeft',
+                },
+                {
+                  title: '上右',
+                  value: 'topRight',
+                },
+                {
+                  title: '下左',
+                  value: 'bottomLeft',
+                },
+                {
+                  title: '下右',
+                  value: 'bottomRight',
+                },
+                {
+                  title: '左上',
+                  value: 'leftTop',
+                },
+                {
+                  title: '左下',
+                  value: 'leftBottom',
+                },
+                {
+                  title: '右上',
+                  value: 'rightTop',
+                },
+                {
+                  title: '右下',
+                  value: 'rightBottom',
+                },
+              ],
+            },
+          },
+        },
+        {
+          name: 'autoAdjustOverflow',
+          title: {
+            label: '自动调整',
+            tip: 'autoAdjustOverflow | 气泡被遮挡时自动调整位置',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: true,
+        },
+        {
+          name: 'arrowPointAtCenter',
+          title: {
+            label: '指向中心',
+            tip: 'arrowPointAtCenter | 箭头是否指向目标元素中心',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'color',
+          title: {
+            label: '背景颜色',
+            tip: 'color | 背景颜色',
+          },
+          propType: 'string',
+          setter: 'ColorSetter',
+        },
+        {
+          name: 'zIndex',
+          title: {
+            label: 'zIndex',
+            tip: 'zIndex | 设置 Tooltip 的 z-index值',
+          },
+          propType: 'number',
+          setter: 'NumberSetter',
+        },
+      ],
+    },
+    {
+      name: 'overlayStyle',
+      title: '卡片样式',
+      type: 'group',
+      extraProps: {
+        display: 'entry',
+      },
+      items: [
+        {
+          name: 'overlayStyle',
+          title: { label: '样式设置', tip: 'overlayStyle | 卡片样式' },
+          setter: 'StyleSetter',
+          extraProps: {
+            display: 'block',
+          },
+        },
+      ],
+    },
+    {
+      name: 'overlayInnerStyle',
+      title: '卡片内容样式',
+      type: 'group',
+      extraProps: {
+        display: 'entry',
+      },
+      items: [
+        {
+          name: 'overlayInnerStyle',
+          title: {
+            label: '样式设置',
+            tip: 'overlayStyle | 卡片内容区域的样式',
+          },
+          setter: 'StyleSetter',
+          extraProps: {
+            display: 'block',
+          },
+        },
+      ],
+    },
+    {
+      title: '行为',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'trigger',
+          title: { label: '触发行为', tip: 'trigger | 触发行为' },
+          propType: {
+            type: 'oneOf',
+            value: ['hover', 'focus', 'click', 'contextMenu'],
+          },
+          defaultValue: 'hover',
+          setter: {
+            componentName: 'SelectSetter',
+            props: {
+              options: [
+                {
+                  title: '鼠标悬停',
+                  value: 'hover',
+                },
+                {
+                  title: '获得焦点',
+                  value: 'focus',
+                },
+                {
+                  title: '鼠标点击',
+                  value: 'click',
+                },
+                {
+                  title: '右键菜单',
+                  value: 'contextMenu',
+                },
+              ],
+            },
+          },
+        },
+        {
+          name: 'mouseEnterDelay',
+          title: {
+            label: '展示延时',
+            tip: 'mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒',
+          },
+          propType: 'number',
+          defaultValue: 0.1,
+          setter: {
+            componentName: 'NumberSetter',
+            props: {
+              step: 0.1,
+            },
+          },
+        },
+        {
+          name: 'mouseLeaveDelay',
+          title: {
+            label: '隐藏延时',
+            tip: 'mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒',
+          },
+          propType: 'number',
+          defaultValue: 0.1,
+          setter: {
+            componentName: 'NumberSetter',
+            props: {
+              step: 0.1,
+            },
+          },
+        },
+      ],
+    },
+  ],
+  configure: {
+    component: { isContainer: true },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onOpenChange',
+          template:
+            "onOpenChange(open,${extParams}){\n// 显示隐藏的回调\nconsole.log('onOpenChange',open);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/tooltip/snippets.ts

@@ -0,0 +1,12 @@
+export default [
+  {
+    title: '文字提示',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/tooltip-1.jpg',
+    schema: {
+      componentName: 'Tooltip',
+      props: {
+        title: '提示内容',
+      },
+    },
+  },
+];

package/lowcode/transfer/meta.ts

@@ -0,0 +1,304 @@
+import { uuid } from '../_utils/utils';
+
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Transfer',
+  title: '穿梭框',
+  category: '表单',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Transfer",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'dataSource',
+      title: {
+        label: '数据源',
+        tip: '数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外',
+      },
+      propType: { type: 'arrayOf', value: 'object' },
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'ObjectSetter',
+            initialValue: () => {
+              return {
+                key: uuid(),
+              };
+            },
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'key',
+                    title: 'key',
+                    setter: 'StringSetter',
+                    initialValue: (val: any) => val || uuid(),
+                  },
+                  {
+                    name: 'title',
+                    title: 'title',
+                    setter: 'StringSetter',
+                    isRequired: true,
+                  },
+                  {
+                    name: 'description',
+                    title: '描述',
+                    setter: 'StringSetter',
+                  },
+                  {
+                    name: 'disabled',
+                    title: '禁止穿梭',
+                    setter: ['BoolSetter', 'FunctionSetter'],
+                  },
+                ],
+              },
+            },
+          },
+        },
+      },
+    },
+
+    {
+      name: 'selectedKeys',
+      title: { label: '选中项', tip: '设置哪些项应该被选中' },
+      propType: { type: 'arrayOf', value: 'string' },
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: 'StringSetter'
+        }
+      },
+      supportVariable: true,
+    },
+    {
+      name: 'targetKeys',
+      title: {
+        label: '右侧框数据',
+        tip: '显示在右侧框数据的 key 集合',
+      },
+      propType: { type: 'arrayOf', value: 'string' },
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: 'StringSetter'
+        }
+      },
+      supportVariable: true,
+    },
+
+    {
+      title: '常用设置',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'oneWay',
+          title: { label: '展示为单向样式', tip: '展示为单向样式' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'disabled',
+          title: { label: '是否禁用', tip: '是否为禁用状态' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+
+        {
+          name: 'showSearch',
+          title: { label: '是否显示搜索框', tip: '是否显示搜索框' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'showSelectAll',
+          title: { label: '是否展示全选勾选框', tip: '是否展示全选勾选框' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: true,
+        },
+        {
+          name: 'pagination',
+          title: {
+            label: '分页设置',
+            tip: '使用分页样式，自定义渲染列表下无效',
+          },
+          setter: [
+            'BoolSetter',
+            {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'pageSize',
+                      title: '单页条数',
+                      setter: 'NumberSetter',
+                    },
+                    {
+                      name: 'simple',
+                      title: '简单模式',
+                      setter: 'BoolSetter',
+                    },
+                    {
+                      name: 'showSizeChanger',
+                      title: '展示条数切换器',
+                      setter: 'BoolSetter',
+                    },
+                  ],
+                },
+              },
+            }
+          ],
+          propType: {
+            type: 'oneOfType',
+            value: ['bool', 'object']
+          },
+          defaultValue: false,
+        },
+        {
+          name: 'render',
+          title: {
+            label: '每行数据渲染函数',
+            tip:
+              '每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 `label` 字段为 ReactElement，`value` 字段为 title',
+          },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'renderItem(record,${extParams}){\n// 每行数据渲染函数\nreturn record.title;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'filterOption',
+          title: {
+            label: '过滤选项',
+            tip:
+              '接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false',
+          },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'filterOption(inputValue,option,${extParams}){\n// 接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false\n\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'footer',
+          title: {
+            label: '底部',
+            tip: 'footer | 底部',
+          },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template: 'renderItem(item,${extParams}){\n// 自定义渲染列表项\nreturn `item`;\n}',
+              },
+            },
+            {
+              componentName: 'SlotSetter',
+              title: '渲染函数插槽',
+              initialValue: {
+                type: 'JSSlot',
+                value: [],
+                params: ['props', 'info']
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+      ],
+    },
+
+    // {
+    //   name: 'listStyle',
+    //   title: { label: '两个穿梭框的自定义样式', tip: '两个穿梭框的自定义样式' },
+    //   propType: { type: 'oneOfType', value: ['object', 'func'] },
+    // },
+    // {
+    //   name: 'locale',
+    //   title: { label: '各种语言', tip: '各种语言' },
+    //   propType: 'object',
+    // },
+
+    {
+      name: 'operations',
+      title: {
+        label: '操作文案',
+        tip: '操作文案集合，顺序从上至下',
+      },
+      propType: { type: 'arrayOf', value: 'string' },
+    },
+
+    {
+      name: 'titles',
+      title: { label: '标题集合', tip: '标题集合，顺序从左至右' },
+      propType: { type: 'arrayOf', value: 'node' },
+    },
+    {
+      name: 'selectAllLabels',
+      title: {
+        label: '多选框标题集合',
+        tip: '自定义顶部多选框标题的集合',
+      },
+      propType: {
+        type: 'arrayOf',
+        value: { type: 'oneOfType', value: ['node', 'func'] },
+      },
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(targetKeys,direction,moveKeys,${extParams}){\n// 选项在两栏之间转移时的回调函数\nconsole.log('onChange',targetKeys,direction,moveKeys);}",
+        },
+        {
+          name: 'onScroll',
+          template:
+            "onScroll(direction,event,${extParams}){\n// 选项列表滚动时的回调函数\nconsole.log('onScroll',direction,event);}",
+        },
+        {
+          name: 'onSearch',
+          template:
+            "onSearch(direction,value,${extParams}){\n// 搜索框内容时改变时的回调函数\nconsole.log('onSearch',direction,value);}",
+        },
+        {
+          name: 'onSelectChange',
+          template:
+            "onSelectChange(sourceSelectedKeys,targetSelectedKeys,${extParams}){\n// 选中项发生改变时的回调函数\nconsole.log('onSelectChange',sourceSelectedKeys,targetSelectedKeys);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/transfer/snippets.ts

@@ -0,0 +1,42 @@
+import { uuid } from '../_utils/utils';
+
+export default [
+  {
+    title: '穿梭框',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/transfer-1.png',
+    schema: {
+      componentName: 'Transfer',
+      props: {
+        dataSource: [
+          {
+            key: uuid(),
+            title: 'content1',
+          },
+          {
+            key: uuid(),
+            title: 'content2',
+          },
+          {
+            key: uuid(),
+            title: 'content3',
+          },
+          {
+            key: uuid(),
+            title: 'content4',
+          },
+          {
+            key: uuid(),
+            title: 'content5',
+          },
+        ],
+
+        render: {
+          type: 'JSFunction',
+          value: `function renderItem(record, extParams) {
+            return record.title;
+          }`,
+        },
+      },
+    },
+  },
+];