@enso-ui/transitions 2.0.5 → 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.5",
+  "version": "2.0.9",
   "description": "A collection of Vue transitions",
   "main": "index.js",
   "scripts": {
@@ -31,7 +31,7 @@
     "autoprefixer": "^9.6.1",
     "babel-eslint": "^10.0.1",
     "cross-env": "^6.0.0",
-    "eslint": "^8.0.0",
+    "eslint": "^7.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-vue": "^8.0.3"
   }

package/src/transitions/Fade.vue

@@ -1,14 +1,19 @@
 <template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated fadeIn"
-        leave-active-class="animated fadeOut">
-        <slot/>
-    </transition>
+  <mirror v-bind="$attrs"
+    effect="fade">
+    <template #default>
+      <slot/>
+    </template>
+  </mirror>
 </template>
 
 <script>
+import Mirror from './Mirror.vue';
+
 export default {
-    name: 'Fade',
-};
+  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,14 +1,18 @@
 <template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated zoomIn"
-        leave-active-class="animated zoomOut">
-        <slot/>
-    </transition>
+    <mirror v-bind="$attrs"
+        effect="zoom">
+        <template #default>
+            <slot/>
+        </template>
+    </mirror>
 </template>
 
 <script>
+import Mirror from './Mirror.vue';
+
 export default {
     name: 'Zoom',
+
+    components: { Mirror },
 };
 </script>

package/src/transitions/FadeDown.vue

@@ -1,14 +0,0 @@
-<template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated fadeInDown"
-        leave-active-class="animated fadeOutDown">
-        <slot/>
-    </transition>
-</template>
-
-<script>
-export default {
-    name: 'FadeDown',
-};
-</script>

package/src/transitions/FadeLeft.vue

@@ -1,14 +0,0 @@
-<template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated fadeInLeft"
-        leave-active-class="animated fadeOutLeft">
-        <slot/>
-    </transition>
-</template>
-
-<script>
-export default {
-    name: 'FadeLeft',
-};
-</script>

package/src/transitions/FadeRight.vue

@@ -1,14 +0,0 @@
-<template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated fadeInRight"
-        leave-active-class="animated fadeOutRight">
-        <slot/>
-    </transition>
-</template>
-
-<script>
-export default {
-    name: 'FadeRight',
-};
-</script>

package/src/transitions/FadeUp.vue

@@ -1,14 +0,0 @@
-<template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated fadeInUp"
-        leave-active-class="animated fadeOutUp">
-        <slot/>
-    </transition>
-</template>
-
-<script>
-export default {
-    name: 'FadeUp',
-};
-</script>

package/src/transitions/HorizontalFade.vue

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

package/src/transitions/HorizontalSlide.vue

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

package/src/transitions/SlideDown.vue

@@ -1,14 +0,0 @@
-<template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated slideInDown"
-        leave-active-class="animated slideOutUp">
-        <slot/>
-    </transition>
-</template>
-
-<script>
-export default {
-    name: 'SlideDown',
-};
-</script>

package/src/transitions/SlideLeft.vue

@@ -1,14 +0,0 @@
-<template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated slideInLeft"
-        leave-active-class="animated slideOutLeft">
-        <slot/>
-    </transition>
-</template>
-
-<script>
-export default {
-    name: 'SlideLeft',
-};
-</script>

package/src/transitions/SlideRight.vue

@@ -1,14 +0,0 @@
-<template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated slideInRight"
-        leave-active-class="animated slideOutRight">
-        <slot/>
-    </transition>
-</template>
-
-<script>
-export default {
-    name: 'SlideRight',
-};
-</script>

package/src/transitions/SlideUp.vue

@@ -1,14 +0,0 @@
-<template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated slideInUp"
-        leave-active-class="animated slideOutDown">
-        <slot/>
-    </transition>
-</template>
-
-<script>
-export default {
-    name: 'SlideUp',
-};
-</script>