feat: initialize template shell and basic components
This commit is contained in:
@@ -0,0 +1,135 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Buttons - Design System Wiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- Left Navigation Sidebar -->
|
||||
{% include "components/sidebar.html" %}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 space-y-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="pb-6 border-b border-border">
|
||||
<span class="text-xs font-semibold text-indigo-400">Actions / Navigation</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Buttons</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Standard button variants including primary, secondary, outlines, and statuses, completed with focus ring outlines, scale transformations on hover, and loading spinner designs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Buttons -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Button Variants & Interactive Demos</h2>
|
||||
|
||||
<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, 'btn-sandbox')">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, 'btn-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="btn-sandbox" class="wiki-pane flex flex-wrap gap-4 py-2">
|
||||
<button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background bg-primary text-primary-foreground hover:opacity-90 px-4 py-2.5 shadow-md shadow-slate-950/20 active:scale-95">
|
||||
Primary
|
||||
</button>
|
||||
|
||||
<button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background bg-secondary text-secondary-foreground hover:bg-secondary/80 px-4 py-2.5 active:scale-95">
|
||||
Secondary
|
||||
</button>
|
||||
|
||||
<button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background border border-border bg-transparent hover:bg-secondary text-slate-200 px-4 py-2.5 active:scale-95">
|
||||
Outline
|
||||
</button>
|
||||
|
||||
<button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-background bg-destructive text-destructive-foreground hover:opacity-90 px-4 py-2.5 shadow-md active:scale-95">
|
||||
Destructive
|
||||
</button>
|
||||
|
||||
<!-- Icon Button -->
|
||||
<button class="inline-flex items-center gap-2 justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 active:scale-95">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
Create Task
|
||||
</button>
|
||||
|
||||
<!-- Loading State -->
|
||||
<button disabled class="inline-flex items-center gap-2 justify-center rounded-xl text-xs font-bold bg-secondary text-slate-500 cursor-not-allowed px-4 py-2.5">
|
||||
<svg class="animate-spin h-3.5 w-3.5 text-slate-500" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Processing...
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="btn-code" 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-muted-foreground/90 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-2M8 5a2 2 0 012-2h2a2 2 0 012 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><!-- Primary Button -->
|
||||
<button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background bg-primary text-primary-foreground hover:opacity-90 px-4 py-2.5 shadow-md shadow-slate-950/20 active:scale-95">
|
||||
Primary
|
||||
</button>
|
||||
|
||||
<!-- Secondary Button -->
|
||||
<button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 bg-secondary text-secondary-foreground hover:bg-secondary/80 px-4 py-2.5 active:scale-95">
|
||||
Secondary
|
||||
</button>
|
||||
|
||||
<!-- Outline Button -->
|
||||
<button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 border border-border bg-transparent hover:bg-secondary text-slate-200 px-4 py-2.5 active:scale-95">
|
||||
Outline
|
||||
</button>
|
||||
|
||||
<!-- Destructive Button -->
|
||||
<button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-rose-500 bg-destructive text-destructive-foreground hover:opacity-90 px-4 py-2.5 active:scale-95">
|
||||
Destructive
|
||||
</button>
|
||||
|
||||
<!-- Create Button (Icon + Text) -->
|
||||
<button class="inline-flex items-center gap-2 justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 bg-indigo-650 hover:bg-indigo-600 text-white px-4 py-2.5 active:scale-95">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
Create Task
|
||||
</button>
|
||||
|
||||
<!-- Spinner Loading Button -->
|
||||
<button disabled class="inline-flex items-center gap-2 justify-center rounded-xl text-xs font-bold bg-secondary text-slate-500 cursor-not-allowed px-4 py-2.5">
|
||||
<svg class="animate-spin h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></svg>
|
||||
Processing...
|
||||
</button></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleWikiTabs(btn, paneId) {
|
||||
const card = btn.closest('.border-border');
|
||||
if (!card) return;
|
||||
card.querySelectorAll('button').forEach(b => {
|
||||
b.classList.remove('border-sky-500', 'text-sky-400');
|
||||
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
});
|
||||
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
btn.classList.add('border-sky-500', 'text-sky-400');
|
||||
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
||||
const target = card.querySelector('#' + paneId);
|
||||
if (target) target.classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,216 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Autocomplete (Combobox) - Design System Wiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- Left Navigation Sidebar -->
|
||||
{% include "components/sidebar.html" %}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 space-y-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="pb-6 border-b border-border">
|
||||
<span class="text-xs font-semibold text-indigo-400">Forms & Inputs</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Autocomplete (Combobox)</h1>
|
||||
<p class="text-slate-405 text-sm mt-2 leading-relaxed">
|
||||
Asynchronous search dropdown inputs driven by HTMX requests with fully integrated keyboard navigation, focus overlays, selection, and hidden inputs for form validation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Combobox -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Autocomplete Showcase & Integration</h2>
|
||||
|
||||
<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, 'combo-sandbox')">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, 'combo-client-code')">Client-Side HTML</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, 'combo-server-code')">Server-Side HTML</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="combo-sandbox" class="wiki-pane grid grid-cols-1 md:grid-cols-2 gap-8 py-2">
|
||||
|
||||
<!-- Left: Client-side Demo -->
|
||||
<div class="space-y-2 max-w-xs w-full">
|
||||
<span class="text-[10px] font-bold text-indigo-400 uppercase tracking-wider block mb-1">Client-Side Filtering</span>
|
||||
<div class="autocomplete-combobox relative">
|
||||
<label class="block text-xs font-semibold text-muted-foreground mb-1.5">Local Developer List</label>
|
||||
<input type="hidden" id="wiki-assignee-id" class="combobox-value">
|
||||
<input type="text" id="wiki-assignee-search" placeholder="Type name e.g. Bob..." 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">
|
||||
|
||||
<div class="combobox-results absolute z-10 w-full mt-2 bg-popover border border-border rounded-xl p-1 shadow-xl hidden">
|
||||
<div class="combobox-item flex items-center w-full h-8 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-200 cursor-pointer select-none" data-id="1" data-name="Alice Vance" tabindex="0">Alice Vance (Lead)</div>
|
||||
<div class="combobox-item flex items-center w-full h-8 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-200 cursor-pointer select-none" data-id="2" data-name="Bob Carter" tabindex="0">Bob Carter (Senior)</div>
|
||||
<div class="combobox-item flex items-center w-full h-8 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-200 cursor-pointer select-none" data-id="3" data-name="Charlie Smith" tabindex="0">Charlie Smith (Junior)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Server-side Demo -->
|
||||
<div class="space-y-2 max-w-xs w-full">
|
||||
<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>
|
||||
{% 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">
|
||||
<svg class="h-4.5 w-4.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
|
||||
Authentication Required
|
||||
</div>
|
||||
<p class="text-muted-foreground leading-normal">
|
||||
To query the MongoDB database on the server, you must sign in to an active session first.
|
||||
</p>
|
||||
<a href="/auth/login" class="inline-flex items-center text-xs font-semibold text-sky-400 hover:text-sky-350 gap-1 mt-1">
|
||||
Log in to query database
|
||||
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Client-Side Code Snippet Area -->
|
||||
<div id="combo-client-code" 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-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><!-- Client-Side Combobox Container (Filtered Locally) -->
|
||||
<div class="autocomplete-combobox relative">
|
||||
<!-- Holds the final value submitted to forms -->
|
||||
<input type="hidden" name="developer_id" class="combobox-value">
|
||||
|
||||
<!-- Input box handles local filtering -->
|
||||
<input type="text" placeholder="Type name e.g. Bob..." 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">
|
||||
|
||||
<!-- Dropdown lists all options, filtered on input/focus dynamically -->
|
||||
<div class="combobox-results absolute z-10 w-full mt-2 bg-popover border border-border rounded-xl p-1 shadow-xl hidden">
|
||||
<div class="combobox-item flex items-center w-full h-8 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-200 cursor-pointer select-none" data-id="1" data-name="Alice Vance" tabindex="0">Alice Vance (Lead)</div>
|
||||
<div class="combobox-item flex items-center w-full h-8 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-200 cursor-pointer select-none" data-id="2" data-name="Bob Carter" tabindex="0">Bob Carter (Senior)</div>
|
||||
<div class="combobox-item flex items-center w-full h-8 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-200 cursor-pointer select-none" data-id="3" data-name="Charlie Smith" tabindex="0">Charlie Smith (Junior)</div>
|
||||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Server-Side Code Snippet Area -->
|
||||
<div id="combo-server-code" 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-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><!-- Server-Side Combobox Container (Asynchronous Query via HTMX) -->
|
||||
<div class="autocomplete-combobox relative">
|
||||
<!-- Holds the final value submitted to forms -->
|
||||
<input type="hidden" name="assignee_id" class="combobox-value">
|
||||
|
||||
<!-- Input box triggers search query. Submits with parameter 'q' -->
|
||||
<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">
|
||||
|
||||
<!-- Dropdown container receives swapped HTML markup from server -->
|
||||
<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></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Global JS Bindings Documentation -->
|
||||
<section class="space-y-4 border-t border-border/60 pt-6">
|
||||
<h2 class="text-lg font-bold text-slate-200">How the Global Combobox JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed">
|
||||
The global script <code>combobox.js</code> runs automatically on page load and hooks onto the class names listed below. Ensure your markup uses these selectors to integrate keyboard selection and local/remote filtering:
|
||||
</p>
|
||||
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
|
||||
<table class="w-full border-collapse text-left text-xs">
|
||||
<thead>
|
||||
<tr class="border-b border-border text-muted-foreground font-bold">
|
||||
<th class="pb-2.5 w-1/4">Selector / Class</th>
|
||||
<th class="pb-2.5 w-1/4">Type</th>
|
||||
<th class="pb-2.5">Behavior & Purpose</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.autocomplete-combobox</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Wraps all input elements, hidden inputs, and search result list containers.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.combobox-value</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to the <code><input type="hidden"></code> element that holds the final selection key (e.g. database ID) for form validation and submission.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.combobox-input</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to the visible <code><input type="text"></code> element. Captures typing, trigger clicks, and keyboard arrow navigation events.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.combobox-results</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
The overlay list container. Starts with the class <code>hidden</code>. Toggled open on focus, click, or when query results return.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.combobox-item</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to option elements. Must contain <code>tabindex="0"</code> (for keyboard focus), <code>data-id="..."</code> (database value), and <code>data-name="..."</code> (display value).
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
|
||||
<span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
|
||||
<p class="text-slate-400 leading-normal">
|
||||
You can customize the visual appearance of the options list <code>.combobox-results</code>, option heights, text alignment, input styles, borders, icons, and colors. The functional classes (like <code>.combobox-input</code>, <code>.combobox-value</code>, <code>.combobox-item</code>) must remain intact, and each item must include the <code>data-id</code>, <code>data-name</code>, and <code>tabindex="0"</code> attributes so they participate in keyboard selection cycling and updates.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleWikiTabs(btn, paneId) {
|
||||
const card = btn.closest('.border-border');
|
||||
if (!card) return;
|
||||
card.querySelectorAll('button').forEach(b => {
|
||||
b.classList.remove('border-sky-500', 'text-sky-400');
|
||||
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
});
|
||||
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
btn.classList.add('border-sky-500', 'text-sky-400');
|
||||
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
||||
const target = card.querySelector('#' + paneId);
|
||||
if (target) target.classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,392 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Date & Time Pickers - Design System Wiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- Left Navigation Sidebar -->
|
||||
{% include "components/sidebar.html" %}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 space-y-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="pb-6 border-b border-border">
|
||||
<span class="text-xs font-semibold text-indigo-400">Pickers</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Date & Time Pickers</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Custom popup calendars and hour/minute scroll menus constructed using DOM components to prevent relying on native browser-system calendar windows. Designed for optimal styling consistency.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Pickers -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Date & Time Popovers</h2>
|
||||
|
||||
<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, 'picker-sandbox')">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, 'picker-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="picker-sandbox" class="wiki-pane grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-lg py-2">
|
||||
<!-- Date Picker -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-semibold text-slate-405">Date Picker</label>
|
||||
<div class="custom-datepicker relative inline-block w-full" id="wiki-datepicker" data-year="2026" data-month="4">
|
||||
<input type="hidden" name="wiki_date" class="datepicker-value" value="2026-05-30">
|
||||
<button type="button" class="datepicker-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 transition focus:outline-none focus:ring-2 focus:ring-sky-500">
|
||||
<span class="datepicker-label flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span class="datepicker-text">May 30, 2026</span>
|
||||
</span>
|
||||
<svg class="h-4 w-4 text-slate-500" 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="datepicker-popover absolute left-0 z-20 mt-2 w-[270px] p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
|
||||
<div class="flex items-center justify-between mb-3.5">
|
||||
<button type="button" class="datepicker-prev p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white transition">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</button>
|
||||
<span class="datepicker-month-year text-xs font-bold text-slate-200">May 2026</span>
|
||||
<button type="button" class="datepicker-next p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white transition">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-1 text-center text-[10px] font-bold text-slate-500 mb-2">
|
||||
<span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
|
||||
</div>
|
||||
<div class="datepicker-days grid grid-cols-7 gap-1 text-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time Picker -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-semibold text-slate-405">Time Picker</label>
|
||||
<div class="custom-timepicker relative inline-block w-full" id="wiki-timepicker">
|
||||
<input type="hidden" name="wiki_time" class="timepicker-value" value="12:00 PM">
|
||||
<button type="button" class="timepicker-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 transition focus:outline-none focus:ring-2 focus:ring-sky-500">
|
||||
<span class="timepicker-label flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span class="timepicker-text">12:00 PM</span>
|
||||
</span>
|
||||
<svg class="h-4 w-4 text-slate-500" 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="timepicker-popover absolute right-0 sm:left-0 z-20 mt-2 w-[230px] p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
|
||||
<div class="flex gap-2 justify-center items-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Hr</span>
|
||||
<div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-hours"></div>
|
||||
</div>
|
||||
<span class="text-slate-500 font-bold self-end mb-12">:</span>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Min</span>
|
||||
<div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-minutes"></div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center ml-1">
|
||||
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Am/Pm</span>
|
||||
<div class="flex flex-col gap-1 w-12">
|
||||
<button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground">AM</button>
|
||||
<button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground">PM</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="picker-code" class="wiki-pane hidden space-y-4">
|
||||
<!-- Date Picker Code -->
|
||||
<div class="space-y-2">
|
||||
<span class="text-xs font-bold text-muted-foreground block">Date Picker HTML Structure</span>
|
||||
<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-muted-foreground/90 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-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
|
||||
Copy Date Picker Code
|
||||
</button>
|
||||
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code><!-- Custom Date Picker Container
|
||||
- class "custom-datepicker": required for JavaScript target binding
|
||||
- data-year / data-month: initializes the calendar viewport (month is 0-indexed: 4 = May) -->
|
||||
<div class="custom-datepicker relative inline-block w-full" id="unique-datepicker-id" data-year="2026" data-month="4">
|
||||
<!-- Hidden input that holds the actual selected date (YYYY-MM-DD) to submit with the form -->
|
||||
<input type="hidden" name="date_value" class="datepicker-value" value="2026-05-30">
|
||||
|
||||
<!-- Trigger Button: opens/closes the dropdown calendar popover -->
|
||||
<button type="button" class="datepicker-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">
|
||||
<span class="datepicker-label flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<!-- text-label: will be dynamically updated by components.js when a day is selected -->
|
||||
<span class="datepicker-text">Pick a date</span>
|
||||
</span>
|
||||
<svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</button>
|
||||
|
||||
<!-- Popover: holds month controls and calendar grids -->
|
||||
<div class="datepicker-popover absolute left-0 z-20 mt-2 w-[270px] p-3 rounded-2xl border border-border bg-popover shadow-2xl hidden">
|
||||
<!-- Navigation Controls -->
|
||||
<div class="flex items-center justify-between mb-3.5">
|
||||
<button type="button" class="datepicker-prev p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</button>
|
||||
<!-- Current visible Month/Year label -->
|
||||
<span class="datepicker-month-year text-xs font-bold text-slate-200"></span>
|
||||
<button type="button" class="datepicker-next p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Weekday column labels -->
|
||||
<div class="grid grid-cols-7 gap-1 text-center text-[10px] font-bold text-slate-500 mb-2">
|
||||
<span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
|
||||
</div>
|
||||
<!-- Day Grid (filled dynamically with days by components.js on load) -->
|
||||
<div class="datepicker-days grid grid-cols-7 gap-1 text-center"></div>
|
||||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time Picker Code -->
|
||||
<div class="space-y-2">
|
||||
<span class="text-xs font-bold text-muted-foreground block">Time Picker HTML Structure</span>
|
||||
<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-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
|
||||
Copy Time Picker Code
|
||||
</button>
|
||||
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code><!-- Custom Time Picker Container
|
||||
- class "custom-timepicker": required for JavaScript target binding -->
|
||||
<div class="custom-timepicker relative inline-block w-full" id="unique-timepicker-id">
|
||||
<!-- Hidden input holds selected value (e.g., "12:00 PM") for form submission -->
|
||||
<input type="hidden" name="time_value" class="timepicker-value" value="12:00 PM">
|
||||
|
||||
<!-- Trigger Button -->
|
||||
<button type="button" class="timepicker-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">
|
||||
<span class="timepicker-label flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<!-- Time text label updated dynamically on pick -->
|
||||
<span class="timepicker-text">12:00 PM</span>
|
||||
</span>
|
||||
<svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</button>
|
||||
|
||||
<!-- Time Picker Dropdown Menu -->
|
||||
<div class="timepicker-popover absolute left-0 z-20 mt-2 w-[230px] p-3 rounded-2xl border border-border bg-popover shadow-2xl hidden">
|
||||
<div class="flex gap-2 justify-center items-center">
|
||||
<!-- Hours Column (filled with <button>s 1 to 12 dynamically by components.js) -->
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Hr</span>
|
||||
<div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-hours"></div>
|
||||
</div>
|
||||
|
||||
<span class="text-slate-500 font-bold self-end mb-12">:</span>
|
||||
|
||||
<!-- Minutes Column (filled with <button>s 00 to 55 in 5m steps dynamically) -->
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Min</span>
|
||||
<div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-minutes"></div>
|
||||
</div>
|
||||
|
||||
<!-- AM/PM Selector -->
|
||||
<div class="flex flex-col items-center ml-1">
|
||||
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Am/Pm</span>
|
||||
<div class="flex flex-col gap-1 w-12">
|
||||
<button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground">AM</button>
|
||||
<button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground">PM</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Global JS Bindings Documentation -->
|
||||
<section class="space-y-6 border-t border-border/60 pt-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-slate-200">How the Global Date Picker JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed mt-1">
|
||||
The custom date picker relies on the following classes and datasets to manage month navigation and update values:
|
||||
</p>
|
||||
</div>
|
||||
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
|
||||
<table class="w-full border-collapse text-left text-xs">
|
||||
<thead>
|
||||
<tr class="border-b border-border text-muted-foreground font-bold">
|
||||
<th class="pb-2.5 w-1/3">Selector / Class</th>
|
||||
<th class="pb-2.5 w-1/6">Type</th>
|
||||
<th class="pb-2.5">Behavior & Purpose</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.custom-datepicker</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Wraps the date picker component. Must declare <code>data-year</code> (e.g. 2026) and <code>data-month</code> (0-indexed, 0 = Jan, 4 = May) to initialize the viewport.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-value</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Hidden input field (<code><input type="hidden"></code>) storing the ISO date value (YYYY-MM-DD) for form submission.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-trigger</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Button clicked by user to open or close the calendar popover dropdown.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-text</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Target text element updated dynamically to display the formatted selected date (e.g., "May 30, 2026").
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-popover</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Floating container containing the month navigation buttons and days grids. Starts as <code>hidden</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-prev / .datepicker-next</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Navigational buttons to decrement or increment the active month.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-month-year</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Display title label updated dynamically with current month and year (e.g. "May 2026").
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-days</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Calendar day grid container dynamically populated with clickable day buttons by the JS engine.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-slate-200 mt-4">How the Global Time Picker JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed mt-1">
|
||||
The custom time picker scopes dynamic lists of hours and minutes inside scrollable blocks using the following bindings:
|
||||
</p>
|
||||
</div>
|
||||
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
|
||||
<table class="w-full border-collapse text-left text-xs">
|
||||
<thead>
|
||||
<tr class="border-b border-border text-muted-foreground font-bold">
|
||||
<th class="pb-2.5 w-1/3">Selector / Class</th>
|
||||
<th class="pb-2.5 w-1/6">Type</th>
|
||||
<th class="pb-2.5">Behavior & Purpose</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.custom-timepicker</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Wraps the time picker markup structure.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-value</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Hidden input field storing the active text time (e.g. "12:00 PM") for forms.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-trigger</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Clickable button to open the scroll dropdown.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-text</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Text node inside trigger displaying the formatted time.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-popover</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Dropdown overlay panel displaying columns for hour list, minute list, and AM/PM buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-col-hours / .timepicker-col-minutes</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Containers populated automatically with hourly buttons (1-12) and minute buttons (00-55).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-ampm-btn</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Buttons representing "AM" and "PM" choices toggled on click.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
|
||||
<span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
|
||||
<p class="text-slate-400 leading-normal">
|
||||
You can customize the styling of the trigger buttons, chevrons, icons, popover cards, borders, shadows, backgrounds, and the active option buttons (which receive <code>.bg-indigo-600</code>). Ensure you preserve the classes and attributes listed above so the DOM-generation functions and trigger listeners in <code>components.js</code> execute without error.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleWikiTabs(btn, paneId) {
|
||||
const card = btn.closest('.border-border');
|
||||
if (!card) return;
|
||||
card.querySelectorAll('button').forEach(b => {
|
||||
b.classList.remove('border-sky-500', 'text-sky-400');
|
||||
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
});
|
||||
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
btn.classList.add('border-sky-500', 'text-sky-400');
|
||||
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
||||
const target = card.querySelector('#' + paneId);
|
||||
if (target) target.classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,130 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Toasts & Alerts - Design System Wiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- Left Navigation Sidebar -->
|
||||
{% include "components/sidebar.html" %}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 space-y-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="pb-6 border-b border-border">
|
||||
<span class="text-xs font-semibold text-indigo-405">Feedback</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Toasts & Alerts</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Dynamic toast stack notifications triggered from JavaScript, combined with static SVG alert boxes for validation errors or warnings.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Feedback -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Interactive Toast & Alert Showcase</h2>
|
||||
|
||||
<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, 'feedback-sandbox')">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, 'feedback-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="feedback-sandbox" class="wiki-pane space-y-4 max-w-md py-2">
|
||||
<!-- Toast triggers -->
|
||||
<div class="space-y-2">
|
||||
<span class="block text-xs font-semibold text-muted-foreground">Toast Notifications</span>
|
||||
<div class="flex gap-2">
|
||||
<button type="button" class="inline-flex items-center justify-center rounded-xl text-xs font-bold bg-secondary border border-border text-slate-200 px-4 py-2 hover:bg-secondary active:scale-95 transition" onclick="showToast('Operation finished successfully!')">
|
||||
Trigger Toast
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert callouts -->
|
||||
<div class="space-y-2.5">
|
||||
<span class="block text-xs font-semibold text-muted-foreground">Static Callout Banners</span>
|
||||
|
||||
<!-- Info Banner -->
|
||||
<div class="rounded-2xl border border-sky-500/20 bg-sky-500/5 p-4 flex gap-3 text-xs text-sky-400">
|
||||
<svg class="h-4.5 w-4.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<span class="font-bold text-slate-100 block">General Information</span>
|
||||
<span class="text-muted-foreground leading-relaxed block mt-0.5">Please remember to assign the task to an active workspace developer.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Warning Banner -->
|
||||
<div class="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4 flex gap-3 text-xs text-amber-400">
|
||||
<svg class="h-4.5 w-4.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<span class="font-bold text-slate-100 block">Database Sync Issues</span>
|
||||
<span class="text-muted-foreground leading-relaxed block mt-0.5">Local connections to MongoDB might be interrupted temporarily.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="feedback-code" 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-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><!-- 1. Dynamic Toast Trigger from JS -->
|
||||
<button onclick="showToast('Action Completed Successfully!')">
|
||||
Trigger Success Toast
|
||||
</button>
|
||||
|
||||
<!-- 2. Static Info Banner Alert -->
|
||||
<div class="rounded-2xl border border-sky-500/20 bg-sky-500/5 p-4 flex gap-3 text-xs text-sky-400">
|
||||
<svg class="h-4.5 w-4.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<span class="font-bold text-slate-100 block">Alert Title</span>
|
||||
<span class="text-muted-foreground block mt-0.5">Description of alert information.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Static Warning Banner Alert -->
|
||||
<div class="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4 flex gap-3 text-xs text-amber-400">
|
||||
<svg class="h-4.5 w-4.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<span class="font-bold text-slate-100 block">Warning Title</span>
|
||||
<span class="text-muted-foreground block mt-0.5">Warning context content details.</span>
|
||||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleWikiTabs(btn, paneId) {
|
||||
const card = btn.closest('.border-border');
|
||||
if (!card) return;
|
||||
card.querySelectorAll('button').forEach(b => {
|
||||
b.classList.remove('border-sky-500', 'text-sky-400');
|
||||
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
});
|
||||
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
btn.classList.add('border-sky-500', 'text-sky-400');
|
||||
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
||||
const target = card.querySelector('#' + paneId);
|
||||
if (target) target.classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,133 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Design System Wiki - Stick{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- Left Floating Sidebar Navigation -->
|
||||
{% include "components/sidebar.html" %}
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="flex-1 space-y-10">
|
||||
|
||||
<!-- Intro Header -->
|
||||
<div class="pb-6 border-b border-border">
|
||||
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 mb-3 animate-pulse">
|
||||
Stick Design System Wiki
|
||||
</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight">Component Reference Manual</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Welcome to the Stick design system Wiki. This documentation serves as a living blueprint detailing HTML structures, Tailwind CSS custom variables, and JavaScript trigger hooks required to build premium, high-fidelity interactive elements using the Shadcn aesthetic.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Architecture & Concept -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="border border-border bg-secondary/10 rounded-2xl p-6 space-y-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-sky-400/20 to-indigo-500/20 border border-sky-500/30 flex items-center justify-center">
|
||||
<svg class="h-5 w-5 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-sm font-bold text-slate-200">Vertical Feature Architecture</h3>
|
||||
<p class="text-xs text-muted-foreground/90 leading-relaxed">
|
||||
Components are packaged inside feature directories (e.g. <code>src/components/</code>) rather than spread horizontally. Handlers render Askama templates, static JS, and compiled Tailwind assets dynamically.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-border bg-secondary/10 rounded-2xl p-6 space-y-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-emerald-400/20 to-teal-500/20 border border-emerald-500/30 flex items-center justify-center">
|
||||
<svg class="h-5 w-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-sm font-bold text-slate-200">Lightweight & Dependency-Free</h3>
|
||||
<p class="text-xs text-muted-foreground/90 leading-relaxed">
|
||||
Designed to minimize heavy JS bundles. Using vanilla JavaScript with document-level event delegation (e.g. for Modals, Sheets, Accordions, and Tabs) keeping the interactive shell fast and responsive.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Styling tokens -->
|
||||
<div class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-250">Global HSL Tokens</h2>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
The layout relies on standard Tailwind themes mapped onto raw HSL variables, allowing instant utility customization.
|
||||
</p>
|
||||
|
||||
<div class="border border-border bg-card/50 rounded-2xl p-5 overflow-x-auto">
|
||||
<table class="w-full border-collapse text-left text-xs">
|
||||
<thead>
|
||||
<tr class="border-b border-border text-muted-foreground font-bold">
|
||||
<th class="pb-2.5">Variable</th>
|
||||
<th class="pb-2.5">Raw HSL Mapping</th>
|
||||
<th class="pb-2.5">Render Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/40 text-muted-foreground font-mono text-[11px]">
|
||||
<tr>
|
||||
<td class="py-2 text-muted-foreground font-sans font-semibold">--background</td>
|
||||
<td class="py-2">224 71% 4%</td>
|
||||
<td class="py-2">
|
||||
<div class="w-4 h-4 rounded bg-[#030712] border border-border"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 text-muted-foreground font-sans font-semibold">--primary</td>
|
||||
<td class="py-2">210 40% 98%</td>
|
||||
<td class="py-2">
|
||||
<div class="w-4 h-4 rounded bg-[#f8fafc]"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 text-muted-foreground font-sans font-semibold">--border / --input</td>
|
||||
<td class="py-2">216 34% 17%</td>
|
||||
<td class="py-2">
|
||||
<div class="w-4 h-4 rounded bg-[#1e293b]"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 text-muted-foreground font-sans font-semibold">--ring</td>
|
||||
<td class="py-2">216 12.2% 83.9%</td>
|
||||
<td class="py-2">
|
||||
<div class="w-4 h-4 rounded ring-2 ring-slate-400"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Architecture & Contract Philosophy -->
|
||||
<div class="space-y-4 border-t border-border/60 pt-8">
|
||||
<h2 class="text-lg font-bold text-slate-200">Understanding the JS Binding Architecture</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed">
|
||||
Rather than attaching active event listeners to every individual DOM node, the design system utilizes <strong>document-level event delegation</strong> and <strong>global query selector hooks</strong>. This keeps page loads incredibly fast and handles dynamically rendered components automatically.
|
||||
</p>
|
||||
|
||||
<div class="rounded-2xl border border-indigo-500/20 bg-indigo-500/5 p-5 text-xs space-y-4">
|
||||
<div>
|
||||
<span class="font-bold text-indigo-400 block mb-1">🔗 The Core Binding Contract</span>
|
||||
<p class="text-slate-400 leading-normal">
|
||||
To make components interactive, they must contain specific functional CSS classes or attributes (e.g., <code>.modal-dialog</code>, <code>[data-modal-target]</code>, <code>.custom-select</code>) that the Javascript file uses to query the DOM. If these functional hooks are missing or renamed, the interactivity will fail.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="font-bold text-indigo-400 block mb-1">🎨 What is Customizable vs. Fixed?</span>
|
||||
<ul class="list-disc pl-5 space-y-1.5 text-slate-400 leading-normal">
|
||||
<li>
|
||||
<strong class="text-slate-200">Fixed (Functional) Hooks:</strong> Standard semantic class names (like <code>.modal-dialog</code>, <code>.modal-content</code>, <code>.modal-backdrop</code>, <code>.modal-close</code>, <code>.select-trigger</code>, and <code>.select-item</code>) are required structure hooks. These must remain unchanged because our JavaScript code expects them to animate opacity, visibility, translation transform stages, and handle keydown events.
|
||||
</li>
|
||||
<li>
|
||||
<strong class="text-slate-200">Customizable (Styling) Rules:</strong> Any Tailwind visual classes (like colors e.g. <code>bg-slate-900</code>, padding/margin <code>p-6 mt-2</code>, border-radius <code>rounded-3xl</code>, drop shadows <code>shadow-xl</code>, borders <code>border-border</code>, and custom fonts) can be modified, replaced, or completely restyled. As long as you maintain the core HTML nesting hierarchy and functional selector names, the component will work perfectly.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,221 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Form Fields & Select - Design System Wiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- Left Navigation Sidebar -->
|
||||
{% include "components/sidebar.html" %}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 space-y-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="pb-6 border-b border-border">
|
||||
<span class="text-xs font-semibold text-indigo-400">Forms & Inputs</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Form Fields & Select</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Standard text inputs, passwords, multi-line textareas, and custom styled select dropdown elements overdrawn by vector SVG chevron arrows.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Fields -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Form Inputs & Select Menu Showcase</h2>
|
||||
|
||||
<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, 'input-sandbox')">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, 'input-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="input-code" class="wiki-pane hidden">
|
||||
<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-muted-foreground/90 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-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><!-- Styled Text Input -->
|
||||
<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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200">
|
||||
</div>
|
||||
|
||||
<!-- Styled 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..."
|
||||
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"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Custom Styled Select Dropdown (Chevron and Popover managed globally in components.js) -->
|
||||
<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">
|
||||
<!-- Hidden input holds the actual value for form submissions -->
|
||||
<input type="hidden" name="specialization" class="select-value" value="Senior Rust Engineer">
|
||||
|
||||
<!-- Toggle trigger button -->
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<!-- Options Popover -->
|
||||
<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">
|
||||
<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 text-slate-200 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 text-slate-200 text-left" data-value="Frontend Architect">Frontend Architect</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Global JS Bindings Documentation -->
|
||||
<section class="space-y-4 border-t border-border/60 pt-6">
|
||||
<h2 class="text-lg font-bold text-slate-200">How the Global Custom Select JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed">
|
||||
The global script <code>components.js</code> monitors specific class names to run the premium custom select elements. Ensure your markup uses these selectors to integrate selection, triggers, and keyboard arrow controls:
|
||||
</p>
|
||||
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
|
||||
<table class="w-full border-collapse text-left text-xs">
|
||||
<thead>
|
||||
<tr class="border-b border-border text-muted-foreground font-bold">
|
||||
<th class="pb-2.5 w-1/4">Selector / Class</th>
|
||||
<th class="pb-2.5 w-1/4">Type</th>
|
||||
<th class="pb-2.5">Behavior & Purpose</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.custom-select</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Outer wrapper for the entire select component. Scopes and isolates input values and popovers.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-value</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to the <code><input type="hidden"></code> that stores the raw value submitted to forms.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-trigger</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
The visible button that user clicks. Toggles popover visibility and chevron rotation on click.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-text</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Inner text element inside trigger button that dynamically changes its text content to match the selected option.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-chevron</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Arrow SVG icon. Rotates 180 degrees (adds <code>rotate-180</code>) when the menu opens.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-popover</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Floating list container. Starts with the class <code>hidden</code>. Positioned absolutely.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-item</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to choices inside popover (usually buttons). Must have <code>data-value="..."</code> containing the raw option value.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
|
||||
<span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
|
||||
<p class="text-slate-400 leading-normal">
|
||||
You can customize the button trigger layout (paddings, chevrons, fonts, sizing), borders, shadows, options listing alignment, and checkmark icons. Ensure you preserve the classes <code>.custom-select</code>, <code>.select-value</code>, <code>.select-trigger</code>, <code>.select-popover</code>, and <code>.select-item</code> with its <code>data-value</code> attribute so that mouse selections and keyboard arrows function correctly.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleWikiTabs(btn, paneId) {
|
||||
const card = btn.closest('.border-border');
|
||||
if (!card) return;
|
||||
card.querySelectorAll('button').forEach(b => {
|
||||
b.classList.remove('border-sky-500', 'text-sky-400');
|
||||
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
});
|
||||
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
btn.classList.add('border-sky-500', 'text-sky-400');
|
||||
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
||||
const target = card.querySelector('#' + paneId);
|
||||
if (target) target.classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,169 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Dialog Modals - Design System Wiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- Left Navigation Sidebar -->
|
||||
{% include "components/sidebar.html" %}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 space-y-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="pb-6 border-b border-border">
|
||||
<span class="text-xs font-semibold text-indigo-400">Overlays</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Dialog Modals</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Overlay window popups centering inside the viewport with scale animations, hardware blur filters, and document-level listeners for escape-key/backdrop dismissals.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Modals -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Modal Showcase & Integration</h2>
|
||||
|
||||
<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, 'modal-sandbox')">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, 'modal-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="modal-sandbox" class="wiki-pane py-2">
|
||||
<button data-modal-target="wiki-demo-modal" class="inline-flex items-center justify-center rounded-xl text-xs font-bold bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 transition active:scale-95">
|
||||
Open Modal Dialog
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="modal-code" 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-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><!-- Trigger Button (points to modal element ID) -->
|
||||
<button data-modal-target="my-modal-id" class="px-4 py-2 bg-indigo-600 text-white text-xs font-bold rounded-xl">
|
||||
Open Modal
|
||||
</button>
|
||||
|
||||
<!-- Modal Overlay Element -->
|
||||
<div id="my-modal-id" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true">
|
||||
<!-- Backdrop shadow with blur -->
|
||||
<div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"></div>
|
||||
|
||||
<!-- Modal Panel with scale / opacity transition -->
|
||||
<div class="modal-content relative z-10 w-full max-w-sm scale-95 opacity-0 transition-all duration-300 border border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl rounded-3xl">
|
||||
<h3 class="text-sm font-bold text-slate-100">Confirmation Title</h3>
|
||||
<p class="text-xs text-muted-foreground mt-2 leading-relaxed">Are you sure you want to proceed?</p>
|
||||
|
||||
<!-- Close triggers require class 'modal-close' -->
|
||||
<button class="modal-close mt-4 w-full py-2 rounded-xl bg-secondary border border-border text-slate-200 text-xs font-semibold">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Global JS Bindings Documentation -->
|
||||
<section class="space-y-4 border-t border-border/60 pt-6">
|
||||
<h2 class="text-lg font-bold text-slate-200">How the Global Modal JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed">
|
||||
The global script <code>components.js</code> runs automatically on page load and monitors specific attributes and classes. Here is what makes the modal operational:
|
||||
</p>
|
||||
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
|
||||
<table class="w-full border-collapse text-left text-xs">
|
||||
<thead>
|
||||
<tr class="border-b border-border text-muted-foreground font-bold">
|
||||
<th class="pb-2.5 w-1/4">Selector / Class</th>
|
||||
<th class="pb-2.5 w-1/4">Type</th>
|
||||
<th class="pb-2.5">Behavior & Purpose</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">[data-modal-target]</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to buttons or triggers. The value must match the ID of the modal dialog (e.g., <code>data-modal-target="my-modal"</code>). Clicking it triggers <code>openModal("my-modal")</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.modal-dialog</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
The outer wrapper container. Starts with the class <code>hidden</code>. The JS removes/adds <code>hidden</code> to show/hide the popup.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.modal-content</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
The inner dialog panel card. The JS looks for this class to toggle transitions (adds <code>scale-100 opacity-100</code> on show; resets to <code>scale-95 opacity-0</code> on hide).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.modal-backdrop</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
The dark blur overlay. The JS toggles its opacity and registers clicks on it to automatically close the modal.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.modal-close</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to any close button (e.g., "Cancel", "Confirm", or an "X" icon). Clicking any element containing this class triggers modal closure.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
|
||||
<span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
|
||||
<p class="text-slate-400 leading-normal">
|
||||
You can customize the styling, colors, layout, and sizing of the <code>.modal-content</code> card freely. You must preserve the classes listed above so the Javascript code can target them and apply animations correctly.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Modal Sandbox Element -->
|
||||
<div id="wiki-demo-modal" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true">
|
||||
<div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"></div>
|
||||
<div class="modal-content relative z-10 w-full max-w-sm scale-95 opacity-0 transition-all duration-300 border border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl rounded-3xl text-center">
|
||||
<div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 mb-3">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-sm font-bold text-slate-100">Wiki Sandbox Modal</h3>
|
||||
<p class="text-xs text-slate-405 mt-2 leading-relaxed">This modal is animated and handled globally by <code>components.js</code>. Pressing escape or clicking outside closes it instantly.</p>
|
||||
<button class="modal-close mt-4 w-full py-2 rounded-xl bg-secondary border border-border hover:bg-secondary transition text-xs font-semibold text-slate-200">Dismiss Modal</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleWikiTabs(btn, paneId) {
|
||||
const card = btn.closest('.border-border');
|
||||
if (!card) return;
|
||||
card.querySelectorAll('button').forEach(b => {
|
||||
b.classList.remove('border-sky-500', 'text-sky-400');
|
||||
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
});
|
||||
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
btn.classList.add('border-sky-500', 'text-sky-400');
|
||||
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
||||
const target = card.querySelector('#' + paneId);
|
||||
if (target) target.classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,105 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Custom Scrollbars - Design System Wiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- Left Navigation Sidebar -->
|
||||
{% include "components/sidebar.html" %}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 space-y-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="pb-6 border-b border-border">
|
||||
<span class="text-xs font-semibold text-indigo-400">Styles</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Custom Scrollbars</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Thin custom scrollbars replacing chunky default native OS scrollbars using modern cross-browser CSS rules.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Scrollbars -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Scrollbar Customization Showcase</h2>
|
||||
|
||||
<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, 'scroll-sandbox')">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, 'scroll-code')">CSS Rules</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="scroll-sandbox" class="wiki-pane max-w-sm py-2">
|
||||
<div class="max-h-28 overflow-y-auto pr-1.5 border border-border rounded-xl p-2 bg-card/50 space-y-1.5">
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 1</div>
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 2</div>
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 3</div>
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 4</div>
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 5</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="scroll-code" 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-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
|
||||
Copy CSS Rules
|
||||
</button>
|
||||
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>/* Custom Webkit scrollbar rules (applied in input.css) */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: hsl(var(--border)) transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--border));
|
||||
border-radius: 9999px;
|
||||
border: 1px solid transparent;
|
||||
background-clip: padding-box;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--muted-foreground));
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleWikiTabs(btn, paneId) {
|
||||
const card = btn.closest('.border-border');
|
||||
if (!card) return;
|
||||
card.querySelectorAll('button').forEach(b => {
|
||||
b.classList.remove('border-sky-500', 'text-sky-400');
|
||||
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
});
|
||||
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
btn.classList.add('border-sky-500', 'text-sky-400');
|
||||
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
||||
const target = card.querySelector('#' + paneId);
|
||||
if (target) target.classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,180 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Slide-over Drawers (Sheets) - Design System Wiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- Left Navigation Sidebar -->
|
||||
{% include "components/sidebar.html" %}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 space-y-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="pb-6 border-b border-border">
|
||||
<span class="text-xs font-semibold text-indigo-400">Overlays</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Slide-over Drawers (Sheets)</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Right-anchored slide-out sheets designed for detail inspections, metadata lists, settings panels, and form workflows.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Sheets -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Drawer Showcase & Integration</h2>
|
||||
|
||||
<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, 'sheet-sandbox')">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, 'sheet-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="sheet-sandbox" class="wiki-pane py-2">
|
||||
<button data-sheet-target="wiki-demo-sheet" class="inline-flex items-center justify-center rounded-xl text-xs font-bold bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 transition active:scale-95">
|
||||
Open Right Drawer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="sheet-code" 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-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><!-- Trigger Button (points to sheet element ID) -->
|
||||
<button data-sheet-target="my-sheet-id" class="px-4 py-2 bg-indigo-650 text-white text-xs font-bold rounded-xl">
|
||||
Open Drawer
|
||||
</button>
|
||||
|
||||
<!-- Slide Drawer Sheet Element -->
|
||||
<div id="my-sheet-id" class="sheet-dialog fixed inset-0 z-50 overflow-hidden hidden" role="dialog" aria-modal="true">
|
||||
<!-- Backdrop -->
|
||||
<div class="sheet-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm opacity-0 transition-opacity duration-300"></div>
|
||||
|
||||
<div class="absolute inset-y-0 right-0 max-w-full flex pl-10">
|
||||
<!-- Panel with transition translate-x-full -->
|
||||
<div class="sheet-content w-screen max-w-sm translate-x-full transition-transform duration-300 bg-popover/95 border-l border-border p-6 flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between pb-3 border-b border-border">
|
||||
<h3 class="text-sm font-bold text-slate-100">Settings</h3>
|
||||
<button class="sheet-close text-slate-500 hover:text-white">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">Drawer Body Content</p>
|
||||
</div>
|
||||
<button class="sheet-close w-full py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold rounded-xl">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Global JS Bindings Documentation -->
|
||||
<section class="space-y-4 border-t border-border/60 pt-6">
|
||||
<h2 class="text-lg font-bold text-slate-200">How the Global Sheet JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed">
|
||||
The global script <code>components.js</code> monitors specific attributes and classes on page load. Here is the operational contract for sheets:
|
||||
</p>
|
||||
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
|
||||
<table class="w-full border-collapse text-left text-xs">
|
||||
<thead>
|
||||
<tr class="border-b border-border text-muted-foreground font-bold">
|
||||
<th class="pb-2.5 w-1/4">Selector / Class</th>
|
||||
<th class="pb-2.5 w-1/4">Type</th>
|
||||
<th class="pb-2.5">Behavior & Purpose</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">[data-sheet-target]</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to buttons or triggers. The value must match the ID of the sheet container (e.g., <code>data-sheet-target="my-sheet"</code>). Clicking it triggers <code>openSheet("my-sheet")</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-dialog</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
The outer wrapper sheet container. Starts with the class <code>hidden</code>. Toggled by the script.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-content</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
The inner slide-over panel card. The JS toggles transition translation classes (removes <code>translate-x-full</code> and adds <code>translate-x-0</code> on show).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-backdrop</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
The backdrop overlay. The JS toggles its opacity and registers clicks on it to automatically close the sheet.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-close</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to close trigger buttons. Clicking any element with this class closes the sheet.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
|
||||
<span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
|
||||
<p class="text-slate-400 leading-normal">
|
||||
You can freely style the placement, width, colors, borders, and contents of the <code>.sheet-content</code> slide-out panel. The functional slide classes (<code>translate-x-full</code> and <code>translate-x-0</code>) and semantic structure class names must be preserved so the script can locate and slide the sheets dynamically.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Sheet Sandbox Element -->
|
||||
<div id="wiki-demo-sheet" class="sheet-dialog fixed inset-0 z-50 overflow-hidden hidden" role="dialog" aria-modal="true">
|
||||
<div class="sheet-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm opacity-0 transition-opacity duration-300 animate-fade-in"></div>
|
||||
<div class="absolute inset-y-0 right-0 max-w-full flex pl-10">
|
||||
<div class="sheet-content w-screen max-w-sm translate-x-full transition-transform duration-300 ease-in-out border-l border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between pb-3 border-b border-border">
|
||||
<h3 class="text-sm font-bold text-slate-100">Drawer Panel Properties</h3>
|
||||
<button class="sheet-close text-slate-500 hover:text-white rounded-lg p-1.5 hover:bg-secondary transition">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<button class="sheet-close w-full py-2.5 rounded-xl bg-indigo-650 hover:bg-indigo-600 transition text-xs font-bold text-white shadow-lg shadow-indigo-650/10">Save Properties</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleWikiTabs(btn, paneId) {
|
||||
const card = btn.closest('.border-border');
|
||||
if (!card) return;
|
||||
card.querySelectorAll('button').forEach(b => {
|
||||
b.classList.remove('border-sky-500', 'text-sky-400');
|
||||
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
});
|
||||
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
btn.classList.add('border-sky-500', 'text-sky-400');
|
||||
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
||||
const target = card.querySelector('#' + paneId);
|
||||
if (target) target.classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,27 @@
|
||||
<aside class="lg:w-64 shrink-0">
|
||||
<div class="sticky top-24 space-y-1.5 p-4 rounded-3xl border border-border bg-card/50 backdrop-blur-xl" id="wiki-sidebar">
|
||||
<span class="px-3 text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-2">Wiki Navigation</span>
|
||||
<a href="/components" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components">Introduction</a>
|
||||
<div class="h-px bg-secondary my-1 mx-2"></div>
|
||||
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Actions</span>
|
||||
<a href="/components/buttons" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/buttons">Buttons</a>
|
||||
|
||||
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Forms & Inputs</span>
|
||||
<a href="/components/inputs" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/inputs">Form Fields & Select</a>
|
||||
<a href="/components/date-time" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/date-time">Date & Time Pickers</a>
|
||||
<a href="/components/combobox" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/combobox">Autocomplete (Combobox)</a>
|
||||
<a href="/components/toggles" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/toggles">Switches & Checkboxes</a>
|
||||
|
||||
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Overlays</span>
|
||||
<a href="/components/modals" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/modals">Dialog Modals</a>
|
||||
<a href="/components/sheets" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/sheets">Slide-over Drawers</a>
|
||||
|
||||
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Layout & Navigation</span>
|
||||
<a href="/components/tabs-accordion" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/tabs-accordion">Tabs & Accordions</a>
|
||||
<a href="/components/scrollbars" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/scrollbars">Custom Scrollbars</a>
|
||||
|
||||
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Visuals & Feedback</span>
|
||||
<a href="/components/visuals" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/visuals">Avatars & Badges</a>
|
||||
<a href="/components/feedback" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/feedback">Toasts & Alerts</a>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -0,0 +1,238 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Tabs & Accordions - Design System Wiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- Left Navigation Sidebar -->
|
||||
{% include "components/sidebar.html" %}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 space-y-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="pb-6 border-b border-border">
|
||||
<span class="text-xs font-semibold text-indigo-400">Layout & Navigation</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Tabs & Accordions</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Horizontal tab groups and collapsible vertical headers with animated rotation chevrons, powered by lightweight document-level event delegation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Tabs/Accordion -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Interactive Navigation Elements</h2>
|
||||
|
||||
<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, 'tabs-sandbox')">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, 'tabs-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="tabs-sandbox" class="wiki-pane space-y-6 max-w-md py-2">
|
||||
<!-- Tabs Showcase -->
|
||||
<div class="space-y-2">
|
||||
<span class="block text-xs font-semibold text-muted-foreground">Switch Tabs</span>
|
||||
<div class="flex border-b border-border">
|
||||
<button type="button" data-tab-group="wiki-tabs" data-tab-target="wiki-pane-1" class="px-4 py-2 text-xs font-semibold border-b-2 border-sky-500 text-sky-400 focus:outline-none">Overview</button>
|
||||
<button type="button" data-tab-group="wiki-tabs" data-tab-target="wiki-pane-2" class="px-4 py-2 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-slate-250 focus:outline-none">Config Settings</button>
|
||||
</div>
|
||||
<div class="p-4 bg-card/50 rounded-xl border border-border text-xs text-muted-foreground min-h-[5rem]">
|
||||
<div id="wiki-pane-1" data-tab-content-group="wiki-tabs">
|
||||
Overview parameters content pane. You can place statistics, graphs, or summary tables here.
|
||||
</div>
|
||||
<div id="wiki-pane-2" data-tab-content-group="wiki-tabs" class="hidden">
|
||||
Settings updates pane. Configuration toggles, environment variables, or webhook URLs live here.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accordion Showcase -->
|
||||
<div class="space-y-2">
|
||||
<span class="block text-xs font-semibold text-muted-foreground">Accordion Collapsible</span>
|
||||
<div class="space-y-2">
|
||||
<div class="accordion-item border border-border rounded-xl overflow-hidden bg-card/30">
|
||||
<button type="button" class="accordion-trigger w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-slate-200 hover:bg-secondary/50 transition focus:outline-none">
|
||||
<span>Is this library dependency-free?</span>
|
||||
<svg class="accordion-chevron h-3 w-3 text-slate-500 transition-transform duration-200" 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="accordion-content px-4 pb-3 pt-1 text-xs text-muted-foreground hidden border-t border-border leading-relaxed">
|
||||
Yes! The template does not rely on Alpine.js or React. JavaScript toggles run via vanilla click listeners listening on specific class selectors.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="tabs-code" 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-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><!-- 1. Tabs Layout Markup -->
|
||||
<div class="space-y-2">
|
||||
<!-- Tabs Trigger Header -->
|
||||
<div class="flex border-b border-border">
|
||||
<!-- Include class 'border-sky-500 text-sky-400' on the active trigger -->
|
||||
<button data-tab-group="my-tabs-group" data-tab-target="my-pane-1" class="px-4 py-2 border-b-2 border-sky-500 text-sky-400 text-xs font-semibold">
|
||||
Tab 1
|
||||
</button>
|
||||
<button data-tab-group="my-tabs-group" data-tab-target="my-pane-2" class="px-4 py-2 border-b-2 border-transparent text-muted-foreground hover:text-slate-200 text-xs font-semibold">
|
||||
Tab 2
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Content Panes -->
|
||||
<div class="p-4 bg-card/50 rounded-xl border border-border text-xs">
|
||||
<div id="my-pane-1" data-tab-content-group="my-tabs-group">
|
||||
Overview content...
|
||||
</div>
|
||||
<div id="my-pane-2" data-tab-content-group="my-tabs-group" class="hidden">
|
||||
Settings content...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Accordion Markup -->
|
||||
<div class="accordion-item border border-border rounded-xl bg-card/30 overflow-hidden">
|
||||
<!-- Accordion Button Trigger -->
|
||||
<button class="accordion-trigger w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-slate-200 hover:bg-secondary/50">
|
||||
<span>Section Title</span>
|
||||
<svg class="accordion-chevron h-3 w-3 text-slate-500 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Content Panel (Hidden by default) -->
|
||||
<div class="accordion-content px-4 pb-3 pt-1 text-xs text-muted-foreground hidden border-t border-border">
|
||||
Collapsible description content.
|
||||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Global JS Bindings Documentation -->
|
||||
<section class="space-y-6 border-t border-border/60 pt-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-slate-200">How the Global Tabs JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed mt-1">
|
||||
The global script <code>components.js</code> handles click switches for tabs via specific dataset variables. Here is the contract:
|
||||
</p>
|
||||
</div>
|
||||
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
|
||||
<table class="w-full border-collapse text-left text-xs">
|
||||
<thead>
|
||||
<tr class="border-b border-border text-muted-foreground font-bold">
|
||||
<th class="pb-2.5 w-1/3">Attribute</th>
|
||||
<th class="pb-2.5 w-1/6">Type</th>
|
||||
<th class="pb-2.5">Behavior & Purpose</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">data-tab-group</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to buttons and triggers. Isolates tab groups on the same page. Tab buttons in the same group toggle together (e.g., <code>data-tab-group="group1"</code>).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">data-tab-target</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Specifies the ID of the content element pane that should be revealed when this tab is clicked (e.g., <code>data-tab-target="my-pane-1"</code>).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">data-tab-content-group</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to the content elements. Must match the <code>data-tab-group</code> string. Click triggers hide all content elements in this group and show the target.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-slate-200 mt-4">How the Global Accordion JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed mt-1">
|
||||
Accordions are toggled through click delegation looking for the following class tree:
|
||||
</p>
|
||||
</div>
|
||||
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
|
||||
<table class="w-full border-collapse text-left text-xs">
|
||||
<thead>
|
||||
<tr class="border-b border-border text-muted-foreground font-bold">
|
||||
<th class="pb-2.5 w-1/3">Selector / Class</th>
|
||||
<th class="pb-2.5 w-1/6">Type</th>
|
||||
<th class="pb-2.5">Behavior & Purpose</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-item</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Surrounds the single collapsible item container (trigger header + content block).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-trigger</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Clickable header button. Toggles display classes on the sibling content element.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-content</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Contained collapsible item body text. Starts with the class <code>hidden</code>. Toggled by the script.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-chevron</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Optional vector arrow icon inside trigger. The JS applies <code>rotate-180</code> animation classes on show.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
|
||||
<span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
|
||||
<p class="text-slate-400 leading-normal">
|
||||
For <strong>Tabs</strong>, you can style the tab list buttons (direction, active borders, colors) and content layout freely. Just ensure <code>data-tab-group</code> matches between triggers and active panes, and <code>data-tab-target</code> matches the pane ID.
|
||||
For <strong>Accordions</strong>, you can design the headers, chevron SVGs, background panels, and borders. You must maintain the <code>.accordion-item</code>, <code>.accordion-trigger</code>, and <code>.accordion-content</code> class selectors so the script can toggle the collapsed state.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleWikiTabs(btn, paneId) {
|
||||
const card = btn.closest('.border-border');
|
||||
if (!card) return;
|
||||
card.querySelectorAll('button').forEach(b => {
|
||||
b.classList.remove('border-sky-500', 'text-sky-400');
|
||||
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
});
|
||||
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
btn.classList.add('border-sky-500', 'text-sky-400');
|
||||
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
||||
const target = card.querySelector('#' + paneId);
|
||||
if (target) target.classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,124 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Switches & Checkboxes - Design System Wiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- Left Navigation Sidebar -->
|
||||
{% include "components/sidebar.html" %}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 space-y-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="pb-6 border-b border-border">
|
||||
<span class="text-xs font-semibold text-indigo-405">Toggles</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Switches & Checkboxes</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Premium animated toggle elements, range sliders, and custom styled checkboxes that mask standard hidden inputs with custom animations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Toggles -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Interactive Toggles & Checkbox Demos</h2>
|
||||
|
||||
<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, 'toggle-sandbox')">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, 'toggle-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Custom Checkbox -->
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="toggle-code" 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-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><!-- 1. Toggle Switch Variant -->
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<!-- sr-only: visually hides native input; peer: lets siblings styled with 'peer-checked:' react to its state -->
|
||||
<input type="checkbox" class="sr-only peer">
|
||||
<!-- 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 -->
|
||||
<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>
|
||||
|
||||
<!-- 2. Custom Checkbox -->
|
||||
<label class="flex items-center gap-3 cursor-pointer group">
|
||||
<!-- sr-only peer hides checkbox input globally but exposes its state -->
|
||||
<input type="checkbox" class="sr-only peer">
|
||||
<!-- peer-checked:[&_svg]:opacity-100: uses a descendant selector to show the checkmark when 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 select-none">Label Option</span>
|
||||
</label>
|
||||
|
||||
<!-- 3. Custom Range Slider (accent-indigo-600 styles input thumb in modern browsers) -->
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- oninput: updates text element sibling content to display slider value -->
|
||||
<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></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleWikiTabs(btn, paneId) {
|
||||
const card = btn.closest('.border-border');
|
||||
if (!card) return;
|
||||
card.querySelectorAll('button').forEach(b => {
|
||||
b.classList.remove('border-sky-500', 'text-sky-400');
|
||||
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
});
|
||||
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
btn.classList.add('border-sky-500', 'text-sky-400');
|
||||
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
||||
const target = card.querySelector('#' + paneId);
|
||||
if (target) target.classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,104 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Avatars & Badges - Design System Wiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- Left Navigation Sidebar -->
|
||||
{% include "components/sidebar.html" %}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 space-y-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="pb-6 border-b border-border">
|
||||
<span class="text-xs font-semibold text-indigo-400">Visuals</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Avatars & Badges</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Circular user avatars featuring fallback initials text, combined with status badges in sky, emerald, amber, and rose variants.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Visuals -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Avatars & Badges Showcase</h2>
|
||||
|
||||
<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, 'visual-sandbox')">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, 'visual-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="visual-sandbox" class="wiki-pane space-y-4 py-2">
|
||||
<!-- Avatars -->
|
||||
<div class="space-y-2">
|
||||
<span class="block text-xs font-semibold text-muted-foreground">Fallback Avatars</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-sky-400 leading-none">AV</div>
|
||||
<div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-emerald-400 leading-none">BC</div>
|
||||
<div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-indigo-400 leading-none">JD</div>
|
||||
<span class="text-xs text-muted-foreground/90">Textual initials fallback inside boundaries</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badges -->
|
||||
<div class="space-y-2">
|
||||
<span class="block text-xs font-semibold text-muted-foreground">Status Badges</span>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-sky-500/10 text-sky-400 border border-sky-500/20 leading-none">In Progress</span>
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 leading-none">Completed</span>
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20 leading-none">Reviewing</span>
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20 leading-none">Blocked</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="visual-code" 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-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><!-- Initials Fallback Avatar -->
|
||||
<div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-sky-400 leading-none">AV</div>
|
||||
|
||||
<!-- Status Badges -->
|
||||
<!-- Info / Sky -->
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-sky-500/10 text-sky-400 border border-sky-500/20 leading-none">In Progress</span>
|
||||
|
||||
<!-- Success / Emerald -->
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 leading-none">Completed</span>
|
||||
|
||||
<!-- Warning / Amber -->
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20 leading-none">Reviewing</span>
|
||||
|
||||
<!-- Destructive / Rose -->
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20 leading-none">Blocked</span></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleWikiTabs(btn, paneId) {
|
||||
const card = btn.closest('.border-border');
|
||||
if (!card) return;
|
||||
card.querySelectorAll('button').forEach(b => {
|
||||
b.classList.remove('border-sky-500', 'text-sky-400');
|
||||
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
});
|
||||
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
btn.classList.add('border-sky-500', 'text-sky-400');
|
||||
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
||||
const target = card.querySelector('#' + paneId);
|
||||
if (target) target.classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user