fix: restore copy functionality for confirm modal code snippets
Store code snippets as JS variables in components.js and reference them in the template. This avoids multi-line template literals in HTML attributes while still providing copy functionality. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -2626,34 +2626,24 @@ goToPage(n) { if (n !== '...' && n >= 1 && n <= this.totalPages) { this.paginati
|
||||
|
||||
<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>
|
||||
<pre class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-xs overflow-x-auto"><code>{% raw %}{% 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'
|
||||
) }}{% endraw %}</code></pre>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">Static Message (confirm_modal):</p>
|
||||
<button @click="copyCode(codeSnippets.confirmModal)" 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
|
||||
</button>
|
||||
</div>
|
||||
<pre class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-xs overflow-x-auto"><code x-text="codeSnippets.confirmModal"></code></pre>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dynamic Message (confirm_modal_dynamic):</p>
|
||||
<pre class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-xs overflow-x-auto"><code>{% raw %}{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}
|
||||
|
||||
{{ confirm_modal_dynamic(
|
||||
'removePlatformModal',
|
||||
'Remove Platform',
|
||||
"'Are you sure you want to remove \"' + (item?.name || '') + '\" ?'",
|
||||
'confirmRemove()',
|
||||
'showConfirmModal',
|
||||
'Remove',
|
||||
'Cancel',
|
||||
'warning'
|
||||
) }}{% endraw %}</code></pre>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">Dynamic Message (confirm_modal_dynamic):</p>
|
||||
<button @click="copyCode(codeSnippets.confirmModalDynamic)" 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
|
||||
</button>
|
||||
</div>
|
||||
<pre class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-xs overflow-x-auto"><code x-text="codeSnippets.confirmModalDynamic"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -435,6 +435,34 @@ function adminComponents() {
|
||||
showDynamicConfirmDemo: false,
|
||||
dynamicItemName: '',
|
||||
|
||||
// Code snippets for confirm modal macros
|
||||
codeSnippets: {
|
||||
confirmModal: `{% 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'
|
||||
) }}`,
|
||||
confirmModalDynamic: `{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}
|
||||
|
||||
{{ confirm_modal_dynamic(
|
||||
'removePlatformModal',
|
||||
'Remove Platform',
|
||||
"'Are you sure you want to remove \\\"' + (item?.name || '') + '\\\" ?'",
|
||||
'confirmRemove()',
|
||||
'showConfirmModal',
|
||||
'Remove',
|
||||
'Cancel',
|
||||
'warning'
|
||||
) }}`
|
||||
},
|
||||
|
||||
// Example log data for demo
|
||||
showErrorLogDemo() {
|
||||
this.exampleLog = {
|
||||
|
||||
Reference in New Issue
Block a user