@pisell/materials 6.7.2 → 6.7.3

package/lowcode/tab-card/meta.ts

@@ -0,0 +1,587 @@
+import { IPublicTypeComponentMetadata } from '@alilc/lowcode-types';
+import snippets from './snippets';
+
+const TabCardMeta: IPublicTypeComponentMetadata = {
+  componentName: 'PisellCards.TabCard',
+  title: '标签卡片',
+  category: '基础组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.3',
+    exportName: 'PisellCards',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: 'TabCard',
+  },
+  configure: {
+    props: [
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Basic',
+            'zh-CN': '基础',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'tabKey',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Tab Key',
+                'zh-CN': '标签标识',
+              },
+              tip: 'tabKey | 标签唯一标识，必填',
+            },
+            propType: {
+              type: 'oneOfType',
+              value: ['string', 'number'],
+            },
+            setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
+            isRequired: true,
+          },
+          {
+            name: 'label',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Label',
+                'zh-CN': '标签文本',
+              },
+              tip: 'label | 标签显示的文本内容，必填',
+            },
+            propType: {
+              type: 'oneOfType',
+              value: ['string', 'node'],
+            },
+            setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
+            isRequired: true,
+          },
+          {
+            name: 'icon',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Icon',
+                'zh-CN': '图标',
+              },
+              tip: 'icon | 标签图标',
+            },
+            propType: {
+              type: 'oneOfType',
+              value: ['node'],
+            },
+            setter: {
+              componentName: 'SlotSetter',
+              initialValue: {
+                type: 'JSSlot',
+                value: [
+                  {
+                    componentName: 'Icon',
+                    props: {
+                      type: 'AppstoreOutlined',
+                      size: 16,
+                    },
+                  },
+                ],
+              },
+            },
+          },
+          {
+            name: 'direction',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Direction',
+                'zh-CN': '布局方向',
+              },
+              tip: 'direction | 图标和文本的布局方向',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['horizontal', 'vertical'],
+            },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    {
+                      title: '水平',
+                      value: 'horizontal',
+                    },
+                    {
+                      title: '垂直',
+                      value: 'vertical',
+                    },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'horizontal',
+          },
+          {
+            name: 'size',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Size',
+                'zh-CN': '尺寸',
+              },
+              tip: 'size | 标签尺寸',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['small', 'medium', 'large'],
+            },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    {
+                      title: '小',
+                      value: 'small',
+                    },
+                    {
+                      title: '中',
+                      value: 'medium',
+                    },
+                    {
+                      title: '大',
+                      value: 'large',
+                    },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'medium',
+          },
+          {
+            name: 'className',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'ClassName',
+                'zh-CN': '样式类名',
+              },
+              tip: 'className | 自定义样式类名',
+            },
+            propType: 'string',
+            setter: 'StringSetter',
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Badge',
+            'zh-CN': '徽章',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'badge',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Badge Config',
+                'zh-CN': '徽章配置',
+              },
+              tip: 'badge | 徽章配置对象',
+            },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'count',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Count',
+                          'zh-CN': '徽章数字',
+                        },
+                        tip: '徽章显示的数字或文本',
+                      },
+                      propType: {
+                        type: 'oneOfType',
+                        value: ['string', 'number'],
+                      },
+                      setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
+                    },
+                    {
+                      name: 'dot',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Dot',
+                          'zh-CN': '小红点',
+                        },
+                        tip: '是否显示小红点',
+                      },
+                      propType: 'bool',
+                      setter: 'BoolSetter',
+                    },
+                    {
+                      name: 'color',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Color',
+                          'zh-CN': '颜色',
+                        },
+                        tip: '徽章颜色',
+                      },
+                      propType: 'string',
+                      setter: ['ColorSetter', 'StringSetter', 'VariableSetter'],
+                    },
+                    {
+                      name: 'offset',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Offset',
+                          'zh-CN': '偏移位置',
+                        },
+                        tip: '徽章偏移位置 [x, y]',
+                      },
+                      propType: 'object',
+                      setter: 'JsonSetter',
+                    },
+                  ],
+                },
+              },
+            },
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'State',
+            'zh-CN': '状态',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'active',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Active State',
+                'zh-CN': '激活状态',
+              },
+              tip: 'active | 激活状态配置',
+            },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'value',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Is Active',
+                          'zh-CN': '是否激活',
+                        },
+                        tip: '是否处于激活状态',
+                      },
+                      propType: 'bool',
+                      setter: ['BoolSetter', 'VariableSetter'],
+                    },
+                    {
+                      name: 'className',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'ClassName',
+                          'zh-CN': '激活类名',
+                        },
+                        tip: '激活状态下的自定义类名',
+                      },
+                      propType: 'string',
+                      setter: 'StringSetter',
+                    },
+                    {
+                      name: 'style',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Style',
+                          'zh-CN': '激活样式',
+                        },
+                        tip: '激活状态下的自定义样式',
+                      },
+                      propType: 'object',
+                      setter: 'StyleSetter',
+                    },
+                    {
+                      name: 'extra',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Extra',
+                          'zh-CN': '额外内容',
+                        },
+                        tip: '激活状态下的额外渲染内容',
+                      },
+                      propType: {
+                        type: 'oneOfType',
+                        value: ['node', 'string', 'number', 'object'],
+                      },
+                      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
+                    },
+                  ],
+                },
+              },
+            },
+          },
+          {
+            name: 'disabled',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Disabled State',
+                'zh-CN': '禁用状态',
+              },
+              tip: 'disabled | 禁用状态配置',
+            },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'value',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Is Disabled',
+                          'zh-CN': '是否禁用',
+                        },
+                        tip: '是否处于禁用状态',
+                      },
+                      propType: 'bool',
+                      setter: ['BoolSetter', 'VariableSetter'],
+                    },
+                    {
+                      name: 'className',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'ClassName',
+                          'zh-CN': '禁用类名',
+                        },
+                        tip: '禁用状态下的自定义类名',
+                      },
+                      propType: 'string',
+                      setter: 'StringSetter',
+                    },
+                    {
+                      name: 'style',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Style',
+                          'zh-CN': '禁用样式',
+                        },
+                        tip: '禁用状态下的自定义样式',
+                      },
+                      propType: 'object',
+                      setter: 'StyleSetter',
+                    },
+                    {
+                      name: 'extra',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Extra',
+                          'zh-CN': '额外内容',
+                        },
+                        tip: '禁用状态下的额外渲染内容',
+                      },
+                      propType: {
+                        type: 'oneOfType',
+                        value: ['node', 'string', 'number', 'object'],
+                      },
+                      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
+                    },
+                  ],
+                },
+              },
+            },
+          },
+          {
+            name: 'loading',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Loading State',
+                'zh-CN': '加载状态',
+              },
+              tip: 'loading | 加载状态配置',
+            },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'value',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Is Loading',
+                          'zh-CN': '是否加载中',
+                        },
+                        tip: '是否处于加载状态',
+                      },
+                      propType: 'bool',
+                      setter: ['BoolSetter', 'VariableSetter'],
+                    },
+                    {
+                      name: 'className',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'ClassName',
+                          'zh-CN': '加载类名',
+                        },
+                        tip: '加载状态下的自定义类名',
+                      },
+                      propType: 'string',
+                      setter: 'StringSetter',
+                    },
+                    {
+                      name: 'style',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Style',
+                          'zh-CN': '加载样式',
+                        },
+                        tip: '加载状态下的自定义样式',
+                      },
+                      propType: 'object',
+                      setter: 'StyleSetter',
+                    },
+                    {
+                      name: 'extra',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Extra',
+                          'zh-CN': '额外内容',
+                        },
+                        tip: '加载状态下的额外渲染内容，如 Loading 组件',
+                      },
+                      propType: {
+                        type: 'oneOfType',
+                        value: ['node', 'string', 'number', 'object'],
+                      },
+                      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
+                    },
+                  ],
+                },
+              },
+            },
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Advanced',
+            'zh-CN': '高级',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'render',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Custom Render',
+                'zh-CN': '自定义渲染',
+              },
+              tip: 'render | 自定义渲染函数，完全控制标签内容',
+            },
+            propType: 'func',
+            setter: [
+              {
+                componentName: 'FunctionSetter',
+                props: {
+                  template:
+                    'render(props,${extParams}){\n// 自定义渲染标签内容\nreturn <div>{props.label}</div>;\n}',
+                },
+              },
+              'VariableSetter',
+            ],
+          },
+          {
+            name: 'children',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Children',
+                'zh-CN': '子内容',
+              },
+              tip: 'children | 自定义子内容',
+            },
+            propType: {
+              type: 'oneOfType',
+              value: ['node'],
+            },
+            setter: 'SlotSetter',
+          },
+        ],
+      },
+    ],
+    supports: {
+      style: true,
+      className: true,
+      events: [
+        {
+          name: 'onClick',
+          template:
+            'onClick(tabKey, event, ${extParams}){\n// 点击标签时的回调\nconsole.log(\'onClick\', tabKey, event);\n}',
+        },
+      ],
+    },
+    component: {
+      isContainer: false,
+    },
+  },
+};
+
+export default {
+  ...TabCardMeta,
+  snippets,
+};
+
+

package/lowcode/tab-card/snippets.ts

@@ -0,0 +1,81 @@
+import { IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: 'TabCard',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellCards.TabCard',
+      props: {
+        tabKey: 'tab1',
+        label: '标签',
+      },
+    },
+  },
+  {
+    title: 'TabCard - 带图标',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellCards.TabCard',
+      props: {
+        tabKey: 'tab1',
+        label: '首页',
+        icon: {
+          type: 'JSSlot',
+          value: [
+            {
+              componentName: 'Icon',
+              props: {
+                type: 'HomeOutlined',
+                size: 16,
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    title: 'TabCard - 带徽章',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellCards.TabCard',
+      props: {
+        tabKey: 'messages',
+        label: '消息',
+        badge: {
+          count: 5,
+          color: 'red',
+        },
+      },
+    },
+  },
+  {
+    title: 'TabCard - 垂直布局',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellCards.TabCard',
+      props: {
+        tabKey: 'tab1',
+        label: '标签',
+        direction: 'vertical',
+        icon: {
+          type: 'JSSlot',
+          value: [
+            {
+              componentName: 'Icon',
+              props: {
+                type: 'AppstoreOutlined',
+                size: 18,
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+export default snippets;
+
+