@opentiny/vue-renderless 3.11.7 → 3.12.0

package/slider/vue.js

@@ -21,6 +21,7 @@ import {
   hideTip,
   autoSlider,
   customBeforeAppearHook,
+  customAppearHook,
   customAfterAppearHook,
   watchActiveValue,
   watchModelValue,
@@ -51,11 +52,13 @@ const api = [
   "hideTip",
   "autoSlider",
   "customBeforeAppearHook",
+  "customAppearHook",
   "customAfterAppearHook",
   "inputValueChange"
 ];
-const initState = ({ reactive, computed, props, api: api2, parent }) => {
+const initState = ({ reactive, computed, props, api: api2, parent, inject }) => {
   const state = reactive({
+    showAutoWidth: inject("showAutoWidth", null),
     tipStyle: {},
     barStyle: {},
     moveStyle: [],
@@ -86,9 +89,9 @@ const initState = ({ reactive, computed, props, api: api2, parent }) => {
   });
   return state;
 };
-const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, watch, inject }, { parent, constants, nextTick, emit, mode }) => {
+const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, watch, inject }, { vm, parent, constants, nextTick, emit, mode }) => {
   const api2 = {};
-  const state = initState({ reactive, computed, props, api: api2, parent });
+  const state = initState({ reactive, computed, props, api: api2, parent, inject });
   parent.tinyForm = parent.tinyForm || inject("form", null);
   Object.assign(api2, {
     state,
@@ -96,14 +99,15 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     formatTipValue: formatTipValue(props),
     setBarStyle: setBarStyle({ props, state }),
     changeActiveValue: changeActiveValue(state),
-    bindResize: bindResize({ parent, props, state }),
+    bindResize: bindResize({ vm, props, state }),
     setButtonStyle: setButtonStyle({ props, state }),
-    calculateValue: calculateValue({ props, state }),
+    calculateValue: calculateValue({ vm, props, state }),
     getActiveButtonValue: getActiveButtonValue(state),
     getActiveButtonIndex: getActiveButtonIndex({ constants, mode, state }),
-    setTipStyle: setTipStyle({ constants, mode, parent, props, state }),
+    setTipStyle: setTipStyle({ vm, constants, mode, props, state }),
     customAfterAppearHook: customAfterAppearHook({ state, props }),
     customBeforeAppearHook: customBeforeAppearHook(props),
+    customAppearHook: customAppearHook(),
     bindEvent: bindEvent(api2),
     autoSlider: autoSlider(api2),
     unBindEvent: unBindEvent(api2),
@@ -121,6 +125,7 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     inputValueChange: inputValueChange({ props, api: api2, state })
   });
   watch(() => props.modelValue, api2.watchModelValue, { immediate: true });
+  watch(() => state.activeValue, api2.watchActiveValue, { immediate: true });
   watch(
     () => props.min,
     (min) => {
@@ -138,6 +143,20 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     }
   );
   watch(() => state.activeValue, api2.watchActiveValue, { immediate: true });
+  watch(
+    () => state.leftBtnValue,
+    (newVal) => {
+      state.inputValue[0] = newVal;
+    },
+    { immediate: true }
+  );
+  watch(
+    () => state.rightBtnValue,
+    (newVal) => {
+      state.inputValue[1] = newVal;
+    },
+    { immediate: true }
+  );
   onMounted(() => {
     api2.bindEvent();
     api2.getPoints();

package/slider-button/index.js

@@ -5,7 +5,11 @@ const handleChange = ({ constants, nextTick, dispatch, state }) => () => {
   });
 };
 const getValue = (state) => () => state.sliderButtonGroup.modelValue;
-const setValue = ({ state }) => (val) => state.sliderButtonGroup.$emit("update:modelValue", val);
+const setValue = ({ state }) => (val) => {
+  if (state.disabled)
+    return;
+  return state.sliderButtonGroup.$emit("update:modelValue", val);
+};
 const getGroup = ({ constants, parent: $parent }) => () => {
   let parent = $parent.$parent;
   while (parent) {

package/slider-button/vue.js

@@ -3,6 +3,7 @@ import { handleChange, getValue, setValue, getGroup, mounted, customEvents } fro
 const api = ["state", "handleChange"];
 const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmount }, { emit, parent, dispatch, constants, nextTick, vm }) => {
   const state = reactive({
+    disabled: inject("disabled", null) || props.disabled,
     type: inject("sliderType", null),
     value: computed({
       get: () => api2.getValue(),

package/slider-button-group/index.js

@@ -0,0 +1,15 @@
+import "../chunk-G2ADBYYC.js";
+const getChangePosition = (state) => (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];
+  state.sliderCount += 1;
+};
+export {
+  getChangePosition
+};

package/slider-button-group/vue.js

@@ -1,6 +1,7 @@
 import "../chunk-G2ADBYYC.js";
+import { getChangePosition } from "./index";
 const api = ["state"];
-const renderless = (props, { reactive, provide }, { parent }) => {
+const renderless = (props, { reactive, provide, onMounted }, { parent }) => {
   const state = reactive({
     tag: "div",
     isActive: false,
@@ -16,16 +17,8 @@ const renderless = (props, { reactive, provide }, { parent }) => {
     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];
+    api2.getChangePosition(value);
     parent.$emit("change", value);
-    state.sliderCount += 1;
   });
   parent.$on("labelValue", (value) => {
     state.eachBlockIndex.push({ index: value });
@@ -41,9 +34,13 @@ const renderless = (props, { reactive, provide }, { parent }) => {
     state.sliderHeight = state.sliderHeightData[0];
   });
   const api2 = {};
-  Object.assign(api2, { state });
+  Object.assign(api2, { state, getChangePosition: getChangePosition(state) });
   provide("sliderType", props.type);
   provide("sliderSize", props.size);
+  provide("disabled", props.disabled);
+  onMounted(() => {
+    api2.getChangePosition(props.modelValue);
+  });
   return api2;
 };
 export {

package/standard-list-item/index.js

@@ -7,12 +7,18 @@ const handleEnterDesc = ({ state, props }) => ($event) => {
     state.descTooltip = "";
   }
 };
-const handelIconClick = ({ emit }) => (item, index) => {
+const handelIconClick = ({ emit }) => (item, index, event) => {
   if (item.disabled)
     return;
-  emit("icon-click", item, index);
+  emit("icon-click", item, index, event);
+};
+const handleTitleClick = ({ props }) => () => {
+  if (!props.titleOption.click)
+    return;
+  props.titleOption.click();
 };
 export {
   handelIconClick,
-  handleEnterDesc
+  handleEnterDesc,
+  handleTitleClick
 };

package/standard-list-item/vue.js

@@ -1,6 +1,6 @@
 import "../chunk-G2ADBYYC.js";
-import { handleEnterDesc, handelIconClick } from "./index";
-const api = ["state", "handelIconClick", "handleEnterDesc"];
+import { handleEnterDesc, handelIconClick, handleTitleClick } from "./index";
+const api = ["state", "handelIconClick", "handleEnterDesc", "handleTitleClick"];
 const renderless = (props, { computed, reactive }, { emit }) => {
   const state = reactive({
     descTooltip: "",
@@ -11,6 +11,7 @@ const renderless = (props, { computed, reactive }, { emit }) => {
   const api2 = {};
   Object.assign(api2, {
     state,
+    handleTitleClick: handleTitleClick({ props }),
     handelIconClick: handelIconClick({ emit }),
     handleEnterDesc: handleEnterDesc({ state, props })
   });

package/switch/index.js

@@ -11,15 +11,17 @@ const toggle = ({ emit, props, state }) => (event) => {
   };
   props.beforeChange ? props.beforeChange(change) : change();
 };
-const computedWarpClasses = ({ prefixCls, props, state }) => () => [
-  {
-    [prefixCls]: true,
-    [`${prefixCls}-checked`]: state.currentValue === props.trueValue,
-    [`${prefixCls}-disabled`]: state.disabled,
-    mini: props.mini,
-    disabled: state.disabled
-  }
-];
+const computedWarpClasses = ({ prefixCls, props, state }) => () => {
+  return [
+    {
+      [prefixCls]: true,
+      [`${prefixCls}-checked`]: state.currentValue === props.trueValue,
+      [`${prefixCls}-disabled`]: state.disabled,
+      mini: props.mini,
+      disabled: state.disabled
+    }
+  ];
+};
 const computedInnerClasses = ({ prefixCls }) => () => `${prefixCls}-inner`;
 const computedStyle = ({ props, state }) => () => {
   return {

package/switch/vue.js

@@ -10,7 +10,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 || state.isDisplayOnly),
+    disabled: computed(() => props.disabled || state.formDisabled || state.isDisplayOnly || props.loading),
     isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly),
     showText: computed(() => {
       if (props.showText === void 0) {

package/tab-bar/index.js

@@ -46,7 +46,7 @@ const computedBarStyle = (parent) => (props, state) => {
     });
   }
   const transform = `translate${capitalize(sizeDir)}(${offset}px)`;
-  style[sizeName] = tabSize + "px";
+  style[sizeName] = state.separator ? "" : tabSize + "px";
   style.transform = transform;
   style.msTransform = transform;
   style.webkitTransform = transform;

package/tab-bar/vue.js

@@ -4,7 +4,8 @@ const api = ["state", "computedBarStyle"];
 const renderless = (props, { inject, reactive }, { parent }) => {
   const state = reactive({
     rootTabs: inject("rootTabs"),
-    barStyle: {}
+    barStyle: {},
+    separator: inject("separator", null)
   });
   const api2 = {
     state,

package/tab-nav/index.js

@@ -15,11 +15,11 @@ const computedNavStyle = (state) => {
     };
   }
 };
-const scrollIntoView = ({ parent, refs, state }) => () => {
+const scrollIntoView = ({ parent, vm, state }) => () => {
   if (!state.scrollable) {
     return;
   }
-  const nav = refs.nav;
+  const nav = vm.$refs.nav;
   const activeTab = parent.$el.querySelector(".is-active");
   if (!activeTab) {
     return;
@@ -32,13 +32,13 @@ 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 || state.dragging) {
+const updated = ({ api, vm, state }) => () => {
+  if (!vm.$refs.nav || state.dragging) {
     return;
   }
-  let navSize = refs.nav[`offset${capitalize(state.sizeName)}`];
+  let navSize = vm.$refs.nav[`offset${capitalize(state.sizeName)}`];
   if (state.mode === "mobile") {
-    Array.prototype.forEach.call(refs.nav.children, (item) => {
+    Array.prototype.forEach.call(vm.$refs.nav.children, (item) => {
       if (item.classList && item.classList.contains("tiny-mobile-tabs__item")) {
         navSize += item.offsetWidth;
       }
@@ -49,7 +49,7 @@ const updated = ({ api, refs, state }) => () => {
       }
     });
   }
-  const containerSize = refs.navScroll[`offset${capitalize(state.sizeName)}`];
+  const containerSize = vm.$refs.navScroll[`offset${capitalize(state.sizeName)}`];
   const currentOffset = state.navOffset;
   if (containerSize < navSize) {
     const currentOffset2 = state.navOffset;
@@ -69,10 +69,10 @@ const updated = ({ api, refs, state }) => () => {
     }
   }
   state.isActive && api.scrollIntoView();
-  if (refs.tabBar) {
-    refs.tabBar.state.barStyle = refs.tabBar.computedBarStyle(refs.tabBar, state);
+  if (vm.$refs.tabBar) {
+    vm.$refs.tabBar.state.barStyle = vm.$refs.tabBar.computedBarStyle(vm.$refs.tabBar, state);
   } else {
-    const line = refs.nav.querySelector("tiny-mobile-tabs__line");
+    const line = vm.$refs.nav.querySelector("tiny-mobile-tabs__line");
     line && line.style && (line.style.transform = api.computedNavStyle(state).transform);
   }
 };
@@ -113,16 +113,16 @@ const windowFocusHandler = (state) => () => {
     state.focusable = true;
   }, 50);
 };
-const scrollToActiveTab = ({ parent, refs, state }) => () => {
+const scrollToActiveTab = ({ parent, vm, state }) => () => {
   if (!state.scrollable) {
     return;
   }
-  const nav = refs.nav;
+  const nav = vm.$refs.nav;
   const activeTab = parent.$el.querySelector(".is-active");
   if (!activeTab) {
     return;
   }
-  const navScroll = refs.navScroll;
+  const navScroll = vm.$refs.navScroll;
   const activeTabBounding = activeTab.getBoundingClientRect();
   const navScrollBounding = navScroll.getBoundingClientRect();
   let maxOffset = nav.offsetWidth - navScrollBounding.width;
@@ -144,8 +144,8 @@ const scrollToActiveTab = ({ parent, refs, state }) => () => {
   newOffset = Math.max(newOffset, 0);
   state.navOffset = Math.min(newOffset, maxOffset);
 };
-const scrollPrev = ({ refs, state }) => () => {
-  const containerSize = refs.navScroll[`offset${capitalize(state.sizeName)}`];
+const scrollPrev = ({ vm, state }) => () => {
+  const containerSize = vm.$refs.navScroll[`offset${capitalize(state.sizeName)}`];
   const currentOffset = state.navOffset;
   if (!currentOffset) {
     return;
@@ -153,9 +153,9 @@ const scrollPrev = ({ refs, state }) => () => {
   const newOffset = currentOffset > containerSize ? currentOffset - containerSize : 0;
   state.navOffset = newOffset;
 };
-const scrollNext = ({ refs, state }) => () => {
-  const navSize = refs.nav[`offset${capitalize(state.sizeName)}`];
-  const containerSize = refs.navScroll[`offset${capitalize(state.sizeName)}`];
+const scrollNext = ({ vm, state }) => () => {
+  const navSize = vm.$refs.nav[`offset${capitalize(state.sizeName)}`];
+  const containerSize = vm.$refs.navScroll[`offset${capitalize(state.sizeName)}`];
   const currentOffset = state.navOffset;
   if (navSize - currentOffset <= containerSize) {
     return;
@@ -213,20 +213,20 @@ const expandTabShow = ({ api, state }) => () => {
   }
 };
 const expandTabHide = (state) => () => state.showExpandItem = false;
-const computedHeaderStyle = ({ refs, state }) => () => {
-  if (refs.nav) {
-    state.expandHeaderStyle[state.sizeName] = refs.nav[`offset${capitalize(state.sizeName)}`] + "px";
+const computedHeaderStyle = ({ vm, state }) => () => {
+  if (vm.$refs.nav) {
+    state.expandHeaderStyle[state.sizeName] = vm.$refs.nav[`offset${capitalize(state.sizeName)}`] + "px";
   }
   return state.expandHeaderStyle;
 };
-const handleTabDragStart = ({ state, refs, emit }) => (event) => {
+const handleTabDragStart = ({ state, vm, emit }) => (event) => {
   state.dragging = true;
   if (![POSITION.Top, POSITION.Bottom].includes(state.rootTabs.position)) {
     emit("tab-drag-start", event);
     return;
   }
-  const navContainer = refs.navScroll;
-  const nav = refs.nav;
+  const navContainer = vm.$refs.navScroll;
+  const nav = vm.$refs.nav;
   const containerWidth = navContainer.offsetWidth;
   const navWidth = nav.offsetWidth;
   if (navWidth > containerWidth) {
@@ -240,15 +240,15 @@ const handleTabDragStart = ({ state, refs, emit }) => (event) => {
   }
   emit("tab-drag-start", event);
 };
-const handleTabDragEnd = ({ refs, state, nextTick }) => () => {
+const handleTabDragEnd = ({ vm, state, nextTick }) => () => {
   state.dragging = false;
   if (![POSITION.Top, POSITION.Bottom].includes(state.rootTabs.position)) {
     return;
   }
-  const nav = refs.nav;
+  const nav = vm.$refs.nav;
   if (nav.style.width) {
     const navOffset = nav.scrollLeft;
-    const navContainer = refs.navScroll;
+    const navContainer = vm.$refs.navScroll;
     navContainer.style.height = "";
     nav.style.width = "";
     nav.style.overflowX = "";
@@ -262,14 +262,14 @@ const sortableEvent = ({
   api,
   props,
   state,
-  refs,
+  vm,
   emit,
   markRaw
 }) => () => {
   if (!props.dropConfig || typeof props.dropConfig.plugin !== "function") {
     return;
   }
-  const navSortableObj = new props.dropConfig.plugin(refs.nav, {
+  const navSortableObj = new props.dropConfig.plugin(vm.$refs.nav, {
     sort: true,
     draggable: ".tiny-tabs__item",
     onUpdate(event) {
@@ -287,9 +287,9 @@ const sortableEvent = ({
   });
   state.navSortableObj = markRaw(navSortableObj);
 };
-const watchCurrentName = ({ nextTick, refs, state }) => () => {
+const watchCurrentName = ({ nextTick, vm, state }) => () => {
   nextTick(() => {
-    const tabBarVnode = refs.tabBar;
+    const tabBarVnode = vm.$refs.tabBar;
     if (tabBarVnode) {
       tabBarVnode.state.barStyle = tabBarVnode.computedBarStyle(tabBarVnode, state);
     }

package/tab-nav/vue.js

@@ -39,7 +39,7 @@ const api = [
   "computedHeaderStyle",
   "swiperHandle"
 ];
-const renderless = (props, { computed, inject, onBeforeUnmount, onMounted, onUpdated, reactive, markRaw }, { parent, nextTick, refs, mode: tinyMode, emit }) => {
+const renderless = (props, { computed, inject, onBeforeUnmount, onMounted, onUpdated, reactive, markRaw }, { parent, vm, nextTick, mode: tinyMode, emit }) => {
   const api2 = { mounted, beforeUnmount, computedNavStyle, computedSizeName };
   const state = reactive({
     dragging: false,
@@ -58,7 +58,8 @@ const renderless = (props, { computed, inject, onBeforeUnmount, onMounted, onUpd
     rootTabs: inject("rootTabs"),
     sizeName: computed(() => api2.computedSizeName(state)),
     navStyle: computed(() => api2.computedNavStyle(state)),
-    navSortableObj: {}
+    navSortableObj: {},
+    separator: inject("separator", null)
   });
   Object.assign(api2, {
     state,
@@ -67,20 +68,20 @@ const renderless = (props, { computed, inject, onBeforeUnmount, onMounted, onUpd
     moreTabShow: moreTabShow(state),
     expandTabShow: expandTabShow({ api: api2, state }),
     expandTabHide: expandTabHide(state),
-    scrollPrev: scrollPrev({ refs, state }),
-    scrollNext: scrollNext({ refs, state }),
+    scrollPrev: scrollPrev({ vm, state }),
+    scrollNext: scrollNext({ vm, state }),
     windowBlurHandler: windowBlurHandler(state),
     windowFocusHandler: windowFocusHandler(state),
     visibilityChangeHandler: visibilityChangeHandler(state),
-    scrollToActiveTab: scrollToActiveTab({ parent, refs, state }),
-    scrollIntoView: scrollIntoView({ parent, refs, state }),
-    computedHeaderStyle: computedHeaderStyle({ refs, state }),
-    watchCurrentName: watchCurrentName({ nextTick, refs, state }),
-    handleTabDragStart: handleTabDragStart({ state, refs, emit }),
-    handleTabDragEnd: handleTabDragEnd({ state, refs, nextTick }),
-    sortableEvent: sortableEvent({ api: api2, props, state, refs, emit, markRaw })
+    scrollToActiveTab: scrollToActiveTab({ parent, vm, state }),
+    scrollIntoView: scrollIntoView({ parent, vm, state }),
+    computedHeaderStyle: computedHeaderStyle({ vm, 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 })
   });
-  Object.assign(api2, { updated: updated({ api: api2, refs, state }), changeTab: changeTab(api2) });
+  Object.assign(api2, { updated: updated({ api: api2, vm, state }), changeTab: changeTab(api2) });
   onUpdated(() => api2.updated());
   onMounted(() => api2.mounted({ api: api2, parent }));
   onBeforeUnmount(() => api2.beforeUnmount({ api: api2, parent }));

package/tabs/vue.js

@@ -38,7 +38,8 @@ const initState = ({ reactive, props }) => reactive({
   offsetX: 0,
   offsetY: 0,
   direction: "",
-  expandPanesWidth: ""
+  expandPanesWidth: "",
+  separator: props.separator
 });
 const initWatcher = ({
   watch,
@@ -91,6 +92,7 @@ const renderless = (props, { onMounted, onUpdated, provide, reactive, watch }, {
   });
   api2.created();
   provide("rootTabs", parent);
+  provide("separator", state.separator);
   initWatcher({ watch, props, api: api2, state, nextTick, refs });
   onMounted(() => {
     api2.calcPaneInstances();

package/tabs-mf/index.js

@@ -1,6 +1,7 @@
 import "../chunk-G2ADBYYC.js";
 import { random } from "../common/string";
 import debounce from "../common/deps/debounce";
+import { fastdom } from "../common/deps/fastdom";
 const setActive = ({ emit, state, props }) => (name) => {
   const current = state.currentItem ? state.currentItem.name : "";
   if (current && current !== name && props.beforeLeave && !props.beforeLeave(name, current)) {
@@ -21,16 +22,20 @@ const scrollTo = ({ vm, state }) => (name) => {
   const { $refs } = vm;
   const { tabbar } = $refs;
   const { scroll } = tabbar.$refs;
-  const { clientWidth, scrollWidth } = scroll;
-  if (name && scrollWidth > clientWidth) {
-    const total = navs.length;
-    const index = navs.findIndex((nav) => nav.name === name);
-    const max = scrollWidth - clientWidth;
-    if (~index) {
-      scroll.scrollLeft = max / (total - 1) * index;
-      tabbar.wheelListener();
+  fastdom.measure(() => {
+    const { clientWidth, scrollWidth } = scroll;
+    if (name && scrollWidth > clientWidth) {
+      const total = navs.length;
+      const index = navs.findIndex((nav) => nav.name === name);
+      const max = scrollWidth - clientWidth;
+      if (~index) {
+        fastdom.mutate(() => {
+          scroll.scrollLeft = max / (total - 1) * index;
+          tabbar.wheelListener();
+        });
+      }
     }
-  }
+  });
 };
 const clickMore = (api) => (name) => {
   api.setActive(name);

package/tabs-mf/vue-bar.js

@@ -2,9 +2,9 @@ import "../chunk-G2ADBYYC.js";
 import { addResizeListener, removeResizeListener } from "../common/deps/resize-event";
 import { wheelListener, getBoundRect, handleClickDropdownItem, key, emitAdd } from "./index";
 import { getAddWheelListener } from "./wheel";
+const { addWheelListener, removeWheelListener } = getAddWheelListener(window, document);
 const api = ["state", "wheelListener", "handleClickDropdownItem", "key", "emitAdd"];
 const renderless = (props, { onMounted, onBeforeUnmount, reactive, watch, inject, computed }, { vm }) => {
-  const { addWheelListener, removeWheelListener } = getAddWheelListener(window, document);
   const tabs = inject("tabs", null);
   const state = reactive({
     moreList: [],
@@ -14,7 +14,8 @@ const renderless = (props, { onMounted, onBeforeUnmount, reactive, watch, inject
     tabMoreWidth: 0,
     navPaddingRight: 0,
     withAdd: computed(() => tabs.withAdd),
-    slotCustom: tabs.slots.custom
+    slotCustom: tabs.slots.custom,
+    separator: inject("separator", null)
   });
   const api2 = {
     getBoundRect: getBoundRect(vm),

package/tabs-mf/vue-nav-item.js

@@ -6,7 +6,8 @@ const renderless = (props, { inject, markRaw, reactive, computed }, { vm }) => {
   tabs.addNav(markRaw(vm));
   const state = reactive({
     tabSize: computed(() => tabs.size),
-    withClose: computed(() => tabs.withClose)
+    withClose: computed(() => tabs.withClose),
+    separator: inject("separator", null)
   });
   const api2 = {
     state,

package/tabs-mf/vue-nav.js

@@ -1,10 +1,26 @@
 import "../chunk-G2ADBYYC.js";
 const api = ["state"];
-const renderless = (props, { reactive, inject, computed }) => {
+const renderless = (props, { reactive, inject, computed, nextTick, watch }) => {
   const tabs = inject("tabs", null);
   const state = reactive({
-    navItems: computed(() => tabs.state.items)
+    navItems: computed(() => tabs.state.items),
+    currentNav: null,
+    currentIndex: computed(
+      () => tabs.state.navs.findIndex((item) => tabs.state.currentItem && tabs.state.currentItem.name === item.name)
+    ),
+    currentWidth: 0,
+    currentPosition: 0
   });
+  watch(
+    () => state.currentIndex,
+    () => {
+      nextTick(() => {
+        const nav = state.currentNav = tabs.state.navs[state.currentIndex];
+        state.currentWidth = nav && nav.$el.offsetWidth || 0;
+        state.currentPosition = nav && nav.$el.offsetLeft || 0;
+      });
+    }
+  );
   return { state };
 };
 export {

package/tabs-mf/vue.js

@@ -7,7 +7,8 @@ const renderless = (props, { onMounted, onBeforeUnmount, provide, reactive, watc
     items: [],
     navs: [],
     currentItem: computed(() => state.items.find((item) => item.selected)),
-    key: computed(() => state.currentItem ? state.currentItem.name : random())
+    key: computed(() => state.currentItem ? state.currentItem.name : random()),
+    separator: props.separator
   });
   const api2 = {
     setActive: setActive({ emit, state, props }),
@@ -37,6 +38,7 @@ const renderless = (props, { onMounted, onBeforeUnmount, provide, reactive, watc
     state.navs.forEach((n, i) => state.navs[i] = null);
     state.navs.length = 0;
   });
+  provide("separator", state.separator);
   return api2;
 };
 export {

package/tag/index.js

@@ -8,7 +8,7 @@ const handleClose = ({ emit, props, state }) => (event) => {
   props.beforeDelete ? props.beforeDelete(close) : close();
 };
 const handleClick = ({ emit, props, parent, state }) => (event) => {
-  if (!props.selectable || props.disabled)
+  if (props.selectable === false || props.disabled)
     return;
   parent.$parent && parent.$parent.tagSelectable && event.stopPropagation();
   state.selected = !state.selected;

package/toast/index.js

@@ -0,0 +1,7 @@
+import "../chunk-G2ADBYYC.js";
+const timeout = (emit) => () => {
+  emit("timeout");
+};
+export {
+  timeout
+};

package/toast/vue.js

@@ -0,0 +1,19 @@
+import "../chunk-G2ADBYYC.js";
+import { timeout } from "./index";
+const api = ["state", "timeout"];
+const renderless = (props, { reactive }, { vm, emit }) => {
+  const state = reactive({
+    text: props.text,
+    type: props.type,
+    time: props.time
+  });
+  const api2 = {
+    state,
+    timeout: timeout(emit)
+  };
+  return api2;
+};
+export {
+  api,
+  renderless
+};