@opentiny/vue-renderless 3.10.7 → 3.11.0

package/split/index.js

@@ -1,7 +1,7 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 const px2percent = ({ numerator, denominator }) => parseFloat(numerator) / parseFloat(denominator);
-const getComputedThresholdValue = ({ api, props, refs, state }) => (type) => {
-  const size = refs.outerWrapper[state.offsetSize];
+const getComputedThresholdValue = ({ api, props, vm, state }) => (type) => {
+  const size = vm.$refs.outerWrapper[state.offsetSize];
   if (state.valueIsPx) {
     return typeof props[type] === "string" ? props[type] : size * props[type];
   } else {
@@ -10,11 +10,11 @@ const getComputedThresholdValue = ({ api, props, refs, state }) => (type) => {
 };
 const getleftTopMin = (state) => ({ oldvalue, newvalue }) => state.valueIsPx ? `${Math.min(parseFloat(oldvalue), parseFloat(newvalue))}px` : Math.min(oldvalue, newvalue);
 const getrightBottomMin = (state) => ({ oldvalue, newvalue }) => state.valueIsPx ? `${Math.max(parseFloat(oldvalue), parseFloat(newvalue))}px` : Math.max(oldvalue, newvalue);
-const getAnotherOffset = ({ refs, state }) => (value) => state.valueIsPx ? `${refs.outerWrapper[state.offsetSize] - parseFloat(value)}px` : 1 - value;
-const handleMove = ({ api, emit, props, refs, state }) => (event) => {
+const getAnotherOffset = ({ vm, state }) => (value) => state.valueIsPx ? `${vm.$refs.outerWrapper[state.offsetSize] - parseFloat(value)}px` : 1 - value;
+const handleMove = ({ api, emit, props, vm, state }) => (event) => {
   const pageOffset = state.isHorizontal ? event.pageX : event.pageY;
   const offset = pageOffset - state.initOffset;
-  const outerWidth = refs.outerWrapper[state.offsetSize];
+  const outerWidth = vm.$refs.outerWrapper[state.offsetSize];
   let value = state.valueIsPx ? `${parseFloat(state.oldOffset) + offset}px` : api.px2percent({ numerator: outerWidth * state.oldOffset + offset, denominator: outerWidth });
   const anotherValue = api.getAnotherOffset(value);
   if (parseFloat(value) <= parseFloat(state.computedleftTopMin)) {
@@ -33,6 +33,7 @@ const handleMove = ({ api, emit, props, refs, state }) => (event) => {
   }
   event.atMin = props.modelValue === state.computedleftTopMin;
   event.atMax = state.valueIsPx ? api.getAnotherOffset(props.modelValue) === state.computedrightBottomMin : api.getAnotherOffset(props.modelValue).toFixed(5) === state.computedrightBottomMin.toFixed(5);
+  state.leftTopPane = outerWidth * value;
   emit("update:modelValue", value);
   emit("moving", event);
 };
@@ -42,39 +43,81 @@ const handleUp = ({ api, emit, off, state }) => () => {
   off(document, "mouseup", api.handleUp);
   emit("moveend");
 };
-const handleMousedown = ({ api, emit, on, props, state }) => (event) => {
-  if (state.collapsed)
-    return;
-  state.initOffset = state.isHorizontal ? event.pageX : event.pageY;
-  state.oldOffset = props.modelValue;
-  state.isMoving = true;
-  on(document, "mousemove", api.handleMove);
-  on(document, "mouseup", api.handleUp);
-  emit("movestart");
+const handleMousedown = ({ api, emit, on, props, state, vm }) => (event) => {
+  if (state.dragable) {
+    state.initOffset = state.isHorizontal ? event.pageX : event.pageY;
+    if (state.offset === 0) {
+      state.oldOffset = 0;
+    } else if (state.offset === 100) {
+      state.oldOffset = 1;
+    } else {
+      if (props.threeAreas) {
+        state.totalPane = vm.$refs.outerWrapper[state.offsetSize];
+        let val = api.px2percent({ numerator: state.leftTopPane, denominator: state.totalPane });
+        state.oldOffset = val;
+        emit("update:modelValue", val);
+      } else {
+        state.oldOffset = props.modelValue;
+      }
+    }
+    state.isMoving = true;
+    on(document, "mousemove", api.handleMove);
+    on(document, "mouseup", api.handleUp);
+    emit("movestart");
+  }
+};
+const buttonMousedown = () => (event) => {
+  event.stopPropagation();
+};
+const buttonLeftTopClick = ({ emit, props, state }) => () => {
+  if (state.offset === 100) {
+    state.offset = state.lastClickOffset;
+    emit("update:modelValue", state.lastmodelValue);
+  } else if (state.offset !== 0) {
+    state.lastClickOffset = state.offset;
+    state.offset = 0;
+    state.lastmodelValue = props.modelValue;
+    emit("update:modelValue", 0);
+  }
+  emit("left-top-click");
 };
-const computeOffset = ({ api, nextTick, props, refs, state }) => () => {
+const buttonRightBottomClick = ({ emit, props, state }) => () => {
+  if (state.offset === 0) {
+    state.offset = state.lastClickOffset;
+    emit("update:modelValue", state.lastmodelValue);
+  } else if (state.offset !== 100) {
+    state.lastClickOffset = state.offset;
+    state.offset = 100;
+    state.lastmodelValue = props.modelValue;
+    emit("update:modelValue", 1);
+  }
+  emit("right-bottom-click");
+};
+const computeOffset = ({ api, nextTick, props, vm, state }) => () => {
+  setTimeout(() => {
+    state.totalPane = vm.$refs.outerWrapper[state.offsetSize];
+    state.leftTopPane = state.totalPane * (state.offset / 100);
+  });
   if (state.valueIsPx) {
     nextTick(() => {
       state.offset = api.px2percent({
         numerator: props.modelValue,
-        denominator: refs.outerWrapper && refs.outerWrapper[state.offsetSize]
+        denominator: vm.$refs.outerWrapper && vm.$refs.outerWrapper[state.offsetSize]
       }) * 1e4 / 100;
     });
   } else {
     state.offset = props.modelValue * 1e4 / 100;
   }
 };
-const handleCollapse = ({ emit, state }) => () => {
-  state.collapsed = !state.collapsed;
-  emit("collapsedChange", state.collapsed);
-};
 export {
+  buttonLeftTopClick,
+  buttonMousedown,
+  buttonRightBottomClick,
   computeOffset,
   getAnotherOffset,
   getComputedThresholdValue,
   getleftTopMin,
   getrightBottomMin,
-  handleCollapse,
   handleMousedown,
   handleMove,
   handleUp,

package/split/vue.js

@@ -1,7 +1,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "../chunk-PKUHTIDK.js";
+} from "../chunk-G2ADBYYC.js";
 import {
   px2percent,
   getComputedThresholdValue,
@@ -11,12 +11,51 @@ import {
   handleMove,
   handleUp,
   handleMousedown,
-  computeOffset,
-  handleCollapse
+  buttonMousedown,
+  buttonLeftTopClick,
+  buttonRightBottomClick,
+  computeOffset
 } from "./index";
 import { on, off } from "../common/deps/dom";
-const api = ["state", "handleMousedown", "handleCollapse"];
-const useOffset = ({ nextTick, props, refs, constants, hooks }) => {
+const api = ["state", "handleMousedown", "buttonMousedown", "buttonLeftTopClick", "buttonRightBottomClick"];
+const renderless = (props, hooks, { vm, nextTick, emit, constants }) => {
+  const api2 = {};
+  const { computed, reactive } = hooks;
+  const getUseOffset = useOffset({ nextTick, props, vm, constants, hooks });
+  const state = reactive(__spreadValues({
+    lastClickOffset: 50,
+    lastmodelValue: 0.5,
+    oldOffset: 0,
+    initOffset: 0,
+    isMoving: false,
+    prefix: constants.PREFIX,
+    computedleftTopMin: computed(() => api2.getComputedThresholdValue("leftTopMin")),
+    computedrightBottomMin: computed(() => api2.getComputedThresholdValue("rightBottomMin")),
+    wrapperClasses: computed(() => [`${state.prefix}-wrapper`, state.isMoving ? "no-select" : ""]),
+    paneClasses: computed(() => [`${state.prefix}-pane`, { [`${state.prefix}-pane-moving`]: state.isMoving }]),
+    dragable: !props.disabled,
+    triggerSimple: props.triggerSimple,
+    collapseLeftTop: props.collapseLeftTop,
+    collapseRightBottom: props.collapseRightBottom,
+    isThreeAreas: props.threeAreas
+  }, getUseOffset.state));
+  Object.assign(api2, __spreadProps(__spreadValues({
+    state,
+    getleftTopMin: getleftTopMin(state),
+    getrightBottomMin: getrightBottomMin(state)
+  }, getUseOffset.api), {
+    handleUp: handleUp({ api: api2, emit, off, state }),
+    getAnotherOffset: getAnotherOffset({ vm, state }),
+    handleMove: handleMove({ api: api2, emit, props, vm, state }),
+    handleMousedown: handleMousedown({ api: api2, emit, on, props, state, vm }),
+    buttonMousedown: buttonMousedown(),
+    buttonLeftTopClick: buttonLeftTopClick({ emit, props, state }),
+    buttonRightBottomClick: buttonRightBottomClick({ emit, props, state }),
+    getComputedThresholdValue: getComputedThresholdValue({ api: api2, props, vm, state })
+  }));
+  return api2;
+};
+const useOffset = ({ nextTick, props, vm, constants, hooks }) => {
   const api2 = {};
   const { computed, onMounted, onUnmounted, reactive, toRefs, watch } = hooks;
   const state = reactive({
@@ -24,11 +63,13 @@ const useOffset = ({ nextTick, props, refs, constants, hooks }) => {
     anotherOffset: computed(() => 100 - state.offset),
     valueIsPx: computed(() => typeof props.modelValue === "string"),
     isHorizontal: computed(() => props.mode === constants.HORIZONTAL),
-    offsetSize: computed(() => state.isHorizontal ? "offsetWidth" : "offsetHeight")
+    offsetSize: computed(() => state.isHorizontal ? "offsetWidth" : "offsetHeight"),
+    leftTopPane: 0,
+    totalPane: 0
   });
   Object.assign(api2, {
     px2percent,
-    computeOffset: computeOffset({ api: api2, nextTick, props, refs, state })
+    computeOffset: computeOffset({ api: api2, nextTick, props, vm, state })
   });
   watch(() => props.modelValue, api2.computeOffset, { immediate: true });
   onMounted(() => {
@@ -42,40 +83,6 @@ const useOffset = ({ nextTick, props, refs, constants, hooks }) => {
     state: toRefs(state)
   };
 };
-const renderless = (props, hooks, { refs, nextTick, emit, constants }) => {
-  const api2 = {};
-  const { computed, reactive } = hooks;
-  const getUseOffset = useOffset({ nextTick, props, refs, constants, hooks });
-  const state = reactive(__spreadValues({
-    oldOffset: 0,
-    initOffset: 0,
-    isMoving: false,
-    prefix: constants.PREFIX,
-    computedleftTopMin: computed(() => api2.getComputedThresholdValue("leftTopMin")),
-    computedrightBottomMin: computed(() => api2.getComputedThresholdValue("rightBottomMin")),
-    wrapperClasses: computed(() => [state.prefix, `${state.prefix}-wrapper`, state.isMoving ? "no-select" : ""]),
-    paneClasses: computed(() => [`${state.prefix}-pane`, { [`${state.prefix}-pane-moving`]: state.isMoving }]),
-    collapsed: false
-  }, getUseOffset.state));
-  Object.assign(api2, __spreadProps(__spreadValues({
-    state,
-    getleftTopMin: getleftTopMin(state),
-    getrightBottomMin: getrightBottomMin(state)
-  }, getUseOffset.api), {
-    handleUp: handleUp({ api: api2, emit, off, state }),
-    getAnotherOffset: getAnotherOffset({ refs, state }),
-    handleMove: handleMove({ api: api2, emit, props, refs, state }),
-    handleMousedown: handleMousedown({ api: api2, emit, on, props, state }),
-    handleCollapse: handleCollapse({ emit, state }),
-    getComputedThresholdValue: getComputedThresholdValue({
-      api: api2,
-      props,
-      refs,
-      state
-    })
-  }));
-  return api2;
-};
 export {
   api,
   renderless,

package/standard-list-item/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 const handleEnterDesc = ({ state, props }) => ($event) => {
   const target = $event.target;
   if (target && target.scrollHeight > target.offsetHeight) {

package/standard-list-item/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { handleEnterDesc, handelIconClick } from "./index";
 const api = ["state", "handelIconClick", "handleEnterDesc"];
 const renderless = (props, { computed, reactive }, { emit }) => {

package/steps/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 const updateStartIndex = ({ state, props }) => () => {
   const { visibleNum, active } = props;
   const maxStartIndex = Math.min(props.data.length - visibleNum, active - Math.floor(visibleNum / 2));

package/steps/slide-bar.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import debounce from "../common/deps/debounce";
 import { on, off } from "../common/deps/dom";
 const getBoundingPosition = ({ state }) => () => {
@@ -99,6 +99,7 @@ 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/steps/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { updateStartIndex, isVisibleHandler, computedRightNodePos, computedSpace } from "./index";
 const api = ["state", "isVisibleHandler"];
 const renderless = (props, { reactive, watch, computed }) => {
@@ -9,12 +9,13 @@ const renderless = (props, { reactive, watch, computed }) => {
     computedSpace: computed(() => computedSpace({ props }))
   });
   const api2 = {
+    state,
     updateStartIndex: updateStartIndex({ state, props }),
     isVisibleHandler: isVisibleHandler({ state, props }),
     computedRightNodePos: computedRightNodePos({ state, props })
   };
   watch(() => props.active, api2.updateStartIndex, { immediate: true });
-  return Object.assign(api2, { state });
+  return api2;
 };
 export {
   api,

package/switch/index.js

@@ -1,9 +1,8 @@
-import "../chunk-PKUHTIDK.js";
-import { isNull } from "../common/type";
+import "../chunk-G2ADBYYC.js";
 const toggle = ({ emit, props, state }) => (event) => {
   event.preventDefault();
   if (state.disabled || props.types === "loading") {
-    return false;
+    return;
   }
   const change = () => {
     state.currentValue = state.currentValue === props.trueValue ? props.falseValue : props.trueValue;
@@ -13,8 +12,8 @@ const toggle = ({ emit, props, state }) => (event) => {
   props.beforeChange ? props.beforeChange(change) : change();
 };
 const computedWarpClasses = ({ prefixCls, props, state }) => () => [
-  `${prefixCls}`,
   {
+    [prefixCls]: true,
     [`${prefixCls}-checked`]: state.currentValue === props.trueValue,
     [`${prefixCls}-disabled`]: state.disabled,
     mini: props.mini,
@@ -23,13 +22,8 @@ const computedWarpClasses = ({ prefixCls, props, state }) => () => [
 ];
 const computedInnerClasses = ({ prefixCls }) => () => `${prefixCls}-inner`;
 const computedStyle = ({ props, state }) => () => {
-  let size = "";
-  if (!isNull(props.modelValue)) {
-    size = typeof props.modelValue === "number" ? `${props.modelValue}px` : props.modelValue;
-  }
   return {
-    fontSize: size,
-    backgroundColor: props.trueValue === state.currentValue ? props.activeColor : props.inactiveColor
+    backgroundColor: props.trueValue === state.currentValue ? props.trueColor : props.falseColor
   };
 };
 export {

package/switch/vue.js

@@ -1,12 +1,9 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { toggle, computedWarpClasses, computedInnerClasses, computedStyle } from "./index";
 const api = ["toggle", "state"];
 const renderless = (props, { computed, watch, reactive, inject }, { parent, constants, mode, emit, designConfig }) => {
   const prefixCls = constants.prefixcls(mode);
   parent.tinyForm = parent.tinyForm || inject("form", null);
-  const api2 = {
-    computedInnerClasses: computedInnerClasses({ prefixCls })
-  };
   const state = reactive({
     currentValue: props.modelValue,
     innerClasses: computed(() => api2.computedInnerClasses()),
@@ -23,12 +20,13 @@ const renderless = (props, { computed, watch, reactive, inject }, { parent, cons
       }
     })
   });
-  Object.assign(api2, {
+  const api2 = {
     state,
+    computedInnerClasses: computedInnerClasses({ prefixCls }),
     computedStyle: computedStyle({ props, state }),
     computedWarpClasses: computedWarpClasses({ prefixCls, props, state }),
     toggle: toggle({ emit, props, state })
-  });
+  };
   watch(
     () => props.modelValue,
     (value) => {

package/tab-bar/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { POSITION } from "../common";
 import { capitalize } from "../common/string";
 const computedBarStyle = (parent) => (props, state) => {
@@ -7,42 +7,44 @@ const computedBarStyle = (parent) => (props, state) => {
   let tabSize = 0;
   const sizeName = ~[POSITION.Top, POSITION.Bottom].indexOf(state.rootTabs.position) ? "width" : "height";
   const sizeDir = sizeName === "width" ? "x" : "y";
-  props.tabs.every(({ state: state2 }) => {
-    const $el = parent.$refs[`tabs-${state2.paneName}`];
-    if (!$el) {
-      return false;
-    }
-    const barLength = $el.getBoundingClientRect()[sizeName];
-    const barMarginRight = parseFloat(window.getComputedStyle($el).marginRight);
-    if (!state2.active) {
-      if ($el.getBoundingClientRect().width === 0) {
-        const unactive = $el.cloneNode(true);
-        document.body.appendChild(unactive);
-        const unactiveSty = window.getComputedStyle(unactive);
-        offset += parseFloat(unactiveSty[sizeName]) - parseFloat(unactiveSty.marginRight);
-        document.body.removeChild(unactive);
-      } else {
-        offset += sizeName === "height" ? barLength : barLength + barMarginRight;
+  if (props.tabs && props.tabs.length) {
+    props.tabs.every(({ state: state2 }) => {
+      const $el = parent.$refs[`tabs-${state2.paneName}`];
+      if (!$el) {
+        return false;
       }
-      return true;
-    } else {
-      const copyEl = $el.cloneNode(true);
-      const eleStyle = window.getComputedStyle(copyEl);
-      tabSize = barLength;
-      if (tabSize === 0) {
-        document.body.appendChild(copyEl);
-        tabSize = parseFloat(eleStyle.width) - parseFloat(eleStyle.paddingLeft) - parseFloat(eleStyle.paddingRight);
-        document.body.removeChild(copyEl);
+      const barLength = $el.getBoundingClientRect()[sizeName];
+      const barMarginRight = parseFloat(window.getComputedStyle($el).marginRight);
+      if (!state2.active) {
+        if ($el.getBoundingClientRect().width === 0) {
+          const unactive = $el.cloneNode(true);
+          document.body.appendChild(unactive);
+          const unactiveSty = window.getComputedStyle(unactive);
+          offset += parseFloat(unactiveSty[sizeName]) - parseFloat(unactiveSty.marginRight);
+          document.body.removeChild(unactive);
+        } else {
+          offset += sizeName === "height" ? barLength : barLength + barMarginRight;
+        }
+        return true;
       } else {
-        if (sizeName === "width") {
+        const copyEl = $el.cloneNode(true);
+        const eleStyle = window.getComputedStyle(copyEl);
+        tabSize = barLength;
+        if (tabSize === 0) {
           document.body.appendChild(copyEl);
-          tabSize -= parseFloat(eleStyle.paddingRight);
+          tabSize = parseFloat(eleStyle.width) - parseFloat(eleStyle.paddingLeft) - parseFloat(eleStyle.paddingRight);
           document.body.removeChild(copyEl);
-          return false;
+        } else {
+          if (sizeName === "width") {
+            document.body.appendChild(copyEl);
+            tabSize -= parseFloat(eleStyle.paddingRight);
+            document.body.removeChild(copyEl);
+            return false;
+          }
         }
       }
-    }
-  });
+    });
+  }
   const transform = `translate${capitalize(sizeDir)}(${offset}px)`;
   style[sizeName] = tabSize + "px";
   style.transform = transform;

package/tab-bar/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { computedBarStyle } from "./index";
 const api = ["state", "computedBarStyle"];
 const renderless = (props, { inject, reactive }, { parent }) => {

package/tab-dropdown/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 const handleClick = (state) => (name) => {
   state.rootTabs.setCurrentName(name);
   state.hide = true;

package/tab-dropdown/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { handleClick, setDropdownTabs } from "./index";
 const api = ["state", "handleClick", " setDropdownTabs"];
 const renderless = (props, { inject, reactive }) => {

package/tab-item/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 const computedIsClosable = ({ rootTabs, props }) => () => props.withClose || rootTabs.withClose;
 const computedActive = ({ nextTick, props, state }) => () => {
   const active = state.rootTabs.state.currentName === (props.name || state.index);

package/tab-item/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { computedIsClosable, computedActive, computedPaneName, watchTitle } from "./index";
 const api = ["state"];
 const renderless = (props, { computed, inject, reactive, watch }, { parent, nextTick }) => {

package/tab-item-mf/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 const renderless = (props, { inject }, { slots }) => {
   const tabs = inject("tabs", null);
   const { title, name } = props;

package/tab-nav/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { KEY_CODE, POSITION } from "../common";
 import { capitalize } from "../common/string";
 import { addResizeListener, removeResizeListener } from "../common/deps/resize-event";
@@ -53,9 +53,12 @@ const updated = ({ api, refs, state }) => () => {
   const currentOffset = state.navOffset;
   if (containerSize < navSize) {
     const currentOffset2 = state.navOffset;
-    state.scrollable = state.scrollable || {};
-    state.scrollable.prev = currentOffset2;
-    state.scrollable.next = currentOffset2 + containerSize < navSize;
+    if (!state.scrollable) {
+      state.scrollable = {
+        prev: currentOffset2,
+        next: currentOffset2 + containerSize < navSize
+      };
+    }
     if (navSize - currentOffset2 < containerSize) {
       state.navOffset = navSize - containerSize;
     }
@@ -164,8 +167,9 @@ const changeTab = (api) => (event) => {
   const keyCode = event.keyCode;
   let nextIndex;
   let currentIndex, tabList;
-  if (~[KEY_CODE.ArrowLeft, KEY_CODE.ArrowRight, KEY_CODE.ArrowUp, KEY_CODE.ArrowDown].indexOf(keyCode)) {
-    tabList = event.currentTarget.querySelectorAll("[role=tab]");
+  if (~[KEY_CODE.ArrowLeft, KEY_CODE.ArrowRight, KEY_CODE.ArrowUp, KEY_CODE.ArrowDown].indexOf(keyCode) && event.currentTarget) {
+    const target = event.currentTarget;
+    tabList = target.querySelectorAll("[role=tab]");
     currentIndex = Array.prototype.indexOf.call(tabList, event.target);
   } else {
     return;
@@ -254,7 +258,14 @@ const handleTabDragEnd = ({ refs, state, nextTick }) => () => {
     });
   }
 };
-const sortableEvent = ({ api, props, state, refs, emit, markRaw }) => () => {
+const sortableEvent = ({
+  api,
+  props,
+  state,
+  refs,
+  emit,
+  markRaw
+}) => () => {
   if (!props.dropConfig || typeof props.dropConfig.plugin !== "function") {
     return;
   }
@@ -271,7 +282,7 @@ const sortableEvent = ({ api, props, state, refs, emit, markRaw }) => () => {
       api.handleTabDragStart(event);
     },
     onEnd(event) {
-      api.handleTabDragEnd(event);
+      api.handleTabDragEnd();
     }
   });
   state.navSortableObj = markRaw(navSortableObj);

package/tab-nav/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import {
   computedNavStyle,
   computedSizeName,
@@ -57,7 +57,8 @@ const renderless = (props, { computed, inject, onBeforeUnmount, onMounted, onUpd
     mode: props._mode || parent.$mode || tinyMode || "pc",
     rootTabs: inject("rootTabs"),
     sizeName: computed(() => api2.computedSizeName(state)),
-    navStyle: computed(() => api2.computedNavStyle(state))
+    navStyle: computed(() => api2.computedNavStyle(state)),
+    navSortableObj: {}
   });
   Object.assign(api2, {
     state,

package/tabbar/index.js

@@ -1,4 +1,5 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
+import { off } from "../common/deps/dom";
 const setActiveItem = ({ props, state }) => () => {
   state.children.forEach((item, index) => {
     item.state ? item.state.index = index : item.index = index;
@@ -11,15 +12,47 @@ const onChange = ({ emit, props }) => (active) => {
     emit("change", active);
   }
 };
-const getChildrens = ({ childrenHandler }) => () => {
+const getChildrens = ({ childrenHandler, api }) => () => {
   const $children = [];
   childrenHandler(({ options, vm }) => {
-    options.componentName === "TinyTabbarItem" && $children.push(vm);
+    options.componentName === "TabbarItem" && $children.push(vm);
   });
+  api.setActiveItem();
   return $children;
 };
+const getItems = (state) => (item) => {
+  if (state.showIndex >= state.showNumber) {
+    item.state.showVm = false;
+  }
+  state.children.push(item);
+  if (state.showNumber) {
+    item.getTabbarItemsWidth(state.tabbarWidth, state.showNumber);
+  } else if (state.children.length >= 5) {
+    item.getTabbarItemsWidth(state.tabbarWidth, 5);
+  } else {
+    item.getTabbarItemsWidth(state.tabbarWidth, state.children.length);
+  }
+};
+const initPage = ({ vm, state }) => () => {
+  state.tabbarWidth = vm.$refs.tabbar && vm.$refs.tabbar.offsetWidth;
+  state.children.forEach((item) => {
+    if (state.showNumber) {
+      item.getTabbarItemsWidth(state.tabbarWidth, state.showNumber);
+    } else if (state.children.length >= 5) {
+      item.getTabbarItemsWidth(state.tabbarWidth, 5);
+    } else {
+      item.getTabbarItemsWidth(state.tabbarWidth, state.children.length);
+    }
+  });
+};
+const beforeDestroy = (api) => () => {
+  off(window, "resize", api.initPage);
+};
 export {
+  beforeDestroy,
   getChildrens,
+  getItems,
+  initPage,
   onChange,
   setActiveItem
 };