vue-snap 1.2.0 → 1.4.0

package/README.md

@@ -31,6 +31,7 @@ The idea behind this plugin is to create a fully responsive and well-optimized c
 - **No calculations or heavy logic** – performance-first approach
 - **Fully responsive** – most customization is handled via CSS (e.g. number of visible slides)
 - **ESM bundle with tree-shaking** – dead code is automatically eliminated
+- **TypeScript support** – ships with bundled type declarations out of the box
 - **SSR support** – works with frameworks like Nuxt.js 🎉 [More here](https://github.com/bartdominiak/vue-snap/tree/master/examples)
 - **Vue 3 support** 🎉  [More here](#installation--usage)
 - **Modern browser support** – compatible with all common browsers [More here](https://caniuse.com/css-snappoints)
@@ -52,7 +53,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 
 import VueSnap from 'vue-snap'
-import 'vue-snap/dist/vue-snap.css'
+import 'vue-snap/style.css'
 
 const myApp = createApp(App)
 
@@ -64,7 +65,7 @@ myApp.mount('#app')
 
 ```js
 import { Carousel, Slide } from 'vue-snap'
-import 'vue-snap/dist/vue-snap.css'
+import 'vue-snap/style.css'
 
 export default {
   components: {

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

@@ -0,0 +1,55 @@
+interface CarouselProps {
+    tag?: string;
+    hideArrows?: boolean;
+    hideArrowsOnBound?: boolean;
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    i18n?: {
+        slideLeft: string;
+        slideRight: string;
+    };
+}
+declare var __VLS_9: {}, __VLS_11: {
+    changeSlide: (direction: number) => void;
+    isBoundLeft: boolean;
+    isBoundRight: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+} & {
+    arrows?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<CarouselProps, {
+    changeSlide: (direction: number) => void;
+    goToSlide: (index: number) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    mounted: (...args: any[]) => void;
+    slideChange: (...args: any[]) => void;
+    leftBound: (...args: any[]) => void;
+    rightBound: (...args: any[]) => void;
+    autoplay: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<CarouselProps> & Readonly<{
+    onMounted?: ((...args: any[]) => any) | undefined;
+    onSlideChange?: ((...args: any[]) => any) | undefined;
+    onLeftBound?: ((...args: any[]) => any) | undefined;
+    onRightBound?: ((...args: any[]) => any) | undefined;
+    onAutoplay?: ((...args: any[]) => any) | undefined;
+}>, {
+    autoplay: boolean;
+    autoplayInterval: number;
+    tag: string;
+    hideArrows: boolean;
+    hideArrowsOnBound: boolean;
+    i18n: {
+        slideLeft: string;
+        slideRight: string;
+    };
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,31 @@
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * Custom tag
+     */
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * Custom tag
+     */
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    tag: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/entry.d.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue';
+import { default as Carousel } from './components/Carousel.vue';
+import { default as Slide } from './components/Slide.vue';
+export declare const VueSnap: {
+    install: (app: App) => void;
+};
+export { Carousel, Slide };
+export default VueSnap;

package/dist/hooks/useCarousel.d.ts

@@ -0,0 +1,21 @@
+import { Ref } from 'vue';
+type CarouselEmits = {
+    (e: 'mounted', value: boolean): void;
+    (e: 'slideChange', index: number): void;
+    (e: 'leftBound', value: boolean): void;
+    (e: 'rightBound', value: boolean): void;
+    (e: 'autoplay', value: boolean): void;
+};
+type AutoplayOptions = {
+    autoplay: Ref<boolean>;
+    autoplayInterval: Ref<number>;
+};
+export declare function useCarousel(emit: CarouselEmits, vsWrapper: Ref<HTMLElement | null>, { autoplay, autoplayInterval }: AutoplayOptions): {
+    goToSlide: (index: number) => void;
+    changeSlide: (direction: number) => void;
+    isBoundLeft: Ref<boolean, boolean>;
+    isBoundRight: Ref<boolean, boolean>;
+    pauseAutoplay: () => void;
+    resumeAutoplay: () => void;
+};
+export {};

package/dist/utils/helpers.d.ts

@@ -0,0 +1,6 @@
+export declare const isClient: boolean;
+export declare const approximatelyEqual: (v1: number, v2: number, epsilon?: number) => boolean;
+export declare function debounce<T extends (...args: unknown[]) => void>(fn: T, wait: number): {
+    (...args: Parameters<T>): void;
+    cancel: () => void;
+};

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,19 +1,25 @@
 {
   "name": "vue-snap",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "type": "module",
   "description": "Lightweight Carousel based on CSS Scroll Snap",
   "main": "dist/vue-snap.umd.js",
   "module": "dist/vue-snap.es.js",
   "unpkg": "dist/vue-snap.js",
+  "types": "dist/entry.d.ts",
+  "files": [
+    "dist"
+  ],
   "engines": {
     "node": ">=22"
   },
   "exports": {
     ".": {
+      "types": "./dist/entry.d.ts",
       "import": "./dist/vue-snap.es.js",
       "require": "./dist/vue-snap.umd.js"
     },
+    "./style.css": "./dist/vue-snap.css",
     "./dist/vue-snap.css": "./dist/vue-snap.css"
   },
   "scripts": {
@@ -50,6 +56,7 @@
     "sass-embedded": "^1.100.0",
     "typescript": "5",
     "vite": "^8.1.4",
+    "vite-plugin-dts": "^5.0.3",
     "vue-tsc": "^3.3.7"
   }
 }

package/.claude/settings.local.json

@@ -1,44 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(pnpm --version)",
-      "Bash(pnpm add *)",
-      "Bash(pnpm remove *)",
-      "Bash(npx biome *)",
-      "Bash(curl -s https://biomejs.dev/schemas/2.5.3/schema.json)",
-      "Bash(python3 -c ' *)",
-      "Bash(python3 *)",
-      "Bash(pnpm lint *)",
-      "Bash(echo \"exit=$?\")",
-      "Bash(npx vue-tsc *)",
-      "Bash(pnpm run *)",
-      "Bash(pnpm install *)",
-      "Bash(node -e \"console.log\\(require.resolve\\('vue-snap/package.json'\\)\\)\")",
-      "Bash(node -e ' *)",
-      "Bash(bun --version)",
-      "Bash(bun add *)",
-      "Bash(bun run *)",
-      "Bash(gh pr *)",
-      "Bash(git fetch *)",
-      "Bash(git rev-list *)",
-      "Bash(bunx vue-tsc *)",
-      "Bash(open *)",
-      "Bash(bun x *)",
-      "Bash(git add *)",
-      "Bash(git commit -m ' *)",
-      "Bash(git branch *)",
-      "Bash(git checkout *)",
-      "Bash(git reset *)",
-      "Bash(git -C /Users/bartek/Sites/vue-snap log --oneline -5 -- index.html)",
-      "Bash(curl -sI http://localhost:8123/index.html)",
-      "Bash(curl -sI http://localhost:8123/dist/vue-snap.js)",
-      "Bash(pkill -f \"http-server -p 8123\")",
-      "Bash(git -C /Users/bartek/Sites/vue-snap status)",
-      "Bash(curl -s http://localhost:5173/)",
-      "Skill(run)",
-      "Bash(command -v chromium-cli)",
-      "Bash(bunx --help)",
-      "Bash(pkill -f \"vite\")"
-    ]
-  }
-}