Carlos Killpack 278f7a25cf 5.2.5 5 months ago
bin add publish script 1 year ago
example support es6 modules 5 months ago
lib update build process to match @citygro/vdata 1 year ago
src support es6 modules 5 months ago
.gitignore initial commit 1 year ago
.gitlab-ci.yml remove yarn install 1 year ago
LICENSE Add license file 1 year ago
README.md support es6 modules 5 months ago
package.json 5.2.5 5 months ago
rollup.conf.cjs.js update build process to match @citygro/vdata 1 year ago
vue-modal.common.js support es6 modules 5 months ago
vue-modal.js support es6 modules 5 months ago
webpack.conf.umd.js update build process to match @citygro/vdata 1 year ago
yarn.lock update build process to match @citygro/vdata 1 year ago

README.md

build status coverage report npm downloads npm version

@citygro/vue-modal

reusable modal component for vue 2; designed to work with bootstrap 3 styles.

see ./example for a working demonstration!

git clone https://gitlab.com/citygro/vue-modal
cd vue-modal
yarn
yarn start

if you're impressed, you'll want to add this to your project immediately:

$ yarn add @citygro/vue-modal

the example project is a good reference.

overview

// App.vue
import Vue from 'vue'
import VueModal from 'vue-modal'

Vue.use(VueModal)

Vue.component('my-component', {
  // ...
  methods: {
    showMyModal () {
      const {result, mounted} = this.$openModal({
        content: (resolve) => require(['Modal'], resolve),
        props: { /* props go here */ },
        title: 'My Title'
      })
      result.then(() => {
        /* close */
      }).catch(() => {
        /* dismiss */
      })
      mounted.then((modal) => {
        /* do what you want */
      })
    }
  }
  // ...
})

new Vue({
  render (createElement) {
    return createElement('div', null, [
      createElement(MyComponent),
      createElement('modal-view')
    ])
  }
}).$mount('#root')

api

$openModal(options: Object): {result: Promise, mounted: Promise}

options

  • buttons: Object[]|boolean an array of objects describing buttons: js [ {label: 'Ok', key: 'ok', class: 'btn-primary', focus: true}, {label: 'Cancel', key: 'cancel', class: 'btn-default', reject: true} ]
  • content takes one of
    • a callback function that returns a VueComponent, this can be used to load modals asynchronously
    • a VueComponent instance
    • a String
  • props: Object props to be passed to the VueComponent after it is loaded, default: {}
  • size: String|String[]|void (optional) specify modal size (one of: 'sm', 'lg', or 'full'); specify multiple options as an array
  • static: boolean force interation to dismiss
  • title: String|null modal title, default: null
  • class: Object class names to bind to .modal (see vue guide)

content is wrapped in div.modal-body if either title or buttons is defined, if neither are present content is injected directly into div.modal-dialog.

return {result: Promise<void, Error>, mounted: Promise<VueComponent, Error>

  • mounted: Promise<VueComponent, Error> a promise for the modal component
  • result: Promise<void, Error> a Promise that is resolved (close) or rejected (dismiss) depending on user input

content.$parent.close(options: {key: String})

note that $parent refers to the modal itself, not the component calling $openModal()

close this modal (and resolve result).

content.$parent.dismiss(options: {key: String})

note that $parent refers to the modal itself, not the component calling $openModal()

dismiss this modal (and reject result)

content.$modalOptions: Object

optional static modal options which are merged with any options passed to $openModal(). options passed at the call site will take precedence.

custom styles

modal components have bootstrap modal classes

issues?

if you get stuck, you can catch us on #citygro:matrix.org

found a bug? we'd be happy to fix it!.