Modal.vue

<template>
  <div :class="[$style.Host, ...hostModifiers_]">
    <div :class="$style.Modal">
      <ModalTitle :title="title" @back="$emit('back')" />
      <slot></slot>
    </div>
  </div>
</template>

<script>
import ModalTitle from '@/src/extension/components/ModalTitle';

export default {
  components: { ModalTitle },

  props: {
    title: {
      type: String,
      default: null,
    },

    open: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    hostModifiers_() {
      return this.open ? [this.$style.Host_Open] : [];
    },
  },
};
</script>

<style module lang="sass">
@import '@/src/core/sass/layout';

.Host {
  @include layout-fill;

  overflow: hidden;
  pointer-events: none;
  transition: all 300ms;
  z-index: 1;
}

.Host_Open {
  background: rgba(#000, 0.1);
  pointer-events: all;

  .Modal {
    opacity: 1;
    transform: translateX(0);
  }
}

.Modal {
  @include layout-fill;

  background: #FFF;
  height: 100%;
  opacity: 0;
  overflow: scroll;
  transform: translateX(100%);
  transition: all 300ms;
}
</style>