Merge pull request #469 from ismail9k/refactor/enhancments

Refactor/enhancments

Author: ismail9k

docs/api/data.md

@@ -21,13 +21,12 @@ if (myCarousel.data.currentSlide === 10) {
 
 ## Available Data
 
-| Data             | Description                                                                |
-| ---------------- | -------------------------------------------------------------------------- |
-| `config`         | the current carousel configuration                                         |
-| `slidesCount`    | slides total count                                                         |
-| ~~`slideWidth`~~ | ~~single slide width~~   <Badge type="danger" text="Rename to slideSize"/> |
-| `slideSize`      | single slide width or height                                               |
-| `currentSlide`   | current slide index                                                        |
-| `maxSlide`       | maximum slide index                                                        |
-| `minSlide`       | minimum slide index                                                        |
-| `middleSlide`    | middle slide index                                                         |
+| Data           | Description                        |
+| -------------- | ---------------------------------- |
+| `config`       | the current carousel configuration |
+| `currentSlide` | current slide index                |
+| `maxSlide`     | maximum slide index                |
+| `middleSlide`  | middle slide index                 |
+| `minSlide`     | minimum slide index                |
+| `slideSize`    | single slide width or height       |
+| `slidesCount`  | slides total count                 |

docs/api/events.md

@@ -30,18 +30,23 @@ const handleSlideStart = (data) => {
 
 Triggered before the carousel is initialized. Use this to perform any setup tasks required before the carousel is ready.
 
+### @drag
+
+Triggered while the carousel is being dragged, providing live positional data. Emits the following:
+
+- `x`: The horizontal drag position.
+- `y`: The vertical drag position.
+
 ### @init
 
 Triggered once the carousel is mounted and fully initialized. This is ideal for executing post-initialization logic.
 
-### slide-start
+### @loop
 
-Triggered at the beginning of the sliding function. Emits the following data:
+Triggered when the carousel loops over (wraps around), only in wrap-around mode. Emits the following data:
 
-- `slidingToIndex`: The index of the slide the carousel is moving to.
-- `currentSlideIndex`: The current slide index before the transition starts.
-- `prevSlideIndex`: The index of the slide before the current one.
-- `slidesCount`: The total number of slides in the carousel.
+- `currentSlideIndex`: The current slide index before the loop occurs.
+- `slidingToIndex`: The index of the slide the carousel loops to.
 
 ### @slide-end
 
@@ -51,33 +56,28 @@ Triggered after the sliding animation completes and the current slide is updated
 - `prevSlideIndex`: The index of the slide before the transition.
 - `slidesCount`: The total number of slides in the carousel.
 
-### @loop
-
-Triggered when the carousel loops over (wraps around), only in wrap-around mode. Emits the following data:
-
-- `slidingToIndex`: The index of the slide the carousel loops to.
-- `currentSlideIndex`: The current slide index before the loop occurs.
-
-### @drag
-
-Triggered while the carousel is being dragged, providing live positional data. Emits the following:
-
-- `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`: The Vue component instance of the registered slide
+
+### @slide-start
+
+Triggered at the beginning of the sliding function. Emits the following data:
+
+- `currentSlideIndex`: The current slide index before the transition starts.
+- `prevSlideIndex`: The index of the slide before the current one.
+- `slidingToIndex`: The index of the slide the carousel is moving to.
+- `slidesCount`: The total number of slides in the carousel.
 
 ### @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
+- `slide`: The Vue component instance of the unregistered slide
 
 ## Notes
 

docs/api/methods.md

@@ -17,10 +17,6 @@ myCarousel.next()
 myCarousel.updateSlideSize()
 ```
 
-## slideTo(index: number)
-
-Slide to specific slide index
-
 ## next()
 
 Slide to the next slide
@@ -29,37 +25,32 @@ Slide to the next slide
 
 Slide to the previous slide
 
-## ~~updateSlideWidth()~~  <Badge type="danger" text="Rename to updateSlideSize"/>
+## restartCarousel()
 
-~~Update `slideWidth` value based on `itemsToShow` and the current carousel width~~
+Restart the carousel settings and data, internally it calls:
 
-## updateSlideSize()
+- `resetAutoplay`
+- `updateBreakpointsConfig`
+- `updateSlidesData`
+- `updateSlideSize`
 
-Update `slideSize` value based on `itemsToShow`, `dir` and the current carousel width/height
+## slideTo(index: number, skipTransition = false)
+
+Slide to specific slide index
 
 ## updateBreakpointsConfig()
 
 Update the current carousel config based on `breakpoints` settings and screen width
 
+## updateSlideSize()
+
+Update `slideSize` value based on `itemsToShow`, `dir` and the current carousel width/height
+
 ## updateSlidesData()
 
 Update all the slide related date includes:
 
 - `currentSlideIndex`
-- `middleSlide`
 - `maxSlide`
+- `middleSlide`
 - `minSlide`
-
-## ~~initDefaultConfig()~~ <Badge type="danger" text="This method is deprecated"/>
-
-~~Init carousel default configurations~~
-
-## restartCarousel()
-
-Restart the carousel settings and data, internally it calls:
-
-- ~~`initDefaultConfig`~~
-- `resetAutoplay`
-- `updateBreakpointsConfig`
-- `updateSlidesData`
-- `updateSlideSize`

docs/components/navigation.md

@@ -61,12 +61,12 @@ You can customize the navigation buttons using slots:
 
 | Variable                 | Default Value             | Description                     |
 | ------------------------ | ------------------------- | ------------------------------- |
-| `--vc-nav-width`         | `30px`                    | Navigation button width         |
-| `--vc-nav-height`        | `30px`                    | Navigation button height        |
+| `--vc-nav-background`    | `transparent`             | Navigation button background    |
 | `--vc-nav-border-radius` | `0`                       | Navigation button border radius |
 | `--vc-nav-color`         | `var(--vc-clr-primary)`   | Navigation button color         |
 | `--vc-nav-color-hover`   | `var(--vc-clr-secondary)` | Navigation button hover color   |
-| `--vc-nav-background`    | `transparent`             | Navigation button background    |
+| `--vc-nav-height`        | `30px`                    | Navigation button height        |
+| `--vc-nav-width`         | `30px`                    | Navigation button width         |
 
 ## Accessibility
 

docs/components/pagination.md

@@ -35,13 +35,12 @@ import { Pagination as CarouselPagination } from 'vue3-carousel'
 
 | Variable                    | Default Value             | Description                        |
 | --------------------------- | ------------------------- | ---------------------------------- |
-| `--vc-pgn-width`            | `16px`                    | Pagination button width            |
+| `--vc-pgn-active-color`     | `var(--vc-clr-primary)`   | Active pagination button color     |
+| `--vc-pgn-background-color` | `var(--vc-clr-secondary)` | Pagination button background color |
+| `--vc-pgn-border-radius`    | `0`                       | Pagination button border radius    |
 | `--vc-pgn-height`           | `4px`                     | Pagination button height           |
 | `--vc-pgn-margin`           | `6px 5px`                 | Pagination button margin           |
-| `--vc-pgn-border-radius`    | `0`                       | Pagination button border radius    |
-| `--vc-pgn-background-color` | `var(--vc-clr-secondary)` | Pagination button background color |
-| `--vc-pgn-active-color`     | `var(--vc-clr-primary)`   | Active pagination button color     |
-
+| `--vc-pgn-width`            | `16px`                    | Pagination button width            |
 
 ## Accessibility
 

docs/components/slide.md

@@ -31,8 +31,8 @@ The default slot exposes these reactive properties for custom slide content:
 | currentIndex | Number  | Current index position of the slide                       |
 | isActive     | Boolean | True when this slide is the current active slide          |
 | isClone      | Boolean | True if this is a clone slide (used for infinite scroll)  |
-| isPrev       | Boolean | True if this slide is immediately before the active slide |
 | isNext       | Boolean | True if this slide is immediately after the active slide  |
+| isPrev       | Boolean | True if this slide is immediately before the active slide |
 | isSliding    | Boolean | True during slide transition animations                   |
 | isVisible    | Boolean | True when the slide is within the visible viewport        |
 
@@ -80,12 +80,12 @@ The component provides these CSS classes for styling:
 | CSS Class                   | Description               |
 | --------------------------- | ------------------------- |
 | `.carousel__slide`          | Base slide styles         |
-| `.carousel__slide--clone`   | Cloned slide styles       |
-| `.carousel__slide--visible` | Visible slide styles      |
 | `.carousel__slide--active`  | Active slide styles       |
-| `.carousel__slide--prev`    | Previous slide styles     |
+| `.carousel__slide--clone`   | Cloned slide styles       |
 | `.carousel__slide--next`    | Next slide styles         |
+| `.carousel__slide--prev`    | Previous slide styles     |
 | `.carousel__slide--sliding` | Styles during transitions |
+| `.carousel__slide--visible` | Visible slide styles      |
 
 ## Best Practices