hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-11 04:38:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding kbd and draft command

Browse Source
This commit is contained in:
Ronan Berder
2025-10-30 19:09:21 +08:00
parent 045d13cd49
commit 6148716f68
6 changed files with 576 additions and 507 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/assets/styles.css
+214 -122
View File
@@ -251,9 +251,6 @@
.invisible {
visibility: hidden;
}
.visible {
visibility: visible;
}
.sr-only {
position: absolute;
width: 1px;
@@ -523,6 +520,9 @@
.max-w-\[300px\] {
max-width: 300px;
}
.max-w-\[450px\] {
max-width: 450px;
}
.max-w-lg {
max-width: var(--container-lg);
}
@@ -808,6 +808,9 @@
.bg-sidebar-primary {
background-color: var(--color-sidebar-primary);
}
.bg-transparent {
background-color: transparent;
}
.object-cover {
object-fit: cover;
}
@@ -835,9 +838,6 @@
.px-1 {
padding-inline: calc(var(--spacing) * 1);
}
.px-1\.5 {
padding-inline: calc(var(--spacing) * 1.5);
}
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
@@ -853,9 +853,6 @@
.px-\[0\.3rem\] {
padding-inline: 0.3rem;
}
.py-0\.5 {
padding-block: calc(var(--spacing) * 0.5);
}
.py-1\.5 {
padding-block: calc(var(--spacing) * 1.5);
}
@@ -1017,6 +1014,10 @@
.opacity-100 {
opacity: 100%;
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-none {
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2371,7 +2372,7 @@
}
}
@layer components {
.command {
.command-dialog {
inset-block: calc(var(--spacing) * 0);
opacity: 0%;
transition-property: all;
@@ -2444,141 +2445,226 @@
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
> header {
display: flex;
align-items: center;
gap: calc(var(--spacing) * 2);
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
padding-inline: calc(var(--spacing) * 3);
svg {
> button, > form[method='dialog'] {
position: absolute;
top: calc(var(--spacing) * 4);
right: calc(var(--spacing) * 4);
}
> button, > form[method='dialog'] > button {
border-radius: var(--radius-xs);
opacity: 70%;
--tw-ring-offset-color: var(--color-background);
transition-property: opacity;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
&:hover {
@media (hover: hover) {
opacity: 100%;
}
}
&:focus {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
&:focus {
--tw-ring-color: var(--color-ring);
}
&:focus {
--tw-ring-offset-width: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
&:focus {
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
}
&:disabled {
pointer-events: none;
}
&[data-state="open"] {
background-color: var(--color-accent);
}
&[data-state="open"] {
color: var(--color-muted-foreground);
}
& svg {
pointer-events: none;
}
& svg {
flex-shrink: 0;
}
& svg:not([class*='size-']) {
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
flex-shrink: 0;
opacity: 50%;
}
input {
display: flex;
height: calc(var(--spacing) * 10);
width: 100%;
border-radius: var(--radius-md);
background-color: transparent;
padding-block: calc(var(--spacing) * 3);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
&::placeholder {
color: var(--color-muted-foreground);
}
&:disabled {
cursor: not-allowed;
}
&:disabled {
opacity: 50%;
}
}
}
}
.command {
> header input {
height: calc(var(--spacing) * 12);
}
[role='listbox'] {
max-height: 300px;
overflow-x: hidden;
overflow-y: auto;
padding: calc(var(--spacing) * 1);
padding-inline: calc(var(--spacing) * 2);
[role='option'] {
position: relative;
display: flex;
width: 100%;
cursor: default;
align-items: center;
gap: calc(var(--spacing) * 2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: var(--radius-sm);
padding-inline: calc(var(--spacing) * 2);
padding-block: calc(var(--spacing) * 1.5);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
-webkit-user-select: none;
user-select: none;
&:disabled {
pointer-events: none;
}
&:disabled {
opacity: 50%;
}
&[aria-disabled="true"] {
pointer-events: none;
}
&[aria-disabled="true"] {
opacity: 50%;
}
&[aria-hidden="true"] {
display: none;
}
padding-block: calc(var(--spacing) * 3);
& svg {
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
}
& svg {
flex-shrink: 0;
}
& svg {
color: var(--color-muted-foreground);
}
&.active {
background-color: var(--color-accent);
color: var(--color-accent-foreground);
width: calc(var(--spacing) * 5);
height: calc(var(--spacing) * 5);
}
}
[role='heading'] {
display: flex;
padding-inline: calc(var(--spacing) * 2);
padding-block: calc(var(--spacing) * 1.5);
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
color: var(--color-muted-foreground);
}
[role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
}
}
}
.command {
> header {
display: flex;
align-items: center;
gap: calc(var(--spacing) * 2);
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
padding-inline: calc(var(--spacing) * 3);
svg {
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
flex-shrink: 0;
opacity: 50%;
}
input {
display: flex;
height: calc(var(--spacing) * 10);
width: 100%;
border-radius: var(--radius-md);
background-color: transparent;
padding-block: calc(var(--spacing) * 3);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
&::placeholder {
color: var(--color-muted-foreground);
}
&:disabled {
cursor: not-allowed;
}
&:disabled {
opacity: 50%;
}
}
}
[role='listbox'] {
max-height: 300px;
overflow-x: hidden;
overflow-y: auto;
padding: calc(var(--spacing) * 1);
[role='option'] {
position: relative;
display: flex;
width: 100%;
cursor: default;
align-items: center;
gap: calc(var(--spacing) * 2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: var(--radius-sm);
padding-inline: calc(var(--spacing) * 2);
padding-block: calc(var(--spacing) * 1.5);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
-webkit-user-select: none;
user-select: none;
&:disabled {
pointer-events: none;
}
&:disabled {
opacity: 50%;
}
&[aria-disabled="true"] {
pointer-events: none;
}
&[aria-disabled="true"] {
opacity: 50%;
}
&[aria-hidden="true"] {
display: none;
}
[role='separator'] {
margin-inline: calc(var(--spacing) * -1);
border-color: var(--color-border);
& svg {
pointer-events: none;
}
&:not(:has([data-value]:not([aria-hidden='true'])))::before {
margin: calc(var(--spacing) * -1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-inline: calc(var(--spacing) * 3);
padding-block: calc(var(--spacing) * 6);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
& svg {
flex-shrink: 0;
}
&[data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
--tw-content: attr(data-empty);
content: var(--tw-content);
& svg:not([class*='size-']) {
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
}
&:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
--tw-content: 'No results found';
content: var(--tw-content);
& svg:not([class*='text-']) {
color: var(--color-muted-foreground);
}
&.active {
background-color: var(--color-accent);
color: var(--color-accent-foreground);
}
}
[role='heading'] {
display: flex;
padding-inline: calc(var(--spacing) * 2);
padding-block: calc(var(--spacing) * 1.5);
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
color: var(--color-muted-foreground);
}
[role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
display: none;
}
[role='separator'] {
margin-inline: calc(var(--spacing) * -1);
margin-block: calc(var(--spacing) * 1);
border-color: var(--color-border);
}
&:not(:has([data-value]:not([aria-hidden='true'])))::before {
margin: calc(var(--spacing) * -1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-inline: calc(var(--spacing) * 3);
padding-block: calc(var(--spacing) * 6);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
&[data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
--tw-content: attr(data-empty);
content: var(--tw-content);
}
&:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
--tw-content: 'No results found';
content: var(--tw-content);
}
}
&:not([data-command-initialized]) [role='option'] {
@@ -2593,6 +2679,9 @@
}
}
}
&:has(> header input:not(:placeholder-shown)) [role='separator'] {
display: none;
}
}
}
@layer components {
@@ -3553,6 +3642,9 @@
content: var(--tw-content);
}
}
[data-popover]:has(> header input:not(:placeholder-shown)) [role='separator'] {
display: none;
}
&:not([data-select-initialized]) [data-popover] [role='option'] {
&:hover {
@media (hover: hover) {
docs/src/components/command.njk
+92 -266
View File
@@ -1,295 +1,121 @@
---
layout: layouts/page.njk
title: Command
description: Fast, composable command menu for quick navigation and actions. Triggered with ⌘K or Ctrl+K.
description: Fast, composable command menu for quick navigation and actions.
toc:
- label: Usage
id: usage
children:
- label: HTML + JavaScript
id: usage-html-js
children:
- label: "Step 1: Include the JavaScript files"
id: usage-html-js-1
- label: "Step 2: Add your command HTML"
id: usage-html-js-2
- label: HTML structure
id: usage-html-js-3
- label: JavaScript events
id: usage-html-js-4
- label: JavaScript methods
id: usage-html-js-5
- label: Jinja and Nunjucks
id: usage-macro
- label: Examples
id: examples
children:
- label: With groups
id: example-groups
- label: Dialog
id: example-dialog
---
{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}
{% from "command.njk" import command %}
{% from "command.njk" import command, command_dialog %}
{% set code_html %}
{% macro command_items(suggestions_id="suggestions", settings_id="settings") %}
<div role="group" aria-labelledby="{{ suggestions_id }}">
<span role="heading" id="{{ suggestions_id }}">Suggestions</span>
<div role="option" data-value="calendar">
{% lucide "calendar" %}
<span>Calendar</span>
</div>
<div role="option" data-value="search-emoji">
{% lucide "smile" %}
<span>Search Emoji</span>
</div>
<div role="option" data-value="calculator" aria-disabled="true">
{% lucide "calculator" %}
<span>Calculator</span>
</div>
</div>
<hr role="separator" />
<div role="group" aria-labelledby="{{ settings_id }}">
<span role="heading" id="{{ settings_id }}">Settings</span>
<div role="option" data-value="profile">
{% lucide "user" %}
<span>Profile</span>
<kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘P</kbd>
</div>
<div role="option" data-value="billing">
{% lucide "credit-card" %}
<span>Billing</span>
<kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘B</kbd>
</div>
<div role="option" data-value="settings">
{% lucide "settings" %}
<span>Settings</span>
<kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘S</kbd>
</div>
</div>
{% endmacro %}
{% set code_standalone %}
{% call command(
id="demo-command",
placeholder="Type a command or search...",
empty_text="No results found."
id="demo-command-standalone",
main_attrs={ "class": "rounded-lg border shadow-md" }
) %}
<div role="option" data-value="calendar" id="cmd-calendar">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon lucide-calendar"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
Calendar
</div>
<div role="option" data-value="emoji" id="cmd-emoji">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smile-icon lucide-smile"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>
Search Emoji
</div>
<div role="option" data-value="calculator" id="cmd-calculator">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calculator-icon lucide-calculator"><rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" x2="16" y1="6" y2="6"/><line x1="16" x2="16" y1="14" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/></svg>
Calculator
</div>
{{ command_items("suggestions", "settings") }}
{% endcall %}
{% endset %}
{{ code_preview("command", code_html | prettyHtml) }}
<section class="prose">
<p>Press <kbd class="inline-flex items-center justify-center rounded border px-1.5 py-0.5 text-xs font-medium bg-muted text-muted-foreground">⌘K</kbd> (or <kbd class="inline-flex items-center justify-center rounded border px-1.5 py-0.5 text-xs font-medium bg-muted text-muted-foreground">Ctrl+K</kbd> on Windows/Linux) to open the command menu.</p>
</section>
{{ code_preview("command-standalone", code_standalone | prettyHtml, class=" w-full max-w-[450px]") }}
<h2 id="usage"><a href="#usage">Usage</a></h2>
<h3 id="usage-html-js"><a href="#usage-html-js">HTML + JavaScript</a></h3>
<h4 id="usage-html-js-1"><a href="#usage-html-js-1">Step 1: Include the JavaScript files</a></h4>
<section class="prose">
<p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
</section>
{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/basecoat.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/command.min.js" defer></script>{% endset %}
{{ code_block(code_script | prettyHtml, "html") }}
<div class="flex flex-wrap gap-2 my-6">
<a class="badge-outline" href="/installation/#install-js">
Components with JavaScript
{% lucide "arrow-right" %}
</a>
<a class="badge-outline" href="/installation/#install-cli">
Use the CLI
{% lucide "arrow-right" %}
</a>
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/command.js" target="_blank">
command.js
{% lucide "arrow-right" %}
</a>
</div>
<h4 id="usage-html-js-2"><a href="#usage-html-js-2">Step 2: Add your command HTML</a></h4>
{{ code_block(code_html | prettyHtml, "html") }}
<h4 id="usage-html-js-3"><a href="#usage-html-js-3">HTML structure</a></h4>
<section class="prose">
<dl>
<dt><code class="highlight language-html">&lt;div class="command"&gt;</code></dt>
<dd>Wraps around the entire component.
<dl>
<dt><code class="highlight language-html">&lt;dialog class="command"&gt;</code></dt>
<dd>The native dialog element that creates the modal backdrop and handles focus trapping. Automatically opens with ⌘K/Ctrl+K keyboard shortcut.
<dl>
<dt><code class="highlight language-html">&lt;article&gt;</code></dt>
<dd>Contains the command menu content.
<dl>
<dt><code class="highlight language-html">&lt;header&gt;</code></dt>
<dd>Contains the search input with icon:
<dl>
<dt><code class="highlight language-html">&lt;input type="text" role="combobox"&gt;</code></dt>
<dd>The search input that filters commands. Attributes:
<ul>
<li><code>placeholder</code>: Placeholder text</li>
<li><code>aria-autocomplete="list"</code>: Indicates autocomplete behavior</li>
<li><code>aria-expanded="true"</code>: Listbox is always visible</li>
<li><code>aria-controls="{ LISTBOX_ID }"</code>: Points to the listbox id</li>
<li><code>aria-activedescendant="{ OPTION_ID }"</code>: Points to the active option id</li>
</ul>
</dd>
</dl>
</dd>
<dt><code class="highlight language-html">&lt;div role="listbox"&gt;</code></dt>
<dd>The listbox containing the command options. Supports groups, separators, and headings:
<dl>
<dt><code class="highlight language-html">&lt;div role="option" data-value="{ VALUE }"&gt;</code></dt>
<dd>Command option that can be selected. Must have:
<ul>
<li><code>data-value</code>: Unique value for the command</li>
<li><code>data-keywords</code> <span class="badge-secondary">Optional</span>: Additional search keywords (comma-separated)</li>
<li><code>data-label</code> <span class="badge-secondary">Optional</span>: Alternative label for filtering (defaults to text content)</li>
<li><code>id</code> <span class="badge-secondary">Optional</span>: For <code>aria-activedescendant</code></li>
</ul>
</dd>
<dt><code class="highlight language-html">&lt;div role="group"&gt;</code> <span class="badge-secondary">Optional</span></dt>
<dd>Groups related commands together. Can have <code>aria-labelledby</code> pointing to a heading.</dd>
<dt><code class="highlight language-html">&lt;span role="heading"&gt;</code> <span class="badge-secondary">Optional</span></dt>
<dd>Group heading. Should have an <code>id</code> if referenced by <code>aria-labelledby</code>.</dd>
<dt><code class="highlight language-html">&lt;hr role="separator"&gt;</code> <span class="badge-secondary">Optional</span></dt>
<dd>Visual separator between groups.</dd>
</dl>
</dd>
<dt><code class="highlight language-html">&lt;footer&gt;</code></dt>
<dd>Empty state message, shown when no results match the search.</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
</section>
<h4 id="usage-html-js-4"><a href="#usage-html-js-4">JavaScript events</a></h4>
<section class="prose">
<dl>
<dt><code>basecoat:initialized</code></dt>
<dd>Once the component is fully initialized, it dispatches a custom (non-bubbling) <code>basecoat:initialized</code> event on itself.</dd>
<dt><code>command:select</code></dt>
<dd>When a command is selected (via click or Enter key), the component dispatches a custom (bubbling) <code>command:select</code> event on itself, with the selected value in <code>event.detail</code> (e.g. <code>{detail: {value: "calendar"}}</code>).</dd>
</dl>
</section>
{% set code_event %}
<script>
const commandComponent = document.querySelector('#my-command');
commandComponent.addEventListener('command:select', (event) => {
console.log('Selected command:', event.detail.value);
switch (event.detail.value) {
case 'calendar':
window.location.href = '/calendar';
break;
case 'settings':
window.location.href = '/settings';
break;
}
});
</script>
{% endset %}
{{ code_block(code_event | prettyHtml, "html") }}
<h4 id="usage-html-js-5"><a href="#usage-html-js-5">JavaScript methods</a></h4>
<section class="prose">
<p>The command component uses the native <code>&lt;dialog&gt;</code> element, so you can use the standard dialog methods:</p>
<dl>
<dt><code>showModal()</code></dt>
<dd>Opens the command menu as a modal dialog:</dd>
</dl>
</section>
{% set code_open %}
<script>
const commandDialog = document.querySelector('#my-command');
commandDialog.showModal();
</script>
{% endset %}
{{ code_block(code_open | prettyHtml, "html") }}
<section class="prose">
<dl>
<dt><code>close()</code></dt>
<dd>Closes the command menu:</dd>
</dl>
</section>
{% set code_close %}
<script>
const commandDialog = document.querySelector('#my-command');
commandDialog.close();
</script>
{% endset %}
{{ code_block(code_close | prettyHtml, "html") }}
<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
<div class="prose">
<p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">command()</code> Nunjucks or Jinja macro for this component.</p>
</div>
<div class="flex flex-wrap gap-2 my-6">
<a class="badge-outline" href="/installation/#install-macros" target="_blank">
Use Nunjucks or Jinja macros
{% lucide "arrow-right" %}
</a>
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/command.html.jinja" target="_blank">
Jinja macro
{% lucide "arrow-right" %}
</a>
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/command.njk" target="_blank">
Nunjucks macro
{% lucide "arrow-right" %}
</a>
</div>
{% set raw_code %}{% raw %}{% call command(
id="my-command",
placeholder="Type a command or search..."
) %}
<div role="option" data-value="calendar">Calendar</div>
<div role="option" data-value="emoji">Search Emoji</div>
<div role="option" data-value="calculator">Calculator</div>
{% endcall %}{% endraw %}{% endset %}
{{ code_block(raw_code, "jinja") }}
{{ code_block(code_standalone | prettyHtml, "html") }}
<h2 id="examples"><a href="#examples">Examples</a></h2>
<h3 id="example-groups"><a href="#example-groups">With groups</a></h3>
{% set code_groups %}
{% call command(
id="demo-command-groups",
placeholder="Type a command or search..."
) %}
<div role="group" aria-labelledby="group-suggestions">
<span role="heading" id="group-suggestions">Suggestions</span>
<div role="option" data-value="calendar" data-keywords="events,schedule">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon lucide-calendar"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
Calendar
</div>
<div role="option" data-value="emoji" data-keywords="icons,faces">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smile-icon lucide-smile"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>
Search Emoji
</div>
<div role="option" data-value="calculator" data-keywords="math,numbers">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calculator-icon lucide-calculator"><rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" x2="16" y1="6" y2="6"/><line x1="16" x2="16" y1="14" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/></svg>
Calculator
</div>
</div>
<hr role="separator">
<div role="group" aria-labelledby="group-settings">
<span role="heading" id="group-settings">Settings</span>
<div role="option" data-value="profile" data-keywords="account,user">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-icon lucide-user"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
Profile
</div>
<div role="option" data-value="billing" data-keywords="payment,subscription">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card-icon lucide-credit-card"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
Billing
</div>
<div role="option" data-value="settings" data-keywords="config,preferences">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings-icon lucide-settings"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
Settings
</div>
</div>
{% endcall %}
{% endset %}
{{ code_preview("command-groups", code_groups | prettyHtml) }}
<h3 id="example-dialog"><a href="#example-dialog">Dialog</a></h3>
<section class="prose">
<p>This example includes <code>data-keywords</code> attributes for better search matching. Try searching for "payment" to see the Billing option appear.</p>
<p>Press <kbd>⌘</kbd><kbd>J</kbd></p>
</section>
{% set code_dialog %}
<button
type="button"
class="btn-outline"
onclick="document.getElementById('demo-command-dialog').showModal()"
>
Open command menu
<kbd>⌘ J</kbd>
</button>
{% call command_dialog(id="demo-command-dialog") %}
{{ command_items("cmd-suggestions", "cmd-settings") }}
{% endcall %}
<script>
document.addEventListener('keydown', (e) => {
if ((e.metaKey || e.ctrlKey) && e.key === 'j') {
e.preventDefault();
const dialog = document.getElementById('demo-command-dialog');
if (dialog.open) {
dialog.close();
} else {
dialog.showModal();
dialog.querySelector('header input')?.focus();
}
}
});
const cmdDialog = document.getElementById('demo-command-dialog');
cmdDialog?.addEventListener('command:select', (e) => {
console.log('Selected command:', e.detail.value);
cmdDialog.close();
});
</script>
{% endset %}
{{ code_preview("command-dialog", code_dialog | prettyHtml) }}
<section class="prose">
<p>To show the command menu in a dialog, use the <code>command_dialog</code> macro.</p>
</section>
{{ code_block(code_dialog | prettyHtml, "html") }}
src/css/basecoat.css
+63 -31
View File
@@ -444,7 +444,7 @@
/* Command */
@layer components {
.command {
.command-dialog {
@apply inset-y-0 opacity-0 transition-all transition-discrete;
&:is([open],:popover-open) {
@@ -475,49 +475,79 @@
@apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border shadow-lg sm:max-w-lg max-h-[min(640px,calc(100%_-_2rem))];
@apply transition-all scale-95;
> header {
@apply flex items-center border-b px-3 gap-2;
> button,
> form[method='dialog'] {
@apply absolute top-4 right-4;
}
> button,
> form[method='dialog'] > button {
@apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
}
}
svg {
@apply size-4 shrink-0 opacity-50;
}
input {
@apply placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50;
}
.command {
> header input {
@apply h-12;
}
[role='listbox'] {
@apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1;
@apply px-2;
[role='option'] {
@apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;
&.active {
@apply bg-accent text-accent-foreground;
}
@apply py-3 px-2 [&_svg]:size-5;
}
[role='heading'] {
@apply text-muted-foreground flex px-2 py-1.5 text-xs font-medium;
@apply px-2 py-1.5 font-medium text-muted-foreground;
}
[role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
@apply hidden;
}
[role='separator'] {
@apply border-border -mx-1;
}
&:not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply flex items-center justify-center py-6 px-3 text-sm truncate -m-1;
}
&[data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply content-[attr(data-empty)];
}
&:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply content-['No_results_found'];
}
}
}
.command {
> header {
@apply flex items-center border-b px-3 gap-2;
svg {
@apply size-4 shrink-0 opacity-50;
}
input {
@apply placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50;
}
}
[role='listbox'] {
@apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1;
[role='option'] {
@apply aria-hidden:hidden relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
&.active {
@apply bg-accent text-accent-foreground;
}
}
[role='heading'] {
@apply text-muted-foreground flex px-2 py-1.5 text-xs font-medium;
}
[role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
@apply hidden;
}
[role='separator'] {
@apply border-border -mx-1 my-1;
}
&:not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply flex items-center justify-center py-6 px-3 text-sm truncate -m-1;
}
&[data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply content-[attr(data-empty)];
}
&:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply content-['No_results_found'];
}
}
&:not([data-command-initialized]) [role='option'] {
@apply hover:bg-accent hover:text-accent-foreground;
}
&:has(> header input:not(:placeholder-shown)) [role='separator'] {
@apply hidden;
}
}
}
@@ -659,7 +689,6 @@
@layer components {
kbd {
@apply bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3;
/* [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 */
}
}
@@ -867,6 +896,9 @@
@apply content-['No_results_found'];
}
}
[data-popover]:has(> header input:not(:placeholder-shown)) [role='separator'] {
@apply hidden;
}
&:not([data-select-initialized]) [data-popover] [role='option'] {
@apply hover:bg-accent hover:text-accent-foreground;
}
src/jinja/command.html.jinja
+77 -11
View File
@@ -1,15 +1,13 @@
{#
Renders a command menu component with search and keyboard navigation.
Renders a standalone command menu component with search and keyboard navigation.
@param id {string} [optional] - Unique identifier for the command component.
@param items {array} [optional] - Array of items to render (alternative to using caller).
@param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input.
@param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
@param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
@param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog element.
@param input_attrs {object} [optional] - Additional HTML attributes for the search input.
@param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div.
@param open {boolean} [optional] [default=False] - Whether the command menu should be open initially.
#}
{% macro command(
id=None,
@@ -17,26 +15,90 @@
placeholder="Type a command or search...",
empty_text="No results found.",
main_attrs={},
input_attrs={},
listbox_attrs={}
) %}
{% set id = id or ("command-" ~ range(100000, 999999) | random | string) %}
<div
id="{{ id }}"
class="command {{ main_attrs.class }}"
aria-label="Command menu"
{% for key, value in main_attrs.items() %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
>
<header>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
<input
type="text"
id="{{ id }}-input"
placeholder="{{ placeholder }}"
autocomplete="off"
autocorrect="off"
spellcheck="false"
aria-autocomplete="list"
role="combobox"
aria-expanded="true"
aria-controls="{{ id }}-listbox"
{% for key, value in input_attrs.items() %}
{{ key }}="{{ value }}"
{% endfor %}
>
</header>
<div
role="listbox"
id="{{ id }}-listbox"
aria-orientation="vertical"
data-empty="{{ empty_text }}"
class="scrollbar {{ listbox_attrs.class }}"
{% for key, value in listbox_attrs.items() %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
>
{% if items and items|length > 0 %}
{{ render_command_items(items, id ~ "-items" if id else "items") }}
{% else %}
{{ caller() if caller }}
{% endif %}
</div>
</div>
{% endmacro %}
{#
Renders a command dialog (modal command palette).
@param id {string} [optional] - Unique identifier for the command dialog.
@param items {array} [optional] - Array of items to render (alternative to using caller).
@param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input.
@param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
@param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog element.
@param input_attrs {object} [optional] - Additional HTML attributes for the search input.
@param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div.
@param open {boolean} [optional] [default=False] - Whether the command dialog should be open initially.
#}
{% macro command_dialog(
id=None,
items=None,
placeholder="Type a command or search...",
empty_text="No results found.",
dialog_attrs={},
input_attrs={},
listbox_attrs={},
open=False
) %}
{% set id = id or ("command-" ~ range(100000, 999999) | random | string) %}
{% set id = id or ("command-dialog-" ~ range(100000, 999999) | random | string) %}
<dialog
id="{{ id }}"
class="command {{ dialog_attrs.class }}"
class="dialog command-dialog {{ dialog_attrs.class }}"
aria-label="Command menu"
{% if open %}open{% endif %}
onclick="if (event.target === this) this.close()"
{% for key, value in dialog_attrs.items() %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
{% for key, value in main_attrs.items() %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
>
<article>
<article>
<div class="command">
<header>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
<input
@@ -71,7 +133,11 @@
{{ caller() if caller }}
{% endif %}
</div>
</article>
</div>
<button type="button" aria-label="Close dialog" onclick="this.closest('dialog').close()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</article>
</dialog>
{% endmacro %}
@@ -107,6 +173,7 @@
data-value="{{ item.value }}"
{% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
{% if item.label %}data-label="{{ item.label }}"{% endif %}
{% if item.disabled %}aria-disabled="true"{% endif %}
{% if item.attrs %}
{% for key, value in item.attrs.items() %}
{{ key }}="{{ value }}"
@@ -118,4 +185,3 @@
{% endif %}
{% endfor %}
{% endmacro %}
src/js/command.js
+24 -37
View File
@@ -1,13 +1,13 @@
(() => {
const initCommand = (dialog) => {
const input = dialog.querySelector('header input');
const listbox = dialog.querySelector('[role="listbox"]');
const initCommand = (container) => {
const input = container.querySelector('header input');
const listbox = container.querySelector('[role="listbox"]');
if (!input || !listbox) {
const missing = [];
if (!input) missing.push('input');
if (!listbox) missing.push('listbox');
console.error(`Command component initialization failed. Missing element(s): ${missing.join(', ')}`, dialog);
console.error(`Command component initialization failed. Missing element(s): ${missing.join(', ')}`, container);
return;
}
@@ -51,7 +51,10 @@
}
});
// empty state handled via CSS on [role="listbox"][data-empty]
if (visibleOptions.length > 0) {
setActiveOption(options.indexOf(visibleOptions[0]));
visibleOptions[0].scrollIntoView({ block: 'nearest' });
}
};
const selectOption = (option) => {
@@ -61,9 +64,7 @@
detail: { value: option.dataset.value },
bubbles: true
});
dialog.dispatchEvent(event);
dialog.close();
container.dispatchEvent(event);
};
input.addEventListener('input', filterOptions);
@@ -92,13 +93,13 @@
case 'ArrowDown':
if (currentVisibleIndex < visibleOptions.length - 1) {
nextVisibleIndex = currentVisibleIndex + 1;
} else if (currentVisibleIndex === -1) {
nextVisibleIndex = 0;
}
break;
case 'ArrowUp':
if (currentVisibleIndex > 0) {
nextVisibleIndex = currentVisibleIndex - 1;
} else if (currentVisibleIndex === -1) {
nextVisibleIndex = 0;
}
break;
case 'Home':
@@ -109,7 +110,7 @@
break;
}
if (nextVisibleIndex !== currentVisibleIndex && nextVisibleIndex >= 0) {
if (nextVisibleIndex !== currentVisibleIndex) {
const newActiveOption = visibleOptions[nextVisibleIndex];
setActiveOption(options.indexOf(newActiveOption));
newActiveOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
@@ -127,7 +128,11 @@
});
listbox.addEventListener('mouseleave', () => {
setActiveOption(-1);
if (visibleOptions.length > 0) {
setActiveOption(options.indexOf(visibleOptions[0]));
} else {
setActiveOption(-1);
}
});
listbox.addEventListener('click', (event) => {
@@ -139,32 +144,14 @@
input.addEventListener('keydown', handleKeyNavigation);
dialog.addEventListener('close', () => {
input.value = '';
visibleOptions = [...options];
options.forEach(opt => opt.setAttribute('aria-hidden', 'false'));
setActiveOption(-1);
});
dialog.dataset.commandInitialized = true;
dialog.dispatchEvent(new CustomEvent('basecoat:initialized'));
};
document.addEventListener('keydown', (event) => {
if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
event.preventDefault();
const firstCommand = document.querySelector('.command');
if (firstCommand) {
if (firstCommand.open) {
firstCommand.close();
} else {
firstCommand.showModal();
const input = firstCommand.querySelector('header input');
if (input) input.focus();
}
}
if (visibleOptions.length > 0) {
setActiveOption(options.indexOf(visibleOptions[0]));
visibleOptions[0].scrollIntoView({ block: 'nearest' });
}
});
container.dataset.commandInitialized = true;
container.dispatchEvent(new CustomEvent('basecoat:initialized'));
};
if (window.basecoat) {
window.basecoat.register('command', '.command:not([data-command-initialized])', initCommand);
src/nunjucks/command.njk
+106 -40
View File
@@ -1,15 +1,13 @@
{#
Renders a command menu component with search and keyboard navigation.
Renders a standalone command menu component with search and keyboard navigation.
@param id {string} [optional] - Unique identifier for the command component.
@param items {array} [optional] - Array of items to render (alternative to using caller).
@param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input.
@param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
@param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
@param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog element.
@param input_attrs {object} [optional] - Additional HTML attributes for the search input.
@param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div.
@param open {boolean} [optional] [default=false] - Whether the command menu should be open initially.
#}
{% macro command(
id=None,
@@ -17,60 +15,128 @@
placeholder="Type a command or search...",
empty_text="No results found.",
main_attrs={},
input_attrs={},
listbox_attrs={}
) %}
{% set id = id or ("command-" + (range(100000, 999999) | random | string)) %}
<div
id="{{ id }}"
class="command {{ main_attrs.class }}"
aria-label="Command menu"
{% for key, value in main_attrs %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
>
<header>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
<input
type="text"
id="{{ id }}-input"
placeholder="{{ placeholder }}"
autocomplete="off"
autocorrect="off"
spellcheck="false"
aria-autocomplete="list"
role="combobox"
aria-expanded="true"
aria-controls="{{ id }}-listbox"
{% for key, value in input_attrs %}
{{ key }}="{{ value }}"
{% endfor %}
>
</header>
<div
role="listbox"
id="{{ id }}-listbox"
aria-orientation="vertical"
data-empty="{{ empty_text }}"
class="scrollbar {{ listbox_attrs.class }}"
{% for key, value in listbox_attrs %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
>
{% if items and items.length > 0 %}
{{ render_command_items(items, id ~ "-items" if id else "items") }}
{% else %}
{{ caller() if caller }}
{% endif %}
</div>
</div>
{% endmacro %}
{#
Renders a command dialog (modal command palette).
@param id {string} [optional] - Unique identifier for the command dialog.
@param items {array} [optional] - Array of items to render (alternative to using caller).
@param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input.
@param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
@param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog element.
@param input_attrs {object} [optional] - Additional HTML attributes for the search input.
@param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div.
@param open {boolean} [optional] [default=false] - Whether the command dialog should be open initially.
#}
{% macro command_dialog(
id=None,
items=None,
placeholder="Type a command or search...",
empty_text="No results found.",
dialog_attrs={},
input_attrs={},
listbox_attrs={},
open=false
) %}
{% set id = id or ("command-" + (range(100000, 999999) | random | string)) %}
{% set id = id or ("command-dialog-" + (range(100000, 999999) | random | string)) %}
<dialog
id="{{ id }}"
class="command {{ dialog_attrs.class }}"
class="command-dialog {{ dialog_attrs.class }}"
aria-label="Command menu"
{% if open %}open{% endif %}
onclick="if (event.target === this) this.close()"
{% for key, value in dialog_attrs %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
{% for key, value in main_attrs %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
>
<article>
<header>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
<input
type="text"
id="{{ id }}-input"
placeholder="{{ placeholder }}"
autocomplete="off"
autocorrect="off"
spellcheck="false"
aria-autocomplete="list"
role="combobox"
aria-expanded="true"
aria-controls="{{ id }}-listbox"
{% for key, value in input_attrs %}
{{ key }}="{{ value }}"
<div class="command">
<header>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
<input
type="text"
id="{{ id }}-input"
placeholder="{{ placeholder }}"
autocomplete="off"
autocorrect="off"
spellcheck="false"
aria-autocomplete="list"
role="combobox"
aria-expanded="true"
aria-controls="{{ id }}-listbox"
{% for key, value in input_attrs %}
{{ key }}="{{ value }}"
{% endfor %}
>
</header>
<div
role="listbox"
id="{{ id }}-listbox"
aria-orientation="vertical"
data-empty="{{ empty_text }}"
class="scrollbar {{ listbox_attrs.class }}"
{% for key, value in listbox_attrs %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
>
</header>
<div
role="listbox"
id="{{ id }}-listbox"
aria-orientation="vertical"
data-empty="{{ empty_text }}"
class="scrollbar {{ listbox_attrs.class }}"
{% for key, value in listbox_attrs %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
>
{% if items and items.length > 0 %}
{{ render_command_items(items, id ~ "-items" if id else "items") }}
{% else %}
{{ caller() if caller }}
{% endif %}
{% if items and items.length > 0 %}
{{ render_command_items(items, id ~ "-items" if id else "items") }}
{% else %}
{{ caller() if caller }}
{% endif %}
</div>
</div>
<button type="button" aria-label="Close dialog" onclick="this.closest('dialog').close()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</article>
</dialog>
{% endmacro %}
@@ -107,6 +173,7 @@
data-value="{{ item.value }}"
{% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
{% if item.label %}data-label="{{ item.label }}"{% endif %}
{% if item.disabled %}aria-disabled="true"{% endif %}
{% if item.attrs %}
{% for key, value in item.attrs %}
{{ key }}="{{ value }}"
@@ -118,4 +185,3 @@
{% endif %}
{% endfor %}
{% endmacro %}