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

refactor: migrate and consolidate UI templates to compile-time Askama component macros

Browse Source
This commit is contained in:
Enciphered
2026-05-30 12:28:47 +05:00
parent f42a5f05b2
commit 110fc61fa2
16 changed files with 697 additions and 598 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/components/inputs.html
+28 -71
View File
@@ -1,4 +1,5 @@
{% extends "base.html" %}
{% import "components/macros.html" as ui %}
{% block title %}Form Fields & Select - Design System Wiki{% endblock %}
@@ -33,45 +34,22 @@
<!-- Demo Viewport -->
<div id="input-sandbox" class="wiki-pane space-y-4 max-w-md py-2">
<!-- Text field -->
<div class="space-y-2">
<label class="block text-xs font-semibold text-muted-foreground">Username Input</label>
<input type="text" placeholder="e.g. dev_alice" class="block h-10 w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white placeholder-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200">
</div>
<!-- Text field using macro -->
{{ ui::text_input(id="demo-username", name="username", label="Username Input", type="text", placeholder="e.g. dev_alice") }}
<!-- Password field -->
<div class="space-y-2">
<label class="block text-xs font-semibold text-muted-foreground">Security Password</label>
<input type="password" placeholder="••••••••" class="block h-10 w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white placeholder-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200">
</div>
<!-- Password field using macro -->
{{ ui::text_input(id="demo-password", name="password", label="Security Password", type="password", placeholder="••••••••") }}
<!-- Textarea -->
<div class="space-y-2">
<label class="block text-xs font-semibold text-muted-foreground">Task Details</label>
<textarea rows="3" placeholder="Provide a detailed description of the task requirements..." class="block w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white placeholder-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200 resize-none"></textarea>
</div>
<!-- Textarea using macro -->
{{ ui::textarea(id="demo-details", name="details", label="Task Details", placeholder="Provide a detailed description of the task requirements...") }}
<!-- Custom Styled Select Dropdown -->
<div class="space-y-2">
<label class="block text-xs font-semibold text-muted-foreground">Developer Specialization</label>
<div class="custom-select relative inline-block w-full">
<input type="hidden" name="specialization" class="select-value" value="Senior Rust Engineer">
<button type="button" class="select-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200 hover:bg-secondary/50 transition focus:outline-none focus:ring-2 focus:ring-sky-500">
<span class="select-text">Senior Rust Engineer</span>
<svg class="h-4 w-4 text-slate-500 transition-transform duration-200 select-chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
<polyline points="6 9 12 15 18 9"/>
</svg>
</button>
<div class="select-popover absolute left-0 z-20 mt-2 w-full p-1 rounded-2xl border border-border bg-popover shadow-2xl hidden animate-in fade-in slide-in-from-top-2 duration-150">
<div class="max-h-60 overflow-y-auto p-0.5 space-y-0.5">
<button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs bg-accent text-accent-foreground font-semibold focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="Senior Rust Engineer">Senior Rust Engineer</button>
<button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="Frontend Architect">Frontend Architect</button>
<button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="DevOps Lead">DevOps Lead</button>
<button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="Database Administrator">Database Administrator</button>
</div>
</div>
</div>
</div>
<!-- Custom Styled Select Dropdown using paired macros -->
{{ ui::select_open(name="specialization", label="Developer Specialization", current_value="Senior Rust Engineer", current_text="Senior Rust Engineer") }}
{{ ui::select_item(value="Senior Rust Engineer", label="Senior Rust Engineer", is_selected=true) }}
{{ ui::select_item(value="Frontend Architect", label="Frontend Architect") }}
{{ ui::select_item(value="DevOps Lead", label="DevOps Lead") }}
{{ ui::select_item(value="Database Administrator", label="Database Administrator") }}
{{ ui::select_close() }}
</div>
<!-- Code Snippet Area -->
@@ -81,44 +59,23 @@
<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-2M8 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>&lt;!-- Styled Text Input --&gt;
&lt;div class="space-y-2"&gt;
&lt;label class="block text-xs font-semibold text-muted-foreground"&gt;Username Input&lt;/label&gt;
&lt;input type="text" placeholder="e.g. dev_alice"
class="block h-10 w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200"&gt;
&lt;/div&gt;
<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;!-- Styled Text Input --&gt;
{{ "{{" }} ui::text_input(id="demo-username", name="username", label="Username Input", type="text", placeholder="e.g. dev_alice") {{ "}}" }}
&lt;!-- Styled Password Input --&gt;
{{ "{{" }} ui::text_input(id="demo-password", name="password", label="Security Password", type="password", placeholder="••••••••") {{ "}}" }}
&lt;!-- Styled Textarea --&gt;
&lt;div class="space-y-2"&gt;
&lt;label class="block text-xs font-semibold text-muted-foreground"&gt;Task Details&lt;/label&gt;
&lt;textarea rows="3" placeholder="Provide a detailed description..."
class="block w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200 resize-none"&gt;&lt;/textarea&gt;
&lt;/div&gt;
{{ "{{" }} ui::textarea(id="demo-details", name="details", label="Task Details", placeholder="Provide a detailed description...") {{ "}}" }}
&lt;!-- Custom Styled Select Dropdown (Chevron and Popover managed globally in components.js) --&gt;
&lt;div class="space-y-2"&gt;
&lt;label class="block text-xs font-semibold text-muted-foreground"&gt;Developer Specialization&lt;/label&gt;
&lt;div class="custom-select relative inline-block w-full"&gt;
&lt;!-- Hidden input holds the actual value for form submissions --&gt;
&lt;input type="hidden" name="specialization" class="select-value" value="Senior Rust Engineer"&gt;
&lt;!-- Toggle trigger button --&gt;
&lt;button type="button" class="select-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200"&gt;
&lt;span class="select-text"&gt;Senior Rust Engineer&lt;/span&gt;
&lt;svg class="h-4 w-4 text-slate-500 transition-transform duration-200 select-chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"&gt;
&lt;polyline points="6 9 12 15 18 9"/&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;!-- Options Popover --&gt;
&lt;div class="select-popover absolute left-0 z-20 mt-2 w-full p-1 rounded-2xl border border-border bg-popover shadow-2xl hidden"&gt;
&lt;div class="max-h-60 overflow-y-auto p-0.5 space-y-0.5"&gt;
&lt;button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs bg-accent text-accent-foreground font-semibold text-slate-200 text-left" data-value="Senior Rust Engineer"&gt;Senior Rust Engineer&lt;/button&gt;
&lt;button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground text-slate-200 text-left" data-value="Frontend Architect"&gt;Frontend Architect&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
&lt;!-- Custom Styled Select Dropdown --&gt;
{{ "{{" }} ui::select_open(name="specialization", label="Developer Specialization", current_value="Senior Rust Engineer", current_text="Senior Rust Engineer") {{ "}}" }}
{{ "{{" }} ui::select_item(value="Senior Rust Engineer", label="Senior Rust Engineer", is_selected=true) {{ "}}" }}
{{ "{{" }} ui::select_item(value="Frontend Architect", label="Frontend Architect") {{ "}}" }}
{{ "{{" }} ui::select_item(value="DevOps Lead", label="DevOps Lead") {{ "}}" }}
{{ "{{" }} ui::select_close() {{ "}}" }}</code></pre>
</div>
</div>
</div>