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

Vue component library for Dialpad's design system Dialtone

import { ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS as r, ROOT_LAYOUT_SIDEBAR_POSITIONS as o } from "./root-layout-constants.js";
import { n as s } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const d = {
  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 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: (a) => Object.values(o).includes(a)
    },
    /**
     * 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: (a) => r.includes(a)
    }
  },
  computed: {
    isInverted() {
      return this.sidebarPosition === o.RIGHT;
    },
    responsiveBreakpointClass() {
      return this.responsiveBreakpoint ? `d-root-layout__responsive--${this.responsiveBreakpoint}` : "d-root-layout__responsive--default";
    }
  }
};
var i = function() {
  var t = this, e = t._self._c;
  return e("div", { class: [
    "root-layout",
    "d-root-layout",
    {
      "d-root-layout--fixed": t.fixed,
      "d-root-layout--inverted": t.isInverted
    },
    t.responsiveBreakpointClass
  ], attrs: { "data-qa": "dt-root-layout" } }, [e("header", { class: ["d-root-layout__header", { "d-root-layout__header--sticky": t.headerSticky }, t.headerClass], attrs: { "data-qa": "dt-root-layout-header" } }, [t._t("header")], 2), e("aside", { ref: "root-layout-sidebar", class: ["d-root-layout__sidebar", t.sidebarClass], attrs: { tabindex: "0", "data-qa": "dt-root-layout-sidebar" } }, [t._t("sidebar")], 2), e("main", { ref: "root-layout-content", class: ["d-root-layout__content", t.contentClass], attrs: { "data-qa": "dt-root-layout-content", tabindex: "0" } }, [t._t("default")], 2), e("footer", { class: ["d-root-layout__footer", t.footerClass], attrs: { "data-qa": "dt-root-layout-footer" } }, [t._t("footer")], 2)]);
}, n = [], l = /* @__PURE__ */ s(
  d,
  i,
  n
);
const y = l.exports;
export {
  y as default
};
//# sourceMappingURL=root-layout.js.map