haditha_ui/components/hadith/AutoComplation.vue

<script setup lang="ts">
const props = defineProps({
  showFilter: {
    default: false,
  },
  showPrevSearch: {
    default: false,
  },
});
const emit = defineEmits(["response-ready"]);
const router = useRouter();

export type Sample = {
  fromPerson: string;
  arabicText: string;
  persianText: string;
  reference: string;
};

const state = reactive({
  list: [
    {
      fromPerson: "امام علی علیه‌السلام",
      arabicText:
        " وَمَا يَذۡكُرُونَ إِلَّآ أَن يَشَآءَ ٱللَّهُ هُوَ أَهلُ ٱلتَّقوَىٰ وَأَهلُ ٱلمَغفِرَةِ هُوَ أَهلُ ٱلتَّقوَىٰ وَأَهلُ ٱلمَغفِرَةِ",
      persianText:
        " خداوند متعال ما (اهل بیت) را آفرید و ما را خازنان علم خود در آسمان و زمین  قرار داد. و نماز در مسیحیت برای ما قرار که پیش",
      reference: "الکافی، جلد ۱، صفحه ۱۰۳",
    },
    {
      fromPerson: "امام علی علیه‌السلام",
      arabicText:
        " وَمَا يَذۡكُرُونَ إِلَّآ أَن يَشَآءَ ٱللَّهُ هُوَ أَهلُ ٱلتَّقوَىٰ وَأَهلُ ٱلمَغفِرَةِ هُوَ أَهلُ ٱلتَّقوَىٰ وَأَهلُ ٱلمَغفِرَةِ",
      persianText:
        " خداوند متعال ما (اهل بیت) را آفرید و ما را خازنان علم خود در آسمان و زمین  قرار داد. و نماز در مسیحیت برای ما قرار که پیش",
      reference: "الکافی، جلد ۱، صفحه ۱۰۳",
    },
    {
      fromPerson: "امام علی علیه‌السلام",
      arabicText:
        " وَمَا يَذۡكُرُونَ إِلَّآ أَن يَشَآءَ ٱللَّهُ هُوَ أَهلُ ٱلتَّقوَىٰ وَأَهلُ ٱلمَغفِرَةِ هُوَ أَهلُ ٱلتَّقوَىٰ وَأَهلُ ٱلمَغفِرَةِ",
      persianText:
        " خداوند متعال ما (اهل بیت) را آفرید و ما را خازنان علم خود در آسمان و زمین  قرار داد. و نماز در مسیحیت برای ما قرار که پیش",
      reference: "الکافی، جلد ۱، صفحه ۱۰۳",
    },
  ],
  filters: [
    {
      label: "معنایی",
      items: [],
    },
    {
      label: "ترجمه",
      items: [],
    },
    {
      label: "مترادف",
      items: [
        {
          label: "جستجو در همه",
        },
        {
          label: "فقط در متن عربی حدیث",
        },
        {
          label: "فقط در ترجمه ها",
        },
        {
          label: "فقط در شروح",
        },
      ],
    },
    {
      label: "نوع",
      items: [
        {
          label: "جستجو در همه",
        },
        {
          label: "فقط در متن عربی حدیث",
        },
        {
          label: "فقط در ترجمه ها",
        },
        {
          label: "فقط در شروح",
        },
      ],
    },
    {
      label: "عین عبارت",
      items: [
        {
          label: "جستجو در همه",
        },
        {
          label: "فقط در متن عربی حدیث",
        },
        {
          label: "فقط در ترجمه ها",
        },
        {
          label: "فقط در شروح",
        },
      ],
    },
  ],
});
const searchTerm = ref<string>("");
const open = ref(false);
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 clearSimilar = () => {
  console.info("clearSimilar");
};
const onBlur = () => {
  // console.info("onBlue");
};
const onChange = () => {
  // console.info("onChange");
};
const onUpdateModel = (newVal: string) => {
  console.info("onUpdateModel", newVal);
};
const onSearch = () => {
  console.info("onSearch");
  router.push({
    name: "hadithSearch",
  });
};
const onKeyDown = () => {
  // console.info("onKeyDown");
};
const onKeyUp = () => {
  // console.info("onKeyUp");
};
const onSend = () => {
  console.info("onSend");

  emit("response-ready", {
    searchList: state.list,
    searchQuery: searchTerm.value,
  });
};
</script>

<template>
  <div class="hadith-search-root-wrapper">
    <div class="hadith-search-root">
      <div v-if="showPrevSearch" class="prev-search-item flex items-center">
        <span class="total">۴۷ مشابه </span>
        <span class="text me-auto">
          عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ، قَالَ:
        </span>
        <UButton
          icon="i-lucide:x"
          color="neutral"
          variant="ghost"
          class="clear-similar-btn"
          @click="clearSimilar"
        />
      </div>
      <div class="search-input">
        <UInputMenu
          class="w-full focus:placeholder-gray-800"
          :items="[]"
          v-model="searchTerm"
          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="open = false"
          @change="onChange"
          @update:modelValue="onUpdateModel"
          @update:searchTerm="onUpdateModel"
          @keydown="onKeyDown"
          @keyup="onKeyUp"
          @keydown.enter="onSend"
        >
        </UInputMenu>
      </div>
      <UButton class="my-trailing-button" @click.prevent="onSearch" icon="i-lucide-search">
        <!-- <UIcon  name="i-lucide-search" /> -->
      </UButton>
    </div>
    <div class="search-filter my-3 space-x-2" v-if="props.showFilter">
      <UDropdownMenu
        v-for="(filter, index) in state.filters"
        :items="filter.items"
        :content="{
          align: 'start',
          side: 'bottom',
          sideOffset: 8,
        }"
        :ui="{
          content: 'w-48',
        }"
      >
        <UButton
          class="filter-item"
          :label="filter.label"
          :trailingIcon="filter.items?.length ? 'i-lucide-chevron-down' : ''"
        />
      </UDropdownMenu>
    </div>
  </div>
</template>

<style scoped>
.hadith-search-root-wrapper {
  max-width: 656px;
  width: 100%;
  margin: 0 1em;

  .hadith-search-root {
    position: relative;

    &::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;
    }

    .prev-search-item {
      width: 328;
      height: 49;
      gap: 6px;
      border-radius: 12px;
      border-width: 0.5px;
      padding-top: 8px;
      padding-right: 12px;
      padding-bottom: 8px;
      padding-left: 12px;
      background: #626b84;
      border: 0.5px solid;
      margin-bottom: 0.7em;

      border-image-source: linear-gradient(
        102.02deg,
        #4be8ae 7.38%,
        #00a762 91.78%
      );

      .total {
        width: 53;
        height: 24;
        gap: 4px;
        border-radius: 6px;
        padding: 5px 7px;
        background: #1b213266;

        font-family: IRANSansX;
        font-weight: 500;
        font-size: 10px;
        line-height: 15px;
        letter-spacing: 0%;
        text-align: right;
        color: #ffffff;
      }
      .text {
        font-family: Takrim;
        font-weight: 400;
        font-size: 16px;
        line-height: 32px;
        letter-spacing: 0%;
        text-align: right;
        color: #ffffff;
      }
      .clear-similar-btn {
        width: 32px;
        height: 32px;
        gap: 4px;
        border-radius: 60px;
        padding-top: 11px;
        padding-right: 6px;
        padding-bottom: 11px;
        padding-left: 6px;
        background: #1b213266;
        color: #fff;
      }
    }

    .search-input {
      position: relative;
    }
    .search-filter {
      .filter-item {
        /* width: 81px; */
        height: 40px;
        border-radius: 12px;
        border-width: 0.3px;
        padding-top: 8px;
        padding-right: 12px;
        padding-bottom: 8px;
        padding-left: 12px;
        gap: 4px;
        background-color: #fff;
        border: 0.3px solid #e0e0e0;
        box-shadow: 0px 1px 4px 0px #0000000d;
        color: #8a92a8;
        font-family: IRANSansX;
        font-weight: 400;
        font-size: 13px;
        line-height: 20px;
        letter-spacing: 0%;
        text-align: right;

        &.active {
          color: linear-gradient(102.02deg, #4be8ae 7.38%, #00a762 91.78%);

          * {
            color: #fff;
          }
        }
      }
    }

    &.search-page {
      &::before {
        content: none;
      }
      .my-trailing-button {
        width: 32px;
        height: 32px;
      }
      .hadith-search-input {
        height: 56px;
      }
    }
  }
}
</style>

<style>
.hadith-search-root-wrapper {
  .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>