@empathyco/x-components 3.0.0-alpha.30 → 3.0.0-alpha.34

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

@@ -6,7 +6,7 @@ import script from './single-column-layout.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,7 +14,7 @@ var __vue_render__ = function() {
     "div",
     {
       staticClass: "x-layout x-layout--single-column",
-      class: { "dev-mode": _vm.devMode }
+      class: { "dev-mode": _vm.devMode },
     },
     [
       _vm.hasContent("header")
@@ -22,16 +22,13 @@ var __vue_render__ = function() {
             "header",
             { staticClass: "x-layout__header x-list x-list--horizontal" },
             [
-              _vm._t("header", function() {
+              _vm._t("header", function () {
                 return [
                   _vm.devMode
                     ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("HEADER")
-                      ])
-                    : _vm._e()
-                ]
-              })
-            ],
+                        _vm._v("HEADER") ])
+                    : _vm._e() ]
+              }) ],
             2
           )
         : _vm._e(),
@@ -41,16 +38,13 @@ var __vue_render__ = function() {
             "div",
             { staticClass: "x-layout__sub-header x-list x-list--horizontal" },
             [
-              _vm._t("sub-header", function() {
+              _vm._t("sub-header", function () {
                 return [
                   _vm.devMode
                     ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("SUB HEADER")
-                      ])
-                    : _vm._e()
-                ]
-              })
-            ],
+                        _vm._v("SUB HEADER") ])
+                    : _vm._e() ]
+              }) ],
             2
           )
         : _vm._e(),
@@ -60,16 +54,13 @@ var __vue_render__ = function() {
             "div",
             { staticClass: "x-layout__toolbar x-list x-list--horizontal" },
             [
-              _vm._t("toolbar", function() {
+              _vm._t("toolbar", function () {
                 return [
                   _vm.devMode
                     ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("TOOLBAR")
-                      ])
-                    : _vm._e()
-                ]
-              })
-            ],
+                        _vm._v("TOOLBAR") ])
+                    : _vm._e() ]
+              }) ],
             2
           )
         : _vm._e(),
@@ -82,19 +73,15 @@ var __vue_render__ = function() {
               _c(
                 "BaseScroll",
                 [
-                  _vm._t("predictive", function() {
+                  _vm._t("predictive", function () {
                     return [
                       _vm.devMode
                         ? _c("span", { staticClass: "slot-helper" }, [
-                            _vm._v("PREDICTIVE")
-                          ])
-                        : _vm._e()
-                    ]
-                  })
-                ],
+                            _vm._v("PREDICTIVE") ])
+                        : _vm._e() ]
+                  }) ],
                 2
-              )
-            ],
+              ) ],
             1
           )
         : _vm._e(),
@@ -111,22 +98,17 @@ var __vue_render__ = function() {
                     "Scroll",
                     { attrs: { id: "main-scroll" } },
                     [
-                      _vm._t("main", function() {
+                      _vm._t("main", function () {
                         return [
                           _vm.devMode
                             ? _c("span", { staticClass: "slot-helper" }, [
-                                _vm._v("MAIN")
-                              ])
-                            : _vm._e()
-                        ]
-                      })
-                    ],
+                                _vm._v("MAIN") ])
+                            : _vm._e() ]
+                      }) ],
                     2
-                  )
-                ],
+                  ) ],
                 1
-              )
-            ],
+              ) ],
             1
           )
         : _vm._e(),
@@ -136,16 +118,13 @@ var __vue_render__ = function() {
             "div",
             { staticClass: "x-layout__floating x-list x-list--horizontal" },
             [
-              _vm._t("floating", function() {
+              _vm._t("floating", function () {
                 return [
                   _vm.devMode
                     ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("FLOATING")
-                      ])
-                    : _vm._e()
-                ]
-              })
-            ],
+                        _vm._v("FLOATING") ])
+                    : _vm._e() ]
+              }) ],
             2
           )
         : _vm._e(),
@@ -155,16 +134,13 @@ var __vue_render__ = function() {
             "footer",
             { staticClass: "x-layout__footer x-list x-list--horizontal" },
             [
-              _vm._t("footer", function() {
+              _vm._t("footer", function () {
                 return [
                   _vm.devMode
                     ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("FOOTER")
-                      ])
-                    : _vm._e()
-                ]
-              })
-            ],
+                        _vm._v("FOOTER") ])
+                    : _vm._e() ]
+              }) ],
             2
           )
         : _vm._e(),
@@ -174,23 +150,19 @@ var __vue_render__ = function() {
             "BaseIdModal",
             {
               staticClass: "x-layout__aside",
-              attrs: { animation: _vm.asideAnimation, modalId: "aside-modal" }
+              attrs: { animation: _vm.asideAnimation, modalId: "aside-modal" },
             },
             [
-              _vm._t("aside", function() {
+              _vm._t("aside", function () {
                 return [
                   _vm.devMode
                     ? _c("span", { staticClass: "slot-helper" }, [
-                        _vm._v("ASIDE")
-                      ])
-                    : _vm._e()
-                ]
-              })
-            ],
+                        _vm._v("ASIDE") ])
+                    : _vm._e() ]
+              }) ],
             2
           )
-        : _vm._e()
-    ],
+        : _vm._e() ],
     1
   )
 };

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

@@ -1 +1 @@
-{"version":3,"file":"single-column-layout.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n  <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n    <header v-if=\"hasContent('header')\" class=\"x-layout__header x-list x-list--horizontal\">\n      <!-- @slot Slot that is used to insert content into the Header. -->\n      <slot name=\"header\">\n        <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n      </slot>\n    </header>\n    <div v-if=\"hasContent('sub-header')\" class=\"x-layout__sub-header x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Sub Header. -->\n      <slot name=\"sub-header\">\n        <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n      </slot>\n    </div>\n\n    <div v-if=\"hasContent('toolbar')\" class=\"x-layout__toolbar x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Toolbar. -->\n      <slot name=\"toolbar\">\n        <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n      </slot>\n    </div>\n\n    <div v-if=\"hasContent('predictive')\" class=\"x-layout__predictive x-list x-list--vertical\">\n      <BaseScroll>\n        <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->\n        <slot name=\"predictive\">\n          <span v-if=\"devMode\" class=\"slot-helper\">PREDICTIVE</span>\n        </slot>\n      </BaseScroll>\n    </div>\n\n    <main v-if=\"hasContent('main')\" class=\"x-layout__main x-list x-list--vertical\">\n      <MainScroll>\n        <Scroll id=\"main-scroll\">\n          <!-- @slot Slot that can be used to insert content into the Main. -->\n          <slot name=\"main\">\n            <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n          </slot>\n        </Scroll>\n      </MainScroll>\n    </main>\n\n    <div v-if=\"hasContent('floating')\" class=\"x-layout__floating x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Floating. -->\n      <slot name=\"floating\">\n        <span v-if=\"devMode\" class=\"slot-helper\">FLOATING</span>\n      </slot>\n    </div>\n\n    <footer v-if=\"hasContent('footer')\" class=\"x-layout__footer x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Footer. -->\n      <slot name=\"footer\">\n        <span v-if=\"devMode\" class=\"slot-helper\">FOOTER</span>\n      </slot>\n    </footer>\n\n    <BaseIdModal\n      v-if=\"hasContent('aside')\"\n      :animation=\"asideAnimation\"\n      modalId=\"aside-modal\"\n      class=\"x-layout__aside\"\n    >\n      <!-- @slot Slot that can be used to insert content into the Aside. -->\n      <slot name=\"aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">ASIDE</span>\n      </slot>\n    </BaseIdModal>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { mixins } from 'vue-class-component';\n  import { Component, 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 TranslateFromRight from '../animations/translate-from-right.vue';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import BaseScroll from '../scroll/base-scroll.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   * @public\n   */\n  @Component({\n    components: { BaseIdModal, BaseScroll, MainScroll, Scroll }\n  })\n  export default class SingleColumnLayout extends mixins(LayoutsMixin) {\n    /**\n     * The animation used for the Main Aside.\n     *\n     * @public\n     */\n    @Prop({ default: () => TranslateFromRight })\n    protected asideAnimation!: Vue;\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  @import '../../design-system/utilities/dev-mode';\n\n  .x-layout {\n    display: grid;\n    align-content: stretch;\n    justify-content: stretch;\n    height: 100%;\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      [floating-start]\n      auto\n      [main-end floating-end footer-start]\n      auto\n      [footer-end page-end];\n\n    grid-template-columns: 1fr;\n\n    > * {\n      grid-column: 1/-1;\n      min-width: 0;\n      min-height: 0;\n      display: flex;\n    }\n\n    &__header {\n      grid-row: header;\n    }\n\n    &__sub-header {\n      grid-row: sub-header;\n    }\n\n    &__toolbar {\n      grid-row: toolbar;\n    }\n\n    &__predictive {\n      grid-row-start: header-end;\n      grid-row-end: page-end;\n      flex-flow: column nowrap;\n      z-index: 2;\n    }\n\n    &__main {\n      grid-row: main;\n      flex-flow: column nowrap;\n    }\n\n    &__floating {\n      grid-row: floating;\n      z-index: 1;\n    }\n\n    &__footer {\n      grid-row: footer;\n    }\n\n    &__aside {\n      grid-row: page;\n      z-index: 3;\n\n      ::v-deep .x-modal__content {\n        width: 100%;\n        height: 100%;\n        margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n      }\n    }\n\n    &__predictive,\n    &__floating,\n    &__aside,\n    .slot-helper {\n      pointer-events: none;\n\n      ::v-deep > * {\n        pointer-events: all;\n      }\n\n      ::v-deep .x-list {\n        pointer-events: none;\n\n        > * {\n          pointer-events: all;\n        }\n      }\n    }\n  }\n</style>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"single-column-layout.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n  <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n    <header v-if=\"hasContent('header')\" class=\"x-layout__header x-list x-list--horizontal\">\n      <!-- @slot Slot that is used to insert content into the Header. -->\n      <slot name=\"header\">\n        <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n      </slot>\n    </header>\n    <div v-if=\"hasContent('sub-header')\" class=\"x-layout__sub-header x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Sub Header. -->\n      <slot name=\"sub-header\">\n        <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n      </slot>\n    </div>\n\n    <div v-if=\"hasContent('toolbar')\" class=\"x-layout__toolbar x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Toolbar. -->\n      <slot name=\"toolbar\">\n        <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n      </slot>\n    </div>\n\n    <div v-if=\"hasContent('predictive')\" class=\"x-layout__predictive x-list x-list--vertical\">\n      <BaseScroll>\n        <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->\n        <slot name=\"predictive\">\n          <span v-if=\"devMode\" class=\"slot-helper\">PREDICTIVE</span>\n        </slot>\n      </BaseScroll>\n    </div>\n\n    <main v-if=\"hasContent('main')\" class=\"x-layout__main x-list x-list--vertical\">\n      <MainScroll>\n        <Scroll id=\"main-scroll\">\n          <!-- @slot Slot that can be used to insert content into the Main. -->\n          <slot name=\"main\">\n            <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n          </slot>\n        </Scroll>\n      </MainScroll>\n    </main>\n\n    <div v-if=\"hasContent('floating')\" class=\"x-layout__floating x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Floating. -->\n      <slot name=\"floating\">\n        <span v-if=\"devMode\" class=\"slot-helper\">FLOATING</span>\n      </slot>\n    </div>\n\n    <footer v-if=\"hasContent('footer')\" class=\"x-layout__footer x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Footer. -->\n      <slot name=\"footer\">\n        <span v-if=\"devMode\" class=\"slot-helper\">FOOTER</span>\n      </slot>\n    </footer>\n\n    <BaseIdModal\n      v-if=\"hasContent('aside')\"\n      :animation=\"asideAnimation\"\n      modalId=\"aside-modal\"\n      class=\"x-layout__aside\"\n    >\n      <!-- @slot Slot that can be used to insert content into the Aside. -->\n      <slot name=\"aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">ASIDE</span>\n      </slot>\n    </BaseIdModal>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { mixins } from 'vue-class-component';\n  import { Component, 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 TranslateFromRight from '../animations/translate-from-right.vue';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import BaseScroll from '../scroll/base-scroll.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   * @public\n   */\n  @Component({\n    components: { BaseIdModal, BaseScroll, MainScroll, Scroll }\n  })\n  export default class SingleColumnLayout extends mixins(LayoutsMixin) {\n    /**\n     * The animation used for the Main Aside.\n     *\n     * @public\n     */\n    @Prop({ default: () => TranslateFromRight })\n    protected asideAnimation!: Vue;\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  @import '../../design-system/utilities/dev-mode';\n\n  .x-layout {\n    display: grid;\n    align-content: stretch;\n    justify-content: stretch;\n    height: 100%;\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      [floating-start]\n      auto\n      [main-end floating-end footer-start]\n      auto\n      [footer-end page-end];\n\n    grid-template-columns: 1fr;\n\n    > * {\n      grid-column: 1/-1;\n      min-width: 0;\n      min-height: 0;\n      display: flex;\n    }\n\n    &__header {\n      grid-row: header;\n    }\n\n    &__sub-header {\n      grid-row: sub-header;\n    }\n\n    &__toolbar {\n      grid-row: toolbar;\n    }\n\n    &__predictive {\n      grid-row-start: header-end;\n      grid-row-end: page-end;\n      flex-flow: column nowrap;\n      z-index: 2;\n    }\n\n    &__main {\n      grid-row: main;\n      flex-flow: column nowrap;\n    }\n\n    &__floating {\n      grid-row: floating;\n      z-index: 1;\n    }\n\n    &__footer {\n      grid-row: footer;\n    }\n\n    &__aside {\n      grid-row: page;\n      z-index: 3;\n\n      ::v-deep .x-modal__content {\n        width: 100%;\n        height: 100%;\n        margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n      }\n    }\n\n    &__predictive,\n    &__floating,\n    &__aside,\n    .slot-helper {\n      pointer-events: none;\n\n      ::v-deep > * {\n        pointer-events: all;\n      }\n\n      ::v-deep .x-list {\n        pointer-events: none;\n\n        > * {\n          pointer-events: all;\n        }\n      }\n    }\n  }\n</style>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/modals/base-events-modal-close.vue.js

@@ -5,7 +5,7 @@ import script from './base-events-modal-close.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,7 +14,7 @@ var __vue_render__ = function() {
     _vm._g(
       {
         staticClass: "x-button x-events-modal-close-button",
-        attrs: { events: _vm.events, "data-test": "close-modal" }
+        attrs: { events: _vm.events, "data-test": "close-modal" },
       },
       _vm.$listeners
     ),

package/js/components/modals/base-events-modal-open.vue.js

@@ -5,7 +5,7 @@ import script from './base-events-modal-open.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,7 +14,7 @@ var __vue_render__ = function() {
     _vm._g(
       {
         staticClass: "x-button x-events-modal-open-button",
-        attrs: { events: _vm.events, "data-test": "open-modal" }
+        attrs: { events: _vm.events, "data-test": "open-modal" },
       },
       _vm.$listeners
     ),

package/js/components/modals/base-events-modal.vue.js

@@ -5,7 +5,7 @@ import script from './base-events-modal.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,8 +15,8 @@ var __vue_render__ = function() {
       attrs: { animation: _vm.animation, open: _vm.isOpen },
       on: {
         "click:overlay": _vm.emitBodyClickEvent,
-        "focusin:body": _vm.emitBodyClickEvent
-      }
+        "focusin:body": _vm.emitBodyClickEvent,
+      },
     },
     [_vm._t("default")],
     2

package/js/components/modals/base-id-modal-close.vue.js

@@ -5,7 +5,7 @@ import script from './base-id-modal-close.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,7 +14,7 @@ var __vue_render__ = function() {
     _vm._g(
       {
         staticClass: "x-button x-events-modal-id-close-button",
-        attrs: { events: _vm.events, "data-test": "close-modal-id" }
+        attrs: { events: _vm.events, "data-test": "close-modal-id" },
       },
       _vm.$listeners
     ),

package/js/components/modals/base-id-modal-open.vue.js

@@ -5,7 +5,7 @@ import script from './base-id-modal-open.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,7 +14,7 @@ var __vue_render__ = function() {
     _vm._g(
       {
         staticClass: "x-button x-events-modal-id-open-button",
-        attrs: { events: _vm.events, "data-test": "open-modal-id" }
+        attrs: { events: _vm.events, "data-test": "open-modal-id" },
       },
       _vm.$listeners
     ),

package/js/components/modals/base-id-modal.vue.js

@@ -5,7 +5,7 @@ import script from './base-id-modal.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,8 +15,8 @@ var __vue_render__ = function() {
       attrs: { animation: _vm.animation, open: _vm.isOpen },
       on: {
         "click:overlay": _vm.emitClickOutOfModal,
-        "focusin:body": _vm.emitClickOutOfModal
-      }
+        "focusin:body": _vm.emitClickOutOfModal,
+      },
     },
     [_vm._t("default")],
     2

package/js/components/modals/base-modal.vue.js

@@ -6,7 +6,7 @@ import script from './base-modal.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,13 +15,13 @@ var __vue_render__ = function() {
     {
       tag: "component",
       on: {
-        beforeEnter: function($event) {
+        beforeEnter: function ($event) {
           _vm.showOverlay = false;
         },
-        afterEnter: function($event) {
+        afterEnter: function ($event) {
           _vm.showOverlay = true;
-        }
-      }
+        },
+      },
     },
     [
       _vm.open
@@ -34,7 +34,7 @@ var __vue_render__ = function() {
                 {
                   ref: "modal",
                   staticClass: "x-modal__content x-list",
-                  attrs: { "data-test": "modal-content", role: "dialog" }
+                  attrs: { "data-test": "modal-content", role: "dialog" },
                 },
                 [_vm._t("default")],
                 2
@@ -44,12 +44,10 @@ var __vue_render__ = function() {
                 staticClass: "x-modal__overlay",
                 class: { "x-modal__overlay--is-visible": _vm.showOverlay },
                 attrs: { "data-test": "modal-overlay" },
-                on: { click: _vm.emitOverlayClicked }
-              })
-            ]
+                on: { click: _vm.emitOverlayClicked },
+              }) ]
           )
-        : _vm._e()
-    ]
+        : _vm._e() ]
   )
 };
 var __vue_staticRenderFns__ = [];

package/js/components/modals/base-modal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-modal.vue.js","sources":["../../../../src/components/modals/base-modal.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" @beforeEnter=\"showOverlay = false\" @afterEnter=\"showOverlay = true\">\n    <div v-if=\"open\" class=\"x-modal\" data-test=\"modal\">\n      <div ref=\"modal\" class=\"x-modal__content x-list\" data-test=\"modal-content\" role=\"dialog\">\n        <!-- @slot (Required) Modal container content -->\n        <slot />\n      </div>\n      <div\n        @click=\"emitOverlayClicked\"\n        class=\"x-modal__overlay\"\n        :class=\"{ 'x-modal__overlay--is-visible': showOverlay }\"\n        data-test=\"modal-overlay\"\n      />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NoElement } from '../no-element';\n\n  /**\n   * Base component with no XPlugin dependencies that serves as a utility for constructing more\n   * complex modals.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseModal extends Vue {\n    /**\n     * Animation to use for opening/closing the modal.\n     */\n    @Prop({ default: () => NoElement })\n    public animation!: Vue | string;\n\n    /**\n     * Determines if the modal is open or not.\n     */\n    @Prop({ required: true })\n    public open!: boolean;\n\n    /** The previous value of the body overflow style. */\n    protected previousBodyOverflow = '';\n    /** The previous value of the HTML element overflow style. */\n    protected previousHTMLOverflow = '';\n    /** To animate the overlay opacity after and before the animation. */\n    protected showOverlay = true;\n\n    public $refs!: {\n      modal: HTMLDivElement;\n    };\n\n    protected mounted(): void {\n      /* Watcher added after mount to prevent SSR from breaking */\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.$watch('open', this.syncBody, { immediate: true });\n    }\n\n    /**\n     * Syncs the body to the open state of the modal, adding or removing styles and listeners.\n     *\n     * @param isOpen - True when the modal is opened.\n     * @internal\n     */\n    protected syncBody(isOpen: boolean): void {\n      if (isOpen) {\n        this.disableScroll();\n        this.addBodyListeners();\n        /* eslint-disable @typescript-eslint/unbound-method */\n        this.$on('hook:beforeDestroy', this.removeBodyListeners);\n        this.$on('hook:beforeDestroy', this.enableScroll);\n        /* eslint-enable @typescript-eslint/unbound-method */\n      } else {\n        this.enableScroll();\n        this.removeBodyListeners();\n        /* eslint-disable @typescript-eslint/unbound-method */\n        this.$off('hook:beforeDestroy', this.removeBodyListeners);\n        this.$off('hook:beforeDestroy', this.enableScroll);\n        /* eslint-enable @typescript-eslint/unbound-method */\n      }\n    }\n\n    /**\n     * Disables the scroll of both the body and the window.\n     *\n     * @internal\n     */\n    protected disableScroll(): void {\n      this.previousBodyOverflow = document.body.style.overflow;\n      this.previousHTMLOverflow = document.documentElement.style.overflow;\n      document.body.style.overflow = document.documentElement.style.overflow = 'hidden';\n    }\n\n    /**\n     * Restores the scroll of both the body and the window.\n     *\n     * @internal\n     */\n    protected enableScroll(): void {\n      document.body.style.overflow = this.previousBodyOverflow;\n      document.documentElement.style.overflow = this.previousHTMLOverflow;\n      document.body.style.overflow = document.documentElement.style.overflow = '';\n    }\n\n    /**\n     * Adds listeners to the body element ot detect if the modal should be closed.\n     *\n     * @internal\n     */\n    protected addBodyListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.body.addEventListener('focusin', this.emitFocusInBody);\n      /* eslint-enable @typescript-eslint/unbound-method */\n    }\n\n    /**\n     * Removes the body listeners.\n     *\n     * @internal\n     */\n    protected removeBodyListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.body.removeEventListener('focusin', this.emitFocusInBody);\n      /* eslint-enable @typescript-eslint/unbound-method */\n    }\n\n    /**\n     * Emits the `click:overlay` event if the click has been triggered in the overlay layer.\n     *\n     * @param event - The click event.\n     * @internal\n     */\n    protected emitOverlayClicked(event: MouseEvent): void {\n      this.$emit('click:overlay', event);\n    }\n\n    /**\n     * Emits the `focusin:body` event if a focus event has been triggered outside the modal.\n     *\n     * @param event - The focusin event.\n     * @internal\n     */\n    protected emitFocusInBody(event: FocusEvent): void {\n      if (!this.$refs.modal.contains(event.target as HTMLElement)) {\n        this.$emit('focusin:body', event);\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-modal {\n    position: fixed;\n    top: 0;\n    left: 0;\n\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n    width: 100%;\n    height: 100%;\n\n    z-index: 1;\n\n    &__content {\n      z-index: 1;\n    }\n\n    &__overlay {\n      width: 100%;\n      height: 100%;\n      position: fixed;\n      background-color: rgba(0, 0, 0, 0.7);\n      opacity: 0;\n\n      &--is-visible {\n        transition: opacity 0.3s ease-out;\n        opacity: 1;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nThe `BaseModal` is a simple component that serves to create complex modals. Its open state has to be\npassed via prop. It also accepts an animation to use for opening & closing.\n\nIt emits a `click:overlay` event when any part out of the content is clicked, but only if the modal\nis open.\n\n```vue\n<template>\n  <div>\n    <button @click=\"open = true\">Open modal</button>\n    <BaseModal animation=\"fadeAndSlide\" :open=\"open\" @click:overlay=\"open = false\">\n      <h1>Hello</h1>\n      <p>The modal is working</p>\n      <button @click=\"open = false\">Close modal</button>\n    </BaseModal>\n  </div>\n</template>\n\n<script>\n  import { BaseModal, FadeAndSlide } from '@empathyco/x-components';\n  import Vue from 'vue';\n\n  Vue.component('fadeAndSlide', FadeAndSlide);\n\n  export default {\n    components: {\n      BaseModal\n    },\n    data() {\n      return {\n        open: false\n      };\n    }\n  };\n</script>\n```\n\n## Vue Events\n\nA list of events that the component will emit:\n\n- `click:overlay`: the event is emitted after the user clicks any part out of the content but only\n  if the modal is open. The event payload is the mouse event that triggers it.\n- `focusin:body`: the event is emitted after the user focus in any part out of the content but only\n  if the modal is open. The event payload is the focus event that triggers it.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-modal.vue.js","sources":["../../../../src/components/modals/base-modal.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" @beforeEnter=\"showOverlay = false\" @afterEnter=\"showOverlay = true\">\n    <div v-if=\"open\" class=\"x-modal\" data-test=\"modal\">\n      <div ref=\"modal\" class=\"x-modal__content x-list\" data-test=\"modal-content\" role=\"dialog\">\n        <!-- @slot (Required) Modal container content -->\n        <slot />\n      </div>\n      <div\n        @click=\"emitOverlayClicked\"\n        class=\"x-modal__overlay\"\n        :class=\"{ 'x-modal__overlay--is-visible': showOverlay }\"\n        data-test=\"modal-overlay\"\n      />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NoElement } from '../no-element';\n\n  /**\n   * Base component with no XPlugin dependencies that serves as a utility for constructing more\n   * complex modals.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseModal extends Vue {\n    /**\n     * Animation to use for opening/closing the modal.\n     */\n    @Prop({ default: () => NoElement })\n    public animation!: Vue | string;\n\n    /**\n     * Determines if the modal is open or not.\n     */\n    @Prop({ required: true })\n    public open!: boolean;\n\n    /** The previous value of the body overflow style. */\n    protected previousBodyOverflow = '';\n    /** The previous value of the HTML element overflow style. */\n    protected previousHTMLOverflow = '';\n    /** To animate the overlay opacity after and before the animation. */\n    protected showOverlay = true;\n\n    public $refs!: {\n      modal: HTMLDivElement;\n    };\n\n    protected mounted(): void {\n      /* Watcher added after mount to prevent SSR from breaking */\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.$watch('open', this.syncBody, { immediate: true });\n    }\n\n    /**\n     * Syncs the body to the open state of the modal, adding or removing styles and listeners.\n     *\n     * @param isOpen - True when the modal is opened.\n     * @internal\n     */\n    protected syncBody(isOpen: boolean): void {\n      if (isOpen) {\n        this.disableScroll();\n        this.addBodyListeners();\n        /* eslint-disable @typescript-eslint/unbound-method */\n        this.$on('hook:beforeDestroy', this.removeBodyListeners);\n        this.$on('hook:beforeDestroy', this.enableScroll);\n        /* eslint-enable @typescript-eslint/unbound-method */\n      } else {\n        this.enableScroll();\n        this.removeBodyListeners();\n        /* eslint-disable @typescript-eslint/unbound-method */\n        this.$off('hook:beforeDestroy', this.removeBodyListeners);\n        this.$off('hook:beforeDestroy', this.enableScroll);\n        /* eslint-enable @typescript-eslint/unbound-method */\n      }\n    }\n\n    /**\n     * Disables the scroll of both the body and the window.\n     *\n     * @internal\n     */\n    protected disableScroll(): void {\n      this.previousBodyOverflow = document.body.style.overflow;\n      this.previousHTMLOverflow = document.documentElement.style.overflow;\n      document.body.style.overflow = document.documentElement.style.overflow = 'hidden';\n    }\n\n    /**\n     * Restores the scroll of both the body and the window.\n     *\n     * @internal\n     */\n    protected enableScroll(): void {\n      document.body.style.overflow = this.previousBodyOverflow;\n      document.documentElement.style.overflow = this.previousHTMLOverflow;\n      document.body.style.overflow = document.documentElement.style.overflow = '';\n    }\n\n    /**\n     * Adds listeners to the body element ot detect if the modal should be closed.\n     *\n     * @internal\n     */\n    protected addBodyListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.body.addEventListener('focusin', this.emitFocusInBody);\n      /* eslint-enable @typescript-eslint/unbound-method */\n    }\n\n    /**\n     * Removes the body listeners.\n     *\n     * @internal\n     */\n    protected removeBodyListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.body.removeEventListener('focusin', this.emitFocusInBody);\n      /* eslint-enable @typescript-eslint/unbound-method */\n    }\n\n    /**\n     * Emits the `click:overlay` event if the click has been triggered in the overlay layer.\n     *\n     * @param event - The click event.\n     * @internal\n     */\n    protected emitOverlayClicked(event: MouseEvent): void {\n      this.$emit('click:overlay', event);\n    }\n\n    /**\n     * Emits the `focusin:body` event if a focus event has been triggered outside the modal.\n     *\n     * @param event - The focusin event.\n     * @internal\n     */\n    protected emitFocusInBody(event: FocusEvent): void {\n      if (!this.$refs.modal.contains(event.target as HTMLElement)) {\n        this.$emit('focusin:body', event);\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-modal {\n    position: fixed;\n    top: 0;\n    left: 0;\n\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n    width: 100%;\n    height: 100%;\n\n    z-index: 1;\n\n    &__content {\n      z-index: 1;\n    }\n\n    &__overlay {\n      width: 100%;\n      height: 100%;\n      position: fixed;\n      background-color: rgba(0, 0, 0, 0.7);\n      opacity: 0;\n\n      &--is-visible {\n        transition: opacity 0.3s ease-out;\n        opacity: 1;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nThe `BaseModal` is a simple component that serves to create complex modals. Its open state has to be\npassed via prop. It also accepts an animation to use for opening & closing.\n\nIt emits a `click:overlay` event when any part out of the content is clicked, but only if the modal\nis open.\n\n```vue\n<template>\n  <div>\n    <button @click=\"open = true\">Open modal</button>\n    <BaseModal animation=\"fadeAndSlide\" :open=\"open\" @click:overlay=\"open = false\">\n      <h1>Hello</h1>\n      <p>The modal is working</p>\n      <button @click=\"open = false\">Close modal</button>\n    </BaseModal>\n  </div>\n</template>\n\n<script>\n  import { BaseModal, FadeAndSlide } from '@empathyco/x-components';\n  import Vue from 'vue';\n\n  Vue.component('fadeAndSlide', FadeAndSlide);\n\n  export default {\n    components: {\n      BaseModal\n    },\n    data() {\n      return {\n        open: false\n      };\n    }\n  };\n</script>\n```\n\n## Vue Events\n\nA list of events that the component will emit:\n\n- `click:overlay`: the event is emitted after the user clicks any part out of the content but only\n  if the modal is open. The event payload is the mouse event that triggers it.\n- `focusin:body`: the event is emitted after the user focus in any part out of the content but only\n  if the modal is open. The event payload is the focus event that triggers it.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/panels/base-header-toggle-panel.vue.js

@@ -6,7 +6,7 @@ import script from './base-header-toggle-panel.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -16,19 +16,18 @@ var __vue_render__ = function() {
     [
       _vm._t(
         "header",
-        function() {
+        function () {
           return [
             _c(
               "button",
               {
                 staticClass: "x-header-toggle-panel__header",
                 attrs: { "data-test": "toggle-panel-header" },
-                on: { click: _vm.toggleOpen }
+                on: { click: _vm.toggleOpen },
               },
               [_vm._t("header-content", null, null, { open: _vm.open })],
               2
-            )
-          ]
+            ) ]
         },
         null,
         { toggleOpen: _vm.toggleOpen, open: _vm.open }
@@ -39,8 +38,7 @@ var __vue_render__ = function() {
         { attrs: { open: _vm.open, animation: _vm.animation } },
         [_vm._t("default")],
         2
-      )
-    ],
+      ) ],
     2
   )
 };

package/js/components/panels/base-header-toggle-panel.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-header-toggle-panel.vue.js","sources":["../../../../src/components/panels/base-header-toggle-panel.vue"],"sourcesContent":["<template>\n  <div class=\"x-header-toggle-panel\">\n    <!-- @slot (Required) Slot that is be used for replacing the whole header. -->\n    <slot name=\"header\" v-bind=\"{ toggleOpen, open }\">\n      <!-- header-toggle-panel__header -->\n      <button\n        @click=\"toggleOpen\"\n        class=\"x-header-toggle-panel__header\"\n        data-test=\"toggle-panel-header\"\n      >\n        <!-- @slot (Required) Slot used to just pass the content. -->\n        <slot name=\"header-content\" v-bind=\"{ open }\"></slot>\n      </button>\n    </slot>\n\n    <BaseTogglePanel :open=\"open\" :animation=\"animation\">\n      <!-- @slot (Required) Default content. -->\n      <slot />\n    </BaseTogglePanel>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NoElement } from '../no-element';\n  import BaseTogglePanel from './base-toggle-panel.vue';\n\n  /**\n   * Toggle panel which uses the base toggle panel, adds a header and manage the\n   * open / close state of the panel.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseTogglePanel }\n  })\n  export default class BaseHeaderTogglePanel extends Vue {\n    /**\n     * Animation component that will be used to animate the base-toggle-panel.\n     *\n     * @public\n     */\n    @Prop({ default: () => NoElement })\n    protected animation!: Vue | string;\n\n    /**\n     * Handles if the panel is open by default.\n     *\n     * @public\n     */\n    @Prop({ default: false })\n    protected startCollapsed!: boolean;\n\n    /**\n     * Handles if the base panel is open or closed.\n     *\n     * @internal\n     */\n    protected open = !this.startCollapsed;\n\n    /**\n     * Toggles the open property.\n     *\n     * @internal\n     */\n    protected toggleOpen(): void {\n      this.open = !this.open;\n      this.emitOpenStatusEvent();\n    }\n\n    /**\n     * Emits open status event.\n     *\n     * @internal\n     */\n    protected emitOpenStatusEvent(): void {\n      this.$emit(this.open ? 'open' : 'close');\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-header-toggle-panel__header {\n    cursor: pointer;\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nToggle panel which uses the base toggle panel, adds a header and manage the open / close state of\nthe panel.\n\n## Basic usage\n\n```vue\n<BaseHeaderTogglePanel :animation=\"collapseHeight\" :start-collapsed=\"false\">\n  <template #header-content=\"{ open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n\n## Custom header\n\n```vue\n<BaseHeaderTogglePanel :animation=\"collapseHeight\" :start-collapsed=\"true\">\n  <template #header=\"{ toggleOpen, open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n    <button @click=\"toggleOpen\">Toggle</button>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n\n## Vue Events\n\nA list of events that the component will emit:\n\n- `open`: the event is emitted after the user clicks the element and opens it.\n- `close`: the event is emitted after the user clicks the element and closes it.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-header-toggle-panel.vue.js","sources":["../../../../src/components/panels/base-header-toggle-panel.vue"],"sourcesContent":["<template>\n  <div class=\"x-header-toggle-panel\">\n    <!-- @slot (Required) Slot that is be used for replacing the whole header. -->\n    <slot name=\"header\" v-bind=\"{ toggleOpen, open }\">\n      <!-- header-toggle-panel__header -->\n      <button\n        @click=\"toggleOpen\"\n        class=\"x-header-toggle-panel__header\"\n        data-test=\"toggle-panel-header\"\n      >\n        <!-- @slot (Required) Slot used to just pass the content. -->\n        <slot name=\"header-content\" v-bind=\"{ open }\"></slot>\n      </button>\n    </slot>\n\n    <BaseTogglePanel :open=\"open\" :animation=\"animation\">\n      <!-- @slot (Required) Default content. -->\n      <slot />\n    </BaseTogglePanel>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NoElement } from '../no-element';\n  import BaseTogglePanel from './base-toggle-panel.vue';\n\n  /**\n   * Toggle panel which uses the base toggle panel, adds a header and manage the\n   * open / close state of the panel.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseTogglePanel }\n  })\n  export default class BaseHeaderTogglePanel extends Vue {\n    /**\n     * Animation component that will be used to animate the base-toggle-panel.\n     *\n     * @public\n     */\n    @Prop({ default: () => NoElement })\n    protected animation!: Vue | string;\n\n    /**\n     * Handles if the panel is open by default.\n     *\n     * @public\n     */\n    @Prop({ default: false })\n    protected startCollapsed!: boolean;\n\n    /**\n     * Handles if the base panel is open or closed.\n     *\n     * @internal\n     */\n    protected open = !this.startCollapsed;\n\n    /**\n     * Toggles the open property.\n     *\n     * @internal\n     */\n    protected toggleOpen(): void {\n      this.open = !this.open;\n      this.emitOpenStatusEvent();\n    }\n\n    /**\n     * Emits open status event.\n     *\n     * @internal\n     */\n    protected emitOpenStatusEvent(): void {\n      this.$emit(this.open ? 'open' : 'close');\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-header-toggle-panel__header {\n    cursor: pointer;\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nToggle panel which uses the base toggle panel, adds a header and manage the open / close state of\nthe panel.\n\n## Basic usage\n\n```vue\n<BaseHeaderTogglePanel :animation=\"collapseHeight\" :start-collapsed=\"false\">\n  <template #header-content=\"{ open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n\n## Custom header\n\n```vue\n<BaseHeaderTogglePanel :animation=\"collapseHeight\" :start-collapsed=\"true\">\n  <template #header=\"{ toggleOpen, open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n    <button @click=\"toggleOpen\">Toggle</button>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n\n## Vue Events\n\nA list of events that the component will emit:\n\n- `open`: the event is emitted after the user clicks the element and opens it.\n- `close`: the event is emitted after the user clicks the element and closes it.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/panels/base-id-toggle-panel-button.vue.js

@@ -5,7 +5,7 @@ import script from './base-id-toggle-panel-button.vue_rollup-plugin-vue=script.j
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,7 +14,7 @@ var __vue_render__ = function() {
     _vm._g(
       {
         staticClass: "x-button x-base-id-toggle-panel-button",
-        attrs: { events: _vm.events, "data-test": "base-id-toggle-button" }
+        attrs: { events: _vm.events, "data-test": "base-id-toggle-button" },
       },
       _vm.$listeners
     ),

package/js/components/panels/base-id-toggle-panel.vue.js

@@ -5,7 +5,7 @@ import script from './base-id-toggle-panel.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;

package/js/components/panels/base-toggle-panel.vue.js

@@ -5,7 +5,7 @@ import script from './base-toggle-panel.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,13 +15,12 @@ var __vue_render__ = function() {
           "div",
           {
             staticClass: "x-toggle-panel",
-            attrs: { "data-test": "base-toggle-panel" }
+            attrs: { "data-test": "base-toggle-panel" },
           },
           [_vm._t("default")],
           2
         )
-      : _vm._e()
-  ])
+      : _vm._e() ])
 };
 var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;

package/js/components/panels/base-toggle-panel.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-toggle-panel.vue.js","sources":["../../../../src/components/panels/base-toggle-panel.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div v-if=\"open\" class=\"x-toggle-panel\" data-test=\"base-toggle-panel\">\n      <!-- @slot (Required) Default content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n\n  /**\n   * Simple panel that receives its open state via prop, which is responsible of rendering\n   * default slot inside a configurable transition.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseTogglePanel extends Vue {\n    /**\n     * Handles if the panel is rendered. It is used with v-if instead of v-show to get better\n     * performance.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected open!: boolean;\n\n    /**\n     * Animation component that will be used to animate the panel content.\n     *\n     * @public\n     */\n    @Prop({ default: 'div' })\n    protected animation!: Vue | string;\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\nSimple panel that receives its open state via prop, which is responsible of rendering default slot\ninside a configurable transition.\n\n## Basic usage\n\nUsing default slot:\n\n```vue\n<BaseTogglePanel :open=\"true\" :animation=\"collapseFromTop\">\n  <Filters :filters=\"filters\">\n    <template #default=\"{ filter }\">\n      <p>{{ filter.label }}</p>\n    </template>\n  </Filters>\n</BaseTogglePanel>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-toggle-panel.vue.js","sources":["../../../../src/components/panels/base-toggle-panel.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div v-if=\"open\" class=\"x-toggle-panel\" data-test=\"base-toggle-panel\">\n      <!-- @slot (Required) Default content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n\n  /**\n   * Simple panel that receives its open state via prop, which is responsible of rendering\n   * default slot inside a configurable transition.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseTogglePanel extends Vue {\n    /**\n     * Handles if the panel is rendered. It is used with v-if instead of v-show to get better\n     * performance.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected open!: boolean;\n\n    /**\n     * Animation component that will be used to animate the panel content.\n     *\n     * @public\n     */\n    @Prop({ default: 'div' })\n    protected animation!: Vue | string;\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\nSimple panel that receives its open state via prop, which is responsible of rendering default slot\ninside a configurable transition.\n\n## Basic usage\n\nUsing default slot:\n\n```vue\n<BaseTogglePanel :open=\"true\" :animation=\"collapseFromTop\">\n  <Filters :filters=\"filters\">\n    <template #default=\"{ filter }\">\n      <p>{{ filter.label }}</p>\n    </template>\n  </Filters>\n</BaseTogglePanel>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/result/base-result-add-to-cart.vue.js

@@ -5,7 +5,7 @@ import script from './base-result-add-to-cart.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -13,7 +13,7 @@ var __vue_render__ = function() {
     "BaseEventButton",
     {
       staticClass: "x-button x-result-add-to-cart",
-      attrs: { events: _vm.events, "data-test": "result-add-to-cart" }
+      attrs: { events: _vm.events, "data-test": "result-add-to-cart" },
     },
     [_vm._t("default")],
     2

package/js/components/result/base-result-current-price.vue.js

@@ -5,7 +5,7 @@ import script from './base-result-current-price.vue_rollup-plugin-vue=script.js'
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,21 +14,19 @@ var __vue_render__ = function() {
     {
       staticClass: "x-result-current-price",
       class: _vm.dynamicClasses,
-      attrs: { "data-test": "result-current-price" }
+      attrs: { "data-test": "result-current-price" },
     },
     [
       _vm._t(
         "default",
-        function() {
+        function () {
           return [
             _c("BaseCurrency", {
-              attrs: { value: _vm.result.price.value, format: _vm.format }
-            })
-          ]
+              attrs: { value: _vm.result.price.value, format: _vm.format },
+            }) ]
         },
         { result: _vm.result }
-      )
-    ],
+      ) ],
     2
   )
 };