zartui 2.0.88 → 2.0.90

package/es/index.js

@@ -75,7 +75,7 @@ import TextEllipsis from './text-ellipsis';
 import Timeline from './timeline';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '2.0.87';
+var version = '2.0.90';
 
 function install(Vue) {
   var components = [ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, TextEllipsis, Timeline, Toast, Uploader];

package/es/popover/index.js

@@ -1,4 +1,7 @@
+import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { createPopper as _createPopper, offsetModifier } from '@vant/popperjs';
 import { createNamespace } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant'; // Mixins
@@ -7,6 +10,7 @@ import { ClickOutsideMixin } from '../mixins/click-outside'; // Components
 
 import Icon from '../icon';
 import Popup from '../popup';
+import { arrow, autoUpdate, computePosition, flip, hide, limitShift, offset, shift } from '@floating-ui/dom';
 
 var _createNamespace = createNamespace('popover'),
     createComponent = _createNamespace[0],
@@ -48,10 +52,31 @@ export default createComponent({
     closeOnClickAction: {
       type: Boolean,
       default: true
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    autoAdjustOverflow: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
-    value: 'updateLocation',
+    value: {
+      handler: function handler(val) {
+        var _this = this;
+
+        if (val) {
+          this.$nextTick(function () {
+            _this.autoUpdatePopup();
+          });
+        }
+
+        this.updateLocation();
+      },
+      immediate: true
+    },
     placement: 'updateLocation'
   },
   mounted: function mounted() {
@@ -80,25 +105,111 @@ export default createComponent({
         })]
       });
     },
+    autoUpdatePopup: function autoUpdatePopup() {
+      if (this.$refs.wrapper && this.$refs.popover && this.autoAdjustOverflow) {
+        autoUpdate(this.$refs.wrapper, this.$refs.popover.$el, this.updatePopup, {
+          elementResize: typeof ResizeObserver !== 'undefined'
+        });
+      }
+    },
+    updatePopup: function updatePopup() {
+      var _this2 = this;
+
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var popoverEl, wrapperEl, _yield$computePositio, x, y, realPlacement, middlewareData, popupTop;
+
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!(_this2.$refs.wrapper && _this2.$refs.popover.$el && _this2.$refs.arrow)) {
+                  _context.next = 15;
+                  break;
+                }
+
+                popoverEl = _this2.$refs.popover.$el;
+                wrapperEl = _this2.$refs.wrapper;
+                _context.next = 5;
+                return computePosition(wrapperEl, popoverEl, {
+                  placement: _this2.placement,
+                  middleware: [offset(8), shift({
+                    padding: 4,
+                    crossAxis: false,
+                    limiter: limitShift()
+                  }), flip(), hide(), arrow({
+                    element: _this2.$refs.arrow,
+                    padding: 6
+                  })]
+                });
+
+              case 5:
+                _yield$computePositio = _context.sent;
+                x = _yield$computePositio.x;
+                y = _yield$computePositio.y;
+                realPlacement = _yield$computePositio.placement;
+                middlewareData = _yield$computePositio.middlewareData;
+                popupTop = y; // 当被包裹元素超出屏幕时，对坐标进行特殊处理，先处理顶部超出，不然再处理底部超出
+
+                if (y < 0) {
+                  popupTop = 0;
+                } else if (y > 0 && y + popoverEl.offsetHeight > document.body.clientHeight) {
+                  popupTop = document.body.clientHeight - popoverEl.offsetHeight;
+                }
+
+                _this2.$refs.popover.$el.setAttribute('data-popper-placement', realPlacement); // 这里手动指定popup placement位置，避免滚动时出现popup弹窗位置闪烁
+
+
+                _this2.popper.setOptions({
+                  placement: realPlacement
+                });
+
+                _this2.$nextTick(function () {
+                  var _middlewareData$arrow;
+
+                  _extends(_this2.$refs.popover.$el.style, {
+                    left: x + "px",
+                    top: popupTop + "px"
+                  });
+
+                  var _ref = (_middlewareData$arrow = middlewareData.arrow) != null ? _middlewareData$arrow : {},
+                      arrowX = _ref.x,
+                      arrowY = _ref.y;
+
+                  _extends(_this2.$refs.arrow.style, {
+                    left: arrowX != null ? arrowX + "px" : '',
+                    top: arrowY != null ? arrowY + "px" : '',
+                    margin: 0
+                  });
+                });
+
+              case 15:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }))();
+    },
     updateLocation: function updateLocation() {
-      var _this = this;
+      var _this3 = this;
 
       this.$nextTick(function () {
-        if (!_this.value) {
+        if (!_this3.value) {
           return;
         }
 
-        if (!_this.popper) {
-          _this.popper = _this.createPopper();
-        } else {
-          _this.popper.setOptions({
-            placement: _this.placement
+        if (!_this3.popper) {
+          _this3.popper = _this3.createPopper();
+        } else if (!_this3.autoAdjustOverflow) {
+          // 通过floating-ui调整popup位置时，这里需要规避，使用floating-ui来控制popup placement
+          _this3.popper.setOptions({
+            placement: _this3.placement
           });
         }
       });
     },
     renderAction: function renderAction(action, index) {
-      var _this2 = this;
+      var _this4 = this;
 
       var h = this.$createElement;
       var icon = action.icon,
@@ -115,7 +226,7 @@ export default createComponent({
         }), className],
         "on": {
           "click": function click() {
-            return _this2.onClickAction(action, index);
+            return _this4.onClickAction(action, index);
           }
         }
       }, [icon && h(Icon, {
@@ -178,7 +289,7 @@ export default createComponent({
       "on": {
         "click": this.onClickWrapper
       }
-    }, [h(Popup, {
+    }, [h(Popup, _mergeJSXProps([{
       "ref": "popover",
       "attrs": {
         "value": this.value,
@@ -188,7 +299,7 @@ export default createComponent({
         "lockScroll": false,
         "getContainer": this.getContainer
       },
-      "class": bem([this.theme]),
+      "class": [bem([this.theme]), this.customClass],
       "on": {
         "open": this.onOpen,
         "close": this.onClose,
@@ -199,7 +310,10 @@ export default createComponent({
       "nativeOn": {
         "touchstart": this.onTouchstart
       }
-    }, [h("div", {
+    }, {
+      "attrs": this.$attrs
+    }]), [h("div", {
+      "ref": "arrow",
       "class": bem('arrow')
     }), h("div", {
       "class": bem('content'),

package/es/tabs/Title.js

@@ -17,11 +17,17 @@ export default createComponent({
     scrollable: Boolean,
     activeColor: String,
     inactiveColor: String,
+    setLine: Function,
     maxWidth: {
       type: String,
       default: '112px'
     }
   },
+  data: function data() {
+    return {
+      mutationObserver: null
+    };
+  },
   computed: {
     style: function style() {
       var style = {};
@@ -88,11 +94,30 @@ export default createComponent({
       }
 
       return Text;
+    },
+    mutation: function mutation() {
+      this.setLine();
+    }
+  },
+  mounted: function mounted() {
+    if (!this.$refs.dom) {
+      return;
     }
+
+    this.mutationObserver = new MutationObserver(this.mutation);
+    this.mutationObserver.observe(this.$refs.dom, {
+      characterData: true,
+      childList: true,
+      subtree: true
+    });
+  },
+  beforeDestroy: function beforeDestroy() {
+    this.mutationObserver && this.mutationObserver.unobserve(this.$refs.dom);
   },
   render: function render() {
     var h = arguments[0];
     return h("div", {
+      "ref": "dom",
       "attrs": {
         "role": "tab",
         "aria-selected": this.isActive

package/es/tabs/index.js

@@ -375,7 +375,8 @@ export default createComponent({
           "disabled": item.disabled,
           "scrollable": scrollable,
           "activeColor": _this8.titleActiveColor,
-          "inactiveColor": _this8.titleInactiveColor
+          "inactiveColor": _this8.titleInactiveColor,
+          "setLine": _this8.setLine
         },
         "style": item.titleStyle,
         "class": item.titleClass,
@@ -398,11 +399,11 @@ export default createComponent({
       });
     });
     var wrapStyle = {
-      borderBottom: "none"
+      borderBottom: 'none'
     };
 
     if (type !== 'card' && this.divider) {
-      wrapStyle.borderBottom = "1px solid #eee";
+      wrapStyle.borderBottom = '1px solid #eee';
     }
 
     var Wrap = h("div", {

package/lib/index.js

@@ -313,7 +313,7 @@ exports.Toast = _toast.default;
 var _uploader = _interopRequireDefault(require("./uploader"));
 
 exports.Uploader = _uploader.default;
-var version = '2.0.87';
+var version = '2.0.90';
 exports.version = version;
 
 function install(Vue) {

package/lib/popover/index.js

@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _popperjs = require("@vant/popperjs");
@@ -19,6 +25,8 @@ var _icon = _interopRequireDefault(require("../icon"));
 
 var _popup = _interopRequireDefault(require("../popup"));
 
+var _dom = require("@floating-ui/dom");
+
 // Mixins
 // Components
 var _createNamespace = (0, _utils.createNamespace)('popover'),
@@ -61,10 +69,31 @@ var _default2 = createComponent({
     closeOnClickAction: {
       type: Boolean,
       default: true
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    autoAdjustOverflow: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
-    value: 'updateLocation',
+    value: {
+      handler: function handler(val) {
+        var _this = this;
+
+        if (val) {
+          this.$nextTick(function () {
+            _this.autoUpdatePopup();
+          });
+        }
+
+        this.updateLocation();
+      },
+      immediate: true
+    },
     placement: 'updateLocation'
   },
   mounted: function mounted() {
@@ -93,25 +122,111 @@ var _default2 = createComponent({
         })]
       });
     },
+    autoUpdatePopup: function autoUpdatePopup() {
+      if (this.$refs.wrapper && this.$refs.popover && this.autoAdjustOverflow) {
+        (0, _dom.autoUpdate)(this.$refs.wrapper, this.$refs.popover.$el, this.updatePopup, {
+          elementResize: typeof ResizeObserver !== 'undefined'
+        });
+      }
+    },
+    updatePopup: function updatePopup() {
+      var _this2 = this;
+
+      return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var popoverEl, wrapperEl, _yield$computePositio, x, y, realPlacement, middlewareData, popupTop;
+
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!(_this2.$refs.wrapper && _this2.$refs.popover.$el && _this2.$refs.arrow)) {
+                  _context.next = 15;
+                  break;
+                }
+
+                popoverEl = _this2.$refs.popover.$el;
+                wrapperEl = _this2.$refs.wrapper;
+                _context.next = 5;
+                return (0, _dom.computePosition)(wrapperEl, popoverEl, {
+                  placement: _this2.placement,
+                  middleware: [(0, _dom.offset)(8), (0, _dom.shift)({
+                    padding: 4,
+                    crossAxis: false,
+                    limiter: (0, _dom.limitShift)()
+                  }), (0, _dom.flip)(), (0, _dom.hide)(), (0, _dom.arrow)({
+                    element: _this2.$refs.arrow,
+                    padding: 6
+                  })]
+                });
+
+              case 5:
+                _yield$computePositio = _context.sent;
+                x = _yield$computePositio.x;
+                y = _yield$computePositio.y;
+                realPlacement = _yield$computePositio.placement;
+                middlewareData = _yield$computePositio.middlewareData;
+                popupTop = y; // 当被包裹元素超出屏幕时，对坐标进行特殊处理，先处理顶部超出，不然再处理底部超出
+
+                if (y < 0) {
+                  popupTop = 0;
+                } else if (y > 0 && y + popoverEl.offsetHeight > document.body.clientHeight) {
+                  popupTop = document.body.clientHeight - popoverEl.offsetHeight;
+                }
+
+                _this2.$refs.popover.$el.setAttribute('data-popper-placement', realPlacement); // 这里手动指定popup placement位置，避免滚动时出现popup弹窗位置闪烁
+
+
+                _this2.popper.setOptions({
+                  placement: realPlacement
+                });
+
+                _this2.$nextTick(function () {
+                  var _middlewareData$arrow;
+
+                  (0, _extends2.default)(_this2.$refs.popover.$el.style, {
+                    left: x + "px",
+                    top: popupTop + "px"
+                  });
+
+                  var _ref = (_middlewareData$arrow = middlewareData.arrow) != null ? _middlewareData$arrow : {},
+                      arrowX = _ref.x,
+                      arrowY = _ref.y;
+
+                  (0, _extends2.default)(_this2.$refs.arrow.style, {
+                    left: arrowX != null ? arrowX + "px" : '',
+                    top: arrowY != null ? arrowY + "px" : '',
+                    margin: 0
+                  });
+                });
+
+              case 15:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }))();
+    },
     updateLocation: function updateLocation() {
-      var _this = this;
+      var _this3 = this;
 
       this.$nextTick(function () {
-        if (!_this.value) {
+        if (!_this3.value) {
           return;
         }
 
-        if (!_this.popper) {
-          _this.popper = _this.createPopper();
-        } else {
-          _this.popper.setOptions({
-            placement: _this.placement
+        if (!_this3.popper) {
+          _this3.popper = _this3.createPopper();
+        } else if (!_this3.autoAdjustOverflow) {
+          // 通过floating-ui调整popup位置时，这里需要规避，使用floating-ui来控制popup placement
+          _this3.popper.setOptions({
+            placement: _this3.placement
           });
         }
       });
     },
     renderAction: function renderAction(action, index) {
-      var _this2 = this;
+      var _this4 = this;
 
       var h = this.$createElement;
       var icon = action.icon,
@@ -128,7 +243,7 @@ var _default2 = createComponent({
         }), className],
         "on": {
           "click": function click() {
-            return _this2.onClickAction(action, index);
+            return _this4.onClickAction(action, index);
           }
         }
       }, [icon && h(_icon.default, {
@@ -191,7 +306,7 @@ var _default2 = createComponent({
       "on": {
         "click": this.onClickWrapper
       }
-    }, [h(_popup.default, {
+    }, [h(_popup.default, (0, _babelHelperVueJsxMergeProps.default)([{
       "ref": "popover",
       "attrs": {
         "value": this.value,
@@ -201,7 +316,7 @@ var _default2 = createComponent({
         "lockScroll": false,
         "getContainer": this.getContainer
       },
-      "class": bem([this.theme]),
+      "class": [bem([this.theme]), this.customClass],
       "on": {
         "open": this.onOpen,
         "close": this.onClose,
@@ -212,7 +327,10 @@ var _default2 = createComponent({
       "nativeOn": {
         "touchstart": this.onTouchstart
       }
-    }, [h("div", {
+    }, {
+      "attrs": this.$attrs
+    }]), [h("div", {
+      "ref": "arrow",
       "class": bem('arrow')
     }), h("div", {
       "class": bem('content'),

package/lib/tabs/Title.js

@@ -25,11 +25,17 @@ var _default = createComponent({
     scrollable: Boolean,
     activeColor: String,
     inactiveColor: String,
+    setLine: Function,
     maxWidth: {
       type: String,
       default: '112px'
     }
   },
+  data: function data() {
+    return {
+      mutationObserver: null
+    };
+  },
   computed: {
     style: function style() {
       var style = {};
@@ -96,11 +102,30 @@ var _default = createComponent({
       }
 
       return Text;
+    },
+    mutation: function mutation() {
+      this.setLine();
+    }
+  },
+  mounted: function mounted() {
+    if (!this.$refs.dom) {
+      return;
     }
+
+    this.mutationObserver = new MutationObserver(this.mutation);
+    this.mutationObserver.observe(this.$refs.dom, {
+      characterData: true,
+      childList: true,
+      subtree: true
+    });
+  },
+  beforeDestroy: function beforeDestroy() {
+    this.mutationObserver && this.mutationObserver.unobserve(this.$refs.dom);
   },
   render: function render() {
     var h = arguments[0];
     return h("div", {
+      "ref": "dom",
       "attrs": {
         "role": "tab",
         "aria-selected": this.isActive

package/lib/tabs/index.js

@@ -395,7 +395,8 @@ var _default2 = createComponent({
           "disabled": item.disabled,
           "scrollable": scrollable,
           "activeColor": _this8.titleActiveColor,
-          "inactiveColor": _this8.titleInactiveColor
+          "inactiveColor": _this8.titleInactiveColor,
+          "setLine": _this8.setLine
         },
         "style": item.titleStyle,
         "class": item.titleClass,
@@ -418,11 +419,11 @@ var _default2 = createComponent({
       });
     });
     var wrapStyle = {
-      borderBottom: "none"
+      borderBottom: 'none'
     };
 
     if (type !== 'card' && this.divider) {
-      wrapStyle.borderBottom = "1px solid #eee";
+      wrapStyle.borderBottom = '1px solid #eee';
     }
 
     var Wrap = h("div", {