@dialpad/dialtone/dist/vue3/lib/root-layout/root-layout.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"root-layout.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      },\n      responsiveBreakpointClass,\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      <!-- @slot Slot for header content, be sure to set a height on the element inside this\n        if you want a fixed height. -->\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      <!-- @slot Slot for sidebar content, be sure to set a width on the element within this. -->\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      <!-- @slot Slot for the main content -->\n      <slot />\n    </main>\n    <footer\n      :class=\"['d-root-layout__footer', footerClass]\"\n      data-qa=\"dt-root-layout-footer\"\n    >\n      <!-- @slot Slot for footer content, be sure to set a height on the element inside this\n        if you want a fixed height. -->\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    responsiveBreakpointClass () {\n      return this.responsiveBreakpoint\n        ? `d-root-layout__responsive--${this.responsiveBreakpoint}`\n        : 'd-root-layout__responsive--default';\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","s","ROOT_LAYOUT_SIDEBAR_POSITIONS","bp","ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS","_createElementBlock","_normalizeClass","$props","$options","_createElementVNode","_renderSlot","_ctx"],"mappings":"sOAwDKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,eAEN,MAAO,CAML,MAAO,CACL,KAAM,QACN,QAAS,IAMX,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,aAAc,CACZ,KAAM,OACN,QAAS,QAOX,aAAc,CACZ,KAAM,QACN,QAAS,IAMX,UAAW,CACT,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,aAAc,CACZ,KAAM,OACN,QAAS,SAQX,gBAAiB,CACf,KAAM,OACN,QAAS,OACT,UAAYC,GAAM,OAAO,OAAOC,+BAA6B,EAAE,SAASD,CAAC,GAM3E,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,aAAc,CACZ,KAAM,OACN,QAAS,QAOX,qBAAsB,CACpB,KAAM,OACN,QAAS,KACT,UAAYE,GAAOC,qCAAmC,SAASD,CAAE,IAIrE,SAAU,CACR,YAAc,CACZ,OAAO,KAAK,kBAAoBD,EAAAA,8BAA8B,KAChE,EAEA,2BAA6B,CAC3B,OAAO,KAAK,qBACR,8BAA8B,KAAK,oBAAoB,GACvD,oCACN,EAEJ,+CAhLEG,EAAAA,mBA8CM,MAAA,CA7CH,MAFLC,EAAAA,eAAA,uDAEkGC,EAAA,gCAA0CC,EAAA,YAA2BA,EAAA,4BASnK,UAAQ,mBAERC,EAAAA,mBAOS,SAAA,CANN,MAdPH,EAAAA,eAAA,CAAA,wBAAA,CAAA,gCAc2EC,EAAA,YAAY,EAAIA,EAAA,WAAW,CAAA,EAChG,UAAQ,0BAIRG,aAAsBC,EAAA,OAAA,QAAA,MAExBF,EAAAA,mBAQQ,QAAA,CAPN,IAAI,sBACJ,SAAS,IACR,MAxBPH,EAAAA,yCAwByCC,EAAA,YAAY,CAAA,EAC/C,UAAQ,2BAGRG,aAAuBC,EAAA,OAAA,SAAA,MAEzBF,EAAAA,mBAQO,OAAA,CAPL,IAAI,sBACH,MAhCPH,EAAAA,yCAgCyCC,EAAA,YAAY,CAAA,EAC/C,UAAQ,yBACR,SAAS,MAGTG,aAAQC,EAAA,OAAA,SAAA,MAEVF,EAAAA,mBAOS,SAAA,CANN,MAxCPH,EAAAA,wCAwCwCC,EAAA,WAAW,CAAA,EAC7C,UAAQ,0BAIRG,aAAsBC,EAAA,OAAA,QAAA"}