49 lines
1.5 KiB
Vue
49 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
|
|
|
|
const props = defineProps<{
|
|
prep: HeaderPrep
|
|
refSearchNav?: RefSearchNav
|
|
}>()
|
|
|
|
function emitSearchNavClick() {
|
|
props.refSearchNav?.onClick()
|
|
}
|
|
|
|
function onInput(event: Event) {
|
|
props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
|
|
}
|
|
|
|
function btnClick() {
|
|
props.prep?.addNav?.onClick?.()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<header>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="ml-3 text-lg font-bold text-gray-900">
|
|
<Icon :name="props.prep.icon!" class="mr-2 size-4 align-middle md:size-6" />
|
|
{{ props.prep.title }}
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div v-if="props.refSearchNav" class="ml-3 text-lg text-gray-900">
|
|
<!-- <Input -->
|
|
<!-- type="text" placeholder="Search" -->
|
|
<!-- class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm" @click="emitSearchNavClick" -->
|
|
<!-- @input="onInput" -->
|
|
<!-- /> -->
|
|
</div>
|
|
<div v-if="prep.addNav" class="m-2 flex items-center">
|
|
<Button size="md" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
|
|
<Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
|
|
{{ prep.addNav.label }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|