feat: support swipe to complete on mobile

package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.13",
+    "@vueuse/core": "^10.9.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.23",
     "tailwindcss": "^3.3.2",

src/NextHint.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="vue-tab-complete-wrapper">
+
+  <div ref="nexthintRef" class="vue-tab-complete-wrapper">
     <input
       v-model="resultQuery"
       type="text"
@@ -10,13 +11,25 @@
 
     <div class="input-overlay">
       <span class="result-query">{{ resultQuery }}</span>
-      <span class="result-suggest">{{ displayRelatedResult }}</span>
+      <span class="result-suggest">
+        {{ displayRelatedResult }}
+
+        <span class="swiper" v-if="displayRelatedResult && browserWidth < 768">
+          swipe 
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
+          </svg>
+
+        </span>
+      </span>
+
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { watch, computed, ref } from 'vue'
+import { useSwipe, useWindowSize } from '@vueuse/core'
 
 interface Props {
   suggestions: Array<string>
@@ -30,6 +43,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['change'])
 
+const nexthintRef = ref(null)
+const { width: browserWidth } = useWindowSize()
+const { direction } = useSwipe(nexthintRef)
+
 const resultQuery = ref('')
 
 const mostRelatedResult = computed(() => {
@@ -66,6 +83,15 @@ const onKeyDown = (event: any) => {
 watch(resultQuery, () => {
   emit('change', resultQuery.value)
 })
+
+watch(direction, (newDirection) => {
+  if (newDirection === 'right') {
+    if(mostRelatedResult.value) {
+      resultQuery.value = mostRelatedResult.value
+    }
+    
+  }
+})
 </script>
 
 <style lang="scss">
@@ -97,7 +123,22 @@ watch(resultQuery, () => {
     }
 
     .result-suggest {
-      color: #9CA3AF; 
+      color: #9CA3AF;
+
+      .swiper {
+        position: relative;
+        margin-left: .8rem; 
+        font-size: .8rem;
+        color: #cfd0d1; 
+
+        svg {
+          position:absolute;
+          top: -2px;
+          right: -60%;
+          width: 18px;
+          height: 18px;
+        }
+      }
     }
   }
 }

yarn.lock

@@ -216,6 +216,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
+"@types/web-bluetooth@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
+  integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
+
 "@vitejs/plugin-vue@^4.2.3":
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz#057d2ded94c4e71b94e9814f92dcd9306317aa46"
@@ -337,6 +342,28 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.19.tgz#28105147811bcf1e6612bf1c9ab0c6d91ada019c"
   integrity sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw==
 
+"@vueuse/core@^10.9.0":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.9.0.tgz#7d779a95cf0189de176fee63cee4ba44b3c85d64"
+  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"
+
+"@vueuse/[email protected]":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.9.0.tgz#769a1a9db65daac15cf98084cbf7819ed3758620"
+  integrity sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==
+
+"@vueuse/[email protected]":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.9.0.tgz#13af2a348de15d07b7be2fd0c7fc9853a69d8fe0"
+  integrity sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==
+  dependencies:
+    vue-demi ">=0.14.7"
+
 ajv-keywords@^3.5.2:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
@@ -1232,6 +1259,11 @@ vite@^4.4.5:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-demi@>=0.14.7:
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"
+  integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
+
 vue-template-compiler@^2.7.14:
   version "2.7.16"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"