vuedl/dist/index.umd.js

Vue dialog helper

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
  (global = global || self, factory(global.vuedl = {}, global.Vue));
}(this, (function (exports, Vue) { 'use strict';

  Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;

  function _typeof(obj) {
    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
      _typeof = function (obj) {
        return typeof obj;
      };
    } else {
      _typeof = function (obj) {
        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
      };
    }

    return _typeof(obj);
  }

  function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
    try {
      var info = gen[key](arg);
      var value = info.value;
    } catch (error) {
      reject(error);
      return;
    }

    if (info.done) {
      resolve(value);
    } else {
      Promise.resolve(value).then(_next, _throw);
    }
  }

  function _asyncToGenerator(fn) {
    return function () {
      var self = this,
          args = arguments;
      return new Promise(function (resolve, reject) {
        var gen = fn.apply(self, args);

        function _next(value) {
          asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
        }

        function _throw(err) {
          asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
        }

        _next(undefined);
      });
    };
  }

  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }

  function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
  }

  function _defineProperty(obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }

    return obj;
  }

  function ownKeys(object, enumerableOnly) {
    var keys = Object.keys(object);

    if (Object.getOwnPropertySymbols) {
      var symbols = Object.getOwnPropertySymbols(object);
      if (enumerableOnly) symbols = symbols.filter(function (sym) {
        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
      });
      keys.push.apply(keys, symbols);
    }

    return keys;
  }

  function _objectSpread2(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i] != null ? arguments[i] : {};

      if (i % 2) {
        ownKeys(Object(source), true).forEach(function (key) {
          _defineProperty(target, key, source[key]);
        });
      } else if (Object.getOwnPropertyDescriptors) {
        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
      } else {
        ownKeys(Object(source)).forEach(function (key) {
          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
        });
      }
    }

    return target;
  }

  var Recordable = {
    computed: {
      $parameters: function $parameters() {
        return this.$attrs || this.$options.propsData || this.$props || {};
      },
      isNewRecord: function isNewRecord() {
        // console.log(this.$attrs, this.$props)
        // const data = this.$attrs || this.$options.propsData || this.$props
        return !this.$parameters || !this.$parameters[this.$options.primaryKey];
      }
    }
  };

  var Activable = {
    name: 'Activable',
    data: function data() {
      return {
        isActive: false
      };
    },
    watch: {
      isActive: function isActive(val) {
        if (this._dialogInstance) {
          if (this._dialogInstance.isActive !== undefined) {
            this._dialogInstance.isActive = val;
          }
        } else {
          if (this.$parent && this.$parent.isActive !== undefined) {
            this.$parent.isActive = val;
          }
        }
      }
    },
    methods: {
      close: function close() {
        this.isActive = false;
      }
    }
  };

  var Layoutable = {
    name: 'Layoutable',
    mixins: [Activable],
    inheritAttrs: false,
    props: {
      width: {
        type: [String, Number],
        "default": function _default() {
          return 450;
        }
      },
      persistent: Boolean
    },
    data: function data() {
      return {
        loading: false
      };
    },
    computed: {
      isLayout: function isLayout() {
        return true;
      },
      getWidth: function getWidth() {
        return typeof this.width === 'string' ? this.width : this.width + 'px';
      }
    },
    watch: {
      isActive: function isActive(val) {
        if (!val) {
          this._destroy();
        }
      }
    },
    mounted: function mounted() {
      this.isActive = true;
    },
    methods: {
      _destroy: function _destroy() {
        this.$destroy();
      },
      dismiss: function dismiss() {
        if (!this.persistent && !this.loading) {
          this.isActive = false;
        }
      },
      close: function close() {
        this.isActive = false;
      }
    },
    beforeDestroy: function beforeDestroy() {
      if (typeof this.$el.remove === 'function') {
        this.$el.remove();
      } else if (this.$el.parentNode) {
        this.$el.parentNode.removeChild(this.$el);
      }
    }
  };

  //
  //
  //
  //
  //
  //
  var script = {};

  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
      if (typeof shadowMode !== 'boolean') {
          createInjectorSSR = createInjector;
          createInjector = shadowMode;
          shadowMode = false;
      }
      // Vue.extend constructor export interop.
      const options = typeof script === 'function' ? script.options : script;
      // render functions
      if (template && template.render) {
          options.render = template.render;
          options.staticRenderFns = template.staticRenderFns;
          options._compiled = true;
          // functional template
          if (isFunctionalTemplate) {
              options.functional = true;
          }
      }
      // scopedId
      if (scopeId) {
          options._scopeId = scopeId;
      }
      let hook;
      if (moduleIdentifier) {
          // server build
          hook = function (context) {
              // 2.3 injection
              context =
                  context || // cached call
                      (this.$vnode && this.$vnode.ssrContext) || // stateful
                      (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
              // 2.2 with runInNewContext: true
              if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
                  context = __VUE_SSR_CONTEXT__;
              }
              // inject component styles
              if (style) {
                  style.call(this, createInjectorSSR(context));
              }
              // register component module identifier for async chunk inference
              if (context && context._registeredComponents) {
                  context._registeredComponents.add(moduleIdentifier);
              }
          };
          // used by ssr in case component is cached and beforeCreate
          // never gets called
          options._ssrRegister = hook;
      }
      else if (style) {
          hook = shadowMode
              ? function (context) {
                  style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
              }
              : function (context) {
                  style.call(this, createInjector(context));
              };
      }
      if (hook) {
          if (options.functional) {
              // register for functional component in vue file
              const originalRender = options.render;
              options.render = function renderWithStyleInjection(h, context) {
                  hook.call(context);
                  return originalRender(h, context);
              };
          }
          else {
              // inject component registration as beforeCreate hook
              const existing = options.beforeCreate;
              options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
          }
      }
      return script;
  }

  /* script */
  var __vue_script__ = script;
  /* template */

  var __vue_render__ = function __vue_render__() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "dialog-layout"
    }, [_c('dialog-child', _vm._b({
      ref: "dialog"
    }, 'dialog-child', _vm.$options.propsData, false))], 1);
  };

  var __vue_staticRenderFns__ = [];
  /* style */

  var __vue_inject_styles__ = undefined;
  /* scoped */

  var __vue_scope_id__ = undefined;
  /* module identifier */

  var __vue_module_identifier__ = undefined;
  /* functional template */

  var __vue_is_functional_template__ = false;
  /* style inject */

  /* style inject SSR */

  /* style inject shadow dom */

  var __vue_component__ = normalizeComponent({
    render: __vue_render__,
    staticRenderFns: __vue_staticRenderFns__
  }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);

  /*
   * vue-asyncable
   *
   * (c) Savaryn Yaroslav <yariksav@gmail.com>
   *
   * Some functions was imported from nuxt.js/lib/app/utils.js
   * For the full copyright and license information, please view the LICENSE
   * file that was distributed with this source code.
  */

  var isFunction = function (fn) { return typeof fn === 'function'; };

  var isNil = function (s) { return s === null || s === undefined; };

  var isPromise = function (promise) {
    return promise && (promise instanceof Promise || typeof promise.then === 'function')
  };

  /*
   * vue-asyncable
   *
   * (c) Savaryn Yaroslav <yariksav@gmail.com>
   *
   * Some functions was imported from nuxt.js/lib/app/utils.js
   * For the full copyright and license information, please view the LICENSE
   * file that was distributed with this source code.
  */

  function promisify (fn, context) {
    var promise;
    if (isFunction(fn)) {
      promise = fn.call(this, context);
    } else {
      promise = fn;
    }

    if (!isPromise(promise)) {
      if (typeof promise === 'object') {
        return checkObjectForPromises.call(this, promise, context)
      } else {
        promise = Promise.resolve(promise);
      }
    }

    var self = this;
    return promise.then(function (data) {
      return checkObjectForPromises.call(self, data)
    })
  }

  function checkObjectForPromises (obj, context) {
    var this$1 = this;

    var promises = [];
    var self = this;
    var data = {};
    if (typeof obj !== 'object') {
      return obj
    }
    var loop = function ( key ) {
      var something = obj[key];
      if (isFunction(something)) {
        something = something.call(this$1, context);
      }
      if (isPromise(something)) {
        something = something.then(function (res) {
          if (isNil(res)) {
            return
          }
          if (key.startsWith('...')) {
            data = Object.assign({}, data, res);
          } else {
            data[key] = res;
          }
          return res
        });
        if (context && isFunction(context.asyncDataError)) {
          something = something.catch(function (error) {
            return context.asyncDataError.call(self, error, { key: key, obj: obj })
          });
        }
        promises.push(something);
      } else {
        data[key] = something;
      }
    };

    for (var key in obj) loop( key );
    return Promise.all(promises).then(function () {
      return Promise.resolve(data)
    })
  }

  /*
   * vue-asyncable
   *
   * (c) Savaryn Yaroslav <yariksav@gmail.com>
   *
   * Some functions was imported from nuxt.js/lib/app/utils.js
   * For the full copyright and license information, please view the LICENSE
   * file that was distributed with this source code.
  */

  function applyComponentAsyncData (Component, asyncData) {
    // const componentData = Component.options.data || noopData
    // Prevent calling this method for each request on SSR context
    if (!asyncData && Component.options.__hasAsyncData) { // && ?
      return
    }
    var ComponentData = Component.options._originDataFn || Component.options.data || function () { return {} };
    Component.options._originDataFn = ComponentData;

    Component.options.data = function () {
      var data = ComponentData.call(this);
      // if (this.$ssrContext) {
      //   asyncData = this.$ssrContext.asyncData[component.cid]
      // }
      return Object.assign({}, data, asyncData)
    };
    Component.options.__hasAsyncData = true;

    if (Component._Ctor && Component._Ctor.options) {
      Component._Ctor.options.data = Component.options.data;
    }
  }

  var hasAsyncPreload = function (options) {
    return Boolean(!options.__hasAsyncData && (options.asyncData || options.fetch))
  };

  var ensureComponentAsyncData = function (Component, context) {
    var promises = [];

    if (Component.options.asyncData && !Component.options.__hasAsyncData) {
      var promise = promisify(Component.options.asyncData, context);
      promise.then(function (asyncDataResult) {
        // ssrContext.asyncData[Component.cid] = asyncDataResult
        applyComponentAsyncData(Component, asyncDataResult);
        return asyncDataResult
      });
      promises.push(promise);
    }

    // Call fetch(context)
    if (Component.options.fetch && !Component.options.__hasAsyncData) {
      promises.push(Component.options.fetch(context));
    }
    Component.options.__hasAsyncData = true;
    return Promise.all(promises)
  };

  /*
   * vuedl
   *
   * (c) Savaryn Yaroslav <yariksav@gmail.com>
   *
   * Some functions was imported from nuxt.js/lib/app/utils.js
   * For the full copyright and license information, please view the LICENSE
   * file that was distributed with this source code.
  */
  function destroyVueElement(vm) {
    if (vm && !vm._isDestroyed && typeof vm.$destroy === 'function') {
      vm.$destroy();
    }
  }
  function findContainer(container) {
    var found;

    if (typeof container === 'string') {
      found = document.querySelector(container);
    } else {
      found = container;
    }

    if (!found) {
      found = document.body;
    }

    return found;
  } // todo
  // export function middlewareSeries (promises, appContext) {
  //   if (!promises.length || appContext._redirected || appContext._errored) {
  //     return Promise.resolve()
  //   }
  //   return promisify(promises[0], appContext)
  //     .then(() => {
  //       return middlewareSeries(promises.slice(1), appContext)
  //     })
  // }

  var seed = 1;

  var Dialog =
  /*#__PURE__*/
  function () {
    function Dialog(component) {
      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
          layout = _ref.layout,
          container = _ref.container;

      _classCallCheck(this, Dialog);

      if (!component) {
        throw Error('Component was not set');
      }

      this._layout = layout || {
        component: __vue_component__,
        options: {}
      };
      this._component = component;
      this._vm = null;
      this._vmDialog = null;
      this._options = {};
      this.id = ++seed;
      this._resolvers = [];
      this.container = findContainer(container);
    }

    _createClass(Dialog, [{
      key: "show",
      value: function () {
        var _show = _asyncToGenerator(
        /*#__PURE__*/
        regeneratorRuntime.mark(function _callee() {
          var params,
              options,
              Component,
              LayoutCtor,
              propsData,
              layout,
              dialog,
              container,
              _args = arguments;
          return regeneratorRuntime.wrap(function _callee$(_context) {
            while (1) {
              switch (_context.prev = _context.next) {
                case 0:
                  params = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
                  options = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};

                  if (!Vue.prototype.$isServer) {
                    _context.next = 4;
                    break;
                  }

                  return _context.abrupt("return");

                case 4:
                  // create dialog
                  Component = this._component;

                  if (_typeof(Component) === 'object' && !Component.options) {
                    Component = Vue.extend(_objectSpread2({}, this._component));
                  } // add primary key mixin


                  if (Component.options.primaryKey) {
                    Component = Component.extend({
                      mixins: [Recordable]
                    });
                  }

                  if (!this.hasAsyncPreload) {
                    _context.next = 10;
                    break;
                  }

                  _context.next = 10;
                  return ensureComponentAsyncData(Component, _objectSpread2({}, this.context, {
                    params: params
                  }));

                case 10:
                  // create layout
                  LayoutCtor = Vue.extend({
                    mixins: [Layoutable],
                    components: {
                      'dialog-child': Component
                    }
                  });
                  LayoutCtor = LayoutCtor.extend(this._layout.component);
                  Component.options.inheritAttrs = false;
                  propsData = _objectSpread2({}, this._layout.options, {}, params, {}, options && options.propsData);
                  layout = new LayoutCtor(_objectSpread2({}, this.context, {}, options, {
                    propsData: propsData
                  }));
                  layout.$mount();
                  dialog = layout.$refs.dialog; // if (!dialog) {
                  //   throw Error('You heave to provide dialog-child component in layout: <dialog-child v-bind="$options.propsData" ref="dialog" />')
                  // }

                  layout.$on('hook:destroyed', this._onDestroyed.bind(this));
                  layout.$on('submit', this.onReturn.bind(this));
                  dialog && dialog.$on('submit', this.onReturn.bind(this));
                  this._vm = layout;
                  this._vm._dialogInstance = dialog;
                  this._vmDialog = dialog;
                  container = params.container ? findContainer(params.container) : this.container;
                  container.appendChild(layout.$el);
                  return _context.abrupt("return", this);

                case 26:
                case "end":
                  return _context.stop();
              }
            }
          }, _callee, this);
        }));

        function show() {
          return _show.apply(this, arguments);
        }

        return show;
      }()
    }, {
      key: "wait",
      value: function wait() {
        var _this = this;

        return new Promise(function (resolve) {
          _this._resolvers.push(resolve);
        });
      }
    }, {
      key: "_onDestroyed",
      value: function _onDestroyed() {
        this.remove();
      }
    }, {
      key: "remove",
      value: function remove() {
        this.onDestroyed && this.onDestroyed(this);

        this._processResultPromises();

        destroyVueElement(this._vm);
        destroyVueElement(this._vmDialog);
        this._vm = null;
        this._vmDialog = null;
      }
    }, {
      key: "_processResultPromises",
      value: function _processResultPromises(result) {
        if (!this._resolvers.length) {
          return;
        }

        this._resolvers.forEach(function (resolver) {
          return resolver(result);
        });

        this._resolvers = [];
      }
    }, {
      key: "onReturn",
      value: function onReturn(result) {
        this._processResultPromises(result);

        this.close();
      }
    }, {
      key: "close",
      value: function close() {
        this._vm && this._vm.close();
      }
    }, {
      key: "showed",
      get: function get() {
        return !!this._vm && !this._vm._isDestroyed;
      }
    }, {
      key: "element",
      get: function get() {
        return this._vm && this._vm.$el;
      }
    }, {
      key: "hasAsyncPreload",
      get: function get() {
        return this._component && hasAsyncPreload(this._component.options || this._component);
      }
    }, {
      key: "vm",
      get: function get() {
        return this._vm;
      }
    }, {
      key: "vmd",
      get: function get() {
        return this._vmDialog;
      }
    }]);

    return Dialog;
  }();

  var Overlay =
  /*#__PURE__*/
  function () {
    function Overlay(component) {
      _classCallCheck(this, Overlay);

      this._component = component;
      this._vm = null;
    }

    _createClass(Overlay, [{
      key: "show",
      value: function show() {
        if (!this._vm) {
          var Ctor = Vue.extend(this._component);
          this._vm = new Ctor();

          this._vm.$mount();

          document.body.appendChild(this._vm.$el);
        }

        this._vm.visible = true;
      }
    }, {
      key: "hide",
      value: function hide() {
        this._vm.visible = false;
      }
    }, {
      key: "destroy",
      value: function destroy() {
        if (this._vm) {
          this._vm.$el.parentNode.removeChild(this._vm.$el);

          this._vm.$destroy();

          this._vm = null;
        }
      }
    }]);

    return Overlay;
  }();

  var DialogManager =
  /*#__PURE__*/
  function () {
    function DialogManager() {
      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
          context = _ref.context,
          container = _ref.container;

      _classCallCheck(this, DialogManager);

      this._context = context || {};
      Dialog.prototype.context = context || {};
      this._components = {};
      this._layouts = {};
      this._overlays = {};
      this._container = container;
      this._emitter = new Vue({});
      this._instances = [];
    }

    _createClass(DialogManager, [{
      key: "layout",
      value: function layout(name, component) {
        var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
        this._layouts[name] = {
          component: component,
          options: options
        };
      }
    }, {
      key: "getLayout",
      value: function getLayout(layout) {
        if (typeof layout === 'function') {
          var options = layout.call(this._context);
          layout = this._layouts[options.name || 'default'];
          return _objectSpread2({}, layout, {}, {
            options: options
          });
        }

        if (_typeof(layout) === 'object' && typeof layout.render === 'function') {
          return {
            component: layout
          };
        }

        if (Array.isArray(layout)) {
          var nameTmp = layout[0];
          var optionsTmp = layout[1] || {};
          var instance = _typeof(nameTmp) === 'object' && typeof nameTmp.render === 'function' ? {
            component: nameTmp
          } : this._layouts[nameTmp];
          return instance && {
            component: instance.component,
            options: _objectSpread2({}, instance.options, {}, optionsTmp)
          };
        }

        return this._layouts[layout];
      }
    }, {
      key: "overlay",
      value: function overlay(name, component) {
        if (component === undefined) {
          if (this._overlays[name]) {
            return this._overlays[name];
          } else {
            throw new Error("Overlay \"".concat(name, " not found\n          Please register it by calling dialog.overlay('").concat(name, "', component)"));
          }
        }

        this._overlays[name] = new Overlay(component);
      }
    }, {
      key: "getComponent",
      value: function getComponent(name) {
        if (!this._components[name]) {
          throw new Error("Component \"".concat(name, "\" was not found.\n        Please register it by calling dialog.register('").concat(name, "', component)"));
        }

        return this._components[name];
      }
    }, {
      key: "component",
      value: function component(name, _component) {
        var _this = this;

        var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

        if (_component === undefined) {
          return this._components[name];
        }

        this._components[name] = {
          component: _component,
          options: options
        };
        Object.defineProperty(this, name, {
          get: function get() {
            return _this.createFunctionWrapper(name);
          },
          configurable: true
        });
      }
    }, {
      key: "getComponentProperty",
      value: function getComponentProperty(component, name) {
        return component.options ? component.options[name] : component[name];
      }
    }, {
      key: "create",
      value: function create(component) {
        if (!component) {
          throw new Error('Component is incorrect');
        }

        var layout = this.getLayout(this.getComponentProperty(component, 'layout') || 'default');
        var dlg = new Dialog(component, {
          layout: layout,
          context: this._context,
          container: this._container
        });

        this._emitter.$emit('created', {
          dialog: dlg
        });

        return dlg;
      }
    }, {
      key: "show",
      value: function () {
        var _show = _asyncToGenerator(
        /*#__PURE__*/
        regeneratorRuntime.mark(function _callee(component) {
          var params,
              dlg,
              overlayName,
              overlay,
              _args = arguments;
          return regeneratorRuntime.wrap(function _callee$(_context) {
            while (1) {
              switch (_context.prev = _context.next) {
                case 0:
                  params = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
                  dlg = this.create(component);
                  overlayName = dlg.hasAsyncPreload ? this.getComponentProperty(component, 'overlay') || 'default' : false;
                  overlay = overlayName && this._overlays[overlayName] && this.overlay(overlayName);
                  overlay && overlay.show();
                  _context.prev = 5;
                  _context.next = 8;
                  return dlg.show(params);

                case 8:
                  this._emitter.$emit('shown', {
                    dialog: dlg
                  });

                  overlay && overlay.hide();
                  dlg.onDestroyed = this.onDialogDestroyed.bind(this);
                  return _context.abrupt("return", params.waitForResult ? dlg.wait() : dlg);

                case 14:
                  _context.prev = 14;
                  _context.t0 = _context["catch"](5);

                  this._emitter.$emit('error', {
                    error: _context.t0,
                    dialog: dlg
                  });

                  overlay && overlay.hide();
                  throw _context.t0;

                case 19:
                case "end":
                  return _context.stop();
              }
            }
          }, _callee, this, [[5, 14]]);
        }));

        function show(_x) {
          return _show.apply(this, arguments);
        }

        return show;
      }()
    }, {
      key: "createFunctionWrapper",
      value: function createFunctionWrapper(name) {
        var _this2 = this;

        var cmp = this.getComponent(name);
        return function (options) {
          return _this2.show(cmp.component, _objectSpread2({}, cmp.options, {}, options));
        };
      }
    }, {
      key: "showAndWait",
      value: function () {
        var _showAndWait = _asyncToGenerator(
        /*#__PURE__*/
        regeneratorRuntime.mark(function _callee2(component, props) {
          var dlg;
          return regeneratorRuntime.wrap(function _callee2$(_context2) {
            while (1) {
              switch (_context2.prev = _context2.next) {
                case 0:
                  _context2.next = 2;
                  return this.show(component, props);

                case 2:
                  dlg = _context2.sent;
                  return _context2.abrupt("return", dlg.wait());

                case 4:
                case "end":
                  return _context2.stop();
              }
            }
          }, _callee2, this);
        }));

        function showAndWait(_x2, _x3) {
          return _showAndWait.apply(this, arguments);
        }

        return showAndWait;
      }()
    }, {
      key: "on",
      value: function on(event, callback) {
        this._emitter.$on(event, callback);
      }
    }, {
      key: "off",
      value: function off(event, callback) {
        this._emitter.$off(event, callback);
      }
    }, {
      key: "once",
      value: function once(event, callback) {
        this._emitter.$once(event, callback);
      }
    }, {
      key: "onDialogDestroyed",
      value: function onDialogDestroyed(dialog) {
        this._emitter.$emit('destroyed', {
          dialog: dialog
        });
      }
    }, {
      key: "context",
      get: function get() {
        return this._context;
      }
    }]);

    return DialogManager;
  }();

  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  var script$1 = {
    name: 'VDialogOverlay',
    props: {
      zIndex: {
        type: Number,
        "default": function _default() {
          return 1250;
        }
      },
      visible: {
        type: Boolean,
        "default": function _default() {
          return false;
        }
      }
    }
  };

  /* script */
  var __vue_script__$1 = script$1;
  /* template */

  var __vue_render__$1 = function __vue_render__() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('transition', {
      attrs: {
        "name": "opacity"
      }
    }, [_vm.visible ? _c('div', {
      staticClass: "dialog-overlay-loading",
      style: {
        zIndex: _vm.zIndex
      }
    }, [_vm._v("\n    Loading…\n  ")]) : _vm._e()]);
  };

  var __vue_staticRenderFns__$1 = [];
  /* style */

  var __vue_inject_styles__$1 = undefined;
  /* scoped */

  var __vue_scope_id__$1 = undefined;
  /* module identifier */

  var __vue_module_identifier__$1 = undefined;
  /* functional template */

  var __vue_is_functional_template__$1 = false;
  /* style inject */

  /* style inject SSR */

  /* style inject shadow dom */

  var __vue_component__$1 = normalizeComponent({
    render: __vue_render__$1,
    staticRenderFns: __vue_staticRenderFns__$1
  }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);

  /* @vue/component */
  var Returnable = {
    name: 'Returnable',
    props: {
      returnValue: null
    },
    data: function data() {
      return {
        originalValue: this.returnValue,
        returnResovers: []
      };
    },
    methods: {
      "return": function _return(value) {
        this.originalValue = value;
        this.$root.$emit('submit', this.originalValue);
        this.$emit('submit', this.originalValue);
      }
    }
  };

  var actionable = {
    name: 'Actionable',
    mixins: [Returnable],
    data: function data() {
      return {
        loadingAction: null
      };
    },
    props: {
      actions: {
        type: [Array, Object, Function],
        "default": function _default() {
          return [];
        }
      },
      handle: Function,
      // todo: remove this parameter in next version
      handler: Function,
      params: Object
    },
    computed: {
      actionlist: function actionlist() {
        var actions = [];
        var acts = typeof this.actions === 'function' ? this.actions(this) : this.actions || [];

        for (var key in acts) {
          // eslint-disable-line
          var action = acts[key];

          if (['string', 'boolean'].includes(_typeof(action))) {
            action = {
              text: action
            };
          }

          if (!action.key) {
            action.key = isNaN(key) ? key : action.text || key;
          }

          if (['true', 'false'].indexOf(action.key) >= 0) {
            action.key = JSON.parse(action.key);
          }

          if (!this.isActionVisible(action)) {
            continue;
          }

          if (typeof action.icon === 'string') {
            action.icon = {
              text: action.icon
            };
          }

          actions.push(action);
        }

        return actions;
      }
    },
    created: function created() {
      if (this.handle) {
        console.warn('DEPRECATED: "handle" prop will be deprecated, please use "handler" instead');
      }
    },
    methods: {
      trigger: function trigger(name) {
        var action = this.actionlist.find(function (action) {
          return action.key === name;
        });

        if (action && !this.isActionDisabled(action) && this.isActionVisible(action)) {
          this.onActionClick(action);
        }
      },
      setLoadingToInstance: function setLoadingToInstance(vm, value) {
        if (vm && vm.loading !== undefined) {
          vm.loading = value;
        }
      },
      setLoadingState: function setLoadingState(value) {
        this.$emit('loading', value);
        !value && (this.loadingAction = null);
        this.setLoadingToInstance(this.$root, value);
        this.setLoadingToInstance(this.$root._dialogInstance, value);
      },
      get: function get(param, def) {
        if (param === undefined) {
          return def;
        }

        if (typeof param === 'function') {
          return param(this.params);
        }

        return param;
      },
      isActionDisabled: function isActionDisabled(action) {
        return this.get(action.disabled, false);
      },
      isActionVisible: function isActionVisible(action) {
        return this.get(action.visible, true);
      },
      isActionInLoading: function isActionInLoading(action) {
        return this.loadingAction === action.key || this.get(action.loading);
      },
      onActionClick: function () {
        var _onActionClick = _asyncToGenerator(
        /*#__PURE__*/
        regeneratorRuntime.mark(function _callee(action) {
          var closable, handler, ret;
          return regeneratorRuntime.wrap(function _callee$(_context) {
            while (1) {
              switch (_context.prev = _context.next) {
                case 0:
                  closable = action.closable === undefined || action.closable === true;
                  handler = action.handle || action.handler || this.handle || this.handler;

                  if (!(typeof handler === 'function')) {
                    _context.next = 20;
                    break;
                  }

                  this.loadingAction = action.key;
                  this.setLoadingState(true);
                  _context.prev = 5;
                  _context.next = 8;
                  return handler(this.params, action);

                case 8:
                  ret = _context.sent;
                  this.setLoadingState(false);

                  if (ret !== false && closable) {
                    this["return"](ret || action.key);
                  }

                  _context.next = 18;
                  break;

                case 13:
                  _context.prev = 13;
                  _context.t0 = _context["catch"](5);
                  this.setLoadingState(false);
                  console.error('error', _context.t0); // TODO

                  throw _context.t0;

                case 18:
                  _context.next = 21;
                  break;

                case 20:
                  closable && this["return"](action.key);

                case 21:
                case "end":
                  return _context.stop();
              }
            }
          }, _callee, this, [[5, 13]]);
        }));

        function onActionClick(_x) {
          return _onActionClick.apply(this, arguments);
        }

        return onActionClick;
      }()
    }
  };

  var confirmable = {
    name: 'Confirmable',
    props: {
      type: {
        type: String
      },
      text: {
        type: [String, Function],
        reqiured: true
      },
      title: {
        type: String
      },
      actions: {
        type: [Array, Object, Function]
      }
    }
  };

  var notifications = [];
  var gap = 10;

  var insertNotification = function insertNotification(vm) {
    var position = vm.position;
    var verticalOffset = gap;
    notifications.filter(function (item) {
      return item.position === position;
    }).forEach(function (item) {
      verticalOffset += item.$el.offsetHeight + gap;
    });
    notifications.push(vm);
    vm.verticalOffset = verticalOffset;
  };

  var deleteNotification = function deleteNotification(vm) {
    var index = notifications.findIndex(function (instance) {
      return instance === vm;
    });

    if (index < 0) {
      return;
    }

    notifications.splice(index, 1);
    var len = notifications.length;
    var position = vm.position;
    if (!len) { return; }
    var verticalOffset = gap;
    notifications.filter(function (item) {
      return item.position === position;
    }).forEach(function (item) {
      item.verticalOffset = verticalOffset;
      verticalOffset += item.$el.offsetHeight + gap;
    });
  };

  var notifiable = {
    props: {
      verticalOffset: Number,
      showClose: {
        type: Boolean,
        "default": function _default() {
          return true;
        }
      },
      position: {
        type: String,
        "default": function _default() {
          return 'top-right';
        }
      },
      timeout: {
        type: [Number, Boolean],
        "default": function _default() {
          return 4500;
        }
      },
      width: {
        type: Number,
        "default": function _default() {
          return 330;
        }
      },
      zIndex: {
        type: Number,
        "default": function _default() {
          return 2000;
        }
      }
    },
    data: function data() {
      return {
        activeTimeout: null
      };
    },
    computed: {
      horizontalClass: function horizontalClass() {
        return this.position.indexOf('right') > -1 ? 'right' : 'left';
      },
      verticalProperty: function verticalProperty() {
        return /^top-/.test(this.position) ? 'top' : 'bottom';
      },
      getStyle: function getStyle() {
        var _ref;

        return _ref = {}, _defineProperty(_ref, this.verticalProperty, "".concat(this.verticalOffset, "px")), _defineProperty(_ref, 'max-width', "".concat(this.width, "px")), _defineProperty(_ref, 'z-index', this.zIndex), _ref;
      }
    },
    methods: {
      _destroy: function _destroy() {
        this.$el.addEventListener('transitionend', this.onTransitionEnd);
      },
      onTransitionEnd: function onTransitionEnd() {
        this.$el.removeEventListener('transitionend', this.onTransitionEnd);
        this.$destroy();
      },
      clearTimer: function clearTimer() {
        clearTimeout(this.activeTimeout);
      },
      startTimer: function startTimer() {
        if (this.timeout > 0) {
          this.activeTimeout = setTimeout(this.close, this.timeout);
        }
      },
      keydown: function keydown(e) {
        if (e.keyCode === 46 || e.keyCode === 8) {
          this.clearTimer(); // delete key
        } else if (e.keyCode === 27) {
          // esc key
          this.close();
        } else {
          this.startTimer(); // any key
        }
      },
      close: function close() {
        this.isActive = false;
      }
    },
    watch: {
      isActive: function isActive(val) {
        if (val) {
          insertNotification(this);
        } else {
          deleteNotification(this);
        }
      }
    },
    mounted: function mounted() {
      this.startTimer();
      document.addEventListener('keydown', this.keydown);
    },
    beforeDestroy: function beforeDestroy() {
      document.removeEventListener('keydown', this.keydown);
    }
  };

  // Import vue components

  function install(Vue) {
    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    if (install.installed) { return; }
    install.installed = true;
    var property = options.property || '$dialog';
    var manager = new DialogManager(options);
    manager.overlay('default', __vue_component__$1);

    if (!Vue.prototype[property]) {
      Object.defineProperty(Vue.prototype, property, {
        get: function get() {
          return manager;
        },
        configurable: true
      });
    } else {
      console.warn("Property ".concat(property, " is already defined in Vue prototype"));
    }
  } // Create module definition for Vue.use()


  var plugin = {
    install: install
  }; // To auto-install when vue is found

  /* global window global */

  var GlobalVue = null;

  if (typeof window !== 'undefined') {
    GlobalVue = window.Vue;
  } else if (typeof global !== 'undefined') {
    GlobalVue = global.Vue;
  }

  if (GlobalVue) {
    GlobalVue.use(plugin);
  } // To allow use as module (npm/webpack/etc.) export components

  exports.Actionable = actionable;
  exports.Activable = Activable;
  exports.Confirmable = confirmable;
  exports.Notifiable = notifiable;
  exports.Recordable = Recordable;
  exports.Returnable = Returnable;
  exports.default = plugin;

  Object.defineProperty(exports, '__esModule', { value: true });

})));