vxe-pc-ui 4.20.24 → 4.20.26

package/es/cascader/src/cascader.js

@@ -1,6 +1,6 @@
 import { ref, computed, h, nextTick, inject, provide, reactive, Teleport, onMounted, onUnmounted, watch } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
-import { getConfig, getI18n, getIcon, globalEvents, createEvent, useSize, renderEmptyElement, getSlotVNs } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { getEventTargetNode, updatePanelPlacement, toCssUnit } from "../../ui/src/dom";
 import { getLastZIndex, nextZIndex } from "../../ui/src/utils";
 import { enNodeValue, deNodeValue } from "./util";
@@ -8,6 +8,7 @@ import XEUtils from "xe-utils";
 import VxeListComponent from "../../list";
 import VxeInputComponent from "../../input";
 import VxeButtonComponent from "../../button";
+const { getConfig, getI18n, getIcon, globalEvents, createEvent, useFns, renderEmptyElement, getSlotVNs } = VxeUI;
 function getNodeUniqueId() {
   return XEUtils.uniqueId("node_");
 }
@@ -131,23 +132,7 @@ var cascader_default = defineVxeComponent({
       default: () => getConfig().cascader.showClearButton
     }
   },
-  emits: [
-    "update:modelValue",
-    "change",
-    "all-change",
-    "clear",
-    "blur",
-    "focus",
-    "click",
-    "node-click",
-    "node-expand",
-    "current-change",
-    "radio-change",
-    "checkbox-change",
-    "load-success",
-    "load-error",
-    "visible-change"
-  ],
+  emits: ["update:modelValue", "change", "all-change", "clear", "blur", "focus", "click", "node-click", "node-expand", "current-change", "radio-change", "checkbox-change", "load-success", "load-error", "visible-change"],
   setup(props, context) {
     const { emit, slots } = context;
     const $xeModal = inject("$xeModal", null);
@@ -156,7 +141,7 @@ var cascader_default = defineVxeComponent({
     const $xeForm = inject("$xeForm", null);
     const formItemInfo = inject("xeFormItemInfo", null);
     const xID = XEUtils.uniqueId();
-    const { computeSize } = useSize(props);
+    const { computeSize } = useFns.useSize(props);
     const refElem = ref();
     const refInput = ref();
     const refInpSearch = ref();
@@ -430,30 +415,34 @@ var cascader_default = defineVxeComponent({
       const childrenField = computeChildrenField.value;
       const keyMaps = {};
       const fullMaps = {};
-      XEUtils.eachTree(treeFullData, (item, index, items, path, parenItem, nodes) => {
-        let nodeid = getNodeId(item);
-        if (!nodeid) {
-          nodeid = getNodeUniqueId();
-          item[valueField] = nodeid;
-        }
-        const nodeVal = item[valueField];
-        const itemRest = {
-          item,
-          index,
-          $index: -1,
-          _index: -1,
-          items,
-          parent: parenItem,
-          nodes,
-          level: nodes.length - 1,
-          treeIndex: index,
-          lineCount: 0,
-          treeLoaded: false,
-          fullLabel: nodes.map((item2) => item2[labelField]).join(separator || " / ")
-        };
-        keyMaps[nodeid] = itemRest;
-        fullMaps[nodeVal] = itemRest;
-      }, { children: childrenField });
+      XEUtils.eachTree(
+        treeFullData,
+        (item, index, items, path, parenItem, nodes) => {
+          let nodeid = getNodeId(item);
+          if (!nodeid) {
+            nodeid = getNodeUniqueId();
+            item[valueField] = nodeid;
+          }
+          const nodeVal = item[valueField];
+          const itemRest = {
+            item,
+            index,
+            $index: -1,
+            _index: -1,
+            items,
+            parent: parenItem,
+            nodes,
+            level: nodes.length - 1,
+            treeIndex: index,
+            lineCount: 0,
+            treeLoaded: false,
+            fullLabel: nodes.map((item2) => item2[labelField]).join(separator || " / ")
+          };
+          keyMaps[nodeid] = itemRest;
+          fullMaps[nodeVal] = itemRest;
+        },
+        { children: childrenField }
+      );
       internalData.nodeMaps = keyMaps;
       internalData.fullNodeMaps = fullMaps;
       reactData.fullOptFlag++;
@@ -467,32 +456,36 @@ var cascader_default = defineVxeComponent({
       const treeOpts = computeTreeOpts.value;
       const { transform } = treeOpts;
       let vtIndex = 0;
-      XEUtils.eachTree(afterTreeList, (item, index, items, path, parenItem, nodes) => {
-        const nodeid = getNodeId(item);
-        const nodeItem = nodeMaps[nodeid];
-        if (nodeItem) {
-          nodeItem.items = items;
-          nodeItem.treeIndex = index;
-          nodeItem._index = vtIndex;
-        } else {
-          const rest = {
-            item,
-            index,
-            $index: -1,
-            _index: vtIndex,
-            items,
-            parent: parenItem,
-            nodes,
-            level: nodes.length - 1,
-            treeIndex: index,
-            lineCount: 0,
-            treeLoaded: false,
-            fullLabel: nodes.map((item2) => item2[labelField]).join(separator || " / ")
-          };
-          nodeMaps[nodeid] = rest;
-        }
-        vtIndex++;
-      }, { children: transform ? mapChildrenField : childrenField });
+      XEUtils.eachTree(
+        afterTreeList,
+        (item, index, items, path, parenItem, nodes) => {
+          const nodeid = getNodeId(item);
+          const nodeItem = nodeMaps[nodeid];
+          if (nodeItem) {
+            nodeItem.items = items;
+            nodeItem.treeIndex = index;
+            nodeItem._index = vtIndex;
+          } else {
+            const rest = {
+              item,
+              index,
+              $index: -1,
+              _index: vtIndex,
+              items,
+              parent: parenItem,
+              nodes,
+              level: nodes.length - 1,
+              treeIndex: index,
+              lineCount: 0,
+              treeLoaded: false,
+              fullLabel: nodes.map((item2) => item2[labelField]).join(separator || " / ")
+            };
+            nodeMaps[nodeid] = rest;
+          }
+          vtIndex++;
+        },
+        { children: transform ? mapChildrenField : childrenField }
+      );
     };
     const updateAfterFullData = () => {
       const { searchValue } = reactData;
@@ -574,14 +567,18 @@ var cascader_default = defineVxeComponent({
       const expandMaps = {};
       if (transform) {
         const fullData = [];
-        XEUtils.eachTree(afterTreeList, (item, index, items, path, parentRow) => {
-          const nodeid = getNodeId(item);
-          const parentNodeid = getNodeId(parentRow);
-          if (!parentRow || expandMaps[parentNodeid] && treeExpandedMaps[parentNodeid]) {
-            expandMaps[nodeid] = 1;
-            fullData.push(item);
-          }
-        }, { children: mapChildrenField });
+        XEUtils.eachTree(
+          afterTreeList,
+          (item, index, items, path, parentRow) => {
+            const nodeid = getNodeId(item);
+            const parentNodeid = getNodeId(parentRow);
+            if (!parentRow || expandMaps[parentNodeid] && treeExpandedMaps[parentNodeid]) {
+              expandMaps[nodeid] = 1;
+              fullData.push(item);
+            }
+          },
+          { children: mapChildrenField }
+        );
         internalData.afterVisibleList = fullData;
         return fullData;
       }
@@ -624,28 +621,32 @@ var cascader_default = defineVxeComponent({
       }
       return nodeIds;
     }
-    const triggerSearchEvent = XEUtils.debounce(() => {
-      handleData(true);
-      updateCheckboxStatus();
-      const { currentItems } = reactData;
-      const { afterTreeList } = internalData;
-      const filterOpts = computeFilterOpts.value;
-      const { autoExpandMode } = filterOpts;
-      if (!isPathInTree(afterTreeList, currentItems)) {
-        if (autoExpandMode === "first" || autoExpandMode === "last") {
-          const stItems = handleHasChildNodeIds(afterTreeList, autoExpandMode);
-          const expandedMaps = {};
-          stItems.forEach((nodeid) => {
-            expandedMaps[nodeid] = true;
-          });
-          internalData.treeExpandedMaps = expandedMaps;
-          reactData.currentItems = stItems;
-        } else {
-          handleCurrentItems();
+    const triggerSearchEvent = XEUtils.debounce(
+      () => {
+        handleData(true);
+        updateCheckboxStatus();
+        const { currentItems } = reactData;
+        const { afterTreeList } = internalData;
+        const filterOpts = computeFilterOpts.value;
+        const { autoExpandMode } = filterOpts;
+        if (!isPathInTree(afterTreeList, currentItems)) {
+          if (autoExpandMode === "first" || autoExpandMode === "last") {
+            const stItems = handleHasChildNodeIds(afterTreeList, autoExpandMode);
+            const expandedMaps = {};
+            stItems.forEach((nodeid) => {
+              expandedMaps[nodeid] = true;
+            });
+            internalData.treeExpandedMaps = expandedMaps;
+            reactData.currentItems = stItems;
+          } else {
+            handleCurrentItems();
+          }
         }
-      }
-      updateCurrentChunk();
-    }, 350, { trailing: true });
+        updateCurrentChunk();
+      },
+      350,
+      { trailing: true }
+    );
     const loadData = (list) => {
       const treeOpts = computeTreeOpts.value;
       const keyField = computeKeyField.value;
@@ -796,12 +797,16 @@ var cascader_default = defineVxeComponent({
       const checkKeys = [];
       const checkNodes = [];
       if (checked) {
-        XEUtils.eachTree(internalData.afterTreeList, (node) => {
-          const nodeid = getNodeId(node);
-          checkKeys.push(nodeid);
-          checkNodes.push(node);
-          selectMaps[nodeid] = true;
-        }, { children: transform ? mapChildrenField : childrenField });
+        XEUtils.eachTree(
+          internalData.afterTreeList,
+          (node) => {
+            const nodeid = getNodeId(node);
+            checkKeys.push(nodeid);
+            checkNodes.push(node);
+            selectMaps[nodeid] = true;
+          },
+          { children: transform ? mapChildrenField : childrenField }
+        );
       }
       internalData.indeterminateRowMaps = {};
       internalData.selectCheckboxMaps = selectMaps;
@@ -964,9 +969,7 @@ var cascader_default = defineVxeComponent({
           const nodeid = getNodeId(node);
           const nodeItem = nodeMaps[nodeid];
           internalData.treeExpandLazyLoadedMaps[nodeid] = true;
-          Promise.resolve(
-            loadMethod({ $cascader: $xeCascader, node })
-          ).then((childRecords) => {
+          Promise.resolve(loadMethod({ $cascader: $xeCascader, node })).then((childRecords) => {
             const { treeExpandLazyLoadedMaps } = internalData;
             nodeItem.treeLoaded = true;
             if (treeExpandLazyLoadedMaps[nodeid]) {
@@ -1086,14 +1089,18 @@ var cascader_default = defineVxeComponent({
       if (!checkStrictly) {
         const childRowMaps = {};
         const childRowList = [];
-        XEUtils.eachTree(afterTreeList, (node) => {
-          const nodeid = getNodeId(node);
-          const childList = node[transform ? mapChildrenField : childrenField];
-          if (childList && childList.length && !childRowMaps[nodeid]) {
-            childRowMaps[nodeid] = 1;
-            childRowList.unshift([node, nodeid, childList]);
-          }
-        }, { children: transform ? mapChildrenField : childrenField });
+        XEUtils.eachTree(
+          afterTreeList,
+          (node) => {
+            const nodeid = getNodeId(node);
+            const childList = node[transform ? mapChildrenField : childrenField];
+            if (childList && childList.length && !childRowMaps[nodeid]) {
+              childRowMaps[nodeid] = 1;
+              childRowList.unshift([node, nodeid, childList]);
+            }
+          },
+          { children: transform ? mapChildrenField : childrenField }
+        );
         childRowList.forEach((vals) => {
           const node = vals[0];
           const nodeid = vals[1];
@@ -1197,18 +1204,22 @@ var cascader_default = defineVxeComponent({
         selectCheckboxMaps[nodeid] = node;
       }
       if (!checkStrictly) {
-        XEUtils.eachTree(childList, (childNode) => {
-          const childNodeid = getNodeId(childNode);
-          if (isChecked) {
-            if (!selectCheckboxMaps[childNodeid]) {
-              selectCheckboxMaps[childNodeid] = childNode;
-            }
-          } else {
-            if (selectCheckboxMaps[childNodeid]) {
-              delete selectCheckboxMaps[childNodeid];
+        XEUtils.eachTree(
+          childList,
+          (childNode) => {
+            const childNodeid = getNodeId(childNode);
+            if (isChecked) {
+              if (!selectCheckboxMaps[childNodeid]) {
+                selectCheckboxMaps[childNodeid] = childNode;
+              }
+            } else {
+              if (selectCheckboxMaps[childNodeid]) {
+                delete selectCheckboxMaps[childNodeid];
+              }
             }
-          }
-        }, { children: transform ? mapChildrenField : childrenField });
+          },
+          { children: transform ? mapChildrenField : childrenField }
+        );
       }
       selectCheckboxMaps[nodeid] = node;
       reactData.updateCheckboxFlag++;
@@ -1292,9 +1303,7 @@ var cascader_default = defineVxeComponent({
       const queryMethod = remoteOpts.queryMethod;
       if (remote && queryMethod && remoteOpts.enabled) {
         reactData.searchLoading = true;
-        Promise.resolve(
-          queryMethod({ $cascader: $xeCascader, searchValue, value: modelValue })
-        ).then(() => nextTick()).catch(() => nextTick()).finally(() => {
+        Promise.resolve(queryMethod({ $cascader: $xeCascader, searchValue, value: modelValue })).then(() => nextTick()).catch(() => nextTick()).finally(() => {
           reactData.searchLoading = false;
         });
       }
@@ -1332,23 +1341,27 @@ var cascader_default = defineVxeComponent({
         const parentLevel = parentNodeItem ? parentNodeItem.level : 0;
         const parentNodes = parentNodeItem ? parentNodeItem.nodes : [];
         return createNode(childRecords).then((nodeList) => {
-          XEUtils.eachTree(nodeList, (childRow, index, items, path, parent, nodes) => {
-            const itemNodeId = getNodeId(childRow);
-            nodeMaps[itemNodeId] = {
-              item: childRow,
-              index: -1,
-              $index: -1,
-              _index: -1,
-              items,
-              parent: parent || parentNodeItem.item,
-              nodes: parentNodes.concat(nodes),
-              level: parentLevel + nodes.length,
-              treeIndex: -1,
-              lineCount: 0,
-              treeLoaded: false,
-              fullLabel: nodes.map((item) => item[labelField]).join(separator || " / ")
-            };
-          }, { children: childrenField });
+          XEUtils.eachTree(
+            nodeList,
+            (childRow, index, items, path, parent, nodes) => {
+              const itemNodeId = getNodeId(childRow);
+              nodeMaps[itemNodeId] = {
+                item: childRow,
+                index: -1,
+                $index: -1,
+                _index: -1,
+                items,
+                parent: parent || parentNodeItem.item,
+                nodes: parentNodes.concat(nodes),
+                level: parentLevel + nodes.length,
+                treeIndex: -1,
+                lineCount: 0,
+                treeLoaded: false,
+                fullLabel: nodes.map((item) => item[labelField]).join(separator || " / ")
+              };
+            },
+            { children: childrenField }
+          );
           node[childrenField] = nodeList;
           if (transform) {
             node[mapChildrenField] = nodeList;
@@ -1377,21 +1390,28 @@ var cascader_default = defineVxeComponent({
       const isVisible = visibleMethod ? visibleMethod({ $cascader: $xeCascader, node }) : handleVisibleOrCheckMode(visibleMode, isExistChild, nLevel);
       if (showRadio && isVisible) {
         const isDisabled = checkMethod ? !checkMethod({ $cascader: $xeCascader, node }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
-        return h("div", {
-          class: ["vxe-tree--radio-option", {
-            "is--checked": isChecked,
-            "is--disabled": isDisabled
-          }],
-          onClick: (evnt) => {
-            if (!isDisabled) {
-              changeRadioEvent(evnt, node, chunks, chunkIndex);
+        return h(
+          "div",
+          {
+            class: [
+              "vxe-tree--radio-option",
+              {
+                "is--checked": isChecked,
+                "is--disabled": isDisabled
+              }
+            ],
+            onClick: (evnt) => {
+              if (!isDisabled) {
+                changeRadioEvent(evnt, node, chunks, chunkIndex);
+              }
             }
-          }
-        }, [
-          h("span", {
-            class: ["vxe-radio--icon", isChecked ? getIcon().RADIO_CHECKED : isDisabled ? getIcon().RADIO_DISABLED_UNCHECKED : getIcon().RADIO_UNCHECKED]
-          })
-        ]);
+          },
+          [
+            h("span", {
+              class: ["vxe-radio--icon", isChecked ? getIcon().RADIO_CHECKED : isDisabled ? getIcon().RADIO_DISABLED_UNCHECKED : getIcon().RADIO_UNCHECKED]
+            })
+          ]
+        );
       }
       return renderEmptyElement($xeCascader);
     };
@@ -1402,22 +1422,29 @@ var cascader_default = defineVxeComponent({
       const isVisible = visibleMethod ? visibleMethod({ $cascader: $xeCascader, node }) : handleVisibleOrCheckMode(visibleMode, isExistChild, nLevel);
       if (showCheckbox && isVisible) {
         const isDisabled = checkMethod ? !checkMethod({ $cascader: $xeCascader, node }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
-        return h("div", {
-          class: ["vxe-cascader--checkbox-option", {
-            "is--checked": isChecked,
-            "is--indeterminate": isIndeterminate,
-            "is--disabled": isDisabled
-          }],
-          onClick: (evnt) => {
-            if (!isDisabled) {
-              changeCheckboxEvent(evnt, node, chunks, chunkIndex);
+        return h(
+          "div",
+          {
+            class: [
+              "vxe-cascader--checkbox-option",
+              {
+                "is--checked": isChecked,
+                "is--indeterminate": isIndeterminate,
+                "is--disabled": isDisabled
+              }
+            ],
+            onClick: (evnt) => {
+              if (!isDisabled) {
+                changeCheckboxEvent(evnt, node, chunks, chunkIndex);
+              }
             }
-          }
-        }, [
-          h("span", {
-            class: ["vxe-checkbox--icon", isIndeterminate ? getIcon().CHECKBOX_INDETERMINATE : isChecked ? getIcon().CHECKBOX_CHECKED : isDisabled ? getIcon().CHECKBOX_DISABLED_UNCHECKED : getIcon().CHECKBOX_UNCHECKED]
-          })
-        ]);
+          },
+          [
+            h("span", {
+              class: ["vxe-checkbox--icon", isIndeterminate ? getIcon().CHECKBOX_INDETERMINATE : isChecked ? getIcon().CHECKBOX_CHECKED : isDisabled ? getIcon().CHECKBOX_DISABLED_UNCHECKED : getIcon().CHECKBOX_UNCHECKED]
+            })
+          ]
+        );
       }
       return renderEmptyElement($xeCascader);
     };
@@ -1458,53 +1485,76 @@ var cascader_default = defineVxeComponent({
         isLazyLoaded = !!nodeItem.treeLoaded;
       }
       const nParams = { node };
-      return h("div", {
-        key: `${chunkIndex}_${nodeIndex}`,
-        class: ["vxe-cascader-chunk--node-item", {
-          "is--current": currentNode && (currentNode === node || getNodeId(currentNode) === nodeid),
-          "is-radio--checked": isRadioChecked,
-          "is-checkbox--checked": isCheckboxChecked,
-          "is-checkbox--indeterminate": isIndeterminate,
-          "is--expand": isExpand
-        }],
-        title: nodeTitle,
-        onMousedown: (evnt) => {
-          const isLeftBtn = evnt.button === 0;
-          if (isLeftBtn) {
-            evnt.stopPropagation();
+      return h(
+        "div",
+        {
+          key: `${chunkIndex}_${nodeIndex}`,
+          class: [
+            "vxe-cascader-chunk--node-item",
+            {
+              "is--current": currentNode && (currentNode === node || getNodeId(currentNode) === nodeid),
+              "is-radio--checked": isRadioChecked,
+              "is-checkbox--checked": isCheckboxChecked,
+              "is-checkbox--indeterminate": isIndeterminate,
+              "is--expand": isExpand
+            }
+          ],
+          title: nodeTitle,
+          onMousedown: (evnt) => {
+            const isLeftBtn = evnt.button === 0;
+            if (isLeftBtn) {
+              evnt.stopPropagation();
+            }
+          },
+          onClick(evnt) {
+            handleNodeClickEvent(evnt, node, chunks, chunkIndex);
           }
         },
-        onClick(evnt) {
-          handleNodeClickEvent(evnt, node, chunks, chunkIndex);
-        }
-      }, [
-        multiple ? renderCheckbox(node, isExistChild, nLevel, isCheckboxChecked, isIndeterminate, chunks, chunkIndex) : renderRadio(node, isExistChild, nLevel, isRadioChecked, chunks, chunkIndex),
-        h("div", {
-          class: "vxe-cascader-chunk--node-item-inner"
-        }, [
-          h("div", {
-            class: "vxe-cascader-chunk--node-item-title"
-          }, titleSlot ? getSlotVNs(titleSlot(nParams)) : nodeTitle)
-        ]),
-        treeOpts.showIcon && (lazy ? isLazyLoaded ? isExistChild : hasLazyChilds : isExistChild) ? h("div", {
-          class: "vxe-cascader-chunk--node-item-switcher"
-        }, [
-          [
-            h("div", {
-              class: "vxe-cascader--node-item-icon",
-              onClick(evnt) {
-                if (treeOpts.trigger === "icon") {
-                  toggleExpandEvent(evnt, node, chunks, chunkIndex);
-                }
-              }
-            }, iconSlot ? getSlotVNs(iconSlot(nParams)) : [
-              h("i", {
-                class: isLazyLoading ? iconLoaded || getIcon().CASCADER_NODE_LOADED : isExpand ? iconOpen || getIcon().CASCADER_NODE_OPEN : iconClose || getIcon().CASCADER_NODE_CLOSE
-              })
-            ])
-          ]
-        ]) : renderEmptyElement($xeCascader)
-      ]);
+        [
+          multiple ? renderCheckbox(node, isExistChild, nLevel, isCheckboxChecked, isIndeterminate, chunks, chunkIndex) : renderRadio(node, isExistChild, nLevel, isRadioChecked, chunks, chunkIndex),
+          h(
+            "div",
+            {
+              class: "vxe-cascader-chunk--node-item-inner"
+            },
+            [
+              h(
+                "div",
+                {
+                  class: "vxe-cascader-chunk--node-item-title"
+                },
+                titleSlot ? getSlotVNs(titleSlot(nParams)) : nodeTitle
+              )
+            ]
+          ),
+          treeOpts.showIcon && (lazy ? isLazyLoaded ? isExistChild : hasLazyChilds : isExistChild) ? h(
+            "div",
+            {
+              class: "vxe-cascader-chunk--node-item-switcher"
+            },
+            [
+              [
+                h(
+                  "div",
+                  {
+                    class: "vxe-cascader--node-item-icon",
+                    onClick(evnt) {
+                      if (treeOpts.trigger === "icon") {
+                        toggleExpandEvent(evnt, node, chunks, chunkIndex);
+                      }
+                    }
+                  },
+                  iconSlot ? getSlotVNs(iconSlot(nParams)) : [
+                    h("i", {
+                      class: isLazyLoading ? iconLoaded || getIcon().CASCADER_NODE_LOADED : isExpand ? iconOpen || getIcon().CASCADER_NODE_OPEN : iconClose || getIcon().CASCADER_NODE_CLOSE
+                    })
+                  ]
+                )
+              ]
+            ]
+          ) : renderEmptyElement($xeCascader)
+        ]
+      );
     };
     const renderVN = () => {
       const { className, modelValue, multiple, loading, filterable, showTotalButton, showCheckedButton, showClearButton, showCloseButton } = props;
@@ -1522,172 +1572,268 @@ var cascader_default = defineVxeComponent({
       const popupOpts = computePopupOpts.value;
       const popupClassName = popupOpts.className;
       if (formReadonly) {
-        return h("div", {
-          ref: refElem,
-          class: ["vxe-cascader--readonly", className]
-        }, [
-          h("span", {
-            class: "vxe-cascader-label"
-          }, selectLabel)
-        ]);
+        return h(
+          "div",
+          {
+            ref: refElem,
+            class: ["vxe-cascader--readonly", className]
+          },
+          [
+            h(
+              "span",
+              {
+                class: "vxe-cascader-label"
+              },
+              selectLabel
+            )
+          ]
+        );
       }
       const selectVals = XEUtils.eqNull(modelValue) ? [] : XEUtils.isArray(modelValue) ? modelValue : [modelValue];
-      return h("div", {
-        ref: refElem,
-        class: ["vxe-cascader", className ? XEUtils.isFunction(className) ? className({ $cascader: $xeCascader }) : className : "", {
-          [`size--${vSize}`]: vSize,
-          "is--filterable": filterable,
-          "is--visible": visiblePanel,
-          "is--disabled": isDisabled,
-          "is--loading": loading,
-          "is--active": isActivated
-        }]
-      }, [
-        h(VxeInputComponent, {
-          ref: refInput,
-          clearable: props.clearable,
-          placeholder: loading ? getI18n("vxe.select.loadingText") : props.placeholder,
-          editable: false,
-          disabled: isDisabled,
-          type: "text",
-          prefixIcon: props.prefixIcon,
-          suffixIcon: loading ? getIcon().TREE_SELECT_LOADED : visiblePanel ? getIcon().TREE_SELECT_OPEN : getIcon().TREE_SELECT_CLOSE,
-          modelValue: loading ? "" : selectLabel,
-          title: selectLabel,
-          onClear: clearEvent,
-          onClick: clickEvent,
-          onFocus: focusEvent,
-          onBlur: blurEvent,
-          onSuffixClick: togglePanelEvent
-        }, prefixSlot ? {
-          prefix: () => prefixSlot({})
-        } : {}),
-        h(Teleport, {
-          to: "body",
-          disabled: btnTransfer ? !initialized : true
-        }, [
-          h("div", {
-            ref: refOptionPanel,
-            class: ["vxe-table--ignore-clear vxe-cascader--panel", popupClassName ? XEUtils.isFunction(popupClassName) ? popupClassName({ $cascader: $xeCascader }) : popupClassName : "", {
+      return h(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-cascader",
+            className ? XEUtils.isFunction(className) ? className({ $cascader: $xeCascader }) : className : "",
+            {
               [`size--${vSize}`]: vSize,
-              "is--transfer": btnTransfer,
-              "ani--leave": !loading && isAniVisible,
-              "ani--enter": !loading && visiblePanel
-            }],
-            placement: reactData.panelPlacement,
-            style: popupWrapperStyle
-          }, initialized ? [
-            h("div", {
-              class: "vxe-cascader--panel-wrapper"
-            }, [
-              filterable ? h("div", {
-                class: "vxe-cascader--panel-search"
-              }, [
-                h(VxeInputComponent, {
-                  ref: refInpSearch,
-                  class: "vxe-cascader-search--input",
-                  modelValue: searchValue,
-                  clearable: true,
-                  disabled: false,
-                  readonly: false,
-                  placeholder: getI18n("vxe.cascader.search"),
-                  prefixIcon: getIcon().INPUT_SEARCH,
-                  "onUpdate:modelValue": modelSearchEvent
-                })
-              ]) : renderEmptyElement($xeCascader),
-              showCheckedButton && multiple || showClearButton || headerSlot ? h("div", {
-                class: "vxe-cascader--panel-header"
-              }, headerSlot ? headerSlot({}) : [
-                h("div", {
-                  class: "vxe-cascader--header-button"
-                }, [
-                  showCheckedButton && multiple || showClearButton ? h("div", {
-                    class: "vxe-cascader--selected-btns"
-                  }, [
-                    showCheckedButton && multiple ? h(VxeButtonComponent, {
-                      content: getI18n("vxe.treeSelect.allChecked"),
-                      mode: "text",
-                      onClick: allCheckedPanelEvent
-                    }) : renderEmptyElement($xeCascader),
-                    showClearButton ? h(VxeButtonComponent, {
-                      content: getI18n("vxe.treeSelect.clearChecked"),
-                      mode: "text",
-                      onClick: clearCheckedPanelEvent
-                    }) : renderEmptyElement($xeCascader)
-                  ]) : renderEmptyElement($xeCascader)
-                ])
-              ]) : renderEmptyElement($xeCascader),
-              h("div", {
-                class: "vxe-cascader--panel-body"
-              }, [
-                h("div", {
-                  ref: refChunkWrapper,
-                  class: "vxe-cascader-chunk--wrapper"
-                }, [
-                  currentCunkList.map((chunks, chunkIndex) => {
-                    return h("div", {
-                      key: chunkIndex,
-                      class: "vxe-cascader-chunk--item-wrapper"
-                    }, [
-                      h(VxeListComponent, {
-                        data: chunks,
-                        virtualYConfig: listVirtualYOpts
-                      }, {
-                        default(slotParams) {
-                          const { items } = slotParams;
-                          return items.map((node, nodeIndex) => {
-                            const nodeid = getNodeId(node);
-                            return renderNode(node, nodeid, nodeIndex, chunks, chunkIndex);
-                          });
-                        }
-                      })
-                    ]);
-                  })
-                ])
-              ]),
-              footerSlot || showTotalButton || showCloseButton ? h("div", {
-                class: "vxe-cascader--panel-footer"
-              }, footerSlot ? footerSlot({}) : [
-                h("div", {
-                  class: "vxe-cascader--footer-button"
-                }, [
-                  showTotalButton ? h("div", {
-                    class: "vxe-cascader--total-btns"
-                  }, getI18n("vxe.treeSelect.total", [selectVals.length])) : renderEmptyElement($xeCascader),
-                  showCloseButton ? h("div", {
-                    class: "vxe-cascader--oper-btns"
-                  }, [
-                    h(VxeButtonComponent, {
-                      content: getI18n("vxe.select.close"),
-                      mode: "text",
-                      onClick: closePanelEvent
-                    })
-                  ]) : renderEmptyElement($xeCascader)
-                ])
-              ]) : renderEmptyElement($xeCascader)
-            ])
-          ] : [])
-        ])
-      ]);
+              "is--filterable": filterable,
+              "is--visible": visiblePanel,
+              "is--disabled": isDisabled,
+              "is--loading": loading,
+              "is--active": isActivated
+            }
+          ]
+        },
+        [
+          h(
+            VxeInputComponent,
+            {
+              ref: refInput,
+              clearable: props.clearable,
+              placeholder: loading ? getI18n("vxe.select.loadingText") : props.placeholder,
+              editable: false,
+              disabled: isDisabled,
+              type: "text",
+              prefixIcon: props.prefixIcon,
+              suffixIcon: loading ? getIcon().TREE_SELECT_LOADED : visiblePanel ? getIcon().TREE_SELECT_OPEN : getIcon().TREE_SELECT_CLOSE,
+              modelValue: loading ? "" : selectLabel,
+              title: selectLabel,
+              onClear: clearEvent,
+              onClick: clickEvent,
+              onFocus: focusEvent,
+              onBlur: blurEvent,
+              onSuffixClick: togglePanelEvent
+            },
+            prefixSlot ? {
+              prefix: () => prefixSlot({})
+            } : {}
+          ),
+          h(
+            Teleport,
+            {
+              to: "body",
+              disabled: btnTransfer ? !initialized : true
+            },
+            [
+              h(
+                "div",
+                {
+                  ref: refOptionPanel,
+                  class: [
+                    "vxe-table--ignore-clear vxe-cascader--panel",
+                    popupClassName ? XEUtils.isFunction(popupClassName) ? popupClassName({ $cascader: $xeCascader }) : popupClassName : "",
+                    {
+                      [`size--${vSize}`]: vSize,
+                      "is--transfer": btnTransfer,
+                      "ani--leave": !loading && isAniVisible,
+                      "ani--enter": !loading && visiblePanel
+                    }
+                  ],
+                  placement: reactData.panelPlacement,
+                  style: popupWrapperStyle
+                },
+                initialized ? [
+                  h(
+                    "div",
+                    {
+                      class: "vxe-cascader--panel-wrapper"
+                    },
+                    [
+                      filterable ? h(
+                        "div",
+                        {
+                          class: "vxe-cascader--panel-search"
+                        },
+                        [
+                          h(VxeInputComponent, {
+                            ref: refInpSearch,
+                            class: "vxe-cascader-search--input",
+                            modelValue: searchValue,
+                            clearable: true,
+                            disabled: false,
+                            readonly: false,
+                            placeholder: getI18n("vxe.cascader.search"),
+                            prefixIcon: getIcon().INPUT_SEARCH,
+                            "onUpdate:modelValue": modelSearchEvent
+                          })
+                        ]
+                      ) : renderEmptyElement($xeCascader),
+                      showCheckedButton && multiple || showClearButton || headerSlot ? h(
+                        "div",
+                        {
+                          class: "vxe-cascader--panel-header"
+                        },
+                        headerSlot ? headerSlot({}) : [
+                          h(
+                            "div",
+                            {
+                              class: "vxe-cascader--header-button"
+                            },
+                            [
+                              showCheckedButton && multiple || showClearButton ? h(
+                                "div",
+                                {
+                                  class: "vxe-cascader--selected-btns"
+                                },
+                                [
+                                  showCheckedButton && multiple ? h(VxeButtonComponent, {
+                                    content: getI18n("vxe.treeSelect.allChecked"),
+                                    mode: "text",
+                                    onClick: allCheckedPanelEvent
+                                  }) : renderEmptyElement($xeCascader),
+                                  showClearButton ? h(VxeButtonComponent, {
+                                    content: getI18n("vxe.treeSelect.clearChecked"),
+                                    mode: "text",
+                                    onClick: clearCheckedPanelEvent
+                                  }) : renderEmptyElement($xeCascader)
+                                ]
+                              ) : renderEmptyElement($xeCascader)
+                            ]
+                          )
+                        ]
+                      ) : renderEmptyElement($xeCascader),
+                      h(
+                        "div",
+                        {
+                          class: "vxe-cascader--panel-body"
+                        },
+                        [
+                          h(
+                            "div",
+                            {
+                              ref: refChunkWrapper,
+                              class: "vxe-cascader-chunk--wrapper"
+                            },
+                            [
+                              currentCunkList.map((chunks, chunkIndex) => {
+                                return h(
+                                  "div",
+                                  {
+                                    key: chunkIndex,
+                                    class: "vxe-cascader-chunk--item-wrapper"
+                                  },
+                                  [
+                                    h(
+                                      VxeListComponent,
+                                      {
+                                        data: chunks,
+                                        virtualYConfig: listVirtualYOpts
+                                      },
+                                      {
+                                        default(slotParams) {
+                                          const { items } = slotParams;
+                                          return items.map((node, nodeIndex) => {
+                                            const nodeid = getNodeId(node);
+                                            return renderNode(node, nodeid, nodeIndex, chunks, chunkIndex);
+                                          });
+                                        }
+                                      }
+                                    )
+                                  ]
+                                );
+                              })
+                            ]
+                          )
+                        ]
+                      ),
+                      footerSlot || showTotalButton || showCloseButton ? h(
+                        "div",
+                        {
+                          class: "vxe-cascader--panel-footer"
+                        },
+                        footerSlot ? footerSlot({}) : [
+                          h(
+                            "div",
+                            {
+                              class: "vxe-cascader--footer-button"
+                            },
+                            [
+                              showTotalButton ? h(
+                                "div",
+                                {
+                                  class: "vxe-cascader--total-btns"
+                                },
+                                getI18n("vxe.treeSelect.total", [selectVals.length])
+                              ) : renderEmptyElement($xeCascader),
+                              showCloseButton ? h(
+                                "div",
+                                {
+                                  class: "vxe-cascader--oper-btns"
+                                },
+                                [
+                                  h(VxeButtonComponent, {
+                                    content: getI18n("vxe.select.close"),
+                                    mode: "text",
+                                    onClick: closePanelEvent
+                                  })
+                                ]
+                              ) : renderEmptyElement($xeCascader)
+                            ]
+                          )
+                        ]
+                      ) : renderEmptyElement($xeCascader)
+                    ]
+                  )
+                ] : []
+              )
+            ]
+          )
+        ]
+      );
     };
-    watch(() => props.modelValue, () => {
-      if (!internalData.isUpdateMode) {
-        updateModelChecked();
-        handleCurrentItems();
-        updateCurrentChunk();
+    watch(
+      () => props.modelValue,
+      () => {
+        if (!internalData.isUpdateMode) {
+          updateModelChecked();
+          handleCurrentItems();
+          updateCurrentChunk();
+        }
+        internalData.isUpdateMode = false;
       }
-      internalData.isUpdateMode = false;
-    });
-    watch(() => props.options, () => {
-      cacheNodeMap();
-    });
+    );
+    watch(
+      () => props.options,
+      () => {
+        cacheNodeMap();
+      }
+    );
     const dataFlag = ref(0);
-    watch(() => props.options ? props.options.length : 0, () => {
-      dataFlag.value++;
-    });
-    watch(() => props.options, () => {
-      dataFlag.value++;
-    });
+    watch(
+      () => props.options ? props.options.length : 0,
+      () => {
+        dataFlag.value++;
+      }
+    );
+    watch(
+      () => props.options,
+      () => {
+        dataFlag.value++;
+      }
+    );
     watch(dataFlag, () => {
       loadData(props.options || []);
     });