haditha_ui/components/hadith/AutoComplation.vue
2025-02-18 16:26:13 +03:30

191 lines
3.8 KiB
Vue

<script setup lang="ts">
const props = defineProps({
message: {
type: String,
},
});
const emit = defineEmits(["response-ready"]);
const users = ref<Sample[]>([
{
label: "Leanne Graham",
value: "1",
icon: "i-lucide-clock",
},
{
label: "Ervin Howell",
value: "2",
icon: "i-lucide-clock",
},
{
label: "Clementine Bauch",
value: "3",
icon: "i-lucide-clock",
},
]);
export type Sample = { label: string; value: string; icon: string };
const searchTerm = ref("");
const open = ref(false);
const value = ref<Sample>();
const loading = ref(false);
// fetch history list from backend(ssr)
// const { data: users, status } = await useFetch(
// "https://jsonplaceholder.typicode.com/users",
// {
// transform: (data: { id: number; name: string }[]) => {
// return (
// data?.map((user) => ({
// label: user.name,
// value: String(user.id),
// avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` },
// })) || []
// );
// },
// lazy: true,
// }
// );
const onBlur = () => {
// console.info("onBlue");
};
const onChange = () => {
// console.info("onChange");
};
const onUpdateModel = (newVal) => {
// console.info("onUpdateModel", newVal);
};
const onSearch = () => {
console.info("onSearch");
};
const onKeyDown = () => {
// console.info("onKeyDown");
};
const onKeyUp = () => {
// console.info("onKeyUp");
};
const onSend = () => {
console.info("onSend");
emit("response-ready", "Hello from Child!");
};
</script>
<template>
<div class="hadith-search-root">
<UInputMenu
class="w-full"
:items="users || []"
v-model="value"
v-model:open="open"
v-model:search-term="searchTerm"
placeholder="هوشمند جستجو کنید..."
:ui="{
base: ['hadith-search-input'],
}"
:content="{
align: 'start',
side: 'bottom',
sideOffset: 4,
}"
:loading="loading"
highlight
highlightOnHover
@focus="open = true"
@blur="onBlur"
@change="onChange"
@update:modelValue="onUpdateModel"
@update:searchTerm="onUpdateModel"
@keydown="onKeyDown"
@keyup="onKeyUp"
@keydown.enter="onSend"
>
</UInputMenu>
<UButton class="my-trailing-button">
<UIcon @click.prevent="onSearch" name="i-lucide-search" />
</UButton>
</div>
</template>
<style>
.hadith-search-root {
position: relative;
max-width: 656px;
width: 100%;
margin: 0 1em;
&::before {
content: "";
position: absolute;
left: 1em;
right: 1em;
top: 50%;
backdrop-filter: blur(60px);
background: linear-gradient(137.41deg, #ffffff -42.82%, #e5e0ff 87.9%);
filter: blur(60px);
width: 626px;
height: 68px;
z-index: 0;
}
}
.my-trailing-button {
position: absolute;
z-index: 1;
width: 48px;
height: 48px;
justify-content: center;
align-items: center;
padding: 0;
border-radius: 50px;
background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
left: 12px;
top: 0;
bottom: 0;
margin: auto;
transition: all 0.2s ease-in-out;
&:hover {
transition: all 0.2s ease-in-out;
background: linear-gradient(320.71deg, #54ecaa 6.56%, #b6f0d9 69.69%);
}
& > span {
width: 18px;
height: 18px;
background-image: linear-gradient(102.02deg, #4be8ae 7.38%, #00a762 91.78%);
}
}
.hadith-search-input {
z-index: 0;
height: 72px;
justify-content: space-between;
padding-top: 12px;
padding-right: 12px;
padding-bottom: 12px;
padding-left: 12px;
border-radius: 12px;
border-width: 0.3px;
background-color: #fff;
border: 0.3px solid #e0e0e0;
box-shadow: 0px 1px 4px 0px #0000000d;
font-family: IRANSansX;
font-weight: 300;
font-size: 14px;
line-height: 21px;
letter-spacing: 0%;
text-align: right;
color: #a7acbe;
}
</style>