@pisell/materials 2.2.13 → 2.2.14

package/lowcode/pisell-input.bank-card-input/snippets.ts

@@ -0,0 +1,11 @@
+export default [
+  {
+    title: '银行卡',
+    screenshot: require('./__screenshots__/pisell-input.bank-card-input.png'),
+    schema: {
+      componentName: 'PisellInput.BankCard',
+      props: {
+      },
+    },
+  },
+];

package/lowcode/pisell-input.copy/meta.ts

@@ -0,0 +1,73 @@
+import snippets from './snippets';
+import baseInputMeta from '../pisell-input/meta';
+import baseButtonMeta from '../button/meta';
+import { addPrefixNameToItems } from "../_utils/transform-meta";
+
+export default {
+  snippets,
+  componentName: 'PisellInput.Copy',
+  title: '复制输入框',
+  category: '表单',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'PisellInput',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: 'Copy',
+  },
+  props: [
+    {
+      title: '按钮props',
+      display: 'entry',
+      type: 'group',
+      items: addPrefixNameToItems(baseButtonMeta.configure.props, 'buttonProps'),
+    },
+    ...baseInputMeta.props,
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(event,${extParams}){\n// 输入框内容变化时的回调\nconsole.log('onChange',event);}",
+        },
+        {
+          name: 'onPressEnter',
+          template:
+            "onPressEnter(event,${extParams}){\n// 按下回车的回调\nconsole.log('onPressEnter',event);}",
+        },
+        {
+          name: 'onFocus',
+          template:
+            "onFocus(event,${extParams}){\n// 获取焦点回调\nconsole.log('onFocus',event);}",
+        },
+        {
+          name: 'onKeyDown',
+          template:
+            "onKeyDown(event,${extParams}){\n// 按键按下时的回调\nconsole.log('onKeyDown',event);}",
+        },
+        {
+          name: 'onKeyPress',
+          template:
+            "onKeyPress(event,${extParams}){\n// 按键按下后的回调\nconsole.log('onKeyPress',event);}",
+        },
+        {
+          name: 'onKeyUp',
+          template:
+            "onKeyUp(event,${extParams}){\n// 按键释放回调\nconsole.log('onKeyUp',event);}",
+        },
+        {
+          name: 'onBlur',
+          template:
+            "onBlur(event,${extParams}){\n// 按键释放回调\nconsole.log('onBlur',event);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/pisell-input.copy/snippets.ts

@@ -0,0 +1,10 @@
+export default [
+  {
+    title: '复制输入框',
+    schema: {
+      componentName: 'PisellInput.Copy',
+      props: {
+      },
+    },
+  },
+];

package/lowcode/pisell-input.security-code/meta.ts

@@ -0,0 +1,92 @@
+import snippets from './snippets';
+import baseInputMeta from '../pisell-input/meta';
+
+export default {
+  snippets,
+  componentName: 'PisellInput.SecurityCode',
+  title: '输入安全码',
+  category: '表单',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'PisellInput',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: 'SecurityCode',
+  },
+  props: [
+    {
+      name: 'maxLength',
+      title: { label: 'CVC位数', tip: 'CVC位数' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '3位',
+              value: 3,
+            },
+            {
+              title: '4位',
+              value: 4,
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: [3, 4] },
+      defaultValue: 3,
+    },
+    {
+      name: 'showCVCIcon',
+      title: { label: '显示CVC提示Icon', tip: '是否显示CVC提示Icon' },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter',
+    },
+    ...(baseInputMeta.props.filter(item => item.name !== 'maxLength'))],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(event,${extParams}){\n// 输入框内容变化时的回调\nconsole.log('onChange',event);}",
+        },
+        {
+          name: 'onPressEnter',
+          template:
+            "onPressEnter(event,${extParams}){\n// 按下回车的回调\nconsole.log('onPressEnter',event);}",
+        },
+        {
+          name: 'onFocus',
+          template:
+            "onFocus(event,${extParams}){\n// 获取焦点回调\nconsole.log('onFocus',event);}",
+        },
+        {
+          name: 'onKeyDown',
+          template:
+            "onKeyDown(event,${extParams}){\n// 按键按下时的回调\nconsole.log('onKeyDown',event);}",
+        },
+        {
+          name: 'onKeyPress',
+          template:
+            "onKeyPress(event,${extParams}){\n// 按键按下后的回调\nconsole.log('onKeyPress',event);}",
+        },
+        {
+          name: 'onKeyUp',
+          template:
+            "onKeyUp(event,${extParams}){\n// 按键释放回调\nconsole.log('onKeyUp',event);}",
+        },
+        {
+          name: 'onBlur',
+          template:
+            "onBlur(event,${extParams}){\n// 按键释放回调\nconsole.log('onBlur',event);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/pisell-input.security-code/snippets.ts

@@ -0,0 +1,11 @@
+export default [
+  {
+    title: '输入安全码',
+    screenshot: require('./__screenshots__/pisell-input.security-code.png'),
+    schema: {
+      componentName: 'PisellInput.SecurityCode',
+      props: {
+      },
+    },
+  },
+];

package/lowcode/pisell-loading/meta.ts

@@ -0,0 +1,98 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'PisellLoading',
+  title: '加载',
+  category: '数据展示',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'PisellLoading',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  props: [
+    {
+      name: 'loading',
+      title: {
+        label: '是否加载中',
+        tip: '是否加载中',
+      },
+      propType: 'bool',
+      defaultValue: false,
+    },
+    {
+      name: 'fullscreen',
+      title: {
+        label: '全屏',
+        tip: '是否全屏加载',
+      },
+      propType: 'bool',
+      defaultValue: false,
+    },
+    {
+      title: '蒙层设置',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'mask',
+          title: { label: '是否开启蒙层 ', tip: '是否开启蒙层 ' },
+          propType: "object",
+          defaultValue: true,
+          setter: "BoolSetter",
+          extraProps: {
+            setValue: (target, value) => {
+              if (value) {
+                target.parent.setPropValue("mask", {
+                  width: "100%",
+                  height: '100%',
+                  backgroundColor: "#fff"
+                });
+              }
+            },
+          },
+        },
+        {
+          name: 'mask.width',
+          title: { label: '蒙层宽度', tip: '蒙层宽度' },
+          propType: { type: 'oneOfType', value: ['string', 'number'] },
+          setter: ['StringSetter', 'NumberSetter'],
+          condition: {
+            type: "JSFunction",
+            value: 'target => !!target.getProps().getPropValue("mask")',
+          },
+        },
+        {
+          name: 'mask.height',
+          title: { label: '蒙层高度', tip: '蒙层高度' },
+          propType: { type: 'oneOfType', value: ['string', 'number'] },
+          setter: ['StringSetter', 'NumberSetter'],
+          condition: {
+            type: "JSFunction",
+            value: 'target => !!target.getProps().getPropValue("mask")',
+          },
+        },
+        {
+          name: 'mask.backgroundColor',
+          title: { label: '背景色', tip: '背景色 可设置透明度' },
+          propType: 'string',
+          setter: 'ColorSetter',
+          condition: {
+            type: "JSFunction",
+            value: 'target => !!target.getProps().getPropValue("mask")',
+          },
+        },
+      ],
+    },
+  ],
+  configure: {
+    component: { isContainer: true },
+    supports: { style: true },
+  },
+};

package/lowcode/pisell-loading/snippets.ts

@@ -0,0 +1,11 @@
+export default [
+  {
+    title: 'pisellLoading',
+    schema: {
+      componentName: 'PisellLoading',
+      props: {
+        loading: true
+      },
+    },
+  },
+];

package/lowcode/pisell-modal/meta.ts

@@ -0,0 +1,200 @@
+import modalMeta from '../modal/meta';
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'PisellModal',
+  title: 'pisell对话框',
+  category: '反馈',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'PisellModal',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  props: [
+    {
+      name: 'platform',
+      title: {
+        label: '指定平台信息',
+        tip: 'platform',
+      },
+      propType: { type: 'oneOf', value: ['h5', 'ipad', 'pc', null] },
+      setter: [
+        {
+          componentName: 'RadioGroupSetter',
+          props: {
+            options: [
+              {
+                title: 'h5',
+                value: 'h5',
+              },
+              {
+                title: 'ipad',
+                value: 'ipad',
+              },
+              {
+                title: 'pc',
+                value: 'pc',
+              },
+              {
+                title: 'null',
+                value: null,
+              },
+            ],
+          },
+        },
+        'VariableSetter',
+      ],
+      defaultValue: null,
+    },
+    // {
+    //   name: 'size',
+    //   title: {
+    //     label: 'size',
+    //     tip: '弹框大小',
+    //   },
+    //   propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
+    //   setter: [
+    //     {
+    //       componentName: 'RadioGroupSetter',
+    //       props: {
+    //         options: [
+    //           {
+    //             title: 'large',
+    //             value: 'large',
+    //           },
+    //           {
+    //             title: 'middle',
+    //             value: 'middle',
+    //           },
+    //           {
+    //             title: 'small',
+    //             value: 'small',
+    //           },
+    //         ],
+    //       },
+    //     },
+    //     'VariableSetter',
+    //   ],
+    //   defaultValue: 'middle',
+    // },
+    {
+      name: 'headerDivider',
+      title: { label: '顶部区域分割线', tip: '顶部区域分割线是否可见' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+      defaultValue: true,
+    },
+    {
+      name: 'footerDivider',
+      title: { label: '顶部区域分割线', tip: '顶部区域分割线是否可见' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+      defaultValue: true,
+    },
+    {
+      name: 'mobileModalHeight',
+      title: { label: '移动端高度', tip: '移动端展示时弹窗高度' },
+      propType: { type: 'oneOfType', value: ['string', 'number'] },
+      defaultValue: null,
+    },
+    {
+      name: 'deleteButtonProps',
+      title: { label: '删除按钮props', tip: '删除按钮props' },
+      propType: 'object',
+      setter: {
+        componentName: 'ObjectSetter',
+        defaultValue: null,
+        props: {
+          config: {
+            items: [
+              {
+                name: 'disabled',
+                title: { label: '是否可点击', tip: 'disabled' },
+                propType: 'bool',
+                setter: [
+                  {
+                    componentName: 'BoolSetter',
+
+                    initialValue: false,
+                  },
+                  'VariableSetter',
+                ],
+                isRequired: true,
+              },
+            ],
+          },
+        },
+      },
+    },
+    {
+      name: "actions",
+      title: { label: "操作按钮", tip: "footer中额外操作按钮" },
+      propType: { type: "oneOfType", value: ["node"] },
+      setter: ["SlotSetter"],
+    },
+    {
+      name: 'cancelVisible',
+      title: { label: '取消按钮', tip: '取消按钮是否可见' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+      defaultValue: true,
+    },
+    {
+      name: 'okVisible',
+      title: { label: '确认按钮', tip: '确认按钮是否可见' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+      defaultValue: true,
+    },
+    {
+      name: 'header',
+      title: { label: '展示header', tip: '是否展示header' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+      defaultValue: true,
+    },
+    ...modalMeta.props,
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+      isModal: true,
+      rootSelector: '.pisell-lowcode-modal-content',
+      nestingRule: {
+        parentWhitelist: ['Page', 'Component'],
+      },
+    },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'afterClose',
+          templete:
+            "onCancel(${extParams}){\n// 完全关闭后的回调\nconsole.log('afterClose');}",
+        },
+        {
+          name: 'onCancel',
+          template:
+            "onCancel(${extParams}){\n// 点击遮罩层或右上角叉或取消按钮的回调\nconsole.log('onCancel');}",
+        },
+        {
+          name: 'onOk',
+          template:
+            "onOk(${extParams}){\n// 点击确定回调\nconsole.log('onOk');}",
+        },
+        {
+          name: 'onDelete',
+          template:
+            "onDelete(${extParams}){\n// 点击删除回调\nconsole.log('onDelete');}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/pisell-modal/snippets.ts

@@ -0,0 +1,38 @@
+export default [
+  {
+    title: '对话框原子',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/modal-1.png',
+    schema: {
+      componentName: 'PisellModal',
+      props: {
+        open: true,
+        destroyOnClose: true,
+        footer: {
+          "type": "JSSlot",
+          "id": "node_oclzi7roj61"
+        },
+        title: {
+          "type": "JSSlot",
+          "id": "node_oclzi7roj62"
+        }
+      },
+      children: [],
+    },
+  },
+  {
+    title: 'pisell普通型',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/modal-1.png',
+    schema: {
+      componentName: 'PisellModal',
+      props: {
+        title: 'Basic Modal',
+        okText: '确认',
+        cancelText: '取消',
+        open: true,
+        footer: null,
+        destroyOnClose: true,
+      },
+      children: [],
+    },
+  },
+];

package/lowcode/pisell-modal.information/meta.ts

@@ -0,0 +1,116 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'PisellModal.Information',
+  title: '信息对话框',
+  category: '反馈',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'PisellModal',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: 'Information',
+  },
+  props: [
+    {
+      name: "open",
+      title: { label: "是否可见", tip: "对话框是否可见" },
+      propType: "bool",
+      setter: "BoolSetter",
+      supportVariable: true,
+    },
+    {
+      name: "title",
+      title: { label: "标题内容", tip: "标题内容" },
+      propType: { type: "oneOfType", value: ["string", "node"] },
+      setter: ["PisellI18nSetter", "SlotSetter"],
+    },
+    {
+      name: "describe",
+      title: { label: "描述正文", tip: "描述正文" },
+      propType: { type: "oneOfType", value: ["string", "node"] },
+      setter: ["PisellI18nSetter", "SlotSetter"],
+    },
+    {
+      name: 'okVisible',
+      title: { label: '确认按钮', tip: '确认按钮是否可见' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+      defaultValue: true,
+    },
+    {
+      name: 'footerDivider',
+      title: { label: '顶部区域分割线', tip: '顶部区域分割线是否可见' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+      defaultValue: true,
+    },
+    {
+      name: "okText",
+      title: { label: "确认按钮文字", tip: "确认按钮文字" },
+      propType: { type: "oneOfType", value: ["string", "node"] },
+      setter: ["PisellI18nSetter", "SlotSetter"],
+    },
+    {
+      name: "closable",
+      title: { label: "显示关闭按钮", tip: "是否显示右上角的关闭按钮" },
+      propType: "bool",
+      defaultValue: true,
+      setter: "BoolSetter",
+      supportVariable: true,
+    },
+    {
+      name: 'cancelVisible',
+      title: { label: '取消按钮', tip: '取消按钮是否可见' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+      defaultValue: true,
+    },
+    {
+      name: "cancelText",
+      title: { label: "取消按钮文字", tip: "取消按钮文字" },
+      propType: { type: "oneOfType", value: ["string", "node"] },
+      setter: ["PisellI18nSetter", "SlotSetter"],
+    },
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+      isModal: true,
+      rootSelector: '.pisell-lowcode-modal-content',
+      nestingRule: {
+        parentWhitelist: ['Page', 'Component'],
+      },
+    },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'afterClose',
+          templete:
+            "onCancel(${extParams}){\n// 完全关闭后的回调\nconsole.log('afterClose');}",
+        },
+        {
+          name: 'onCancel',
+          template:
+            "onCancel(${extParams}){\n// 点击遮罩层或右上角叉或取消按钮的回调\nconsole.log('onCancel');}",
+        },
+        {
+          name: 'onOk',
+          template:
+            "onOk(${extParams}){\n// 点击确定回调\nconsole.log('onOk');}",
+        },
+        {
+          name: 'onDelete',
+          template:
+            "onDelete(${extParams}){\n// 点击删除回调\nconsole.log('onDelete');}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/pisell-modal.information/snippets.ts

@@ -0,0 +1,17 @@
+export default [
+  {
+    title: '信息对话框',
+    screenshot: require('./__screenshots__/pisell-modal.information.png'),
+    schema: {
+      componentName: 'PisellModal.Information',
+      props: {
+        title: 'Information title',
+        describe: 'This is a Supporting text',
+        okText: '确认',
+        cancelText: '取消',
+        open: true,
+      },
+      children: [],
+    },
+  },
+];