KevinMidboe/vue-js-modal
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-js-modal.git synced 2025-10-29 18:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added Dialog component, updated examples.

Browse Source
This commit is contained in:
euvl
2017-08-07 12:39:11 +01:00
parent 4c18b2b653
commit 0ea9d797cd
6 changed files with 730 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

379
dist/ssr.index.js vendored
View File

@@ -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__;
/***/ })
/******/ ]);