mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-11 04:38:18 +00:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
21ba8ecb9e | ||
|
|
c0bf373890 | ||
|
|
77680f9e2b | ||
|
|
2afa2ae02e |
@@ -260,6 +260,9 @@
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
@@ -525,6 +528,12 @@
|
||||
.max-h-\[200px\] {
|
||||
max-height: 200px;
|
||||
}
|
||||
.max-h-\[260px\] {
|
||||
max-height: 260px;
|
||||
}
|
||||
.max-h-\[320px\] {
|
||||
max-height: 320px;
|
||||
}
|
||||
.max-h-\[612px\] {
|
||||
max-height: 612px;
|
||||
}
|
||||
@@ -585,6 +594,9 @@
|
||||
.w-\[200px\] {
|
||||
width: 200px;
|
||||
}
|
||||
.w-\[260px\] {
|
||||
width: 260px;
|
||||
}
|
||||
.w-\[271px\] {
|
||||
width: 271px;
|
||||
}
|
||||
@@ -612,9 +624,15 @@
|
||||
.max-w-\[300px\] {
|
||||
max-width: 300px;
|
||||
}
|
||||
.max-w-\[320px\] {
|
||||
max-width: 320px;
|
||||
}
|
||||
.max-w-\[450px\] {
|
||||
max-width: 450px;
|
||||
}
|
||||
.max-w-\[720px\] {
|
||||
max-width: 720px;
|
||||
}
|
||||
.max-w-lg {
|
||||
max-width: var(--container-lg);
|
||||
}
|
||||
@@ -651,6 +669,9 @@
|
||||
.min-w-\[8rem\] {
|
||||
min-width: 8rem;
|
||||
}
|
||||
.min-w-\[260px\] {
|
||||
min-width: 260px;
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
@@ -1298,6 +1319,10 @@
|
||||
--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);
|
||||
}
|
||||
.shadow-sm {
|
||||
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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-xl {
|
||||
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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);
|
||||
@@ -2379,7 +2404,7 @@
|
||||
&>svg {
|
||||
color: currentcolor;
|
||||
}
|
||||
h2, h3 {
|
||||
> h2, > h3, > h4, > h5, > h6, > strong, > [data-title] {
|
||||
grid-column-start: 2;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
@@ -2391,7 +2416,7 @@
|
||||
--tw-tracking: var(--tracking-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
}
|
||||
section {
|
||||
> section {
|
||||
grid-column-start: 2;
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
@@ -2421,7 +2446,7 @@
|
||||
&>svg {
|
||||
color: currentcolor;
|
||||
}
|
||||
section {
|
||||
> section {
|
||||
color: var(--color-destructive);
|
||||
}
|
||||
}
|
||||
@@ -3279,7 +3304,7 @@
|
||||
margin-block: calc(var(--spacing) * 1);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
&:not(:has([data-value]:not([aria-hidden='true'])))::before {
|
||||
&:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
|
||||
margin: calc(var(--spacing) * -1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -3292,11 +3317,11 @@
|
||||
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 {
|
||||
&[data-empty]:not(:has([role='menuitem']: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 {
|
||||
&:not([data-empty]):not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
|
||||
--tw-content: 'No results found';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
|
||||
@@ -118,7 +118,14 @@ toc:
|
||||
</ul>
|
||||
<dl>
|
||||
<dt><code class="highlight language-html"><div role="option" data-value="{ VALUE }"></code></dt>
|
||||
<dd>Option that can be selected.Should have a unique id if you use the <code>aria-activedescendant</code> attribute on the trigger.</dd>
|
||||
<dd>Option that can be selected. Should have a unique id if you use the <code>aria-activedescendant</code> attribute on the trigger. Optional attributes:
|
||||
<ul>
|
||||
<li><code>data-filter</code>: custom text used for filtering (if different from displayed content, e.g., <code>data-filter="united states"</code>)</li>
|
||||
<li><code>data-keywords</code>: additional keywords for enhanced filtering (e.g., <code>data-keywords="bread fruit"</code>)</li>
|
||||
<li><code>data-force</code>: forces the option to always display, regardless of filter (e.g., <code>data-force</code>)</li>
|
||||
<li><code>aria-disabled="true"</code>: marks option as disabled (excluded from selection and keyboard navigation)</li>
|
||||
</ul>
|
||||
</dd>
|
||||
<dt><code class="highlight language-html"><hr role="separator"></code> <span class="badge-secondary">Optional</span></dt>
|
||||
<dd>Separator between groups/options.</dd>
|
||||
<dt><code class="highlight language-html"><div role="group"></code> <span class="badge-secondary">Optional</span></dt>
|
||||
|
||||
@@ -33,15 +33,15 @@ toc:
|
||||
{% 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="menuitem" data-label="calendar" onclick="console.log('Open calendar')">
|
||||
<div role="menuitem" onclick="console.log('Open calendar')">
|
||||
{% lucide "calendar" %}
|
||||
<span>Calendar</span>
|
||||
</div>
|
||||
<div role="menuitem" data-label="search-emoji" onclick="console.log('Search emoji')">
|
||||
<div role="menuitem" onclick="console.log('Search emoji')">
|
||||
{% lucide "smile" %}
|
||||
<span>Search Emoji</span>
|
||||
</div>
|
||||
<div role="menuitem" data-label="calculator" aria-disabled="true">
|
||||
<div role="menuitem" aria-disabled="true">
|
||||
{% lucide "calculator" %}
|
||||
<span>Calculator</span>
|
||||
</div>
|
||||
@@ -49,17 +49,17 @@ toc:
|
||||
<hr role="separator" />
|
||||
<div role="group" aria-labelledby="{{ settings_id }}">
|
||||
<span role="heading" id="{{ settings_id }}">Settings</span>
|
||||
<div role="menuitem" data-label="profile" onclick="console.log('Open profile')">
|
||||
<div role="menuitem" onclick="console.log('Open profile')" data-filter="Profile">
|
||||
{% lucide "user" %}
|
||||
<span>Profile</span>
|
||||
<kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘P</kbd>
|
||||
</div>
|
||||
<div role="menuitem" data-label="billing" onclick="console.log('Open billing')">
|
||||
<div role="menuitem" onclick="console.log('Open billing')" data-filter="Billing">
|
||||
{% lucide "credit-card" %}
|
||||
<span>Billing</span>
|
||||
<kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘B</kbd>
|
||||
</div>
|
||||
<div role="menuitem" data-label="settings" onclick="console.log('Open settings')">
|
||||
<div role="menuitem" onclick="console.log('Open settings')" data-filter="Settings">
|
||||
{% lucide "settings" %}
|
||||
<span>Settings</span>
|
||||
<kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘S</kbd>
|
||||
@@ -155,11 +155,13 @@ toc:
|
||||
<dt><code class="highlight language-html"><div role="menu"></code></dt>
|
||||
<dd>The menu containing the command items. Should have <code>id="{ MENU_ID }"</code> refered to by the input's <code>aria-controls</code> attribute.
|
||||
<dl>
|
||||
<dt><code class="highlight language-html"><div role="menuitem"></code></dt>
|
||||
<dd>Command item that triggers an action when clicked. In a command-dialog, clicking a menuitem automatically closes the dialog unless the <code>data-keep-command-open</code> attribute is present. Optional attributes:
|
||||
<dt><code class="highlight language-html"><div role="menuitem"></code> or <code class="highlight language-html"><a role="menuitem"></code></dt>
|
||||
<dd>Command item that triggers an action when clicked. Use <code><a></code> for navigation links, or <code><div></code> for actions. In a command-dialog, clicking a menuitem automatically closes the dialog unless the <code>data-keep-command-open</code> attribute is present. Optional attributes:
|
||||
<ul>
|
||||
<li><code>data-label</code>: custom label for filtering (if different from text content)</li>
|
||||
<li><code>data-keywords</code>: additional keywords for enhanced filtering</li>
|
||||
<li><code>href</code>: If present on an <code><a></code>, the item navigates to that URL</li>
|
||||
<li><code>data-filter</code>: custom text used for filtering (if different from displayed content, e.g., <code>data-filter="calendar event"</code>)</li>
|
||||
<li><code>data-keywords</code>: additional keywords for enhanced filtering (e.g., <code>data-keywords="calendar event date"</code>)</li>
|
||||
<li><code>data-force</code>: forces the item to always display, regardless of filter (e.g., <code>data-force</code>)</li>
|
||||
<li><code>aria-disabled="true"</code>: marks item as disabled (excluded from keyboard navigation and filtering)</li>
|
||||
</ul>
|
||||
</dd>
|
||||
@@ -209,17 +211,42 @@ toc:
|
||||
</div>
|
||||
|
||||
{% set raw_code %}{% raw %}{% call command() %}
|
||||
<div role="menuitem" data-label="calendar">
|
||||
<div role="menuitem">
|
||||
<svg>...</svg>
|
||||
<span>Calendar</span>
|
||||
</div>
|
||||
<div role="menuitem" data-label="settings">
|
||||
<div role="menuitem" data-keywords="config preferences">
|
||||
<svg>...</svg>
|
||||
<span>Settings</span>
|
||||
</div>
|
||||
{% endcall %}{% endraw %}{% endset %}
|
||||
{{ code_block(raw_code, "jinja") }}
|
||||
|
||||
<section class="prose">
|
||||
<p>You can also use the <code>items</code> parameter to pass an array of items:</p>
|
||||
</section>
|
||||
|
||||
{% set icon_calendar %}{% lucide "calendar" %}{% endset %}
|
||||
{% set icon_settings %}{% lucide "settings" %}{% endset %}
|
||||
{% set raw_code_items %}{% raw %}{% set icon_calendar %}{% lucide "calendar" %}{% endset %}
|
||||
{% set icon_settings %}{% lucide "settings" %}{% endset %}
|
||||
{% set items = [
|
||||
{ type: "group", label: "Suggestions", items: [
|
||||
{ label: "Calendar", icon: icon_calendar, keywords: "date event" },
|
||||
{ label: "Search Emoji", icon: icon_settings },
|
||||
{ label: "Calculator", disabled: true }
|
||||
]},
|
||||
{ type: "separator" },
|
||||
{ type: "group", label: "Settings", items: [
|
||||
{ label: "Profile", url: "/profile", icon: icon_settings, keywords: "user account" },
|
||||
{ label: "Billing", url: "/billing", icon: icon_settings },
|
||||
{ label: "Settings", url: "/settings", icon: icon_settings }
|
||||
]}
|
||||
] %}
|
||||
|
||||
{% call command(items=items) %}{% endcall %}{% endraw %}{% endset %}
|
||||
{{ code_block(raw_code_items, "jinja") }}
|
||||
|
||||
<h2 id="examples"><a href="#examples">Examples</a></h2>
|
||||
|
||||
<h3 id="example-dialog"><a href="#example-dialog">Dialog</a></h3>
|
||||
|
||||
@@ -58,8 +58,8 @@ toc:
|
||||
type: "group",
|
||||
label: "Fruits",
|
||||
items: [
|
||||
{ type: "item", value: "apple", label: "Apple" },
|
||||
{ type: "item", value: "banana", label: "Banana" },
|
||||
{ type: "item", value: "apple", label: "Apple", attrs: {"data-force": "true"} },
|
||||
{ type: "item", value: "banana", label: "Banana", attrs: {"data-keywords": "bread"} },
|
||||
{ type: "item", value: "blueberry", label: "Blueberry" },
|
||||
{ type: "item", value: "pineapple", label: "Grapes" },
|
||||
{ type: "item", value: "pineapple", label: "Pineapple" }
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "basecoat",
|
||||
"version": "0.3.5",
|
||||
"version": "0.3.7",
|
||||
"description": "shadcn/ui for the rest of us",
|
||||
"author": "hunvreus",
|
||||
"type": "module",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "basecoat-cli",
|
||||
"version": "0.3.5",
|
||||
"version": "0.3.7",
|
||||
"description": "Add Basecoat components to your project",
|
||||
"author": "hunvreus",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "basecoat-css",
|
||||
"version": "0.3.5",
|
||||
"version": "0.3.7",
|
||||
"description": "Tailwind CSS for Basecoat components",
|
||||
"author": {
|
||||
"name": "hunvreus",
|
||||
|
||||
+12
-7
@@ -154,11 +154,16 @@
|
||||
.alert-destructive {
|
||||
@apply relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current;
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
> h2,
|
||||
> h3,
|
||||
> h4,
|
||||
> h5,
|
||||
> h6,
|
||||
> strong,
|
||||
> [data-title] {
|
||||
@apply col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight;
|
||||
}
|
||||
section {
|
||||
> section {
|
||||
@apply text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed;
|
||||
|
||||
ul {
|
||||
@@ -172,7 +177,7 @@
|
||||
.alert-destructive {
|
||||
@apply text-destructive bg-card [&>svg]:text-current;
|
||||
|
||||
section {
|
||||
> section {
|
||||
@apply text-destructive;
|
||||
}
|
||||
}
|
||||
@@ -572,13 +577,13 @@
|
||||
[role='separator'] {
|
||||
@apply border-border -mx-1 my-1;
|
||||
}
|
||||
&:not(:has([data-value]:not([aria-hidden='true'])))::before {
|
||||
&:not(:has([role='menuitem']: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 {
|
||||
&[data-empty]:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
|
||||
@apply content-[attr(data-empty)];
|
||||
}
|
||||
&:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
|
||||
&:not([data-empty]):not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
|
||||
@apply content-['No_results_found'];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -143,10 +143,10 @@
|
||||
Renders a list of items for the command component.
|
||||
|
||||
@param items {array} - Array of items to render. Each item can be:
|
||||
- { type: "item", label: "Text", content: "HTML", keywords: "search terms", disabled: true, attrs: {} }
|
||||
- { type: "item", label: "Text or HTML", icon: "HTML", url: "href", keywords: "search terms", disabled: true, attrs: {} }
|
||||
- { type: "group", label: "Group Title", items: [...] }
|
||||
- { type: "separator" }
|
||||
Note: Use attrs to add data-label for alternative search text if needed.
|
||||
Note: Use attrs to add data-label for alternative search text if needed. If url is provided, renders as <a role="menuitem"> instead of <div role="menuitem">. Label supports HTML (marked as safe).
|
||||
@param parent_id_prefix {string} [optional] - The prefix for the item id.
|
||||
#}
|
||||
{% macro render_command_items(items, parent_id_prefix="items") %}
|
||||
@@ -163,25 +163,44 @@
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
>
|
||||
<span role="heading" id="{{ group_label_id }}">{{ item.label }}</span>
|
||||
<span role="heading" id="{{ group_label_id }}">{{ item.label | safe }}</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="menuitem"
|
||||
{% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
|
||||
{% if item.disabled %}aria-disabled="true"{% 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>
|
||||
{% if item.url %}
|
||||
<a
|
||||
id="{{ item_id }}"
|
||||
href="{{ item.url }}"
|
||||
role="menuitem"
|
||||
{% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
|
||||
{% if item.disabled %}aria-disabled="true"{% endif %}
|
||||
{% if item.attrs %}
|
||||
{% for key, value in item.attrs.items() %}
|
||||
{% if key != "href" %}{{ key }}="{{ value }}"{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
>
|
||||
{% if item.icon %}{{ item.icon | safe }}{% endif %}
|
||||
{{ item.content | safe if item.content else (item.label | safe) }}
|
||||
</a>
|
||||
{% else %}
|
||||
<div
|
||||
id="{{ item_id }}"
|
||||
role="menuitem"
|
||||
{% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
|
||||
{% if item.disabled %}aria-disabled="true"{% endif %}
|
||||
{% if item.attrs %}
|
||||
{% for key, value in item.attrs.items() %}
|
||||
{{ key }}="{{ value }}"
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
>
|
||||
{% if item.icon %}{{ item.icon | safe }}{% endif %}
|
||||
{{ item.content | safe if item.content else (item.label | safe) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
>
|
||||
<summary aria-controls="submenu-{{ item_id }}-content">
|
||||
{% if item.icon %}{{ item.icon | safe }}{% endif %}
|
||||
{{ item.label }}
|
||||
{{ item.label | safe }}
|
||||
</summary>
|
||||
<ul id="submenu-{{ item_id }}-content">
|
||||
{{ render_sidebar_content(item["items"], item_id) if item["items"] }}
|
||||
@@ -136,7 +136,7 @@
|
||||
{% endif %}
|
||||
>
|
||||
{% if item.icon %}{{ item.icon | safe }}{% endif %}
|
||||
<span>{{ item.label }}</span>
|
||||
<span>{{ item.label | safe }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
+15
-3
@@ -46,9 +46,21 @@
|
||||
|
||||
visibleMenuItems = [];
|
||||
allMenuItems.forEach(item => {
|
||||
const itemText = (item.dataset.label || item.textContent).trim().toLowerCase();
|
||||
const keywords = (item.dataset.keywords || '').toLowerCase();
|
||||
const matches = itemText.includes(searchTerm) || keywords.includes(searchTerm);
|
||||
if (item.hasAttribute('data-force')) {
|
||||
item.setAttribute('aria-hidden', 'false');
|
||||
if (menuItems.includes(item)) {
|
||||
visibleMenuItems.push(item);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const itemText = (item.dataset.filter || item.textContent).trim().toLowerCase();
|
||||
const keywordList = (item.dataset.keywords || '')
|
||||
.toLowerCase()
|
||||
.split(/[\s,]+/)
|
||||
.filter(Boolean);
|
||||
const matchesKeyword = keywordList.some(keyword => keyword.includes(searchTerm));
|
||||
const matches = itemText.includes(searchTerm) || matchesKeyword;
|
||||
item.setAttribute('aria-hidden', String(!matches));
|
||||
if (matches && menuItems.includes(item)) {
|
||||
visibleMenuItems.push(item);
|
||||
|
||||
+17
-4
@@ -48,7 +48,7 @@
|
||||
|
||||
const updateValue = (option, triggerEvent = true) => {
|
||||
if (option) {
|
||||
selectedLabel.innerHTML = option.dataset.label || option.innerHTML;
|
||||
selectedLabel.innerHTML = option.innerHTML;
|
||||
input.value = option.dataset.value;
|
||||
listbox.querySelector('[role="option"][aria-selected="true"]')?.removeAttribute('aria-selected');
|
||||
option.setAttribute('aria-selected', 'true');
|
||||
@@ -112,8 +112,21 @@
|
||||
|
||||
visibleOptions = [];
|
||||
allOptions.forEach(option => {
|
||||
const optionText = (option.dataset.label || option.textContent).trim().toLowerCase();
|
||||
const matches = optionText.includes(searchTerm);
|
||||
if (option.hasAttribute('data-force')) {
|
||||
option.setAttribute('aria-hidden', 'false');
|
||||
if (options.includes(option)) {
|
||||
visibleOptions.push(option);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const optionText = (option.dataset.filter || option.textContent).trim().toLowerCase();
|
||||
const keywordList = (option.dataset.keywords || '')
|
||||
.toLowerCase()
|
||||
.split(/[\s,]+/)
|
||||
.filter(Boolean);
|
||||
const matchesKeyword = keywordList.some(keyword => keyword.includes(searchTerm));
|
||||
const matches = optionText.includes(searchTerm) || matchesKeyword;
|
||||
option.setAttribute('aria-hidden', String(!matches));
|
||||
if (matches && options.includes(option)) {
|
||||
visibleOptions.push(option);
|
||||
@@ -281,4 +294,4 @@
|
||||
if (window.basecoat) {
|
||||
window.basecoat.register('select', 'div.select:not([data-select-initialized])', initSelect);
|
||||
}
|
||||
})();
|
||||
})();
|
||||
|
||||
+35
-16
@@ -143,10 +143,10 @@
|
||||
Renders a list of items for the command component.
|
||||
|
||||
@param items {array} - Array of items to render. Each item can be:
|
||||
- { type: "item", label: "Text", content: "HTML", keywords: "search terms", disabled: true, attrs: {} }
|
||||
- { type: "item", label: "Text or HTML", icon: "HTML", url: "href", keywords: "search terms", disabled: true, attrs: {} }
|
||||
- { type: "group", label: "Group Title", items: [...] }
|
||||
- { type: "separator" }
|
||||
Note: Use attrs to add data-label for alternative search text if needed.
|
||||
Note: Use attrs to add data-label for alternative search text if needed. If url is provided, renders as <a role="menuitem"> instead of <div role="menuitem">. Label supports HTML (marked as safe).
|
||||
@param parent_id_prefix {string} [optional] - The prefix for the item id.
|
||||
#}
|
||||
{% macro render_command_items(items, parent_id_prefix="items") %}
|
||||
@@ -163,25 +163,44 @@
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
>
|
||||
<span role="heading" id="{{ group_label_id }}">{{ item.label }}</span>
|
||||
<span role="heading" id="{{ group_label_id }}">{{ item.label | safe }}</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="menuitem"
|
||||
{% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
|
||||
{% if item.disabled %}aria-disabled="true"{% endif %}
|
||||
{% if item.attrs %}
|
||||
{% for key, value in item.attrs %}
|
||||
{{ key }}="{{ value }}"
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
>
|
||||
{{ item.content | safe if item.content else item.label }}
|
||||
</div>
|
||||
{% if item.url %}
|
||||
<a
|
||||
id="{{ item_id }}"
|
||||
href="{{ item.url }}"
|
||||
role="menuitem"
|
||||
{% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
|
||||
{% if item.disabled %}aria-disabled="true"{% endif %}
|
||||
{% if item.attrs %}
|
||||
{% for key, value in item.attrs %}
|
||||
{% if key != "href" %}{{ key }}="{{ value }}"{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
>
|
||||
{% if item.icon %}{{ item.icon | safe }}{% endif %}
|
||||
{{ item.content | safe if item.content else (item.label | safe) }}
|
||||
</a>
|
||||
{% else %}
|
||||
<div
|
||||
id="{{ item_id }}"
|
||||
role="menuitem"
|
||||
{% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
|
||||
{% if item.disabled %}aria-disabled="true"{% endif %}
|
||||
{% if item.attrs %}
|
||||
{% for key, value in item.attrs %}
|
||||
{{ key }}="{{ value }}"
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
>
|
||||
{% if item.icon %}{{ item.icon | safe }}{% endif %}
|
||||
{{ item.content | safe if item.content else (item.label | safe) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
>
|
||||
<summary aria-controls="submenu-{{ item_id }}-content">
|
||||
{% if item.icon %}{{ item.icon | safe }}{% endif %}
|
||||
{{ item.label }}
|
||||
{{ item.label | safe }}
|
||||
</summary>
|
||||
<ul id="submenu-{{ item_id }}-content">
|
||||
{{ render_sidebar_content(item.items, item_id) if item.items }}
|
||||
@@ -136,7 +136,7 @@
|
||||
{% endif %}
|
||||
>
|
||||
{% if item.icon %}{{ item.icon | safe }}{% endif %}
|
||||
<span>{{ item.label }}</span>
|
||||
<span>{{ item.label | safe }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user