diff --git a/build/webpack.srr-no-css.config.js b/build/webpack.srr-no-css.config.js deleted file mode 100644 index f3d516b..0000000 --- a/build/webpack.srr-no-css.config.js +++ /dev/null @@ -1,24 +0,0 @@ -const path = require('path') -const webpack = require('webpack') -const merge = require('webpack-merge') -const ExtractTextPlugin = require('extract-text-webpack-plugin') - -const base = require('./webpack.srr.config') - -module.exports = merge(base, { - plugins: [new ExtractTextPlugin('styles.css')], - output: { - filename: 'ssr.pure.js' - }, - module: { - rules: [ - { - test: /\.css$/, - use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: 'css-loader' - }) - } - ] - } -}) diff --git a/build/webpack.ssr-no-css.config.js b/build/webpack.ssr-no-css.config.js new file mode 100644 index 0000000..1074115 --- /dev/null +++ b/build/webpack.ssr-no-css.config.js @@ -0,0 +1,50 @@ +const path = require('path') +const webpack = require('webpack') +const merge = require('webpack-merge') +const ExtractTextPlugin = require('extract-text-webpack-plugin') +const UglifyJSPlugin = require('uglifyjs-webpack-plugin') + +module.exports = { + target: 'node', + entry: path.resolve(__dirname, '../src/index.js'), + output: { + path: path.resolve(__dirname, '../dist'), + publicPath: '/dist/', + library: 'vue-js-modal', + libraryTarget: 'umd', + filename: 'ssr.nocss.js' + }, + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader', + options: { + loaders: { + css: ExtractTextPlugin.extract({ + use: 'css-loader', + fallback: 'vue-style-loader' + }) + } + } + }, + { + test: /\.js$/, + loader: 'babel-loader', + exclude: /node_modules/ + } + ] + }, + plugins: [ + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: JSON.stringify('production') + } + }), + new UglifyJSPlugin({ + mangle: false, + beautify: true + }), + new ExtractTextPlugin('styles.css') + ] +} diff --git a/dist/index.js b/dist/index.js index 88b7e3b..2e08eed 100644 --- a/dist/index.js +++ b/dist/index.js @@ -718,9 +718,9 @@ }, function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\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 font-size: 14px;\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 .vue-dialog-buttons {\n display: flex;\n flex: 0 1 auto;\n width: 100%;\n border-top: 1px solid #eee;\n}\n.vue-dialog .vue-dialog-buttons-none {\n width: 100%;\n padding-bottom: 15px;\n}\n.vue-dialog-button {\n font-size: 12px !important;\n background: transparent;\n padding: 0;\n margin: 0;\n border: 0;\n cursor: pointer;\n box-sizing: border-box;\n line-height: 40px;\n height: 40px;\n color: inherit;\n font: inherit;\n outline: none;\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", "" ]); }, function(module, exports, __webpack_require__) { - exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n overflow: hidden;\n position: fixed;\n width: 100vw;\n}\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.2);\n z-index: 999;\n opacity: 1;\n}\n.v--modal-overlay.scrollable {\n height: 100%;\n min-height: 100vh;\n overflow-y: auto;\n padding-bottom: 10px;\n -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-box {\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\n margin-bottom: 2px;\n /* transition: top 0.2s ease; */\n}\n.v--modal {\n background-color: white;\n text-align: left;\n border-radius: 3px;\n box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);\n padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n width: 100vw;\n height: 100vh;\n margin: 0;\n left: 0;\n top: 0;\n}\n.v--modal-top-right {\n display: block;\n position: absolute;\n right: 0;\n top: 0;\n}\n.overlay-fade-enter-active, .overlay-fade-leave-active {\n transition: all 0.2s;\n}\n.overlay-fade-enter, .overlay-fade-leave-active {\n opacity: 0;\n}\n.nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n transition: all 0.4s;\n}\n.nice-modal-fade-enter, .nice-modal-fade-leave-active {\n opacity: 0;\n transform: translateY(-20px);\n}\n", "" ]); + exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n overflow: hidden;\n position: fixed;\n width: 100vw;\n}\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n height: 100vh;\n background: rgba(0, 0, 0, 0.2);\n z-index: 999;\n opacity: 1;\n}\n.v--modal-overlay.scrollable {\n height: 100%;\n min-height: 100vh;\n overflow-y: auto;\n padding-bottom: 10px;\n -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-box {\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\n margin-bottom: 2px;\n /* transition: top 0.2s ease; */\n}\n.v--modal {\n background-color: white;\n text-align: left;\n border-radius: 3px;\n box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);\n padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n width: 100vw;\n height: 100vh;\n margin: 0;\n left: 0;\n top: 0;\n}\n.v--modal-top-right {\n display: block;\n position: absolute;\n right: 0;\n top: 0;\n}\n.overlay-fade-enter-active,\n.overlay-fade-leave-active {\n transition: all 0.2s;\n}\n.overlay-fade-enter,\n.overlay-fade-leave-active {\n opacity: 0;\n}\n.nice-modal-fade-enter-active,\n.nice-modal-fade-leave-active {\n transition: all 0.4s;\n}\n.nice-modal-fade-enter,\n.nice-modal-fade-leave-active {\n opacity: 0;\n transform: translateY(-20px);\n}\n", "" ]); }, function(module, exports, __webpack_require__) { - exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-modal-resizer {\n display: block;\n overflow: hidden;\n position: absolute;\n width: 12px;\n height: 12px;\n right: 0;\n bottom: 0;\n z-index: 9999999;\n background: transparent;\n cursor: se-resize;\n}\n.vue-modal-resizer::after {\n display: block;\n position: absolute;\n content: '';\n background: transparent;\n left: 0;\n top: 0;\n width: 0;\n height: 0;\n border-bottom: 10px solid #ddd;\n border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\n border-bottom: 10px solid #369BE9;\n}\n", "" ]); + exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-modal-resizer {\n display: block;\n overflow: hidden;\n position: absolute;\n width: 12px;\n height: 12px;\n right: 0;\n bottom: 0;\n z-index: 9999999;\n background: transparent;\n cursor: se-resize;\n}\n.vue-modal-resizer::after {\n display: block;\n position: absolute;\n content: '';\n background: transparent;\n left: 0;\n top: 0;\n width: 0;\n height: 0;\n border-bottom: 10px solid #ddd;\n border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\n border-bottom: 10px solid #369be9;\n}\n", "" ]); }, function(module, exports, __webpack_require__) { __webpack_require__(20); var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null); diff --git a/dist/ssr.index.js b/dist/ssr.index.js index dc0a400..93b4c5c 100644 --- a/dist/ssr.index.js +++ b/dist/ssr.index.js @@ -672,9 +672,9 @@ }, function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\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 font-size: 14px;\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 .vue-dialog-buttons {\n display: flex;\n flex: 0 1 auto;\n width: 100%;\n border-top: 1px solid #eee;\n}\n.vue-dialog .vue-dialog-buttons-none {\n width: 100%;\n padding-bottom: 15px;\n}\n.vue-dialog-button {\n font-size: 12px !important;\n background: transparent;\n padding: 0;\n margin: 0;\n border: 0;\n cursor: pointer;\n box-sizing: border-box;\n line-height: 40px;\n height: 40px;\n color: inherit;\n font: inherit;\n outline: none;\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", "" ]); }, function(module, exports, __webpack_require__) { - exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n overflow: hidden;\n position: fixed;\n width: 100vw;\n}\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.2);\n z-index: 999;\n opacity: 1;\n}\n.v--modal-overlay.scrollable {\n height: 100%;\n min-height: 100vh;\n overflow-y: auto;\n padding-bottom: 10px;\n -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-box {\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\n margin-bottom: 2px;\n /* transition: top 0.2s ease; */\n}\n.v--modal {\n background-color: white;\n text-align: left;\n border-radius: 3px;\n box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);\n padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n width: 100vw;\n height: 100vh;\n margin: 0;\n left: 0;\n top: 0;\n}\n.v--modal-top-right {\n display: block;\n position: absolute;\n right: 0;\n top: 0;\n}\n.overlay-fade-enter-active, .overlay-fade-leave-active {\n transition: all 0.2s;\n}\n.overlay-fade-enter, .overlay-fade-leave-active {\n opacity: 0;\n}\n.nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n transition: all 0.4s;\n}\n.nice-modal-fade-enter, .nice-modal-fade-leave-active {\n opacity: 0;\n transform: translateY(-20px);\n}\n", "" ]); + exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n overflow: hidden;\n position: fixed;\n width: 100vw;\n}\n.v--modal-overlay {\n position: fixed;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n height: 100vh;\n background: rgba(0, 0, 0, 0.2);\n z-index: 999;\n opacity: 1;\n}\n.v--modal-overlay.scrollable {\n height: 100%;\n min-height: 100vh;\n overflow-y: auto;\n padding-bottom: 10px;\n -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-box {\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\n margin-bottom: 2px;\n /* transition: top 0.2s ease; */\n}\n.v--modal {\n background-color: white;\n text-align: left;\n border-radius: 3px;\n box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);\n padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n width: 100vw;\n height: 100vh;\n margin: 0;\n left: 0;\n top: 0;\n}\n.v--modal-top-right {\n display: block;\n position: absolute;\n right: 0;\n top: 0;\n}\n.overlay-fade-enter-active,\n.overlay-fade-leave-active {\n transition: all 0.2s;\n}\n.overlay-fade-enter,\n.overlay-fade-leave-active {\n opacity: 0;\n}\n.nice-modal-fade-enter-active,\n.nice-modal-fade-leave-active {\n transition: all 0.4s;\n}\n.nice-modal-fade-enter,\n.nice-modal-fade-leave-active {\n opacity: 0;\n transform: translateY(-20px);\n}\n", "" ]); }, function(module, exports, __webpack_require__) { - exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-modal-resizer {\n display: block;\n overflow: hidden;\n position: absolute;\n width: 12px;\n height: 12px;\n right: 0;\n bottom: 0;\n z-index: 9999999;\n background: transparent;\n cursor: se-resize;\n}\n.vue-modal-resizer::after {\n display: block;\n position: absolute;\n content: '';\n background: transparent;\n left: 0;\n top: 0;\n width: 0;\n height: 0;\n border-bottom: 10px solid #ddd;\n border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\n border-bottom: 10px solid #369BE9;\n}\n", "" ]); + exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-modal-resizer {\n display: block;\n overflow: hidden;\n position: absolute;\n width: 12px;\n height: 12px;\n right: 0;\n bottom: 0;\n z-index: 9999999;\n background: transparent;\n cursor: se-resize;\n}\n.vue-modal-resizer::after {\n display: block;\n position: absolute;\n content: '';\n background: transparent;\n left: 0;\n top: 0;\n width: 0;\n height: 0;\n border-bottom: 10px solid #ddd;\n border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\n border-bottom: 10px solid #369be9;\n}\n", "" ]); }, function(module, exports, __webpack_require__) { __webpack_require__(20); var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null); diff --git a/dist/ssr.nocss.js b/dist/ssr.nocss.js new file mode 100644 index 0000000..7069180 --- /dev/null +++ b/dist/ssr.nocss.js @@ -0,0 +1,740 @@ +!function(root, factory) { + "object" == typeof exports && "object" == typeof module ? module.exports = factory() : "function" == typeof define && define.amd ? define([], factory) : "object" == typeof exports ? exports["vue-js-modal"] = factory() : root["vue-js-modal"] = factory(); +}(this, function() { + return function(modules) { + function __webpack_require__(moduleId) { + if (installedModules[moduleId]) return installedModules[moduleId].exports; + var module = installedModules[moduleId] = { + i: moduleId, + l: !1, + exports: {} + }; + return modules[moduleId].call(module.exports, module, module.exports, __webpack_require__), + module.l = !0, module.exports; + } + var installedModules = {}; + return __webpack_require__.m = modules, __webpack_require__.c = installedModules, + __webpack_require__.i = function(value) { + return value; + }, __webpack_require__.d = function(exports, name, getter) { + __webpack_require__.o(exports, name) || Object.defineProperty(exports, name, { + configurable: !1, + enumerable: !0, + get: getter + }); + }, __webpack_require__.n = function(module) { + var getter = module && module.__esModule ? function() { + return module.default; + } : function() { + return module; + }; + return __webpack_require__.d(getter, "a", getter), getter; + }, __webpack_require__.o = function(object, property) { + return Object.prototype.hasOwnProperty.call(object, property); + }, __webpack_require__.p = "/dist/", __webpack_require__(__webpack_require__.s = 1); + }([ function(module, exports) { + module.exports = function(rawScriptExports, compiledTemplate, scopeId, cssModules) { + var esModule, scriptExports = rawScriptExports = rawScriptExports || {}, type = typeof rawScriptExports.default; + "object" !== type && "function" !== type || (esModule = rawScriptExports, scriptExports = rawScriptExports.default); + var options = "function" == typeof scriptExports ? scriptExports.options : scriptExports; + if (compiledTemplate && (options.render = compiledTemplate.render, options.staticRenderFns = compiledTemplate.staticRenderFns), + scopeId && (options._scopeId = scopeId), cssModules) { + var computed = options.computed || (options.computed = {}); + Object.keys(cssModules).forEach(function(key) { + var module = cssModules[key]; + computed[key] = function() { + return module; + }; + }); + } + return { + esModule: esModule, + exports: scriptExports, + options: options + }; + }; + }, function(module, exports, __webpack_require__) { + "use strict"; + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: obj + }; + } + Object.defineProperty(exports, "__esModule", { + value: !0 + }); + var _Modal = __webpack_require__(4), _Modal2 = _interopRequireDefault(_Modal), _Dialog = __webpack_require__(3), _Dialog2 = _interopRequireDefault(_Dialog), Plugin = { + install: function(Vue) { + var options = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}; + if (!this.installed) { + this.installed = !0, this.event = new Vue(), Vue.prototype.$modal = { + show: function(name, params) { + Plugin.event.$emit("toggle", name, !0, params); + }, + hide: function(name, params) { + Plugin.event.$emit("toggle", name, !1, params); + }, + toggle: function(name, params) { + Plugin.event.$emit("toggle", name, void 0, params); + } + }; + var componentName = options.componentName || "modal"; + Vue.component(componentName, _Modal2.default), options.dialog && Vue.component("v-dialog", _Dialog2.default); + } + } + }; + exports.default = Plugin; + }, function(module, exports, __webpack_require__) { + "use strict"; + Object.defineProperty(exports, "__esModule", { + value: !0 + }); + var inRange = exports.inRange = function(from, to, value) { + return value < from ? from : value > to ? to : value; + }; + exports.default = { + inRange: inRange + }; + }, function(module, exports, __webpack_require__) { + __webpack_require__(9); + var Component = __webpack_require__(0)(__webpack_require__(5), __webpack_require__(13), null, null); + Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Dialog.vue", + Component.esModule && Object.keys(Component.esModule).some(function(key) { + return "default" !== key && "__esModule" !== key; + }) && console.error("named exports are not supported in *.vue files."), 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; + }, function(module, exports, __webpack_require__) { + __webpack_require__(10); + var Component = __webpack_require__(0)(__webpack_require__(6), __webpack_require__(14), null, null); + Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Modal.vue", + Component.esModule && Object.keys(Component.esModule).some(function(key) { + return "default" !== key && "__esModule" !== key; + }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."), + module.exports = Component.exports; + }, function(module, exports, __webpack_require__) { + "use strict"; + Object.defineProperty(exports, "__esModule", { + value: !0 + }), exports.default = { + name: "Dialog", + props: { + width: { + type: [ Number, String ], + default: 400 + }, + clickToClose: { + type: Boolean, + default: !0 + }, + transition: { + type: String, + default: "fade" + } + }, + data: function() { + return { + params: {}, + defaultButtons: [ { + title: "CLOSE" + } ] + }; + }, + computed: { + buttons: function() { + return this.params.buttons || this.defaultButtons; + }, + buttonStyle: function() { + return { + flex: "1 1 " + 100 / this.buttons.length + "%" + }; + } + }, + methods: { + beforeOpened: function(event) { + window.addEventListener("keyup", this.onKeyUp), this.params = event.params || {}, + this.$emit("before-opened", event); + }, + beforeClosed: function(event) { + window.removeEventListener("keyup", this.onKeyUp), this.params = {}, this.$emit("before-closed", event); + }, + click: function(i, event) { + var source = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : "click", button = this.buttons[i]; + button && "function" == typeof button.handler ? button.handler(i, event, { + source: source + }) : this.$modal.hide("dialog"); + }, + onKeyUp: function(event) { + if (13 === event.which && this.buttons.length > 0) { + var buttonIndex = 1 === this.buttons.length ? 0 : this.buttons.findIndex(function(button) { + return button.default; + }); + -1 !== buttonIndex && this.click(buttonIndex, event, "keypress"); + } + } + } + }; + }, function(module, exports, __webpack_require__) { + "use strict"; + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: obj + }; + } + Object.defineProperty(exports, "__esModule", { + value: !0 + }); + var _index = __webpack_require__(1), _index2 = _interopRequireDefault(_index), _Resizer = __webpack_require__(12), _Resizer2 = _interopRequireDefault(_Resizer), _util = __webpack_require__(2), _parser = __webpack_require__(8), _parser2 = _interopRequireDefault(_parser); + exports.default = { + name: "VueJsModal", + props: { + name: { + required: !0, + type: String + }, + delay: { + type: Number, + default: 0 + }, + resizable: { + type: Boolean, + default: !1 + }, + adaptive: { + type: Boolean, + default: !1 + }, + draggable: { + type: [ Boolean, String ], + default: !1 + }, + scrollable: { + type: Boolean, + default: !1 + }, + reset: { + type: Boolean, + default: !1 + }, + transition: { + type: String + }, + clickToClose: { + type: Boolean, + default: !0 + }, + classes: { + type: [ String, Array ], + default: "v--modal" + }, + minWidth: { + type: Number, + default: 0, + validator: function(value) { + return value >= 0; + } + }, + minHeight: { + type: Number, + default: 0, + validator: function(value) { + return value >= 0; + } + }, + width: { + type: [ Number, String ], + default: 600, + validator: function(value) { + if ("string" == typeof value) { + var width = (0, _parser2.default)(value); + return ("%" === width.type || "px" === width.type) && width.value > 0; + } + return value >= 0; + } + }, + height: { + type: [ Number, String ], + default: 300, + validator: function(value) { + if ("string" == typeof value) { + if ("auto" === value) return !0; + var height = (0, _parser2.default)(value); + return ("%" === height.type || "px" === height.type) && height.value > 0; + } + return value >= 0; + } + }, + pivotX: { + type: Number, + default: .5, + validator: function(value) { + return value >= 0 && value <= 1; + } + }, + pivotY: { + type: Number, + default: .5, + validator: function(value) { + return value >= 0 && value <= 1; + } + } + }, + components: { + Resizer: _Resizer2.default + }, + data: function() { + return { + visible: !1, + visibility: { + modal: !1, + overlay: !1 + }, + shift: { + left: 0, + top: 0 + }, + modal: { + width: 0, + widthType: "px", + height: 0, + heightType: "px", + renderedHeight: 0 + }, + window: { + width: 0, + height: 0 + }, + mutationObserver: null + }; + }, + watch: { + visible: function(value) { + var _this = this; + value ? (this.visibility.overlay = !0, setTimeout(function() { + _this.visibility.modal = !0, _this.$nextTick(function() { + _this.addDraggableListeners(), _this.callAfterEvent(!0); + }); + }, this.delay)) : (this.visibility.modal = !1, setTimeout(function() { + _this.visibility.overlay = !1, _this.$nextTick(function() { + _this.removeDraggableListeners(), _this.callAfterEvent(!1); + }); + }, this.delay)); + } + }, + created: function() { + this.setInitialSize(); + }, + beforeMount: function() { + var _this2 = this; + if (_index2.default.event.$on("toggle", function(name, state, params) { + name === _this2.name && (void 0 === state && (state = !_this2.visible), _this2.toggle(state, params)); + }), window.addEventListener("resize", this.onWindowResize), this.onWindowResize(), + this.scrollable && !this.isAutoHeight && console.warn('Modal "' + this.name + '" has scrollable flag set to true but height is not "auto" (' + this.height + ")"), + this.isAutoHeight) { + var MutationObserver = function() { + for (var prefixes = [ "", "WebKit", "Moz", "O", "Ms" ], i = 0; i < prefixes.length; i++) { + var name = prefixes[i] + "MutationObserver"; + if (name in window) return window[name]; + } + return !1; + }(); + MutationObserver && (this.mutationObserver = new MutationObserver(function(mutations) { + _this2.updateRenderedHeight(); + })); + } + this.clickToClose && window.addEventListener("keyup", this.onEscapeKeyUp); + }, + beforeDestroy: function() { + window.removeEventListener("resize", this.onWindowResize), this.clickToClose && window.removeEventListener("keyup", this.onEscapeKeyUp); + }, + computed: { + isAutoHeight: function() { + return "auto" === this.modal.heightType; + }, + position: function() { + var window = this.window, shift = this.shift, pivotX = this.pivotX, pivotY = this.pivotY, trueModalWidth = this.trueModalWidth, trueModalHeight = this.trueModalHeight, maxLeft = window.width - trueModalWidth, maxTop = window.height - trueModalHeight, left = shift.left + pivotX * maxLeft, top = shift.top + pivotY * maxTop; + return { + left: (0, _util.inRange)(0, maxLeft, left), + top: (0, _util.inRange)(0, maxTop, top) + }; + }, + trueModalWidth: function() { + var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width; + return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value; + }, + trueModalHeight: function() { + var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height; + return isAutoHeight ? this.modal.renderedHeight : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value; + }, + overlayClass: function() { + return { + "v--modal-overlay": !0, + scrollable: this.scrollable && this.isAutoHeight + }; + }, + modalClass: function() { + return [ "v--modal-box", this.classes ]; + }, + modalStyle: function() { + return { + top: this.position.top + "px", + left: this.position.left + "px", + width: this.trueModalWidth + "px", + height: this.isAutoHeight ? "auto" : this.trueModalHeight + "px" + }; + } + }, + methods: { + setInitialSize: function() { + var modal = this.modal, width = (0, _parser2.default)(this.width), height = (0, + _parser2.default)(this.height); + modal.width = width.value, modal.widthType = width.type, modal.height = height.value, + modal.heightType = height.type; + }, + onEscapeKeyUp: function(event) { + 27 === event.which && this.visible && this.$modal.hide(this.name); + }, + onWindowResize: function() { + this.window.width = window.innerWidth, this.window.height = window.innerHeight; + }, + genEventObject: function(params) { + var eventData = { + name: this.name, + timestamp: Date.now(), + canceled: !1, + ref: this.$refs.modal + }; + return Object.assign(eventData, params || {}); + }, + onModalResize: function(event) { + this.modal.widthType = "px", this.modal.width = event.size.width, this.modal.heightType = "px", + this.modal.height = event.size.height; + var size = this.modal.size, resizeEvent = this.genEventObject({ + size: size + }); + this.$emit("resize", resizeEvent); + }, + toggle: function(state, params) { + var reset = this.reset, scrollable = this.scrollable, visible = this.visible, beforeEventName = visible ? "before-close" : "before-open"; + "before-open" === beforeEventName ? (document.activeElement && document.activeElement.blur(), + reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll"); + var stopEventExecution = !1, stop = function() { + stopEventExecution = !0; + }, beforeEvent = this.genEventObject({ + stop: stop, + state: state, + params: params + }); + this.$emit(beforeEventName, beforeEvent), stopEventExecution || (this.visible = state); + }, + getDraggableElement: function() { + var selector = "string" != typeof this.draggable ? ".v--modal-box" : this.draggable; + if (selector) { + var handler = this.$refs.overlay.querySelector(selector); + if (handler) return handler; + } + }, + onBackgroundClick: function() { + this.clickToClose && this.toggle(!1); + }, + addDraggableListeners: function() { + var _this3 = this; + if (this.draggable) { + var dragger = this.getDraggableElement(); + if (dragger) { + var startX = 0, startY = 0, cachedShiftX = 0, cachedShiftY = 0, getPosition = function(event) { + return event.touches && event.touches.length > 0 ? event.touches[0] : event; + }, mousedown = function(event) { + var target = event.target; + if (!target || "INPUT" !== target.nodeName) { + var _getPosition = getPosition(event), clientX = _getPosition.clientX, clientY = _getPosition.clientY; + document.addEventListener("mousemove", _mousemove), document.addEventListener("mouseup", _mouseup), + document.addEventListener("touchmove", _mousemove), document.addEventListener("touchend", _mouseup), + startX = clientX, startY = clientY, cachedShiftX = _this3.shift.left, cachedShiftY = _this3.shift.top; + } + }, _mousemove = function(event) { + var _getPosition2 = getPosition(event), clientX = _getPosition2.clientX, clientY = _getPosition2.clientY; + _this3.shift.left = cachedShiftX + clientX - startX, _this3.shift.top = cachedShiftY + clientY - startY, + event.preventDefault(); + }, _mouseup = function _mouseup(event) { + document.removeEventListener("mousemove", _mousemove), document.removeEventListener("mouseup", _mouseup), + document.removeEventListener("touchmove", _mousemove), document.removeEventListener("touchend", _mouseup), + event.preventDefault(); + }; + dragger.addEventListener("mousedown", mousedown), dragger.addEventListener("touchstart", mousedown); + } + } + }, + removeDraggableListeners: function() {}, + callAfterEvent: function(state) { + state ? this.connectObserver() : this.disconnectObserver(); + var eventName = state ? "opened" : "closed", event = this.genEventObject({ + state: state + }); + this.$emit(eventName, event); + }, + updateRenderedHeight: function() { + this.$refs.modal && (this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height); + }, + connectObserver: function() { + this.mutationObserver && this.mutationObserver.observe(this.$refs.modal, { + childList: !0, + attributes: !0, + subtree: !0 + }); + }, + disconnectObserver: function() { + this.mutationObserver && this.mutationObserver.disconnect(); + } + } + }; + }, function(module, exports, __webpack_require__) { + "use strict"; + Object.defineProperty(exports, "__esModule", { + value: !0 + }); + var _util = __webpack_require__(2); + exports.default = { + name: "VueJsModalResizer", + props: { + minHeight: { + type: Number, + default: 0 + }, + minWidth: { + type: Number, + default: 0 + } + }, + data: function() { + return { + clicked: !1, + size: {} + }; + }, + mounted: function() { + this.$el.addEventListener("mousedown", this.start, !1); + }, + computed: { + className: function() { + return { + "vue-modal-resizer": !0, + clicked: this.clicked + }; + } + }, + methods: { + start: function(event) { + this.clicked = !0, window.addEventListener("mousemove", this.mousemove, !1), window.addEventListener("mouseup", this.stop, !1), + event.stopPropagation(), event.preventDefault(); + }, + stop: function() { + this.clicked = !1, window.removeEventListener("mousemove", this.mousemove, !1), + window.removeEventListener("mouseup", this.stop, !1), this.$emit("resize-stop", { + element: this.$el.parentElement, + size: this.size + }); + }, + mousemove: function(event) { + this.resize(event); + }, + resize: function(event) { + var el = this.$el.parentElement; + if (el) { + var width = event.clientX - el.offsetLeft, height = event.clientY - el.offsetTop; + width = (0, _util.inRange)(this.minWidth, window.innerWidth, width), height = (0, + _util.inRange)(this.minHeight, window.innerHeight, height), this.size = { + width: width, + height: height + }, el.style.width = width + "px", el.style.height = height + "px", this.$emit("resize", { + element: el, + size: this.size + }); + } + } + } + }; + }, function(module, exports, __webpack_require__) { + "use strict"; + Object.defineProperty(exports, "__esModule", { + value: !0 + }); + var _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj) { + return typeof obj; + } : function(obj) { + return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }, types = [ { + name: "px", + regexp: new RegExp("^[-+]?[0-9]*.?[0-9]+px$") + }, { + name: "%", + regexp: new RegExp("^[-+]?[0-9]*.?[0-9]+%$") + }, { + name: "px", + regexp: new RegExp("^[-+]?[0-9]*.?[0-9]+$") + } ], getType = function(value) { + if ("auto" === value) return { + type: value, + value: 0 + }; + for (var i = 0; i < types.length; i++) { + var type = types[i]; + if (type.regexp.test(value)) return { + type: type.name, + value: parseFloat(value) + }; + } + return { + type: "", + value: value + }; + }, parse = exports.parse = function(value) { + switch (void 0 === value ? "undefined" : _typeof(value)) { + case "number": + return { + type: "px", + value: value + }; + + case "string": + return getType(value); + + default: + return { + type: "", + value: value + }; + } + }; + exports.default = parse; + }, function(module, exports) {}, function(module, exports) {}, function(module, exports) {}, function(module, exports, __webpack_require__) { + __webpack_require__(11); + var Component = __webpack_require__(0)(__webpack_require__(7), __webpack_require__(15), null, null); + Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Resizer.vue", + Component.esModule && Object.keys(Component.esModule).some(function(key) { + return "default" !== key && "__esModule" !== key; + }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."), + module.exports = Component.exports; + }, function(module, exports) { + module.exports = { + render: function() { + var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h; + return _c("modal", { + attrs: { + name: "dialog", + height: "auto", + classes: [ "v--modal", "vue-dialog", this.params.class ], + width: _vm.width, + "pivot-y": .3, + adaptive: !0, + clickToClose: _vm.clickToClose, + transition: _vm.transition + }, + on: { + "before-open": _vm.beforeOpened, + "before-close": _vm.beforeClosed, + opened: function($event) { + _vm.$emit("opened", $event); + }, + closed: function($event) { + _vm.$emit("closed", $event); + } + } + }, [ _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: "vue-dialog-buttons" + }, _vm._l(_vm.buttons, function(button, i) { + return _c("button", { + key: i, + class: button.class || "vue-dialog-button", + 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: "vue-dialog-buttons-none" + }) ]); + }, + staticRenderFns: [] + }, module.exports.render._withStripped = !0; + }, function(module, exports) { + module.exports = { + render: function() { + var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h; + return _c("transition", { + attrs: { + name: "overlay-fade" + } + }, [ _vm.visibility.overlay ? _c("div", { + ref: "overlay", + class: _vm.overlayClass, + attrs: { + "aria-expanded": _vm.visible.toString(), + "data-modal": _vm.name + }, + on: { + mousedown: function($event) { + $event.stopPropagation(), _vm.onBackgroundClick($event); + }, + touchstart: function($event) { + $event.stopPropagation(), _vm.onBackgroundClick($event); + } + } + }, [ _c("div", { + staticClass: "v--modal-top-right" + }, [ _vm._t("top-right") ], 2), _vm._v(" "), _c("transition", { + attrs: { + name: _vm.transition + } + }, [ _vm.visibility.modal ? _c("div", { + ref: "modal", + class: _vm.modalClass, + style: _vm.modalStyle, + on: { + mousedown: function($event) { + $event.stopPropagation(); + }, + touchstart: function($event) { + $event.stopPropagation(); + } + } + }, [ _vm._t("default"), _vm._v(" "), _vm.resizable && !_vm.isAutoHeight ? _c("resizer", { + attrs: { + "min-width": _vm.minWidth, + "min-height": _vm.minHeight + }, + on: { + resize: _vm.onModalResize + } + }) : _vm._e() ], 2) : _vm._e() ]) ], 1) : _vm._e() ]); + }, + staticRenderFns: [] + }, module.exports.render._withStripped = !0; + }, function(module, exports) { + module.exports = { + render: function() { + var _vm = this, _h = _vm.$createElement; + return (_vm._self._c || _h)("div", { + class: _vm.className + }); + }, + staticRenderFns: [] + }, module.exports.render._withStripped = !0; + } ]); +}); \ No newline at end of file diff --git a/dist/styles.css b/dist/styles.css new file mode 100644 index 0000000..3ad389e --- /dev/null +++ b/dist/styles.css @@ -0,0 +1,151 @@ + +.v--modal-block-scroll { + overflow: hidden; + position: fixed; + width: 100vw; +} +.v--modal-overlay { + position: fixed; + box-sizing: border-box; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background: rgba(0, 0, 0, 0.2); + z-index: 999; + opacity: 1; +} +.v--modal-overlay.scrollable { + height: 100%; + min-height: 100vh; + overflow-y: auto; + padding-bottom: 10px; + -webkit-overflow-scrolling: touch; +} +.v--modal-overlay .v--modal-box { + position: relative; + overflow: hidden; + box-sizing: border-box; +} +.v--modal-overlay.scrollable .v--modal-box { + margin-bottom: 2px; + /* transition: top 0.2s ease; */ +} +.v--modal { + background-color: white; + text-align: left; + border-radius: 3px; + box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4); + padding: 0; +} +.v--modal.v--modal-fullscreen { + width: 100vw; + height: 100vh; + margin: 0; + left: 0; + top: 0; +} +.v--modal-top-right { + display: block; + position: absolute; + right: 0; + top: 0; +} +.overlay-fade-enter-active, +.overlay-fade-leave-active { + transition: all 0.2s; +} +.overlay-fade-enter, +.overlay-fade-leave-active { + opacity: 0; +} +.nice-modal-fade-enter-active, +.nice-modal-fade-leave-active { + transition: all 0.4s; +} +.nice-modal-fade-enter, +.nice-modal-fade-leave-active { + opacity: 0; + transform: translateY(-20px); +} + +.vue-modal-resizer { + display: block; + overflow: hidden; + position: absolute; + width: 12px; + height: 12px; + right: 0; + bottom: 0; + z-index: 9999999; + background: transparent; + cursor: se-resize; +} +.vue-modal-resizer::after { + display: block; + position: absolute; + content: ''; + background: transparent; + left: 0; + top: 0; + width: 0; + height: 0; + border-bottom: 10px solid #ddd; + border-left: 10px solid transparent; +} +.vue-modal-resizer.clicked::after { + border-bottom: 10px solid #369be9; +} + +.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; + font-size: 14px; +} +.vue-dialog .dialog-c-title { + font-weight: 600; + padding-bottom: 15px; +} +.vue-dialog .dialog-c-text { +} +.vue-dialog .vue-dialog-buttons { + display: flex; + flex: 0 1 auto; + width: 100%; + border-top: 1px solid #eee; +} +.vue-dialog .vue-dialog-buttons-none { + width: 100%; + padding-bottom: 15px; +} +.vue-dialog-button { + font-size: 12px !important; + background: transparent; + padding: 0; + margin: 0; + border: 0; + cursor: pointer; + box-sizing: border-box; + line-height: 40px; + height: 40px; + color: inherit; + font: inherit; + outline: none; +} +.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/package.json b/package.json index 9c2b84f..239b855 100644 --- a/package.json +++ b/package.json @@ -8,22 +8,21 @@ "type": "git", "url": "https://github.com/euvl/vue-js-modal.git" }, - "keywords": [ - "vue", - "vuejs", - "modal", - "vue-js-modal" - ], + "keywords": ["vue", "vuejs", "modal", "vue-js-modal"], "bugs": { "url": "https://github.com/euvl/vue-js-modal/issues" }, "scripts": { - "build:client": "webpack --config ./build/webpack.client.config.js --progress --hide-modules", - "build:srr": "webpack --config ./build/webpack.srr.config.js --progress --hide-modules", - "build:srr-no-css": "webpack --config ./build/webpack.srr-no-css.config.js --progress --hide-modules", + "build:client": + "webpack --config ./build/webpack.client.config.js --progress --hide-modules", + "build:ssr": + "webpack --config ./build/webpack.ssr.config.js --progress --hide-modules", + "build:ssr-no-css": + "webpack --config ./build/webpack.ssr-no-css.config.js --progress --hide-modules", "lint": "eslint --ext .js,.vue src test/unit/specs", "unit": "./node_modules/karma/bin/karma start test/unit/karma.conf.js", - "build": "npm run lint && npm run unit && npm run build:client && npm run build:srr" + "build": + "npm run unit && npm run build:client && npm run build:ssr && npm run build:ssr-no-css" }, "license": "MIT", "devDependencies": { @@ -40,6 +39,7 @@ "eslint-plugin-html": "^2.0.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^2.0.1", + "extract-text-webpack-plugin": "^2.1.2", "file-loader": "^0.9.0", "jasmine-core": "^2.7.0", "karma": "^1.4.1", diff --git a/src/Dialog.vue b/src/Dialog.vue index 19df0c0..c288b3d 100644 --- a/src/Dialog.vue +++ b/src/Dialog.vue @@ -54,40 +54,40 @@ export default { default: 'fade' } }, - data () { + data() { return { params: {}, defaultButtons: [{ title: 'CLOSE' }] } }, computed: { - buttons () { + buttons() { return this.params.buttons || this.defaultButtons }, /** * Returns FLEX style with correct width for arbitrary number of * buttons. */ - buttonStyle () { + buttonStyle() { return { flex: `1 1 ${100 / this.buttons.length}%` } } }, methods: { - beforeOpened (event) { + beforeOpened(event) { window.addEventListener('keyup', this.onKeyUp) this.params = event.params || {} this.$emit('before-opened', event) }, - beforeClosed (event) { + beforeClosed(event) { window.removeEventListener('keyup', this.onKeyUp) this.params = {} this.$emit('before-closed', event) }, - click (i, event, source = 'click') { + click(i, event, source = 'click') { const button = this.buttons[i] if (button && typeof button.handler === 'function') { @@ -96,11 +96,12 @@ export default { this.$modal.hide('dialog') } }, - onKeyUp (event) { + onKeyUp(event) { if (event.which === 13 && this.buttons.length > 0) { - const buttonIndex = this.buttons.length === 1 - ? 0 - : this.buttons.findIndex(button => button.default) + const buttonIndex = + this.buttons.length === 1 + ? 0 + : this.buttons.findIndex(button => button.default) if (buttonIndex !== -1) { this.click(buttonIndex, event, 'keypress') diff --git a/src/Resizer.vue b/src/Resizer.vue index e40c313..c56dc3f 100644 --- a/src/Resizer.vue +++ b/src/Resizer.vue @@ -14,23 +14,24 @@ export default { minWidth: { type: Number, default: 0 - }}, - data () { + } + }, + data() { return { clicked: false, size: {} } }, - mounted () { + mounted() { this.$el.addEventListener('mousedown', this.start, false) }, computed: { - className () { - return {'vue-modal-resizer': true, 'clicked': this.clicked} + className() { + return { 'vue-modal-resizer': true, clicked: this.clicked } } }, methods: { - start (event) { + start(event) { this.clicked = true window.addEventListener('mousemove', this.mousemove, false) @@ -39,7 +40,7 @@ export default { event.stopPropagation() event.preventDefault() }, - stop () { + stop() { this.clicked = false window.removeEventListener('mousemove', this.mousemove, false) @@ -50,10 +51,10 @@ export default { size: this.size }) }, - mousemove (event) { + mousemove(event) { this.resize(event) }, - resize (event) { + resize(event) { var el = this.$el.parentElement if (el) { @@ -63,7 +64,7 @@ export default { width = inRange(this.minWidth, window.innerWidth, width) height = inRange(this.minHeight, window.innerHeight, height) - this.size = {width, height} + this.size = { width, height } el.style.width = width + 'px' el.style.height = height + 'px' @@ -104,6 +105,6 @@ export default { } .vue-modal-resizer.clicked::after { - border-bottom: 10px solid #369BE9; + border-bottom: 10px solid #369be9; } diff --git a/src/index.js b/src/index.js index 1ed9163..23d2032 100644 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,7 @@ import Dialog from './Dialog.vue' const defaultComponentName = 'modal' const Plugin = { - install (Vue, options = {}) { + install(Vue, options = {}) { /** * Makes sure that plugin can be insstalled only once */ @@ -18,15 +18,15 @@ const Plugin = { * Plugin API */ Vue.prototype.$modal = { - show (name, params) { + show(name, params) { Plugin.event.$emit('toggle', name, true, params) }, - hide (name, params) { + hide(name, params) { Plugin.event.$emit('toggle', name, false, params) }, - toggle (name, params) { + toggle(name, params) { Plugin.event.$emit('toggle', name, undefined, params) } } diff --git a/src/parser.js b/src/parser.js index 7418846..4de3c75 100644 --- a/src/parser.js +++ b/src/parser.js @@ -19,7 +19,7 @@ const types = [ } ] -var getType = (value) => { +var getType = value => { if (value === 'auto') { return { type: value, @@ -43,7 +43,7 @@ var getType = (value) => { } } -export const parse = (value) => { +export const parse = value => { switch (typeof value) { case 'number': return { type: 'px', value }