@poetadigital/vue-modal

Poeta Digital Modal

Poeta Digital Modal

Install

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

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
}

/**
 * The modal height.
 * @type {String}
 */
height: {
  type: String,
  default: null
},

/**
 * The modal max-height.
 * @type {String}
 */
maxHeight: {
  type: [String, Number],
  default: null
}

/**
 * The modal title.
 * @type {String}
 */
modalTitle: {
  type: String,
  default: 'Confirm Popup'
},

/**
 * The modal z-index
 * @type {Number}
 */
modalZIndex: {
  type: [Number],
  default: 100
}

/**
 * Header text transform
 * @type {String}
 */
headerTextTransform: {
  type: String,
  default: 'capitalize'
},

/**
 * Header text font size
 * @type {String}
 */
headerTextFontSize: {
  type: String,
  default: '18px'
}

/**
 * Header text font weight
 * @type {String}
 */
headerTextWeight: {
  type: [String, Number],
  default: 500
}

/**
 * Header text color
 * @type {String}
 */
headerTextColor: {
  type: String,
  default: '#000000'
}

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/vue-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>
   <PModal 
      :size="400"
      maxHeight="500px"
      :modalZIndex="200"
      textTransform="capitalize"
      :modalTitle="'Confirm Modal'"
      :isVisible="isVisible"
      @hidenModal="isVisible = false"
    />
  </div>
</template>

<script>
import PModal from '../src/Index.vue'

export default {
  name: 'App',
  components: { PModal },
  data() {
    return {
      isVisible: true,
    }
  },
}
</script>

License

MIT © Dang Van Thanh