nuxt-swiper - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

dist/module.json

 {
   "name": "nuxt-swiper",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "configKey": "swiper",
   "builder": {
-    "@nuxt/module-builder": "0.8.4",
-    "unbuild": "2.0.0"
+    "@nuxt/module-builder": "1.0.1",
+    "unbuild": "3.5.0"
   }
 }

dist/runtime/composables/useSwiper.client.d.ts

 import type { SwiperContainer } from 'swiper/element';
+import type { Swiper } from 'swiper/types';
 import type { Ref } from 'vue';
 /**
- * This is a utility function that allows you to use the Swiper instance directly.
+ * A Vue composable that provides a reactive interface to the Swiper slider instance.
+ * This utility function allows you to directly access and control the Swiper instance
+ * and provides reactive state properties for common Swiper values.
  *
- * @param swiperContainerRef - Ref to the `<swiper-container>` element.
- * @param options - Swiper options to merge with the default options if the `swiper` instance is not yet created.
+ * @param swiperContainerRef - Ref to the `<swiper-container>` element that will be controlled.
+ * @param options - Optional Swiper configuration parameters to merge with the default options.
+ *                  These options will be applied if the Swiper instance is not yet created.
+ *                  See Swiper documentation for all available options: https://swiperjs.com/swiper-api
+ *
+ * @returns An object containing:
+ *  - `instance`: Ref to the Swiper instance
+ *  - Reactive state properties: `isBeginning`, `isEnd`, `activeIndex`, `realIndex`, etc.
+ *  - Navigation methods: `next()`, `prev()`, `to()`, `reset()`
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ *
+ * const swiperRef = ref(null)
+ * const { next, prev, isBeginning, isEnd } = useSwiper(swiperRef, {
+ *   slidesPerView: 1,
+ *   spaceBetween: 10,
+ * })
+ * </script>
+ *
+ * <template>
+ *   <swiper-container ref="swiperRef">
+ *     <swiper-slide>Slide 1</swiper-slide>
+ *     <swiper-slide>Slide 2</swiper-slide>
+ *   </swiper-container>
+ *
+ *   <button @click="next" :disabled="isEnd">Next</button>
+ *   <button @click="prev" :disabled="isBeginning">Previous</button>
+ * </template>
+ * ```
  */
 export declare function useSwiper(swiperContainerRef: Ref<SwiperContainer | null>, options?: SwiperContainer['swiper']['params']): {
-    instance: import("vue").ComputedRef<import("swiper/types").Swiper | null>;
+    instance: Ref<Swiper | undefined, Swiper | undefined>;
+    isBeginning: import("vue").ComputedRef<boolean>;
+    isEnd: import("vue").ComputedRef<boolean>;
+    activeIndex: import("vue").ComputedRef<number>;
+    realIndex: import("vue").ComputedRef<number>;
+    slides: import("vue").ComputedRef<HTMLElement[]>;
+    slidesPerView: import("vue").ComputedRef<number>;
+    progress: import("vue").ComputedRef<number>;
+    getNumberOfSlides: import("vue").ComputedRef<number>;
     next: (speed?: number | undefined, runCallbacks?: boolean | undefined) => void;
@@ -12,0 +53,0 @@ prev: (speed?: number | undefined, runCallbacks?: boolean | undefined) => void;

dist/runtime/composables/useSwiper.client.js

@@ -1,4 +0,12 @@
-import { computed, nextTick, onMounted, watch } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 export function useSwiper(swiperContainerRef, options) {
-  const swiper = computed(() => swiperContainerRef?.value?.swiper ?? null);
+  const swiper = ref();
+  const isBeginning = computed(() => swiper.value?.isBeginning ?? true);
+  const isEnd = computed(() => swiper.value?.isEnd ?? false);
+  const activeIndex = computed(() => swiper.value?.activeIndex ?? 0);
+  const realIndex = computed(() => swiper.value?.realIndex ?? 0);
+  const slides = computed(() => swiper.value?.slides ?? []);
+  const slidesPerView = computed(() => swiper.value?.slidesPerViewDynamic() ?? 0);
+  const progress = computed(() => swiper.value?.progress ?? 0);
+  const getNumberOfSlides = computed(() => swiper.value?.slides.length ?? 0);
   const next = (...params) => {
@@ -9,4 +17,3 @@ if (!swiper.value)
       swiper.value.slideNext();
-    else
-      swiper.value.slideNext(...params);
+    else swiper.value.slideNext(...params);
   };
@@ -23,4 +30,3 @@ const to = (...params) => {
       swiper.value.slideReset();
-    else
-      swiper.value.slideReset(...params);
+    else swiper.value.slideReset(...params);
   };
@@ -32,4 +38,3 @@ const prev = (...params) => {
       swiper.value.slidePrev();
-    else
-      swiper.value.slidePrev(...params);
+    else swiper.value.slidePrev(...params);
   };
@@ -45,3 +50,3 @@ const checkSwiperRef = () => {
   };
-  const initialize = () => {
+  const _initialize = () => {
     if (swiperContainerRef.value && options !== void 0) {
@@ -51,7 +56,19 @@ Object.assign(swiperContainerRef.value, options);
     }
+    swiper.value = swiperContainerRef?.value?.swiper;
   };
   watch(swiper, () => checkSwiperRef());
-  onMounted(() => nextTick(() => initialize()));
+  onMounted(() => nextTick(() => _initialize()));
   return {
+    // Instance
     instance: swiper,
+    // Reactive state
+    isBeginning,
+    isEnd,
+    activeIndex,
+    realIndex,
+    slides,
+    slidesPerView,
+    progress,
+    getNumberOfSlides,
+    // Navigation methods
     next,
@@ -58,0 +75,0 @@ prev,

dist/runtime/plugins/components.client.d.ts

@@ -1,2 +0,2 @@
-declare const _default: any;
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

dist/runtime/plugins/custom-elements.d.ts

@@ -1,2 +0,2 @@
-declare const _default: any;
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package.json

 {
   "name": "nuxt-swiper",
   "type": "module",
-  "version": "2.0.0",
-  "packageManager": "pnpm@8.15.5",
+  "version": "2.0.1",
+  "packageManager": "pnpm@10.10.0",
   "author": {
@@ -25,9 +25,8 @@ "name": "cpreston321 <https://christianpreston.com>",
     ".": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
     }
   },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
+  "main": "./dist/module.mjs",
+  "types": "./dist/types.d.mts",
   "files": [
@@ -50,14 +49,14 @@ "dist"
   "dependencies": {
-    "@nuxt/kit": "^3.14.159",
-    "swiper": "^11.1.14"
+    "@nuxt/kit": "^3.17.2",
+    "swiper": "^11.2.6"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.8.0",
-    "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/test-utils": "^3.14.0",
-    "eslint": "^9.14.0",
-    "nuxt": "^3.14.159",
+    "@antfu/eslint-config": "^3.12.0",
+    "@nuxt/module-builder": "^1.0.1",
+    "@nuxt/test-utils": "^3.15.1",
+    "eslint": "^9.17.0",
+    "nuxt": "^3.17.2",
     "release-it": "^17.10.0",
-    "typescript": "^5.6.3",
-    "vitest": "^2.1.5"
+    "typescript": "^5.8.3",
+    "vitest": "^2.1.8"
   },
@@ -64,0 +63,0 @@ "release-it": {

README.md

@@ -8,3 +8,3 @@ # Nuxt Swiper
 > [!IMPORTANT]
-> ***Nuxt Swiper*** utilizes Swiper.js as its foundation using it's web components. Please ensure that you read the Swiper.js [documentation](https://swiperjs.com/element) before utilizing this module and reporting any issues that are not directly related to Nuxt Swiper. If there is an underlying bug, please submit an issue to the Swiper.js [repository](https://github.com/nolimits4web/swiper/issues).
+> ***Nuxt Swiper*** utilizes Swiper.js as its foundation using its web components. Please ensure that you read the Swiper.js [documentation](https://swiperjs.com/element) before utilizing this module and reporting any issues that are not directly related to Nuxt Swiper. If there is an underlying bug, please submit an issue to the Swiper.js [repository](https://github.com/nolimits4web/swiper/issues).
 
@@ -35,3 +35,3 @@ > [!NOTE]
 
-> [!INFO]
+> [!NOTE]
 > Since these are web components, they use the kebab-case naming convention vs the camelCase naming convention that Vue uses.
@@ -79,3 +79,3 @@
 
-### Basic Usuage
+### Basic Usage
 
@@ -225,2 +225,2 @@ ```vue
 
-[MIT](./LICENSE) License © 2024 [CP](https://github.com/cpreston321)
+[MIT](./LICENSE) License © 2025 [CP](https://github.com/cpreston321)

No alert changes

Improved metrics

Total package byte prevSize

17871

6.41%

Lines of code

213

7.04%

Worsened metrics

Number of package files

14

-17.65%

Dependency changes

• + Added

  @nuxt/kit@3.17.4
  (transitive)

• + Added

  @types/estree@1.0.7
  (transitive)

• - Removed

  @nuxt/kit@3.17.5
  (transitive)

• - Removed

  @types/estree@1.0.8
  (transitive)

• Updated

  @nuxt/kit@^3.17.2

• Updated

  swiper@^11.2.6