@pisell/materials 1.0.1 → 1.0.3

package/lowcode/button/snippets.ts

@@ -0,0 +1,68 @@
+export default [
+  {
+    title: '主按钮',
+    screenshot: require('./__screenshots__/button-1.png'),
+    schema: {
+      componentName: 'Button',
+      props: {
+        type: 'primary',
+        children: '主按钮',
+      },
+    },
+  },
+  {
+    title: '次按钮',
+    screenshot: require('./__screenshots__/button-2.png'),
+    schema: {
+      componentName: 'Button',
+      props: {
+        type: 'default',
+        children: '次按钮',
+      },
+    },
+  },
+  {
+    title: '危险按钮',
+    screenshot: require('./__screenshots__/button-3.png'),
+    schema: {
+      componentName: 'Button',
+      props: {
+        type: 'danger',
+        children: '危险按钮',
+      },
+    },
+  },
+  {
+    title: '文字按钮',
+    screenshot: require('./__screenshots__/button-4.png'),
+    schema: {
+      componentName: 'Button',
+      props: {
+        type: 'text',
+        children: '文字按钮',
+      },
+    },
+  },
+  {
+    title: '虚框按钮',
+    screenshot: require('./__screenshots__/button-5.png'),
+    schema: {
+      componentName: 'Button',
+      props: {
+        type: 'dashed',
+        children: '虚框按钮',
+      },
+    },
+  },
+  {
+    title: '链接按钮',
+    screenshot: require('./__screenshots__/button-6.png'),
+    schema: {
+      componentName: 'Button',
+      props: {
+        type: 'link',
+        children: '链接按钮',
+      },
+    },
+  },
+];

package/lowcode/calendar/meta.ts

@@ -0,0 +1,133 @@
+import snippets from "./snippets";
+
+export default {
+  snippets,
+  componentName: "Calendar",
+  title: "日历",
+  category: "数据展示",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Calendar",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        name: "defaultValue",
+        title: { label: "默认值", tip: "默认展示的日期" },
+        propType: "date",
+        setter: "DateSetter",
+      },
+      // {
+      //   name: 'dateCellRender',
+      //   title: {
+      //     label: '自定义日期追加渲染',
+      //     tip: '自定义渲染日期单元格，返回内容会被追加到单元格',
+      //   },
+      //   propType: 'func',
+      // },
+      // {
+      //   name: 'dateFullCellRender',
+      //   title: {
+      //     label: '自定义渲染日期单元格，返回内容覆盖单元格',
+      //     tip: '自定义渲染日期单元格，返回内容覆盖单元格',
+      //   },
+      //   propType: 'func',
+      // },
+      {
+        name: "disabledDate",
+        title: { label: "不可选日期", tip: "不可选择的日期" },
+        propType: "func",
+      },
+      {
+        name: "fullscreen",
+        title: { label: "全屏显示", tip: "是否全屏显示" },
+        propType: "bool",
+        defaultValue: true,
+      },
+      // {
+      //   name: 'locale',
+      //   title: { label: '国际化配置', tip: '国际化配置' },
+      //   propType: 'object',
+      // },
+      {
+        name: "mode",
+        title: { label: "初始模式", tip: "初始模式" },
+        propType: { type: "oneOf", value: ["month", "year"] },
+        defaultValue: "month",
+      },
+      // {
+      //   name: 'monthCellRender',
+      //   title: {
+      //     label: '自定义渲染月单元格，返回内容会被追加到单元格',
+      //     tip: '自定义渲染月单元格，返回内容会被追加到单元格',
+      //   },
+      //   propType: 'func',
+      // },
+      // {
+      //   name: 'monthFullCellRender',
+      //   title: {
+      //     label: '自定义渲染月单元格，返回内容覆盖单元格',
+      //     tip: '自定义渲染月单元格，返回内容覆盖单元格',
+      //   },
+      //   propType: 'func',
+      // },
+      // {
+      //   name: 'validRange',
+      //   title: { label: '设置可以显示的日期', tip: '设置可以显示的日期' },
+      //   propType: { type: 'arrayOf', value: 'object' },
+      // },
+      // {
+      //   name: 'value',
+      //   title: { label: '当前值', tip: '展示日期' },
+      //   propType: 'object',
+      // },
+      {
+        name: "onPanelChange",
+        title: { label: "日期面板变化回调", tip: "日期面板变化回调" },
+        propType: "func",
+      },
+      {
+        name: "onSelect",
+        title: { label: "点击选择日期回调", tip: "点击选择日期回调" },
+        propType: "func",
+      },
+      {
+        name: "onChange",
+        title: { label: "日期变化回调", tip: "日期变化回调" },
+        propType: "func",
+      },
+      // {
+      //   name: 'headerRender',
+      //   title: { label: '自定义头部内容', tip: '自定义头部内容' },
+      //   propType: 'func',
+      // },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: "onPanelChange",
+          template:
+            "onPanelChange(date,mode,${extParams}){\n// 日期面板变化回调\nconsole.log('onPanelChange', date, mode);}",
+        },
+        {
+          name: "onSelect",
+          template:
+            "onSelect(date,${extParams}){\n// 点击选择日期回调\nconsole.log('onSelect', date);}",
+        },
+        {
+          name: "onChange",
+          template:
+            "onChange(date,${extParams}){\n// 日期变化回调\nconsole.log('onChange', date);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/calendar/snippets.ts

@@ -0,0 +1,10 @@
+export default [
+  {
+    title: '日历',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/calendar-1.jpg',
+    schema: {
+      componentName: 'Calendar',
+      props: {},
+    },
+  },
+];

package/lowcode/card/meta.ts

@@ -0,0 +1,97 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Card',
+  title: '卡片',
+  category: '数据展示',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Card",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        name: 'title',
+        title: { label: '卡片标题', tip: '卡片标题' },
+        propType: { type: 'oneOfType', value: ['string', 'node'] },
+      },
+      // {
+      //   name: 'actions',
+      //   title: { label: '卡片操作组', tip: '卡片操作组，位置在卡片底部' },
+      //   propType: { type: 'arrayOf', value: 'node' },
+      // },
+      // {
+      //   name: 'headStyle',
+      //   title: { label: '标题区域样式', tip: '自定义标题区域样式' },
+      //   propType: 'object',
+      // },
+      // {
+      //   name: 'bodyStyle',
+      //   title: { label: '内容区域样式', tip: '内容区域自定义样式' },
+      //   propType: 'object',
+      // },
+      {
+        name: 'bordered',
+        title: { label: '显示边框', tip: '是否有边框' },
+        propType: 'bool',
+        defaultValue: true,
+      },
+      {
+        name: 'cover',
+        title: { label: '卡片封面', tip: '卡片封面' },
+        propType: 'node',
+      },
+      {
+        name: 'extra',
+        title: { label: '额外元素', tip: '卡片右上角的操作区域' },
+        propType: { type: 'oneOfType', value: ['string', 'node'] },
+      },
+      {
+        name: 'hoverable',
+        title: { label: '可浮起', tip: '鼠标移过时可浮起' },
+        propType: 'bool',
+        defaultValue: false,
+      },
+      {
+        name: 'loading',
+        title: {
+          label: 'loading',
+          tip: '当卡片内容还在加载中时，可以用 loading 展示一个占位',
+        },
+        propType: 'bool',
+        defaultValue: false,
+      },
+      {
+        name: 'size',
+        title: { label: '尺寸', tip: 'card 的尺寸' },
+        propType: { type: 'oneOf', value: ['default', 'small'] },
+        defaultValue: 'default',
+      },
+      {
+        name: 'type',
+        title: { label: '卡片类型', tip: '卡片类型' },
+        propType: { type: 'oneOf', value: ['default', 'inner'] },
+        defaultValue: 'default',
+      },
+    ],
+    component: { isContainer: true },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onTabChange',
+          template:
+            "onTabChange(key,${extParams}){\n// 页签切换的回调\nconsole.log('onTabChange', key);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/card/snippets.ts

@@ -0,0 +1,12 @@
+export default [
+  {
+    title: '卡片',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/card-1.png',
+    schema: {
+      componentName: 'Card',
+      props: {
+        title: 'Default size card',
+      },
+    },
+  },
+];

package/lowcode/carousel/meta.ts

@@ -0,0 +1,148 @@
+import { uuid } from "../_utils/utils";
+
+import snippets from "./snippets";
+
+export default {
+  snippets,
+  componentName: "Carousel",
+  title: "走马灯",
+  category: "数据展示",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Carousel",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        name: "afterChange",
+        title: { label: "切换面板的回调", tip: "切换面板的回调" },
+        propType: "func",
+      },
+      {
+        name: "autoplay",
+        title: { label: "是否自动切换", tip: "是否自动切换" },
+        propType: "bool",
+        defaultValue: false,
+      },
+      {
+        name: "beforeChange",
+        title: { label: "切换面板的回调", tip: "切换面板的回调" },
+        propType: "func",
+      },
+      {
+        name: "dotPosition",
+        title: {
+          label: "指示点位置",
+          tip: "面板指示点位置，可选 `top` `bottom` `left` `right`",
+        },
+        propType: {
+          type: "oneOf",
+          value: ["top", "bottom", "left", "right"],
+        },
+      },
+      {
+        name: "dots",
+        title: {
+          label: "显示指示点",
+          tip: "是否显示面板指示点",
+        },
+        propType: { type: "oneOfType", value: ["bool", "object"] },
+      },
+      {
+        name: "easing",
+        title: { label: "动画效果", tip: "动画效果" },
+        propType: "string",
+      },
+      {
+        name: "effect",
+        title: { label: "动画效果函数", tip: "动画效果函数" },
+        propType: { type: "oneOf", value: ["scrollx", "fade"] },
+      },
+      {
+        name: "items",
+        title: "折叠项",
+        setter: {
+          componentName: "ArraySetter",
+          props: {
+            itemSetter: {
+              componentName: "ObjectSetter",
+              initialValue: () => {
+                return {
+                  key: uuid(),
+                };
+              },
+            },
+          },
+        },
+        extraProps: {
+          getValue(target, fieldValue) {
+            console.log("getValue", target.node.children.length);
+            const map = target.node.children.map((child) => {
+              const key = child.getPropValue("key")
+                ? String(child.getPropValue("key"))
+                : child.id;
+              return { key };
+            });
+            return map;
+          },
+          setValue(target, value) {
+            const { node } = target;
+            const map = {};
+            if (!Array.isArray(value)) {
+              value = [];
+            }
+            value.forEach((item) => {
+              const tabItem = Object.assign({}, item);
+              map[item.key] = tabItem;
+            });
+
+            node.children.mergeChildren(
+              (child) => {
+                const key = String(child.getPropValue("key"));
+                if (Object.hasOwnProperty.call(map, key)) {
+                  delete map[key];
+                  return false;
+                }
+                return true;
+              },
+              () => {
+                const items = [];
+                for (const key in map) {
+                  if (Object.hasOwnProperty.call(map, key)) {
+                    items.push({
+                      componentName: "Card",
+                      props: map[key],
+                    });
+                  }
+                }
+                return items;
+              },
+              (child1, child2) => {
+                const a = value.findIndex(
+                  (item) =>
+                    String(item.key) === String(child1.getPropValue("key"))
+                );
+                const b = value.findIndex(
+                  (item) =>
+                    String(item.key) === String(child2.getPropValue("key"))
+                );
+                return a - b;
+              }
+            );
+          },
+        },
+      },
+    ],
+    supports: { style: true },
+    component: {
+      isContainer: true,
+    },
+  },
+};

package/lowcode/carousel/snippets.ts

@@ -0,0 +1,23 @@
+export default [
+  {
+    title: '走马灯',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/carousel-1.jpg',
+    schema: {
+      componentName: 'Carousel',
+      children: [
+        {
+          componentName: 'Card',
+          props: {
+            key: 'panel-1',
+          },
+        },
+        {
+          componentName: 'Card',
+          props: {
+            key: 'panel-2',
+          },
+        },
+      ],
+    },
+  },
+];

package/lowcode/cascader/meta.ts

@@ -0,0 +1,175 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Cascader',
+  title: '级联选择',
+  category: '表单',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Cascader",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        name: 'defaultValue',
+        title: { label: '默认的选中项', tip: '默认的选中项' },
+        propType: {
+          type: 'arrayOf',
+          value: { type: 'oneOfType', value: ['string', 'number'] },
+        },
+      },
+      {
+        name: 'value',
+        title: { label: '当前选中项', tip: '当前选中项' },
+        propType: {
+          type: 'arrayOf',
+          value: { type: 'oneOfType', value: ['string', 'number'] },
+        },
+      },
+      {
+        name: 'options',
+        title: { label: '选项数据', tip: '可选项数据源' },
+        setter: 'JsonSetter',
+      },
+      {
+        name: 'allowClear',
+        title: { label: '支持清除', tip: '是否允许清除' },
+        propType: 'bool',
+        defaultValue: true,
+        setter: 'BoolSetter'
+      },
+      {
+        name: 'autoFocus',
+        title: { label: '自动聚焦', tip: '自动获取焦点' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter'
+      },
+      {
+        name: 'bordered',
+        title: { label: '显示边框', tip: '是否有边框' },
+        propType: 'bool',
+        defaultValue: true,
+        setter: 'BoolSetter'
+      },
+      {
+        name: 'changeOnSelect',
+        title: {
+          label: '点选触发',
+          tip: '点选每级菜单选项值都会触发onChange',
+        },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter'
+      },
+      {
+        name: 'className',
+        title: { label: '自定义类名', tip: '自定义类名' },
+        propType: 'string',
+        setter: 'StringSetter'
+      },
+      {
+        name: 'disabled',
+        title: { label: '是否禁用', tip: '是否为禁用状态' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter'
+      },
+      {
+        name: 'expandTrigger',
+        title: { label: '菜单触发方式', tip: '触发次级菜单的展开的方式' },
+        propType: { type: 'oneOf', value: ['click', 'hover'] },
+      },
+      {
+        name: 'notFoundContent',
+        title: { label: '无数据展示', tip: '无数据' },
+        propType: 'string',
+        setter: 'StringSetter'
+      },
+      {
+        name: 'placeholder',
+        title: { label: '输入框占位文本', tip: '输入框占位文本' },
+        propType: 'string',
+        setter: 'StringSetter'
+      },
+      {
+        name: 'placement',
+        title: { label: '浮层预设位置', tip: '浮层预设位置' },
+        propType: {
+          type: 'oneOf',
+          value: ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'],
+        },
+      },
+      {
+        name: 'showSearch',
+        title: { label: '支持搜索', tip: '在选择框中显示搜索框' },
+        propType: 'bool',
+        defaultValue: false,
+        setter: 'BoolSetter'
+      },
+      {
+        name: 'size',
+        title: { label: '尺寸', tip: '输入框大小' },
+        propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
+        setter: {
+          componentName: 'SelectSetter',
+          props: {
+            options: [
+              {
+                title: '大',
+                value: 'large',
+              },
+              {
+                title: '中',
+                value: 'middle',
+              },
+              {
+                title: '小',
+                value: 'small',
+              },
+            ],
+          },
+        },
+        defaultValue: 'middle',
+      },
+      {
+        name: 'style',
+        title: { label: '自定义样式', tip: '自定义样式' },
+        propType: 'object',
+      },
+      {
+        name: 'onChange',
+        title: { label: '选择完成后的回调', tip: '选择完成后的回调' },
+        propType: 'func',
+      },
+      {
+        name: 'onPopupVisibleChange',
+        title: { label: '显示/隐藏浮层的回调', tip: '显示/隐藏浮层的回调' },
+        propType: 'func',
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(value,selectedOptions,${extParams}){\n// 选择完成后的回调\nconsole.log('onChange', value, selectedOptions);}",
+        },
+        {
+          name: 'onPopupVisibleChange',
+          template:
+            "onPopupVisibleChange(value,selectedOptions,${extParams}){\n// 显示/隐藏浮层的回调\nconsole.log('onPopupVisibleChange', value, selectedOptions);}",
+        },
+      ],
+    },
+  },
+};