@pisell/materials 1.0.1 → 1.0.3

package/lowcode/form.item/meta.ts

@@ -0,0 +1,348 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Form.Item',
+  title: '表单项',
+  category: '表单',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Form",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "Item",
+  },
+  props: [
+    {
+      name: 'name',
+      title: { label: '字段名', tip: '字段名' },
+      isRequired: true,
+      propType: 'string',
+      setter: 'StringSetter',
+      supportVariable: true
+    },
+    {
+      name: 'label',
+      title: { label: '标签', tip: '标签的文本' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'labelAlign',
+      title: { label: '标签对齐', tip: '标签文本对齐方式' },
+      propType: { type: 'oneOf', value: ['left', 'right'] },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '左',
+              value: 'left',
+            },
+            {
+              title: '右',
+              value: 'right',
+            },
+          ],
+        },
+      },
+      defaultValue: 'right',
+    },
+    {
+      name: 'colon',
+      title: {
+        label: '显示冒号',
+        tip: '配合 label 属性使用，表示是否显示 label 后面的冒号',
+      },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'extra',
+      title: {
+        label: '提示信息',
+        tip: '额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。',
+      },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'tooltip',
+      title: {
+        label: '标签提示信息',
+        tip: '标签提示信息，当需要对标签进行解释时，可以使用这个。',
+      },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'required',
+      title: {
+        label: '必填标记',
+        tip: '必填样式设置。如不设置，则会根据校验规则自动生成',
+      },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    // {
+    //   name: 'hasFeedback',
+    //   title: {
+    //     label: '校验状态图标',
+    //     tip:
+    //       '配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用',
+    //   },
+    //   propType: 'bool',
+    //   defaultValue: false,
+    // },
+    {
+      name: 'initialValue',
+      title: {
+        label: '默认值',
+        tip: '设置子元素默认值，如果与 Form 的 initialValues 冲突则以 Form 为准',
+      },
+      propType: 'string',
+      setter: 'StringSetter',
+      supportVariable: true
+    },
+    {
+      name: 'noStyle',
+      title: {
+        label: '隐藏标签',
+        tip: '为 true 时不带样式，作为纯字段控件使用',
+      },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'valuePropName',
+      title: {
+        label: '子组件值字段',
+        tip: `子节点的值的字段，如 Switch 的是 'checked'`,
+      },
+      propType: 'string',
+      defaultValue: 'value',
+      setter: 'StringSetter',
+      supportVariable: true
+    },
+    {
+      name: 'getValueFromEvent',
+      title: {
+        label: 'event转换器',
+        tip: `设置如何将 event 的值转换成字段值，如将上传组件的fileList作为value值传出`,
+      },
+      propType: 'func',
+    },
+    {
+      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: 'requiredobj',
+      title: { label: '必填设置', tip: '必填设置' },
+      propType: {
+        type: 'shape',
+        value: [
+          {
+            name: 'required',
+            title: '是否必填',
+            propType: 'bool',
+            setter: 'BoolSetter',
+            supportVariable: true,
+            extraProps: {
+              setValue(target: any, value: boolean) {
+                // 同步 必填标记
+                target.parent.parent.setPropValue('required', value);
+              }
+            }
+          },
+          {
+            name: 'message',
+            title: '错误信息提示',
+            propType: 'string',
+            setter: 'StringSetter',
+            supportVariable: true
+          },
+        ],
+      },
+    },
+    {
+      name: 'typeobj',
+      title: { label: '输入类型设置', tip: '输入类型设置' },
+      propType: {
+        type: 'shape',
+        value: [
+          {
+            name: 'type',
+            title: '输入类型',
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [
+                  {
+                    title: '字符串',
+                    value: 'string',
+                  },
+                  // {
+                  //   title: '纯数字',
+                  //   value: 'number',
+                  // },
+                  {
+                    title: '邮箱',
+                    value: 'email',
+                  },
+                  {
+                    title: '网址',
+                    value: 'url',
+                  },
+                ],
+              },
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['string', 'number', 'email', 'url'],
+            },
+          },
+          { name: 'message', title: '错误信息提示', propType: 'string' },
+        ],
+      },
+    },
+    {
+      name: 'lenobj',
+      title: { label: '长度校验设置', tip: '长度校验设置' },
+      propType: {
+        type: 'shape',
+        value: [
+          // { name: 'len', title: '固定长度', propType: 'string' },
+          { name: 'max', title: '最大长度', propType: 'number' },
+          { name: 'min', title: '最小长度', propType: 'number' },
+          { name: 'message', title: '错误信息提示', propType: 'string' },
+        ],
+      },
+    },
+    {
+      name: 'patternobj',
+      title: { label: '正则设置', tip: '正则设置' },
+      propType: {
+        type: 'shape',
+        value: [
+          { name: 'pattern', title: '正则', propType: 'string' },
+          { name: 'message', title: '错误信息提示', propType: 'string' },
+        ],
+      },
+    },
+    {
+      name: 'validator',
+      title: {
+        label: '自定义校验函数',
+        tip: '自定义校验，接收 Promise 作为返回值',
+      },
+      propType: 'func',
+    },
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+      nestingRule: { childWhitelist: [], parentWhitelist: [] },
+    },
+    supports: { style: true },
+    advanced: {
+      callbacks: {
+        onNodeRemove: (removedNode, currentNode) => {
+          if (!removedNode || !currentNode) {
+            return;
+          }
+          const { children } = currentNode;
+          // 若无children,则说明当前P组件内已为空,需要删除P组件本身
+          if (children && children.length === 0) {
+            currentNode.remove();
+          }
+        },
+      },
+    },
+  },
+};

package/lowcode/form.item/snippets.ts

@@ -0,0 +1,12 @@
+export default [
+  {
+    title: '表单项',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/form-item-1.jpg',
+    schema: {
+      componentName: 'Form.Item',
+      props: {
+        label: '表单项',
+      },
+    },
+  },
+];

package/lowcode/form.list/meta.ts

@@ -0,0 +1,42 @@
+import snippets from './snippets';
+
+export default {
+  componentName: 'Form.List',
+  title: '表单列表',
+  category: '表单',
+  snippets,
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Form",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "List",
+  },
+  props: [
+    {
+      name: 'name',
+      title: { label: '字段名', tip: '字段名' },
+      isRequired: true,
+      propType: 'string',
+    },
+    {
+      name: 'initialValue',
+      title: {
+        label: '默认值',
+        tip: '设置子元素默认值，如果与 Form 的 initialValues 冲突则以 Form 为准',
+      },
+      propType: 'object',
+      setter: 'JsonSetter',
+    },
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+    },
+    supports: { className: true, style: true },
+  },
+};

package/lowcode/form.list/snippets.ts

@@ -0,0 +1,11 @@
+export default [
+  {
+    title: '表单列表',
+    // TODO: 换成国内OSS地址
+    screenshot: 'https://user-images.githubusercontent.com/5419886/221425341-e982c944-8af4-4bad-9c17-1b2fd3fda835.png',
+    schema: {
+      componentName: 'Form.List',
+      props: {},
+    }
+  }
+]

package/lowcode/grid.col/meta.ts

@@ -0,0 +1,116 @@
+import snippets from './snippets';
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+
+export default {
+  snippets,
+  componentName: 'Col',
+  title: '栅格-列',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Col",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'span',
+      title: { label: '占位格数', tip: '栅格占位格数' },
+      propType: 'number',
+      setter: {
+        componentName: 'NumberSetter',
+        props: {
+          min: 0,
+          max: 24,
+        },
+      },
+    },
+    {
+      name: 'order',
+      title: { label: '栅格顺序', tip: '栅格顺序' },
+      propType: 'number',
+    },
+    {
+      name: 'pull',
+      title: { label: '右侧偏移', tip: '栅格往右移动格数' },
+      propType: 'number',
+      setter: {
+        componentName: 'NumberSetter',
+        props: {
+          min: 0,
+          max: 24,
+        },
+      },
+    },
+    {
+      name: 'push',
+      title: { label: '左侧偏移', tip: '栅格往左移动格数' },
+      propType: 'number',
+      setter: {
+        componentName: 'NumberSetter',
+        props: {
+          min: 0,
+          max: 24,
+        },
+      },
+    },
+  ],
+  configure: {
+    component: { isContainer: true, nestingRule: { parentWhitelist: ['Row'] } },
+    supports: { style: true },
+    advanced: {
+      getResizingHandlers: () => {
+        return ['e'];
+      },
+      callbacks: {
+        onResizeStart: (e, currentNode) => {
+          const parent = currentNode.parent;
+          if (parent) {
+            const parentNode = parent.getDOMNode();
+            if (parentNode) {
+              currentNode.parentRect = parentNode.getBoundingClientRect();
+            }
+          }
+          currentNode.beforeSpan = currentNode.getPropValue('span') || 24;
+          currentNode.startRect = currentNode.getRect();
+        },
+        onResize: (e, currentNode) => {
+          const { deltaX } = e;
+          const startWidth = currentNode.startRect
+            ? currentNode.startRect.width
+            : currentNode.beforeSpan * (currentNode.parentRect.width / 24);
+          let width = startWidth + deltaX;
+          if (!currentNode.startRect) {
+            currentNode.startRect = { width };
+          }
+          width = clamp(width, 0, currentNode.parentRect.width);
+          const allowMoveX = Math.round(width - startWidth); // 实际被允许的x轴移动
+          currentNode.moveColumn = Math.round(allowMoveX / (currentNode.parentRect.width / 24)); // 计算移动距离所占的列
+          if (allowMoveX > 0) {
+            currentNode.moveColumn++;
+          } else {
+            currentNode.moveColumn--;
+          }
+          currentNode.targetColumn = clamp(currentNode.beforeSpan + currentNode.moveColumn, 1, 24);
+          // currentNode.setPropValue('span', currentNode.targetColumn);
+          const dom = currentNode.getDOMNode();
+          dom.style.width = `${Math.round(width)}px`;
+          dom.style.flex = 'none';
+          dom.style.maxWidth = '100%';
+        },
+        onResizeEnd: (e, currentNode) => {
+          currentNode.getDOMNode().style.cssText = '';
+          currentNode.targetColumn = clamp(currentNode.targetColumn, 1, 24);
+          currentNode.setPropValue('span', currentNode.targetColumn);
+        },
+      },
+    },
+  },
+};

package/lowcode/grid.col/snippets.ts

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

package/lowcode/grid.row/meta.ts

@@ -0,0 +1,118 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Row',
+  title: '栅格-行',
+  category: '布局',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Row",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'align',
+      title: { label: '垂直对齐方式', tip: '垂直对齐方式' },
+      propType: { type: 'oneOf', value: ['top', 'middle', 'bottom'] },
+    },
+    {
+      name: 'h-gutter',
+      title: {
+        label: '水平间隔',
+        tip: '栅格水平间隔，单位为像素(px)',
+      },
+      propType: 'number',
+      setter: {
+        componentName: 'NumberSetter',
+        props: {
+          min: 0,
+        },
+      },
+      defaultValue: 0,
+      extraProps: {
+        getValue(target) {
+          const { node } = target;
+          const gutter = node.getPropValue('gutter');
+          if (typeof gutter === 'number') {
+            return gutter;
+          } else if (Array.isArray(gutter)) {
+            return gutter[0];
+          }
+          return 0;
+        },
+        setValue(target, value) {
+          const { node } = target;
+          const gutter = node.getPropValue('gutter');
+          if (Array.isArray(gutter)) {
+            gutter[0] = value;
+            node.setPropValue('gutter', gutter);
+          } else {
+            node.setPropValue('gutter', [value, 0]);
+          }
+        },
+      },
+    },
+    {
+      name: 'v-gutter',
+      title: {
+        label: '垂直间隔',
+        tip: '栅格垂直间隔，单位为像素(px)',
+      },
+      propType: 'number',
+      setter: {
+        componentName: 'NumberSetter',
+        props: {
+          min: 0,
+        },
+      },
+      defaultValue: 0,
+      extraProps: {
+        getValue(target) {
+          const { node } = target;
+          const gutter = node.getPropValue('gutter');
+          if (typeof gutter === 'number') {
+            return 0;
+          } else if (Array.isArray(gutter)) {
+            return gutter[1];
+          }
+          return 0;
+        },
+        setValue(target, value) {
+          const { node } = target;
+          const gutter = node.getPropValue('gutter');
+          if (Array.isArray(gutter)) {
+            gutter[1] = value;
+            node.setPropValue('gutter', gutter);
+          } else {
+            node.setPropValue('gutter', [gutter, value]);
+          }
+        },
+      },
+    },
+    {
+      name: 'justify',
+      title: { label: '水平排列方式', tip: '水平排列方式' },
+      propType: {
+        type: 'oneOf',
+        value: ['start', 'end', 'center', 'space-around', 'space-between'],
+      },
+    },
+    {
+      name: 'wrap',
+      title: { label: '自动换行', tip: '是否自动换行' },
+      propType: 'bool',
+      defaultValue: true,
+    },
+  ],
+  configure: {
+    component: { isContainer: true, nestingRule: { childWhitelist: ['Col'] } },
+    supports: { style: true },
+  },
+};