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>
<meta charset="utf-8">
<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>
(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),

3
demo/package.json
View File

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

27
demo/src/App.vue
View File

@@ -1,6 +1,13 @@
<template>
<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">
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
@@ -47,10 +54,11 @@
</table>
<div style="margin-top: 20px; margin-bottom: 20px;">
<button @click="show(false, false)">Simple</button>
<button @click="show(true, false)">Resizable</button>
<button @click="show()">Simple</button>
<button @click="show(true)">Resizable</button>
<button @click="show(false, true)">Adaptive</button>
<button @click="show(true, true)">Mixed</button>
<button @click="show(false, false, true)">Draggable (under development)</button>
</div>
<table class="props">
@@ -92,6 +100,7 @@ export default {
return {
resizable: false,
adaptive: false,
draggable: false,
props: {
name: {
@@ -137,10 +146,18 @@ export default {
}
},
methods: {
show(resizable, adaptive) {
show(resizable = false, adaptive = false, draggable = false) {
this.resizable = resizable
this.adaptive = adaptive
this.$modal.show('example-modal')
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')
})
}
}
}

2
demo/src/main.js
View File

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

7
demo/webpack.config.js
View File

@@ -15,13 +15,9 @@ 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,7 +36,8 @@ module.exports = {
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
'vue$': 'vue/dist/vue.esm.js',
'plugin': path.resolve(__dirname, "../dist/index.js")
}
},
devServer: {

98
dist/index.js vendored
View File

@@ -4,9 +4,9 @@
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["VueJsToggleButton"] = factory();
exports["VueJsModal"] = factory();
else
root["VueJsToggleButton"] = factory();
root["VueJsModal"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // 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,
default: false
},
draggable: {
type: [Boolean, String],
default: false
},
transition: {
type: String
},
@@ -545,14 +550,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
type: [String, Array],
default: 'nice-modal'
},
width: {
type: Number,
default: 600
},
height: {
type: Number,
default: 300
},
minWidth: {
type: Number,
default: 0
@@ -561,6 +558,14 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
type: Number,
default: 0
},
width: {
type: Number,
default: 600
},
height: {
type: Number,
default: 300
},
pivotX: {
type: Number,
default: 0.5
@@ -590,7 +595,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
window: {
width: window.innerWidth,
height: window.innerWidth
}
},
draggableElement: false
};
},
@@ -598,24 +605,34 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
visible: function visible(value) {
var _this = this;
if (this.delay > 0) {
if (value) {
this.visibility.overlay = true;
setTimeout(function () {
_this.visibility.modal = true;
}, this.delay);
} else {
this.visibility.modal = false;
setTimeout(function () {
_this.visibility.overlay = false;
}, this.delay);
}
// if (this.delay > 0) {
if (value) {
this.visibility.overlay = true;
setTimeout(function () {
_this.visibility.modal = true;
_this.$nextTick(function () {
_this.addDraggableListeners();
});
}, this.delay);
} else {
this.visibility.overlay = value;
this.$nextTick(function () {
_this.visibility.modal = value;
});
this.visibility.modal = false;
setTimeout(function () {
_this.visibility.overlay = false;
_this.$nextTick(function () {
_this.removeDraggableListeners();
});
}, this.delay);
// this.removeDraggableHandlers()
}
// } else {
// this.visibility.overlay = value
// this.$nextTick(() => {
// this.visibility.modal = value
// })
// }
}
},
created: function created() {
@@ -705,6 +722,30 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
var afterEvent = this.genEventObject({ state: state, params: params });
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
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
@@ -865,6 +906,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
"name": "overlay-fade"
}
}, [(_vm.visibility.overlay) ? _c('div', {
ref: "overlay",
staticClass: "nice-modal-overlay",
on: {
"mousedown": function($event) {

102
src/Modal.vue
View File

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

1
src/index.js
View File

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

15
webpack.config.js
View File

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