Resizable Draggable Modal & Dialog Component – vue-js-modal

Install & Download:

# Yarn
$ yarn add vue-js-modal
# NPM
$ npm i vue-js-modal

Description:

A lightweight, responsive, customizable, resizable, and draggable modal window & dialog box component for Vue.

How to use it:

1. Import and register the modal component.

import VModal from 'vue-js-modal'

Vue.use(VModal)

2. Create a static modal.

<template>
  <modal name="my--modal">
    This Is A Modal Window
  </modal>
</template>

export default {
  name: 'MyComponent',
  methods: {
    show () {
        this.$modal.show('my-modal');
    },
    hide () {
        this.$modal.hide('my-modal');
    }
  },
  mount () {
    this.show()
  }
}

3. Create a custom dialog box.

// register
Vue.use(VModal, { 
  dialog: true 
})

// in your app
<v-dialog />

this.$modal.show('dialog', {
  title: 'A Confirm Dialog',
  text: 'Confirm Dialog Message',
  buttons: [
    {
      title: 'Cancel',
      handler: () => {
        this.$modal.hide('dialog')
      }
    },
    {
      title: 'Confirm',
      handler: () => {
        alert('Like action')
      }
    },
    {
      title: 'Repost',
      handler: () => {
        alert('Repost action')
      }
    }
  ]
})

4. Possible props for the modal component.

name: {
  required: true,
  type: String
},
resizable: {
  type: Boolean,
  default: false
},
resizeEdges: {
  default: () => ['r', 'br', 'b', 'bl', 'l', 'tl', 't', 'tr'],
  validator: val =>
    ['r', 'br', 'b', 'bl', 'l', 'tl', 't', 'tr'].filter(
      value => val.indexOf(value) !== -1
    ).length === val.length,
  type: Array
},
centerResize: {
  type: Boolean,
  default: true
},
resizeIndicator: {
  type: Boolean,
  default: true
},
adaptive: {
  type: Boolean,
  default: false
},
draggable: {
  type: [Boolean, String],
  default: false
},
scrollable: {
  type: Boolean,
  default: false
},
focusTrap: {
  type: Boolean,
  default: false
},
reset: {
  type: Boolean,
  default: false
},
overlayTransition: {
  type: String,
  default: 'vm-transition--overlay'
},
transition: {
  type: String,
  default: 'vm-transition--modal'
},
clickToClose: {
  type: Boolean,
  default: true
},
classes: {
  type: [String, Array],
  default: () => []
},
styles: {
  type: [String, Array, Object]
},
minWidth: {
  type: Number,
  default: 0,
  validator(value) {
    return value >= 0
  }
},
minHeight: {
  type: Number,
  default: 0,
  validator(value) {
    return value >= 0
  }
},
maxWidth: {
  type: Number,
  default: Number.MAX_SAFE_INTEGER
},
maxHeight: {
  type: Number,
  default: Number.MAX_SAFE_INTEGER
},
width: {
  type: [Number, String],
  default: 600,
  validator(value) {
    return value === 'auto' || validateNumber(value)
  }
},
height: {
  type: [Number, String],
  default: 300,
  validator(value) {
    return value === 'auto' || validateNumber(value)
  }
},
shiftX: {
  type: Number,
  default: 0.5,
  validator(value) {
    return value >= 0 && value <= 1
  }
},
shiftY: {
  type: Number,
  default: 0.5,
  validator(value) {
    return value >= 0 && value <= 1
  }
}

5. Possible props for the dialog component.

width: {
  type: [Number, String],
  default: 400
},
clickToClose: {
  type: Boolean,
  default: true
},
transition: {
  type: String
}

6. Event handlers.

• @before-open
• @opened
• @before-close
• @closed

Preview: