@pisell/materials 1.0.449 → 1.0.451

package/lowcode/form-group/meta.ts

@@ -0,0 +1,346 @@
+import snippets from './snippets';
+import { createFormItemSchema, formSchema2PisellFieldsOptions, getVariable } from '../data-source-form/utils';
+
+export default {
+  snippets,
+  componentName: 'FormGroup',
+  title: '分组',
+  category: '表单',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'FormGroup',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  generalProps: [
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Info',
+        'zh-CN': '信息',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'title',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Title',
+              'zh-CN': '标题',
+            },
+            tip: '标题',
+          },
+          // display: 'block',
+          propType: 'string',
+          setter: 'PisellI18nSetter',
+        },
+        {
+          name: 'description',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Description',
+              'zh-CN': '描述',
+            },
+            tip: '描述',
+          },
+          // display: 'block',
+          propType: 'string',
+          setter: 'PisellI18nSetter',
+        },
+      ],
+    },
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Data',
+        'zh-CN': '数据',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'dataSource',
+          title: {
+            type: 'i18n',
+            'en-US': 'Source',
+            'zh-CN': '数据源',
+          },
+          display: 'inline',
+          extraProps: {
+            getValue(target: any) {
+              const dataSource = target.node.parent.getProps().getPropValue('dataSource');
+              return dataSource?.key || dataSource?.tableName;
+            },
+          },
+          setter: {
+            componentName: 'PisellDataSourceSetter',
+            props: {
+              disabled: true,
+            },
+          },
+        },
+        {
+          title: '字段',
+          display: 'entry',
+          type: 'group',
+          items: [
+            {
+              title: {
+                type: 'i18n',
+                'en-US': 'Fields',
+                'zh-CN': '字段',
+              },
+              name: '_fields',
+              propType: 'object',
+              display: 'block',
+              setter: {
+                componentName: 'PisellFieldSetter',
+                props: (target: any) => {
+                  const formSchema = target.node.parent.schema;
+                  const allFields = getVariable(target.node.parent, 'currentFields');
+                  const options = formSchema2PisellFieldsOptions(
+                    formSchema,
+                    allFields
+                  );
+                  return {
+                    options,
+                    currentGroup: target.node.id,
+                  };
+                },
+              },
+              extraProps: {
+                setValue(target: any, value: any) {
+                  const { operate } = value;
+                  const { field } = operate;
+                  if (value.operate.mode === 'hidden') {
+                    target.node.document.removeNode(field);
+                  } else if (value.operate.mode === 'show') {
+                    // 需要追加的元素容器 优先顺序 1.当前表单最后一个分组 -> 2.当前表单
+                    let appendContainer = target.node;
+                    let lastGroup: any;
+                    target.node.children.forEach((item: any) => {
+                      if (item.componentName === 'FormGroup') {
+                        lastGroup = item;
+                      }
+                    });
+                    appendContainer = lastGroup || appendContainer;
+                    // 全部字段
+                    const allFields = getVariable(target.node.parent, 'currentFields');
+                    
+                    const nocobaseField = allFields.find(
+                      (item: any) => item.name === field
+                    );
+                    if (nocobaseField) {
+                      const appendSchema = createFormItemSchema(nocobaseField);
+                      const appendNode =
+                        target.node.document.createNode(appendSchema);
+                      appendContainer.children.insert(appendNode);
+                    }
+                  }
+                  return {};
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Appearance',
+        'zh-CN': '外观',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'showTitle',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Show group title',
+              'zh-CN': '显示分组标题',
+            },
+            tip: '',
+          },
+          propType: 'bool',
+          defaultValue: true,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'showDescription',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Show description',
+              'zh-CN': '显示分组描述',
+            },
+            tip: '',
+          },
+          propType: 'bool',
+          defaultValue: true,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'showBackgroundColor',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Show background color',
+              'zh-CN': '显示背景颜色',
+            },
+            tip: '',
+          },
+          propType: 'bool',
+          defaultValue: true,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'backgroundColor',
+          condition(target) {
+            return !!target.getProps().getPropValue('showBackgroundColor');
+          },
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Background color',
+              'zh-CN': '背景颜色',
+            },
+            tip: '',
+          },
+          propType: 'string',
+          defaultValue: '#f6f8fc',
+          setter: 'ColorSetter',
+        },
+      ],
+    },
+  ],
+  props: [
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Info',
+        'zh-CN': '信息',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'title',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Title',
+              'zh-CN': '标题',
+            },
+            tip: '标题',
+          },
+          // display: 'block',
+          propType: 'string',
+          setter: 'PisellI18nSetter',
+        },
+        {
+          name: 'description',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Description',
+              'zh-CN': '描述',
+            },
+            tip: '描述',
+          },
+          // display: 'block',
+          propType: 'string',
+          setter: 'PisellI18nSetter',
+        },
+      ],
+    },
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Appearance',
+        'zh-CN': '外观',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'showTitle',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Show group title',
+              'zh-CN': '显示分组标题',
+            },
+            tip: '',
+          },
+          propType: 'bool',
+          defaultValue: true,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'showDescription',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Show description',
+              'zh-CN': '显示分组描述',
+            },
+            tip: '',
+          },
+          propType: 'bool',
+          defaultValue: true,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'showBackgroundColor',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Show background color',
+              'zh-CN': '显示背景颜色',
+            },
+            tip: '',
+          },
+          propType: 'bool',
+          defaultValue: true,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'backgroundColor',
+          condition(target) {
+            return !!target.getProps().getPropValue('showBackgroundColor');
+          },
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Background color',
+              'zh-CN': '背景颜色',
+            },
+            tip: '',
+          },
+          propType: 'string',
+          defaultValue: '#f6f8fc',
+          setter: 'ColorSetter',
+        },
+      ],
+    },
+  ],
+  configure: {
+    component: { isContainer: true },
+    supports: {
+      style: true,
+      events: [],
+    },
+  },
+};

package/lowcode/form-group/snippets.ts

@@ -0,0 +1,16 @@
+export default [
+  {
+    title: '分组',
+    schema: {
+      componentName: 'FormGroup',
+      props: {
+        title: 'Group',
+        showTitle: true,
+        showDescription: true,
+        showBackgroundColor: true,
+        backgroundColor: '#F9FAFB',
+      },
+      children: [],
+    },
+  },
+];

package/lowcode/form-item-checkbox/meta.ts

@@ -0,0 +1,88 @@
+import snippets from './snippets';
+import { formItemGeneralProps } from "../_utils/defaultSchema";
+
+export default {
+  snippets,
+  componentName: 'FormItemCheckbox',
+  title: '多选框',
+  category: '表单',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'FormItemCheckbox',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  generalProps: formItemGeneralProps,
+  configure: {
+    props: [
+      {
+        name: 'children',
+        title: { label: '内容', tip: '内容' },
+        propType: 'string',
+        setter: 'PisellI18nSetter',
+        supportVariable: true,
+      },
+      {
+        name: 'autoFocus',
+        title: { label: '自动聚焦', tip: '自动获取焦点' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true,
+      },
+      {
+        name: 'checked',
+        title: { label: '当前值', tip: '指定当前是否选中' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true,
+      },
+      {
+        name: 'defaultChecked',
+        title: { label: '默认值', tip: '初始是否选中' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true,
+      },
+      {
+        name: 'disabled',
+        title: { label: '是否禁用', tip: '是否为禁用状态' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true,
+      },
+      {
+        name: 'indeterminate',
+        title: { label: '不确定状态', tip: 'indeterminate状态' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true,
+      },
+      {
+        name: 'onChange',
+        title: { label: '变化时回调函数', tip: '变化时回调函数' },
+        propType: 'func',
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(event,${extParams}){\n// 变化时回调函数\nconsole.log('onChange', event);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/form-item-checkbox/snippets.ts

@@ -0,0 +1,35 @@
+export default [
+  {
+    title: '多选框',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/checkbox-1.png',
+    schema: {
+      componentName: 'FormItemCheckbox',
+      props: {
+        children: 'FormItemCheckbox',
+      },
+    },
+  },
+  {
+    title: '多选框组',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/checkbox-group-1.png',
+    schema: {
+      componentName: 'FormItemCheckbox.Group',
+      props: {
+        options: [
+          {
+            label: 'A',
+            value: 'A',
+          },
+          {
+            label: 'B',
+            value: 'B',
+          },
+          {
+            label: 'C',
+            value: 'C',
+          },
+        ],
+      },
+    },
+  },
+];

package/lowcode/form-item-checkbox.group/meta.ts

@@ -0,0 +1,159 @@
+import { uuid } from '../_utils/utils';
+import { formItemGeneralProps } from "../_utils/defaultSchema";
+
+export default {
+  componentName: 'FormItemCheckbox.Group',
+  title: '多选框组',
+  category: '表单',
+  group: "无代码组件",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "FormItemCheckbox",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "Group",
+  },
+  generalProps: formItemGeneralProps,
+
+  props: [
+    {
+      name: 'defaultValue',
+      title: { label: '默认值', tip: '默认选中值' },
+      propType: { type: 'arrayOf', value: 'string' },
+      defaultValue: [],
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'StringSetter',
+          }
+        }
+      },
+      supportVariable: true
+    },
+    {
+      name: 'value',
+      title: { label: '当前值', tip: '当前选中的选项' },
+      propType: { type: 'arrayOf', value: 'string' },
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'StringSetter',
+          }
+        }
+      },
+      supportVariable: true
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否为禁用状态' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'name',
+      title: { label: 'name属性', tip: 'name属性' },
+      propType: 'string',
+      setter: 'StringSetter',
+      supportVariable: true
+    },
+    {
+      name: 'options',
+      title: { label: '指定可选项', tip: '指定可选项' },
+      propType: {
+        type: 'arrayOf',
+        value: {
+          type: 'shape',
+          value: [
+            {
+              name: 'label',
+              description: '选项名',
+              propType: 'string',
+              defaultValue: '选项名',
+            },
+            {
+              name: 'value',
+              description: '选项值',
+              propType: 'string',
+              defaultValue: '选项值',
+            },
+            {
+              name: 'disabled',
+              description: '是否禁用',
+              propType: 'bool',
+              defaultValue: false,
+            },
+          ],
+        },
+      },
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'label',
+                    title: '选项名',
+                    setter: 'PisellI18nSetter',
+                    isRequired: true
+                  },
+                  {
+                    name: 'value',
+                    title: '选项值',
+                    setter: 'StringSetter',
+                    isRequired: true
+                  },
+                  {
+                    name: 'disabled',
+                    title: '是否禁用',
+                    setter: 'BoolSetter',
+                  },
+                ],
+              },
+            },
+            initialValue: () => {
+              return {
+                label: '选项名',
+                value: uuid(),
+                disabled: false,
+              };
+            },
+          },
+        },
+      },
+      supportVariable: true
+    },
+    {
+      name: 'direction',
+      title: { label: '排布方向', tip: '排布方向' },
+      propType: { type: 'oneOf', value: ['vertical', 'horizontal'] },
+    },
+    {
+      name: 'onChange',
+      title: { label: '变化时回调函数', tip: '变化时回调函数' },
+      propType: 'func',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(checkedValue,${extParams}){\n// 变化时回调函数\nconsole.log('onChange', checkedValue);}",
+        },
+      ],
+    },
+  },
+};