@varlet/ui 2.10.3-alpha.1683532936621 → 2.10.3-alpha.1683732401073

package/lib/varlet.cjs.js

@@ -22,6 +22,7 @@ const isURL = (val) => {
   return /^(http)|(\.*\/)/.test(val);
 };
 const isEmpty = (val) => val === void 0 || val === null || val === "" || Array.isArray(val) && !val.length;
+const isWindow = (val) => val === window;
 const toNumber = (val) => {
   if (val == null)
     return 0;
@@ -147,45 +148,53 @@ function error$1(source, message) {
 function warn(source, message) {
   console.warn("Varlet [" + source + "]: " + message);
 }
-function asyncGeneratorStep$e(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error2) {
-    reject(error2);
-    return;
-  }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-function _asyncToGenerator$e(fn2) {
-  return function() {
-    var self2 = this, args = arguments;
-    return new Promise(function(resolve, reject) {
-      var gen = fn2.apply(self2, args);
-      function _next(value) {
-        asyncGeneratorStep$e(gen, resolve, reject, _next, _throw, "next", value);
-      }
-      function _throw(err) {
-        asyncGeneratorStep$e(gen, resolve, reject, _next, _throw, "throw", err);
+function _extends$q() {
+  _extends$q = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
       }
-      _next(void 0);
-    });
+    }
+    return target;
   };
+  return _extends$q.apply(this, arguments);
+}
+function getStyle$1(element) {
+  return window.getComputedStyle(element);
+}
+function getRect(element) {
+  if (isWindow(element)) {
+    var width = element.innerWidth;
+    var height = element.innerHeight;
+    var rect = {
+      x: 0,
+      y: 0,
+      top: 0,
+      left: 0,
+      right: width,
+      bottom: height,
+      width,
+      height
+    };
+    return _extends$q({}, rect, {
+      toJSON: () => rect
+    });
+  }
+  return element.getBoundingClientRect();
 }
 function getLeft(element) {
   var {
     left: left2
-  } = element.getBoundingClientRect();
+  } = getRect(element);
   return left2 + (document.body.scrollLeft || document.documentElement.scrollLeft);
 }
 function getTop$1(element) {
   var {
     top: top2
-  } = element.getBoundingClientRect();
+  } = getRect(element);
   return top2 + (document.body.scrollTop || document.documentElement.scrollTop);
 }
 function getScrollTop(element) {
@@ -196,32 +205,25 @@ function getScrollLeft(element) {
   var left2 = "scrollLeft" in element ? element.scrollLeft : element.pageXOffset;
   return Math.max(left2, 0);
 }
-function inViewport(_x) {
-  return _inViewport.apply(this, arguments);
-}
-function _inViewport() {
-  _inViewport = _asyncToGenerator$e(function* (element) {
-    yield doubleRaf();
-    var {
-      top: top2,
-      bottom: bottom2,
-      left: left2,
-      right: right2
-    } = element.getBoundingClientRect();
-    var {
-      innerWidth,
-      innerHeight
-    } = window;
-    var xInViewport = left2 <= innerWidth && right2 >= 0;
-    var yInViewport = top2 <= innerHeight && bottom2 >= 0;
-    return xInViewport && yInViewport;
-  });
-  return _inViewport.apply(this, arguments);
+function inViewport(element) {
+  var {
+    top: top2,
+    bottom: bottom2,
+    left: left2,
+    right: right2
+  } = getRect(element);
+  var {
+    width,
+    height
+  } = getRect(window);
+  var xInViewport = left2 <= width && right2 >= 0;
+  var yInViewport = top2 <= height && bottom2 >= 0;
+  return xInViewport && yInViewport;
 }
 function getTranslate(el) {
   var {
     transform
-  } = window.getComputedStyle(el);
+  } = getStyle$1(el);
   return +transform.slice(transform.lastIndexOf(",") + 2, transform.length - 1);
 }
 function getParentScroller(el) {
@@ -238,7 +240,7 @@ function getParentScroller(el) {
     var {
       overflowY,
       overflow
-    } = window.getComputedStyle(element);
+    } = getStyle$1(element);
     if (scrollRE.test(overflowY) || scrollRE.test(overflow)) {
       return element;
     }
@@ -248,7 +250,7 @@ function getParentScroller(el) {
 function getAllParentScroller(el) {
   var allParentScroller = [];
   var element = el;
-  while (element !== window) {
+  while (!isWindow(element)) {
     element = getParentScroller(element);
     allParentScroller.push(element);
   }
@@ -268,15 +270,15 @@ function getTarget(target, componentName) {
 }
 function getViewportSize() {
   var {
-    innerWidth,
-    innerHeight
-  } = window;
-  return innerWidth > innerHeight ? {
-    vMin: innerHeight,
-    vMax: innerWidth
+    width,
+    height
+  } = getRect(window);
+  return width > height ? {
+    vMin: height,
+    vMax: width
   } : {
-    vMin: innerWidth,
-    vMax: innerHeight
+    vMin: width,
+    vMax: height
   };
 }
 var isRem = (value) => isString(value) && value.endsWith("rem");
@@ -295,15 +297,19 @@ var toPxNum = (value) => {
   if (isPx(value)) {
     return +value.replace("px", "");
   }
+  var {
+    width,
+    height
+  } = getRect(window);
   if (isVw(value)) {
-    return +value.replace("vw", "") * window.innerWidth / 100;
+    return +value.replace("vw", "") * width / 100;
   }
   if (isVh(value)) {
-    return +value.replace("vh", "") * window.innerHeight / 100;
+    return +value.replace("vh", "") * height / 100;
   }
   if (isRem(value)) {
     var num = +value.replace("rem", "");
-    var rootFontSize = window.getComputedStyle(document.documentElement).fontSize;
+    var rootFontSize = getStyle$1(document.documentElement).fontSize;
     return num * parseFloat(rootFontSize);
   }
   if (isVMin(value)) {
@@ -2254,7 +2260,10 @@ function check(_x) {
 }
 function _check() {
   _check = _asyncToGenerator$b(function* (el) {
-    (yield inViewport(el)) && attemptLoad(el);
+    yield doubleRaf();
+    if (inViewport(el)) {
+      attemptLoad(el);
+    }
   });
   return _check.apply(this, arguments);
 }
@@ -6009,7 +6018,7 @@ var __sfc__$W = vue.defineComponent({
         var {
           offsetHeight
         } = contentEl.value;
-        contentEl.value.style.height = 0 + "px";
+        contentEl.value.style.height = "0px";
         requestAnimationFrame(() => {
           contentEl.value.style.height = offsetHeight + "px";
           if (!isInitToTrigger)
@@ -6032,7 +6041,7 @@ var __sfc__$W = vue.defineComponent({
       } = contentEl.value;
       contentEl.value.style.height = offsetHeight + "px";
       requestAnimationFrame(() => {
-        contentEl.value.style.height = 0 + "px";
+        contentEl.value.style.height = "0px";
       });
     };
     var transitionend = () => {
@@ -7597,7 +7606,8 @@ function finalise(x, sd, rm, isTruncated) {
         }
       }
       isTruncated = isTruncated || sd < 0 || xd[xdi + 1] !== void 0 || (j < 0 ? w : w % mathpow(10, digits - j - 1));
-      roundUp = rm < 4 ? (rd || isTruncated) && (rm == 0 || rm == (x.s < 0 ? 3 : 2)) : rd > 5 || rd == 5 && (rm == 4 || isTruncated || rm == 6 && (i > 0 ? j > 0 ? w / mathpow(10, digits - j) : 0 : xd[xdi - 1]) % 10 & 1 || rm == (x.s < 0 ? 8 : 7));
+      roundUp = rm < 4 ? (rd || isTruncated) && (rm == 0 || rm == (x.s < 0 ? 3 : 2)) : rd > 5 || rd == 5 && (rm == 4 || isTruncated || rm == 6 && // Check whether the digit to the left of the rounding digit is odd.
+      (i > 0 ? j > 0 ? w / mathpow(10, digits - j) : 0 : xd[xdi - 1]) % 10 & 1 || rm == (x.s < 0 ? 8 : 7));
       if (sd < 1 || !xd[0]) {
         xd.length = 0;
         if (roundUp) {
@@ -9159,9 +9169,9 @@ Utils.w = wrapper;
 var parseDate = function parseDate2(cfg) {
   var date = cfg.date, utc = cfg.utc;
   if (date === null)
-    return new Date(NaN);
+    return /* @__PURE__ */ new Date(NaN);
   if (Utils.u(date))
-    return new Date();
+    return /* @__PURE__ */ new Date();
   if (date instanceof Date)
     return new Date(date);
   if (typeof date === "string" && !/Z$/i.test(date)) {
@@ -14181,7 +14191,7 @@ var __sfc__$I = vue.defineComponent({
       bindSwipeItems,
       length
     } = useSwipeItems();
-    var isCalledPrevOrNext = false;
+    var initializedIndex = false;
     var touching = false;
     var timer = -1;
     var startX;
@@ -14265,7 +14275,11 @@ var __sfc__$I = vue.defineComponent({
       });
     };
     var initialIndex = () => {
+      if (initializedIndex) {
+        return;
+      }
       index.value = boundaryIndex(toNumber(props2.initialIndex));
+      initializedIndex = true;
     };
     var startAutoplay = () => {
       var {
@@ -14376,7 +14390,7 @@ var __sfc__$I = vue.defineComponent({
       if (length.value <= 1) {
         return;
       }
-      isCalledPrevOrNext = true;
+      initialIndex();
       var {
         loop,
         onChange
@@ -14401,7 +14415,7 @@ var __sfc__$I = vue.defineComponent({
       if (length.value <= 1) {
         return;
       }
-      isCalledPrevOrNext = true;
+      initialIndex();
       var {
         loop,
         onChange
@@ -14444,9 +14458,8 @@ var __sfc__$I = vue.defineComponent({
     };
     bindSwipeItems(swipeProvider);
     vue.watch(() => length.value, /* @__PURE__ */ _asyncToGenerator$7(function* () {
-      isCalledPrevOrNext = false;
       yield doubleRaf();
-      !isCalledPrevOrNext && initialIndex();
+      initialIndex();
       resize();
     }));
     vue.onActivated(resize);
@@ -15753,10 +15766,6 @@ function __render__$B(_ctx, _cache) {
     "div",
     {
       class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n("--" + _ctx.variant), [_ctx.size === "small", _ctx.n("--small")], [_ctx.disabled, _ctx.n("--disabled")])),
-      style: vue.normalizeStyle({
-        "--field-decorator-legend-max-width": _ctx.legendMaxWidth,
-        "--filed-decorator-controller-width": _ctx.controllerWidth
-      }),
       onClick: _cache[0] || (_cache[0] = function() {
         return _ctx.handleClick && _ctx.handleClick(...arguments);
       })
@@ -15768,14 +15777,14 @@ function __render__$B(_ctx, _cache) {
         ref: "controllerEl",
         style: vue.normalizeStyle({
           color: _ctx.color,
-          cursor: _ctx.cursor
+          cursor: _ctx.cursor,
+          overflow: _ctx.isFloating ? "visible" : "hidden"
         })
       },
       [vue.createElementVNode(
         "div",
         {
-          class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [!_ctx.hint, _ctx.n("--icon-non-hint")])),
-          ref: "prependIconEl"
+          class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [!_ctx.hint, _ctx.n("--icon-non-hint")]))
         },
         [vue.renderSlot(_ctx.$slots, "prepend-icon")],
         2
@@ -15783,41 +15792,44 @@ function __render__$B(_ctx, _cache) {
       ), vue.createElementVNode(
         "div",
         {
+          ref: "middleEl",
           class: vue.normalizeClass(_ctx.classes(_ctx.n("middle"), [!_ctx.hint, _ctx.n("--middle-non-hint")]))
         },
-        [vue.renderSlot(_ctx.$slots, "default"), _ctx.hint || _ctx.alwaysCustomPlaceholder ? (vue.openBlock(), vue.createElementBlock(
-          "label",
-          {
-            key: 0,
-            class: vue.normalizeClass(_ctx.classes(_ctx.n("placeholder"), _ctx.n("$--ellipsis"), [_ctx.isFocus, _ctx.n("--focus")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")], [_ctx.errorMessage, _ctx.n("--error")], [!_ctx.hint, _ctx.n("--placeholder-non-hint")], _ctx.computePlaceholderState())),
-            style: vue.normalizeStyle({
-              transform: _ctx.placeholderTransform,
-              color: _ctx.color
-            }),
-            for: _ctx.id
-          },
-          [vue.createElementVNode(
-            "span",
-            null,
-            vue.toDisplayString(_ctx.placeholder),
-            1
-            /* TEXT */
-          ), vue.createElementVNode(
-            "span",
-            {
-              class: vue.normalizeClass(_ctx.n("placeholder-text")),
-              ref: "placeholderTextEl"
-            },
-            vue.toDisplayString(_ctx.placeholder),
-            3
-            /* TEXT, CLASS */
-          )],
-          14,
-          _hoisted_1$f
-        )) : vue.createCommentVNode("v-if", true)],
+        [vue.renderSlot(_ctx.$slots, "default")],
         2
         /* CLASS */
-      ), vue.createElementVNode(
+      ), (_ctx.hint || _ctx.alwaysCustomPlaceholder) && _ctx.placeholderTransform ? (vue.openBlock(), vue.createElementBlock(
+        "label",
+        {
+          key: 0,
+          class: vue.normalizeClass(_ctx.classes(_ctx.n("placeholder"), _ctx.n("$--ellipsis"), [_ctx.isFocus, _ctx.n("--focus")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")], [_ctx.errorMessage, _ctx.n("--error")], [!_ctx.hint, _ctx.n("--placeholder-non-hint")], _ctx.computePlaceholderState())),
+          style: vue.normalizeStyle({
+            color: _ctx.color,
+            transform: _ctx.placeholderTransform,
+            maxWidth: _ctx.placeholderMaxWidth
+          }),
+          for: _ctx.id
+        },
+        [vue.createElementVNode(
+          "span",
+          null,
+          vue.toDisplayString(_ctx.placeholder),
+          1
+          /* TEXT */
+        )],
+        14,
+        _hoisted_1$f
+      )) : vue.createCommentVNode("v-if", true), _ctx.variant === "outlined" ? (vue.openBlock(), vue.createElementBlock(
+        "span",
+        {
+          key: 1,
+          ref: "placeholderTextEl",
+          class: vue.normalizeClass([_ctx.n("placeholder-text"), _ctx.n("$--ellipsis")])
+        },
+        vue.toDisplayString(_ctx.placeholder),
+        3
+        /* TEXT, CLASS */
+      )) : vue.createCommentVNode("v-if", true), vue.createElementVNode(
         "div",
         {
           class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [!_ctx.hint, _ctx.n("--icon-non-hint")]))
@@ -15850,23 +15862,24 @@ function __render__$B(_ctx, _cache) {
         {
           key: 0,
           class: vue.normalizeClass(_ctx.classes(_ctx.n("line"), [_ctx.isFocus, _ctx.n("--line-focus")], [_ctx.errorMessage, _ctx.n("--line-error")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")])),
-          ref: "fieldsetEl"
+          style: vue.normalizeStyle({
+            borderColor: _ctx.color
+          })
         },
         [vue.createElementVNode(
           "legend",
           {
-            class: vue.normalizeClass(_ctx.classes(_ctx.n("line-legend"), [_ctx.isFloating(), _ctx.n("line-legend--hint")])),
+            class: vue.normalizeClass(_ctx.classes(_ctx.n("line-legend"), [_ctx.isFloating, _ctx.n("line-legend--hint")])),
             style: vue.normalizeStyle({
-              width: _ctx.legendWidth,
-              maxWidth: _ctx.legendMaxWidth
+              width: _ctx.legendWidth
             })
           },
           null,
           6
           /* CLASS, STYLE */
         )],
-        2
-        /* CLASS */
+        6
+        /* CLASS, STYLE */
       )) : (vue.openBlock(), vue.createElementBlock(
         "div",
         {
@@ -15894,8 +15907,8 @@ function __render__$B(_ctx, _cache) {
       2112
       /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
     )) : vue.createCommentVNode("v-if", true)],
-    6
-    /* CLASS, STYLE */
+    2
+    /* CLASS */
   );
 }
 var __sfc__$C = vue.defineComponent({
@@ -15905,61 +15918,49 @@ var __sfc__$C = vue.defineComponent({
   },
   props: props$y,
   setup(props2) {
-    var fieldsetEl = vue.ref(null);
     var controllerEl = vue.ref(null);
+    var middleEl = vue.ref(null);
     var placeholderTextEl = vue.ref(null);
-    var prependIconEl = vue.ref(null);
-    var legendMaxWidth = vue.ref("");
     var legendWidth = vue.ref("");
-    var controllerWidth = vue.ref("");
     var placeholderTransform = vue.ref("");
+    var placeholderMaxWidth = vue.ref("");
     var color = vue.computed(() => !props2.errorMessage ? props2.isFocus ? props2.focusColor : props2.blurColor : void 0);
+    var isFloating = vue.computed(() => props2.hint && (!isEmpty(props2.value) || props2.isFocus));
     var computePlaceholderState = () => {
       var {
         hint,
         value,
-        isFocus,
         composing
       } = props2;
       if (!hint && (!isEmpty(value) || composing)) {
         return n$A("--placeholder-hidden");
       }
-      if (hint && (!isEmpty(value) || isFocus)) {
-        return n$A("--placeholder-hint");
-      }
-    };
-    var resetSize = () => {
-      legendWidth.value = "";
-      legendMaxWidth.value = "";
-      placeholderTransform.value = "";
-      controllerWidth.value = "";
     };
-    var isFloating = () => props2.hint && (!isEmpty(props2.value) || props2.isFocus);
     var resize = () => {
-      var _window$getComputedSt, _window$getComputedSt2;
       var {
         size,
+        hint,
         placeholder,
         variant
       } = props2;
-      if (!isFloating() || !placeholder) {
-        resetSize();
+      if (!isFloating.value || !placeholder) {
+        var controllerRect = getRect(controllerEl.value);
+        var middleRect = getRect(middleEl.value);
+        var translateX = middleRect.left - controllerRect.left + "px";
+        placeholderTransform.value = hint ? "translate(" + translateX + ", calc(var(--field-decorator-" + variant + "-" + size + "-placeholder-translate-y) + var(--field-decorator-middle-offset-y))) scale(1)" : "translate(" + translateX + ", -50%)";
+        placeholderMaxWidth.value = middleRect.width + "px";
         return;
       }
-      var placeholderSpace = "var(--field-decorator-outlined-" + size + "-placeholder-space)";
-      var placeholderTextWidth = (_window$getComputedSt = window.getComputedStyle(placeholderTextEl.value)) == null ? void 0 : _window$getComputedSt.width;
-      var prependIconWidth = (_window$getComputedSt2 = window.getComputedStyle(prependIconEl.value)) == null ? void 0 : _window$getComputedSt2.width;
+      var controllerStyle = getStyle$1(controllerEl.value);
       var translateY = variant === "outlined" ? "-50%" : "0";
-      placeholderTransform.value = "translate(-" + prependIconWidth + ", " + translateY + ") scale(0.75)";
-      controllerWidth.value = window.getComputedStyle(controllerEl.value).width;
+      placeholderTransform.value = "translate(" + controllerStyle.paddingLeft + ", " + translateY + ") scale(0.75)";
       if (variant === "outlined") {
-        var {
-          width,
-          paddingLeft,
-          paddingRight
-        } = window.getComputedStyle(fieldsetEl.value);
-        legendWidth.value = "calc(" + placeholderTextWidth + " * 0.75 + 2 * " + placeholderSpace + ")";
-        legendMaxWidth.value = "calc(" + width + " - " + paddingLeft + " - " + paddingRight + ")";
+        var placeholderTextStyle = getStyle$1(placeholderTextEl.value);
+        var placeholderSpace = "var(--field-decorator-outlined-" + size + "-placeholder-space)";
+        legendWidth.value = "calc(" + placeholderTextStyle.width + " * 0.75 + " + placeholderSpace + " * 2)";
+        placeholderMaxWidth.value = "calc((100% - var(--field-decorator-outlined-" + size + "-padding-left) - var(--field-decorator-outlined-" + size + "-padding-right)) * 1.33)";
+      } else {
+        placeholderMaxWidth.value = "133%";
       }
     };
     var handleClear = (e) => {
@@ -15968,19 +15969,17 @@ var __sfc__$C = vue.defineComponent({
     var handleClick = (e) => {
       call(props2.onClick, e);
     };
-    vue.watch(() => [props2.size, props2.placeholder, props2.hint, props2.value, props2.isFocus, props2.variant], resize);
+    vue.onUpdated(resize);
     useMounted(resize);
     useEventListener(() => window, "resize", resize);
     return {
-      fieldsetEl,
       controllerEl,
+      middleEl,
       placeholderTextEl,
-      prependIconEl,
       placeholderTransform,
+      placeholderMaxWidth,
       color,
       legendWidth,
-      legendMaxWidth,
-      controllerWidth,
       isFloating,
       computePlaceholderState,
       n: n$A,
@@ -16638,6 +16637,59 @@ var props$v = {
   "onUpdate:loading": defineListenerProp(),
   "onUpdate:error": defineListenerProp()
 };
+var TABS_ITEMS_BIND_TAB_ITEM_KEY = Symbol("TABS_ITEMS_BIND_TAB_ITEM_KEY");
+function useTabItem$1() {
+  var {
+    bindChildren,
+    childProviders,
+    length
+  } = useChildren(TABS_ITEMS_BIND_TAB_ITEM_KEY);
+  return {
+    length,
+    tabItemList: childProviders,
+    bindTabItem: bindChildren
+  };
+}
+var TAB_ITEM_BIND_LIST_KEY = Symbol("TAB_ITEM_BIND_LIST_KEY");
+function useTabsItems() {
+  var {
+    parentProvider,
+    bindParent,
+    index
+  } = useParent(TABS_ITEMS_BIND_TAB_ITEM_KEY);
+  if (!bindParent) {
+    error$1("TabItem", "<var-tab-item/> must in <var-tabs-items/>");
+  }
+  return {
+    index,
+    tabsItems: parentProvider,
+    bindTabsItems: bindParent
+  };
+}
+function useLists() {
+  var {
+    childProviders,
+    bindChildren,
+    length
+  } = useChildren(TAB_ITEM_BIND_LIST_KEY);
+  return {
+    length,
+    lists: childProviders,
+    bindLists: bindChildren
+  };
+}
+function useTabItem() {
+  var {
+    parentProvider,
+    bindParent,
+    index
+  } = useParent(TAB_ITEM_BIND_LIST_KEY);
+  return {
+    index,
+    tabItem: parentProvider,
+    bindTabItem: bindParent
+  };
+}
 function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
@@ -16752,6 +16804,10 @@ var __sfc__$z = vue.defineComponent({
   },
   props: props$v,
   setup(props2) {
+    var {
+      tabItem: tabItem2,
+      bindTabItem
+    } = useTabItem();
     var listEl = vue.ref(null);
     var detectorEl = vue.ref(null);
     var scroller;
@@ -16761,10 +16817,12 @@ var __sfc__$z = vue.defineComponent({
       call(props2.onLoad);
     };
     var isReachBottom = () => {
-      var containerBottom = scroller === window ? window.innerHeight : scroller.getBoundingClientRect().bottom;
+      var {
+        bottom: containerBottom
+      } = getRect(scroller);
       var {
         bottom: detectorBottom
-      } = detectorEl.value.getBoundingClientRect();
+      } = getRect(detectorEl.value);
       return Math.floor(detectorBottom) - toPxNum(props2.offset) <= containerBottom;
     };
     var removeScrollerListener = () => {
@@ -16773,23 +16831,26 @@ var __sfc__$z = vue.defineComponent({
     var check2 = /* @__PURE__ */ function() {
       var _ref = _asyncToGenerator$4(function* () {
         yield vue.nextTick();
-        var {
-          loading: loading2,
-          finished,
-          error: error2
-        } = props2;
-        if (!loading2 && !finished && !error2 && isReachBottom()) {
-          load();
+        if (props2.loading || props2.finished || props2.error || (tabItem2 == null ? void 0 : tabItem2.current.value) === false || !isReachBottom()) {
+          return;
         }
+        load();
       });
       return function check3() {
         return _ref.apply(this, arguments);
       };
     }();
+    call(bindTabItem, {});
+    if (tabItem2) {
+      vue.watch(() => tabItem2.current.value, check2);
+    }
+    vue.watch(() => [props2.loading, props2.error, props2.finished], check2);
     useMounted(() => {
       scroller = getParentScroller(listEl.value);
       scroller.addEventListener("scroll", check2);
-      props2.immediateCheck && check2();
+      if (props2.immediateCheck) {
+        check2();
+      }
     });
     vue.onDeactivated(removeScrollerListener);
     vue.onUnmounted(removeScrollerListener);
@@ -22918,34 +22979,6 @@ Tab.install = function(app) {
   app.component(Tab.name, Tab);
 };
 var _TabComponent = Tab;
-var TABS_ITEMS_BIND_TAB_ITEM_KEY = Symbol("TABS_ITEMS_BIND_TAB_ITEM_KEY");
-function useTabItem() {
-  var {
-    bindChildren,
-    childProviders,
-    length
-  } = useChildren(TABS_ITEMS_BIND_TAB_ITEM_KEY);
-  return {
-    length,
-    tabItemList: childProviders,
-    bindTabItem: bindChildren
-  };
-}
-function useTabsItems() {
-  var {
-    parentProvider,
-    bindParent,
-    index
-  } = useParent(TABS_ITEMS_BIND_TAB_ITEM_KEY);
-  if (!bindParent) {
-    error$1("TabItem", "<var-tab-item/> must in <var-tabs-items/>");
-  }
-  return {
-    index,
-    tabsItems: parentProvider,
-    bindTabsItems: bindParent
-  };
-}
 var props$5 = {
   name: {
     type: [String, Number]
@@ -22964,9 +22997,7 @@ function __render__$6(_ctx, _cache) {
       "var-tab-item-cover": ""
     },
     {
-      default: vue.withCtx(() => [_ctx.initSlot ? vue.renderSlot(_ctx.$slots, "default", {
-        key: 0
-      }) : vue.createCommentVNode("v-if", true)]),
+      default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
       _: 3
       /* FORWARDED */
     },
@@ -22981,30 +23012,27 @@ var __sfc__$6 = vue.defineComponent({
   },
   props: props$5,
   setup(props2) {
-    var current = vue.ref(false);
-    var initSlot = vue.ref(false);
-    var name = vue.computed(() => props2.name);
     var {
       index,
+      tabsItems,
       bindTabsItems
     } = useTabsItems();
-    var setCurrent = (value) => {
-      if (!initSlot.value && value) {
-        initSlot.value = true;
-      }
-      current.value = value;
-    };
+    var {
+      bindLists
+    } = useLists();
+    var name = vue.computed(() => props2.name);
+    var current = vue.computed(() => index.value === Number(tabsItems.active.value));
     var tabItemProvider = {
       index,
       name,
-      setCurrent
+      current
     };
     bindTabsItems(tabItemProvider);
+    bindLists(tabItemProvider);
     return {
       n: n$6,
       classes: classes$5,
-      current,
-      initSlot
+      current
     };
   }
 });
@@ -23501,29 +23529,30 @@ var __sfc__$3 = vue.defineComponent({
   props: props$2,
   setup(props2) {
     var swipe2 = vue.ref(null);
+    var active = vue.computed(() => props2.active);
     var {
       tabItemList,
       bindTabItem,
       length
-    } = useTabItem();
-    var matchName = (active) => {
+    } = useTabItem$1();
+    var matchName = (active2) => {
       return tabItemList.find((_ref) => {
         var {
           name
         } = _ref;
-        return active === name.value;
+        return active2 === name.value;
       });
     };
-    var matchIndex = (active) => {
+    var matchIndex = (active2) => {
       return tabItemList.find((_ref2) => {
         var {
           index
         } = _ref2;
-        return active === index.value;
+        return active2 === index.value;
       });
     };
-    var matchActive = (active) => {
-      return matchName(active) || matchIndex(active);
+    var matchActive = (active2) => {
+      return matchName(active2) || matchIndex(active2);
     };
     var handleActiveChange = (newValue) => {
       var _swipe$value;
@@ -23531,30 +23560,25 @@ var __sfc__$3 = vue.defineComponent({
       if (!newActiveTabItemProvider) {
         return;
       }
-      tabItemList.forEach((_ref3) => {
-        var {
-          setCurrent
-        } = _ref3;
-        return setCurrent(false);
-      });
-      newActiveTabItemProvider.setCurrent(true);
       (_swipe$value = swipe2.value) == null ? void 0 : _swipe$value.to(newActiveTabItemProvider.index.value);
     };
     var handleSwipeChange = (currentIndex) => {
       var _tabItem$name$value;
-      var tabItem2 = tabItemList.find((_ref4) => {
+      var tabItem2 = tabItemList.find((_ref3) => {
         var {
           index
-        } = _ref4;
+        } = _ref3;
         return index.value === currentIndex;
       });
-      var active = (_tabItem$name$value = tabItem2.name.value) != null ? _tabItem$name$value : tabItem2.index.value;
-      call(props2["onUpdate:active"], active);
+      var active2 = (_tabItem$name$value = tabItem2.name.value) != null ? _tabItem$name$value : tabItem2.index.value;
+      call(props2["onUpdate:active"], active2);
     };
     var getSwipe = () => {
       return swipe2.value;
     };
-    var tabsItemsProvider = {};
+    var tabsItemsProvider = {
+      active
+    };
     bindTabItem(tabsItemsProvider);
     vue.watch(() => props2.active, handleActiveChange);
     vue.watch(() => length.value, /* @__PURE__ */ _asyncToGenerator$1(function* () {
@@ -25397,9 +25421,9 @@ const skeleton = "";
 const SkeletonSfc = "";
 const slider = "";
 const SliderSfc = "";
-const SnackbarSfc = "";
 const snackbar = "";
 const coreSfc = "";
+const SnackbarSfc = "";
 const space = "";
 const step = "";
 const StepSfc = "";
@@ -25424,7 +25448,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.10.3-alpha.1683532936621";
+const version = "2.10.3-alpha.1683732401073";
 function install(app) {
   ActionSheet.install && app.use(ActionSheet);
   AppBar.install && app.use(AppBar);