95 lines
2.0 KiB
Vue
95 lines
2.0 KiB
Vue
<script setup>
|
|
import DashboardNavbarBase from "@nuxt/ui-pro/runtime/components/DashboardNavbar.vue"
|
|
import UBadge from "@nuxt/ui/components/Badge.vue"
|
|
|
|
defineOptions({ inheritAttrs: false })
|
|
|
|
const props = defineProps({
|
|
as: {
|
|
type: null,
|
|
required: false
|
|
},
|
|
icon: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
toggle: {
|
|
type: [Boolean, Object],
|
|
required: false,
|
|
default: true
|
|
},
|
|
toggleSide: {
|
|
type: String,
|
|
required: false,
|
|
default: "left"
|
|
},
|
|
badge: {
|
|
type: [String, Number],
|
|
required: false
|
|
},
|
|
class: {
|
|
type: null,
|
|
required: false
|
|
},
|
|
ui: {
|
|
type: null,
|
|
required: false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<DashboardNavbarBase
|
|
:as="as"
|
|
:icon="icon"
|
|
:title="title"
|
|
:toggle="toggle"
|
|
:toggle-side="toggleSide"
|
|
:class="props.class"
|
|
:ui="ui"
|
|
v-bind="$attrs"
|
|
>
|
|
<template v-if="$slots.toggle" #toggle="slotProps">
|
|
<slot name="toggle" v-bind="slotProps" />
|
|
</template>
|
|
|
|
<template v-if="$slots.left" #left="slotProps">
|
|
<slot name="left" v-bind="slotProps" />
|
|
</template>
|
|
|
|
<template v-if="$slots.leading" #leading="slotProps">
|
|
<slot name="leading" v-bind="slotProps" />
|
|
</template>
|
|
|
|
<template #title>
|
|
<slot name="title">
|
|
<span class="inline-flex min-w-0 items-center gap-2">
|
|
<span class="truncate">{{ title }}</span>
|
|
<UBadge
|
|
v-if="badge !== undefined && badge !== null && badge !== ''"
|
|
size="sm"
|
|
color="neutral"
|
|
variant="subtle"
|
|
>
|
|
{{ badge }}
|
|
</UBadge>
|
|
</span>
|
|
</slot>
|
|
</template>
|
|
|
|
<template v-if="$slots.trailing" #trailing="slotProps">
|
|
<slot name="trailing" v-bind="slotProps" />
|
|
</template>
|
|
|
|
<slot />
|
|
|
|
<template v-if="$slots.right" #right="slotProps">
|
|
<slot name="right" v-bind="slotProps" />
|
|
</template>
|
|
</DashboardNavbarBase>
|
|
</template>
|