@poetadigital/modal NPM

Poeta Digital Modal

Poeta Digital Modal

Install

$ npm install @poetadigital/modal --save-dev

Parameters

/**
 * Show or close the modal (isVisible: true, false).
 * @type {String}
 */
isVisible: {
  type: String,
  default: null
},

/**
 * The modal size
 * That means you can change the size if you want.
 * @type {String}
 */
size: {
  type: [String, Number],
  default: 340
}

Class

<style scoped>
  /**
  * The class modal size
  * That means you can change the style if you want.
  * @type {String}
  */
  .poeta-modal-size {
    width: 470px;
  }
</style>

Usage

In main.js of Vue projects

import PModal from @poetadigital/modal;
import App from './App.vue';

Vue.use(PModal);

new Vue({
  render: (h) => h(App),
}).$mount('#app');

In App.vue, you can use PModal component

<template>
  <div>
    <transition name="fade">
      <div class="modal-backdrop" v-if="isVisible" @click.self="onToggle">
        <div class="modal poeta-modal-size" :style="modelSize">
          <header class="modal-header">
            <slot name="header">
              <h2 class="modal-title">Confirm Popup</h2>
              <button @click.stop="onToggle" class="modal-button-close">
                <svg
                  width="14"
                  height="14"
                  viewBox="0 0 14 14"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
                    fill="#999999"
                  />
                </svg>
              </button>
            </slot>
          </header>

          <section class="modal-body">
            <slot name="body">
              <p class="modal-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nisl,
                rutrum magnis id turpis. Odio euismod malesuada nulla volutpat
                auctor quam duis. Tempus, cras sed volutpat est.
              </p>
            </slot>
          </section>

          <footer class="modal-footer">
            <slot name="footer">
              <button @click.stop="onToggle" class="modal-button-yes">Yes</button>
              <button @click.stop="onToggle" class="modal-button-no">No</button>
            </slot>
          </footer>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    isVisible: {
      type: Boolean,
      default: false,
    },
    size: {
      type: [String, Number],
      default: 340
    }
  },
  name: "PModal",
  computed: {
    modelSize() {
      return "max-width:" + this.size + "px";
    }
  },
  methods: {
    onToggle() {
      this.$emit("hidenModal");
    },
  },
};
</script>

<style scoped>

.overlay {
  background-color: rgba(0, 0, 0, 0.8);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 999999;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: #ffffff;
  box-shadow: 2px 2px 20px 1px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  margin: 15px;
}

.modal-header,
.modal-footer {
  display: flex;
  align-items: center;
}

.modal-header {
  padding: 20px;
  box-shadow: inset 0px -1px 0px #d9d9d9;
  justify-content: space-between;
}

.modal-text {
  text-align: justify;
}

.modal-body {
  padding: 20px;
}

.modal-title {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  margin: 0;
}

.modal-footer {
  padding: 20px;
}

.modal-body {
  position: relative;
  padding: 20px 20px 10px 20px;
}

.modal-button-yes {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #0085ff;
  padding: 10px 20px;
  border-radius: 3px;
  background-color: #0085ff;
  font-size: 14px;
  color: #FFFFFF;
  font-weight: 700;
  margin-right: 20px;
}

.modal-button-no {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #0085ff;
  padding: 10px 20px;
  border-radius: 3px;
  background-color: #fff;
  font-size: 14px;
  color: #0085ff;
  font-weight: 700;
}

.modal-button-close {
  background-color: transparent;
  border: 0;
}
</style>