@pisell/materials 1.0.1 → 1.0.3

package/lowcode/config-provider/meta.ts

@@ -0,0 +1,140 @@
+import snippets from "./snippets";
+
+export default {
+  snippets,
+  componentName: "ConfigProvider",
+  title: "全局化配置",
+  category: "其他",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "ConfigProvider",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        name: "autoInsertSpaceInButton",
+        title: {
+          label: "按钮插入空格",
+          tip: "自动在按钮中 2 个汉字之间插入空格",
+        },
+        propType: "bool",
+        defaultValue: true,
+      },
+      {
+        name: "componentSize",
+        title: { label: "组件大小", tip: "设置 antd 组件大小" },
+        propType: { type: "oneOf", value: ["small", "middle", "large"] },
+        default: "middle",
+      },
+      {
+        name: "csp",
+        title: {
+          label: "CSP配置",
+          tip: "设置Content Security Policy配置",
+        },
+        propType: "object",
+        setter: "JsonSetter",
+      },
+      {
+        name: "form",
+        title: {
+          label: "Form通用属性",
+          tip: "设置 Form 组件的通用属性",
+        },
+        propType: "object",
+        setter: "JsonSetter",
+      },
+      {
+        name: "input",
+        title: {
+          label: "Input通用属性",
+          tip: "设置 Input 组件的通用属性",
+        },
+        propType: "object",
+        setter: "JsonSetter",
+      },
+      // {
+      //   name: 'renderEmpty',
+      //   title: { label: '自定义组件空状态', tip: '自定义组件空状态' },
+      //   propType: 'func',
+      // },
+      {
+        name: "getPopupContainer",
+        title: {
+          label: "弹出框父节点",
+          tip: "弹出框渲染父节点，默认渲染到 body 上。",
+        },
+        propType: "func",
+      },
+      {
+        name: "getTargetContainer",
+        title: {
+          label: "滚动监听容器",
+          tip: "配置 Affix、Anchor 滚动监听容器。",
+        },
+        propType: "func",
+      },
+      {
+        name: "locale",
+        title: { label: "语言", tip: "语言" },
+        propType: {
+          type: "oneOf",
+          value: ["zh-CN", "en-US"],
+        },
+        defaultValue: "en-US",
+      },
+      {
+        name: "prefixCls",
+        title: {
+          label: "样式前缀",
+          tip: "设置统一样式前缀。`注意：这将不会应用由 antd 提供的默认样式`",
+        },
+        propType: "string",
+      },
+      {
+        name: "pageHeader",
+        title: {
+          label: "统一设置 PageHeader 的 ghost",
+          tip: "统一设置 PageHeader 的 ghost",
+        },
+        propType: "object",
+        setter: "JsonSetter",
+      },
+      {
+        name: "direction",
+        title: { label: "文本方向", tip: "设置文本展示方向" },
+        propType: { type: "oneOf", value: ["ltr", "rtl"] },
+      },
+      {
+        name: "space",
+        title: { label: "设置 Space 的 尺寸", tip: "设置 Space 的 `size`" },
+        propType: {
+          type: "oneOf",
+          value: ["small", "middle", "large", "number"],
+        },
+      },
+      {
+        name: "virtual",
+        title: {
+          label: "虚拟滚动",
+          tip: "设置 `false` 时关闭虚拟滚动",
+        },
+        propType: "bool",
+        defaultValue: true,
+      },
+      {
+        name: "dropdownMatchSelectWidth",
+        title: { label: "下拉菜单和选择器同宽", tip: "下拉菜单和选择器同宽" },
+        propType: { type: "oneOfType", value: ["bool", "number"] },
+      },
+    ],
+    component: { isContainer: true },
+  },
+};

package/lowcode/config-provider/snippets.ts

@@ -0,0 +1,10 @@
+export default [
+  {
+    title: '全局化配置',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/config-provider-1.jpg',
+    schema: {
+      componentName: 'ConfigProvider',
+      props: {},
+    },
+  },
+];

package/lowcode/date-picker/meta.ts

@@ -0,0 +1,281 @@
+import snippets from "./snippets";
+
+export default {
+  snippets,
+  componentName: "DatePicker",
+  title: "日期选择框",
+  category: "表单",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "DatePicker",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        title: "值设置",
+        display: "block",
+        type: "group",
+        items: [
+          {
+            name: "defaultValue",
+            title: {
+              label: "默认值",
+              tip: "defaultValue | 默认值",
+            },
+            propType: "date",
+            setter: "DateSetter",
+          },
+          {
+            name: "value",
+            title: {
+              label: "当前值",
+              tip: "value | 当前值",
+            },
+            propType: "date",
+            setter: "DateSetter",
+          },
+        ],
+      },
+      {
+        title: "功能选项",
+        display: "block",
+        type: "group",
+        items: [
+          {
+            name: "size",
+            title: {
+              label: "尺寸",
+              tip: "size | 输入框大小",
+            },
+            propType: {
+              type: "oneOf",
+              value: ["large", "middle", "small"],
+            },
+            setter: {
+              componentName: "RadioGroupSetter",
+              props: {
+                options: [
+                  {
+                    title: "大",
+                    value: "large",
+                  },
+                  {
+                    title: "中",
+                    value: "middle",
+                  },
+                  {
+                    title: "小",
+                    value: "small",
+                  },
+                ],
+              },
+            },
+            defaultValue: "middle",
+          },
+          {
+            name: "picker",
+            title: {
+              label: "日期类型",
+              tip: "picker | 选择器日期类型",
+            },
+            setter: {
+              componentName: "SelectSetter",
+              props: {
+                options: [
+                  {
+                    title: "日期",
+                    value: "date",
+                  },
+                  {
+                    title: "周",
+                    value: "week",
+                  },
+                  {
+                    title: "月份",
+                    value: "month",
+                  },
+                  {
+                    title: "季度",
+                    value: "quarter",
+                  },
+                  {
+                    title: "年份",
+                    value: "year",
+                  },
+                ],
+              },
+            },
+            propType: {
+              type: "oneOf",
+              value: ["date", "week", "month", "quarter", "year"],
+            },
+          },
+          {
+            name: "format",
+            title: {
+              label: "日期格式",
+              tip: "format | 设置日期格式",
+            },
+            propType: "string",
+            defaultValue: "YYYY-MM-DD",
+            setter: "StringSetter",
+          },
+          {
+            name: "placeholder",
+            title: {
+              label: "提示文字",
+              tip: "placeholder | 输入框提示文字",
+            },
+            propType: "string",
+            setter: "StringSetter",
+          },
+          {
+            name: "allowClear",
+            title: {
+              label: "支持清除",
+              tip: "allowClear | 是否允许清除",
+            },
+            propType: "bool",
+            defaultValue: true,
+            setter: "BoolSetter",
+          },
+          {
+            name: "bordered",
+            title: {
+              label: "显示边框",
+              tip: "bordered | 是否有边框",
+            },
+            propType: "bool",
+            defaultValue: true,
+            setter: "BoolSetter",
+          },
+          {
+            name: "showToday",
+            title: {
+              label: "展示今天按钮",
+              tip: "showToday | 是否展示今天按钮",
+            },
+            propType: "bool",
+            defaultValue: true,
+            setter: "BoolSetter",
+          },
+          {
+            name: "autoFocus",
+            title: {
+              label: "自动聚焦",
+              tip: "autoFocus | 自动获取焦点",
+            },
+            propType: "bool",
+            defaultValue: false,
+            setter: "BoolSetter",
+          },
+          {
+            name: "disabled",
+            title: {
+              label: "是否禁用",
+              tip: "disabled | 是否为禁用状态",
+            },
+            propType: "bool",
+            defaultValue: false,
+            setter: "BoolSetter",
+          },
+          {
+            name: "inputReadOnly",
+            title: {
+              label: "是否只读",
+              tip: "inputReadOnly | 避免在移动设备上打开虚拟键盘",
+            },
+            propType: "bool",
+            defaultValue: false,
+            setter: "BoolSetter",
+          },
+          {
+            name: "showTime",
+            title: {
+              label: "时间选择",
+              tip: "showTime | 是否能选择时间",
+            },
+            propType: "bool",
+            defaultValue: false,
+            setter: "BoolSetter",
+          },
+        ],
+      },
+      {
+        title: "高级",
+        display: "block",
+        type: "group",
+        items: [
+          {
+            name: "disabledDate",
+            title: {
+              label: "不可选日期",
+              tip: "disabledDate | 不可选择的日期",
+            },
+            propType: "func",
+            setter: [
+              {
+                componentName: "FunctionSetter",
+                props: {
+                  template:
+                    "disabledDate(currentDate,${extParams}){\n// 设置不可选择的日期\nreturn true\n}",
+                },
+              },
+              "VariableSetter",
+            ],
+          },
+        ],
+      },
+      // {
+      //   name: 'dropdownClassName',
+      //   title: {
+      //     label: '额外的弹出日历 className',
+      //     tip: '额外的弹出日历 className',
+      //   },
+      //   setter: 'ClassNameSetter',
+      // },
+      // {
+      //   name: 'popupStyle',
+      //   title: { label: '额外的弹出日历样式', tip: '额外的弹出日历样式' },
+      //   setter: 'JsonSetter',
+      // },
+      // {
+      //   name: 'suffixIcon',
+      //   title: { label: '自定义的选择框后缀图标', tip: '自定义的选择框后缀图标' },
+      //   setter: 'IconSetter',
+      // },
+      // {
+      //   name: 'style',
+      //   title: { label: '自定义输入框样式', tip: '自定义输入框样式' },
+      //   setter: 'JsonSetter',
+      // },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: "onChange",
+          template:
+            "onChange(date,dateString,${extParams}){\n// 时间发生变化的回调\nconsole.log('onChange',date,dateString);}",
+        },
+        {
+          name: "onOpenChange",
+          template:
+            "onOpenChange(open,${extParams}){\n// 弹出日历和关闭日历的回调\nconsole.log('onOpenChange',open);}",
+        },
+        {
+          name: "onPanelChange",
+          template:
+            "onPanelChange(value,mode,${extParams}){\n// 日历面板切换的回调\nconsole.log('onPanelChange',value,mode);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/date-picker/snippets.ts

@@ -0,0 +1,50 @@
+export default [
+  {
+    title: '选择日期',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/date-picker-1.png',
+    schema: {
+      componentName: 'DatePicker',
+      props: {},
+    },
+  },
+  {
+    title: '选择周',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/date-picker-2.png',
+    schema: {
+      componentName: 'DatePicker',
+      props: {
+        picker: 'week',
+      },
+    },
+  },
+  {
+    title: '选择月份',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/date-picker-3.png',
+    schema: {
+      componentName: 'DatePicker',
+      props: {
+        picker: 'month',
+      },
+    },
+  },
+  {
+    title: '选择季度',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/date-picker-4.png',
+    schema: {
+      componentName: 'DatePicker',
+      props: {
+        picker: 'quarter',
+      },
+    },
+  },
+  {
+    title: '选择年份',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/date-picker-5.png',
+    schema: {
+      componentName: 'DatePicker',
+      props: {
+        picker: 'year',
+      },
+    },
+  },
+];