@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
57 lines (56 loc) • 1.69 kB
JavaScript
import { defineComponent as o, computed as n } from "vue";
import a from "../../navigation/breadcrumbs/NeonBreadcrumbs.vue.es.js";
import l from "../../layout/inline/NeonInline.vue.es.js";
import i from "../../layout/stack/NeonStack.vue.es.js";
import { NeonHeaderLevel as e } from "../../../model/presentation/header/NeonHeaderLevel.es.js";
const d = o({
name: "NeonHeader",
components: { NeonBreadcrumbs: a, NeonInline: l, NeonStack: i },
props: {
/**
* The title of the header.
*/
title: { type: String, required: !0 },
/**
* The subtitle of the header.
*/
subtitle: { type: String },
/**
* The level of the header. Allows the header to be used in multiple contexts with different sizes.
*/
level: { type: String, default: () => e.Page },
/**
* Breadcrumbs to display above the header (Page level only).
*/
breadcrumbs: { type: Array, default: () => [] },
// TODO: revert the default to true when the back button is implemented on all pages in all apps
/**
* Whether to display a back button (Page level only).
*/
backButton: { type: Boolean, default: !1 },
/**
* Override the label for the back button (Page level only).
*/
backLabel: { type: String, default: "Back" }
},
setup(t, { slots: r }) {
return {
titleLevel: n(() => {
switch (t.level) {
case e.SubSection:
return "h3";
case e.Section:
return "h2";
default:
return "h1";
}
}),
NeonHeaderLevel: e,
slots: r
};
}
});
export {
d as default
};
//# sourceMappingURL=NeonHeader.es.js.map