vant 4.1.2 → 4.2.1

package/lib/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/lib/index.js

@@ -117,6 +117,7 @@ var import_time_picker = require("./time-picker");
 var import_toast = require("./toast");
 var import_tree_select = require("./tree-select");
 var import_uploader = require("./uploader");
+var import_watermark = require("./watermark");
 __reExport(stdin_exports, require("./action-bar"), module.exports);
 __reExport(stdin_exports, require("./action-bar-button"), module.exports);
 __reExport(stdin_exports, require("./action-bar-icon"), module.exports);
@@ -212,7 +213,8 @@ __reExport(stdin_exports, require("./time-picker"), module.exports);
 __reExport(stdin_exports, require("./toast"), module.exports);
 __reExport(stdin_exports, require("./tree-select"), module.exports);
 __reExport(stdin_exports, require("./uploader"), module.exports);
-const version = "4.1.2";
+__reExport(stdin_exports, require("./watermark"), module.exports);
+const version = "4.2.1";
 function install(app) {
   const components = [
     import_action_bar.ActionBar,
@@ -308,7 +310,8 @@ function install(app) {
     import_time_picker.TimePicker,
     import_toast.Toast,
     import_tree_select.TreeSelect,
-    import_uploader.Uploader
+    import_uploader.Uploader,
+    import_watermark.Watermark
   ];
   components.forEach((item) => {
     if (item.install) {

package/lib/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/lib/pagination/Pagination.js

@@ -39,7 +39,9 @@ const paginationProps = {
   totalItems: (0, import_utils.makeNumericProp)(0),
   showPageSize: (0, import_utils.makeNumericProp)(5),
   itemsPerPage: (0, import_utils.makeNumericProp)(10),
-  forceEllipses: Boolean
+  forceEllipses: Boolean,
+  showPrevButton: import_utils.truthProp,
+  showNextButton: import_utils.truthProp
 };
 var stdin_default = (0, import_vue2.defineComponent)({
   name,
@@ -109,8 +111,12 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const renderPrevButton = () => {
       const {
         mode,
-        modelValue
+        modelValue,
+        showPrevButton
       } = props;
+      if (!showPrevButton) {
+        return;
+      }
       const slot = slots["prev-text"];
       const disabled = modelValue === 1;
       return (0, import_vue.createVNode)("li", {
@@ -128,8 +134,12 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const renderNextButton = () => {
       const {
         mode,
-        modelValue
+        modelValue,
+        showNextButton
       } = props;
+      if (!showNextButton) {
+        return;
+      }
       const slot = slots["next-text"];
       const disabled = modelValue === count.value;
       return (0, import_vue.createVNode)("li", {

package/lib/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/lib/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/lib/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/lib/picker/Picker.js

@@ -60,7 +60,7 @@ const pickerProps = (0, import_utils.extend)({}, pickerSharedProps, {
 var stdin_default = (0, import_vue2.defineComponent)({
   name: import_utils2.name,
   props: pickerProps,
-  emits: ["confirm", "cancel", "change", "clickOption", "update:modelValue"],
+  emits: ["confirm", "cancel", "change", "scrollInto", "clickOption", "update:modelValue"],
   setup(props, {
     emit,
     slots
@@ -122,10 +122,14 @@ var stdin_default = (0, import_vue2.defineComponent)({
         }, getEventParams()));
       });
     };
-    const onClickOption = (currentOption, columnIndex) => emit("clickOption", (0, import_utils.extend)({
-      columnIndex,
-      currentOption
-    }, getEventParams()));
+    const onClickOption = (currentOption, columnIndex) => {
+      const params = {
+        columnIndex,
+        currentOption
+      };
+      emit("clickOption", (0, import_utils.extend)(getEventParams(), params));
+      emit("scrollInto", params);
+    };
     const confirm = () => {
       children.forEach((child) => child.stopMomentum());
       const params = getEventParams();
@@ -145,7 +149,13 @@ var stdin_default = (0, import_vue2.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/lib/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/lib/picker/PickerColumn.js

@@ -45,7 +45,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     swipeDuration: (0, import_utils.makeRequiredProp)(import_utils.numericProp),
     visibleOptionNum: (0, import_utils.makeRequiredProp)(import_utils.numericProp)
   },
-  emits: ["change", "clickOption"],
+  emits: ["change", "clickOption", "scrollInto"],
   setup(props, {
     emit,
     slots
@@ -89,6 +89,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       emit("clickOption", props.options[index]);
     };
     const getIndexByOffset = (offset) => (0, import_utils.clamp)(Math.round(-offset / props.optionHeight), 0, count() - 1);
+    const currentIndex = (0, import_vue2.computed)(() => getIndexByOffset(currentOffset.value));
     const momentum = (distance, duration) => {
       const speed = Math.abs(distance / duration);
       distance = currentOffset.value + speed / 3e-3 * (distance < 0 ? -1 : 1);
@@ -128,11 +129,16 @@ var stdin_default = (0, import_vue2.defineComponent)({
         moving = true;
         (0, import_utils.preventDefault)(event, true);
       }
-      currentOffset.value = (0, import_utils.clamp)(startOffset + touch.deltaY.value, -(count() * props.optionHeight), props.optionHeight);
+      const newOffset = (0, import_utils.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/lib/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/lib/share-sheet/ShareSheet.js

@@ -27,6 +27,7 @@ var import_utils = require("../utils");
 var import_shared = require("../popup/shared");
 var import_icon = require("../icon");
 var import_popup = require("../popup");
+const isImage = (name2) => name2 == null ? void 0 : name2.includes("/");
 const popupInheritKeys = [...import_shared.popupSharedPropKeys, "round", "closeOnPopstate", "safeAreaInsetBottom"];
 const iconMap = {
   qq: "qq",
@@ -76,17 +77,17 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
     };
     const renderIcon = (icon) => {
-      if (iconMap[icon]) {
-        return (0, import_vue.createVNode)("div", {
-          "class": bem("icon", [icon])
-        }, [(0, import_vue.createVNode)(import_icon.Icon, {
-          "name": iconMap[icon] || icon
-        }, null)]);
+      if (isImage(icon)) {
+        return (0, import_vue.createVNode)("img", {
+          "src": icon,
+          "class": bem("image-icon")
+        }, null);
       }
-      return (0, import_vue.createVNode)("img", {
-        "src": icon,
-        "class": bem("image-icon")
-      }, null);
+      return (0, import_vue.createVNode)("div", {
+        "class": bem("icon", [icon])
+      }, [(0, import_vue.createVNode)(import_icon.Icon, {
+        "name": iconMap[icon] || icon
+      }, null)]);
     };
     const renderOption = (option, index) => {
       const {

package/lib/sticky/Sticky.js

@@ -52,8 +52,12 @@ var stdin_default = (0, import_vue2.defineComponent)({
       // root height
       transform: 0
     });
+    const isReset = (0, import_vue2.ref)(false);
     const offset = (0, import_vue2.computed)(() => (0, import_utils.unitToPx)(props.position === "top" ? props.offsetTop : props.offsetBottom));
     const rootStyle = (0, import_vue2.computed)(() => {
+      if (isReset.value) {
+        return;
+      }
       const {
         fixed,
         height,
@@ -67,7 +71,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
     });
     const stickyStyle = (0, import_vue2.computed)(() => {
-      if (!state.fixed) {
+      if (!state.fixed || isReset.value) {
         return;
       }
       const style = (0, import_utils.extend)((0, import_utils.getZIndexStyle)(props.zIndex), {
@@ -126,6 +130,18 @@ var stdin_default = (0, import_vue2.defineComponent)({
       passive: true
     });
     (0, import_use_visibility_change.useVisibilityChange)(root, onScroll);
+    (0, import_vue2.watch)([import_utils.windowWidth, import_utils.windowHeight], () => {
+      if (!root.value || (0, import_utils.isHidden)(root) || !state.fixed) {
+        return;
+      }
+      isReset.value = true;
+      (0, import_vue2.nextTick)(() => {
+        const rootRect = (0, import_use.useRect)(root);
+        state.width = rootRect.width;
+        state.height = rootRect.height;
+        isReset.value = false;
+      });
+    });
     return () => {
       var _a;
       return (0, import_vue.createVNode)("div", {
@@ -133,7 +149,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "style": rootStyle.value
       }, [(0, import_vue.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/lib/swipe/Swipe.js

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

package/lib/tab/Tab.js

@@ -30,6 +30,7 @@ var import_use_id = require("../composables/use-id");
 var import_use_expose = require("../composables/use-expose");
 var import_use_route = require("../composables/use-route");
 var import_use_tab_status = require("../composables/use-tab-status");
+var import_TabTitle = require("./TabTitle");
 var import_swipe_item = require("../swipe-item");
 const [name, bem] = (0, import_utils.createNamespace)("tab");
 const tabProps = (0, import_utils.extend)({}, import_use_route.routeProps, {
@@ -50,6 +51,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
   }) {
     const id = (0, import_use_id.useId)();
     const inited = (0, import_vue2.ref)(false);
+    const instance = (0, import_vue2.getCurrentInstance)();
     const {
       parent,
       index
@@ -79,6 +81,21 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       return isActive;
     });
+    const renderTitle = (onClickTab) => (0, import_vue.createVNode)(import_TabTitle.TabTitle, (0, import_vue.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)
+    }, (0, import_utils.pick)(parent.props, ["type", "color", "shrink"]), (0, import_utils.pick)(props, ["dot", "badge", "title", "disabled", "showZeroBadge"])), {
+      title: slots.title
+    });
     const hasInactiveClass = (0, import_vue2.ref)(!active.value);
     (0, import_vue2.watch)(active, (val) => {
       if (val) {
@@ -94,6 +111,10 @@ var stdin_default = (0, import_vue2.defineComponent)({
       parent.scrollIntoView();
     });
     (0, import_vue2.provide)(import_use_tab_status.TAB_STATUS_KEY, active);
+    (0, import_use_expose.useExpose)({
+      id,
+      renderTitle
+    });
     return () => {
       var _a;
       const label = `${parent.id}-${index.value}`;
@@ -128,9 +149,6 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       const shouldRender = inited.value || scrollspy || !lazyRender;
       const Content = shouldRender ? (_a = slots.default) == null ? void 0 : _a.call(slots) : null;
-      (0, import_use_expose.useExpose)({
-        id
-      });
       return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
         "id": id,
         "role": "tabpanel",

package/lib/{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/lib/{tabs/TabsTitle.js → tab/TabTitle.js}

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var stdin_exports = {};
 __export(stdin_exports, {
-  default: () => stdin_default
+  TabTitle: () => TabTitle
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
@@ -25,7 +25,7 @@ var import_vue2 = require("vue");
 var import_utils = require("../utils");
 var import_badge = require("../badge");
 const [name, bem] = (0, import_utils.createNamespace)("tab");
-var stdin_default = (0, import_vue2.defineComponent)({
+const TabTitle = (0, import_vue2.defineComponent)({
   name,
   props: {
     id: String,

package/lib/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/lib/tabs/Tabs.js

@@ -44,7 +44,6 @@ var import_use_expose = require("../composables/use-expose");
 var import_on_popup_reopen = require("../composables/on-popup-reopen");
 var import_use_visibility_change = require("../composables/use-visibility-change");
 var import_sticky = require("../sticky");
-var import_TabsTitle = __toESM(require("./TabsTitle"));
 var import_TabsContent = __toESM(require("./TabsContent"));
 const [name, bem] = (0, import_utils.createNamespace)("tabs");
 const tabsProps = {
@@ -260,24 +259,6 @@ var stdin_default = (0, import_vue2.defineComponent)({
         setCurrentIndex(index);
       }
     };
-    const renderNav = () => children.map((item, index) => (0, import_vue.createVNode)(import_TabsTitle.default, (0, import_vue.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)
-    }, (0, import_utils.pick)(item, ["dot", "badge", "title", "disabled", "showZeroBadge"])), {
-      title: item.$slots.title
-    }));
     const renderLine = () => {
       if (props.type === "line" && children.length) {
         return (0, import_vue.createVNode)("div", {
@@ -307,7 +288,7 @@ var stdin_default = (0, import_vue2.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 (0, import_vue.createVNode)("div", {
           "ref": wrapRef
@@ -315,7 +296,16 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       return Header;
     };
-    (0, import_vue2.watch)([() => props.color, import_utils.windowWidth], setLine);
+    const resize = () => {
+      setLine();
+      (0, import_vue2.nextTick)(() => {
+        var _a, _b;
+        scrollIntoView(true);
+        (_b = (_a = contentRef.value) == null ? void 0 : _a.swipeRef.value) == null ? void 0 : _b.resize();
+      });
+    };
+    (0, import_vue2.watch)(() => [props.color, props.duration, props.lineWidth, props.lineHeight], setLine);
+    (0, import_vue2.watch)(import_utils.windowWidth, resize);
     (0, import_vue2.watch)(() => props.active, (value) => {
       if (value !== currentName.value) {
         setCurrentIndexByName(value);
@@ -341,13 +331,6 @@ var stdin_default = (0, import_vue2.defineComponent)({
       });
     };
     const onRendered = (name2, title) => emit("rendered", name2, title);
-    const resize = () => {
-      setLine();
-      (0, import_vue2.nextTick)(() => {
-        var _a, _b;
-        return (_b = (_a = contentRef.value) == null ? void 0 : _a.swipeRef.value) == null ? void 0 : _b.resize();
-      });
-    };
     (0, import_use_expose.useExpose)({
       resize,
       scrollTo
@@ -364,8 +347,10 @@ var stdin_default = (0, import_vue2.defineComponent)({
       id,
       props,
       setLine,
+      scrollable,
       onRendered,
       currentName,
+      setTitleRefs,
       scrollIntoView
     });
     return () => (0, import_vue.createVNode)("div", {

package/lib/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/lib/tabs/style/index.js

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

package/lib/tabs/types.d.ts

@@ -12,9 +12,11 @@ export type TabsProvide = {
     id: string;
     props: TabsProps;
     setLine: () => void;
+    scrollable: ComputedRef<boolean>;
     onRendered: (name: Numeric, title?: string) => void;
-    scrollIntoView: (immediate?: boolean) => void;
     currentName: ComputedRef<Numeric | undefined>;
+    setTitleRefs: (index: number) => (el: unknown) => void;
+    scrollIntoView: (immediate?: boolean) => void;
 };
 export type TabsExpose = {
     resize: () => void;