191 lines
3.8 KiB
Vue
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>
|