<template>
  <transition name="lnzi-fade">
    <div
        v-show="visible"
        :class="createClass()"
        :className="className"
        :style="style"
        @click="$emit('click', $event)"
    >
    </div>
  </transition>
</template>

<script>
import create from '../utils/create'

export default create({
  name: 'modal',
  props: {
    visible: Boolean,
    zIndex: Number,
    className: String,
    maskStyle: Object
  },
  computed: {
    style () {
      return {
        zIndex: this.zIndex,
        ...this.maskStyle
      }
    }
  }
})
</script>
