vant 4.1.2 → 4.2.1

package/es/index.d.ts

@@ -93,10 +93,11 @@ export * from "./time-picker";
 export * from "./toast";
 export * from "./tree-select";
 export * from "./uploader";
+export * from "./watermark";
 declare namespace _default {
     export { install };
     export { version };
 }
 export default _default;
 export function install(app: any): void;
-export const version: "4.1.2";
+export const version: "4.2.1";

package/es/index.mjs

@@ -92,7 +92,8 @@ import { TimePicker } from "./time-picker/index.mjs";
 import { Toast } from "./toast/index.mjs";
 import { TreeSelect } from "./tree-select/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
-const version = "4.1.2";
+import { Watermark } from "./watermark/index.mjs";
+const version = "4.2.1";
 function install(app) {
   const components = [
     ActionBar,
@@ -188,7 +189,8 @@ function install(app) {
     TimePicker,
     Toast,
     TreeSelect,
-    Uploader
+    Uploader,
+    Watermark
   ];
   components.forEach((item) => {
     if (item.install) {
@@ -293,6 +295,7 @@ export * from "./time-picker/index.mjs";
 export * from "./toast/index.mjs";
 export * from "./tree-select/index.mjs";
 export * from "./uploader/index.mjs";
+export * from "./watermark/index.mjs";
 var stdin_default = {
   install,
   version

package/es/pagination/Pagination.d.ts

@@ -28,6 +28,14 @@ export declare const paginationProps: {
         default: number;
     };
     forceEllipses: BooleanConstructor;
+    showPrevButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showNextButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
 };
 export type PaginationProps = ExtractPropTypes<typeof paginationProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -58,6 +66,14 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     forceEllipses: BooleanConstructor;
+    showPrevButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showNextButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     mode: {
         type: import("vue").PropType<PaginationMode>;
@@ -86,6 +102,14 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     forceEllipses: BooleanConstructor;
+    showPrevButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showNextButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -97,5 +121,7 @@ declare const _default: import("vue").DefineComponent<{
     showPageSize: string | number;
     itemsPerPage: string | number;
     forceEllipses: boolean;
+    showPrevButton: boolean;
+    showNextButton: boolean;
 }>;
 export default _default;

package/es/pagination/Pagination.mjs

@@ -1,6 +1,6 @@
 import { createVNode as _createVNode } from "vue";
 import { computed, watchEffect, defineComponent } from "vue";
-import { clamp, makeStringProp, makeNumberProp, makeNumericProp, createNamespace, BORDER_SURROUND } from "../utils/index.mjs";
+import { clamp, truthProp, makeStringProp, makeNumberProp, makeNumericProp, createNamespace, BORDER_SURROUND } from "../utils/index.mjs";
 const [name, bem, t] = createNamespace("pagination");
 const makePage = (number, text, active) => ({
   number,
@@ -16,7 +16,9 @@ const paginationProps = {
   totalItems: makeNumericProp(0),
   showPageSize: makeNumericProp(5),
   itemsPerPage: makeNumericProp(10),
-  forceEllipses: Boolean
+  forceEllipses: Boolean,
+  showPrevButton: truthProp,
+  showNextButton: truthProp
 };
 var stdin_default = defineComponent({
   name,
@@ -86,8 +88,12 @@ var stdin_default = defineComponent({
     const renderPrevButton = () => {
       const {
         mode,
-        modelValue
+        modelValue,
+        showPrevButton
       } = props;
+      if (!showPrevButton) {
+        return;
+      }
       const slot = slots["prev-text"];
       const disabled = modelValue === 1;
       return _createVNode("li", {
@@ -105,8 +111,12 @@ var stdin_default = defineComponent({
     const renderNextButton = () => {
       const {
         mode,
-        modelValue
+        modelValue,
+        showNextButton
       } = props;
+      if (!showNextButton) {
+        return;
+      }
       const slot = slots["next-text"];
       const disabled = modelValue === count.value;
       return _createVNode("li", {

package/es/pagination/index.css

@@ -1 +1 @@
-:root{--van-pagination-height: 40px;--van-pagination-font-size: var(--van-font-size-md);--van-pagination-item-width: 36px;--van-pagination-item-default-color: var(--van-primary-color);--van-pagination-item-disabled-color: var(--van-gray-7);--van-pagination-item-disabled-background: var(--van-background);--van-pagination-background: var(--van-background-2);--van-pagination-desc-color: var(--van-gray-7);--van-pagination-disabled-opacity: var(--van-disabled-opacity)}.van-pagination{font-size:var(--van-pagination-font-size)}.van-pagination__items{display:flex}.van-pagination__item,.van-pagination__page-desc{display:flex;align-items:center;justify-content:center}.van-pagination__item{flex:1;box-sizing:border-box;min-width:var(--van-pagination-item-width);height:var(--van-pagination-height);color:var(--van-pagination-item-default-color);background:var(--van-pagination-background);cursor:pointer;-webkit-user-select:none;user-select:none}.van-pagination__item button{flex:1;height:100%;border:none;padding:0;background:transparent}.van-pagination__item button[disabled]{cursor:not-allowed}.van-pagination__item:active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item:not(:last-child):after{border-right-width:0}.van-pagination__item--active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item--page{flex-grow:0}.van-pagination__item--prev,.van-pagination__item--next{padding:0 var(--van-padding-base);cursor:pointer}.van-pagination__item--border:after{border-width:var(--van-border-width)}.van-pagination__item--disabled{color:var(--van-pagination-item-disabled-color);background-color:var(--van-pagination-item-disabled-background);opacity:var(--van-pagination-disabled-opacity)}.van-pagination__page-desc{flex:1;height:var(--van-pagination-height);color:var(--van-pagination-desc-color)}
+:root{--van-pagination-height: 40px;--van-pagination-font-size: var(--van-font-size-md);--van-pagination-item-width: 36px;--van-pagination-item-default-color: var(--van-primary-color);--van-pagination-item-disabled-color: var(--van-gray-7);--van-pagination-item-disabled-background: var(--van-background);--van-pagination-background: var(--van-background-2);--van-pagination-desc-color: var(--van-gray-7);--van-pagination-disabled-opacity: var(--van-disabled-opacity)}.van-pagination{font-size:var(--van-pagination-font-size)}.van-pagination__items{display:flex}.van-pagination__item,.van-pagination__page-desc{display:flex;align-items:center;justify-content:center}.van-pagination__item{flex:1;box-sizing:border-box;min-width:var(--van-pagination-item-width);height:var(--van-pagination-height);color:var(--van-pagination-item-default-color);background:var(--van-pagination-background);cursor:pointer;-webkit-user-select:none;user-select:none}.van-pagination__item button{flex:1;height:100%;border:none;padding:0;background:transparent}.van-pagination__item button[disabled]{cursor:not-allowed}.van-pagination__item:active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item:not(:last-child):after{border-right-width:0}.van-pagination__item--active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item--page{flex-grow:0}.van-pagination__item--prev,.van-pagination__item--next{padding:0 var(--van-padding-base);cursor:pointer}.van-pagination__item--border:after{border-width:var(--van-border-width)}.van-pagination__item--disabled,.van-pagination__item--disabled:active{color:var(--van-pagination-item-disabled-color);background-color:var(--van-pagination-item-disabled-background);opacity:var(--van-pagination-disabled-opacity)}.van-pagination__page-desc{flex:1;height:var(--van-pagination-height);color:var(--van-pagination-desc-color)}

package/es/pagination/index.d.ts

@@ -26,6 +26,14 @@ export declare const Pagination: import("../utils").WithInstall<import("vue").De
         default: number;
     };
     forceEllipses: BooleanConstructor;
+    showPrevButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showNextButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     mode: {
         type: import("vue").PropType<import("./Pagination").PaginationMode>;
@@ -54,6 +62,14 @@ export declare const Pagination: import("../utils").WithInstall<import("vue").De
         default: number;
     };
     forceEllipses: BooleanConstructor;
+    showPrevButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showNextButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -65,6 +81,8 @@ export declare const Pagination: import("../utils").WithInstall<import("vue").De
     showPageSize: string | number;
     itemsPerPage: string | number;
     forceEllipses: boolean;
+    showPrevButton: boolean;
+    showNextButton: boolean;
 }>>;
 export default Pagination;
 export { paginationProps } from './Pagination';

package/es/picker/Picker.d.ts

@@ -104,7 +104,7 @@ declare const _default: import("vue").DefineComponent<{
         default: PickerToolbarPosition;
     };
     columnsFieldNames: PropType<PickerFieldNames>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "cancel" | "change" | "clickOption" | "confirm")[], "update:modelValue" | "cancel" | "change" | "clickOption" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "cancel" | "change" | "clickOption" | "scrollInto" | "confirm")[], "update:modelValue" | "cancel" | "change" | "clickOption" | "scrollInto" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
@@ -147,6 +147,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
     onClickOption?: ((...args: any[]) => any) | undefined;
+    onScrollInto?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: Numeric[];

package/es/picker/Picker.mjs

@@ -26,7 +26,7 @@ const pickerProps = extend({}, pickerSharedProps, {
 var stdin_default = defineComponent({
   name,
   props: pickerProps,
-  emits: ["confirm", "cancel", "change", "clickOption", "update:modelValue"],
+  emits: ["confirm", "cancel", "change", "scrollInto", "clickOption", "update:modelValue"],
   setup(props, {
     emit,
     slots
@@ -88,10 +88,14 @@ var stdin_default = defineComponent({
         }, getEventParams()));
       });
     };
-    const onClickOption = (currentOption, columnIndex) => emit("clickOption", extend({
-      columnIndex,
-      currentOption
-    }, getEventParams()));
+    const onClickOption = (currentOption, columnIndex) => {
+      const params = {
+        columnIndex,
+        currentOption
+      };
+      emit("clickOption", extend(getEventParams(), params));
+      emit("scrollInto", params);
+    };
     const confirm = () => {
       children.forEach((child) => child.stopMomentum());
       const params = getEventParams();
@@ -111,7 +115,13 @@ var stdin_default = defineComponent({
       "swipeDuration": props.swipeDuration,
       "visibleOptionNum": props.visibleOptionNum,
       "onChange": (value) => onChange(value, columnIndex),
-      "onClickOption": (option) => onClickOption(option, columnIndex)
+      "onClickOption": (option) => onClickOption(option, columnIndex),
+      "onScrollInto": (option) => {
+        emit("scrollInto", {
+          currentOption: option,
+          columnIndex
+        });
+      }
     }, {
       option: slots.option
     }));

package/es/picker/PickerColumn.d.ts

@@ -25,7 +25,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "clickOption")[], "change" | "clickOption", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "clickOption" | "scrollInto")[], "change" | "clickOption" | "scrollInto", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     value: (NumberConstructor | StringConstructor)[];
     fields: {
         type: PropType<Required<PickerFieldNames>>;
@@ -52,6 +52,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onClickOption?: ((...args: any[]) => any) | undefined;
+    onScrollInto?: ((...args: any[]) => any) | undefined;
 }, {
     readonly: boolean;
     allowHtml: boolean;

package/es/picker/PickerColumn.mjs

@@ -1,5 +1,5 @@
 import { createVNode as _createVNode } from "vue";
-import { ref, watchEffect, defineComponent } from "vue";
+import { ref, computed, watchEffect, defineComponent } from "vue";
 import { clamp, numericProp, makeArrayProp, preventDefault, createNamespace, makeRequiredProp } from "../utils/index.mjs";
 import { getElementTranslateY, findIndexOfEnabledOption } from "./utils.mjs";
 import { useEventListener, useParent } from "@vant/use";
@@ -22,7 +22,7 @@ var stdin_default = defineComponent({
     swipeDuration: makeRequiredProp(numericProp),
     visibleOptionNum: makeRequiredProp(numericProp)
   },
-  emits: ["change", "clickOption"],
+  emits: ["change", "clickOption", "scrollInto"],
   setup(props, {
     emit,
     slots
@@ -66,6 +66,7 @@ var stdin_default = defineComponent({
       emit("clickOption", props.options[index]);
     };
     const getIndexByOffset = (offset) => clamp(Math.round(-offset / props.optionHeight), 0, count() - 1);
+    const currentIndex = computed(() => getIndexByOffset(currentOffset.value));
     const momentum = (distance, duration) => {
       const speed = Math.abs(distance / duration);
       distance = currentOffset.value + speed / 3e-3 * (distance < 0 ? -1 : 1);
@@ -105,11 +106,16 @@ var stdin_default = defineComponent({
         moving = true;
         preventDefault(event, true);
       }
-      currentOffset.value = clamp(startOffset + touch.deltaY.value, -(count() * props.optionHeight), props.optionHeight);
+      const newOffset = clamp(startOffset + touch.deltaY.value, -(count() * props.optionHeight), props.optionHeight);
+      const newIndex = getIndexByOffset(newOffset);
+      if (newIndex !== currentIndex.value) {
+        emit("scrollInto", props.options[newIndex]);
+      }
+      currentOffset.value = newOffset;
       const now = Date.now();
       if (now - touchStartTime > MOMENTUM_TIME) {
         touchStartTime = now;
-        momentumOffset = currentOffset.value;
+        momentumOffset = newOffset;
       }
     };
     const onTouchEnd = () => {

package/es/picker/index.d.ts

@@ -37,7 +37,7 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         default: import("./types").PickerToolbarPosition;
     };
     columnsFieldNames: import("vue").PropType<import("./types").PickerFieldNames>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "cancel" | "change" | "clickOption" | "confirm")[], "update:modelValue" | "cancel" | "change" | "clickOption" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "cancel" | "change" | "clickOption" | "scrollInto" | "confirm")[], "update:modelValue" | "cancel" | "change" | "clickOption" | "scrollInto" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
@@ -80,6 +80,7 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
     onClickOption?: ((...args: any[]) => any) | undefined;
+    onScrollInto?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: import("../utils").Numeric[];

package/es/share-sheet/ShareSheet.mjs

@@ -4,6 +4,7 @@ import { pick, extend, truthProp, makeArrayProp, createNamespace, HAPTICS_FEEDBA
 import { popupSharedProps, popupSharedPropKeys } from "../popup/shared.mjs";
 import { Icon } from "../icon/index.mjs";
 import { Popup } from "../popup/index.mjs";
+const isImage = (name2) => name2 == null ? void 0 : name2.includes("/");
 const popupInheritKeys = [...popupSharedPropKeys, "round", "closeOnPopstate", "safeAreaInsetBottom"];
 const iconMap = {
   qq: "qq",
@@ -53,17 +54,17 @@ var stdin_default = defineComponent({
       }
     };
     const renderIcon = (icon) => {
-      if (iconMap[icon]) {
-        return _createVNode("div", {
-          "class": bem("icon", [icon])
-        }, [_createVNode(Icon, {
-          "name": iconMap[icon] || icon
-        }, null)]);
+      if (isImage(icon)) {
+        return _createVNode("img", {
+          "src": icon,
+          "class": bem("image-icon")
+        }, null);
       }
-      return _createVNode("img", {
-        "src": icon,
-        "class": bem("image-icon")
-      }, null);
+      return _createVNode("div", {
+        "class": bem("icon", [icon])
+      }, [_createVNode(Icon, {
+        "name": iconMap[icon] || icon
+      }, null)]);
     };
     const renderOption = (option, index) => {
       const {

package/es/sticky/Sticky.mjs

@@ -1,6 +1,6 @@
 import { createVNode as _createVNode } from "vue";
-import { ref, watch, computed, reactive, defineComponent } from "vue";
-import { extend, isHidden, unitToPx, numericProp, getScrollTop, getZIndexStyle, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { ref, watch, computed, nextTick, reactive, defineComponent } from "vue";
+import { extend, isHidden, unitToPx, numericProp, windowWidth, windowHeight, getScrollTop, getZIndexStyle, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
 import { useRect, useEventListener, useScrollParent } from "@vant/use";
 import { useVisibilityChange } from "../composables/use-visibility-change.mjs";
 const [name, bem] = createNamespace("sticky");
@@ -29,8 +29,12 @@ var stdin_default = defineComponent({
       // root height
       transform: 0
     });
+    const isReset = ref(false);
     const offset = computed(() => unitToPx(props.position === "top" ? props.offsetTop : props.offsetBottom));
     const rootStyle = computed(() => {
+      if (isReset.value) {
+        return;
+      }
       const {
         fixed,
         height,
@@ -44,7 +48,7 @@ var stdin_default = defineComponent({
       }
     });
     const stickyStyle = computed(() => {
-      if (!state.fixed) {
+      if (!state.fixed || isReset.value) {
         return;
       }
       const style = extend(getZIndexStyle(props.zIndex), {
@@ -103,6 +107,18 @@ var stdin_default = defineComponent({
       passive: true
     });
     useVisibilityChange(root, onScroll);
+    watch([windowWidth, windowHeight], () => {
+      if (!root.value || isHidden(root) || !state.fixed) {
+        return;
+      }
+      isReset.value = true;
+      nextTick(() => {
+        const rootRect = useRect(root);
+        state.width = rootRect.width;
+        state.height = rootRect.height;
+        isReset.value = false;
+      });
+    });
     return () => {
       var _a;
       return _createVNode("div", {
@@ -110,7 +126,7 @@ var stdin_default = defineComponent({
         "style": rootStyle.value
       }, [_createVNode("div", {
         "class": bem({
-          fixed: state.fixed
+          fixed: state.fixed && !isReset.value
         }),
         "style": stickyStyle.value
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]);

package/es/swipe/Swipe.mjs

@@ -336,7 +336,7 @@ var stdin_default = defineComponent({
     watch(() => props.initialSwipe, (value) => initialize(+value));
     watch(count, () => initialize(state.active));
     watch(() => props.autoplay, autoplay);
-    watch([windowWidth, windowHeight], resize);
+    watch([windowWidth, windowHeight, () => props.width, () => props.height], resize);
     watch(usePageVisibility(), (visible) => {
       if (visible === "visible") {
         autoplay();

package/es/tab/Tab.mjs

@@ -1,12 +1,13 @@
-import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
-import { ref, watch, provide, computed, nextTick, defineComponent } from "vue";
-import { extend, truthProp, unknownProp, numericProp, createNamespace } from "../utils/index.mjs";
+import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { ref, watch, provide, computed, nextTick, defineComponent, getCurrentInstance } from "vue";
+import { pick, extend, truthProp, unknownProp, numericProp, createNamespace } from "../utils/index.mjs";
 import { TABS_KEY } from "../tabs/Tabs.mjs";
 import { doubleRaf, useParent } from "@vant/use";
 import { useId } from "../composables/use-id.mjs";
 import { useExpose } from "../composables/use-expose.mjs";
 import { routeProps } from "../composables/use-route.mjs";
 import { TAB_STATUS_KEY } from "../composables/use-tab-status.mjs";
+import { TabTitle } from "./TabTitle.mjs";
 import { SwipeItem } from "../swipe-item/index.mjs";
 const [name, bem] = createNamespace("tab");
 const tabProps = extend({}, routeProps, {
@@ -27,6 +28,7 @@ var stdin_default = defineComponent({
   }) {
     const id = useId();
     const inited = ref(false);
+    const instance = getCurrentInstance();
     const {
       parent,
       index
@@ -56,6 +58,21 @@ var stdin_default = defineComponent({
       }
       return isActive;
     });
+    const renderTitle = (onClickTab) => _createVNode(TabTitle, _mergeProps({
+      "key": id,
+      "id": `${parent.id}-${index.value}`,
+      "ref": parent.setTitleRefs(index.value),
+      "style": props.titleStyle,
+      "class": props.titleClass,
+      "isActive": active.value,
+      "controls": id,
+      "scrollable": parent.scrollable.value,
+      "activeColor": parent.props.titleActiveColor,
+      "inactiveColor": parent.props.titleInactiveColor,
+      "onClick": (event) => onClickTab(instance.proxy, index.value, event)
+    }, pick(parent.props, ["type", "color", "shrink"]), pick(props, ["dot", "badge", "title", "disabled", "showZeroBadge"])), {
+      title: slots.title
+    });
     const hasInactiveClass = ref(!active.value);
     watch(active, (val) => {
       if (val) {
@@ -71,6 +88,10 @@ var stdin_default = defineComponent({
       parent.scrollIntoView();
     });
     provide(TAB_STATUS_KEY, active);
+    useExpose({
+      id,
+      renderTitle
+    });
     return () => {
       var _a;
       const label = `${parent.id}-${index.value}`;
@@ -105,9 +126,6 @@ var stdin_default = defineComponent({
       }
       const shouldRender = inited.value || scrollspy || !lazyRender;
       const Content = shouldRender ? (_a = slots.default) == null ? void 0 : _a.call(slots) : null;
-      useExpose({
-        id
-      });
       return _withDirectives(_createVNode("div", {
         "id": id,
         "role": "tabpanel",

package/es/{tabs/TabsTitle.d.ts → tab/TabTitle.d.ts}

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{
+export declare const TabTitle: import("vue").DefineComponent<{
     id: StringConstructor;
     dot: BooleanConstructor;
     type: StringConstructor;
@@ -42,4 +42,3 @@ declare const _default: import("vue").DefineComponent<{
     scrollable: boolean;
     showZeroBadge: boolean;
 }>;
-export default _default;

package/es/{tabs/TabsTitle.mjs → tab/TabTitle.mjs}

@@ -3,7 +3,7 @@ import { computed, defineComponent } from "vue";
 import { isDef, truthProp, numericProp, createNamespace } from "../utils/index.mjs";
 import { Badge } from "../badge/index.mjs";
 const [name, bem] = createNamespace("tab");
-var stdin_default = defineComponent({
+const TabTitle = defineComponent({
   name,
   props: {
     id: String,
@@ -86,5 +86,5 @@ var stdin_default = defineComponent({
   }
 });
 export {
-  stdin_default as default
+  TabTitle
 };

package/es/tabs/Tabs.d.ts

@@ -145,9 +145,9 @@ declare const _default: import("vue").DefineComponent<{
     duration: string | number;
     lazyRender: boolean;
     offsetTop: string | number;
-    shrink: boolean;
     animated: boolean;
     swipeable: boolean;
+    shrink: boolean;
     scrollspy: boolean;
     swipeThreshold: string | number;
 }>;

package/es/tabs/Tabs.mjs

@@ -1,6 +1,6 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { createVNode as _createVNode } from "vue";
 import { ref, watch, computed, reactive, nextTick, onActivated, defineComponent } from "vue";
-import { pick, isDef, addUnit, isHidden, unitToPx, truthProp, numericProp, windowWidth, getElementTop, makeStringProp, callInterceptor, createNamespace, makeNumericProp, setRootScrollTop, BORDER_TOP_BOTTOM } from "../utils/index.mjs";
+import { isDef, addUnit, isHidden, unitToPx, truthProp, numericProp, windowWidth, getElementTop, makeStringProp, callInterceptor, createNamespace, makeNumericProp, setRootScrollTop, BORDER_TOP_BOTTOM } from "../utils/index.mjs";
 import { scrollLeftTo, scrollTopTo } from "./utils.mjs";
 import { useRect, useChildren, useScrollParent, useEventListener, onMountedOrActivated } from "@vant/use";
 import { useId } from "../composables/use-id.mjs";
@@ -10,7 +10,6 @@ import { useExpose } from "../composables/use-expose.mjs";
 import { onPopupReopen } from "../composables/on-popup-reopen.mjs";
 import { useVisibilityChange } from "../composables/use-visibility-change.mjs";
 import { Sticky } from "../sticky/index.mjs";
-import TabsTitle from "./TabsTitle.mjs";
 import TabsContent from "./TabsContent.mjs";
 const [name, bem] = createNamespace("tabs");
 const tabsProps = {
@@ -226,24 +225,6 @@ var stdin_default = defineComponent({
         setCurrentIndex(index);
       }
     };
-    const renderNav = () => children.map((item, index) => _createVNode(TabsTitle, _mergeProps({
-      "key": item.id,
-      "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,
-      "activeColor": props.titleActiveColor,
-      "inactiveColor": props.titleInactiveColor,
-      "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", {
@@ -273,7 +254,7 @@ var stdin_default = defineComponent({
         }]),
         "style": navStyle.value,
         "aria-orientation": "horizontal"
-      }, [(_a = slots["nav-left"]) == null ? void 0 : _a.call(slots), renderNav(), renderLine(), (_b = slots["nav-right"]) == null ? void 0 : _b.call(slots)])]), (_c = slots["nav-bottom"]) == null ? void 0 : _c.call(slots)];
+      }, [(_a = slots["nav-left"]) == null ? void 0 : _a.call(slots), children.map((item) => item.renderTitle(onClickTab)), renderLine(), (_b = slots["nav-right"]) == null ? void 0 : _b.call(slots)])]), (_c = slots["nav-bottom"]) == null ? void 0 : _c.call(slots)];
       if (sticky) {
         return _createVNode("div", {
           "ref": wrapRef
@@ -281,7 +262,16 @@ var stdin_default = defineComponent({
       }
       return Header;
     };
-    watch([() => props.color, windowWidth], setLine);
+    const resize = () => {
+      setLine();
+      nextTick(() => {
+        var _a, _b;
+        scrollIntoView(true);
+        (_b = (_a = contentRef.value) == null ? void 0 : _a.swipeRef.value) == null ? void 0 : _b.resize();
+      });
+    };
+    watch(() => [props.color, props.duration, props.lineWidth, props.lineHeight], setLine);
+    watch(windowWidth, resize);
     watch(() => props.active, (value) => {
       if (value !== currentName.value) {
         setCurrentIndexByName(value);
@@ -307,13 +297,6 @@ var stdin_default = defineComponent({
       });
     };
     const onRendered = (name2, title) => emit("rendered", name2, title);
-    const resize = () => {
-      setLine();
-      nextTick(() => {
-        var _a, _b;
-        return (_b = (_a = contentRef.value) == null ? void 0 : _a.swipeRef.value) == null ? void 0 : _b.resize();
-      });
-    };
     useExpose({
       resize,
       scrollTo
@@ -330,8 +313,10 @@ var stdin_default = defineComponent({
       id,
       props,
       setLine,
+      scrollable,
       onRendered,
       currentName,
+      setTitleRefs,
       scrollIntoView
     });
     return () => _createVNode("div", {

package/es/tabs/index.d.ts

@@ -98,9 +98,9 @@ export declare const Tabs: import("../utils").WithInstall<import("vue").DefineCo
     duration: string | number;
     lazyRender: boolean;
     offsetTop: string | number;
-    shrink: boolean;
     animated: boolean;
     swipeable: boolean;
+    shrink: boolean;
     scrollspy: boolean;
     swipeThreshold: string | number;
 }>>;

package/es/tabs/style/index.mjs

@@ -1,5 +1,4 @@
 import "../../style/base.css";
-import "../../badge/index.css";
 import "../../sticky/index.css";
 import "../../swipe/index.css";
 import "../index.css";