@asd20/ui-next 2.12.8 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [2.13.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.12.8...ui-next-v2.13.0) (2026-07-22)
+
+
+### Features
+
+* migrate shared carousel to Swiper 12 ([9ba6f7b](https://github.com/academydistrict20/asd20-ui-next/commit/9ba6f7b2a6ec7f1ad72944a7279fefafcf273995))
+
 ## [2.12.8](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.12.7...ui-next-v2.12.8) (2026-06-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.12.8",
+  "version": "2.13.0",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",
@@ -39,10 +39,9 @@
     "date-fns": "^2.30.0",
     "date-fns-tz": "^1.1.7",
     "focus-trap": "^6.9.4",
-    "js-cookie": "^2.2.1",
+    "js-cookie": "3.0.8",
     "lodash": "^4.17.23",
-    "swiper": "^5.4.5",
-    "uuid": "^3.3.2"
+    "swiper": "12.2.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

package/src/components/molecules/Asd20Swiper/index.vue

@@ -5,6 +5,7 @@
   >
     <button
       ref="prev"
+      type="button"
       tabindex="-1"
       title="Previous"
       class="asd20-swiper__arrows__button-prev"
@@ -13,7 +14,7 @@
     </button>
     <div
       ref="swiper"
-      class="swiper-container"
+      class="swiper swiper-container"
     >
       <div class="swiper-wrapper">
         <slot name="before-wrapper" />
@@ -28,6 +29,7 @@
     </div>
     <button
       ref="next"
+      type="button"
       tabindex="-1"
       title="Next"
       class="asd20-swiper__arrows__button-next"
@@ -38,19 +40,27 @@
 </template>
 
 <script>
+import Swiper from 'swiper'
 import {
-  Swiper,
   A11y,
+  Controller,
   Keyboard,
   Pagination,
   Navigation,
   Mousewheel,
-} from 'swiper/js/swiper.esm'
+} from 'swiper/modules'
 import merge from 'lodash/merge'
-import 'swiper/css/swiper.css'
+import 'swiper/css'
+import 'swiper/css/pagination'
 
-// see http://idangero.us/swiper/api/#custom-build
-Swiper.use([A11y, Keyboard, Pagination, Navigation, Mousewheel])
+const swiperModules = [
+  A11y,
+  Controller,
+  Keyboard,
+  Pagination,
+  Navigation,
+  Mousewheel,
+]
 
 export default {
   name: 'Asd20Swiper',
@@ -109,41 +119,40 @@ export default {
     recreateSwiper() {
       this.destroySwiper()
 
-      this.swiper = new Swiper(
-        this.$refs.swiper,
-        merge(
-          {
-            preloadImages: false,
-            keyboard: {
-              enabled: false,
-              onlyInViewport: true,
-            },
-            a11y: true,
+      const swiperOptions = merge(
+        {
+          modules: swiperModules,
+          preloadImages: false,
+          keyboard: {
+            enabled: false,
+            onlyInViewport: true,
           },
-          this.options,
-          {
-            mousewheel: {
-              releaseOnEdges: true,
-              sensitivity: 0.5,
-              forceToAxis: true,
-            },
-            controller: {
-              control: this.controlled,
-            },
-            pagination: {
-              el: this.$refs.pagination,
-              clickable: false,
-            },
-            navigation: {
-              prevEl: this.$refs.prev,
-              nextEl: this.$refs.next,
-            },
-          }
-        )
+          a11y: true,
+        },
+        this.options,
+        {
+          mousewheel: {
+            releaseOnEdges: true,
+            sensitivity: 0.5,
+            forceToAxis: true,
+          },
+          controller: {},
+          pagination: {
+            el: this.$refs.pagination,
+            clickable: false,
+          },
+          navigation: {
+            prevEl: this.$refs.prev,
+            nextEl: this.$refs.next,
+          },
+        }
       )
+      swiperOptions.controller.control = this.controlled
+
+      this.swiper = new Swiper(this.$refs.swiper, swiperOptions)
 
       // Delay horizontal scrolling and prioritize vertical scrolling
-      this.swiper.on('touchMove', event => {
+      this.swiper.on('touchMove', (swiper, event) => {
         const { deltaX, deltaY } = event // Track horizontal and vertical scroll movements
         if (Math.abs(deltaY) > Math.abs(deltaX)) {
           // If the vertical scroll is stronger, prevent horizontal scrolling
@@ -331,7 +340,7 @@ export default {
     }
   }
 
-  .swiper-container {
+  .swiper {
     overflow: visible;
     --swiper-theme-color: var(--color__accent);
   }