haditha_ui/components/hadith/AutoComplation.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>