@dialpad/dialtone/dist/vue3/lib/root-layout/root-layout.js

Dialpad's Dialtone design system monorepo

import { ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS as l, ROOT_LAYOUT_SIDEBAR_POSITIONS as d } from "./root-layout-constants.js";
import { createElementBlock as i, openBlock as n, normalizeClass as o, createElementVNode as a, renderSlot as r } from "vue";
import { _ as u } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const y = {
  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: !0
    },
    /**
     * 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: !1
    },
    /**
     * 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: (t) => Object.values(d).includes(t)
    },
    /**
     * 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: (t) => l.includes(t)
    }
  },
  computed: {
    isInverted() {
      return this.sidebarPosition === d.RIGHT;
    },
    responsiveBreakpointClass() {
      return this.responsiveBreakpoint ? `d-root-layout__responsive--${this.responsiveBreakpoint}` : "d-root-layout__responsive--default";
    }
  }
};
function f(t, c, e, p, _, s) {
  return n(), i("div", {
    class: o([
      "root-layout",
      "d-root-layout",
      {
        "d-root-layout--fixed": e.fixed,
        "d-root-layout--inverted": s.isInverted
      },
      s.responsiveBreakpointClass
    ]),
    "data-qa": "dt-root-layout"
  }, [
    a("header", {
      class: o(["d-root-layout__header", { "d-root-layout__header--sticky": e.headerSticky }, e.headerClass]),
      "data-qa": "dt-root-layout-header"
    }, [
      r(t.$slots, "header")
    ], 2),
    a("aside", {
      ref: "root-layout-sidebar",
      tabindex: "0",
      class: o(["d-root-layout__sidebar", e.sidebarClass]),
      "data-qa": "dt-root-layout-sidebar"
    }, [
      r(t.$slots, "sidebar")
    ], 2),
    a("main", {
      ref: "root-layout-content",
      class: o(["d-root-layout__content", e.contentClass]),
      "data-qa": "dt-root-layout-content",
      tabindex: "0"
    }, [
      r(t.$slots, "default")
    ], 2),
    a("footer", {
      class: o(["d-root-layout__footer", e.footerClass]),
      "data-qa": "dt-root-layout-footer"
    }, [
      r(t.$slots, "footer")
    ], 2)
  ], 2);
}
const O = /* @__PURE__ */ u(y, [["render", f]]);
export {
  O as default
};
//# sourceMappingURL=root-layout.js.map