@king-one/antdv 1.2.4 → 1.2.6

package/dist/es/components/scroll-bar/src/scroll-bar.mjs

@@ -1,424 +1,274 @@
-import { defineComponent, createVNode, mergeProps, onMounted, ref, computed } from "vue";
-import { useResizeObserver } from "@vueuse/core";
-import { off, on } from "evtd";
-import { defaultNamespace } from "../../../hooks/use-namespace/index.mjs";
-import { scrollbarProps } from "./types.mjs";
-const ScrollBar = /* @__PURE__ */ defineComponent({
+import { defineComponent as se, createVNode as v, mergeProps as ue, onMounted as fe, ref as a, computed as c } from "vue";
+import { useResizeObserver as q } from "@vueuse/core";
+import { off as W, on as Y } from "evtd";
+import { defaultNamespace as u } from "../../../hooks/use-namespace/index.mjs";
+import { scrollbarProps as de } from "./types.mjs";
+const Me = /* @__PURE__ */ se({
   name: "KScrollbar",
-  props: scrollbarProps,
-  inheritAttrs: false,
-  setup(props) {
-    onMounted(() => {
-      if (props.container) return;
-      sync();
+  props: de,
+  inheritAttrs: !1,
+  setup(l) {
+    fe(() => {
+      l.container || h();
     });
-    const contentRef = ref(null);
-    const containerRef = ref(null);
-    const yRailRef = ref(null);
-    const xRailRef = ref(null);
-    const contentHeightRef = ref(null);
-    const contentWidthRef = ref(null);
-    const containerHeightRef = ref(null);
-    const containerWidthRef = ref(null);
-    const yRailSizeRef = ref(null);
-    const xRailSizeRef = ref(null);
-    const mergedContentRef = computed(() => {
-      var _a;
-      return ((_a = props.content) == null ? void 0 : _a.call(props)) || contentRef.value;
+    const R = a(null), S = a(null), p = a(null), z = a(null), d = a(null), f = a(null), s = a(null), m = a(null), T = a(null), b = a(null), F = c(() => {
+      var e;
+      return ((e = l.content) == null ? void 0 : e.call(l)) || R.value;
+    }), w = c(() => {
+      var e;
+      return ((e = l.container) == null ? void 0 : e.call(l)) || S.value;
+    }), D = a(0), H = a(0);
+    q(R, () => {
+      h();
+    }), q(S, () => {
+      h();
     });
-    const mergedContainerRef = computed(() => {
-      var _a;
-      return ((_a = props.container) == null ? void 0 : _a.call(props)) || containerRef.value;
-    });
-    const containerScrollTopRef = ref(0);
-    const containerScrollLeftRef = ref(0);
-    useResizeObserver(contentRef, () => {
-      sync();
-    });
-    useResizeObserver(containerRef, () => {
-      sync();
-    });
-    const needYBarRef = computed(() => {
-      const {
-        value: containerHeight
-      } = containerHeightRef;
-      const {
-        value: contentHeight
-      } = contentHeightRef;
-      return containerHeight !== null && contentHeight !== null && contentHeight > containerHeight;
-    });
-    const isShowYBarRef = ref(false);
-    const showYBarRef = computed(() => {
-      const {
-        trigger
-      } = props;
-      return trigger !== "none" && (trigger === "always" || isShowYBarRef.value);
-    });
-    const yBarSizeRef = computed(() => {
-      const {
-        value: containerHeight
-      } = containerHeightRef;
-      const {
-        value: contentHeight
-      } = contentHeightRef;
-      const {
-        value: yRailSize
-      } = yRailSizeRef;
-      if (containerHeight === null || contentHeight === null || yRailSize === null) {
+    const G = c(() => {
+      const {
+        value: e
+      } = s, {
+        value: n
+      } = d;
+      return e !== null && n !== null && n > e;
+    }), B = a(!1), J = c(() => {
+      const {
+        trigger: e
+      } = l;
+      return e !== "none" && (e === "always" || B.value);
+    }), $ = c(() => {
+      const {
+        value: e
+      } = s, {
+        value: n
+      } = d, {
+        value: t
+      } = T;
+      return e === null || n === null || t === null ? 0 : Math.min(e, t * e / n + 5 * 1.5);
+    }), Q = c(() => `${$.value}px`), Z = c(() => {
+      const {
+        value: e
+      } = s, {
+        value: n
+      } = D, {
+        value: t
+      } = d, {
+        value: r
+      } = T;
+      if (e === null || t === null || r === null)
         return 0;
-      } else {
-        return Math.min(containerHeight, yRailSize * containerHeight / contentHeight + 5 * 1.5);
+      {
+        const o = t - e;
+        return o ? n / o * (r - $.value) : 0;
       }
-    });
-    const yBarSizePxRef = computed(() => {
-      return `${yBarSizeRef.value}px`;
-    });
-    const yBarTopRef = computed(() => {
-      const {
-        value: containerHeight
-      } = containerHeightRef;
-      const {
-        value: containerScrollTop
-      } = containerScrollTopRef;
-      const {
-        value: contentHeight
-      } = contentHeightRef;
-      const {
-        value: yRailSize
-      } = yRailSizeRef;
-      if (containerHeight === null || contentHeight === null || yRailSize === null) {
-        return 0;
-      } else {
-        const heightDiff = contentHeight - containerHeight;
-        if (!heightDiff) return 0;
-        return containerScrollTop / heightDiff * (yRailSize - yBarSizeRef.value);
-      }
-    });
-    const yBarTopPxRef = computed(() => {
-      return `${yBarTopRef.value}px`;
-    });
-    let yBarPressed = false;
-    let memoYTop = 0;
-    let memoMouseY = 0;
-    let yBarVanishTimerId;
-    let xBarVanishTimerId;
-    const handleYScrollMouseMove = (e) => {
-      if (!yBarPressed) return;
-      if (xBarVanishTimerId !== void 0) {
-        window.clearTimeout(xBarVanishTimerId);
-      }
-      if (yBarVanishTimerId !== void 0) {
-        window.clearTimeout(yBarVanishTimerId);
-      }
-      const {
-        value: containerHeight
-      } = containerHeightRef;
-      const {
-        value: contentHeight
-      } = contentHeightRef;
-      const {
-        value: yBarSize
-      } = yBarSizeRef;
-      if (containerHeight === null || contentHeight === null) return;
-      const dY = e.clientY - memoMouseY;
-      const dScrollTop = dY * (contentHeight - containerHeight) / (containerHeight - yBarSize);
-      const toScrollTopUpperBound = contentHeight - containerHeight;
-      let toScrollTop = memoYTop + dScrollTop;
-      toScrollTop = Math.min(toScrollTopUpperBound, toScrollTop);
-      toScrollTop = Math.max(toScrollTop, 0);
-      const {
-        value: container
-      } = mergedContainerRef;
-      if (container) {
-        container.scrollTop = toScrollTop;
-      }
-    };
-    const handleYScrollMouseUp = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      off("mousemove", window, handleYScrollMouseMove, true);
-      off("mouseup", window, handleYScrollMouseUp, true);
-      yBarPressed = false;
-      isShowYBarRef.value = false;
-      sync();
+    }), ee = c(() => `${Z.value}px`);
+    let y = !1, N = 0, U = 0, L, X;
+    const _ = (e) => {
+      if (!y) return;
+      X !== void 0 && window.clearTimeout(X), L !== void 0 && window.clearTimeout(L);
+      const {
+        value: n
+      } = s, {
+        value: t
+      } = d, {
+        value: r
+      } = $;
+      if (n === null || t === null) return;
+      const M = (e.clientY - U) * (t - n) / (n - r), E = t - n;
+      let i = N + M;
+      i = Math.min(E, i), i = Math.max(i, 0);
+      const {
+        value: g
+      } = w;
+      g && (g.scrollTop = i);
+    }, V = (e) => {
+      e.preventDefault(), e.stopPropagation(), W("mousemove", window, _, !0), W("mouseup", window, V, !0), y = !1, B.value = !1, h();
+    }, ne = (e) => {
+      e.preventDefault(), e.stopPropagation(), Y("mousemove", window, _, !0), Y("mouseup", window, V, !0), N = D.value, U = e.clientY, y = !0, B.value = !0;
     };
-    const handleYScrollMouseDown = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      on("mousemove", window, handleYScrollMouseMove, true);
-      on("mouseup", window, handleYScrollMouseUp, true);
-      memoYTop = containerScrollTopRef.value;
-      memoMouseY = e.clientY;
-      yBarPressed = true;
-      isShowYBarRef.value = true;
-    };
-    function handleScroll(e) {
+    function te(e) {
       const {
-        onScroll
-      } = props;
-      if (onScroll) onScroll(e);
-      syncScrollState();
+        onScroll: n
+      } = l;
+      n && n(e), k();
     }
-    const needXBarRef = computed(() => {
-      const {
-        value: containerWidth
-      } = containerWidthRef;
-      const {
-        value: contentWidth
-      } = contentWidthRef;
-      return containerWidth !== null && contentWidth !== null && contentWidth > containerWidth;
-    });
-    const isShowXBarRef = ref(false);
-    const showXBarRef = computed(() => {
-      const {
-        trigger
-      } = props;
-      return trigger !== "none" && (trigger === "always" || isShowXBarRef.value);
-    });
-    const xBarSizeRef = computed(() => {
-      const {
-        value: containerWidth
-      } = containerWidthRef;
-      const {
-        value: contentWidth
-      } = contentWidthRef;
-      const {
-        value: xRailSize
-      } = xRailSizeRef;
-      if (containerWidth === null || contentWidth === null || xRailSize === null) {
+    const I = c(() => {
+      const {
+        value: e
+      } = m, {
+        value: n
+      } = f;
+      return e !== null && n !== null && n > e;
+    }), x = a(!1), le = c(() => {
+      const {
+        trigger: e
+      } = l;
+      return e !== "none" && (e === "always" || x.value);
+    }), C = c(() => {
+      const {
+        value: e
+      } = m, {
+        value: n
+      } = f, {
+        value: t
+      } = b;
+      return e === null || n === null || t === null ? 0 : t * e / n + 5 * 1.5;
+    }), oe = c(() => `${C.value}px`), re = c(() => {
+      const {
+        value: e
+      } = m, {
+        value: n
+      } = H, {
+        value: t
+      } = f, {
+        value: r
+      } = b;
+      if (e === null || t === null || r === null)
         return 0;
-      } else {
-        return xRailSize * containerWidth / contentWidth + 5 * 1.5;
-      }
-    });
-    const xBarSizePxRef = computed(() => {
-      return `${xBarSizeRef.value}px`;
-    });
-    const xBarLeftRef = computed(() => {
-      const {
-        value: containerWidth
-      } = containerWidthRef;
-      const {
-        value: containerScrollLeft
-      } = containerScrollLeftRef;
-      const {
-        value: contentWidth
-      } = contentWidthRef;
-      const {
-        value: xRailSize
-      } = xRailSizeRef;
-      if (containerWidth === null || contentWidth === null || xRailSize === null) {
-        return 0;
-      } else {
-        const widthDiff = contentWidth - containerWidth;
-        if (!widthDiff) return 0;
-        return containerScrollLeft / widthDiff * (xRailSize - xBarSizeRef.value);
-      }
-    });
-    const xBarLeftPxRef = computed(() => {
-      return `${xBarLeftRef.value}px`;
-    });
-    let xBarPressed = false;
-    let memoXLeft = 0;
-    let memoMouseX = 0;
-    const handleXScrollMouseMove = (e) => {
-      if (!xBarPressed) return;
-      if (xBarVanishTimerId !== void 0) {
-        window.clearTimeout(xBarVanishTimerId);
-      }
-      if (yBarVanishTimerId !== void 0) {
-        window.clearTimeout(yBarVanishTimerId);
-      }
-      const {
-        value: containerWidth
-      } = containerWidthRef;
-      const {
-        value: contentWidth
-      } = contentWidthRef;
-      const {
-        value: xBarSize
-      } = xBarSizeRef;
-      if (containerWidth === null || contentWidth === null) return;
-      const dX = e.clientX - memoMouseX;
-      const dScrollLeft = dX * (contentWidth - containerWidth) / (containerWidth - xBarSize);
-      const toScrollLeftUpperBound = contentWidth - containerWidth;
-      let toScrollLeft = memoXLeft + dScrollLeft;
-      toScrollLeft = Math.min(toScrollLeftUpperBound, toScrollLeft);
-      toScrollLeft = Math.max(toScrollLeft, 0);
-      const {
-        value: container
-      } = mergedContainerRef;
-      if (container) {
-        container.scrollLeft = toScrollLeft;
+      {
+        const o = t - e;
+        return o ? n / o * (r - C.value) : 0;
       }
+    }), ae = c(() => `${re.value}px`);
+    let P = !1, A = 0, K = 0;
+    const O = (e) => {
+      if (!P) return;
+      X !== void 0 && window.clearTimeout(X), L !== void 0 && window.clearTimeout(L);
+      const {
+        value: n
+      } = m, {
+        value: t
+      } = f, {
+        value: r
+      } = C;
+      if (n === null || t === null) return;
+      const M = (e.clientX - K) * (t - n) / (n - r), E = t - n;
+      let i = A + M;
+      i = Math.min(E, i), i = Math.max(i, 0);
+      const {
+        value: g
+      } = w;
+      g && (g.scrollLeft = i);
+    }, j = (e) => {
+      e.preventDefault(), e.stopPropagation(), W("mousemove", window, O, !0), W("mouseup", window, j, !0), x.value = !1, P = !1, h();
     };
-    const handleXScrollMouseUp = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      off("mousemove", window, handleXScrollMouseMove, true);
-      off("mouseup", window, handleXScrollMouseUp, true);
-      isShowXBarRef.value = false;
-      xBarPressed = false;
-      sync();
-    };
-    function handleXScrollMouseDown(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      xBarPressed = true;
-      isShowXBarRef.value = true;
-      on("mousemove", window, handleXScrollMouseMove, true);
-      on("mouseup", window, handleXScrollMouseUp, true);
-      memoXLeft = containerScrollLeftRef.value;
-      memoMouseX = e.clientX;
+    function ce(e) {
+      e.preventDefault(), e.stopPropagation(), P = !0, x.value = !0, Y("mousemove", window, O, !0), Y("mouseup", window, j, !0), A = H.value, K = e.clientX;
     }
-    function syncScrollState() {
+    function k() {
       const {
-        value: container
-      } = mergedContainerRef;
-      if (container) {
-        containerScrollTopRef.value = container.scrollTop;
-        containerScrollLeftRef.value = container.scrollLeft;
-      }
+        value: e
+      } = w;
+      e && (D.value = e.scrollTop, H.value = e.scrollLeft);
     }
-    const syncPositionState = () => {
+    const ie = () => {
       const {
-        value: content
-      } = mergedContentRef;
-      if (content) {
-        const contentClient = content.getBoundingClientRect();
-        contentHeightRef.value = contentClient.height;
-        contentWidthRef.value = contentClient.width;
+        value: e
+      } = F;
+      if (e) {
+        const o = e.getBoundingClientRect();
+        d.value = o.height, f.value = o.width;
       }
       const {
-        value: container
-      } = mergedContainerRef;
-      if (container) {
-        const containerClient = container.getBoundingClientRect();
-        containerHeightRef.value = containerClient.height;
-        containerWidthRef.value = containerClient.width;
+        value: n
+      } = w;
+      if (n) {
+        const o = n.getBoundingClientRect();
+        s.value = o.height, m.value = o.width;
       }
       const {
-        value: yRailEl
-      } = yRailRef;
-      if (yRailEl) {
-        yRailSizeRef.value = yRailEl.offsetHeight;
-      }
+        value: t
+      } = p;
+      t && (T.value = t.offsetHeight);
       const {
-        value: xRailEl
-      } = xRailRef;
-      if (xRailEl) {
-        xRailSizeRef.value = xRailEl.offsetWidth;
-      }
+        value: r
+      } = z;
+      r && (b.value = r.offsetWidth);
     };
-    function sync() {
-      syncPositionState();
-      syncScrollState();
+    function h() {
+      ie(), k();
     }
-    const handleMouseEnter = () => {
-      isShowYBarRef.value = true;
-      isShowXBarRef.value = true;
-    };
-    const handleMouseLeave = () => {
-      if (!yBarPressed) {
-        isShowYBarRef.value = false;
-      }
-      if (!xBarPressed) {
-        isShowXBarRef.value = false;
-      }
-    };
-    const handleXScrollWheel = (e) => {
-      const {
-        value: container
-      } = mergedContainerRef;
-      if (container && e.deltaY && needXBarRef.value && props.xScrollable) {
-        const currentScrollLeft = container.scrollLeft;
-        const maxScrollLeft = container.scrollWidth - container.clientWidth;
-        const delta = e.deltaY * 0.6;
-        const newScrollLeft = Math.max(0, Math.min(currentScrollLeft + delta, maxScrollLeft));
-        container.scrollLeft = newScrollLeft;
-        sync();
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    };
     return {
-      showYBarRef,
-      showXBarRef,
-      sync,
-      handleMouseEnter,
-      handleMouseLeave,
-      handleXScrollWheel,
+      showYBarRef: J,
+      showXBarRef: le,
+      sync: h,
+      handleMouseEnter: () => {
+        B.value = !0, x.value = !0;
+      },
+      handleMouseLeave: () => {
+        y || (B.value = !1), P || (x.value = !1);
+      },
+      handleXScrollWheel: (e) => {
+        const {
+          value: n
+        } = w;
+        if (n && e.deltaY && I.value && l.xScrollable) {
+          const t = n.scrollLeft, r = n.scrollWidth - n.clientWidth, o = e.deltaY * 0.6, M = Math.max(0, Math.min(t + o, r));
+          n.scrollLeft = M, h(), e.stopPropagation(), e.preventDefault();
+        }
+      },
       // handleContentResize,
       // handleContainerResize,
-      contentRef,
-      yRailRef,
-      xRailRef,
-      containerRef,
-      contentHeightRef,
-      containerHeightRef,
-      needYBarRef,
-      needXBarRef,
-      yBarSizePxRef,
-      handleYScrollMouseDown,
-      handleXScrollMouseDown,
-      yBarTopPxRef,
-      handleScroll,
-      xBarSizePxRef,
-      xBarLeftPxRef
+      contentRef: R,
+      yRailRef: p,
+      xRailRef: z,
+      containerRef: S,
+      contentHeightRef: d,
+      containerHeightRef: s,
+      needYBarRef: G,
+      needXBarRef: I,
+      yBarSizePxRef: Q,
+      handleYScrollMouseDown: ne,
+      handleXScrollMouseDown: ce,
+      yBarTopPxRef: ee,
+      handleScroll: te,
+      xBarSizePxRef: oe,
+      xBarLeftPxRef: ae
     };
   },
   render() {
     const {
-      $slots,
-      xScrollable
-    } = this;
-    const createXBar = () => {
-      return createVNode("div", {
-        "class": `${defaultNamespace}-scrollbar-rail ${defaultNamespace}-scrollbar-rail--horizontal`,
-        "ref": "xRailRef"
-      }, [this.needXBarRef && this.showXBarRef && createVNode("div", {
-        "class": `${defaultNamespace}-scrollbar-rail__scrollbar--horizontal`,
-        "style": {
-          width: this.xBarSizePxRef,
-          left: this.xBarLeftPxRef
-        },
-        "onMousedown": this.handleXScrollMouseDown
-      }, null, 46, ["onMousedown"])], 2);
-    };
-    const createYBar = () => {
-      return createVNode("div", {
-        "class": `${defaultNamespace}-scrollbar-rail ${defaultNamespace}-scrollbar-rail--vertical`,
-        "ref": "yRailRef"
-      }, [this.needYBarRef && this.showYBarRef && createVNode("div", {
-        "class": `${defaultNamespace}-scrollbar-rail__scrollbar--vertical`,
-        "style": {
-          height: this.yBarSizePxRef,
-          top: this.yBarTopPxRef
-        },
-        "onMousedown": this.handleYScrollMouseDown
-      }, null, 46, ["onMousedown"])], 2);
-    };
-    const createChildren = () => {
-      var _a, _b;
-      return createVNode("div", mergeProps({
-        "class": `${defaultNamespace}-scrollbar`
+      $slots: l,
+      xScrollable: R
+    } = this, S = () => v("div", {
+      class: `${u}-scrollbar-rail ${u}-scrollbar-rail--horizontal`,
+      ref: "xRailRef"
+    }, [this.needXBarRef && this.showXBarRef && v("div", {
+      class: `${u}-scrollbar-rail__scrollbar--horizontal`,
+      style: {
+        width: this.xBarSizePxRef,
+        left: this.xBarLeftPxRef
+      },
+      onMousedown: this.handleXScrollMouseDown
+    }, null, 46, ["onMousedown"])], 2), p = () => v("div", {
+      class: `${u}-scrollbar-rail ${u}-scrollbar-rail--vertical`,
+      ref: "yRailRef"
+    }, [this.needYBarRef && this.showYBarRef && v("div", {
+      class: `${u}-scrollbar-rail__scrollbar--vertical`,
+      style: {
+        height: this.yBarSizePxRef,
+        top: this.yBarTopPxRef
+      },
+      onMousedown: this.handleYScrollMouseDown
+    }, null, 46, ["onMousedown"])], 2);
+    return (() => {
+      var f, s;
+      return v("div", ue({
+        class: `${u}-scrollbar`
       }, this.$attrs, {
-        "onMouseenter": this.handleMouseEnter,
-        "onMouseleave": this.handleMouseLeave
-      }), [this.container ? (_a = $slots.default) == null ? void 0 : _a.call($slots) : createVNode("div", {
-        "class": `${defaultNamespace}-scrollbar-container`,
-        "onScroll": this.handleScroll,
-        "ref": "containerRef",
-        "onWheel": this.handleXScrollWheel
-      }, [createVNode("div", {
-        "ref": "contentRef",
-        "class": `${defaultNamespace}-scrollbar-content`
-      }, [(_b = $slots.default) == null ? void 0 : _b.call($slots)], 2)], 42, ["onScroll", "onWheel"]), createYBar(), xScrollable && createXBar()], 16, ["onMouseenter", "onMouseleave"]);
-    };
-    const createBarNode = createChildren();
-    return createBarNode;
+        onMouseenter: this.handleMouseEnter,
+        onMouseleave: this.handleMouseLeave
+      }), [this.container ? (f = l.default) == null ? void 0 : f.call(l) : v("div", {
+        class: `${u}-scrollbar-container`,
+        onScroll: this.handleScroll,
+        ref: "containerRef",
+        onWheel: this.handleXScrollWheel
+      }, [v("div", {
+        ref: "contentRef",
+        class: `${u}-scrollbar-content`
+      }, [(s = l.default) == null ? void 0 : s.call(l)], 2)], 42, ["onScroll", "onWheel"]), p(), R && S()], 16, ["onMouseenter", "onMouseleave"]);
+    })();
   }
 });
 export {
-  ScrollBar as default
+  Me as default
 };