tdesign-vue-next 1.7.2-alpha3 → 1.7.3-alpha1

package/dist/tdesign.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v1.7.1
+ * tdesign v1.7.2
  * (c) 2023 tdesign
  * @license MIT
  */
@@ -4072,7 +4072,7 @@
       itemsPerPage: "{size} \u6761/\u9875",
       jumpTo: "\u8DF3\u81F3",
       page: "\u9875",
-      total: "\u5171 {total} \u9879\u6570\u636E"
+      total: "\u5171 {total} \u6761\u6570\u636E"
     },
     cascader: {
       empty: "\u6682\u65E0\u6570\u636E",
@@ -20585,11 +20585,13 @@
         classes: classes,
         itemRef: itemRef,
         href: href,
-        target: target
+        target: target,
+        submenu: submenu
       };
     },
     methods: {
       handleClick: function handleClick(e) {
+        var _this$submenu, _this$submenu$closePa;
         e.stopPropagation();
         if (this.disabled) return;
         this.menu.select(this.value);
@@ -20606,6 +20608,7 @@
             }
           });
         }
+        (_this$submenu = this.submenu) === null || _this$submenu === void 0 || (_this$submenu$closePa = _this$submenu.closeParentPopup) === null || _this$submenu$closePa === void 0 || _this$submenu$closePa.call(_this$submenu, e);
       }
     },
     render: function render() {
@@ -23556,7 +23559,7 @@
   var ESCAPE_REG = /^Escape$/i;
   var SPACE_REG = /^Space$/i;
   var ENTER_REG = /^Enter$/i;
-  var SHIFT_REG = /^Shift$/i;
+  var SHIFT_REG = /^(Shift|ShiftLeft|ShiftRight)$/i;
   var CLEAR_REG = /^KeyC$/i;
   var ALL_REG = /^(KeyA|KeyL)$/i;
   var CHECKED_CODE_REG = /^(Enter|Space)$/i;
@@ -26228,6 +26231,10 @@
           filteredOptions.value = (_selectPanelRef$value2 = selectPanelRef.value) === null || _selectPanelRef$value2 === void 0 ? void 0 : _selectPanelRef$value2.displayOptions;
         });
       };
+      var handlerPopupVisibleChange = function handlerPopupVisibleChange(visible, context) {
+        setInnerPopupVisible(visible, context);
+        if (visible && context.trigger === "trigger-element-click") setInputValue("");
+      };
       var addCache = function addCache(val) {
         if (props2.multiple) {
           var newCache = [];
@@ -26348,9 +26355,7 @@
               params: valueDisplayParams.value
             });
           },
-          "onPopupVisibleChange": function onPopupVisibleChange(val, context) {
-            setInnerPopupVisible(val, context);
-          },
+          "onPopupVisibleChange": handlerPopupVisibleChange,
           "onInputChange": handlerInputChange,
           "onClear": function onClear(_ref6) {
             var _props2$onClear;
@@ -26386,7 +26391,6 @@
           "onFocus": function onFocus(inputValue2, _ref9) {
             var _props2$onFocus;
             var e = _ref9.e;
-            setInputValue("");
             (_props2$onFocus = props2.onFocus) === null || _props2$onFocus === void 0 || _props2$onFocus.call(props2, {
               e: e,
               value: innerValue.value
@@ -39823,7 +39827,8 @@
         width: "0px",
         height: "0px",
         left: "0px",
-        top: "0px"
+        top: "0px",
+        "transition-property": "none"
       });
       var calcDefaultBarStyle = function calcDefaultBarStyle() {
         var div = document.createElement("div");
@@ -39835,19 +39840,22 @@
           offsetHeight = defaultCheckedRadio.offsetHeight,
           offsetLeft = defaultCheckedRadio.offsetLeft,
           offsetTop = defaultCheckedRadio.offsetTop;
-        barStyle.value = {
+        barStyle.value = _objectSpread$1n(_objectSpread$1n({}, barStyle.value), {}, {
           width: "".concat(offsetWidth, "px"),
           height: "".concat(offsetHeight, "px"),
           left: "".concat(offsetLeft, "px"),
           top: "".concat(offsetTop, "px")
-        };
+        });
         document.body.removeChild(div);
       };
       var calcBarStyle = function calcBarStyle() {
+        var disableAnimation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
         if (props2.variant === "outline") return;
         var checkedRadio = radioGroupRef.value.querySelector(checkedClassName.value);
+        var transitionProperty = disableAnimation ? "none" : "all";
         if (!checkedRadio) {
           barStyle.value = {
+            "transition-property": transitionProperty,
             width: "0px",
             height: "9px",
             left: "0px",
@@ -39863,6 +39871,7 @@
           calcDefaultBarStyle();
         } else {
           barStyle.value = {
+            "transition-property": transitionProperty,
             width: "".concat(offsetWidth, "px"),
             height: "".concat(offsetHeight, "px"),
             left: "".concat(offsetLeft, "px"),
@@ -39886,7 +39895,7 @@
         }, _callee);
       })));
       Vue.onMounted(function () {
-        calcBarStyle();
+        calcBarStyle(true);
         useResizeObserver(radioGroupRef, throttle_1( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
           return regenerator.wrap(function _callee2$(_context2) {
             while (1) switch (_context2.prev = _context2.next) {
@@ -43298,33 +43307,56 @@
       var data = params.value.data;
       return tScroll.value.type === "virtual" && tScroll.value.threshold < data.length;
     });
-    var getTrScrollTopHeightList = function getTrScrollTopHeightList(trHeightList2, containerHeight2) {
+    var getTrScrollTopHeightList = function getTrScrollTopHeightList(trHeightList2) {
       var list = [];
       var data = params.value.data;
       for (var i = 0, len = data.length; i < len; i++) {
-        list[i] = (list[i - 1] || containerHeight2) + (trHeightList2[i] || tScroll.value.rowHeight);
+        var _list, _trHeightList2$i;
+        list[i] = ((_list = list[i - 1]) !== null && _list !== void 0 ? _list : 0) + ((_trHeightList2$i = trHeightList2[i]) !== null && _trHeightList2$i !== void 0 ? _trHeightList2$i : tScroll.value.rowHeight);
       }
       return list;
     };
-    var tripleBufferSize = Vue.computed(function () {
-      return tScroll.value.bufferSize * 3;
-    });
-    var updateVisibleData = function updateVisibleData(trScrollTopHeightList2, scrollTop) {
+    function getVisibleStartRowIndex() {
+      var _container$value$scro, _container$value;
+      var scrollTop = (_container$value$scro = (_container$value = container.value) === null || _container$value === void 0 ? void 0 : _container$value.scrollTop) !== null && _container$value$scro !== void 0 ? _container$value$scro : 0;
+      var currentIndex = -1;
+      for (var i = 0, len = trScrollTopHeightList.value.length; i < len; i++) {
+        if (trScrollTopHeightList.value[i] > scrollTop) {
+          currentIndex = i;
+          break;
+        }
+      }
+      return currentIndex;
+    }
+    function getVisibleEndRowIndex() {
+      var _container$value$scro2, _container$value2;
+      var scrollTop = (_container$value$scro2 = (_container$value2 = container.value) === null || _container$value2 === void 0 ? void 0 : _container$value2.scrollTop) !== null && _container$value$scro2 !== void 0 ? _container$value$scro2 : 0;
       var currentIndex = -1;
-      for (var i = 0, len = trScrollTopHeightList2.length; i < len; i++) {
-        if (trScrollTopHeightList2[i] > scrollTop) {
+      for (var i = 0, len = trScrollTopHeightList.value.length; i < len; i++) {
+        if (trScrollTopHeightList.value[i] > containerHeight.value + scrollTop) {
           currentIndex = i;
           break;
         }
       }
-      if (currentIndex < 0) return;
-      var startIndex = Math.min(currentIndex, trScrollTopHeightList2.length - tripleBufferSize.value);
-      var endIndex = startIndex + tripleBufferSize.value;
+      return currentIndex;
+    }
+    function getVisibleRowRange() {
+      var startIndex = Math.max(getVisibleStartRowIndex() - tScroll.value.bufferSize, 0);
+      var endIndex = getVisibleEndRowIndex() + tScroll.value.bufferSize;
+      return {
+        startIndex: startIndex,
+        endIndex: endIndex
+      };
+    }
+    var updateVisibleData = function updateVisibleData() {
+      var _getVisibleRowRange = getVisibleRowRange(),
+        startIndex = _getVisibleRowRange.startIndex,
+        endIndex = _getVisibleRowRange.endIndex;
       if (startAndEndIndex.value.join() !== [startIndex, endIndex].join() && startIndex >= 0) {
-        visibleData.value = params.value.data.slice(startIndex, endIndex);
-        var lastScrollTop = trScrollTopHeightList2[startIndex - 1];
-        var top = lastScrollTop > 0 ? lastScrollTop - containerHeight.value : 0;
+        var lastScrollTop = trScrollTopHeightList.value[startIndex - 1];
+        var top = lastScrollTop > 0 ? lastScrollTop : 0;
         translateY.value = top;
+        visibleData.value = params.value.data.slice(startIndex, endIndex);
         startAndEndIndex.value = [startIndex, endIndex];
       }
     };
@@ -43336,16 +43368,15 @@
       var newTrHeightList = trHeightList.value;
       if (newTrHeightList[rowIndex] !== trHeight) {
         newTrHeightList[rowIndex] = trHeight;
-        var scrollTopHeightList = getTrScrollTopHeightList(newTrHeightList, containerHeight.value);
+        var scrollTopHeightList = getTrScrollTopHeightList(newTrHeightList);
         trScrollTopHeightList.value = scrollTopHeightList;
         var lastIndex = scrollTopHeightList.length - 1;
         scrollHeight.value = scrollTopHeightList[lastIndex] - containerHeight.value;
-        updateVisibleData(scrollTopHeightList, container.value.scrollTop);
       }
     };
     var handleScroll = function handleScroll() {
       if (!isVirtualScroll.value) return;
-      updateVisibleData(trScrollTopHeightList.value, container.value.scrollTop);
+      updateVisibleData();
     };
     var refreshVirtualScroll = function refreshVirtualScroll(_ref) {
       var _ref2 = _slicedToArray(_ref, 1),
@@ -43389,15 +43420,17 @@
     Vue.watch(function () {
       return [[].concat(_toConsumableArray(params.value.data), [tScroll.value, isVirtualScroll.value, container.value])];
     }, function () {
-      if (!isVirtualScroll.value) return;
+      if (!isVirtualScroll.value || !container.value) return;
       var data = params.value.data;
       addIndexToData(data);
-      var startIndex = startAndEndIndex.value[0];
-      visibleData.value = data.slice(startIndex, startIndex + tripleBufferSize.value);
+      var _getVisibleRowRange2 = getVisibleRowRange(),
+        startIndex = _getVisibleRowRange2.startIndex,
+        endIndex = _getVisibleRowRange2.endIndex;
+      visibleData.value = data.slice(startIndex, endIndex);
       var timer = setTimeout(function () {
         if (container.value) {
           containerHeight.value = container.value.getBoundingClientRect().height;
-          var scrollTopHeightList = getTrScrollTopHeightList(trHeightList.value || [], containerHeight.value);
+          var scrollTopHeightList = getTrScrollTopHeightList(trHeightList.value || []);
           trScrollTopHeightList.value = scrollTopHeightList;
         }
         clearTimeout(timer);
@@ -45588,6 +45621,10 @@
         });
         change(treeSelectValue.value, null, trigger);
       };
+      var handlePopupVisibleChange = function handlePopupVisibleChange(visible, context) {
+        setInnerVisible(visible, context);
+        if (visible && context.trigger === "trigger-element-click") setInnerInputValue("");
+      };
       var changeNodeInfo = /*#__PURE__*/function () {
         var _ref5 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee4() {
           return regenerator.wrap(function _callee4$(_context4) {
@@ -45815,9 +45852,7 @@
           },
           "onInputChange": inputChange,
           "onTagChange": tagChange,
-          "onPopupVisibleChange": function onPopupVisibleChange(state, context) {
-            return setInnerVisible(state, context);
-          }
+          "onPopupVisibleChange": handlePopupVisibleChange
         }, props2.selectInputProps), {
           suffix: slots.suffix,
           panel: function panel() {
@@ -51214,6 +51249,9 @@
       type: [Boolean, Function],
       "default": false
     },
+    loadingProps: {
+      type: Object
+    },
     shadow: Boolean,
     size: {
       type: String,
@@ -51362,7 +51400,7 @@
           "class": actionsCls.value
         }, [renderTNodeJSX("actions")])])]);
         if (showLoading.value) {
-          return renderTNodeJSX("loading") || Vue.createVNode(Loading, null, _isSlot$c(content) ? content : {
+          return renderTNodeJSX("loading") || Vue.createVNode(Loading, props2.loadingProps, _isSlot$c(content) ? content : {
             "default": function _default() {
               return [content];
             }
@@ -52166,21 +52204,6 @@
     };
   }
 
-  var data = [];
-  var push = function push(value) {
-    data.push(value);
-  };
-  var pop = function pop() {
-    data.pop();
-  };
-  var stack = {
-    push: push,
-    pop: pop,
-    get top() {
-      return data[data.length - 1];
-    }
-  };
-
   function getScrollbarWidthWithCSS() {
     var defaultScrollbarWidth = 6;
     if (typeof navigator === "undefined" || !navigator) return defaultScrollbarWidth;
@@ -52207,6 +52230,87 @@
     return scrollbarWidth;
   }
 
+  var POPUP_BASE_Z_INDEX = 1e3;
+  var MESSAGE_BASE_Z_INDEX = 5e3;
+  var Z_INDEX_STEP = 1;
+  var PopupManager = /*#__PURE__*/_createClass(function PopupManager() {
+    var _this = this;
+    _classCallCheck(this, PopupManager);
+    _defineProperty$3(this, "popupStack", {
+      popup: /* @__PURE__ */new Set(),
+      dialog: /* @__PURE__ */new Set(),
+      message: /* @__PURE__ */new Set()
+    });
+    _defineProperty$3(this, "getNextZIndex", function (type) {
+      var current = type === "message" ? Array.from(_this.popupStack.message).pop() || MESSAGE_BASE_Z_INDEX : Array.from(_this.popupStack.popup).pop() || POPUP_BASE_Z_INDEX;
+      return current + Z_INDEX_STEP;
+    });
+    _defineProperty$3(this, "add", function (type) {
+      var zIndex = _this.getNextZIndex(type);
+      _this.popupStack[type].add(zIndex);
+      if (type === "dialog") {
+        _this.popupStack.popup.add(zIndex);
+      }
+      return zIndex;
+    });
+    _defineProperty$3(this, "delete", function (zIndex, type) {
+      _this.popupStack[type]["delete"](zIndex);
+      if (type === "dialog") {
+        _this.popupStack.popup["delete"](zIndex);
+      }
+    });
+    _defineProperty$3(this, "isLastDialog", function (zIndex) {
+      if (_this.popupStack.dialog.size > 1) {
+        return zIndex === Array.from(_this.popupStack.dialog).pop();
+      }
+      return true;
+    });
+  });
+  var popupManager = new PopupManager();
+  function usePopupManager(type) {
+    var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      visible = _ref.visible,
+      runOnMounted = _ref.runOnMounted;
+    var zIndex = Vue.ref(0);
+    var open = function open() {
+      zIndex.value = popupManager.add(type);
+    };
+    var close = function close() {
+      popupManager["delete"](zIndex.value, type);
+    };
+    var isLastDialog = function isLastDialog() {
+      if (type === "dialog") {
+        return popupManager.isLastDialog(zIndex.value);
+      }
+      return false;
+    };
+    Vue.watch(function () {
+      return visible === null || visible === void 0 ? void 0 : visible.value;
+    }, function (visible2) {
+      if (visible2) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
+    if (runOnMounted) {
+      Vue.onMounted(function () {
+        open();
+      });
+      Vue.onBeforeUnmount(function () {
+        close();
+      });
+    }
+    return {
+      zIndex: Vue.readonly(zIndex),
+      open: open,
+      close: close,
+      isLastDialog: isLastDialog
+    };
+  }
+
   function GetCSSValue(v) {
     return Number.isNaN(Number(v)) ? v : "".concat(Number(v), "px");
   }
@@ -52325,6 +52429,9 @@
       var isFullScreen = Vue.computed(function () {
         return props2.mode === "full-screen";
       });
+      var computedVisible = Vue.computed(function () {
+        return props2.visible;
+      });
       var maskClass = Vue.computed(function () {
         return ["".concat(COMPONENT_NAME.value, "__mask"), !props2.showOverlay && "".concat(classPrefix.value, "-is-hidden")];
       });
@@ -52362,6 +52469,10 @@
           width: GetCSSValue(props2.width)
         } : {};
       });
+      var _usePopupManager = usePopupManager("dialog", {
+          visible: computedVisible
+        }),
+        isLastDialog = _usePopupManager.isLastDialog;
       Vue.watch(function () {
         return props2.visible;
       }, function (value) {
@@ -52381,7 +52492,6 @@
         } else {
           clearStyleFunc();
         }
-        storeUid(value);
         addKeyboardEvent(value);
       });
       function destroySelf() {
@@ -52394,14 +52504,6 @@
           destroySelf();
         }, 150);
       }
-      var instance = Vue.getCurrentInstance();
-      var storeUid = function storeUid(flag) {
-        if (flag) {
-          stack.push(instance.uid);
-        } else {
-          stack.pop();
-        }
-      };
       var addKeyboardEvent = function addKeyboardEvent(status) {
         if (status) {
           document.addEventListener("keydown", keyboardEvent);
@@ -52415,7 +52517,7 @@
         var eventSrc = e.target;
         if (eventSrc.tagName.toLowerCase() === "input") return;
         var code = e.code;
-        if ((code === "Enter" || code === "NumpadEnter") && stack.top === instance.uid) {
+        if ((code === "Enter" || code === "NumpadEnter") && isLastDialog()) {
           var _props2$onConfirm2;
           (_props2$onConfirm2 = props2.onConfirm) === null || _props2$onConfirm2 === void 0 || _props2$onConfirm2.call(props2, {
             e: e
@@ -52423,7 +52525,7 @@
         }
       };
       var keyboardEvent = function keyboardEvent(e) {
-        if (e.code === "Escape" && stack.top === instance.uid) {
+        if (e.code === "Escape" && isLastDialog()) {
           var _props2$onEscKeydown, _props2$closeOnEscKey;
           (_props2$onEscKeydown = props2.onEscKeydown) === null || _props2$onEscKeydown === void 0 || _props2$onEscKeydown.call(props2, {
             e: e
@@ -52911,6 +53013,10 @@
           mainImage: ""
         };
       });
+      var _usePopupManager = usePopupManager("dialog", {
+          visible: visibleValue
+        }),
+        isLastDialog = _usePopupManager.isLastDialog;
       var prevImage = function prevImage() {
         var newIndex = indexValue.value - 1;
         onRest();
@@ -52968,7 +53074,7 @@
             onZoomOut();
             break;
           case EVENT_CODE.esc:
-            if (props2.closeOnEscKeydown) {
+            if (props2.closeOnEscKeydown && isLastDialog()) {
               onClose({
                 e: e,
                 trigger: "esc"
@@ -53025,6 +53131,7 @@
             "class": ["".concat(COMPONENT_NAME.value, "__header-box"), _defineProperty$3({}, "".concat(classPrefix.value, "-is-active"), index2 === indexValue.value)]
           }, [Vue.createVNode(Image$1, {
             "src": image.thumbnail || image.mainImage,
+            "error": "",
             "className": "".concat(COMPONENT_NAME.value, "__header-img"),
             "onClick": function onClick() {
               return onImgClick(index2);
@@ -68200,7 +68307,10 @@
     uploadButton: {
       type: [Object, Function]
     },
-    uploadPastedFiles: Boolean,
+    uploadPastedFiles: {
+      type: Boolean,
+      "default": true
+    },
     useMockProgress: {
       type: Boolean,
       "default": true
@@ -70068,9 +70178,7 @@
       onFileChange === null || onFileChange === void 0 || onFileChange(files2);
     }
     function onPasteFileChange(e) {
-      onFileChange === null || onFileChange === void 0 || onFileChange(_toConsumableArray(e.clipboardData.items).map(function (file) {
-        return file.getAsFile();
-      }));
+      onFileChange === null || onFileChange === void 0 || onFileChange(_toConsumableArray(e.clipboardData.files));
     }
     function uploadFiles(toFiles) {
       var notUploadedFiles = uploadValue.value.filter(function (t2) {
@@ -70206,11 +70314,7 @@
       });
       uploading.value = false;
       if (autoUpload.value) {
-        toUploadFiles.value = toUploadFiles.value.map(function (item) {
-          return _objectSpread$2(_objectSpread$2({}, item), {}, {
-            status: "waiting"
-          });
-        });
+        toUploadFiles.value = [];
       } else {
         setUploadValue(uploadValue.value.map(function (item) {
           if (item.status !== "success") {
@@ -70417,6 +70521,9 @@
         onDragleave: props2.onDragleave,
         onDrop: props2.onDrop
       };
+      var uploadClasses = Vue.computed(function () {
+        return ["".concat(classPrefix.value, "-upload"), _defineProperty$3({}, "".concat(classPrefix.value, "-upload--theme-").concat(props2.theme), props2.theme === "file-input")];
+      });
       var getNormalFileNode = function getNormalFileNode() {
         return Vue.createVNode(NormalFile, Vue.mergeProps(commonDisplayFileProps.value, {
           "multiple": props2.multiple
@@ -70505,8 +70612,8 @@
       };
       return function () {
         return Vue.createVNode("div", {
-          "class": "".concat(classPrefix.value, "-upload"),
-          "onPaste": props2.uploadPastedFiles && onPasteFileChange
+          "class": uploadClasses.value,
+          "onPaste": props2.uploadPastedFiles ? onPasteFileChange : void 0
         }, [Vue.createVNode("input", Vue.mergeProps({
           "ref": inputRef,
           "type": "file",
@@ -70672,7 +70779,7 @@
   }
   var tdesign = {
     install: install,
-    version: "1.7.1"
+    version: "1.7.2"
   };
 
   if (typeof console !== "undefined" && console.warn && typeof window !== "undefined") {