@pisell/materials 6.7.2 → 6.7.3

package/lowcode/pisell-image-card/meta.ts

@@ -0,0 +1,528 @@
+import { IPublicTypeComponentMetadata } from '@alilc/lowcode-types';
+import snippets from './snippets';
+
+const PisellImageCardMeta: IPublicTypeComponentMetadata = {
+  componentName: 'PisellCards.PisellImageCard',
+  title: '图片卡片',
+  category: '基础组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.3',
+    exportName: 'PisellCards',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: 'PisellImageCard',
+  },
+  configure: {
+    props: [
+      {
+        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: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'src',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Image URL',
+                          'zh-CN': '图片地址',
+                        },
+                        tip: '图片地址，支持相对路径和绝对路径',
+                      },
+                      propType: 'string',
+                      setter: ['StringSetter', 'VariableSetter'],
+                    },
+                    {
+                      name: 'alt',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Alt Text',
+                          'zh-CN': '替换文本',
+                        },
+                        tip: '图片替换文本，当图片未设置或加载失败时，显示 alt 的前 2 个字符',
+                      },
+                      propType: 'string',
+                      setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
+                    },
+                    {
+                      name: 'errorSrc',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Error Image',
+                          'zh-CN': '失败兜底图',
+                        },
+                        tip: '图片加载失败后的兜底图地址',
+                      },
+                      propType: 'string',
+                      setter: ['StringSetter', 'VariableSetter'],
+                    },
+                    {
+                      name: 'fallbackSrc',
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'Placeholder Image',
+                          'zh-CN': '占位图',
+                        },
+                        tip: '首次加载时的占位图地址',
+                      },
+                      propType: 'string',
+                      setter: ['StringSetter', 'VariableSetter'],
+                    },
+                  ],
+                },
+              },
+            },
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Style',
+            'zh-CN': '样式',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'fillMode',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Fill Mode',
+                'zh-CN': '填充模式',
+              },
+              tip: 'fillMode | 图片填充模式',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['cover', 'contain', 'fill', 'none'],
+            },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    {
+                      title: '覆盖',
+                      value: 'cover',
+                    },
+                    {
+                      title: '包含',
+                      value: 'contain',
+                    },
+                    {
+                      title: '拉伸',
+                      value: 'fill',
+                    },
+                    {
+                      title: '原始',
+                      value: 'none',
+                    },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'cover',
+          },
+          {
+            name: 'width',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Width',
+                'zh-CN': '宽度',
+              },
+              tip: 'width | 图片宽度，支持任意 CSS 合法值（px、%、rem 等）',
+            },
+            propType: {
+              type: 'oneOfType',
+              value: ['string', 'number'],
+            },
+            setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
+            defaultValue: '100%',
+          },
+          {
+            name: 'height',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Height',
+                'zh-CN': '高度',
+              },
+              tip: 'height | 图片高度，支持任意 CSS 合法值（px、%、rem 等）',
+            },
+            propType: {
+              type: 'oneOfType',
+              value: ['string', 'number'],
+            },
+            setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
+            defaultValue: '100%',
+          },
+          {
+            name: 'className',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'ClassName',
+                'zh-CN': '样式类名',
+              },
+              tip: 'className | 自定义样式类名',
+            },
+            propType: 'string',
+            setter: 'StringSetter',
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Advanced',
+            'zh-CN': '高级',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'lazy',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Lazy Load',
+                'zh-CN': '懒加载',
+              },
+              tip: 'lazy | 是否启用图片懒加载（仅当图片进入视口时才加载）',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+        ],
+      },
+      {
+        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': 'Children',
+            'zh-CN': '子内容',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            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(event, ${extParams}){\n// 点击图片卡片时的回调\nconsole.log(\'onClick\', event);\n}',
+        },
+      ],
+    },
+    component: {
+      isContainer: false,
+    },
+  },
+};
+
+export default {
+  ...PisellImageCardMeta,
+  snippets,
+};
+

package/lowcode/pisell-image-card/snippets.ts

@@ -0,0 +1,39 @@
+import { IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: '图片卡片',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellCards.PisellImageCard',
+      props: {
+        dataSource: {
+          src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          alt: '图片',
+        },
+        fillMode: 'cover',
+        width: '100%',
+        height: '100%',
+      },
+    },
+  },
+  {
+    title: '图片卡片-带占位图',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellCards.PisellImageCard',
+      props: {
+        dataSource: {
+          src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          alt: '商品图片',
+        },
+        fillMode: 'contain',
+        width: 200,
+        height: 200,
+      },
+    },
+  },
+];
+
+export default snippets;
+