forked from platypush/platypush
Added standard Vue component for confirm dialogs
This commit is contained in:
parent
321a61d06d
commit
3e4b13d20f
1 changed files with 84 additions and 0 deletions
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<Modal ref="modal" :title="title">
|
||||
<div class="dialog-content">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<form class="buttons" @submit.prevent="onConfirm">
|
||||
<button type="submit" class="ok-btn" @click="onConfirm" @touch="onConfirm">
|
||||
<i class="fas fa-check" /> {{ confirmText }}
|
||||
</button>
|
||||
<button type="button" class="cancel-btn" @click="close" @touch="close">
|
||||
<i class="fas fa-xmark" /> {{ cancelText }}
|
||||
</button>
|
||||
</form>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from "@/components/Modal";
|
||||
|
||||
export default {
|
||||
emits: ['input', 'click', 'touch'],
|
||||
components: {Modal},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: "OK",
|
||||
},
|
||||
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: "Cancel",
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm() {
|
||||
this.$emit('input')
|
||||
this.close()
|
||||
},
|
||||
|
||||
show() {
|
||||
this.$refs.modal.show()
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$refs.modal.hide()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.modal) {
|
||||
.dialog-content {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: right;
|
||||
padding: 1em 0 1em 1em;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 -1px 2px 0 $default-shadow-color;
|
||||
|
||||
button {
|
||||
margin-right: 1em;
|
||||
padding: 0.5em 1em;
|
||||
border: 1px solid $border-color-2;
|
||||
border-radius: 1em;
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in a new issue