%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /proc/thread-self/root/home/forge/takeaseat.eco-n-tech.co.uk/components/slots/
Upload File :
Create Path :
Current File : //proc/thread-self/root/home/forge/takeaseat.eco-n-tech.co.uk/components/slots/Modal.vue

<template>
  <div v-if="value == true"
    class="modal fixed z-50 bottom-0 left-0 w-full h-screen">
    <div @click="closeModal" 
      :class="isActive == true ? 'opacity-100' : 'opacity-0'"
      class="absolute z-10 top-0 left-0 w-full h-full bg-black bg-opacity-25 cursor-pointer transition duration-100"></div>
    <div 
      :class="isActive == true ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'"
      class="relative z-20 h-full bg-white shadow-lg p-10 pt-16 transition transform duration-100">
      <button @click="closeModal" 
        class="absolute top-6 right-10 uppercase hover:text-blue-light focus:outline-none transition"
        type="button">Close</button>
      <div class="relative h-full overflow-y-auto">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',

  props: {
    value: {
      required: true
    },
    title: {
      type: String,
      required: false
    },
    background: {
      type: String,
      required: false,
      default: 'bg-gray'
    }
  },

  data() {
    return {
      isActive: false
    }
  },

  methods: {
    closeModal: function () {
      this.$emit("input", !this.value);
    }
  },

  watch: {
    value: function () {
      if(this.value == true) {
        setTimeout(() => {
          this.isActive = true;
        }, 100)
      } else {
        setTimeout(() => {
          this.isActive = false;
        }, 100)
      }
    }
  }
}
</script>

<style lang="postcss" scoped>
  .modal {
    padding-top: 25vh;
  }
</style>

Zerion Mini Shell 1.0