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

Dialpad's Dialtone design system monorepo

{"version":3,"file":"root-layout.cjs","names":[],"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"],"mappings":"iQAwDA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,eAEN,MAAO,CAML,MAAO,CACL,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,OACN,QAAS,OACV,CAMD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CAKD,UAAW,CACT,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,OACN,QAAS,QACV,CAOD,gBAAiB,CACf,KAAM,OACN,QAAS,OACT,UAAY,GAAM,OAAO,OAAO,EAAA,8BAA8B,CAAC,SAAS,EAAE,CAC3E,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,OACN,QAAS,OACV,CAMD,qBAAsB,CACpB,KAAM,OACN,QAAS,KACT,UAAY,GAAO,EAAA,mCAAmC,SAAS,EAAG,CACnE,CACF,CAED,SAAU,CACR,YAAc,CACZ,OAAO,KAAK,kBAAoB,EAAA,8BAA8B,OAGhE,2BAA6B,CAC3B,OAAO,KAAK,qBACR,8BAA8B,KAAK,uBACnC,sCAEP,CACF,0EAlIO,MAAA,CA7CH,OAAA,EAAA,EAAA,gBAAK,uDAAwF,EAAA,gCAA0C,EAAA,YAA2B,EAAA,4BASnK,UAAQ,4CASC,SAAA,CANN,OAAA,EAAA,EAAA,gBAAK,CAAA,wBAAA,CAAA,gCAA+D,EAAA,aAAY,CAAI,EAAA,YAAW,CAAA,CAChG,UAAQ,2CAIc,EAAA,OAAA,SAAA,CAAA,CAAA,EAAA,0BAUhB,QAAA,CAPN,IAAI,sBACJ,SAAS,IACR,OAAA,EAAA,EAAA,gBAAK,CAAA,yBAA6B,EAAA,aAAY,CAAA,CAC/C,UAAQ,4CAGe,EAAA,OAAA,UAAA,CAAA,CAAA,EAAA,0BAUlB,OAAA,CAPL,IAAI,sBACH,OAAA,EAAA,EAAA,gBAAK,CAAA,yBAA6B,EAAA,aAAY,CAAA,CAC/C,UAAQ,yBACR,SAAS,uBAGD,EAAA,OAAA,UAAA,CAAA,CAAA,EAAA,0BASD,SAAA,CANN,OAAA,EAAA,EAAA,gBAAK,CAAA,wBAA4B,EAAA,YAAW,CAAA,CAC7C,UAAQ,2CAIc,EAAA,OAAA,SAAA,CAAA,CAAA,EAAA"}