mirror of
https://github.com/KevinMidboe/vue-js-modal.git
synced 2025-10-29 18:00:20 +00:00
Added build target without css, started using prettier intead of linting
This commit is contained in:
Yev Vlasenko
@@ -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'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
50
build/webpack.ssr-no-css.config.js
Normal file
50
build/webpack.ssr-no-css.config.js
Normal file
@@ -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')
|
||||||
|
]
|
||||||
|
}
|
||||||
4
dist/index.js
vendored
4
dist/index.js
vendored
@@ -718,9 +718,9 @@
|
|||||||
}, function(module, exports, __webpack_require__) {
|
}, 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", "" ]);
|
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__) {
|
}, 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__) {
|
}, 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__) {
|
}, function(module, exports, __webpack_require__) {
|
||||||
__webpack_require__(20);
|
__webpack_require__(20);
|
||||||
var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null);
|
var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null);
|
||||||
|
|||||||
4
dist/ssr.index.js
vendored
4
dist/ssr.index.js
vendored
@@ -672,9 +672,9 @@
|
|||||||
}, function(module, exports, __webpack_require__) {
|
}, 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", "" ]);
|
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__) {
|
}, 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__) {
|
}, 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__) {
|
}, function(module, exports, __webpack_require__) {
|
||||||
__webpack_require__(20);
|
__webpack_require__(20);
|
||||||
var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null);
|
var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null);
|
||||||
|
|||||||
740
dist/ssr.nocss.js
vendored
Normal file
740
dist/ssr.nocss.js
vendored
Normal file
@@ -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;
|
||||||
|
} ]);
|
||||||
|
});
|
||||||
151
dist/styles.css
vendored
Normal file
151
dist/styles.css
vendored
Normal file
@@ -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;
|
||||||
|
}
|
||||||
20
package.json
20
package.json
@@ -8,22 +8,21 @@
|
|||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/euvl/vue-js-modal.git"
|
"url": "https://github.com/euvl/vue-js-modal.git"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": ["vue", "vuejs", "modal", "vue-js-modal"],
|
||||||
"vue",
|
|
||||||
"vuejs",
|
|
||||||
"modal",
|
|
||||||
"vue-js-modal"
|
|
||||||
],
|
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/euvl/vue-js-modal/issues"
|
"url": "https://github.com/euvl/vue-js-modal/issues"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build:client": "webpack --config ./build/webpack.client.config.js --progress --hide-modules",
|
"build:client":
|
||||||
"build:srr": "webpack --config ./build/webpack.srr.config.js --progress --hide-modules",
|
"webpack --config ./build/webpack.client.config.js --progress --hide-modules",
|
||||||
"build:srr-no-css": "webpack --config ./build/webpack.srr-no-css.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",
|
"lint": "eslint --ext .js,.vue src test/unit/specs",
|
||||||
"unit": "./node_modules/karma/bin/karma start test/unit/karma.conf.js",
|
"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",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@@ -40,6 +39,7 @@
|
|||||||
"eslint-plugin-html": "^2.0.0",
|
"eslint-plugin-html": "^2.0.0",
|
||||||
"eslint-plugin-promise": "^3.4.0",
|
"eslint-plugin-promise": "^3.4.0",
|
||||||
"eslint-plugin-standard": "^2.0.1",
|
"eslint-plugin-standard": "^2.0.1",
|
||||||
|
"extract-text-webpack-plugin": "^2.1.2",
|
||||||
"file-loader": "^0.9.0",
|
"file-loader": "^0.9.0",
|
||||||
"jasmine-core": "^2.7.0",
|
"jasmine-core": "^2.7.0",
|
||||||
"karma": "^1.4.1",
|
"karma": "^1.4.1",
|
||||||
|
|||||||
@@ -98,7 +98,8 @@ export default {
|
|||||||
},
|
},
|
||||||
onKeyUp(event) {
|
onKeyUp(event) {
|
||||||
if (event.which === 13 && this.buttons.length > 0) {
|
if (event.which === 13 && this.buttons.length > 0) {
|
||||||
const buttonIndex = this.buttons.length === 1
|
const buttonIndex =
|
||||||
|
this.buttons.length === 1
|
||||||
? 0
|
? 0
|
||||||
: this.buttons.findIndex(button => button.default)
|
: this.buttons.findIndex(button => button.default)
|
||||||
|
|
||||||
|
|||||||
@@ -14,7 +14,8 @@ export default {
|
|||||||
minWidth: {
|
minWidth: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0
|
default: 0
|
||||||
}},
|
}
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
clicked: false,
|
clicked: false,
|
||||||
@@ -26,7 +27,7 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
className() {
|
className() {
|
||||||
return {'vue-modal-resizer': true, 'clicked': this.clicked}
|
return { 'vue-modal-resizer': true, clicked: this.clicked }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -104,6 +105,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.vue-modal-resizer.clicked::after {
|
.vue-modal-resizer.clicked::after {
|
||||||
border-bottom: 10px solid #369BE9;
|
border-bottom: 10px solid #369be9;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ const types = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
var getType = (value) => {
|
var getType = value => {
|
||||||
if (value === 'auto') {
|
if (value === 'auto') {
|
||||||
return {
|
return {
|
||||||
type: value,
|
type: value,
|
||||||
@@ -43,7 +43,7 @@ var getType = (value) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const parse = (value) => {
|
export const parse = value => {
|
||||||
switch (typeof value) {
|
switch (typeof value) {
|
||||||
case 'number':
|
case 'number':
|
||||||
return { type: 'px', value }
|
return { type: 'px', value }
|
||||||
|
|||||||
Reference in New Issue
Block a user