scroll-slides 0.1.1 → 0.2.0

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

@@ -1,3 +1,4 @@
+declare const spacerEnabled: import("vue").Ref<boolean, boolean>;
 declare const sliderRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
 declare const itemStates: {
     [key: number]: {
@@ -9,17 +10,21 @@ declare const itemStates: {
 declare const isVertical: import("vue").ComputedRef<boolean>;
 declare const transformProperty: import("vue").ComputedRef<"translateY" | "translateX">;
 declare const itemIndices: import("vue").ComputedRef<number[]>;
-declare const spacerSize: import("vue").ComputedRef<number>;
+declare const spacerSize: import("vue").Ref<number, number>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_2: `item-${number}`, __VLS_3: {
+declare var __VLS_1: {
+    size: number;
+}, __VLS_4: `item-${number}`, __VLS_5: {
     index: number;
-}, __VLS_5: {
+}, __VLS_7: {
     index: number;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+    [K in NonNullable<typeof __VLS_4>]?: (props: typeof __VLS_5) => any;
 } & {
-    item?: (props: typeof __VLS_5) => any;
+    spacer?: (props: typeof __VLS_1) => any;
+} & {
+    item?: (props: typeof __VLS_7) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     direction: {
@@ -43,15 +48,12 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
         type: NumberConstructor;
         default: number;
     };
-    allowScrollToFirst: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     spacerEnabled: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>, {
+    spacerEnabled: typeof spacerEnabled;
     sliderRef: typeof sliderRef;
     itemStates: typeof itemStates;
     isVertical: typeof isVertical;
@@ -80,10 +82,6 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
         type: NumberConstructor;
         default: number;
     };
-    allowScrollToFirst: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     spacerEnabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -94,7 +92,6 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     scaleRatio: number;
     scaleStartPercent: number;
     translateFactor: number;
-    allowScrollToFirst: boolean;
     spacerEnabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -119,10 +116,6 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: NumberConstructor;
         default: number;
     };
-    allowScrollToFirst: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     spacerEnabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -149,10 +142,6 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: NumberConstructor;
         default: number;
     };
-    allowScrollToFirst: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     spacerEnabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -163,7 +152,6 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     scaleRatio: number;
     scaleStartPercent: number;
     translateFactor: number;
-    allowScrollToFirst: boolean;
     spacerEnabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/scroll-slides.css

@@ -1 +1 @@
-.slider[data-v-55bb67bd]{position:relative;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.slider.horizontal[data-v-55bb67bd]{overflow-x:auto;overflow-y:hidden;white-space:nowrap}.slider-item[data-v-55bb67bd]{position:relative}.slider-item .slider-slot[data-v-55bb67bd]{position:relative;transition:transform .04s}.horizontal .slider-item[data-v-55bb67bd]{display:inline-block;vertical-align:middle;transform-origin:center right}.slider-spacer[data-v-55bb67bd]{pointer-events:none}
+.slider[data-v-2ecb83b3]{position:relative;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.slider.horizontal[data-v-2ecb83b3]{display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.slider-item[data-v-2ecb83b3]{position:relative}.slider-item .slider-slot[data-v-2ecb83b3]{position:relative;transition:transform .04s}.horizontal .slider-item[data-v-2ecb83b3]{display:inline-block;vertical-align:middle;transform-origin:center right}.slider-spacer[data-v-2ecb83b3]{width:100%;height:100%;pointer-events:none}

package/dist/scroll-slides.js

@@ -1,12 +1,12 @@
-import { defineComponent as I, ref as C, reactive as F, computed as p, watch as x, onMounted as A, onUnmounted as H, createElementBlock as h, openBlock as y, normalizeClass as T, createCommentVNode as V, normalizeStyle as E, Fragment as W, renderList as O, createElementVNode as j, renderSlot as _ } from "vue";
-const q = /* @__PURE__ */ I({
+import { defineComponent as U, toRefs as j, ref as _, reactive as q, computed as b, watch as L, onMounted as X, onUnmounted as Y, nextTick as D, createElementBlock as h, openBlock as y, normalizeClass as G, createCommentVNode as J, unref as K, normalizeStyle as P, renderSlot as R, Fragment as Q, renderList as Z, createElementVNode as ee } from "vue";
+const te = /* @__PURE__ */ U({
   __name: "ScrollSlide",
   props: {
     direction: {
       type: String,
       default: "vertical",
       // 'vertical' or 'horizontal'
-      validator: (s) => ["vertical", "horizontal"].includes(s)
+      validator: (c) => ["vertical", "horizontal"].includes(c)
     },
     itemCount: {
       type: Number,
@@ -24,107 +24,124 @@ const q = /* @__PURE__ */ I({
       type: Number,
       default: 100
     },
-    allowScrollToFirst: {
-      type: Boolean,
-      default: !1
-    },
-    // Updating prop name to be clearer
     spacerEnabled: {
       type: Boolean,
       default: !1
     }
   },
-  setup(s) {
-    const r = s, t = C(null), u = C([]), n = F({}), o = p(() => r.direction === "vertical"), P = p(() => o.value ? "translateY" : "translateX"), R = (e, a) => Math.min(Math.max(e / a, 0), 1), $ = (e) => e * e * (3 - 2 * e), g = p(() => Array.from({ length: r.itemCount }, (e, a) => a)), i = () => {
-      if (!t.value) return;
-      const e = t.value, a = e[o.value ? "clientHeight" : "clientWidth"];
-      u.value.forEach((l, c) => {
-        const v = l.getBoundingClientRect(), d = o.value ? v.top : v.left, z = e.getBoundingClientRect(), k = d - (o.value ? z.top : z.left), M = Math.min(
-          Math.max(0, (a - k) / a),
+  setup(c) {
+    const n = c, {
+      direction: m,
+      itemCount: g,
+      scaleRatio: S,
+      scaleStartPercent: N,
+      translateFactor: B,
+      spacerEnabled: w
+    } = j(n), a = _(null), d = _([]), r = q({}), o = b(() => n.direction === "vertical"), I = b(() => o.value ? "translateY" : "translateX"), F = (e, t) => Math.min(Math.max(e / t, 0), 1), x = (e) => e * e * (3 - 2 * e), z = b(() => Array.from({ length: n.itemCount }, (e, t) => t)), s = () => {
+      A(), k();
+    }, A = () => {
+      if (!a.value) return;
+      const e = a.value, t = e[o.value ? "clientHeight" : "clientWidth"];
+      d.value.forEach((l, i) => {
+        const v = l.getBoundingClientRect(), f = o.value ? v.top : v.left, M = e.getBoundingClientRect(), H = f - (o.value ? M.top : M.left), T = Math.min(
+          Math.max(0, (t - H) / t),
           1
-        ), B = R(1 - M - r.scaleStartPercent, 1 - r.scaleStartPercent), S = $(B), L = 1 + (r.scaleRatio - 1) * S, N = S * r.translateFactor;
-        let f;
-        const b = Math.min(Math.max(S || 0, 0), 1);
-        b > 0.6 ? f = 0 : b < 0.4 ? f = 1 : f = (0.6 - b) / 0.2, n[c] = {
-          scale: L,
-          translate: N,
-          opacity: f
+        ), V = F(1 - T - n.scaleStartPercent, 1 - n.scaleStartPercent), C = x(V), W = 1 + (n.scaleRatio - 1) * C, O = C * n.translateFactor;
+        let p;
+        const E = Math.min(Math.max(C || 0, 0), 1);
+        E > 0.6 ? p = 0 : E < 0.4 ? p = 1 : p = (0.6 - E) / 0.2, r[i] = {
+          scale: W,
+          translate: O,
+          opacity: p
         };
       });
-    }, w = () => {
-      t.value && (u.value = Array.from(t.value.querySelectorAll(".slider-item")), g.value.forEach((e) => {
-        n[e] || (n[e] = {
+    }, $ = () => {
+      a.value && (d.value = Array.from(a.value.querySelectorAll(".slider-item")), z.value.forEach((e) => {
+        r[e] || (r[e] = {
           scale: 1,
           translate: 0,
           opacity: 1
         });
-      }), Object.keys(n).forEach((e) => {
-        const a = Number(e);
-        a >= r.itemCount && delete n[a];
-      }), i());
+      }), Object.keys(r).forEach((e) => {
+        const t = Number(e);
+        t >= n.itemCount && delete r[t];
+      }), s());
     };
-    x(() => r.itemCount, (e, a) => {
+    L(() => n.itemCount, (e, t) => {
       setTimeout(() => {
-        w();
+        $();
       }, 0);
     }, { immediate: !1 });
-    const m = p(() => {
-      if (!t.value) return 0;
-      const e = t.value[o.value ? "clientHeight" : "clientWidth"];
-      let a = 0;
-      if (u.value.length > 0) {
-        const l = u.value[0];
+    const u = _(0), k = () => {
+      if (!a.value) return 0;
+      const e = a.value[o.value ? "clientHeight" : "clientWidth"];
+      let t = 0;
+      if (d.value.length > 0) {
+        const l = d.value[0];
         if (l) {
-          const c = l.getBoundingClientRect();
-          a = o.value ? c.height : c.width;
+          const i = l.getBoundingClientRect();
+          t = o.value ? i.height : i.width;
         }
       }
-      return Math.max(0, e - a);
-    });
-    return A(() => {
-      t.value && (t.value.addEventListener("scroll", i), window.addEventListener("resize", i), t.value.addEventListener("touchmove", i, { passive: !0 }), w());
-    }), H(() => {
-      t.value && (t.value.removeEventListener("scroll", i), t.value.removeEventListener("touchmove", i)), window.removeEventListener("resize", i);
-    }), (e, a) => (y(), h("div", {
-      class: T(["slider", { horizontal: !o.value }]),
+      u.value = Math.max(0, e - t);
+    };
+    return k(), X(() => {
+      a.value && (a.value.addEventListener("scroll", s), window.addEventListener("resize", s), a.value.addEventListener("touchmove", s, { passive: !0 }), $());
+    }), Y(() => {
+      a.value && (a.value.removeEventListener("scroll", s), a.value.removeEventListener("touchmove", s)), window.removeEventListener("resize", s);
+    }), L([
+      m,
+      g,
+      S,
+      N,
+      B,
+      w
+    ], () => {
+      console.log("Props changed, reinitializing items"), D(() => {
+        s();
+      });
+    }), (e, t) => (y(), h("div", {
+      class: G(["slider", { horizontal: !o.value }]),
       ref_key: "sliderRef",
-      ref: t
+      ref: a
     }, [
-      s.spacerEnabled ? (y(), h("div", {
+      K(w) ? (y(), h("div", {
         key: 0,
         class: "slider-spacer",
-        style: E(o.value ? { height: `${m.value}px`, minHeight: `${m.value}px` } : { width: `${m.value}px`, minWidth: `${m.value}px`, display: "inline-block" })
-      }, null, 4)) : V("", !0),
-      (y(!0), h(W, null, O(g.value, (l) => {
-        var c, v, d;
+        style: P(o.value ? { height: `${u.value}px`, minHeight: `${u.value}px` } : { width: `${u.value}px`, minWidth: `${u.value}px`, display: "inline-block" })
+      }, [
+        R(e.$slots, "spacer", { size: u.value }, void 0, !0)
+      ], 4)) : J("", !0),
+      (y(!0), h(Q, null, Z(z.value, (l) => {
+        var i, v, f;
         return y(), h("div", {
           key: l,
           class: "slider-item",
-          style: E({
-            zIndex: g.value.length - l
+          style: P({
+            zIndex: z.value.length - l
           })
         }, [
-          j("div", {
+          ee("div", {
             class: "slider-slot",
-            style: E({
-              transform: `${P.value}(${-((c = n[l]) == null ? void 0 : c.translate) || 0}%) scale(${((v = n[l]) == null ? void 0 : v.scale) || 1})`,
-              opacity: (d = n[l]) == null ? void 0 : d.opacity
+            style: P({
+              transform: `${I.value}(${-((i = r[l]) == null ? void 0 : i.translate) || 0}%) scale(${((v = r[l]) == null ? void 0 : v.scale) || 1})`,
+              opacity: (f = r[l]) == null ? void 0 : f.opacity
             })
           }, [
-            _(e.$slots, `item-${l}`, { index: l }, () => [
-              _(e.$slots, "item", { index: l }, void 0, !0)
+            R(e.$slots, `item-${l}`, { index: l }, () => [
+              R(e.$slots, "item", { index: l }, void 0, !0)
             ], !0)
           ], 4)
         ], 4);
       }), 128))
     ], 2));
   }
-}), U = (s, r) => {
-  const t = s.__vccOpts || s;
-  for (const [u, n] of r)
-    t[u] = n;
-  return t;
-}, Y = /* @__PURE__ */ U(q, [["__scopeId", "data-v-55bb67bd"]]);
+}), ae = (c, n) => {
+  const m = c.__vccOpts || c;
+  for (const [g, S] of n)
+    m[g] = S;
+  return m;
+}, ne = /* @__PURE__ */ ae(te, [["__scopeId", "data-v-2ecb83b3"]]);
 export {
-  Y as ScrollSlide
+  ne as ScrollSlide
 };

package/dist/scroll-slides.umd.cjs

@@ -1 +1 @@
-(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.ScrollSlide={},s.Vue))})(this,function(s,e){"use strict";const b=((c,a)=>{const l=c.__vccOpts||c;for(const[u,r]of a)l[u]=r;return l})(e.defineComponent({__name:"ScrollSlide",props:{direction:{type:String,default:"vertical",validator:c=>["vertical","horizontal"].includes(c)},itemCount:{type:Number,default:0},scaleRatio:{type:Number,default:.7},scaleStartPercent:{type:Number,default:.8},translateFactor:{type:Number,default:100},allowScrollToFirst:{type:Boolean,default:!1},spacerEnabled:{type:Boolean,default:!1}},setup(c){const a=c,l=e.ref(null),u=e.ref([]),r=e.reactive({}),i=e.computed(()=>a.direction==="vertical"),k=e.computed(()=>i.value?"translateY":"translateX"),z=(t,n)=>Math.min(Math.max(t/n,0),1),B=t=>t*t*(3-2*t),y=e.computed(()=>Array.from({length:a.itemCount},(t,n)=>n)),d=()=>{if(!l.value)return;const t=l.value,n=t[i.value?"clientHeight":"clientWidth"];u.value.forEach((o,m)=>{const f=o.getBoundingClientRect(),v=i.value?f.top:f.left,_=t.getBoundingClientRect(),w=v-(i.value?_.top:_.left),C=Math.min(Math.max(0,(n-w)/n),1),P=z(1-C-a.scaleStartPercent,1-a.scaleStartPercent),S=B(P),R=1+(a.scaleRatio-1)*S,$=S*a.translateFactor;let h;const g=Math.min(Math.max(S||0,0),1);g>.6?h=0:g<.4?h=1:h=(.6-g)/.2,r[m]={scale:R,translate:$,opacity:h}})},E=()=>{l.value&&(u.value=Array.from(l.value.querySelectorAll(".slider-item")),y.value.forEach(t=>{r[t]||(r[t]={scale:1,translate:0,opacity:1})}),Object.keys(r).forEach(t=>{const n=Number(t);n>=a.itemCount&&delete r[n]}),d())};e.watch(()=>a.itemCount,(t,n)=>{setTimeout(()=>{E()},0)},{immediate:!1});const p=e.computed(()=>{if(!l.value)return 0;const t=l.value[i.value?"clientHeight":"clientWidth"];let n=0;if(u.value.length>0){const o=u.value[0];if(o){const m=o.getBoundingClientRect();n=i.value?m.height:m.width}}return Math.max(0,t-n)});return e.onMounted(()=>{l.value&&(l.value.addEventListener("scroll",d),window.addEventListener("resize",d),l.value.addEventListener("touchmove",d,{passive:!0}),E())}),e.onUnmounted(()=>{l.value&&(l.value.removeEventListener("scroll",d),l.value.removeEventListener("touchmove",d)),window.removeEventListener("resize",d)}),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["slider",{horizontal:!i.value}]),ref_key:"sliderRef",ref:l},[c.spacerEnabled?(e.openBlock(),e.createElementBlock("div",{key:0,class:"slider-spacer",style:e.normalizeStyle(i.value?{height:`${p.value}px`,minHeight:`${p.value}px`}:{width:`${p.value}px`,minWidth:`${p.value}px`,display:"inline-block"})},null,4)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,o=>{var m,f,v;return e.openBlock(),e.createElementBlock("div",{key:o,class:"slider-item",style:e.normalizeStyle({zIndex:y.value.length-o})},[e.createElementVNode("div",{class:"slider-slot",style:e.normalizeStyle({transform:`${k.value}(${-((m=r[o])==null?void 0:m.translate)||0}%) scale(${((f=r[o])==null?void 0:f.scale)||1})`,opacity:(v=r[o])==null?void 0:v.opacity})},[e.renderSlot(t.$slots,`item-${o}`,{index:o},()=>[e.renderSlot(t.$slots,"item",{index:o},void 0,!0)],!0)],4)],4)}),128))],2))}}),[["__scopeId","data-v-55bb67bd"]]);s.ScrollSlide=b,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.ScrollSlide={},c.Vue))})(this,function(c,e){"use strict";const w=((m,o)=>{const p=m.__vccOpts||m;for(const[S,g]of o)p[S]=g;return p})(e.defineComponent({__name:"ScrollSlide",props:{direction:{type:String,default:"vertical",validator:m=>["vertical","horizontal"].includes(m)},itemCount:{type:Number,default:0},scaleRatio:{type:Number,default:.7},scaleStartPercent:{type:Number,default:.8},translateFactor:{type:Number,default:100},spacerEnabled:{type:Boolean,default:!1}},setup(m){const o=m,{direction:p,itemCount:S,scaleRatio:g,scaleStartPercent:B,translateFactor:R,spacerEnabled:k}=e.toRefs(o),l=e.ref(null),h=e.ref([]),r=e.reactive({}),i=e.computed(()=>o.direction==="vertical"),$=e.computed(()=>i.value?"translateY":"translateX"),M=(t,n)=>Math.min(Math.max(t/n,0),1),L=t=>t*t*(3-2*t),z=e.computed(()=>Array.from({length:o.itemCount},(t,n)=>n)),s=()=>{N(),C()},N=()=>{if(!l.value)return;const t=l.value,n=t[i.value?"clientHeight":"clientWidth"];h.value.forEach((a,d)=>{const f=a.getBoundingClientRect(),v=i.value?f.top:f.left,P=t.getBoundingClientRect(),I=v-(i.value?P.top:P.left),T=Math.min(Math.max(0,(n-I)/n),1),x=M(1-T-o.scaleStartPercent,1-o.scaleStartPercent),_=L(x),F=1+(o.scaleRatio-1)*_,V=_*o.translateFactor;let y;const E=Math.min(Math.max(_||0,0),1);E>.6?y=0:E<.4?y=1:y=(.6-E)/.2,r[d]={scale:F,translate:V,opacity:y}})},b=()=>{l.value&&(h.value=Array.from(l.value.querySelectorAll(".slider-item")),z.value.forEach(t=>{r[t]||(r[t]={scale:1,translate:0,opacity:1})}),Object.keys(r).forEach(t=>{const n=Number(t);n>=o.itemCount&&delete r[n]}),s())};e.watch(()=>o.itemCount,(t,n)=>{setTimeout(()=>{b()},0)},{immediate:!1});const u=e.ref(0),C=()=>{if(!l.value)return 0;const t=l.value[i.value?"clientHeight":"clientWidth"];let n=0;if(h.value.length>0){const a=h.value[0];if(a){const d=a.getBoundingClientRect();n=i.value?d.height:d.width}}u.value=Math.max(0,t-n)};return C(),e.onMounted(()=>{l.value&&(l.value.addEventListener("scroll",s),window.addEventListener("resize",s),l.value.addEventListener("touchmove",s,{passive:!0}),b())}),e.onUnmounted(()=>{l.value&&(l.value.removeEventListener("scroll",s),l.value.removeEventListener("touchmove",s)),window.removeEventListener("resize",s)}),e.watch([p,S,g,B,R,k],()=>{console.log("Props changed, reinitializing items"),e.nextTick(()=>{s()})}),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["slider",{horizontal:!i.value}]),ref_key:"sliderRef",ref:l},[e.unref(k)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"slider-spacer",style:e.normalizeStyle(i.value?{height:`${u.value}px`,minHeight:`${u.value}px`}:{width:`${u.value}px`,minWidth:`${u.value}px`,display:"inline-block"})},[e.renderSlot(t.$slots,"spacer",{size:u.value},void 0,!0)],4)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(z.value,a=>{var d,f,v;return e.openBlock(),e.createElementBlock("div",{key:a,class:"slider-item",style:e.normalizeStyle({zIndex:z.value.length-a})},[e.createElementVNode("div",{class:"slider-slot",style:e.normalizeStyle({transform:`${$.value}(${-((d=r[a])==null?void 0:d.translate)||0}%) scale(${((f=r[a])==null?void 0:f.scale)||1})`,opacity:(v=r[a])==null?void 0:v.opacity})},[e.renderSlot(t.$slots,`item-${a}`,{index:a},()=>[e.renderSlot(t.$slots,"item",{index:a},void 0,!0)],!0)],4)],4)}),128))],2))}}),[["__scopeId","data-v-2ecb83b3"]]);c.ScrollSlide=w,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,34 +1,35 @@
-{
-  "name": "scroll-slides",
-  "version": "0.1.1",
-  "type": "module",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/scroll-slides.umd.cjs",
-  "module": "./dist/scroll-slides.js",
-  "author": {
-    "name": "agoudbg",
-    "email": "agoudbg@gmail.com",
-    "url": "https://github.com/agoudbg"
-  },
-  "homepage": "https://github.com/agoudbg/scroll-slides",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build && vue-tsc --emitDeclarationOnly --project tsconfig.app.json",
-    "types": "vue-tsc --declaration --emitDeclarationOnly --project tsconfig.app.json",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "vue": "^3.5.13"
-  },
-  "devDependencies": {
-    "@types/node": "^22.14.0",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/tsconfig": "^0.7.0",
-    "typescript": "~5.7.2",
-    "vite": "^6.2.0",
-    "vue-tsc": "^2.2.4"
-  }
+{
+  "name": "scroll-slides",
+  "version": "0.2.0",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/scroll-slides.umd.cjs",
+  "module": "./dist/scroll-slides.js",
+  "author": {
+    "name": "agoudbg",
+    "email": "agoudbg@gmail.com",
+    "url": "https://github.com/agoudbg"
+  },
+  "homepage": "https://github.com/agoudbg/scroll-slides",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc --emitDeclarationOnly --project tsconfig.app.json",
+    "build:demo": "vite build --config vite.demo.config.ts",
+    "types": "vue-tsc --declaration --emitDeclarationOnly --project tsconfig.app.json",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0",
+    "vue-tsc": "^2.2.4"
+  }
 }