@pisell/materials 1.0.449 → 1.0.451

package/lowcode/form-item-color-picker/meta.ts

@@ -0,0 +1,301 @@
+import snippets from './snippets';
+import { formItemGeneralProps } from "../_utils/defaultSchema";
+
+export default {
+  snippets,
+  componentName: 'FormItemColorPicker',
+  title: '颜色选择器',
+  category: '表单',
+  group: '无代码组件',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "FormItemColorPicker",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  generalProps: formItemGeneralProps,
+  props: [
+    {
+      name: 'allowClear',
+      title: { label: '清除', tip: '允许清除选择的颜色' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'arrow',
+      title: { label: '箭头', tip: '配置弹出的箭头' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'children',
+      title: { label: '触发器', tip: '颜色选择器的触发器' },
+      setter: 'SlotSetter',
+    },
+    {
+      name: 'defaultValue',
+      title: { label: '默认值', tip: '默认内容' },
+      propType: 'string',
+      setter: 'StringSetter',
+    },
+    {
+      name: 'defaultFormat',
+      title: { label: '格式', tip: '颜色格式默认的值' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'rgb',
+              value: 'rgb',
+            },
+            {
+              title: 'hex',
+              value: 'hex',
+            },
+            {
+              title: 'hsb',
+              value: 'hsb',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['rgb', 'hex', 'hsb'] },
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否为禁用状态' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'disabledAlpha',
+      title: { label: '禁用透明度', tip: '禁用透明度' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'disabledFormat',
+      title: { label: '禁用选择颜色格式', tip: '禁用选择颜色格式' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'destroyTooltipOnHide',
+      title: { label: '关闭后是否销毁弹窗', tip: '关闭后是否销毁弹窗' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'format',
+      title: { label: '颜色格式', tip: '颜色格式' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'rgb',
+              value: 'rgb',
+            },
+            {
+              title: 'hex',
+              value: 'hex',
+            },
+            {
+              title: 'hsb',
+              value: 'hsb',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['rgb', 'hex', 'hsb'] },
+    },
+    {
+      name: 'open',
+      title: { label: '是否显示弹出窗口', tip: '是否显示弹出窗口' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'presets',
+      title: { label: '预设的颜色', tip: '预设的颜色' },
+      setter: "JsonSetter",
+    },
+    {
+      name: 'placement',
+      title: { label: '弹出窗口的位置', tip: '弹出窗口的位置' },
+      propType: {
+        type: 'oneOf',
+        value: [
+          'top',
+          'left',
+          'right',
+          'bottom',
+          'topLeft',
+          'topRight',
+          'bottomLeft',
+          'bottomRight',
+          'leftTop',
+          'leftBottom',
+          'rightTop',
+          'rightBottom',
+        ],
+      },
+      defaultValue: 'top',
+      setter: {
+        componentName: 'SelectSetter',
+        props: {
+          options: [
+            {
+              title: '上',
+              value: 'top',
+            },
+            {
+              title: '左',
+              value: 'left',
+            },
+            {
+              title: '右',
+              value: 'right',
+            },
+            {
+              title: '下',
+              value: 'bottom',
+            },
+            {
+              title: '上左',
+              value: 'topLeft',
+            },
+            {
+              title: '上右',
+              value: 'topRight',
+            },
+            {
+              title: '下左',
+              value: 'bottomLeft',
+            },
+            {
+              title: '下右',
+              value: 'bottomRight',
+            },
+            {
+              title: '左上',
+              value: 'leftTop',
+            },
+            {
+              title: '左下',
+              value: 'leftBottom',
+            },
+            {
+              title: '右上',
+              value: 'rightTop',
+            },
+            {
+              title: '右下',
+              value: 'rightBottom',
+            },
+          ],
+        },
+      },
+    },
+    {
+      name: 'value',
+      title: { label: '当前值', tip: '当前值' },
+      propType: 'string',
+      setter: 'StringSetter'
+    },
+    {
+      name: 'showText',
+      title: { label: '是否显示弹出窗口', tip: '是否显示弹出窗口' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'size',
+      title: { label: '控件大小', tip: '控件大小' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '大',
+              value: 'large',
+            },
+            {
+              title: '中',
+              value: 'middle',
+            },
+            {
+              title: '小',
+              value: 'small',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
+      defaultValue: 'middle',
+    },
+    {
+      name: 'trigger',
+      title: { label: '触发模式', tip: '颜色选择器的触发模式' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'hover',
+              value: 'hover',
+            },
+            {
+              title: 'click',
+              value: 'click',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['hover', 'click'] },
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(event, css,${extParams}){\n// 颜色变化的回调\nconsole.log('onChange',event, css);}",
+        },
+        {
+          name: 'onChangeComplete',
+          template:
+            "onChangeComplete(event,${extParams}){\n// 颜色选择完成的回调，通过 onChangeComplete 对 value 受控时拖拽不会改变展示颜色\nconsole.log('onChangeComplete',event);}",
+        },
+        {
+          name: 'onFormatChange',
+          template: "onFormatChange(event,${extParams}){\n// 颜色格式变化的回调\nconsole.log('onFormatChange',event);}",
+        },
+        {
+          name: 'onOpenChange',
+          template:
+            "onOpenChange(event,${extParams}){\n// 当 open 被改变时的回调\nconsole.log('onOpenChange',event);}",
+        },
+        {
+          name: 'onClear',
+          template:
+            "onClear(event,${extParams}){\n// 清除的回调\nconsole.log('onClear',event);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/form-item-color-picker/snippets.ts

@@ -0,0 +1,9 @@
+export default [
+  {
+    title: '颜色选择器',
+    schema: {
+      componentName: 'FormItemColorPicker',
+      props: {},
+    },
+  },
+];

package/lowcode/form-item-date-picker/meta.ts

@@ -0,0 +1,290 @@
+import snippets from "./snippets";
+import { formItemGeneralProps } from "../_utils/defaultSchema";
+
+export default {
+  snippets,
+  componentName: "FormItemDatePicker",
+  title: "日期选择框",
+  category: "表单",
+  group: "无代码组件",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "FormItemDatePicker",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  generalProps: formItemGeneralProps,
+  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: "PisellI18nSetter",
+          },
+          {
+            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: 'className',
+            title: { label: '选择器类名', tip: '选择器类名' },
+            propType: 'string',
+            setter: 'StringSetter'
+          },
+          {
+            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/form-item-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: 'FormItemDatePicker',
+      props: {},
+    },
+  },
+  {
+    title: '选择周',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/date-picker-2.png',
+    schema: {
+      componentName: 'FormItemDatePicker',
+      props: {
+        picker: 'week',
+      },
+    },
+  },
+  {
+    title: '选择月份',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/date-picker-3.png',
+    schema: {
+      componentName: 'FormItemDatePicker',
+      props: {
+        picker: 'month',
+      },
+    },
+  },
+  {
+    title: '选择季度',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/date-picker-4.png',
+    schema: {
+      componentName: 'FormItemDatePicker',
+      props: {
+        picker: 'quarter',
+      },
+    },
+  },
+  {
+    title: '选择年份',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/date-picker-5.png',
+    schema: {
+      componentName: 'FormItemDatePicker',
+      props: {
+        picker: 'year',
+      },
+    },
+  },
+];