touch even

front/package-lock.json

@@ -8,15 +8,16 @@
       "name": "front",
       "version": "0.0.0",
       "dependencies": {
+        "@vueuse/core": "^10.9.0",
         "pinia": "^2.1.7",
         "reset-css": "^5.0.2",
         "vue": "^3.4.21",
-        "vue-3d-model": "^2.0.0-alpha.4",
+        "vue-3d-model": "^2.0.0-alpha.4"
-        "vue3-touch-events": "^4.1.8"
       },
       "devDependencies": {
         "@iconify-json/mdi": "^1.1.66",
         "@vitejs/plugin-vue": "^5.0.4",
+        "@vue/compiler-sfc": "^3.2.31",
         "sass": "^1.75.0",
         "typescript": "^5.2.2",
         "unplugin-icons": "^0.18.5",
@@ -767,6 +768,11 @@
         "@types/webxr": "*"
       }
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
     "node_modules/@types/webxr": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.15.tgz",
@@ -931,6 +937,89 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.25.tgz",
       "integrity": "sha512-k0yappJ77g2+KNrIaF0FFnzwLvUBLUYr8VOwz+/6vLsmItFp51AcxLL7Ey3iPd7BIRyWPOcqUjMnm7OkahXllA=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
+      "integrity": "sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.9.0",
+        "@vueuse/shared": "10.9.0",
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz",
+      "integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",
+      "integrity": "sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==",
+      "dependencies": {
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -2205,11 +2294,6 @@
         "typescript": "*"
       }
     },
-    "node_modules/vue3-touch-events": {
-      "version": "4.1.8",
-      "resolved": "https://registry.npmjs.org/vue3-touch-events/-/vue3-touch-events-4.1.8.tgz",
-      "integrity": "sha512-8Zs0mj5k/7R579JHsc5w1V2IqAkNlz2gJs18bRV4T5WyCMfd5sBf2ESJ2xR8z+n7ypgK8fQO5MmDOPal0Evf3Q=="
-    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",

front/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "pinia": "^2.1.7",
     "reset-css": "^5.0.2",
-    "@vueuse/core": "^8.2.0",
+    "@vueuse/core": "^10.9.0",
     "vue": "^3.4.21",
     "vue-3d-model": "^2.0.0-alpha.4"
   },

front/src/App.vue

@@ -4,6 +4,8 @@ import { ModelFbx } from 'vue-3d-model';
 import RandomIcon from './components/RandomIcon.vue';
 import { useProductStore } from './stores/product';
 import type { ProductInfo } from './stores/product';
+import { useSwipe } from '@vueuse/core';
+import type { UseSwipeDirection } from '@vueuse/core';
 
 const IMAGE_URL = import.meta.env.VITE_IMAGE_URL ?? ''
 
@@ -22,8 +24,27 @@ const setActive = (id: number) => {
 }
 
 const target = ref<HTMLElement | null>(null)
+useSwipe(target, {
+  onSwipeEnd(_: TouchEvent, direction: UseSwipeDirection) {
+    const index = products.list.findIndex(el => el.id == state.active_product?.id)
+    if (direction === 'right') {
+      if (index == products.list.length - 1) {
+        setActive(products.list[0].id)
+      } else {
+        setActive(products.list[index + 1].id)
+      }
+    } else if (direction === 'left') {
+      if (index == 0) {
+        setActive(products.list[products.list.length - 1].id)
+      } else {
+        setActive(products.list[index - 1].id)
+      }
+    }
+  }
+})
 
 onMounted(async () => {
+  useSwipe
   products.getData()
 })
 </script>

package-lock.json

@@ -1,105 +0,0 @@
-{
-  "name": "interactive-table",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "@vueuse/core": "^10.9.0",
-        "vue-template-compiler": "^2.7.16"
-      }
-    },
-    "node_modules/@types/web-bluetooth": {
-      "version": "0.0.20",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
-      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
-    },
-    "node_modules/@vueuse/core": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
-      "integrity": "sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "10.9.0",
-        "@vueuse/shared": "10.9.0",
-        "vue-demi": ">=0.14.7"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/metadata": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz",
-      "integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/shared": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",
-      "integrity": "sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==",
-      "dependencies": {
-        "vue-demi": ">=0.14.7"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/de-indent": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="
-    },
-    "node_modules/he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "bin": {
-        "he": "bin/he"
-      }
-    },
-    "node_modules/vue": {
-      "version": "2.6.14",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
-      "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==",
-      "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
-      "peer": true
-    },
-    "node_modules/vue-demi": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/vue-template-compiler": {
-      "version": "2.7.16",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
-      "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
-      "dependencies": {
-        "de-indent": "^1.0.2",
-        "he": "^1.2.0"
-      }
-    }
-  }
-}

package.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": {
-    "@vueuse/core": "^10.9.0",
-    "vue-template-compiler": "^2.7.16"
-  }
-}