@pisell/materials 1.0.1 → 1.0.3

package/lowcode/dropdown/meta.ts

@@ -0,0 +1,143 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Dropdown',
+  title: '下拉菜单',
+  category: '导航',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Dropdown",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        name: 'open',
+        title: { label: '菜单是否显示', tip: '菜单是否显示' },
+        propType: { type: 'oneOf', value: [true, false, '-'] },
+        defaultValue: '-',
+        setter: {
+          componentName: 'RadioGroupSetter',
+          props: {
+            options: [
+              {
+                title: '默认非受控',
+                value: '-',
+              },
+              {
+                title: '显示',
+                value: true,
+              },
+              {
+                title: '不显示',
+                value: false,
+              },
+            ],
+          },
+        },
+        extraProps: {
+          getValue(target, fieldValue) {
+            const { node } = target;
+            let value = node.getPropValue('open');
+            if (value === undefined) {
+              value = '-';
+            }
+            return value;
+          },
+          setValue(target, value) {
+            const { node } = target;
+            if (value === '-') {
+              setTimeout(() => {
+                node.clearPropValue('open');
+              });
+            }
+          },
+        },
+      },
+      {
+        name: 'arrow',
+        title: { label: '显示下拉箭头', tip: '是否显示下拉箭头' },
+        propType: 'bool',
+        defaultValue: false,
+      },
+      {
+        name: 'disabled',
+        title: { label: '是否禁用', tip: '是否为禁用状态' },
+        propType: 'bool',
+      },
+      // {
+      //   name: 'getPopupContainer',
+      //   title: {
+      //     label: '渲染父节点',
+      //     tip:
+      //       '菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010)',
+      //   },
+      //   propType: 'func',
+      // },
+      {
+        name: 'overlay',
+        title: { label: '菜单', tip: '菜单' },
+        propType: { type: 'oneOfType', value: ['node', 'func'] },
+      },
+      // {
+      //   name: 'overlayClassName',
+      //   title: { label: '根元素的类名称', tip: '根元素的类名称' },
+      //   propType: 'string',
+      // },
+      // {
+      //   name: 'overlayStyle',
+      //   title: { label: '根元素的样式', tip: '根元素的样式' },
+      //   propType: 'object',
+      // },
+      {
+        name: 'placement',
+        title: {
+          label: '弹出位置',
+          tip:
+            '菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight`',
+        },
+        propType: {
+          type: 'oneOf',
+          value: ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'],
+        },
+      },
+      {
+        name: 'trigger',
+        title: {
+          label: '触发下拉的行为',
+          tip: '触发下拉的行为, 移动端不支持 hover',
+        },
+        propType: {
+          type: 'arrayOf',
+          value: { type: 'oneOf', value: ['click', 'hover', 'contextMenu'] },
+        },
+      },
+      {
+        name: 'onOpenChange',
+        title: {
+          label: '显示状态回调',
+          tip: '菜单显示状态改变时调用，参数为 `open`',
+        },
+        propType: 'func',
+      },
+    ],
+    component: { isContainer: true },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onOpenChange',
+          template:
+            "onOpenChange(open,${extParams}){\n// 菜单显示状态改变时调用\nconsole.log('onOpenChange',open);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/dropdown/snippets.ts

@@ -0,0 +1,73 @@
+export default [
+  {
+    title: '下拉菜单',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/dropdown-1.png',
+    schema: {
+      componentName: 'Dropdown',
+      props: {
+        overlay: {
+          type: 'JSSlot',
+          value: [
+            {
+              componentName: 'Menu',
+              props: {
+                items: [
+                  {
+                    key: 'timeLinei5wd',
+                    category: 'Item',
+                    title: '菜单名',
+                  },
+                ],
+              },
+              children: [
+                {
+                  componentName: 'Menu.Item',
+                  id: 'node_ocky01yzdq3',
+                  props: {
+                    key: 'timeLinei5wd',
+                    category: 'Item',
+                    title: '菜单名',
+                    children: '菜单名',
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      },
+      children: [
+        {
+          componentName: 'Button',
+          props: {
+            type: 'link',
+            children: {
+              type: 'JSSlot',
+              value: [
+                {
+                  componentName: 'Typography.Text',
+                  props: {
+                    children: 'Hover me',
+                    style: {
+                      color: 'inherit',
+                    },
+                  },
+                },
+                {
+                  componentName: 'Icon',
+                  props: {
+                    type: 'DownOutlined',
+                    size: 15,
+                    style: {
+                      marginLeft: 4,
+                      verticalAlign: 'middle',
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      ],
+    },
+  },
+];

package/lowcode/empty/meta.ts

@@ -0,0 +1,40 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Empty',
+  title: '空状态',
+  category: '数据展示',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Empty",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'description',
+      title: { label: '内容描述', tip: '自定义描述内容' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    // {
+    //   name: 'imageStyle',
+    //   title: { label: '图片样式', tip: '图片样式' },
+    //   propType: 'object',
+    // },
+    {
+      name: 'image',
+      title: {
+        label: '图片地址',
+        tip: '设置显示图片，为string时表示自定义图片地址。',
+      },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+  ],
+  configure: { supports: { style: true } },
+};

package/lowcode/empty/snippets.ts

@@ -0,0 +1,10 @@
+export default [
+  {
+    title: '空状态',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/empty-1.png',
+    schema: {
+      componentName: 'Empty',
+      props: {},
+    },
+  },
+];

package/lowcode/form/meta.ts

@@ -0,0 +1,380 @@
+import snippets from './snippets';
+import { uuid } from '../_utils/utils'
+
+export default {
+  snippets,
+  componentName: 'Form',
+  title: '表单容器',
+  category: '表单',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Form",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'ref',
+      title: {
+        label: 'ref',
+        tip: 'ref | 通过 this.$(\'xxx\') 获取到组件实例',
+      },
+      defaultValue: () => {
+        return `form_${uuid()}`
+      },
+      setter: 'StringSetter',
+      supportVariable: true
+    },
+    {
+      name: 'values',
+      title: { label: '表单数据源', tip: '表单数据源' },
+      propType: 'object',
+      setter: 'JsonSetter',
+      supportVariable: true
+    },
+    {
+      name: 'colon',
+      title: { label: '展示冒号', tip: '' },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'hideRequiredMark',
+      title: { label: '隐藏必填标记', tip: '隐藏必填标记' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      type: 'group',
+      title: '布局',
+      display: 'accordion',
+      items: [
+        {
+          name: 'labelCol',
+          title: '标签栅格布局设置',
+          display: 'inline',
+          setter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'span',
+                    title: '宽度',
+                    setter: {
+                      componentName: 'NumberSetter',
+                      props: {
+                        min: 0,
+                        max: 24,
+                      },
+                    },
+                  },
+                  {
+                    name: 'offset',
+                    title: '偏移',
+                    setter: {
+                      componentName: 'NumberSetter',
+                      props: {
+                        min: 0,
+                        max: 24,
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          },
+          description:
+            'label 标签布局，同 `<Col>` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效',
+        },
+        {
+          name: 'wrapperCol',
+          title: '内容栅格布局设置',
+          display: 'inline',
+          setter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'span',
+                    title: '宽度',
+                    setter: {
+                      componentName: 'NumberSetter',
+                      props: {
+                        min: 0,
+                        max: 24,
+                      },
+                    },
+                  },
+                  {
+                    name: 'offset',
+                    title: '偏移',
+                    setter: {
+                      componentName: 'NumberSetter',
+                      props: {
+                        min: 0,
+                        max: 24,
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          },
+          description: '需要为输入控件设置布局样式时，使用该属性，用法同 labelCol',
+        },
+      ],
+    },
+    {
+      name: 'labelAlign',
+      title: {
+        label: '标签对齐',
+        tip: 'label 标签的文本对齐方式',
+      },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '左',
+              value: 'left',
+            },
+            {
+              title: '右',
+              value: 'right',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['left', 'right'] },
+      defaultValue: 'right',
+    },
+    {
+      name: 'layout',
+      title: { label: '表单布局', tip: '表单布局' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '水平',
+              value: 'horizontal',
+            },
+            {
+              title: '垂直',
+              value: 'vertical',
+            },
+            {
+              title: '行内',
+              value: 'inline',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['horizontal', 'vertical', 'inline'] },
+      defaultValue: 'horizontal',
+    },
+    {
+      name: 'name',
+      title: {
+        label: '表单名称',
+        tip: '表单名称，会作为表单字段 `id` 前缀使用',
+      },
+      propType: 'string',
+      setter: 'StringSetter',
+      supportVariable: true
+    },
+    {
+      name: 'preserve',
+      title: {
+        label: '删除时保留值',
+        tip: '当字段被删除时保留字段值',
+      },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'scrollToFirstError',
+      title: {
+        label: '滚至错误',
+        tip: '提交失败自动滚动到第一个错误字段',
+      },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'size',
+      title: {
+        label: '字段组件尺寸',
+        tip: '设置字段组件的尺寸（仅限 antd 组件）',
+      },
+      propType: { type: 'oneOf', value: ['small', 'middle', 'large'] },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '大',
+              value: 'large',
+            },
+            {
+              title: '中',
+              value: 'middle',
+            },
+            {
+              title: '小',
+              value: 'small',
+            },
+          ],
+        },
+      },
+      defaultValue: 'middle',
+    },
+    {
+      name: 'validateMessages',
+      title: { label: '验证提示模板', tip: '验证提示模板' },
+      setter: 'JsonSetter',
+      defaultValue: { required: "'${name}' 不能为空" },
+    },
+    {
+      name: 'validateTrigger',
+      title: { label: '校验时机', tip: '所有字段校验触发时机' },
+      propType: {
+        type: 'oneOf',
+        value: ['onChange', 'onBlur'],
+      },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '当前值变化时',
+              value: 'onChange',
+            },
+            {
+              title: '失去焦点时',
+              value: 'onBlur',
+            },
+          ],
+        },
+      },
+    },
+    {
+      name: 'onFinish',
+      title: {
+        label: '提交表单且数据验证成功后回调事件',
+        tip: '提交表单且数据验证成功后回调事件',
+      },
+      propType: 'func',
+    },
+    {
+      name: 'onFinishFailed',
+      title: {
+        label: '提交表单且数据验证失败后回调事件',
+        tip: '提交表单且数据验证失败后回调事件',
+      },
+      propType: 'func',
+    },
+    {
+      name: 'onFieldsChange',
+      title: { label: '字段更新时触发回调事件', tip: '字段更新时触发回调事件' },
+      propType: 'func',
+    },
+    {
+      name: 'onValuesChange',
+      title: {
+        label: '字段值更新时触发回调事件',
+        tip: '字段值更新时触发回调事件',
+      },
+      propType: 'func',
+    },
+  ],
+  configure: {
+    component: { isContainer: true },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onFinish',
+          template:
+            "onFinish(values,${extParams}){\n// 提交表单且数据验证成功后回调事件\nconsole.log('onFinish',values);}",
+        },
+        {
+          name: 'onFinishFailed',
+          template:
+            "onFinishFailed({values,errorFields,outOfDate},${extParams}){\n// 提交表单且数据验证失败后回调事件\nconsole.log('onFinishFailed',values, errorFields, outOfDate);}",
+        },
+        {
+          name: 'onFieldsChange',
+          template:
+            "onFieldsChange(changedFields,allFields,${extParams}){\n// 字段更新时触发回调事件\nconsole.log('onFieldsChange',changedFields,allFields);}",
+        },
+        {
+          name: 'onValuesChange',
+          template:
+            "onValuesChange(changedValues,allValues,${extParams}){\n// 字段值更新时触发回调事件\nconsole.log('onValuesChange',changedValues,allValues);}",
+        },
+      ],
+    },
+    advanced: {
+      callbacks: {
+        onNodeAdd: (dragment, currentNode) => {
+          const comps = [
+            'Input',
+            'Select',
+            'Radio',
+            'Checkbox',
+            'Switch',
+            'Upload',
+            'Datepicker',
+            'Rate',
+            'Transfer',
+          ];
+
+          if (
+            !dragment ||
+            !dragment.componentMeta ||
+            !dragment.componentMeta.npm ||
+            !dragment.componentMeta.npm.package ||
+            dragment.componentMeta.npm.package.indexOf('@alilc/antd-lowcode-materials') === -1 ||
+            comps.every((comp) => dragment.componentName.indexOf(comp) === -1)
+          ) {
+            return;
+          }
+
+          // 为目标元素包裹一层P
+          const layoutPNode = currentNode.document.createNode({
+            componentName: 'Form.Item',
+            props: {
+              label: '表单项: ',
+            },
+            children: [dragment.exportSchema()],
+          });
+          // 当前dragment还未添加入node子节点,需要setTimeout处理
+          setTimeout(() => {
+            currentNode.replaceChild(
+              dragment,
+              layoutPNode.exportSchema(),
+              // 避免生成新的 nodeId
+              { reserveSchemaNodeId: true },
+            );
+          }, 1);
+        },
+      },
+    },
+  },
+};