fix(svelte): fix swipeable tabs

nolimits4web · nolimits4web · commit 9476c6a35bc6 · 2023-03-23T11:35:39.000+03:00
diff --git a/src/core/components/swiper/swiper.js b/src/core/components/swiper/swiper.js
@@ -26,7 +26,7 @@ function initSwiper(swiperEl) {
   let isTabs;
   let isRoutableTabs;
   if ($swiperEl.hasClass('tabs')) {
-    initialSlide = $swiperEl.children('.tab-active').index();
+    initialSlide = $swiperEl.children('swiper-slide').indexOf($swiperEl.children('.tab-active')[0]);
     isTabs = true;
     isRoutableTabs = $swiperEl.find('.tabs-routable').length > 0;
   }
diff --git a/src/core/components/tabs/tabs.js b/src/core/components/tabs/tabs.js
@@ -84,13 +84,14 @@ const Tab = {
     let swiper;
     if ($tabsEl[0].nodeName.toLowerCase() === 'swiper-container' && app.swiper) {
       swiper = $tabsEl[0].swiper;
-      if (swiper && swiper.activeIndex !== $newTabEl.index()) {
+      const newTabIndex = swiper.slides.indexOf($newTabEl[0]);
+      if (swiper && swiper.activeIndex !== newTabIndex) {
         animated = true;
         swiper
           .once('slideChangeTransitionEnd', () => {
             tabsChanged();
           })
-          .slideTo($newTabEl.index(), animate ? undefined : 0);
+          .slideTo(newTabIndex, animate ? undefined : 0);
       } else if (swiper && swiper.animating) {
         animated = true;
         swiper.once('slideChangeTransitionEnd', () => {
diff --git a/src/svelte/components/tabs.svelte b/src/svelte/components/tabs.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from 'svelte';
+  import { onMount, tick } from 'svelte';
 
   import { restProps } from '../shared/rest-props.js';
   import { colorClasses } from '../shared/mixins.js';
@@ -29,6 +29,11 @@
       Object.assign(wrapEl, swiperParams);
       wrapEl.initialize();
     }
+    tick().then(() => {
+      if (swipeable && wrapEl.swiper) {
+        wrapEl.swiper.update();
+      }
+    });
   });
 </script>
 

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ function initSwiper(swiperEl) {`
`26`	`26`	`let isTabs;`
`27`	`27`	`let isRoutableTabs;`
`28`	`28`	`if ($swiperEl.hasClass('tabs')) {`
`29`		`- initialSlide = $swiperEl.children('.tab-active').index();`
	`29`	`+ initialSlide = $swiperEl.children('swiper-slide').indexOf($swiperEl.children('.tab-active')[0]);`
`30`	`30`	`isTabs = true;`
`31`	`31`	`isRoutableTabs = $swiperEl.find('.tabs-routable').length > 0;`
`32`	`32`	`}`