66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import { defineComponent } from 'vue'
|
|
import useSearchConfigStore from './useSearchConfigStore'
|
|
import useSearchStore from './useSearchStore'
|
|
import { OhVueIcon, addIcons } from 'oh-vue-icons'
|
|
import { FaPlus } from 'oh-vue-icons/icons'
|
|
import useRouterStore from '@/useRouterStore'
|
|
|
|
addIcons(FaPlus)
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const search = useSearchStore()
|
|
const searchConfig = useSearchConfigStore()
|
|
const router = useRouterStore()
|
|
return () => (
|
|
<div
|
|
class="absolute left-0 -bottom-2 translate-y-full w-full rounded-lg bg-white/60 backdrop-blur shadow-lg p-4 flex flex-wrap gap-4"
|
|
v-outside-click={() => {
|
|
search.showSearchConfig = false
|
|
}}
|
|
>
|
|
{searchConfig.defaultList
|
|
.concat(searchConfig.customList)
|
|
.filter((el) => el.show)
|
|
.map((item) => (
|
|
<div class="w-12 h-16 relative flex flex-col justify-between" key={item.name}>
|
|
<div
|
|
class={
|
|
'w-full rounded-lg overflow-hidden flex justify-center items-center p-2 hover:scale-110 transition-all cursor-pointer ' +
|
|
(searchConfig.current.name === item.name
|
|
? 'bg-white'
|
|
: 'bg-white/40 hover:bg-white/60')
|
|
}
|
|
onClick={() => {
|
|
searchConfig.current = { ...item }
|
|
search.showSearchConfig = false
|
|
}}
|
|
>
|
|
<div
|
|
class="w-6 h-6 bg-center bg-no-repeat bg-contain"
|
|
style={{
|
|
backgroundImage: `url('${item.icon}')`
|
|
}}
|
|
/>
|
|
</div>
|
|
<div class="text-xs text-center text-black/60 w-full overflow-hidden text-ellipsis whitespace-nowrap break-all">
|
|
{item.name}
|
|
</div>
|
|
</div>
|
|
))}
|
|
<div class="w-12 h-16">
|
|
<div
|
|
class="w-full h-10 rounded-lg overflow-hidden flex justify-center items-center p-2 transition-all cursor-pointer bg-white/40 hover:bg-white/60"
|
|
onClick={() => {
|
|
search.showSearchConfig = false
|
|
router.go('global-search')
|
|
}}
|
|
>
|
|
<OhVueIcon name="fa-plus" scale={1.4} fill="rgba(0,0,0,.4)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
})
|