@pisell/materials 6.7.4 → 6.8.2

package/lowcode/pisell-super-tabs/meta.ts

@@ -0,0 +1,776 @@
+import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+/**
+ * PisellSuperTabs 组件元数据
+ * @description 通用导航框架封装的全能型 Tab 组件
+ */
+const PisellSuperTabsMeta: IPublicTypeComponentMetadata = {
+  componentName: 'PisellSuperTabs',
+  title: 'Super Tabs',
+  category: '导航',
+  group: 'Pro 组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.3',
+    exportName: 'PisellSuperTabs',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    component: {
+      isContainer: false,
+    },
+    props: [
+      /* ==================== 基础属性 ==================== */
+      {
+        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',
+      },
+
+      /* ==================== 数据源 ==================== */
+      {
+        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 | Tab 数据源数组，支持多级嵌套（children 字段）',
+            },
+            propType: {
+              type: 'arrayOf',
+              value: 'object',
+            },
+            setter: ['JsonSetter', 'VariableSetter'],
+          },
+          {
+            name: 'rowKey',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Row Key',
+                'zh-CN': '唯一标识字段',
+              },
+              tip: 'rowKey | 数据项的唯一标识字段名或函数',
+            },
+            propType: {
+              type: 'oneOfType',
+              value: ['string', 'func'],
+            },
+            setter: ['StringSetter', 'FunctionSetter', 'VariableSetter'],
+            defaultValue: 'key',
+          },
+        ],
+      },
+
+      /* ==================== 受控模式 ==================== */
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Control Mode',
+            'zh-CN': '受控模式',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'value',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Current Key',
+                'zh-CN': '当前激活的 Tab Key',
+              },
+              tip: 'value | 受控模式，需配合 onChange 使用',
+            },
+            propType: 'string',
+            setter: ['StringSetter', 'VariableSetter'],
+          },
+          {
+            name: 'defaultValue',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Default Key',
+                'zh-CN': '默认激活的 Tab Key',
+              },
+              tip: 'defaultValue | 非受控模式，仅初始化时生效',
+            },
+            propType: 'string',
+            setter: ['StringSetter', 'VariableSetter'],
+          },
+          {
+            name: 'onChange',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'On Change',
+                'zh-CN': 'Tab 切换回调',
+              },
+              tip: 'onChange | Tab 切换时的回调函数 (key, item) => void',
+            },
+            propType: 'func',
+            setter: ['FunctionSetter', 'VariableSetter'],
+          },
+        ],
+      },
+
+      /* ==================== 自定义渲染 ==================== */
+      {
+        name: "renderItem",
+        title: {
+          label: "渲染函数",
+          tip: "renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项",
+        },
+        propType: "func",
+        setter: [
+          {
+            componentName: "SlotSetter",
+            title: "渲染函数插槽",
+            initialValue: {
+              type: "JSSlot",
+              params: ["props"],
+              value: [
+                {
+                  componentName: "PisellCards.TextCard",
+                  props: {
+                    props: {
+                      type: "JSExpression",
+                      value: "this.props",
+                    }
+                  },
+                },
+              ],
+            },
+            defaultValue: {
+              type: "JSSlot",
+              params: ["props"],
+              value: [
+                {
+                  componentName: "PisellCards.TextCard",
+                  props: {
+                    props: {
+                      type: "JSExpression",
+                      value: "this.props",
+                    }
+                  },
+                },
+              ],
+            },
+          },
+          {
+            componentName: "FunctionSetter",
+            props: {
+              template:
+                "renderItem(item,${extParams}){\n// 自定义渲染列表项\nreturn `item`;\n}",
+            },
+          },
+          "VariableSetter",
+        ],
+      },
+
+      {
+        name: "slotLeft",
+        title: {
+          label: "左侧插槽",
+          tip: "slotLeft | 左侧插槽",
+        },
+        propType: "func",
+        setter: [
+          {
+            componentName: "SlotSetter",
+            title: "左侧插槽",
+          },
+          {
+            componentName: "FunctionSetter",
+            props: {
+              template:
+                "slotLeft(props){\n// 自定义渲染左侧插槽\nreturn `props`;\n}",
+            },
+          },
+          "VariableSetter",
+        ],
+      },
+
+      {
+        name: "slotRight",
+        title: {
+          label: "右侧插槽",
+          tip: "slotRight | 右侧插槽",
+        },
+        propType: "func",
+        setter: [
+          {
+            componentName: "SlotSetter",
+            title: "右侧插槽",
+          },
+          {
+            componentName: "FunctionSetter",
+            props: {
+              template:
+                "slotRight(props){\n// 自定义渲染右侧插槽\nreturn `props`;\n}",
+            },
+          },
+          "VariableSetter",
+        ],
+      },
+
+      {
+        name: "slotTop",
+        title: {
+          label: "顶部插槽",
+          tip: "slotTop | 顶部插槽",
+        },
+        propType: "func",
+        setter: [
+          {
+            componentName: "SlotSetter",
+            title: "顶部插槽",
+          },
+          {
+            componentName: "FunctionSetter",
+            props: {
+              template:
+                "slotTop(props){\n// 自定义渲染顶部插槽\nreturn `props`;\n}",
+            },
+          },
+          "VariableSetter",
+        ],
+      },
+
+      {
+        name: "slotBottom",
+        title: {
+          label: "底部插槽",
+          tip: "slotBottom | 底部插槽",
+        },
+        propType: "func",
+        setter: [
+          {
+            componentName: "SlotSetter",
+            title: "底部插槽",
+          },
+          {
+            componentName: "FunctionSetter",
+            props: {
+              template:
+                "slotBottom(props){\n// 自定义渲染底部插槽\nreturn `props`;\n}",
+            },
+          },
+          "VariableSetter",
+        ],
+      },
+
+      /* ==================== PisellBasicGrid Props ==================== */
+      {
+        name: 'gridProps',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Grid Props',
+            'zh-CN': '布局配置',
+          },
+          tip: 'gridProps | PisellBasicGrid 组件的配置',
+        },
+        propType: 'object',
+        setter: {
+          componentName: 'ObjectSetter',
+          props: {
+            config: {
+              items: [
+                {
+                  name: 'direction',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Direction',
+                      'zh-CN': '排列方向',
+                    },
+                  },
+                  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' },
+                      ],
+                    },
+                  },
+                  defaultValue: 'horizontal',
+                },
+                {
+                  name: 'wrap',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Wrap',
+                      'zh-CN': '换行控制',
+                    },
+                  },
+                  propType: {
+                    type: 'oneOf',
+                    value: ['nowrap', 'wrap', 'wrap-reverse'],
+                  },
+                  setter: {
+                    componentName: 'SelectSetter',
+                    props: {
+                      options: [
+                        { title: '不换行', value: 'nowrap' },
+                        { title: '换行', value: 'wrap' },
+                        { title: '反向换行', value: 'wrap-reverse' },
+                      ],
+                    },
+                  },
+                  defaultValue: 'nowrap',
+                },
+                {
+                  name: 'columns',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Columns',
+                      'zh-CN': '一行显示个数',
+                    },
+                  },
+                  propType: 'number',
+                  setter: 'NumberSetter',
+                },
+                {
+                  name: 'equalWidth',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Equal Width',
+                      'zh-CN': '等分容器宽度',
+                    },
+                  },
+                  propType: 'bool',
+                  setter: 'BoolSetter',
+                  defaultValue: false,
+                },
+                {
+                  name: 'gap',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Gap',
+                      'zh-CN': '间距',
+                    },
+                  },
+                  propType: {
+                    type: 'oneOfType',
+                    value: ['number', 'string'],
+                  },
+                  setter: ['NumberSetter', 'StringSetter'],
+                },
+                {
+                  name: 'rowGap',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Row Gap',
+                      'zh-CN': '行间距',
+                    },
+                  },
+                  propType: {
+                    type: 'oneOfType',
+                    value: ['number', 'string'],
+                  },
+                  setter: ['NumberSetter', 'StringSetter'],
+                },
+                {
+                  name: 'columnGap',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Column Gap',
+                      'zh-CN': '列间距',
+                    },
+                  },
+                  propType: {
+                    type: 'oneOfType',
+                    value: ['number', 'string'],
+                  },
+                  setter: ['NumberSetter', 'StringSetter'],
+                },
+                {
+                  name: 'justify',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Justify',
+                      'zh-CN': '主轴对齐',
+                    },
+                  },
+                  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' },
+                      ],
+                    },
+                  },
+                  defaultValue: 'start',
+                },
+                {
+                  name: 'align',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Align',
+                      'zh-CN': '交叉轴对齐',
+                    },
+                  },
+                  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' },
+                      ],
+                    },
+                  },
+                  defaultValue: 'stretch',
+                },
+                {
+                  name: 'className',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Class Name',
+                      'zh-CN': 'Grid 类名',
+                    },
+                  },
+                  propType: 'string',
+                  setter: 'StringSetter',
+                },
+              ],
+            },
+          },
+        },
+      },
+
+      /* ==================== PisellScrollView Props ==================== */
+      {
+        name: 'scrollViewProps',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Scroll View Props',
+            'zh-CN': '滚动配置',
+          },
+          tip: 'scrollViewProps | PisellScrollView 组件的配置',
+        },
+        propType: 'object',
+        setter: {
+          componentName: 'ObjectSetter',
+          props: {
+            config: {
+              items: [
+                {
+                  name: 'overflow',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Overflow',
+                      'zh-CN': '滚动方向',
+                    },
+                  },
+                  propType: {
+                    type: 'oneOf',
+                    value: ['auto', 'scroll', 'hidden', 'x', 'y', 'both'],
+                  },
+                  setter: {
+                    componentName: 'SelectSetter',
+                    props: {
+                      options: [
+                        { title: '自动', value: 'auto' },
+                        { title: '强制滚动', value: 'scroll' },
+                        { title: '隐藏', value: 'hidden' },
+                        { title: '横向', value: 'x' },
+                        { title: '竖向', value: 'y' },
+                        { title: '双向', value: 'both' },
+                      ],
+                    },
+                  },
+                  defaultValue: 'auto',
+                },
+                {
+                  name: 'scrollbarStyle',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Scrollbar Style',
+                      'zh-CN': '滚动条样式',
+                    },
+                  },
+                  propType: {
+                    type: 'oneOf',
+                    value: ['default', 'thin', 'minimal', 'rounded', 'overlay', 'custom', 'none'],
+                  },
+                  setter: {
+                    componentName: 'SelectSetter',
+                    props: {
+                      options: [
+                        { title: '默认', value: 'default' },
+                        { title: '细', value: 'thin' },
+                        { title: '极简', value: 'minimal' },
+                        { title: '圆角', value: 'rounded' },
+                        { title: '悬浮', value: 'overlay' },
+                        { title: '自定义', value: 'custom' },
+                        { title: '无', value: 'none' },
+                      ],
+                    },
+                  },
+                  defaultValue: 'default',
+                },
+                {
+                  name: 'scrollActionsConfig',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Scroll Actions',
+                      'zh-CN': '滚动按钮',
+                    },
+                  },
+                  propType: 'object',
+                  setter: 'JsonSetter',
+                },
+                {
+                  name: 'snapScroll',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Snap Scroll',
+                      'zh-CN': '吸附滚动',
+                    },
+                  },
+                  propType: 'object',
+                  setter: 'JsonSetter',
+                },
+                {
+                  name: 'width',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Width',
+                      'zh-CN': '宽度',
+                    },
+                  },
+                  propType: {
+                    type: 'oneOfType',
+                    value: ['number', 'string'],
+                  },
+                  setter: ['NumberSetter', 'StringSetter'],
+                },
+                {
+                  name: 'height',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Height',
+                      'zh-CN': '高度',
+                    },
+                  },
+                  propType: {
+                    type: 'oneOfType',
+                    value: ['number', 'string'],
+                  },
+                  setter: ['NumberSetter', 'StringSetter'],
+                },
+                {
+                  name: 'maxWidth',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Max Width',
+                      'zh-CN': '最大宽度',
+                    },
+                  },
+                  propType: {
+                    type: 'oneOfType',
+                    value: ['number', 'string'],
+                  },
+                  setter: ['NumberSetter', 'StringSetter'],
+                },
+                {
+                  name: 'maxHeight',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Max Height',
+                      'zh-CN': '最大高度',
+                    },
+                  },
+                  propType: {
+                    type: 'oneOfType',
+                    value: ['number', 'string'],
+                  },
+                  setter: ['NumberSetter', 'StringSetter'],
+                },
+                {
+                  name: 'className',
+                  title: {
+                    label: {
+                      type: 'i18n',
+                      'en-US': 'Class Name',
+                      'zh-CN': 'ScrollView 类名',
+                    },
+                  },
+                  propType: 'string',
+                  setter: 'StringSetter',
+                },
+
+              ],
+            },
+          },
+        },
+      },
+    ],
+    supports: {
+      className: true,
+      style: true,
+    },
+  },
+};
+
+/**
+ * Snippets
+ */
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: 'Super Tabs',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellSuperTabs',
+      props: {
+        dataSource: [
+          { key: 'tab1', label: 'Tab 1' },
+          { key: 'tab2', label: 'Tab 2' },
+          { key: 'tab3', label: 'Tab 3' },
+        ],
+        gridProps: {
+          direction: 'horizontal',
+          gap: 16,
+        },
+        scrollViewProps: {
+          overflow: 'auto',
+        },
+      },
+    },
+  },
+  {
+    title: 'Super Tabs (横向)',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellSuperTabs',
+      props: {
+        dataSource: [
+          { key: 'home', label: '首页' },
+          { key: 'products', label: '产品' },
+          { key: 'about', label: '关于' },
+          { key: 'contact', label: '联系' },
+        ],
+        gridProps: {
+          direction: 'horizontal',
+          gap: 16,
+        },
+        scrollViewProps: {
+          overflow: 'x',
+          scrollbarStyle: 'thin',
+        },
+      },
+    },
+  },
+  {
+    title: 'Super Tabs (竖向)',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellSuperTabs',
+      props: {
+        dataSource: [
+          { key: 'menu1', label: '菜单 1' },
+          { key: 'menu2', label: '菜单 2' },
+          { key: 'menu3', label: '菜单 3' },
+          { key: 'menu4', label: '菜单 4' },
+        ],
+        gridProps: {
+          direction: 'vertical',
+          gap: 8,
+        },
+        scrollViewProps: {
+          overflow: 'y',
+          height: '100vh',
+        },
+      },
+    },
+  },
+];
+
+export default {
+  ...PisellSuperTabsMeta,
+  snippets,
+};
+