vue-snap 1.3.0 → 1.4.0

package/dist/components/Carousel.vue.d.ts

@@ -1,5 +1,6 @@
 interface CarouselProps {
     tag?: string;
+    hideArrows?: boolean;
     hideArrowsOnBound?: boolean;
     autoplay?: boolean;
     autoplayInterval?: number;
@@ -37,6 +38,7 @@ declare const __VLS_base: import('vue').DefineComponent<CarouselProps, {
     autoplay: boolean;
     autoplayInterval: number;
     tag: string;
+    hideArrows: boolean;
     hideArrowsOnBound: boolean;
     i18n: {
         slideLeft: string;

package/dist/vue-snap.es.js

@@ -1,7 +1,7 @@
-import { createBlock as e, createElementBlock as t, createElementVNode as n, defineComponent as r, guardReactiveProps as i, normalizeProps as a, onBeforeUnmount as o, onMounted as s, openBlock as c, ref as l, renderSlot as u, resolveDynamicComponent as d, toRef as f, unref as p, vShow as m, watch as h, withCtx as g, withDirectives as _ } from "vue";
+import { createBlock as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeProps as a, normalizeProps as o, onBeforeUnmount as s, onMounted as c, openBlock as l, ref as u, renderSlot as d, resolveDynamicComponent as f, toRef as p, unref as m, vShow as h, watch as g, withCtx as _, withDirectives as v } from "vue";
 //#region src/utils/helpers.ts
-var v = typeof window < "u", y = (e, t, n = 5) => Math.abs(e - t) <= n;
-function b(e, t) {
+var y = typeof window < "u", b = (e, t, n = 5) => Math.abs(e - t) <= n;
+function x(e, t) {
 	let n = null, r = (...r) => {
 		n && clearTimeout(n), n = setTimeout(() => {
 			e(...r);
@@ -13,9 +13,9 @@ function b(e, t) {
 }
 //#endregion
 //#region src/hooks/useCarousel.ts
-var x = 100;
-function S(e, t, { autoplay: n, autoplayInterval: r }) {
-	let i = l(!0), a = l(!1), c = l(0), u = null, d = () => t.value ? Array.from(t.value.children ?? []).map((e) => ({
+var S = 100;
+function C(e, t, { autoplay: n, autoplayInterval: r }) {
+	let i = u(!0), a = u(!1), o = u(0), l = null, d = () => t.value ? Array.from(t.value.children ?? []).map((e) => ({
 		offsetLeft: e.offsetLeft,
 		offsetWidth: e.offsetWidth
 	})) : [], f = (e) => {
@@ -23,50 +23,50 @@ function S(e, t, { autoplay: n, autoplayInterval: r }) {
 		return !n || e.length === 0 ? -1 : e.reduce((t, r, i) => Math.abs(r.offsetLeft - n.scrollLeft) < Math.abs(e[t].offsetLeft - n.scrollLeft) ? i : t, 0);
 	}, p = (n) => {
 		if (!t.value) return;
-		let { scrollLeft: r, offsetWidth: o, scrollWidth: s } = t.value;
-		n !== c.value && e("slideChange", n), c.value = n;
-		let l = n === 0, u = y(r + o, s, 10);
+		let { scrollLeft: r, offsetWidth: s, scrollWidth: c } = t.value;
+		n !== o.value && e("slideChange", n), o.value = n;
+		let l = n === 0, u = b(r + s, c, 10);
 		l && !i.value && e("leftBound", !0), i.value = l, u && !a.value && e("rightBound", !0), a.value = u;
 	}, m = (n) => {
 		let r = d(), i = f(r);
 		if (i === -1) return;
-		let a = i + n, o = r[a];
-		!o || !t.value || (t.value.scrollTo({
-			left: o.offsetLeft,
+		let a = i + n, s = r[a];
+		!s || !t.value || (t.value.scrollTo({
+			left: s.offsetLeft,
 			behavior: "smooth"
-		}), c.value = a, e("slideChange", a), w());
-	}, g = (n) => {
+		}), o.value = a, e("slideChange", a), w());
+	}, h = (n) => {
 		let r = d()[n];
 		!r || !t.value || (t.value.scrollTo({
 			left: r.offsetLeft,
 			behavior: "smooth"
-		}), c.value = n, e("slideChange", n), w());
+		}), o.value = n, e("slideChange", n), w());
 	}, _ = () => {
-		a.value ? g(0) : m(1);
-	}, S = () => {
-		u &&= (clearInterval(u), null);
+		a.value ? h(0) : m(1);
+	}, v = () => {
+		l &&= (clearInterval(l), null);
 	}, C = () => {
-		S(), !(!v || !n.value) && (u = setInterval(_, r.value));
+		v(), !(!y || !n.value) && (l = setInterval(_, r.value));
 	}, w = () => {
 		n.value && C();
 	}, T = () => {
-		!n.value || !u || (S(), e("autoplay", !1));
+		!n.value || !l || (v(), e("autoplay", !1));
 	}, E = () => {
-		!n.value || u || (C(), e("autoplay", !0));
+		!n.value || l || (C(), e("autoplay", !0));
 	}, D = () => {
 		let e = d(), t = f(e);
 		t !== -1 && p(t);
-	}, O = b(D, x);
-	return h(n, (e) => {
-		e ? C() : S();
-	}), h(r, () => {
+	}, O = x(D, S);
+	return g(n, (e) => {
+		e ? C() : v();
+	}), g(r, () => {
 		n.value && C();
+	}), c(() => {
+		!y || !t.value || (D(), t.value.addEventListener("scroll", O), e("mounted", !0), C());
 	}), s(() => {
-		!v || !t.value || (D(), t.value.addEventListener("scroll", O), e("mounted", !0), C());
-	}), o(() => {
-		S(), !(!v || !t.value) && t.value.removeEventListener("scroll", O);
+		v(), !(!y || !t.value) && t.value.removeEventListener("scroll", O);
 	}), {
-		goToSlide: g,
+		goToSlide: h,
 		changeSlide: m,
 		isBoundLeft: i,
 		isBoundRight: a,
@@ -76,10 +76,14 @@ function S(e, t, { autoplay: n, autoplayInterval: r }) {
 }
 //#endregion
 //#region src/components/Carousel.vue?vue&type=script&setup=true&lang.ts
-var C = ["aria-label", "disabled"], w = ["aria-label", "disabled"], T = /* @__PURE__ */ r({
+var w = ["aria-label", "disabled"], T = ["aria-label", "disabled"], E = /* @__PURE__ */ i({
 	__name: "Carousel",
 	props: {
 		tag: { default: "ul" },
+		hideArrows: {
+			type: Boolean,
+			default: !1
+		},
 		hideArrowsOnBound: {
 			type: Boolean,
 			default: !1
@@ -101,61 +105,61 @@ var C = ["aria-label", "disabled"], w = ["aria-label", "disabled"], T = /* @__PU
 		"rightBound",
 		"autoplay"
 	],
-	setup(r, { expose: o, emit: s }) {
-		let h = r, v = s, y = l(null), { changeSlide: b, goToSlide: x, isBoundLeft: T, isBoundRight: E, pauseAutoplay: D, resumeAutoplay: O } = S(v, y, {
-			autoplay: f(h, "autoplay"),
-			autoplayInterval: f(h, "autoplayInterval")
+	setup(i, { expose: s, emit: c }) {
+		let g = i, y = c, b = u(null), { changeSlide: x, goToSlide: S, isBoundLeft: E, isBoundRight: D, pauseAutoplay: O, resumeAutoplay: k } = C(y, b, {
+			autoplay: p(g, "autoplay"),
+			autoplayInterval: p(g, "autoplayInterval")
 		});
-		return o({
-			changeSlide: b,
-			goToSlide: x
-		}), (r, o) => (c(), t("div", {
+		return s({
+			changeSlide: x,
+			goToSlide: S
+		}), (i, s) => (l(), n("div", {
 			class: "vs-carousel",
-			onMouseenter: o[2] ||= (...e) => p(D) && p(D)(...e),
-			onMouseleave: o[3] ||= (...e) => p(O) && p(O)(...e)
-		}, [(c(), e(d(r.tag), {
+			onMouseenter: s[2] ||= (...e) => m(O) && m(O)(...e),
+			onMouseleave: s[3] ||= (...e) => m(k) && m(k)(...e)
+		}, [(l(), e(f(i.tag), {
 			ref_key: "vsWrapper",
-			ref: y,
+			ref: b,
 			class: "vs-carousel__wrapper"
 		}, {
-			default: g(() => [u(r.$slots, "default")]),
+			default: _(() => [d(i.$slots, "default")]),
 			_: 3
-		}, 512)), u(r.$slots, "arrows", a(i({
-			changeSlide: p(b),
-			isBoundLeft: p(T),
-			isBoundRight: p(E)
-		})), () => [_(n("button", {
+		}, 512)), i.hideArrows ? t("", !0) : d(i.$slots, "arrows", o(a({ key: 0 }, {
+			changeSlide: m(x),
+			isBoundLeft: m(E),
+			isBoundRight: m(D)
+		})), () => [v(r("button", {
 			type: "button",
-			"aria-label": r.i18n.slideLeft,
-			disabled: p(T),
+			"aria-label": i.i18n.slideLeft,
+			disabled: m(E),
 			class: "vs-carousel__arrows vs-carousel__arrows--left",
-			onClick: o[0] ||= (e) => p(b)(-1)
-		}, " ← ", 8, C), [[m, !r.hideArrowsOnBound || !p(T)]]), _(n("button", {
+			onClick: s[0] ||= (e) => m(x)(-1)
+		}, " ← ", 8, w), [[h, !i.hideArrowsOnBound || !m(E)]]), v(r("button", {
 			type: "button",
-			"aria-label": r.i18n.slideRight,
-			disabled: p(E),
+			"aria-label": i.i18n.slideRight,
+			disabled: m(D),
 			class: "vs-carousel__arrows vs-carousel__arrows--right",
-			onClick: o[1] ||= (e) => p(b)(1)
-		}, " → ", 8, w), [[m, !r.hideArrowsOnBound || !p(E)]])])], 32));
+			onClick: s[1] ||= (e) => m(x)(1)
+		}, " → ", 8, T), [[h, !i.hideArrowsOnBound || !m(D)]])])], 32));
 	}
-}), E = /* @__PURE__ */ r({
+}), D = /* @__PURE__ */ i({
 	__name: "Slide",
 	props: { tag: {
 		type: String,
 		default: "li"
 	} },
 	setup(t) {
-		return (n, r) => (c(), e(d(t.tag), {
+		return (n, r) => (l(), e(f(t.tag), {
 			ref: "vsSlide",
 			class: "vs-carousel__slide",
 			tabindex: "0"
 		}, {
-			default: g(() => [u(n.$slots, "default")]),
+			default: _(() => [d(n.$slots, "default")]),
 			_: 3
 		}, 512));
 	}
-}), D = { install: (e) => {
-	e.component("Carousel", T), e.component("Slide", E);
+}), O = { install: (e) => {
+	e.component("Carousel", E), e.component("Slide", D);
 } };
 //#endregion
-export { T as Carousel, E as Slide, D as VueSnap, D as default };
+export { E as Carousel, D as Slide, O as VueSnap, O as default };

package/dist/vue-snap.js

@@ -1 +1 @@
-var VueSnap=(function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=typeof window<`u`,r=(e,t,n=5)=>Math.abs(e-t)<=n;function i(e,t){let n=null,r=(...r)=>{n&&clearTimeout(n),n=setTimeout(()=>{e(...r)},t)};return r.cancel=()=>{n&&clearTimeout(n),n=null},r}var a=100;function o(e,o,{autoplay:s,autoplayInterval:c}){let l=(0,t.ref)(!0),u=(0,t.ref)(!1),d=(0,t.ref)(0),f=null,p=()=>o.value?Array.from(o.value.children??[]).map(e=>({offsetLeft:e.offsetLeft,offsetWidth:e.offsetWidth})):[],m=e=>{let t=o.value;return!t||e.length===0?-1:e.reduce((n,r,i)=>Math.abs(r.offsetLeft-t.scrollLeft)<Math.abs(e[n].offsetLeft-t.scrollLeft)?i:n,0)},h=t=>{if(!o.value)return;let{scrollLeft:n,offsetWidth:i,scrollWidth:a}=o.value;t!==d.value&&e(`slideChange`,t),d.value=t;let s=t===0,c=r(n+i,a,10);s&&!l.value&&e(`leftBound`,!0),l.value=s,c&&!u.value&&e(`rightBound`,!0),u.value=c},g=t=>{let n=p(),r=m(n);if(r===-1)return;let i=r+t,a=n[i];!a||!o.value||(o.value.scrollTo({left:a.offsetLeft,behavior:`smooth`}),d.value=i,e(`slideChange`,i),x())},_=t=>{let n=p()[t];!n||!o.value||(o.value.scrollTo({left:n.offsetLeft,behavior:`smooth`}),d.value=t,e(`slideChange`,t),x())},v=()=>{u.value?_(0):g(1)},y=()=>{f&&=(clearInterval(f),null)},b=()=>{y(),!(!n||!s.value)&&(f=setInterval(v,c.value))},x=()=>{s.value&&b()},S=()=>{!s.value||!f||(y(),e(`autoplay`,!1))},C=()=>{!s.value||f||(b(),e(`autoplay`,!0))},w=()=>{let e=p(),t=m(e);t!==-1&&h(t)},T=i(w,a);return(0,t.watch)(s,e=>{e?b():y()}),(0,t.watch)(c,()=>{s.value&&b()}),(0,t.onMounted)(()=>{!n||!o.value||(w(),o.value.addEventListener(`scroll`,T),e(`mounted`,!0),b())}),(0,t.onBeforeUnmount)(()=>{y(),!(!n||!o.value)&&o.value.removeEventListener(`scroll`,T)}),{goToSlide:_,changeSlide:g,isBoundLeft:l,isBoundRight:u,pauseAutoplay:S,resumeAutoplay:C}}var s=[`aria-label`,`disabled`],c=[`aria-label`,`disabled`],l=(0,t.defineComponent)({__name:`Carousel`,props:{tag:{default:`ul`},hideArrowsOnBound:{type:Boolean,default:!1},autoplay:{type:Boolean,default:!1},autoplayInterval:{default:3e3},i18n:{default:()=>({slideLeft:`Slide left`,slideRight:`Slide right`})}},emits:[`mounted`,`slideChange`,`leftBound`,`rightBound`,`autoplay`],setup(e,{expose:n,emit:r}){let i=e,a=r,l=(0,t.ref)(null),{changeSlide:u,goToSlide:d,isBoundLeft:f,isBoundRight:p,pauseAutoplay:m,resumeAutoplay:h}=o(a,l,{autoplay:(0,t.toRef)(i,`autoplay`),autoplayInterval:(0,t.toRef)(i,`autoplayInterval`)});return n({changeSlide:u,goToSlide:d}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vs-carousel`,onMouseenter:n[2]||=(...e)=>(0,t.unref)(m)&&(0,t.unref)(m)(...e),onMouseleave:n[3]||=(...e)=>(0,t.unref)(h)&&(0,t.unref)(h)(...e)},[((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.tag),{ref_key:`vsWrapper`,ref:l,class:`vs-carousel__wrapper`},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},512)),(0,t.renderSlot)(e.$slots,`arrows`,(0,t.normalizeProps)((0,t.guardReactiveProps)({changeSlide:(0,t.unref)(u),isBoundLeft:(0,t.unref)(f),isBoundRight:(0,t.unref)(p)})),()=>[(0,t.withDirectives)((0,t.createElementVNode)(`button`,{type:`button`,"aria-label":e.i18n.slideLeft,disabled:(0,t.unref)(f),class:`vs-carousel__arrows vs-carousel__arrows--left`,onClick:n[0]||=e=>(0,t.unref)(u)(-1)},` ← `,8,s),[[t.vShow,!e.hideArrowsOnBound||!(0,t.unref)(f)]]),(0,t.withDirectives)((0,t.createElementVNode)(`button`,{type:`button`,"aria-label":e.i18n.slideRight,disabled:(0,t.unref)(p),class:`vs-carousel__arrows vs-carousel__arrows--right`,onClick:n[1]||=e=>(0,t.unref)(u)(1)},` → `,8,c),[[t.vShow,!e.hideArrowsOnBound||!(0,t.unref)(p)]])])],32))}}),u=(0,t.defineComponent)({__name:`Slide`,props:{tag:{type:String,default:`li`}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.tag),{ref:`vsSlide`,class:`vs-carousel__slide`,tabindex:`0`},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(n.$slots,`default`)]),_:3},512))}}),d={install:e=>{e.component(`Carousel`,l),e.component(`Slide`,u)}};return e.Carousel=l,e.Slide=u,e.VueSnap=d,e.default=d,e})({},Vue);
+var VueSnap=(function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=typeof window<`u`,r=(e,t,n=5)=>Math.abs(e-t)<=n;function i(e,t){let n=null,r=(...r)=>{n&&clearTimeout(n),n=setTimeout(()=>{e(...r)},t)};return r.cancel=()=>{n&&clearTimeout(n),n=null},r}var a=100;function o(e,o,{autoplay:s,autoplayInterval:c}){let l=(0,t.ref)(!0),u=(0,t.ref)(!1),d=(0,t.ref)(0),f=null,p=()=>o.value?Array.from(o.value.children??[]).map(e=>({offsetLeft:e.offsetLeft,offsetWidth:e.offsetWidth})):[],m=e=>{let t=o.value;return!t||e.length===0?-1:e.reduce((n,r,i)=>Math.abs(r.offsetLeft-t.scrollLeft)<Math.abs(e[n].offsetLeft-t.scrollLeft)?i:n,0)},h=t=>{if(!o.value)return;let{scrollLeft:n,offsetWidth:i,scrollWidth:a}=o.value;t!==d.value&&e(`slideChange`,t),d.value=t;let s=t===0,c=r(n+i,a,10);s&&!l.value&&e(`leftBound`,!0),l.value=s,c&&!u.value&&e(`rightBound`,!0),u.value=c},g=t=>{let n=p(),r=m(n);if(r===-1)return;let i=r+t,a=n[i];!a||!o.value||(o.value.scrollTo({left:a.offsetLeft,behavior:`smooth`}),d.value=i,e(`slideChange`,i),x())},_=t=>{let n=p()[t];!n||!o.value||(o.value.scrollTo({left:n.offsetLeft,behavior:`smooth`}),d.value=t,e(`slideChange`,t),x())},v=()=>{u.value?_(0):g(1)},y=()=>{f&&=(clearInterval(f),null)},b=()=>{y(),!(!n||!s.value)&&(f=setInterval(v,c.value))},x=()=>{s.value&&b()},S=()=>{!s.value||!f||(y(),e(`autoplay`,!1))},C=()=>{!s.value||f||(b(),e(`autoplay`,!0))},w=()=>{let e=p(),t=m(e);t!==-1&&h(t)},T=i(w,a);return(0,t.watch)(s,e=>{e?b():y()}),(0,t.watch)(c,()=>{s.value&&b()}),(0,t.onMounted)(()=>{!n||!o.value||(w(),o.value.addEventListener(`scroll`,T),e(`mounted`,!0),b())}),(0,t.onBeforeUnmount)(()=>{y(),!(!n||!o.value)&&o.value.removeEventListener(`scroll`,T)}),{goToSlide:_,changeSlide:g,isBoundLeft:l,isBoundRight:u,pauseAutoplay:S,resumeAutoplay:C}}var s=[`aria-label`,`disabled`],c=[`aria-label`,`disabled`],l=(0,t.defineComponent)({__name:`Carousel`,props:{tag:{default:`ul`},hideArrows:{type:Boolean,default:!1},hideArrowsOnBound:{type:Boolean,default:!1},autoplay:{type:Boolean,default:!1},autoplayInterval:{default:3e3},i18n:{default:()=>({slideLeft:`Slide left`,slideRight:`Slide right`})}},emits:[`mounted`,`slideChange`,`leftBound`,`rightBound`,`autoplay`],setup(e,{expose:n,emit:r}){let i=e,a=r,l=(0,t.ref)(null),{changeSlide:u,goToSlide:d,isBoundLeft:f,isBoundRight:p,pauseAutoplay:m,resumeAutoplay:h}=o(a,l,{autoplay:(0,t.toRef)(i,`autoplay`),autoplayInterval:(0,t.toRef)(i,`autoplayInterval`)});return n({changeSlide:u,goToSlide:d}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vs-carousel`,onMouseenter:n[2]||=(...e)=>(0,t.unref)(m)&&(0,t.unref)(m)(...e),onMouseleave:n[3]||=(...e)=>(0,t.unref)(h)&&(0,t.unref)(h)(...e)},[((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.tag),{ref_key:`vsWrapper`,ref:l,class:`vs-carousel__wrapper`},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},512)),e.hideArrows?(0,t.createCommentVNode)(``,!0):(0,t.renderSlot)(e.$slots,`arrows`,(0,t.normalizeProps)((0,t.mergeProps)({key:0},{changeSlide:(0,t.unref)(u),isBoundLeft:(0,t.unref)(f),isBoundRight:(0,t.unref)(p)})),()=>[(0,t.withDirectives)((0,t.createElementVNode)(`button`,{type:`button`,"aria-label":e.i18n.slideLeft,disabled:(0,t.unref)(f),class:`vs-carousel__arrows vs-carousel__arrows--left`,onClick:n[0]||=e=>(0,t.unref)(u)(-1)},` ← `,8,s),[[t.vShow,!e.hideArrowsOnBound||!(0,t.unref)(f)]]),(0,t.withDirectives)((0,t.createElementVNode)(`button`,{type:`button`,"aria-label":e.i18n.slideRight,disabled:(0,t.unref)(p),class:`vs-carousel__arrows vs-carousel__arrows--right`,onClick:n[1]||=e=>(0,t.unref)(u)(1)},` → `,8,c),[[t.vShow,!e.hideArrowsOnBound||!(0,t.unref)(p)]])])],32))}}),u=(0,t.defineComponent)({__name:`Slide`,props:{tag:{type:String,default:`li`}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.tag),{ref:`vsSlide`,class:`vs-carousel__slide`,tabindex:`0`},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(n.$slots,`default`)]),_:3},512))}}),d={install:e=>{e.component(`Carousel`,l),e.component(`Slide`,u)}};return e.Carousel=l,e.Slide=u,e.VueSnap=d,e.default=d,e})({},Vue);

package/dist/vue-snap.umd.js

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VueSnap={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=typeof window<`u`,r=(e,t,n=5)=>Math.abs(e-t)<=n;function i(e,t){let n=null,r=(...r)=>{n&&clearTimeout(n),n=setTimeout(()=>{e(...r)},t)};return r.cancel=()=>{n&&clearTimeout(n),n=null},r}var a=100;function o(e,o,{autoplay:s,autoplayInterval:c}){let l=(0,t.ref)(!0),u=(0,t.ref)(!1),d=(0,t.ref)(0),f=null,p=()=>o.value?Array.from(o.value.children??[]).map(e=>({offsetLeft:e.offsetLeft,offsetWidth:e.offsetWidth})):[],m=e=>{let t=o.value;return!t||e.length===0?-1:e.reduce((n,r,i)=>Math.abs(r.offsetLeft-t.scrollLeft)<Math.abs(e[n].offsetLeft-t.scrollLeft)?i:n,0)},h=t=>{if(!o.value)return;let{scrollLeft:n,offsetWidth:i,scrollWidth:a}=o.value;t!==d.value&&e(`slideChange`,t),d.value=t;let s=t===0,c=r(n+i,a,10);s&&!l.value&&e(`leftBound`,!0),l.value=s,c&&!u.value&&e(`rightBound`,!0),u.value=c},g=t=>{let n=p(),r=m(n);if(r===-1)return;let i=r+t,a=n[i];!a||!o.value||(o.value.scrollTo({left:a.offsetLeft,behavior:`smooth`}),d.value=i,e(`slideChange`,i),x())},_=t=>{let n=p()[t];!n||!o.value||(o.value.scrollTo({left:n.offsetLeft,behavior:`smooth`}),d.value=t,e(`slideChange`,t),x())},v=()=>{u.value?_(0):g(1)},y=()=>{f&&=(clearInterval(f),null)},b=()=>{y(),!(!n||!s.value)&&(f=setInterval(v,c.value))},x=()=>{s.value&&b()},S=()=>{!s.value||!f||(y(),e(`autoplay`,!1))},C=()=>{!s.value||f||(b(),e(`autoplay`,!0))},w=()=>{let e=p(),t=m(e);t!==-1&&h(t)},T=i(w,a);return(0,t.watch)(s,e=>{e?b():y()}),(0,t.watch)(c,()=>{s.value&&b()}),(0,t.onMounted)(()=>{!n||!o.value||(w(),o.value.addEventListener(`scroll`,T),e(`mounted`,!0),b())}),(0,t.onBeforeUnmount)(()=>{y(),!(!n||!o.value)&&o.value.removeEventListener(`scroll`,T)}),{goToSlide:_,changeSlide:g,isBoundLeft:l,isBoundRight:u,pauseAutoplay:S,resumeAutoplay:C}}var s=[`aria-label`,`disabled`],c=[`aria-label`,`disabled`],l=(0,t.defineComponent)({__name:`Carousel`,props:{tag:{default:`ul`},hideArrowsOnBound:{type:Boolean,default:!1},autoplay:{type:Boolean,default:!1},autoplayInterval:{default:3e3},i18n:{default:()=>({slideLeft:`Slide left`,slideRight:`Slide right`})}},emits:[`mounted`,`slideChange`,`leftBound`,`rightBound`,`autoplay`],setup(e,{expose:n,emit:r}){let i=e,a=r,l=(0,t.ref)(null),{changeSlide:u,goToSlide:d,isBoundLeft:f,isBoundRight:p,pauseAutoplay:m,resumeAutoplay:h}=o(a,l,{autoplay:(0,t.toRef)(i,`autoplay`),autoplayInterval:(0,t.toRef)(i,`autoplayInterval`)});return n({changeSlide:u,goToSlide:d}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vs-carousel`,onMouseenter:n[2]||=(...e)=>(0,t.unref)(m)&&(0,t.unref)(m)(...e),onMouseleave:n[3]||=(...e)=>(0,t.unref)(h)&&(0,t.unref)(h)(...e)},[((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.tag),{ref_key:`vsWrapper`,ref:l,class:`vs-carousel__wrapper`},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},512)),(0,t.renderSlot)(e.$slots,`arrows`,(0,t.normalizeProps)((0,t.guardReactiveProps)({changeSlide:(0,t.unref)(u),isBoundLeft:(0,t.unref)(f),isBoundRight:(0,t.unref)(p)})),()=>[(0,t.withDirectives)((0,t.createElementVNode)(`button`,{type:`button`,"aria-label":e.i18n.slideLeft,disabled:(0,t.unref)(f),class:`vs-carousel__arrows vs-carousel__arrows--left`,onClick:n[0]||=e=>(0,t.unref)(u)(-1)},` ← `,8,s),[[t.vShow,!e.hideArrowsOnBound||!(0,t.unref)(f)]]),(0,t.withDirectives)((0,t.createElementVNode)(`button`,{type:`button`,"aria-label":e.i18n.slideRight,disabled:(0,t.unref)(p),class:`vs-carousel__arrows vs-carousel__arrows--right`,onClick:n[1]||=e=>(0,t.unref)(u)(1)},` → `,8,c),[[t.vShow,!e.hideArrowsOnBound||!(0,t.unref)(p)]])])],32))}}),u=(0,t.defineComponent)({__name:`Slide`,props:{tag:{type:String,default:`li`}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.tag),{ref:`vsSlide`,class:`vs-carousel__slide`,tabindex:`0`},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(n.$slots,`default`)]),_:3},512))}}),d={install:e=>{e.component(`Carousel`,l),e.component(`Slide`,u)}};e.Carousel=l,e.Slide=u,e.VueSnap=d,e.default=d});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VueSnap={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=typeof window<`u`,r=(e,t,n=5)=>Math.abs(e-t)<=n;function i(e,t){let n=null,r=(...r)=>{n&&clearTimeout(n),n=setTimeout(()=>{e(...r)},t)};return r.cancel=()=>{n&&clearTimeout(n),n=null},r}var a=100;function o(e,o,{autoplay:s,autoplayInterval:c}){let l=(0,t.ref)(!0),u=(0,t.ref)(!1),d=(0,t.ref)(0),f=null,p=()=>o.value?Array.from(o.value.children??[]).map(e=>({offsetLeft:e.offsetLeft,offsetWidth:e.offsetWidth})):[],m=e=>{let t=o.value;return!t||e.length===0?-1:e.reduce((n,r,i)=>Math.abs(r.offsetLeft-t.scrollLeft)<Math.abs(e[n].offsetLeft-t.scrollLeft)?i:n,0)},h=t=>{if(!o.value)return;let{scrollLeft:n,offsetWidth:i,scrollWidth:a}=o.value;t!==d.value&&e(`slideChange`,t),d.value=t;let s=t===0,c=r(n+i,a,10);s&&!l.value&&e(`leftBound`,!0),l.value=s,c&&!u.value&&e(`rightBound`,!0),u.value=c},g=t=>{let n=p(),r=m(n);if(r===-1)return;let i=r+t,a=n[i];!a||!o.value||(o.value.scrollTo({left:a.offsetLeft,behavior:`smooth`}),d.value=i,e(`slideChange`,i),x())},_=t=>{let n=p()[t];!n||!o.value||(o.value.scrollTo({left:n.offsetLeft,behavior:`smooth`}),d.value=t,e(`slideChange`,t),x())},v=()=>{u.value?_(0):g(1)},y=()=>{f&&=(clearInterval(f),null)},b=()=>{y(),!(!n||!s.value)&&(f=setInterval(v,c.value))},x=()=>{s.value&&b()},S=()=>{!s.value||!f||(y(),e(`autoplay`,!1))},C=()=>{!s.value||f||(b(),e(`autoplay`,!0))},w=()=>{let e=p(),t=m(e);t!==-1&&h(t)},T=i(w,a);return(0,t.watch)(s,e=>{e?b():y()}),(0,t.watch)(c,()=>{s.value&&b()}),(0,t.onMounted)(()=>{!n||!o.value||(w(),o.value.addEventListener(`scroll`,T),e(`mounted`,!0),b())}),(0,t.onBeforeUnmount)(()=>{y(),!(!n||!o.value)&&o.value.removeEventListener(`scroll`,T)}),{goToSlide:_,changeSlide:g,isBoundLeft:l,isBoundRight:u,pauseAutoplay:S,resumeAutoplay:C}}var s=[`aria-label`,`disabled`],c=[`aria-label`,`disabled`],l=(0,t.defineComponent)({__name:`Carousel`,props:{tag:{default:`ul`},hideArrows:{type:Boolean,default:!1},hideArrowsOnBound:{type:Boolean,default:!1},autoplay:{type:Boolean,default:!1},autoplayInterval:{default:3e3},i18n:{default:()=>({slideLeft:`Slide left`,slideRight:`Slide right`})}},emits:[`mounted`,`slideChange`,`leftBound`,`rightBound`,`autoplay`],setup(e,{expose:n,emit:r}){let i=e,a=r,l=(0,t.ref)(null),{changeSlide:u,goToSlide:d,isBoundLeft:f,isBoundRight:p,pauseAutoplay:m,resumeAutoplay:h}=o(a,l,{autoplay:(0,t.toRef)(i,`autoplay`),autoplayInterval:(0,t.toRef)(i,`autoplayInterval`)});return n({changeSlide:u,goToSlide:d}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vs-carousel`,onMouseenter:n[2]||=(...e)=>(0,t.unref)(m)&&(0,t.unref)(m)(...e),onMouseleave:n[3]||=(...e)=>(0,t.unref)(h)&&(0,t.unref)(h)(...e)},[((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.tag),{ref_key:`vsWrapper`,ref:l,class:`vs-carousel__wrapper`},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},512)),e.hideArrows?(0,t.createCommentVNode)(``,!0):(0,t.renderSlot)(e.$slots,`arrows`,(0,t.normalizeProps)((0,t.mergeProps)({key:0},{changeSlide:(0,t.unref)(u),isBoundLeft:(0,t.unref)(f),isBoundRight:(0,t.unref)(p)})),()=>[(0,t.withDirectives)((0,t.createElementVNode)(`button`,{type:`button`,"aria-label":e.i18n.slideLeft,disabled:(0,t.unref)(f),class:`vs-carousel__arrows vs-carousel__arrows--left`,onClick:n[0]||=e=>(0,t.unref)(u)(-1)},` ← `,8,s),[[t.vShow,!e.hideArrowsOnBound||!(0,t.unref)(f)]]),(0,t.withDirectives)((0,t.createElementVNode)(`button`,{type:`button`,"aria-label":e.i18n.slideRight,disabled:(0,t.unref)(p),class:`vs-carousel__arrows vs-carousel__arrows--right`,onClick:n[1]||=e=>(0,t.unref)(u)(1)},` → `,8,c),[[t.vShow,!e.hideArrowsOnBound||!(0,t.unref)(p)]])])],32))}}),u=(0,t.defineComponent)({__name:`Slide`,props:{tag:{type:String,default:`li`}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.tag),{ref:`vsSlide`,class:`vs-carousel__slide`,tabindex:`0`},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(n.$slots,`default`)]),_:3},512))}}),d={install:e=>{e.component(`Carousel`,l),e.component(`Slide`,u)}};e.Carousel=l,e.Slide=u,e.VueSnap=d,e.default=d});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-snap",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "type": "module",
   "description": "Lightweight Carousel based on CSS Scroll Snap",
   "main": "dist/vue-snap.umd.js",