@vunk/plus 1.12.1 → 1.13.0

package/components/scrollbar/index.mjs

@@ -1,339 +1,193 @@
-import { defineComponent, inject, ref, computed, onBeforeUnmount, toRef, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, withModifiers, normalizeStyle, vShow, createElementBlock, Fragment, createVNode, watch, nextTick, provide, reactive, onActivated, onMounted, onUpdated, resolveDynamicComponent, renderSlot, createCommentVNode } from 'vue';
-import { useEventListener, isClient, useResizeObserver, useMutationObserver, isObject } from '@vueuse/core';
-import { VkAsyncTeleport } from '@vunk/core/components/async-teleport';
-import { scrollbarContextKey, useNamespace, BAR_MAP, renderThumbStyle, GAP, SCOPE, scrollbarProps, scrollbarEmits } from 'element-plus';
-import { sleep } from '@vunk/shared/promise';
-import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
-
-const barProps = {
+import { defineComponent as Y, inject as ne, ref as p, computed as L, onBeforeUnmount as re, toRef as J, createBlock as $, openBlock as P, Transition as ve, unref as R, withCtx as j, withDirectives as me, createElementVNode as K, withModifiers as de, normalizeClass as O, normalizeStyle as U, vShow as pe, createElementBlock as ae, Fragment as he, createVNode as q, watch as Q, nextTick as D, provide as be, reactive as ge, onActivated as we, onMounted as Se, onUpdated as ye, createCommentVNode as ze, resolveDynamicComponent as Ee, renderSlot as Te } from "vue";
+import { useEventListener as X, isClient as He, useResizeObserver as Z, useMutationObserver as ke, isObject as Re } from "@vueuse/core";
+import { VkAsyncTeleport as Le } from "@vunk/core/components/async-teleport";
+import { scrollbarContextKey as F, useNamespace as se, BAR_MAP as Ne, renderThumbStyle as Ce, GAP as k, SCOPE as Ae, scrollbarEmits as Me, scrollbarProps as Pe } from "element-plus";
+import { sleep as ee } from "@vunk/shared/promise";
+import { isString as ie } from "@vue/shared";
+const Oe = {
   always: {
     type: Boolean,
-    default: true
+    default: !0
   },
   minSize: {
     type: Number,
-    required: true
+    required: !0
   },
   hideAfter: {
     type: Number,
     default: 0
   }
-};
-
-const thumbProps = {
+}, _e = {
   vertical: Boolean,
   size: String,
   move: Number,
   ratio: {
     type: Number,
-    required: true
+    required: !0
   },
   always: Boolean,
   hideAfter: {
     type: Number,
     default: 0
   }
-};
-
-var _sfc_main$2 = /* @__PURE__ */ defineComponent({
+}, te = /* @__PURE__ */ Y({
   __name: "thumb",
-  props: thumbProps,
-  setup(__props, { expose: __expose }) {
-    __expose();
-    const props = __props;
-    const scrollbar = inject(scrollbarContextKey);
-    const ns = useNamespace("scrollbar");
-    const instance = ref();
-    const thumb = ref();
-    const thumbState = ref({});
-    const visible = ref(false);
-    let cursorDown = false;
-    let cursorLeave = false;
-    let baseScrollHeight = 0;
-    let baseScrollWidth = 0;
-    let originalOnSelectStart = isClient ? document.onselectstart : null;
-    const bar = computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
-    const thumbStyle = computed(
-      () => renderThumbStyle({
-        size: props.size,
-        move: props.move,
-        bar: bar.value
+  props: _e,
+  setup(r) {
+    const h = r, u = ne(F), n = se("scrollbar"), f = p(), v = p(), z = p({}), b = p(!1);
+    let g = !1, s = !1, m = 0, c = 0, l = He ? document.onselectstart : null;
+    const t = L(() => Ne[h.vertical ? "vertical" : "horizontal"]), w = L(
+      () => Ce({
+        size: h.size,
+        move: h.move,
+        bar: t.value
       })
-    );
-    const offsetRatio = computed(
+    ), E = L(
       () => (
         // offsetRatioX = original width of thumb / current width of thumb / ratioX
         // offsetRatioY = original height of thumb / current height of thumb / ratioY
         // instance height = wrap height - GAP
-        instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]
+        f.value[t.value.offset] ** 2 / u.wrapElement[t.value.scrollSize] / h.ratio / v.value[t.value.offset]
       )
     );
-    function clickThumbHandler(e) {
-      e.stopPropagation();
-      if (e.ctrlKey || [1, 2].includes(e.button))
-        return;
-      window.getSelection()?.removeAllRanges();
-      startDrag(e);
-      const el = e.currentTarget;
-      if (!el)
+    function o(a) {
+      if (a.stopPropagation(), a.ctrlKey || [1, 2].includes(a.button))
         return;
-      thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
+      window.getSelection()?.removeAllRanges(), S(a);
+      const d = a.currentTarget;
+      d && (z.value[t.value.axis] = d[t.value.offset] - (a[t.value.client] - d.getBoundingClientRect()[t.value.direction]));
     }
-    function clickTrackHandler(e) {
-      if (!thumb.value || !instance.value || !scrollbar.wrapElement)
+    function y(a) {
+      if (!v.value || !f.value || !u.wrapElement)
         return;
-      const offset = Math.abs(
-        e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]
-      );
-      const thumbHalf = thumb.value[bar.value.offset] / 2;
-      const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
-      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
+      const d = Math.abs(
+        a.target.getBoundingClientRect()[t.value.direction] - a[t.value.client]
+      ), T = v.value[t.value.offset] / 2, C = (d - T) * 100 * E.value / f.value[t.value.offset];
+      u.wrapElement[t.value.scroll] = C * u.wrapElement[t.value.scrollSize] / 100;
     }
-    function startDrag(e) {
-      e.stopImmediatePropagation();
-      cursorDown = true;
-      baseScrollHeight = scrollbar.wrapElement.scrollHeight;
-      baseScrollWidth = scrollbar.wrapElement.scrollWidth;
-      document.addEventListener("mousemove", mouseMoveDocumentHandler);
-      document.addEventListener("mouseup", mouseUpDocumentHandler);
-      originalOnSelectStart = document.onselectstart;
-      document.onselectstart = () => false;
+    function S(a) {
+      a.stopImmediatePropagation(), g = !0, m = u.wrapElement.scrollHeight, c = u.wrapElement.scrollWidth, document.addEventListener("mousemove", _), document.addEventListener("mouseup", N), l = document.onselectstart, document.onselectstart = () => !1;
     }
-    function mouseMoveDocumentHandler(e) {
-      if (!instance.value || !thumb.value)
-        return;
-      if (cursorDown === false)
+    function _(a) {
+      if (!f.value || !v.value || g === !1)
         return;
-      const prevPage = thumbState.value[bar.value.axis];
-      if (!prevPage)
+      const d = z.value[t.value.axis];
+      if (!d)
         return;
-      const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
-      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
-      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
-      if (bar.value.scroll === "scrollLeft") {
-        scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollWidth / 100;
-      } else {
-        scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollHeight / 100;
-      }
+      const T = (f.value.getBoundingClientRect()[t.value.direction] - a[t.value.client]) * -1, C = v.value[t.value.offset] - d, x = (T - C) * 100 * E.value / f.value[t.value.offset];
+      t.value.scroll === "scrollLeft" ? u.wrapElement[t.value.scroll] = x * c / 100 : u.wrapElement[t.value.scroll] = x * m / 100;
     }
-    function mouseUpDocumentHandler() {
-      cursorDown = false;
-      thumbState.value[bar.value.axis] = 0;
-      document.removeEventListener("mousemove", mouseMoveDocumentHandler);
-      document.removeEventListener("mouseup", mouseUpDocumentHandler);
-      restoreOnselectstart();
-      const hidden = () => cursorLeave && (visible.value = false);
-      sleep(props.hideAfter).then(hidden);
+    function N() {
+      g = !1, z.value[t.value.axis] = 0, document.removeEventListener("mousemove", _), document.removeEventListener("mouseup", N), I();
+      const a = () => s && (b.value = !1);
+      ee(h.hideAfter).then(a);
     }
-    function mouseMoveScrollbarHandler() {
-      cursorLeave = false;
-      visible.value = !!props.size;
+    function W() {
+      s = !1, b.value = !!h.size;
     }
-    function mouseLeaveScrollbarHandler() {
-      cursorLeave = true;
-      if (cursorDown) {
-        visible.value = true;
-      } else {
-        sleep(props.hideAfter).then(() => {
-          if (cursorLeave)
-            visible.value = false;
-        });
-      }
+    function B() {
+      s = !0, g ? b.value = !0 : ee(h.hideAfter).then(() => {
+        s && (b.value = !1);
+      });
     }
-    onBeforeUnmount(() => {
-      restoreOnselectstart();
-      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+    re(() => {
+      I(), document.removeEventListener("mouseup", N);
     });
-    function restoreOnselectstart() {
-      if (document.onselectstart !== originalOnSelectStart)
-        document.onselectstart = originalOnSelectStart;
+    function I() {
+      document.onselectstart !== l && (document.onselectstart = l);
     }
-    useEventListener(
-      toRef(scrollbar, "scrollbarElement"),
+    return X(
+      J(u, "scrollbarElement"),
       "mousemove",
-      mouseMoveScrollbarHandler
-    );
-    useEventListener(
-      toRef(scrollbar, "scrollbarElement"),
+      W
+    ), X(
+      J(u, "scrollbarElement"),
       "mouseleave",
-      mouseLeaveScrollbarHandler
-    );
-    const __returned__ = { props, scrollbar, ns, instance, thumb, thumbState, visible, get cursorDown() {
-      return cursorDown;
-    }, set cursorDown(v) {
-      cursorDown = v;
-    }, get cursorLeave() {
-      return cursorLeave;
-    }, set cursorLeave(v) {
-      cursorLeave = v;
-    }, get baseScrollHeight() {
-      return baseScrollHeight;
-    }, set baseScrollHeight(v) {
-      baseScrollHeight = v;
-    }, get baseScrollWidth() {
-      return baseScrollWidth;
-    }, set baseScrollWidth(v) {
-      baseScrollWidth = v;
-    }, get originalOnSelectStart() {
-      return originalOnSelectStart;
-    }, set originalOnSelectStart(v) {
-      originalOnSelectStart = v;
-    }, bar, thumbStyle, offsetRatio, clickThumbHandler, clickTrackHandler, startDrag, mouseMoveDocumentHandler, mouseUpDocumentHandler, mouseMoveScrollbarHandler, mouseLeaveScrollbarHandler, restoreOnselectstart };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock(Transition, {
-    name: $setup.ns.b("fade"),
-    persisted: ""
-  }, {
-    default: withCtx(() => [
-      withDirectives(createElementVNode(
-        "div",
-        {
-          ref: "instance",
-          class: normalizeClass([$setup.ns.e("bar"), $setup.ns.is($setup.bar.key)]),
-          onMousedown: $setup.clickTrackHandler,
-          onMousemove: $setup.mouseMoveScrollbarHandler,
-          onMouseleave: $setup.mouseLeaveScrollbarHandler,
-          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+      B
+    ), (a, d) => (P(), $(ve, {
+      name: R(n).b("fade")
+    }, {
+      default: j(() => [
+        me(K("div", {
+          ref_key: "instance",
+          ref: f,
+          class: O([R(n).e("bar"), R(n).is(t.value.key)]),
+          onMousedown: y,
+          onMousemove: W,
+          onMouseleave: B,
+          onClick: d[0] || (d[0] = de(() => {
           }, ["stop"]))
-        },
-        [
-          createElementVNode(
-            "div",
-            {
-              ref: "thumb",
-              class: normalizeClass($setup.ns.e("thumb")),
-              style: normalizeStyle($setup.thumbStyle),
-              onMousedown: $setup.clickThumbHandler
-            },
-            null,
-            38
-            /* CLASS, STYLE, NEED_HYDRATION */
-          )
-        ],
-        34
-        /* CLASS, NEED_HYDRATION */
-      ), [
-        [vShow, _ctx.always || $setup.visible]
-      ])
-    ]),
-    _: 1
-    /* STABLE */
-  }, 8, ["name"]);
-}
-var Thumb = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "/home/runner/work/vunk-plus/vunk-plus/packages/components/scrollbar/src/thumb.vue"]]);
-
-var _sfc_main$1 = /* @__PURE__ */ defineComponent({
+        }, [
+          K("div", {
+            ref_key: "thumb",
+            ref: v,
+            class: O(R(n).e("thumb")),
+            style: U(w.value),
+            onMousedown: o
+          }, null, 38)
+        ], 34), [
+          [pe, a.always || b.value]
+        ])
+      ]),
+      _: 1
+    }, 8, ["name"]));
+  }
+}), We = /* @__PURE__ */ Y({
   __name: "bar",
-  props: barProps,
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const scrollbar = inject(scrollbarContextKey);
-    const moveX = ref(0);
-    const moveY = ref(0);
-    const sizeWidth = ref("");
-    const sizeHeight = ref("");
-    const ratioY = ref(1);
-    const ratioX = ref(1);
-    function handleScroll(wrap) {
-      if (wrap) {
-        const offsetHeight = wrap.offsetHeight - GAP;
-        const offsetWidth = wrap.offsetWidth - GAP;
-        moveY.value = wrap.scrollTop * 100 / offsetHeight * ratioY.value;
-        moveX.value = wrap.scrollLeft * 100 / offsetWidth * ratioX.value;
+  props: Oe,
+  setup(r, { expose: h }) {
+    const u = r, n = ne(F), f = p(0), v = p(0), z = p(""), b = p(""), g = p(1), s = p(1);
+    function m(l) {
+      if (l) {
+        const t = l.offsetHeight - k, w = l.offsetWidth - k;
+        v.value = l.scrollTop * 100 / t * g.value, f.value = l.scrollLeft * 100 / w * s.value;
       }
     }
-    function update() {
-      const wrap = scrollbar?.wrapElement;
-      if (!wrap)
+    function c() {
+      const l = n?.wrapElement;
+      if (!l)
         return;
-      const offsetHeight = wrap.offsetHeight - GAP;
-      const offsetWidth = wrap.offsetWidth - GAP;
-      const originalHeight = offsetHeight ** 2 / wrap.scrollHeight;
-      const originalWidth = offsetWidth ** 2 / wrap.scrollWidth;
-      const height = Math.max(originalHeight, props.minSize);
-      const width = Math.max(originalWidth, props.minSize);
-      ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
-      ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
-      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : "";
-      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : "";
+      const t = l.offsetHeight - k, w = l.offsetWidth - k, E = t ** 2 / l.scrollHeight, o = w ** 2 / l.scrollWidth, y = Math.max(E, u.minSize), S = Math.max(o, u.minSize);
+      g.value = E / (t - E) / (y / (t - y)), s.value = o / (w - o) / (S / (w - S)), b.value = y + k < t ? `${y}px` : "", z.value = S + k < w ? `${S}px` : "";
     }
-    __expose({
-      handleScroll,
-      update
-    });
-    const __returned__ = { props, scrollbar, moveX, moveY, sizeWidth, sizeHeight, ratioY, ratioX, handleScroll, update, Thumb };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(
-    Fragment,
-    null,
-    [
-      createVNode($setup["Thumb"], {
-        move: $setup.moveX,
-        ratio: $setup.ratioX,
-        size: $setup.sizeWidth,
-        always: _ctx.always,
-        "hide-after": _ctx.hideAfter
+    return h({
+      handleScroll: m,
+      update: c
+    }), (l, t) => (P(), ae(he, null, [
+      q(te, {
+        move: f.value,
+        ratio: s.value,
+        size: z.value,
+        always: l.always,
+        "hide-after": l.hideAfter
       }, null, 8, ["move", "ratio", "size", "always", "hide-after"]),
-      createVNode($setup["Thumb"], {
-        move: $setup.moveY,
-        ratio: $setup.ratioY,
-        size: $setup.sizeHeight,
+      q(te, {
+        move: v.value,
+        ratio: g.value,
+        size: b.value,
         vertical: "",
-        always: _ctx.always,
-        "hide-after": _ctx.hideAfter
+        always: l.always,
+        "hide-after": l.hideAfter
       }, null, 8, ["move", "ratio", "size", "always", "hide-after"])
-    ],
-    64
-    /* STABLE_FRAGMENT */
-  );
-}
-var Bar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/runner/work/vunk-plus/vunk-plus/packages/components/scrollbar/src/bar.vue"]]);
-
-/**
-* @vue/shared v3.5.13
-* (c) 2018-present Yuxi (Evan) You and Vue contributors
-* @license MIT
-**/
-
-
-
-!!(process.env.NODE_ENV !== "production") ? Object.freeze({}) : {};
-!!(process.env.NODE_ENV !== "production") ? Object.freeze([]) : [];
-const isString = (val) => typeof val === "string";
-
-const isNumber = (val) => typeof val === "number";
-function isStringNumber(val) {
-  if (!isString(val)) {
-    return false;
+    ], 64));
   }
-  return !Number.isNaN(Number(val));
+}), M = (r) => typeof r == "number";
+function Be(r) {
+  return ie(r) ? !Number.isNaN(Number(r)) : !1;
 }
-function addUnit(value, defaultUnit = "px") {
-  if (!value)
+function oe(r, h = "px") {
+  if (!r)
     return "";
-  if (isNumber(value) || isStringNumber(value)) {
-    return `${value}${defaultUnit}`;
-  } else if (isString(value)) {
-    return value;
-  }
-  console.warn(SCOPE, "binding value must be a string or number");
+  if (M(r) || Be(r))
+    return `${r}${h}`;
+  if (ie(r))
+    return r;
+  console.warn(Ae, "binding value must be a string or number");
 }
-
-const COMPONENT_NAME = "ElScrollbar";
-var _sfc_main = /* @__PURE__ */ defineComponent({
+const Ie = ["tabindex"], le = "ElScrollbar", V = /* @__PURE__ */ Y({
   __name: "index",
   props: {
-    ...scrollbarProps,
+    ...Pe,
     appendTo: null,
     hideAfter: {
       type: Number,
@@ -341,353 +195,220 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     }
   },
   emits: {
-    ...scrollbarEmits,
-    contentInsufficient: (_) => true
+    ...Me,
+    contentInsufficient: (r) => !0
   },
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const ns = useNamespace("scrollbar");
-    let stopResizeObserver;
-    let stopWrapResizeObserver;
-    let stopResizeListener;
-    let wrapScrollTop = 0;
-    let wrapScrollLeft = 0;
-    let direction = "";
-    const distanceScrollState = {
-      bottom: false,
-      top: false,
-      right: false,
-      left: false
+  setup(r, { expose: h, emit: u }) {
+    const n = r, f = u, v = se("scrollbar");
+    let z, b, g, s = 0, m = 0, c = "";
+    const l = {
+      bottom: !1,
+      top: !1,
+      right: !1,
+      left: !1
     };
-    let hasEmittedInsufficient = false;
-    let stopContentMutationObserver;
-    const scrollbarRef = ref();
-    const wrapRef = ref();
-    const resizeRef = ref();
-    const barRef = ref();
-    const wrapStyle = computed(() => {
-      const style = {};
-      if (props.height)
-        style.height = addUnit(props.height);
-      if (props.maxHeight)
-        style.maxHeight = addUnit(props.maxHeight);
-      return [props.wrapStyle, style];
-    });
-    const wrapKls = computed(() => {
-      return [
-        props.wrapClass,
-        ns.e("wrap"),
-        { [ns.em("wrap", "hidden-default")]: !props.native }
-      ];
-    });
-    const resizeKls = computed(() => {
-      return [ns.e("view"), props.viewClass];
-    });
-    function shouldSkipDirection(direction2) {
-      return distanceScrollState[direction2] ?? false;
+    let t = !1, w;
+    const E = p(), o = p(), y = p(), S = p(), _ = L(() => {
+      const e = {};
+      return n.height && (e.height = oe(n.height)), n.maxHeight && (e.maxHeight = oe(n.maxHeight)), [n.wrapStyle, e];
+    }), N = L(() => [
+      n.wrapClass,
+      v.e("wrap"),
+      { [v.em("wrap", "hidden-default")]: !n.native }
+    ]), W = L(() => [v.e("view"), n.viewClass]);
+    function B(e) {
+      return l[e] ?? !1;
     }
-    const DIRECTION_PAIRS = {
+    const I = {
       top: "bottom",
       bottom: "top",
       left: "right",
       right: "left"
     };
-    function updateTriggerStatus(arrivedStates) {
-      const oppositeDirection = DIRECTION_PAIRS[direction];
-      if (!oppositeDirection)
+    function a(e) {
+      const i = I[c];
+      if (!i)
         return;
-      const arrived = arrivedStates[direction];
-      const oppositeArrived = arrivedStates[oppositeDirection];
-      if (arrived && !distanceScrollState[direction]) {
-        distanceScrollState[direction] = true;
-      }
-      if (!oppositeArrived && distanceScrollState[oppositeDirection]) {
-        distanceScrollState[oppositeDirection] = false;
-      }
+      const A = e[c], fe = e[i];
+      A && !l[c] && (l[c] = !0), !fe && l[i] && (l[i] = !1);
     }
-    function handleScroll() {
-      if (wrapRef.value) {
-        barRef.value?.handleScroll(wrapRef.value);
-        const prevTop = wrapScrollTop;
-        const prevLeft = wrapScrollLeft;
-        wrapScrollTop = wrapRef.value.scrollTop;
-        wrapScrollLeft = wrapRef.value.scrollLeft;
-        const arrivedStates = {
-          bottom: wrapScrollTop + wrapRef.value.clientHeight >= wrapRef.value.scrollHeight - props.distance,
-          top: wrapScrollTop <= props.distance && prevTop !== 0,
-          right: wrapScrollLeft + wrapRef.value.clientWidth >= wrapRef.value.scrollWidth - props.distance && prevLeft !== wrapScrollLeft,
-          left: wrapScrollLeft <= props.distance && prevLeft !== 0
+    function d() {
+      if (o.value) {
+        S.value?.handleScroll(o.value);
+        const e = s, i = m;
+        s = o.value.scrollTop, m = o.value.scrollLeft;
+        const A = {
+          bottom: s + o.value.clientHeight >= o.value.scrollHeight - n.distance,
+          top: s <= n.distance && e !== 0,
+          right: m + o.value.clientWidth >= o.value.scrollWidth - n.distance && i !== m,
+          left: m <= n.distance && i !== 0
         };
-        emit("scroll", {
-          scrollTop: wrapScrollTop,
-          scrollLeft: wrapScrollLeft
-        });
-        if (prevTop !== wrapScrollTop) {
-          direction = wrapScrollTop > prevTop ? "bottom" : "top";
-        }
-        if (prevLeft !== wrapScrollLeft) {
-          direction = wrapScrollLeft > prevLeft ? "right" : "left";
-        }
-        if (props.distance > 0) {
-          if (shouldSkipDirection(direction)) {
+        if (f("scroll", {
+          scrollTop: s,
+          scrollLeft: m
+        }), e !== s && (c = s > e ? "bottom" : "top"), i !== m && (c = m > i ? "right" : "left"), n.distance > 0) {
+          if (B(c))
             return;
-          }
-          updateTriggerStatus(arrivedStates);
+          a(A);
         }
-        if (arrivedStates[direction])
-          emit("end-reached", direction);
+        A[c] && f("end-reached", c);
       }
     }
-    function scrollTo(arg1, arg2) {
-      if (isObject(arg1)) {
-        wrapRef.value.scrollTo(arg1);
-      } else if (isNumber(arg1) && isNumber(arg2)) {
-        wrapRef.value.scrollTo(arg1, arg2);
-      }
+    function T(e, i) {
+      Re(e) ? o.value.scrollTo(e) : M(e) && M(i) && o.value.scrollTo(e, i);
     }
-    function setScrollTop(value) {
-      if (!isNumber(value)) {
-        console.warn(COMPONENT_NAME, "value must be a number");
+    function C(e) {
+      if (!M(e)) {
+        console.warn(le, "value must be a number");
         return;
       }
-      wrapRef.value.scrollTop = value;
+      o.value.scrollTop = e;
     }
-    function setScrollLeft(value) {
-      if (!isNumber(value)) {
-        console.warn(COMPONENT_NAME, "value must be a number");
+    function x(e) {
+      if (!M(e)) {
+        console.warn(le, "value must be a number");
         return;
       }
-      wrapRef.value.scrollLeft = value;
+      o.value.scrollLeft = e;
     }
-    function update() {
-      barRef.value?.update();
-      distanceScrollState[direction] = false;
-      checkContentInsufficient();
+    function H() {
+      S.value?.update(), l[c] = !1, G();
     }
-    function checkContentInsufficient() {
-      if (!wrapRef.value)
+    function G() {
+      if (!o.value)
         return;
-      const verticalInsufficient = wrapRef.value.scrollHeight <= wrapRef.value.clientHeight;
-      const horizontalInsufficient = wrapRef.value.scrollWidth <= wrapRef.value.clientWidth;
-      const isInsufficient = verticalInsufficient || horizontalInsufficient;
-      if (isInsufficient) {
-        if (!hasEmittedInsufficient) {
-          hasEmittedInsufficient = true;
-          nextTick(() => {
-            emit("contentInsufficient", {
-              vertical: verticalInsufficient,
-              horizontal: horizontalInsufficient
-            });
-          });
-        }
-      } else {
-        hasEmittedInsufficient = false;
-      }
+      const e = o.value.scrollHeight <= o.value.clientHeight, i = o.value.scrollWidth <= o.value.clientWidth;
+      e || i ? t || (t = !0, D(() => {
+        f("contentInsufficient", {
+          vertical: e,
+          horizontal: i
+        });
+      })) : t = !1;
     }
-    watch(
-      () => props.noresize,
-      (noresize) => {
-        if (noresize) {
-          stopResizeObserver?.();
-          stopWrapResizeObserver?.();
-          stopResizeListener?.();
-        } else {
-          ({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update));
-          ({ stop: stopWrapResizeObserver } = useResizeObserver(wrapRef, update));
-          stopResizeListener = useEventListener("resize", update);
-        }
+    Q(
+      () => n.noresize,
+      (e) => {
+        e ? (z?.(), b?.(), g?.()) : ({ stop: z } = Z(y, H), { stop: b } = Z(o, H), g = X("resize", H));
       },
-      { immediate: true }
-    );
-    watch(
-      () => [props.maxHeight, props.height],
+      { immediate: !0 }
+    ), Q(
+      () => [n.maxHeight, n.height],
       () => {
-        if (!props.native) {
-          nextTick(() => {
-            update();
-            if (wrapRef.value) {
-              barRef.value?.handleScroll(wrapRef.value);
-            }
-          });
-        }
-      }
-    );
-    provide(
-      scrollbarContextKey,
-      reactive({
-        scrollbarElement: scrollbarRef,
-        wrapElement: wrapRef
-      })
-    );
-    onActivated(() => {
-      if (wrapRef.value) {
-        wrapRef.value.scrollTop = wrapScrollTop;
-        wrapRef.value.scrollLeft = wrapScrollLeft;
-      }
-    });
-    onMounted(() => {
-      if (!props.native) {
-        nextTick(() => {
-          update();
+        n.native || D(() => {
+          H(), o.value && S.value?.handleScroll(o.value);
         });
       }
-      ({ stop: stopContentMutationObserver } = useMutationObserver(
-        resizeRef,
+    ), be(
+      F,
+      ge({
+        scrollbarElement: E,
+        wrapElement: o
+      })
+    ), we(() => {
+      o.value && (o.value.scrollTop = s, o.value.scrollLeft = m);
+    }), Se(() => {
+      n.native || D(() => {
+        H();
+      }), { stop: w } = ke(
+        y,
         () => {
-          hasEmittedInsufficient = false;
-          checkContentInsufficient();
+          t = !1, G();
         },
-        { childList: true, subtree: true }
-      ));
-    });
-    onUpdated(() => {
-      nextTick(() => {
-        update();
+        { childList: !0, subtree: !0 }
+      );
+    }), ye(() => {
+      D(() => {
+        H();
       });
+    }), re(() => {
+      w?.();
     });
-    onBeforeUnmount(() => {
-      stopContentMutationObserver?.();
-    });
-    function scrollToBottom(options) {
-      if (!wrapRef.value) {
-        return;
-      }
-      scrollTo({
-        top: wrapRef.value.scrollHeight,
+    function ue(e) {
+      o.value && T({
+        top: o.value.scrollHeight,
         behavior: "smooth",
-        ...options
+        ...e
       });
     }
-    function scrollToTop(options) {
-      if (!wrapRef.value) {
-        return;
-      }
-      scrollTo({
+    function ce(e) {
+      o.value && T({
         top: 0,
         behavior: "smooth",
-        ...options
+        ...e
       });
     }
-    __expose({
+    return h({
       /** @description scrollToTop method */
-      scrollToTop,
+      scrollToTop: ce,
       /** @description scrollToBottom method */
-      scrollToBottom,
+      scrollToBottom: ue,
       /** @description scrollbar wrap ref */
-      wrapRef,
+      wrapRef: o,
       /** @description update scrollbar state manually */
-      update,
+      update: H,
       /** @description scrolls to a particular set of coordinates */
-      scrollTo,
+      scrollTo: T,
       /** @description set distance to scroll top */
-      setScrollTop,
+      setScrollTop: C,
       /** @description set distance to scroll left */
-      setScrollLeft,
+      setScrollLeft: x,
       /** @description handle scroll event */
-      handleScroll
-    });
-    const __returned__ = { props, emit, COMPONENT_NAME, ns, get stopResizeObserver() {
-      return stopResizeObserver;
-    }, set stopResizeObserver(v) {
-      stopResizeObserver = v;
-    }, get stopWrapResizeObserver() {
-      return stopWrapResizeObserver;
-    }, set stopWrapResizeObserver(v) {
-      stopWrapResizeObserver = v;
-    }, get stopResizeListener() {
-      return stopResizeListener;
-    }, set stopResizeListener(v) {
-      stopResizeListener = v;
-    }, get wrapScrollTop() {
-      return wrapScrollTop;
-    }, set wrapScrollTop(v) {
-      wrapScrollTop = v;
-    }, get wrapScrollLeft() {
-      return wrapScrollLeft;
-    }, set wrapScrollLeft(v) {
-      wrapScrollLeft = v;
-    }, get direction() {
-      return direction;
-    }, set direction(v) {
-      direction = v;
-    }, distanceScrollState, get hasEmittedInsufficient() {
-      return hasEmittedInsufficient;
-    }, set hasEmittedInsufficient(v) {
-      hasEmittedInsufficient = v;
-    }, get stopContentMutationObserver() {
-      return stopContentMutationObserver;
-    }, set stopContentMutationObserver(v) {
-      stopContentMutationObserver = v;
-    }, scrollbarRef, wrapRef, resizeRef, barRef, wrapStyle, wrapKls, resizeKls, shouldSkipDirection, DIRECTION_PAIRS, updateTriggerStatus, handleScroll, scrollTo, setScrollTop, setScrollLeft, update, checkContentInsufficient, scrollToBottom, scrollToTop, get VkAsyncTeleport() {
-      return VkAsyncTeleport;
-    }, Bar };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-
-const _hoisted_1 = ["tabindex"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(
-    "div",
-    {
-      ref: "scrollbarRef",
-      class: normalizeClass($setup.ns.b())
-    },
-    [
-      createElementVNode("div", {
-        ref: "wrapRef",
-        class: normalizeClass($setup.wrapKls),
-        style: normalizeStyle($setup.wrapStyle),
-        tabindex: _ctx.tabindex,
-        onScroll: $setup.handleScroll
+      handleScroll: d
+    }), (e, i) => (P(), ae("div", {
+      ref_key: "scrollbarRef",
+      ref: E,
+      class: O(R(v).b())
+    }, [
+      K("div", {
+        ref_key: "wrapRef",
+        ref: o,
+        class: O(N.value),
+        style: U(_.value),
+        tabindex: e.tabindex,
+        onScroll: d
       }, [
-        (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
-          id: _ctx.id,
-          ref: "resizeRef",
-          class: normalizeClass($setup.resizeKls),
-          style: normalizeStyle(_ctx.viewStyle),
-          role: _ctx.role,
-          "aria-label": _ctx.ariaLabel,
-          "aria-orientation": _ctx.ariaOrientation
+        (P(), $(Ee(e.tag), {
+          id: e.id,
+          ref_key: "resizeRef",
+          ref: y,
+          class: O(W.value),
+          style: U(e.viewStyle),
+          role: e.role,
+          "aria-label": e.ariaLabel,
+          "aria-orientation": e.ariaOrientation
         }, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "default")
+          default: j(() => [
+            Te(e.$slots, "default")
           ]),
           _: 3
-          /* FORWARDED */
         }, 8, ["id", "class", "style", "role", "aria-label", "aria-orientation"]))
-      ], 46, _hoisted_1),
-      !_ctx.native ? (openBlock(), createBlock($setup["VkAsyncTeleport"], {
+      ], 46, Ie),
+      e.native ? ze("", !0) : (P(), $(R(Le), {
         key: 0,
-        disabled: !$props.appendTo,
-        to: $props.appendTo
+        disabled: !r.appendTo,
+        to: r.appendTo
       }, {
-        default: withCtx(() => [
-          createVNode($setup["Bar"], {
-            ref: "barRef",
-            always: _ctx.always,
-            "min-size": _ctx.minSize,
-            "hide-after": $props.hideAfter
+        default: j(() => [
+          q(We, {
+            ref_key: "barRef",
+            ref: S,
+            always: e.always,
+            "min-size": e.minSize,
+            "hide-after": r.hideAfter
           }, null, 8, ["always", "min-size", "hide-after"])
         ]),
         _: 1
-        /* STABLE */
-      }, 8, ["disabled", "to"])) : createCommentVNode("v-if", true)
-    ],
-    2
-    /* CLASS */
-  );
-}
-var VkScrollbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/vunk-plus/vunk-plus/packages/components/scrollbar/src/index.vue"]]);
-
-var types = /*#__PURE__*/Object.freeze({
+      }, 8, ["disabled", "to"]))
+    ], 2));
+  }
+}), Ue = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
-});
-
-VkScrollbar.install = (app) => {
-  app.component(VkScrollbar.name || "VkScrollbar", VkScrollbar);
+}, Symbol.toStringTag, { value: "Module" }));
+V.install = (r) => {
+  r.component(V.name || "VkScrollbar", V);
+};
+export {
+  V as VkScrollbar,
+  Ue as __VkScrollbar,
+  V as default
 };
-
-export { VkScrollbar, types as __VkScrollbar, VkScrollbar as default };