133 lines
2.7 KiB
Vue
133 lines
2.7 KiB
Vue
<template>
|
|
<Modal ref="modal" :header="title">
|
|
<div class="modal-delete">
|
|
<div class="markdown-body" v-html="renderString(description)" />
|
|
<label v-if="hasToType" for="confirmation" class="confirmation-label">
|
|
<span>
|
|
<strong>To verify, type</strong>
|
|
<em class="confirmation-text">{{ confirmationText }}</em>
|
|
<strong>below:</strong>
|
|
</span>
|
|
</label>
|
|
<div class="confirmation-input">
|
|
<input
|
|
v-if="hasToType"
|
|
id="confirmation"
|
|
v-model="confirmation_typed"
|
|
type="text"
|
|
placeholder="Type here..."
|
|
@input="type"
|
|
/>
|
|
</div>
|
|
<div class="button-group">
|
|
<button class="iconified-button" @click="cancel">
|
|
<CrossIcon />
|
|
Cancel
|
|
</button>
|
|
<button class="iconified-button danger-button" :disabled="action_disabled" @click="proceed">
|
|
<TrashIcon />
|
|
{{ proceedLabel }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</template>
|
|
|
|
<script>
|
|
import CrossIcon from '~/assets/images/utils/x.svg'
|
|
import TrashIcon from '~/assets/images/utils/trash.svg'
|
|
import Modal from '~/components/ui/Modal'
|
|
import { renderString } from '~/helpers/parse'
|
|
|
|
export default {
|
|
components: {
|
|
CrossIcon,
|
|
TrashIcon,
|
|
Modal,
|
|
},
|
|
props: {
|
|
confirmationText: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
hasToType: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: 'No title defined',
|
|
required: true,
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: 'No description defined',
|
|
required: true,
|
|
},
|
|
proceedLabel: {
|
|
type: String,
|
|
default: 'Proceed',
|
|
},
|
|
},
|
|
emits: ['proceed'],
|
|
data() {
|
|
return {
|
|
action_disabled: this.hasToType,
|
|
confirmation_typed: '',
|
|
}
|
|
},
|
|
methods: {
|
|
renderString,
|
|
cancel() {
|
|
this.$refs.modal.hide()
|
|
},
|
|
proceed() {
|
|
this.$refs.modal.hide()
|
|
this.$emit('proceed')
|
|
},
|
|
type() {
|
|
if (this.hasToType) {
|
|
this.action_disabled =
|
|
this.confirmation_typed.toLowerCase() !== this.confirmationText.toLowerCase()
|
|
}
|
|
},
|
|
show() {
|
|
this.$refs.modal.show()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.modal-delete {
|
|
padding: var(--spacing-card-bg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.markdown-body {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.confirmation-label {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.confirmation-text {
|
|
padding-right: 0.25ch;
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
.confirmation-input {
|
|
input {
|
|
width: 20rem;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.button-group {
|
|
margin-left: auto;
|
|
margin-top: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|