From b1662ad91965f9ed45950feb931f560a4fe2c2e8 Mon Sep 17 00:00:00 2001
From: Zh3nyaZh3nya <mr.happy.2000@mail.ru>
Date: Thu, 7 Nov 2024 23:55:52 +0500
Subject: [PATCH] fix variable undefined in slider when page reload[2]

---
 package.json                            |  2 +-
 src/runtime/components/Parts/Slider.vue | 97 +++++++++++--------------
 src/runtime/plugin.ts                   |  2 +-
 3 files changed, 43 insertions(+), 58 deletions(-)

diff --git a/package.json b/package.json
index 6ba9654..f8a7698 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ibecsystems/nuxt3-ui-kit",
-  "version": "1.0.51",
+  "version": "1.0.52",
   "description": "Ibec Nuxt3 UI components",
   "repository": {
     "type": "git",
diff --git a/src/runtime/components/Parts/Slider.vue b/src/runtime/components/Parts/Slider.vue
index bb61520..e53c230 100644
--- a/src/runtime/components/Parts/Slider.vue
+++ b/src/runtime/components/Parts/Slider.vue
@@ -432,9 +432,8 @@ const props = defineProps({
 });
 
 const slider = ref(null);
-
 const activeSlide = ref(0);
-const pagination = ref(props.slides);
+const pagination = ref(props.slides || []);
 
 const slideTo = (index) => {
   if (slider.value !== null) {
@@ -442,15 +441,15 @@ const slideTo = (index) => {
   }
 };
 
-const slidePrev = () => {
-  if (slider.value && slider.value.swiper) {
-    slider.value.swiper.slidePrev(500);
+const slideNext = () => {
+  if (slider.value?.swiper) {
+    slider.value.swiper.slideNext(500);
   }
 };
 
-const slideNext = () => {
-  if (slider.value && slider.value.swiper) {
-    slider.value.swiper.slideNext(500);
+const slidePrev = () => {
+  if (slider.value?.swiper) {
+    slider.value.swiper.slidePrev(500);
   }
 };
 
@@ -465,70 +464,56 @@ const updatePagination = () => {
 };
 
 const handleWheel = (event) => {
-  if (!slider.value || !props.controlScroll) return;
-
-  const isAtStart = slider.value.swiper.isBeginning;
-  const isAtEnd = slider.value.swiper.isEnd;
+  if (!slider.value?.swiper || !props.controlScroll) return;
 
-  if ((!isAtStart && event.deltaY < 0) || (!isAtEnd && event.deltaY > 0)) {
+  const swiperInstance = slider.value.swiper;
+  if ((!swiperInstance.isBeginning && event.deltaY < 0) || (!swiperInstance.isEnd && event.deltaY > 0)) {
     event.preventDefault();
-    if (event.deltaY > 0) {
-      slider.value.swiper.slideNext();
-    } else {
-      slider.value.swiper.slidePrev();
-    }
+    event.deltaY > 0 ? swiperInstance.slideNext(500) : swiperInstance.slidePrev(500);
   }
 };
 
-let lastScrollPosition = 0;
-
-if(typeof window !== 'undefined') {
-  lastScrollPosition = window.pageYOffset
-}
-
 const handleScroll = () => {
-  if (!slider.value || typeof window === 'undefined' || !props.controlScroll) return;
+  if (!slider.value?.swiper || !props.controlScroll) return;
 
-  const currentScrollPosition = window.pageYOffset;
-  const direction = currentScrollPosition > lastScrollPosition ? 'down' : 'up';
+  const direction = window.pageYOffset > lastScrollPosition ? 'down' : 'up';
+  direction === 'down' ? slider.value.swiper.slideNext() : slider.value.swiper.slidePrev();
+  lastScrollPosition = window.pageYOffset;
+};
 
-  if (direction === 'down') {
-    slider.value.swiper.slideNext();
+const manageEventListeners = (addListeners) => {
+  if (addListeners) {
+    window.addEventListener('wheel', handleWheel, { passive: false });
+    window.addEventListener('scroll', handleScroll, { passive: true });
   } else {
-    slider.value.swiper.slidePrev();
+    window.removeEventListener('wheel', handleWheel);
+    window.removeEventListener('scroll', handleScroll);
   }
-
-  lastScrollPosition = currentScrollPosition;
 };
 
-watch(() => props.controlScroll, (newValue) => {
-  if(props.controlScroll) {
-    if (newValue) {
-      window.addEventListener('wheel', handleWheel, { passive: false });
-      window.addEventListener('scroll', handleScroll, { passive: true });
-    } else {
-      window.removeEventListener('wheel', handleWheel);
-      window.removeEventListener('scroll', handleScroll);
-    }
-  }
-}, { immediate: true });
-
-const zoomStyle = computed(() => ({
-  transform: activeSlide.value === 1 ? `scale(${props.sliderBackgroundImageZoomScale})` : 'scale(1)',
-  transition: 'transform 0.3s ease-in-out',
-}));
-
-onMounted(() => {
-  if(!slider.value) return
-  activeSlide.value = slider?.value?.swiper?.realIndex;
-  if (pagination.value.length > 0) {
-    pagination.value[0].active = true;
+let lastScrollPosition = window.pageYOffset;
+
+watch(
+  () => props.controlScroll,
+  (newValue) => manageEventListeners(newValue),
+  { immediate: true }
+);
+
+watch(() => props.slides, (newSlides) => {
+  if (slider.value?.swiper) {
+    slider.value.swiper.update();
   }
 });
 
+onMounted(async () => {
+  activeSlide.value = slider.value?.swiper?.realIndex;
+  if (pagination.value.length > 0) pagination.value[0].active = true;
+});
+
 onUnmounted(() => {
-  if (props.controlScroll) {
-    window.removeEventListener('wheel', handleScroll);
+  manageEventListeners(false);
+  if (slider.value?.swiper && !slider.value.swiper.destroyed) {
+    slider.value.swiper.destroy();
   }
 });
 </script>
diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts
index e97c7bf..6a74ea8 100644
--- a/src/runtime/plugin.ts
+++ b/src/runtime/plugin.ts
@@ -10,5 +10,5 @@ export default defineNuxtPlugin(nuxtApp => {
   nuxtApp.vueApp.use(vuetifyInstance);
   nuxtApp.vueApp.directive("maska", vMaska);
 
-  if (!process.server) console.log('❤️ Initialized Vuetify 3', vuetifyInstance);
+  if (!process.server && process.env.NODE_ENV !== 'production') console.log('❤️ Initialized Vuetify 3', vuetifyInstance);
 });