@indielayer/ui/lib/components/scroll/Scroll.vue2.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as v, ref as w, toRefs as y, openBlock as $, createElementBlock as z, normalizeClass as r, unref as o, normalizeStyle as E, createElementVNode as S, renderSlot as B } from "vue";
import { useScroll as b, useResizeObserver as g, useEventListener as k } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
import { useTheme as C } from "../../composables/useTheme.js";
const L = {
  shadow: Boolean,
  horizontal: Boolean,
  mousewheel: Boolean,
  scrollbar: {
    type: Boolean,
    default: !0
  }
}, N = { name: "XScroll" }, O = /* @__PURE__ */ v({
  ...N,
  props: L,
  setup(s, { expose: a }) {
    const t = s, l = w(null), { arrivedState: n } = b(l), { left: i, right: u, top: f, bottom: c } = y(n);
    g(l, d), t.horizontal && t.mousewheel && k(l, "wheel", (e) => {
      !l.value || l.value.scrollWidth <= l.value.clientWidth || (e.preventDefault(), l.value.scrollLeft += e.deltaY + e.deltaX);
    });
    function d() {
      var e;
      (e = l.value) == null || e.dispatchEvent(new CustomEvent("scroll"));
    }
    const { styles: h, classes: m, className: p } = C("Scroll", {}, t);
    return a({ scrollEl: l }), (e, R) => ($(), z("div", {
      class: r(["flex relative overflow-hidden max-w-full max-h-full", [
        o(p),
        o(m).wrapper,
        e.$style.scrollwrap,
        e.horizontal ? [
          e.$style.horizontal,
          {
            [e.$style["shadow-left"]]: !o(i),
            [e.$style["shadow-right"]]: !o(u)
          }
        ] : [
          e.$style.vertical,
          {
            [e.$style["shadow-top"]]: !o(f),
            [e.$style["shadow-bottom"]]: !o(c)
          }
        ]
      ]]),
      style: E(o(h))
    }, [
      S("div", {
        ref_key: "scrollEl",
        ref: l,
        class: r(["relative overflow-auto w-full", [
          [e.horizontal ? "overflow-x-auto" : "overflow-y-auto"],
          {
            [e.$style.hidescroll]: !e.scrollbar
          }
        ]])
      }, [
        B(e.$slots, "default")
      ], 2)
    ], 6));
  }
});
export {
  O as default
};