gi-component 0.0.46 → 0.0.47

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, createElementBlock, openBlock, createElementVNode, getCurrentInstance, onMounted, watch, toValue, toRef, nextTick, onUnmounted, useAttrs, computed, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, useSlots, normalizeClass, createCommentVNode, normalizeStyle, createVNode, createSlots, Fragment, renderList, mergeModels, useModel, ref, resolveDynamicComponent, resolveComponent, h, createApp, onUpdated, inject, toRefs, watchEffect, reactive, provide, normalizeProps, guardReactiveProps, useTemplateRef } from "vue";
+import { defineComponent, createElementBlock, openBlock, createElementVNode, getCurrentInstance, ref, onMounted, watch, toValue, toRef, nextTick, onUnmounted, useAttrs, computed, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, useSlots, normalizeClass, createCommentVNode, normalizeStyle, createVNode, createSlots, Fragment, renderList, mergeModels, useModel, resolveDynamicComponent, resolveComponent, h, createApp, onUpdated, inject, toRefs, watchEffect, reactive, provide, normalizeProps, guardReactiveProps, useTemplateRef } from "vue";
 import * as El from "element-plus";
 import El__default, { ElButton, ElSpace, ElDescriptions, ElDescriptionsItem, ElDialog, ElDrawer, ElInput, ElForm, ElTable, ElTableColumn, ElFormItem, ElText, ElMessage, ElIcon, ElSplitter, ElSplitterPanel, ElRow, ElPagination, ElTabs, ElTabPane, ElCheckbox, ElScrollbar, ElTree, ElCheckboxGroup, ElEmpty } from "element-plus";
 /*! Element Plus Icons Vue v2.3.2 */
@@ -300,6 +300,16 @@ function resolveElement(target, root) {
   const scope = root ?? document;
   return scope.querySelector(normalizeSelector(target));
 }
+function getMaxScrollLeft(scrollEl) {
+  return Math.max(0, scrollEl.scrollWidth - scrollEl.clientWidth);
+}
+const SCROLL_EDGE_EPSILON = 1;
+function canScrollToLeft(scrollEl) {
+  return scrollEl.scrollLeft > SCROLL_EDGE_EPSILON;
+}
+function canScrollToRight(scrollEl) {
+  return scrollEl.scrollLeft < getMaxScrollLeft(scrollEl) - SCROLL_EDGE_EPSILON;
+}
 const WHEEL_SCROLL_LERP = 0.4;
 const WHEEL_LINE_HEIGHT = 16;
 function getWheelPixelDelta(event, scrollEl) {
@@ -312,11 +322,10 @@ function getWheelPixelDelta(event, scrollEl) {
   return delta;
 }
 function clampScrollLeft(scrollEl, left) {
-  const maxScroll = Math.max(0, scrollEl.scrollWidth - scrollEl.clientWidth);
-  return Math.max(0, Math.min(left, maxScroll));
+  return Math.max(0, Math.min(left, getMaxScrollLeft(scrollEl)));
 }
 function scrollItemToCenter(scrollEl, activeEl, behavior = "smooth") {
-  const maxScroll = scrollEl.scrollWidth - scrollEl.clientWidth;
+  const maxScroll = getMaxScrollLeft(scrollEl);
   if (maxScroll <= 0) {
     return;
   }
@@ -329,27 +338,65 @@ function scrollItemToCenter(scrollEl, activeEl, behavior = "smooth") {
     behavior
   });
 }
+function setElementVisible(el, visible) {
+  if (!el) {
+    return;
+  }
+  el.style.display = visible ? "flex" : "none";
+}
+function setBtnDisabled(el, disabled, disabledClassName) {
+  if (!el) {
+    return;
+  }
+  if (disabledClassName) {
+    el.classList.toggle(disabledClassName, disabled);
+  }
+  if (disabled) {
+    el.setAttribute("aria-disabled", "true");
+  } else {
+    el.removeAttribute("aria-disabled");
+  }
+}
 function useNavTabs(options) {
   const {
     tabEl,
     tabScrollEl,
     tabItemClassName,
     activeValue,
-    wheelSpeed = 1
+    wheelSpeed = 1,
+    tabLeftScrollBtnEl,
+    tabRightScrollBtnEl,
+    scrollBtnStepRatio = 0.6,
+    scrollBtnMinStep = 120,
+    navBtnDisabledClassName
   } = options;
   const activeClassName = `${tabItemClassName}--active`;
   const itemSelector = normalizeSelector(tabItemClassName);
+  const showNavBtn = ref(false);
+  const canScrollLeft = ref(false);
+  const canScrollRight = ref(false);
   let rootEl = null;
   let scrollEl = null;
+  let leftBtnEl = null;
+  let rightBtnEl = null;
   let resizeObserver = null;
   let wheelRafId = null;
   let wheelTargetScrollLeft = 0;
+  let navBtnRafId = null;
+  let onPrevClick = null;
+  let onNextClick = null;
   const cancelWheelAnimation = () => {
     if (wheelRafId !== null) {
       cancelAnimationFrame(wheelRafId);
       wheelRafId = null;
     }
   };
+  const cancelWheelScroll = () => {
+    if (scrollEl) {
+      wheelTargetScrollLeft = scrollEl.scrollLeft;
+    }
+    cancelWheelAnimation();
+  };
   const runWheelAnimation = () => {
     if (!scrollEl) {
       cancelWheelAnimation();
@@ -360,17 +407,80 @@ function useNavTabs(options) {
     if (Math.abs(diff) < 0.5) {
       scrollEl.scrollLeft = wheelTargetScrollLeft;
       cancelWheelAnimation();
+      scheduleUpdateNavBtnState();
       return;
     }
     scrollEl.scrollLeft = current + diff * WHEEL_SCROLL_LERP;
     wheelRafId = requestAnimationFrame(runWheelAnimation);
   };
+  const updateNavBtnState = () => {
+    if (!scrollEl) {
+      showNavBtn.value = false;
+      canScrollLeft.value = false;
+      canScrollRight.value = false;
+      setElementVisible(leftBtnEl, false);
+      setElementVisible(rightBtnEl, false);
+      setBtnDisabled(leftBtnEl, false, navBtnDisabledClassName);
+      setBtnDisabled(rightBtnEl, false, navBtnDisabledClassName);
+      return;
+    }
+    const overflow = getMaxScrollLeft(scrollEl) > 1;
+    const scrollLeftEnabled = canScrollToLeft(scrollEl);
+    const scrollRightEnabled = canScrollToRight(scrollEl);
+    showNavBtn.value = overflow;
+    canScrollLeft.value = scrollLeftEnabled;
+    canScrollRight.value = scrollRightEnabled;
+    setElementVisible(leftBtnEl, overflow);
+    setElementVisible(rightBtnEl, overflow);
+    setBtnDisabled(leftBtnEl, overflow && !scrollLeftEnabled, navBtnDisabledClassName);
+    setBtnDisabled(rightBtnEl, overflow && !scrollRightEnabled, navBtnDisabledClassName);
+  };
+  const scheduleUpdateNavBtnState = () => {
+    if (navBtnRafId !== null) {
+      return;
+    }
+    navBtnRafId = requestAnimationFrame(() => {
+      navBtnRafId = null;
+      updateNavBtnState();
+    });
+  };
+  const cancelNavBtnRaf = () => {
+    if (navBtnRafId !== null) {
+      cancelAnimationFrame(navBtnRafId);
+      navBtnRafId = null;
+    }
+  };
+  const scrollByStep = (direction) => {
+    if (!scrollEl) {
+      return;
+    }
+    if (direction === -1 && !canScrollToLeft(scrollEl)) {
+      return;
+    }
+    if (direction === 1 && !canScrollToRight(scrollEl)) {
+      return;
+    }
+    cancelWheelScroll();
+    const maxScroll = getMaxScrollLeft(scrollEl);
+    if (maxScroll <= 0) {
+      return;
+    }
+    const step = Math.max(scrollBtnMinStep, scrollEl.clientWidth * scrollBtnStepRatio);
+    const target = clampScrollLeft(scrollEl, scrollEl.scrollLeft + direction * step);
+    if (Math.abs(target - scrollEl.scrollLeft) < 1) {
+      return;
+    }
+    scrollEl.scrollTo({ left: target, behavior: "smooth" });
+  };
   const resolveElements = () => {
     var _a, _b;
     const instanceRoot = (_b = (_a = getCurrentInstance()) == null ? void 0 : _a.proxy) == null ? void 0 : _b.$el;
     const fallbackRoot = instanceRoot instanceof HTMLElement ? instanceRoot : document;
     rootEl = resolveElement(toValue(tabEl), fallbackRoot);
-    scrollEl = resolveElement(toValue(tabScrollEl), rootEl ?? fallbackRoot);
+    const scope = rootEl ?? fallbackRoot;
+    scrollEl = resolveElement(toValue(tabScrollEl), scope);
+    leftBtnEl = resolveElement(toValue(tabLeftScrollBtnEl), scope);
+    rightBtnEl = resolveElement(toValue(tabRightScrollBtnEl), scope);
     return Boolean(rootEl && scrollEl);
   };
   const findActiveItem = () => {
@@ -393,11 +503,12 @@ function useNavTabs(options) {
     if (!scrollEl) {
       return;
     }
-    cancelWheelAnimation();
+    cancelWheelScroll();
     const activeItem = findActiveItem();
     if (activeItem) {
       scrollItemToCenter(scrollEl, activeItem, behavior);
     }
+    scheduleUpdateNavBtnState();
   };
   const handleWheel = (event) => {
     if (!scrollEl) {
@@ -418,19 +529,59 @@ function useNavTabs(options) {
     if (wheelRafId === null) {
       wheelRafId = requestAnimationFrame(runWheelAnimation);
     }
+    scheduleUpdateNavBtnState();
+  };
+  const handleScroll = () => {
+    scheduleUpdateNavBtnState();
   };
   const bindWheel = () => {
     scrollEl == null ? void 0 : scrollEl.addEventListener("wheel", handleWheel, { passive: false });
+    scrollEl == null ? void 0 : scrollEl.addEventListener("scroll", handleScroll, { passive: true });
   };
   const unbindWheel = () => {
     scrollEl == null ? void 0 : scrollEl.removeEventListener("wheel", handleWheel);
+    scrollEl == null ? void 0 : scrollEl.removeEventListener("scroll", handleScroll);
     cancelWheelAnimation();
   };
+  const bindNavButtons = () => {
+    unbindNavButtons();
+    if (leftBtnEl) {
+      onPrevClick = (event) => {
+        if ((leftBtnEl == null ? void 0 : leftBtnEl.getAttribute("aria-disabled")) === "true") {
+          event.preventDefault();
+          return;
+        }
+        scrollByStep(-1);
+      };
+      leftBtnEl.addEventListener("click", onPrevClick);
+    }
+    if (rightBtnEl) {
+      onNextClick = (event) => {
+        if ((rightBtnEl == null ? void 0 : rightBtnEl.getAttribute("aria-disabled")) === "true") {
+          event.preventDefault();
+          return;
+        }
+        scrollByStep(1);
+      };
+      rightBtnEl.addEventListener("click", onNextClick);
+    }
+  };
+  const unbindNavButtons = () => {
+    if (leftBtnEl && onPrevClick) {
+      leftBtnEl.removeEventListener("click", onPrevClick);
+    }
+    if (rightBtnEl && onNextClick) {
+      rightBtnEl.removeEventListener("click", onNextClick);
+    }
+    onPrevClick = null;
+    onNextClick = null;
+  };
   const bindResizeObserver = () => {
     if (!scrollEl || typeof ResizeObserver === "undefined") {
       return;
     }
     resizeObserver = new ResizeObserver(() => {
+      scheduleUpdateNavBtnState();
       scrollToActive("auto");
     });
     resizeObserver.observe(scrollEl);
@@ -439,23 +590,40 @@ function useNavTabs(options) {
     resizeObserver == null ? void 0 : resizeObserver.disconnect();
     resizeObserver = null;
   };
+  const teardown = () => {
+    unbindWheel();
+    unbindNavButtons();
+    unbindResizeObserver();
+    cancelWheelAnimation();
+    cancelNavBtnRaf();
+    rootEl = null;
+    scrollEl = null;
+    leftBtnEl = null;
+    rightBtnEl = null;
+  };
   const setup = async () => {
     await nextTick();
     if (!resolveElements()) {
       return;
     }
     bindWheel();
+    bindNavButtons();
     bindResizeObserver();
+    updateNavBtnState();
     scrollToActive("auto");
   };
   onMounted(() => {
     setup();
   });
   watch(
-    () => [toValue(tabEl), toValue(tabScrollEl)],
+    () => [
+      toValue(tabEl),
+      toValue(tabScrollEl),
+      toValue(tabLeftScrollBtnEl),
+      toValue(tabRightScrollBtnEl)
+    ],
     () => {
-      unbindWheel();
-      unbindResizeObserver();
+      teardown();
       setup();
     }
   );
@@ -465,15 +633,16 @@ function useNavTabs(options) {
     });
   }
   onUnmounted(() => {
-    unbindWheel();
-    unbindResizeObserver();
-    cancelWheelAnimation();
-    rootEl = null;
-    scrollEl = null;
+    teardown();
   });
   return {
     scrollToActive,
-    getScrollEl: () => scrollEl
+    getScrollEl: () => scrollEl,
+    cancelWheelScroll,
+    scrollByStep,
+    showNavBtn,
+    canScrollLeft,
+    canScrollRight
   };
 }
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
@@ -2512,13 +2681,18 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const { b } = useBemClass();
     const rootRef = ref(null);
     const scrollRef = ref(null);
+    const leftBtnRef = ref(null);
+    const rightBtnRef = ref(null);
     const tabItemClassName = b("nav-tabs-item");
     useNavTabs({
       tabEl: rootRef,
       tabScrollEl: scrollRef,
       tabItemClassName,
       activeValue: model,
-      wheelSpeed: props.wheelSpeed
+      wheelSpeed: props.wheelSpeed,
+      tabLeftScrollBtnEl: leftBtnRef,
+      tabRightScrollBtnEl: rightBtnRef,
+      navBtnDisabledClassName: b("nav-tabs__nav-btn--disabled")
     });
     function handleItemClick(item) {
       if (item.disabled) {
@@ -2540,32 +2714,62 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "left-extra", {}, void 0, true)
         ], 2)) : createCommentVNode("", true),
         createElementVNode("div", {
-          ref_key: "scrollRef",
-          ref: scrollRef,
-          class: normalizeClass(unref(b)("nav-tabs__scroll"))
+          class: normalizeClass(unref(b)("nav-tabs__scroll-wrap"))
         }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(props.data, (item) => {
-            return openBlock(), createElementBlock("div", {
-              key: item.value,
-              class: normalizeClass([
-                unref(b)("nav-tabs-item"),
-                props.custom ? unref(b)("nav-tabs-item--custom") : {
-                  [unref(b)("nav-tabs-item--active")]: model.value === item.value,
-                  [unref(b)("nav-tabs-item--disabled")]: item.disabled
-                }
+          createElementVNode("button", {
+            ref_key: "leftBtnRef",
+            ref: leftBtnRef,
+            type: "button",
+            class: normalizeClass([unref(b)("nav-tabs__nav-btn"), unref(b)("nav-tabs__nav-btn--prev")])
+          }, [
+            createVNode(unref(ElIcon), null, {
+              default: withCtx(() => [
+                createVNode(unref(arrow_left_default))
               ]),
-              "data-value": item.value,
-              onClick: ($event) => handleItemClick(item)
-            }, [
-              renderSlot(_ctx.$slots, "default", {
-                item,
-                active: model.value === item.value,
-                disabled: !!item.disabled
-              }, () => [
-                createTextVNode(toDisplayString(item.label), 1)
-              ], true)
-            ], 10, _hoisted_1$1);
-          }), 128))
+              _: 1
+            })
+          ], 2),
+          createElementVNode("div", {
+            ref_key: "scrollRef",
+            ref: scrollRef,
+            class: normalizeClass(unref(b)("nav-tabs__scroll"))
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(props.data, (item) => {
+              return openBlock(), createElementBlock("div", {
+                key: item.value,
+                class: normalizeClass([
+                  unref(b)("nav-tabs-item"),
+                  props.custom ? unref(b)("nav-tabs-item--custom") : {
+                    [unref(b)("nav-tabs-item--active")]: model.value === item.value,
+                    [unref(b)("nav-tabs-item--disabled")]: item.disabled
+                  }
+                ]),
+                "data-value": item.value,
+                onClick: ($event) => handleItemClick(item)
+              }, [
+                renderSlot(_ctx.$slots, "default", {
+                  item,
+                  active: model.value === item.value,
+                  disabled: !!item.disabled
+                }, () => [
+                  createTextVNode(toDisplayString(item.label), 1)
+                ], true)
+              ], 10, _hoisted_1$1);
+            }), 128))
+          ], 2),
+          createElementVNode("button", {
+            ref_key: "rightBtnRef",
+            ref: rightBtnRef,
+            type: "button",
+            class: normalizeClass([unref(b)("nav-tabs__nav-btn"), unref(b)("nav-tabs__nav-btn--next")])
+          }, [
+            createVNode(unref(ElIcon), null, {
+              default: withCtx(() => [
+                createVNode(unref(arrow_right_default))
+              ]),
+              _: 1
+            })
+          ], 2)
         ], 2),
         unref(slots)["right-extra"] ? (openBlock(), createElementBlock("div", {
           key: 1,
@@ -2577,7 +2781,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NavTabs = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-5bdac2b9"]]);
+const NavTabs = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-5c4435f1"]]);
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "split-button",
   props: {
@@ -2736,7 +2940,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const PageLayout = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-a35bb713"]]);
+const PageLayout = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-29bffa31"]]);
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "TableColumn",
   props: {
@@ -3133,7 +3337,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Tag = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-9d73e3e2"]]);
+const Tag = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-cd3b3c6d"]]);
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }