Merge pull request #139 from zackha/dev

Dev

app/app.config.ts

@@ -2,5 +2,6 @@ export default defineAppConfig({
   siteName: 'NuxtCommerce',
   ui: {
     primary: 'red',
+    gray: 'neutral',
   },
 });

app/components/ImageSliderWithModal.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const { isOpenImageSliderModal } = useComponents();
+const props = defineProps({
+  product: Object,
+});
+
+const images = computed(() => {
+  const mainImage = props.product?.image?.sourceUrl ? [props.product.image.sourceUrl] : [];
+  const additionalImages = props.product?.galleryImages?.nodes.map((image: any) => image.sourceUrl) || [];
+  return mainImage.concat(additionalImages);
+});
+</script>
+
+<template>
+  <UModal
+    :ui="{
+      overlay: {
+        background: 'bg-neutral-200/90 dark:bg-neutral-800/90 backdrop-blur-sm',
+      },
+      background: 'bg-bg-transparent dark:bg-bg-transparent',
+      container: 'items-center',
+      shadow: 'shadow-none',
+    }">
+    <div
+      @click="isOpenImageSliderModal = false"
+      class="flex p-2 absolute z-50 right-3 top-3 bg-white/50 hover:bg-white rounded-full items-center justify-center shadow transition backdrop-blur-sm">
+      <UIcon name="i-iconamoon-close" class="text-black" size="16" />
+    </div>
+    <UCarousel
+      :items="images"
+      :ui="{
+        item: 'basis-full',
+        container: 'rounded-3xl',
+        indicators: {
+          wrapper: 'relative bottom-0 mt-4',
+        },
+      }"
+      class="w-full mx-auto"
+      indicators>
+      <template #default="{ item }">
+        <img :src="item" class="w-full select-none" draggable="false" />
+      </template>
+      <template #indicator="{ onClick, page, active }">
+        <UButton :label="String(page)" :variant="active ? 'solid' : 'outline'" size="2xs" class="rounded-full min-w-6 justify-center" @click="onClick(page)" />
+      </template>
+    </UCarousel>
+  </UModal>
+</template>

app/composables/useComponents.js

@@ -0,0 +1,7 @@
+const isOpenImageSliderModal = ref(false);
+
+export const useComponents = () => {
+  return {
+    isOpenImageSliderModal,
+  };
+};

app/pages/product/[id].vue

@@ -1,6 +1,7 @@
 <script setup>
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Navigation, Pagination, Thumbs } from 'swiper/modules';
+const { isOpenImageSliderModal } = useComponents();
 
 import 'swiper/css';
 import 'swiper/css/navigation';
@@ -89,12 +90,15 @@ const { handleAddToCart, addToCartButtonStatus } = useCart();
           :modules="modules"
           :thumbs="{ swiper: thumbsSwiper }"
           class="lg:w-[530px] lg:h-[530px] xl:w-[600px] xl:h-[600px] lg:rounded-2xl">
-          <swiper-slide><NuxtImg :alt="product.name" class="h-full w-full bg-neutral-200 dark:bg-neutral-800" :src="product.image?.sourceUrl" /></swiper-slide>
-          <swiper-slide v-for="(node, i) in product.galleryImages?.nodes" :key="i">
+          <swiper-slide @click="isOpenImageSliderModal = true">
+            <NuxtImg :alt="product.name" class="h-full w-full bg-neutral-200 dark:bg-neutral-800" :src="product.image?.sourceUrl" />
+          </swiper-slide>
+          <swiper-slide @click="isOpenImageSliderModal = true" v-for="(node, i) in product.galleryImages?.nodes" :key="i">
             <NuxtImg :alt="product.name" class="h-full w-full bg-neutral-200 dark:bg-neutral-800" :src="node.sourceUrl" />
           </swiper-slide>
         </swiper>
       </div>
+      <ImageSliderWithModal :product="product" v-model="isOpenImageSliderModal" />
       <div class="w-full lg:max-w-[28rem]">
         <div class="flex-col flex gap-4 lg:max-h-[530px] xl:max-h-[600px] overflow-hidden">
           <div class="p-3 lg:pb-4 lg:p-0 border-b border-[#efefef] dark:border-[#262626]">

package.json

@@ -17,8 +17,8 @@
   "dependencies": {
     "@nuxt/image": "^1.8.0",
     "@nuxt/ui": "^2.18.4",
-    "notivue": "^2.4.4",
-    "nuxt": "^3.13.0",
+    "notivue": "^2.4.5",
+    "nuxt": "^3.13.1",
     "nuxt-graphql-request": "^8.1.1",
     "swiper": "^11.1.12",
     "vue": "latest"