mohadese-nm
44 lines
1.0 KiB
Vue
44 lines
1.0 KiB
Vue
<template>
|
|
<div class="search-box" @click="active = true">
|
|
<i class="isax isax-search-normal-1" />
|
|
<template v-if="active">
|
|
<InputText v-model="q" :placeholder="$t('search')" autofocus @blur="active = false"
|
|
@keypress.enter="search" />
|
|
</template>
|
|
<template v-else>
|
|
<span>{{ $t("search") }}</span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const active = ref(false);
|
|
const q = ref(route.query.q || '');
|
|
|
|
const search = () => router.push({ path: '/search', query: { q: q.value } })
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.search-box {
|
|
@apply grow flex gap-1.5 items-center h-10 bg-[#F2F2F2] rounded-[0.4rem] px-3;
|
|
|
|
input {
|
|
@apply h-full text-xs px-0 w-auto bg-transparent border-0 rtl focus:border-0 focus:shadow-none #{!important};
|
|
}
|
|
|
|
i {
|
|
@apply text-lg ml-1.5;
|
|
}
|
|
|
|
span {
|
|
@apply text-[#5D5D5D] text-xs font-vazir;
|
|
}
|
|
|
|
img {
|
|
@apply w-24 h-5;
|
|
}
|
|
}
|
|
</style>
|