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

Updated demo

Browse Source
This commit is contained in:
euvl
2017-04-07 15:14:49 +01:00
parent 213062e5fc
commit ff173186d0
10 changed files with 178 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
_config.yml
View File

@@ -1 +0,0 @@
theme: jekyll-theme-cayman

2
demo/index.html
View File

@@ -3,6 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Vue Modal Examples</title> <title>Vue Modal Examples</title>
<meta name="description" content="Vue.js modal component. Simple, clean with no external dependencies."/>
<meta name="keywords" content="vue, vuejs, modal, dialog, box, modal box, dialog box, vue-modal vuejs-modal.">
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

3
demo/package.json
View File

@@ -6,8 +6,7 @@
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules" "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}, },
"dependencies": { "dependencies": {
"vue": "^2.0.0", "vue": "^2.0.0"
"vue-js-modal": "^1.0.13"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "^6.0.0", "babel-core": "^6.0.0",

25
demo/src/App.vue
View File

@@ -1,6 +1,13 @@
<template> <template>
<div id="app"> <div id="app">
<modal name="example-modal" transition="nice-modal-fade" :min-width="200" :min-height="200" :delay="100" :adaptive="adaptive" :resizable="resizable"> <modal name="example-modal"
transition="nice-modal-fade"
:min-width="200"
:min-height="200"
:delay="100"
:adaptive="adaptive"
:resizable="resizable"
:draggable="draggable">
<div style="height: 100%; box-sizing: border-box; padding: 10px; font-size: 13px; overflow: auto"> <div style="height: 100%; box-sizing: border-box; padding: 10px; font-size: 13px; overflow: auto">
Appropriately exploit professional infrastructures rather than unique growth strategies. Assertively build leveraged growth strategies vis-a-vis multimedia based vortals. Progressively simplify cross-platform value through interactive imperatives. Objectively Appropriately exploit professional infrastructures rather than unique growth strategies. Assertively build leveraged growth strategies vis-a-vis multimedia based vortals. Progressively simplify cross-platform value through interactive imperatives. Objectively
implement enabled web services after plug-and-play ROI. Distinctively impact inexpensive schemas before installed base imperatives. Holisticly benchmark pandemic process improvements without wireless experiences. Efficiently create worldwide partnerships implement enabled web services after plug-and-play ROI. Distinctively impact inexpensive schemas before installed base imperatives. Holisticly benchmark pandemic process improvements without wireless experiences. Efficiently create worldwide partnerships
@@ -47,10 +54,11 @@
</table> </table>
<div style="margin-top: 20px; margin-bottom: 20px;"> <div style="margin-top: 20px; margin-bottom: 20px;">
<button @click="show(false, false)">Simple</button> <button @click="show()">Simple</button>
<button @click="show(true, false)">Resizable</button> <button @click="show(true)">Resizable</button>
<button @click="show(false, true)">Adaptive</button> <button @click="show(false, true)">Adaptive</button>
<button @click="show(true, true)">Mixed</button> <button @click="show(true, true)">Mixed</button>
<button @click="show(false, false, true)">Draggable (under development)</button>
</div> </div>
<table class="props"> <table class="props">
@@ -92,6 +100,7 @@ export default {
return { return {
resizable: false, resizable: false,
adaptive: false, adaptive: false,
draggable: false,
props: { props: {
name: { name: {
@@ -137,10 +146,18 @@ export default {
} }
}, },
methods: { methods: {
show(resizable, adaptive) { show(resizable = false, adaptive = false, draggable = false) {
this.resizable = resizable this.resizable = resizable
this.adaptive = adaptive this.adaptive = adaptive
this.draggable = draggable
/*
$nextTick is required because the data model with new
"resizable, adaptive, draggable" values is not updated yet.. eh
*/
this.$nextTick(() => {
this.$modal.show('example-modal') this.$modal.show('example-modal')
})
} }
} }
} }

2
demo/src/main.js
View File

@@ -1,6 +1,6 @@
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import VueJsModal from 'vue-js-modal' import VueJsModal from 'plugin'
Vue.use(VueJsModal) Vue.use(VueJsModal)

7
demo/webpack.config.js
View File

@@ -15,13 +15,9 @@ module.exports = {
loader: 'vue-loader', loader: 'vue-loader',
options: { options: {
loaders: { 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', 'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
} }
// other vue-loader options go here
} }
}, },
{ {
@@ -40,7 +36,8 @@ module.exports = {
}, },
resolve: { resolve: {
alias: { alias: {
'vue$': 'vue/dist/vue.esm.js' 'vue$': 'vue/dist/vue.esm.js',
'plugin': path.resolve(__dirname, "../dist/index.js")
} }
}, },
devServer: { devServer: {

80
dist/index.js vendored
View File

@@ -4,9 +4,9 @@
else if(typeof define === 'function' && define.amd) else if(typeof define === 'function' && define.amd)
define([], factory); define([], factory);
else if(typeof exports === 'object') else if(typeof exports === 'object')
exports["VueJsToggleButton"] = factory(); exports["VueJsModal"] = factory();
else else
root["VueJsToggleButton"] = factory(); root["VueJsModal"] = factory();
})(this, function() { })(this, function() {
return /******/ (function(modules) { // webpackBootstrap return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache /******/ // The module cache
@@ -514,6 +514,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
// //
// //
// //
//
@@ -538,6 +539,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
type: Boolean, type: Boolean,
default: false default: false
}, },
draggable: {
type: [Boolean, String],
default: false
},
transition: { transition: {
type: String type: String
}, },
@@ -545,14 +550,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
type: [String, Array], type: [String, Array],
default: 'nice-modal' default: 'nice-modal'
}, },
width: {
type: Number,
default: 600
},
height: {
type: Number,
default: 300
},
minWidth: { minWidth: {
type: Number, type: Number,
default: 0 default: 0
@@ -561,6 +558,14 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
type: Number, type: Number,
default: 0 default: 0
}, },
width: {
type: Number,
default: 600
},
height: {
type: Number,
default: 300
},
pivotX: { pivotX: {
type: Number, type: Number,
default: 0.5 default: 0.5
@@ -590,7 +595,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
window: { window: {
width: window.innerWidth, width: window.innerWidth,
height: window.innerWidth height: window.innerWidth
} },
draggableElement: false
}; };
}, },
@@ -598,24 +605,34 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
visible: function visible(value) { visible: function visible(value) {
var _this = this; var _this = this;
if (this.delay > 0) { // if (this.delay > 0) {
if (value) { if (value) {
this.visibility.overlay = true; this.visibility.overlay = true;
setTimeout(function () { setTimeout(function () {
_this.visibility.modal = true; _this.visibility.modal = true;
_this.$nextTick(function () {
_this.addDraggableListeners();
});
}, this.delay); }, this.delay);
} else { } else {
this.visibility.modal = false; this.visibility.modal = false;
setTimeout(function () { setTimeout(function () {
_this.visibility.overlay = false; _this.visibility.overlay = false;
}, this.delay); _this.$nextTick(function () {
} _this.removeDraggableListeners();
} else {
this.visibility.overlay = value;
this.$nextTick(function () {
_this.visibility.modal = value;
}); });
}, this.delay);
// this.removeDraggableHandlers()
} }
// } else {
// this.visibility.overlay = value
// this.$nextTick(() => {
// this.visibility.modal = value
// })
// }
} }
}, },
created: function created() { created: function created() {
@@ -705,6 +722,30 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
var afterEvent = this.genEventObject({ state: state, params: params }); var afterEvent = this.genEventObject({ state: state, params: params });
this.$emit(afterEventName, afterEvent); this.$emit(afterEventName, afterEvent);
} }
},
getDraggableElement: function getDraggableElement() {
var selector = typeof this.draggable !== 'string' ? '.modal' : this.draggable;
if (selector) {
var handler = this.$refs.overlay.querySelector(selector);
if (handler) {
return handler;
}
}
},
addDraggableListeners: function addDraggableListeners() {
if (!this.draggable) {
return;
}
var dragger = this.getDraggableElement();
if (dragger) {
console.log(dragger);
}
},
removeDraggableListeners: function removeDraggableListeners() {
console.log('removing draggable handlers');
} }
} }
}; };
@@ -814,7 +855,7 @@ exports = module.exports = __webpack_require__(0)();
// module // module
exports.push([module.i, ".nice-modal-overlay[data-v-40dd3b1e]{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.2);z-index:999;opacity:1}.nice-modal-overlay .modal[data-v-40dd3b1e]{position:relative;overflow:hidden;box-sizing:border-box;background-color:#fff}.overlay-fade-enter-active[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{transition:all .2s}.overlay-fade-enter[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{opacity:0}.nice-modal-fade-enter-active[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{transition:all .4s}.nice-modal-fade-enter[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{opacity:0;transform:translateY(-20px)}.nice-modal[data-v-40dd3b1e]{background:#fff;text-align:left;border-radius:3px;box-shadow:0 20px 60px -2px rgba(27,33,58,.4);padding:0}.nice-modal.nice-modal-fullscreen[data-v-40dd3b1e]{width:100vw;height:100vh;margin:0;left:0;top:0}", ""]); exports.push([module.i, ".nice-modal-overlay[data-v-40dd3b1e]{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.2);z-index:999;opacity:1}.nice-modal-overlay .modal[data-v-40dd3b1e]{position:relative;overflow:hidden;box-sizing:border-box;background-color:#fff}.overlay-fade-enter-active[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{transition:all .2s}.overlay-fade-enter[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{opacity:0}.nice-modal-fade-enter-active[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{transition:all .4s}.nice-modal-fade-enter[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{opacity:0;transform:translateY(-20px)}.nice-modal[data-v-40dd3b1e]{background:#fff;text-align:left;border-radius:3px;box-shadow:0 20px 60px -2px rgba(27,33,58,.4);padding:0;background:#ff0!important}.nice-modal.nice-modal-fullscreen[data-v-40dd3b1e]{width:100vw;height:100vh;margin:0;left:0;top:0}", ""]);
// exports // exports
@@ -865,6 +906,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
"name": "overlay-fade" "name": "overlay-fade"
} }
}, [(_vm.visibility.overlay) ? _c('div', { }, [(_vm.visibility.overlay) ? _c('div', {
ref: "overlay",
staticClass: "nice-modal-overlay", staticClass: "nice-modal-overlay",
on: { on: {
"mousedown": function($event) { "mousedown": function($event) {

80
src/Modal.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<transition name="overlay-fade"> <transition name="overlay-fade">
<div v-if="visibility.overlay" <div v-if="visibility.overlay"
ref="overlay"
class="nice-modal-overlay" class="nice-modal-overlay"
@mousedown.stop="toggle(false)"> @mousedown.stop="toggle(false)">
<transition :name="transition"> <transition :name="transition">
@@ -43,6 +44,10 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
draggable: {
type: [Boolean, String],
default: false
},
transition: { transition: {
type: String, type: String,
}, },
@@ -50,14 +55,6 @@
type: [String, Array], type: [String, Array],
default: 'nice-modal', default: 'nice-modal',
}, },
width: {
type: Number,
default: 600
},
height: {
type: Number,
default: 300
},
minWidth: { minWidth: {
type: Number, type: Number,
default: 0 default: 0
@@ -66,6 +63,14 @@
type: Number, type: Number,
default: 0 default: 0
}, },
width: {
type: Number,
default: 600
},
height: {
type: Number,
default: 300
},
pivotX: { pivotX: {
type: Number, type: Number,
default: 0.5 default: 0.5
@@ -95,29 +100,41 @@
window: { window: {
width: window.innerWidth, width: window.innerWidth,
height: window.innerWidth height: window.innerWidth
} },
draggableElement: false
}; };
}, },
watch: { watch: {
visible (value) { visible (value) {
if (this.delay > 0) { // if (this.delay > 0) {
if (value) { if (value) {
this.visibility.overlay = true this.visibility.overlay = true
setTimeout(() => { setTimeout(() => {
this.visibility.modal = true this.visibility.modal = true
this.$nextTick(() => {
this.addDraggableListeners()
})
}, this.delay) }, this.delay)
} else { } else {
this.visibility.modal = false this.visibility.modal = false
setTimeout(() => { setTimeout(() => {
this.visibility.overlay = false this.visibility.overlay = false
}, this.delay)
}
} else {
this.visibility.overlay = value
this.$nextTick(() => { this.$nextTick(() => {
this.visibility.modal = value this.removeDraggableListeners()
}) })
}, this.delay)
// this.removeDraggableHandlers()
} }
// } else {
// this.visibility.overlay = value
// this.$nextTick(() => {
// this.visibility.modal = value
// })
// }
}, },
}, },
created () { created () {
@@ -152,7 +169,7 @@
width: this.modal.width + 'px', width: this.modal.width + 'px',
height: this.modal.height + 'px' height: this.modal.height + 'px'
} }
} },
}, },
methods: { methods: {
onWindowResize() { onWindowResize() {
@@ -204,7 +221,36 @@
this.$emit(afterEventName, afterEvent) this.$emit(afterEventName, afterEvent)
} }
}, },
getDraggableElement () {
var selector = typeof this.draggable !== 'string'
? '.modal'
: this.draggable
if (selector) {
var handler = this.$refs.overlay.querySelector(selector)
if (handler) {
return handler
}
}
}, },
addDraggableListeners () {
if (!this.draggable) {
return;
}
let dragger = this.getDraggableElement()
if (dragger) {
console.log(dragger)
}
},
removeDraggableListeners () {
console.log('removing draggable handlers')
}
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -251,6 +297,8 @@
box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4); box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);
padding: 0; padding: 0;
//background: yellow !important;
&.nice-modal-fullscreen { &.nice-modal-fullscreen {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;

1
src/index.js
View File

@@ -10,6 +10,7 @@ const ModalPlugin = {
show(name, params) { show(name, params) {
ModalPlugin.event.$emit('toggle', name, true, params) ModalPlugin.event.$emit('toggle', name, true, params)
}, },
hide(name, params) { hide(name, params) {
ModalPlugin.event.$emit('toggle', name, false, params) ModalPlugin.event.$emit('toggle', name, false, params)
} }

15
webpack.config.js
View File

@@ -15,13 +15,9 @@ module.exports = {
loader: 'vue-loader', loader: 'vue-loader',
options: { options: {
loaders: { 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', 'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
} }
// other vue-loader options go here
} }
}, },
{ {
@@ -54,12 +50,10 @@ module.exports = {
} }
if (process.env.NODE_ENV === 'production') { if (process.env.NODE_ENV === 'production') {
module.exports.entry = './src/index.js'
module.exports.output = { module.exports.output = {
path:'./dist', path:'./dist',
filename:'index.js', filename:'index.js',
library:'VueJsToggleButton', library:'VueJsModal',
libraryTarget: 'umd' libraryTarget: 'umd'
} }
@@ -71,10 +65,9 @@ if (process.env.NODE_ENV === 'production') {
} }
}), }),
/*new webpack.optimize.UglifyJsPlugin({ /*new webpack.optimize.UglifyJsPlugin({
sourceMap: true, sourceMap: false,
compress: { extractComments: true,
warnings: false compress: false
}
}),*/ }),*/
new webpack.LoaderOptionsPlugin({ new webpack.LoaderOptionsPlugin({
minimize: true minimize: true