@empathyco/x-components 3.0.0-alpha.132 → 3.0.0-alpha.135

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.135](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.134...@empathyco/x-components@3.0.0-alpha.135) (2022-07-21)
+
+### Testing
+
+- **e2e:** search modal re-opens properly after being closed (#613)
+  ([43282ab](https://github.com/empathyco/x/commit/43282ab1d0ab54af7794c88c89aa8e62326d73d8)),
+  closes [EX-6708](https://searchbroker.atlassian.net/browse/EX-6708)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.134](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.133...@empathyco/x-components@3.0.0-alpha.134) (2022-07-20)
+
+### Bug Fixes
+
+- **components:** now properly checks if a has content (#612)
+  ([ad2f6dc](https://github.com/empathyco/x/commit/ad2f6dc522d9da59dde2e2c5f90510c0f93380ab)),
+  closes [EX-6681](https://searchbroker.atlassian.net/browse/EX-6681)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.133](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.132...@empathyco/x-components@3.0.0-alpha.133) (2022-07-15)
+
+### Bug Fixes
+
+- **components:** Add option to extend transitions with listeners and attributes (#600)
+  ([16d5262](https://github.com/empathyco/x/commit/16d5262ab2213d53c736e89774089313755abeff)),
+  closes [EX-6457](https://searchbroker.atlassian.net/browse/EX-6457)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.132](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.131...@empathyco/x-components@3.0.0-alpha.132) (2022-07-14)
 
 ### Features

package/core/index.js

@@ -2,6 +2,7 @@ export { default as AnimateWidth } from '../js/components/animations/animate-wid
 export { default as CollapseHeight } from '../js/components/animations/collapse-height.vue.js';
 export { default as CollapseWidth } from '../js/components/animations/collapse-width.vue.js';
 export { default as CrossFade } from '../js/components/animations/cross-fade.vue.js';
+export { default as Fade } from '../js/components/animations/fade.vue.js';
 export { default as FadeAndSlide } from '../js/components/animations/fade-and-slide.vue.js';
 export { default as StaggeredFadeAndSlide } from '../js/components/animations/staggered-fade-and-slide.vue.js';
 export { default as StaggeringTransitionGroup } from '../js/components/animations/staggering-transition-group.vue.js';

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/design-system/full-theme.css

@@ -5,41 +5,6 @@
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
 }
-:root {
-  --x-color-base-lead: #36515b;
-  --x-color-base-auxiliary: #667981;
-  --x-color-base-neutral-10: #1a1a1a;
-  --x-color-base-neutral-35: #595959;
-  --x-color-base-neutral-70: #b3b3b3;
-  --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff;
-  --x-color-base-accent: #b90276;
-  --x-color-base-enable: #00705c;
-  --x-color-base-disable: #e11f26;
-  --x-color-base-transparent: transparent;
-}
-:root {
-  --x-size-base-01: 2px;
-  --x-size-base-02: 4px;
-  --x-size-base-03: 8px;
-  --x-size-base-04: 12px;
-  --x-size-base-05: 16px;
-  --x-size-base-06: 24px;
-  --x-size-base-07: 32px;
-  --x-size-base-08: 40px;
-  --x-size-base-09: 48px;
-  --x-size-base-10: 56px;
-  --x-size-base-11: 64px;
-  --x-size-base-12: 72px;
-  --x-size-base-13: 80px;
-  --x-size-base-14: 96px;
-  --x-size-base-15: 112px;
-  --x-size-base-16: 144px;
-  --x-size-base-17: 176px;
-  --x-size-base-18: 208px;
-  --x-size-base-19: 240px;
-  --x-size-base-20: 272px;
-}
 :root {
   --x-font-family-base: "Montserrat", sans-serif;
   --x-size-font-base-xs: 12px;
@@ -7613,3 +7578,39 @@
 .x-normal-case {
   text-transform: none;
 }
+
+:root {
+  --x-size-base-01: 2px;
+  --x-size-base-02: 4px;
+  --x-size-base-03: 8px;
+  --x-size-base-04: 12px;
+  --x-size-base-05: 16px;
+  --x-size-base-06: 24px;
+  --x-size-base-07: 32px;
+  --x-size-base-08: 40px;
+  --x-size-base-09: 48px;
+  --x-size-base-10: 56px;
+  --x-size-base-11: 64px;
+  --x-size-base-12: 72px;
+  --x-size-base-13: 80px;
+  --x-size-base-14: 96px;
+  --x-size-base-15: 112px;
+  --x-size-base-16: 144px;
+  --x-size-base-17: 176px;
+  --x-size-base-18: 208px;
+  --x-size-base-19: 240px;
+  --x-size-base-20: 272px;
+}
+:root {
+  --x-color-base-lead: #36515b;
+  --x-color-base-auxiliary: #667981;
+  --x-color-base-neutral-10: #1a1a1a;
+  --x-color-base-neutral-35: #595959;
+  --x-color-base-neutral-70: #b3b3b3;
+  --x-color-base-neutral-95: #f2f2f2;
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #b90276;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26;
+  --x-color-base-transparent: transparent;
+}

package/docs/API-reference/api/x-components.basemodal.animation.md

@@ -4,7 +4,7 @@
 
 ## BaseModal.animation property
 
-Animation to use for opening/closing the modal.
+Animation to use for opening/closing the modal. This animation only affects the content.
 
 <b>Signature:</b>
 

package/docs/API-reference/api/x-components.basemodal.iswaitingforleave.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseModal](./x-components.basemodal.md) &gt; [isWaitingForLeave](./x-components.basemodal.iswaitingforleave.md)
+
+## BaseModal.isWaitingForLeave property
+
+Boolean to delay the leave animation until it has completed.
+
+<b>Signature:</b>
+
+```typescript
+protected isWaitingForLeave: boolean;
+```

package/docs/API-reference/api/x-components.basemodal.md

@@ -18,11 +18,12 @@ export default class BaseModal extends Vue
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [$refs](./x-components.basemodal._refs.md) |  | { modal: HTMLDivElement; } |  |
-|  [animation](./x-components.basemodal.animation.md) |  | Vue \| string | Animation to use for opening/closing the modal. |
+|  [animation](./x-components.basemodal.animation.md) |  | Vue \| string | Animation to use for opening/closing the modal. This animation only affects the content. |
+|  [isWaitingForLeave](./x-components.basemodal.iswaitingforleave.md) |  | boolean | Boolean to delay the leave animation until it has completed. |
 |  [open](./x-components.basemodal.open.md) |  | boolean | Determines if the modal is open or not. |
+|  [overlayAnimation](./x-components.basemodal.overlayanimation.md) |  | Vue \| string | Animation to use for the overlay (backdrop) part of the modal. By default, it uses a fade transition. |
 |  [previousBodyOverflow](./x-components.basemodal.previousbodyoverflow.md) |  | string | The previous value of the body overflow style. |
 |  [previousHTMLOverflow](./x-components.basemodal.previoushtmloverflow.md) |  | string | The previous value of the HTML element overflow style. |
-|  [showOverlay](./x-components.basemodal.showoverlay.md) |  | boolean | To animate the overlay opacity after and before the animation. |
 
 ## Methods
 

package/docs/API-reference/api/x-components.basemodal.overlayanimation.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseModal](./x-components.basemodal.md) &gt; [overlayAnimation](./x-components.basemodal.overlayanimation.md)
+
+## BaseModal.overlayAnimation property
+
+Animation to use for the overlay (backdrop) part of the modal. By default, it uses a fade transition.
+
+<b>Signature:</b>
+
+```typescript
+overlayAnimation: Vue | string;
+```

package/docs/API-reference/api/x-components.crossfade.md

@@ -4,7 +4,7 @@
 
 ## CrossFade class
 
-Renders a transition wrapping the element passed in the default slo. The transition fades between the two toggled elements at the same time.
+Renders a transition wrapping the element passed in the default slot. The transition fades between the two toggled elements at the same time.
 
 <b>Signature:</b>
 

package/docs/API-reference/api/x-components.fade.md

@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [Fade](./x-components.fade.md)
+
+## Fade class
+
+Renders a transition wrapping the element passed in the default slot. The animation just fades in/out the element by changing its opacity.
+
+<b>Signature:</b>
+
+```typescript
+export default class Fade extends Vue 
+```
+<b>Extends:</b> Vue
+

package/docs/API-reference/api/x-components.md

@@ -56,7 +56,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [CollapseHeight](./x-components.collapseheight.md) | Renders a transition wrapping the element passed in the default slot and animating it with a height animation. |
 |  [CollapseWidth](./x-components.collapsewidth.md) | Renders a transition wrapping the element passed in the default slot and animating it with a width animation. |
 |  [ColumnPickerMixin](./x-components.columnpickermixin.md) | Mixin to share Column Pickers logic. |
-|  [CrossFade](./x-components.crossfade.md) | Renders a transition wrapping the element passed in the default slo. The transition fades between the two toggled elements at the same time. |
+|  [CrossFade](./x-components.crossfade.md) | Renders a transition wrapping the element passed in the default slot. The transition fades between the two toggled elements at the same time. |
 |  [DefaultFacetsService](./x-components.defaultfacetsservice.md) | Default implementation for the [FacetsService](./x-components.facetsservice.md)<!-- -->. |
 |  [DefaultPDPAddToCartService](./x-components.defaultpdpaddtocartservice.md) | Default implementation for the [PDPAddToCartService](./x-components.pdpaddtocartservice.md)<!-- -->. |
 |  [DeviceDetector](./x-components.devicedetector.md) | This component helps detecting or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the [XComponentAliasAPI.device](./x-components.xcomponentaliasapi.device.md) property. |
@@ -68,6 +68,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [Facets](./x-components.facets.md) | This component renders the list of facets stored in the Facets module. Facets can be rendered differently based on their purpose and this can be achieved using the exposed slots: - A default and required slot. - A custom slot for each facet with the facetId as its name. This allows each facet to be rendered differently based on its needs. |
 |  [FacetsMixin](./x-components.facetsmixin.md) | Mixin to share Facets logic. |
 |  [FacetsProvider](./x-components.facetsprovider.md) | This component allows to provide facets by prop, to add them to the state of the <code>Facets X-Module</code>. These facets will be added to the <code>Facets X-Module</code> state together with the facets emitted by the <code>Search X-Module</code> through the [SearchXEvents.FacetsChanged](./x-components.searchxevents.facetschanged.md) event. |
+|  [Fade](./x-components.fade.md) | Renders a transition wrapping the element passed in the default slot. The animation just fades in/out the element by changing its opacity. |
 |  [FadeAndSlide](./x-components.fadeandslide.md) | Renders a transition group wrapping the elements passed in the default slot and animating them with a fade and slide animation. |
 |  [FiltersInjectionMixin](./x-components.filtersinjectionmixin.md) | Mixin to share filters injection logic. |
 |  [FiltersList](./x-components.filterslist.md) | Renders a list with a list item per each [BooleanFilter](./x-types.booleanfilter.md) in the filters prop array. Each list item has a scoped slot, passing the filter as slot prop. |

package/docs/API-reference/components/common/animations/x-components.cross-fade.md

@@ -6,7 +6,7 @@ title: CrossFade
 
 # CrossFade
 
-Renders a transition wrapping the element passed in the default slo. The transition
+Renders a transition wrapping the element passed in the default slot. The transition
 fades between the two toggled elements at the same time.
 
 ## Slots

package/docs/API-reference/components/common/animations/x-components.fade.md

@@ -0,0 +1,48 @@
+---
+
+title: Fade
+
+---
+
+# Fade
+
+Renders a transition wrapping the element passed in the default slot. The animation just fades
+in/out the element by changing its opacity.
+
+## Slots
+
+| Name                 | Description                                 | Bindings<br />(name - type - description) |
+| -------------------- | ------------------------------------------- | ----------------------------------------- |
+| <code>default</code> | (Required) to add content to the transition | None                                      |
+
+## Example
+
+The `Fade` component is intended to be used as animation to wrap an element with v-if or v-show and
+animate it. The animation just fades in/out the element by changing its opacity.
+
+Wrapping a component:
+
+```vue live
+<template>
+  <div>
+    <button @click="shouldRender = !shouldRender">Toggle</button>
+    <Fade>
+      <p v-if="shouldRender">León is southern Spain</p>
+    </Fade>
+  </div>
+</template>
+<script>
+import { Fade } from "@empathyco/x-components";
+export default {
+  name: "FadeAnimationDemo",
+  component: {
+    Fade
+  },
+  data() {
+    return {
+      shouldRender: false
+    };
+  }
+};
+</script>
+```

package/docs/API-reference/components/common/modals/x-components.base-modal.md

@@ -11,10 +11,11 @@ complex modals.
 
 ## Props
 
-| Name                   | Description                                     | Type                 | Default                      |
-| ---------------------- | ----------------------------------------------- | -------------------- | ---------------------------- |
-| <code>animation</code> | Animation to use for opening/closing the modal. | <code>union</code>   | <code>() => NoElement</code> |
-| <code>open</code>      | Determines if the modal is open or not.         | <code>boolean</code> | <code></code>                |
+| Name                          | Description                                                                                                | Type                 | Default                      |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------- |
+| <code>animation</code>        | Animation to use for opening/closing the modal. This animation only affects the content.                   | <code>union</code>   | <code>() => NoElement</code> |
+| <code>overlayAnimation</code> | Animation to use for the overlay (backdrop) part of the modal. By default, it uses<br />a fade transition. | <code>union</code>   | <code>() => Fade</code>      |
+| <code>open</code>             | Determines if the modal is open or not.                                                                    | <code>boolean</code> | <code></code>                |
 
 ## Events
 

package/js/components/animations/animate-width.vue.js

@@ -12,7 +12,15 @@ var __vue_render__ = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "transition",
-    _vm._g({ attrs: { name: "x-animate-width-" } }, _vm.$listeners),
+    _vm._g(
+      _vm._b(
+        { attrs: { name: "x-animate-width-" } },
+        "transition",
+        _vm.$attrs,
+        false
+      ),
+      _vm.$listeners
+    ),
     [_vm._t("default")],
     2
   )
@@ -23,11 +31,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-0d2c1ed8_0", { source: ".x-animate-width--enter-active[data-v-0d2c1ed8], .x-animate-width--leave-active[data-v-0d2c1ed8] {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n.x-animate-width--enter[data-v-0d2c1ed8], .x-animate-width--leave-to[data-v-0d2c1ed8] {\n  width: 0 !important;\n}", map: undefined, media: undefined });
+    inject("data-v-d7caf02c_0", { source: ".x-animate-width--enter-active[data-v-d7caf02c], .x-animate-width--leave-active[data-v-d7caf02c] {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n.x-animate-width--enter[data-v-d7caf02c], .x-animate-width--leave-to[data-v-d7caf02c] {\n  width: 0 !important;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-0d2c1ed8";
+  const __vue_scope_id__ = "data-v-d7caf02c";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/animate-width.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"animate-width.vue.js","sources":["../../../../src/components/animations/animate-width.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" name=\"x-animate-width-\">\n    <!-- @slot (Required) Transition content -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping an element passed in the default slot and animating its width.\n   *\n   * @public\n   */\n  @Component\n  export default class AnimateWidth extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-animate-width {\n    &--enter-active,\n    &--leave-active {\n      transition: width 0.3s ease-out;\n      overflow-x: hidden;\n    }\n\n    &--enter,\n    &--leave-to {\n      width: 0 !important;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe AnimateWidth component is intended to be used as a prop in animatable components but also works\nas a transition to animate the width of an element.\n\nUsed as a prop in an animatable component:\n\n```vue\n<template>\n  <AnimatableComponent :animation=\"AnimateWidth\" />\n</template>\n\n<script>\n  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';\n\n  export default {\n    data() {\n      return {\n        AnimateWidth\n      };\n    }\n  };\n</script>\n```\n\nUsed as a regular Transition:\n\n```vue\n<template>\n  <div>\n    <button @click=\"visible = !visible\">Toggle</button>\n    <AnimateWidth>\n      <div v-if=\"visible\" style=\"width: 300px\">Element to animate</div>\n    </AnimateWidth>\n  </div>\n</template>\n\n<script>\n  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';\n\n  export default {\n    data() {\n      return {\n        visible: true\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"animate-width.vue.js","sources":["../../../../src/components/animations/animate-width.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" name=\"x-animate-width-\" v-bind=\"$attrs\">\n    <!-- @slot (Required) Transition content -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping an element passed in the default slot and animating its width.\n   *\n   * @public\n   */\n  @Component({\n    inheritAttrs: false\n  })\n  export default class AnimateWidth extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-animate-width {\n    &--enter-active,\n    &--leave-active {\n      transition: width 0.3s ease-out;\n      overflow-x: hidden;\n    }\n\n    &--enter,\n    &--leave-to {\n      width: 0 !important;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe AnimateWidth component is intended to be used as a prop in animatable components but also works\nas a transition to animate the width of an element.\n\nUsed as a prop in an animatable component:\n\n```vue\n<template>\n  <AnimatableComponent :animation=\"AnimateWidth\" />\n</template>\n\n<script>\n  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';\n\n  export default {\n    data() {\n      return {\n        AnimateWidth\n      };\n    }\n  };\n</script>\n```\n\nUsed as a regular Transition:\n\n```vue\n<template>\n  <div>\n    <button @click=\"visible = !visible\">Toggle</button>\n    <AnimateWidth>\n      <div v-if=\"visible\" style=\"width: 300px\">Element to animate</div>\n    </AnimateWidth>\n  </div>\n</template>\n\n<script>\n  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';\n\n  export default {\n    data() {\n      return {\n        visible: true\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/animate-width.vue_rollup-plugin-vue_script.vue.js

@@ -10,7 +10,9 @@ import { Component } from 'vue-property-decorator';
 let AnimateWidth = class AnimateWidth extends Vue {
 };
 AnimateWidth = __decorate([
-    Component
+    Component({
+        inheritAttrs: false
+    })
 ], AnimateWidth);
 var script = AnimateWidth;
 

package/js/components/animations/animate-width.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"animate-width.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/animations/animate-width.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\n\n/**\n * Renders a transition wrapping an element passed in the default slot and animating its width.\n *\n * @public\n */\n@Component\nexport default class AnimateWidth extends Vue {}\n"],"names":[],"mappings":";;;;AAWA;;;;;AAMA,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,GAAG;CAAG,CAAA;AAA3B,YAAY;IADhC,SAAS;GACW,YAAY,CAAe;aAA3B,YAAY;;;;"}
+{"version":3,"file":"animate-width.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/animations/animate-width.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\n\n/**\n * Renders a transition wrapping an element passed in the default slot and animating its width.\n *\n * @public\n */\n@Component({\n  inheritAttrs: false\n})\nexport default class AnimateWidth extends Vue {}\n"],"names":[],"mappings":";;;;AAWA;;;;;AAQA,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,GAAG;CAAG,CAAA;AAA3B,YAAY;IAHhC,SAAS,CAAC;QACT,YAAY,EAAE,KAAK;KACpB,CAAC;GACmB,YAAY,CAAe;aAA3B,YAAY;;;;"}

package/js/components/animations/collapse-height.vue.js

@@ -13,14 +13,19 @@ var __vue_render__ = function () {
   return _c(
     "transition",
     _vm._g(
-      {
-        attrs: { appear: "", name: "x-collapse-height-" },
-        on: {
-          enter: _vm.expand,
-          "after-enter": _vm.cleanUpAnimationStyles,
-          leave: _vm.collapse,
+      _vm._b(
+        {
+          attrs: { appear: "", name: "x-collapse-height-" },
+          on: {
+            enter: _vm.expand,
+            "after-enter": _vm.cleanUpAnimationStyles,
+            leave: _vm.collapse,
+          },
         },
-      },
+        "transition",
+        _vm.$attrs,
+        false
+      ),
       _vm.$listeners
     ),
     [_vm._t("default")],
@@ -33,11 +38,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-d46da02c_0", { source: ".x-collapse-height--enter-active[data-v-d46da02c], .x-collapse-height--leave-active[data-v-d46da02c] {\n  transition: height 0.3s ease-out;\n  overflow: hidden;\n}", map: undefined, media: undefined });
+    inject("data-v-7536b911_0", { source: ".x-collapse-height--enter-active[data-v-7536b911], .x-collapse-height--leave-active[data-v-7536b911] {\n  transition: height 0.3s ease-out;\n  overflow: hidden;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-d46da02c";
+  const __vue_scope_id__ = "data-v-7536b911";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/collapse-height.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-height.vue.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    v-on=\"$listeners\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    appear\n    name=\"x-collapse-height-\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { createCollapseAnimationMixin } from './animations.mixin';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and animating\n   * it with a height animation.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [createCollapseAnimationMixin('height')]\n  })\n  export default class CollapseHeight extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-height {\n    &--enter-active,\n    &--leave-active {\n      transition: height 0.3s ease-out;\n      overflow: hidden;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its height size from 0 to auto. This\ntransition does not work with components that have vertical margin, padding or border.\n\nUsed wrapping a component:\n\n```vue\n<CollapseHeight>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseHeight>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"collapse-height.vue.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    v-on=\"$listeners\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    appear\n    name=\"x-collapse-height-\"\n    v-bind=\"$attrs\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { createCollapseAnimationMixin } from './animations.mixin';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and animating\n   * it with a height animation.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [createCollapseAnimationMixin('height')],\n    inheritAttrs: false\n  })\n  export default class CollapseHeight extends Vue {\n    // TODO Add support for extending enter, after-enter and leave transitions\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-height {\n    &--enter-active,\n    &--leave-active {\n      transition: height 0.3s ease-out;\n      overflow: hidden;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its height size from 0 to auto. This\ntransition does not work with components that have vertical margin, padding or border.\n\nUsed wrapping a component:\n\n```vue\n<CollapseHeight>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseHeight>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/collapse-height.vue_rollup-plugin-vue_script.vue.js

@@ -13,7 +13,8 @@ let CollapseHeight = class CollapseHeight extends Vue {
 };
 CollapseHeight = __decorate([
     Component({
-        mixins: [createCollapseAnimationMixin('height')]
+        mixins: [createCollapseAnimationMixin('height')],
+        inheritAttrs: false
     })
 ], CollapseHeight);
 var script = CollapseHeight;

package/js/components/animations/collapse-height.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-height.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/animations/collapse-height.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport { createCollapseAnimationMixin } from './animations.mixin';\n\n/**\n * Renders a transition wrapping the element passed in the default slot and animating\n * it with a height animation.\n *\n * @public\n */\n@Component({\n  mixins: [createCollapseAnimationMixin('height')]\n})\nexport default class CollapseHeight extends Vue {}\n"],"names":[],"mappings":";;;;;AAmBA;;;;;;AASA,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,GAAG;CAAG,CAAA;AAA7B,cAAc;IAHlC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,4BAA4B,CAAC,QAAQ,CAAC,CAAC;KACjD,CAAC;GACmB,cAAc,CAAe;aAA7B,cAAc;;;;"}
+{"version":3,"file":"collapse-height.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/animations/collapse-height.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport { createCollapseAnimationMixin } from './animations.mixin';\n\n/**\n * Renders a transition wrapping the element passed in the default slot and animating\n * it with a height animation.\n *\n * @public\n */\n@Component({\n  mixins: [createCollapseAnimationMixin('height')],\n  inheritAttrs: false\n})\nexport default class CollapseHeight extends Vue {\n  // TODO Add support for extending enter, after-enter and leave transitions\n}\n"],"names":[],"mappings":";;;;;AAoBA;;;;;;AAUA,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,GAAG;CAE9C,CAAA;AAFoB,cAAc;IAJlC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,4BAA4B,CAAC,QAAQ,CAAC,CAAC;QAChD,YAAY,EAAE,KAAK;KACpB,CAAC;GACmB,cAAc,CAElC;aAFoB,cAAc;;;;"}

package/js/components/animations/collapse-width.vue.js

@@ -13,14 +13,19 @@ var __vue_render__ = function () {
   return _c(
     "transition",
     _vm._g(
-      {
-        attrs: { appear: "", name: "x-collapse-width-" },
-        on: {
-          enter: _vm.expand,
-          "after-enter": _vm.cleanUpAnimationStyles,
-          leave: _vm.collapse,
+      _vm._b(
+        {
+          attrs: { appear: "", name: "x-collapse-width-" },
+          on: {
+            enter: _vm.expand,
+            "after-enter": _vm.cleanUpAnimationStyles,
+            leave: _vm.collapse,
+          },
         },
-      },
+        "transition",
+        _vm.$attrs,
+        false
+      ),
       _vm.$listeners
     ),
     [_vm._t("default")],
@@ -33,11 +38,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-dcf934a4_0", { source: ".x-collapse-width--enter-active[data-v-dcf934a4], .x-collapse-width--leave-active[data-v-dcf934a4] {\n  transition: width 0.3s ease-out;\n  overflow: hidden;\n}", map: undefined, media: undefined });
+    inject("data-v-16c7537f_0", { source: ".x-collapse-width--enter-active[data-v-16c7537f], .x-collapse-width--leave-active[data-v-16c7537f] {\n  transition: width 0.3s ease-out;\n  overflow: hidden;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-dcf934a4";
+  const __vue_scope_id__ = "data-v-16c7537f";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/collapse-width.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-width.vue.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    v-on=\"$listeners\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    appear\n    name=\"x-collapse-width-\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { createCollapseAnimationMixin } from './animations.mixin';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and animating\n   * it with a width animation.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [createCollapseAnimationMixin('width')]\n  })\n  export default class CollapseWidth extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-width {\n    &--enter-active,\n    &--leave-active {\n      transition: width 0.3s ease-out;\n      overflow: hidden;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseWidth component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its width size from 0 to auto. This\ntransition does not work with components that have horizontal margin, padding or border. It also is\ndependant of the width of the child elements and not the root element.\n\nUsed wrapping a component:\n\n```vue\n<CollapseWidth>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseWidth>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"collapse-width.vue.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    v-on=\"$listeners\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    appear\n    name=\"x-collapse-width-\"\n    v-bind=\"$attrs\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { createCollapseAnimationMixin } from './animations.mixin';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and animating\n   * it with a width animation.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [createCollapseAnimationMixin('width')],\n    inheritAttrs: false\n  })\n  export default class CollapseWidth extends Vue {\n    // TODO Add support for extending enter, after-enter and leave transitions\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-width {\n    &--enter-active,\n    &--leave-active {\n      transition: width 0.3s ease-out;\n      overflow: hidden;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseWidth component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its width size from 0 to auto. This\ntransition does not work with components that have horizontal margin, padding or border. It also is\ndependant of the width of the child elements and not the root element.\n\nUsed wrapping a component:\n\n```vue\n<CollapseWidth>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseWidth>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/collapse-width.vue_rollup-plugin-vue_script.vue.js

@@ -13,7 +13,8 @@ let CollapseWidth = class CollapseWidth extends Vue {
 };
 CollapseWidth = __decorate([
     Component({
-        mixins: [createCollapseAnimationMixin('width')]
+        mixins: [createCollapseAnimationMixin('width')],
+        inheritAttrs: false
     })
 ], CollapseWidth);
 var script = CollapseWidth;

package/js/components/animations/collapse-width.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-width.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/animations/collapse-width.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport { createCollapseAnimationMixin } from './animations.mixin';\n\n/**\n * Renders a transition wrapping the element passed in the default slot and animating\n * it with a width animation.\n *\n * @public\n */\n@Component({\n  mixins: [createCollapseAnimationMixin('width')]\n})\nexport default class CollapseWidth extends Vue {}\n"],"names":[],"mappings":";;;;;AAmBA;;;;;;AASA,IAAqB,aAAa,GAAlC,MAAqB,aAAc,SAAQ,GAAG;CAAG,CAAA;AAA5B,aAAa;IAHjC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,4BAA4B,CAAC,OAAO,CAAC,CAAC;KAChD,CAAC;GACmB,aAAa,CAAe;aAA5B,aAAa;;;;"}
+{"version":3,"file":"collapse-width.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/animations/collapse-width.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport { createCollapseAnimationMixin } from './animations.mixin';\n\n/**\n * Renders a transition wrapping the element passed in the default slot and animating\n * it with a width animation.\n *\n * @public\n */\n@Component({\n  mixins: [createCollapseAnimationMixin('width')],\n  inheritAttrs: false\n})\nexport default class CollapseWidth extends Vue {\n  // TODO Add support for extending enter, after-enter and leave transitions\n}\n"],"names":[],"mappings":";;;;;AAoBA;;;;;;AAUA,IAAqB,aAAa,GAAlC,MAAqB,aAAc,SAAQ,GAAG;CAE7C,CAAA;AAFoB,aAAa;IAJjC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,4BAA4B,CAAC,OAAO,CAAC,CAAC;QAC/C,YAAY,EAAE,KAAK;KACpB,CAAC;GACmB,aAAa,CAEjC;aAFoB,aAAa;;;;"}

package/js/components/animations/create-directional-animation-factory.js

@@ -13,9 +13,14 @@ function createDirectionalAnimationFactory(animationName) {
     return (animationOrigin = 'top') => {
         return Vue.extend({
             name: `transition-${animationName}-${animationOrigin}`,
+            inheritAttrs: false,
             render(h) {
                 return h('transition', {
-                    props: { name: `x-${animationName}--${animationOrigin} x-${animationName}-` }
+                    props: {
+                        name: `x-${animationName}--${animationOrigin} x-${animationName}-`,
+                        ...this.$attrs
+                    },
+                    on: this.$listeners
                 }, this.$slots.default);
             }
         });

package/js/components/animations/create-directional-animation-factory.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-directional-animation-factory.js","sources":["../../../../src/components/animations/create-directional-animation-factory.ts"],"sourcesContent":["import Vue, { VueConstructor } from 'vue';\n\n/**\n * Abstract Factory to create animations Factory. The returned animation factory uses the\n * `animationName` parameter to create a Transition Component with that name.\n *\n * @param animationName - The name to use in the Transition Component of animation.\n * @returns The animation factory configured.\n *\n * @internal\n */\nexport function createDirectionalAnimationFactory(\n  animationName: string\n): (animationOrigin?: AnimationOrigin) => VueConstructor {\n  return (animationOrigin = 'top') => {\n    return Vue.extend({\n      name: `transition-${animationName}-${animationOrigin}`,\n      render(h) {\n        return h(\n          'transition',\n          {\n            props: { name: `x-${animationName}--${animationOrigin} x-${animationName}-` }\n          },\n          this.$slots.default\n        );\n      }\n    });\n  };\n}\n\nexport type AnimationOrigin = 'top' | 'bottom' | 'left' | 'right';\n"],"names":[],"mappings":";;AAEA;;;;;;;;;SASgB,iCAAiC,CAC/C,aAAqB;IAErB,OAAO,CAAC,eAAe,GAAG,KAAK;QAC7B,OAAO,GAAG,CAAC,MAAM,CAAC;YAChB,IAAI,EAAE,cAAc,aAAa,IAAI,eAAe,EAAE;YACtD,MAAM,CAAC,CAAC;gBACN,OAAO,CAAC,CACN,YAAY,EACZ;oBACE,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,aAAa,KAAK,eAAe,MAAM,aAAa,GAAG,EAAE;iBAC9E,EACD,IAAI,CAAC,MAAM,CAAC,OAAO,CACpB,CAAC;aACH;SACF,CAAC,CAAC;KACJ,CAAC;AACJ;;;;"}
+{"version":3,"file":"create-directional-animation-factory.js","sources":["../../../../src/components/animations/create-directional-animation-factory.ts"],"sourcesContent":["import Vue, { VueConstructor } from 'vue';\n\n/**\n * Abstract Factory to create animations Factory. The returned animation factory uses the\n * `animationName` parameter to create a Transition Component with that name.\n *\n * @param animationName - The name to use in the Transition Component of animation.\n * @returns The animation factory configured.\n *\n * @internal\n */\nexport function createDirectionalAnimationFactory(\n  animationName: string\n): (animationOrigin?: AnimationOrigin) => VueConstructor {\n  return (animationOrigin = 'top') => {\n    return Vue.extend({\n      name: `transition-${animationName}-${animationOrigin}`,\n      inheritAttrs: false,\n      render(h) {\n        return h(\n          'transition',\n          {\n            props: {\n              name: `x-${animationName}--${animationOrigin} x-${animationName}-`,\n              ...this.$attrs\n            },\n            on: this.$listeners\n          },\n          this.$slots.default\n        );\n      }\n    });\n  };\n}\n\nexport type AnimationOrigin = 'top' | 'bottom' | 'left' | 'right';\n"],"names":[],"mappings":";;AAEA;;;;;;;;;SASgB,iCAAiC,CAC/C,aAAqB;IAErB,OAAO,CAAC,eAAe,GAAG,KAAK;QAC7B,OAAO,GAAG,CAAC,MAAM,CAAC;YAChB,IAAI,EAAE,cAAc,aAAa,IAAI,eAAe,EAAE;YACtD,YAAY,EAAE,KAAK;YACnB,MAAM,CAAC,CAAC;gBACN,OAAO,CAAC,CACN,YAAY,EACZ;oBACE,KAAK,EAAE;wBACL,IAAI,EAAE,KAAK,aAAa,KAAK,eAAe,MAAM,aAAa,GAAG;wBAClE,GAAG,IAAI,CAAC,MAAM;qBACf;oBACD,EAAE,EAAE,IAAI,CAAC,UAAU;iBACpB,EACD,IAAI,CAAC,MAAM,CAAC,OAAO,CACpB,CAAC;aACH;SACF,CAAC,CAAC;KACJ,CAAC;AACJ;;;;"}

package/js/components/animations/cross-fade.vue.js

@@ -13,7 +13,12 @@ var __vue_render__ = function () {
   return _c(
     "transition",
     _vm._g(
-      { attrs: { appear: "", name: "x-cross-fade-", mode: "in-out" } },
+      _vm._b(
+        { attrs: { appear: "", name: "x-cross-fade-", mode: "in-out" } },
+        "transition",
+        _vm.$attrs,
+        false
+      ),
       _vm.$listeners
     ),
     [_vm._t("default")],
@@ -26,11 +31,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-4754a6e6_0", { source: ".x-cross-fade--enter-active[data-v-4754a6e6], .x-cross-fade--leave-active[data-v-4754a6e6] {\n  transition: opacity 0.25s ease-in-out;\n}\n.x-cross-fade--leave-active[data-v-4754a6e6] {\n  position: absolute;\n}\n.x-cross-fade--leave-to[data-v-4754a6e6], .x-cross-fade--enter[data-v-4754a6e6] {\n  opacity: 0;\n}", map: undefined, media: undefined });
+    inject("data-v-0367569a_0", { source: ".x-cross-fade--enter-active[data-v-0367569a], .x-cross-fade--leave-active[data-v-0367569a] {\n  transition: opacity 0.25s ease-in-out;\n}\n.x-cross-fade--leave-active[data-v-0367569a] {\n  position: absolute;\n}\n.x-cross-fade--leave-to[data-v-0367569a], .x-cross-fade--enter[data-v-0367569a] {\n  opacity: 0;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-4754a6e6";
+  const __vue_scope_id__ = "data-v-0367569a";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/cross-fade.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"cross-fade.vue.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" appear name=\"x-cross-fade-\" mode=\"in-out\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slo. The transition\n   * fades between the two toggled elements at the same time.\n   *\n   * @public\n   */\n  @Component\n  export default class CrossFade extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-cross-fade {\n    &--enter-active,\n    &--leave-active {\n      transition: opacity 0.25s ease-in-out;\n    }\n\n    &--leave-active {\n      position: absolute;\n    }\n\n    &--leave-to,\n    &--enter {\n      opacity: 0;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `CrossFade` component is intended to be used as animation to wrap an element with v-if or v-show\nand animate it. The animation fades the new element into the previous one.\n\nWrapping a component:\n\n```vue\n<CrossFade>\n  <ComponentOrElement v-if=\"open\"/>\n</CrossFade>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"cross-fade.vue.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" appear name=\"x-cross-fade-\" mode=\"in-out\" v-bind=\"$attrs\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot. The transition\n   * fades between the two toggled elements at the same time.\n   *\n   * @public\n   */\n  @Component({\n    inheritAttrs: false\n  })\n  export default class CrossFade extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-cross-fade {\n    &--enter-active,\n    &--leave-active {\n      transition: opacity 0.25s ease-in-out;\n    }\n\n    &--leave-active {\n      position: absolute;\n    }\n\n    &--leave-to,\n    &--enter {\n      opacity: 0;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `CrossFade` component is intended to be used as animation to wrap an element with v-if or v-show\nand animate it. The animation fades the new element into the previous one.\n\nWrapping a component:\n\n```vue\n<CrossFade>\n  <ComponentOrElement v-if=\"open\"/>\n</CrossFade>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/cross-fade.vue_rollup-plugin-vue_script.vue.js

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import { Component } from 'vue-property-decorator';
 
 /**
- * Renders a transition wrapping the element passed in the default slo. The transition
+ * Renders a transition wrapping the element passed in the default slot. The transition
  * fades between the two toggled elements at the same time.
  *
  * @public
@@ -11,7 +11,9 @@ import { Component } from 'vue-property-decorator';
 let CrossFade = class CrossFade extends Vue {
 };
 CrossFade = __decorate([
-    Component
+    Component({
+        inheritAttrs: false
+    })
 ], CrossFade);
 var script = CrossFade;