feat: add carousel for images

spa/src/components/ProductList.vue

@@ -4,11 +4,13 @@
       <h2 class="sr-only">Products</h2>
 
       <div class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
-        <a v-for="product in products" :key="product.id" class="group"
-           @touchstart="handleHaptic"
-        >
-          <img :src="product.image" :alt="product.name"
-               class="aspect-square w-full rounded-lg bg-gray-200 object-cover group-hover:opacity-75 xl:aspect-7/8"/>
+        <a v-for="product in products" :key="product.id" class="group">
+          <div class="carousel carousel-center rounded-box" ref="carouselRef" @scroll.passive="onScroll">
+            <div v-for="(image, i) in product.images" :key="i" class="carousel-item">
+              <img :src="image.url" :alt="image.alt"/>
+            </div>
+          </div>
+
           <h3 class="mt-4 text-sm text-gray-700">{{ product.name }}</h3>
           <p class="mt-1 text-lg font-medium text-gray-900">{{ product.price }}</p>
         </a>
@@ -24,11 +26,25 @@ import {onMounted, ref} from "vue";
 const products = ref([]);
 
 onMounted(async () => {
-  const {data} = await $fetch('https://ocstore.nikitakiselev.ru/index.php?route=extension/tgshop/handle&api_action=products');
+  const {data} = await $fetch('/index.php?route=extension/tgshop/handle&api_action=products');
   products.value = data;
 });
 
-function handleHaptic() {
-  window.Telegram?.WebApp?.HapticFeedback?.impactOccurred?.('heavy');
+const carouselRef = ref();
+let lastScrollLeft = 0;
+function onScroll(e) {
+  const scrollLeft = e.target.scrollLeft;
+  const delta = Math.abs(scrollLeft - lastScrollLeft);
+
+  if (delta > 30) {
+    hapticFeedback();
+    lastScrollLeft = scrollLeft;
+  }
+}
+
+function hapticFeedback(strength = 'light') {
+  if (window.Telegram.WebApp.version >= '6.1') {
+    window.Telegram.WebApp.HapticFeedback.impactOccurred(strength);
+  }
 }
 </script>

spa/vite.config.js

@@ -12,4 +12,14 @@ export default defineConfig({
     sourcemap: true,
     manifest: true,
   },
+
+  server: {
+    proxy: {
+      '/index.php': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+        rewrite: path => path,
+      }
+    }
+  },
 });