ele-admin-plus 1.2.2-beta.4 → 1.3.0-beta.2

package/es/ele-pro-form/components/item-type-data.js

@@ -0,0 +1,692 @@
+import { ElDivider, ElButton, ElImage, ElCollapse, ElCollapseItem, ElCarousel, ElCarouselItem, ElDescriptions, ElDescriptionsItem, ElRow, ElCol, ElInput, ElRadioGroup, ElRadio, ElRadioButton, ElCheckboxGroup, ElCheckbox, ElCheckboxButton, ElDatePicker, ElTimePicker, ElTimeSelect, ElSwitch, ElInputNumber, ElAutocomplete, ElRate, ElSlider, ElMention, ElColorPicker, ElTransfer, ElTreeSelect } from "element-plus";
+import EleIcon from "../../ele-icon/index";
+import EleText from "../../ele-text/index";
+import EleAlert from "../../ele-alert/index";
+import EleSteps from "../../ele-steps/index";
+import EleProTable from "../../ele-pro-table/index";
+import EleCard from "../../ele-card/index";
+import EleTabs from "../../ele-tabs/index";
+import EleTable from "../../ele-table/index";
+import EleTreeSelect from "../../ele-tree-select/index";
+import EleTableSelect from "../../ele-table-select/index";
+import EleCheckCard from "../../ele-check-card/index";
+import EleEditTag from "../../ele-edit-tag/index";
+import EleSelect from "../../ele-select/index";
+import EleCascader from "../../ele-cascader/index";
+const defaultItemTypeData = [
+  {
+    type: "label",
+    component: EleText,
+    isContainer: true,
+    sortDisabled: true,
+    renderLabelText: true
+  },
+  {
+    type: "divider",
+    component: ElDivider,
+    isContainer: true,
+    sortDisabled: true,
+    renderLabelText: true
+  },
+  {
+    type: "button",
+    component: ElButton,
+    isContainer: true,
+    sortDisabled: true,
+    renderLabelText: true,
+    defaultProps: () => ({
+      type: "primary"
+    })
+  },
+  {
+    type: "icon",
+    component: EleIcon,
+    isContainer: true,
+    sortDisabled: true,
+    defaultProps: ({ item }) => ({
+      name: item.label
+    })
+  },
+  {
+    type: "image",
+    component: ElImage,
+    isContainer: true,
+    sortDisabled: true,
+    defaultProps: ({ item }) => ({
+      alt: item.label
+    })
+  },
+  {
+    type: "alert",
+    component: EleAlert,
+    isContainer: true,
+    sortDisabled: true,
+    defaultProps: ({ item }) => ({
+      title: item.label
+    })
+  },
+  {
+    type: "steps",
+    component: EleSteps,
+    isContainer: true,
+    sortDisabled: true,
+    defaultProps: ({ modelValue }) => ({
+      active: modelValue ?? 0
+    })
+  },
+  {
+    type: "proTable",
+    isContainer: true,
+    sortDisabled: true,
+    component: EleProTable
+  },
+  {
+    type: "card",
+    component: EleCard,
+    isContainer: true,
+    defaultProps: ({ item }) => ({
+      header: item.label,
+      bordered: true
+    })
+  },
+  {
+    type: "tabs",
+    component: EleTabs,
+    isContainer: true,
+    defaultProps: ({ item, modelValue }) => {
+      var _a, _b;
+      return {
+        type: "border-card",
+        modelValue: modelValue ?? ((_b = (_a = item.children) == null ? void 0 : _a[0]) == null ? void 0 : _b.prop)
+      };
+    },
+    reservedProps: ({ item, isShowFormItem }) => ({
+      items: (item.children || []).filter((c) => isShowFormItem(c)).map((c) => ({
+        name: c.prop,
+        label: c.label,
+        slot: "itemContent",
+        meta: c
+      }))
+    }),
+    reservedSlots: ({ renderChildren }) => ({
+      itemContent: (slotProps) => {
+        var _a;
+        return renderChildren((_a = slotProps == null ? void 0 : slotProps.item) == null ? void 0 : _a.meta, false, true);
+      },
+      default: () => void 0
+    })
+  },
+  {
+    type: "tabPane",
+    component: "div",
+    isContainer: true,
+    containerSelectable: true
+  },
+  {
+    type: "table",
+    component: EleTable,
+    isContainer: true,
+    sortDisabled: true
+  },
+  {
+    type: "tableRow",
+    component: "tr",
+    isContainer: true,
+    sortDisabled: true
+  },
+  {
+    type: "tableCell",
+    component: "td",
+    isContainer: true,
+    containerSelectable: true
+  },
+  {
+    type: "collapse",
+    component: ElCollapse,
+    isContainer: true,
+    sortDisabled: true,
+    defaultProps: ({ item, modelValue }) => {
+      var _a, _b, _c, _d, _e, _f;
+      return {
+        modelValue: modelValue ?? (((_a = item.props) == null ? void 0 : _a.accordion) ? ((_d = (_c = (_b = item.children) == null ? void 0 : _b[0]) == null ? void 0 : _c.props) == null ? void 0 : _d.name) ?? ((_f = (_e = item.children) == null ? void 0 : _e[0]) == null ? void 0 : _f.prop) : [])
+      };
+    },
+    reservedProps: ({ updateModelValue }) => ({
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "collapseItem",
+    component: ElCollapseItem,
+    isContainer: true,
+    containerSelectable: true,
+    defaultProps: ({ item }) => ({
+      title: item.label,
+      name: item.prop
+    })
+  },
+  {
+    type: "carousel",
+    component: ElCarousel,
+    isContainer: true,
+    sortDisabled: true
+  },
+  {
+    type: "carouselItem",
+    component: ElCarouselItem,
+    isContainer: true,
+    containerSelectable: true,
+    defaultProps: ({ item }) => ({
+      title: item.label,
+      name: item.prop
+    })
+  },
+  {
+    type: "descriptions",
+    component: ElDescriptions,
+    isContainer: true,
+    sortDisabled: true,
+    defaultProps: ({ item }) => ({
+      title: item.label
+    })
+  },
+  {
+    type: "descriptionsItem",
+    component: ElDescriptionsItem,
+    isContainer: true,
+    containerSelectable: true,
+    defaultProps: ({ item }) => ({
+      key: item.key ?? item.prop,
+      label: item.label
+    })
+  },
+  {
+    type: "row",
+    component: ElRow,
+    isContainer: true,
+    sortDisabled: true
+  },
+  {
+    type: "col",
+    component: ElCol,
+    isContainer: true,
+    containerSelectable: true
+  },
+  {
+    type: "div",
+    component: "div",
+    isContainer: true,
+    sortDisabled: true,
+    renderLabelText: true
+  },
+  {
+    type: "input",
+    component: ElInput,
+    defaultProps: ({ item }) => ({
+      clearable: true,
+      placeholder: `请输入${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    }),
+    requiredTrigger: "blur"
+  },
+  {
+    type: "textarea",
+    component: ElInput,
+    defaultProps: ({ item }) => ({
+      rows: 4,
+      placeholder: `请输入${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      type: "textarea",
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    }),
+    requiredTrigger: "blur"
+  },
+  {
+    type: "select",
+    component: EleSelect,
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      clearable: true,
+      placeholder: `请输入${item.label ?? ""}`,
+      options: item.options
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "multipleSelect",
+    component: EleSelect,
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      clearable: true,
+      placeholder: `请输入${item.label ?? ""}`,
+      options: item.options
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      multiple: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "radio",
+    component: ElRadioGroup,
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    }),
+    optionsComponent: ElRadio,
+    optionsComponentProps: (option) => ({
+      value: option.value,
+      label: option.label,
+      disabled: option.disabled,
+      border: option.border
+    })
+  },
+  {
+    type: "radioButton",
+    component: ElRadioGroup,
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    }),
+    optionsComponent: ElRadioButton,
+    optionsComponentProps: (option) => ({
+      value: option.value,
+      label: option.label,
+      disabled: option.disabled
+    })
+  },
+  {
+    type: "checkbox",
+    component: ElCheckboxGroup,
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    }),
+    optionsComponent: ElCheckbox,
+    optionsComponentProps: (option) => ({
+      value: option.value,
+      label: option.label,
+      disabled: option.disabled,
+      border: option.border
+    })
+  },
+  {
+    type: "checkboxButton",
+    component: ElCheckboxGroup,
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    }),
+    optionsComponent: ElCheckboxButton,
+    optionsComponentProps: (option) => ({
+      value: option.value,
+      label: option.label,
+      disabled: option.disabled
+    })
+  },
+  {
+    type: "date",
+    component: ElDatePicker,
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      valueFormat: "YYYY-MM-DD",
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "datetime",
+    component: ElDatePicker,
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      valueFormat: "YYYY-MM-DD HH:mm:ss",
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      type: "datetime",
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "daterange",
+    component: ElDatePicker,
+    defaultProps: () => ({
+      class: "ele-fluid",
+      valueFormat: "YYYY-MM-DD",
+      rangeSeparator: "-",
+      startPlaceholder: "开始日期",
+      endPlaceholder: "结束日期",
+      unlinkPanels: true,
+      type: "daterange"
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "datetimerange",
+    component: ElDatePicker,
+    defaultProps: () => ({
+      class: "ele-fluid",
+      valueFormat: "YYYY-MM-DD HH:mm:ss",
+      rangeSeparator: "-",
+      startPlaceholder: "开始日期",
+      endPlaceholder: "结束日期",
+      unlinkPanels: true
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      type: "datetimerange",
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "time",
+    component: ElTimePicker,
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      valueFormat: "HH:mm:ss",
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "timerange",
+    component: ElTimePicker,
+    defaultProps: () => ({
+      class: "ele-fluid",
+      valueFormat: "HH:mm:ss",
+      rangeSeparator: "-",
+      startPlaceholder: "开始日期",
+      endPlaceholder: "结束日期"
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      isRange: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "timeSelect",
+    component: ElTimeSelect,
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "switch",
+    component: ElSwitch,
+    defaultProps: () => ({
+      activeValue: 1,
+      inactiveValue: 0
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "inputNumber",
+    component: ElInputNumber,
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      controlsPosition: "right",
+      placeholder: `请输入${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "autocomplete",
+    component: ElAutocomplete,
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      fetchSuggestions: (keyword, callback) => callback(
+        (item.options || []).filter(
+          (d) => keyword == null || !keyword.length || (d.value ?? "").toLowerCase().includes((keyword ?? "").toLowerCase())
+        )
+      ),
+      placeholder: `请输入${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "cascader",
+    component: EleCascader,
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      clearable: true,
+      options: item.options || [],
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "multipleCascader",
+    component: EleCascader,
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      clearable: true,
+      options: item.options || [],
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      multiple: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "rate",
+    component: ElRate,
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "slider",
+    component: ElSlider,
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "sliderRange",
+    component: ElSlider,
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      range: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "mention",
+    component: ElMention,
+    defaultProps: ({ item }) => ({
+      clearable: true,
+      options: item.options || [],
+      placeholder: `请输入${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "colorPicker",
+    component: ElColorPicker,
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "transfer",
+    component: ElTransfer,
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "treeSelect",
+    component: ElTreeSelect,
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      clearable: true,
+      data: item.options || [],
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "treeMultipleSelect",
+    component: ElTreeSelect,
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      clearable: true,
+      data: item.options || [],
+      showCheckbox: true,
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      multiple: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "virtualTreeSelect",
+    component: EleTreeSelect,
+    defaultProps: ({ item }) => ({
+      clearable: true,
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "virtualTreeMultipleSelect",
+    component: EleTreeSelect,
+    defaultProps: ({ item }) => ({
+      clearable: true,
+      maxTagCount: 1,
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      multiple: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "tableSelect",
+    component: EleTableSelect,
+    defaultProps: ({ item }) => ({
+      clearable: true,
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "tableMultipleSelect",
+    component: EleTableSelect,
+    defaultProps: ({ item }) => ({
+      clearable: true,
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      multiple: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "checkCard",
+    component: EleCheckCard,
+    defaultProps: ({ item }) => ({
+      items: item.options || []
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "multipleCheckCard",
+    component: EleCheckCard,
+    defaultProps: ({ item }) => ({
+      items: item.options || []
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      multiple: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "editTag",
+    component: EleEditTag,
+    defaultProps: () => ({
+      type: "info",
+      style: { marginTop: "4px" },
+      itemStyle: { margin: "0 4px 4px 0" },
+      buttonStyle: { marginBottom: "4px" },
+      inputTagStyle: { marginBottom: "4px" }
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "text",
+    component: EleText,
+    reservedSlots: ({ modelValue }) => ({
+      default: () => modelValue
+    })
+  }
+];
+export {
+  defaultItemTypeData
+};