vant 3.3.6 → 3.4.2

package/es/tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
-import { PropType, InjectionKey, ExtractPropTypes } from 'vue';
+import { type PropType, type InjectionKey, type ExtractPropTypes } from 'vue';
 import { Interceptor } from '../utils';
 import type { TabsProvide, TabsType } from './types';
 declare const tabsProps: {
@@ -9,6 +9,7 @@ declare const tabsProps: {
     color: StringConstructor;
     border: BooleanConstructor;
     sticky: BooleanConstructor;
+    shrink: BooleanConstructor;
     active: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -53,6 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     color: StringConstructor;
     border: BooleanConstructor;
     sticky: BooleanConstructor;
+    shrink: BooleanConstructor;
     active: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -86,48 +88,49 @@ declare const _default: import("vue").DefineComponent<{
     };
     titleActiveColor: StringConstructor;
     titleInactiveColor: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active")[], "scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
-    type?: unknown;
-    color?: unknown;
-    border?: unknown;
-    sticky?: unknown;
-    active?: unknown;
-    duration?: unknown;
-    animated?: unknown;
-    ellipsis?: unknown;
-    swipeable?: unknown;
-    scrollspy?: unknown;
-    offsetTop?: unknown;
-    background?: unknown;
-    lazyRender?: unknown;
-    lineWidth?: unknown;
-    lineHeight?: unknown;
-    beforeChange?: unknown;
-    swipeThreshold?: unknown;
-    titleActiveColor?: unknown;
-    titleInactiveColor?: unknown;
-} & {
-    type: TabsType;
-    border: boolean;
-    ellipsis: boolean;
-    sticky: boolean;
-    active: string | number;
-    duration: string | number;
-    lazyRender: boolean;
-    offsetTop: string | number;
-    animated: boolean;
-    swipeable: boolean;
-    scrollspy: boolean;
-    swipeThreshold: string | number;
-} & {
-    color?: string | undefined;
-    background?: string | undefined;
-    lineWidth?: string | number | undefined;
-    lineHeight?: string | number | undefined;
-    beforeChange?: Interceptor | undefined;
-    titleActiveColor?: string | undefined;
-    titleInactiveColor?: string | undefined;
-}> & {
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active")[], "scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    type: {
+        type: PropType<TabsType>;
+        default: TabsType;
+    };
+    color: StringConstructor;
+    border: BooleanConstructor;
+    sticky: BooleanConstructor;
+    shrink: BooleanConstructor;
+    active: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    duration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    animated: BooleanConstructor;
+    ellipsis: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeable: BooleanConstructor;
+    scrollspy: BooleanConstructor;
+    offsetTop: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    background: StringConstructor;
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lineWidth: (NumberConstructor | StringConstructor)[];
+    lineHeight: (NumberConstructor | StringConstructor)[];
+    beforeChange: PropType<Interceptor>;
+    swipeThreshold: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    titleActiveColor: StringConstructor;
+    titleInactiveColor: StringConstructor;
+}>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onClick?: ((...args: any[]) => any) | undefined;
     onScroll?: ((...args: any[]) => any) | undefined;
@@ -144,6 +147,7 @@ declare const _default: import("vue").DefineComponent<{
     duration: string | number;
     lazyRender: boolean;
     offsetTop: string | number;
+    shrink: boolean;
     animated: boolean;
     swipeable: boolean;
     scrollspy: boolean;

package/es/tabs/Tabs.js

@@ -1,26 +1,23 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { ref, watch, computed, reactive, nextTick, onActivated, defineComponent, getCurrentInstance } from 'vue'; // Utils
-
-import { pick, isDef, addUnit, isHidden, unitToPx, truthProp, numericProp, windowWidth, getElementTop, makeStringProp, callInterceptor, createNamespace, makeNumericProp, setRootScrollTop, BORDER_TOP_BOTTOM } from '../utils';
-import { scrollLeftTo, scrollTopTo } from './utils'; // Composables
-
-import { useRect, useChildren, useScrollParent, useEventListener, onMountedOrActivated } from '@vant/use';
-import { useId } from '../composables/use-id';
-import { route } from '../composables/use-route';
-import { useRefs } from '../composables/use-refs';
-import { useExpose } from '../composables/use-expose';
-import { onPopupReopen } from '../composables/on-popup-reopen'; // Components
-
-import { Sticky } from '../sticky';
-import TabsTitle from './TabsTitle';
-import TabsContent from './TabsContent'; // Types
-
-var [name, bem] = createNamespace('tabs');
-var tabsProps = {
-  type: makeStringProp('line'),
+import { ref, watch, computed, reactive, nextTick, onActivated, defineComponent, getCurrentInstance } from "vue";
+import { pick, isDef, addUnit, isHidden, unitToPx, truthProp, numericProp, windowWidth, getElementTop, makeStringProp, callInterceptor, createNamespace, makeNumericProp, setRootScrollTop, BORDER_TOP_BOTTOM } from "../utils";
+import { scrollLeftTo, scrollTopTo } from "./utils";
+import { useRect, useChildren, useScrollParent, useEventListener, onMountedOrActivated } from "@vant/use";
+import { useId } from "../composables/use-id";
+import { route } from "../composables/use-route";
+import { useRefs } from "../composables/use-refs";
+import { useExpose } from "../composables/use-expose";
+import { onPopupReopen } from "../composables/on-popup-reopen";
+import { Sticky } from "../sticky";
+import TabsTitle from "./TabsTitle";
+import TabsContent from "./TabsContent";
+const [name, bem] = createNamespace("tabs");
+const tabsProps = {
+  type: makeStringProp("line"),
   color: String,
   border: Boolean,
   sticky: Boolean,
+  shrink: Boolean,
   active: makeNumericProp(0),
   duration: makeNumericProp(0.3),
   animated: Boolean,
@@ -37,300 +34,249 @@ var tabsProps = {
   titleActiveColor: String,
   titleInactiveColor: String
 };
-export var TABS_KEY = Symbol(name);
-export default defineComponent({
+const TABS_KEY = Symbol(name);
+var stdin_default = 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 = 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 = 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 = ref();
-    var navRef = ref();
-    var wrapRef = ref();
-    var id = useId();
-    var scroller = useScrollParent(root);
-    var [titleRefs, setTitleRefs] = useRefs();
-    var {
+    let tabHeight;
+    let lockScroll;
+    let stickyFixed;
+    const root = ref();
+    const navRef = ref();
+    const wrapRef = ref();
+    const id = useId();
+    const scroller = useScrollParent(root);
+    const [titleRefs, setTitleRefs] = useRefs();
+    const {
       children,
       linkChildren
     } = useChildren(TABS_KEY);
-    var state = reactive({
+    const state = reactive({
       inited: false,
-      position: '',
+      position: "",
       lineStyle: {},
       currentIndex: -1
-    }); // whether the nav is scrollable
-
-    var scrollable = computed(() => children.length > props.swipeThreshold || !props.ellipsis);
-    var navStyle = computed(() => ({
+    });
+    const scrollable = computed(() => children.length > props.swipeThreshold || !props.ellipsis || props.shrink);
+    const navStyle = 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 = computed(() => {
-      var activeTab = children[state.currentIndex];
-
+    const currentName = computed(() => {
+      const activeTab = children[state.currentIndex];
       if (activeTab) {
         return getTabName(activeTab, state.currentIndex);
       }
     });
-    var offsetTopPx = computed(() => unitToPx(props.offsetTop));
-    var scrollOffset = computed(() => {
+    const offsetTopPx = computed(() => unitToPx(props.offsetTop));
+    const scrollOffset = 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;
+      const title = titles[state.currentIndex].$el;
+      const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
       scrollLeftTo(nav, to, immediate ? 0 : +props.duration);
-    }; // update nav bar style
-
-
-    var setLine = () => {
-      var shouldAnimate = state.inited;
+    };
+    const setLine = () => {
+      const shouldAnimate = state.inited;
       nextTick(() => {
-        var titles = titleRefs.value;
-
-        if (!titles || !titles[state.currentIndex] || props.type !== 'line' || isHidden(root.value)) {
+        const titles = titleRefs.value;
+        if (!titles || !titles[state.currentIndex] || props.type !== "line" || 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 = {
+        const left = title.offsetLeft + title.offsetWidth / 2;
+        const lineStyle = {
           width: 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 (isDef(lineHeight)) {
-          var height = addUnit(lineHeight);
+          const height = 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);
-
+    const setCurrentIndex = (currentIndex) => {
+      const newIndex = findAvailableTab(currentIndex);
       if (!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 = getElementTop(target, scroller.value) - scrollOffset.value;
+          const to = getElementTop(target, scroller.value) - scrollOffset.value;
           lockScroll = true;
           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 {
         callInterceptor(props.beforeChange, {
-          args: [name],
+          args: [name2],
           done: () => {
             setCurrentIndex(index);
             scrollToCurrentContent();
           }
-        }); // @deprecated
-        // should be removed in next major version
-
-        emit('click', name, title);
+        });
+        emit("click", name2, title);
         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 => {
+    const scrollTo = (name2) => {
       nextTick(() => {
-        setCurrentIndexByName(name);
+        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
         } = 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) => _createVNode(TabsTitle, _mergeProps({
-      "id": id + "-" + index,
+    const renderNav = () => children.map((item, index) => _createVNode(TabsTitle, _mergeProps({
+      "id": `${id}-${index}`,
       "ref": setTitleRefs(index),
       "type": props.type,
       "color": props.color,
       "style": item.titleStyle,
       "class": item.titleClass,
+      "shrink": props.shrink,
       "isActive": index === state.currentIndex,
       "controls": item.id,
       "scrollable": scrollable.value,
-      "renderTitle": item.$slots.title,
       "activeColor": props.titleActiveColor,
       "inactiveColor": props.titleInactiveColor,
-      "onClick": event => onClickTab(item, index, event)
-    }, pick(item, ['dot', 'badge', 'title', 'disabled', 'showZeroBadge'])), null));
-
-    var renderHeader = () => {
-      var _slots$navLeft, _slots$navRight;
-
-      var {
+      "onClick": (event) => onClickTab(item, index, event)
+    }, pick(item, ["dot", "badge", "title", "disabled", "showZeroBadge"])), {
+      title: item.$slots.title
+    }));
+    const renderLine = () => {
+      if (props.type === "line" && children.length) {
+        return _createVNode("div", {
+          "class": bem("line"),
+          "style": state.lineStyle
+        }, null);
+      }
+    };
+    const renderHeader = () => {
+      var _a2, _b2;
+      const {
         type,
         border
       } = props;
       return _createVNode("div", {
         "ref": wrapRef,
-        "class": [bem('wrap', {
-          scrollable: scrollable.value
-        }), {
-          [BORDER_TOP_BOTTOM]: type === 'line' && border
+        "class": [bem("wrap"), {
+          [BORDER_TOP_BOTTOM]: type === "line" && border
         }]
       }, [_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(), type === 'line' && _createVNode("div", {
-        "class": bem('line'),
-        "style": state.lineStyle
-      }, null), (_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)])]);
     };
-
     watch([() => props.color, windowWidth], setLine);
-    watch(() => props.active, value => {
+    watch(() => props.active, (value) => {
       if (value !== currentName.value) {
         setCurrentIndexByName(value);
       }
@@ -346,28 +292,22 @@ export default defineComponent({
     });
     watch(() => state.currentIndex, () => {
       scrollIntoView();
-      setLine(); // scroll to correct position
-
+      setLine();
       if (stickyFixed && !props.scrollspy) {
         setRootScrollTop(Math.ceil(getElementTop(root.value) - offsetTopPx.value));
       }
     });
-
-    var init = () => {
+    const init = () => {
       setCurrentIndexByName(props.active);
       nextTick(() => {
         state.inited = true;
-
         if (wrapRef.value) {
           tabHeight = useRect(wrapRef.value).height;
         }
-
         scrollIntoView(true);
       });
     };
-
-    var onRendered = (name, title) => emit('rendered', name, title);
-
+    const onRendered = (name2, title) => emit("rendered", name2, title);
     useExpose({
       resize: setLine,
       scrollTo
@@ -375,7 +315,7 @@ export default defineComponent({
     onActivated(setLine);
     onPopupReopen(setLine);
     onMountedOrActivated(init);
-    useEventListener('scroll', onScroll, {
+    useEventListener("scroll", onScroll, {
       target: scroller
     });
     linkChildren({
@@ -387,8 +327,7 @@ export default defineComponent({
       scrollIntoView
     });
     return () => {
-      var _slots$navBottom, _slots$navBottom2;
-
+      var _a2;
       return _createVNode("div", {
         "ref": root,
         "class": bem([props.type])
@@ -397,8 +336,11 @@ export default defineComponent({
         "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)], _createVNode(TabsContent, {
+        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)], _createVNode(TabsContent, {
         "count": children.length,
         "inited": state.inited,
         "animated": props.animated,
@@ -408,9 +350,15 @@ export default 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)];
+        }
       })]);
     };
   }
-
-});
+});
+export {
+  TABS_KEY,
+  stdin_default as default
+};