@opentiny/vue-renderless 3.13.1 → 3.14.0

package/slider/index.js

@@ -53,7 +53,8 @@ const bindMouseDown = ({
   constants,
   mode,
   emit,
-  state
+  state,
+  props
 }) => (event) => {
   if (event.button !== 0 && event.detail !== 0) {
     state.activeIndex = -1;
@@ -66,6 +67,7 @@ const bindMouseDown = ({
   const handleEl = event.target;
   let isClickBar = false;
   let isClickBtn = false;
+  let isClickLabel = false;
   if (mode === "mobile-first") {
     const role = Array.from(handleEl.attributes).find((attr) => attr.name === "role");
     const name = role && role.value;
@@ -74,8 +76,9 @@ const bindMouseDown = ({
   } else {
     isClickBar = hasClass(handleEl, constants.sliderCls(mode)) || hasClass(handleEl, constants.rangeCls(mode));
     isClickBtn = hasClass(handleEl, constants.buttonCls(mode)) || hasClass(handleEl, constants.leftSvgCls(mode)) || hasClass(handleEl, constants.rightSvgCls(mode));
+    isClickLabel = hasClass(handleEl, constants.PC_LABEL_CLS);
   }
-  if (state.disabled || !isClickBtn && !isClickBar) {
+  if (state.disabled || !isClickBtn && !isClickBar && !isClickLabel) {
     state.activeIndex = -1;
     return;
   }
@@ -85,7 +88,7 @@ const bindMouseDown = ({
   on(window, "touchmove", api.bindMouseMove);
   state.isDrag = isClickBtn;
   isClickBtn && (state.activeIndex = api.getActiveButtonIndex(event));
-  if (isClickBar) {
+  if (isClickBar || isClickLabel) {
     const currentValue = api.calculateValue(event);
     if (state.isDouble) {
       if (Math.abs(currentValue - state.leftBtnValue) > Math.abs(state.rightBtnValue - currentValue)) {
@@ -98,6 +101,9 @@ const bindMouseDown = ({
     api.setButtonStyle();
     api.setBarStyle();
     emit("stop", api.getActiveButtonValue());
+    if (!props.changeCompat) {
+      emit("change", api.getActiveButtonValue());
+    }
   }
 };
 const bindMouseMove = ({ api, nextTick, state }) => (event) => {
@@ -111,7 +117,7 @@ const bindMouseMove = ({ api, nextTick, state }) => (event) => {
     api.setTipStyle();
   });
 };
-const bindMouseUp = ({ api, emit, state }) => () => {
+const bindMouseUp = ({ api, emit, state, props }) => () => {
   if (state.disabled || !state.isDrag) {
     return;
   }
@@ -124,6 +130,9 @@ const bindMouseUp = ({ api, emit, state }) => () => {
   off(window, "touchend", api.bindMouseUp);
   off(window, "touchmove", api.bindMouseMove);
   emit("stop", api.getActiveButtonValue());
+  if (!props.changeCompat) {
+    emit("change", api.getActiveButtonValue());
+  }
 };
 const displayTip = ({ api, nextTick, state }) => (event) => {
   state.mouseOuterBtn = false;
@@ -285,12 +294,9 @@ const initSlider = ({ api, props, state }) => (value) => {
       state.rightBtnValue = Math.min(Number(item), props.max);
       state.rightBtnShow = true;
     }
-    if (state.isInit) {
-      api.changeActiveValue(index === 0);
-    }
+    api.changeActiveValue(index === 0);
     api.setButtonStyle();
   });
-  state.isInit = false;
   api.setBarStyle();
 };
 const calculateValue = ({ props, state, vm }) => (event) => {
@@ -369,13 +375,9 @@ const watchActiveValue = ({ api, emit, props, state }) => (newValue, oldValue) =
   } else {
     state.activeValue = nNewValue || 0;
   }
-  if (!state.isSlotTyping) {
-    state.slotValue = state.activeValue;
-  }
 };
 const watchModelValue = ({ api, state }) => (value) => {
   if (!state.innerTrigger) {
-    state.isInit = true;
     api.initSlider(value);
     api.setActiveButtonValue(value);
   } else {
@@ -385,6 +387,9 @@ const watchModelValue = ({ api, state }) => (value) => {
       api.setActiveButtonValue(value);
     }
   }
+  if (!state.isSlotTyping) {
+    api.updateSlotValue();
+  }
 };
 const getPoints = ({ props, state }) => () => {
   if (props.showSteps && props.step > 0) {
@@ -415,7 +420,28 @@ const getLabels = ({ props, state }) => () => {
     }
   }
 };
-const inputValueChange = ({ props, state, api }) => ($event, pos) => {
+const getMarkList = ({ props }) => () => {
+  const markList = [];
+  if (!props.marks) {
+    return markList;
+  }
+  for (const [key, label] of Object.entries(props.marks)) {
+    const markValue = Number(key);
+    if (markValue >= props.min && markValue <= props.max) {
+      const percent = (markValue - props.min) / (props.max - props.min);
+      markList.push({
+        value: markValue,
+        label,
+        percent,
+        positionStyle: {
+          [props.vertical ? "bottom" : "left"]: percent * 100 + "%"
+        }
+      });
+    }
+  }
+  return markList;
+};
+const inputValueChange = ({ props, state, api, emit }) => ($event, pos) => {
   if (props.disabled || !state.isDouble)
     return;
   if (!/^\d+$/.test($event.target.value)) {
@@ -427,16 +453,40 @@ const inputValueChange = ({ props, state, api }) => ($event, pos) => {
     return;
   }
   api.initSlider([Math.min(...state.inputValue), Math.max(...state.inputValue)]);
+  if (!props.changeCompat) {
+    emit("change", api.getActiveButtonValue());
+  }
 };
 const handleSlotInputFocus = (state) => () => {
   state.isSlotTyping = true;
 };
-const handleSlotInputBlur = (state) => () => {
+const handleSlotInputBlur = ({ state, api }) => () => {
   state.isSlotTyping = false;
-  state.slotValue = state.activeValue;
+  api.updateSlotValue();
 };
-const handleSlotInput = (state) => (event) => {
-  state.activeValue = Number(event.target.value);
+const updateSlotValue = ({ state }) => () => {
+  if (!state.isDouble) {
+    state.slotValue = state.activeValue;
+  } else {
+    state.slotValue = state.activeIndex === 0 ? [state.activeValue, state.rightBtnValue] : [state.leftBtnValue, state.activeValue];
+  }
+};
+const handleSlotInput = ({ state, api }) => (event, isLeftInput = true) => {
+  const inputValue = event.target.value;
+  api.changeActiveValue(state.isDouble ? isLeftInput : true);
+  state.activeValue = Number(inputValue);
+  api.updateSlotValue();
+};
+const inputOnChange = ({ api, emit, props, state }) => (event) => {
+  if (!props.changeCompat) {
+    if (!/^\d+$/.test(event.target.value)) {
+      state.activeValue = state.leftBtnValue;
+      return;
+    }
+    const value = toNumber(state.activeValue) || 0;
+    api.autoSlider(value);
+    emit("change", api.getActiveButtonValue());
+  }
 };
 export {
   autoSlider,
@@ -456,18 +506,21 @@ export {
   getActiveButtonIndex,
   getActiveButtonValue,
   getLabels,
+  getMarkList,
   getPoints,
   handleSlotInput,
   handleSlotInputBlur,
   handleSlotInputFocus,
   hideTip,
   initSlider,
+  inputOnChange,
   inputValueChange,
   setActiveButtonValue,
   setBarStyle,
   setButtonStyle,
   setTipStyle,
   unBindEvent,
+  updateSlotValue,
   watchActiveValue,
   watchModelValue
 };

package/slider/vue.js

@@ -28,9 +28,12 @@ import {
   getPoints,
   getLabels,
   inputValueChange,
+  inputOnChange,
   handleSlotInputFocus,
   handleSlotInputBlur,
-  handleSlotInput
+  handleSlotInput,
+  getMarkList,
+  updateSlotValue
 } from "./index";
 const api = [
   "state",
@@ -58,6 +61,7 @@ const api = [
   "customAppearHook",
   "customAfterAppearHook",
   "inputValueChange",
+  "inputOnChange",
   "handleSlotInputFocus",
   "handleSlotInputBlur",
   "handleSlotInput"
@@ -70,7 +74,7 @@ const initState = ({ reactive, computed, props, api: api2, parent, inject }) =>
     moveStyle: [],
     points: [],
     labels: [],
-    isInit: true,
+    markList: computed(() => api2.getMarkList()),
     inputValue: [0, 0],
     isDrag: false,
     sliderSize: 0,
@@ -88,6 +92,7 @@ const initState = ({ reactive, computed, props, api: api2, parent, inject }) =>
     rightBtnPercent: 0,
     rightBtnShow: false,
     innerTrigger: false,
+    changeCompat: computed(() => props.changeCompat),
     rangeDiff: computed(() => props.max - props.min),
     tipValue: computed(() => api2.formatTipValue(state.activeValue)),
     formDisabled: computed(() => (parent.tinyForm || {}).disabled),
@@ -122,19 +127,22 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     unBindEvent: unBindEvent(api2),
     displayTip: displayTip({ api: api2, nextTick, state }),
     bindKeyDown: bindKeyDown({ api: api2, props, state }),
-    bindMouseUp: bindMouseUp({ api: api2, emit, state }),
+    bindMouseUp: bindMouseUp({ api: api2, emit, state, props }),
     bindMouseMove: bindMouseMove({ api: api2, nextTick, state }),
-    bindMouseDown: bindMouseDown({ api: api2, constants, mode, emit, state }),
+    bindMouseDown: bindMouseDown({ api: api2, constants, mode, emit, state, props }),
     setActiveButtonValue: setActiveButtonValue({ api: api2, emit, props, state }),
     initSlider: initSlider({ api: api2, props, state }),
     watchModelValue: watchModelValue({ api: api2, state }),
     watchActiveValue: watchActiveValue({ api: api2, emit, props, state }),
     getPoints: getPoints({ props, state }),
     getLabels: getLabels({ props, state }),
-    inputValueChange: inputValueChange({ props, api: api2, state }),
+    inputValueChange: inputValueChange({ props, api: api2, state, emit }),
     handleSlotInputFocus: handleSlotInputFocus(state),
-    handleSlotInputBlur: handleSlotInputBlur(state),
-    handleSlotInput: handleSlotInput(state)
+    handleSlotInputBlur: handleSlotInputBlur({ state, api: api2 }),
+    handleSlotInput: handleSlotInput({ state, api: api2 }),
+    getMarkList: getMarkList({ props }),
+    updateSlotValue: updateSlotValue({ state }),
+    inputOnChange: inputOnChange({ api: api2, emit, props, state })
   });
   watch(
     () => props.modelValue,
@@ -146,6 +154,7 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     },
     { immediate: true }
   );
+  props.changeCompat && watch(() => state.activeValue, api2.watchActiveValue, { immediate: true });
   watch(() => state.activeValue, api2.watchActiveValue, { immediate: true });
   watch(
     () => props.min,

package/split/index.js

@@ -44,7 +44,7 @@ const handleUp = ({ api, emit, off, state }) => () => {
   emit("moveend");
 };
 const handleMousedown = ({ api, emit, on, props, state, vm }) => (event) => {
-  if (state.dragable) {
+  if (!props.disabled) {
     state.initOffset = state.isHorizontal ? event.pageX : event.pageY;
     if (state.offset === 0) {
       state.oldOffset = 0;
@@ -95,8 +95,10 @@ const buttonRightBottomClick = ({ emit, props, state }) => () => {
 };
 const computeOffset = ({ api, nextTick, props, vm, state }) => () => {
   setTimeout(() => {
-    state.totalPane = vm.$refs.outerWrapper[state.offsetSize];
-    state.leftTopPane = state.totalPane * (state.offset / 100);
+    if (state) {
+      state.totalPane = vm.$refs.outerWrapper[state.offsetSize];
+      state.leftTopPane = state.totalPane * (state.offset / 100);
+    }
   });
   if (state.valueIsPx) {
     nextTick(() => {

package/split/vue.js

@@ -32,12 +32,10 @@ const renderless = (props, hooks, { vm, nextTick, emit, constants }) => {
     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
+    paneClasses: computed(() => [
+      `${state.prefix}-pane ${props.scrollable ? "tiny-split-scroll" : ""}`,
+      { [`${state.prefix}-pane-moving`]: state.isMoving }
+    ])
   }, getUseOffset.state));
   Object.assign(api2, __spreadProps(__spreadValues({
     state,

package/standard-list-item/index.js

@@ -1,4 +1,7 @@
-import "../chunk-G2ADBYYC.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
 const handleEnterDesc = ({ state, props }) => ($event) => {
   const target = $event.target;
   if (target && target.scrollHeight > target.offsetHeight) {
@@ -17,7 +20,18 @@ const handleTitleClick = ({ props }) => () => {
     return;
   props.titleOption.click();
 };
+const computedOptions = ({ props }) => () => {
+  return props.options.filter((item) => {
+    const hidden = typeof item.hidden === "function" ? item.hidden(props.data) : item.hidden;
+    return !hidden;
+  }).map((op) => {
+    return __spreadProps(__spreadValues({}, op), {
+      disabled: typeof op.disabled === "function" ? op.disabled(props.data) : op.disabled
+    });
+  });
+};
 export {
+  computedOptions,
   handelIconClick,
   handleEnterDesc,
   handleTitleClick

package/standard-list-item/vue.js

@@ -1,19 +1,20 @@
 import "../chunk-G2ADBYYC.js";
-import { handleEnterDesc, handelIconClick, handleTitleClick } from "./index";
-const api = ["state", "handelIconClick", "handleEnterDesc", "handleTitleClick"];
+import { handleEnterDesc, handelIconClick, handleTitleClick, computedOptions } from "./index";
+const api = ["state", "handelIconClick", "handleEnterDesc", "handleTitleClick", "computedOptions"];
 const renderless = (props, { computed, reactive }, { emit }) => {
+  const api2 = {};
   const state = reactive({
     descTooltip: "",
     sliceNum: 2,
     iconNum: 3,
-    effectOptions: computed(() => props.options.filter((item) => !item.hidden))
+    effectOptions: computed(() => api2.computedOptions())
   });
-  const api2 = {};
   Object.assign(api2, {
     state,
     handleTitleClick: handleTitleClick({ props }),
     handelIconClick: handelIconClick({ emit }),
-    handleEnterDesc: handleEnterDesc({ state, props })
+    handleEnterDesc: handleEnterDesc({ state, props }),
+    computedOptions: computedOptions({ props })
   });
   return api2;
 };

package/steps/index.js

@@ -1,4 +1,5 @@
 import "../chunk-G2ADBYYC.js";
+import { omitText } from "../common/string";
 const updateStartIndex = ({ state, props }) => () => {
   const { visibleNum, active } = props;
   const maxStartIndex = Math.min(props.data.length - visibleNum, active - Math.floor(visibleNum / 2));
@@ -23,9 +24,29 @@ const computedRightNodePos = ({ state, props }) => () => {
     right: -(index + 1) * 4 + "px"
   }));
 };
+const handleMouseenter = ({ state, vm }) => (e, placement) => {
+  const ele = e.target;
+  const text = ele.textContent;
+  const font = window.getComputedStyle(ele).font;
+  const rect = ele.getBoundingClientRect();
+  const res = omitText(text, font, rect.width);
+  const popover = vm.$refs.popover;
+  if (res.o) {
+    popover.state.referenceElm = ele;
+    popover.state.popperElm && (popover.state.popperElm.style.display = "none");
+    popover.doDestroy();
+    state.popoverContent = text;
+    state.popoverVisible = true;
+    state.popoverPlacement = placement;
+    setTimeout(popover.updatePopper, 20);
+  }
+};
+const handleMouseleave = (state) => () => {
+  state.popoverVisible = false;
+};
 const computedSpace = ({ props }) => {
-  const { space } = props;
-  if (/^\d+$/.test(space)) {
+  const { space = "" } = props;
+  if (/^\d+$/.test(String(space))) {
     return `${space}px`;
   }
   return space;
@@ -33,6 +54,8 @@ const computedSpace = ({ props }) => {
 export {
   computedRightNodePos,
   computedSpace,
+  handleMouseenter,
+  handleMouseleave,
   isVisibleHandler,
   updateStartIndex
 };

package/steps/slide-bar.js

@@ -45,7 +45,14 @@ const rightSlideHandler = ({ state, api: api2 }) => () => {
 const updatePosition = ({ state, vm, props, api: api2 }) => debounce(10, (isInit) => {
   state.positionList = props.data.map((item, index) => {
     const blockRef = vm.$refs["block" + index];
-    const position = blockRef && blockRef[0].getBoundingClientRect() || {};
+    let position = {};
+    if (blockRef) {
+      if (Array.isArray(blockRef)) {
+        position = blockRef[0] && blockRef[0].getBoundingClientRect();
+      } else {
+        position = blockRef.getBoundingClientRect();
+      }
+    }
     return Object.assign(position, { index });
   });
   state.slideMainPostion = vm.$refs.slideMain.getBoundingClientRect();

package/steps/vue.js

@@ -1,9 +1,19 @@
 import "../chunk-G2ADBYYC.js";
-import { updateStartIndex, isVisibleHandler, computedRightNodePos, computedSpace } from "./index";
-const api = ["state", "isVisibleHandler"];
-const renderless = (props, { reactive, watch, computed }) => {
+import {
+  updateStartIndex,
+  isVisibleHandler,
+  computedRightNodePos,
+  computedSpace,
+  handleMouseenter,
+  handleMouseleave
+} from "./index";
+const api = ["state", "isVisibleHandler", "handleMouseenter", "handleMouseleave"];
+const renderless = (props, { reactive, watch, computed }, { vm }) => {
   const state = reactive({
     startIndex: 0,
+    popoverVisible: false,
+    popoverContent: "",
+    popoverPlacement: "top",
     endIndex: computed(() => state.startIndex + props.visibleNum),
     rightNodePositions: computed(() => api2.computedRightNodePos()),
     computedSpace: computed(() => computedSpace({ props }))
@@ -12,6 +22,8 @@ const renderless = (props, { reactive, watch, computed }) => {
     state,
     updateStartIndex: updateStartIndex({ state, props }),
     isVisibleHandler: isVisibleHandler({ state, props }),
+    handleMouseenter: handleMouseenter({ state, vm }),
+    handleMouseleave: handleMouseleave(state),
     computedRightNodePos: computedRightNodePos({ state, props })
   };
   watch(() => props.active, api2.updateStartIndex, { immediate: true });

package/tab-item-mf/vue.js

@@ -1,14 +1,20 @@
 import "../chunk-G2ADBYYC.js";
-const renderless = (props, { inject }, { slots }) => {
+const renderless = (props, { inject, onBeforeUnmount, reactive, toRef, markRaw }, { slots, vm }) => {
   const tabs = inject("tabs", null);
-  const { title, name } = props;
-  const item = { title, name, slotDefault: slots.default, slotTitle: slots.title, slotSetting: slots.setting };
-  if (props.renderTitle)
-    item.slotTitle = props.renderTitle;
-  if (props.renderSetting)
-    item.slotSetting = props.renderSetting;
-  item.selected = (tabs.activeName || tabs.modelValue) === name;
+  const { lazy } = props;
+  const item = reactive({
+    title: toRef(props, "title"),
+    name: toRef(props, "name"),
+    slotDefault: slots.default,
+    slotTitle: props.renderTitle ? toRef(props, "renderTitle") : slots.title,
+    slotSetting: props.renderSetting ? toRef(props, "renderSetting") : slots.setting,
+    lazy,
+    selected: false,
+    vm: markRaw(vm)
+  });
+  item.selected = (tabs.activeName || tabs.modelValue) === item.name;
   tabs.addItem(item);
+  onBeforeUnmount(() => tabs.removeItem(item.name, true));
   return {};
 };
 export {

package/tab-nav/index.js

@@ -6,8 +6,10 @@ import { on, off } from "../common/deps/dom";
 const computedNavStyle = (state) => {
   const dir = ~[POSITION.Top, POSITION.Bottom].indexOf(state.rootTabs.position) ? "X" : "Y";
   if (state.mode === "mobile") {
+    const { offset, width } = state.lineStyle;
     return {
-      transform: `translate${dir}(${state.lineOffset}px) translate${dir}(-50%)`
+      width: `${width}px`,
+      transform: `translate${dir}(${offset}px) translate${dir}(-50%)`
     };
   } else {
     return {
@@ -28,7 +30,9 @@ const scrollIntoView = ({ parent, vm, state }) => () => {
   const from = nav.scrollLeft;
   if (state.mode === "mobile") {
     nav.scrollLeft += to - from;
-    state.lineOffset = activeTab.offsetLeft + activeTab.offsetWidth / 2;
+    const nameHtml = activeTab.querySelector(".tiny-mobile-tabs__name");
+    state.lineStyle.width = nameHtml.offsetWidth;
+    state.lineStyle.offset = activeTab.offsetLeft + activeTab.offsetWidth / 2;
   }
 };
 const computedSizeName = (state) => ~[POSITION.Top, POSITION.Bottom].indexOf(state.rootTabs.position) ? "width" : "height";
@@ -43,9 +47,10 @@ const updated = ({ api, vm, state }) => () => {
         navSize += item.offsetWidth;
       }
       if (item.classList && item.classList.contains("is-active")) {
-        const line = item.querySelector(".tiny-mobile-tabs__name");
+        const nameHtml = item.querySelector(".tiny-mobile-tabs__name");
         state.isActive = true;
-        state.lineOffset = item.offsetLeft + item.offsetWidth / 2;
+        state.lineStyle.width = nameHtml.offsetWidth;
+        state.lineStyle.offset = item.offsetLeft + item.offsetWidth / 2;
       }
     });
   }
@@ -281,7 +286,7 @@ const sortableEvent = ({
     onStart(event) {
       api.handleTabDragStart(event);
     },
-    onEnd(event) {
+    onEnd() {
       api.handleTabDragEnd();
     }
   });
@@ -295,6 +300,24 @@ const watchCurrentName = ({ nextTick, vm, state }) => () => {
     }
   });
 };
+const handleTitleMouseenter = ({ state, vm }) => (e, title) => {
+  const dom = e.target;
+  if (dom && dom.scrollWidth > dom.offsetWidth) {
+    const tooltip = vm.$refs.tooltip;
+    tooltip.state.referenceElm = dom;
+    tooltip.state.popperElm && (tooltip.state.popperElm.style.display = "none");
+    tooltip.doDestroy();
+    state.tooltipContent = title;
+    state.tooltipVisible = true;
+    setTimeout(tooltip.updatePopper, 20);
+  }
+};
+const handleTitleMouseleave = ({ state }) => () => {
+  state.tooltipVisible = false;
+  setTimeout(() => {
+    state.tooltipContent = "";
+  }, 20);
+};
 export {
   beforeUnmount,
   changeTab,
@@ -305,6 +328,8 @@ export {
   expandTabShow,
   handleTabDragEnd,
   handleTabDragStart,
+  handleTitleMouseenter,
+  handleTitleMouseleave,
   moreTabShow,
   mounted,
   removeFocus,

package/tab-nav/vue.js

@@ -22,7 +22,9 @@ import {
   sortableEvent,
   handleTabDragStart,
   handleTabDragEnd,
-  watchCurrentName
+  watchCurrentName,
+  handleTitleMouseenter,
+  handleTitleMouseleave
 } from "./index";
 const api = [
   "state",
@@ -37,19 +39,27 @@ const api = [
   "expandTabShow",
   "expandTabHide",
   "computedHeaderStyle",
-  "swiperHandle"
+  "swiperHandle",
+  "updated",
+  "handleTitleMouseenter",
+  "handleTitleMouseleave"
 ];
 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,
     navOffset: 0,
-    lineOffset: 0,
+    lineStyle: {
+      width: 20,
+      offset: 0
+    },
     scrollable: false,
     isFocus: false,
     focusable: false,
     showMoreItem: false,
     isActive: false,
+    tooltipVisible: false,
+    tooltipContent: "",
     showMoreTabs: props.showMoreTabs,
     showExpandItem: false,
     showExpandTabs: props.showExpandTabs,
@@ -79,7 +89,9 @@ const renderless = (props, { computed, inject, onBeforeUnmount, onMounted, onUpd
     watchCurrentName: watchCurrentName({ nextTick, vm, state }),
     handleTabDragStart: handleTabDragStart({ state, vm, emit }),
     handleTabDragEnd: handleTabDragEnd({ state, vm, nextTick }),
-    sortableEvent: sortableEvent({ api: api2, props, state, vm, emit, markRaw })
+    sortableEvent: sortableEvent({ api: api2, props, state, vm, emit, markRaw }),
+    handleTitleMouseenter: handleTitleMouseenter({ state, vm }),
+    handleTitleMouseleave: handleTitleMouseleave({ state })
   });
   Object.assign(api2, { updated: updated({ api: api2, vm, state }), changeTab: changeTab(api2) });
   onUpdated(() => api2.updated());

package/tabbar/vue.js

@@ -2,7 +2,7 @@ import "../chunk-G2ADBYYC.js";
 import { setActiveItem, onChange, getChildrens, getItems, beforeDestroy, initPage } from "./index";
 import { on } from "../common/deps/dom";
 const api = ["state", "onChange", "getChildrens"];
-const renderless = (props, { computed, onMounted, reactive, watch, onBeforeUnmount }, { vm, emit, nextTick, childrenHandler }) => {
+const renderless = (props, { computed, onMounted, reactive, watch, onBeforeUnmount, provide }, { vm, emit, nextTick, childrenHandler }) => {
   const api2 = {};
   const state = reactive({
     height: null,
@@ -11,7 +11,8 @@ const renderless = (props, { computed, onMounted, reactive, watch, onBeforeUnmou
     activeItem: false,
     showIndex: 0,
     showNumber: computed(() => props.showNumber > 0 ? props.showNumber : -1),
-    tabbarWidth: null
+    tabbarWidth: null,
+    itemList: computed(() => props.itemList || [])
   });
   Object.assign(api2, {
     state,
@@ -25,12 +26,17 @@ const renderless = (props, { computed, onMounted, reactive, watch, onBeforeUnmou
   });
   onMounted(() => {
     on(window, "resize", api2.initPage);
-    state.tabbarWidth = vm.$refs && vm.$refs.tabbar.offsetWidth;
+    state.tabbarWidth = vm.$refs.tabbar && vm.$refs.tabbar.offsetWidth;
     if (props.placeholder && props.fixed) {
       nextTick(() => {
         state.height = vm.$refs.tabbar.getBoundingClientRect().height;
       });
     }
+    state.itemList.forEach((item) => {
+      if (item.customIcon) {
+        provide("customIcon", item.customIcon);
+      }
+    });
   });
   vm.$on("updateItems", api2.getItems);
   vm.$on("activeItem", api2.onChange);