Added standard Vue component for confirm dialogs

This commit is contained in:
Fabio Manganiello 2022-04-24 21:34:39 +02:00
parent 321a61d06d
commit 3e4b13d20f
Signed by: blacklight
GPG key ID: D90FBA7F76362774

View file

@ -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" /> &nbsp; {{ confirmText }}
</button>
<button type="button" class="cancel-btn" @click="close" @touch="close">
<i class="fas fa-xmark" /> &nbsp; {{ 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>