@enso-ui/transitions 2.0.7 → 2.0.11

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.7",
+  "version": "2.0.11",
   "description": "A collection of Vue transitions",
   "main": "index.js",
   "scripts": {

package/src/transitions/Fade.vue

@@ -1,33 +1,19 @@
 <template>
-  <transition v-bind="$attrs"
-    appear
-    mode="in-out"
-    enter-active-class="animated fadeIn"
-    leave-active-class="animated fadeOut">
-    <div v-if="visible">
+  <mirror
+    effect="fade">
+    <template #default>
       <slot/>
-    </div>
-  </transition>
+    </template>
+  </mirror>
 </template>
 
 <script>
-export default {
-  name: 'Fade',
-
-  data: () => ({
-    visible: false,
-  }),
-
-  mounted() {
-    console.log('hit mounted')
-    setTimeout(() => this.visible = true, 1000)
+import Mirror from './Mirror.vue';
 
-  },
-
-  unmounted() {
-    this.visible = false;
+export default {
+    name: 'Fade',
 
-    console.log('hit unmounted')
-  }
+    components: { Mirror },
 };
+
 </script>

package/src/transitions/Mirror.vue

@@ -0,0 +1,72 @@
+<template>
+    <transition
+        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,
+        },
+    },
+
+    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}`;
+        },
+    },
+
+    mounted() {
+        if (['back', 'slide'].includes(this.effect)
+            && !this.leave && !this.enter) {
+            throw Error('Missing direction for the given effect');
+        }
+    },
+};
+</script>

package/src/transitions/Slide.vue

@@ -0,0 +1,19 @@
+<template>
+    <mirror
+        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,28 +1,18 @@
 <template>
-  <transition v-bind="$attrs"
-    appear
-    enter-active-class="animated zoomIn"
-    leave-active-class="animated zoomOut">
-    <div v-if="visible">
-      <slot/>
-    </div>
-  </transition>
+    <mirror
+        effect="zoom">
+        <template #default>
+            <slot/>
+        </template>
+    </mirror>
 </template>
 
 <script>
-export default {
-  name: 'Zoom',
-
-  data: () => ({
-    visible: false,
-  }),
+import Mirror from './Mirror.vue';
 
-  mounted() {
-    this.visible = true;
-  },
+export default {
+    name: 'Zoom',
 
-  unmounted() {
-    this.visible = false;
-  }
+    components: { Mirror },
 };
 </script>

package/src/transitions/FadeDown.vue

@@ -1,28 +0,0 @@
-<template>
-    <transition v-bind="$attrs"
-      appear
-      enter-active-class="animated fadeInDown"
-      leave-active-class="animated fadeOutDown">
-      <div v-if="visible">
-        <slot/>
-      </div>
-    </transition>
-</template>
-
-<script>
-export default {
-    name: 'FadeDown',
-
-    data: () => ({
-      visible: false,
-    }),
-
-    mounted() {
-      this.visible = true;
-    },
-
-    unmounted() {
-      this.visible = false;
-    }
-};
-</script>

package/src/transitions/FadeLeft.vue

@@ -1,28 +0,0 @@
-<template>
-    <transition v-bind="$attrs"
-      appear
-      enter-active-class="animated fadeInLeft"
-      leave-active-class="animated fadeOutLeft">
-      <div v-if="visible">
-        <slot/>
-      </div>
-    </transition>
-</template>
-
-<script>
-export default {
-  name: 'FadeLeft',
-
-  data: () => ({
-    visible: false,
-  }),
-
-  mounted() {
-    this.visible = true;
-  },
-
-  unmounted() {
-    this.visible = false;
-  }
-};
-</script>

package/src/transitions/FadeRight.vue

@@ -1,28 +0,0 @@
-<template>
-  <transition v-bind="$attrs"
-    appear
-    enter-active-class="animated fadeInRight"
-    leave-active-class="animated fadeOutRight">
-    <div v-if="visible">
-      <slot/>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'FadeRight',
-
-  data: () => ({
-    visible: false,
-  }),
-
-  mounted() {
-    this.visible = true;
-  },
-
-  unmounted() {
-    this.visible = false;
-  }
-};
-</script>

package/src/transitions/FadeUp.vue

@@ -1,28 +0,0 @@
-<template>
-  <transition v-bind="$attrs"
-    appear
-    enter-active-class="animated fadeInUp"
-    leave-active-class="animated fadeOutUp">
-    <div v-if="visible">
-      <slot/>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'FadeUp',
-
-  data: () => ({
-    visible: false,
-  }),
-
-  mounted() {
-    this.visible = true;
-  },
-
-  unmounted() {
-    this.visible = false;
-  }
-};
-</script>

package/src/transitions/HorizontalFade.vue

@@ -1,35 +0,0 @@
-<template>
-  <transition v-bind="$attrs"
-    appear
-    :enter-active-class="`animated ${rtl ? 'fadeInRight' : 'fadeInLeft'}`"
-    :leave-active-class="`animated ${rtl ? 'fadeOutRight' : 'fadeOutLeft'}`">
-    <div v-if="visible">
-      <slot/>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'HorizontalFade',
-
-  props: {
-      rtl: {
-          type: Boolean,
-          default: false,
-      },
-  },
-
-  data: () => ({
-    visible: false,
-  }),
-
-  mounted() {
-    this.visible = true;
-  },
-
-  unmounted() {
-    this.visible = false;
-  }
-};
-</script>

package/src/transitions/HorizontalSlide.vue

@@ -1,35 +0,0 @@
-<template>
-  <transition v-bind="$attrs"
-    appear
-    :enter-active-class="`animated ${rtl ? 'slideInRight' : 'slideInLeft'}`"
-    :leave-active-class="`animated ${rtl ? 'slideOutRight' : 'slideOutLeft'}`">
-    <div v-if="visible">
-      <slot/>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'HorizontalSlide',
-
-  props: {
-      rtl: {
-          type: Boolean,
-          default: false,
-      },
-  },
-
-  data: () => ({
-    visible: false,
-  }),
-
-  mounted() {
-    this.visible = true;
-  },
-
-  unmounted() {
-    this.visible = false;
-  }
-};
-</script>

package/src/transitions/SlideDown.vue

@@ -1,28 +0,0 @@
-<template>
-    <transition v-bind="$attrs"
-      appear
-      enter-active-class="animated slideInDown"
-      leave-active-class="animated slideOutUp">
-      <div v-if="visible">
-        <slot/>
-      </div>
-    </transition>
-</template>
-
-<script>
-export default {
-  name: 'SlideDown',
-
-  data: () => ({
-    visible: false,
-  }),
-
-  mounted() {
-    this.visible = true;
-  },
-
-  unmounted() {
-    this.visible = false;
-  }
-};
-</script>

package/src/transitions/SlideLeft.vue

@@ -1,32 +0,0 @@
-<template>
-  <transition v-bind="$attrs"
-    appear
-    enter-active-class="animated slideInLeft"
-    leave-active-class="animated slideOutLeft">
-    <div v-if="visible">
-      <slot/>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'SlideLeft',
-
-  data: () => ({
-    visible: false,
-  }),
-
-  mounted() {
-    this.visible = true;
-
-    console.log('hit mounted SlideLeft')
-  },
-
-  unmounted() {
-    this.visible = false;
-
-    console.log('hit unmounted SlideLeft')
-  }
-};
-</script>

package/src/transitions/SlideRight.vue

@@ -1,28 +0,0 @@
-<template>
-  <transition v-bind="$attrs"
-    appear
-    enter-active-class="animated slideInRight"
-    leave-active-class="animated slideOutRight">
-    <div v-if="visible">
-      <slot/>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'SlideRight',
-
-  data: () => ({
-    visible: false,
-  }),
-
-  mounted() {
-    this.visible = true;
-  },
-
-  unmounted() {
-    this.visible = false;
-  }
-};
-</script>

package/src/transitions/SlideUp.vue

@@ -1,28 +0,0 @@
-<template>
-  <transition v-bind="$attrs"
-    appear
-    enter-active-class="animated slideInUp"
-    leave-active-class="animated slideOutDown">
-    <div v-if="visible">
-      <slot/>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'SlideUp',
-
-  data: () => ({
-    visible: false,
-  }),
-
-  mounted() {
-    this.visible = true;
-  },
-
-  unmounted() {
-    this.visible = false;
-  }
-};
-</script>