import Vue from 'vue';
import VueTransitions from '@morev/vue-transitions';
import '@morev/vue-transitions/dist/index.css';

Vue.use(VueTransitions);

import Vue from 'vue';
import { plugin as VueTransitions } from '@morev/vue-transitions';
import '@morev/vue-transitions/styles';

// Register globally only `<transition-fade>` and `<transition-slide>`,
// also rename `<transition-slide>` to `<slide-transition>`
Vue.use(VueTransitions({
  components: {
    TransitionFade: 'TransitionFade',
    TransitionSlide: 'slide-transition',
  }
}));

import Vue from 'vue';
import { plugin as VueTransitions } from '@morev/vue-transitions';
import '@morev/vue-transitions/styles';

Vue.use(VueTransitions({
  // Default duration for all transitions now is `200`
  defaultProps: {
    duration: 200,
  },
  // But for `<transition-expand>` default duration is `500`
  componentDefaultProps: {
    TransitionExpand: {
      duration: 500,
    }
  }
}));

<template>
  <transition-fade>
    <div v-if="isVisible">...</div>
  </transition-fade>
</template>

<script>
  import { TransitionFade } from '@morev/vue-transitions';

  export default {
    components: { TransitionFade },
  };
</script>

<template>
  <!--
    Element will fade in and fade out to top.
    Initial transform is `transform: translate(0, -16px)`
  -->
  <transition-slide :offset="[0, -16]"></transition-slide>

  <!--
    Element will fade in and fade out to bottom left side.
    Initial transform is `transform: translate(-16px, 16px)`
  -->
  <transition-slide :offset="[-16, 16]"></transition-slide>

  <!--
    Element will fade in and fade out to right,
    and the offset will be relative to the element width itself.
    Initial transform is `transform: translate(100%, 0)`
  -->
  <transition-slide :offset="['100%', 0]"></transition-slide>

  <!--
    Element will fade in from top and fade out to bottom,
    and the offset will be relative to the element height itself.

    Transform before element appears: `transform: translate(0, -100%)`
    Transform when element disappears: `transform: translate(0, 100%)`
  -->
  <transition-slide
    :offset="{
      enter: [0, '-100%'],
      leave: [0, '100%']
    }"
  ></transition-slide>
</template>

<template>
  <div class="block">
    <!--
      In this case, given the CSS styles,
      initial transform will be calculated to `translate(-50%, -16px)`
    -->
    <transition-slide :offset="[0, -16]">
      <div class="block__dropdown" v-if="isVisible">
        ...
      </div>
    </transition-slide>
  </div>
</template>

<style>
  .block {
    position: relative;
  }

  .block__dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
</style>

<template>
  <!--
    This element appears in `x` axis and disappears in `y`
  -->
  <transition-scale :axis="{ enter: 'x', leave: 'y' }"></transition-scale>

  <!--
    This element behaves like the `transition-expand`,
    but touches only `transform` property
  -->
  <transition-scale transform-origin="50% 0%"></transition-scale>

  <!--
    This element scales just a little when fading in/out.
  -->
  <transition-scale :scale=".8"></transition-scale>

</template>

export type TransitionGroup = boolean; // Default: false

<template>
  <div>
    <!--
      To animate a list of items, use `group` prop.
      ⚠️ Don't forget you should pass the `:key` to each item in this case.
    -->
    <transition-fade group>
      <div v-for="item in items" :key="item.id">...</div>
    </transition-fade>
  </div>
</template>

export type TransitionTag = string; // Default: 'span'

<template>
  <div>
    <!--
      Passing the tag renders transition component with it.
      It's suitable, for example, for rendering semantic lists:
    -->
    <transition-fade group tag="ul">
      <li v-for="item in items" :key="item.id">...</li>
    </transition-fade>

    <!-- ✨ Rendered HTML: -->
    <ul>
      <li>...</li>
      <li>...</li>
    </ul>
  </div>
</template>

export type TransitionAppear = boolean; // Default: undefined

<template>
  <div>
    <!--
      This element appears when mounted if `isVisible` is `true` by default.
    -->
    <transition-fade appear>
      <div v-if="isVisible">...</div>
    </transition-fade>
  </div>
</template>

export type TransitionMode = 'in-out' | 'out-in' | undefined; // Default: undefined

<template>
  <div>
    <!--
      Current element transitions out first, then when complete,
      the new element transitions in.
    -->
    <transition-slide mode="out-in">
      <component :is="currentComponent">...</component>
    </transition-slide>
  </div>
</template>

// Default: 300
export type TransitionDuration = number | { enter: number, leave: number }

<template>
  <div>
    <!--
      If single value provided, the passed amount of milliseconds
      applied to enter and leave animations both.
      This element will appear and disappear within 500ms:
    -->
    <transition-fade :duration="500">
      <div v-if="isVisible">...</div>
    </transition-fade>

    <!--
      If an object given, it SHOULD have `enter` and `leave` keys.
      This element appears in 200ms and disappears within 500ms:
    -->
    <transition-fade :duration="{ enter: 200, leave: 500 }">
      <div v-if="isVisible">...</div>
    </transition-fade>
  </div>
</template>