Merge pull request #435 from ismail9k/feat-easily-customize-addons

Feat easily customize addons

.github/workflows/test.yml

@@ -5,27 +5,30 @@ name: Tests
 
 on:
   push:
-    branches: [ "master" ]
+    branches: ["master"]
   pull_request:
-    branches: [ "master" ]
+    branches: ["master"]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [20.x, 22.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: yarn
-      - run: yarn install --frozen-lockfile
-      - run: npm run lint
-      - run: npm run test
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 8
+      - run: pnpm install
+      - run: pnpm run lint
+      - run: pnpm run test

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm test

docs/.vitepress/config.js

@@ -31,6 +31,10 @@ module.exports = {
           { text: 'Events', link: '/api/events' },
         ],
       },
+      {
+        text: 'Addons',
+        link: '/addons',
+      },
     ],
 
     editLink: {

docs/addons.md

@@ -0,0 +1,51 @@
+# Addons
+
+Enhance the functionality of the carousel by adding more features to it/
+
+## Navigation
+
+The **Navigation** addon provides **Next** and **Previous** buttons for navigating through the carousel.
+
+### How to Use It
+
+```vue {2,9}
+<script setup>
+import { Navigation as CarouselNavigation } from 'vue3-carousel'
+</script>
+
+<template>
+  <Carousel v-bind="config">
+    ...
+    <template #addons>
+      <CarouselNavigation />
+    </template>
+  </Carousel>
+</template>
+
+```
+
+## Pagination
+
+The **Pagination** addon adds pagination indicators to the carousel.
+
+```vue {2,9}
+<script setup>
+import { Pagination as CarouselPagination } from 'vue3-carousel'
+</script>
+
+<template>
+  <Carousel v-bind="config">
+    ...
+    <template #addons>
+      <CarouselPagination />
+    </template>
+  </Carousel>
+</template>
+
+```
+
+### Config
+
+| Prop             | Default | Description                  |
+| ---------------- | ------- | ---------------------------- |
+| `disableOnClick` | false   | Disables navigation on click |

docs/api/events.md

@@ -5,6 +5,15 @@ Carousel events provide flexibility to intercept and react to navigation changes
 ## How to Use Events
 
 ```vue
+<script setup>
+const handleInit = () => {
+  console.log('Carousel initialized')
+}
+const handleSlideStart = (data) => {
+  console.log('Slide started:', data)
+}
+</script>
+
 <template>
   <Carousel
     @init="handleInit"
@@ -13,21 +22,6 @@ Carousel events provide flexibility to intercept and react to navigation changes
     ...
   </Carousel>
 </template>
-
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  methods: {
-    handleInit() {
-      console.log('Carousel initialized');
-    },
-    handleSlideStart(data) {
-      console.log('Slide started:', data);
-    },
-  },
-});
-</script>
 ```
 
 ## Event Reference

docs/test.md → docs/examples-fallback.md

@@ -1,45 +1,60 @@
-# Test
-
+# Examples
 
 ## Basic
 
+A simple implementation of the carousel with default settings.
+
 <ExampleBasic />
 
 ## Wrap Around
 
+Demonstrates a carousel with continuous wrap-around functionality.
+
 <ExampleWrapAround />
 
 ## Vertical
 
+Showcases a vertically scrolling carousel. Adjust the height to better fit your content.
+
 <ExampleVertical />
 
 ## Breakpoints
 
+An example of a responsive carousel with breakpoints for varying screen sizes.
+
 <ExampleBreakpoints />
 
 ## Autoplay
 
+Illustrates the carousel with autoplay functionality enabled.
+
 <ExampleAutoplay />
 
 ## Active Classes
 
-<ExampleActiveClasses />
+An example highlighting active items with custom classes.
 
+<ExampleActiveClasses />
 
 ## Disabled
 
+A demonstration of how to disable the carousel.
+
 <ExampleDisable />
 
 ## Custom Navigation
 
+A demonstration of the carousel with fully customizable navigation controls.
+
 <ExampleCustomNavigation />
 
 ## Gallery
 
-<ExampleGallery />
+Transforms the carousel into a gallery-style component.
 
+<ExampleGallery />
 
-<script>
+<script setup>
 import ExampleBasic from './examples/ExampleBasic.vue';
 import ExampleWrapAround from './examples/ExampleWrapAround.vue';
 import ExampleBreakpoints from './examples/ExampleBreakpoints.vue';
@@ -49,20 +64,6 @@ import ExampleCustomNavigation from './examples/ExampleCustomNavigation.vue';
 import ExampleGallery from './examples/ExampleGallery.vue';
 import ExampleVertical from './examples/ExampleVertical.vue';
 import ExampleDisable from './examples/ExampleDisable.vue';
-
-export default {
-  components: {
-    ExampleBasic,
-    ExampleWrapAround,
-    ExampleBreakpoints,
-    ExampleAutoplay,
-    ExampleActiveClasses,
-    ExampleCustomNavigation,
-    ExampleGallery,
-    ExampleVertical,
-    ExampleDisable
-  }
-}
 </script>
 
 <style>

docs/examples.md

@@ -1,42 +1,60 @@
 # Examples
 
+If you're experiencing issues loading the live examples or you're browsing on a mobile device, visit the [Fallback Examples Page](/examples-fallback) for a better experience.
+
 ## Basic
 
+A simple implementation of the carousel with default settings.
+
 <Example id="vue3-carousel-example-basic" />
 
 ## Wrap Around
 
+Demonstrates a carousel with continuous wrap-around functionality.
+
 <Example id="vue3-carousel-example-wrap-around" />
 
 ## Vertical
 
+Showcases a vertically scrolling carousel. Adjust the height to better fit your content.
+
 <Example id="vue3-carousel-example-vertical" :height="475" />
 
 ## Breakpoints
 
-<Example id="vue3-carousel-example-breakpoints" :height="300"></Example>
+An example of a responsive carousel with breakpoints for varying screen sizes.
+
+<Example id="vue3-carousel-example-breakpoints" :height="300" />
 
 ## Autoplay
 
+Illustrates the carousel with autoplay functionality enabled.
+
 <Example id="vue3-carousel-example-autoplay" />
 
 ## Active Classes
 
+An example highlighting active items with custom classes.
+
 <Example id="vue3-carousel-example-status-classes" />
 
 ## Custom Navigation
 
+A demonstration of the carousel with fully customizable navigation controls.
+
 <Example id="vue3-carousel-example-custom-navigation" :height="310" />
 
 ## Gallery
 
+Transforms the carousel into a gallery-style component.
+
 <Example id="vue3-carousel-example-gallery" :height="500" />
 
 <script>
 import Example from './.vitepress/components/Example.vue';
 export default {
   components: {
     Example,
-  }
-}
+  },
+};
 </script>