Added Dialog component, updated examples.

demo/client_side_rendering/src/App.vue

@@ -7,6 +7,8 @@
   <demo-focus-modal/>
   <demo-size-modal/>
 
+  <v-dialog/>
+
   <modal name="example-modal"
          transition="nice-modal-fade"
          :min-width="200"
@@ -15,7 +17,7 @@
          :adaptive="adaptive"
          :resizable="resizable"
          :draggable="draggable">
-    <div style="height: 100%; box-sizing: border-box; padding: 10px; font-size: 13px; overflow: auto">
+    <div class="example-modal-content">
       Appropriately exploit professional infrastructures rather than unique growth strategies. Assertively build leveraged growth strategies vis-a-vis multimedia based vortals. Progressively simplify cross-platform value through interactive imperatives. Objectively
       implement enabled web services after plug-and-play ROI. Distinctively impact inexpensive schemas before installed base imperatives. Holisticly benchmark pandemic process improvements without wireless experiences. Efficiently create worldwide partnerships
       after tactical vortals. Uniquely productize enabled platforms vis-a-vis timely processes. Conveniently unleash standards compliant niches through highly efficient testing procedures. Rapidiously enable pandemic niche markets whereas viral markets.
@@ -24,8 +26,10 @@
   </modal>
 
   <h2>Vue.js Modal
-    <a href="https://github.com/euvl/vue-js-modal/blob/master/README.md" target="readme">Readme</a>
+    <a href="https://github.com/euvl/vue-js-modal/blob/master/README.md"
-    <a href="https://github.com/euvl/vue-js-modal/issues" target="issues">Issues</a>
+       target="readme">Readme</a>
+    <a href="https://github.com/euvl/vue-js-modal/issues"
+       target="issues">Issues</a>
   </h2>
 
   <pre style="line-height: 1.5;">
@@ -56,7 +60,7 @@
             @click="$modal.show('demo-login')">
       Demo: Login
     </button>
-    <button class="blue"
+    <button class="green"
             @click="$modal.show('size-modal')">
       Demo: Width: 60%, Height: auto
     </button>
@@ -64,6 +68,19 @@
             @click="conditionalShow">
       Can <b v-if="!canBeShown">NOT</b> be shown
     </button>
+    <br>
+
+    <button @click="showBasicDialog">
+      Dialog: basic
+    </button>
+
+    <button @click="showTitleDialog">
+      Dialog: title
+    </button>
+
+    <button @click="showButtonsDialog">
+      Dialog: buttons
+    </button>
   </div>
 </div>
 </template>
@@ -117,6 +134,44 @@ export default {
 
     conditionalShow () {
       this.$modal.show('conditional-modal', { show: this.canBeShown })
+    },
+
+
+    showBasicDialog () {
+      this.$modal.show('dialog', {
+        text: 'I am a tiny dialog box.<br/>And I render <b>HTML!</b>'
+      })
+    },
+
+    showTitleDialog () {
+      this.$modal.show('dialog', {
+        title: 'Information',
+        text: 'Check out, I have a title 😎'
+      })
+    },
+
+    showButtonsDialog () {
+      this.$modal.show('dialog', {
+        title: 'Buttons example',
+        text: 'You can add an arbitrary number of buttons.',
+        buttons: [
+          {
+            title: 'C💩NCEL'
+          },
+          {
+            title: 'LIKE',
+            handler: () => {
+              alert('LIKE LIKE LIKE')
+            }
+          },
+          {
+            title: 'REPOST',
+            handler: () => {
+              alert('REPOST REPOST REPOST')
+            }
+          }
+        ]
+      })
     }
   },
 }
@@ -204,6 +259,18 @@ button {
   }
 }
 
+.example-modal-content {
+  height: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  font-size: 13px;
+  overflow: auto;
+}
+
+.vue-dialog button {
+  letter-spacing: 1px;
+}
+
 @media (max-width:600px)  {
   body {
     padding: 10px;

demo/client_side_rendering/src/main.js

@@ -2,7 +2,9 @@ import Vue        from 'vue'
 import App        from './App.vue'
 import VueJsModal from 'plugin'
 
-Vue.use(VueJsModal)
+Vue.use(VueJsModal, {
+  dialog: true
+})
 
 new Vue({
   el: '#app',

dist/index.js

@@ -7,7 +7,7 @@
 		exports["vue-js-modal"] = factory(require("vue"));
 	else
 		root["vue-js-modal"] = factory(root["vue"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_17__) {
+})(this, function(__WEBPACK_EXTERNAL_MODULE_22__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -73,82 +73,11 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "/dist/";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ 	return __webpack_require__(__webpack_require__.s = 3);
 /******/ })
 /************************************************************************/
 /******/ ([
 /* 0 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _Modal = __webpack_require__(5);
-
-var _Modal2 = _interopRequireDefault(_Modal);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var defaultComponentName = 'modal';
-
-var Plugin = {
-  install: function install(Vue) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-    if (this.installed) {
-      return;
-    }
-
-    this.installed = true;
-    this.event = new Vue();
-
-    Vue.prototype.$modal = {
-      show: function show(name, params) {
-        Plugin.event.$emit('toggle', name, true, params);
-      },
-      hide: function hide(name, params) {
-        Plugin.event.$emit('toggle', name, false, params);
-      },
-      toggle: function toggle(name, params) {
-        Plugin.event.$emit('toggle', name, undefined, params);
-      }
-    };
-
-    var componentName = options.componentName || defaultComponentName;
-    Vue.component(componentName, _Modal2.default);
-  }
-};
-
-exports.default = Plugin;
-
-/***/ }),
-/* 1 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var inRange = exports.inRange = function inRange(from, to, value) {
-  if (value < from) {
-    return from;
-  }
-
-  if (value > to) {
-    return to;
-  }
-
-  return value;
-};
-
-/***/ }),
-/* 2 */
 /***/ (function(module, exports) {
 
 /*
@@ -204,7 +133,7 @@ module.exports = function() {
 
 
 /***/ }),
-/* 3 */
+/* 1 */
 /***/ (function(module, exports) {
 
 module.exports = function normalizeComponent (
@@ -257,7 +186,7 @@ module.exports = function normalizeComponent (
 
 
 /***/ }),
-/* 4 */
+/* 2 */
 /***/ (function(module, exports, __webpack_require__) {
 
 /*
@@ -276,7 +205,7 @@ if (typeof DEBUG !== 'undefined' && DEBUG) {
   ) }
 }
 
-var listToStyles = __webpack_require__(16)
+var listToStyles = __webpack_require__(21)
 
 /*
 type StyleObject = {
@@ -477,19 +406,136 @@ function applyToTag (styleElement, obj) {
 }
 
 
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Modal = __webpack_require__(6);
+
+var _Modal2 = _interopRequireDefault(_Modal);
+
+var _Dialog = __webpack_require__(5);
+
+var _Dialog2 = _interopRequireDefault(_Dialog);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var defaultComponentName = 'modal';
+
+var Plugin = {
+  install: function install(Vue) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    if (this.installed) {
+      return;
+    }
+
+    this.installed = true;
+    this.event = new Vue();
+
+    Vue.prototype.$modal = {
+      show: function show(name, params) {
+        Plugin.event.$emit('toggle', name, true, params);
+      },
+      hide: function hide(name, params) {
+        Plugin.event.$emit('toggle', name, false, params);
+      },
+      toggle: function toggle(name, params) {
+        Plugin.event.$emit('toggle', name, undefined, params);
+      }
+    };
+
+    var componentName = options.componentName || defaultComponentName;
+    Vue.component(componentName, _Modal2.default);
+
+    if (options.dialog) {
+      Vue.component('v-dialog', _Dialog2.default);
+    }
+  }
+};
+
+exports.default = Plugin;
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var inRange = exports.inRange = function inRange(from, to, value) {
+  if (value < from) {
+    return from;
+  }
+
+  if (value > to) {
+    return to;
+  }
+
+  return value;
+};
+
 /***/ }),
 /* 5 */
 /***/ (function(module, exports, __webpack_require__) {
 
 
 /* styles */
-__webpack_require__(14)
+__webpack_require__(18)
 
-var Component = __webpack_require__(3)(
+var Component = __webpack_require__(1)(
   /* script */
-  __webpack_require__(6),
+  __webpack_require__(7),
   /* template */
-  __webpack_require__(12),
+  __webpack_require__(15),
+  /* scopeId */
+  null,
+  /* cssModules */
+  null
+)
+Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Dialog.vue"
+if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key !== "__esModule"})) {console.error("named exports are not supported in *.vue files.")}
+if (Component.options.functional) {console.error("[vue-loader] Dialog.vue: functional components are not supported with templates, they should use render functions.")}
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-18cd6db4", Component.options)
+  } else {
+    hotAPI.reload("data-v-18cd6db4", Component.options)
+  }
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+/* styles */
+__webpack_require__(19)
+
+var Component = __webpack_require__(1)(
+  /* script */
+  __webpack_require__(8),
+  /* template */
+  __webpack_require__(16),
   /* scopeId */
   null,
   /* cssModules */
@@ -516,7 +562,55 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 6 */
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = {
+  name: 'Dialog',
+  data: function data() {
+    return {
+      params: {},
+      defaultButtons: [{ title: 'CLOSE' }]
+    };
+  },
+
+  computed: {
+    buttons: function buttons() {
+      return this.params.buttons || this.defaultButtons;
+    },
+    buttonStyle: function buttonStyle() {
+      return {
+        flex: '1 1 ' + 100 / this.buttons.length + '%'
+      };
+    }
+  },
+  methods: {
+    beforeOpened: function beforeOpened(event) {
+      this.params = event.params || {};
+    },
+    beforeClosed: function beforeClosed() {
+      this.params = {};
+    },
+    click: function click(i, event) {
+      var button = this.buttons[i];
+
+      if (typeof button.handler === 'function') {
+        return button.handler(i, event);
+      } else {
+        this.$modal.hide('dialog');
+      }
+    }
+  }
+};
+
+/***/ }),
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -526,21 +620,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _vue = __webpack_require__(17);
+var _vue = __webpack_require__(22);
 
 var _vue2 = _interopRequireDefault(_vue);
 
-var _index = __webpack_require__(0);
+var _index = __webpack_require__(3);
 
 var _index2 = _interopRequireDefault(_index);
 
-var _Resizer = __webpack_require__(11);
+var _Resizer = __webpack_require__(14);
 
 var _Resizer2 = _interopRequireDefault(_Resizer);
 
-var _util = __webpack_require__(1);
+var _util = __webpack_require__(4);
 
-var _parser = __webpack_require__(8);
+var _parser = __webpack_require__(10);
 
 var _parser2 = _interopRequireDefault(_parser);
 
@@ -962,7 +1056,7 @@ exports.default = {
 };
 
 /***/ }),
-/* 7 */
+/* 9 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -972,7 +1066,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _util = __webpack_require__(1);
+var _util = __webpack_require__(4);
 
 exports.default = {
   name: 'VueJsModalResizer',
@@ -1048,7 +1142,7 @@ exports.default = {
 };
 
 /***/ }),
-/* 8 */
+/* 10 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1111,10 +1205,24 @@ var parse = function parse(value) {
 exports.default = parse;
 
 /***/ }),
-/* 9 */
+/* 11 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(2)();
+exports = module.exports = __webpack_require__(0)();
+// imports
+
+
+// module
+exports.push([module.i, "\n.vue-dialog {\n  font-size: 14px;\n}\n.vue-dialog div {\n  box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\n  width: 100%;\n  height: 100%;\n}\n.vue-dialog .dialog-content {\n  flex: 1 0 auto;\n  width: 100%;\n  padding: 15px;\n}\n.vue-dialog .dialog-c-title {\n  font-weight: 600;\n  padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .dialog-buttons {\n  display: flex;\n  flex: 0 1 auto;\n  width: 100%;\n  border-top: 1px solid #eee;\n  font-size: 12px;\n}\n.vue-dialog .dialog-buttons-none {\n  width: 100%;\n  padding-bottom: 15px;\n}\n.vue-dialog button {\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  border: 0;\n  cursor: pointer;\n  box-sizing: border-box;\n  line-height: 44px;\n  height: 44px;\n\n/*  text-transform: uppercase; */\n/*  letter-spacing: 1px; */\n\n  color:inherit;\n  font:inherit;\n}\n.vue-dialog button:hover {\n  background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog button:active {\n  background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog button:not(:first-of-type) {\n  border-left: 1px solid #eee;\n}\n", "", {"version":3,"sources":["/./src/Dialog.vue?46a3352f"],"names":[],"mappings":";AAoEA;EACA,gBAAA;CACA;AAEA;EACA,uBAAA;CACA;AAEA;EACA,YAAA;EACA,aAAA;CACA;AAEA;EACA,eAAA;EACA,YAAA;EACA,cAAA;CACA;AAEA;EACA,iBAAA;EACA,qBAAA;CACA;AAEA;CACA;AAEA;EACA,cAAA;EACA,eAAA;EACA,YAAA;EACA,2BAAA;EACA,gBAAA;CACA;AAEA;EACA,YAAA;EACA,qBAAA;CACA;AAEA;EACA,wBAAA;EACA,WAAA;EACA,UAAA;EACA,UAAA;EACA,gBAAA;EACA,uBAAA;EACA,kBAAA;EACA,aAAA;;AAEA,iCAAA;AACA,2BAAA;;EAEA,cAAA;EACA,aAAA;CACA;AAEA;EACA,gCAAA;CACA;AAEA;EACA,iCAAA;CACA;AAEA;EACA,4BAAA;CACA","file":"Dialog.vue","sourcesContent":["<template>\n  <modal name=\"dialog\"\n         :classes=\"['v--modal', 'vue-dialog', this.params.class]\"\n         :width=\"400\"\n         height=\"auto\"\n         :pivot-y=\"0.3\"\n         :adaptive=\"true\"\n         transition=\"fade\"\n         @before-open=\"beforeOpened\"\n         @before-close=\"beforeClosed\">\n      <div class=\"dialog-content\">\n        <div class=\"dialog-c-title\"\n             v-if=\"params.title\"\n             v-html=\"params.title || ''\"></div>\n        <div class=\"dialog-c-text\"\n             v-html=\"params.text || ''\"></div>\n      </div>\n      <div class=\"dialog-buttons\" v-if=\"buttons\">\n        <button v-for=\"(button, i) in buttons\"\n                :style=\"buttonStyle\"\n                :key=\"i\"\n                v-html=\"button.title\"\n                @click.stop=\"click(i, $event)\">\n          {{button.title}}\n        </button>\n      </div>\n      <div v-else class=\"dialog-buttons-none\"></div>\n  </modal>\n</template>\n<script>\n  export default {\n    name: 'Dialog',\n    data() {\n      return {\n        params: {},\n        defaultButtons: [{ title: 'CLOSE' }]\n      }\n    },\n    computed: {\n      buttons () {\n        return this.params.buttons || this.defaultButtons\n      },\n      buttonStyle () {\n        return {\n          flex: `1 1 ${100 / this.buttons.length}%`\n        }\n      }\n    },\n    methods: {\n      beforeOpened (event) {\n        this.params = event.params || {}\n      },\n      beforeClosed () {\n        this.params = {}\n      },\n      click (i, event) {\n        let button = this.buttons[i]\n\n        if (typeof button.handler === 'function') {\n          return button.handler(i, event)\n        } else {\n          this.$modal.hide('dialog')\n        }\n      }\n    }\n  }\n</script>\n<style>\n  .vue-dialog {\n    font-size: 14px;\n  }\n\n  .vue-dialog div {\n    box-sizing: border-box;\n  }\n\n  .vue-dialog .dialog-flex {\n    width: 100%;\n    height: 100%;\n  }\n\n  .vue-dialog .dialog-content {\n    flex: 1 0 auto;\n    width: 100%;\n    padding: 15px;\n  }\n\n  .vue-dialog .dialog-c-title {\n    font-weight: 600;\n    padding-bottom: 15px;\n  }\n\n  .vue-dialog .dialog-c-text {\n  }\n\n  .vue-dialog .dialog-buttons {\n    display: flex;\n    flex: 0 1 auto;\n    width: 100%;\n    border-top: 1px solid #eee;\n    font-size: 12px;\n  }\n\n  .vue-dialog .dialog-buttons-none {\n    width: 100%;\n    padding-bottom: 15px;\n  }\n\n  .vue-dialog button {\n    background: transparent;\n    padding: 0;\n    margin: 0;\n    border: 0;\n    cursor: pointer;\n    box-sizing: border-box;\n    line-height: 44px;\n    height: 44px;\n\n  /*  text-transform: uppercase; */\n  /*  letter-spacing: 1px; */\n\n    color:inherit;\n    font:inherit;\n  }\n\n  .vue-dialog button:hover {\n    background: rgba(0, 0, 0, 0.01);\n  }\n\n  .vue-dialog button:active {\n    background: rgba(0, 0, 0, 0.025);\n  }\n\n  .vue-dialog button:not(:first-of-type) {\n    border-left: 1px solid #eee;\n  }\n</style>\n"],"sourceRoot":"webpack://"}]);
+
+// exports
+
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(0)();
 // imports
 
 
@@ -1125,10 +1233,10 @@ exports.push([module.i, "\n.v--modal-overlay {\n  position: fixed;\n  box-sizing
 
 
 /***/ }),
-/* 10 */
+/* 13 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(2)();
+exports = module.exports = __webpack_require__(0)();
 // imports
 
 
@@ -1139,18 +1247,18 @@ exports.push([module.i, "\n.vue-modal-resizer {\n  display: block;\n  overflow:
 
 
 /***/ }),
-/* 11 */
+/* 14 */
 /***/ (function(module, exports, __webpack_require__) {
 
 
 /* styles */
-__webpack_require__(15)
+__webpack_require__(20)
 
-var Component = __webpack_require__(3)(
+var Component = __webpack_require__(1)(
   /* script */
-  __webpack_require__(7),
+  __webpack_require__(9),
   /* template */
-  __webpack_require__(13),
+  __webpack_require__(17),
   /* scopeId */
   null,
   /* cssModules */
@@ -1177,7 +1285,66 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 12 */
+/* 15 */
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+  return _c('modal', {
+    attrs: {
+      "name": "dialog",
+      "classes": ['v--modal', 'vue-dialog', this.params.class],
+      "width": 400,
+      "height": "auto",
+      "pivot-y": 0.3,
+      "adaptive": true,
+      "transition": "fade"
+    },
+    on: {
+      "before-open": _vm.beforeOpened,
+      "before-close": _vm.beforeClosed
+    }
+  }, [_c('div', {
+    staticClass: "dialog-content"
+  }, [(_vm.params.title) ? _c('div', {
+    staticClass: "dialog-c-title",
+    domProps: {
+      "innerHTML": _vm._s(_vm.params.title || '')
+    }
+  }) : _vm._e(), _vm._v(" "), _c('div', {
+    staticClass: "dialog-c-text",
+    domProps: {
+      "innerHTML": _vm._s(_vm.params.text || '')
+    }
+  })]), _vm._v(" "), (_vm.buttons) ? _c('div', {
+    staticClass: "dialog-buttons"
+  }, _vm._l((_vm.buttons), function(button, i) {
+    return _c('button', {
+      key: i,
+      style: (_vm.buttonStyle),
+      domProps: {
+        "innerHTML": _vm._s(button.title)
+      },
+      on: {
+        "click": function($event) {
+          $event.stopPropagation();
+          _vm.click(i, $event)
+        }
+      }
+    }, [_vm._v("\n        " + _vm._s(button.title) + "\n      ")])
+  })) : _c('div', {
+    staticClass: "dialog-buttons-none"
+  })])
+},staticRenderFns: []}
+module.exports.render._withStripped = true
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+     require("vue-hot-reload-api").rerender("data-v-18cd6db4", module.exports)
+  }
+}
+
+/***/ }),
+/* 16 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
@@ -1232,7 +1399,7 @@ if (false) {
 }
 
 /***/ }),
-/* 13 */
+/* 17 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
@@ -1249,17 +1416,43 @@ if (false) {
 }
 
 /***/ }),
-/* 14 */
+/* 18 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(9);
+var content = __webpack_require__(11);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
-var update = __webpack_require__(4)("0ba9730a", content, false);
+var update = __webpack_require__(2)("e57c1368", content, false);
+// Hot Module Replacement
+if(false) {
+ // When the styles change, update the <style> tags
+ if(!content.locals) {
+   module.hot.accept("!!../node_modules/css-loader/index.js?sourceMap!../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-18cd6db4!../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Dialog.vue", function() {
+     var newContent = require("!!../node_modules/css-loader/index.js?sourceMap!../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-18cd6db4!../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Dialog.vue");
+     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+     update(newContent);
+   });
+ }
+ // When the module is disposed, remove the <style> tags
+ module.hot.dispose(function() { update(); });
+}
+
+/***/ }),
+/* 19 */
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(12);
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var update = __webpack_require__(2)("0ba9730a", content, false);
 // Hot Module Replacement
 if(false) {
  // When the styles change, update the <style> tags
@@ -1275,17 +1468,17 @@ if(false) {
 }
 
 /***/ }),
-/* 15 */
+/* 20 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(10);
+var content = __webpack_require__(13);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
-var update = __webpack_require__(4)("43d3f0d1", content, false);
+var update = __webpack_require__(2)("43d3f0d1", content, false);
 // Hot Module Replacement
 if(false) {
  // When the styles change, update the <style> tags
@@ -1301,7 +1494,7 @@ if(false) {
 }
 
 /***/ }),
-/* 16 */
+/* 21 */
 /***/ (function(module, exports) {
 
 /**
@@ -1334,10 +1527,10 @@ module.exports = function listToStyles (parentId, list) {
 
 
 /***/ }),
-/* 17 */
+/* 22 */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_17__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_22__;
 
 /***/ })
 /******/ ]);

dist/ssr.index.js

@@ -7,7 +7,7 @@
 		exports["vue-js-modal"] = factory(require("vue"));
 	else
 		root["vue-js-modal"] = factory(root["vue"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_17__) {
+})(this, function(__WEBPACK_EXTERNAL_MODULE_22__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -73,82 +73,11 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "/dist/";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ 	return __webpack_require__(__webpack_require__.s = 3);
 /******/ })
 /************************************************************************/
 /******/ ([
 /* 0 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _Modal = __webpack_require__(5);
-
-var _Modal2 = _interopRequireDefault(_Modal);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var defaultComponentName = 'modal';
-
-var Plugin = {
-  install: function install(Vue) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-    if (this.installed) {
-      return;
-    }
-
-    this.installed = true;
-    this.event = new Vue();
-
-    Vue.prototype.$modal = {
-      show: function show(name, params) {
-        Plugin.event.$emit('toggle', name, true, params);
-      },
-      hide: function hide(name, params) {
-        Plugin.event.$emit('toggle', name, false, params);
-      },
-      toggle: function toggle(name, params) {
-        Plugin.event.$emit('toggle', name, undefined, params);
-      }
-    };
-
-    var componentName = options.componentName || defaultComponentName;
-    Vue.component(componentName, _Modal2.default);
-  }
-};
-
-exports.default = Plugin;
-
-/***/ }),
-/* 1 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var inRange = exports.inRange = function inRange(from, to, value) {
-  if (value < from) {
-    return from;
-  }
-
-  if (value > to) {
-    return to;
-  }
-
-  return value;
-};
-
-/***/ }),
-/* 2 */
 /***/ (function(module, exports) {
 
 /*
@@ -204,7 +133,7 @@ module.exports = function() {
 
 
 /***/ }),
-/* 3 */
+/* 1 */
 /***/ (function(module, exports) {
 
 module.exports = function normalizeComponent (
@@ -257,10 +186,10 @@ module.exports = function normalizeComponent (
 
 
 /***/ }),
-/* 4 */
+/* 2 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var listToStyles = __webpack_require__(16)
+var listToStyles = __webpack_require__(21)
 
 module.exports = function (parentId, list, isProduction) {
   if (typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
@@ -341,19 +270,123 @@ function renderStyles (styles) {
 }
 
 
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Modal = __webpack_require__(6);
+
+var _Modal2 = _interopRequireDefault(_Modal);
+
+var _Dialog = __webpack_require__(5);
+
+var _Dialog2 = _interopRequireDefault(_Dialog);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var defaultComponentName = 'modal';
+
+var Plugin = {
+  install: function install(Vue) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    if (this.installed) {
+      return;
+    }
+
+    this.installed = true;
+    this.event = new Vue();
+
+    Vue.prototype.$modal = {
+      show: function show(name, params) {
+        Plugin.event.$emit('toggle', name, true, params);
+      },
+      hide: function hide(name, params) {
+        Plugin.event.$emit('toggle', name, false, params);
+      },
+      toggle: function toggle(name, params) {
+        Plugin.event.$emit('toggle', name, undefined, params);
+      }
+    };
+
+    var componentName = options.componentName || defaultComponentName;
+    Vue.component(componentName, _Modal2.default);
+
+    if (options.dialog) {
+      Vue.component('v-dialog', _Dialog2.default);
+    }
+  }
+};
+
+exports.default = Plugin;
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var inRange = exports.inRange = function inRange(from, to, value) {
+  if (value < from) {
+    return from;
+  }
+
+  if (value > to) {
+    return to;
+  }
+
+  return value;
+};
+
 /***/ }),
 /* 5 */
 /***/ (function(module, exports, __webpack_require__) {
 
 
 /* styles */
-__webpack_require__(14)
+__webpack_require__(18)
 
-var Component = __webpack_require__(3)(
+var Component = __webpack_require__(1)(
   /* script */
-  __webpack_require__(6),
+  __webpack_require__(7),
   /* template */
-  __webpack_require__(12),
+  __webpack_require__(15),
+  /* scopeId */
+  null,
+  /* cssModules */
+  null
+)
+Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Dialog.vue"
+if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key !== "__esModule"})) {console.error("named exports are not supported in *.vue files.")}
+if (Component.options.functional) {console.error("[vue-loader] Dialog.vue: functional components are not supported with templates, they should use render functions.")}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+
+/* styles */
+__webpack_require__(19)
+
+var Component = __webpack_require__(1)(
+  /* script */
+  __webpack_require__(8),
+  /* template */
+  __webpack_require__(16),
   /* scopeId */
   null,
   /* cssModules */
@@ -367,7 +400,55 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 6 */
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = {
+  name: 'Dialog',
+  data: function data() {
+    return {
+      params: {},
+      defaultButtons: [{ title: 'CLOSE' }]
+    };
+  },
+
+  computed: {
+    buttons: function buttons() {
+      return this.params.buttons || this.defaultButtons;
+    },
+    buttonStyle: function buttonStyle() {
+      return {
+        flex: '1 1 ' + 100 / this.buttons.length + '%'
+      };
+    }
+  },
+  methods: {
+    beforeOpened: function beforeOpened(event) {
+      this.params = event.params || {};
+    },
+    beforeClosed: function beforeClosed() {
+      this.params = {};
+    },
+    click: function click(i, event) {
+      var button = this.buttons[i];
+
+      if (typeof button.handler === 'function') {
+        return button.handler(i, event);
+      } else {
+        this.$modal.hide('dialog');
+      }
+    }
+  }
+};
+
+/***/ }),
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -377,21 +458,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _vue = __webpack_require__(17);
+var _vue = __webpack_require__(22);
 
 var _vue2 = _interopRequireDefault(_vue);
 
-var _index = __webpack_require__(0);
+var _index = __webpack_require__(3);
 
 var _index2 = _interopRequireDefault(_index);
 
-var _Resizer = __webpack_require__(11);
+var _Resizer = __webpack_require__(14);
 
 var _Resizer2 = _interopRequireDefault(_Resizer);
 
-var _util = __webpack_require__(1);
+var _util = __webpack_require__(4);
 
-var _parser = __webpack_require__(8);
+var _parser = __webpack_require__(10);
 
 var _parser2 = _interopRequireDefault(_parser);
 
@@ -813,7 +894,7 @@ exports.default = {
 };
 
 /***/ }),
-/* 7 */
+/* 9 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -823,7 +904,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _util = __webpack_require__(1);
+var _util = __webpack_require__(4);
 
 exports.default = {
   name: 'VueJsModalResizer',
@@ -899,7 +980,7 @@ exports.default = {
 };
 
 /***/ }),
-/* 8 */
+/* 10 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -962,10 +1043,24 @@ var parse = function parse(value) {
 exports.default = parse;
 
 /***/ }),
-/* 9 */
+/* 11 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(2)();
+exports = module.exports = __webpack_require__(0)();
+// imports
+
+
+// module
+exports.push([module.i, "\n.vue-dialog {\n  font-size: 14px;\n}\n.vue-dialog div {\n  box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\n  width: 100%;\n  height: 100%;\n}\n.vue-dialog .dialog-content {\n  flex: 1 0 auto;\n  width: 100%;\n  padding: 15px;\n}\n.vue-dialog .dialog-c-title {\n  font-weight: 600;\n  padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .dialog-buttons {\n  display: flex;\n  flex: 0 1 auto;\n  width: 100%;\n  border-top: 1px solid #eee;\n  font-size: 12px;\n}\n.vue-dialog .dialog-buttons-none {\n  width: 100%;\n  padding-bottom: 15px;\n}\n.vue-dialog button {\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  border: 0;\n  cursor: pointer;\n  box-sizing: border-box;\n  line-height: 44px;\n  height: 44px;\n\n/*  text-transform: uppercase; */\n/*  letter-spacing: 1px; */\n\n  color:inherit;\n  font:inherit;\n}\n.vue-dialog button:hover {\n  background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog button:active {\n  background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog button:not(:first-of-type) {\n  border-left: 1px solid #eee;\n}\n", "", {"version":3,"sources":["/./src/Dialog.vue?46a3352f"],"names":[],"mappings":";AAoEA;EACA,gBAAA;CACA;AAEA;EACA,uBAAA;CACA;AAEA;EACA,YAAA;EACA,aAAA;CACA;AAEA;EACA,eAAA;EACA,YAAA;EACA,cAAA;CACA;AAEA;EACA,iBAAA;EACA,qBAAA;CACA;AAEA;CACA;AAEA;EACA,cAAA;EACA,eAAA;EACA,YAAA;EACA,2BAAA;EACA,gBAAA;CACA;AAEA;EACA,YAAA;EACA,qBAAA;CACA;AAEA;EACA,wBAAA;EACA,WAAA;EACA,UAAA;EACA,UAAA;EACA,gBAAA;EACA,uBAAA;EACA,kBAAA;EACA,aAAA;;AAEA,iCAAA;AACA,2BAAA;;EAEA,cAAA;EACA,aAAA;CACA;AAEA;EACA,gCAAA;CACA;AAEA;EACA,iCAAA;CACA;AAEA;EACA,4BAAA;CACA","file":"Dialog.vue","sourcesContent":["<template>\n  <modal name=\"dialog\"\n         :classes=\"['v--modal', 'vue-dialog', this.params.class]\"\n         :width=\"400\"\n         height=\"auto\"\n         :pivot-y=\"0.3\"\n         :adaptive=\"true\"\n         transition=\"fade\"\n         @before-open=\"beforeOpened\"\n         @before-close=\"beforeClosed\">\n      <div class=\"dialog-content\">\n        <div class=\"dialog-c-title\"\n             v-if=\"params.title\"\n             v-html=\"params.title || ''\"></div>\n        <div class=\"dialog-c-text\"\n             v-html=\"params.text || ''\"></div>\n      </div>\n      <div class=\"dialog-buttons\" v-if=\"buttons\">\n        <button v-for=\"(button, i) in buttons\"\n                :style=\"buttonStyle\"\n                :key=\"i\"\n                v-html=\"button.title\"\n                @click.stop=\"click(i, $event)\">\n          {{button.title}}\n        </button>\n      </div>\n      <div v-else class=\"dialog-buttons-none\"></div>\n  </modal>\n</template>\n<script>\n  export default {\n    name: 'Dialog',\n    data() {\n      return {\n        params: {},\n        defaultButtons: [{ title: 'CLOSE' }]\n      }\n    },\n    computed: {\n      buttons () {\n        return this.params.buttons || this.defaultButtons\n      },\n      buttonStyle () {\n        return {\n          flex: `1 1 ${100 / this.buttons.length}%`\n        }\n      }\n    },\n    methods: {\n      beforeOpened (event) {\n        this.params = event.params || {}\n      },\n      beforeClosed () {\n        this.params = {}\n      },\n      click (i, event) {\n        let button = this.buttons[i]\n\n        if (typeof button.handler === 'function') {\n          return button.handler(i, event)\n        } else {\n          this.$modal.hide('dialog')\n        }\n      }\n    }\n  }\n</script>\n<style>\n  .vue-dialog {\n    font-size: 14px;\n  }\n\n  .vue-dialog div {\n    box-sizing: border-box;\n  }\n\n  .vue-dialog .dialog-flex {\n    width: 100%;\n    height: 100%;\n  }\n\n  .vue-dialog .dialog-content {\n    flex: 1 0 auto;\n    width: 100%;\n    padding: 15px;\n  }\n\n  .vue-dialog .dialog-c-title {\n    font-weight: 600;\n    padding-bottom: 15px;\n  }\n\n  .vue-dialog .dialog-c-text {\n  }\n\n  .vue-dialog .dialog-buttons {\n    display: flex;\n    flex: 0 1 auto;\n    width: 100%;\n    border-top: 1px solid #eee;\n    font-size: 12px;\n  }\n\n  .vue-dialog .dialog-buttons-none {\n    width: 100%;\n    padding-bottom: 15px;\n  }\n\n  .vue-dialog button {\n    background: transparent;\n    padding: 0;\n    margin: 0;\n    border: 0;\n    cursor: pointer;\n    box-sizing: border-box;\n    line-height: 44px;\n    height: 44px;\n\n  /*  text-transform: uppercase; */\n  /*  letter-spacing: 1px; */\n\n    color:inherit;\n    font:inherit;\n  }\n\n  .vue-dialog button:hover {\n    background: rgba(0, 0, 0, 0.01);\n  }\n\n  .vue-dialog button:active {\n    background: rgba(0, 0, 0, 0.025);\n  }\n\n  .vue-dialog button:not(:first-of-type) {\n    border-left: 1px solid #eee;\n  }\n</style>\n"],"sourceRoot":"webpack://"}]);
+
+// exports
+
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(0)();
 // imports
 
 
@@ -976,10 +1071,10 @@ exports.push([module.i, "\n.v--modal-overlay {\n  position: fixed;\n  box-sizing
 
 
 /***/ }),
-/* 10 */
+/* 13 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(2)();
+exports = module.exports = __webpack_require__(0)();
 // imports
 
 
@@ -990,18 +1085,18 @@ exports.push([module.i, "\n.vue-modal-resizer {\n  display: block;\n  overflow:
 
 
 /***/ }),
-/* 11 */
+/* 14 */
 /***/ (function(module, exports, __webpack_require__) {
 
 
 /* styles */
-__webpack_require__(15)
+__webpack_require__(20)
 
-var Component = __webpack_require__(3)(
+var Component = __webpack_require__(1)(
   /* script */
-  __webpack_require__(7),
+  __webpack_require__(9),
   /* template */
-  __webpack_require__(13),
+  __webpack_require__(17),
   /* scopeId */
   null,
   /* cssModules */
@@ -1015,7 +1110,60 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 12 */
+/* 15 */
+/***/ (function(module, exports) {
+
+module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+  return _c('modal', {
+    attrs: {
+      "name": "dialog",
+      "classes": ['v--modal', 'vue-dialog', this.params.class],
+      "width": 400,
+      "height": "auto",
+      "pivot-y": 0.3,
+      "adaptive": true,
+      "transition": "fade"
+    },
+    on: {
+      "before-open": _vm.beforeOpened,
+      "before-close": _vm.beforeClosed
+    }
+  }, [_c('div', {
+    staticClass: "dialog-content"
+  }, [(_vm.params.title) ? _c('div', {
+    staticClass: "dialog-c-title",
+    domProps: {
+      "innerHTML": _vm._s(_vm.params.title || '')
+    }
+  }) : _vm._e(), _vm._v(" "), _c('div', {
+    staticClass: "dialog-c-text",
+    domProps: {
+      "innerHTML": _vm._s(_vm.params.text || '')
+    }
+  })]), _vm._v(" "), (_vm.buttons) ? _c('div', {
+    staticClass: "dialog-buttons"
+  }, _vm._l((_vm.buttons), function(button, i) {
+    return _c('button', {
+      key: i,
+      style: (_vm.buttonStyle),
+      domProps: {
+        "innerHTML": _vm._s(button.title)
+      },
+      on: {
+        "click": function($event) {
+          $event.stopPropagation();
+          _vm.click(i, $event)
+        }
+      }
+    }, [_vm._v("\n        " + _vm._s(button.title) + "\n      ")])
+  })) : _c('div', {
+    staticClass: "dialog-buttons-none"
+  })])
+},staticRenderFns: []}
+module.exports.render._withStripped = true
+
+/***/ }),
+/* 16 */
 /***/ (function(module, exports) {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
@@ -1064,7 +1212,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
 module.exports.render._withStripped = true
 
 /***/ }),
-/* 13 */
+/* 17 */
 /***/ (function(module, exports) {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
@@ -1075,33 +1223,46 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
 module.exports.render._withStripped = true
 
 /***/ }),
-/* 14 */
+/* 18 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(9);
+var content = __webpack_require__(11);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add CSS to SSR context
-__webpack_require__(4)("0ba9730a", content, false);
+__webpack_require__(2)("e57c1368", content, false);
 
 /***/ }),
-/* 15 */
+/* 19 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(10);
+var content = __webpack_require__(12);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add CSS to SSR context
-__webpack_require__(4)("43d3f0d1", content, false);
+__webpack_require__(2)("0ba9730a", content, false);
 
 /***/ }),
-/* 16 */
+/* 20 */
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(13);
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add CSS to SSR context
+__webpack_require__(2)("43d3f0d1", content, false);
+
+/***/ }),
+/* 21 */
 /***/ (function(module, exports) {
 
 /**
@@ -1134,10 +1295,10 @@ module.exports = function listToStyles (parentId, list) {
 
 
 /***/ }),
-/* 17 */
+/* 22 */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_17__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_22__;
 
 /***/ })
 /******/ ]);

src/Dialog.vue

@@ -1,52 +1,44 @@
 <template>
   <modal name="dialog"
-         classes="v--modal vue-dialog"
+         :classes="['v--modal', 'vue-dialog', this.params.class]"
          :width="400"
-         :height="180"
+         height="auto"
          :pivot-y="0.3"
          :adaptive="true"
          transition="fade"
          @before-open="beforeOpened"
          @before-close="beforeClosed">
-    <flex-box direction="column" class="dialog-flex">
       <div class="dialog-content">
-        <div class="dialog-c-title" v-text="params.title || ''"></div>
+        <div class="dialog-c-title"
-        <div class="dialog-c-text" v-html="params.text || ''"></div>
+             v-if="params.title"
+             v-html="params.title || ''"></div>
+        <div class="dialog-c-text"
+             v-html="params.text || ''"></div>
       </div>
-      <div class="dialog-buttons" v-if="buttons.length > 0">
+      <div class="dialog-buttons" v-if="buttons">
         <button v-for="(button, i) in buttons"
                 :style="buttonStyle"
                 :key="i"
+                v-html="button.title"
                 @click.stop="click(i, $event)">
           {{button.title}}
         </button>
       </div>
-    </flex-box>
+      <div v-else class="dialog-buttons-none"></div>
   </modal>
 </template>
 <script>
-  /*
-  buttons: [
-    { title: 'Cancel' },
-    { 
-      title: 'Ok', 
-      handler: () => {
-        
-      }
-    }
-  ]
-  */
   export default {
     name: 'Dialog',
     data() {
       return {
         params: {},
-        _buttons: [{ title: 'Cancel' }]
+        defaultButtons: [{ title: 'CLOSE' }]
       }
     },
     computed: {
       buttons () {
-        return this.params.buttons || this._buttons
+        return this.params.buttons || this.defaultButtons
       },
       buttonStyle () {
         return {
@@ -73,65 +65,73 @@
     }
   }
 </script>
-<style lang="scss">
+<style>
   .vue-dialog {
     font-size: 14px;
-    color: rgb(100, 114, 118);
-
-    .dialog-flex {
-      width: 100%;
-      height: 100%;
-    }
-
-    .dialog-content {
-      flex: 1 0 auto;
-      width: 100%;
-
-      .dialog-c-title {
-        font-weight: 600;
-        padding: 15px;
-      }
-
-      .dialog-c-text {
-        padding: 0px 15px;
-      }
-    }
-
-    .dialog-buttons {
-      display: flex;
-      flex: 0 1 auto;
-      width: 100%;
-      border-top: 1px solid #eee;
-      font-size: 12px;
-
-      button {
-        background: transparent;
-        padding: 0;
-        margin: 0;
-        border: 0;
-        cursor: pointer;
-        box-sizing: border-box;
-        line-height: 44px;
-        height: 44px;
-
-        text-transform: uppercase;
-        letter-spacing: 1px;
-
-        color:inherit;
-        font:inherit;
-
-        &:hover {
-          background: mix(black, transparent, 0.8%);
-        }
-
-        &:active {
-          background: mix(black, transparent, 2.4%);
-        }
-
-        &:not(:first-of-type) {
-          border-left: 1px solid #eee;
-        }
-      }
-    }
   }
-</style>
+
+  .vue-dialog div {
+    box-sizing: border-box;
+  }
+
+  .vue-dialog .dialog-flex {
+    width: 100%;
+    height: 100%;
+  }
+
+  .vue-dialog .dialog-content {
+    flex: 1 0 auto;
+    width: 100%;
+    padding: 15px;
+  }
+
+  .vue-dialog .dialog-c-title {
+    font-weight: 600;
+    padding-bottom: 15px;
+  }
+
+  .vue-dialog .dialog-c-text {
+  }
+
+  .vue-dialog .dialog-buttons {
+    display: flex;
+    flex: 0 1 auto;
+    width: 100%;
+    border-top: 1px solid #eee;
+    font-size: 12px;
+  }
+
+  .vue-dialog .dialog-buttons-none {
+    width: 100%;
+    padding-bottom: 15px;
+  }
+
+  .vue-dialog button {
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    cursor: pointer;
+    box-sizing: border-box;
+    line-height: 44px;
+    height: 44px;
+
+  /*  text-transform: uppercase; */
+  /*  letter-spacing: 1px; */
+
+    color:inherit;
+    font:inherit;
+  }
+
+  .vue-dialog button:hover {
+    background: rgba(0, 0, 0, 0.01);
+  }
+
+  .vue-dialog button:active {
+    background: rgba(0, 0, 0, 0.025);
+  }
+
+  .vue-dialog button:not(:first-of-type) {
+    border-left: 1px solid #eee;
+  }
+</style>

src/index.js

@@ -1,4 +1,5 @@
 import Modal from './Modal.vue'
+import Dialog from './Dialog.vue'
 
 const defaultComponentName = 'modal'
 
@@ -27,6 +28,10 @@ const Plugin = {
 
     const componentName = options.componentName || defaultComponentName
     Vue.component(componentName, Modal)
+
+    if (options.dialog) {
+      Vue.component('v-dialog', Dialog)
+    }
   }
 }