@touchvue/ui 1.0.0-beta.6 → 1.0.0-beta.60

package/es/packages/components/tab/src/tab.vue2.mjs

@@ -1,7 +1,9 @@
-import { defineComponent, ref, watch, onMounted, nextTick, computed, provide, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, createVNode, unref, mergeProps, withModifiers, withCtx } from 'vue';
+import { defineComponent, ref, computed, useSlots, watch, onMounted, onBeforeUnmount, nextTick, provide, resolveComponent, openBlock, createElementBlock, unref, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, mergeProps, withCtx, withModifiers, Teleport, createVNode } from 'vue';
 import { ToIcon } from '../../icon/index.mjs';
 import { ToFloat } from '../../float/index.mjs';
-import { getEm } from '../../../utils/ratio.mjs';
+import { langKey } from '../../../locale/index.mjs';
+import { useDevice } from '../../../hooks/useDevice.mjs';
+import { getModeClasses } from '../../../hooks/useSetClass.mjs';
 
 const __default__ = defineComponent({
   name: "ToTab"
@@ -9,16 +11,21 @@ const __default__ = defineComponent({
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
+    flex: { type: Boolean, default: false },
     modelValue: { default: "" },
     itemWidth: { default: "" },
     mode: { default: "default" },
     data: { default: () => [] },
     removable: { type: Boolean, default: false },
-    over: { default: "control" },
+    position: { default: "" },
+    itemDir: { default: "" },
+    over: { default: "" },
     event: { default: "click" },
     contentType: { default: "" },
     title: { default: "" },
     height: { default: "" },
+    changePic: { type: Boolean, default: false },
+    align: { default: "" },
     beforeChange: { type: Function, default: null },
     beforeRemove: { type: Function, default: null }
   },
@@ -27,59 +34,138 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const props = __props;
     const selectValue = ref("");
+    const elRef = ref(null);
     const _data = ref([]);
     const floatRef = ref(null);
+    const overflowFloatRef = ref(null);
+    const overflowIconRef = ref(null);
+    const overflowTabs = ref([]);
+    const overflowFloatShow = computed(() => props.over === "float" && overflowTabs.value.length > 0);
     const ul = ref(null);
     const list = ref(null);
+    const tabScrollRef = ref(null);
+    const tabScrollWidth = ref(0);
+    const tabScrollLeft = ref(0);
+    const tabScrollable = ref(false);
+    const tabScrollDragging = ref(false);
+    const activeOver = ref("");
     let scrollTimer = null;
     const controlShow = ref(false);
+    let stopChange = false;
+    let activeOverVersion = 0;
+    const slot = useSlots();
+    const { isPc } = useDevice();
+    const tabScrollShow = computed(() => isPc.value && tabScrollable.value);
+    const tabScrollStyle = computed(() => {
+      return {
+        width: `${tabScrollWidth.value}px`,
+        left: `${tabScrollLeft.value}px`
+      };
+    });
     watch(
       () => props.modelValue,
-      (val) => {
-        selectValue.value = val;
+      (val, old) => {
+        if (val || val === 0) {
+          selectValue.value = val;
+          scrollSelectTabIntoView();
+        } else {
+          emit("update:modelValue", old);
+        }
       },
       { immediate: true }
     );
+    watch(
+      () => props.data,
+      () => {
+        if (!stopChange) {
+          initData();
+        }
+      },
+      { deep: true }
+    );
+    watch(
+      () => isPc.value,
+      () => {
+        updateTabLayout();
+      }
+    );
+    watch(
+      () => props.over,
+      () => {
+        updateTabLayout();
+      }
+    );
     onMounted(() => {
-      if (props.data) {
+      initData();
+      window.addEventListener("resize", updateTabLayout);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", updateTabLayout);
+      stopTabScrollDrag();
+      scrollStop();
+    });
+    function initData() {
+      if (props.data && props.data.length) {
         if (typeof props.data === "string") {
           _data.value = props.data.split(",").map((item) => ({ label: item, value: item }));
         } else if (Array.isArray(props.data) && props.data.length) {
           _data.value = props.data;
         }
+        if (!selectValue.value && selectValue.value !== 0) {
+          const hasNoOnItems = !_data.value.some((item) => item.on);
+          if (hasNoOnItems) {
+            selectValue.value = _data.value[0].value;
+          }
+        }
       }
       if (props.over === "control") {
         nextTick(() => {
           setLayout();
         });
       }
-    });
+      if (props.over === "float") {
+        updateOverflowTabs();
+      }
+      updateTabScroll();
+      updateActiveOver();
+    }
     const setTabStyle = computed(() => {
       let obj = {};
-      if (props.itemWidth) {
-        if (!isNaN(Number(props.itemWidth))) {
-          obj.width = props.itemWidth + "em";
-        } else {
-          if (props.itemWidth === "avg") {
-            obj.width = 100 / _data.value.length + "%";
-          } else {
-            obj.width = props.itemWidth;
-          }
-        }
+      if (props.itemWidth && !isNaN(Number(props.itemWidth)) && props.itemWidth !== "avg") {
+        obj.width = props.itemWidth + "em";
       }
       return obj;
     });
     const setClass = computed(() => {
       let arr = [];
+      if (props.height === "full") {
+        arr.push(`height-full`);
+      }
       if (props.mode) {
-        arr.push(`mode-${props.mode}`);
+        arr.push(...getModeClasses(props.mode));
       }
-      return arr;
-    });
-    const setUlClass = computed(() => {
-      let arr = [];
-      if (props.over) {
-        arr.push(`over-${props.over}`);
+      if (props.position === "left") {
+        arr.push(`position-left`);
+        arr.push(`dir-v`);
+      }
+      if (props.position === "right") {
+        arr.push(`position-right`);
+        arr.push(`dir-v`);
+      }
+      if (props.position === "bottom") {
+        arr.push(`position-bottom`);
+      }
+      if (props.itemDir) {
+        arr.push(`item-dir-${props.itemDir}`);
+      }
+      if (props.itemWidth === "avg") {
+        arr.push(`item-width-avg`);
+      }
+      if (props.align) {
+        arr.push(`align-${props.align}`);
+      }
+      if (activeOver.value) {
+        arr.push(`over-${activeOver.value}`);
       }
       return arr;
     });
@@ -88,16 +174,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       if (props.height) {
         if (!isNaN(Number(props.height))) {
           obj.height = props.height + "em";
-        } else if (props.height === "full") {
-          obj.height = "100%";
         } else {
           obj.height = props.height;
         }
       }
       return obj;
     });
-    async function changeTab(item, index, event) {
-      if (props.event !== event)
+    async function changeTab(item, index, event, force = false) {
+      if (!force && props.event !== event)
         return false;
       if (item.disabled)
         return false;
@@ -114,12 +198,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
       if (!flag)
         return false;
+      stopChange = true;
       if (props.contentType === "float") {
         floatRef.value.open(ul.value);
       }
       selectValue.value = item.value;
       emit("update:modelValue", item.value);
       emit("change", item.value, item, index);
+      scrollTabIntoView(index);
+      setTimeout(() => {
+        stopChange = false;
+      }, 10);
+      return true;
     }
     async function removePTab(item, idx) {
       let flag = true;
@@ -135,6 +225,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
       if (!flag)
         return false;
+      stopChange = true;
       if (item.value === selectValue.value) {
         if (idx > 0) {
           selectValue.value = _data.value[idx - 1].value;
@@ -145,11 +236,17 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
       _data.value.splice(idx, 1);
       if (props.over === "control") {
-        nextTick(() => {
-          setLayout();
-        });
+        setLayout();
+      }
+      if (props.over === "float") {
+        updateOverflowTabs();
       }
+      updateTabScroll();
+      updateActiveOver();
       emit("remove", item.value, item, idx);
+      setTimeout(() => {
+        stopChange = false;
+      }, 10);
     }
     function removeTab(val) {
       console.log(val);
@@ -157,6 +254,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     function addTab(tab) {
       if (props.data && props.data.length)
         return false;
+      stopChange = true;
       let idx = _data.value.findIndex((item) => item.value === tab.value);
       if (idx === -1) {
         if (tab.on) {
@@ -168,11 +266,26 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             setLayout();
           });
         }
+        if (props.over === "float") {
+          updateOverflowTabs();
+        }
+        updateTabScroll();
+        updateActiveOver();
+      }
+      setTimeout(() => {
+        stopChange = false;
+      }, 10);
+    }
+    function updateTabLabel(oldLabel, label) {
+      let idx = _data.value.findIndex((item) => item.label === oldLabel);
+      if (idx !== -1) {
+        _data.value[idx].label = label;
+        updateTabLayout();
       }
     }
     function getPicOn(pic) {
       let src = "";
-      if (pic) {
+      if (pic && props.changePic) {
         let arr = pic.split(".");
         if (arr.length === 2) {
           src = arr[0] + "-on." + arr[1];
@@ -185,49 +298,254 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             }
           });
         }
+      } else {
+        src = pic;
       }
       return src;
     }
     function contextmenu(item, idx) {
       emit("contextmenu", item.value, item, idx);
     }
+    function updateTabLayout() {
+      if (props.over === "control") {
+        setLayout();
+      }
+      updateActiveOver();
+      updateOverflowTabs();
+      updateTabScroll();
+    }
+    function handleListScroll() {
+      setOverflowTabs();
+      setTabScroll();
+    }
+    function updateOverflowTabs() {
+      nextTick(() => {
+        setOverflowTabs();
+      });
+    }
+    function setOverflowTabs() {
+      if (props.over !== "float" || !list.value || !ul.value) {
+        overflowTabs.value = [];
+        return;
+      }
+      const listRect = list.value.getBoundingClientRect();
+      if (!listRect.width || !listRect.height) {
+        overflowTabs.value = [];
+        return;
+      }
+      const hiddenIndexes = /* @__PURE__ */ new Set();
+      const itemNodes = Array.from(ul.value.querySelectorAll(".to-tab-item"));
+      itemNodes.forEach((node) => {
+        const index = Number(node.dataset.tabIndex);
+        if (Number.isNaN(index))
+          return;
+        const rect = node.getBoundingClientRect();
+        const isHidden = rect.left < listRect.left - 1 || rect.right > listRect.right + 1 || rect.top < listRect.top - 1 || rect.bottom > listRect.bottom + 1;
+        if (isHidden) {
+          hiddenIndexes.add(index);
+        }
+      });
+      const oldShow = overflowTabs.value.length > 0;
+      overflowTabs.value = _data.value.map((item, index) => ({ item, index })).filter((tab) => hiddenIndexes.has(tab.index));
+      if (oldShow !== overflowTabs.value.length > 0) {
+        updateOverflowTabs();
+      }
+    }
+    function updateTabScroll() {
+      nextTick(() => {
+        setTabScroll();
+      });
+    }
+    function setTabScroll() {
+      if (!isPc.value || !list.value || !ul.value) {
+        tabScrollable.value = false;
+        return;
+      }
+      const listWidth = list.value.clientWidth;
+      const scrollWidth = ul.value.scrollWidth;
+      const scrollRange = scrollWidth - listWidth;
+      if (listWidth <= 0 || scrollRange <= 1) {
+        tabScrollable.value = false;
+        tabScrollWidth.value = 0;
+        tabScrollLeft.value = 0;
+        list.value.scrollLeft = 0;
+        return;
+      }
+      const scrollLeft = Math.max(0, Math.min(scrollRange, list.value.scrollLeft));
+      if (scrollLeft !== list.value.scrollLeft) {
+        list.value.scrollLeft = scrollLeft;
+      }
+      tabScrollable.value = true;
+      tabScrollWidth.value = Math.max(listWidth * listWidth / scrollWidth, 16);
+      const trackRange = Math.max(listWidth - tabScrollWidth.value, 0);
+      const scrollRatio = scrollLeft / scrollRange;
+      tabScrollLeft.value = scrollLeft + scrollRatio * trackRange;
+    }
+    function getTabScrollRange() {
+      if (!list.value || !ul.value)
+        return 0;
+      return Math.max(ul.value.scrollWidth - list.value.clientWidth, 0);
+    }
+    async function updateActiveOver() {
+      const version = ++activeOverVersion;
+      const over = props.over;
+      if (over !== "avg" && over !== "wrap") {
+        activeOver.value = over;
+        return;
+      }
+      activeOver.value = "";
+      await nextTick();
+      if (version !== activeOverVersion || props.over !== over || !list.value || !ul.value)
+        return;
+      activeOver.value = getTabScrollRange() > 1 ? over : "";
+      await nextTick();
+      if (version !== activeOverVersion)
+        return;
+      setTabScroll();
+    }
+    function setTabScrollLeft(scrollLeft) {
+      if (!list.value)
+        return;
+      const scrollRange = getTabScrollRange();
+      list.value.scrollLeft = Math.max(0, Math.min(scrollRange, scrollLeft));
+      setTabScroll();
+      setOverflowTabs();
+    }
+    function startTabScrollDrag(event) {
+      if (!tabScrollShow.value || !list.value || !ul.value)
+        return;
+      event.preventDefault();
+      tabScrollDragging.value = true;
+      const startX = event.clientX;
+      const startScrollLeft = list.value.scrollLeft;
+      const listWidth = list.value.clientWidth;
+      const scrollRange = getTabScrollRange();
+      const trackRange = Math.max(listWidth - tabScrollWidth.value, 1);
+      const move = (moveEvent) => {
+        moveEvent.preventDefault();
+        const nextScrollLeft = startScrollLeft + (moveEvent.clientX - startX) / trackRange * scrollRange;
+        setTabScrollLeft(nextScrollLeft);
+      };
+      const up = () => {
+        stopTabScrollDrag();
+      };
+      window.addEventListener("mousemove", move);
+      window.addEventListener("mouseup", up, { once: true });
+      tabScrollMove = move;
+      tabScrollUp = up;
+    }
+    let tabScrollMove = null;
+    let tabScrollUp = null;
+    function stopTabScrollDrag() {
+      tabScrollDragging.value = false;
+      if (tabScrollMove) {
+        window.removeEventListener("mousemove", tabScrollMove);
+        tabScrollMove = null;
+      }
+      if (tabScrollUp) {
+        window.removeEventListener("mouseup", tabScrollUp);
+        tabScrollUp = null;
+      }
+    }
+    async function toggleOverflowFloat() {
+      var _a, _b, _c, _d;
+      updateOverflowTabs();
+      await nextTick();
+      if (overflowTabs.value.length) {
+        (_b = (_a = overflowFloatRef.value) == null ? void 0 : _a.toggle) == null ? void 0 : _b.call(_a, overflowIconRef.value);
+      } else {
+        (_d = (_c = overflowFloatRef.value) == null ? void 0 : _c.close) == null ? void 0 : _d.call(_c);
+      }
+    }
+    async function changeOverflowTab(tab) {
+      var _a, _b;
+      const changed = await changeTab(tab.item, tab.index, "click", true);
+      if (changed !== false) {
+        (_b = (_a = overflowFloatRef.value) == null ? void 0 : _a.close) == null ? void 0 : _b.call(_a);
+        scrollTabIntoView(tab.index);
+      }
+    }
+    async function removeOverflowTab(tab) {
+      var _a, _b;
+      await removePTab(tab.item, tab.index);
+      updateOverflowTabs();
+      await nextTick();
+      if (!overflowTabs.value.length) {
+        (_b = (_a = overflowFloatRef.value) == null ? void 0 : _a.close) == null ? void 0 : _b.call(_a);
+      }
+    }
+    function scrollTabIntoView(index) {
+      nextTick(() => {
+        if (!list.value || !ul.value)
+          return;
+        const node = ul.value.querySelector(`.to-tab-item[data-tab-index="${index}"]`);
+        if (!node)
+          return;
+        const listRect = list.value.getBoundingClientRect();
+        const nodeRect = node.getBoundingClientRect();
+        if (nodeRect.right > listRect.right) {
+          setTabScrollLeft(list.value.scrollLeft + nodeRect.right - listRect.right);
+        } else if (nodeRect.left < listRect.left) {
+          setTabScrollLeft(list.value.scrollLeft + nodeRect.left - listRect.left);
+        } else {
+          updateOverflowTabs();
+          updateTabScroll();
+        }
+      });
+    }
+    function scrollSelectTabIntoView() {
+      const index = _data.value.findIndex((item) => item.value === selectValue.value);
+      if (index !== -1) {
+        scrollTabIntoView(index);
+      }
+    }
     function controlLeftScroll() {
       scrollTimer = setInterval(() => {
-        ul.value.scrollTo({
-          left: ul.value.scrollLeft - getEm(),
-          behavior: "smooth"
-          // 平滑滚动效果
-        });
-      }, 50);
+        var _a;
+        setTabScrollLeft((((_a = list.value) == null ? void 0 : _a.scrollLeft) || 0) - 3);
+      }, 1);
     }
     function controlRightScroll() {
       scrollTimer = setInterval(() => {
-        ul.value.scrollTo({
-          left: ul.value.scrollLeft + getEm(),
-          behavior: "smooth"
-          // 平滑滚动效果
-        });
-      }, 50);
+        var _a;
+        setTabScrollLeft((((_a = list.value) == null ? void 0 : _a.scrollLeft) || 0) + 3);
+      }, 1);
     }
     function scrollStop() {
-      clearInterval(scrollTimer);
+      if (scrollTimer) {
+        clearInterval(scrollTimer);
+        scrollTimer = null;
+      }
     }
     function setLayout() {
-      if (ul.value.clientWidth < ul.value.scrollWidth) {
-        controlShow.value = true;
-      } else {
-        controlShow.value = false;
-      }
+      nextTick(() => {
+        if (!list.value || !ul.value) {
+          controlShow.value = false;
+          return;
+        }
+        controlShow.value = getTabScrollRange() > 1;
+        if (!controlShow.value) {
+          list.value.scrollLeft = 0;
+        }
+        setTabScroll();
+      });
     }
     provide("TabProvide", {
       addTab,
       removeTab,
+      updateTabLabel,
       selectValue
     });
     return (_ctx, _cache) => {
       const _component_to_pic = resolveComponent("to-pic");
+      const _component_to_tag = resolveComponent("to-tag");
+      const _component_to_scroll = resolveComponent("to-scroll");
       return openBlock(), createElementBlock("div", {
+        ref_key: "elRef",
+        ref: elRef,
+        key: unref(langKey),
         class: normalizeClass(["to-tab", setClass.value]),
+        flex: _ctx.flex ? _ctx.flex : null,
         style: normalizeStyle(setStyle.value)
       }, [
         createElementVNode("div", { class: "to-tab-tab" }, [
@@ -237,77 +555,148 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("div", { class: "to-tab-title-text" }, [
               renderSlot(_ctx.$slots, "title", {}, () => [
-                createTextVNode(toDisplayString(_ctx.title), 1)
+                createTextVNode(
+                  toDisplayString(_ctx.title),
+                  1
+                  /* TEXT */
+                )
               ])
             ])
-          ])) : createCommentVNode("", true),
-          createElementVNode("div", {
-            ref_key: "list",
-            ref: list,
-            class: "to-tab-list"
-          }, [
-            createElementVNode("div", {
-              ref_key: "ul",
-              ref: ul,
-              class: normalizeClass(["to-tab-wrapper", setUlClass.value])
-            }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_data.value, (item, index) => {
-                return openBlock(), createElementBlock(Fragment, { key: index }, [
-                  _ctx.$slots.center && Math.floor(_data.value.length / 2) === index ? (openBlock(), createElementBlock("div", { key: 0 }, [
-                    renderSlot(_ctx.$slots, "center")
-                  ])) : (openBlock(), createElementBlock("div", {
-                    key: 1,
-                    class: normalizeClass(["to-tab-item", { "is-on": item.value === selectValue.value, "is-disabled": item.disabled }]),
-                    style: normalizeStyle(setTabStyle.value),
-                    onClick: ($event) => changeTab(item, index, "click"),
-                    onMouseover: ($event) => changeTab(item, index, "hover"),
-                    onContextmenu: ($event) => contextmenu(item, index)
-                  }, [
-                    renderSlot(_ctx.$slots, "item", {
-                      item,
-                      index
-                    }, () => [
-                      createElementVNode("div", { class: "to-tab-item-main" }, [
-                        createElementVNode("div", { class: "to-tab-item-left" }),
-                        createElementVNode("div", { class: "to-tab-item-content" }, [
-                          item.pic ? (openBlock(), createBlock(_component_to_pic, {
-                            key: 0,
-                            class: "to-tab-item-pic",
-                            src: item.value === selectValue.value ? getPicOn(item.pic) : item.pic,
-                            width: 2
-                          }, null, 8, ["src"])) : createCommentVNode("", true),
-                          item.icon ? (openBlock(), createElementBlock("span", {
+          ])) : createCommentVNode("v-if", true),
+          createElementVNode(
+            "div",
+            {
+              ref_key: "list",
+              ref: list,
+              class: "to-tab-list",
+              onScroll: handleListScroll
+            },
+            [
+              createElementVNode(
+                "div",
+                {
+                  ref_key: "ul",
+                  ref: ul,
+                  class: "to-tab-wrapper"
+                },
+                [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(_data.value, (item, index) => {
+                      return openBlock(), createElementBlock(
+                        Fragment,
+                        { key: index },
+                        [
+                          _ctx.$slots.center && Math.floor(_data.value.length / 2) === index ? (openBlock(), createElementBlock("div", { key: 0 }, [
+                            renderSlot(_ctx.$slots, "center")
+                          ])) : (openBlock(), createElementBlock("div", {
                             key: 1,
-                            class: "to-tab-item-icon"
+                            class: normalizeClass(["to-tab-item", { "is-on": item.value === selectValue.value, "is-disabled": item.disabled }]),
+                            "data-tab-index": index,
+                            style: normalizeStyle(setTabStyle.value),
+                            onClick: ($event) => changeTab(item, index, "click"),
+                            onMouseover: ($event) => changeTab(item, index, "hover"),
+                            onContextmenu: ($event) => contextmenu(item, index)
                           }, [
-                            createVNode(unref(ToIcon), {
-                              value: item.icon,
-                              type: item.value === selectValue.value ? "fill" : "",
-                              mode: "tab-icon"
-                            }, null, 8, ["value", "type"])
-                          ])) : createCommentVNode("", true),
-                          createElementVNode("div", { class: "to-tab-item-label" }, [
-                            renderSlot(_ctx.$slots, "label", mergeProps({ ref_for: true }, item), () => [
-                              createTextVNode(toDisplayString(item.label), 1)
+                            renderSlot(_ctx.$slots, "item", {
+                              item,
+                              index
+                            }, () => [
+                              createElementVNode("div", { class: "to-tab-item-main" }, [
+                                createElementVNode("div", { class: "to-tab-item-left" }),
+                                createElementVNode("div", { class: "to-tab-item-content" }, [
+                                  item.pic ? (openBlock(), createBlock(_component_to_pic, {
+                                    key: 0,
+                                    class: "to-tab-item-pic",
+                                    src: item.value === selectValue.value ? getPicOn(item.pic) : item.pic
+                                  }, null, 8, ["src"])) : createCommentVNode("v-if", true),
+                                  item.icon ? (openBlock(), createBlock(unref(ToIcon), {
+                                    key: 1,
+                                    value: item.icon,
+                                    class: "to-tab-item-icon",
+                                    type: item.value === selectValue.value ? "fill" : "",
+                                    mode: "tab-icon"
+                                  }, null, 8, ["value", "type"])) : createCommentVNode("v-if", true),
+                                  createElementVNode("div", { class: "to-tab-item-label" }, [
+                                    renderSlot(_ctx.$slots, "label", mergeProps({ ref_for: true }, item), () => [
+                                      createTextVNode(
+                                        toDisplayString(item.label),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ])
+                                  ]),
+                                  item.count ? (openBlock(), createBlock(
+                                    _component_to_tag,
+                                    {
+                                      key: 2,
+                                      type: "number",
+                                      class: "to-tab-item-count"
+                                    },
+                                    {
+                                      default: withCtx(() => [
+                                        createTextVNode(
+                                          toDisplayString(item.count),
+                                          1
+                                          /* TEXT */
+                                        )
+                                      ]),
+                                      _: 2
+                                      /* DYNAMIC */
+                                    },
+                                    1024
+                                    /* DYNAMIC_SLOTS */
+                                  )) : createCommentVNode("v-if", true),
+                                  _ctx.removable ? (openBlock(), createBlock(unref(ToIcon), {
+                                    key: 3,
+                                    value: "close",
+                                    link: "",
+                                    class: "to-tab-item-remove",
+                                    onClick: withModifiers(($event) => removePTab(item, index), ["stop"])
+                                  }, null, 8, ["onClick"])) : createCommentVNode("v-if", true)
+                                ]),
+                                createElementVNode("div", { class: "to-tab-item-right" })
+                              ]),
+                              createElementVNode("div", { class: "to-tab-indicator" })
                             ])
-                          ]),
-                          _ctx.removable ? (openBlock(), createElementBlock("span", {
-                            key: 2,
-                            class: "to-tab-item-remove",
-                            onClick: withModifiers(($event) => removePTab(item, index), ["stop"])
-                          }, null, 8, ["onClick"])) : createCommentVNode("", true)
-                        ]),
-                        createElementVNode("div", { class: "to-tab-item-right" })
-                      ]),
-                      createElementVNode("div", { class: "to-tab-item-under" })
-                    ])
-                  ], 46, ["onClick", "onMouseover", "onContextmenu"]))
-                ], 64);
-              }), 128))
-            ], 2)
-          ], 512),
-          createElementVNode("div", { class: "to-tab-divider" }),
-          createElementVNode("div", { class: "to-tab-fn" }, [
+                          ], 46, ["data-tab-index", "onClick", "onMouseover", "onContextmenu"]))
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      );
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ],
+                512
+                /* NEED_PATCH */
+              ),
+              tabScrollShow.value ? (openBlock(), createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  ref_key: "tabScrollRef",
+                  ref: tabScrollRef,
+                  class: normalizeClass(["to-tab-list-scroll", { "is-dragging": tabScrollDragging.value }]),
+                  style: normalizeStyle(tabScrollStyle.value),
+                  onMousedown: startTabScrollDrag
+                },
+                [
+                  createElementVNode("div", { class: "to-tab-list-scroll-bar" })
+                ],
+                38
+                /* CLASS, STYLE, NEED_HYDRATION */
+              )) : createCommentVNode("v-if", true)
+            ],
+            544
+            /* NEED_HYDRATION, NEED_PATCH */
+          ),
+          controlShow.value || overflowFloatShow.value || unref(slot).fn ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "to-tab-fn"
+          }, [
             _ctx.over === "control" && controlShow.value ? (openBlock(), createBlock(unref(ToIcon), {
               key: 0,
               class: "to-tab-fn-item",
@@ -316,7 +705,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               onMousedown: controlLeftScroll,
               onMouseup: scrollStop,
               onMouseleave: scrollStop
-            })) : createCommentVNode("", true),
+            })) : createCommentVNode("v-if", true),
             _ctx.over === "control" && controlShow.value ? (openBlock(), createBlock(unref(ToIcon), {
               key: 1,
               class: "to-tab-fn-item",
@@ -325,32 +714,127 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               onMousedown: controlRightScroll,
               onMouseup: scrollStop,
               onMouseleave: scrollStop
-            })) : createCommentVNode("", true),
+            })) : createCommentVNode("v-if", true),
             renderSlot(_ctx.$slots, "fn"),
-            _ctx.over === "float" ? (openBlock(), createBlock(unref(ToIcon), {
-              key: 2,
-              value: "menu",
-              link: ""
-            })) : createCommentVNode("", true)
-          ])
+            overflowFloatShow.value ? (openBlock(), createBlock(
+              unref(ToIcon),
+              {
+                key: 2,
+                ref_key: "overflowIconRef",
+                ref: overflowIconRef,
+                value: "more",
+                link: "",
+                onClick: toggleOverflowFloat
+              },
+              null,
+              512
+              /* NEED_PATCH */
+            )) : createCommentVNode("v-if", true),
+            overflowFloatShow.value ? (openBlock(), createBlock(Teleport, {
+              key: 3,
+              to: "body"
+            }, [
+              createElementVNode("div", { class: "to-tab" }, [
+                createVNode(
+                  unref(ToFloat),
+                  {
+                    ref_key: "overflowFloatRef",
+                    ref: overflowFloatRef,
+                    align: "right",
+                    global: false,
+                    class: "to-tab-over-float",
+                    lazy: false,
+                    width: "12"
+                  },
+                  {
+                    default: withCtx(() => [
+                      createVNode(_component_to_scroll, { class: "to-tab-over-scroll" }, {
+                        default: withCtx(() => [
+                          createElementVNode("div", { class: "to-tab-over-list" }, [
+                            (openBlock(true), createElementBlock(
+                              Fragment,
+                              null,
+                              renderList(overflowTabs.value, (tab) => {
+                                return openBlock(), createElementBlock("div", {
+                                  key: tab.index,
+                                  class: normalizeClass(["to-tab-over-item", { "is-on": tab.item.value === selectValue.value, "is-disabled": tab.item.disabled }]),
+                                  onClick: ($event) => changeOverflowTab(tab),
+                                  onContextmenu: ($event) => contextmenu(tab.item, tab.index)
+                                }, [
+                                  tab.item.pic ? (openBlock(), createBlock(_component_to_pic, {
+                                    key: 0,
+                                    class: "to-tab-over-item-pic",
+                                    src: tab.item.value === selectValue.value ? getPicOn(tab.item.pic) : tab.item.pic
+                                  }, null, 8, ["src"])) : createCommentVNode("v-if", true),
+                                  tab.item.icon ? (openBlock(), createBlock(unref(ToIcon), {
+                                    key: 1,
+                                    value: tab.item.icon,
+                                    class: "to-tab-over-item-icon",
+                                    type: tab.item.value === selectValue.value ? "fill" : "",
+                                    mode: "tab-icon"
+                                  }, null, 8, ["value", "type"])) : createCommentVNode("v-if", true),
+                                  createElementVNode("div", { class: "to-tab-over-item-label" }, [
+                                    renderSlot(_ctx.$slots, "label", mergeProps({ ref_for: true }, tab.item), () => [
+                                      createTextVNode(
+                                        toDisplayString(tab.item.label),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ])
+                                  ]),
+                                  _ctx.removable ? (openBlock(), createBlock(unref(ToIcon), {
+                                    key: 2,
+                                    value: "close",
+                                    link: "",
+                                    class: "to-tab-over-item-remove",
+                                    onClick: withModifiers(($event) => removeOverflowTab(tab), ["stop"])
+                                  }, null, 8, ["onClick"])) : createCommentVNode("v-if", true)
+                                ], 42, ["onClick", "onContextmenu"]);
+                              }),
+                              128
+                              /* KEYED_FRAGMENT */
+                            ))
+                          ])
+                        ]),
+                        _: 3
+                        /* FORWARDED */
+                      })
+                    ]),
+                    _: 3
+                    /* FORWARDED */
+                  },
+                  512
+                  /* NEED_PATCH */
+                )
+              ])
+            ])) : createCommentVNode("v-if", true)
+          ])) : createCommentVNode("v-if", true),
+          createElementVNode("div", { class: "to-tab-divider" })
         ]),
-        _ctx.contentType === "float" ? (openBlock(), createBlock(unref(ToFloat), {
-          key: 0,
-          ref_key: "floatRef",
-          ref: floatRef,
-          lazy: false
-        }, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "default")
-          ]),
-          _: 3
-        }, 512)) : (openBlock(), createElementBlock("div", {
+        _ctx.contentType === "float" ? (openBlock(), createBlock(
+          unref(ToFloat),
+          {
+            key: 0,
+            ref_key: "floatRef",
+            ref: floatRef,
+            lazy: false
+          },
+          {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+            /* FORWARDED */
+          },
+          512
+          /* NEED_PATCH */
+        )) : (openBlock(), createElementBlock("div", {
           key: 1,
           class: "to-tab-page"
         }, [
           renderSlot(_ctx.$slots, "default")
         ]))
-      ], 6);
+      ], 14, ["flex"]);
     };
   }
 });