@pisell/materials 6.7.4 → 6.8.2

package/lowcode/pisell-basic-grid/meta.ts

@@ -0,0 +1,520 @@
+import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+/**
+ * PisellBasicGrid 组件元数据
+ * @description 基于 Flexbox 的基础布局组件，用于控制循环型数据组件的排列方式
+ */
+const PisellBasicGridMeta: IPublicTypeComponentMetadata = {
+  componentName: 'PisellBasicGrid',
+  title: '基础布局',
+  category: '布局',
+  group: '原子组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.3',
+    exportName: 'PisellBasicGrid',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    props: [
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Layout',
+            'zh-CN': '布局',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'direction',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Direction',
+                'zh-CN': '排列方向',
+              },
+              tip: 'direction | 控制子元素的排列方向',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['horizontal', 'horizontal-reverse', 'vertical', 'vertical-reverse'],
+            },
+            setter: [
+              {
+                componentName: 'SelectSetter',
+                props: {
+                  options: [
+                    { title: '横向排列', value: 'horizontal' },
+                    { title: '横向反向', value: 'horizontal-reverse' },
+                    { title: '竖向排列', value: 'vertical' },
+                    { title: '竖向反向', value: 'vertical-reverse' },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'horizontal',
+          },
+          {
+            name: 'wrap',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Wrap',
+                'zh-CN': '换行控制',
+              },
+              tip: 'wrap | 控制子元素是否换行',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['nowrap', 'wrap', 'wrap-reverse'],
+            },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    { title: '不换行', value: 'nowrap' },
+                    { title: '换行', value: 'wrap' },
+                    { title: '反向换行', value: 'wrap-reverse' },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'nowrap',
+          },
+          {
+            name: 'columns',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Columns',
+                'zh-CN': '一行几个',
+              },
+              tip: 'columns | 一行显示的元素个数，会自动计算宽度',
+            },
+            propType: 'number',
+            setter: [
+              {
+                componentName: 'NumberSetter',
+                props: {
+                  min: 1,
+                  max: 24,
+                },
+              },
+              'VariableSetter',
+            ],
+          },
+          {
+            name: 'equalWidth',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Equal Width',
+                'zh-CN': '等分宽度',
+              },
+              tip: 'equalWidth | 子元素是否等分容器宽度',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Spacing',
+            'zh-CN': '间距',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'gap',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Gap',
+                'zh-CN': '统一间距',
+              },
+              tip: 'gap | 统一设置行列间距',
+            },
+            propType: {
+              type: 'oneOfType',
+              value: ['number', 'string'],
+            },
+            setter: [
+              {
+                componentName: 'NumberSetter',
+                props: {
+                  min: 0,
+                },
+              },
+              'StringSetter',
+              'VariableSetter',
+            ],
+          },
+          {
+            name: 'rowGap',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Row Gap',
+                'zh-CN': '行间距',
+              },
+              tip: 'rowGap | 行间距，优先级高于 gap',
+            },
+            propType: {
+              type: 'oneOfType',
+              value: ['number', 'string'],
+            },
+            setter: [
+              {
+                componentName: 'NumberSetter',
+                props: {
+                  min: 0,
+                },
+              },
+              'StringSetter',
+              'VariableSetter',
+            ],
+          },
+          {
+            name: 'columnGap',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Column Gap',
+                'zh-CN': '列间距',
+              },
+              tip: 'columnGap | 列间距，优先级高于 gap',
+            },
+            propType: {
+              type: 'oneOfType',
+              value: ['number', 'string'],
+            },
+            setter: [
+              {
+                componentName: 'NumberSetter',
+                props: {
+                  min: 0,
+                },
+              },
+              'StringSetter',
+              'VariableSetter',
+            ],
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Alignment',
+            'zh-CN': '对齐',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'justify',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Justify',
+                'zh-CN': '主轴对齐',
+              },
+              tip: 'justify | 控制子元素在主轴上的对齐方式',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['start', 'end', 'center', 'between', 'around', 'evenly'],
+            },
+            setter: [
+              {
+                componentName: 'SelectSetter',
+                props: {
+                  options: [
+                    { title: '起始对齐', value: 'start' },
+                    { title: '末尾对齐', value: 'end' },
+                    { title: '居中对齐', value: 'center' },
+                    { title: '两端对齐', value: 'between' },
+                    { title: '等间距', value: 'around' },
+                    { title: '均匀分布', value: 'evenly' },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'start',
+          },
+          {
+            name: 'align',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Align',
+                'zh-CN': '交叉轴对齐',
+              },
+              tip: 'align | 控制子元素在交叉轴上的对齐方式',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['start', 'end', 'center', 'stretch', 'baseline'],
+            },
+            setter: [
+              {
+                componentName: 'SelectSetter',
+                props: {
+                  options: [
+                    { title: '顶部对齐', value: 'start' },
+                    { title: '底部对齐', value: 'end' },
+                    { title: '居中对齐', value: 'center' },
+                    { title: '拉伸填充', value: 'stretch' },
+                    { title: '基线对齐', value: 'baseline' },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'stretch',
+          },
+          {
+            name: 'alignContent',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Align Content',
+                'zh-CN': '多行对齐',
+              },
+              tip: 'alignContent | 当存在多行时，控制行与行之间的对齐方式',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['start', 'end', 'center', 'between', 'around', 'stretch'],
+            },
+            setter: [
+              {
+                componentName: 'SelectSetter',
+                props: {
+                  options: [
+                    { title: '顶部对齐', value: 'start' },
+                    { title: '底部对齐', value: 'end' },
+                    { title: '居中对齐', value: 'center' },
+                    { title: '两端对齐', value: 'between' },
+                    { title: '等间距', value: 'around' },
+                    { title: '拉伸填充', value: 'stretch' },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'stretch',
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Data Source',
+            'zh-CN': '数据源',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'dataSource',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Data Source',
+                'zh-CN': '数据源',
+              },
+              tip: 'dataSource | 数据源数组，传入后组件内部自动循环渲染',
+            },
+            propType: 'array',
+            setter: ['JsonSetter', 'VariableSetter'],
+          },
+          {
+            name: 'renderItem',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Render Item',
+                'zh-CN': '渲染函数',
+              },
+              tip: 'renderItem | 自定义每个数据项的渲染内容',
+            },
+            propType: 'func',
+            setter: [
+              {
+                componentName: 'SlotSetter',
+                title: '渲染插槽',
+                initialValue: {
+                  type: 'JSSlot',
+                  params: ['item', 'index'],
+                  value: [],
+                },
+              },
+              {
+                componentName: 'FunctionSetter',
+                props: {
+                  template:
+                    'renderItem(item, index, ${extParams}) {\n  // 自定义渲染逻辑\n  return null;\n}',
+                },
+              },
+              'VariableSetter',
+            ],
+          },
+          {
+            name: 'rowKey',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Row Key',
+                'zh-CN': '唯一标识',
+              },
+              tip: 'rowKey | 指定每项的唯一 key，可以是字符串或函数',
+            },
+            propType: {
+              type: 'oneOfType',
+              value: ['string', 'func'],
+            },
+            setter: [
+              'StringSetter',
+              {
+                componentName: 'FunctionSetter',
+                props: {
+                  template:
+                    'rowKey(item, index, ${extParams}) {\n  // 返回唯一 key\n  return item.id;\n}',
+                },
+              },
+              'VariableSetter',
+            ],
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Style',
+            'zh-CN': '样式',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'className',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Class Name',
+                'zh-CN': '类名',
+              },
+              tip: 'className | 自定义类名',
+            },
+            propType: 'string',
+            setter: ['StringSetter', 'VariableSetter'],
+          },
+          {
+            name: 'style',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Style',
+                'zh-CN': '样式',
+              },
+              tip: 'style | 自定义样式',
+            },
+            propType: 'object',
+            setter: 'StyleSetter',
+          },
+        ],
+      },
+    ],
+    component: {
+      isContainer: true,
+    },
+    supports: {
+      style: true,
+      className: true,
+    },
+  },
+};
+
+/**
+ * 组件片段配置
+ * @description 用于在组件面板中展示的预设配置
+ */
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: '基础布局',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellBasicGrid',
+      props: {
+        direction: 'horizontal',
+        wrap: 'wrap',
+        gap: 16,
+      },
+    },
+  },
+  {
+    title: '一行四个',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellBasicGrid',
+      props: {
+        direction: 'horizontal',
+        wrap: 'wrap',
+        columns: 4,
+        gap: 16,
+      },
+    },
+  },
+  {
+    title: '等分布局',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellBasicGrid',
+      props: {
+        direction: 'horizontal',
+        equalWidth: true,
+        gap: 12,
+      },
+    },
+  },
+  {
+    title: '竖向布局',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellBasicGrid',
+      props: {
+        direction: 'vertical',
+        gap: 16,
+      },
+    },
+  },
+];
+
+export default {
+  ...PisellBasicGridMeta,
+  snippets,
+};