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

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

@@ -6,6 +6,7 @@ var vue = require('vue');
 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');
 
 const __default__ = vue.defineComponent({
   name: "ToTab"
@@ -21,7 +22,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     removable: { type: Boolean, default: false },
     position: { default: "" },
     itemDir: { default: "" },
-    over: { default: "control" },
+    over: { default: "" },
     event: { default: "click" },
     contentType: { default: "" },
     title: { default: "" },
@@ -38,17 +39,37 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const selectValue = vue.ref("");
     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, old) => {
         if (val || val === 0) {
           selectValue.value = val;
+          scrollSelectTabIntoView();
         } else {
           emit("update:modelValue", old);
         }
@@ -64,8 +85,26 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       },
       { deep: true }
     );
+    vue.watch(
+      () => isPc.value,
+      () => {
+        updateTabLayout();
+      }
+    );
+    vue.watch(
+      () => props.over,
+      () => {
+        updateTabLayout();
+      }
+    );
     vue.onMounted(() => {
       initData();
+      window.addEventListener("resize", updateTabLayout);
+    });
+    vue.onBeforeUnmount(() => {
+      window.removeEventListener("resize", updateTabLayout);
+      stopTabScrollDrag();
+      scrollStop();
     });
     function initData() {
       if (props.data && props.data.length) {
@@ -86,6 +125,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           setLayout();
         });
       }
+      if (props.over === "float") {
+        updateOverflowTabs();
+      }
+      updateTabScroll();
+      updateActiveOver();
     }
     const setTabStyle = vue.computed(() => {
       let obj = {};
@@ -122,12 +166,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (props.align) {
         arr.push(`align-${props.align}`);
       }
-      return arr;
-    });
-    const setUlClass = vue.computed(() => {
-      let arr = [];
-      if (props.over) {
-        arr.push(`over-${props.over}`);
+      if (activeOver.value) {
+        arr.push(`over-${activeOver.value}`);
       }
       return arr;
     });
@@ -142,8 +182,8 @@ var _sfc_main = /* @__PURE__ */ vue.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;
@@ -167,9 +207,11 @@ var _sfc_main = /* @__PURE__ */ vue.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;
@@ -198,6 +240,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (props.over === "control") {
         setLayout();
       }
+      if (props.over === "float") {
+        updateOverflowTabs();
+      }
+      updateTabScroll();
+      updateActiveOver();
       emit("remove", item.value, item, idx);
       setTimeout(() => {
         stopChange = false;
@@ -221,6 +268,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             setLayout();
           });
         }
+        if (props.over === "float") {
+          updateOverflowTabs();
+        }
+        updateTabScroll();
+        updateActiveOver();
       }
       setTimeout(() => {
         stopChange = false;
@@ -230,6 +282,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       let idx = _data.value.findIndex((item) => item.label === oldLabel);
       if (idx !== -1) {
         _data.value[idx].label = label;
+        updateTabLayout();
       }
     }
     function getPicOn(pic) {
@@ -255,31 +308,229 @@ var _sfc_main = /* @__PURE__ */ vue.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() {
+      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 - 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;
-      }
+      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,
@@ -289,6 +540,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_to_pic = vue.resolveComponent("to-pic");
+      const _component_to_scroll = vue.resolveComponent("to-scroll");
       return vue.openBlock(), vue.createElementBlock("div", {
         key: vue.unref(index.langKey),
         class: vue.normalizeClass(["to-tab", setClass.value]),
@@ -315,7 +567,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             {
               ref_key: "list",
               ref: list,
-              class: "to-tab-list"
+              class: "to-tab-list",
+              onScroll: handleListScroll
             },
             [
               vue.createElementVNode(
@@ -323,7 +576,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 {
                   ref_key: "ul",
                   ref: ul,
-                  class: vue.normalizeClass(["to-tab-wrapper", setUlClass.value])
+                  class: "to-tab-wrapper"
                 },
                 [
                   (vue.openBlock(true), vue.createElementBlock(
@@ -339,6 +592,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                           ])) : (vue.openBlock(), vue.createElementBlock("div", {
                             key: 1,
                             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"),
@@ -356,16 +610,13 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                     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.createElementBlock("span", {
+                                  item.icon ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToIcon), {
                                     key: 1,
-                                    class: "to-tab-item-icon"
-                                  }, [
-                                    vue.createVNode(vue.unref(index$1.ToIcon), {
-                                      value: item.icon,
-                                      type: item.value === selectValue.value ? "fill" : "",
-                                      mode: "tab-icon"
-                                    }, null, 8, ["value", "type"])
-                                  ])) : vue.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"])) : 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(
@@ -387,7 +638,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                               ]),
                               vue.createElementVNode("div", { class: "to-tab-indicator" })
                             ])
-                          ], 46, ["onClick", "onMouseover", "onContextmenu"]))
+                          ], 46, ["data-tab-index", "onClick", "onMouseover", "onContextmenu"]))
                         ],
                         64
                         /* STABLE_FRAGMENT */
@@ -397,14 +648,30 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     /* KEYED_FRAGMENT */
                   ))
                 ],
-                2
-                /* CLASS */
-              )
+                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)
             ],
-            512
-            /* NEED_PATCH */
+            544
+            /* NEED_HYDRATION, NEED_PATCH */
           ),
-          controlShow.value || __props.over === "float" || vue.unref(slot).fn ? (vue.openBlock(), vue.createElementBlock("div", {
+          controlShow.value || overflowFloatShow.value || vue.unref(slot).fn ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
             class: "to-tab-fn"
           }, [
@@ -427,11 +694,98 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
               onMouseleave: scrollStop
             })) : vue.createCommentVNode("v-if", true),
             vue.renderSlot(_ctx.$slots, "fn"),
-            __props.over === "float" ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToIcon), {
-              key: 2,
-              value: "menu",
-              link: ""
-            })) : vue.createCommentVNode("v-if", 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 */
+                                      )
+                                    ])
+                                  ]),
+                                  __props.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" })
         ]),