ele-admin-plus 1.3.1-beta.1 → 1.4.0

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

@@ -1,4 +1,5 @@
-import { ElDivider, ElButton, ElImage, ElCollapse, ElCollapseItem, ElCarousel, ElCarouselItem, ElDescriptions, ElDescriptionsItem, ElRow, ElCol, ElInput, ElSelect } from "element-plus";
+import { markRaw } from "vue";
+import { ElDivider, ElButton, ElImage, ElCollapse, ElCollapseItem, ElCarousel, ElCarouselItem, ElDescriptions, ElDescriptionsItem, ElRow, ElCol, ElInput, ElDatePicker, ElTimePicker, ElTimeSelect, ElSwitch, ElInputNumber, ElRate, ElSlider, ElColorPicker } from "element-plus";
 import EleIcon from "../../ele-icon/index";
 import EleText from "../../ele-text/index";
 import EleAlert from "../../ele-alert/index";
@@ -7,25 +8,37 @@ 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 { isShowItem } from "../util";
+import EleAdminLayout from "../../ele-admin-layout/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";
+import EleRadioGroup from "../../ele-radio-group/index";
+import EleCheckboxGroup from "../../ele-checkbox-group/index";
+import EleSelectTree from "../../ele-select-tree/index";
+import EleTransfer from "../../ele-transfer/index";
+import EleMention from "../../ele-mention/index";
+import EleAutocomplete from "../../ele-autocomplete/index";
 const defaultItemTypeData = [
   {
     type: "label",
-    component: EleText,
+    component: markRaw(EleText),
     isContainer: true,
     sortDisabled: true,
     renderLabelText: true
   },
   {
     type: "divider",
-    component: ElDivider,
+    component: markRaw(ElDivider),
     isContainer: true,
     sortDisabled: true,
     renderLabelText: true
   },
   {
     type: "button",
-    component: ElButton,
+    component: markRaw(ElButton),
     isContainer: true,
     sortDisabled: true,
     renderLabelText: true,
@@ -35,87 +48,87 @@ const defaultItemTypeData = [
   },
   {
     type: "icon",
-    component: EleIcon,
+    component: markRaw(EleIcon),
     isContainer: true,
-    sortDisabled: true,
-    defaultProps: ({ item }) => ({
-      name: item.label
-    })
+    sortDisabled: true
   },
   {
     type: "image",
-    component: ElImage,
-    defaultProps: ({ item }) => ({
-      alt: item.label
-    })
+    component: markRaw(ElImage),
+    isContainer: true,
+    sortDisabled: true
   },
   {
     type: "alert",
-    component: EleAlert,
-    defaultProps: ({ item }) => ({
-      title: item.label
-    })
+    component: markRaw(EleAlert),
+    isContainer: true,
+    sortDisabled: true
   },
   {
     type: "steps",
-    component: EleSteps,
+    component: markRaw(EleSteps),
+    isContainer: true,
+    sortDisabled: true,
     defaultProps: ({ modelValue }) => ({
       active: modelValue ?? 0
     })
   },
   {
     type: "proTable",
-    component: EleProTable
+    component: markRaw(EleProTable),
+    isContainer: true,
+    sortDisabled: true
   },
   {
     type: "card",
-    component: EleCard,
+    component: markRaw(EleCard),
     isContainer: true,
-    defaultProps: ({ item }) => ({
-      header: item.label,
+    defaultProps: () => ({
       bordered: true
     })
   },
   {
     type: "tabs",
-    component: EleTabs,
+    component: markRaw(EleTabs),
     isContainer: true,
     defaultProps: ({ item, modelValue }) => {
-      var _a;
+      var _a, _b;
       return {
         type: "border-card",
-        modelValue: modelValue ?? (((_a = item.children) == null ? void 0 : _a.length) ? item.children[0].prop : void 0)
+        modelValue: modelValue ?? ((_b = (_a = item.children) == null ? void 0 : _a[0]) == null ? void 0 : _b.prop)
       };
     },
-    reservedProps: ({ item, formData, formItems, searchExpand, editable }) => ({
-      items: item.children ? item.children.filter(
-        (c) => editable || isShowItem(c, formData || {}, formItems || [], searchExpand)
-      ).map((c) => ({
-        name: c.prop,
-        label: c.label,
-        slot: "itemContent",
-        meta: c
-      })) || [] : []
-    })
-    /* ,
-        customerSlots: () => ({
-          itemContent: () => {
-            const nodes = [];
-            if(){
-    
-            }
-            return nodes;
-          }
-        }) */
+    reservedProps: ({ item, isShowFormItem }) => ({
+      items: (item.children || []).filter((c) => isShowFormItem(c)).map((c) => {
+        var _a, _b, _c, _d, _e;
+        return {
+          name: ((_a = c.props) == null ? void 0 : _a.name) ?? c.prop,
+          label: ((_b = c.props) == null ? void 0 : _b.label) ?? c.label,
+          disabled: (_c = c.props) == null ? void 0 : _c.disabled,
+          closable: (_d = c.props) == null ? void 0 : _d.closable,
+          lazy: (_e = c.props) == null ? void 0 : _e.lazy,
+          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
+    isContainer: true,
+    containerSelectable: true
   },
   {
     type: "table",
-    component: EleTable,
+    component: markRaw(EleTable),
     isContainer: true,
     sortDisabled: true
   },
@@ -133,13 +146,13 @@ const defaultItemTypeData = [
   },
   {
     type: "collapse",
-    component: ElCollapse,
+    component: markRaw(ElCollapse),
     isContainer: true,
     sortDisabled: true,
     defaultProps: ({ item, modelValue }) => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d, _e, _f;
       return {
-        modelValue: modelValue ?? (((_a = item.props) == null ? void 0 : _a.accordion) ? ((_b = item.children) == null ? void 0 : _b.length) ? ((_c = item.children[0].props) == null ? void 0 : _c.name) ?? item.children[0].prop : void 0 : [])
+        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 }) => ({
@@ -148,70 +161,61 @@ const defaultItemTypeData = [
   },
   {
     type: "collapseItem",
-    component: ElCollapseItem,
+    component: markRaw(ElCollapseItem),
     isContainer: true,
-    containerSelectable: true,
-    defaultProps: ({ item }) => ({
-      title: item.label,
-      name: item.prop
-    })
+    containerSelectable: true
   },
   {
     type: "carousel",
-    component: ElCarousel,
+    component: markRaw(ElCarousel),
     isContainer: true,
     sortDisabled: true
   },
   {
     type: "carouselItem",
-    component: ElCarouselItem,
+    component: markRaw(ElCarouselItem),
     isContainer: true,
-    containerSelectable: true,
-    defaultProps: ({ item }) => ({
-      title: item.label,
-      name: item.prop
-    })
+    containerSelectable: true
   },
   {
     type: "descriptions",
-    component: ElDescriptions,
+    component: markRaw(ElDescriptions),
     isContainer: true,
-    sortDisabled: true,
-    defaultProps: ({ item }) => ({
-      title: item.label
-    })
+    sortDisabled: true
   },
   {
-    type: "descriptionItem",
-    component: ElDescriptionsItem,
+    type: "descriptionsItem",
+    component: markRaw(ElDescriptionsItem),
     isContainer: true,
-    containerSelectable: true,
-    defaultProps: ({ item }) => ({
-      key: item.key ?? item.prop,
-      label: item.label
-    })
+    containerSelectable: true
   },
   {
     type: "row",
-    component: ElRow,
+    component: markRaw(ElRow),
     isContainer: true,
     sortDisabled: true
   },
   {
     type: "col",
-    component: ElCol,
+    component: markRaw(ElCol),
     isContainer: true,
     containerSelectable: true
   },
+  {
+    type: "adminLayout",
+    component: markRaw(EleAdminLayout),
+    isContainer: true
+  },
   {
     type: "div",
     component: "div",
     isContainer: true,
-    sortDisabled: true
+    sortDisabled: true,
+    renderLabelText: true
   },
   {
     type: "input",
-    component: ElInput,
+    component: markRaw(ElInput),
     defaultProps: ({ item }) => ({
       clearable: true,
       placeholder: `请输入${item.label ?? ""}`
@@ -219,11 +223,12 @@ const defaultItemTypeData = [
     reservedProps: ({ modelValue, updateModelValue }) => ({
       modelValue,
       "onUpdate:modelValue": updateModelValue
-    })
+    }),
+    requiredTrigger: "blur"
   },
   {
     type: "textarea",
-    component: ElInput,
+    component: markRaw(ElInput),
     defaultProps: ({ item }) => ({
       rows: 4,
       placeholder: `请输入${item.label ?? ""}`
@@ -232,11 +237,12 @@ const defaultItemTypeData = [
       type: "textarea",
       modelValue,
       "onUpdate:modelValue": updateModelValue
-    })
+    }),
+    requiredTrigger: "blur"
   },
   {
     type: "select",
-    component: ElSelect,
+    component: markRaw(EleSelect),
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       clearable: true,
@@ -249,7 +255,7 @@ const defaultItemTypeData = [
   },
   {
     type: "multipleSelect",
-    component: ElSelect,
+    component: markRaw(EleSelect),
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       clearable: true,
@@ -260,6 +266,377 @@ const defaultItemTypeData = [
       modelValue,
       "onUpdate:modelValue": updateModelValue
     })
+  },
+  {
+    type: "radio",
+    component: markRaw(EleRadioGroup),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "radioButton",
+    component: markRaw(EleRadioGroup),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      type: "button",
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "checkbox",
+    component: markRaw(EleCheckboxGroup),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "checkboxButton",
+    component: markRaw(EleCheckboxGroup),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      type: "button",
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "date",
+    component: markRaw(ElDatePicker),
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      valueFormat: "YYYY-MM-DD",
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "datetime",
+    component: markRaw(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: markRaw(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: markRaw(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: markRaw(ElTimePicker),
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      valueFormat: "HH:mm:ss",
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "timerange",
+    component: markRaw(ElTimePicker),
+    defaultProps: () => ({
+      class: "ele-fluid",
+      valueFormat: "HH:mm:ss",
+      rangeSeparator: "-",
+      startPlaceholder: "开始日期",
+      endPlaceholder: "结束日期"
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      isRange: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "timeSelect",
+    component: markRaw(ElTimeSelect),
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "switch",
+    component: markRaw(ElSwitch),
+    defaultProps: () => ({
+      activeValue: 1,
+      inactiveValue: 0
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "inputNumber",
+    component: markRaw(ElInputNumber),
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      controlsPosition: "right",
+      placeholder: `请输入${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "autocomplete",
+    component: markRaw(EleAutocomplete),
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      placeholder: `请输入${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "cascader",
+    component: markRaw(EleCascader),
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      clearable: true,
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "multipleCascader",
+    component: markRaw(EleCascader),
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      clearable: true,
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      multiple: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "rate",
+    component: markRaw(ElRate),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "slider",
+    component: markRaw(ElSlider),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "sliderRange",
+    component: markRaw(ElSlider),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      range: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "mention",
+    component: markRaw(EleMention),
+    defaultProps: ({ item }) => ({
+      clearable: true,
+      placeholder: `请输入${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "colorPicker",
+    component: markRaw(ElColorPicker),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "transfer",
+    component: markRaw(EleTransfer),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "treeSelect",
+    component: markRaw(EleSelectTree),
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      clearable: true,
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "treeMultipleSelect",
+    component: markRaw(EleSelectTree),
+    defaultProps: ({ item }) => ({
+      class: "ele-fluid",
+      clearable: true,
+      showCheckbox: true,
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      multiple: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "virtualTreeSelect",
+    component: markRaw(EleTreeSelect),
+    defaultProps: ({ item }) => ({
+      clearable: true,
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "virtualTreeMultipleSelect",
+    component: markRaw(EleTreeSelect),
+    defaultProps: ({ item }) => ({
+      clearable: true,
+      maxTagCount: 1,
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      multiple: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "tableSelect",
+    component: markRaw(EleTableSelect),
+    defaultProps: ({ item }) => ({
+      clearable: true,
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "tableMultipleSelect",
+    component: markRaw(EleTableSelect),
+    defaultProps: ({ item }) => ({
+      clearable: true,
+      placeholder: `请选择${item.label ?? ""}`
+    }),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      multiple: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "checkCard",
+    component: markRaw(EleCheckCard),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "multipleCheckCard",
+    component: markRaw(EleCheckCard),
+    reservedProps: ({ modelValue, updateModelValue }) => ({
+      multiple: true,
+      modelValue,
+      "onUpdate:modelValue": updateModelValue
+    })
+  },
+  {
+    type: "editTag",
+    component: markRaw(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: markRaw(EleText),
+    reservedSlots: ({ modelValue }) => ({
+      default: () => modelValue
+    })
   }
 ];
 export {