@pisell/materials 1.0.503 → 1.0.504

package/lowcode/pisell-custom-checkbox-group/snippets.ts

@@ -0,0 +1,56 @@
+export default [
+  {
+    title: '自定义选项卡',
+    schema: {
+      componentName: 'PisellCustomCheckboxGroup',
+      props: {
+        disabled: false,
+        allowAdd: false,
+        dataSource: [
+          {
+            id: 1,
+            text: "Racing car sprays burning fuel into crowd.",
+          },
+          {
+            id: 2,
+            text: "Japanese princess to wed commoner.",
+          },
+          {
+            id: 3,
+            text: "Australian walks 100km after outback crash.",
+          },
+          {
+            id: 4,
+            text: "Man charged over missing wedding girl.",
+          },
+          {
+            id: 5,
+            text: "Los Angeles battles huge wildfires.",
+          },
+        ],
+        columns: 3,
+        horizontalGap: 10,
+        verticalGap: 10,
+        renderItem: {
+          type: "JSSlot",
+          params: ["item"],
+          value: [
+            {
+              componentName: "List.Item",
+              props: {},
+              children: {
+                componentName: "Typography.Text",
+                props: {
+                  children: {
+                    type: "JSExpression",
+                    value: "this.item.text",
+                  },
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+];

package/lowcode/pisell-dropdown/meta.ts

@@ -0,0 +1,180 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'PisellDropdown',
+  title: '下拉菜单',
+  category: '导航',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "PisellDropdown",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'open',
+      title: { label: '菜单是否显示', tip: '菜单是否显示' },
+      propType: { type: 'oneOf', value: [true, false, '-'] },
+      defaultValue: '-',
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '默认非受控',
+              value: '-',
+            },
+            {
+              title: '显示',
+              value: true,
+            },
+            {
+              title: '不显示',
+              value: false,
+            },
+          ],
+        },
+      },
+      extraProps: {
+        getValue(target, fieldValue) {
+          const { node } = target;
+          let value = node.getPropValue('open');
+          if (value === undefined) {
+            value = '-';
+          }
+          return value;
+        },
+        setValue(target, value) {
+          const { node } = target;
+          if (value === '-') {
+            setTimeout(() => {
+              node.clearPropValue('open');
+            });
+          }
+        },
+      },
+    },
+    {
+      name: 'arrow',
+      title: { label: '显示下拉箭头', tip: '是否显示下拉箭头' },
+      propType: 'bool',
+      defaultValue: false,
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否为禁用状态' },
+      propType: 'bool',
+    },
+    // {
+    //   name: 'getPopupContainer',
+    //   title: {
+    //     label: '渲染父节点',
+    //     tip:
+    //       '菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010)',
+    //   },
+    //   propType: 'func',
+    // },
+    {
+      name: 'overlay',
+      title: { label: '菜单', tip: '菜单' },
+      // propType: { type: 'oneOfType', value: ['node', 'func'] },
+      componentName: 'ArraySetter',
+      props: {
+        itemSetter: {
+          componentName: 'ObjectSetter',
+          props: {
+            config: {
+              items: [
+                {
+                  name: 'key',
+                  title: 'key',
+                  setter: 'StringSetter',
+                },
+                {
+                  name: 'label',
+                  title: '标签',
+                  setter: 'StringSetter',
+                },
+                {
+                  name: 'icon',
+                  title: '图标',
+                  setter: 'IconSetter',
+                },
+                {
+                  name: 'shortcut',
+                  title: '快捷键',
+                  setter: 'StringSetter',
+                },
+                {
+                  name: 'divider',
+                  title: '分割线',
+                  setter: 'BoolSetter',
+                },
+              ],
+            },
+          },
+        },
+      },
+    },
+    // {
+    //   name: 'overlayClassName',
+    //   title: { label: '根元素的类名称', tip: '根元素的类名称' },
+    //   propType: 'string',
+    // },
+    // {
+    //   name: 'overlayStyle',
+    //   title: { label: '根元素的样式', tip: '根元素的样式' },
+    //   propType: 'object',
+    // },
+    {
+      name: 'placement',
+      title: {
+        label: '弹出位置',
+        tip:
+          '菜单弹出位置：`bottomLeft` `bottom` `bottomRight` `topLeft` `top` `topRight`',
+      },
+      propType: {
+        type: 'oneOf',
+        value: ['bottomLeft', 'bottom', 'bottomRight', 'topLeft', 'top', 'topRight'],
+      },
+    },
+    {
+      name: 'trigger',
+      title: {
+        label: '触发下拉的行为',
+        tip: '触发下拉的行为, 移动端不支持 hover',
+      },
+      propType: {
+        type: 'arrayOf',
+        value: { type: 'oneOf', value: ['click', 'hover', 'contextMenu'] },
+      },
+    },
+    {
+      name: 'onOpenChange',
+      title: {
+        label: '显示状态回调',
+        tip: '菜单显示状态改变时调用，参数为 `open`',
+      },
+      propType: 'func',
+    },
+  ],
+  configure: {
+    component: { isContainer: true },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onOpenChange',
+          template:
+            "onOpenChange(open,${extParams}){\n// 菜单显示状态改变时调用\nconsole.log('onOpenChange',open);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/pisell-dropdown/snippets.ts

@@ -0,0 +1,69 @@
+export default [
+  {
+    title: "下拉菜单",
+    screenshot:
+      "https://alifd.alicdn.com/fusion-cool/icons/icon-antd/dropdown-1.png",
+    schema: {
+      componentName: "PisellDropdown",
+      props: {
+        overlay: {
+          type: "JSSlot",
+          value: [
+            {
+              componentName: "Menu",
+              props: {
+                items: [
+                  {
+                    key: 'profile',
+                    label: 'View profile',
+                    icon: 'UserOutlined',
+                    shortcut: '⌘+P',
+                  },
+                  {
+                    key: 'settings',
+                    label: 'Settings',
+                    icon: 'SettingOutlined',
+                    shortcut: '⌘+S',
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+      children: [
+        {
+          componentName: "Button",
+          props: {
+            type: "link",
+            children: {
+              type: "JSSlot",
+              value: [
+                {
+                  componentName: "Typography.Text",
+                  props: {
+                    children: "Hover me",
+                    style: {
+                      color: "inherit",
+                    },
+                  },
+                },
+                {
+                  componentName: "Icon",
+                  props: {
+                    type: "DownOutlined",
+                    size: 15,
+                    style: {
+                      marginLeft: 4,
+                      verticalAlign: "middle",
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      ],
+    },
+  },
+];

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

@@ -0,0 +1,143 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'PisellImageCarousels',
+  title: '轮播图',
+  category: '数据展示',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'PisellImageCarousels',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  props: [
+    {
+      title: '数据源',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'dataSource',
+          title: { label: '列表数据源', tip: '列表数据源' },
+          propType: { type: 'arrayOf', value: 'any' },
+          setter: ['JsonSetter', 'VariableSetter'],
+        },
+        {
+          name: 'rowKey',
+          title: {
+            label: '行Key',
+            tip: 'rowKey | 当 renderItem 自定义渲染列表项有效时，自定义每一行的 key 的获取方式',
+          },
+          propType: {
+            type: 'oneOfType',
+            value: ['string', 'function'],
+          },
+          defaultValue: 'id',
+          setter: [
+            'StringSetter',
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'rowKey(item,${extParams}){\n// 自定义每一行的 key\nreturn `key-${item.id}`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+      ],
+    },
+    {
+      title: '轮播设置',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'showDots',
+          title: { label: '显示翻页点', tip: 'showDots | 显示翻页点' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: true,
+        },
+        {
+          name: 'showArrows',
+          title: { label: '显示箭头', tip: 'showArrows | 显示箭头' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: true,
+        },
+        {
+          name: 'autoplay',
+          title: { label: '自动切换', tip: 'autoplay | 自动切换' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: true,
+        },
+        {
+          name: 'interval',
+          title: { label: '切换的间隔 (毫秒)', tip: 'interval | 切换的间隔 (毫秒)' },
+          setter: {
+            componentName: "NumberSetter",
+            props: {
+              min: 0,
+            },
+          },
+          defaultValue: 3000,
+        },
+      ],
+    },
+    {
+      title: '图片设置',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'borderRadius',
+          title: { label: '圆角度数', tip: 'borderRadius | 圆角度数' },
+          setter: {
+            componentName: "NumberSetter",
+            props: {
+              min: 0,
+            },
+          },
+          defaultValue: 8,
+        },
+        {
+          name: 'width',
+          title: { label: '图片宽度', tip: 'width | 图片宽度' },
+          setter: {
+            componentName: "NumberSetter",
+            props: {
+              min: 0,
+            },
+          },
+          defaultValue: 640,
+        },
+        {
+          name: 'height',
+          title: { label: '图片高度', tip: 'height | 图片高度' },
+          setter: {
+            componentName: "NumberSetter",
+            props: {
+              min: 0,
+            },
+          },
+          defaultValue: 400,
+        },
+      ],
+    },
+  ],
+
+  configure: {
+    supports: {
+      style: true,
+      events: [],
+    },
+  },
+};

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

@@ -0,0 +1,26 @@
+export default [
+  {
+    title: '轮播图',
+    schema: {
+      componentName: 'PisellImageCarousels',
+      props: {
+        dataSource: [{
+          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          alt: '图片1',
+        },
+        {
+          url: 'https://gw.alicdn.com/bao/uploaded/i1/1115405069/O1CN01IYXdQb1nJebqPtA8S_!!1115405069.jpg_.webp',
+          alt: '图片2',
+        }
+        ],
+        showDots: true,
+        showArrows: true,
+        autoplay: true,
+        interval: 3000,
+        borderRadius: 8,
+        height: 400,
+        width: 640,
+      },
+    },
+  },
+];

package/lowcode/pisell-progress-bar/meta.ts

@@ -0,0 +1,115 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'PisellProgressBar',
+  title: '顶部进度栏',
+  category: '导航',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'PisellProgressBar',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  props: [{
+    name: 'showClose',
+    title: {
+      label: '显示关闭',
+      tip: 'showClose | 显示关闭',
+    },
+    propType: 'bool',
+    setter: 'BoolSetter',
+    defaultValue: true,
+  },
+  {
+    name: 'isConfirmClose',
+    title: {
+      label: '关闭时二次确认',
+      tip: 'isConfirmClose | 关闭时二次确认',
+    },
+    propType: 'bool',
+    setter: 'BoolSetter',
+    defaultValue: true,
+    condition(target) {
+      return target.getProps().getPropValue("showClose");
+    },
+  },
+  {
+    name: 'showStep',
+    title: {
+      label: '显示步骤',
+      tip: 'showStep | 显示步骤',
+    },
+    propType: 'bool',
+    setter: 'BoolSetter',
+    defaultValue: true,
+  },
+  {
+    name: 'step',
+    title: {
+      label: '当前步骤值',
+      tip: 'step | 当前选择的第几步',
+    },
+    setter: {
+      componentName: 'NumberSetter',
+      props: {
+        min: 1,
+      },
+    },
+    condition(target) {
+      return target.getProps().getPropValue("showStep");
+    },
+  },
+  {
+    type: 'group',
+    title: '外观',
+    display: 'block',
+    items: [
+      {
+        name: 'border',
+        title: {
+          label: '描边',
+          tip: 'border | 描边',
+        },
+        propType: 'bool',
+        setter: 'BoolSetter',
+        defaultValue: true,
+      },
+      {
+        name: 'backgroundColor',
+        title: {
+          label: '头部背景颜色',
+          tip: 'backgroundColor | 头部背景颜色',
+        },
+        setter: 'ColorSetter',
+        defaultValue: '#ffffff',
+      },
+    ]
+  }
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+    },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onBack',
+          template:
+            "onBack(value,${extParams}){\n// 返回事件的回调\nconsole.log('onBack',value);}",
+        },
+        {
+          name: 'onAction',
+          template:
+            "onAction(value,${extParams}){\n// 右侧操作事件的回调\nconsole.log('onAction',value);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/pisell-progress-bar/snippets.ts

@@ -0,0 +1,15 @@
+export default [
+  {
+    title: '顶部进度栏',
+    schema: {
+      componentName: 'PisellProgressBar',
+      props: {
+        showClose: true,
+        isConfirmClose: true,
+        showStep: true,
+        step: 1,
+        backgroundColor: '#ffffff'
+      },
+    },
+  },
+];

package/lowcode/pisell-section-headers/meta.ts

@@ -0,0 +1,91 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'PisellSectionHeaders',
+  title: '顶部内容区块',
+  category: '数据展示',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'PisellSectionHeaders',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  props: [
+    // {
+    //   title: '基础',
+    //   display: 'block',
+    //   type: 'group',
+    //   items: [
+    //     {
+    //       name: 'background',
+    //       title: { label: '背景色', tip: 'background | 背景色' },
+    //       propType: 'string',
+    //       setter: 'ColorSetter',
+    //     },
+    //   ],
+    // },
+    {
+      name: 'backNode',
+      title: { label: '返回区域', tip: 'backNode | 返回区域' },
+      propType: 'node',
+      setter: {
+        componentName: 'SlotSetter',
+        initialValue: {
+          type: 'JSSlot',
+          value: [],
+        },
+      },
+
+    },
+    {
+      name: 'centerNode',
+      title: { label: '中间区域', tip: 'centerNode | 中间区域' },
+      propType: 'node',
+      setter: {
+        componentName: 'SlotSetter',
+        initialValue: {
+          type: 'JSSlot',
+          value: [],
+        },
+      },
+    },
+    {
+      name: 'actionNode',
+      title: { label: '操作区域', tip: 'actionNode | 操作区域' },
+      propType: 'node',
+      setter: {
+        componentName: 'SlotSetter',
+        initialValue: {
+          type: 'JSSlot',
+          value: [],
+        },
+      },
+    },
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+    },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onBack',
+          template:
+            "onBack(value,${extParams}){\n// 返回事件的回调\nconsole.log('onBack',value);}",
+        },
+        {
+          name: 'onAction',
+          template:
+            "onAction(value,${extParams}){\n// 右侧操作事件的回调\nconsole.log('onAction',value);}",
+        },
+      ],
+    },
+  },
+};