106 lines
3.4 KiB
Vue
106 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
|
|
|
|
import { db } from '~/utils/db'
|
|
|
|
const isOpen = ref(false)
|
|
|
|
function closeModal() {
|
|
isOpen.value = false
|
|
}
|
|
function openModal() {
|
|
isOpen.value = true
|
|
}
|
|
|
|
const keyword = ref('')
|
|
async function getFilterRecipes(keyword: string) {
|
|
return db.recipes.filter((recipe) => {
|
|
return recipe.name.includes(keyword)
|
|
}).toArray()
|
|
}
|
|
const filteredRecipes = computedAsync(async () => {
|
|
return await getFilterRecipes(keyword.value)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<YlfIconButton
|
|
absolute right-4 top-4
|
|
class="icon-btn hover:text-yellow-400 !outline-none"
|
|
text-xl
|
|
title="切换" @click="openModal"
|
|
>
|
|
<div i="ri-search-line" />
|
|
</YlfIconButton>
|
|
|
|
<TransitionRoot appear :show="isOpen" as="template">
|
|
<Dialog as="div" class="relative z-10" @close="closeModal">
|
|
<TransitionChild
|
|
as="template"
|
|
enter="duration-300 ease-out"
|
|
enter-from="opacity-0"
|
|
enter-to="opacity-100"
|
|
leave="duration-200 ease-in"
|
|
leave-from="opacity-100"
|
|
leave-to="opacity-0"
|
|
>
|
|
<div class="fixed inset-0 bg-black/10" />
|
|
</TransitionChild>
|
|
|
|
<div class="fixed inset-0 overflow-y-auto">
|
|
<div
|
|
class="h-full flex justify-center text-center"
|
|
>
|
|
<TransitionChild
|
|
as="template"
|
|
enter="duration-300 ease-out"
|
|
enter-from="opacity-0 scale-95"
|
|
enter-to="opacity-100 scale-100"
|
|
leave="duration-200 ease-in"
|
|
leave-from="opacity-100 scale-100"
|
|
leave-to="opacity-0 scale-95"
|
|
>
|
|
<DialogPanel
|
|
class="h-full max-w-xl w-full transform overflow-hidden bg-white p-4 text-left align-middle shadow-xl transition-all dark:bg-dark-600"
|
|
md="rounded-2xl"
|
|
overflow="auto"
|
|
flex="~ col"
|
|
>
|
|
<DialogTitle
|
|
as="h3"
|
|
class="flex items-center justify-center text-lg font-medium leading-6"
|
|
>
|
|
<div relative inline-flex flex="grow">
|
|
<div
|
|
i-ri-search-line
|
|
class="absolute left-3 top-2 cursor-pointer text-gray-400"
|
|
/>
|
|
<input
|
|
v-model="keyword"
|
|
type="text"
|
|
class="w-full rounded-full bg-transparent text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 placeholder-gray-400"
|
|
border="~ rounded-full gray-300 op-50 focus:border-blue-500"
|
|
placeholder="搜索菜谱"
|
|
autofocus py-2 pl-10 pr-3
|
|
>
|
|
<div
|
|
v-if="keyword" i-ri-close-line
|
|
class="absolute right-3 top-2 cursor-pointer text-gray-400"
|
|
@click="keyword = ''"
|
|
/>
|
|
</div>
|
|
<button op="70" ml-2 inline-flex cursor-pointer text-base @click="closeModal">
|
|
取消
|
|
</button>
|
|
</DialogTitle>
|
|
<div flex="~ col grow" overflow="auto" class="mt-2" text-xs>
|
|
<DishTag v-for="item, i in filteredRecipes" :key="i" :dish="item" />
|
|
</div>
|
|
</DialogPanel>
|
|
</TransitionChild>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</TransitionRoot>
|
|
</template>
|