@pisell/materials 6.7.4 → 6.8.1

package/lowcode/graphic-text-card/snippets.ts

@@ -0,0 +1,74 @@
+import { IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: '图文卡片',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellCards.GraphicTextCard',
+      props: {
+        text: '图文卡片',
+        variant: 'vertical-image',
+        size: 'default',
+        clickable: true,
+        image: 'https://via.placeholder.com/60',
+      },
+    },
+  },
+  {
+    title: '图文卡片-图标',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellCards.GraphicTextCard',
+      props: {
+        text: 'Tabs',
+        variant: 'vertical-icon',
+        size: 'default',
+        clickable: true,
+        icon: {
+          type: 'JSSlot',
+          value: [
+            {
+              componentName: 'Icon',
+              props: {
+                type: 'SmileOutlined',
+                size: 24,
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    title: '图文卡片-横向',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellCards.GraphicTextCard',
+      props: {
+        text: '图文卡片',
+        variant: 'horizontal',
+        size: 'default',
+        clickable: true,
+        image: 'https://via.placeholder.com/64x52',
+      },
+    },
+  },
+  {
+    title: '图文卡片-卡片式',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellCards.GraphicTextCard',
+      props: {
+        text: '图文卡片',
+        variant: 'card',
+        size: 'default',
+        clickable: true,
+        image: 'https://via.placeholder.com/72x60',
+      },
+    },
+  },
+];
+
+export default snippets;
+

package/lowcode/multilevel-card/meta.ts

@@ -0,0 +1,462 @@
+import { IPublicTypeComponentMetadata } from '@alilc/lowcode-types';
+import snippets from './snippets';
+
+const MultilevelCardMeta: IPublicTypeComponentMetadata = {
+  componentName: 'PisellCards.MultilevelCard',
+  title: '多层级卡片',
+  category: '数据展示',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.3',
+    exportName: 'PisellCards',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: 'MultilevelCard',
+  },
+  configure: {
+    props: [
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Slot Configuration',
+            'zh-CN': '插槽配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'card',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Main Card',
+                'zh-CN': '主卡片',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'card | The main card component (e.g., TextCard, GraphicTextCard)',
+                'zh-CN': 'card | 主卡片组件（如 TextCard、GraphicTextCard 等）',
+              },
+            },
+            propType: { type: 'oneOfType', value: ['node'] },
+            setter: [
+              {
+                componentName: "SlotSetter",
+                title: "渲染函数插槽",
+                initialValue: {
+                  type: "JSSlot",
+                  params: ["props"],
+                  value: [
+
+                  ],
+                },
+                defaultValue: {
+                  type: "JSSlot",
+                  params: ["props"],
+                  value: [
+
+                  ],
+                },
+              },
+              {
+                componentName: "FunctionSetter",
+                props: {
+                  template:
+                    "renderItem(item,${extParams}){\n// 自定义渲染列表项\nreturn `item`;\n}",
+                },
+              },
+              "VariableSetter",
+            ],
+          },
+          {
+            name: 'panel',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Secondary Panel',
+                'zh-CN': '次级面板',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'panel | Content displayed when the card is active',
+                'zh-CN': 'panel | 主卡片激活时显示的内容',
+              },
+            },
+            propType: { type: 'oneOfType', value: ['node'] },
+            setter: [
+              {
+                componentName: "SlotSetter",
+                title: "渲染函数插槽",
+                initialValue: {
+                  type: "JSSlot",
+                  params: ["props"],
+                  value: [
+
+                  ],
+                },
+                defaultValue: {
+                  type: "JSSlot",
+                  params: ["props"],
+                  value: [
+
+                  ],
+                },
+              },
+              {
+                componentName: "FunctionSetter",
+                props: {
+                  template:
+                    "renderItem(item,${extParams}){\n// 自定义渲染列表项\nreturn `item`;\n}",
+                },
+              },
+              "VariableSetter",
+            ],
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Trigger Configuration',
+            'zh-CN': '触发方式配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'trigger',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Trigger Mode',
+                'zh-CN': '触发方式',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'trigger | Trigger mode: click or hover',
+                'zh-CN': 'trigger | 触发方式：点击或悬停',
+              },
+            },
+            propType: { type: 'oneOf', value: ['click', 'hover'] },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    {
+                      title: 'Click',
+                      value: 'click',
+                    },
+                    {
+                      title: 'Hover',
+                      value: 'hover',
+                    },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'click',
+          },
+          {
+            name: 'hoverDelay',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Hover Delay',
+                'zh-CN': 'Hover 延迟',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'hoverDelay | Delay time for hover mode (ms)',
+                'zh-CN': 'hoverDelay | hover 模式下的延迟时间（毫秒）',
+              },
+            },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'enter',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Enter Delay',
+                          'zh-CN': '进入延迟',
+                        },
+                      },
+                      setter: 'NumberSetter',
+                      defaultValue: 100,
+                    },
+                    {
+                      name: 'leave',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Leave Delay',
+                          'zh-CN': '离开延迟',
+                        },
+                      },
+                      setter: 'NumberSetter',
+                      defaultValue: 200,
+                    },
+                  ],
+                },
+              },
+            },
+            condition: {
+              type: 'JSFunction',
+              value: 'target => target.getProps().getPropValue("trigger") === "hover"',
+            },
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Panel Configuration',
+            'zh-CN': '次级面板配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'panelWidthMode',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Width Mode',
+                'zh-CN': '宽度模式',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'panelWidthMode | Width mode of the secondary panel',
+                'zh-CN': 'panelWidthMode | 次级面板的宽度模式',
+              },
+            },
+            propType: { type: 'oneOf', value: ['auto', 'fixed', 'full'] },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    {
+                      title: 'Auto',
+                      value: 'auto',
+                    },
+                    {
+                      title: 'Fixed',
+                      value: 'fixed',
+                    },
+                    {
+                      title: 'Full',
+                      value: 'full',
+                    },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'full',
+          },
+          {
+            name: 'panelWidth',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Panel Width',
+                'zh-CN': '面板宽度',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'panelWidth | Fixed width value (effective when panelWidthMode is "fixed")',
+                'zh-CN': 'panelWidth | 固定宽度值（当 panelWidthMode 为 "fixed" 时有效）',
+              },
+            },
+            propType: { type: 'oneOfType', value: ['number', 'string'] },
+            setter: ['NumberSetter', 'StringSetter', 'VariableSetter'],
+            condition: {
+              type: 'JSFunction',
+              value: 'target => target.getProps().getPropValue("panelWidthMode") === "fixed"',
+            },
+          },
+          {
+            name: 'panelStyle',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Panel Style',
+                'zh-CN': '面板样式',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'panelStyle | Custom style of the secondary panel',
+                'zh-CN': 'panelStyle | 次级面板的自定义样式',
+              },
+            },
+            propType: 'object',
+            setter: 'StyleSetter',
+          },
+          {
+            name: 'panelClassName',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Panel Class',
+                'zh-CN': '面板类名',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'panelClassName | Custom class name of the secondary panel',
+                'zh-CN': 'panelClassName | 次级面板的自定义类名',
+              },
+            },
+            propType: 'string',
+            setter: ['StringSetter', 'VariableSetter'],
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Animation Configuration',
+            'zh-CN': '动画配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'animation',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Enable Animation',
+                'zh-CN': '启用动画',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'animation | Whether to enable expand/collapse animation',
+                'zh-CN': 'animation | 是否启用展开/收起动画',
+              },
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: true,
+          },
+          {
+            name: 'animationDuration',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Animation Duration',
+                'zh-CN': '动画时长',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'animationDuration | Animation duration (ms)',
+                'zh-CN': 'animationDuration | 动画持续时间（毫秒）',
+              },
+            },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+            defaultValue: 300,
+            condition: {
+              type: 'JSFunction',
+              value: 'target => target.getProps().getPropValue("animation") !== false',
+            },
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Basic Configuration',
+            'zh-CN': '基础配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'className',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Class Name',
+                'zh-CN': '类名',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'className | Component class name',
+                'zh-CN': 'className | 组件类名',
+              },
+            },
+            propType: 'string',
+            setter: ['StringSetter', 'VariableSetter'],
+          },
+          {
+            name: 'style',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Style',
+                'zh-CN': '样式',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'style | Component style',
+                'zh-CN': 'style | 组件样式',
+              },
+            },
+            propType: 'object',
+            setter: 'StyleSetter',
+          },
+        ],
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onExpandChange',
+          template:
+            "onExpandChange(expanded,${extParams}){\n// 展开状态变化回调\nconsole.log('onExpandChange', expanded);}",
+        },
+        {
+          name: 'onPanelMount',
+          template:
+            "onPanelMount(${extParams}){\n// 次级面板渲染完成回调\nconsole.log('onPanelMount');}",
+        },
+        {
+          name: 'onPanelUnmount',
+          template:
+            "onPanelUnmount(${extParams}){\n// 次级面板卸载回调\nconsole.log('onPanelUnmount');}",
+        },
+      ],
+    },
+    component: {
+      isContainer: false,
+    },
+  },
+};
+
+export default {
+  ...MultilevelCardMeta,
+  snippets,
+};
+
+

package/lowcode/multilevel-card/snippets.ts

@@ -0,0 +1,18 @@
+export default [
+  {
+    title: '多层级卡片',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellCards.MultilevelCard',
+      props: {
+        trigger: 'click',
+        panelWidthMode: 'full',
+        animation: true,
+        animationDuration: 300,
+      },
+      children: [],
+    },
+  },
+];
+
+