Sha256: c8004f07ed7885222bce7abb82525d8e74f5ccd258e4af676867a46a20349cbe
Contents?: true
Size: 1.54 KB
Versions: 17
Compression:
Stored size: 1.54 KB
Contents
<template>
<dropdown
:placement="placement"
v-on="$listeners"
class="relative"
ref="dropdown"
>
<template v-slot:button>
<slot></slot>
</template>
<template v-slot:content>
<div class="text-gray-700 text-md w-56">
<p class="py-3">
{{ text || $t('confirmationButton.text') }}
</p>
<div class="mt-1 flex flex-col">
<button
class="bg-red-600 rounded-sm text-white py-2 px-4"
@click.stop="confirm"
>
{{
confirmButtonLabel || $t('confirmationButton.confirmButtonLabel')
}}
</button>
<button
class="block w-full text-gray-800 py-2 hover:bg-gray-100 transition-colors duration-200"
@click.stop="cancel"
>
{{
cancelButtonLabel || $t('confirmationButton.cancelButtonLabel')
}}
</button>
</div>
</div>
</template>
</dropdown>
</template>
<script>
export default {
name: 'ConfirmationButton',
props: {
placement: { type: String, default: 'bottom' },
text: { type: String, default: null },
confirmButtonLabel: { type: String, default: null },
cancelButtonLabel: { type: String, default: null },
},
methods: {
isOpen() {
return this.$refs.dropdown.open
},
confirm() {
this.close()
this.$emit('confirm')
},
cancel() {
this.close()
this.$emit('cancel')
},
close() {
this.$refs.dropdown.close()
},
},
}
</script>
Version data entries
17 entries across 17 versions & 1 rubygems