@empathyco/x-components/js/components/layouts/multi-column-max-width-layout.vue.js

Empathy X Components

import _sfc_main from './multi-column-max-width-layout.vue2.js';
import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createCommentVNode, createBlock, withCtx, createVNode } from 'vue';
import './multi-column-max-width-layout.vue3.js';
import './multi-column-max-width-layout.vue4.js';
import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';

const _hoisted_1 = { class: "x-layout__header" };
const _hoisted_2 = {
  key: 0,
  class: "x-list x-layout__header-start"
};
const _hoisted_3 = {
  key: 0,
  class: "slot-helper"
};
const _hoisted_4 = {
  key: 1,
  class: "x-list x-layout__header-middle"
};
const _hoisted_5 = {
  key: 0,
  class: "slot-helper"
};
const _hoisted_6 = {
  key: 2,
  class: "x-list x-layout__header-end"
};
const _hoisted_7 = {
  key: 0,
  class: "slot-helper"
};
const _hoisted_8 = {
  key: 0,
  class: "x-layout__sub-header"
};
const _hoisted_9 = { class: "x-layout__sub-header-content" };
const _hoisted_10 = {
  key: 0,
  class: "slot-helper"
};
const _hoisted_11 = {
  key: 1,
  class: "x-layout__toolbar"
};
const _hoisted_12 = { class: "x-list x-layout__toolbar-aside" };
const _hoisted_13 = {
  key: 0,
  class: "slot-helper"
};
const _hoisted_14 = { class: "x-list x-layout__toolbar-body" };
const _hoisted_15 = {
  key: 0,
  class: "slot-helper"
};
const _hoisted_16 = { class: "x-layout__main" };
const _hoisted_17 = { class: "x-layout__main-aside x-list x-list--vertical" };
const _hoisted_18 = {
  key: 0,
  class: "slot-helper",
  style: { "height": "110vh" }
};
const _hoisted_19 = { class: "x-layout__main-body x-list x-list--vertical" };
const _hoisted_20 = {
  key: 0,
  class: "slot-helper",
  style: { "height": "110vh" }
};
const _hoisted_21 = {
  key: 2,
  class: "x-layout__scroll-to-top"
};
const _hoisted_22 = { class: "x-layout__scroll-to-top-content" };
const _hoisted_23 = {
  key: 0,
  class: "slot-helper",
  style: { "height": "50px" }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_Scroll = resolveComponent("Scroll");
  const _component_BaseIdTogglePanel = resolveComponent("BaseIdTogglePanel");
  const _component_MainScroll = resolveComponent("MainScroll");
  return openBlock(), createElementBlock(
    "div",
    {
      class: normalizeClass(["x-layout x-layout--columns", { "dev-mode": _ctx.devMode }]),
      style: normalizeStyle({ height: _ctx.devMode || _ctx.$slots["main-body"] ? "100%" : "auto" })
    },
    [
      createElementVNode("header", _hoisted_1, [
        _ctx.devMode || _ctx.$slots["header-start"] ? (openBlock(), createElementBlock("div", _hoisted_2, [
          renderSlot(_ctx.$slots, "header-start", {}, () => [
            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_3, "HEADER START")) : createCommentVNode("v-if", true)
          ], true)
        ])) : createCommentVNode("v-if", true),
        _ctx.devMode || _ctx.$slots["header-middle"] ? (openBlock(), createElementBlock("div", _hoisted_4, [
          renderSlot(_ctx.$slots, "header-middle", {}, () => [
            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_5, "HEADER MIDDLE")) : createCommentVNode("v-if", true)
          ], true)
        ])) : createCommentVNode("v-if", true),
        _ctx.devMode || _ctx.$slots["header-end"] ? (openBlock(), createElementBlock("div", _hoisted_6, [
          renderSlot(_ctx.$slots, "header-end", {}, () => [
            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_7, "HEADER END")) : createCommentVNode("v-if", true)
          ], true)
        ])) : createCommentVNode("v-if", true)
      ]),
      _ctx.devMode || _ctx.$slots["sub-header"] ? (openBlock(), createElementBlock("div", _hoisted_8, [
        createElementVNode("div", _hoisted_9, [
          renderSlot(_ctx.$slots, "sub-header", {}, () => [
            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_10, "SUB HEADER")) : createCommentVNode("v-if", true)
          ], true)
        ])
      ])) : createCommentVNode("v-if", true),
      _ctx.devMode || _ctx.$slots["toolbar-aside"] || _ctx.$slots["toolbar-body"] ? (openBlock(), createElementBlock("section", _hoisted_11, [
        createElementVNode("aside", _hoisted_12, [
          renderSlot(_ctx.$slots, "toolbar-aside", {}, () => [
            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_13, "TOOLBAR ASIDE")) : createCommentVNode("v-if", true)
          ], true)
        ]),
        createElementVNode("div", _hoisted_14, [
          renderSlot(_ctx.$slots, "toolbar-body", {}, () => [
            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_15, "TOOLBAR BODY")) : createCommentVNode("v-if", true)
          ], true)
        ])
      ])) : createCommentVNode("v-if", true),
      createElementVNode("main", _hoisted_16, [
        _ctx.devMode || _ctx.$slots["main-aside"] ? (openBlock(), createBlock(_component_BaseIdTogglePanel, {
          key: 0,
          "panel-id": "aside-panel",
          animation: _ctx.asideAnimation,
          class: "x-layout__collapse-aside"
        }, {
          default: withCtx(() => [
            createVNode(_component_Scroll, {
              id: "aside-scroll",
              class: "x-layout__aside-scroll"
            }, {
              default: withCtx(() => [
                createElementVNode("div", _hoisted_17, [
                  renderSlot(_ctx.$slots, "main-aside", {}, () => [
                    _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_18, "MAIN ASIDE")) : createCommentVNode("v-if", true)
                  ], true)
                ])
              ]),
              _: 3
              /* FORWARDED */
            })
          ]),
          _: 3
          /* FORWARDED */
        }, 8, ["animation"])) : createCommentVNode("v-if", true),
        createVNode(_component_MainScroll, { class: "x-flex x-flex-auto" }, {
          default: withCtx(() => [
            _ctx.devMode || _ctx.$slots["main-body"] ? (openBlock(), createBlock(_component_Scroll, {
              key: 0,
              id: "main-scroll",
              class: "x-layout__body-scroll"
            }, {
              default: withCtx(() => [
                createElementVNode("section", _hoisted_19, [
                  renderSlot(_ctx.$slots, "main-body", {}, () => [
                    _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_20, "MAIN BODY")) : createCommentVNode("v-if", true)
                  ], true)
                ])
              ]),
              _: 3
              /* FORWARDED */
            })) : createCommentVNode("v-if", true)
          ]),
          _: 3
          /* FORWARDED */
        })
      ]),
      _ctx.devMode || _ctx.$slots["scroll-to-top"] ? (openBlock(), createElementBlock("div", _hoisted_21, [
        createElementVNode("div", _hoisted_22, [
          renderSlot(_ctx.$slots, "scroll-to-top", {}, () => [
            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_23, "SCROLL TO TOP")) : createCommentVNode("v-if", true)
          ], true)
        ])
      ])) : createCommentVNode("v-if", true)
    ],
    6
    /* CLASS, STYLE */
  );
}
var multiColumnMaxWidthLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5319aaa7"]]);

export { multiColumnMaxWidthLayout as default };
//# sourceMappingURL=multi-column-max-width-layout.vue.js.map