From 8ac93e4ec313256fe1fc68b5b652b66aee94197f Mon Sep 17 00:00:00 2001
From: Zh3nyaZh3nya <mr.happy.2000@mail.ru>
Date: Wed, 11 Dec 2024 13:35:24 +0500
Subject: [PATCH] added new components galleries

---
 package.json                                  |   2 +-
 playground/nuxt.config.ts                     |   4 +-
 src/module.ts                                 |  20 ++
 src/runtime/components/Pages/TestVuetify.vue  | 173 ++++++++++---
 src/runtime/components/Parts/Gallery/Row.vue  |  88 +++++++
 src/runtime/components/Parts/Gallery/View.vue | 229 ++++++++++++++++++
 6 files changed, 487 insertions(+), 29 deletions(-)
 create mode 100644 src/runtime/components/Parts/Gallery/Row.vue
 create mode 100644 src/runtime/components/Parts/Gallery/View.vue

diff --git a/package.json b/package.json
index 59bd713..ea34687 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ibecsystems/nuxt3-ui-kit",
-  "version": "1.0.57",
+  "version": "1.0.58",
   "description": "Ibec Nuxt3 UI components",
   "repository": {
     "type": "git",
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 24c50f6..b40e00a 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -51,7 +51,9 @@ export default defineNuxtConfig({
       'partsCardErgNews',
       'partsFilesErg',
       'partsPagination',
-      'pagesErrorErg'
+      'pagesErrorErg',
+      'partsGalleryRow',
+      'partsGalleryView'
     ]
   },
   devtools: { enabled: false },
diff --git a/src/module.ts b/src/module.ts
index ab6c542..b4f8511 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -192,5 +192,25 @@ export default defineNuxtModule<ModuleOptions>({
         ),
       });
     }
+
+    // Gallery
+
+    if (options.components.includes("partsGalleryRow")) {
+      addComponent({
+        name: "partsGalleryRow",
+        filePath: resolver.resolve(
+          "runtime/components/Parts/Gallery/Row.vue"
+        ),
+      });
+    }
+
+    if (options.components.includes("partsGalleryView")) {
+      addComponent({
+        name: "partsGalleryView",
+        filePath: resolver.resolve(
+          "runtime/components/Parts/Gallery/View.vue"
+        ),
+      });
+    }
   },
 });
diff --git a/src/runtime/components/Pages/TestVuetify.vue b/src/runtime/components/Pages/TestVuetify.vue
index 9e14799..c1a7138 100644
--- a/src/runtime/components/Pages/TestVuetify.vue
+++ b/src/runtime/components/Pages/TestVuetify.vue
@@ -42,33 +42,43 @@
     <NuxtPage class="bg-primary" />
     <section class="h-100 bg-primary">
       <v-container class="px-4">
-        <client-only>
-          <partsSlider
-            id="slider-about"
-            :slides="slides"
-            slider-allow-touch-move="false"
-            slider-speed="500"
-            :static-chips="{
-              text: 'about',
-              attrs: {
-                class: 'mt-12 mb-8 ml-9 ml-md-13',
-                color: 'white',
-                variant: 'outlined',
-                style: 'margin-top: 123px !important;'
-              }
-            }"
-            :slider-pagination="true"
-            :show-buttons="false"
-            slider-direction="vertical"
-            :slider-pagination-active-variant="'white'"
-            :height="'800px'"
-            :control-scroll="true"
-            :slider-background-image="'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'"
-            :slider-background-image-zoom="true"
-            :slider-background-image-zoom-scale="1.5"
-            class="main__about__slider"
-          />
-        </client-only>
+<!--        <client-only>-->
+<!--          <partsSlider-->
+<!--            id="slider-about"-->
+<!--            :slides="slides"-->
+<!--            slider-allow-touch-move="false"-->
+<!--            slider-speed="500"-->
+<!--            :static-chips="{-->
+<!--              text: 'about',-->
+<!--              attrs: {-->
+<!--                class: 'mt-12 mb-8 ml-9 ml-md-13',-->
+<!--                color: 'white',-->
+<!--                variant: 'outlined',-->
+<!--                style: 'margin-top: 123px !important;'-->
+<!--              }-->
+<!--            }"-->
+<!--            :slider-pagination="true"-->
+<!--            :show-buttons="false"-->
+<!--            slider-direction="vertical"-->
+<!--            :slider-pagination-active-variant="'white'"-->
+<!--            :height="'800px'"-->
+<!--            :control-scroll="true"-->
+<!--            :slider-background-image="'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'"-->
+<!--            :slider-background-image-zoom="true"-->
+<!--            :slider-background-image-zoom-scale="1.5"-->
+<!--            class="main__about__slider"-->
+<!--          />-->
+<!--        </client-only>-->
+        <v-btn @click="model = !model">gfdgfsdgf</v-btn>
+        <parts-gallery-row
+          :blocks="gallery2"
+          :disable-links="false"
+        />
+        <parts-gallery-view
+          v-model="model"
+          :gallery="gallery[0].images"
+          :preview-image="preview"
+        />
       </v-container>
     </section>
 
@@ -100,6 +110,115 @@
 </template>
 
 <script setup>
+import { ref} from "vue"
+const model = ref(false)
+const gallery2 = ref([
+  {
+    category: {
+      id: 1,
+      title: 'asd'
+    },
+    id: 1,
+    title: 'dasdsad',
+    preview: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+  },
+  {
+    category: {
+      id: 1,
+      title: 'asd'
+    },
+    id: 1,
+    title: 'dasdsad',
+    preview: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+  },
+  {
+    category: {
+      id: 1,
+      title: 'asd'
+    },
+    id: 1,
+    title: 'dasdsad',
+    preview: 'https://fastly.picsum.photos/id/523/500/300.jpg?hmac=4pQD_Jbc8uFrr01uI1PtSZM3wIjP-pTu7ZogoeRwVFw',
+  },
+  {
+    category: {
+      id: 1,
+      title: 'asd'
+    },
+    id: 1,
+    title: 'dasdsad',
+    preview: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'
+  },
+])
+const gallery = ref([
+  {
+    category: {
+      id: 1,
+      title: 'asd'
+    },
+    id: 1,
+    title: 'dasdsad',
+    images: [
+      {
+        image: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+        active: false,
+        id: 1,
+      },
+      {
+        image: 'https://fastly.picsum.photos/id/523/500/300.jpg?hmac=4pQD_Jbc8uFrr01uI1PtSZM3wIjP-pTu7ZogoeRwVFw',
+        active: false,
+        id: 2,
+      },
+      {
+        image: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+        active: false,
+        id: 3,
+      },
+      {
+        image: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+        active: false,
+        id: 4,
+      },
+      {
+        image: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+        active: false,
+        id: 5,
+      },
+      {
+        image: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+        active: false,
+        id: 6,
+      },
+      {
+        image: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+        active: false,
+        id: 7,
+      },
+      {
+        image: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+        active: false,
+        id: 8,
+      },
+      {
+        image: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+        active: false,
+        id: 9,
+      },
+      {
+        image: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+        active: false,
+        id: 10,
+      },
+      {
+        image: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+        active: false,
+        id: 11,
+      },
+
+    ]
+  }
+])
+const preview = ref(gallery.value[0].images[0])
 const contacts = [
   {
     title: 'asd',
diff --git a/src/runtime/components/Parts/Gallery/Row.vue b/src/runtime/components/Parts/Gallery/Row.vue
new file mode 100644
index 0000000..faa5b49
--- /dev/null
+++ b/src/runtime/components/Parts/Gallery/Row.vue
@@ -0,0 +1,88 @@
+<template>
+  <swiper-container
+    ref="swiperRefGalleryBlocks"
+    :slides-per-view="blocks.length === 4 ? (lgAndUp ? 4 : (mdAndUp ? 3.2 : 1.2)) : (lgAndUp ? 4.2 : (mdAndUp ? 3.2 : 1.2))"
+    :space-between="lgAndUp ? 20 : 8"
+    direction="horizontal"
+    class="row-gallery-blocks d-block"
+    height="290px"
+    v-bind="swiperAttrs"
+  >
+    <swiper-slide
+      v-for="(block, index) in blocks"
+      :key="`gallery-block-${index}`"
+    >
+      <template v-if="!disableLinks">
+        <nuxt-link :to="`/gallery/${block.id}`">
+          <v-card elevation="0" height="290px" class="row-gallery-blocks-card bg-transparent">
+            <v-img :src="block.preview" height="290px" width="100%" cover class="row-gallery-blocks-card-image" />
+            <div class="row-gallery-blocks-card-title py-3 px-4">
+              <span>{{ block.category.title }}</span>
+            </div>
+          </v-card>
+        </nuxt-link>
+      </template>
+      <template v-else>
+        <v-card elevation="0" height="290px" class="row-gallery-blocks-card bg-transparent">
+          <v-img :src="block.preview" height="290px" width="100%" cover class="row-gallery-blocks-card-image" />
+          <div class="row-gallery-blocks-card-title py-3 px-4">
+            <span>{{ block.category.title }}</span>
+          </div>
+        </v-card>
+      </template>
+
+    </swiper-slide>
+  </swiper-container>
+</template>
+
+<script setup lang="ts">
+import { useAttrs } from "vue";
+import { register } from "swiper/element/bundle";
+import { useDisplay } from "vuetify";
+import { useMainStore } from "../../../store/mainStore";
+
+const mainStore = useMainStore();
+
+const attrs = useAttrs();
+const swiperAttrs = {
+  ...mainStore.getObjectPropertiesWithPrefix(attrs, "swiper"),
+};
+
+register()
+
+const props = defineProps({
+  blocks: {
+    type: Array,
+  },
+  disableLinks: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const { mdAndUp, lgAndUp } = useDisplay()
+</script>
+
+<style scoped lang="scss">
+.row-gallery-blocks {
+  &-card {
+    position: relative;
+    &-image {
+      border-radius: 32px;
+      @media(max-width: 960px) {
+        border-radius: 16px;
+      }
+    }
+    &-title {
+      position: absolute;
+      bottom: 24px;
+      left: 24px;
+      background: rgba(163, 163, 163, 0.60);
+      border-radius: 32px;
+      span {
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/runtime/components/Parts/Gallery/View.vue b/src/runtime/components/Parts/Gallery/View.vue
new file mode 100644
index 0000000..0ed1632
--- /dev/null
+++ b/src/runtime/components/Parts/Gallery/View.vue
@@ -0,0 +1,229 @@
+<template>
+  <v-overlay v-model="localModelValue" class="bg-background-overlay gallery-view-overlay">
+    <v-container class="pa-md-16 px-0 px-md-16 gallery-view-container">
+      <div class="mb-6 cursor-pointer gallery-view-close px-1 px-md-0" @click="localModelValue = false">
+        <v-icon icon="mdi-close"></v-icon>
+      </div>
+      <v-row class="d-flex flex-column-reverse flex-md-row">
+        <v-col cols="12" md="2">
+          <client-only>
+            <swiper-container
+              ref="thumbsSwiperRef"
+              :direction="mdAndUp ? 'vertical' : 'horizontal'"
+              class="gallery-view-swiper-blocks d-block"
+              :style="{ height: mdAndUp ? '100vh' : '100%', overflow: 'auto' }"
+              centeredSlides
+              :slides-per-view="mdAndUp ? 6.8 : 4.2"
+              space-between="0"
+              mousewheel
+              free-mode
+              @slideChange="onThumbSlideChange"
+            >
+              <swiper-slide
+                v-for="(img, index) in localGallery"
+                :key="`gallery-thumb-${index}`"
+                @click="setActiveImage(index)"
+                class="gallery-view-swiper-blocks-slide"
+              >
+                <v-card
+                  elevation="0"
+                  class="gallery-view-swiper-blocks-slide-card bg-transparent cursor-pointer"
+                  :class="{ active: img.active }"
+                >
+                  <v-img :src="img.image" height="120px" width="100%" cover class="rounded-lg gallery-view-swiper-blocks-slide-card-img" />
+                </v-card>
+              </swiper-slide>
+            </swiper-container>
+          </client-only>
+        </v-col>
+        <v-col cols="12" md="10" class="position-relative">
+          <client-only>
+            <swiper-container
+              ref="mainSwiperRef"
+              class="gallery-view-main px-1"
+              slides-per-view="1"
+              navigation
+              pagination
+              :style="{ 'height': mdAndUp ? '574px' : '100%' }"
+              @slideChange="onMainSlideChange"
+            >
+              <swiper-slide
+                v-for="(img, index) in gallery"
+                :key="`gallery-main-${index}`"
+              >
+                <v-img
+                  :src="img.image"
+                  max-width="826px"
+                  cover
+                  min-height="250px"
+                  width="100%"
+                  max-height="574px"
+                  class="rounded-lg"
+                />
+              </swiper-slide>
+            </swiper-container>
+
+          </client-only>
+          <div class="main-controls mb-2" v-if="mdAndUp">
+            <v-btn icon color="primary" rounded="lg" @click="mainPrev">
+              <v-icon icon="mdi-chevron-left"></v-icon>
+            </v-btn>
+            <v-btn icon color="primary" rounded="lg" @click="mainNext">
+              <v-icon icon="mdi-chevron-right"></v-icon>
+            </v-btn>
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-overlay>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { register } from "swiper/element/bundle";
+import { useDisplay } from "vuetify";
+
+register();
+const { mdAndUp } = useDisplay()
+
+const props = defineProps({
+  gallery: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+  previewImage: {
+    type: Object,
+    default: null,
+  },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const mainSwiperRef = ref();
+const thumbsSwiperRef = ref();
+const localGallery = ref([...props.gallery]);
+
+function mainPrev() {
+  const swiper = mainSwiperRef.value.swiper;
+  swiper.slidePrev();
+  updateActiveImage(swiper.activeIndex);
+}
+
+function mainNext() {
+  const swiper = mainSwiperRef.value.swiper;
+  swiper.slideNext();
+  updateActiveImage(swiper.activeIndex);
+}
+
+function setActiveImage(index) {
+  updateActiveImage(index);
+
+  if (mainSwiperRef.value?.swiper) {
+    mainSwiperRef.value.swiper.slideTo(index);
+  }
+
+  if (thumbsSwiperRef.value?.swiper) {
+    thumbsSwiperRef.value.swiper.slideTo(index);
+  }
+}
+
+function updateActiveImage(index) {
+  localGallery.value.forEach((img, idx) => {
+    img.active = idx === index;
+  });
+
+  if (thumbsSwiperRef.value?.swiper) {
+    thumbsSwiperRef.value.swiper.slideTo(index);
+    thumbsSwiperRef.value.swiper.update();
+  }
+}
+
+function onMainSlideChange() {
+  const activeIndex = mainSwiperRef.value.swiper.activeIndex;
+  updateActiveImage(activeIndex);
+  if (thumbsSwiperRef.value?.swiper) {
+    thumbsSwiperRef.value.swiper.slideTo(activeIndex);
+  }
+}
+
+function onThumbSlideChange() {
+  const activeIndex = thumbsSwiperRef.value.swiper.activeIndex;
+  setActiveImage(activeIndex);
+}
+
+const localModelValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+onMounted(() => {
+  if(mdAndUp.value) {
+    localGallery.value.push({id: localGallery.value.length, image: '', active: false})
+  }
+
+  if (props.previewImage) {
+    const previewIndex = localGallery.value.findIndex(
+      (img) => img.image === props.previewImage.image
+    );
+
+    if (previewIndex !== -1) {
+      updateActiveImage(previewIndex);
+      mainSwiperRef.value?.swiper.slideTo(previewIndex);
+    } else {
+      updateActiveImage(0);
+    }
+  } else {
+    updateActiveImage(0);
+  }
+})
+</script>
+
+<style lang="scss">
+.gallery-view-overlay {
+  .v-overlay__content {
+    width: 100%;
+    @media (max-width: 960px) {
+      display: flex;
+      align-items: center;
+      height: 100%;
+    }
+  }
+  .gallery-view-close {
+    @media (max-width: 960px) {
+      position: absolute;
+      top: 40px;
+    }
+
+  }
+  .gallery-view-swiper-blocks-slide-card {
+    border: 3px solid transparent;
+    border-radius: 12px;
+    &.active {
+      border-color: rgb(var(--v-theme-primary));
+    }
+  }
+  .gallery-view-main {
+    .swiper-pagination {
+      bottom: 10px;
+    }
+    .swiper-button-next,
+    .swiper-button-prev {
+      color: rgb(var(--v-theme-primary));
+    }
+  }
+  .thumbs-controls,
+  .main-controls {
+    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+}
+</style>