scroll-slides 0.1.0 → 0.1.2

package/README.md

@@ -1,2 +1,11 @@
 # scroll-slides
- 
+
+## Install
+
+```bash
+npm install scroll-slides
+
+yarn add scroll-slides
+
+pnpm add scroll-slides
+```

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]: {
@@ -43,15 +44,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 +78,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 +88,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 +112,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 +138,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 +148,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-68d7cf0e]{position:relative;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.slider.horizontal[data-v-68d7cf0e]{overflow-x:auto;overflow-y:hidden;white-space:nowrap}.slider-item[data-v-68d7cf0e]{position:relative}.slider-item .slider-slot[data-v-68d7cf0e]{position:relative;transition:transform .04s}.horizontal .slider-item[data-v-68d7cf0e]{display:inline-block;vertical-align:middle;transform-origin:center right}.slider-spacer[data-v-68d7cf0e]{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 A, toRefs as F, ref as R, reactive as H, computed as h, watch as b, onMounted as V, onUnmounted as W, createElementBlock as y, openBlock as g, normalizeClass as O, createCommentVNode as T, unref as j, normalizeStyle as z, Fragment as q, renderList as U, createElementVNode as X, renderSlot as P } from "vue";
+const Y = /* @__PURE__ */ A({
   __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,106 @@ 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 = () => {
+  setup(c) {
+    const n = c, {
+      spacerEnabled: v
+    } = F(n), t = R(null), u = R([]), r = H({}), o = h(() => n.direction === "vertical"), $ = h(() => o.value ? "translateY" : "translateX"), k = (e, a) => Math.min(Math.max(e / a, 0), 1), M = (e) => e * e * (3 - 2 * e), S = h(() => Array.from({ length: n.itemCount }, (e, a) => a)), s = () => {
       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),
+      u.value.forEach((l, i) => {
+        const m = l.getBoundingClientRect(), f = o.value ? m.top : m.left, w = e.getBoundingClientRect(), L = f - (o.value ? w.top : w.left), N = Math.min(
+          Math.max(0, (a - L) / a),
           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
+        ), B = k(1 - N - n.scaleStartPercent, 1 - n.scaleStartPercent), _ = M(B), I = 1 + (n.scaleRatio - 1) * _, x = _ * n.translateFactor;
+        let p;
+        const E = Math.min(Math.max(_ || 0, 0), 1);
+        E > 0.6 ? p = 0 : E < 0.4 ? p = 1 : p = (0.6 - E) / 0.2, r[i] = {
+          scale: I,
+          translate: x,
+          opacity: p
         };
       });
-    }, w = () => {
-      t.value && (u.value = Array.from(t.value.querySelectorAll(".slider-item")), g.value.forEach((e) => {
-        n[e] || (n[e] = {
+    }, C = () => {
+      t.value && (u.value = Array.from(t.value.querySelectorAll(".slider-item")), S.value.forEach((e) => {
+        r[e] || (r[e] = {
           scale: 1,
           translate: 0,
           opacity: 1
         });
-      }), Object.keys(n).forEach((e) => {
+      }), Object.keys(r).forEach((e) => {
         const a = Number(e);
-        a >= r.itemCount && delete n[a];
-      }), i());
+        a >= n.itemCount && delete r[a];
+      }), s());
     };
-    x(() => r.itemCount, (e, a) => {
+    b(() => n.itemCount, (e, a) => {
       setTimeout(() => {
-        w();
+        C();
       }, 0);
     }, { immediate: !1 });
-    const m = p(() => {
+    const d = h(() => {
       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];
         if (l) {
-          const c = l.getBoundingClientRect();
-          a = o.value ? c.height : c.width;
+          const i = l.getBoundingClientRect();
+          a = 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 }]),
+    return V(() => {
+      t.value && (t.value.addEventListener("scroll", s), window.addEventListener("resize", s), t.value.addEventListener("touchmove", s, { passive: !0 }), C());
+    }), W(() => {
+      t.value && (t.value.removeEventListener("scroll", s), t.value.removeEventListener("touchmove", s)), window.removeEventListener("resize", s);
+    }), b(v, () => {
+      s();
+    }), (e, a) => (g(), y("div", {
+      class: O(["slider", { horizontal: !o.value }]),
       ref_key: "sliderRef",
       ref: t
     }, [
-      s.spacerEnabled ? (y(), h("div", {
+      j(v) ? (g(), y("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;
-        return y(), h("div", {
+        style: z(o.value ? { height: `${d.value}px`, minHeight: `${d.value}px` } : { width: `${d.value}px`, minWidth: `${d.value}px`, display: "inline-block" })
+      }, null, 4)) : T("", !0),
+      (g(!0), y(q, null, U(S.value, (l) => {
+        var i, m, f;
+        return g(), y("div", {
           key: l,
           class: "slider-item",
-          style: E({
-            zIndex: g.value.length - l
+          style: z({
+            zIndex: S.value.length - l
           })
         }, [
-          j("div", {
+          X("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: z({
+              transform: `${$.value}(${-((i = r[l]) == null ? void 0 : i.translate) || 0}%) scale(${((m = r[l]) == null ? void 0 : m.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)
+            P(e.$slots, `item-${l}`, { index: l }, () => [
+              P(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"]]);
+}), D = (c, n) => {
+  const v = c.__vccOpts || c;
+  for (const [t, u] of n)
+    v[t] = u;
+  return v;
+}, J = /* @__PURE__ */ D(Y, [["__scopeId", "data-v-68d7cf0e"]]);
 export {
-  Y as ScrollSlide
+  J 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(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 z=((m,a)=>{const f=m.__vccOpts||m;for(const[l,u]of a)f[l]=u;return f})(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 a=m,{spacerEnabled:f}=e.toRefs(a),l=e.ref(null),u=e.ref([]),r=e.reactive({}),i=e.computed(()=>a.direction==="vertical"),b=e.computed(()=>i.value?"translateY":"translateX"),w=(t,n)=>Math.min(Math.max(t/n,0),1),B=t=>t*t*(3-2*t),S=e.computed(()=>Array.from({length:a.itemCount},(t,n)=>n)),c=()=>{if(!l.value)return;const t=l.value,n=t[i.value?"clientHeight":"clientWidth"];u.value.forEach((o,d)=>{const p=o.getBoundingClientRect(),v=i.value?p.top:p.left,k=t.getBoundingClientRect(),C=v-(i.value?k.top:k.left),P=Math.min(Math.max(0,(n-C)/n),1),R=w(1-P-a.scaleStartPercent,1-a.scaleStartPercent),g=B(R),$=1+(a.scaleRatio-1)*g,M=g*a.translateFactor;let y;const _=Math.min(Math.max(g||0,0),1);_>.6?y=0:_<.4?y=1:y=(.6-_)/.2,r[d]={scale:$,translate:M,opacity:y}})},E=()=>{l.value&&(u.value=Array.from(l.value.querySelectorAll(".slider-item")),S.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]}),c())};e.watch(()=>a.itemCount,(t,n)=>{setTimeout(()=>{E()},0)},{immediate:!1});const h=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 d=o.getBoundingClientRect();n=i.value?d.height:d.width}}return Math.max(0,t-n)});return e.onMounted(()=>{l.value&&(l.value.addEventListener("scroll",c),window.addEventListener("resize",c),l.value.addEventListener("touchmove",c,{passive:!0}),E())}),e.onUnmounted(()=>{l.value&&(l.value.removeEventListener("scroll",c),l.value.removeEventListener("touchmove",c)),window.removeEventListener("resize",c)}),e.watch(f,()=>{c()}),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["slider",{horizontal:!i.value}]),ref_key:"sliderRef",ref:l},[e.unref(f)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"slider-spacer",style:e.normalizeStyle(i.value?{height:`${h.value}px`,minHeight:`${h.value}px`}:{width:`${h.value}px`,minWidth:`${h.value}px`,display:"inline-block"})},null,4)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(S.value,o=>{var d,p,v;return e.openBlock(),e.createElementBlock("div",{key:o,class:"slider-item",style:e.normalizeStyle({zIndex:S.value.length-o})},[e.createElementVNode("div",{class:"slider-slot",style:e.normalizeStyle({transform:`${b.value}(${-((d=r[o])==null?void 0:d.translate)||0}%) scale(${((p=r[o])==null?void 0:p.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-68d7cf0e"]]);s.ScrollSlide=z,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,28 +1,34 @@
-{
-  "name": "scroll-slides",
-  "version": "0.1.0",
-  "type": "module",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/scroll-slides.umd.cjs",
-  "module": "./dist/scroll-slides.js",
-  "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.1.2",
+  "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"
+  }
 }