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/combobox.html
+6 -21
View File
@@ -1,4 +1,5 @@
{% extends "base.html" %}
{% import "components/macros.html" as ui %}
{% block title %}Autocomplete (Combobox) - Design System Wiki{% endblock %}
@@ -56,14 +57,7 @@
<span class="text-[10px] font-bold text-emerald-400 uppercase tracking-wider block mb-1">Server-Side HTMX Search</span>
{% if authenticated %}
<div class="autocomplete-combobox relative">
<label class="block text-xs font-semibold text-muted-foreground mb-1.5">Live MongoDB Query</label>
<input type="hidden" name="assignee_id" class="combobox-value">
<input type="text" name="q" placeholder="Query developers database..." autocomplete="off"
class="combobox-input block w-full px-4 py-2 bg-background border border-border text-white rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-sky-500"
hx-get="/developers/search" hx-trigger="input changed delay:200ms" hx-target="next .combobox-results">
<div class="combobox-results absolute z-10 w-full mt-2 bg-popover border border-border rounded-xl p-1 shadow-xl hidden"></div>
</div>
{{ ui::search_combobox(name="assignee_id", label="Live MongoDB Query", placeholder="Query developers database...", search_url="/developers/search", input_id="wiki-db-search", value_id="wiki-db-value") }}
{% else %}
<div class="rounded-2xl border border-border bg-[#09090b]/40 p-4 space-y-2 text-xs">
<div class="flex items-center gap-1.5 text-amber-500 font-bold">
@@ -115,19 +109,10 @@
<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;!-- Server-Side Combobox Container (Asynchronous Query via HTMX) --&gt;
&lt;div class="autocomplete-combobox relative"&gt;
&lt;!-- Holds the final value submitted to forms --&gt;
&lt;input type="hidden" name="assignee_id" class="combobox-value"&gt;
&lt;!-- Input box triggers search query. Submits with parameter 'q' --&gt;
&lt;input type="text" name="q" placeholder="Search developers..." autocomplete="off"
class="combobox-input block w-full px-4 py-2 bg-background border border-border rounded-xl text-sm focus:ring-2 focus:ring-sky-500"
hx-get="/developers/search" hx-trigger="input changed delay:250ms" hx-target="next .combobox-results"&gt;
&lt;!-- Dropdown container receives swapped HTML markup from server --&gt;
&lt;div class="combobox-results absolute z-10 w-full mt-2 bg-popover border border-border rounded-xl p-1 shadow-xl hidden"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
<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;!-- Server-Side Combobox using macro (Asynchronous Query via HTMX) --&gt;
{{ "{{" }} ui::search_combobox(name="assignee_id", label="Live MongoDB Query", placeholder="Query developers database...", search_url="/developers/search", input_id="wiki-db-search", value_id="wiki-db-value") {{ "}}" }}</code></pre>
</div>
</div>
</div>