mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
Added kbd and command
This commit is contained in:
Ronan Berder
@@ -442,6 +442,85 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Command */
|
||||
@layer components {
|
||||
.command {
|
||||
@apply inset-y-0 opacity-0 transition-all transition-discrete;
|
||||
|
||||
&:is([open],:popover-open) {
|
||||
@apply opacity-100;
|
||||
|
||||
&::backdrop {
|
||||
@apply opacity-100;
|
||||
}
|
||||
> article {
|
||||
@apply scale-100;
|
||||
}
|
||||
|
||||
@starting-style {
|
||||
@apply opacity-0;
|
||||
|
||||
&::backdrop {
|
||||
@apply opacity-0;
|
||||
}
|
||||
> article {
|
||||
@apply scale-95;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::backdrop {
|
||||
@apply bg-black/50 opacity-0 transition-all transition-discrete;
|
||||
}
|
||||
> article {
|
||||
@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;
|
||||
|
||||
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 [&_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;
|
||||
}
|
||||
}
|
||||
[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;
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Dialog */
|
||||
@layer components {
|
||||
.dialog {
|
||||
@@ -576,6 +655,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Kbd */
|
||||
@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 */
|
||||
}
|
||||
}
|
||||
|
||||
/* Label */
|
||||
@layer components {
|
||||
.form label,
|
||||
@@ -1036,6 +1123,8 @@
|
||||
|
||||
/* Tooltip */
|
||||
@layer components {
|
||||
|
||||
|
||||
[data-tooltip] {
|
||||
@apply relative;
|
||||
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
{#
|
||||
Renders a 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,
|
||||
items=None,
|
||||
placeholder="Type a command or search...",
|
||||
empty_text="No results found.",
|
||||
main_attrs={},
|
||||
dialog_attrs={},
|
||||
input_attrs={},
|
||||
listbox_attrs={},
|
||||
open=False
|
||||
) %}
|
||||
{% set id = id or ("command-" ~ range(100000, 999999) | random | string) %}
|
||||
<dialog
|
||||
id="{{ id }}"
|
||||
class="command {{ 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>
|
||||
<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>
|
||||
</article>
|
||||
</dialog>
|
||||
{% endmacro %}
|
||||
|
||||
{#
|
||||
Renders a list of items for the command component.
|
||||
|
||||
@param items {array} - The array of items to render.
|
||||
@param parent_id_prefix {string} [optional] - The prefix for the item id.
|
||||
#}
|
||||
{% macro render_command_items(items, parent_id_prefix="items") %}
|
||||
{% for item in items %}
|
||||
{% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
|
||||
{% if item.type == "group" %}
|
||||
{% set group_label_id = item.id if item.id else "group-label-" + item_id %}
|
||||
<div
|
||||
role="group"
|
||||
aria-labelledby="{{ group_label_id }}"
|
||||
{% if item.attrs %}
|
||||
{% for key, value in item.attrs.items() %}
|
||||
{{ key }}="{{ value }}"
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
>
|
||||
<span role="heading" id="{{ group_label_id }}">{{ item.label }}</span>
|
||||
{{ render_command_items(item.items, item_id) if item.items }}
|
||||
</div>
|
||||
{% elif item.type == "separator" %}
|
||||
<hr role="separator" />
|
||||
{% elif item.type == "item" or not item.type %}
|
||||
<div
|
||||
id="{{ item_id }}"
|
||||
role="option"
|
||||
data-value="{{ item.value }}"
|
||||
{% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
|
||||
{% if item.label %}data-label="{{ item.label }}"{% endif %}
|
||||
{% if item.attrs %}
|
||||
{% for key, value in item.attrs.items() %}
|
||||
{{ key }}="{{ value }}"
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
>
|
||||
{{ item.content | safe if item.content else item.label }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
(() => {
|
||||
const initCommand = (dialog) => {
|
||||
const input = dialog.querySelector('header input');
|
||||
const listbox = dialog.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);
|
||||
return;
|
||||
}
|
||||
|
||||
const options = Array.from(listbox.querySelectorAll('[role="option"]'));
|
||||
let visibleOptions = [...options];
|
||||
let activeIndex = -1;
|
||||
|
||||
const setActiveOption = (index) => {
|
||||
if (activeIndex > -1 && options[activeIndex]) {
|
||||
options[activeIndex].classList.remove('active');
|
||||
}
|
||||
|
||||
activeIndex = index;
|
||||
|
||||
if (activeIndex > -1) {
|
||||
const activeOption = options[activeIndex];
|
||||
activeOption.classList.add('active');
|
||||
if (activeOption.id) {
|
||||
input.setAttribute('aria-activedescendant', activeOption.id);
|
||||
} else {
|
||||
input.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
} else {
|
||||
input.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
};
|
||||
|
||||
const filterOptions = () => {
|
||||
const searchTerm = input.value.trim().toLowerCase();
|
||||
|
||||
setActiveOption(-1);
|
||||
|
||||
visibleOptions = [];
|
||||
options.forEach(option => {
|
||||
const optionText = (option.dataset.label || option.textContent).trim().toLowerCase();
|
||||
const keywords = (option.dataset.keywords || '').toLowerCase();
|
||||
const matches = optionText.includes(searchTerm) || keywords.includes(searchTerm);
|
||||
option.setAttribute('aria-hidden', String(!matches));
|
||||
if (matches) {
|
||||
visibleOptions.push(option);
|
||||
}
|
||||
});
|
||||
|
||||
// empty state handled via CSS on [role="listbox"][data-empty]
|
||||
};
|
||||
|
||||
const selectOption = (option) => {
|
||||
if (!option) return;
|
||||
|
||||
const event = new CustomEvent('command:select', {
|
||||
detail: { value: option.dataset.value },
|
||||
bubbles: true
|
||||
});
|
||||
dialog.dispatchEvent(event);
|
||||
|
||||
dialog.close();
|
||||
};
|
||||
|
||||
input.addEventListener('input', filterOptions);
|
||||
|
||||
const handleKeyNavigation = (event) => {
|
||||
if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End'].includes(event.key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
if (activeIndex > -1) {
|
||||
selectOption(options[activeIndex]);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (visibleOptions.length === 0) return;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
const currentVisibleIndex = activeIndex > -1 ? visibleOptions.indexOf(options[activeIndex]) : -1;
|
||||
let nextVisibleIndex = currentVisibleIndex;
|
||||
|
||||
switch (event.key) {
|
||||
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;
|
||||
}
|
||||
break;
|
||||
case 'Home':
|
||||
nextVisibleIndex = 0;
|
||||
break;
|
||||
case 'End':
|
||||
nextVisibleIndex = visibleOptions.length - 1;
|
||||
break;
|
||||
}
|
||||
|
||||
if (nextVisibleIndex !== currentVisibleIndex && nextVisibleIndex >= 0) {
|
||||
const newActiveOption = visibleOptions[nextVisibleIndex];
|
||||
setActiveOption(options.indexOf(newActiveOption));
|
||||
newActiveOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||||
}
|
||||
};
|
||||
|
||||
listbox.addEventListener('mousemove', (event) => {
|
||||
const option = event.target.closest('[role="option"]');
|
||||
if (option && visibleOptions.includes(option)) {
|
||||
const index = options.indexOf(option);
|
||||
if (index !== activeIndex) {
|
||||
setActiveOption(index);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
listbox.addEventListener('mouseleave', () => {
|
||||
setActiveOption(-1);
|
||||
});
|
||||
|
||||
listbox.addEventListener('click', (event) => {
|
||||
const clickedOption = event.target.closest('[role="option"]');
|
||||
if (clickedOption && visibleOptions.includes(clickedOption)) {
|
||||
selectOption(clickedOption);
|
||||
}
|
||||
});
|
||||
|
||||
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 (window.basecoat) {
|
||||
window.basecoat.register('command', '.command:not([data-command-initialized])', initCommand);
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,121 @@
|
||||
{#
|
||||
Renders a 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,
|
||||
items=None,
|
||||
placeholder="Type a command or search...",
|
||||
empty_text="No results found.",
|
||||
main_attrs={},
|
||||
dialog_attrs={},
|
||||
input_attrs={},
|
||||
listbox_attrs={},
|
||||
open=false
|
||||
) %}
|
||||
{% set id = id or ("command-" + (range(100000, 999999) | random | string)) %}
|
||||
<dialog
|
||||
id="{{ id }}"
|
||||
class="command {{ 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 }}"
|
||||
{% 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>
|
||||
</article>
|
||||
</dialog>
|
||||
{% endmacro %}
|
||||
|
||||
{#
|
||||
Renders a list of items for the command component.
|
||||
|
||||
@param items {array} - The array of items to render.
|
||||
@param parent_id_prefix {string} [optional] - The prefix for the item id.
|
||||
#}
|
||||
{% macro render_command_items(items, parent_id_prefix="items") %}
|
||||
{% for item in items %}
|
||||
{% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
|
||||
{% if item.type == "group" %}
|
||||
{% set group_label_id = item.id if item.id else "group-label-" + item_id %}
|
||||
<div
|
||||
role="group"
|
||||
aria-labelledby="{{ group_label_id }}"
|
||||
{% if item.attrs %}
|
||||
{% for key, value in item.attrs %}
|
||||
{{ key }}="{{ value }}"
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
>
|
||||
<span role="heading" id="{{ group_label_id }}">{{ item.label }}</span>
|
||||
{{ render_command_items(item.items, item_id) if item.items }}
|
||||
</div>
|
||||
{% elif item.type == "separator" %}
|
||||
<hr role="separator" />
|
||||
{% elif item.type == "item" or not item.type %}
|
||||
<div
|
||||
id="{{ item_id }}"
|
||||
role="option"
|
||||
data-value="{{ item.value }}"
|
||||
{% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
|
||||
{% if item.label %}data-label="{{ item.label }}"{% endif %}
|
||||
{% if item.attrs %}
|
||||
{% for key, value in item.attrs %}
|
||||
{{ key }}="{{ value }}"
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
>
|
||||
{{ item.content | safe if item.content else item.label }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endmacro %}
|
||||
|
||||
Reference in New Issue
Block a user