@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
121 lines (120 loc) • 3.8 kB
JavaScript
import { ROOT_LAYOUT_SIDEBAR_POSITIONS, ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS } from "./root_layout_constants.js";
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
const _sfc_main = {
name: "DtRootLayout",
props: {
/**
* When true, the header, footer and sidebar will be locked in position and the content will
* be scrollable. When false the header, footer and sidebar will scroll out of view.
* @values true, false
*/
fixed: {
type: Boolean,
default: true
},
/**
* Additional class name for the header element
*/
headerClass: {
type: [String, Array, Object],
default: ""
},
/**
* DEPRECATED: set the height of the inner element instead.
*/
headerHeight: {
type: String,
default: "64px"
},
/**
* Scroll the header with the page
* @values true, false
*/
headerSticky: {
type: Boolean,
default: false
},
/**
* Additional class name for the content element
*/
contentClass: {
type: [String, Array, Object],
default: ""
},
/**
* Additional class name for the sidebar element
*/
sidebarClass: {
type: [String, Array, Object],
default: ""
},
/**
* DEPRECATED: set the width of the inner element instead.
*/
sidebarWidth: {
type: String,
default: "256px"
},
/**
* Whether the sidebar is on the left or right side
* Possible options: 'left', 'right'
* @values left, right
*/
sidebarPosition: {
type: String,
default: "left",
validator: (s) => Object.values(ROOT_LAYOUT_SIDEBAR_POSITIONS).includes(s)
},
/**
* Additional class name for the footer element
*/
footerClass: {
type: [String, Array, Object],
default: ""
},
/**
* DEPRECATED: set the height of the inner element instead.
*/
footerHeight: {
type: String,
default: "64px"
},
/**
* Defines the breakpoint when the root layout will change to responsive version
* @values 'sm', 'md', 'lg', null
*/
responsiveBreakpoint: {
type: String,
default: null,
validator: (bp) => ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS.includes(bp)
}
},
computed: {
isInverted() {
return this.sidebarPosition === ROOT_LAYOUT_SIDEBAR_POSITIONS.RIGHT;
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { class: [
"root-layout",
"d-root-layout",
{
"d-root-layout--fixed": _vm.fixed,
"d-root-layout--inverted": _vm.isInverted,
[`d-root-layout__responsive--${_vm.responsiveBreakpoint}`]: !!_vm.responsiveBreakpoint
}
], attrs: { "data-qa": "dt-root-layout" } }, [_c("header", { class: ["d-root-layout__header", { "d-root-layout__header--sticky": _vm.headerSticky }, _vm.headerClass], attrs: { "data-qa": "dt-root-layout-header" } }, [_vm._t("header")], 2), _c("aside", { ref: "root-layout-sidebar", class: ["d-root-layout__sidebar", _vm.sidebarClass], attrs: { "tabindex": "0", "data-qa": "dt-root-layout-sidebar" } }, [_vm._t("sidebar")], 2), _c("main", { ref: "root-layout-content", class: ["d-root-layout__content", _vm.contentClass], attrs: { "data-qa": "dt-root-layout-content", "tabindex": "0" } }, [_vm._t("default")], 2), _c("footer", { class: ["d-root-layout__footer", _vm.footerClass], attrs: { "data-qa": "dt-root-layout-footer" } }, [_vm._t("footer")], 2)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const root_layout = __component__.exports;
export {
root_layout as default
};
//# sourceMappingURL=root_layout.vue.js.map