@enso-ui/transitions 2.0.8 → 2.0.9

package/index.js

@@ -1,17 +1,5 @@
 import Fade from './src/transitions/Fade.vue';
-import FadeLeft from './src/transitions/FadeLeft.vue';
-import FadeRight from './src/transitions/FadeRight.vue';
-import FadeUp from './src/transitions/FadeUp.vue';
-import FadeDown from './src/transitions/FadeDown.vue';
-import SlideLeft from './src/transitions/SlideLeft.vue';
-import SlideRight from './src/transitions/SlideRight.vue';
-import SlideUp from './src/transitions/SlideUp.vue';
-import SlideDown from './src/transitions/SlideDown.vue';
 import Zoom from './src/transitions/Zoom.vue';
-import HorizontalSlide from './src/transitions/HorizontalSlide.vue';
-import HorizontalFade from './src/transitions/HorizontalFade.vue';
+import Slide from './src/transitions/Slide.vue';
 
-export {
-    Fade, SlideLeft, SlideRight, SlideUp, SlideDown, FadeLeft,
-    FadeRight, FadeUp, FadeDown, Zoom, HorizontalSlide, HorizontalFade,
-};
+export { Fade, Zoom, Slide };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/transitions",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "A collection of Vue transitions",
   "main": "index.js",
   "scripts": {

package/src/transitions/Fade.vue

@@ -1,17 +1,19 @@
 <template>
-  <transition v-bind="$attrs"
-    appear
-    mode="in-out"
-    enter-active-class="animate__animated animate__fadeIn"
-    leave-active-class="animate__animated animate__fadeOut">
+  <mirror v-bind="$attrs"
+    effect="fade">
+    <template #default>
       <slot/>
-  </transition>
+    </template>
+  </mirror>
 </template>
 
 <script>
-import 'animate.css';
+import Mirror from './Mirror.vue';
 
 export default {
   name: 'Fade',
-};
+
+  components: { Mirror },
+}
+
 </script>

package/src/transitions/Mirror.vue

@@ -0,0 +1,72 @@
+<template>
+    <transition v-bind="$attrs"
+        appear
+        :enter-active-class="enterClass"
+        :leave-active-class="leaveClass">
+        <slot/>
+    </transition>
+</template>
+
+<script>
+import 'animate.css';
+
+const directions = {
+    'up': 'Up',
+    'down': 'Down',
+    'left': 'Left',
+    'right': 'Right',
+};
+
+const effects = ['back', 'bounce', 'fade', 'slide', 'zoom'];
+
+const validateDirection = direction => Object.keys(directions)
+    .includes(direction.toLowerCase());
+
+const validateEffect = effect => effects.includes(effect);
+
+export default {
+    name: 'Mirror',
+
+    props: {
+        enter: {
+            type: String,
+            default: null,
+            validator: validateDirection,
+        },
+        leave: {
+            type: String,
+            default: null,
+            validator: validateDirection,
+        },
+        effect: {
+            type: String,
+            required: true,
+            validator: validateEffect,
+        }
+    },
+
+    mounted() {
+        if (['back','slide'].includes(this.effect)
+            && !this.leave && !this.enter) {
+            throw 'Missing direction for the given effect';
+        }
+    },
+
+    computed: {
+        enterClass() {
+            const direction = this.enter
+                ? directions[this.enter.toLowerCase()]
+                : '';
+
+            return `animate__animated animate__${this.effect}In${direction}`;
+        },
+        leaveClass() {
+            const direction = this.leave
+                ? directions[this.leave.toLowerCase()]
+                : '';
+
+            return `animate__animated animate__${this.effect}Out${direction}`;
+        }
+    }
+};
+</script>

package/src/transitions/Slide.vue

@@ -0,0 +1,19 @@
+<template>
+    <mirror v-bind="$attrs"
+        effect="slide">
+        <template #default>
+            <slot/>
+        </template>
+    </mirror>
+</template>
+
+<script>
+import Mirror from './Mirror.vue';
+
+export default {
+    name: 'Slide',
+
+    components: { Mirror },
+}
+
+</script>

package/src/transitions/Zoom.vue

@@ -1,16 +1,18 @@
 <template>
-  <transition v-bind="$attrs"
-    appear
-    enter-active-class="animate__animated animate__zoomIn"
-    leave-active-class="animate__animated animate__zoomOut">
-      <slot/>
-  </transition>
+    <mirror v-bind="$attrs"
+        effect="zoom">
+        <template #default>
+            <slot/>
+        </template>
+    </mirror>
 </template>
 
 <script>
-import 'animate.css';
+import Mirror from './Mirror.vue';
 
 export default {
-  name: 'Zoom',
+    name: 'Zoom',
+
+    components: { Mirror },
 };
 </script>

package/src/transitions/FadeDown.vue

@@ -1,16 +0,0 @@
-<template>
-    <transition v-bind="$attrs"
-      appear
-      enter-active-class="animate__animated animate__fadeInDown"
-      leave-active-class="animate__animated animate__fadeOutDown">
-        <slot/>
-    </transition>
-</template>
-
-<script>
-import 'animate.css';
-
-export default {
-    name: 'FadeDown',
-};
-</script>

package/src/transitions/FadeLeft.vue

@@ -1,16 +0,0 @@
-<template>
-    <transition v-bind="$attrs"
-      appear
-      enter-active-class="animate__animated animate__fadeInLeft"
-      leave-active-class="animate__animated animate__fadeOutLeft">
-        <slot/>
-    </transition>
-</template>
-
-<script>
-import 'animate.css';
-
-export default {
-  name: 'FadeLeft',
-};
-</script>

package/src/transitions/FadeRight.vue

@@ -1,16 +0,0 @@
-<template>
-  <transition v-bind="$attrs"
-    appear
-    enter-active-class="animate__animated animate__fadeInRight"
-    leave-active-class="animate__animated animate__fadeOutRight">
-      <slot/>
-  </transition>
-</template>
-
-<script>
-import 'animate.css';
-
-export default {
-  name: 'FadeRight',
-};
-</script>

package/src/transitions/FadeUp.vue

@@ -1,16 +0,0 @@
-<template>
-  <transition v-bind="$attrs"
-    appear
-    enter-active-class="animate__animated animate__fadeInUp"
-    leave-active-class="animate__animated animate__fadeOutUp">
-      <slot/>
-  </transition>
-</template>
-
-<script>
-import 'animate.css';
-
-export default {
-  name: 'FadeUp',
-};
-</script>

package/src/transitions/HorizontalFade.vue

@@ -1,23 +0,0 @@
-<template>
-  <transition v-bind="$attrs"
-    appear
-    :enter-active-class="`animate__animated animate__${rtl ? 'fadeInRight' : 'fadeInLeft'}`"
-    :leave-active-class="`animate__animated animate__${rtl ? 'fadeOutRight' : 'fadeOutLeft'}`">
-      <slot/>
-  </transition>
-</template>
-
-<script>
-import 'animate.css';
-
-export default {
-  name: 'HorizontalFade',
-
-  props: {
-      rtl: {
-          type: Boolean,
-          default: false,
-      },
-  },
-};
-</script>

package/src/transitions/HorizontalSlide.vue

@@ -1,23 +0,0 @@
-<template>
-  <transition v-bind="$attrs"
-    appear
-    :enter-active-class="`animate__animated animate__${rtl ? 'slideInRight' : 'slideInLeft'}`"
-    :leave-active-class="`animate__animated animate__${rtl ? 'slideOutRight' : 'slideOutLeft'}`">
-      <slot/>
-  </transition>
-</template>
-
-<script>
-import 'animate.css';
-
-export default {
-  name: 'HorizontalSlide',
-
-  props: {
-      rtl: {
-          type: Boolean,
-          default: false,
-      },
-  },
-};
-</script>

package/src/transitions/SlideDown.vue

@@ -1,16 +0,0 @@
-<template>
-    <transition v-bind="$attrs"
-      appear
-      enter-active-class="animate__animated animate__slideInDown"
-      leave-active-class="animate__animated animate__slideOutUp">
-        <slot/>
-    </transition>
-</template>
-
-<script>
-import 'animate.css';
-
-export default {
-  name: 'SlideDown',
-};
-</script>

package/src/transitions/SlideLeft.vue

@@ -1,16 +0,0 @@
-<template>
-  <transition v-bind="$attrs"
-    appear
-    enter-active-class="animate__animated animate__slideInLeft"
-    leave-active-class="animate__animated animate__slideOutLeft">
-      <slot/>
-  </transition>
-</template>
-
-<script>
-import 'animate.css';
-
-export default {
-  name: 'SlideLeft',
-};
-</script>

package/src/transitions/SlideRight.vue

@@ -1,16 +0,0 @@
-<template>
-  <transition v-bind="$attrs"
-    appear
-    enter-active-class="animate__animated animate__slideInRight"
-    leave-active-class="animate__animated animate__slideOutRight">
-      <slot/>
-  </transition>
-</template>
-
-<script>
-import 'animate.css';
-
-export default {
-  name: 'SlideRight',
-};
-</script>

package/src/transitions/SlideUp.vue

@@ -1,16 +0,0 @@
-<template>
-  <transition v-bind="$attrs"
-    appear
-    enter-active-class="animate__animated animate__slideInUp"
-    leave-active-class="animate__animated animate__slideOutDown">
-      <slot/>
-  </transition>
-</template>
-
-<script>
-import 'animate.css';
-
-export default {
-  name: 'SlideUp',
-};
-</script>