scroll-slides 0.1.2 → 0.3.0

package/README.md

@@ -1,11 +1,367 @@
 # scroll-slides
 
-## Install
+English | [简体中文](./README_zh.md)
+
+A smooth and customizable scroll-based slide animation component for Vue 3. Create engaging scroll experiences with dynamic scaling, translation, and occlusion effects.
+
+![npm version](https://img.shields.io/npm/v/scroll-slides.svg)
+![license](https://img.shields.io/npm/l/scroll-slides.svg)
+
+## ✨ Features
+
+- 🎯 **Smooth Scroll Animations** - Transform items as they scroll with elegant scaling and translation effects
+- 📱 **Direction Support** - Both vertical and horizontal scrolling modes
+- 🎨 **Highly Customizable** - Fine-tune animation parameters to match your design
+- 🔄 **Dynamic Item Management** - Add or remove items on the fly
+- 📐 **Flexible Templates** - Use generic or per-item slot templates
+- 🚀 **Performance Optimized** - Efficient event handling and DOM updates
+- 💅 **TypeScript Support** - Full type definitions included
+- 🎭 **Occlusion Effects** - Optional lower item clipping for depth perception
+
+## 📦 Installation
 
 ```bash
 npm install scroll-slides
+```
 
+```bash
 yarn add scroll-slides
+```
 
+```bash
 pnpm add scroll-slides
 ```
+
+## 🚀 Quick Start
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ScrollSlide } from 'scroll-slides';
+</script>
+
+<template>
+  <ScrollSlide
+    direction="vertical"
+    :item-count="10"
+    style="height: 600px; overflow-y: auto;"
+  >
+    <template #item="{ index }">
+      <div class="slide-item">
+        Slide {{ index + 1 }}
+      </div>
+    </template>
+  </ScrollSlide>
+</template>
+
+<style scoped>
+.slide-item {
+  width: 100%;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 15px;
+  color: white;
+  margin-bottom: 10px;
+}
+</style>
+```
+
+### Horizontal Scrolling
+
+```vue
+<template>
+  <ScrollSlide
+    direction="horizontal"
+    :item-count="15"
+    :scale-start-percent="0.95"
+    :translate-factor="50"
+    :spacer-enabled="true"
+    style="width: 100%; height: 200px; overflow-x: auto;"
+  >
+    <template #item="{ index }">
+      <div class="horizontal-item">
+        Item {{ index + 1 }}
+      </div>
+    </template>
+  </ScrollSlide>
+</template>
+
+<style scoped>
+.horizontal-item {
+  width: 200px;
+  height: 120px;
+  margin-right: 15px;
+  background: #4CAF50;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+}
+</style>
+```
+
+### Independent Templates
+
+You can define unique content for each item using indexed slots:
+
+```vue
+<template>
+  <ScrollSlide direction="vertical" :item-count="3">
+    <template #item-0>
+      <div class="custom-item">🌸 First Item</div>
+    </template>
+    
+    <template #item-1>
+      <div class="custom-item">🎨 Second Item</div>
+    </template>
+    
+    <template #item-2>
+      <div class="custom-item">🚀 Third Item</div>
+    </template>
+  </ScrollSlide>
+</template>
+```
+
+## 📖 API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `direction` | `'vertical' \| 'horizontal'` | `'vertical'` | Scrolling direction |
+| `itemCount` | `number` | `0` | Total number of items in the list |
+| `scaleRatio` | `number` | `0.7` | Final scale of the item when it slides out (0-1) |
+| `scaleStartPercent` | `number` | `0.8` | Threshold percentage for scaling to start (0-1) |
+| `translateFactor` | `number` | `100` | Adjusts the displacement offset during slide-out |
+| `spacerEnabled` | `boolean` | `false` | Adds a spacer at start to allow first item to scroll out |
+| `occludeLowerItems` | `boolean` | `false` | Applies clip-path to prevent visual overlap |
+
+### Slots
+
+#### Default Item Slot
+
+Used when no specific item slot is defined:
+
+```vue
+<template #item="{ index }">
+  <!-- Your content here -->
+  <!-- index: number - The zero-based index of the current item -->
+</template>
+```
+
+#### Indexed Item Slots
+
+Define unique content for specific items:
+
+```vue
+<template #item-0>
+  <!-- Content for first item -->
+</template>
+
+<template #item-1>
+  <!-- Content for second item -->
+</template>
+```
+
+**Note:** Indexed slots take priority over the generic `#item` slot.
+
+#### Spacer Slot
+
+Customize the spacer element (when `spacerEnabled` is `true`):
+
+```vue
+<template #spacer="{ size }">
+  <!-- size: number - The calculated size of the spacer in pixels -->
+  <div>Custom Spacer Content</div>
+</template>
+```
+
+## 🎨 Customization Examples
+
+### Subtle Animation
+
+```vue
+<ScrollSlide
+  :scale-ratio="0.9"
+  :scale-start-percent="0.95"
+  :translate-factor="20"
+  :item-count="10"
+>
+  <template #item="{ index }">
+    <!-- Your content -->
+  </template>
+</ScrollSlide>
+```
+
+### Dramatic Effect
+
+```vue
+<ScrollSlide
+  :scale-ratio="0.5"
+  :scale-start-percent="0.7"
+  :translate-factor="150"
+  :occlude-lower-items="true"
+  :item-count="10"
+>
+  <template #item="{ index }">
+    <!-- Your content -->
+  </template>
+</ScrollSlide>
+```
+
+### Horizontal Card Carousel
+
+```vue
+<ScrollSlide
+  direction="horizontal"
+  :item-count="20"
+  :scale-ratio="0.85"
+  :scale-start-percent="0.9"
+  :translate-factor="30"
+  :spacer-enabled="true"
+  style="width: 100%; height: 250px; overflow-x: auto;"
+>
+  <template #item="{ index }">
+    <div class="card">
+      Card {{ index + 1 }}
+    </div>
+  </template>
+</ScrollSlide>
+```
+
+## 🔧 Advanced Usage
+
+### Dynamic Item Count
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { ScrollSlide } from 'scroll-slides';
+
+const items = ref([1, 2, 3, 4, 5]);
+
+const addItem = () => {
+  items.value.push(items.value.length + 1);
+};
+
+const removeItem = () => {
+  items.value.pop();
+};
+</script>
+
+<template>
+  <div>
+    <button @click="addItem">Add Item</button>
+    <button @click="removeItem">Remove Item</button>
+    
+    <ScrollSlide :item-count="items.length">
+      <template #item="{ index }">
+        <div>Item {{ items[index] }}</div>
+      </template>
+    </ScrollSlide>
+  </div>
+</template>
+```
+
+### Responsive Configuration
+
+```vue
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ScrollSlide } from 'scroll-slides';
+
+const windowWidth = ref(window.innerWidth);
+
+const direction = computed(() => 
+  windowWidth.value < 768 ? 'vertical' : 'horizontal'
+);
+
+const updateWidth = () => {
+  windowWidth.value = window.innerWidth;
+};
+
+onMounted(() => window.addEventListener('resize', updateWidth));
+onUnmounted(() => window.removeEventListener('resize', updateWidth));
+</script>
+
+<template>
+  <ScrollSlide
+    :direction="direction"
+    :item-count="10"
+    :style="direction === 'vertical' 
+      ? 'height: 500px; overflow-y: auto;' 
+      : 'width: 100%; overflow-x: auto;'"
+  >
+    <template #item="{ index }">
+      <!-- Responsive content -->
+    </template>
+  </ScrollSlide>
+</template>
+```
+
+## 💡 Tips & Best Practices
+
+1. **Container Styling**: Always set explicit dimensions and overflow properties on the ScrollSlide container:
+   ```vue
+   <ScrollSlide style="height: 600px; overflow-y: auto;">
+   ```
+
+2. **Item Spacing**: Add margins to your item content, not the slot wrapper:
+   ```css
+   .my-item {
+     margin-bottom: 10px; /* for vertical */
+     margin-right: 10px;  /* for horizontal */
+   }
+   ```
+
+3. **Performance**: For large lists, consider using virtual scrolling techniques in combination with scroll-slides.
+
+4. **Z-Index**: Items are automatically z-indexed in reverse order (first item on top). Plan your designs accordingly.
+
+5. **Spacer Usage**: Enable `spacerEnabled` when you want the first item to be able to scroll to the center/top of the viewport.
+
+## 🛠️ Development
+
+```bash
+# Clone the repository
+git clone https://github.com/agoudbg/scroll-slides.git
+
+# Install dependencies
+pnpm install
+
+# Run development server
+pnpm dev
+
+# Build library
+pnpm build
+
+# Build demo
+pnpm build:demo
+```
+
+## 📄 License
+
+MIT License - see [LICENSE](LICENSE) file for details
+
+## 🤝 Contributing
+
+Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/agoudbg/scroll-slides/issues).
+
+## 👤 Author
+
+**agoudbg**
+- GitHub: [@agoudbg](https://github.com/agoudbg)
+- Email: agoudbg@gmail.com
+
+## 🌟 Show Your Support
+
+Give a ⭐️ if this project helped you!
+
+---
+
+Made with ❤️ using Vue 3 and TypeScript

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

@@ -1,144 +1,142 @@
-declare const spacerEnabled: import("vue").Ref<boolean, boolean>;
-declare const sliderRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
-declare const itemStates: {
-    [key: number]: {
-        scale: number;
-        translate: number;
-        opacity: number;
-    };
-};
-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 __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;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_4>]?: (props: typeof __VLS_5) => any;
 } & {
-    item?: (props: typeof __VLS_5) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    spacer?: (props: typeof __VLS_1) => any;
+} & {
+    item?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /**
+     * Scrolling direction
+     * @default 'vertical'
+     * @values 'vertical', 'horizontal'
+     */
     direction: {
         type: StringConstructor;
         default: string;
         validator: (value: string) => boolean;
     };
+    /**
+     * Total number of items in the list
+     * @default 0
+     */
     itemCount: {
         type: NumberConstructor;
         default: number;
     };
+    /**
+     * Scaling ratio
+     * The final scale of the item when it slides out
+     * @default 0.7
+     */
     scaleRatio: {
         type: NumberConstructor;
         default: number;
     };
+    /**
+     * Threshold percentage for scaling to start
+     * Range 0-1, defines where in the viewport the scaling animation begins
+     * @default 0.8
+     */
     scaleStartPercent: {
         type: NumberConstructor;
         default: number;
     };
+    /**
+     * Translation factor
+     * Adjusts the displacement offset during the slide-out effect
+     * @default 100
+     */
     translateFactor: {
         type: NumberConstructor;
         default: number;
     };
+    /**
+     * Whether to enable the spacer element
+     * If true, adds a spacer at the start to allow the first item to scroll out of view
+     * @default false
+     */
     spacerEnabled: {
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {
-    spacerEnabled: typeof spacerEnabled;
-    sliderRef: typeof sliderRef;
-    itemStates: typeof itemStates;
-    isVertical: typeof isVertical;
-    transformProperty: typeof transformProperty;
-    itemIndices: typeof itemIndices;
-    spacerSize: typeof spacerSize;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    direction: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    itemCount: {
-        type: NumberConstructor;
-        default: number;
-    };
-    scaleRatio: {
-        type: NumberConstructor;
-        default: number;
-    };
-    scaleStartPercent: {
-        type: NumberConstructor;
-        default: number;
-    };
-    translateFactor: {
-        type: NumberConstructor;
-        default: number;
-    };
-    spacerEnabled: {
+    /**
+     * Whether to occlude lower items
+     * If true, applies a clip-path to prevent visual overlap between scaled items
+     * @default false
+     */
+    occludeLowerItems: {
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & Readonly<{}>, {
-    direction: string;
-    itemCount: number;
-    scaleRatio: number;
-    scaleStartPercent: number;
-    translateFactor: number;
-    spacerEnabled: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Scrolling direction
+     * @default 'vertical'
+     * @values 'vertical', 'horizontal'
+     */
     direction: {
         type: StringConstructor;
         default: string;
         validator: (value: string) => boolean;
     };
+    /**
+     * Total number of items in the list
+     * @default 0
+     */
     itemCount: {
         type: NumberConstructor;
         default: number;
     };
+    /**
+     * Scaling ratio
+     * The final scale of the item when it slides out
+     * @default 0.7
+     */
     scaleRatio: {
         type: NumberConstructor;
         default: number;
     };
+    /**
+     * Threshold percentage for scaling to start
+     * Range 0-1, defines where in the viewport the scaling animation begins
+     * @default 0.8
+     */
     scaleStartPercent: {
         type: NumberConstructor;
         default: number;
     };
+    /**
+     * Translation factor
+     * Adjusts the displacement offset during the slide-out effect
+     * @default 100
+     */
     translateFactor: {
         type: NumberConstructor;
         default: number;
     };
+    /**
+     * Whether to enable the spacer element
+     * If true, adds a spacer at the start to allow the first item to scroll out of view
+     * @default false
+     */
     spacerEnabled: {
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    direction: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    itemCount: {
-        type: NumberConstructor;
-        default: number;
-    };
-    scaleRatio: {
-        type: NumberConstructor;
-        default: number;
-    };
-    scaleStartPercent: {
-        type: NumberConstructor;
-        default: number;
-    };
-    translateFactor: {
-        type: NumberConstructor;
-        default: number;
-    };
-    spacerEnabled: {
+    /**
+     * Whether to occlude lower items
+     * If true, applies a clip-path to prevent visual overlap between scaled items
+     * @default false
+     */
+    occludeLowerItems: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -149,6 +147,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     scaleStartPercent: number;
     translateFactor: number;
     spacerEnabled: boolean;
+    occludeLowerItems: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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-30dc45e5]{position:relative;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.slider.horizontal[data-v-30dc45e5]{display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.slider-item[data-v-30dc45e5]{position:relative}.slider-item .slider-slot[data-v-30dc45e5]{position:relative;transition:transform .04s}.horizontal .slider-item[data-v-30dc45e5]{display:inline-block;vertical-align:middle;transform-origin:center right}.slider-spacer[data-v-30dc45e5]{width:100%;height:100%;pointer-events:none}

package/dist/scroll-slides.js

@@ -1,129 +1,204 @@
-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 te, toRefs as ae, ref as $, reactive as le, computed as I, watch as W, onMounted as oe, nextTick as x, onUnmounted as se, createElementBlock as S, openBlock as P, normalizeClass as ne, createCommentVNode as re, unref as ce, normalizeStyle as L, renderSlot as b, Fragment as ie, renderList as ue, createElementVNode as ve } from "vue";
+const de = /* @__PURE__ */ te({
   __name: "ScrollSlide",
   props: {
+    /**
+     * Scrolling direction
+     * @default 'vertical'
+     * @values 'vertical', 'horizontal'
+     */
     direction: {
       type: String,
       default: "vertical",
       // 'vertical' or 'horizontal'
-      validator: (c) => ["vertical", "horizontal"].includes(c)
+      validator: (u) => ["vertical", "horizontal"].includes(u)
     },
+    /**
+     * Total number of items in the list
+     * @default 0
+     */
     itemCount: {
       type: Number,
       default: 0
     },
+    /**
+     * Scaling ratio
+     * The final scale of the item when it slides out
+     * @default 0.7
+     */
     scaleRatio: {
       type: Number,
       default: 0.7
     },
+    /**
+     * Threshold percentage for scaling to start
+     * Range 0-1, defines where in the viewport the scaling animation begins
+     * @default 0.8
+     */
     scaleStartPercent: {
       type: Number,
       default: 0.8
     },
+    /**
+     * Translation factor
+     * Adjusts the displacement offset during the slide-out effect
+     * @default 100
+     */
     translateFactor: {
       type: Number,
       default: 100
     },
+    /**
+     * Whether to enable the spacer element
+     * If true, adds a spacer at the start to allow the first item to scroll out of view
+     * @default false
+     */
     spacerEnabled: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Whether to occlude lower items
+     * If true, applies a clip-path to prevent visual overlap between scaled items
+     * @default false
+     */
+    occludeLowerItems: {
+      type: Boolean,
+      default: !1
     }
   },
-  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),
+  setup(u) {
+    const l = u, {
+      direction: y,
+      itemCount: z,
+      scaleRatio: w,
+      scaleStartPercent: q,
+      translateFactor: U,
+      spacerEnabled: k,
+      occludeLowerItems: j
+    } = ae(l), o = $(null), g = $([]), r = le({});
+    let v = null;
+    const s = I(() => l.direction === "vertical"), X = I(() => s.value ? "translateY" : "translateX"), Y = (e, t) => Math.min(Math.max(e / t, 0), 1), D = (e) => e * e * (3 - 2 * e), E = I(() => Array.from({ length: l.itemCount }, (e, t) => t)), n = () => {
+      G(), B();
+    }, G = () => {
+      if (!o.value) return;
+      const e = o.value, t = e[s.value ? "clientHeight" : "clientWidth"], a = e[s.value ? "scrollTop" : "scrollLeft"];
+      let c = -1 / 0, f = 0;
+      g.value.forEach((i, m) => {
+        const N = i.getBoundingClientRect(), J = s.value ? N.top : N.left, F = e.getBoundingClientRect(), K = J - (s.value ? F.top : F.left), Q = Math.min(
+          Math.max(0, (t - K) / t),
           1
-        ), 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
+        ), Z = Y(1 - Q - l.scaleStartPercent, 1 - l.scaleStartPercent), C = D(Z), p = 1 + (l.scaleRatio - 1) * C, T = C * l.translateFactor;
+        let h;
+        const R = Math.min(Math.max(C || 0, 0), 1);
+        R > 0.6 ? h = 0 : R < 0.4 ? h = 1 : h = (0.6 - R) / 0.2;
+        let _;
+        const A = s.value ? i.offsetHeight : i.offsetWidth, H = (s.value ? i.offsetTop : i.offsetLeft) - a + A * (0.5 - T / 100 - p / 2), ee = H + A * p;
+        if (l.occludeLowerItems && m > 0 && f > 0.05) {
+          const O = c - H;
+          if (O > 0.5 && p > 0.01) {
+            const V = O / p;
+            s.value ? _ = `inset(${V}px 0 0 0)` : _ = `inset(0 0 0 ${V}px)`;
+          }
+        }
+        c = ee, f = h, r[m] = {
+          scale: p,
+          translate: T,
+          opacity: h,
+          clipPath: _
         };
       });
-    }, C = () => {
-      t.value && (u.value = Array.from(t.value.querySelectorAll(".slider-item")), S.value.forEach((e) => {
+    }, M = () => {
+      o.value && (g.value = Array.from(o.value.querySelectorAll(".slider-item")), E.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];
-      }), s());
+        const t = Number(e);
+        t >= l.itemCount && delete r[t];
+      }), n());
     };
-    b(() => n.itemCount, (e, a) => {
+    W(() => l.itemCount, (e, t) => {
       setTimeout(() => {
-        C();
+        M();
       }, 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];
-        if (l) {
-          const i = l.getBoundingClientRect();
-          a = o.value ? i.height : i.width;
+    const d = $(0), B = () => {
+      if (!o.value) return 0;
+      const e = o.value[s.value ? "clientHeight" : "clientWidth"];
+      let t = 0;
+      if (g.value.length > 0) {
+        const a = g.value[0];
+        if (a) {
+          const c = a.getBoundingClientRect();
+          t = s.value ? c.height : c.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 }]),
+      d.value = Math.max(0, e - t);
+    };
+    return B(), oe(() => {
+      if (!o.value) return;
+      const e = o.value;
+      v = new ResizeObserver(() => n()), v.observe(e), e.addEventListener("scroll", n), window.addEventListener("resize", n), e.addEventListener("touchmove", n, { passive: !0 }), M(), x(() => requestAnimationFrame(n));
+    }), se(() => {
+      v == null || v.disconnect(), v = null, o.value && (o.value.removeEventListener("scroll", n), o.value.removeEventListener("touchmove", n)), window.removeEventListener("resize", n);
+    }), W([
+      y,
+      z,
+      w,
+      q,
+      U,
+      k,
+      j
+    ], () => {
+      console.log("Props changed, reinitializing items"), x(() => {
+        n();
+      });
+    }), (e, t) => (P(), S("div", {
+      class: ne(["slider", { horizontal: !s.value }]),
       ref_key: "sliderRef",
-      ref: t
+      ref: o
     }, [
-      j(v) ? (g(), y("div", {
+      ce(k) ? (P(), S("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", {
-          key: l,
+        style: L(s.value ? { height: `${d.value}px`, minHeight: `${d.value}px` } : { width: `${d.value}px`, minWidth: `${d.value}px`, display: "inline-block" })
+      }, [
+        b(e.$slots, "spacer", { size: d.value }, void 0, !0)
+      ], 4)) : re("", !0),
+      (P(!0), S(ie, null, ue(E.value, (a) => {
+        var c, f, i, m;
+        return P(), S("div", {
+          key: a,
           class: "slider-item",
-          style: z({
-            zIndex: S.value.length - l
+          style: L({
+            zIndex: E.value.length - a
           })
         }, [
-          X("div", {
+          ve("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})`,
-              opacity: (f = r[l]) == null ? void 0 : f.opacity
+            style: L({
+              transform: `${X.value}(${-((c = r[a]) == null ? void 0 : c.translate) || 0}%) scale(${((f = r[a]) == null ? void 0 : f.scale) || 1})`,
+              opacity: (i = r[a]) == null ? void 0 : i.opacity,
+              clipPath: (m = r[a]) == null ? void 0 : m.clipPath
             })
           }, [
-            P(e.$slots, `item-${l}`, { index: l }, () => [
-              P(e.$slots, "item", { index: l }, void 0, !0)
+            b(e.$slots, `item-${a}`, { index: a }, () => [
+              b(e.$slots, "item", { index: a }, 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"]]);
+}), fe = (u, l) => {
+  const y = u.__vccOpts || u;
+  for (const [z, w] of l)
+    y[z] = w;
+  return y;
+}, ye = /* @__PURE__ */ fe(de, [["__scopeId", "data-v-30dc45e5"]]);
 export {
-  J as ScrollSlide
+  ye 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(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.ScrollSlide={},f.Vue))})(this,(function(f,e){"use strict";const F=((u,n)=>{const g=u.__vccOpts||u;for(const[z,E]of n)g[z]=E;return g})(e.defineComponent({__name:"ScrollSlide",props:{direction:{type:String,default:"vertical",validator:u=>["vertical","horizontal"].includes(u)},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},occludeLowerItems:{type:Boolean,default:!1}},setup(u){const n=u,{direction:g,itemCount:z,scaleRatio:E,scaleStartPercent:O,translateFactor:V,spacerEnabled:B,occludeLowerItems:A}=e.toRefs(n),a=e.ref(null),P=e.ref([]),c=e.reactive({});let m=null;const s=e.computed(()=>n.direction==="vertical"),H=e.computed(()=>s.value?"translateY":"translateX"),W=(t,l)=>Math.min(Math.max(t/l,0),1),j=t=>t*t*(3-2*t),_=e.computed(()=>Array.from({length:n.itemCount},(t,l)=>l)),r=()=>{q(),R()},q=()=>{if(!a.value)return;const t=a.value,l=t[s.value?"clientHeight":"clientWidth"],o=t[s.value?"scrollTop":"scrollLeft"];let i=-1/0,h=0;P.value.forEach((d,v)=>{const $=d.getBoundingClientRect(),U=s.value?$.top:$.left,I=t.getBoundingClientRect(),X=U-(s.value?I.top:I.left),Y=Math.min(Math.max(0,(l-X)/l),1),D=W(1-Y-n.scaleStartPercent,1-n.scaleStartPercent),k=j(D),y=1+(n.scaleRatio-1)*k,L=k*n.translateFactor;let S;const w=Math.min(Math.max(k||0,0),1);w>.6?S=0:w<.4?S=1:S=(.6-w)/.2;let b;const M=s.value?d.offsetHeight:d.offsetWidth,T=(s.value?d.offsetTop:d.offsetLeft)-o+M*(.5-L/100-y/2),G=T+M*y;if(n.occludeLowerItems&&v>0&&h>.05){const N=i-T;if(N>.5&&y>.01){const x=N/y;s.value?b=`inset(${x}px 0 0 0)`:b=`inset(0 0 0 ${x}px)`}}i=G,h=S,c[v]={scale:y,translate:L,opacity:S,clipPath:b}})},C=()=>{a.value&&(P.value=Array.from(a.value.querySelectorAll(".slider-item")),_.value.forEach(t=>{c[t]||(c[t]={scale:1,translate:0,opacity:1})}),Object.keys(c).forEach(t=>{const l=Number(t);l>=n.itemCount&&delete c[l]}),r())};e.watch(()=>n.itemCount,(t,l)=>{setTimeout(()=>{C()},0)},{immediate:!1});const p=e.ref(0),R=()=>{if(!a.value)return 0;const t=a.value[s.value?"clientHeight":"clientWidth"];let l=0;if(P.value.length>0){const o=P.value[0];if(o){const i=o.getBoundingClientRect();l=s.value?i.height:i.width}}p.value=Math.max(0,t-l)};return R(),e.onMounted(()=>{if(!a.value)return;const t=a.value;m=new ResizeObserver(()=>r()),m.observe(t),t.addEventListener("scroll",r),window.addEventListener("resize",r),t.addEventListener("touchmove",r,{passive:!0}),C(),e.nextTick(()=>requestAnimationFrame(r))}),e.onUnmounted(()=>{m==null||m.disconnect(),m=null,a.value&&(a.value.removeEventListener("scroll",r),a.value.removeEventListener("touchmove",r)),window.removeEventListener("resize",r)}),e.watch([g,z,E,O,V,B,A],()=>{console.log("Props changed, reinitializing items"),e.nextTick(()=>{r()})}),(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["slider",{horizontal:!s.value}]),ref_key:"sliderRef",ref:a},[e.unref(B)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"slider-spacer",style:e.normalizeStyle(s.value?{height:`${p.value}px`,minHeight:`${p.value}px`}:{width:`${p.value}px`,minWidth:`${p.value}px`,display:"inline-block"})},[e.renderSlot(t.$slots,"spacer",{size:p.value},void 0,!0)],4)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(_.value,o=>{var i,h,d,v;return e.openBlock(),e.createElementBlock("div",{key:o,class:"slider-item",style:e.normalizeStyle({zIndex:_.value.length-o})},[e.createElementVNode("div",{class:"slider-slot",style:e.normalizeStyle({transform:`${H.value}(${-((i=c[o])==null?void 0:i.translate)||0}%) scale(${((h=c[o])==null?void 0:h.scale)||1})`,opacity:(d=c[o])==null?void 0:d.opacity,clipPath:(v=c[o])==null?void 0:v.clipPath})},[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-30dc45e5"]]);f.ScrollSlide=F,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,34 +1,42 @@
-{
-  "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"
-  }
+{
+  "name": "scroll-slides",
+  "version": "0.3.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"
+  },
+  "license": "MIT",
+  "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": {
+    "scroll-slides": "link:..\\..\\..\\AppData\\Local\\pnpm\\global\\5\\node_modules\\scroll-slides",
+    "vue": "^3.5.26"
+  },
+  "devDependencies": {
+    "@types/node": "^22.19.7",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.7.3",
+    "vite": "^6.4.1",
+    "vue-tsc": "^2.2.12"
+  },
+  "pnpm": {
+    "overrides": {
+      "scroll-slides": "link:../../../AppData/Local/pnpm/global/5/node_modules/scroll-slides"
+    }
+  }
 }

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>