feat(vue): provide - inject swiper and swiperSlide context (#5377)

* feat(vue): provider - inject

* chore(vue):  slideData -> swiperSlide

* chore(vue): provide should be ref type

* chore(vue): update playground

* chore: ignore eslint cache

Co-authored-by: Vladimir Kharlampidi <nolimits4web@gmail.com>

.gitignore

@@ -15,3 +15,4 @@ cypress/screenshots
 .env.development.local
 .env.test.local
 .env.production.local
+.eslintcache

playground/vue/App.vue

@@ -9,7 +9,7 @@
       :pagination="{ clickable: true }"
       :modules="modules"
     >
-      <swiper-slide>Slide 1</swiper-slide>
+      <swiper-slide><innerComp>Slide 1</innerComp></swiper-slide>
       <swiper-slide>Slide 2</swiper-slide>
       <swiper-slide>Slide 3</swiper-slide>
       <swiper-slide>Slide 4</swiper-slide>
@@ -27,11 +27,13 @@
 import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
 // eslint-disable-next-line
 import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';
+import innerComp from './innerComp.vue';
 
 export default {
   components: {
     Swiper,
     SwiperSlide,
+    innerComp,
   },
 
   setup() {

playground/vue/innerComp.vue

@@ -0,0 +1,19 @@
+<template>
+  test - {{ swiperSlide.isActive }} - {{ swiperSlide.isNext }}
+  <button @click="swiper.slideNext()">Next</button>
+</template>
+<script>
+import { inject } from 'vue';
+export default {
+  setup() {
+    const swiper = inject('swiper');
+    const swiperSlide = inject('swiperSlide');
+    console.log({ swiper, swiperSlide });
+    return {
+      swiper,
+      swiperSlide,
+    };
+    // console.log(swiper, slideData);
+  },
+};
+</script>

src/vue/swiper-slide.js

@@ -1,4 +1,13 @@
-import { h, ref, onMounted, onUpdated, onBeforeUpdate, computed, onBeforeUnmount } from 'vue';
+import {
+  h,
+  ref,
+  onMounted,
+  onUpdated,
+  onBeforeUpdate,
+  computed,
+  onBeforeUnmount,
+  provide,
+} from 'vue';
 import { uniqueClasses } from './utils.js';
 
 const SwiperSlide = {
@@ -66,6 +75,7 @@ const SwiperSlide = {
         slideClasses.value.indexOf('swiper-slide-next') >= 0 ||
         slideClasses.value.indexOf('swiper-slide-duplicate-next') >= 0,
     }));
+    provide('swiperSlide', slideData);
     return () => {
       return h(
         props.tag,

src/vue/swiper.js

@@ -1,4 +1,4 @@
-import { h, ref, onMounted, onUpdated, onBeforeUnmount, watch, nextTick } from 'vue';
+import { h, ref, onMounted, onUpdated, onBeforeUnmount, watch, nextTick, provide } from 'vue';
 import { getParams } from './get-params.js';
 import { initSwiper, mountSwiper } from './init-swiper.js';
 import {
@@ -319,6 +319,8 @@ const Swiper = {
       breakpointChanged.value = false;
     });
 
+    provide('swiper', swiperRef);
+
     // update on virtual update
     watch(virtualData, () => {
       nextTick(() => {