From 9928ed56a40fcc1d576ac17a86cf754feb542c9b Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 6 Feb 2021 13:23:45 +0300
Subject: [PATCH] Add pageChange event

---
 README.md                                   | 20 ++++++++++++++++++
 src/components/Carousel/Carousel.svelte     |  6 +++++-
 src/components/Carousel/CarouselView.svelte |  3 +++
 src/docs/Carousel.svx                       | 23 +++++++++++++++++++++
 4 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2330f64..854ebe9 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,26 @@ Import component and styles in App component
 | `autoplayDirection`  | `string`   | `'next'`    | Auto play change direction (`next` or `prev`) |
 | `dots`               | `boolean`  | `true`      | Current page indicator dots                   |
 
+
+# Event
+
+## `pageChange`
+Is dispatched on page change
+
+| Payload field      | Type        | Description                           | 
+|--------------------|-------------|---------------------------------------|
+| `event.detail`     | `number`    | Current page index                    |
+
+```jsx
+<Carousel
+  on:pageChange={
+    event => console.log(`Current page index: ${event.detail}`)
+  }
+>
+  <!-- -->
+</Carousel>
+```
+
 ## Slots
 
 ### `prev` and `next`
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 20f9c7d..421a105 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onDestroy, onMount, tick } from 'svelte'
+  import { onDestroy, onMount, tick, createEventDispatcher } from 'svelte'
   import { createStore } from '../../store'
   import Dots from '../Dots/Dots.svelte'
   import Arrow from '../Arrow/Arrow.svelte'
@@ -11,6 +11,8 @@
   } from '../../utils/event'
   import { getAdjacentIndexes } from '../../utils/page'
 
+  const dispatch = createEventDispatcher()
+
   const directionFnDescription = {
     [NEXT]: showNextPage,
     [PREV]: showPrevPage
@@ -60,6 +62,8 @@
   let store = createStore()
   let currentPageIndex = 0
   $: originalCurrentPageIndex = currentPageIndex - Number(infinite);
+  $: dispatch('pageChange', originalCurrentPageIndex)
+
   let pagesCount = 0
   $: originalPagesCount = Math.max(pagesCount - (infinite ? 2 : 0), 1) // without clones
   let pageWidth = 0
diff --git a/src/components/Carousel/CarouselView.svelte b/src/components/Carousel/CarouselView.svelte
index 2c9c2a4..775fa1c 100644
--- a/src/components/Carousel/CarouselView.svelte
+++ b/src/components/Carousel/CarouselView.svelte
@@ -72,6 +72,9 @@
     {autoplayDuration}
     {autoplayDirection}
     {dots}
+    on:pageChange={
+      event => console.log(`Current page index: ${event.detail}`)
+    }
   >
     {#each colors as { color, text } (color)}
       <div
diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx
index 4230197..e05a1e2 100644
--- a/src/docs/Carousel.svx
+++ b/src/docs/Carousel.svx
@@ -217,6 +217,29 @@ Import component and styles in App component
 
 </div>
 
+# Event
+
+## `pageChange`
+Is dispatched on page change
+
+<div class="table-wrapper">
+
+| Payload field      | Type        | Description                           | 
+|--------------------|-------------|---------------------------------------|
+| `event.detail`     | `number`    | Current page index                    |
+
+</div>
+
+```jsx
+<Carousel
+  on:pageChange={
+    event => console.log(`Current page index: ${event.detail}`)
+  }
+>
+  <!-- -->
+</Carousel>
+```
+
 # Slots
 
 ## `prev` and `next`