@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

dialtone.dialpad.com

1 lines • 6.68 kB

Source Map (JSON)

{"version":3,"file":"root_layout.vue.cjs","sources":["../../../components/root_layout/root_layout.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'root-layout',\n 'd-root-layout',\n {\n 'd-root-layout--fixed': fixed,\n 'd-root-layout--inverted': isInverted,\n [`d-root-layout__responsive--${responsiveBreakpoint}`]: !!responsiveBreakpoint,\n },\n ]\"\n data-qa=\"dt-root-layout\"\n >\n <header\n :class=\"['d-root-layout__header', { 'd-root-layout__header--sticky': headerSticky }, headerClass]\"\n data-qa=\"dt-root-layout-header\"\n >\n \n <slot name=\"header\" />\n </header>\n <aside\n ref=\"root-layout-sidebar\"\n tabindex=\"0\"\n :class=\"['d-root-layout__sidebar', sidebarClass]\"\n data-qa=\"dt-root-layout-sidebar\"\n >\n \n <slot name=\"sidebar\" />\n </aside>\n <main\n ref=\"root-layout-content\"\n :class=\"['d-root-layout__content', contentClass]\"\n data-qa=\"dt-root-layout-content\"\n tabindex=\"0\"\n >\n \n <slot />\n </main>\n <footer\n :class=\"['d-root-layout__footer', footerClass]\"\n data-qa=\"dt-root-layout-footer\"\n >\n \n <slot name=\"footer\" />\n </footer>\n </div>\n</template>\n\n<script>\nimport { ROOT_LAYOUT_SIDEBAR_POSITIONS, ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS } from './root_layout_constants';\n\n/**\n * A root layout provides a standardized group of containers to display content at the root level.\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRootLayout',\n\n props: {\n /**\n * When true, the header, footer and sidebar will be locked in position and the content will\n * be scrollable. When false the header, footer and sidebar will scroll out of view.\n * @values true, false\n */\n fixed: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Additional class name for the header element\n */\n headerClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * DEPRECATED: set the height of the inner element instead.\n */\n headerHeight: {\n type: String,\n default: '64px',\n },\n\n /**\n * Scroll the header with the page\n * @values true, false\n */\n headerSticky: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Additional class name for the body\n */\n bodyClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the content element\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the sidebar element\n */\n sidebarClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * DEPRECATED: set the width of the inner element instead.\n */\n sidebarWidth: {\n type: String,\n default: '256px',\n },\n\n /**\n * Whether the sidebar is on the left or right side\n * Possible options: 'left', 'right'\n * @values left, right\n */\n sidebarPosition: {\n type: String,\n default: 'left',\n validator: (s) => Object.values(ROOT_LAYOUT_SIDEBAR_POSITIONS).includes(s),\n },\n\n /**\n * Additional class name for the footer element\n */\n footerClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * DEPRECATED: set the height of the inner element instead.\n */\n footerHeight: {\n type: String,\n default: '64px',\n },\n\n /**\n * Defines the breakpoint when the root layout will change to responsive version\n * @values 'sm', 'md', 'lg', null\n */\n responsiveBreakpoint: {\n type: String,\n default: null,\n validator: (bp) => ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS.includes(bp),\n },\n },\n\n computed: {\n isInverted () {\n return this.sidebarPosition === ROOT_LAYOUT_SIDEBAR_POSITIONS.RIGHT;\n },\n },\n};\n</script>\n"],"names":["ROOT_LAYOUT_SIDEBAR_POSITIONS","ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot"],"mappings":";;;;;AAwDA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,OAAOA,mDAA6B,EAAE,SAAS,CAAC;AAAA,IAC1E;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,sBAAsB;AAAA,MACpB,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,OAAOC,yDAAmC,SAAS,EAAE;AAAA,IAClE;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,aAAc;AACZ,aAAO,KAAK,oBAAoBD,sBAA6B,8BAAC;AAAA,IAC/D;AAAA,EACF;AACH;;0BA1KEE,IA8CM,mBAAA,OAAA;AAAA,IA7CH,OAFLC,IAAAA,eAAA;AAAA;;;gCAEkG,OAAK;AAAA,mCAAqC,SAAU;AAAA,QAAyC,CAAA,8BAAA,OAAA,oBAAoB,OAAO,OAAoB;AAAA;;IAS1O,WAAQ;AAAA;IAERC,IAAAA,mBAOS,UAAA;AAAA,MANN,OAdPD,IAAAA,eAAA,CAAA,yBAAA,EAAA,iCAc2E,OAAY,aAAA,GAAI,OAAW,WAAA,CAAA;AAAA,MAChG,WAAQ;AAAA;MAIRE,eAAsB,KAAA,QAAA,QAAA;AAAA;IAExBD,IAAAA,mBAQQ,SAAA;AAAA,MAPN,KAAI;AAAA,MACJ,UAAS;AAAA,MACR,OAxBPD,IAAAA,0CAwByC,OAAY,YAAA,CAAA;AAAA,MAC/C,WAAQ;AAAA;MAGRE,eAAuB,KAAA,QAAA,SAAA;AAAA;IAEzBD,IAAAA,mBAQO,QAAA;AAAA,MAPL,KAAI;AAAA,MACH,OAhCPD,IAAAA,0CAgCyC,OAAY,YAAA,CAAA;AAAA,MAC/C,WAAQ;AAAA,MACR,UAAS;AAAA;MAGTE,eAAQ,KAAA,QAAA,SAAA;AAAA;IAEVD,IAAAA,mBAOS,UAAA;AAAA,MANN,OAxCPD,IAAAA,yCAwCwC,OAAW,WAAA,CAAA;AAAA,MAC7C,WAAQ;AAAA;MAIRE,eAAsB,KAAA,QAAA,QAAA;AAAA;;;;;"}