Bump swiper from 8.4.7 to 11.1.3 (#443)

* Bump swiper from 8.4.7 to 11.1.3 Bumps [swiper](https://github.com/nolimits4web/Swiper) from 8.4.7 to 11.1.3. - [Release notes](https://github.com/nolimits4web/Swiper/releases) - [Changelog](https://github.com/nolimits4web/swiper/blob/master/CHANGELOG.md) - [Commits](nolimits4web/swiper@v8.4.7...v11.1.3) --- updated-dependencies: - dependency-name: swiper dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> * migrating to swiper 11 * lint --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Stephanie Smith <[email protected]>
nasa-jpl · May 28, 2024 · 59c1f94 · 59c1f94
1 parent 0d05f44
commit 59c1f94
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 64 deletions.
diff --git a/apps/html-storybook/package.json b/apps/html-storybook/package.json
@@ -27,7 +27,7 @@
   "dependencies": {
     "@fancyapps/ui": "^4.0.26",
     "@tailwindcss/forms": "^0.5.7",
-    "swiper": "^8.0.7"
+    "swiper": "^11.1.3"
   },
   "devDependencies": {
     "@explorer-1/common-storybook": "workspace:*",

diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@fancyapps/ui": "^4.0.26",
     "@tailwindcss/forms": "^0.5.7",
-    "swiper": "^8.0.7",
+    "swiper": "^11.1.3",
     "vue": "^3.2.47"
   },
   "devDependencies": {

diff --git a/packages/html/dist/assets/css/explorer-1.min.css b/packages/html/dist/assets/css/explorer-1.min.css
diff --git a/packages/html/dist/assets/js/explorer-1.min.js b/packages/html/dist/assets/js/explorer-1.min.js
diff --git a/packages/html/dist/index.html b/packages/html/dist/index.html
@@ -16,10 +16,6 @@
       <head>
         <meta charset="utf-8" />
         <title>JPL Design System Assets</title>
-        <link
-          rel="stylesheet"
-          href="./assets/scss/styles.scss"
-        />
       </head>
       <body>
         <div class="bg-dark-blue py-5 px-4 3xl:px-0 mb-10">

diff --git a/packages/html/index.html b/packages/html/index.html
@@ -14,10 +14,6 @@
       <head>
         <meta charset="utf-8" />
         <title>JPL Design System Assets</title>
-        <link
-          rel="stylesheet"
-          href="./assets/scss/styles.scss"
-        />
       </head>
       <body>
         <div class="bg-dark-blue py-5 px-4 3xl:px-0 mb-10">

diff --git a/packages/html/package.json b/packages/html/package.json
@@ -30,7 +30,7 @@
   "dependencies": {
     "@fancyapps/ui": "^4.0.26",
     "@tailwindcss/forms": "^0.5.7",
-    "swiper": "^8.0.7",
+    "swiper": "^11.1.3",
     "tailwindcss": "^3.4.3"
   },
   "devDependencies": {

diff --git a/packages/html/src/assets/js/vendors/_swiper.js b/packages/html/src/assets/js/vendors/_swiper.js
@@ -2,20 +2,20 @@
  *  Configured to use any modules that are needed site-wide (SwiperCore.use([]))
  *  Custom options are defined in constants
  */
-
-import Swiper, { Navigation, Pagination, Lazy, A11y } from 'swiper'
+import Swiper from 'swiper'
+import { A11y, Navigation, Pagination } from 'swiper/modules'
 import swiperOptions from './_swiperOptions.js'
 
 export function initMixinCarousel() {
   return new Swiper('.MixinCarousel .swiper', {
-    modules: [Navigation, Lazy, A11y, Pagination],
+    modules: [A11y, Navigation, Pagination],
     ...swiperOptions.MixinCarousel
-  })
+  }).init()
 }
 
 export function initBlockImageCarousel() {
   return new Swiper('.BlockImageCarousel .swiper', {
-    modules: [Navigation, Lazy, A11y, Pagination],
+    modules: [A11y, Navigation, Pagination],
     ...swiperOptions.BlockImageCarousel
   })
 }
diff --git a/packages/html/src/assets/js/vendors/_swiperOptions.js b/packages/html/src/assets/js/vendors/_swiperOptions.js
@@ -4,6 +4,7 @@
 
 const swiperOptions = {
   MixinCarousel: {
+    init: false,
     slidesPerView: 1.25,
     speed: 500,
     threshold: 20, // swipe threshold in px
@@ -38,8 +39,8 @@ const swiperOptions = {
     },
     on: {
       init(swiper) {
-        swiper.$el.removeClass('opacity-0')
-        swiper.$el.addClass('opacity-100')
+        const classList = swiper.el.classList
+        classList.replace('opacity-0', 'opacity-100')
       }
     }
   },

diff --git a/packages/html/src/components/BlockImageCarousel/BlockImageCarousel.js b/packages/html/src/components/BlockImageCarousel/BlockImageCarousel.js
@@ -1,18 +1,7 @@
 import { BlockImageGalleryCoverTemplate } from '../BlockImageGalleryCover/BlockImageGalleryCover'
 import { BlockImageStandardTemplate } from '../BlockImage/BlockImageStandard'
 import { BaseButtonTemplate } from '../BaseButton/BaseButton'
-// @ts-ignore
-// import Swiper, { Navigation, Pagination, Lazy, A11y } from 'swiper'
-// import swiperOptions from './../../assets/js/vendors/_swiperOptions.js'
 
-// @ts-ignore
-// import { initBlockImageCarousel } from './../../assets/js/vendors/_swiper.js'
-// function initBlockImageCarousel() {
-//   return new Swiper('.BlockImageCarousel .swiper', {
-//     modules: [Navigation, Lazy, A11y, Pagination],
-//     ...swiperOptions.BlockImageCarousel
-//   })
-// }
 export const BlockImageCarouselTemplate = ({ images, galleryCoverImage, fancyboxGallery }) => {
   let slides = ''
   if (images.length > 0) {

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -32,7 +32,7 @@
     "@nuxtjs/tailwindcss": "^6.12.0",
     "@fancyapps/ui": "^4.0.26",
     "@tailwindcss/forms": "^0.5.7",
-    "swiper": "^8.0.7"
+    "swiper": "^11.1.3"
   },
   "devDependencies": {
     "@explorer-1/common": "workspace:*",

diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@fancyapps/ui": "^4.0.26",
     "@tailwindcss/forms": "^0.5.7",
-    "swiper": "^8.0.7",
+    "swiper": "^11.1.3",
     "tailwindcss": "^3.4.3",
     "tailwindcss-themer": "^4.0.0",
     "vue": "^3.4.21"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml