@touchvue/ui 1.0.0-beta.50 → 1.0.0-beta.52

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

@@ -8,7 +8,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
     flex: Boolean,
-    readonly: Boolean,
+    disabled: Boolean,
     modelValue: {
       type: [Boolean, String, Number],
       default: false
@@ -73,7 +73,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const ivalue = ref(props.modelValue);
-    const disabled = ref(props.readonly);
+    const disabled = ref(props.disabled);
     watch(
       () => props.modelValue,
       (val) => {
@@ -82,13 +82,13 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       { immediate: true }
     );
     watch(
-      () => props.readonly,
+      () => props.disabled,
       (val) => {
         disabled.value = val;
       }
     );
     const setClass = computed(() => {
-      const arr = ["to-form-readonly"];
+      const arr = ["to-disable-target"];
       if (ivalue.value === props.onValue) {
         arr.push(`is-on`);
       }

package/es/packages/components/switch/src/switch.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.vue2.mjs","sources":["../../../../../../packages/components/switch/src/switch.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as DO_defineComponent } from 'vue';\nexport default /*#__PURE__*/ DO_defineComponent({\n\tname: 'ToSwitch'\n});\n</script>\n<template>\n\t<div v-dis.opacity=\"disabled\" v-tip=\"changed ? t('to.switch.changed') : ''\" :flex=\"flex ? flex : null\" class=\"to-switch\" :style=\"setStyle\" :class=\"setClass\" @click=\"toggle\">\n\t\t<div class=\"to-switch-on\">\n\t\t\t<div v-if=\"onText\" class=\"to-switch-on-text\">{{ onText }}</div>\n\t\t\t<to-icon v-if=\"onIcon\" class=\"to-switch-on-icon\" :value=\"onIcon\"></to-icon>\n\t\t</div>\n\t\t<div class=\"to-switch-off\">\n\t\t\t<div v-if=\"offText\" class=\"to-switch-off-text\">{{ offText }}</div>\n\t\t\t<to-icon v-if=\"offIcon\" class=\"to-switch-off-icon\" :value=\"offIcon\"></to-icon>\n\t\t</div>\n\t\t<div class=\"to-switch-slider\"></div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { CSSProperties, computed, ref, watch, inject } from 'vue'\nimport { t } from '@touchvue/locale'\n\n\n\nconst ToForm = inject<{ comparable?: boolean }>('ToForm')\n\nconst valueStore = ref([])\n\nconst props = defineProps({\n\tflex: Boolean,\n\treadonly: Boolean,\n\tmodelValue: {\n\t\ttype: [Boolean, String, Number],\n\t\tdefault: false\n\t},\n\tonValue: {\n\t\ttype: [Boolean, String, Number],\n\t\tdefault: true\n\t},\n\toffValue: {\n\t\ttype: [Boolean, String, Number],\n\t\tdefault: false\n\t},\n\tonColor: {\n\t\ttype: String,\n\t\tdefault: 'primary'\n\t},\n\toffColor: {\n\t\ttype: String,\n\t\tdefault: 'info'\n\t},\n\tonText: {\n\t\ttype: String,\n\t\tdefault: ''\n\t},\n\toffText: {\n\t\ttype: String,\n\t\tdefault: ''\n\t},\n\tonIcon: {\n\t\ttype: String,\n\t\tdefault: ''\n\t},\n\toffIcon: {\n\t\ttype: String,\n\t\tdefault: ''\n\t},\n\tcolor: {\n\t\ttype: String,\n\t\tdefault: 'default'\n\t},\n\tmode: {\n\t\ttype: String,\n\t\tdefault: 'default'\n\t},\n\tbeforeChange: {\n\t\ttype: [Function, String, Boolean],\n\t\tdefault: ''\n\t},\n\tcomparable: {\n\t\ttype: Boolean,\n\t\tdefault: false\n\t},\n\twidth: {\n\t\ttype: [String, Number],\n\t\tdefault: ''\n\t}\n})\n\nconst emit = defineEmits(['update:modelValue', 'change'])\n\nconst ivalue = ref(props.modelValue)\nconst disabled = ref(props.readonly)\n\nwatch(\n\t() => props.modelValue,\n\tval => {\n\t\tivalue.value = val\n\t},\n\t{ immediate: true }\n)\n\nwatch(\n\t() => props.readonly,\n\tval => {\n\t\tdisabled.value = val\n\t}\n)\n\nconst setClass = computed(() => {\n\tconst arr = ['to-form-readonly']\n\tif (ivalue.value === props.onValue) {\n\t\tarr.push(`is-on`)\n\t}\n\tif (props.color) {\n\t\tarr.push(`color-${props.color}`)\n\t}\n\tif (props.mode) {\n\t\tarr.push(`mode-${props.mode}`)\n\t}\n\tif (ToForm?.comparable || props.comparable) {\n\t\tarr.push('to-compare')\n\t}\n\tif (changed.value) {\n\t\tarr.push('to-switch-changed')\n\t}\n\treturn arr\n})\n\nconst setStyle = computed(() => {\n\tconst obj: CSSProperties = {}\n\tif (props.width) {\n\t\tobj['--width'] = props.width + 'em'\n\t}\n\treturn obj\n})\n\nconst changed = computed(() => {\n\tif ((props.comparable || ToForm?.comparable) && valueStore.value.length > 0 && ivalue.value !== valueStore.value[0]) {\n\t\treturn true\n\t} else {\n\t\treturn false\n\t}\n})\n\nasync function toggle() {\n\tif (disabled.value) return\n\tlet flag = true\n\tif (typeof props.beforeChange === 'boolean') {\n\t\tflag = props.beforeChange\n\t} else {\n\t\tif (props.beforeChange) {\n\t\t\tif (typeof props.beforeChange === 'function') {\n\t\t\t\tif (typeof props.beforeChange().then === 'function') {\n\t\t\t\t\tflag = await props.beforeChange()\n\t\t\t\t} else {\n\t\t\t\t\tflag = props.beforeChange()\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tflag = !!props.beforeChange\n\t\t\t}\n\t\t}\n\t}\n\tif (!flag) return false\n\tivalue.value = ivalue.value === props.onValue ? props.offValue : props.onValue\n\temit('update:modelValue', ivalue.value)\n\temit('change', ivalue.value)\n}\n\nconst compare = () => {\n\tvalueStore.value.unshift(ivalue.value)\n}\n// 撤销\nconst restore = () => {\n\tivalue.value = valueStore.value[0]\n\tvalueStore.value.splice(0, 1)\n}\n\nconst setDisabled = (f: boolean) => {\n\tdisabled.value = f\n}\ndefineExpose({\n\tcompare,\n\trestore,\n\tchanged,\n\tsetDisabled\n})\n</script>\n"],"names":["DO_defineComponent","_createElementBlock","_normalizeClass","_createElementVNode","_createBlock","_unref"],"mappings":"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"}
+{"version":3,"file":"switch.vue2.mjs","sources":["../../../../../../packages/components/switch/src/switch.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as DO_defineComponent } from 'vue';\nexport default /*#__PURE__*/ DO_defineComponent({\n\tname: 'ToSwitch'\n});\n</script>\n<template>\n\t<div v-dis.opacity=\"disabled\" v-tip=\"changed ? t('to.switch.changed') : ''\" :flex=\"flex ? flex : null\" class=\"to-switch\" :style=\"setStyle\" :class=\"setClass\" @click=\"toggle\">\n\t\t<div class=\"to-switch-on\">\n\t\t\t<div v-if=\"onText\" class=\"to-switch-on-text\">{{ onText }}</div>\n\t\t\t<to-icon v-if=\"onIcon\" class=\"to-switch-on-icon\" :value=\"onIcon\"></to-icon>\n\t\t</div>\n\t\t<div class=\"to-switch-off\">\n\t\t\t<div v-if=\"offText\" class=\"to-switch-off-text\">{{ offText }}</div>\n\t\t\t<to-icon v-if=\"offIcon\" class=\"to-switch-off-icon\" :value=\"offIcon\"></to-icon>\n\t\t</div>\n\t\t<div class=\"to-switch-slider\"></div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { CSSProperties, computed, ref, watch, inject } from 'vue'\nimport { t } from '@touchvue/locale'\n\n\n\nconst ToForm = inject<{ comparable?: boolean }>('ToForm')\n\nconst valueStore = ref([])\n\nconst props = defineProps({\n\tflex: Boolean,\n\tdisabled: Boolean,\n\tmodelValue: {\n\t\ttype: [Boolean, String, Number],\n\t\tdefault: false\n\t},\n\tonValue: {\n\t\ttype: [Boolean, String, Number],\n\t\tdefault: true\n\t},\n\toffValue: {\n\t\ttype: [Boolean, String, Number],\n\t\tdefault: false\n\t},\n\tonColor: {\n\t\ttype: String,\n\t\tdefault: 'primary'\n\t},\n\toffColor: {\n\t\ttype: String,\n\t\tdefault: 'info'\n\t},\n\tonText: {\n\t\ttype: String,\n\t\tdefault: ''\n\t},\n\toffText: {\n\t\ttype: String,\n\t\tdefault: ''\n\t},\n\tonIcon: {\n\t\ttype: String,\n\t\tdefault: ''\n\t},\n\toffIcon: {\n\t\ttype: String,\n\t\tdefault: ''\n\t},\n\tcolor: {\n\t\ttype: String,\n\t\tdefault: 'default'\n\t},\n\tmode: {\n\t\ttype: String,\n\t\tdefault: 'default'\n\t},\n\tbeforeChange: {\n\t\ttype: [Function, String, Boolean],\n\t\tdefault: ''\n\t},\n\tcomparable: {\n\t\ttype: Boolean,\n\t\tdefault: false\n\t},\n\twidth: {\n\t\ttype: [String, Number],\n\t\tdefault: ''\n\t}\n})\n\nconst emit = defineEmits(['update:modelValue', 'change'])\n\nconst ivalue = ref(props.modelValue)\nconst disabled = ref(props.disabled)\n\nwatch(\n\t() => props.modelValue,\n\tval => {\n\t\tivalue.value = val\n\t},\n\t{ immediate: true }\n)\n\nwatch(\n\t() => props.disabled,\n\tval => {\n\t\tdisabled.value = val\n\t}\n)\n\nconst setClass = computed(() => {\n\tconst arr = ['to-disable-target']\n\tif (ivalue.value === props.onValue) {\n\t\tarr.push(`is-on`)\n\t}\n\tif (props.color) {\n\t\tarr.push(`color-${props.color}`)\n\t}\n\tif (props.mode) {\n\t\tarr.push(`mode-${props.mode}`)\n\t}\n\tif (ToForm?.comparable || props.comparable) {\n\t\tarr.push('to-compare')\n\t}\n\tif (changed.value) {\n\t\tarr.push('to-switch-changed')\n\t}\n\treturn arr\n})\n\nconst setStyle = computed(() => {\n\tconst obj: CSSProperties = {}\n\tif (props.width) {\n\t\tobj['--width'] = props.width + 'em'\n\t}\n\treturn obj\n})\n\nconst changed = computed(() => {\n\tif ((props.comparable || ToForm?.comparable) && valueStore.value.length > 0 && ivalue.value !== valueStore.value[0]) {\n\t\treturn true\n\t} else {\n\t\treturn false\n\t}\n})\n\nasync function toggle() {\n\tif (disabled.value) return\n\tlet flag = true\n\tif (typeof props.beforeChange === 'boolean') {\n\t\tflag = props.beforeChange\n\t} else {\n\t\tif (props.beforeChange) {\n\t\t\tif (typeof props.beforeChange === 'function') {\n\t\t\t\tif (typeof props.beforeChange().then === 'function') {\n\t\t\t\t\tflag = await props.beforeChange()\n\t\t\t\t} else {\n\t\t\t\t\tflag = props.beforeChange()\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tflag = !!props.beforeChange\n\t\t\t}\n\t\t}\n\t}\n\tif (!flag) return false\n\tivalue.value = ivalue.value === props.onValue ? props.offValue : props.onValue\n\temit('update:modelValue', ivalue.value)\n\temit('change', ivalue.value)\n}\n\nconst compare = () => {\n\tvalueStore.value.unshift(ivalue.value)\n}\n// 撤销\nconst restore = () => {\n\tivalue.value = valueStore.value[0]\n\tvalueStore.value.splice(0, 1)\n}\n\nconst setDisabled = (f: boolean) => {\n\tdisabled.value = f\n}\ndefineExpose({\n\tcompare,\n\trestore,\n\tchanged,\n\tsetDisabled\n})\n</script>\n"],"names":["DO_defineComponent","_createElementBlock","_normalizeClass","_createElementVNode","_createBlock","_unref"],"mappings":"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"}

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

@@ -1,7 +1,8 @@
-import { defineComponent, ref, useSlots, watch, onMounted, nextTick, computed, provide, resolveComponent, openBlock, createElementBlock, unref, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, createVNode, 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, withModifiers, Teleport, createVNode, withCtx } from 'vue';
 import { ToIcon } from '../../icon/index.mjs';
 import { ToFloat } from '../../float/index.mjs';
 import { langKey } from '../../../locale/index.mjs';
+import { useDevice } from '../../../hooks/useDevice.mjs';
 
 const __default__ = defineComponent({
   name: "ToTab"
@@ -17,7 +18,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     removable: { type: Boolean, default: false },
     position: { default: "" },
     itemDir: { default: "" },
-    over: { default: "control" },
+    over: { default: "" },
     event: { default: "click" },
     contentType: { default: "" },
     title: { default: "" },
@@ -34,12 +35,31 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const selectValue = ref("");
     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, old) => {
@@ -60,8 +80,26 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       },
       { deep: true }
     );
+    watch(
+      () => isPc.value,
+      () => {
+        updateTabLayout();
+      }
+    );
+    watch(
+      () => props.over,
+      () => {
+        updateTabLayout();
+      }
+    );
     onMounted(() => {
       initData();
+      window.addEventListener("resize", updateTabLayout);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", updateTabLayout);
+      stopTabScrollDrag();
+      scrollStop();
     });
     function initData() {
       if (props.data && props.data.length) {
@@ -82,6 +120,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           setLayout();
         });
       }
+      if (props.over === "float") {
+        updateOverflowTabs();
+      }
+      updateTabScroll();
+      updateActiveOver();
     }
     const setTabStyle = computed(() => {
       let obj = {};
@@ -118,12 +161,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       if (props.align) {
         arr.push(`align-${props.align}`);
       }
-      return arr;
-    });
-    const setUlClass = computed(() => {
-      let arr = [];
-      if (props.over) {
-        arr.push(`over-${props.over}`);
+      if (activeOver.value) {
+        arr.push(`over-${activeOver.value}`);
       }
       return arr;
     });
@@ -138,8 +177,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
       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;
@@ -166,6 +205,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       setTimeout(() => {
         stopChange = false;
       }, 10);
+      return true;
     }
     async function removePTab(item, idx) {
       let flag = true;
@@ -194,6 +234,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       if (props.over === "control") {
         setLayout();
       }
+      if (props.over === "float") {
+        updateOverflowTabs();
+      }
+      updateTabScroll();
+      updateActiveOver();
       emit("remove", item.value, item, idx);
       setTimeout(() => {
         stopChange = false;
@@ -217,6 +262,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             setLayout();
           });
         }
+        if (props.over === "float") {
+          updateOverflowTabs();
+        }
+        updateTabScroll();
+        updateActiveOver();
       }
       setTimeout(() => {
         stopChange = false;
@@ -226,6 +276,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       let idx = _data.value.findIndex((item) => item.label === oldLabel);
       if (idx !== -1) {
         _data.value[idx].label = label;
+        updateTabLayout();
       }
     }
     function getPicOn(pic) {
@@ -251,31 +302,208 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     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;
+        return;
+      }
+      tabScrollable.value = true;
+      tabScrollWidth.value = Math.max(listWidth * listWidth / scrollWidth, 16);
+      const trackRange = Math.max(listWidth - tabScrollWidth.value, 0);
+      const scrollRatio = list.value.scrollLeft / scrollRange;
+      tabScrollLeft.value = list.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(() => {
+        var _a;
+        const node = (_a = ul.value) == null ? void 0 : _a.querySelector(`.to-tab-item[data-tab-index="${index}"]`);
+        node == null ? void 0 : node.scrollIntoView({ block: "nearest", inline: "nearest" });
+        updateOverflowTabs();
+        updateTabScroll();
+      });
+    }
     function controlLeftScroll() {
       scrollTimer = setInterval(() => {
-        ul.value.scrollTo({
-          left: ul.value.scrollLeft - 3
-          // behavior: 'smooth' // 平滑滚动效果
-        });
+        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 + 3
-          // behavior: 'smooth' // 平滑滚动效果
-        });
+        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,
@@ -285,6 +513,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_to_pic = resolveComponent("to-pic");
+      const _component_to_scroll = resolveComponent("to-scroll");
       return openBlock(), createElementBlock("div", {
         key: unref(langKey),
         class: normalizeClass(["to-tab", setClass.value]),
@@ -311,7 +540,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             {
               ref_key: "list",
               ref: list,
-              class: "to-tab-list"
+              class: "to-tab-list",
+              onScroll: handleListScroll
             },
             [
               createElementVNode(
@@ -319,7 +549,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 {
                   ref_key: "ul",
                   ref: ul,
-                  class: normalizeClass(["to-tab-wrapper", setUlClass.value])
+                  class: "to-tab-wrapper"
                 },
                 [
                   (openBlock(true), createElementBlock(
@@ -335,6 +565,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                           ])) : (openBlock(), createElementBlock("div", {
                             key: 1,
                             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"),
@@ -352,16 +583,13 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                     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(), createElementBlock("span", {
+                                  item.icon ? (openBlock(), createBlock(unref(ToIcon), {
                                     key: 1,
-                                    class: "to-tab-item-icon"
-                                  }, [
-                                    createVNode(unref(ToIcon), {
-                                      value: item.icon,
-                                      type: item.value === selectValue.value ? "fill" : "",
-                                      mode: "tab-icon"
-                                    }, null, 8, ["value", "type"])
-                                  ])) : createCommentVNode("v-if", true),
+                                    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(
@@ -383,7 +611,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                               ]),
                               createElementVNode("div", { class: "to-tab-indicator" })
                             ])
-                          ], 46, ["onClick", "onMouseover", "onContextmenu"]))
+                          ], 46, ["data-tab-index", "onClick", "onMouseover", "onContextmenu"]))
                         ],
                         64
                         /* STABLE_FRAGMENT */
@@ -393,14 +621,30 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                     /* KEYED_FRAGMENT */
                   ))
                 ],
-                2
-                /* CLASS */
-              )
+                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)
             ],
-            512
-            /* NEED_PATCH */
+            544
+            /* NEED_HYDRATION, NEED_PATCH */
           ),
-          controlShow.value || _ctx.over === "float" || unref(slot).fn ? (openBlock(), createElementBlock("div", {
+          controlShow.value || overflowFloatShow.value || unref(slot).fn ? (openBlock(), createElementBlock("div", {
             key: 1,
             class: "to-tab-fn"
           }, [
@@ -423,11 +667,98 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               onMouseleave: scrollStop
             })) : createCommentVNode("v-if", true),
             renderSlot(_ctx.$slots, "fn"),
-            _ctx.over === "float" ? (openBlock(), createBlock(unref(ToIcon), {
-              key: 2,
-              value: "menu",
-              link: ""
-            })) : createCommentVNode("v-if", 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" })
         ]),