Files
interview-demo-code/spa/src/components/SearchInput.vue
2025-10-03 22:32:31 +03:00

40 lines
990 B
Vue

<template>
<div class="search-wrapper w-full">
<label class="input w-full">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2.5"
fill="none"
stroke="currentColor"
>
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.3-4.3"></path>
</g>
</svg>
<input
readonly
class="grow input-lg w-full"
placeholder="Поиск по магазину"
@click="showSearchPage"
/>
</label>
</div>
</template>
<script setup>
import {useRouter} from "vue-router";
import {useSearchStore} from "@/stores/SearchStore.js";
const router = useRouter();
function showSearchPage() {
router.push({name: 'search'});
useSearchStore().reset();
window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
}
</script>