@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
47 lines (46 loc) • 1.89 kB
JavaScript
import { defineComponent as v, ref as n, onMounted as d, onUnmounted as c } from "vue";
import { NeonOrientation as r } from "../../../model/common/layout/NeonOrientation.es.js";
const h = v({
name: "NeonSwiper",
props: {
/**
* Display fade in / fade out styling when there is an overflow.
*/
fade: { type: Boolean, default: !0 },
/**
* Swiper orientation, i.e. whether to manage overflow horizontally or vertically.
*/
orientation: { type: String, default: r.Horizontal },
/**
* Hide the starting fade (left or top depending on the orientation).
*/
hideFadeStart: { type: Boolean, default: !1 },
/**
* Hide the ending fade (right or bottom depending on the orientation).
*/
hideFadeEnd: { type: Boolean, default: !1 }
},
setup(u) {
const e = n(null), t = n(!1), a = n(!1), o = n(!1), i = () => {
e.value ? u.orientation === r.Horizontal ? (a.value = e.value.scrollLeft <= 0, o.value = e.value.scrollLeft + e.value.clientWidth > e.value.scrollWidth - 1) : (a.value = e.value.scrollTop <= 0, o.value = e.value.scrollTop + e.value.clientHeight > e.value.scrollHeight - 1) : (a.value = !1, o.value = !1);
}, s = () => {
e.value ? u.orientation === r.Horizontal ? t.value = e.value.scrollWidth > e.value.clientWidth : t.value = e.value.scrollHeight > e.value.clientHeight : t.value = !1, i();
};
return d(() => {
var l;
window.addEventListener("resize", s, { passive: !0 }), (l = e.value) == null || l.addEventListener("scroll", i, { passive: !0 }), s();
}), c(() => {
var l;
window.removeEventListener("resize", s), (l = e.value) == null || l.removeEventListener("scroll", i);
}), {
isOverflowing: t,
isScrollStart: a,
isScrollEnd: o,
scrollable: e
};
}
});
export {
h as default
};
//# sourceMappingURL=NeonSwiper.es.js.map