@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
155 lines (154 loc) • 4.53 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const root_layout_constants = require("./root_layout_constants.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
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 body
*/
bodyClass: {
type: [String, Array, Object],
default: ""
},
/**
* 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_constants.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_constants.ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS.includes(bp)
}
},
computed: {
isInverted() {
return this.sidebarPosition === root_layout_constants.ROOT_LAYOUT_SIDEBAR_POSITIONS.RIGHT;
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([
"root-layout",
"d-root-layout",
{
"d-root-layout--fixed": $props.fixed,
"d-root-layout--inverted": $options.isInverted,
[`d-root-layout__responsive--${$props.responsiveBreakpoint}`]: !!$props.responsiveBreakpoint
}
]),
"data-qa": "dt-root-layout"
}, [
vue.createElementVNode("header", {
class: vue.normalizeClass(["d-root-layout__header", { "d-root-layout__header--sticky": $props.headerSticky }, $props.headerClass]),
"data-qa": "dt-root-layout-header"
}, [
vue.renderSlot(_ctx.$slots, "header")
], 2),
vue.createElementVNode("aside", {
ref: "root-layout-sidebar",
tabindex: "0",
class: vue.normalizeClass(["d-root-layout__sidebar", $props.sidebarClass]),
"data-qa": "dt-root-layout-sidebar"
}, [
vue.renderSlot(_ctx.$slots, "sidebar")
], 2),
vue.createElementVNode("main", {
ref: "root-layout-content",
class: vue.normalizeClass(["d-root-layout__content", $props.contentClass]),
"data-qa": "dt-root-layout-content",
tabindex: "0"
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2),
vue.createElementVNode("footer", {
class: vue.normalizeClass(["d-root-layout__footer", $props.footerClass]),
"data-qa": "dt-root-layout-footer"
}, [
vue.renderSlot(_ctx.$slots, "footer")
], 2)
], 2);
}
const root_layout = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = root_layout;
//# sourceMappingURL=root_layout.vue.cjs.map