84 lines
2.0 KiB
Vue
84 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
|
|
import { cn } from '~/lib/utils'
|
|
|
|
const props = defineProps<{
|
|
prep: HeaderPrep
|
|
refSearchNav?: RefSearchNav
|
|
class?: string
|
|
}>()
|
|
|
|
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 mb-4 2xl:mb-5"
|
|
:class="cn('', props.class)"
|
|
>
|
|
<div class="flex items-center">
|
|
<div class="font-semibold text-gray-900 md:text-base 2xl:text-lg">
|
|
<Icon
|
|
:name="prep.icon!"
|
|
class="mr-2 align-middle md:size-6"
|
|
/>
|
|
{{ prep.title }}
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<!-- For components as slots -->
|
|
<slot />
|
|
|
|
<!-- For components passed by props -->
|
|
<div v-if="prep.components">
|
|
<template v-for="cwp in prep.components">
|
|
<component
|
|
:is="cwp.component"
|
|
class="mr-2"
|
|
v-bind="cwp.props"
|
|
/>
|
|
</template>
|
|
</div>
|
|
<div
|
|
v-if="refSearchNav"
|
|
class="text-lg text-gray-900"
|
|
>
|
|
<Input
|
|
type="text"
|
|
placeholder="Search"
|
|
@click="emitSearchNavClick"
|
|
@input="onInput"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="prep.addNav"
|
|
class="ms-2 flex items-center"
|
|
>
|
|
<Button
|
|
class="rounded-md border border-gray-300 text-white"
|
|
@click="btnClick"
|
|
>
|
|
<Icon
|
|
name="i-lucide-plus"
|
|
class="align-middle"
|
|
/>
|
|
{{ prep.addNav.label }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<Separator class="my-4 xl:my-5" />
|
|
</template>
|