<template>
  <router-view v-slot="{ Component }">
    <transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
      <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
      <component :is="Component" @inputFocus="handleFocus" @input-blur="handleBlur"/>
    </transition>
  </router-view>
</template>

<script>
  export default {
    name: "app",
    data() {
      return {
        lastFocusedInputGroupName: "",
        onFocusCallback: null
      }
    },
    methods: {
      handleFocus(e) {
        console.log("app focus: ", e)
      },
      handleBlur(e) {
        console.log("app blur: ", e)
      },
    }
  }
</script>

<style lang="scss">
  @import "./node_modules/bootstrap/scss/bootstrap";
  @import "@/styles/common-styles.scss";
  @import "@/styles/common-typography-styles.scss";
  @import "@/styles/common-error-styles.scss";
  @import "@/styles/common-animations.scss";
</style>
