@pisell/materials 6.9.4 → 6.11.1

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

@@ -0,0 +1,493 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'PisellMetricCard',
+  title: '指标卡片',
+  category: '数据展示',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'PisellMetricCard',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    props: [
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Basic',
+            'zh-CN': '基础配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'title',
+            title: {
+              label: '标题',
+              tip: 'title | 卡片标题文本',
+            },
+            propType: { type: 'oneOfType', value: ['string', 'node'] },
+            setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
+            isRequired: true,
+          },
+          {
+            name: 'value',
+            title: {
+              label: '主数值',
+              tip: 'value | 显示的核心指标数值',
+            },
+            propType: { type: 'oneOfType', value: ['number', 'string', 'null'] },
+            setter: ['NumberSetter', 'StringSetter', 'VariableSetter'],
+            isRequired: true,
+          },
+          {
+            name: 'subtitle',
+            title: {
+              label: '副标题',
+              tip: 'subtitle | 卡片副标题文本',
+            },
+            propType: { type: 'oneOfType', value: ['string', 'node'] },
+            setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
+          },
+          {
+            name: 'tooltip',
+            title: {
+              label: '提示信息',
+              tip: 'tooltip | 鼠标悬停在标题上时展示的提示内容',
+            },
+            propType: { type: 'oneOfType', value: ['string', 'node'] },
+            setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
+          },
+          {
+            name: 'tag',
+            title: {
+              label: '标签内容',
+              tip: 'tag | 标签插槽内容',
+            },
+            propType: 'node',
+            setter: 'SlotSetter',
+          },
+          {
+            name: 'loading',
+            title: {
+              label: '加载状态',
+              tip: 'loading | 是否显示加载状态',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+          {
+            name: 'hoverable',
+            title: {
+              label: '悬停效果',
+              tip: 'hoverable | 鼠标悬停是否有交互效果',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: true,
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Format',
+            'zh-CN': '格式化配置',
+          },
+          tip: 'format | 数值格式化配置对象',
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'format',
+            title: {
+              label: '格式化配置',
+              tip: 'format | 数值格式化配置对象',
+            },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'precision',
+                      title: {
+                        label: '小数精度',
+                        tip: 'precision | 小数位数',
+                      },
+                      setter: 'NumberSetter',
+                      defaultValue: 0,
+                    },
+                    {
+                      name: 'useGrouping',
+                      title: {
+                        label: '千分位分隔',
+                        tip: 'useGrouping | 是否使用千分位分隔符（1,234,567）',
+                      },
+                      setter: 'BoolSetter',
+                      defaultValue: false,
+                    },
+                    {
+                      name: 'showCurrencySymbol',
+                      title: {
+                        label: '显示货币符号',
+                        tip: 'showCurrencySymbol | 是否显示货币符号',
+                      },
+                      setter: 'BoolSetter',
+                      defaultValue: false,
+                    },
+                    {
+                      name: 'currencySymbol',
+                      title: {
+                        label: '货币符号',
+                        tip: 'currencySymbol | 货币符号，如 $、¥、€',
+                      },
+                      setter: 'StringSetter',
+                      defaultValue: '',
+                    },
+                    {
+                      name: 'hideDecimalForWholeNumbers',
+                      title: {
+                        label: '整数隐藏小数',
+                        tip: 'hideDecimalForWholeNumbers | 整数时是否隐藏小数部分（100.00 显示为 100）',
+                      },
+                      setter: 'BoolSetter',
+                      defaultValue: true,
+                    },
+                  ],
+                },
+              },
+            },
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Comparison',
+            'zh-CN': '环比配置',
+          },
+          tip: 'comparison | 环比配置对象',
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'comparison',
+            title: {
+              label: '环比配置',
+              tip: 'comparison | 环比配置对象',
+            },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'value',
+                      title: {
+                        label: '环比数值',
+                        tip: 'value | 环比数值（支持正负值）',
+                      },
+                      setter: ['NumberSetter', 'StringSetter'],
+                      isRequired: true,
+                    },
+                    {
+                      name: 'text',
+                      title: {
+                        label: '环比前缀',
+                        tip: 'text | 环比信息的前缀文本',
+                      },
+                      setter: ['PisellI18nSetter', 'StringSetter'],
+                      defaultValue: 'v.s. pre',
+                    },
+                    {
+                      name: 'showTrendIcon',
+                      title: {
+                        label: '显示趋势箭头',
+                        tip: 'showTrendIcon | 是否显示趋势箭头图标',
+                      },
+                      setter: 'BoolSetter',
+                      defaultValue: true,
+                    },
+                    {
+                      name: 'positiveColor',
+                      title: {
+                        label: '正向趋势颜色',
+                        tip: 'positiveColor | 正向趋势的颜色（绿色）',
+                      },
+                      setter: 'ColorSetter',
+                      defaultValue: '#52c41a',
+                    },
+                    {
+                      name: 'negativeColor',
+                      title: {
+                        label: '负向趋势颜色',
+                        tip: 'negativeColor | 负向趋势的颜色（红色）',
+                      },
+                      setter: 'ColorSetter',
+                      defaultValue: '#ff4d4f',
+                    },
+                    {
+                      name: 'size',
+                      title: {
+                        label: '环比字号',
+                        tip: 'size | 环比信息字号大小',
+                      },
+                      setter: ['NumberSetter', 'StringSetter'],
+                      defaultValue: 14,
+                    },
+                  ],
+                },
+              },
+            },
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Style',
+            'zh-CN': '样式配置',
+          },
+          tip: 'styleConfig | 样式配置对象',
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'styleConfig',
+            title: {
+              label: '样式配置',
+              tip: 'styleConfig | 样式配置对象',
+            },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'card',
+                      title: {
+                        label: '卡片样式',
+                        tip: 'card | 卡片容器样式配置',
+                      },
+                      setter: {
+                        componentName: 'ObjectSetter',
+                        props: {
+                          config: {
+                            items: [
+                              {
+                                name: 'bordered',
+                                title: { label: '显示边框' },
+                                setter: 'BoolSetter',
+                                defaultValue: true,
+                              },
+                              {
+                                name: 'borderRadius',
+                                title: { label: '圆角大小' },
+                                setter: 'NumberSetter',
+                                defaultValue: 12,
+                              },
+                              {
+                                name: 'padding',
+                                title: { label: '内边距' },
+                                setter: 'NumberSetter',
+                                defaultValue: 16,
+                              },
+                              {
+                                name: 'background',
+                                title: { label: '背景色' },
+                                setter: 'ColorSetter',
+                                defaultValue: '#ffffff',
+                              },
+                              {
+                                name: 'width',
+                                title: { label: '卡片宽度' },
+                                setter: ['StringSetter', 'NumberSetter'],
+                                defaultValue: 'auto',
+                              },
+                            ],
+                          },
+                        },
+                      },
+                    },
+                    {
+                      name: 'title',
+                      title: {
+                        label: '标题样式',
+                        tip: 'title | 标题样式配置',
+                      },
+                      setter: {
+                        componentName: 'ObjectSetter',
+                        props: {
+                          config: {
+                            items: [
+                              {
+                                name: 'size',
+                                title: { label: '字号' },
+                                setter: ['NumberSetter', 'StringSetter'],
+                                defaultValue: 14,
+                              },
+                              {
+                                name: 'weight',
+                                title: { label: '字重' },
+                                setter: ['NumberSetter', 'StringSetter'],
+                                defaultValue: 400,
+                              },
+                              {
+                                name: 'color',
+                                title: { label: '颜色' },
+                                setter: 'ColorSetter',
+                                defaultValue: 'rgba(0, 0, 0, 0.45)',
+                              },
+                            ],
+                          },
+                        },
+                      },
+                    },
+                    {
+                      name: 'value',
+                      title: {
+                        label: '数值样式',
+                        tip: 'value | 数值样式配置',
+                      },
+                      setter: {
+                        componentName: 'ObjectSetter',
+                        props: {
+                          config: {
+                            items: [
+                              {
+                                name: 'size',
+                                title: { label: '字号' },
+                                setter: ['NumberSetter', 'StringSetter'],
+                                defaultValue: 30,
+                              },
+                              {
+                                name: 'weight',
+                                title: { label: '字重' },
+                                setter: ['NumberSetter', 'StringSetter'],
+                                defaultValue: 600,
+                              },
+                              {
+                                name: 'color',
+                                title: { label: '颜色' },
+                                setter: 'ColorSetter',
+                                defaultValue: 'rgba(0, 0, 0, 0.85)',
+                              },
+                            ],
+                          },
+                        },
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Feature',
+            'zh-CN': '功能开关',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'showSubtitle',
+            title: {
+              label: '显示副标题',
+              tip: 'showSubtitle | 是否显示副标题',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+          {
+            name: 'showTag',
+            title: {
+              label: '显示标签',
+              tip: 'showTag | 是否显示标签',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+          {
+            name: 'showTooltip',
+            title: {
+              label: '显示提示',
+              tip: 'showTooltip | 是否显示提示信息图标',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Common',
+            'zh-CN': '通用配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'className',
+            title: {
+              label: '样式类名',
+              tip: 'className | 自定义样式类名',
+            },
+            propType: 'string',
+            setter: 'StringSetter',
+          },
+          {
+            name: 'style',
+            title: {
+              label: '自定义样式',
+              tip: 'style | 自定义样式对象',
+            },
+            propType: 'object',
+            setter: 'StyleSetter',
+          },
+        ],
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onClick',
+          template: "onClick(${extParams}){\n// 点击卡片时的回调\nconsole.log('onClick');}",
+        },
+      ],
+    },
+    component: {},
+  },
+};

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

@@ -0,0 +1,54 @@
+export default [
+  {
+    title: '指标卡片',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellMetricCard',
+      props: {
+        title: 'Total Sales',
+        value: 1580,
+        format: {
+          showCurrencySymbol: true,
+          currencySymbol: '$',
+        },
+      },
+    },
+  },
+  {
+    title: '带环比的指标卡片',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellMetricCard',
+      props: {
+        title: 'Total Orders',
+        value: 50,
+        comparison: {
+          value: 12,
+        },
+      },
+    },
+  },
+  {
+    title: '完整配置的指标卡片',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellMetricCard',
+      props: {
+        title: 'Revenue',
+        subtitle: 'Last 30 days',
+        value: 125000,
+        showSubtitle: true,
+        format: {
+          showCurrencySymbol: true,
+          currencySymbol: '$',
+          useGrouping: true,
+          precision: 2,
+        },
+        comparison: {
+          value: 15000,
+          text: 'v.s. pre',
+        },
+      },
+    },
+  },
+];

package/lowcode/pisell-multiple-select/index.ts

@@ -0,0 +1,3 @@
+import PisellMultipleSelect from './meta';
+
+export default PisellMultipleSelect;