yc-pro-components 0.0.77 → 0.0.79

package/index.js

@@ -1,4 +1,4 @@
-/*! yc-pro-components v0.0.77 */
+/*! yc-pro-components v0.0.79 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('element-plus')) :
   typeof define === 'function' && define.amd ? define(['exports', 'vue', 'element-plus'], factory) :
@@ -8814,6 +8814,125 @@
     };
   }
 
+  const DEFAULT_TOOLTIP = "\u5DE6\u53F3\u6EDA\u52A8\uFF1A\u6309\u4F4FShift\u952E\u6EDA\u52A8\u6ED1\u8F6E";
+  const DEFAULT_HORIZONTAL_BAR_SELECTOR = ".el-scrollbar__bar.is-horizontal";
+  const TOOLTIP_TARGET_CLASS = "plus-table__scrollbar-tooltip-target";
+  function useTableScrollbarTooltip(tableRef, options = {}) {
+    var _a, _b;
+    const horizontalBarSelector = (_a = options.horizontalBarSelector) != null ? _a : DEFAULT_HORIZONTAL_BAR_SELECTOR;
+    const triggerRef = vue.shallowRef(null);
+    const tooltipContent = vue.ref((_b = options.content) != null ? _b : DEFAULT_TOOLTIP);
+    const tooltipVisible = vue.ref(false);
+    let observer = null;
+    let currentTarget = null;
+    let onEnter = null;
+    let onLeave = null;
+    const isEnabled = () => {
+      const enabled = options.enabled;
+      if (enabled === void 0) return true;
+      if (typeof enabled === "boolean") return enabled;
+      return enabled.value;
+    };
+    const cleanupListeners = () => {
+      if (currentTarget && onEnter && onLeave) {
+        currentTarget.removeEventListener("mouseenter", onEnter);
+        currentTarget.removeEventListener("mouseleave", onLeave);
+        currentTarget.classList.remove(TOOLTIP_TARGET_CLASS);
+      }
+      currentTarget = null;
+      onEnter = null;
+      onLeave = null;
+      tooltipVisible.value = false;
+    };
+    const findHorizontalBar = (tableEl) => {
+      const bodyWrapper = tableEl.querySelector(".el-table__body-wrapper");
+      const barInBody = bodyWrapper == null ? void 0 : bodyWrapper.querySelector(horizontalBarSelector);
+      if (barInBody) return barInBody;
+      const bars = tableEl.querySelectorAll(horizontalBarSelector);
+      if (!bars.length) return null;
+      return bars[bars.length - 1];
+    };
+    const bindTarget = (bar) => {
+      if (currentTarget === bar) return;
+      cleanupListeners();
+      currentTarget = bar;
+      bar.classList.add(TOOLTIP_TARGET_CLASS);
+      onEnter = () => {
+        tooltipVisible.value = true;
+      };
+      onLeave = () => {
+        tooltipVisible.value = false;
+      };
+      bar.addEventListener("mouseenter", onEnter);
+      bar.addEventListener("mouseleave", onLeave);
+      triggerRef.value = bar;
+    };
+    const refresh = () => {
+      var _a2, _b2;
+      tooltipContent.value = (_a2 = options.content) != null ? _a2 : DEFAULT_TOOLTIP;
+      if (!isEnabled()) {
+        cleanupListeners();
+        triggerRef.value = null;
+        return;
+      }
+      const tableEl = (_b2 = tableRef.value) == null ? void 0 : _b2.$el;
+      if (!tableEl) {
+        cleanupListeners();
+        triggerRef.value = null;
+        return;
+      }
+      const horizontalBar = findHorizontalBar(tableEl);
+      if (!horizontalBar) {
+        cleanupListeners();
+        triggerRef.value = null;
+        return;
+      }
+      bindTarget(horizontalBar);
+    };
+    const setupObserver = (tableEl) => {
+      observer == null ? void 0 : observer.disconnect();
+      observer = new MutationObserver(() => {
+        refresh();
+      });
+      observer.observe(tableEl, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["style", "class"]
+      });
+    };
+    vue.watch(
+      () => {
+        var _a2;
+        return (_a2 = tableRef.value) == null ? void 0 : _a2.$el;
+      },
+      (tableEl) => {
+        observer == null ? void 0 : observer.disconnect();
+        observer = null;
+        if (!tableEl) {
+          cleanupListeners();
+          triggerRef.value = null;
+          return;
+        }
+        vue.nextTick(refresh);
+        setupObserver(tableEl);
+      },
+      { immediate: true, flush: "post" }
+    );
+    vue.onBeforeUnmount(() => {
+      observer == null ? void 0 : observer.disconnect();
+      observer = null;
+      cleanupListeners();
+      triggerRef.value = null;
+    });
+    return {
+      triggerRef,
+      tooltipContent,
+      tooltipVisible,
+      refresh
+    };
+  }
+
   const _hoisted_1$v = { class: "plus-dialog-body" };
   var _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -19111,6 +19230,11 @@
       const columnsIsChange = vue.ref(false);
       const filterColumns = vue.ref([]);
       const tableInstance = vue.shallowRef(null);
+      const {
+        triggerRef: scrollbarTooltipTrigger,
+        tooltipContent: scrollbarTooltipContent,
+        tooltipVisible: scrollbarTooltipVisible
+      } = useTableScrollbarTooltip(tableInstance);
       const tableWrapperInstance = vue.ref(null);
       const paginationInstance = vue.ref(null);
       const state = vue.reactive({
@@ -19481,13 +19605,24 @@
             }, 16, ["data", "height", "header-cell-style", "size", "row-key"])), [
               [vue.unref(elementPlus.vLoading), _ctx.loadingStatus]
             ]),
+            vue.unref(scrollbarTooltipTrigger) ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTooltip), {
+              key: 1,
+              visible: vue.unref(scrollbarTooltipVisible),
+              "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => vue.isRef(scrollbarTooltipVisible) ? scrollbarTooltipVisible.value = $event : null),
+              "virtual-triggering": "",
+              "virtual-ref": vue.unref(scrollbarTooltipTrigger),
+              content: vue.unref(scrollbarTooltipContent),
+              placement: "top",
+              "show-after": 0,
+              "hide-after": 0
+            }, null, 8, ["visible", "virtual-ref", "content"])) : vue.createCommentVNode("v-if", true),
             vue.createCommentVNode(" \u5206\u9875 "),
             _ctx.pagination ? (vue.openBlock(), vue.createBlock(vue.unref(PlusPagination), vue.mergeProps({
-              key: 1,
+              key: 2,
               ref_key: "paginationInstance",
               ref: paginationInstance,
               modelValue: vue.unref(subPageInfo),
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(subPageInfo) ? subPageInfo.value = $event : null)
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(subPageInfo) ? subPageInfo.value = $event : null)
             }, _ctx.pagination, { onChange: handlePaginationChange }), vue.createSlots({
               _: 2
               /* DYNAMIC */
@@ -64532,7 +64667,7 @@
     });
   }
 
-  const version = "0.0.77";
+  const version = "0.0.79";
 
   const install = installer.install;