tianheng-ui 0.0.42 → 0.0.45

package/packages/formMaking/componentsConfig.js

@@ -1,313 +1,402 @@
-export const basicComponents = [
-  {
-    type: 'input',
-    icon: 'icon-input',
-    options: {
-      width: '100%',
-      defaultValue: '',
-      required: false,
-      dataType: 'string',
-      pattern: '',
-      placeholder: '',
-      disabled: false,
-      maxlength: -1,
-      showWordLimit: false,
-    }
-  },
-  {
-    type: 'textarea',
-    icon: 'icon-diy-com-textarea',
-    options: {
-      width: '100%',
-      defaultValue: '',
-      required: false,
-      disabled: false,
-      pattern: '',
-      placeholder: '',
-      maxlength: -1,
-      showWordLimit: false,
-    }
-  },
-  {
-    type: 'number',
-    icon: 'icon-number',
-    options: {
-      width: '',
-      required: false,
-      defaultValue: 0,
-      min: '',
-      max: '',
-      step: 1,
-      disabled: false,
-      controlsPosition: ''
-    }
-  },
-  {
-    type: 'radio',
-    icon: 'icon-radio-active',
-    options: {
-      inline: false,
-      defaultValue: '',
-      showLabel: false,
-      options: [
-        {
-          value: 'Option 1',
-          label: 'Option 1'
-        },
-        {
-          value: 'Option 2',
-          label: 'Option 2'
-        },
-        {
-          value: 'Option 3',
-          label: 'Option 3'
-        }
-      ],
-      required: false,
-      width: '',
-      remote: false,
-      remoteOptions: [],
-      props: {
-        value: 'value',
-        label: 'label'
-      },
-      remoteFunc: '',
-      disabled: false,
-    }
-  },
-  {
-    type: 'checkbox',
-    icon: 'icon-check-box',
-    options: {
-      inline: false,
-      defaultValue: [],
-      showLabel: false,
-      options: [
-        {
-          value: 'Option 1'
-        },
-        {
-          value: 'Option 2'
-        },
-        {
-          value: 'Option 3'
-        }
-      ],
-      required: false,
-      width: '',
-      remote: false,
-      remoteOptions: [],
-      props: {
-        value: 'value',
-        label: 'label'
-      },
-      remoteFunc: '',
-      disabled: false,
-    }
-  },
-  {
-    type: 'time',
-    icon: 'icon-time',
-    options: {
-      defaultValue: '21:19:56',
-      readonly: false,
-      disabled: false,
-      editable: true,
-      clearable: true,
-      placeholder: '',
-      startPlaceholder: '',
-      endPlaceholder: '',
-      isRange: false,
-      arrowControl: true,
-      format: 'HH:mm:ss',
-      required: false,
-      width: '',
-    }
-  },
-  {
-    type: 'date',
-    icon: 'icon-date',
-    options: {
-      defaultValue: '',
-      readonly: false,
-      disabled: false,
-      editable: true,
-      clearable: true,
-      placeholder: '',
-      startPlaceholder: '',
-      endPlaceholder: '',
-      type: 'date',
-      format: 'yyyy-MM-dd',
-      timestamp: false,
-      required: false,
-      width: '',
-    }
-  },
-  {
-    type: 'rate',
-    icon: 'icon-pingfen1',
-    options: {
-      defaultValue: null,
-      max: 5,
-      disabled: false,
-      allowHalf: false,
-      required: false
-    }
-  },
-  {
-    type: 'color',
-    icon: 'icon-color',
-    options: {
-      defaultValue: '',
-      disabled: false,
-      showAlpha: false,
-      required: false
-    }
-  },
-  {
-    type: 'select',
-    icon: 'icon-select',
-    options: {
-      defaultValue: '',
-      multiple: false,
-      disabled: false,
-      clearable: false,
-      placeholder: '',
-      required: false,
-      showLabel: false,
-      width: '',
-      options: [
-        {
-          value: 'Option 1'
-        },
-        {
-          value: 'Option 2'
-        },{
-          value: 'Option 3'
-        }
-      ],
-      remote: false,
-      filterable: false,
-      remoteOptions: [],
-      props: {
-        value: 'value',
-        label: 'label'
-      },
-      remoteFunc: ''
-    }
-  },
-  {
-    type: 'switch',
-    icon: 'icon-switch',
-    options: {
-      defaultValue: false,
-      required: false,
-      disabled: false,
-    }
-  },
-  {
-    type: 'slider',
-    icon: 'icon-slider',
-    options: {
-      defaultValue: 0,
-      disabled: false,
-      required: false,
-      min: 0,
-      max: 100,
-      step: 1,
-      showInput: false,
-      range: false,
-      width: ''
-    }
-  },
-  {
-    type: 'text',
-    icon: 'icon-wenzishezhi-',
-    options: {
-      defaultValue: 'This is a text',
-      customClass: '',
-    }
-  }
-]
-
-export const advanceComponents = [
-  {
-    type: 'blank',
-    icon: 'icon-zidingyishuju',
-    options: {
-      defaultType: 'String'
-    }
-  },
-  {
-    type: 'imgupload',
-    icon: 'icon-tupian',
-    options: {
-      defaultValue: [],
-      size: {
-        width: 100,
-        height: 100,
-      },
-      width: '',
-      tokenFunc: 'funcGetToken',
-      token: '',
-      domain: 'https://tcdn.form.making.link/',
-      disabled: false,
-      length: 8,
-      multiple: false,
-      isQiniu: false,
-      isDelete: false,
-      min: 0,
-      isEdit: false,
-      action: 'https://tools-server.making.link/api/transfer'
-    }
-  },
-  {
-    type: 'editor',
-    icon: 'icon-fuwenbenkuang',
-    options: {
-      defaultValue: '',
-      width: ''
-    }
-  },
-  {
-    type: 'cascader',
-    icon: 'icon-jilianxuanze',
-    options: {
-      defaultValue: [],
-      width: '',
-      placeholder: '',
-      disabled: false,
-      clearable: false,
-      remote: true,
-      remoteOptions: [],
-      props: {
-        value: 'value',
-        label: 'label',
-        children: 'children'
-      },
-      remoteFunc: ''
-    }
-  }
-]
-
-export const layoutComponents = [
-  {
-    type: 'grid',
-    icon: 'icon-grid-',
-    columns: [
-      {
-        span: 12,
-        list: []
-      },
-      {
-        span: 12,
-        list: []
-      }
-    ],
-    options: {
-      gutter: 0,
-      justify: 'start',
-      align: 'top'
-    }
-  }
-]
+export const basicComponents = [
+  {
+    name: "单行文本",
+    type: "input",
+    icon: "icon-input",
+    options: {
+      width: "100%",
+      defaultValue: "",
+      dataType: "string",
+      pattern: "",
+      placeholder: "",
+      maxlength: -1, //字符长度
+      required: false, //必填
+      disabled: false, //禁用
+      readonly: false, //只读
+      clearable: false, //清除
+      showWordLimit: false, //字数统计
+      showPassword: false, //切换密码
+      prefixIcon: "", //头部图标
+      suffixIcon: "", //尾部图标
+      prepend: "", //前置插槽
+      append: "" //后置插槽
+    }
+  },
+  {
+    name: "多行文本",
+    type: "textarea",
+    icon: "icon-diy-com-textarea",
+    options: {
+      width: "100%",
+      defaultValue: "",
+      pattern: "",
+      placeholder: "",
+      maxlength: -1,
+      rows: 2,
+      required: false, //必填
+      disabled: false, //禁用
+      readonly: false, //只读
+      clearable: false, //清除
+      showWordLimit: false,
+      prefixIcon: "",
+      suffixIcon: "",
+      minRows: 2, //最小行数
+      maxRows: 5 //最大行数
+    }
+  },
+  {
+    name: "计数器",
+    type: "number",
+    icon: "icon-number",
+    options: {
+      width: "40%",
+      required: false,
+      defaultValue: 0,
+      min: 1,
+      max: 2,
+      step: 1,
+      disabled: false,
+      controlsPosition: false,
+      step: 1, //递增递减步数
+      precision: 1 //精度
+    }
+  },
+  {
+    name: "单选框组",
+    type: "radio",
+    icon: "icon-radio-active",
+    options: {
+      inline: false,
+      defaultValue: "",
+      showLabel: false,
+      options: [
+        {
+          value: "Option 1",
+          label: "Option 1"
+        },
+        {
+          value: "Option 2",
+          label: "Option 2"
+        },
+        {
+          value: "Option 3",
+          label: "Option 3"
+        }
+      ],
+      required: false,
+      width: "",
+      remote: false,
+      remoteOptions: [],
+      props: {
+        value: "value",
+        label: "label"
+      },
+      remoteFunc: "",
+      disabled: false,
+      border: false, //边框
+      buttonType: false //替换成按钮
+    }
+  },
+  {
+    name: "多选框组",
+    type: "checkbox",
+    icon: "icon-check-box",
+    options: {
+      inline: false,
+      defaultValue: [],
+      showLabel: false,
+      options: [
+        {
+          value: "Option 1"
+        },
+        {
+          value: "Option 2"
+        },
+        {
+          value: "Option 3"
+        }
+      ],
+      required: false,
+      width: "",
+      remote: false,
+      remoteOptions: [],
+      props: {
+        value: "value",
+        label: "label"
+      },
+      remoteFunc: "",
+      disabled: false,
+      border: false, //边框
+      buttonType: false, //替换成按钮
+      min: 0,
+      max: 0
+    }
+  },
+  {
+    name: "时间选择器",
+    type: "time",
+    icon: "icon-time",
+    options: {
+      defaultValue: "21:19:56",
+      readonly: false,
+      disabled: false,
+      editable: true,
+      clearable: true,
+      placeholder: "",
+      startPlaceholder: "",
+      endPlaceholder: "",
+      isRange: false,
+      arrowControl: true,
+      format: "HH:mm:ss",
+      required: false,
+      width: "",
+      timeType: true, //任意时间范围，时间点
+      selectRange: false, //时间点情况下的时间范围
+      selectStartTime: "", //时间点情况下的开始的时间
+      selectEndTime: "", //时间点情况下的结束的时间
+      stretTimePickerOptions: {
+        start: "08:30",
+        step: "00:15",
+        end: "18:30"
+      },
+      endTimePickerOptions: {
+        start: "08:30",
+        step: "00:15",
+        end: "18:30",
+        minTime: "08:30"
+      }
+    }
+  },
+  {
+    name: "日期选择器",
+    type: "date",
+    icon: "icon-date",
+    options: {
+      defaultValue: "",
+      readonly: false,
+      disabled: false,
+      editable: true,
+      clearable: true,
+      placeholder: "",
+      startPlaceholder: "",
+      endPlaceholder: "",
+      type: "date",
+      format: "yyyy-MM-dd",
+      timestamp: false,
+      required: false,
+      width: ""
+    }
+  },
+  {
+    name: "评分",
+    type: "rate",
+    icon: "icon-pingfen1",
+    options: {
+      defaultValue: null,
+      max: 5,
+      disabled: false,
+      allowHalf: false,
+      required: false,
+      showText: false,
+      auxiliaryValue: ["极差", "失望", "一般", "满意", "惊喜"] //辅助文字
+    }
+  },
+  {
+    name: "颜色选择器",
+    type: "color",
+    icon: "icon-color",
+    options: {
+      defaultValue: "",
+      disabled: false,
+      showAlpha: false,
+      required: false
+    }
+  },
+  {
+    name: "下拉选择框",
+    type: "select",
+    icon: "icon-select",
+    options: {
+      defaultValue: "",
+      multiple: false,
+      disabled: false,
+      clearable: false,
+      placeholder: "",
+      required: false,
+      showLabel: false,
+      collapseTags: false,
+      allowCreate: false,
+      width: "",
+      options: [
+        {
+          value: "Option 1"
+        },
+        {
+          value: "Option 2"
+        },
+        {
+          value: "Option 3"
+        }
+      ],
+      remote: false,
+      filterable: false,
+      remoteOptions: [],
+      props: {
+        value: "value",
+        label: "label"
+      },
+      remoteFunc: ""
+    }
+  },
+  {
+    name: "开关",
+    type: "switch",
+    icon: "icon-switch",
+    options: {
+      defaultValue: false,
+      required: false,
+      disabled: false,
+      switchInactiveText: "",
+      switchActiveText: "",
+      switchInactiveColor: "",
+      switchActiveColor: ""
+    }
+  },
+  {
+    name: "滑块",
+    type: "slider",
+    icon: "icon-slider",
+    options: {
+      defaultValue: 0,
+      disabled: false,
+      required: false,
+      min: 0,
+      max: 100,
+      step: 1,
+      showInput: false,
+      range: false,
+      vertical: false,
+      width: "",
+      height: "",
+      showTooltip: true,
+      formatTooltip: 1, //格式化
+      showStops: false //间断点
+    }
+  },
+  {
+    name: "文字",
+    type: "text",
+    icon: "icon-wenzishezhi-",
+    options: {
+      defaultValue: "This is a text",
+      customClass: ""
+    }
+  }
+];
+
+export const advanceComponents = [
+  {
+    name: "自定义区域",
+    type: "blank",
+    icon: "icon-zidingyishuju",
+    options: {
+      defaultType: "String"
+    }
+  },
+  {
+    name: "图片",
+    type: "imgupload",
+    icon: "icon-tupian",
+    options: {
+      defaultValue: [],
+      size: {
+        width: 100,
+        height: 100
+      },
+      width: "",
+      tokenFunc: "funcGetToken",
+      token: "",
+      domain: "https://tcdn.form.making.link/",
+      disabled: false,
+      length: 8,
+      multiple: false,
+      autoUpload: false,
+      isQiniu: false,
+      //isDelete: false,
+      min: 0,
+      //isEdit: false,
+      remoteFunc: "https://jsonplaceholder.typicode.com/posts/",
+      remoteApi: {},
+      disabled: false,
+      required: false,
+      multiple: false,
+      elUploadTip: "",
+      listType: "default", //展示方式
+      drag: false //拖拽上传
+    }
+  },
+  {
+    name: "编辑器",
+    type: "editor",
+    icon: "icon-fuwenbenkuang",
+    options: {
+      defaultValue: "",
+      width: "",
+      height: "",
+      disabled: false,
+      required: false
+    }
+  },
+  {
+    name: "级联选择器",
+    type: "cascader",
+    icon: "icon-jilianxuanze",
+    options: {
+      defaultValue: [],
+      width: "",
+      placeholder: "",
+      disabled: false,
+      clearable: false,
+      required: false,
+      remote: true,
+      showAllLevels: false, //只显示最后一级
+      collapseTags: false,
+      filterable: false, //搜索
+      prepend: "",
+      append: "",
+      remoteOptions: [],
+      props: {
+        value: "value",
+        label: "label",
+        children: "children",
+        multiple: false,
+        expandTrigger: "hover",
+        checkStrictly: false //选择任意一级选项
+      },
+      remoteFunc: ""
+    }
+  }
+];
+
+export const layoutComponents = [
+  {
+    name: "栅格布局",
+    type: "grid",
+    icon: "icon-grid-",
+    columns: [
+      {
+        span: 12,
+        list: []
+      },
+      {
+        span: 12,
+        list: []
+      }
+    ],
+    options: {
+      gutter: 0,
+      justify: "start",
+      align: "top"
+    }
+  }
+];