@touchvue/ui 1.0.0-beta.51 → 1.0.0-beta.53

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,17 +35,37 @@ 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) => {
         if (val || val === 0) {
           selectValue.value = val;
+          scrollSelectTabIntoView();
         } else {
           emit("update:modelValue", old);
         }
@@ -60,8 +81,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 +121,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           setLayout();
         });
       }
+      if (props.over === "float") {
+        updateOverflowTabs();
+      }
+      updateTabScroll();
+      updateActiveOver();
     }
     const setTabStyle = computed(() => {
       let obj = {};
@@ -118,12 +162,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 +178,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;
@@ -163,9 +203,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       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;
@@ -194,6 +236,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 +264,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             setLayout();
           });
         }
+        if (props.over === "float") {
+          updateOverflowTabs();
+        }
+        updateTabScroll();
+        updateActiveOver();
       }
       setTimeout(() => {
         stopChange = false;
@@ -226,6 +278,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 +304,229 @@ 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;
+        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 - 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 +536,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 +563,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             {
               ref_key: "list",
               ref: list,
-              class: "to-tab-list"
+              class: "to-tab-list",
+              onScroll: handleListScroll
             },
             [
               createElementVNode(
@@ -319,7 +572,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 +588,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 +606,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 +634,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 +644,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 || __props.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 +690,98 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               onMouseleave: scrollStop
             })) : createCommentVNode("v-if", true),
             renderSlot(_ctx.$slots, "fn"),
-            __props.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 */
+                                      )
+                                    ])
+                                  ]),
+                                  __props.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" })
         ]),