@pisell/materials 1.0.1 → 1.0.3

package/lowcode/list.item/meta.ts

@@ -0,0 +1,58 @@
+// FIXME: 选中tabPane点复制，会出问题，因为复制的组件key一样
+
+export default {
+  componentName: 'List.Item',
+  title: '列表项',
+  category: '',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "List",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "Item",
+  },
+  props: [
+    {
+      name: 'actions',
+      title: {
+        label: '列表操作组',
+        tip: '列表操作组',
+      },
+      propType: { type: 'arrayOf', value: 'node' },
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'SlotSetter',
+            title: '操作组插槽',
+            initialValue: {
+              type: 'JSSlot',
+              value: [],
+            },
+          },
+        },
+      },
+    },
+    {
+      name: 'extra',
+      title: {
+        label: '额外内容',
+        tip: '额外内容',
+      },
+      propType: 'node',
+      setter: 'SlotSetter',
+    },
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+      nestingRule: {
+        parentWhitelist: ['List'],
+      },
+    },
+  },
+};

package/lowcode/list.item.meta/meta.ts

@@ -0,0 +1,49 @@
+export default {
+  componentName: 'List.Item.Meta',
+  title: '列表项内容',
+  category: '',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "List",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "Item.Meta",
+  },
+  props: [
+    {
+      name: 'avatar',
+      title: {
+        label: '列表元素图标',
+        tip: '列表元素的图标',
+      },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'title',
+      title: {
+        label: '列表元素标题',
+        tip: '列表元素的标题',
+      },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'avatar',
+      title: {
+        label: '列表元素描述内容',
+        tip: '列表元素的描述内容',
+      },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+  ],
+  configure: {
+    component: {
+      nestingRule: {
+        parentWhitelist: ['List'],
+      },
+    },
+  },
+};

package/lowcode/login/meta.ts

@@ -0,0 +1,56 @@
+
+import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
+
+const LoginMeta: ComponentMetadata = {
+  "componentName": "Login",
+  "title": "Login",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@pisell/materials",
+    "version": "1.0.1",
+    "exportName": "Login",
+    "main": "src/index.tsx",
+    "destructuring": true,
+    "subName": ""
+  },
+  "configure": {
+    "props": [
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "userName",
+            "zh-CN": "userName"
+          }
+        },
+        "name": "userName",
+        "setter": {
+          "componentName": "StringSetter",
+          "isRequired": true,
+          "initialValue": ""
+        }
+      }
+    ],
+    "supports": {
+      "style": true
+    },
+    "component": {}
+  }
+};
+const snippets: Snippet[] = [
+  {
+    "title": "Login",
+    "screenshot": "",
+    "schema": {
+      "componentName": "Login",
+      "props": {}
+    }
+  }
+];
+
+export default {
+  ...LoginMeta,
+  snippets
+};

package/lowcode/mentions/meta.ts

@@ -0,0 +1,159 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Mentions',
+  title: '提及',
+  category: '表单',
+  props: [
+    {
+      name: 'defaultValue',
+      title: { label: '默认值', tip: '默认值' },
+      propType: 'string',
+      setter: 'StringSetter'
+    },
+    {
+      name: 'autoFocus',
+      title: { label: '自动聚焦', tip: '自动获得焦点' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'filterOption',
+      title: { label: '自定义过滤逻辑', tip: '自定义过滤逻辑' },
+      propType: { type: 'oneOfType', value: ['bool', 'func'] },
+    },
+    {
+      name: 'notFoundContent',
+      title: {
+        label: '空值展示',
+        tip: '当下拉列表为空时显示的内容',
+      },
+      propType: 'node',
+    },
+    {
+      name: 'placement',
+      title: { label: '弹出层展示位置', tip: '弹出层展示位置' },
+      propType: { type: 'oneOf', value: ['top', 'bottom'] },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '上',
+              value: 'top',
+            },
+            {
+              title: '下',
+              value: 'bottom',
+            },
+          ],
+        },
+      },
+    },
+    {
+      name: 'prefix',
+      title: { label: '设置触发关键字', tip: '设置触发关键字' },
+      propType: {
+        type: 'oneOfType',
+        value: ['string', { type: 'arrayOf', value: 'string' }],
+      },
+    },
+    {
+      name: 'split',
+      title: { label: '设置选中项前后分隔符', tip: '设置选中项前后分隔符' },
+      propType: 'string',
+    },
+    {
+      name: 'validateSearch',
+      title: { label: '自定义触发验证逻辑', tip: '自定义触发验证逻辑' },
+      propType: 'func',
+    },
+    // {
+    //   name: 'value',
+    //   title: { label: '设置值', tip: '设置值' },
+    //   propType: 'string',
+    // },
+    {
+      name: 'onChange',
+      title: { label: '值改变时触发', tip: '值改变时触发' },
+      propType: 'func',
+    },
+    {
+      name: 'onSelect',
+      title: { label: '选择选项时触发', tip: '选择选项时触发' },
+      propType: 'func',
+    },
+    {
+      name: 'onSearch',
+      title: { label: '搜索时触发', tip: '搜索时触发' },
+      propType: 'func',
+    },
+    {
+      name: 'onFocus',
+      title: { label: '获得焦点时触发', tip: '获得焦点时触发' },
+      propType: 'func',
+    },
+    {
+      name: 'onBlur',
+      title: { label: '失去焦点时触发', tip: '失去焦点时触发' },
+      propType: 'func',
+    },
+    // {
+    //   name: 'getPopupContainer',
+    //   title: {
+    //     label: '指定建议框挂载的 HTML 节点',
+    //     tip: '指定建议框挂载的 HTML 节点',
+    //   },
+    //   propType: 'func',
+    // },
+    {
+      name: 'autoSize',
+      title: {
+        label: '内容高度',
+        tip: '自适应内容高度，可设置为 true | false 或对象：{ minRows: 2, maxRows: 6 }',
+      },
+      propType: { type: 'oneOfType', value: ['bool', 'object'] },
+    },
+    {
+      name: 'onResize',
+      title: { label: 'resize 回调', tip: 'resize 回调' },
+      propType: 'func',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template: "onChange(text,${extParams}){\n// 值改变时触发\nconsole.log('onChange',text);}",
+        },
+        {
+          name: 'onSelect',
+          template:
+            "onSelect(option,prefix,${extParams}){\n// 选择选项时触发\nconsole.log('onSelect',option,prefix);}",
+        },
+        {
+          name: 'onSearch',
+          template:
+            "onSearch(text,prefix,${extParams}){\n// 搜索时触发\nconsole.log('onSearch',text,prefix);}",
+        },
+        {
+          name: 'onFocus',
+          template: "onFocus(${extParams}){\n// 获得焦点时触发\nconsole.log('onFocus');}",
+        },
+        {
+          name: 'onBlur',
+          template: "onBlur(${extParams}){\n// 失去焦点时触发\nconsole.log('onBlur');}",
+        },
+        {
+          name: 'onResize',
+          template:
+            "onResize({width,height},${extParams}){\n// resize 回调\nconsole.log('onResize',width,height);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/mentions/snippets.ts

@@ -0,0 +1,10 @@
+export default [
+  {
+    title: '提及',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/mentions-1.png',
+    schema: {
+      componentName: 'Mentions',
+      props: {},
+    },
+  },
+];

package/lowcode/menu/meta.ts

@@ -0,0 +1,248 @@
+import { uuid } from '../_utils/utils';
+import { itemsExtraProps } from './utils';
+
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Menu',
+  title: '导航菜单',
+  category: '导航',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Menu",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'items',
+      title: '菜单项',
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'key',
+                    title: 'key',
+                    setter: 'StringSetter',
+                    initialValue: (val) => val || uuid(),
+                  },
+                  {
+                    name: 'children',
+                    title: '菜单名称',
+                    setter: 'StringSetter',
+                  },
+                  {
+                    name: 'category',
+                    title: {
+                      label: '类型',
+                      tip: '菜单项类型',
+                    },
+                    propType: {
+                      type: 'oneOf',
+                      value: ['Menu.Item', 'Menu.SubMenu', 'Menu.ItemGroup'],
+                    },
+                    setter: [
+                      {
+                        componentName: 'RadioGroupSetter',
+                        props: {
+                          options: [
+                            {
+                              title: 'Item',
+                              value: 'Menu.Item',
+                            },
+                            {
+                              title: 'SubMenu',
+                              value: 'Menu.SubMenu',
+                            },
+                            {
+                              title: 'ItemGroup',
+                              value: 'Menu.ItemGroup',
+                            },
+                          ],
+                        },
+                      },
+                      'VariableSetter',
+                    ],
+                  },
+                ],
+              },
+            },
+            initialValue: () => {
+              return {
+                key: 'item-' + uuid(),
+                category: 'Menu.Item',
+                children: '菜单名',
+              };
+            },
+          },
+        },
+      },
+      extraProps: itemsExtraProps,
+    },
+    {
+      name: 'defaultOpenKeys',
+      title: {
+        label: '初始展开菜单项',
+        tip: '初始展开的 SubMenu 菜单项 key 数组',
+      },
+      propType: { type: 'arrayOf', value: 'string' },
+    },
+    {
+      name: 'defaultSelectedKeys',
+      title: { label: '初始选中的菜单项', tip: '初始选中的菜单项 key 数组' },
+      propType: { type: 'arrayOf', value: 'string' },
+    },
+    {
+      name: 'forceSubMenuRender',
+      title: {
+        label: '子菜单预渲染',
+        tip: '在子菜单展示之前就渲染进 DOM',
+      },
+      propType: 'bool',
+      defaultValue: false,
+    },
+    {
+      name: 'inlineCollapsed',
+      title: { label: '是否收起', tip: 'inline 时菜单是否收起状态' },
+      propType: 'bool',
+    },
+    {
+      name: 'inlineIndent',
+      title: { label: '缩进宽度', tip: 'inline 模式的菜单缩进宽度' },
+      propType: 'number',
+    },
+    {
+      name: 'mode',
+      title: {
+        label: '菜单类型',
+        tip: '菜单类型，现在支持垂直、水平、和内嵌模式三种',
+      },
+      propType: { type: 'oneOf', value: ['vertical', 'horizontal', 'inline'] },
+    },
+    {
+      name: 'multiple',
+      title: { label: '是否允许多选', tip: '是否允许多选' },
+      propType: 'bool',
+      defaultValue: false,
+    },
+    {
+      name: 'openKeys',
+      title: {
+        label: '当前展开的菜单项',
+        tip: '当前展开的 SubMenu 菜单项 key 数组',
+      },
+      propType: { type: 'arrayOf', value: 'string' },
+    },
+    {
+      name: 'selectable',
+      title: { label: '是否允许选中', tip: '是否允许选中' },
+      propType: 'bool',
+      defaultValue: true,
+    },
+    {
+      name: 'selectedKeys',
+      title: { label: '当前选中项', tip: '当前选中的菜单项 key 数组' },
+      propType: { type: 'arrayOf', value: 'string' },
+    },
+    {
+      name: 'style',
+      title: { label: '根节点样式', tip: '根节点样式' },
+      propType: 'object',
+    },
+    {
+      name: 'subMenuCloseDelay',
+      title: {
+        label: '关闭延时',
+        tip: '用户鼠标离开子菜单后关闭延时，单位：秒',
+      },
+      propType: 'number',
+    },
+    {
+      name: 'subMenuOpenDelay',
+      title: {
+        label: '开启延时',
+        tip: '用户鼠标进入子菜单后开启延时，单位：秒',
+      },
+      propType: 'number',
+    },
+    {
+      name: 'theme',
+      title: { label: '主题颜色', tip: '主题颜色' },
+      propType: { type: 'oneOf', value: ['light', 'dark'] },
+    },
+    {
+      name: 'onClick',
+      title: { label: '点击 MenuItem 调用函数', tip: '点击 MenuItem 调用函数' },
+      propType: 'func',
+    },
+    {
+      name: 'onDeselect',
+      title: {
+        label: '取消选中时调用函数',
+        tip: '取消选中时调用，仅在 multiple 生效',
+      },
+      propType: 'func',
+    },
+    {
+      name: 'triggerSubMenuAction',
+      title: {
+        label: '触发方式',
+        tip: '展开/关闭的触发行为',
+      },
+      propType: { type: 'oneOf', value: ['hover', 'click'] },
+    },
+    {
+      name: 'onOpenChange',
+      title: { label: 'SubMenu 展开/关闭的回调', tip: '展开/关闭的回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onSelect',
+      title: { label: '被选中时调用函数', tip: '被选中时调用函数' },
+      propType: 'func',
+    },
+    {
+      name: 'overflowedIndicator',
+      title: { label: '折叠图标', tip: '自定义 Menu 折叠时的图标' },
+      propType: 'node',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onClick',
+          template:
+            "onClick({item,key,keyPath,domEvent},${extParams}){\n// 点击 MenuItem 调用此函数\nconsole.log('onClick',item,key,keyPath,domEvent);}",
+        },
+        {
+          name: 'onDeselect',
+          template:
+            "onDeselect({item,key,keyPath,selectedKeys,domEvent},${extParams}){\n// 取消选中时调用，仅在 multiple 生效\nconsole.log('onDeselect',item,key,keyPath,selectedKeys,domEvent);}",
+        },
+        {
+          name: 'onOpenChange',
+          template:
+            "onOpenChange(openKeys,${extParams}){\n// SubMenu 展开/关闭的回调\nconsole.log('onOpenChange',openKeys);}",
+        },
+        {
+          name: 'onSelect',
+          template:
+            "onSelect({item,key,keyPath,selectedKeys,domEvent},${extParams}){\n// 被选中时调用\nconsole.log('onSelect',item,key,keyPath,selectedKeys,domEvent);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/menu/snippets.ts

@@ -0,0 +1,22 @@
+export default [
+  {
+    title: '导航菜单',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/menu-1.jpg',
+    schema: {
+      componentName: 'Menu',
+      props: {
+        mode: 'inline',
+        defaultSelectedKeys: ['1'],
+        defaultOpenKeys: ['sub1'],
+        theme: 'dark',
+        items: [
+          {
+            key: 'item-i5wd',
+            category: 'Menu.Item',
+            children: '菜单名',
+          },
+        ],
+      },
+    },
+  },
+];