114 lines
3.9 KiB
JavaScript
114 lines
3.9 KiB
JavaScript
/**
|
|
* Universal Modal Templates
|
|
* Shared across all sections: Admin, Vendor, and Shop
|
|
*/
|
|
|
|
window.modalTemplates = {
|
|
|
|
/**
|
|
* Confirmation Modal
|
|
*/
|
|
confirmModal: () => `
|
|
<div x-show="confirmModal.show"
|
|
x-cloak
|
|
class="modal-backdrop"
|
|
@click.self="closeConfirmModal()">
|
|
<div class="modal-container" @click.stop>
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" x-text="confirmModal.title"></h3>
|
|
<button @click="closeConfirmModal()" class="modal-close">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="modal-message" x-text="confirmModal.message"></p>
|
|
<div x-show="confirmModal.warning" class="modal-warning">
|
|
<p x-text="confirmModal.warning"></p>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button @click="closeConfirmModal()" class="btn btn-outline">
|
|
Cancel
|
|
</button>
|
|
<button @click="handleConfirm()"
|
|
class="btn"
|
|
:class="confirmModal.buttonClass"
|
|
x-text="confirmModal.buttonText">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
/**
|
|
* Success Modal
|
|
*/
|
|
successModal: () => `
|
|
<div x-show="successModal.show"
|
|
x-cloak
|
|
class="modal-backdrop"
|
|
@click.self="closeSuccessModal()">
|
|
<div class="modal-container" @click.stop>
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" x-text="successModal.title"></h3>
|
|
<button @click="closeSuccessModal()" class="modal-close">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="modal-icon success">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<p class="modal-message text-center" x-text="successModal.message"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button @click="closeSuccessModal()" class="btn btn-primary">
|
|
OK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
/**
|
|
* Error Modal
|
|
*/
|
|
errorModal: () => `
|
|
<div x-show="errorModal.show"
|
|
x-cloak
|
|
class="modal-backdrop"
|
|
@click.self="closeErrorModal()">
|
|
<div class="modal-container" @click.stop>
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" x-text="errorModal.title"></h3>
|
|
<button @click="closeErrorModal()" class="modal-close">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="modal-icon error">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
<p class="modal-message text-center" x-text="errorModal.message"></p>
|
|
<div x-show="errorModal.details" class="modal-details" x-text="errorModal.details"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button @click="closeErrorModal()" class="btn btn-primary">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
/**
|
|
* Loading Overlay
|
|
*/
|
|
loadingOverlay: () => `
|
|
<div x-show="loading"
|
|
x-cloak
|
|
class="loading-overlay">
|
|
<div class="loading-spinner"></div>
|
|
</div>
|
|
`
|
|
}; |