scroll-slides 0.1.2 → 0.2.0

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

@@ -10,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: {

package/dist/scroll-slides.css

@@ -1 +1 @@
-.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}
+.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,5 +1,5 @@
-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({
+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: {
@@ -31,99 +31,117 @@ const Y = /* @__PURE__ */ A({
   },
   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, 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),
+      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 = k(1 - N - n.scaleStartPercent, 1 - n.scaleStartPercent), _ = M(B), I = 1 + (n.scaleRatio - 1) * _, x = _ * n.translateFactor;
+        ), 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(_ || 0, 0), 1);
+        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: I,
-          translate: x,
+          scale: W,
+          translate: O,
           opacity: p
         };
       });
-    }, C = () => {
-      t.value && (u.value = Array.from(t.value.querySelectorAll(".slider-item")), S.value.forEach((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(r).forEach((e) => {
-        const a = Number(e);
-        a >= n.itemCount && delete r[a];
+        const t = Number(e);
+        t >= n.itemCount && delete r[t];
       }), s());
     };
-    b(() => n.itemCount, (e, a) => {
+    L(() => n.itemCount, (e, t) => {
       setTimeout(() => {
-        C();
+        $();
       }, 0);
     }, { immediate: !1 });
-    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];
+    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 i = l.getBoundingClientRect();
-          a = o.value ? i.height : i.width;
+          t = o.value ? i.height : i.width;
         }
       }
-      return Math.max(0, e - a);
-    });
-    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 }]),
+      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
     }, [
-      j(v) ? (g(), y("div", {
+      K(w) ? (y(), h("div", {
         key: 0,
         class: "slider-spacer",
-        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", {
+        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: z({
-            zIndex: S.value.length - l
+          style: P({
+            zIndex: z.value.length - l
           })
         }, [
-          X("div", {
+          ee("div", {
             class: "slider-slot",
-            style: z({
-              transform: `${$.value}(${-((i = r[l]) == null ? void 0 : i.translate) || 0}%) scale(${((m = r[l]) == null ? void 0 : m.scale) || 1})`,
+            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
             })
           }, [
-            P(e.$slots, `item-${l}`, { index: l }, () => [
-              P(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));
   }
-}), 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"]]);
+}), 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 {
-  J 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 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"})});
+(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,6 +1,6 @@
 {
   "name": "scroll-slides",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "files": [
@@ -17,6 +17,7 @@
   "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"
   },