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:
@@ -54,40 +54,40 @@ export default {
|
||||
default: 'fade'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
params: {},
|
||||
defaultButtons: [{ title: 'CLOSE' }]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
buttons () {
|
||||
buttons() {
|
||||
return this.params.buttons || this.defaultButtons
|
||||
},
|
||||
/**
|
||||
* Returns FLEX style with correct width for arbitrary number of
|
||||
* buttons.
|
||||
*/
|
||||
buttonStyle () {
|
||||
buttonStyle() {
|
||||
return {
|
||||
flex: `1 1 ${100 / this.buttons.length}%`
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
beforeOpened (event) {
|
||||
beforeOpened(event) {
|
||||
window.addEventListener('keyup', this.onKeyUp)
|
||||
|
||||
this.params = event.params || {}
|
||||
this.$emit('before-opened', event)
|
||||
},
|
||||
beforeClosed (event) {
|
||||
beforeClosed(event) {
|
||||
window.removeEventListener('keyup', this.onKeyUp)
|
||||
|
||||
this.params = {}
|
||||
this.$emit('before-closed', event)
|
||||
},
|
||||
click (i, event, source = 'click') {
|
||||
click(i, event, source = 'click') {
|
||||
const button = this.buttons[i]
|
||||
|
||||
if (button && typeof button.handler === 'function') {
|
||||
@@ -96,11 +96,12 @@ export default {
|
||||
this.$modal.hide('dialog')
|
||||
}
|
||||
},
|
||||
onKeyUp (event) {
|
||||
onKeyUp(event) {
|
||||
if (event.which === 13 && this.buttons.length > 0) {
|
||||
const buttonIndex = this.buttons.length === 1
|
||||
? 0
|
||||
: this.buttons.findIndex(button => button.default)
|
||||
const buttonIndex =
|
||||
this.buttons.length === 1
|
||||
? 0
|
||||
: this.buttons.findIndex(button => button.default)
|
||||
|
||||
if (buttonIndex !== -1) {
|
||||
this.click(buttonIndex, event, 'keypress')
|
||||
|
||||
@@ -14,23 +14,24 @@ export default {
|
||||
minWidth: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}},
|
||||
data () {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
clicked: false,
|
||||
size: {}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$el.addEventListener('mousedown', this.start, false)
|
||||
},
|
||||
computed: {
|
||||
className () {
|
||||
return {'vue-modal-resizer': true, 'clicked': this.clicked}
|
||||
className() {
|
||||
return { 'vue-modal-resizer': true, clicked: this.clicked }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
start (event) {
|
||||
start(event) {
|
||||
this.clicked = true
|
||||
|
||||
window.addEventListener('mousemove', this.mousemove, false)
|
||||
@@ -39,7 +40,7 @@ export default {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
},
|
||||
stop () {
|
||||
stop() {
|
||||
this.clicked = false
|
||||
|
||||
window.removeEventListener('mousemove', this.mousemove, false)
|
||||
@@ -50,10 +51,10 @@ export default {
|
||||
size: this.size
|
||||
})
|
||||
},
|
||||
mousemove (event) {
|
||||
mousemove(event) {
|
||||
this.resize(event)
|
||||
},
|
||||
resize (event) {
|
||||
resize(event) {
|
||||
var el = this.$el.parentElement
|
||||
|
||||
if (el) {
|
||||
@@ -63,7 +64,7 @@ export default {
|
||||
width = inRange(this.minWidth, window.innerWidth, width)
|
||||
height = inRange(this.minHeight, window.innerHeight, height)
|
||||
|
||||
this.size = {width, height}
|
||||
this.size = { width, height }
|
||||
el.style.width = width + 'px'
|
||||
el.style.height = height + 'px'
|
||||
|
||||
@@ -104,6 +105,6 @@ export default {
|
||||
}
|
||||
|
||||
.vue-modal-resizer.clicked::after {
|
||||
border-bottom: 10px solid #369BE9;
|
||||
border-bottom: 10px solid #369be9;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,7 @@ import Dialog from './Dialog.vue'
|
||||
const defaultComponentName = 'modal'
|
||||
|
||||
const Plugin = {
|
||||
install (Vue, options = {}) {
|
||||
install(Vue, options = {}) {
|
||||
/**
|
||||
* Makes sure that plugin can be insstalled only once
|
||||
*/
|
||||
@@ -18,15 +18,15 @@ const Plugin = {
|
||||
* Plugin API
|
||||
*/
|
||||
Vue.prototype.$modal = {
|
||||
show (name, params) {
|
||||
show(name, params) {
|
||||
Plugin.event.$emit('toggle', name, true, params)
|
||||
},
|
||||
|
||||
hide (name, params) {
|
||||
hide(name, params) {
|
||||
Plugin.event.$emit('toggle', name, false, params)
|
||||
},
|
||||
|
||||
toggle (name, params) {
|
||||
toggle(name, params) {
|
||||
Plugin.event.$emit('toggle', name, undefined, params)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ const types = [
|
||||
}
|
||||
]
|
||||
|
||||
var getType = (value) => {
|
||||
var getType = value => {
|
||||
if (value === 'auto') {
|
||||
return {
|
||||
type: value,
|
||||
@@ -43,7 +43,7 @@ var getType = (value) => {
|
||||
}
|
||||
}
|
||||
|
||||
export const parse = (value) => {
|
||||
export const parse = value => {
|
||||
switch (typeof value) {
|
||||
case 'number':
|
||||
return { type: 'px', value }
|
||||
|
||||
Reference in New Issue
Block a user