diff --git a/demo/client_side_rendering/src/App.vue b/demo/client_side_rendering/src/App.vue index 32c2c5c..5e229f8 100644 --- a/demo/client_side_rendering/src/App.vue +++ b/demo/client_side_rendering/src/App.vue @@ -7,6 +7,8 @@ + + -
+
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 @@

Vue.js Modal - Readme - Issues + Readme + Issues 

@@ -56,7 +60,7 @@
             @click="$modal.show('demo-login')">
       Demo: Login
     
-    
@@ -64,6 +68,19 @@
             @click="conditionalShow">
       Can NOT be shown
     
+    

+
+    
+
+    
+
+
@@ -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.
And I render HTML!' + }) + }, + + 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; diff --git a/demo/client_side_rendering/src/main.js b/demo/client_side_rendering/src/main.js index 39cde43..e88b15c 100644 --- a/demo/client_side_rendering/src/main.js +++ b/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', diff --git a/dist/index.js b/dist/index.js index ba85575..76d7e16 100644 --- a/dist/index.js +++ b/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":["\n\n\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 \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 \ No newline at end of file + + .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; + } + diff --git a/src/index.js b/src/index.js index c58c659..eb570d8 100644 --- a/src/index.js +++ b/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) + } } }