@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
132 lines (131 loc) • 2.79 kB
JavaScript
import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS as t, ROOT_LAYOUT_SIDEBAR_POSITIONS as n } from "./root-layout-constants.js";
import { createElementBlock as r, createElementVNode as i, normalizeClass as a, openBlock as o, renderSlot as s } from "vue";
//#region components/root_layout/root_layout.vue
var c = {
compatConfig: { MODE: 3 },
name: "DtRootLayout",
props: {
fixed: {
type: Boolean,
default: !0
},
headerClass: {
type: [
String,
Array,
Object
],
default: ""
},
headerHeight: {
type: String,
default: "64px"
},
headerSticky: {
type: Boolean,
default: !1
},
bodyClass: {
type: [
String,
Array,
Object
],
default: ""
},
contentClass: {
type: [
String,
Array,
Object
],
default: ""
},
sidebarClass: {
type: [
String,
Array,
Object
],
default: ""
},
sidebarWidth: {
type: String,
default: "256px"
},
sidebarPosition: {
type: String,
default: "left",
validator: (e) => Object.values(n).includes(e)
},
footerClass: {
type: [
String,
Array,
Object
],
default: ""
},
footerHeight: {
type: String,
default: "64px"
},
responsiveBreakpoint: {
type: String,
default: null,
validator: (e) => t.includes(e)
}
},
computed: {
isInverted() {
return this.sidebarPosition === n.RIGHT;
},
responsiveBreakpointClass() {
return this.responsiveBreakpoint ? `d-root-layout__responsive--${this.responsiveBreakpoint}` : "d-root-layout__responsive--default";
}
}
};
function l(e, t, n, c, l, u) {
return o(), r("div", {
class: a([
"root-layout",
"d-root-layout",
{
"d-root-layout--fixed": n.fixed,
"d-root-layout--inverted": u.isInverted
},
u.responsiveBreakpointClass
]),
"data-qa": "dt-root-layout"
}, [
i("header", {
class: a([
"d-root-layout__header",
{ "d-root-layout__header--sticky": n.headerSticky },
n.headerClass
]),
"data-qa": "dt-root-layout-header"
}, [s(e.$slots, "header")], 2),
i("aside", {
ref: "root-layout-sidebar",
tabindex: "0",
class: a(["d-root-layout__sidebar", n.sidebarClass]),
"data-qa": "dt-root-layout-sidebar"
}, [s(e.$slots, "sidebar")], 2),
i("main", {
ref: "root-layout-content",
class: a(["d-root-layout__content", n.contentClass]),
"data-qa": "dt-root-layout-content",
tabindex: "0"
}, [s(e.$slots, "default")], 2),
i("footer", {
class: a(["d-root-layout__footer", n.footerClass]),
"data-qa": "dt-root-layout-footer"
}, [s(e.$slots, "footer")], 2)
], 2);
}
var u = /* @__PURE__ */ e(c, [["render", l]]);
//#endregion
export { u as default };
//# sourceMappingURL=root-layout.js.map