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

package/lib/packages/components/tab/src/tab.vue2.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var index = require('../../icon/index.js');
-var index$1 = require('../../float/index.js');
-var ratio = require('../../../utils/ratio.js');
+var index$1 = require('../../icon/index.js');
+var index$2 = require('../../float/index.js');
+var index = require('../../../locale/index.js');
+var useDevice = require('../../../hooks/useDevice.js');
+var useSetClass = require('../../../hooks/useSetClass.js');
 
 const __default__ = vue.defineComponent({
   name: "ToTab"
@@ -13,16 +15,21 @@ const __default__ = vue.defineComponent({
 var _sfc_main = /* @__PURE__ */ vue.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 }
   },
@@ -31,59 +38,138 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const emit = __emit;
     const props = __props;
     const selectValue = vue.ref("");
+    const elRef = vue.ref(null);
     const _data = vue.ref([]);
     const floatRef = vue.ref(null);
+    const overflowFloatRef = vue.ref(null);
+    const overflowIconRef = vue.ref(null);
+    const overflowTabs = vue.ref([]);
+    const overflowFloatShow = vue.computed(() => props.over === "float" && overflowTabs.value.length > 0);
     const ul = vue.ref(null);
     const list = vue.ref(null);
+    const tabScrollRef = vue.ref(null);
+    const tabScrollWidth = vue.ref(0);
+    const tabScrollLeft = vue.ref(0);
+    const tabScrollable = vue.ref(false);
+    const tabScrollDragging = vue.ref(false);
+    const activeOver = vue.ref("");
     let scrollTimer = null;
     const controlShow = vue.ref(false);
+    let stopChange = false;
+    let activeOverVersion = 0;
+    const slot = vue.useSlots();
+    const { isPc } = useDevice.useDevice();
+    const tabScrollShow = vue.computed(() => isPc.value && tabScrollable.value);
+    const tabScrollStyle = vue.computed(() => {
+      return {
+        width: `${tabScrollWidth.value}px`,
+        left: `${tabScrollLeft.value}px`
+      };
+    });
     vue.watch(
       () => props.modelValue,
-      (val) => {
-        selectValue.value = val;
+      (val, old) => {
+        if (val || val === 0) {
+          selectValue.value = val;
+          scrollSelectTabIntoView();
+        } else {
+          emit("update:modelValue", old);
+        }
       },
       { immediate: true }
     );
+    vue.watch(
+      () => props.data,
+      () => {
+        if (!stopChange) {
+          initData();
+        }
+      },
+      { deep: true }
+    );
+    vue.watch(
+      () => isPc.value,
+      () => {
+        updateTabLayout();
+      }
+    );
+    vue.watch(
+      () => props.over,
+      () => {
+        updateTabLayout();
+      }
+    );
     vue.onMounted(() => {
-      if (props.data) {
+      initData();
+      window.addEventListener("resize", updateTabLayout);
+    });
+    vue.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") {
         vue.nextTick(() => {
           setLayout();
         });
       }
-    });
+      if (props.over === "float") {
+        updateOverflowTabs();
+      }
+      updateTabScroll();
+      updateActiveOver();
+    }
     const setTabStyle = vue.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 = vue.computed(() => {
       let arr = [];
+      if (props.height === "full") {
+        arr.push(`height-full`);
+      }
       if (props.mode) {
-        arr.push(`mode-${props.mode}`);
+        arr.push(...useSetClass.getModeClasses(props.mode));
       }
-      return arr;
-    });
-    const setUlClass = vue.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;
     });
@@ -92,16 +178,14 @@ var _sfc_main = /* @__PURE__ */ vue.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;
@@ -118,12 +202,18 @@ var _sfc_main = /* @__PURE__ */ vue.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;
@@ -139,6 +229,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       if (!flag)
         return false;
+      stopChange = true;
       if (item.value === selectValue.value) {
         if (idx > 0) {
           selectValue.value = _data.value[idx - 1].value;
@@ -149,11 +240,17 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       _data.value.splice(idx, 1);
       if (props.over === "control") {
-        vue.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);
@@ -161,6 +258,7 @@ var _sfc_main = /* @__PURE__ */ vue.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) {
@@ -172,11 +270,26 @@ var _sfc_main = /* @__PURE__ */ vue.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];
@@ -189,49 +302,254 @@ var _sfc_main = /* @__PURE__ */ vue.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() {
+      vue.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() {
+      vue.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 vue.nextTick();
+      if (version !== activeOverVersion || props.over !== over || !list.value || !ul.value)
+        return;
+      activeOver.value = getTabScrollRange() > 1 ? over : "";
+      await vue.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 vue.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 vue.nextTick();
+      if (!overflowTabs.value.length) {
+        (_b = (_a = overflowFloatRef.value) == null ? void 0 : _a.close) == null ? void 0 : _b.call(_a);
+      }
+    }
+    function scrollTabIntoView(index) {
+      vue.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 - ratio.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 + ratio.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;
-      }
+      vue.nextTick(() => {
+        if (!list.value || !ul.value) {
+          controlShow.value = false;
+          return;
+        }
+        controlShow.value = getTabScrollRange() > 1;
+        if (!controlShow.value) {
+          list.value.scrollLeft = 0;
+        }
+        setTabScroll();
+      });
     }
     vue.provide("TabProvide", {
       addTab,
       removeTab,
+      updateTabLabel,
       selectValue
     });
     return (_ctx, _cache) => {
       const _component_to_pic = vue.resolveComponent("to-pic");
+      const _component_to_tag = vue.resolveComponent("to-tag");
+      const _component_to_scroll = vue.resolveComponent("to-scroll");
       return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "elRef",
+        ref: elRef,
+        key: vue.unref(index.langKey),
         class: vue.normalizeClass(["to-tab", setClass.value]),
+        flex: _ctx.flex ? _ctx.flex : null,
         style: vue.normalizeStyle(setStyle.value)
       }, [
         vue.createElementVNode("div", { class: "to-tab-tab" }, [
@@ -241,78 +559,149 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.createElementVNode("div", { class: "to-tab-title-text" }, [
               vue.renderSlot(_ctx.$slots, "title", {}, () => [
-                vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
+                vue.createTextVNode(
+                  vue.toDisplayString(_ctx.title),
+                  1
+                  /* TEXT */
+                )
               ])
             ])
-          ])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", {
-            ref_key: "list",
-            ref: list,
-            class: "to-tab-list"
-          }, [
-            vue.createElementVNode("div", {
-              ref_key: "ul",
-              ref: ul,
-              class: vue.normalizeClass(["to-tab-wrapper", setUlClass.value])
-            }, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_data.value, (item, index$1) => {
-                return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index$1 }, [
-                  _ctx.$slots.center && Math.floor(_data.value.length / 2) === index$1 ? (vue.openBlock(), vue.createElementBlock("div", { key: 0 }, [
-                    vue.renderSlot(_ctx.$slots, "center")
-                  ])) : (vue.openBlock(), vue.createElementBlock("div", {
-                    key: 1,
-                    class: vue.normalizeClass(["to-tab-item", { "is-on": item.value === selectValue.value, "is-disabled": item.disabled }]),
-                    style: vue.normalizeStyle(setTabStyle.value),
-                    onClick: ($event) => changeTab(item, index$1, "click"),
-                    onMouseover: ($event) => changeTab(item, index$1, "hover"),
-                    onContextmenu: ($event) => contextmenu(item, index$1)
-                  }, [
-                    vue.renderSlot(_ctx.$slots, "item", {
-                      item,
-                      index: index$1
-                    }, () => [
-                      vue.createElementVNode("div", { class: "to-tab-item-main" }, [
-                        vue.createElementVNode("div", { class: "to-tab-item-left" }),
-                        vue.createElementVNode("div", { class: "to-tab-item-content" }, [
-                          item.pic ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true),
-                          item.icon ? (vue.openBlock(), vue.createElementBlock("span", {
+          ])) : vue.createCommentVNode("v-if", true),
+          vue.createElementVNode(
+            "div",
+            {
+              ref_key: "list",
+              ref: list,
+              class: "to-tab-list",
+              onScroll: handleListScroll
+            },
+            [
+              vue.createElementVNode(
+                "div",
+                {
+                  ref_key: "ul",
+                  ref: ul,
+                  class: "to-tab-wrapper"
+                },
+                [
+                  (vue.openBlock(true), vue.createElementBlock(
+                    vue.Fragment,
+                    null,
+                    vue.renderList(_data.value, (item, index) => {
+                      return vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: index },
+                        [
+                          _ctx.$slots.center && Math.floor(_data.value.length / 2) === index ? (vue.openBlock(), vue.createElementBlock("div", { key: 0 }, [
+                            vue.renderSlot(_ctx.$slots, "center")
+                          ])) : (vue.openBlock(), vue.createElementBlock("div", {
                             key: 1,
-                            class: "to-tab-item-icon"
+                            class: vue.normalizeClass(["to-tab-item", { "is-on": item.value === selectValue.value, "is-disabled": item.disabled }]),
+                            "data-tab-index": index,
+                            style: vue.normalizeStyle(setTabStyle.value),
+                            onClick: ($event) => changeTab(item, index, "click"),
+                            onMouseover: ($event) => changeTab(item, index, "hover"),
+                            onContextmenu: ($event) => contextmenu(item, index)
                           }, [
-                            vue.createVNode(vue.unref(index.ToIcon), {
-                              value: item.icon,
-                              type: item.value === selectValue.value ? "fill" : "",
-                              mode: "tab-icon"
-                            }, null, 8, ["value", "type"])
-                          ])) : vue.createCommentVNode("", true),
-                          vue.createElementVNode("div", { class: "to-tab-item-label" }, [
-                            vue.renderSlot(_ctx.$slots, "label", vue.mergeProps({ ref_for: true }, item), () => [
-                              vue.createTextVNode(vue.toDisplayString(item.label), 1)
+                            vue.renderSlot(_ctx.$slots, "item", {
+                              item,
+                              index
+                            }, () => [
+                              vue.createElementVNode("div", { class: "to-tab-item-main" }, [
+                                vue.createElementVNode("div", { class: "to-tab-item-left" }),
+                                vue.createElementVNode("div", { class: "to-tab-item-content" }, [
+                                  item.pic ? (vue.openBlock(), vue.createBlock(_component_to_pic, {
+                                    key: 0,
+                                    class: "to-tab-item-pic",
+                                    src: item.value === selectValue.value ? getPicOn(item.pic) : item.pic
+                                  }, null, 8, ["src"])) : vue.createCommentVNode("v-if", true),
+                                  item.icon ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToIcon), {
+                                    key: 1,
+                                    value: item.icon,
+                                    class: "to-tab-item-icon",
+                                    type: item.value === selectValue.value ? "fill" : "",
+                                    mode: "tab-icon"
+                                  }, null, 8, ["value", "type"])) : vue.createCommentVNode("v-if", true),
+                                  vue.createElementVNode("div", { class: "to-tab-item-label" }, [
+                                    vue.renderSlot(_ctx.$slots, "label", vue.mergeProps({ ref_for: true }, item), () => [
+                                      vue.createTextVNode(
+                                        vue.toDisplayString(item.label),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ])
+                                  ]),
+                                  item.count ? (vue.openBlock(), vue.createBlock(
+                                    _component_to_tag,
+                                    {
+                                      key: 2,
+                                      type: "number",
+                                      class: "to-tab-item-count"
+                                    },
+                                    {
+                                      default: vue.withCtx(() => [
+                                        vue.createTextVNode(
+                                          vue.toDisplayString(item.count),
+                                          1
+                                          /* TEXT */
+                                        )
+                                      ]),
+                                      _: 2
+                                      /* DYNAMIC */
+                                    },
+                                    1024
+                                    /* DYNAMIC_SLOTS */
+                                  )) : vue.createCommentVNode("v-if", true),
+                                  _ctx.removable ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToIcon), {
+                                    key: 3,
+                                    value: "close",
+                                    link: "",
+                                    class: "to-tab-item-remove",
+                                    onClick: vue.withModifiers(($event) => removePTab(item, index), ["stop"])
+                                  }, null, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
+                                ]),
+                                vue.createElementVNode("div", { class: "to-tab-item-right" })
+                              ]),
+                              vue.createElementVNode("div", { class: "to-tab-indicator" })
                             ])
-                          ]),
-                          _ctx.removable ? (vue.openBlock(), vue.createElementBlock("span", {
-                            key: 2,
-                            class: "to-tab-item-remove",
-                            onClick: vue.withModifiers(($event) => removePTab(item, index$1), ["stop"])
-                          }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
-                        ]),
-                        vue.createElementVNode("div", { class: "to-tab-item-right" })
-                      ]),
-                      vue.createElementVNode("div", { class: "to-tab-item-under" })
-                    ])
-                  ], 46, ["onClick", "onMouseover", "onContextmenu"]))
-                ], 64);
-              }), 128))
-            ], 2)
-          ], 512),
-          vue.createElementVNode("div", { class: "to-tab-divider" }),
-          vue.createElementVNode("div", { class: "to-tab-fn" }, [
-            _ctx.over === "control" && controlShow.value ? (vue.openBlock(), vue.createBlock(vue.unref(index.ToIcon), {
+                          ], 46, ["data-tab-index", "onClick", "onMouseover", "onContextmenu"]))
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      );
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ],
+                512
+                /* NEED_PATCH */
+              ),
+              tabScrollShow.value ? (vue.openBlock(), vue.createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  ref_key: "tabScrollRef",
+                  ref: tabScrollRef,
+                  class: vue.normalizeClass(["to-tab-list-scroll", { "is-dragging": tabScrollDragging.value }]),
+                  style: vue.normalizeStyle(tabScrollStyle.value),
+                  onMousedown: startTabScrollDrag
+                },
+                [
+                  vue.createElementVNode("div", { class: "to-tab-list-scroll-bar" })
+                ],
+                38
+                /* CLASS, STYLE, NEED_HYDRATION */
+              )) : vue.createCommentVNode("v-if", true)
+            ],
+            544
+            /* NEED_HYDRATION, NEED_PATCH */
+          ),
+          controlShow.value || overflowFloatShow.value || vue.unref(slot).fn ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: "to-tab-fn"
+          }, [
+            _ctx.over === "control" && controlShow.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToIcon), {
               key: 0,
               class: "to-tab-fn-item",
               link: "",
@@ -320,8 +709,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
               onMousedown: controlLeftScroll,
               onMouseup: scrollStop,
               onMouseleave: scrollStop
-            })) : vue.createCommentVNode("", true),
-            _ctx.over === "control" && controlShow.value ? (vue.openBlock(), vue.createBlock(vue.unref(index.ToIcon), {
+            })) : vue.createCommentVNode("v-if", true),
+            _ctx.over === "control" && controlShow.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToIcon), {
               key: 1,
               class: "to-tab-fn-item",
               link: "",
@@ -329,32 +718,127 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
               onMousedown: controlRightScroll,
               onMouseup: scrollStop,
               onMouseleave: scrollStop
-            })) : vue.createCommentVNode("", true),
+            })) : vue.createCommentVNode("v-if", true),
             vue.renderSlot(_ctx.$slots, "fn"),
-            _ctx.over === "float" ? (vue.openBlock(), vue.createBlock(vue.unref(index.ToIcon), {
-              key: 2,
-              value: "menu",
-              link: ""
-            })) : vue.createCommentVNode("", true)
-          ])
+            overflowFloatShow.value ? (vue.openBlock(), vue.createBlock(
+              vue.unref(index$1.ToIcon),
+              {
+                key: 2,
+                ref_key: "overflowIconRef",
+                ref: overflowIconRef,
+                value: "more",
+                link: "",
+                onClick: toggleOverflowFloat
+              },
+              null,
+              512
+              /* NEED_PATCH */
+            )) : vue.createCommentVNode("v-if", true),
+            overflowFloatShow.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+              key: 3,
+              to: "body"
+            }, [
+              vue.createElementVNode("div", { class: "to-tab" }, [
+                vue.createVNode(
+                  vue.unref(index$2.ToFloat),
+                  {
+                    ref_key: "overflowFloatRef",
+                    ref: overflowFloatRef,
+                    align: "right",
+                    global: false,
+                    class: "to-tab-over-float",
+                    lazy: false,
+                    width: "12"
+                  },
+                  {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_component_to_scroll, { class: "to-tab-over-scroll" }, {
+                        default: vue.withCtx(() => [
+                          vue.createElementVNode("div", { class: "to-tab-over-list" }, [
+                            (vue.openBlock(true), vue.createElementBlock(
+                              vue.Fragment,
+                              null,
+                              vue.renderList(overflowTabs.value, (tab) => {
+                                return vue.openBlock(), vue.createElementBlock("div", {
+                                  key: tab.index,
+                                  class: vue.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 ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("v-if", true),
+                                  tab.item.icon ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.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"])) : vue.createCommentVNode("v-if", true),
+                                  vue.createElementVNode("div", { class: "to-tab-over-item-label" }, [
+                                    vue.renderSlot(_ctx.$slots, "label", vue.mergeProps({ ref_for: true }, tab.item), () => [
+                                      vue.createTextVNode(
+                                        vue.toDisplayString(tab.item.label),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ])
+                                  ]),
+                                  _ctx.removable ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToIcon), {
+                                    key: 2,
+                                    value: "close",
+                                    link: "",
+                                    class: "to-tab-over-item-remove",
+                                    onClick: vue.withModifiers(($event) => removeOverflowTab(tab), ["stop"])
+                                  }, null, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
+                                ], 42, ["onClick", "onContextmenu"]);
+                              }),
+                              128
+                              /* KEYED_FRAGMENT */
+                            ))
+                          ])
+                        ]),
+                        _: 3
+                        /* FORWARDED */
+                      })
+                    ]),
+                    _: 3
+                    /* FORWARDED */
+                  },
+                  512
+                  /* NEED_PATCH */
+                )
+              ])
+            ])) : vue.createCommentVNode("v-if", true)
+          ])) : vue.createCommentVNode("v-if", true),
+          vue.createElementVNode("div", { class: "to-tab-divider" })
         ]),
-        _ctx.contentType === "float" ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToFloat), {
-          key: 0,
-          ref_key: "floatRef",
-          ref: floatRef,
-          lazy: false
-        }, {
-          default: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "default")
-          ]),
-          _: 3
-        }, 512)) : (vue.openBlock(), vue.createElementBlock("div", {
+        _ctx.contentType === "float" ? (vue.openBlock(), vue.createBlock(
+          vue.unref(index$2.ToFloat),
+          {
+            key: 0,
+            ref_key: "floatRef",
+            ref: floatRef,
+            lazy: false
+          },
+          {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+            /* FORWARDED */
+          },
+          512
+          /* NEED_PATCH */
+        )) : (vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
           class: "to-tab-page"
         }, [
           vue.renderSlot(_ctx.$slots, "default")
         ]))
-      ], 6);
+      ], 14, ["flex"]);
     };
   }
 });