54 lines
1.6 KiB
Vue
54 lines
1.6 KiB
Vue
<template>
|
|
<section :class="['modal', active && 'is-active' || '']">
|
|
<div class="modal-background" @click="close"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<div class="modal-card-title">
|
|
<slot name="title" :item="item">{{ title }}</slot>
|
|
</div>
|
|
<slot name="bar" :item="item"></slot>
|
|
<button type="button" class="delete square" aria-label="close" @click="close">
|
|
<span class="icon">
|
|
<i class="fa fa-close"></i>
|
|
</span>
|
|
</button>
|
|
</header>
|
|
<section class="modal-card-body">
|
|
<slot name="default" :item="item"></slot>
|
|
</section>
|
|
<div class="modal-card-foot align-right">
|
|
<slot name="footer" :item="item" :close="close"></slot>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
title: { type: String, default: ""},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
///! If true, modal is open
|
|
active: false,
|
|
///! Item or data passed down to slots.
|
|
item: null,
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
///! Open modal dialog. Set provided `item` to dialog's one.
|
|
open(item=null) {
|
|
this.active = true
|
|
this.item = item
|
|
},
|
|
///! Close modal and reset item to null.
|
|
close() {
|
|
this.active = false
|
|
this.item = null
|
|
},
|
|
}
|
|
}
|
|
</script>
|