@opentiny/vue-renderless 3.9.3 → 3.10.0

package/selected-box/index.js

@@ -169,7 +169,9 @@ const initDrag = ({ api, emit, markRaw, props, state, vm }) => () => {
     const { select } = state;
     if (from === to && oldIndex !== newIndex) {
       const optDoms = Array.from(vm.$el.querySelectorAll(optionSelector));
-      const slct = optDoms.map((optDom) => select.find((opt) => api.keyOption(opt) === api.keyType(optDom.dataset.key)));
+      const slct = optDoms.map(
+        (optDom) => select.find((opt) => api.keyOption(opt) === api.keyType(optDom.dataset.key))
+      );
       state.select = slct;
       state.refresh += 1;
       api.emitChange();

package/slider/index.js

@@ -9,7 +9,7 @@ const bindEvent = (api) => () => {
 };
 const unBindEvent = (api) => () => off(window, "resize", api.bindResize);
 const bindResize = ({ parent, props, state }) => () => {
-  const handleEl = parent.$el.querySelector("div[role=tiny-slider]");
+  const handleEl = parent.$el.querySelector("div.tiny-slider");
   state.sliderSize = handleEl["client" + (props.vertical ? "Height" : "Width")];
   state.sliderOffset = handleEl.getBoundingClientRect();
 };
@@ -266,11 +266,11 @@ const autoSlider = (api) => (value) => {
 };
 const customBeforeAppearHook = (props) => (el) => {
   if (props.vertical) {
-    el.style.bottom = "0%";
-    el.style.height = "0%";
+    el.style.bottom = 0 + "%";
+    el.style.height = 0 + "%";
   } else {
-    el.style.left = "0%";
-    el.style.width = "0%";
+    el.style.left = 0 + "%";
+    el.style.width = 0 + "%";
   }
 };
 const customAfterAppearHook = ({ state, props }) => (el) => {

package/slider/vue.js

@@ -118,6 +118,22 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     inputValueChange: inputValueChange({ props, api: api2, state })
   });
   watch(() => props.modelValue, api2.watchModelValue, { immediate: true });
+  watch(
+    () => props.min,
+    (min) => {
+      const value = Math.max(props.modelValue, min);
+      api2.initSlider(value);
+      api2.setActiveButtonValue(value);
+    }
+  );
+  watch(
+    () => props.max,
+    (max) => {
+      const value = Math.min(props.modelValue, max);
+      api2.initSlider(Math.min(props.modelValue, max));
+      api2.setActiveButtonValue(value);
+    }
+  );
   watch(() => state.activeValue, api2.watchActiveValue, { immediate: true });
   onMounted(() => {
     api2.bindEvent();

package/slider-button/index.js

@@ -0,0 +1,41 @@
+import "../chunk-PKUHTIDK.js";
+const handleChange = ({ constants, nextTick, dispatch, state }) => () => {
+  nextTick(() => {
+    dispatch(constants.SLIDER_BUTTON_GROUP, "handleChange", [state.value]);
+  });
+};
+const getValue = (state) => () => state.sliderButtonGroup.modelValue;
+const setValue = ({ state }) => (val) => state.sliderButtonGroup.$emit("update:modelValue", val);
+const getGroup = ({ constants, parent: $parent }) => () => {
+  let parent = $parent.$parent;
+  while (parent) {
+    if (parent.$options.componentName !== constants.SLIDER_BUTTON_GROUP) {
+      parent = parent.$parent;
+    } else {
+      return parent;
+    }
+  }
+  return parent;
+};
+const mounted = ({ vm, props, dispatch, constants }) => () => {
+  dispatch(constants.SLIDER_BUTTON_GROUP, "labelValue", [props.label || props.text]);
+  dispatch(constants.SLIDER_BUTTON_GROUP, "eachBlock", [
+    vm.$refs.sliderButton.offsetLeft,
+    vm.$refs.sliderButton.offsetWidth,
+    vm.$refs.sliderButton.offsetHeight
+  ]);
+};
+const customEvents = ({ props, vm, type }) => {
+  const sliderInput = vm.$refs.sliderInput;
+  for (let ev in props.events) {
+    sliderInput[type + "EventListener"](ev, props.events[ev]);
+  }
+};
+export {
+  customEvents,
+  getGroup,
+  getValue,
+  handleChange,
+  mounted,
+  setValue
+};

package/slider-button/vue.js

@@ -0,0 +1,36 @@
+import "../chunk-PKUHTIDK.js";
+import { handleChange, getValue, setValue, getGroup, mounted, customEvents } from "./index";
+const api = ["state", "handleChange"];
+const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmount }, { emit, parent, dispatch, constants, nextTick, vm }) => {
+  const state = reactive({
+    type: inject("sliderType", null),
+    value: computed({
+      get: () => api2.getValue(),
+      set: (val) => api2.setValue(val)
+    }),
+    sliderButtonGroup: computed(() => api2.getGroup()),
+    size: inject("sliderSize", null),
+    tabIndex: computed(() => state.sliderButtonGroup && state.value !== (props.label || props.text) ? -1 : 0)
+  });
+  const api2 = {};
+  Object.assign(api2, {
+    state,
+    mounted: mounted({ vm, props, dispatch, constants, state, nextTick }),
+    getValue: getValue(state),
+    setValue: setValue({ emit, state }),
+    getGroup: getGroup({ constants, parent }),
+    handleChange: handleChange({ constants, dispatch, nextTick, state })
+  });
+  onMounted(() => {
+    api2.mounted();
+    customEvents({ props, vm, type: "add" });
+  });
+  onBeforeUnmount(() => {
+    customEvents({ props, vm, type: "remove" });
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/slider-button-group/slide-button.js

@@ -0,0 +1,142 @@
+import "../chunk-PKUHTIDK.js";
+import debounce from "../common/deps/debounce";
+import { on, off } from "../common/deps/dom";
+const getButtonPosition = ({ sliderState }) => () => {
+  const { slideMainPostion, offsetList } = sliderState;
+  const array = offsetList.slice();
+  const length = array.length;
+  sliderState.boundingIndex = {
+    left: -1,
+    right: -1
+  };
+  for (let j = 0; j < length; j++) {
+    if (array[j].right > slideMainPostion.right + 2) {
+      sliderState.boundingIndex.right = j;
+      break;
+    }
+  }
+  for (let k = length - 1; k >= 0; k--) {
+    if (array[k].left < slideMainPostion.left) {
+      sliderState.boundingIndex.left = k;
+      break;
+    }
+  }
+};
+const arrowLeftHandler = ({ sliderState, api: api2 }) => () => {
+  const { canLeftScroll, slideMainPostion, offsetList, boundingIndex } = sliderState;
+  if (!canLeftScroll || sliderState.timer) {
+    return;
+  }
+  const leftPosition = boundingIndex.left !== -1 && offsetList[boundingIndex.left];
+  if (leftPosition) {
+    api2.animationEvents(leftPosition.left - slideMainPostion.left);
+  }
+};
+const arrowRightHandler = ({ sliderState, api: api2 }) => () => {
+  const { canRightScroll, slideMainPostion, offsetList, boundingIndex } = sliderState;
+  if (!canRightScroll || sliderState.timer) {
+    return;
+  }
+  const rightPosition = boundingIndex.right !== -1 && offsetList[boundingIndex.right];
+  if (rightPosition) {
+    api2.animationEvents(rightPosition.right - slideMainPostion.right);
+  }
+};
+const currentPosition = ({ sliderState, vm, props, api: api2 }) => debounce(10, (isInit) => {
+  sliderState.offsetList = props.data.map((item, i) => {
+    const itemsRef = vm.$refs["block" + i];
+    const itemsPosition = itemsRef && itemsRef[0].getBoundingClientRect() || {};
+    return Object.assign(itemsPosition, { i });
+  });
+  sliderState.slideMainPostion = vm.$refs.slideMain.getBoundingClientRect();
+  api2.getButtonPosition();
+  isInit === true && api2.currentPosition();
+});
+const loopAnimation = ({ sliderState, api: api2, vm }) => (offset, delay, scorllLeft, cb) => {
+  const sliderScrollLeft = vm.$refs.slideMain.scrollLeft;
+  clearTimeout(sliderState.timer);
+  if (sliderScrollLeft !== sliderState.oldScrollLeft && Math.abs(sliderScrollLeft - scorllLeft) > Math.abs(offset)) {
+    sliderState.timer = setTimeout(() => {
+      vm.$refs.slideMain.scrollLeft += offset;
+      sliderState.oldScrollLeft = sliderScrollLeft;
+      api2.loopAnimation(offset, delay, scorllLeft, cb);
+    }, delay);
+  } else {
+    sliderState.timer = null;
+    vm.$refs.slideMain.scrollLeft = scorllLeft;
+    cb && cb();
+  }
+};
+const animationEvents = ({ api: api2, vm, props }) => (allOffset) => {
+  const mathNumber = allOffset > 0 ? Math.ceil : Math.floor;
+  const offsetInt = mathNumber(allOffset);
+  const { duration, delay } = props;
+  if (!duration) {
+    vm.$refs.slideMain.scrollLeft += offsetInt;
+    api2.currentPosition();
+    return;
+  }
+  const space = mathNumber(offsetInt / (duration / delay));
+  const left = vm.$refs.slideMain.scrollLeft + offsetInt;
+  api2.loopAnimation(space, delay, left, () => {
+    api2.currentPosition();
+  });
+};
+const clickHandler = (api2) => () => {
+  api2.currentPosition();
+};
+const api = ["sliderState", "arrowLeftHandler", "arrowRightHandler", "currentPosition", "clickHandler"];
+const renderless = (props, { reactive, onMounted, onUnmounted, computed, watch }, { vm }) => {
+  const sliderState = reactive({
+    canLeftScroll: computed(() => !props.noArrow && sliderState.boundingIndex.left !== -1),
+    canRightScroll: computed(() => !props.noArrow && sliderState.boundingIndex.right !== -1),
+    timer: null,
+    offsetList: [],
+    slideMainPostion: {},
+    oldScrollLeft: -1,
+    sliderSpace: props.sliderSpace,
+    boundingIndex: {
+      left: -1,
+      right: -1
+    }
+  });
+  const api2 = {};
+  Object.assign(api2, {
+    sliderState,
+    arrowLeftHandler: arrowLeftHandler({ sliderState, api: api2 }),
+    arrowRightHandler: arrowRightHandler({ sliderState, api: api2 }),
+    animationEvents: animationEvents({ api: api2, vm, props }),
+    loopAnimation: loopAnimation({ sliderState, api: api2, vm }),
+    getButtonPosition: getButtonPosition({ sliderState, api: api2, vm }),
+    currentPosition: currentPosition({ sliderState, vm, props, api: api2 }),
+    clickHandler: clickHandler(api2)
+  });
+  onUnmounted(() => {
+    off(window, "resize", api2.currentPosition);
+  });
+  onMounted(() => {
+    api2.currentPosition(true);
+    on(window, "resize", api2.currentPosition);
+  });
+  watch(
+    () => props.sliderSpace,
+    (value, oldValue) => {
+      if (value > oldValue) {
+        if (props.currentIndex >= sliderState.boundingIndex.right) {
+          api2.arrowRightHandler();
+        }
+      }
+      if (value < oldValue) {
+        if (props.currentIndex <= sliderState.boundingIndex.left) {
+          api2.arrowLeftHandler();
+        }
+      }
+      api2.currentPosition();
+    }
+  );
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/slider-button-group/vue.js

@@ -0,0 +1,52 @@
+import "../chunk-PKUHTIDK.js";
+const api = ["state"];
+const renderless = (props, { reactive, provide }, { parent }) => {
+  const state = reactive({
+    tag: "div",
+    isActive: false,
+    eachBlock: [],
+    sliderWidth: 0,
+    sliderHeight: 0,
+    sliderSpace: props.size === "large" ? 4 : 2,
+    sliderWidthData: [],
+    sliderHeightData: [],
+    eachBlockIndex: [],
+    eachBlockData: {},
+    currentIndex: 0,
+    sliderCount: 0
+  });
+  parent.$on("handleChange", (value) => {
+    state.eachBlockIndex.find((e, index) => {
+      if (e.index === value) {
+        state.currentIndex = index;
+      }
+    });
+    state.sliderSpace = state.eachBlock[state.currentIndex];
+    state.sliderWidth = state.sliderWidthData[state.currentIndex];
+    state.sliderHeight = state.sliderHeightData[state.currentIndex];
+    parent.$emit("change", value);
+    state.sliderCount += 1;
+  });
+  parent.$on("labelValue", (value) => {
+    state.eachBlockIndex.push({ index: value });
+    if (props.modelValue === value) {
+      state.isActive = true;
+    }
+  });
+  parent.$on("eachBlock", (left, width, height) => {
+    state.eachBlock.push(left);
+    state.sliderWidthData.push(width);
+    state.sliderHeightData.push(height);
+    state.sliderWidth = state.sliderWidthData[0];
+    state.sliderHeight = state.sliderHeightData[0];
+  });
+  const api2 = {};
+  Object.assign(api2, { state });
+  provide("sliderType", props.type);
+  provide("sliderSize", props.size);
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/steps/slide-bar.js

@@ -99,7 +99,6 @@ const renderless = (props, { reactive, onMounted, onUnmounted, computed }, { vm
   const api2 = {};
   Object.assign(api2, {
     slideBarState: state,
-    // 内部 state 重命名，避免使用插槽时 state 覆盖问题
     leftSlideHandler: leftSlideHandler({ state, api: api2 }),
     rightSlideHandler: rightSlideHandler({ state, api: api2 }),
     animationHandler: animationHandler({ api: api2, vm, props }),

package/switch/index.js

@@ -2,7 +2,7 @@ import "../chunk-PKUHTIDK.js";
 import { isNull } from "../common/type";
 const toggle = ({ emit, props, state }) => (event) => {
   event.preventDefault();
-  if (state.disabled) {
+  if (state.disabled || props.types === "loading") {
     return false;
   }
   const change = () => {

package/switch/vue.js

@@ -13,7 +13,7 @@ const renderless = (props, { computed, watch, reactive, inject }, { parent, cons
     wrapClasses: computed(() => api2.computedWarpClasses()),
     style: computed(() => api2.computedStyle()),
     formDisabled: computed(() => (parent.tinyForm || {}).disabled),
-    disabled: computed(() => props.disabled || state.formDisabled),
+    disabled: computed(() => props.disabled || state.formDisabled || state.isDisplayOnly),
     isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly),
     showText: computed(() => {
       if (props.showText === void 0) {

package/tab-bar/index.js

@@ -9,23 +9,26 @@ const computedBarStyle = (parent) => (props, state) => {
   const sizeDir = sizeName === "width" ? "x" : "y";
   props.tabs.every(({ state: state2 }) => {
     const $el = parent.$refs[`tabs-${state2.paneName}`];
-    if (!$el)
+    if (!$el) {
       return false;
+    }
+    const barLength = $el.getBoundingClientRect()[sizeName];
+    const barMarginRight = parseFloat(window.getComputedStyle($el).marginRight);
     if (!state2.active) {
-      if ($el[`client${capitalize(sizeName)}`] === 0) {
+      if ($el.getBoundingClientRect().width === 0) {
         const unactive = $el.cloneNode(true);
         document.body.appendChild(unactive);
         const unactiveSty = window.getComputedStyle(unactive);
-        offset += parseFloat(unactiveSty.width) - parseFloat(unactiveSty.paddingRight);
+        offset += parseFloat(unactiveSty[sizeName]) - parseFloat(unactiveSty.marginRight);
         document.body.removeChild(unactive);
       } else {
-        offset += $el[`client${capitalize(sizeName)}`];
+        offset += sizeName === "height" ? barLength : barLength + barMarginRight;
       }
       return true;
     } else {
       const copyEl = $el.cloneNode(true);
       const eleStyle = window.getComputedStyle(copyEl);
-      tabSize = $el[`client${capitalize(sizeName)}`];
+      tabSize = barLength;
       if (tabSize === 0) {
         document.body.appendChild(copyEl);
         tabSize = parseFloat(eleStyle.width) - parseFloat(eleStyle.paddingLeft) - parseFloat(eleStyle.paddingRight);
@@ -39,7 +42,6 @@ const computedBarStyle = (parent) => (props, state) => {
         }
       }
     }
-    return false;
   });
   const transform = `translate${capitalize(sizeDir)}(${offset}px)`;
   style[sizeName] = tabSize + "px";

package/tab-nav/index.js

@@ -33,7 +33,7 @@ const scrollIntoView = ({ parent, refs, state }) => () => {
 };
 const computedSizeName = (state) => ~[POSITION.Top, POSITION.Bottom].indexOf(state.rootTabs.position) ? "width" : "height";
 const updated = ({ api, refs, state }) => () => {
-  if (!refs.nav) {
+  if (!refs.nav || state.dragging) {
     return;
   }
   let navSize = refs.nav[`offset${capitalize(state.sizeName)}`];
@@ -66,6 +66,12 @@ const updated = ({ api, refs, state }) => () => {
     }
   }
   state.isActive && api.scrollIntoView();
+  if (refs.tabBar) {
+    refs.tabBar.state.barStyle = refs.tabBar.computedBarStyle(refs.tabBar, state);
+  } else {
+    const line = refs.nav.querySelector("tiny-mobile-tabs__line");
+    line && line.style && (line.style.transform = api.computedNavStyle(state).transform);
+  }
 };
 const mounted = ({ api, parent }) => {
   const el = parent.$refs.nav.$el;
@@ -209,14 +215,14 @@ const computedHeaderStyle = ({ refs, state }) => () => {
   }
   return state.expandHeaderStyle;
 };
-const handleTabDragStart = ({ state, vm, emit }) => (event) => {
+const handleTabDragStart = ({ state, refs, emit }) => (event) => {
   state.dragging = true;
-  if ([POSITION.Top, POSITION.Bottom].indexOf(state.rootTabs.position) === -1) {
+  if (![POSITION.Top, POSITION.Bottom].includes(state.rootTabs.position)) {
     emit("tab-drag-start", event);
     return;
   }
-  const navContainer = vm.$refs.navScroll;
-  const nav = vm.$refs.nav;
+  const navContainer = refs.navScroll;
+  const nav = refs.nav;
   const containerWidth = navContainer.offsetWidth;
   const navWidth = nav.offsetWidth;
   if (navWidth > containerWidth) {
@@ -230,15 +236,15 @@ const handleTabDragStart = ({ state, vm, emit }) => (event) => {
   }
   emit("tab-drag-start", event);
 };
-const handleTabDragEnd = ({ vm, state, nextTick }) => () => {
+const handleTabDragEnd = ({ refs, state, nextTick }) => () => {
   state.dragging = false;
-  if ([POSITION.Top, POSITION.Bottom].indexOf(state.rootTabs.position) === -1) {
+  if (![POSITION.Top, POSITION.Bottom].includes(state.rootTabs.position)) {
     return;
   }
-  const nav = vm.$refs.nav;
+  const nav = refs.nav;
   if (nav.style.width) {
     const navOffset = nav.scrollLeft;
-    const navContainer = vm.$refs.navScroll;
+    const navContainer = refs.navScroll;
     navContainer.style.height = "";
     nav.style.width = "";
     nav.style.overflowX = "";
@@ -248,11 +254,11 @@ const handleTabDragEnd = ({ vm, state, nextTick }) => () => {
     });
   }
 };
-const sortableEvent = ({ api, props, state, vm, emit, markRaw }) => () => {
+const sortableEvent = ({ api, props, state, refs, emit, markRaw }) => () => {
   if (!props.dropConfig || typeof props.dropConfig.plugin !== "function") {
     return;
   }
-  const navSortableObj = new props.dropConfig.plugin(vm.$refs.nav, {
+  const navSortableObj = new props.dropConfig.plugin(refs.nav, {
     sort: true,
     draggable: ".tiny-tabs__item",
     onUpdate(event) {
@@ -270,9 +276,9 @@ const sortableEvent = ({ api, props, state, vm, emit, markRaw }) => () => {
   });
   state.navSortableObj = markRaw(navSortableObj);
 };
-const watchCurrentName = ({ nextTick, vm, state }) => () => {
+const watchCurrentName = ({ nextTick, refs, state }) => () => {
   nextTick(() => {
-    const tabBarVnode = vm.$refs.tabBar;
+    const tabBarVnode = refs.tabBar;
     if (tabBarVnode) {
       tabBarVnode.state.barStyle = tabBarVnode.computedBarStyle(tabBarVnode, state);
     }

package/tab-nav/vue.js

@@ -39,9 +39,10 @@ const api = [
   "computedHeaderStyle",
   "swiperHandle"
 ];
-const renderless = (props, { computed, inject, onBeforeUnmount, onMounted, onUpdated, reactive, markRaw }, { parent, vm, nextTick, refs, mode: tinyMode, emit }) => {
+const renderless = (props, { computed, inject, onBeforeUnmount, onMounted, onUpdated, reactive, markRaw }, { parent, nextTick, refs, mode: tinyMode, emit }) => {
   const api2 = { mounted, beforeUnmount, computedNavStyle, computedSizeName };
   const state = reactive({
+    dragging: false,
     navOffset: 0,
     lineOffset: 0,
     scrollable: false,
@@ -53,7 +54,7 @@ const renderless = (props, { computed, inject, onBeforeUnmount, onMounted, onUpd
     showExpandItem: false,
     showExpandTabs: props.showExpandTabs,
     expandHeaderStyle: {},
-    mode: props._mode || parent.$mode || (tinyMode || "pc"),
+    mode: props._mode || parent.$mode || tinyMode || "pc",
     rootTabs: inject("rootTabs"),
     sizeName: computed(() => api2.computedSizeName(state)),
     navStyle: computed(() => api2.computedNavStyle(state))
@@ -70,15 +71,15 @@ const renderless = (props, { computed, inject, onBeforeUnmount, onMounted, onUpd
     windowBlurHandler: windowBlurHandler(state),
     windowFocusHandler: windowFocusHandler(state),
     visibilityChangeHandler: visibilityChangeHandler(state),
-    scrollToActiveTab: scrollToActiveTab({ props, parent, refs, state }),
-    scrollIntoView: scrollIntoView({ props, parent, refs, state }),
+    scrollToActiveTab: scrollToActiveTab({ parent, refs, state }),
+    scrollIntoView: scrollIntoView({ parent, refs, state }),
     computedHeaderStyle: computedHeaderStyle({ refs, state }),
-    watchCurrentName: watchCurrentName({ nextTick, vm, state }),
-    handleTabDragStart: handleTabDragStart({ state, vm, emit }),
-    handleTabDragEnd: handleTabDragEnd({ state, vm, nextTick }),
-    sortableEvent: sortableEvent({ api: api2, props, state, vm, emit, markRaw })
+    watchCurrentName: watchCurrentName({ nextTick, refs, state }),
+    handleTabDragStart: handleTabDragStart({ state, refs, emit }),
+    handleTabDragEnd: handleTabDragEnd({ state, refs, nextTick }),
+    sortableEvent: sortableEvent({ api: api2, props, state, refs, emit, markRaw })
   });
-  Object.assign(api2, { updated: updated({ api: api2, props, refs, state }), changeTab: changeTab(api2) });
+  Object.assign(api2, { updated: updated({ api: api2, refs, state }), changeTab: changeTab(api2) });
   onUpdated(() => api2.updated());
   onMounted(() => api2.mounted({ api: api2, parent }));
   onBeforeUnmount(() => api2.beforeUnmount({ api: api2, parent }));

package/tabs/index.js

@@ -27,23 +27,31 @@ const calcPaneInstances = ({ constants, parent, state, childrenHandler }) => (is
     state.panes = [];
   }
 };
-const calcMorePanes = ({ parent, props, state, refs }) => () => {
+const calcMorePanes = ({ parent, props, state, refs, nextTick }) => () => {
   if (!props.showMoreTabs) {
     return;
   }
   const el = parent.$el;
   const tabs = el.querySelectorAll(".tiny-tabs__item");
-  const navRef = refs.nav.$refs;
-  const NavWidth = navRef.nav.offsetWidth || 0;
-  const tabsHeaderWidth = navRef.navScroll.offsetWidth || 0;
-  if (NavWidth > tabsHeaderWidth) {
-    for (let i = 0; i < tabs.length; i++) {
-      const isHiddenWidth = tabs[i].offsetLeft + tabs[i].offsetWidth / 2;
-      if (isHiddenWidth > tabsHeaderWidth) {
-        state.showPanesCount = i;
-        break;
-      }
-    }
+  const tabNavRefs = refs.nav.$refs;
+  if (tabs && tabs.length) {
+    nextTick(() => {
+      nextTick(() => {
+        let tabsAllWidth = 0;
+        for (let i = 0; i < tabs.length; i++) {
+          tabsAllWidth = tabs[i].offsetLeft + tabs[i].offsetWidth / 2;
+          const tabsHeaderWidth = tabNavRefs.navScroll.offsetWidth;
+          if (tabsAllWidth > tabsHeaderWidth) {
+            if (state.currentName >= i + 1) {
+              state.showPanesCount = state.currentName - 0;
+            } else {
+              state.showPanesCount = i;
+            }
+            break;
+          }
+        }
+      });
+    });
   }
 };
 const calcExpandPanes = ({ parent, props, state }) => () => {
@@ -99,11 +107,7 @@ const changeCurrentName = ({ emit, state }) => (value) => {
   emit("update:modelValue", value);
 };
 const created = ({ api, parent, state }) => () => {
-  if (!state.currentName) {
-    state.currentIndex = 0;
-    api.setCurrentName("0");
-  }
-  api.changeDirection(state.currentName || "0");
+  api.changeDirection(state.currentName);
   parent.$on("tab-nav-update", api.calcPaneInstances.bind(null, true));
 };
 const changeDirection = ({ props, state }) => (currentName) => {

package/tabs/vue.js

@@ -72,7 +72,7 @@ const renderless = (props, { onMounted, onUpdated, provide, reactive, watch }, {
     handleTabRemove: handleTabRemove(emit),
     changeDirection: changeDirection({ props, state }),
     changeCurrentName: changeCurrentName({ emit, state }),
-    calcMorePanes: calcMorePanes({ parent, props, state, refs }),
+    calcMorePanes: calcMorePanes({ parent, props, state, refs, nextTick }),
     calcExpandPanes: calcExpandPanes({ parent, props, state }),
     calcPaneInstances: calcPaneInstances({ constants, parent, state, childrenHandler }),
     handleTabDragStart: handleTabDragStart({ emit }),
@@ -85,9 +85,6 @@ const renderless = (props, { onMounted, onUpdated, provide, reactive, watch }, {
   api2.created();
   provide("rootTabs", parent);
   initWatcher({ watch, props, api: api2, state, nextTick, refs });
-  if (!state.currentName) {
-    api2.setCurrentName("0");
-  }
   onMounted(() => {
     api2.calcPaneInstances();
     api2.calcMorePanes();

package/tag/vue.js

@@ -8,10 +8,11 @@ const renderless = (props, { reactive, computed }, { emit, parent }) => {
     selected: false
   });
   const api2 = {
+    state,
     handleClose: handleClose({ emit, props, state }),
     handleClick: handleClick({ emit, props, parent, state })
   };
-  return Object.assign(api2, { state });
+  return api2;
 };
 export {
   api,