@king-one/antdv 1.2.21 → 2.0.0

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

@@ -1,274 +1,424 @@
-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({
+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({
   name: "KScrollbar",
-  props: de,
-  inheritAttrs: !1,
-  setup(l) {
-    fe(() => {
-      l.container || h();
+  props: scrollbarProps,
+  inheritAttrs: false,
+  setup(props) {
+    onMounted(() => {
+      if (props.container) return;
+      sync();
     });
-    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 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 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)
+    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) {
         return 0;
-      {
-        const o = t - e;
-        return o ? n / o * (r - $.value) : 0;
+      } else {
+        return Math.min(containerHeight, yRailSize * containerHeight / contentHeight + 5 * 1.5);
       }
-    }), 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 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();
     };
-    function te(e) {
+    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) {
       const {
-        onScroll: n
-      } = l;
-      n && n(e), k();
+        onScroll
+      } = props;
+      if (onScroll) onScroll(e);
+      syncScrollState();
     }
-    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)
+    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) {
         return 0;
-      {
-        const o = t - e;
-        return o ? n / o * (r - C.value) : 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;
       }
-    }), 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();
     };
-    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;
+    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 k() {
+    function syncScrollState() {
       const {
-        value: e
-      } = w;
-      e && (D.value = e.scrollTop, H.value = e.scrollLeft);
+        value: container
+      } = mergedContainerRef;
+      if (container) {
+        containerScrollTopRef.value = container.scrollTop;
+        containerScrollLeftRef.value = container.scrollLeft;
+      }
     }
-    const ie = () => {
+    const syncPositionState = () => {
       const {
-        value: e
-      } = F;
-      if (e) {
-        const o = e.getBoundingClientRect();
-        d.value = o.height, f.value = o.width;
+        value: content
+      } = mergedContentRef;
+      if (content) {
+        const contentClient = content.getBoundingClientRect();
+        contentHeightRef.value = contentClient.height;
+        contentWidthRef.value = contentClient.width;
       }
       const {
-        value: n
-      } = w;
-      if (n) {
-        const o = n.getBoundingClientRect();
-        s.value = o.height, m.value = o.width;
+        value: container
+      } = mergedContainerRef;
+      if (container) {
+        const containerClient = container.getBoundingClientRect();
+        containerHeightRef.value = containerClient.height;
+        containerWidthRef.value = containerClient.width;
       }
       const {
-        value: t
-      } = p;
-      t && (T.value = t.offsetHeight);
+        value: yRailEl
+      } = yRailRef;
+      if (yRailEl) {
+        yRailSizeRef.value = yRailEl.offsetHeight;
+      }
       const {
-        value: r
-      } = z;
-      r && (b.value = r.offsetWidth);
+        value: xRailEl
+      } = xRailRef;
+      if (xRailEl) {
+        xRailSizeRef.value = xRailEl.offsetWidth;
+      }
     };
-    function h() {
-      ie(), k();
+    function sync() {
+      syncPositionState();
+      syncScrollState();
     }
+    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: 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();
-        }
-      },
+      showYBarRef,
+      showXBarRef,
+      sync,
+      handleMouseEnter,
+      handleMouseLeave,
+      handleXScrollWheel,
       // handleContentResize,
       // handleContainerResize,
-      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
+      contentRef,
+      yRailRef,
+      xRailRef,
+      containerRef,
+      contentHeightRef,
+      containerHeightRef,
+      needYBarRef,
+      needXBarRef,
+      yBarSizePxRef,
+      handleYScrollMouseDown,
+      handleXScrollMouseDown,
+      yBarTopPxRef,
+      handleScroll,
+      xBarSizePxRef,
+      xBarLeftPxRef
     };
   },
   render() {
     const {
-      $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`
+      $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`
       }, this.$attrs, {
-        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"]);
-    })();
+        "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;
   }
 });
 export {
-  Me as default
+  ScrollBar as default
 };