fix: update Vue peer dependency version to 3.5.0

.husky/pre-commit

@@ -1,2 +1,3 @@
 pnpm lint
 pnpm test
+pnpm build

docs/api/events.md

@@ -65,7 +65,22 @@ Triggered while the carousel is being dragged, providing live positional data. E
 - `x`: The horizontal drag position.
 - `y`: The vertical drag position.
 
+### @slide-registered
+
+Triggered when a new slide is registered with the carousel. Emits the following data:
+
+- `slide`: The Vue component instance of the registered slide
+- `index`: The index position where the slide was registered
+
+### @slide-unregistered
+
+Triggered when a slide is unregistered (removed) from the carousel. Emits the following data:
+
+- `slide`: The Vue component instance of the unregistered slide
+- `index`: The index position from which the slide was removed
+
 ## Notes
 
 - Events are reactive and can be used to trigger animations, analytics, or other custom behaviors.
+- Registration events (`slide-registered`, `slide-unregistered`) are particularly useful for tracking slide lifecycle and managing external state.
 - Ensure your event handlers account for edge cases, such as looping or rapid navigation.

package.json

@@ -1,6 +1,9 @@
 {
   "name": "vue3-carousel",
   "version": "0.10.0",
+  "description": "A simple carousel component for Vue 3",
+  "author": "Abdelrahman Ismail <dev@ismail9k.com>",
+  "license": "MIT",
   "type": "module",
   "scripts": {
     "build": "rollup -c",
@@ -28,74 +31,72 @@
   "exports": {
     ".": {
       "types": "./dist/carousel.d.ts",
-      "browser": "./dist/carousel.min.js",
-      "require": "./dist/carousel.js",
-      "import": "./dist/carousel.es.js"
+      "import": "./dist/carousel.mjs",
+      "require": "./dist/carousel.cjs",
+      "default": "./dist/carousel.mjs"
     },
     "./dist/carousel": {
       "types": "./dist/carousel.d.ts",
-      "browser": "./dist/carousel.min.js",
-      "require": "./dist/carousel.js",
-      "import": "./dist/carousel.es.js"
-    },
-    "./dist/carousel.min.js": {
-      "require": "./dist/carousel.min.js",
-      "import": "./dist/carousel.es.min.js"
-    },
-    "./dist/*.css": {
-      "require": "./dist/*.css",
-      "import": "./dist/*.css"
+      "import": "./dist/carousel.mjs",
+      "require": "./dist/carousel.cjs",
+      "default": "./dist/carousel.mjs"
     },
+    "./dist/*": "./dist/*",
     "./carousel.css": "./dist/carousel.css"
   },
-  "main": "./dist/carousel.js",
-  "module": "./dist/carousel.es.js",
-  "style": "./dist/carousel.css",
-  "types": "./dist/carousel.d.ts",
-  "unpkg": "./dist/carousel.min.js",
-  "jsdelivr": "./dist/carousel.min.js",
+  "main": "dist/carousel.cjs",
+  "module": "dist/carousel.mjs",
+  "style": "dist/carousel.css",
+  "types": "dist/carousel.d.ts",
+  "unpkg": "dist/carousel.min.js",
+  "jsdelivr": "dist/carousel.min.js",
   "devDependencies": {
-    "@eslint/js": "^9.16.0",
+    "@eslint/js": "^9.17.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.1",
+    "@rollup/plugin-typescript": "^12.1.2",
     "@stackblitz/sdk": "^1.11.0",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
-    "@typescript-eslint/parser": "^8.16.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-v8": "^2.1.8",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-define-config": "^2.1.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-vue": "^9.32.0",
-    "globals": "^15.13.0",
+    "globals": "^15.14.0",
     "husky": "^9.1.7",
     "jsdom": "^25.0.1",
-    "prettier": "^3.4.1",
-    "rollup": "^4.28.0",
+    "prettier": "^3.4.2",
+    "rollup": "^4.29.1",
     "rollup-plugin-css-only": "^4.5.2",
     "rollup-plugin-delete": "^2.1.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-typescript-paths": "^1.5.0",
     "tslib": "^2.8.1",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.16.0",
-    "vite": "^6",
+    "typescript-eslint": "^8.18.1",
+    "vite": "^6.0.5",
     "vitepress": "^1.5.0",
     "vitest": "^2.1.8",
-    "vue": "^3.2.0"
+    "vue": "^3.5.0"
   },
   "peerDependencies": {
-    "vue": "^3.2.0"
+    "vue": "^3.5.0"
   },
   "browserslist": [
     "> 0.5%",
     "last 2 versions",
     "not dead",
     "not IE 11"
   ],
-  "license": "MIT"
+  "keywords": [
+    "vue",
+    "vue3",
+    "carousel",
+    "slider",
+    "vue3-carousel",
+    "vue3-slider"
+  ]
 }

playground/App.vue

@@ -12,18 +12,25 @@ import { DIR_MAP, SNAP_ALIGN_OPTIONS, BREAKPOINT_MODE_OPTIONS } from '@/shared/c
 
 const carouselWrapper = ref<HTMLDivElement | null>(null)
 
-const numItems = 10
 const breakpoints = reactive({
   100: { itemsToShow: 1 },
   200: { itemsToShow: 2 },
   400: { itemsToShow: 3 },
   600: { itemsToShow: 4 },
 })
+
+const defaultSlides = [
+  { id: 1, title: 'Slide 1', description: 'First slide description' },
+  { id: 2, title: 'Slide 2', description: 'Second slide description' },
+  { id: 3, title: 'Slide 3', description: 'Third slide description' },
+  { id: 4, title: 'Slide 4', description: 'Fourth slide description' },
+  { id: 5, title: 'Slide 5', description: 'Fifth slide description' },
+]
 const defaultConfig = {
   currentSlide: 0,
   snapAlign: 'center',
   itemsToScroll: 1,
-  itemsToShow: 1,
+  itemsToShow: 2,
   autoplay: null,
   wrapAround: true,
   height: '200',
@@ -35,6 +42,7 @@ const defaultConfig = {
 }
 
 const config = reactive({ ...defaultConfig })
+const items = reactive([...defaultSlides])
 
 const getConfigValue = (path: string) => config[path]
 
@@ -128,11 +136,76 @@ const handleReset = () => {
 
   // Reset config values
   Object.entries(defaultConfig).forEach(([key, value]) => setConfigValue(key, value))
+  // Reset items
+  items.splice(0, items.length, ...defaultSlides)
 }
 
 const handelButtonClick = () => {
   alert('Button clicked')
 }
+
+const getRandomInt = (min: number, max: number): number => {
+  min = Math.ceil(min)
+  max = Math.floor(max)
+  return Math.floor(Math.random() * (max - min)) + min
+}
+
+const handleAddingASlide = () => {
+  const newId = items.length + 1
+  const randomPosition = getRandomInt(0, newId)
+  const newSlide = {
+    id: newId,
+    title: `Dynamic Slide ${newId}`,
+    description: `Dynamically inserted at index ${randomPosition}`,
+    color: '#2fa265',
+  }
+  items.splice(randomPosition, 0, newSlide)
+}
+
+const handleRemovingASlide = () => {
+  if (items.length > 1) {
+    const randomPosition = getRandomInt(0, items.length)
+    const removedSlide = items[randomPosition]
+    items.splice(randomPosition, 1)
+    if (config.currentSlide >= items.length) {
+      config.currentSlide = items.length - 1
+    }
+  }
+}
+
+const events = [
+  'before-init',
+  'init',
+  'slide-start',
+  'slide-end',
+  'loop',
+  'drag',
+  'slide-registered',
+  'slide-unregistered',
+]
+
+const lastEvent = ref('')
+const lastEventData = ref<any>(null)
+
+const getSerializableData = (data: any): any => {
+  if (!data) return null
+
+  // For slide-registered and slide-unregistered events, only return relevant info
+  if (data.slide) {
+    return {
+      ...data,
+      slide: '[Complex Object]',
+    }
+  }
+
+  return data
+}
+
+const handleEvent = (eventName: string) => (data?: any) => {
+  lastEvent.value = eventName
+  lastEventData.value = getSerializableData(data)
+  console.log(`Event: ${eventName}`, data)
+}
 </script>
 
 <template>
@@ -143,10 +216,17 @@ const handelButtonClick = () => {
           v-model="config.currentSlide"
           v-bind="config"
           :breakpoints="config.useBreakpoints ? breakpoints : null"
+          v-on="Object.fromEntries(events.map((e) => [e, handleEvent(e)]))"
         >
-          <CarouselSlide v-for="i in numItems" :key="i" v-slot="{ isActive, isClone }">
-            <div class="carousel-item">
-              {{ i }}<button @click="handelButtonClick">This is a button</button>
+          <CarouselSlide v-for="(item, index) in items" :key="item.id" :index="index">
+            <div
+              class="carousel-item"
+              :key="item.id"
+              :style="{ backgroundColor: `${item.color}` }"
+            >
+              <h3>{{ item.title }}</h3>
+              <p>{{ item.description }}</p>
+              <button @click="handelButtonClick">This is a button</button>
             </div>
           </CarouselSlide>
           <template #addons>
@@ -155,6 +235,10 @@ const handelButtonClick = () => {
           </template>
         </VueCarousel>
       </div>
+      <div v-if="lastEvent" class="event-debug">
+        Last Event: {{ lastEvent }}
+        <pre v-if="lastEventData">{{ JSON.stringify(lastEventData, null, 2) }}</pre>
+      </div>
     </main>
 
     <aside class="config-panel">
@@ -189,7 +273,15 @@ const handelButtonClick = () => {
           />
         </label>
       </div>
-      <button @click="handleReset" class="reset-button">Reset Config</button>
+      <div class="config-panel-buttons-row">
+        <button @click="handleAddingASlide" class="config-panel-button">
+          Add a new slide
+        </button>
+        <button @click="handleRemovingASlide" class="config-panel-button">
+          Remove a new slide
+        </button>
+        <button @click="handleReset" class="config-panel-button">Reset</button>
+      </div>
     </aside>
   </div>
 </template>
@@ -284,7 +376,7 @@ select {
   width: auto;
 }
 
-.config-panel button {
+.config-panel-button {
   margin-top: 10px;
   padding: 8px 16px;
   border-radius: 4px;
@@ -295,8 +387,8 @@ select {
   transition: opacity 0.2s;
 }
 
-.config-panel button:hover {
-  background: rgba(200, 0, 0, 0.9);
+.config-panel-button:hover {
+  background: var(--brand-color);
 }
 
 @keyframes pop-in {
@@ -340,4 +432,41 @@ select {
   justify-content: center;
   align-items: center;
 }
+
+.carousel-item h3 {
+  margin: 0 0 10px;
+}
+
+.carousel-item p {
+  margin: 0 0 15px;
+  font-size: 16px;
+  text-align: center;
+  padding: 0 20px;
+}
+
+.event-debug {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 10px;
+  border-radius: 4px;
+  font-size: 0.9em;
+  max-width: 300px;
+  overflow: auto;
+}
+
+.event-debug pre {
+  margin: 5px 0 0;
+  font-size: 0.8em;
+  white-space: pre-wrap;
+}
+
+.carousel__slide--active .carousel-item {
+  border: 2px solid red;
+}
+.config-panel-buttons-row {
+  display: flex;
+  flex-direction: column;
+}
 </style>