vant 3.4.0 → 3.4.1

package/lib/tabs/Tabs.js

@@ -1,312 +1,262 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = exports.TABS_KEY = void 0;
-
-var _vue = require("vue");
-
-var _utils = require("../utils");
-
-var _utils2 = require("./utils");
-
-var _use = require("@vant/use");
-
-var _useId = require("../composables/use-id");
-
-var _useRoute = require("../composables/use-route");
-
-var _useRefs = require("../composables/use-refs");
-
-var _useExpose = require("../composables/use-expose");
-
-var _onPopupReopen = require("../composables/on-popup-reopen");
-
-var _sticky = require("../sticky");
-
-var _TabsTitle = _interopRequireDefault(require("./TabsTitle"));
-
-var _TabsContent = _interopRequireDefault(require("./TabsContent"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// Utils
-// Composables
-// Components
-var [name, bem] = (0, _utils.createNamespace)('tabs');
-var tabsProps = {
-  type: (0, _utils.makeStringProp)('line'),
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  TABS_KEY: () => TABS_KEY,
+  default: () => stdin_default
+});
+var import_vue = __toModule(require("vue"));
+var import_vue2 = __toModule(require("vue"));
+var import_utils = __toModule(require("../utils"));
+var import_utils2 = __toModule(require("./utils"));
+var import_use = __toModule(require("@vant/use"));
+var import_use_id = __toModule(require("../composables/use-id"));
+var import_use_route = __toModule(require("../composables/use-route"));
+var import_use_refs = __toModule(require("../composables/use-refs"));
+var import_use_expose = __toModule(require("../composables/use-expose"));
+var import_on_popup_reopen = __toModule(require("../composables/on-popup-reopen"));
+var import_sticky = __toModule(require("../sticky"));
+var import_TabsTitle = __toModule(require("./TabsTitle"));
+var import_TabsContent = __toModule(require("./TabsContent"));
+const [name, bem] = (0, import_utils.createNamespace)("tabs");
+const tabsProps = {
+  type: (0, import_utils.makeStringProp)("line"),
   color: String,
   border: Boolean,
   sticky: Boolean,
   shrink: Boolean,
-  active: (0, _utils.makeNumericProp)(0),
-  duration: (0, _utils.makeNumericProp)(0.3),
+  active: (0, import_utils.makeNumericProp)(0),
+  duration: (0, import_utils.makeNumericProp)(0.3),
   animated: Boolean,
-  ellipsis: _utils.truthProp,
+  ellipsis: import_utils.truthProp,
   swipeable: Boolean,
   scrollspy: Boolean,
-  offsetTop: (0, _utils.makeNumericProp)(0),
+  offsetTop: (0, import_utils.makeNumericProp)(0),
   background: String,
-  lazyRender: _utils.truthProp,
-  lineWidth: _utils.numericProp,
-  lineHeight: _utils.numericProp,
+  lazyRender: import_utils.truthProp,
+  lineWidth: import_utils.numericProp,
+  lineHeight: import_utils.numericProp,
   beforeChange: Function,
-  swipeThreshold: (0, _utils.makeNumericProp)(5),
+  swipeThreshold: (0, import_utils.makeNumericProp)(5),
   titleActiveColor: String,
   titleInactiveColor: String
 };
-var TABS_KEY = Symbol(name);
-exports.TABS_KEY = TABS_KEY;
-
-var _default = (0, _vue.defineComponent)({
+const TABS_KEY = Symbol(name);
+var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: tabsProps,
-  emits: ['click', 'change', 'scroll', 'disabled', 'rendered', 'click-tab', 'update:active'],
-
-  setup(props, _ref) {
-    var {
-      emit,
-      slots
-    } = _ref;
-
-    if (process.env.NODE_ENV !== 'production') {
-      var _getCurrentInstance, _getCurrentInstance$v;
-
-      var _props = (_getCurrentInstance = (0, _vue.getCurrentInstance)()) == null ? void 0 : (_getCurrentInstance$v = _getCurrentInstance.vnode) == null ? void 0 : _getCurrentInstance$v.props;
-
-      if (_props && 'onClick' in _props) {
+  emits: ["click", "change", "scroll", "disabled", "rendered", "click-tab", "update:active"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    var _a, _b;
+    if (process.env.NODE_ENV !== "production") {
+      const props2 = (_b = (_a = (0, import_vue2.getCurrentInstance)()) == null ? void 0 : _a.vnode) == null ? void 0 : _b.props;
+      if (props2 && "onClick" in props2) {
         console.warn('[Vant] Tabs: "click" event is deprecated, using "click-tab" instead.');
       }
-
-      if (_props && 'onDisabled' in _props) {
+      if (props2 && "onDisabled" in props2) {
         console.warn('[Vant] Tabs: "disabled" event is deprecated, using "click-tab" instead.');
       }
     }
-
-    var tabHeight;
-    var lockScroll;
-    var stickyFixed;
-    var root = (0, _vue.ref)();
-    var navRef = (0, _vue.ref)();
-    var wrapRef = (0, _vue.ref)();
-    var id = (0, _useId.useId)();
-    var scroller = (0, _use.useScrollParent)(root);
-    var [titleRefs, setTitleRefs] = (0, _useRefs.useRefs)();
-    var {
+    let tabHeight;
+    let lockScroll;
+    let stickyFixed;
+    const root = (0, import_vue2.ref)();
+    const navRef = (0, import_vue2.ref)();
+    const wrapRef = (0, import_vue2.ref)();
+    const id = (0, import_use_id.useId)();
+    const scroller = (0, import_use.useScrollParent)(root);
+    const [titleRefs, setTitleRefs] = (0, import_use_refs.useRefs)();
+    const {
       children,
       linkChildren
-    } = (0, _use.useChildren)(TABS_KEY);
-    var state = (0, _vue.reactive)({
+    } = (0, import_use.useChildren)(TABS_KEY);
+    const state = (0, import_vue2.reactive)({
       inited: false,
-      position: '',
+      position: "",
       lineStyle: {},
       currentIndex: -1
-    }); // whether the nav is scrollable
-
-    var scrollable = (0, _vue.computed)(() => children.length > props.swipeThreshold || !props.ellipsis || props.shrink);
-    var navStyle = (0, _vue.computed)(() => ({
+    });
+    const scrollable = (0, import_vue2.computed)(() => children.length > props.swipeThreshold || !props.ellipsis || props.shrink);
+    const navStyle = (0, import_vue2.computed)(() => ({
       borderColor: props.color,
       background: props.background
     }));
-
-    var getTabName = (tab, index) => {
-      var _tab$name;
-
-      return (_tab$name = tab.name) != null ? _tab$name : index;
+    const getTabName = (tab, index) => {
+      var _a2;
+      return (_a2 = tab.name) != null ? _a2 : index;
     };
-
-    var currentName = (0, _vue.computed)(() => {
-      var activeTab = children[state.currentIndex];
-
+    const currentName = (0, import_vue2.computed)(() => {
+      const activeTab = children[state.currentIndex];
       if (activeTab) {
         return getTabName(activeTab, state.currentIndex);
       }
     });
-    var offsetTopPx = (0, _vue.computed)(() => (0, _utils.unitToPx)(props.offsetTop));
-    var scrollOffset = (0, _vue.computed)(() => {
+    const offsetTopPx = (0, import_vue2.computed)(() => (0, import_utils.unitToPx)(props.offsetTop));
+    const scrollOffset = (0, import_vue2.computed)(() => {
       if (props.sticky) {
         return offsetTopPx.value + tabHeight;
       }
-
       return 0;
-    }); // scroll active tab into view
-
-    var scrollIntoView = immediate => {
-      var nav = navRef.value;
-      var titles = titleRefs.value;
-
+    });
+    const scrollIntoView = (immediate) => {
+      const nav = navRef.value;
+      const titles = titleRefs.value;
       if (!scrollable.value || !nav || !titles || !titles[state.currentIndex]) {
         return;
       }
-
-      var title = titles[state.currentIndex].$el;
-      var to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
-      (0, _utils2.scrollLeftTo)(nav, to, immediate ? 0 : +props.duration);
-    }; // update nav bar style
-
-
-    var setLine = () => {
-      var shouldAnimate = state.inited;
-      (0, _vue.nextTick)(() => {
-        var titles = titleRefs.value;
-
-        if (!titles || !titles[state.currentIndex] || props.type !== 'line' || (0, _utils.isHidden)(root.value)) {
+      const title = titles[state.currentIndex].$el;
+      const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
+      (0, import_utils2.scrollLeftTo)(nav, to, immediate ? 0 : +props.duration);
+    };
+    const setLine = () => {
+      const shouldAnimate = state.inited;
+      (0, import_vue2.nextTick)(() => {
+        const titles = titleRefs.value;
+        if (!titles || !titles[state.currentIndex] || props.type !== "line" || (0, import_utils.isHidden)(root.value)) {
           return;
         }
-
-        var title = titles[state.currentIndex].$el;
-        var {
+        const title = titles[state.currentIndex].$el;
+        const {
           lineWidth,
           lineHeight
         } = props;
-        var left = title.offsetLeft + title.offsetWidth / 2;
-        var lineStyle = {
-          width: (0, _utils.addUnit)(lineWidth),
+        const left = title.offsetLeft + title.offsetWidth / 2;
+        const lineStyle = {
+          width: (0, import_utils.addUnit)(lineWidth),
           backgroundColor: props.color,
-          transform: "translateX(" + left + "px) translateX(-50%)"
+          transform: `translateX(${left}px) translateX(-50%)`
         };
-
         if (shouldAnimate) {
-          lineStyle.transitionDuration = props.duration + "s";
+          lineStyle.transitionDuration = `${props.duration}s`;
         }
-
-        if ((0, _utils.isDef)(lineHeight)) {
-          var height = (0, _utils.addUnit)(lineHeight);
+        if ((0, import_utils.isDef)(lineHeight)) {
+          const height = (0, import_utils.addUnit)(lineHeight);
           lineStyle.height = height;
           lineStyle.borderRadius = height;
         }
-
         state.lineStyle = lineStyle;
       });
     };
-
-    var findAvailableTab = index => {
-      var diff = index < state.currentIndex ? -1 : 1;
-
+    const findAvailableTab = (index) => {
+      const diff = index < state.currentIndex ? -1 : 1;
       while (index >= 0 && index < children.length) {
         if (!children[index].disabled) {
           return index;
         }
-
         index += diff;
       }
     };
-
-    var setCurrentIndex = currentIndex => {
-      var newIndex = findAvailableTab(currentIndex);
-
-      if (!(0, _utils.isDef)(newIndex)) {
+    const setCurrentIndex = (currentIndex) => {
+      const newIndex = findAvailableTab(currentIndex);
+      if (!(0, import_utils.isDef)(newIndex)) {
         return;
       }
-
-      var newTab = children[newIndex];
-      var newName = getTabName(newTab, newIndex);
-      var shouldEmitChange = state.currentIndex !== null;
+      const newTab = children[newIndex];
+      const newName = getTabName(newTab, newIndex);
+      const shouldEmitChange = state.currentIndex !== null;
       state.currentIndex = newIndex;
-
       if (newName !== props.active) {
-        emit('update:active', newName);
-
+        emit("update:active", newName);
         if (shouldEmitChange) {
-          emit('change', newName, newTab.title);
+          emit("change", newName, newTab.title);
         }
       }
-    }; // correct the index of active tab
-
-
-    var setCurrentIndexByName = name => {
-      var matched = children.find((tab, index) => getTabName(tab, index) === name);
-      var index = matched ? children.indexOf(matched) : 0;
+    };
+    const setCurrentIndexByName = (name2) => {
+      const matched = children.find((tab, index2) => getTabName(tab, index2) === name2);
+      const index = matched ? children.indexOf(matched) : 0;
       setCurrentIndex(index);
     };
-
-    var scrollToCurrentContent = function (immediate) {
-      if (immediate === void 0) {
-        immediate = false;
-      }
-
+    const scrollToCurrentContent = (immediate = false) => {
       if (props.scrollspy) {
-        var target = children[state.currentIndex].$el;
-
+        const target = children[state.currentIndex].$el;
         if (target && scroller.value) {
-          var to = (0, _utils.getElementTop)(target, scroller.value) - scrollOffset.value;
+          const to = (0, import_utils.getElementTop)(target, scroller.value) - scrollOffset.value;
           lockScroll = true;
-          (0, _utils2.scrollTopTo)(scroller.value, to, immediate ? 0 : +props.duration, () => {
+          (0, import_utils2.scrollTopTo)(scroller.value, to, immediate ? 0 : +props.duration, () => {
             lockScroll = false;
           });
         }
       }
-    }; // emit event when clicked
-
-
-    var onClickTab = (item, index, event) => {
-      var {
+    };
+    const onClickTab = (item, index, event) => {
+      const {
         title,
         disabled
       } = children[index];
-      var name = getTabName(children[index], index);
-
+      const name2 = getTabName(children[index], index);
       if (disabled) {
-        // @deprecated
-        // should be removed in next major version
-        emit('disabled', name, title);
+        emit("disabled", name2, title);
       } else {
-        (0, _utils.callInterceptor)(props.beforeChange, {
-          args: [name],
+        (0, import_utils.callInterceptor)(props.beforeChange, {
+          args: [name2],
           done: () => {
             setCurrentIndex(index);
             scrollToCurrentContent();
           }
-        }); // @deprecated
-        // should be removed in next major version
-
-        emit('click', name, title);
-        (0, _useRoute.route)(item);
+        });
+        emit("click", name2, title);
+        (0, import_use_route.route)(item);
       }
-
-      emit('click-tab', {
-        name,
+      emit("click-tab", {
+        name: name2,
         title,
         event,
         disabled
       });
     };
-
-    var onStickyScroll = params => {
+    const onStickyScroll = (params) => {
       stickyFixed = params.isFixed;
-      emit('scroll', params);
+      emit("scroll", params);
     };
-
-    var scrollTo = name => {
-      (0, _vue.nextTick)(() => {
-        setCurrentIndexByName(name);
+    const scrollTo = (name2) => {
+      (0, import_vue2.nextTick)(() => {
+        setCurrentIndexByName(name2);
         scrollToCurrentContent(true);
       });
     };
-
-    var getCurrentIndexOnScroll = () => {
-      for (var index = 0; index < children.length; index++) {
-        var {
+    const getCurrentIndexOnScroll = () => {
+      for (let index = 0; index < children.length; index++) {
+        const {
           top
-        } = (0, _use.useRect)(children[index].$el);
-
+        } = (0, import_use.useRect)(children[index].$el);
         if (top > scrollOffset.value) {
           return index === 0 ? 0 : index - 1;
         }
       }
-
       return children.length - 1;
     };
-
-    var onScroll = () => {
+    const onScroll = () => {
       if (props.scrollspy && !lockScroll) {
-        var index = getCurrentIndexOnScroll();
+        const index = getCurrentIndexOnScroll();
         setCurrentIndex(index);
       }
     };
-
-    var renderNav = () => children.map((item, index) => (0, _vue.createVNode)(_TabsTitle.default, (0, _vue.mergeProps)({
-      "id": id + "-" + index,
+    const renderNav = () => children.map((item, index) => (0, import_vue.createVNode)(import_TabsTitle.default, (0, import_vue.mergeProps)({
+      "id": `${id}-${index}`,
       "ref": setTitleRefs(index),
       "type": props.type,
       "color": props.color,
@@ -318,91 +268,81 @@ var _default = (0, _vue.defineComponent)({
       "scrollable": scrollable.value,
       "activeColor": props.titleActiveColor,
       "inactiveColor": props.titleInactiveColor,
-      "onClick": event => onClickTab(item, index, event)
-    }, (0, _utils.pick)(item, ['dot', 'badge', 'title', 'disabled', 'showZeroBadge'])), {
+      "onClick": (event) => onClickTab(item, index, event)
+    }, (0, import_utils.pick)(item, ["dot", "badge", "title", "disabled", "showZeroBadge"])), {
       title: item.$slots.title
     }));
-
-    var renderLine = () => {
-      if (props.type === 'line' && children.length) {
-        return (0, _vue.createVNode)("div", {
-          "class": bem('line'),
+    const renderLine = () => {
+      if (props.type === "line" && children.length) {
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("line"),
           "style": state.lineStyle
         }, null);
       }
     };
-
-    var renderHeader = () => {
-      var _slots$navLeft, _slots$navRight;
-
-      var {
+    const renderHeader = () => {
+      var _a2, _b2;
+      const {
         type,
         border
       } = props;
-      return (0, _vue.createVNode)("div", {
+      return (0, import_vue.createVNode)("div", {
         "ref": wrapRef,
-        "class": [bem('wrap'), {
-          [_utils.BORDER_TOP_BOTTOM]: type === 'line' && border
+        "class": [bem("wrap"), {
+          [import_utils.BORDER_TOP_BOTTOM]: type === "line" && border
         }]
-      }, [(0, _vue.createVNode)("div", {
+      }, [(0, import_vue.createVNode)("div", {
         "ref": navRef,
         "role": "tablist",
-        "class": bem('nav', [type, {
+        "class": bem("nav", [type, {
           shrink: props.shrink,
           complete: scrollable.value
         }]),
         "style": navStyle.value,
         "aria-orientation": "horizontal"
-      }, [(_slots$navLeft = slots['nav-left']) == null ? void 0 : _slots$navLeft.call(slots), renderNav(), renderLine(), (_slots$navRight = slots['nav-right']) == null ? void 0 : _slots$navRight.call(slots)])]);
+      }, [(_a2 = slots["nav-left"]) == null ? void 0 : _a2.call(slots), renderNav(), renderLine(), (_b2 = slots["nav-right"]) == null ? void 0 : _b2.call(slots)])]);
     };
-
-    (0, _vue.watch)([() => props.color, _utils.windowWidth], setLine);
-    (0, _vue.watch)(() => props.active, value => {
+    (0, import_vue2.watch)([() => props.color, import_utils.windowWidth], setLine);
+    (0, import_vue2.watch)(() => props.active, (value) => {
       if (value !== currentName.value) {
         setCurrentIndexByName(value);
       }
     });
-    (0, _vue.watch)(() => children.length, () => {
+    (0, import_vue2.watch)(() => children.length, () => {
       if (state.inited) {
         setCurrentIndexByName(props.active);
         setLine();
-        (0, _vue.nextTick)(() => {
+        (0, import_vue2.nextTick)(() => {
           scrollIntoView(true);
         });
       }
     });
-    (0, _vue.watch)(() => state.currentIndex, () => {
+    (0, import_vue2.watch)(() => state.currentIndex, () => {
       scrollIntoView();
-      setLine(); // scroll to correct position
-
+      setLine();
       if (stickyFixed && !props.scrollspy) {
-        (0, _utils.setRootScrollTop)(Math.ceil((0, _utils.getElementTop)(root.value) - offsetTopPx.value));
+        (0, import_utils.setRootScrollTop)(Math.ceil((0, import_utils.getElementTop)(root.value) - offsetTopPx.value));
       }
     });
-
-    var init = () => {
+    const init = () => {
       setCurrentIndexByName(props.active);
-      (0, _vue.nextTick)(() => {
+      (0, import_vue2.nextTick)(() => {
         state.inited = true;
-
         if (wrapRef.value) {
-          tabHeight = (0, _use.useRect)(wrapRef.value).height;
+          tabHeight = (0, import_use.useRect)(wrapRef.value).height;
         }
-
         scrollIntoView(true);
       });
     };
-
-    var onRendered = (name, title) => emit('rendered', name, title);
-
-    (0, _useExpose.useExpose)({
+    const onRendered = (name2, title) => emit("rendered", name2, title);
+    (0, import_use_expose.useExpose)({
       resize: setLine,
       scrollTo
     });
-    (0, _vue.onActivated)(setLine);
-    (0, _onPopupReopen.onPopupReopen)(setLine);
-    (0, _use.onMountedOrActivated)(init);
-    (0, _use.useEventListener)('scroll', onScroll, {
+    (0, import_vue2.onActivated)(setLine);
+    (0, import_on_popup_reopen.onPopupReopen)(setLine);
+    (0, import_use.onMountedOrActivated)(init);
+    (0, import_use.useEventListener)("scroll", onScroll, {
       target: scroller
     });
     linkChildren({
@@ -414,18 +354,20 @@ var _default = (0, _vue.defineComponent)({
       scrollIntoView
     });
     return () => {
-      var _slots$navBottom, _slots$navBottom2;
-
-      return (0, _vue.createVNode)("div", {
+      var _a2;
+      return (0, import_vue.createVNode)("div", {
         "ref": root,
         "class": bem([props.type])
-      }, [props.sticky ? (0, _vue.createVNode)(_sticky.Sticky, {
+      }, [props.sticky ? (0, import_vue.createVNode)(import_sticky.Sticky, {
         "container": root.value,
         "offsetTop": offsetTopPx.value,
         "onScroll": onStickyScroll
       }, {
-        default: () => [renderHeader(), (_slots$navBottom = slots['nav-bottom']) == null ? void 0 : _slots$navBottom.call(slots)]
-      }) : [renderHeader(), (_slots$navBottom2 = slots['nav-bottom']) == null ? void 0 : _slots$navBottom2.call(slots)], (0, _vue.createVNode)(_TabsContent.default, {
+        default: () => {
+          var _a3;
+          return [renderHeader(), (_a3 = slots["nav-bottom"]) == null ? void 0 : _a3.call(slots)];
+        }
+      }) : [renderHeader(), (_a2 = slots["nav-bottom"]) == null ? void 0 : _a2.call(slots)], (0, import_vue.createVNode)(import_TabsContent.default, {
         "count": children.length,
         "inited": state.inited,
         "animated": props.animated,
@@ -435,11 +377,11 @@ var _default = (0, _vue.defineComponent)({
         "currentIndex": state.currentIndex,
         "onChange": setCurrentIndex
       }, {
-        default: () => [slots.default == null ? void 0 : slots.default()]
+        default: () => {
+          var _a3;
+          return [(_a3 = slots.default) == null ? void 0 : _a3.call(slots)];
+        }
       })]);
     };
   }
-
 });
-
-exports.default = _default;