@pisell/materials 1.0.1 → 1.0.3

package/lowcode/slider/meta.ts

@@ -0,0 +1,218 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Slider',
+  title: '滑动输入条',
+  category: '表单',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Slider",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'defaultValue',
+      title: {
+        label: '默认值',
+        tip: '设置初始取值。当 `range` 为 false 时，使用 number，否则用 \\[number, number]',
+      },
+      propType: {
+        type: 'oneOfType',
+        value: ['number', { type: 'arrayOf', value: 'number' }],
+      },
+    },
+    {
+      name: 'range',
+      title: { label: '双滑块模式', tip: '双滑块模式' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      setValue(target, range) {
+        let defaultValue = target.node.getPropValue('defaultValue');
+        if (range) {
+          defaultValue = Array.isArray(defaultValue) ? defaultValue : [0, defaultValue];
+        } else {
+          defaultValue = Array.isArray(defaultValue)
+            ? defaultValue[1] || defaultValue[0]
+            : defaultValue;
+        }
+        target.node.setPropValue('defaultValue', defaultValue);
+      },
+    },
+    // {
+    //   name: 'value',
+    //   title: {
+    //     label: '当前值',
+    //     tip:
+    //       '设置当前取值。当 `range` 为 false 时，使用 number，否则用 \\[number, number]',
+    //   },
+    //   propType: {
+    //     type: 'oneOfType',
+    //     value: ['number', { type: 'arrayOf', value: 'number' }],
+    //   },
+    // },
+    {
+      name: 'allowClear',
+      title: { label: '支持清除', tip: '是否允许清除' },
+      condition(target) {
+        return target.getProps().getPropValue('range') === true;
+      },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'disabled',
+      title: {
+        label: '是否禁用',
+        tip: '是否为禁用状态',
+      },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'dots',
+      title: { label: '对齐刻度', tip: '是否只能拖拽到刻度上' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    // {
+    //   name: 'included',
+    //   title: {
+    //     label:
+    //       '`marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列',
+    //     tip:
+    //       '`marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列',
+    //   },
+    //   propType: 'bool',
+    //   defaultValue: true,
+    // },
+    // {
+    //   name: 'marks',
+    //   title: {
+    //     label:
+    //       '刻度标记，key 的类型必须为 `number` 且取值在闭区间 \\[min, max] 内，每个标签可以单独设置样式',
+    //     tip:
+    //       '刻度标记，key 的类型必须为 `number` 且取值在闭区间 \\[min, max] 内，每个标签可以单独设置样式',
+    //   },
+    //   propType: 'object',
+    // },
+    {
+      name: 'max',
+      title: { label: '最大值', tip: '最大值' },
+      propType: 'number',
+      setter: 'NumberSetter'
+    },
+    {
+      name: 'min',
+      title: { label: '最小值', tip: '最小值' },
+      propType: 'number',
+      setter: 'NumberSetter'
+    },
+    {
+      name: 'reverse',
+      title: { label: '反向坐标轴', tip: '反向坐标轴' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'step',
+      title: {
+        label: '步长',
+        tip:
+          '步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分',
+      },
+      propType: 'number',
+      setter: 'NumberSetter'
+    },
+    // {
+    //   name: 'tipFormatter',
+    //   title: {
+    //     label:
+    //       'Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip',
+    //     tip:
+    //       'Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip',
+    //   },
+    //   propType: 'func',
+    // },
+    {
+      name: 'vertical',
+      title: {
+        label: '垂直方向',
+        tip: '值为 true 时，Slider 为垂直方向',
+      },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'onAfterChange',
+      title: {
+        label: '与 `onmouseup` 触发时机一致，把当前值作为参数传入',
+        tip: '与 `onmouseup` 触发时机一致，把当前值作为参数传入',
+      },
+      propType: 'func',
+    },
+    {
+      name: 'onChange',
+      title: {
+        label: '当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入',
+        tip: '当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入',
+      },
+      propType: 'func',
+    },
+    // {
+    //   name: 'tooltipPlacement',
+    //   title: {
+    //     label: '设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/)',
+    //     tip: '设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/)',
+    //   },
+    //   propType: 'string',
+    // },
+    // {
+    //   name: 'tooltipVisible',
+    //   title: {
+    //     label:
+    //       '值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时',
+    //     tip:
+    //       '值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时',
+    //   },
+    //   propType: 'bool',
+    // },
+    // {
+    //   name: 'getTooltipPopupContainer',
+    //   title: {
+    //     label: 'Tooltip 渲染父节点，默认渲染到 body 上',
+    //     tip: 'Tooltip 渲染父节点，默认渲染到 body 上',
+    //   },
+    //   propType: 'func',
+    // },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onAfterChange',
+          template:
+            "onAfterChange(value,${extParams}){\n// 与 onmouseup 触发时机一致\nconsole.log('onAfterChange',value);}",
+        },
+        {
+          name: 'onChange',
+          template:
+            "onChange(value,${extParams}){\n// 当 Slider 的值发生改变时触发回调\nconsole.log('onChange',value);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/slider/snippets.ts

@@ -0,0 +1,12 @@
+export default [
+  {
+    title: '滑动输入条',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/slider-1.png',
+    schema: {
+      componentName: 'Slider',
+      props: {
+        defaultValue: 30,
+      },
+    },
+  },
+];

package/lowcode/slot/meta.ts

@@ -0,0 +1,61 @@
+module.exports = {
+  componentName: 'Slot',
+  npm: {
+    package: '@alilc/antd-lowcode-materials',
+    version: 'latest',
+    exportName: 'Slot',
+    main: '',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    props: [
+      {
+        name: '___title',
+        title: {
+          type: 'i18n',
+          'en-US': 'Slot Title',
+          'zh-CN': '插槽标题',
+        },
+        setter: 'StringSetter',
+        defaultValue: '插槽容器',
+      },
+      {
+        name: '___params',
+        title: {
+          type: 'i18n',
+          'en-US': 'Slot Params',
+          'zh-CN': '插槽入参',
+        },
+        setter: {
+          componentName: 'ArraySetter',
+          props: {
+            itemSetter: {
+              componentName: 'StringSetter',
+              props: {
+                placeholder: {
+                  type: 'i18n',
+                  'zh-CN': '参数名称',
+                  'en-US': 'Argument Name',
+                },
+              },
+            },
+          },
+        },
+      },
+    ],
+    component: {
+      isContainer: true,
+      disableBehaviors: '*',
+    },
+    // events/className/style/general/directives
+    supports: false,
+    advanced: {
+      callbacks: {
+        onHoverHook: () => false,
+        onMouseDownHook: () => false,
+        onClickHook: () => false,
+      },
+    },
+  },
+};

package/lowcode/slot/view.tsx

@@ -0,0 +1,58 @@
+import { Component } from 'react';
+
+class Slot extends Component {
+  static displayName = 'Slot';
+
+  static componentMetadata = {
+    componentName: 'Slot',
+    configure: {
+      props: [
+        {
+          name: '___title',
+          title: {
+            type: 'i18n',
+            'en-US': 'Slot Title',
+            'zh-CN': '插槽标题',
+          },
+          setter: 'StringSetter',
+          defaultValue: '插槽容器',
+        },
+        {
+          name: '___params',
+          title: {
+            type: 'i18n',
+            'en-US': 'Slot Params',
+            'zh-CN': '插槽入参',
+          },
+          setter: {
+            componentName: 'ArraySetter',
+            props: {
+              itemSetter: {
+                componentName: 'StringSetter',
+                props: {
+                  placeholder: {
+                    type: 'i18n',
+                    'zh-CN': '参数名称',
+                    'en-US': 'Argument Name',
+                  },
+                },
+              },
+            },
+          },
+        },
+      ],
+      component: {
+        isContainer: true,
+      },
+      // events/className/style/general/directives
+      supports: false,
+    },
+  };
+
+  render() {
+    const { children } = this.props;
+    return <>{children}</>;
+  }
+}
+
+export default Slot;

package/lowcode/space/meta.ts

@@ -0,0 +1,65 @@
+import { ComponentMetadata } from "@alilc/lowcode-types";
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Space',
+  title: '间距',
+  category: '布局',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Space",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'align',
+      title: { label: '对齐方式', tip: '对齐方式' },
+      propType: {
+        type: 'oneOf',
+        value: ['start', 'end', 'center', 'baseline'],
+      },
+    },
+    {
+      name: 'direction',
+      title: { label: '间距方向', tip: '间距方向' },
+      propType: { type: 'oneOf', value: ['vertical', 'horizontal'] },
+    },
+    {
+      name: 'size',
+      title: { label: '间距大小', tip: '间距大小' },
+      propType: {
+        type: 'oneOfType',
+        value: [
+          {
+            type: 'oneOf',
+            value: ['small', 'middle', 'large'],
+          },
+          'number',
+        ],
+      },
+      defaultValue: 'middle',
+    },
+    {
+      name: 'wrap',
+      title: { label: '是否自动换行', tip: '是否自动换行' },
+      propType: "bool",
+      condition: {
+        type: 'JSFunction',
+        value: 'target => target.getProps().getPropValue("direction")==="horizontal"',
+      },
+    },
+    {
+      name: 'split',
+      title: { label: '间隔组件', tip: '间隔组件,可拖组件进来， 常用的有竖向分隔线' },
+      propType: "node",
+    },
+  ],
+  configure: { component: { isContainer: true }, supports: { style: true } },
+} as ComponentMetadata | any;

package/lowcode/space/snippets.ts

@@ -0,0 +1,24 @@
+export default [
+  {
+    title: '间距',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/space-1.png',
+    schema: {
+      componentName: 'Space',
+      props: {},
+      children: [
+        {
+          componentName: 'Button',
+          props: {
+            children: 'Button-1',
+          },
+        },
+        {
+          componentName: 'Button',
+          props: {
+            children: 'Button-2',
+          },
+        },
+      ],
+    },
+  },
+];

package/lowcode/spin/meta.ts

@@ -0,0 +1,60 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Spin',
+  title: '加载中',
+  category: '反馈',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Spin",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'delay',
+      title: { label: '延迟显示', tip: '延迟显示加载效果的时间（防止闪烁）' },
+      propType: 'number',
+    },
+    {
+      name: 'indicator',
+      title: { label: '加载指示符', tip: '加载指示符' },
+      propType: 'node',
+    },
+    {
+      name: 'size',
+      title: {
+        label: '尺寸',
+        tip: '组件大小',
+      },
+      propType: { type: 'oneOf', value: ['small', 'default', 'large'] },
+      defaultValue: 'default',
+    },
+    {
+      name: 'spinning',
+      title: { label: '加载状态', tip: '是否为加载中状态' },
+      propType: 'bool',
+      defaultValue: true,
+    },
+    {
+      name: 'tip',
+      title: { label: '描述文案', tip: '当作为包裹元素时，可以自定义描述文案' },
+      propType: 'string',
+    },
+    {
+      name: 'wrapperClassName',
+      title: { label: '包装器的类属性', tip: '包装器的类属性' },
+      propType: 'string',
+    },
+  ],
+  configure: {
+    component: { isContainer: true },
+    supports: { style: true },
+  },
+};

package/lowcode/spin/snippets.ts

@@ -0,0 +1,13 @@
+export default [
+  {
+    title: '加载中',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/spin-1.png',
+    schema: {
+      componentName: 'Spin',
+      props: {
+        size: 'large',
+        tip: 'loading...',
+      },
+    },
+  },
+];

package/lowcode/statistic/meta.ts

@@ -0,0 +1,67 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Statistic',
+  title: '统计数值',
+  category: '数据展示',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Statistic",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'decimalSeparator',
+      title: { label: '设置小数点', tip: '设置小数点' },
+      propType: 'string',
+    },
+    {
+      name: 'formatter',
+      title: { label: '自定义数值展示', tip: '自定义数值展示' },
+      propType: 'func',
+    },
+    {
+      name: 'groupSeparator',
+      title: { label: '设置千分位标识符', tip: '设置千分位标识符' },
+      propType: 'string',
+    },
+    {
+      name: 'precision',
+      title: { label: '数值精度', tip: '数值精度' },
+      propType: 'number',
+    },
+    {
+      name: 'prefix',
+      title: { label: '设置数值的前缀', tip: '设置数值的前缀' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'suffix',
+      title: { label: '设置数值的后缀', tip: '设置数值的后缀' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'title',
+      title: { label: '数值的标题', tip: '数值的标题' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'value',
+      title: { label: '数值内容', tip: '数值内容' },
+      propType: { type: 'oneOfType', value: ['string', 'number'] },
+    },
+    {
+      name: 'valueStyle',
+      title: { label: '设置数值的样式', tip: '设置数值的样式' },
+      propType: 'object',
+    },
+  ],
+  configure: { supports: { style: true } },
+};

package/lowcode/statistic/snippets.ts

@@ -0,0 +1,13 @@
+export default [
+  {
+    title: '统计数值',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/statistic-1.png',
+    schema: {
+      componentName: 'Statistic',
+      props: {
+        title: 'Active Users',
+        value: 16589,
+      },
+    },
+  },
+];