docs: add confirm_modal_dynamic documentation to components page
Added documentation and interactive examples for both confirm_modal and confirm_modal_dynamic macros, showing danger, warning, info variants and dynamic message capabilities. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -2479,6 +2479,195 @@ goToPage(n) { if (n !== '...' && n >= 1 && n <= this.totalPages) { this.paginati
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Confirmation Modal Macros -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Confirmation Modal Macros</h3>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||||
|
Use the <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">confirm_modal</code> and <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">confirm_modal_dynamic</code> macros for styled confirmation dialogs. These support danger, warning, and info variants.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{# Static Confirm Modal Demo #}
|
||||||
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
||||||
|
<div class="flex flex-wrap gap-2 mb-4">
|
||||||
|
<button
|
||||||
|
@click="confirmModalVariant = 'danger'; showConfirmModalDemo = true"
|
||||||
|
class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
|
||||||
|
Danger Variant
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="confirmModalVariant = 'warning'; showConfirmModalDemo = true"
|
||||||
|
class="px-4 py-2 text-sm font-medium text-white bg-yellow-600 rounded-lg hover:bg-yellow-700">
|
||||||
|
Warning Variant
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="confirmModalVariant = 'info'; showConfirmModalDemo = true"
|
||||||
|
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">
|
||||||
|
Info Variant
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="dynamicItemName = 'Example Platform'; showDynamicConfirmDemo = true"
|
||||||
|
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
|
||||||
|
Dynamic Message
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Confirm Modal Demo (Danger) #}
|
||||||
|
<div
|
||||||
|
x-show="showConfirmModalDemo && confirmModalVariant === 'danger'"
|
||||||
|
x-cloak
|
||||||
|
@keydown.escape.window="showConfirmModalDemo = false"
|
||||||
|
class="fixed inset-0 z-50 overflow-y-auto"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true">
|
||||||
|
<div x-transition class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm" @click="showConfirmModalDemo = false"></div>
|
||||||
|
<div class="flex min-h-full items-center justify-center p-4">
|
||||||
|
<div x-transition @click.stop class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30">
|
||||||
|
<span x-html="$icon('exclamation-triangle', 'w-6 h-6 text-red-600 dark:text-red-400')"></span>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4 flex-1">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Delete Item</h3>
|
||||||
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Are you sure you want to delete this item? This action cannot be undone.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6 flex justify-end gap-3">
|
||||||
|
<button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">Cancel</button>
|
||||||
|
<button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors bg-red-600 hover:bg-red-700">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Confirm Modal Demo (Warning) #}
|
||||||
|
<div
|
||||||
|
x-show="showConfirmModalDemo && confirmModalVariant === 'warning'"
|
||||||
|
x-cloak
|
||||||
|
@keydown.escape.window="showConfirmModalDemo = false"
|
||||||
|
class="fixed inset-0 z-50 overflow-y-auto"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true">
|
||||||
|
<div x-transition class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm" @click="showConfirmModalDemo = false"></div>
|
||||||
|
<div class="flex min-h-full items-center justify-center p-4">
|
||||||
|
<div x-transition @click.stop class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
|
||||||
|
<span x-html="$icon('exclamation', 'w-6 h-6 text-yellow-600 dark:text-yellow-400')"></span>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4 flex-1">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Remove Access</h3>
|
||||||
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Are you sure you want to remove access? The user will need to be re-invited.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6 flex justify-end gap-3">
|
||||||
|
<button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">Cancel</button>
|
||||||
|
<button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors bg-yellow-600 hover:bg-yellow-700">Remove</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Confirm Modal Demo (Info) #}
|
||||||
|
<div
|
||||||
|
x-show="showConfirmModalDemo && confirmModalVariant === 'info'"
|
||||||
|
x-cloak
|
||||||
|
@keydown.escape.window="showConfirmModalDemo = false"
|
||||||
|
class="fixed inset-0 z-50 overflow-y-auto"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true">
|
||||||
|
<div x-transition class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm" @click="showConfirmModalDemo = false"></div>
|
||||||
|
<div class="flex min-h-full items-center justify-center p-4">
|
||||||
|
<div x-transition @click.stop class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30">
|
||||||
|
<span x-html="$icon('information-circle', 'w-6 h-6 text-blue-600 dark:text-blue-400')"></span>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4 flex-1">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Publish Changes</h3>
|
||||||
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Are you sure you want to publish these changes? They will be visible to all users.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6 flex justify-end gap-3">
|
||||||
|
<button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">Cancel</button>
|
||||||
|
<button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors bg-blue-600 hover:bg-blue-700">Publish</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Dynamic Confirm Modal Demo #}
|
||||||
|
<div
|
||||||
|
x-show="showDynamicConfirmDemo"
|
||||||
|
x-cloak
|
||||||
|
@keydown.escape.window="showDynamicConfirmDemo = false"
|
||||||
|
class="fixed inset-0 z-50 overflow-y-auto"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true">
|
||||||
|
<div x-transition class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm" @click="showDynamicConfirmDemo = false"></div>
|
||||||
|
<div class="flex min-h-full items-center justify-center p-4">
|
||||||
|
<div x-transition @click.stop class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
|
||||||
|
<span x-html="$icon('exclamation', 'w-6 h-6 text-yellow-600 dark:text-yellow-400')"></span>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4 flex-1">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Remove Platform</h3>
|
||||||
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400" x-text="'Are you sure you want to remove \"' + dynamicItemName + '\" from this admin?'"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6 flex justify-end gap-3">
|
||||||
|
<button @click="showDynamicConfirmDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">Cancel</button>
|
||||||
|
<button @click="showDynamicConfirmDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors bg-yellow-600 hover:bg-yellow-700">Remove</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Static Message (confirm_modal):</p>
|
||||||
|
<button @click="copyCode(`{% from 'shared/macros/modals.html' import confirm_modal %}
|
||||||
|
|
||||||
|
{{ confirm_modal(
|
||||||
|
'deleteConfirm',
|
||||||
|
'Delete Item',
|
||||||
|
'Are you sure you want to delete this item?',
|
||||||
|
'deleteItem()',
|
||||||
|
'showDeleteModal',
|
||||||
|
'Delete',
|
||||||
|
'Cancel',
|
||||||
|
'danger'
|
||||||
|
) }}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
||||||
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
||||||
|
Copy Code
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dynamic Message (confirm_modal_dynamic):</p>
|
||||||
|
<button @click="copyCode(`{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}
|
||||||
|
|
||||||
|
{{ confirm_modal_dynamic(
|
||||||
|
'removePlatformModal',
|
||||||
|
'Remove Platform',
|
||||||
|
\"'Are you sure you want to remove \\\"' + (platformToRemove?.name || '') + '\\\" from this admin?'\",
|
||||||
|
'confirmRemovePlatform()',
|
||||||
|
'showRemovePlatformModal',
|
||||||
|
'Remove',
|
||||||
|
'Cancel',
|
||||||
|
'warning'
|
||||||
|
) }}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
||||||
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
||||||
|
Copy Code
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-4">
|
||||||
|
<strong>Parameters:</strong> id, title, message (or message_var for dynamic), confirm_action, show_var, confirm_text, cancel_text, variant ('danger'|'warning'|'info'), icon
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Details Modal Pattern -->
|
<!-- Details Modal Pattern -->
|
||||||
<div class="mb-8">
|
<div class="mb-8">
|
||||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Details Modal (Table Layout)</h3>
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Details Modal (Table Layout)</h3>
|
||||||
|
|||||||
@@ -429,6 +429,12 @@ function adminComponents() {
|
|||||||
showLogModal: false,
|
showLogModal: false,
|
||||||
exampleLog: null,
|
exampleLog: null,
|
||||||
|
|
||||||
|
// Confirm modal demo state
|
||||||
|
showConfirmModalDemo: false,
|
||||||
|
confirmModalVariant: 'danger',
|
||||||
|
showDynamicConfirmDemo: false,
|
||||||
|
dynamicItemName: '',
|
||||||
|
|
||||||
// Example log data for demo
|
// Example log data for demo
|
||||||
showErrorLogDemo() {
|
showErrorLogDemo() {
|
||||||
this.exampleLog = {
|
this.exampleLog = {
|
||||||
|
|||||||
Reference in New Issue
Block a user