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/toggles.html
+14 -49
View File
@@ -1,4 +1,5 @@
{% extends "base.html" %}
{% import "components/macros.html" as ui %}
{% block title %}Switches & Checkboxes - Design System Wiki{% endblock %}
@@ -33,34 +34,16 @@
<!-- Demo Viewport -->
<div id="toggle-sandbox" class="wiki-pane space-y-5 max-w-xs py-2">
<!-- Toggle Switch -->
<div class="flex items-center justify-between">
<span class="text-xs text-muted-foreground font-medium">Toggle Status</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="w-9 h-5 bg-secondary rounded-full border border-border peer-checked:bg-indigo-600 peer-checked:border-indigo-500 transition-all duration-300 relative after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-slate-400 after:rounded-full after:h-[14px] after:w-[14px] after:transition-all peer-checked:after:translate-x-4 peer-checked:after:bg-white"></div>
</label>
</div>
<!-- Toggle Switch using macro -->
{{ ui::toggle_switch(name="demo_toggle", label="Toggle Status", checked=false) }}
<!-- Custom Checkbox -->
<!-- Custom Checkbox using macro -->
<div class="flex flex-col gap-3">
<label class="flex items-center gap-3 cursor-pointer group">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-4 h-4 rounded bg-popover border border-border flex items-center justify-center peer-checked:bg-indigo-600 peer-checked:border-indigo-500 peer-checked:[&_svg]:opacity-100 transition">
<svg class="w-2.5 h-2.5 text-white opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
</div>
<span class="text-xs text-muted-foreground peer-checked:text-slate-200">Enable Email notifications</span>
</label>
{{ ui::checkbox(name="demo_checkbox", label="Enable Email notifications", checked=true) }}
</div>
<!-- Range Slider -->
<div class="space-y-2">
<label class="block text-xs font-semibold text-muted-foreground">Range Slider (0-100%)</label>
<div class="flex items-center gap-4">
<input type="range" min="0" max="100" value="50" class="grow h-1 bg-secondary rounded-lg appearance-none cursor-pointer accent-indigo-600" oninput="this.nextElementSibling.textContent = this.value + '%'">
<span class="text-xs font-mono font-bold text-sky-400 w-10 text-right">50%</span>
</div>
</div>
<!-- Range Slider using macro -->
{{ ui::range_slider(name="demo_slider", label="Range Slider (0-100%)", min="0", max="100", value="50") }}
</div>
<!-- Code Snippet Area -->
@@ -70,34 +53,16 @@
<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;!-- 1. Toggle Switch Variant --&gt;
&lt;label class="relative inline-flex items-center cursor-pointer"&gt;
&lt;!-- sr-only: visually hides native input; peer: lets siblings styled with 'peer-checked:' react to its state --&gt;
&lt;input type="checkbox" class="sr-only peer"&gt;
&lt;!-- bg-secondary: base slider bg; peer-checked:bg-indigo-600: checked slider bg;
after: absolute round knob dot; peer-checked:after:translate-x-4: moves knob when checked --&gt;
&lt;div class="w-9 h-5 bg-secondary rounded-full border border-border peer-checked:bg-indigo-600 peer-checked:border-indigo-500 transition-all duration-300 relative after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-slate-400 after:rounded-full after:h-[14px] after:w-[14px] after:transition-all peer-checked:after:translate-x-4 peer-checked:after:bg-white"&gt;&lt;/div&gt;
&lt;/label&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;!-- 1. Toggle Switch Variant --&gt;
{{ "{{" }} ui::toggle_switch(name="demo_toggle", label="Toggle Status", checked=false) {{ "}}" }}
&lt;!-- 2. Custom Checkbox --&gt;
&lt;label class="flex items-center gap-3 cursor-pointer group"&gt;
&lt;!-- sr-only peer hides checkbox input globally but exposes its state --&gt;
&lt;input type="checkbox" class="sr-only peer"&gt;
&lt;!-- peer-checked:[&amp;_svg]:opacity-100: uses a descendant selector to show the checkmark when checked --&gt;
&lt;div class="w-4 h-4 rounded bg-popover border border-border flex items-center justify-center peer-checked:bg-indigo-600 peer-checked:border-indigo-500 peer-checked:[&amp;_svg]:opacity-100 transition"&gt;
&lt;svg class="w-2.5 h-2.5 text-white opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4"&gt;
&lt;path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/&gt;
&lt;/svg&gt;
&lt;/div&gt;
&lt;span class="text-xs text-muted-foreground peer-checked:text-slate-200 select-none"&gt;Label Option&lt;/span&gt;
&lt;/label&gt;
{{ "{{" }} ui::checkbox(name="demo_checkbox", label="Enable Email notifications", checked=true) {{ "}}" }}
&lt;!-- 3. Custom Range Slider (accent-indigo-600 styles input thumb in modern browsers) --&gt;
&lt;div class="flex items-center gap-4"&gt;
&lt;!-- oninput: updates text element sibling content to display slider value --&gt;
&lt;input type="range" min="0" max="100" value="50" class="grow h-1 bg-secondary rounded-lg appearance-none cursor-pointer accent-indigo-600" oninput="this.nextElementSibling.textContent = this.value + '%'"&gt;
&lt;span class="text-xs font-mono font-bold text-sky-400 w-10 text-right"&gt;50%&lt;/span&gt;
&lt;/div&gt;</code></pre>
&lt;!-- 3. Custom Range Slider --&gt;
{{ "{{" }} ui::range_slider(name="demo_slider", label="Range Slider (0-100%)", min="0", max="100", value="50") {{ "}}" }}</code></pre>
</div>
</div>
</div>