drip-ui/packages/dialog/index.js

Lightweight Mobile UI Components built on Vue

import Vue from 'vue'
import DirpDialog from './Dialog'
import {
  isServer
} from '../utils'

let instance

const initInstance = () => {
  instance = new(Vue.extend(DirpDialog))({
    el: document.createElement('div')
  })

  document.body.appendChild(instance.$el)
}

const Dialog = (options) => {
  /* istanbul ignore if */
  if (isServer) {
    return
  }

  if (!instance) {
    initInstance()
  }

  return Object.assign(instance, ...options)
}

Dialog.defaultOptions = {
  visible: '',
  title: '',
  content: '',
  showClose: true,
  onHide: function () {
    instance.visible = false
  }
}

Dialog.show = options => Dialog({
  ...Dialog.currentOptions,
  visible: true,
  ...options
})

Dialog.hide = () => {
  if (instance) {
    instance.visible = false
  }
}
Dialog.setDefaultOptions = options => {
  Object.assign(Dialog.currentOptions, options)
}

Dialog.resetDefaultOptions = () => {
  Dialog.currentOptions = { ...Dialog.defaultOptions}
}

Dialog.install = () => {
  Vue.use(DirpDialog)
}

Vue.dialog = Vue.prototype.$dialog = Dialog
Dialog.resetDefaultOptions()

export default Dialog