@pisell/materials 1.0.1 → 1.0.2

package/lowcode/popover/meta.ts

@@ -0,0 +1,332 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Popover',
+  title: '气泡卡片',
+  category: '数据展示',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Popover",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      title: '内容',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'title',
+          title: {
+            label: '卡片标题',
+            tip: 'title | 卡片标题',
+          },
+          propType: {
+            type: 'oneOfType',
+            value: ['string', 'node', 'func'],
+          },
+          setter: ['StringSetter', 'SlotSetter', 'FunctionSetter', 'VariableSetter'],
+        },
+        {
+          name: 'content',
+          title: {
+            label: '卡片内容',
+            tip: 'content | 卡片内容',
+          },
+          propType: {
+            type: 'oneOfType',
+            value: ['string', 'node', 'func'],
+          },
+          setter: ['StringSetter', 'SlotSetter', 'FunctionSetter', 'VariableSetter'],
+        },
+      ],
+    },
+    {
+      title: '控制',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'defaultOpen',
+          title: {
+            label: '默认显隐',
+            tip: 'defaultOpen | 默认是否显隐',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'open',
+          title: {
+            label: '手动显隐',
+            tip: 'open | 手动控制浮层显隐',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+        },
+      ],
+    },
+    {
+      title: '外观',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'placement',
+          title: {
+            label: '气泡位置',
+            tip: 'placement | 气泡位置',
+          },
+          propType: {
+            type: 'oneOf',
+            value: [
+              'top',
+              'left',
+              'right',
+              'bottom',
+              'topLeft',
+              'topRight',
+              'bottomLeft',
+              'bottomRight',
+              'leftTop',
+              'leftBottom',
+              'rightTop',
+              'rightBottom',
+            ],
+          },
+          defaultValue: 'top',
+          setter: {
+            componentName: 'SelectSetter',
+            props: {
+              options: [
+                {
+                  title: '上',
+                  value: 'top',
+                },
+                {
+                  title: '左',
+                  value: 'left',
+                },
+                {
+                  title: '右',
+                  value: 'right',
+                },
+                {
+                  title: '下',
+                  value: 'bottom',
+                },
+                {
+                  title: '上左',
+                  value: 'topLeft',
+                },
+                {
+                  title: '上右',
+                  value: 'topRight',
+                },
+                {
+                  title: '下左',
+                  value: 'bottomLeft',
+                },
+                {
+                  title: '下右',
+                  value: 'bottomRight',
+                },
+                {
+                  title: '左上',
+                  value: 'leftTop',
+                },
+                {
+                  title: '左下',
+                  value: 'leftBottom',
+                },
+                {
+                  title: '右上',
+                  value: 'rightTop',
+                },
+                {
+                  title: '右下',
+                  value: 'rightBottom',
+                },
+              ],
+            },
+          },
+        },
+        {
+          name: 'autoAdjustOverflow',
+          title: {
+            label: '自动调整',
+            tip: 'autoAdjustOverflow | 气泡被遮挡时自动调整位置',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: true,
+        },
+        {
+          name: 'arrowPointAtCenter',
+          title: {
+            label: '指向中心',
+            tip: 'arrowPointAtCenter | 箭头是否指向目标元素中心',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'color',
+          title: {
+            label: '背景颜色',
+            tip: 'color | 背景颜色',
+          },
+          propType: 'string',
+          setter: 'ColorSetter',
+        },
+        {
+          name: 'zIndex',
+          title: {
+            label: 'zIndex',
+            tip: 'zIndex | 设置 Tooltip 的 z-index值',
+          },
+          propType: 'number',
+          setter: 'NumberSetter',
+        },
+      ],
+    },
+    {
+      name: 'overlayStyle',
+      title: '卡片样式',
+      type: 'group',
+      extraProps: {
+        display: 'entry',
+      },
+      items: [
+        {
+          name: 'overlayStyle',
+          title: {
+            label: '样式设置',
+            tip: 'overlayStyle | 卡片样式',
+          },
+          setter: 'StyleSetter',
+          extraProps: {
+            display: 'block',
+          },
+        },
+      ],
+    },
+    {
+      name: 'overlayInnerStyle',
+      title: '卡片内容样式',
+      type: 'group',
+      extraProps: {
+        display: 'entry',
+      },
+      items: [
+        {
+          name: 'overlayInnerStyle',
+          title: {
+            label: '样式设置',
+            tip: 'overlayStyle | 卡片内容区域的样式',
+          },
+          setter: 'StyleSetter',
+          extraProps: {
+            display: 'block',
+          },
+        },
+      ],
+    },
+    {
+      title: '行为',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'trigger',
+          title: {
+            label: '触发行为',
+            tip: 'trigger | 触发行为',
+          },
+          propType: {
+            type: 'oneOf',
+            value: ['hover', 'focus', 'click', 'contextMenu'],
+          },
+          defaultValue: 'hover',
+          setter: {
+            componentName: 'SelectSetter',
+            props: {
+              options: [
+                {
+                  title: '鼠标悬停',
+                  value: 'hover',
+                },
+                {
+                  title: '获得焦点',
+                  value: 'focus',
+                },
+                {
+                  title: '鼠标点击',
+                  value: 'click',
+                },
+                {
+                  title: '右键菜单',
+                  value: 'contextMenu',
+                },
+              ],
+            },
+          },
+        },
+        {
+          name: 'mouseEnterDelay',
+          title: {
+            label: '展示延时',
+            tip: 'mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒',
+          },
+          propType: 'number',
+          defaultValue: 0.1,
+          setter: {
+            componentName: 'NumberSetter',
+            props: {
+              step: 0.1,
+            },
+          },
+        },
+        {
+          name: 'mouseLeaveDelay',
+          title: {
+            label: '隐藏延时',
+            tip: 'mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒',
+          },
+          propType: 'number',
+          defaultValue: 0.1,
+          setter: {
+            componentName: 'NumberSetter',
+            props: {
+              step: 0.1,
+            },
+          },
+        },
+      ],
+    },
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+    },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onOpenChange',
+          template:
+            "onOpenChange(open,${extParams}){\n// 显示隐藏的回调\nconsole.log('onOpenChange',open);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/popover/snippets.ts

@@ -0,0 +1,10 @@
+export default [
+  {
+    title: '气泡卡片',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/popover-1.jpg',
+    schema: {
+      componentName: 'Popover',
+      props: {},
+    },
+  },
+];

package/lowcode/progress/meta.ts

@@ -0,0 +1,142 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Progress',
+  title: '进度条',
+  category: '反馈',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Progress",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'type',
+      title: { label: '类型', tip: '类型' },
+      propType: { type: 'oneOf', value: ['line', 'circle', 'dashboard'] },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            { title: '线型', value: 'line' },
+            { title: '圆型', value: 'circle' },
+            { title: '仪表盘', value: 'dashboard' },
+          ],
+        },
+      },
+      defaultValue: 'line',
+    },
+    {
+      name: 'format',
+      title: { label: '内容格式', tip: '内容格式' },
+      propType: 'func',
+    },
+    {
+      name: 'percent',
+      title: { label: '百分比', tip: '百分比' },
+      propType: 'number',
+    },
+    {
+      name: 'showInfo',
+      title: { label: '显示数值或图标', tip: '显示数值或图标' },
+      propType: 'bool',
+      defaultValue: true,
+    },
+    {
+      name: 'status',
+      title: { label: '状态', tip: '状态' },
+      propType: {
+        type: 'oneOf',
+        value: ['success', 'exception', 'normal', 'active'],
+      },
+    },
+    {
+      name: 'steps',
+      title: { label: '总步数', tip: '进度条总共步数' },
+      condition(target) {
+        // 仅线型有效
+        return target.getProps().getPropValue('type') === 'line';
+      },
+      propType: 'number',
+    },
+    {
+      name: 'strokeLinecap',
+      title: { label: '进度条的样式', tip: '进度条的样式' },
+      propType: {
+        type: 'oneOf',
+        value: ['round', 'square'],
+      },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            { title: '圆角', value: 'round' },
+            { title: '方角', value: 'square' },
+          ],
+        },
+      },
+      defaultValue: 'round',
+    },
+    {
+      name: 'strokeWidth',
+      title: { label: '线宽度', tip: '线宽度' },
+      propType: 'number',
+    },
+    {
+      name: 'strokeColor',
+      title: { label: '进度条的颜色', tip: '进度条的颜色' },
+      propType: 'string',
+      condition(target) {
+        // 仪表盘样式无效
+        return target.getProps().getPropValue('type') !== 'dashboard';
+      },
+      setter: 'ColorSetter',
+    },
+    {
+      name: 'trailColor',
+      title: {
+        label: '未完成的分段的颜色',
+        tip: '未完成的分段的颜色',
+      },
+      propType: 'string',
+      setter: 'ColorSetter',
+    },
+    {
+      name: 'gapDegree',
+      title: {
+        label: '缺口角度',
+        tip: '仪表盘进度条缺口角度，可取值 0 ~ 295',
+      },
+      condition(target) {
+        // 仅仪表盘样式有效
+        return target.getProps().getPropValue('type') === 'dashboard';
+      },
+      propType: 'number',
+      defaultValue: 75,
+    },
+    {
+      name: 'gapPosition',
+      title: {
+        label: '缺口位置',
+        tip: '仪表盘进度条缺口位置',
+      },
+      condition(target) {
+        // 仅仪表盘样式有效
+        return target.getProps().getPropValue('type') === 'dashboard';
+      },
+      propType: {
+        type: 'oneOf',
+        value: ['top', 'bottom', 'left', 'right'],
+      },
+      defaultValue: 'bottom',
+    },
+  ],
+  configure: { supports: { style: true } },
+};

package/lowcode/progress/snippets.ts

@@ -0,0 +1,24 @@
+export default [
+  {
+    title: '进度条',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/progress-1.png',
+    schema: {
+      componentName: 'Progress',
+      props: {
+        percent: 20,
+        status: 'active',
+      },
+    },
+  },
+  {
+    title: '进度圈',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/progress-2.png',
+    schema: {
+      componentName: 'Progress',
+      props: {
+        percent: 20,
+        type: 'circle',
+      },
+    },
+  },
+];

package/lowcode/radio/meta.ts

@@ -0,0 +1,69 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Radio',
+  title: '单选框',
+  category: '表单',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Radio",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'children',
+      title: { label: '内容', tip: '内容' },
+      propType: 'string',
+      setter: 'StringSetter',
+      supportVariable: true
+    },
+    {
+      name: 'autoFocus',
+      title: { label: '自动聚焦', tip: '自动获取焦点' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'defaultChecked',
+      title: { label: '默认选中', tip: '初始是否选中' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'checked',
+      title: { label: '是否选中', tip: '指定当前是否选中' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否为禁用状态' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    // {
+    //   name: 'value',
+    //   title: {
+    //     label: '根据值判断',
+    //     tip: '根据 value 进行比较，判断是否选中',
+    //   },
+    //   propType: 'string',
+    // },
+  ],
+  configure: { supports: { style: true } },
+};

package/lowcode/radio/snippets.ts

@@ -0,0 +1,35 @@
+export default [
+  {
+    title: '单选框',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/radio-1.png',
+    schema: {
+      componentName: 'Radio',
+      props: {
+        children: 'Radio',
+      },
+    },
+  },
+  {
+    title: '单选框组',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/radio-group-1.png',
+    schema: {
+      componentName: 'Radio.Group',
+      props: {
+        options: [
+          {
+            label: 'A',
+            value: 'A',
+          },
+          {
+            label: 'B',
+            value: 'B',
+          },
+          {
+            label: 'C',
+            value: 'C',
+          },
+        ],
+      },
+    },
+  },
+];