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

Refactored, added es5 build

Browse Source
This commit is contained in:
euvl
2017-04-05 11:34:38 +01:00
parent 5109f89848
commit 3d9c97722f
15 changed files with 10570 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -1,4 +1,4 @@
.DS_Store
node_modules/
dist/
npm-debug.log
*.map

0
Modal/README.md
View File

30
Modal/index.js
View File

@@ -1,30 +0,0 @@
import Vue from 'vue';
import Modal from './Modal.vue';
const VueModal = {
install(Vue, options = {}) {
if (!this.hasOwnProperty("event")) {
this.event = new Vue();
}
const $modal = {
show(name, params) {
VueModal.event.$emit('toggle', name, true, params);
},
hide(name, params) {
VueModal.event.$emit('toggle', name, false, params);
}
};
Object.defineProperty(Vue.prototype, '$modal', {
get: () => $modal
});
Vue.component('modal', Modal);
return null;
},
};
Vue.use(VueModal);
export default VueModal;

0
examples/index.html → demo/index.html
View File

26
demo/package.json Normal file
View File

@@ -0,0 +1,26 @@
{
"name": "demo",
"version": "1.0.0",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.0.0",
"vue-js-modal": "*"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"node-sass": "^4.5.0",
"sass-loader": "^5.0.1",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}

6
examples/src/App.vue → demo/src/App.vue
View File

@@ -134,9 +134,9 @@ export default {
},
methods: {
show(resizable, adaptive) {
this.resizable = resizable;
this.adaptive = adaptive;
this.$modal.show('example-modal');
this.resizable = resizable
this.adaptive = adaptive
this.$modal.show('example-modal')
}
}
}

8
demo/src/main.js Normal file
View File

@@ -0,0 +1,8 @@
import Vue from 'vue'
import App from './App.vue'
import Modal from 'vue-js-modal'
new Vue({
el: '#app',
render: h => h(App)
})

75
demo/webpack.config.js Normal file
View File

@@ -0,0 +1,75 @@
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}

10340
dist/index.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

8
examples/src/main.js
View File

@@ -1,8 +0,0 @@
import Vue from 'vue';
import App from './App.vue';
import Modal from '../../Modal';
new Vue({
el: '#app',
render: h => h(App)
});

13
package.json
View File

@@ -1,10 +1,9 @@
{
"name": "vue-js-modal",
"description": "Modal Component for Vue.js",
"version": "1.0.3",
"version": "1.0.10",
"author": "euvl <yev.vlasenko@gmail.com>",
"private": false,
"main": "./Modal/index.js",
"main": "dist/index.js",
"repository": {
"type": "git",
"url": "https://github.com/euvl/vue-js-modal.git"
@@ -17,10 +16,11 @@
"bugs": {
"url": "https://github.com/euvl/vue-js-modal/issues"
},
"license": "MIT",
"scripts": {
"examples": "cross-env NODE_ENV=development webpack-dev-server --open --hot"
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"license": "MIT",
"devDependencies": {
"vue": "^2.1.10",
"babel-core": "^6.0.0",
@@ -37,5 +37,8 @@
"vue-template-compiler": "^2.1.0",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
},
"dependencies": {
"vue": "^2.2.6"
}
}

68
Modal/Modal.vue → src/Modal.vue
View File

@@ -5,10 +5,10 @@
@mousedown.stop="toggle(false)">
<transition :name="transition">
<div v-if="visibility.modal"
v-bind:class="modalClass"
v-bind:style="modalStyle"
v-on:mousedown.stop
ref="modal">
ref="modal"
:class="modalClass"
:style="modalStyle"
@mousedown.stop>
<slot></slot>
<resizer v-if="resizable"
:min-width="minWidth"
@@ -20,9 +20,9 @@
</transition>
</template>
<script>
import Vue from 'vue';
import Modal from './index';
import Resizer from './Resizer.vue';
import Vue from 'vue'
import Modal from './index'
import Resizer from './Resizer.vue'
export default {
name: 'Modal',
@@ -94,26 +94,26 @@
visible(value) {
if (this.delay > 0) {
if (value) {
this.visibility.overlay = true;
setTimeout(() => this.visibility.modal = true, this.delay);
this.visibility.overlay = true
setTimeout(() => this.visibility.modal = true, this.delay)
} else {
this.visibility.modal = false;
setTimeout(() => this.visibility.overlay = false, this.delay);
this.visibility.modal = false
setTimeout(() => this.visibility.overlay = false, this.delay)
}
} else {
this.visibility.overlay = value;
Vue.nextTick(() => this.visibility.modal = value);
this.visibility.overlay = value
Vue.nextTick(() => this.visibility.modal = value)
}
},
},
created() {
Modal.event.$on('toggle', (name, state, params) => {
if (name === this.name) {
this.toggle(!this.visible, params);
this.toggle(!this.visible, params)
}
});
window.addEventListener('resize', this.onWindowResize);
window.addEventListener('resize', this.onWindowResize)
},
beforeMount() {
this.onWindowResize();
@@ -121,12 +121,12 @@
computed: {
position() {
return {
left: Math.max((this.window.width - this.modal.width) / 2, 0),
top: Math.max((this.window.height - this.modal.height) / 2, 0)
left: Math.max(0.5 * (this.window.width - this.modal.width), 0),
top: Math.max(0.5 * (this.window.height - this.modal.height), 0)
}
},
modalClass() {
return ['modal', this.classes];
return ['modal', this.classes]
},
modalStyle() {
return {
@@ -139,8 +139,8 @@
},
methods: {
onWindowResize() {
this.window.width = window.innerWidth;
this.window.height = window.innerHeight;
this.window.width = window.innerWidth
this.window.height = window.innerHeight
if (this.adaptive) {
var width = this.window.width > this.modal.width
@@ -149,10 +149,10 @@
var height = this.window.height > this.modal.height
? this.modal.height
: this.window.height;
: this.window.height
this.modal.width = width;//Math.max(width, this.minWidth);
this.modal.height = height;//Math.max(height, this.minHeight);
this.modal.width = width // Math.max(width, this.minWidth);
this.modal.height = height // Math.max(height, this.minHeight);
}
},
genEventObject(params) {
@@ -165,38 +165,38 @@
params || {});
},
resize(event) {
this.modal.width = event.size.width;
this.modal.height = event.size.height;
this.modal.width = event.size.width
this.modal.height = event.size.height
let resizeEvent = this.genEventObject({
size: this.modal
});
this.$emit('resize', resizeEvent);
this.$emit('resize', resizeEvent)
},
toggle(state, params) {
const beforeEventName = this.visible ? 'before-close' : 'before-open';
const afterEventName = this.visible ? 'closed' : 'opened';
const beforeEventName = this.visible ? 'before-close' : 'before-open'
const afterEventName = this.visible ? 'closed' : 'opened'
let stopEventExecution = false;
let stopEventExecution = false
const beforeEvent = this.genEventObject({
stop: () => stopEventExecution = false,
state,
params
});
})
this.$emit(beforeEventName, beforeEvent);
this.$emit(beforeEventName, beforeEvent)
if (!stopEventExecution) {
this.visible = !!state;
this.visible = !!state
const afterEvent = this.genEventObject({
state,
params
});
})
this.$emit(afterEventName, afterEvent);
this.$emit(afterEventName, afterEvent)
}
},
},

51
Modal/Resizer.vue → src/Resizer.vue
View File

@@ -1,6 +1,5 @@
<template>
<div :class="{'vue-modal-resizer': true, 'clicked': clicked}">
</div>
<div :class="className"></div>
</template>
<script>
export default {
@@ -21,23 +20,28 @@ export default {
}
},
mounted() {
this.$el.addEventListener('mousedown', this.start, false);
this.$el.addEventListener('mousedown', this.start, false)
},
computed: {
className () {
return {'vue-modal-resizer': true, 'clicked': this.clicked}
}
},
methods: {
start(event) {
this.clicked = true;
this.clicked = true
window.addEventListener('mousemove', this.mousemove, false);
window.addEventListener('mouseup', this.stop, false);
window.addEventListener('mousemove', this.mousemove, false)
window.addEventListener('mouseup', this.stop, false)
event.stopPropagation();
event.preventDefault();
event.stopPropagation()
event.preventDefault()
},
stop() {
this.clicked = false;
this.clicked = false
window.removeEventListener('mousemove', this.mousemove, false);
window.removeEventListener('mouseup', this.stop, false);
window.removeEventListener('mousemove', this.mousemove, false)
window.removeEventListener('mouseup', this.stop, false)
this.$emit('resize-stop', {
element: this.$el.parentElement,
@@ -45,40 +49,39 @@ export default {
});
},
mousemove(event) {
this.resize(event);
this.resize(event)
},
resize(event) {
var el = this.$el.parentElement;
var el = this.$el.parentElement
if (el) {
var width = event.clientX - el.offsetLeft;
var height = event.clientY - el.offsetTop;
var width = event.clientX - el.offsetLeft
var height = event.clientY - el.offsetTop
if (width < this.minWidth) {
width = this.minWidth;
width = this.minWidth
}
if (width > window.innerWidth) {
width = window.innerWidth;
width = window.innerWidth
}
if (height < this.minHeight) {
height = this.minHeight;
height = this.minHeight
}
if (height > window.innerHeight) {
height = window.innerHeight;
height = window.innerHeight
}
this.size = {width, height};
el.style.width = width + 'px';
el.style.height = height + 'px';
this.size = {width, height}
el.style.width = width + 'px'
el.style.height = height + 'px'
this.$emit('resize', {
element: el,
size: this.size
});
})
}
}
}

28
src/index.js Normal file
View File

@@ -0,0 +1,28 @@
import Vue from 'vue'
import Modal from './Modal.vue'
const ModalPlugin = {
install(Vue, options = {}) {
if (!this.hasOwnProperty("event")) {
this.event = new Vue()
}
const $modal = {
show(name, params) {
ModalPlugin.event.$emit('toggle', name, true, params)
},
hide(name, params) {
ModalPlugin.event.$emit('toggle', name, false, params)
}
}
Object.defineProperty(Vue.prototype, '$modal', {
get: () => $modal
})
Vue.component('modal', Modal)
return null
},
}
export default ModalPlugin

32
webpack.config.js
View File

@@ -1,17 +1,13 @@
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './examples/src/main.js',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
filename: 'index.js'
},
externals: [
],
module: {
rules: [
{
@@ -19,9 +15,13 @@ module.exports = {
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
@@ -40,12 +40,12 @@ module.exports = {
},
resolve: {
alias: {
'vue': 'vue/dist/vue.js',
'nice-vue-components$': path.resolve(__dirname, './components/index.js')
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
@@ -54,20 +54,28 @@ module.exports = {
}
if (process.env.NODE_ENV === 'production') {
module.exports.entry = './src/index.js'
module.exports.output = {
path:'./dist',
filename:'index.js',
library:'VueJsToggleButton',
libraryTarget: 'umd'
}
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
/*new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
}),*/
new webpack.LoaderOptionsPlugin({
minimize: true
})