@empathyco/x-components 6.0.0-alpha.60 → 6.0.0-alpha.62

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

@@ -38,14 +38,14 @@ doesn't render elements to the DOM.
 </template>
 
 <script>
-  import { Tagging } from '@empathyco/x-components/tagging';
-
-  export default {
-    name: 'TaggingDemo',
-    components: {
-      Tagging
-    }
-  };
+import { Tagging } from '@empathyco/x-components/tagging'
+
+export default {
+  name: 'TaggingDemo',
+  components: {
+    Tagging,
+  },
+}
 </script>
 ```
 
@@ -66,14 +66,14 @@ will be used since `storageKey` default value is 'url'.
 </template>
 
 <script>
-  import { Tagging } from '@empathyco/x-components/tagging';
-
-  export default {
-    name: 'TaggingDemo',
-    components: {
-      Tagging
-    }
-  };
+import { Tagging } from '@empathyco/x-components/tagging'
+
+export default {
+  name: 'TaggingDemo',
+  components: {
+    Tagging,
+  },
+}
 </script>
 ```
 
@@ -86,14 +86,14 @@ during 60 seconds and the product id will be used as storage key
 </template>
 
 <script>
-  import { Tagging } from '@empathyco/x-components/tagging';
-
-  export default {
-    name: 'TaggingDemo',
-    components: {
-      Tagging
-    }
-  };
+import { Tagging } from '@empathyco/x-components/tagging'
+
+export default {
+  name: 'TaggingDemo',
+  components: {
+    Tagging,
+  },
+}
 </script>
 ```
 

package/docs/API-reference/components/url/x-components.url-handler.md

@@ -7,8 +7,8 @@ title: UrlHandler
 # UrlHandler
 
 This component manages the browser URL parameters to preserve them through reloads and browser
-history navigation. It allow to configure the default url parameter names using its attributes. This
-component doesn't render elements to the DOM.
+history navigation. It allow to configure the default url parameter names using its attributes.
+This component doesn't render elements to the DOM.
 
 ## Events
 
@@ -32,14 +32,14 @@ _Try to make some requests and take a look to the url!_
 </template>
 
 <script>
-  import { UrlHandler } from '@empathyco/x-components/url-handler';
-
-  export default {
-    name: 'UrlHandlerDemo',
-    components: {
-      UrlHandler
-    }
-  };
+import { UrlHandler } from '@empathyco/x-components/url-handler'
+
+export default {
+  name: 'UrlHandlerDemo',
+  components: {
+    UrlHandler,
+  },
+}
 </script>
 ```
 
@@ -60,14 +60,14 @@ _Try to make some requests and take a look to the url!_
 </template>
 
 <script>
-  import { UrlHandler } from '@empathyco/x-components/url-handler';
-
-  export default {
-    name: 'UrlHandlerDemo',
-    components: {
-      UrlHandler
-    }
-  };
+import { UrlHandler } from '@empathyco/x-components/url-handler'
+
+export default {
+  name: 'UrlHandlerDemo',
+  components: {
+    UrlHandler,
+  },
+}
 </script>
 ```
 

package/extra-params/index.js

@@ -1,6 +1,6 @@
 export { default as ExtraParams } from '../js/x-modules/extra-params/components/extra-params.vue.js';
-export { default as SnippetConfigExtraParams } from '../js/x-modules/extra-params/components/snippet-config-extra-params.vue.js';
 export { default as RenderlessExtraParams } from '../js/x-modules/extra-params/components/renderless-extra-param.vue.js';
+export { default as SnippetConfigExtraParams } from '../js/x-modules/extra-params/components/snippet-config-extra-params.vue.js';
 export { extraParamsEmitters } from '../js/x-modules/extra-params/store/emitters.js';
 export { extraParamsXStoreModule } from '../js/x-modules/extra-params/store/module.js';
 export { extraParamsWiring, setExtraParams } from '../js/x-modules/extra-params/wiring.js';

package/facets/index.js

@@ -1,37 +1,37 @@
-export { facetsXModule } from '../js/x-modules/facets/x-module.js';
-export { facets } from '../js/x-modules/facets/store/getters/facets.getter.js';
-export { selectedFilters } from '../js/x-modules/facets/store/getters/selected-filters.getter.js';
-export { selectedFiltersByFacet } from '../js/x-modules/facets/store/getters/selected-filters-by-facet.getter.js';
-export { facetsEmitters } from '../js/x-modules/facets/store/emitters.js';
-export { facetsXStoreModule } from '../js/x-modules/facets/store/module.js';
-export { facetsWiring, setFiltersFromHistoryQueries, setQueryFromPreview, setSelectedFiltersFromPreview } from '../js/x-modules/facets/wiring.js';
-export { DefaultFacetsService } from '../js/x-modules/facets/service/facets.service.js';
-export { EditableNumberRangeFilterEntity } from '../js/x-modules/facets/entities/editable-number-range-filter.entity.js';
-export { FilterEntityFactory } from '../js/x-modules/facets/entities/filter-entity.factory.js';
-export { HierarchicalFilterEntity } from '../js/x-modules/facets/entities/hierarchical-filter.entity.js';
-export { NumberRangeFilterEntity } from '../js/x-modules/facets/entities/number-range-filter.entity.js';
-export { RawFilterEntity } from '../js/x-modules/facets/entities/raw-filter.entity.js';
-export { SimpleFilterEntity } from '../js/x-modules/facets/entities/simple-filter.entity.js';
-export { SingleSelectModifier } from '../js/x-modules/facets/entities/single-select.modifier.js';
-export { StickyModifier } from '../js/x-modules/facets/entities/sticky.modifier.js';
-export { BaseFilterEntityModifier } from '../js/x-modules/facets/entities/types.js';
-export { default as Facets } from '../js/x-modules/facets/components/facets/facets.vue.js';
+export { default as ClearFilters } from '../js/x-modules/facets/components/clear-filters.vue.js';
 export { default as FacetsProvider } from '../js/x-modules/facets/components/facets/facets-provider.vue.js';
+export { default as Facets } from '../js/x-modules/facets/components/facets/facets.vue.js';
 export { default as AllFilter } from '../js/x-modules/facets/components/filters/all-filter.vue.js';
 export { default as EditableNumberRangeFilter } from '../js/x-modules/facets/components/filters/editable-number-range-filter.vue.js';
-export { default as NumberRangeFilter } from '../js/x-modules/facets/components/filters/number-range-filter.vue.js';
 export { default as HierarchicalFilter } from '../js/x-modules/facets/components/filters/hierarchical-filter.vue.js';
+export { default as NumberRangeFilter } from '../js/x-modules/facets/components/filters/number-range-filter.vue.js';
 export { default as RenderlessFilter } from '../js/x-modules/facets/components/filters/renderless-filter.vue.js';
 export { default as SimpleFilter } from '../js/x-modules/facets/components/filters/simple-filter.vue.js';
-export { default as PreselectedFilters } from '../js/x-modules/facets/components/preselected-filters.vue.js';
 export { default as ExcludeFiltersWithNoResults } from '../js/x-modules/facets/components/lists/exclude-filters-with-no-results.vue.js';
 export { default as FiltersList } from '../js/x-modules/facets/components/lists/filters-list.vue.js';
 export { default as FiltersSearch } from '../js/x-modules/facets/components/lists/filters-search.vue.js';
-export { default as SelectedFilters } from '../js/x-modules/facets/components/lists/selected-filters.vue.js';
 export { default as SelectedFiltersList } from '../js/x-modules/facets/components/lists/selected-filters-list.vue.js';
+export { default as SelectedFilters } from '../js/x-modules/facets/components/lists/selected-filters.vue.js';
 export { default as SlicedFilters } from '../js/x-modules/facets/components/lists/sliced-filters.vue.js';
 export { default as SortedFilters } from '../js/x-modules/facets/components/lists/sorted-filters.vue.js';
-export { default as ClearFilters } from '../js/x-modules/facets/components/clear-filters.vue.js';
+export { default as PreselectedFilters } from '../js/x-modules/facets/components/preselected-filters.vue.js';
 export { useFacets } from '../js/x-modules/facets/composables/use-facets.js';
 export { useFiltersInjection } from '../js/x-modules/facets/composables/use-filters-injection.js';
-export { flatHierarchicalFilters } from '../js/x-modules/facets/utils.js';
+export { EditableNumberRangeFilterEntity } from '../js/x-modules/facets/entities/editable-number-range-filter.entity.js';
+export { FilterEntityFactory } from '../js/x-modules/facets/entities/filter-entity.factory.js';
+export { HierarchicalFilterEntity } from '../js/x-modules/facets/entities/hierarchical-filter.entity.js';
+export { NumberRangeFilterEntity } from '../js/x-modules/facets/entities/number-range-filter.entity.js';
+export { RawFilterEntity } from '../js/x-modules/facets/entities/raw-filter.entity.js';
+export { SimpleFilterEntity } from '../js/x-modules/facets/entities/simple-filter.entity.js';
+export { SingleSelectModifier } from '../js/x-modules/facets/entities/single-select.modifier.js';
+export { StickyModifier } from '../js/x-modules/facets/entities/sticky.modifier.js';
+export { BaseFilterEntityModifier } from '../js/x-modules/facets/entities/types.js';
+export { DefaultFacetsService } from '../js/x-modules/facets/service/facets.service.js';
+export { facetsEmitters } from '../js/x-modules/facets/store/emitters.js';
+export { facets } from '../js/x-modules/facets/store/getters/facets.getter.js';
+export { selectedFiltersByFacet } from '../js/x-modules/facets/store/getters/selected-filters-by-facet.getter.js';
+export { selectedFilters } from '../js/x-modules/facets/store/getters/selected-filters.getter.js';
+export { facetsXStoreModule } from '../js/x-modules/facets/store/module.js';
+export { flatHierarchicalFilters } from '../js/x-modules/facets/utils.js';
+export { facetsWiring, setFiltersFromHistoryQueries, setQueryFromPreview, setSelectedFiltersFromPreview } from '../js/x-modules/facets/wiring.js';
+export { facetsXModule } from '../js/x-modules/facets/x-module.js';

package/history-queries/index.js

@@ -1,6 +1,6 @@
 export { default as ClearHistoryQueries } from '../js/x-modules/history-queries/components/clear-history-queries.vue.js';
-export { default as HistoryQueries } from '../js/x-modules/history-queries/components/history-queries.vue.js';
 export { default as HistoryQueriesSwitch } from '../js/x-modules/history-queries/components/history-queries-switch.vue.js';
+export { default as HistoryQueries } from '../js/x-modules/history-queries/components/history-queries.vue.js';
 export { default as HistoryQuery } from '../js/x-modules/history-queries/components/history-query.vue.js';
 export { default as MyHistory } from '../js/x-modules/history-queries/components/my-history.vue.js';
 export { default as RemoveHistoryQuery } from '../js/x-modules/history-queries/components/remove-history-query.vue.js';

package/js/components/animations/animate-clip-path/animate-clip-path.factory.js

@@ -1,5 +1,5 @@
-import './animate-clip-path.style.scss.js';
 import { createDirectionalAnimationFactory } from '../create-directional-animation-factory.js';
+import './animate-clip-path.style.scss.js';
 
 /**
  * Returns a transition component to wrap an element passed in the default slot and animating its

package/js/components/animations/animate-clip-path/animate-clip-path.factory.js.map

@@ -1 +1 @@
-{"version":3,"file":"animate-clip-path.factory.js","sources":["../../../../../src/components/animations/animate-clip-path/animate-clip-path.factory.ts"],"sourcesContent":["import './animate-clip-path.style.scss';\nimport { createDirectionalAnimationFactory } from '../create-directional-animation-factory';\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * clip-path using inset and with the origin passed as parameter.\n *\n * @param animationOrigin - The origin of the animation. This means where the animation starts and\n * ends. For example 'left' makes the element animate from the left and back; 'left-to-right' makes\n * it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateClipPath = createDirectionalAnimationFactory('animate-clip-path');\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;AAUG;MACU,eAAe,GAAG,iCAAiC,CAAC,mBAAmB;;;;"}
+{"version":3,"file":"animate-clip-path.factory.js","sources":["../../../../../src/components/animations/animate-clip-path/animate-clip-path.factory.ts"],"sourcesContent":["import { createDirectionalAnimationFactory } from '../create-directional-animation-factory'\nimport './animate-clip-path.style.scss'\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * clip-path using inset and with the origin passed as parameter.\n *\n * @param animationOrigin - The origin of the animation. This means where the animation starts and\n * ends. For example 'left' makes the element animate from the left and back; 'left-to-right' makes\n * it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateClipPath = createDirectionalAnimationFactory('animate-clip-path')\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;AAUG;MACU,eAAe,GAAG,iCAAiC,CAAC,mBAAmB;;;;"}

package/js/components/animations/animate-scale/animate-scale.factory.js

@@ -1,5 +1,5 @@
-import './animate-scale.style.scss.js';
 import { createDirectionalAnimationFactory } from '../create-directional-animation-factory.js';
+import './animate-scale.style.scss.js';
 
 /**
  * Returns a transition component to wrap an element passed in the default slot and animating its

package/js/components/animations/animate-scale/animate-scale.factory.js.map

@@ -1 +1 @@
-{"version":3,"file":"animate-scale.factory.js","sources":["../../../../../src/components/animations/animate-scale/animate-scale.factory.ts"],"sourcesContent":["import './animate-scale.style.scss';\nimport { createDirectionalAnimationFactory } from '../create-directional-animation-factory';\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * scale using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation\n * starts and ends. For example 'left' makes the element animate from the left and back;\n * 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateScale = createDirectionalAnimationFactory('animate-scale');\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;AAUG;MACU,YAAY,GAAG,iCAAiC,CAAC,eAAe;;;;"}
+{"version":3,"file":"animate-scale.factory.js","sources":["../../../../../src/components/animations/animate-scale/animate-scale.factory.ts"],"sourcesContent":["import { createDirectionalAnimationFactory } from '../create-directional-animation-factory'\nimport './animate-scale.style.scss'\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * scale using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation\n * starts and ends. For example 'left' makes the element animate from the left and back;\n * 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateScale = createDirectionalAnimationFactory('animate-scale')\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;AAUG;MACU,YAAY,GAAG,iCAAiC,CAAC,eAAe;;;;"}

package/js/components/animations/animate-translate/animate-translate.factory.js

@@ -1,5 +1,5 @@
-import './animate-translate.style.scss.js';
 import { createDirectionalAnimationFactory } from '../create-directional-animation-factory.js';
+import './animate-translate.style.scss.js';
 
 /**
  * Returns a transition component to wrap an element passed in the default slot and animating its

package/js/components/animations/animate-translate/animate-translate.factory.js.map

@@ -1 +1 @@
-{"version":3,"file":"animate-translate.factory.js","sources":["../../../../../src/components/animations/animate-translate/animate-translate.factory.ts"],"sourcesContent":["import './animate-translate.style.scss';\nimport { createDirectionalAnimationFactory } from '../create-directional-animation-factory';\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * translate using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation\n * starts and ends. For example 'left' makes the element animate from the left and back;\n * 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateTranslate = createDirectionalAnimationFactory('animate-translate');\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;AAUG;MACU,gBAAgB,GAAG,iCAAiC,CAAC,mBAAmB;;;;"}
+{"version":3,"file":"animate-translate.factory.js","sources":["../../../../../src/components/animations/animate-translate/animate-translate.factory.ts"],"sourcesContent":["import { createDirectionalAnimationFactory } from '../create-directional-animation-factory'\nimport './animate-translate.style.scss'\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * translate using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation\n * starts and ends. For example 'left' makes the element animate from the left and back;\n * 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateTranslate = createDirectionalAnimationFactory('animate-translate')\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;AAUG;MACU,gBAAgB,GAAG,iCAAiC,CAAC,mBAAmB;;;;"}

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 name=\"x-animate-width-\">\n    <!-- @slot (Required) Transition content -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n\n  /**\n   * Renders a transition wrapping an element passed in the default slot and animating its width.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'AnimateWidth'\n  });\n</script>\n\n<style lang=\"css\">\n  .x-animate-width--enter-active,\n  .x-animate-width--leave-active {\n    transition: width 0.3s ease-out;\n    overflow-x: hidden;\n  }\n\n  .x-animate-width--enter-from,\n  .x-animate-width--leave-to {\n    width: 0 !important;\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":["_openBlock","_createBlock","_Transition","_withCtx","_renderSlot"],"mappings":";;;;;SAAA,WAGY,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAARA,SAAQ,EAAA,EAAAC,WAAA,CAAAC,UAAA,EAAA,EAAA,IAAA,EAAA,kBAAA,EAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAHZ,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"animate-width.vue.js","sources":["../../../../src/components/animations/animate-width.vue"],"sourcesContent":["<template>\n  <transition name=\"x-animate-width-\">\n    <!-- @slot (Required) Transition content -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping an element passed in the default slot and animating its width.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AnimateWidth',\n})\n</script>\n\n<style lang=\"css\">\n.x-animate-width--enter-active,\n.x-animate-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n\n.x-animate-width--enter-from,\n.x-animate-width--leave-to {\n  width: 0 !important;\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>\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n\nexport 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>\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n\nexport default {\n  data() {\n    return {\n      visible: true,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_Transition","_withCtx","_renderSlot"],"mappings":";;;;;SAAA,WAGY,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAARA,SAAQ,EAAA,EAAAC,WAAA,CAAAC,UAAA,EAAA,EAAA,IAAA,EAAA,kBAAA,EAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAHZ,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -6,7 +6,7 @@ import { defineComponent } from 'vue';
  * @public
  */
 var _sfc_main = defineComponent({
-    name: 'AnimateWidth'
+    name: 'AnimateWidth',
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"animate-width.vue2.js","sources":["../../../../src/components/animations/animate-width.vue"],"sourcesContent":["<template>\n  <transition name=\"x-animate-width-\">\n    <!-- @slot (Required) Transition content -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n\n  /**\n   * Renders a transition wrapping an element passed in the default slot and animating its width.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'AnimateWidth'\n  });\n</script>\n\n<style lang=\"css\">\n  .x-animate-width--enter-active,\n  .x-animate-width--leave-active {\n    transition: width 0.3s ease-out;\n    overflow-x: hidden;\n  }\n\n  .x-animate-width--enter-from,\n  .x-animate-width--leave-to {\n    width: 0 !important;\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":";;AAUE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAa;AACpB,CAAA,CAAC;;;;"}
+{"version":3,"file":"animate-width.vue2.js","sources":["../../../../src/components/animations/animate-width.vue"],"sourcesContent":["<template>\n  <transition name=\"x-animate-width-\">\n    <!-- @slot (Required) Transition content -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping an element passed in the default slot and animating its width.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AnimateWidth',\n})\n</script>\n\n<style lang=\"css\">\n.x-animate-width--enter-active,\n.x-animate-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n\n.x-animate-width--enter-from,\n.x-animate-width--leave-to {\n  width: 0 !important;\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>\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n\nexport 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>\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n\nexport default {\n  data() {\n    return {\n      visible: true,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAUA;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACrB,CAAA,CAAA;;;;"}

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

@@ -5,18 +5,18 @@ import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(Transition, {
+    name: "x-collapse-height-",
+    appear: _ctx.appear,
     onEnter: _ctx.expand,
     onAfterEnter: _ctx.cleanUpAnimationStyles,
-    onLeave: _ctx.collapse,
-    name: "x-collapse-height-",
-    appear: _ctx.appear
+    onLeave: _ctx.collapse
   }, {
     default: withCtx(() => [
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["onEnter", "onAfterEnter", "onLeave", "appear"]);
+  }, 8, ["appear", "onEnter", "onAfterEnter", "onLeave"]);
 }
 var collapseHeight = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

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    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    name=\"x-collapse-height-\"\n    :appear=\"appear\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { useCollapseAnimation } from './use-collapse-animation';\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  export default defineComponent({\n    name: 'CollapseHeight',\n    props: {\n      /**\n       * Indicates if the transition must be applied on the initial render of the node.\n       */\n      appear: {\n        type: Boolean,\n        default: true\n      }\n    },\n    setup: function () {\n      return useCollapseAnimation('height');\n    }\n    // TODO Add support for extending enter, after-enter and leave transitions\n  });\n</script>\n\n<style lang=\"css\">\n  .x-collapse-height--enter-active,\n  .x-collapse-height--leave-active {\n    transition: height 0.3s ease-out;\n    overflow: hidden;\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":["expand","_openBlock","_createBlock","_Transition","collapse","appear","_renderSlot"],"mappings":";;;;;AAEK,SAAA,WAAA,CAAOA,IAAM,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACb,EAAA,OAAAC,SAAA,EAAmC,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IACnC,OAAOC,EAAAA,IAAAA,CAAAA,MAAAA;AAAAA,IACR,YAAK,EAAA,IAAA,CAAA,sBAAA;AAAA,IACJ,OAAQC,EAAAA,IAAAA,CAAAA,QAAAA;AAAAA,IAAAA,IAAAA,EAAAA,oBAAAA;AANb,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"collapse-height.vue.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"x-collapse-height-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\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 */\nexport default defineComponent({\n  name: 'CollapseHeight',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    return useCollapseAnimation('height')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-height--enter-active,\n.x-collapse-height--leave-active {\n  transition: height 0.3s ease-out;\n  overflow: hidden;\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":["_openBlock","_createBlock","_Transition","collapse","_renderSlot"],"mappings":";;;;;AAEQ,SAAA,WAAA,CAAC,IAAoB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAClB,EAAA,OAAAA,SAAA,EAAQ,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IACd,IAAA,EAAA,oBAAA;AAAA,IACA,MAAW,EAAA,IAAA,CAAA,MAAA;AAAA,IACX,OAAOC,EAAAA,IAAAA,CAAAA,MAAAA;AAAAA,IAAAA,YAAAA,EAAAA,IAAAA,CAAAA,sBAAAA;AANZ,IAAA,OAAA,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -15,12 +15,12 @@ var _sfc_main = defineComponent({
          */
         appear: {
             type: Boolean,
-            default: true
-        }
+            default: true,
+        },
     },
-    setup: function () {
+    setup() {
         return useCollapseAnimation('height');
-    }
+    },
     // TODO Add support for extending enter, after-enter and leave transitions
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"collapse-height.vue2.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    name=\"x-collapse-height-\"\n    :appear=\"appear\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { useCollapseAnimation } from './use-collapse-animation';\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  export default defineComponent({\n    name: 'CollapseHeight',\n    props: {\n      /**\n       * Indicates if the transition must be applied on the initial render of the node.\n       */\n      appear: {\n        type: Boolean,\n        default: true\n      }\n    },\n    setup: function () {\n      return useCollapseAnimation('height');\n    }\n    // TODO Add support for extending enter, after-enter and leave transitions\n  });\n</script>\n\n<style lang=\"css\">\n  .x-collapse-height--enter-active,\n  .x-collapse-height--leave-active {\n    transition: height 0.3s ease-out;\n    overflow: hidden;\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":";;;AAiBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;AACD,IAAA,KAAK,EAAE,YAAA;AACL,QAAA,OAAO,oBAAoB,CAAC,QAAQ,CAAC,CAAA;KACvC;;AAED,CAAA,CAAC;;;;"}
+{"version":3,"file":"collapse-height.vue2.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"x-collapse-height-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\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 */\nexport default defineComponent({\n  name: 'CollapseHeight',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    return useCollapseAnimation('height')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-height--enter-active,\n.x-collapse-height--leave-active {\n  transition: height 0.3s ease-out;\n  overflow: hidden;\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":";;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH,QAAA,OAAO,oBAAoB,CAAC,QAAQ,CAAA,CAAA;KACrC;;AAEF,CAAA,CAAA;;;;"}

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

@@ -5,18 +5,18 @@ import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(Transition, {
+    name: "x-collapse-width-",
+    appear: _ctx.appear,
     onEnter: _ctx.expand,
     onAfterEnter: _ctx.cleanUpAnimationStyles,
-    onLeave: _ctx.collapse,
-    name: "x-collapse-width-",
-    appear: _ctx.appear
+    onLeave: _ctx.collapse
   }, {
     default: withCtx(() => [
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["onEnter", "onAfterEnter", "onLeave", "appear"]);
+  }, 8, ["appear", "onEnter", "onAfterEnter", "onLeave"]);
 }
 var collapseWidth = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

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    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    name=\"x-collapse-width-\"\n    :appear=\"appear\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { useCollapseAnimation } from './use-collapse-animation';\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  export default defineComponent({\n    name: 'CollapseWidth',\n    props: {\n      /**\n       * Indicates if the transition must be applied on the initial render of the node.\n       */\n      appear: {\n        type: Boolean,\n        default: true\n      }\n    },\n    setup: function () {\n      return useCollapseAnimation('width');\n    }\n    // TODO Add support for extending enter, after-enter and leave transitions\n  });\n</script>\n\n<style lang=\"css\">\n  .x-collapse-width--enter-active,\n  .x-collapse-width--leave-active {\n    transition: width 0.3s ease-out;\n    overflow: hidden;\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":["expand","_openBlock","_createBlock","_Transition","collapse","appear","_renderSlot"],"mappings":";;;;;AAEK,SAAA,WAAA,CAAOA,IAAM,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACb,EAAA,OAAAC,SAAA,EAAmC,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IACnC,OAAOC,EAAAA,IAAAA,CAAAA,MAAAA;AAAAA,IACR,YAAK,EAAA,IAAA,CAAA,sBAAA;AAAA,IACJ,OAAQC,EAAAA,IAAAA,CAAAA,QAAAA;AAAAA,IAAAA,IAAAA,EAAAA,mBAAAA;AANb,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"collapse-width.vue.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"x-collapse-width-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\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 */\nexport default defineComponent({\n  name: 'CollapseWidth',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    return useCollapseAnimation('width')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-width--enter-active,\n.x-collapse-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow: hidden;\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":["_openBlock","_createBlock","_Transition","collapse","_renderSlot"],"mappings":";;;;;AAEQ,SAAA,WAAA,CAAC,IAAmB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACjB,EAAA,OAAAA,SAAA,EAAQ,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IACd,IAAA,EAAA,mBAAA;AAAA,IACA,MAAW,EAAA,IAAA,CAAA,MAAA;AAAA,IACX,OAAOC,EAAAA,IAAAA,CAAAA,MAAAA;AAAAA,IAAAA,YAAAA,EAAAA,IAAAA,CAAAA,sBAAAA;AANZ,IAAA,OAAA,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -15,12 +15,12 @@ var _sfc_main = defineComponent({
          */
         appear: {
             type: Boolean,
-            default: true
-        }
+            default: true,
+        },
     },
-    setup: function () {
+    setup() {
         return useCollapseAnimation('width');
-    }
+    },
     // TODO Add support for extending enter, after-enter and leave transitions
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"collapse-width.vue2.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    name=\"x-collapse-width-\"\n    :appear=\"appear\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { useCollapseAnimation } from './use-collapse-animation';\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  export default defineComponent({\n    name: 'CollapseWidth',\n    props: {\n      /**\n       * Indicates if the transition must be applied on the initial render of the node.\n       */\n      appear: {\n        type: Boolean,\n        default: true\n      }\n    },\n    setup: function () {\n      return useCollapseAnimation('width');\n    }\n    // TODO Add support for extending enter, after-enter and leave transitions\n  });\n</script>\n\n<style lang=\"css\">\n  .x-collapse-width--enter-active,\n  .x-collapse-width--leave-active {\n    transition: width 0.3s ease-out;\n    overflow: hidden;\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":";;;AAiBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;AACD,IAAA,KAAK,EAAE,YAAA;AACL,QAAA,OAAO,oBAAoB,CAAC,OAAO,CAAC,CAAA;KACtC;;AAED,CAAA,CAAC;;;;"}
+{"version":3,"file":"collapse-width.vue2.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"x-collapse-width-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\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 */\nexport default defineComponent({\n  name: 'CollapseWidth',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    return useCollapseAnimation('width')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-width--enter-active,\n.x-collapse-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow: hidden;\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":";;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH,QAAA,OAAO,oBAAoB,CAAC,OAAO,CAAA,CAAA;KACpC;;AAEF,CAAA,CAAA;;;;"}

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

@@ -14,11 +14,11 @@ function createDirectionalAnimationFactory(animationName) {
         name: `transition-${animationName}-${animationOrigin}`,
         setup(_, { slots }) {
             return () => h(Transition, {
-                name: `x-${animationName}--${animationOrigin} x-${animationName}-`
+                name: `x-${animationName}--${animationOrigin} x-${animationName}-`,
             }, 
             // Vue recommends using function for better performance.
             () => 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 { DefineComponent, defineComponent, h, Transition } from 'vue';\n\nexport type AnimationOrigin =\n  | 'top'\n  | 'bottom'\n  | 'top-to-bottom'\n  | 'bottom-to-top'\n  | 'left'\n  | 'right'\n  | 'left-to-right'\n  | 'right-to-left';\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) => DefineComponent {\n  return (animationOrigin = 'top') =>\n    defineComponent({\n      name: `transition-${animationName}-${animationOrigin}`,\n      setup(_, { slots }) {\n        return () =>\n          h(\n            Transition,\n            {\n              name: `x-${animationName}--${animationOrigin} x-${animationName}-`\n            },\n            // Vue recommends using function for better performance.\n            () => slots.default?.() ?? ''\n          );\n      }\n    });\n}\n"],"names":[],"mappings":";;AAYA;;;;;;;;AAQG;AACG,SAAU,iCAAiC,CAC/C,aAAqB,EAAA;IAErB,OAAO,CAAC,eAAe,GAAG,KAAK,KAC7B,eAAe,CAAC;AACd,QAAA,IAAI,EAAE,CAAA,WAAA,EAAc,aAAa,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA;AACtD,QAAA,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAA;AAChB,YAAA,OAAO,MACL,CAAC,CACC,UAAU,EACV;AACE,gBAAA,IAAI,EAAE,CAAK,EAAA,EAAA,aAAa,KAAK,eAAe,CAAA,GAAA,EAAM,aAAa,CAAG,CAAA,CAAA;AACnE,aAAA;;YAED,MAAM,KAAK,CAAC,OAAO,IAAI,IAAI,EAAE,CAC9B,CAAC;SACL;AACF,KAAA,CAAC,CAAC;AACP;;;;"}
+{"version":3,"file":"create-directional-animation-factory.js","sources":["../../../../src/components/animations/create-directional-animation-factory.ts"],"sourcesContent":["import type { DefineComponent } from 'vue'\nimport { defineComponent, h, Transition } from 'vue'\n\nexport type AnimationOrigin =\n  | 'top'\n  | 'bottom'\n  | 'top-to-bottom'\n  | 'bottom-to-top'\n  | 'left'\n  | 'right'\n  | 'left-to-right'\n  | 'right-to-left'\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) => DefineComponent {\n  return (animationOrigin = 'top') =>\n    defineComponent({\n      name: `transition-${animationName}-${animationOrigin}`,\n      setup(_, { slots }) {\n        return () =>\n          h(\n            Transition,\n            {\n              name: `x-${animationName}--${animationOrigin} x-${animationName}-`,\n            },\n            // Vue recommends using function for better performance.\n            () => slots.default?.() ?? '',\n          )\n      },\n    })\n}\n"],"names":[],"mappings":";;AAaA;;;;;;;;AAQG;AACG,SAAU,iCAAiC,CAC/C,aAAqB,EAAA;IAErB,OAAO,CAAC,eAAe,GAAG,KAAK,KAC7B,eAAe,CAAC;AACd,QAAA,IAAI,EAAE,CAAA,WAAA,EAAc,aAAa,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA;AACtD,QAAA,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAA;AAChB,YAAA,OAAO,MACL,CAAC,CACC,UAAU,EACV;AACE,gBAAA,IAAI,EAAE,CAAK,EAAA,EAAA,aAAa,KAAK,eAAe,CAAA,GAAA,EAAM,aAAa,CAAG,CAAA,CAAA;AACnE,aAAA;;YAED,MAAM,KAAK,CAAC,OAAO,IAAI,IAAI,EAAE,CAC9B,CAAA;SACJ;AACF,KAAA,CAAC,CAAA;AACN;;;;"}

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 name=\"x-cross-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\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  export default defineComponent({\n    name: 'CrossFade',\n    props: {\n      /**\n       * Indicates if the transition must be applied on the initial render of the node.\n       */\n      appear: {\n        type: Boolean,\n        default: true\n      }\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  .x-cross-fade--enter-active,\n  .x-cross-fade--leave-active {\n    transition: opacity 0.25s ease-in-out;\n    mix-blend-mode: multiply;\n  }\n\n  .x-cross-fade--leave-active {\n    position: absolute;\n  }\n\n  .x-cross-fade--leave-to,\n  .x-cross-fade--enter-from {\n    opacity: 0 !important;\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":["_openBlock","_createBlock","_Transition","_renderSlot"],"mappings":";;;;;AACkB,SAAA,WAAA,CAAC,IAAe,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAAQ,EAAA,OAAAA,SAAA,EAAQ,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IAAA,IAAA,EAAA,eAAA;AADlD,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"cross-fade.vue.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n  <transition name=\"x-cross-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\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 */\nexport default defineComponent({\n  name: 'CrossFade',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-cross-fade--enter-active,\n.x-cross-fade--leave-active {\n  transition: opacity 0.25s ease-in-out;\n  mix-blend-mode: multiply;\n}\n\n.x-cross-fade--leave-active {\n  position: absolute;\n}\n\n.x-cross-fade--leave-to,\n.x-cross-fade--enter-from {\n  opacity: 0 !important;\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":["_openBlock","_createBlock","_Transition","_renderSlot"],"mappings":";;;;;AACkB,SAAA,WAAA,CAAC,IAAe,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAAQ,EAAA,OAAAA,SAAA,EAAQ,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IAAA,IAAA,EAAA,eAAA;AADlD,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -14,9 +14,9 @@ var _sfc_main = defineComponent({
          */
         appear: {
             type: Boolean,
-            default: true
-        }
-    }
+            default: true,
+        },
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"cross-fade.vue2.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n  <transition name=\"x-cross-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\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  export default defineComponent({\n    name: 'CrossFade',\n    props: {\n      /**\n       * Indicates if the transition must be applied on the initial render of the node.\n       */\n      appear: {\n        type: Boolean,\n        default: true\n      }\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  .x-cross-fade--enter-active,\n  .x-cross-fade--leave-active {\n    transition: opacity 0.25s ease-in-out;\n    mix-blend-mode: multiply;\n  }\n\n  .x-cross-fade--leave-active {\n    position: absolute;\n  }\n\n  .x-cross-fade--leave-to,\n  .x-cross-fade--enter-from {\n    opacity: 0 !important;\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":";;AAUE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACF,KAAA;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"cross-fade.vue2.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n  <transition name=\"x-cross-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\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 */\nexport default defineComponent({\n  name: 'CrossFade',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-cross-fade--enter-active,\n.x-cross-fade--leave-active {\n  transition: opacity 0.25s ease-in-out;\n  mix-blend-mode: multiply;\n}\n\n.x-cross-fade--leave-active {\n  position: absolute;\n}\n\n.x-cross-fade--leave-to,\n.x-cross-fade--enter-from {\n  opacity: 0 !important;\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":";;AAUA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACF,CAAA,CAAA;;;;"}

package/js/components/animations/fade-and-slide.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade-and-slide.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group class=\"x-fade-and-slide\" :name=\"name\" :tag=\"tag\" :appear=\"appear\">\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { useDisableAnimation } from './use-disable-animation';\n\n  /**\n   * Renders a transition group wrapping the elements passed in the default slot and animating\n   * them with a fade and slide animation.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FadeAndSlide',\n    props: {\n      /**\n       * HTML Element that the transition-group children will be wrapped in.\n       */\n      tag: String,\n      /**\n       * Indicates if the transition must be applied on the initial render of the node.\n       */\n      appear: {\n        type: Boolean,\n        default: true\n      }\n    },\n    setup: function () {\n      /**\n       * The name of the animation.\n       */\n      const animationName = 'x-fade-and-slide-';\n\n      const { name } = useDisableAnimation(animationName);\n\n      return { name };\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  .x-fade-and-slide--move,\n  .x-fade-and-slide--enter-active,\n  .x-fade-and-slide--leave-active {\n    transition: opacity 0.2s ease-out, transform 0.3s ease-out;\n  }\n\n  .x-fade-and-slide--enter-from,\n  .x-fade-and-slide--leave-to {\n    transform: translate(-20%, 0);\n    opacity: 0;\n  }\n\n  .x-fade-and-slide--leave-active {\n    position: absolute;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\nUsed as a prop in an animatable component:\n\n```vue\n<AnimatableComponent :animation=\"FadeAndSlide\" />\n```\n\nUsed as a regular component passing a the tag as prop:\n\n```vue\n<FadeAndSlide tag=\"ul\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</FadeAndSlide>\n```\n</docs>\n"],"names":["name","_createBlock","_TransitionGroup","tag","appear","_renderSlot"],"mappings":";;;;;AACyB,SAAA,WAAA,CAAC,IAAkB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAAQA,SAAI,EAAA,EAAAC,WAAA,CAAAC,eAAA,EAAA;AAAA,IAAG,KAAKC,EAAAA,kBAAAA;AAAAA,IAAM,MAAM,IAAEC,CAAAA,IAAAA;AAAAA,IAAAA,GAAAA,EAAAA,IAAAA,CAAAA,GAAAA;AAD9E,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"fade-and-slide.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group class=\"x-fade-and-slide\" :name=\"name\" :tag=\"tag\" :appear=\"appear\">\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useDisableAnimation } from './use-disable-animation'\n\n/**\n * Renders a transition group wrapping the elements passed in the default slot and animating\n * them with a fade and slide animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FadeAndSlide',\n  props: {\n    /**\n     * HTML Element that the transition-group children will be wrapped in.\n     */\n    tag: String,\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    /**\n     * The name of the animation.\n     */\n    const animationName = 'x-fade-and-slide-'\n\n    const { name } = useDisableAnimation(animationName)\n\n    return { name }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-fade-and-slide--move,\n.x-fade-and-slide--enter-active,\n.x-fade-and-slide--leave-active {\n  transition:\n    opacity 0.2s ease-out,\n    transform 0.3s ease-out;\n}\n\n.x-fade-and-slide--enter-from,\n.x-fade-and-slide--leave-to {\n  transform: translate(-20%, 0);\n  opacity: 0;\n}\n\n.x-fade-and-slide--leave-active {\n  position: absolute;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\nUsed as a prop in an animatable component:\n\n```vue\n<AnimatableComponent :animation=\"FadeAndSlide\" />\n```\n\nUsed as a regular component passing a the tag as prop:\n\n```vue\n<FadeAndSlide tag=\"ul\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</FadeAndSlide>\n```\n</docs>\n"],"names":["name","_createBlock","_TransitionGroup","tag","appear","_renderSlot"],"mappings":";;;;;AACyB,SAAA,WAAA,CAAC,IAAkB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAAQA,SAAI,EAAA,EAAAC,WAAA,CAAAC,eAAA,EAAA;AAAA,IAAG,KAAKC,EAAAA,kBAAAA;AAAAA,IAAM,MAAM,IAAEC,CAAAA,IAAAA;AAAAA,IAAAA,GAAAA,EAAAA,IAAAA,CAAAA,GAAAA;AAD9E,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/animations/fade-and-slide.vue2.js

@@ -19,17 +19,17 @@ var _sfc_main = defineComponent({
          */
         appear: {
             type: Boolean,
-            default: true
-        }
+            default: true,
+        },
     },
-    setup: function () {
+    setup() {
         /**
          * The name of the animation.
          */
         const animationName = 'x-fade-and-slide-';
         const { name } = useDisableAnimation(animationName);
         return { name };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/animations/fade-and-slide.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade-and-slide.vue2.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group class=\"x-fade-and-slide\" :name=\"name\" :tag=\"tag\" :appear=\"appear\">\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { useDisableAnimation } from './use-disable-animation';\n\n  /**\n   * Renders a transition group wrapping the elements passed in the default slot and animating\n   * them with a fade and slide animation.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FadeAndSlide',\n    props: {\n      /**\n       * HTML Element that the transition-group children will be wrapped in.\n       */\n      tag: String,\n      /**\n       * Indicates if the transition must be applied on the initial render of the node.\n       */\n      appear: {\n        type: Boolean,\n        default: true\n      }\n    },\n    setup: function () {\n      /**\n       * The name of the animation.\n       */\n      const animationName = 'x-fade-and-slide-';\n\n      const { name } = useDisableAnimation(animationName);\n\n      return { name };\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  .x-fade-and-slide--move,\n  .x-fade-and-slide--enter-active,\n  .x-fade-and-slide--leave-active {\n    transition: opacity 0.2s ease-out, transform 0.3s ease-out;\n  }\n\n  .x-fade-and-slide--enter-from,\n  .x-fade-and-slide--leave-to {\n    transform: translate(-20%, 0);\n    opacity: 0;\n  }\n\n  .x-fade-and-slide--leave-active {\n    position: absolute;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\nUsed as a prop in an animatable component:\n\n```vue\n<AnimatableComponent :animation=\"FadeAndSlide\" />\n```\n\nUsed as a regular component passing a the tag as prop:\n\n```vue\n<FadeAndSlide tag=\"ul\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</FadeAndSlide>\n```\n</docs>\n"],"names":[],"mappings":";;;AAWE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,GAAG,EAAE,MAAM;AACX;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;AACD,IAAA,KAAK,EAAE,YAAA;AACL;;AAEE;QACF,MAAM,aAAc,GAAE,mBAAmB,CAAA;QAEzC,MAAM,EAAE,IAAK,EAAA,GAAI,mBAAmB,CAAC,aAAa,CAAC,CAAA;QAEnD,OAAO,EAAE,IAAG,EAAG,CAAA;KACjB;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"fade-and-slide.vue2.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group class=\"x-fade-and-slide\" :name=\"name\" :tag=\"tag\" :appear=\"appear\">\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useDisableAnimation } from './use-disable-animation'\n\n/**\n * Renders a transition group wrapping the elements passed in the default slot and animating\n * them with a fade and slide animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FadeAndSlide',\n  props: {\n    /**\n     * HTML Element that the transition-group children will be wrapped in.\n     */\n    tag: String,\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    /**\n     * The name of the animation.\n     */\n    const animationName = 'x-fade-and-slide-'\n\n    const { name } = useDisableAnimation(animationName)\n\n    return { name }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-fade-and-slide--move,\n.x-fade-and-slide--enter-active,\n.x-fade-and-slide--leave-active {\n  transition:\n    opacity 0.2s ease-out,\n    transform 0.3s ease-out;\n}\n\n.x-fade-and-slide--enter-from,\n.x-fade-and-slide--leave-to {\n  transform: translate(-20%, 0);\n  opacity: 0;\n}\n\n.x-fade-and-slide--leave-active {\n  position: absolute;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\nUsed as a prop in an animatable component:\n\n```vue\n<AnimatableComponent :animation=\"FadeAndSlide\" />\n```\n\nUsed as a regular component passing a the tag as prop:\n\n```vue\n<FadeAndSlide tag=\"ul\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</FadeAndSlide>\n```\n</docs>\n"],"names":[],"mappings":";;;AAWA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,GAAG,EAAE,MAAM;AACX;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH;;AAEE;QACF,MAAM,aAAY,GAAI,mBAAkB,CAAA;QAExC,MAAM,EAAE,IAAG,KAAM,mBAAmB,CAAC,aAAa,CAAA,CAAA;QAElD,OAAO,EAAE,IAAK,EAAA,CAAA;KACf;AACF,CAAA,CAAA;;;;"}