Confirm action vue plugin

confirm-action-nuxt.js

import Vue from 'vue';
import ConfirmActionPlugin from "~/components/modals/ConfirmActionPlugin";

Vue.use(ConfirmActionPlugin)

export default (ctx, inject) => {
	ctx.$confirmAction = Vue.prototype.$confirmAction
	inject('confirmAction', Vue.prototype.$confirmAction)
}

ConfirmAction.vue

<template>
	<div class="d-modal_overlay active" v-if="isShowConfirmAction">
		<div class="d-modal">
			<div class="d-modal__title">
				{{ title }}
			</div>
			<div class="d-modal__text">
				{{ description }}
			</div>
			<slot />
			<div class="d-modal__buttons" v-if="showButtons">
				<button
					type="button"
					:disabled="isButtonsDisabled"
					@click="$emit('close')"
					class="button-default button-full-width button-sm button-text-medium button-grey">
					{{ buttonCancel }}
				</button>
				<button
					type="button"
					:disabled="isButtonsDisabled"
					@click="$emit('actionFunction')"
					class="button-default button-full-width button-sm button-text-bold">
					{{ buttonAccept }}
				</button>
			</div>
		</div>
	</div>
</template>

<script>
	import Escapable from "@/mixins/Modals/Escapable";

	export default {
		name: 'ConfirmAction',
		props: {
			isShowConfirmAction: {
				type: Boolean,
				required: false,
				default: false
			},
			showButtons: {
				type: Boolean,
				required: false,
				default: true
			},
			title: {
				type: String,
				required: false,
				default: 'Выполнить это действие?'
			},
			description: {
				type: String,
				required: false,
				default: 'Отменить действие будет невозможно.'
			},
			buttonCancel: {
				type: String,
				required: false,
				default: 'Не удалять'
			},
			buttonAccept: {
				type: String,
				required: false,
				default: 'Удалить'
			},
			isButtonsDisabled: {
				type: Boolean,
				required: false,
				default: false
			}
		},
		mixins: [ Escapable ]
	}
</script>

<style scoped>
	@media (max-width: 500px) {
		.button-default {
			padding: 13px 20px !important;
		}
	}
</style>

index.js

import ConfirmAction from "~/components/modals/ConfirmAction";

export default {
	regComponent (Vue) {
		return new Vue({
			data: {
				isShowConfirmAction: false,
				isButtonsDisabled: false,
				actionFunction: () => {}
			},
			render (h) {
				return h(ConfirmAction, {
					props: {
						isShowConfirmAction: this.isShowConfirmAction,
						title: this.title,
						isButtonsDisabled: this.isButtonsDisabled,
						description: this.description,
						buttonAccept: this.buttonAccept,
						buttonCancel: this.buttonCancel,
						showButtons: this.showButtons
					},
					on: {
						close: () => this.isShowConfirmAction = false,
						actionFunction: this.actionFunction
					}
				})
			}
		})
	},
	defineGlobalMethods (vm) {
		return {
			show (
				{
					title = 'Выполнить это действие?',
					description = 'Отменить действие будет невозможно.',
					buttonAccept = 'Удалить',
					buttonCancel = 'Не удалять',
					callback,
					showButtons = true
				} = {}) {
				vm.isShowConfirmAction = true
				vm.title = title
				vm.buttonAccept = buttonAccept
				vm.buttonCancel = buttonCancel
				vm.description = description
				vm.showButtons = showButtons

				if (typeof callback === 'function') {
					vm.actionFunction = async () => {
						try {
							vm.isButtonsDisabled = true
							await callback()
							vm.isShowConfirmAction = false
						} catch (e) {
							console.error(e)
						} finally {
							vm.isButtonsDisabled = false
						}
					}
				}

			}
		}
	},
	install (Vue) {
		const vm = this.regComponent(Vue)

		vm.$mount(document.body.appendChild(document.createElement('div')))

		Vue.prototype.$confirmAction = this.defineGlobalMethods(vm)
	}
}