// src/main.js
import VueRouterTransition from '@duannx/vue-router-transition'
Vue.use(VueRouterTransition)
// Optional. Import css file if you want to use built in css
import '@duannx/vue-router-transition/dist/style.css'

// routes.js
export default [
    {
        path: '/',
        name: 'home',
        component: Home,
        meta: { // the plugin will use meta.transitons of your route
            transitions: {
                priority: 3, // smaller number - higher priority
                enter: 'fade', // transition when navigate to this route
                leave: 'fade' // transition when navigate from this route
            }
        }
    },
    {
        path: '/collection/:id',
        component: Collection,
        name: 'collection',
        meta: {
            transitions: {
                priority: 2,
                enter: {
                    name: '', // optional. It will render to {{name}}-enter-to {{name}}-enter-from {{name}}-leave-to {{name}}-leave-from
                    enterClass: 'animate__animated animate__rollIn', // integrate with animate.css.
                    leaveClass: ''
                },
                leave: {
                    enterClass: '',
                    leaveClass: 'animate__animated animate__rollOut'
                }
            }
        }
    },
    {
        path: '/product/:id',
        component: Product,
        name: 'product',
        meta: {
            transitions: {
                priority: 1,
                enter: 'slide-right',
                leave: 'slide-right-reverse',
                selfEnter: 'fade', // use selfEnter to define transition when redirect to the same route which has the same name or transitionID.
                transitionID: 'product-route' // id that define which routes is the same and use selfEnter transition
            }
        }
    }
]

props: {
    /**
     * Default class added when the transition active for all type of transitions
     */
    defaultClassTransition: {
        type: String,
        required: false,
        default: "transition-active"
    },
  // Class add to body when enter transition active
    bodyClassEnterTransitonActive: {
      type: String,
      required: false,
      default: "body-enter-transition-active",
    },
    // Class add to body when leave transition active
    // It should be different with bodyClassEnterTransitonActive to avoid conflict and accident remove other class
    bodyClassLeaveTransitonActive: {
      type: String,
      required: false,
      default: "body-leave-transition-active",
    },
    // The key to distinct your router. The trasition will only trigger when the key is changed
    routeKey: {
      type: String,
      requried: true,
    },
    // On SSR, you might wait for the router resolved before mounting the app
    // it leads to the first afterEach hook will not be fired in the page load
    // so you should turn this option to false
    ignoreFirstLoad: {
      type: Boolean,
      default: true,
    }  
}