shaamilahmed/Htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement interactive calendar view grids and confirmation action patterns

Browse Source
This commit is contained in:
Enciphered
2026-05-30 13:40:18 +05:00
parent 1e705053f5
commit f35908095c
5 changed files with 449 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/components/sheets.html
+126
View File
@@ -120,6 +120,111 @@
</div>
</section>
<!-- Confirmation Action Pattern -->
<section class="space-y-4 border-t border-border/60 pt-6">
<h2 class="text-lg font-bold text-slate-200">Confirmation Actions (e.g., Deletes)</h2>
<p class="text-xs text-muted-foreground leading-relaxed">
Slide-over sheets are highly effective for confirmation dialogs when you want to provide more context, metadata details, or descriptive warnings about the entity being impacted before executing the action.
</p>
<div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
<!-- Tab Headers -->
<div class="flex border-b border-border/60 pb-1.5">
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'confirm-sheet-demo-pane')">Interactive Demo</button>
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'confirm-sheet-markup-form')">Form POST (Standard)</button>
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'confirm-sheet-markup-htmx')">HTMX Delete (AJAX)</button>
</div>
<!-- Interactive Demo Pane -->
<div id="confirm-sheet-demo-pane" class="wiki-pane py-2">
<div class="flex items-center gap-4">
<span class="text-xs text-slate-400 font-medium">Demo Database Entity:</span>
<div class="flex items-center gap-3 px-3 py-2 bg-secondary/20 border border-border rounded-xl">
<span class="text-xs font-semibold text-slate-200">User Account: ahmed_shaamil</span>
{{ ui::sheet_trigger(target_id="wiki-confirm-delete-sheet", label="Delete User", variant="destructive", extra_class="!px-2.5 !py-1 text-[10px]") }}
</div>
</div>
</div>
<!-- Form POST Code Markup -->
<div id="confirm-sheet-markup-form" class="wiki-pane hidden space-y-4">
<div class="relative group">
<button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
Copy Code
</button>
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
&lt;!-- 1. Trigger Button --&gt;
{{ "{{" }} ui::sheet_trigger(target_id="delete-sheet-confirm-123", label="Delete Account", variant="destructive") {{ "}}" }}
&lt;!-- 2. Slide Drawer with Form --&gt;
{{ "{%" }} call ui::sheet_open(id="delete-sheet-confirm-123", title="Confirm Account Deletion", max_width_class="max-w-md") {{ "%}" }}
&lt;form action="/accounts/123/delete" method="POST" class="flex flex-col justify-between h-full space-y-6"&gt;
&lt;div class="space-y-4 mt-2"&gt;
&lt;p class="text-xs text-muted-foreground leading-relaxed"&gt;
You are about to delete this account. This will invalidate all associated access tokens and permanently purge database profiles.
&lt;/p&gt;
&lt;div class="p-3.5 rounded-2xl bg-destructive/10 border border-destructive/20 text-[11px] text-destructive-foreground leading-normal"&gt;
Warning: This action is irreversible. Enter confirmation parameters if required.
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="flex gap-3 pt-4 border-t border-border mt-auto"&gt;
&lt;button type="button" class="sheet-close flex-1 py-2.5 rounded-xl bg-secondary border border-border hover:bg-secondary/80 transition text-xs font-semibold text-slate-200"&gt;
Cancel
&lt;/button&gt;
&lt;button type="submit" class="flex-1 py-2.5 rounded-xl bg-destructive text-destructive-foreground hover:opacity-90 shadow-md transition text-xs font-bold"&gt;
Confirm Delete
&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
{{ "{%" }} call ui::sheet_close(save_label="") {{ "%}" }}</code></pre>
</div>
</div>
<!-- HTMX AJAX Code Markup -->
<div id="confirm-sheet-markup-htmx" class="wiki-pane hidden space-y-4">
<div class="relative group">
<button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
Copy Code
</button>
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
&lt;!-- 1. Trigger Button --&gt;
{{ "{{" }} ui::sheet_trigger(target_id="delete-sheet-htmx-123", label="Delete Account", variant="destructive") {{ "}}" }}
&lt;!-- 2. Slide Drawer with HTMX --&gt;
{{ "{%" }} call ui::sheet_open(id="delete-sheet-htmx-123", title="Confirm Account Deletion", max_width_class="max-w-md") {{ "%}" }}
&lt;div class="flex flex-col justify-between h-full space-y-6"&gt;
&lt;div class="space-y-4 mt-2"&gt;
&lt;p class="text-xs text-muted-foreground leading-relaxed"&gt;
Are you sure you want to delete this account? This triggers an async HTMX request and removes the element.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class="flex gap-3 pt-4 border-t border-border mt-auto"&gt;
&lt;button type="button" class="sheet-close flex-1 py-2.5 rounded-xl bg-secondary border border-border hover:bg-secondary/80 transition text-xs font-semibold text-slate-200"&gt;
Cancel
&lt;/button&gt;
&lt;button type="button"
hx-delete="/accounts/123"
hx-target="#account-row-123"
hx-swap="outerHTML"
class="sheet-close flex-1 py-2.5 rounded-xl bg-destructive text-destructive-foreground hover:opacity-90 shadow-md transition text-xs font-bold"&gt;
Confirm Delete
&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
{{ "{%" }} call ui::sheet_close(save_label="") {{ "%}" }}</code></pre>
</div>
</div>
</div>
</section>
</div>
</div>
@@ -128,6 +233,27 @@
<p class="text-xs text-slate-405 leading-relaxed">This slide-over panel demonstrates real-time sidebar parameter adjustments, sliding in from the right edge with hardware transitions.</p>
{{ ui::sheet_close(save_label="Save Properties") }}
<!-- Interactive Confirm Delete Sheet Element -->
{{ ui::sheet_open(id="wiki-confirm-delete-sheet", title="Confirm Account Deletion", max_width_class="max-w-sm") }}
<p class="text-xs text-slate-400 leading-relaxed mt-2">
Are you sure you want to permanently delete user <strong class="text-slate-200">ahmed_shaamil</strong>? All database records and linked files will be removed.
</p>
</div> <!-- Closes .space-y-4 -->
<!-- Custom Footer Buttons -->
<div class="flex gap-3 pt-4 border-t border-border mt-auto">
<button class="sheet-close flex-1 py-2.5 rounded-xl bg-secondary border border-border hover:bg-secondary/80 transition text-xs font-semibold text-slate-200">
Cancel
</button>
<button class="sheet-close flex-1 py-2.5 rounded-xl bg-rose-600 hover:bg-rose-500 text-white transition text-xs font-bold shadow-lg shadow-rose-650/10" onclick="showToast('User account ahmed_shaamil deleted successfully!')">
Confirm Delete
</button>
</div>
</div> <!-- Closes .sheet-content -->
</div> <!-- Closes .absolute -->
</div> <!-- Closes .sheet-dialog -->
<script>
function toggleWikiTabs(btn, paneId) {
const card = btn.closest('.border-border');