@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

package/js/components/layouts/multi-column-max-width-layout.vue2.js

@@ -1,11 +1,9 @@
-import { __decorate } from 'tslib';
-import Component, { mixins } from 'vue-class-component';
-import { Prop } from 'vue-property-decorator';
-import __vue_component__$2 from '../../x-modules/scroll/components/main-scroll.vue.js';
-import __vue_component__$3 from '../../x-modules/scroll/components/scroll.vue.js';
-import __vue_component__ from '../animations/animate-width.vue.js';
-import __vue_component__$1 from '../panels/base-id-toggle-panel.vue.js';
-import LayoutsMixin from './layouts.mixin.js';
+import { defineComponent } from 'vue';
+import Scroll from '../../x-modules/scroll/components/scroll.vue.js';
+import _sfc_main$1 from '../../x-modules/scroll/components/main-scroll.vue.js';
+import AnimateWidth from '../animations/animate-width.vue.js';
+import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue.js';
+import { AnimationProp } from '../../types/animation-prop.js';
 
 /**
  * Component for use as Layout to be filled with the rest of the Components.
@@ -14,17 +12,19 @@ import LayoutsMixin from './layouts.mixin.js';
  *
  * @public
  */
-let MultiColumnMaxWidthLayout = class MultiColumnMaxWidthLayout extends mixins(LayoutsMixin) {
-};
-__decorate([
-    Prop({ default: () => __vue_component__ })
-], MultiColumnMaxWidthLayout.prototype, "asideAnimation", void 0);
-MultiColumnMaxWidthLayout = __decorate([
-    Component({
-        components: { BaseIdTogglePanel: __vue_component__$1, MainScroll: __vue_component__$2, Scroll: __vue_component__$3 }
-    })
-], MultiColumnMaxWidthLayout);
-var script = MultiColumnMaxWidthLayout;
+var _sfc_main = defineComponent({
+    name: 'MultiColumnMaxWidthLayout',
+    components: { BaseIdTogglePanel, MainScroll: _sfc_main$1, Scroll },
+    props: {
+        /** The animation used for the Main Aside. */
+        asideAnimation: {
+            type: AnimationProp,
+            default: () => AnimateWidth
+        },
+        /** Enables the devMode, which shows the available slots to use with its names. */
+        devMode: Boolean
+    }
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=multi-column-max-width-layout.vue2.js.map

package/js/components/layouts/multi-column-max-width-layout.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-column-max-width-layout.vue2.js","sources":["../../../../src/components/layouts/multi-column-max-width-layout.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import Vue from 'vue';\n  import Component, { mixins } from 'vue-class-component';\n  import { Prop } from 'vue-property-decorator';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import AnimateWidth from '../animations/animate-width.vue';\n  import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue';\n  import LayoutsMixin from './layouts.mixin';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the Components.\n   *\n   * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseIdTogglePanel, MainScroll, Scroll }\n  })\n  export default class MultiColumnMaxWidthLayout extends mixins(LayoutsMixin) {\n    /**\n     * The animation used for the Main Aside.\n     *\n     * @public\n     */\n    @Prop({ default: () => AnimateWidth })\n    protected asideAnimation!: Vue;\n  }\n"],"names":["AnimateWidth","BaseIdTogglePanel","MainScroll","Scroll"],"mappings":";;;;;;;;;AAuGE;;;;;;AAMG;AAIY,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,MAAM,CAAC,YAAY,CAAC,CAAA;CAQ1E,CAAA;AADC,UAAA,CAAA;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAMA,iBAAY,EAAE,CAAC;AACP,CAAA,EAAA,yBAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAPZ,yBAAyB,GAAA,UAAA,CAAA;AAH7C,IAAA,SAAS,CAAC;AACT,QAAA,UAAU,EAAE,qBAAEC,mBAAiB,cAAEC,mBAAU,UAAEC,mBAAM,EAAE;KACtD,CAAC;AACmB,CAAA,EAAA,yBAAyB,CAQ7C,CAAA;aARoB,yBAAyB;;;;"}
+{"version":3,"file":"multi-column-max-width-layout.vue2.js","sources":["../../../../src/components/layouts/multi-column-max-width-layout.vue"],"sourcesContent":["<template>\n  <div\n    class=\"x-layout x-layout--columns\"\n    :class=\"{ 'dev-mode': devMode }\"\n    :style=\"{ height: devMode || $slots['main-body'] ? '100%' : 'auto' }\"\n  >\n    <header class=\"x-layout__header\">\n      <div v-if=\"devMode || $slots['header-start']\" class=\"x-list x-layout__header-start\">\n        <!-- @slot Slot that can be used to insert content into the left part of the header. -->\n        <slot name=\"header-start\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER START</span>\n        </slot>\n      </div>\n\n      <div v-if=\"devMode || $slots['header-middle']\" class=\"x-list x-layout__header-middle\">\n        <!-- @slot Slot that can be used to insert content into the center part of the header. -->\n        <slot name=\"header-middle\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER MIDDLE</span>\n        </slot>\n      </div>\n\n      <div v-if=\"devMode || $slots['header-end']\" class=\"x-list x-layout__header-end\">\n        <!-- @slot Slot that can be used to insert content into the right part of the header. -->\n        <slot name=\"header-end\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER END</span>\n        </slot>\n      </div>\n    </header>\n\n    <div v-if=\"devMode || $slots['sub-header']\" class=\"x-layout__sub-header\">\n      <div class=\"x-layout__sub-header-content\">\n        <!-- @slot Slot that can be used to insert content into below the header. -->\n        <slot name=\"sub-header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n        </slot>\n      </div>\n    </div>\n\n    <section\n      v-if=\"devMode || $slots['toolbar-aside'] || $slots['toolbar-body']\"\n      class=\"x-layout__toolbar\"\n    >\n      <aside class=\"x-list x-layout__toolbar-aside\">\n        <slot name=\"toolbar-aside\">\n          <!-- @slot Slot that can be used to insert content above the left aside. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR ASIDE</span>\n        </slot>\n      </aside>\n\n      <div class=\"x-list x-layout__toolbar-body\">\n        <!-- @slot Slot that can be used to insert content above the body. -->\n        <slot name=\"toolbar-body\">\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR BODY</span>\n        </slot>\n      </div>\n    </section>\n\n    <main class=\"x-layout__main\">\n      <BaseIdTogglePanel\n        v-if=\"devMode || $slots['main-aside']\"\n        panelId=\"aside-panel\"\n        :animation=\"asideAnimation\"\n        class=\"x-layout__collapse-aside\"\n      >\n        <Scroll id=\"aside-scroll\" class=\"x-layout__aside-scroll\">\n          <div class=\"x-layout__main-aside x-list x-list--vertical\">\n            <!-- @slot Slot that can be used to insert content into the left side bar. -->\n            <slot name=\"main-aside\">\n              <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 110vh\">MAIN ASIDE</span>\n            </slot>\n          </div>\n        </Scroll>\n      </BaseIdTogglePanel>\n\n      <MainScroll class=\"x-flex x-flex-auto\">\n        <Scroll\n          v-if=\"devMode || $slots['main-body']\"\n          id=\"main-scroll\"\n          class=\"x-layout__body-scroll\"\n        >\n          <section class=\"x-layout__main-body x-list x-list--vertical\">\n            <!-- @slot Slot that can be used to insert the body content. -->\n            <slot name=\"main-body\">\n              <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 110vh\">MAIN BODY</span>\n            </slot>\n          </section>\n        </Scroll>\n      </MainScroll>\n    </main>\n\n    <div v-if=\"devMode || $slots['scroll-to-top']\" class=\"x-layout__scroll-to-top\">\n      <div class=\"x-layout__scroll-to-top-content\">\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 50px\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import AnimateWidth from '../animations/animate-width.vue';\n  import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue';\n  import { AnimationProp } from '../../types';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the Components.\n   *\n   * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'MultiColumnMaxWidthLayout',\n    components: { BaseIdTogglePanel, MainScroll, Scroll },\n    props: {\n      /** The animation used for the Main Aside. */\n      asideAnimation: {\n        type: AnimationProp,\n        default: () => AnimateWidth\n      },\n      /** Enables the devMode, which shows the available slots to use with its names. */\n      devMode: Boolean\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  :root {\n    /* layout */\n    --x-size-min-margin-layout-columns: var(--x-size-base-06);\n    --x-size-column-gap-layout-columns: var(--x-size-base-06);\n\n    /* spacing */\n\n    /* size - header */\n    --x-size-padding-top-layout-columns-header: var(--x-size-base-07);\n    --x-size-padding-bottom-layout-columns-header: var(--x-size-base-05);\n\n    /* size - toolbar */\n    --x-size-padding-top-layout-columns-toolbar: var(--x-size-base-05);\n    --x-size-padding-bottom-layout-columns-toolbar: var(--x-size-base-03);\n\n    /* size- scroll-to-top */\n    --x-size-margin-bottom-layout-columns-scroll-to-top: var(--x-size-base-03);\n    --x-size-margin-left-layout-columns-scroll-to-top: var(--x-size-base-03);\n\n    /* color */\n    --x-color-background-layout-columns: var(--x-color-base-neutral-100);\n    --x-color-border-layout-columns: var(--x-color-base-neutral-70);\n    --x-color-border-layout-columns-header: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-sub-header: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-toolbar: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-main: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-main-aside: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-main-body: var(--x-color-border-layout-columns);\n\n    /* border */\n    --x-size-border-width-layout-columns-header: 0;\n    --x-size-border-width-layout-columns-toolbar: 1px 0 0;\n  }\n</style>\n\n<style lang=\"css\" scoped>\n  @import url('../../design-system-deprecated/utilities/dev-mode.css');\n\n  .x-layout {\n    /* custom properties */\n    --x-size-gap-default: var(--x-size-column-gap-layout-columns, 20px);\n    --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout-columns, 1440px)) / 2);\n    --x-size-margin-layout-columns: max(\n      var(--x-size-min-margin-layout-columns, 20px),\n      var(--x-size-margin-max-width)\n    );\n    --x-number-columns-header-middle: calc(var(--x-number-columns-layout-columns, 5) - 2);\n    --x-number-columns-sub-header-content: var(--x-number-columns-header-middle);\n    --x-number-columns-toolbar-body: calc(var(--x-number-columns-layout-columns, 5) - 1);\n\n    /* layout */\n    display: grid;\n    align-content: stretch;\n    max-height: 100%;\n\n    grid-template-columns:\n      [page-start]\n      1fr\n      [scroll-to-top-start]\n      calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default))\n      [scroll-to-top-end page-end];\n\n    grid-template-rows:\n      [page-start header-start]\n      auto\n      [header-end sub-header-start]\n      auto\n      [sub-header-end toolbar-start]\n      auto\n      [toolbar-end main-start]\n      1fr\n      [scroll-to-top-start]\n      auto\n      [main-end scroll-to-top-end page-end];\n  }\n\n  .x-layout__header {\n    /* layout */\n    grid-column: page;\n    grid-row: header;\n    display: grid;\n    column-gap: var(--x-size-gap-default);\n\n    grid-template-columns:\n      [header-start]\n      var(--x-size-margin-layout-columns)\n      [start-content-start]\n      1fr\n      [start-content-end middle-content-start]\n      repeat(var(--x-number-columns-header-middle), 1fr)\n      [middle-content-end end-content-start]\n      1fr\n      [end-content-end]\n      var(--x-size-margin-layout-columns)\n      [header-end];\n\n    /* size */\n    padding-block-start: var(--x-size-padding-top-layout-columns-header, 0);\n    padding-block-end: var(--x-size-padding-bottom-layout-columns-header, 0);\n    margin-block-start: var(--x-size-margin-top-layout-columns-header, 0);\n    margin-block-end: var(--x-size-margin-bottom-layout-columns-header, 0);\n\n    /* color */\n    background-color: var(--x-color-background-layout-columns-header, transparent);\n    border-color: var(--x-color-border-layout-columns-header, transparent);\n\n    /* border */\n    border-style: solid;\n    border-width: var(--x-size-border-width-layout-columns-header, 0);\n  }\n\n  .x-layout__header-start {\n    /* layout */\n    grid-column: start-content;\n  }\n  .x-layout__header-start.x-list {\n    /* space */\n    flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-header-start, flex start);\n    align-items: var(--x-size-align-layout-columns-header-start, flex start);\n  }\n\n  .x-layout__header-middle {\n    /* layout */\n    grid-column: middle-content;\n  }\n  .x-layout__header-middle.x-list {\n    /* space */\n    flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-header-middle, center);\n    align-items: var(--x-size-align-layout-columns-header-middle, flex start);\n  }\n\n  .x-layout__header-end {\n    /* layout */\n    grid-column: end-content;\n  }\n  .x-layout__header-end.x-list {\n    flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-header-end, flex-end);\n    align-items: var(--x-size-align-layout-columns-header-end, flex-start);\n  }\n\n  .x-layout__sub-header {\n    /* layout */\n    grid-column: page;\n    grid-row: sub-header;\n    display: grid;\n    column-gap: var(--x-size-gap-default);\n\n    grid-template-columns:\n      [sub-header-start]\n      var(--x-size-margin-layout-columns)\n      1fr\n      [sub-header-content-start]\n      repeat(var(--x-number-columns-sub-header-content), 1fr)\n      [sub-header-content-end]\n      1fr\n      var(--x-size-margin-layout-columns)\n      [sub-header-end];\n\n    /* size */\n    padding-block-start: var(--x-size-padding-top-layout-columns-sub-header, 0);\n    padding-block-end: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n    margin-block-start: var(--x-size-margin-top-layout-columns-sub-header, 0);\n    margin-block-end: var(--x-size-margin-bottom-layout-columns-sub-header, 0);\n\n    /* color */\n    background-color: var(--x-color-background-layout-columns-sub-header, transparent);\n    border-color: var(--x-color-border-layout-columns-sub-header, transparent);\n\n    /* border */\n    border-style: solid;\n    border-width: var(--x-size-border-width-layout-columns-sub-header, 0);\n  }\n\n  .x-layout__sub-header-content {\n    /* layout */\n    grid-column: sub-header-content;\n  }\n  .x-layout__sub-header-content.x-list {\n    flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-sub-header, flex-start);\n    align-items: var(--x-size-align-layout-columns-sub-header, flex-start);\n  }\n\n  .x-layout__toolbar {\n    /* layout */\n    grid-column: page;\n    grid-row: toolbar;\n    display: grid;\n    column-gap: var(--x-size-gap-default);\n\n    grid-template-columns:\n      [toolbar-start]\n      var(--x-size-margin-layout-columns)\n      [toolbar-aside-start]\n      1fr\n      [toolbar-aside-end toolbar-body-start]\n      repeat(var(--x-number-columns-toolbar-body), 1fr)\n      [toolbar-body-end]\n      var(--x-size-margin-layout-columns)\n      [toolbar-end];\n\n    /* size */\n    padding-block-start: var(--x-size-padding-top-layout-columns-toolbar, 0);\n    padding-block-end: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n    margin-block-start: var(--x-size-margin-top-layout-columns-toolbar, 0);\n    margin-block-end: var(--x-size-margin-bottom-layout-columns-toolbar, 0);\n\n    /* color */\n    background-color: var(--x-color-background-layout-columns-toolbar, transparent);\n    border-color: var(--x-color-border-layout-columns-toolbar, transparent);\n\n    /* border */\n    border-style: solid;\n    border-width: var(--x-size-border-width-layout-columns-toolbar, 0);\n  }\n\n  .x-layout__toolbar-aside {\n    /* layout */\n    grid-column: toolbar-aside;\n  }\n  .x-layout__toolbar-aside.x-list {\n    flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);\n    align-items: var(--x-size-align-layout-columns-toolbar-aside, center);\n  }\n\n  .x-layout__toolbar-body {\n    /* layout */\n    grid-column: toolbar-body;\n  }\n  .x-layout__toolbar-body.x-list {\n    flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-toolbar-body, flex-end);\n    align-items: var(--x-size-align-layout-columns-toolbar-body, center);\n  }\n\n  .x-layout__main {\n    /* layout */\n    grid-column: page;\n    grid-row: main;\n    min-height: 0;\n    display: flex;\n    flex-flow: row nowrap;\n    justify-content: stretch;\n    padding-left: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));\n\n    /* size */\n    padding-block-start: var(--x-size-padding-top-layout-columns-main, 0);\n    padding-block-end: var(--x-size-padding-bottom-layout-columns-main, 0);\n    margin-block-start: var(--x-size-margin-top-layout-columns-main, 0);\n    margin-block-end: var(--x-size-margin-bottom-layout-columns-main, 0);\n\n    /* color */\n    background-color: var(--x-color-background-layout-columns-main, transparent);\n    border-color: var(--x-color-border-layout-columns-main, transparent);\n\n    /* border */\n    border-style: solid;\n    border-width: var(--x-size-border-width-layout-columns-main, 0);\n  }\n\n  .x-layout__collapse-aside {\n    width: calc(\n      (\n          100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) -\n            var(--x-size-margin-layout-columns)\n        ) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default)\n    );\n  }\n\n  .x-layout__aside-scroll {\n    height: 100%;\n    margin-right: var(--x-size-gap-default);\n  }\n\n  .x-layout__body-scroll {\n    flex: 1 1 auto;\n    width: 0;\n    padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);\n  }\n  .x-layout__body-scroll.x-scroll {\n    overflow-y: scroll;\n  }\n\n  .x-layout__scroll-to-top {\n    /* layout */\n    grid-area: scroll-to-top;\n    justify-content: flex-end;\n    width: 100%;\n    display: flex;\n    z-index: 1;\n    pointer-events: none;\n  }\n  .x-layout__scroll-to-top-content {\n    flex: 1 0 auto;\n    padding-block-end: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);\n    padding-inline-start: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n  }\n  .x-layout__scroll-to-top-content > * {\n    pointer-events: all;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n| header-start  | header-middle |  header-end   |\n| :-----------: | :-----------: | :-----------: |\n|  sub-header   |               |               |\n| toolbar-aside |    toolbar    |               |\n|  main-aside   |     main      |               |\n|               |               | scroll-to-top |\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                        token                        | default value |\n| :-------------------------------------------------: | :-----------: |\n|         --x-size-column-gap-layout-columns          |     20px      |\n|     --x-size-padding-top-layout-columns-header      |      0px      |\n|    --x-size-padding-bottom-layout-columns-header    |      0px      |\n|      --x-size-margin-top-layout-columns-header      |      0px      |\n|    --x-size-margin-bottom-layout-columns-header     |      0px      |\n|     --x-color-background-layout-columns-header      |  transparent  |\n|       --x-color-border-layout-columns-header        |  transparent  |\n|     --x-size-border-width-layout-columns-header     |      0px      |\n|        --x-flow-layout-columns-header-start         |  row nowrap   |\n|    --x-size-justify-layout-columns-header-start     |  flex-start   |\n|     --x-size-align-layout-columns-header-start      |  flex-start   |\n|        --x-flow-layout-columns-header-middle        |  row nowrap   |\n|    --x-size-justify-layout-columns-header-middle    |    center     |\n|     --x-size-align-layout-columns-header-middle     |  flex-start   |\n|         --x-flow-layout-columns-header-end          |  row nowrap   |\n|     --x-size-justify-layout-columns-header-end      |   flex-end    |\n|      --x-size-align-layout-columns-header-end       |   flex-end    |\n|   --x-size-padding-top-layout-columns-sub-header    |      0px      |\n|  --x-size-padding-bottom-layout-columns-sub-header  |      0px      |\n|    --x-size-margin-top-layout-columns-sub-header    |      0px      |\n|  --x-size-margin-bottom-layout-columns-sub-header   |      0px      |\n|   --x-color-background-layout-columns-sub-header    |  transparent  |\n|     --x-color-border-layout-columns-sub-header      |  transparent  |\n|   --x-size-border-width-layout-columns-sub-header   |      0px      |\n|         --x-flow-layout-columns-sub-header          |  row nowrap   |\n|     --x-size-justify-layout-columns-sub-header      |  flex-start   |\n|      --x-size-align-layout-columns-sub-header       |  flex-start   |\n|     --x-size-padding-top-layout-columns-toolbar     |      0px      |\n|   --x-size-padding-bottom-layout-columns-toolbar    |      0px      |\n|     --x-size-margin-top-layout-columns-toolbar      |      0px      |\n|    --x-size-margin-bottom-layout-columns-toolbar    |      0px      |\n|     --x-color-background-layout-columns-toolbar     |  transparent  |\n|     --x-color-border-layout-columns-sub-toolbar     |  transparent  |\n|    --x-size-border-width-layout-columns-toolbar     |      0px      |\n|        --x-flow-layout-columns-toolbar-aside        |  row nowrap   |\n|    --x-size-justify-layout-columns-toolbar-aside    |  flex-start   |\n|     --x-size-align-layout-columns-toolbar-aside     |    center     |\n|        --x-flow-layout-columns-toolbar-body         |  row nowrap   |\n|    --x-size-justify-layout-columns-toolbar-body     |  flex-start   |\n|     --x-size-align-layout-columns-toolbar-body      |    center     |\n|      --x-size-padding-top-layout-columns-main       |      0px      |\n|     --x-size-padding-bottom-layout-columns-main     |      0px      |\n|       --x-size-margin-top-layout-columns-main       |      0px      |\n|     --x-size-margin-bottom-layout-columns-main      |      0px      |\n|      --x-color-background-layout-columns-main       |  transparent  |\n|      --x-color-border-layout-columns-sub-main       |  transparent  |\n|      --x-size-border-width-layout-columns-main      |      0px      |\n|   --x-color-background-layout-columns-main-aside    |  transparent  |\n|   --x-color-border-layout-columns-sub-main-aside    |  transparent  |\n|   --x-size-border-width-layout-columns-main-aside   |      0px      |\n|    --x-color-background-layout-columns-main-body    |  transparent  |\n|    --x-color-border-layout-columns-sub-main-body    |  transparent  |\n|   --x-size-border-width-layout-columns-main-body    |      0px      |\n| --x-size-margin-bottom-layout-columns-scroll-to-top |     10px      |\n|  --x-size-margin-left-layout-columns-scroll-to-top  |     10px      |\n\n|                        token                        |                   use                    |\n| :-------------------------------------------------: | :--------------------------------------: |\n|         --x-size-column-gap-layout-columns          |         The gap between columns          |\n|     --x-size-padding-top-layout-columns-header      |      The padding top of the header       |\n|    --x-size-padding-bottom-layout-columns-header    |     The padding bottom of the header     |\n|      --x-size-margin-top-layout-columns-header      |       The margin top of the header       |\n|    --x-size-margin-bottom-layout-columns-header     |     The margin bottom of the header      |\n|     --x-color-background-layout-columns-header      |    The background color of the header    |\n|       --x-color-border-layout-columns-header        |      The border color of the header      |\n|     --x-size-border-width-layout-columns-header     |      The border width of the header      |\n|        --x-flow-layout-columns-header-start         |    The flex flow of the start header     |\n|    --x-size-justify-layout-columns-header-start     | The justify content of the start header  |\n|     --x-size-align-layout-columns-header-start      |   The align items of the start header    |\n|        --x-flow-layout-columns-header-middle        |    The flex flow of the middle header    |\n|    --x-size-justify-layout-columns-header-middle    | The justify content of the middle header |\n|     --x-size-align-layout-columns-header-middle     |   The align items of the middle header   |\n|         --x-flow-layout-columns-header-end          |     The flex flow of the end header      |\n|     --x-size-justify-layout-columns-header-end      |  The justify content of the end header   |\n|      --x-size-align-layout-columns-header-end       |    The align items of the end header     |\n|   --x-size-padding-top-layout-columns-sub-header    |   The padding bottom of the sub header   |\n|  --x-size-padding-bottom-layout-columns-sub-header  |    The padding top of the sub header     |\n|    --x-size-margin-top-layout-columns-sub-header    |   The margin bottom of the sub header    |\n|  --x-size-margin-bottom-layout-columns-sub-header   |     The margin top of the sub header     |\n|   --x-color-background-layout-columns-sub-header    |  The background color of the sub header  |\n|     --x-color-border-layout-columns-sub-header      |    The border color of the sub header    |\n|   --x-size-border-width-layout-columns-sub-header   |    The border width of the sub header    |\n|         --x-flow-layout-columns-sub-header          |     The flex flow of the sub header      |\n|     --x-size-justify-layout-columns-sub-header      |  The justify content of the sub header   |\n|      --x-size-align-layout-columns-sub-header       |    The align items of the sub header     |\n|     --x-size-padding-top-layout-columns-toolbar     |      The padding top of the toolbar      |\n|   --x-size-padding-bottom-layout-columns-toolbar    |    The padding bottom of the toolbar     |\n|     --x-size-margin-top-layout-columns-toolbar      |      The margin top of the toolbar       |\n|    --x-size-margin-bottom-layout-columns-toolbar    |     The margin bottom of the toolbar     |\n|     --x-color-background-layout-columns-toolbar     |   The background color of the toolbar    |\n|     --x-color-border-layout-columns-sub-toolbar     |     The border color of the toolbar      |\n|    --x-size-border-width-layout-columns-toolbar     |     The border width of the toolbar      |\n|        --x-flow-layout-columns-toolbar-aside        |    The flex flow of the toolbar aside    |\n|    --x-size-justify-layout-columns-toolbar-aside    | The justify content of the toolbar aside |\n|     --x-size-align-layout-columns-toolbar-aside     |   The align items of the toolbar aside   |\n|        --x-flow-layout-columns-toolbar-body         |  The flex flow of the end toolbar body   |\n|    --x-size-justify-layout-columns-toolbar-body     | Justify content of the end toolbar body  |\n|     --x-size-align-layout-columns-toolbar-body      |   The align items of the toolbar body    |\n|      --x-size-padding-top-layout-columns-main       |       The padding top of the main        |\n|     --x-size-padding-bottom-layout-columns-main     |      The padding bottom of the main      |\n|       --x-size-margin-top-layout-columns-main       |        The margin top of the main        |\n|     --x-size-margin-bottom-layout-columns-main      |      The margin bottom of the main       |\n|      --x-color-background-layout-columns-main       |     The background color of the main     |\n|        --x-color-border-layout-columns-main         |       The border color of the main       |\n|      --x-size-border-width-layout-columns-main      |       The border width of the main       |\n|   --x-color-background-layout-columns-main-aside    |  The background color of the main aside  |\n|     --x-color-border-layout-columns-main-aside      |    The border color of the main aside    |\n|   --x-size-border-width-layout-columns-main-aside   |  The border width of the sub main aside  |\n|    --x-color-background-layout-columns-main-body    |  The background color of the main body   |\n|      --x-color-border-layout-columns-main-body      |    The border color of the main body     |\n|   --x-size-border-width-layout-columns-main-body    |  The border width of the sub main body   |\n| --x-size-margin-bottom-layout-columns-scroll-to-top |  The margin bottom of the scroll to top  |\n|  --x-size-margin-left-layout-columns-scroll-to-top  |   The margin left of the scroll to top   |\n</docs>\n"],"names":["MainScroll"],"mappings":";;;;;;;AA4GE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,2BAA2B;AACjC,IAAA,UAAU,EAAE,EAAE,iBAAiB,cAAEA,WAAU,EAAE,MAAK,EAAG;AACrD,IAAA,KAAK,EAAE;;AAEL,QAAA,cAAc,EAAE;AACd,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAM,YAAW;AAC3B,SAAA;;AAED,QAAA,OAAO,EAAE,OAAM;AACjB,KAAA;AACD,CAAA,CAAC;;;;"}

package/js/components/layouts/multi-column-max-width-layout.vue3.js

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../tools/inject-css.js';
 
-var css = ":root {\n  --x-size-min-margin-layout-columns: var(--x-size-base-06);\n  --x-size-column-gap-layout-columns: var(--x-size-base-06);\n  --x-size-padding-top-layout-columns-header: var(--x-size-base-07);\n  --x-size-padding-bottom-layout-columns-header: var(--x-size-base-05);\n  --x-size-padding-top-layout-columns-toolbar: var(--x-size-base-05);\n  --x-size-padding-bottom-layout-columns-toolbar: var(--x-size-base-03);\n  --x-size-margin-bottom-layout-columns-scroll-to-top: var(--x-size-base-03);\n  --x-size-margin-left-layout-columns-scroll-to-top: var(--x-size-base-03);\n  --x-color-background-layout-columns: var(--x-color-base-neutral-100);\n  --x-color-border-layout-columns: var(--x-color-base-neutral-70);\n  --x-color-border-layout-columns-header: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-sub-header: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-toolbar: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-main: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-main-aside: var(--x-color-border-layout-columns);\n  --x-color-border-layout-columns-main-body: var(--x-color-border-layout-columns);\n  --x-size-border-width-layout-columns-header: 0;\n  --x-size-border-width-layout-columns-toolbar: 1px 0 0;\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ":root{--x-size-min-margin-layout-columns:var(--x-size-base-06);--x-size-column-gap-layout-columns:var(--x-size-base-06);--x-size-padding-top-layout-columns-header:var(--x-size-base-07);--x-size-padding-bottom-layout-columns-header:var(--x-size-base-05);--x-size-padding-top-layout-columns-toolbar:var(--x-size-base-05);--x-size-padding-bottom-layout-columns-toolbar:var(--x-size-base-03);--x-size-margin-bottom-layout-columns-scroll-to-top:var(--x-size-base-03);--x-size-margin-left-layout-columns-scroll-to-top:var(--x-size-base-03);--x-color-background-layout-columns:var(--x-color-base-neutral-100);--x-color-border-layout-columns:var(--x-color-base-neutral-70);--x-color-border-layout-columns-header:var(--x-color-border-layout-columns);--x-color-border-layout-columns-sub-header:var(--x-color-border-layout-columns);--x-color-border-layout-columns-toolbar:var(--x-color-border-layout-columns);--x-color-border-layout-columns-main:var(--x-color-border-layout-columns);--x-color-border-layout-columns-main-aside:var(--x-color-border-layout-columns);--x-color-border-layout-columns-main-body:var(--x-color-border-layout-columns);--x-size-border-width-layout-columns-header:0;--x-size-border-width-layout-columns-toolbar:1px 0 0}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=multi-column-max-width-layout.vue3.js.map

package/js/components/layouts/multi-column-max-width-layout.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-column-max-width-layout.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"multi-column-max-width-layout.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/layouts/multi-column-max-width-layout.vue4.js

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../tools/inject-css.js';
 
-var css = ".dev-mode .slot-helper[data-v-450c8db0] {\n  font-family: inherit;\n  color: grey;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  border: dashed 1px grey;\n  border-radius: 10px;\n}\n.x-layout[data-v-450c8db0] {\n  --x-size-gap-default: var(--x-size-column-gap-layout-columns, 20px);\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout-columns, 1440px)) / 2);\n  --x-size-margin-layout-columns: max(\n    var(--x-size-min-margin-layout-columns, 20px),\n    var(--x-size-margin-max-width)\n  );\n  --x-number-columns-header-middle: calc(var(--x-number-columns-layout-columns, 5) - 2);\n  --x-number-columns-sub-header-content: var(--x-number-columns-header-middle);\n  --x-number-columns-toolbar-body: calc(var(--x-number-columns-layout-columns, 5) - 1);\n  display: grid;\n  align-content: stretch;\n  max-height: 100%;\n  grid-template-columns: [page-start] 1fr [scroll-to-top-start] calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default)) [scroll-to-top-end page-end];\n  grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [scroll-to-top-start] auto [main-end scroll-to-top-end page-end];\n}\n.x-layout__header[data-v-450c8db0] {\n  grid-column: page;\n  grid-row: header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [header-start] var(--x-size-margin-layout-columns) [start-content-start] 1fr [start-content-end middle-content-start] repeat(var(--x-number-columns-header-middle), 1fr) [middle-content-end end-content-start] 1fr [end-content-end] var(--x-size-margin-layout-columns) [header-end];\n  padding-top: var(--x-size-padding-top-layout-columns-header, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-header, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-header, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-header, 0);\n  background-color: var(--x-color-background-layout-columns-header, transparent);\n  border-color: var(--x-color-border-layout-columns-header, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-header, 0);\n}\n.x-layout__header-start[data-v-450c8db0] {\n  grid-column: start-content;\n}\n.x-layout__header-start.x-list[data-v-450c8db0] {\n  flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-header-start, flex start);\n  align-items: var(--x-size-align-layout-columns-header-start, flex start);\n}\n.x-layout__header-middle[data-v-450c8db0] {\n  grid-column: middle-content;\n}\n.x-layout__header-middle.x-list[data-v-450c8db0] {\n  flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-header-middle, center);\n  align-items: var(--x-size-align-layout-columns-header-middle, flex start);\n}\n.x-layout__header-end[data-v-450c8db0] {\n  grid-column: end-content;\n}\n.x-layout__header-end.x-list[data-v-450c8db0] {\n  flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-header-end, flex-end);\n  align-items: var(--x-size-align-layout-columns-header-end, flex-start);\n}\n.x-layout__sub-header[data-v-450c8db0] {\n  grid-column: page;\n  grid-row: sub-header;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [sub-header-start] var(--x-size-margin-layout-columns) 1fr [sub-header-content-start] repeat(var(--x-number-columns-sub-header-content), 1fr) [sub-header-content-end] 1fr var(--x-size-margin-layout-columns) [sub-header-end];\n  padding-top: var(--x-size-padding-top-layout-columns-sub-header, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n  margin-top: var(--x-size-margin-top-layout-columns-sub-header, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-sub-header, 0);\n  background-color: var(--x-color-background-layout-columns-sub-header, transparent);\n  border-color: var(--x-color-border-layout-columns-sub-header, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-sub-header, 0);\n}\n.x-layout__sub-header-content[data-v-450c8db0] {\n  grid-column: sub-header-content;\n}\n.x-layout__sub-header-content.x-list[data-v-450c8db0] {\n  flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-sub-header, flex-start);\n  align-items: var(--x-size-align-layout-columns-sub-header, flex-start);\n}\n.x-layout__toolbar[data-v-450c8db0] {\n  grid-column: page;\n  grid-row: toolbar;\n  display: grid;\n  column-gap: var(--x-size-gap-default);\n  grid-template-columns: [toolbar-start] var(--x-size-margin-layout-columns) [toolbar-aside-start] 1fr [toolbar-aside-end toolbar-body-start] repeat(var(--x-number-columns-toolbar-body), 1fr) [toolbar-body-end] var(--x-size-margin-layout-columns) [toolbar-end];\n  padding-top: var(--x-size-padding-top-layout-columns-toolbar, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-toolbar, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-toolbar, 0);\n  background-color: var(--x-color-background-layout-columns-toolbar, transparent);\n  border-color: var(--x-color-border-layout-columns-toolbar, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-toolbar, 0);\n}\n.x-layout__toolbar-aside[data-v-450c8db0] {\n  grid-column: toolbar-aside;\n}\n.x-layout__toolbar-aside.x-list[data-v-450c8db0] {\n  flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);\n  align-items: var(--x-size-align-layout-columns-toolbar-aside, center);\n}\n.x-layout__toolbar-body[data-v-450c8db0] {\n  grid-column: toolbar-body;\n}\n.x-layout__toolbar-body.x-list[data-v-450c8db0] {\n  flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);\n  justify-content: var(--x-size-justify-layout-columns-toolbar-body, flex-end);\n  align-items: var(--x-size-align-layout-columns-toolbar-body, center);\n}\n.x-layout__main[data-v-450c8db0] {\n  grid-column: page;\n  grid-row: main;\n  min-height: 0;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: stretch;\n  padding-left: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));\n  padding-top: var(--x-size-padding-top-layout-columns-main, 0);\n  padding-bottom: var(--x-size-padding-bottom-layout-columns-main, 0);\n  margin-top: var(--x-size-margin-top-layout-columns-main, 0);\n  margin-bottom: var(--x-size-margin-bottom-layout-columns-main, 0);\n  background-color: var(--x-color-background-layout-columns-main, transparent);\n  border-color: var(--x-color-border-layout-columns-main, transparent);\n  border-style: solid;\n  border-width: var(--x-size-border-width-layout-columns-main, 0);\n}\n.x-layout__collapse-aside[data-v-450c8db0] {\n  width: calc((100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) - var(--x-size-margin-layout-columns)) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default));\n}\n.x-layout__aside-scroll[data-v-450c8db0] {\n  height: 100%;\n  margin-right: var(--x-size-gap-default);\n}\n.x-layout__body-scroll[data-v-450c8db0] {\n  flex: 1 1 auto;\n  width: 0;\n  padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);\n}\n.x-layout__body-scroll.x-scroll[data-v-450c8db0] {\n  overflow-y: scroll;\n}\n.x-layout__scroll-to-top[data-v-450c8db0] {\n  grid-area: scroll-to-top;\n  justify-content: flex-end;\n  width: 100%;\n  display: flex;\n  z-index: 1;\n  pointer-events: none;\n}\n[dir=\"ltr\"] .x-layout__scroll-to-top-content[data-v-450c8db0] {\n  padding-left: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n[dir=\"rtl\"] .x-layout__scroll-to-top-content[data-v-450c8db0] {\n  padding-right: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n}\n.x-layout__scroll-to-top-content[data-v-450c8db0] {\n  flex: 1 0 auto;\n  padding-bottom: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);\n}\n.x-layout__scroll-to-top-content[data-v-450c8db0]  > * {\n  pointer-events: all;\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue?rollup-plugin-vue=styles.1.css',{source:css});
+var css = ".dev-mode .slot-helper{align-items:center;border:1px dashed grey;border-radius:10px;box-sizing:border-box;color:grey;display:flex;font-family:inherit;height:100%;justify-content:center;width:100%}.x-layout[data-v-5319aaa7]{--x-size-gap-default:var(--x-size-column-gap-layout-columns,20px);--x-size-margin-max-width:calc((100vw - var(--x-size-max-width-layout-columns, 1440px))/2);--x-size-margin-layout-columns:max(var(--x-size-min-margin-layout-columns,20px),var(--x-size-margin-max-width));--x-number-columns-header-middle:calc(var(--x-number-columns-layout-columns, 5) - 2);--x-number-columns-sub-header-content:var(--x-number-columns-header-middle);--x-number-columns-toolbar-body:calc(var(--x-number-columns-layout-columns, 5) - 1);align-content:stretch;display:grid;grid-template-columns:[page-start] 1fr [scroll-to-top-start] calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default)) [scroll-to-top-end page-end];grid-template-rows:[page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [scroll-to-top-start] auto [main-end scroll-to-top-end page-end];max-height:100%}.x-layout__header[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-header,transparent);border-color:var(--x-color-border-layout-columns-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-header,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:header;grid-template-columns:[header-start] var(--x-size-margin-layout-columns) [start-content-start] 1fr [start-content-end middle-content-start] repeat(var(--x-number-columns-header-middle),1fr) [middle-content-end end-content-start] 1fr [end-content-end] var(--x-size-margin-layout-columns) [header-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-header,0);margin-top:var(--x-size-margin-top-layout-columns-header,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-header,0);padding-top:var(--x-size-padding-top-layout-columns-header,0)}.x-layout__header-start[data-v-5319aaa7]{grid-column:start-content}.x-layout__header-start.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-start,flex start);flex-flow:var(--x-flow-layout-columns-header-start,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-start,flex start)}.x-layout__header-middle[data-v-5319aaa7]{grid-column:middle-content}.x-layout__header-middle.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-middle,flex start);flex-flow:var(--x-flow-layout-columns-header-middle,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-middle,center)}.x-layout__header-end[data-v-5319aaa7]{grid-column:end-content}.x-layout__header-end.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-end,flex-start);flex-flow:var(--x-flow-layout-columns-header-end,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-end,flex-end)}.x-layout__sub-header[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-sub-header,transparent);border-color:var(--x-color-border-layout-columns-sub-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-sub-header,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:sub-header;grid-template-columns:[sub-header-start] var(--x-size-margin-layout-columns) 1fr [sub-header-content-start] repeat(var(--x-number-columns-sub-header-content),1fr) [sub-header-content-end] 1fr var(--x-size-margin-layout-columns) [sub-header-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-sub-header,0);margin-top:var(--x-size-margin-top-layout-columns-sub-header,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-sub-header),0;padding-top:var(--x-size-padding-top-layout-columns-sub-header,0)}.x-layout__sub-header-content[data-v-5319aaa7]{grid-column:sub-header-content}.x-layout__sub-header-content.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-sub-header,flex-start);flex-flow:var(--x-flow-layout-columns-sub-header,row nowrap);justify-content:var(--x-size-justify-layout-columns-sub-header,flex-start)}.x-layout__toolbar[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-toolbar,transparent);border-color:var(--x-color-border-layout-columns-toolbar,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-toolbar,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:toolbar;grid-template-columns:[toolbar-start] var(--x-size-margin-layout-columns) [toolbar-aside-start] 1fr [toolbar-aside-end toolbar-body-start] repeat(var(--x-number-columns-toolbar-body),1fr) [toolbar-body-end] var(--x-size-margin-layout-columns) [toolbar-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-toolbar,0);margin-top:var(--x-size-margin-top-layout-columns-toolbar,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-toolbar,0);padding-top:var(--x-size-padding-top-layout-columns-toolbar,0)}.x-layout__toolbar-aside[data-v-5319aaa7]{grid-column:toolbar-aside}.x-layout__toolbar-aside.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-toolbar-aside,center);flex-flow:var(--x-flow-layout-columns-toolbar-aside,row nowrap);justify-content:var(--x-size-justify-layout-columns-toolbar-aside,flex-start)}.x-layout__toolbar-body[data-v-5319aaa7]{grid-column:toolbar-body}.x-layout__toolbar-body.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-toolbar-body,center);flex-flow:var(--x-flow-layout-columns-toolbar-body,row nowrap);justify-content:var(--x-size-justify-layout-columns-toolbar-body,flex-end)}.x-layout__main[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-main,transparent);border-color:var(--x-color-border-layout-columns-main,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-main,0);display:flex;flex-flow:row nowrap;grid-column:page;grid-row:main;justify-content:stretch;margin-bottom:var(--x-size-margin-bottom-layout-columns-main,0);margin-top:var(--x-size-margin-top-layout-columns-main,0);min-height:0;padding-bottom:var(--x-size-padding-bottom-layout-columns-main,0);padding-left:calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));padding-top:var(--x-size-padding-top-layout-columns-main,0)}.x-layout__collapse-aside[data-v-5319aaa7]{width:calc((100% - var(--x-size-gap-default)*(var(--x-number-columns-layout-columns, 5)) - var(--x-size-margin-layout-columns))/var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default))}.x-layout__aside-scroll[data-v-5319aaa7]{height:100%;margin-right:var(--x-size-gap-default)}.x-layout__body-scroll[data-v-5319aaa7]{flex:1 1 auto;padding-right:calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);width:0}.x-layout__body-scroll.x-scroll[data-v-5319aaa7]{overflow-y:scroll}.x-layout__scroll-to-top[data-v-5319aaa7]{display:flex;grid-area:scroll-to-top;justify-content:flex-end;pointer-events:none;width:100%;z-index:1}[dir=ltr] .x-layout__scroll-to-top-content[data-v-5319aaa7]{padding-left:var(--x-size-margin-left-layout-columns-scroll-to-top,10px)}[dir=rtl] .x-layout__scroll-to-top-content[data-v-5319aaa7]{padding-right:var(--x-size-margin-left-layout-columns-scroll-to-top,10px)}.x-layout__scroll-to-top-content[data-v-5319aaa7]{flex:1 0 auto;padding-bottom:var(--x-size-margin-bottom-layout-columns-scroll-to-top,10px)}.x-layout__scroll-to-top-content[data-v-5319aaa7]>*{pointer-events:all}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=multi-column-max-width-layout.vue4.js.map

package/js/components/layouts/multi-column-max-width-layout.vue4.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-column-max-width-layout.vue4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"multi-column-max-width-layout.vue4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/layouts/single-column-layout.vue.js

@@ -1,239 +1,170 @@
-import script from './single-column-layout.vue2.js';
+import _sfc_main from './single-column-layout.vue2.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, createVNode, withCtx, createBlock } from 'vue';
 import './single-column-layout.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
+const _hoisted_1 = {
+  key: 0,
+  class: "x-layout__header x-list x-list--horizontal"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "x-layout__sub-header x-list x-list--horizontal"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_5 = {
+  key: 2,
+  class: "x-layout__toolbar x-list x-list--horizontal"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_7 = {
+  key: 3,
+  class: "x-layout__predictive x-list x-list--vertical"
+};
+const _hoisted_8 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_9 = {
+  key: 4,
+  class: "x-layout__main"
+};
+const _hoisted_10 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_11 = {
+  key: 5,
+  class: "x-layout__floating x-list x-list--horizontal"
+};
+const _hoisted_12 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_13 = {
+  key: 6,
+  class: "x-layout__footer x-list x-list--horizontal"
+};
+const _hoisted_14 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_15 = {
+  key: 0,
+  class: "slot-helper"
+};
+const _hoisted_16 = {
+  key: 0,
+  class: "slot-helper"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_BaseScroll = resolveComponent("BaseScroll");
+  const _component_Scroll = resolveComponent("Scroll");
+  const _component_MainScroll = resolveComponent("MainScroll");
+  const _component_BaseIdModal = resolveComponent("BaseIdModal");
+  return openBlock(), createElementBlock(
     "div",
     {
-      staticClass: "x-layout x-layout--single-column",
-      class: { "dev-mode": _vm.devMode },
+      class: normalizeClass(["x-layout x-layout--single-column", { "dev-mode": _ctx.devMode }])
     },
     [
-      _vm.hasContent("header")
-        ? _c(
-            "header",
-            { staticClass: "x-layout__header x-list x-list--horizontal" },
-            [
-              _vm._t("header", function () {
-                return [
-                  _vm.devMode
-                    ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("HEADER"),
-                      ])
-                    : _vm._e(),
-                ]
-              }),
-            ],
-            2
-          )
-        : _vm._e(),
-      _vm.hasContent("sub-header")
-        ? _c(
-            "div",
-            { staticClass: "x-layout__sub-header x-list x-list--horizontal" },
-            [
-              _vm._t("sub-header", function () {
-                return [
-                  _vm.devMode
-                    ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("SUB HEADER"),
-                      ])
-                    : _vm._e(),
-                ]
-              }),
-            ],
-            2
-          )
-        : _vm._e(),
-      _vm.hasContent("toolbar")
-        ? _c(
-            "div",
-            { staticClass: "x-layout__toolbar x-list x-list--horizontal" },
-            [
-              _vm._t("toolbar", function () {
-                return [
-                  _vm.devMode
-                    ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("TOOLBAR"),
-                      ])
-                    : _vm._e(),
-                ]
-              }),
-            ],
-            2
-          )
-        : _vm._e(),
-      _vm.hasContent("predictive")
-        ? _c(
-            "div",
-            { staticClass: "x-layout__predictive x-list x-list--vertical" },
-            [
-              _c(
-                "BaseScroll",
-                {
-                  staticClass:
-                    "x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand",
-                },
-                [
-                  _vm._t("predictive", function () {
-                    return [
-                      _vm.devMode
-                        ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("PREDICTIVE"),
-                          ])
-                        : _vm._e(),
-                    ]
-                  }),
-                ],
-                2
-              ),
-            ],
-            1
-          )
-        : _vm._e(),
-      _vm.hasContent("main")
-        ? _c(
-            "main",
-            { staticClass: "x-layout__main" },
-            [
-              _c(
-                "MainScroll",
-                [
-                  _c(
-                    "Scroll",
-                    {
-                      staticClass:
-                        "x-layout__main-scroll x-list x-list--vertical",
-                      attrs: { id: "main-scroll" },
-                    },
-                    [
-                      _vm._t("main", function () {
-                        return [
-                          _vm.devMode
-                            ? _c("span", { staticClass: "slot-helper" }, [
-                                _vm._v("MAIN"),
-                              ])
-                            : _vm._e(),
-                        ]
-                      }),
-                    ],
-                    2
-                  ),
-                ],
-                1
-              ),
-            ],
-            1
-          )
-        : _vm._e(),
-      _vm.hasContent("floating")
-        ? _c(
-            "div",
-            { staticClass: "x-layout__floating x-list x-list--horizontal" },
-            [
-              _vm._t("floating", function () {
-                return [
-                  _vm.devMode
-                    ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("FLOATING"),
-                      ])
-                    : _vm._e(),
-                ]
-              }),
-            ],
-            2
-          )
-        : _vm._e(),
-      _vm.hasContent("footer")
-        ? _c(
-            "footer",
-            { staticClass: "x-layout__footer x-list x-list--horizontal" },
-            [
-              _vm._t("footer", function () {
-                return [
-                  _vm.devMode
-                    ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("FOOTER"),
-                      ])
-                    : _vm._e(),
-                ]
-              }),
-            ],
-            2
-          )
-        : _vm._e(),
-      _vm.hasContent("aside")
-        ? _c(
-            "BaseIdModal",
-            {
-              staticClass: "x-layout__aside",
-              attrs: { animation: _vm.asideAnimation, modalId: "aside-modal" },
-            },
-            [
-              _vm._t("aside", function () {
-                return [
-                  _vm.devMode
-                    ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("ASIDE"),
-                      ])
-                    : _vm._e(),
-                ]
-              }),
-            ],
-            2
-          )
-        : _vm._e(),
-      _vm._t("extra-aside", function () {
-        return [
-          _vm.devMode
-            ? _c("span", { staticClass: "slot-helper" }, [
-                _vm._v("EXTRA ASIDE"),
-              ])
-            : _vm._e(),
-        ]
-      }),
+      _ctx.devMode || _ctx.$slots["header"] ? (openBlock(), createElementBlock("header", _hoisted_1, [
+        createCommentVNode(" @slot Slot that is used to insert content into the Header. "),
+        renderSlot(_ctx.$slots, "header", {}, () => [
+          _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_2, "HEADER")) : createCommentVNode("v-if", true)
+        ], true)
+      ])) : createCommentVNode("v-if", true),
+      _ctx.devMode || _ctx.$slots["sub-header"] ? (openBlock(), createElementBlock("div", _hoisted_3, [
+        createCommentVNode(" @slot Slot that can be used to insert content into the Sub Header. "),
+        renderSlot(_ctx.$slots, "sub-header", {}, () => [
+          _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_4, "SUB HEADER")) : createCommentVNode("v-if", true)
+        ], true)
+      ])) : createCommentVNode("v-if", true),
+      _ctx.devMode || _ctx.$slots["toolbar"] ? (openBlock(), createElementBlock("div", _hoisted_5, [
+        createCommentVNode(" @slot Slot that can be used to insert content into the Toolbar. "),
+        renderSlot(_ctx.$slots, "toolbar", {}, () => [
+          _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_6, "TOOLBAR")) : createCommentVNode("v-if", true)
+        ], true)
+      ])) : createCommentVNode("v-if", true),
+      _ctx.devMode || _ctx.$slots["predictive"] ? (openBlock(), createElementBlock("div", _hoisted_7, [
+        createVNode(_component_BaseScroll, { class: "x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand" }, {
+          default: withCtx(() => [
+            createCommentVNode(" @slot Slot that can be used to insert content into the Predictive Layer. "),
+            renderSlot(_ctx.$slots, "predictive", {}, () => [
+              _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_8, "PREDICTIVE")) : createCommentVNode("v-if", true)
+            ], true)
+          ]),
+          _: 3
+          /* FORWARDED */
+        })
+      ])) : createCommentVNode("v-if", true),
+      _ctx.devMode || _ctx.$slots["main"] ? (openBlock(), createElementBlock("main", _hoisted_9, [
+        createVNode(_component_MainScroll, null, {
+          default: withCtx(() => [
+            createVNode(_component_Scroll, {
+              id: "main-scroll",
+              class: "x-layout__main-scroll x-list x-list--vertical"
+            }, {
+              default: withCtx(() => [
+                createCommentVNode(" @slot Slot that can be used to insert content into the Main. "),
+                renderSlot(_ctx.$slots, "main", {}, () => [
+                  _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_10, "MAIN")) : createCommentVNode("v-if", true)
+                ], true)
+              ]),
+              _: 3
+              /* FORWARDED */
+            })
+          ]),
+          _: 3
+          /* FORWARDED */
+        })
+      ])) : createCommentVNode("v-if", true),
+      _ctx.devMode || _ctx.$slots["floating"] ? (openBlock(), createElementBlock("div", _hoisted_11, [
+        createCommentVNode(" @slot Slot that can be used to insert content into the Floating. "),
+        renderSlot(_ctx.$slots, "floating", {}, () => [
+          _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_12, "FLOATING")) : createCommentVNode("v-if", true)
+        ], true)
+      ])) : createCommentVNode("v-if", true),
+      _ctx.devMode || _ctx.$slots["footer"] ? (openBlock(), createElementBlock("footer", _hoisted_13, [
+        createCommentVNode(" @slot Slot that can be used to insert content into the Footer. "),
+        renderSlot(_ctx.$slots, "footer", {}, () => [
+          _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_14, "FOOTER")) : createCommentVNode("v-if", true)
+        ], true)
+      ])) : createCommentVNode("v-if", true),
+      _ctx.devMode || _ctx.$slots["aside"] ? (openBlock(), createBlock(_component_BaseIdModal, {
+        key: 7,
+        animation: _ctx.asideAnimation,
+        modalId: "aside-modal",
+        class: "x-layout__aside"
+      }, {
+        default: withCtx(() => [
+          createCommentVNode(" @slot Slot that can be used to insert content into the Aside. "),
+          renderSlot(_ctx.$slots, "aside", {}, () => [
+            _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_15, "ASIDE")) : createCommentVNode("v-if", true)
+          ], true)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["animation"])) : createCommentVNode("v-if", true),
+      renderSlot(_ctx.$slots, "extra-aside", {}, () => [
+        _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_16, "EXTRA ASIDE")) : createCommentVNode("v-if", true)
+      ], true)
     ],
     2
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-4b0b5166";
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
+    /* CLASS */
   );
+}
+var singleColumnLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-9dd00b61"]]);
 
-export { __vue_component__ as default };
+export { singleColumnLayout as default };
 //# sourceMappingURL=single-column-layout.vue.js.map