mirror of https://github.com/YunYouJun/valaxy
59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
export interface ValaxyAddon {
|
|
icon: string
|
|
name: string
|
|
author: string | string[]
|
|
repo: string
|
|
desc: string
|
|
desc_zh: string
|
|
siteImage: string
|
|
siteExampleUrl?: string
|
|
tags?: string[]
|
|
}
|
|
|
|
const props = withDefaults(defineProps<{
|
|
addons: ValaxyAddon[]
|
|
}>(), {})
|
|
|
|
const { t } = useI18n()
|
|
const keyword = ref('')
|
|
const filteredAddons = computed(() => {
|
|
return props.addons
|
|
.filter(item => item.name.includes(keyword.value) || item.tags?.some(t => t.includes(keyword.value)))
|
|
.map((item) => {
|
|
if (typeof item.author === 'string')
|
|
return { ...item, author: [item.author] }
|
|
|
|
return item
|
|
})
|
|
})
|
|
|
|
function handleTagClick(tag: string) {
|
|
keyword.value = tag
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative my-4 flex-center" flex="~" rounded>
|
|
<div class="i-ri-search-line absolute text-slate-400 left-0 pl-12" />
|
|
<input
|
|
v-model="keyword"
|
|
:placeholder="t('gallery.tip')"
|
|
pl-10 pr-4
|
|
class="focus:border-purple-500 b-2 w-full h-12"
|
|
dark="border-dark-200"
|
|
bg="bg-white dark:bg-dark-500"
|
|
rounded-lg transition
|
|
type="text" name="search"
|
|
>
|
|
</div>
|
|
<ul class="m-0! p-0! sm:grid-cols-1 lg:grid-cols-2 grid" gap="4">
|
|
<li v-for="addon, i in filteredAddons" :key="i" class="w-full list-none m-0!">
|
|
<AddonGalleryCard :addon="addon" @tag-click="handleTagClick" />
|
|
</li>
|
|
</ul>
|
|
</template>
|