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

Preparing 0.3.10

Browse Source
This commit is contained in:
Ronan Berder
2026-01-13 19:33:59 +08:00
parent a7f686e71b
commit 713c163fb8
8 changed files with 22 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/_includes/partials/kitchen-sink/select.njk
-23
View File
@@ -10,29 +10,6 @@
<div class="p-4 gap">
<div class="flex flex-col gap-4">
<div class="flex flex-wrap items-center gap-2 md:flex-row">
{{ select(
id="select-default",
trigger_attrs={"class": "w-[180px]"},
selected="blueberry",
items=[
{
type: "group",
label: "Fruits",
items: [
{ type: "item", label: "Apple", value: "apple" },
{ type: "item", label: "Banana", value: "banana" },
{ type: "item", label: "Blueberry", value: "blueberry" }
]
},
{
type: "group",
label: "Grapes",
items: [
{ type: "item", label: "Pineapple", value: "pineapple" }
]
}
]
) }}
<select class="select w-[180px]">
<optgroup label="Fruits">
<option>Apple</option>
docs/src/components/select.njk
+1
View File
@@ -126,6 +126,7 @@ toc:
<p>Wraps around the entire component. Can have the following attributes:</p>
<ul>
<li><code>data-placeholder="{ TEXT }"</code> <span class="badge-secondary">Optional</span>: placeholder text shown when no options are selected (multiselect only).</li>
<li><code>data-close-on-select="true"</code> <span class="badge-secondary">Optional</span>: closes the popover when selecting an option in multiselect mode.</li>
</ul>
<dl>
<dt><code class="highlight language-html">&lt;button type="button"&gt;</code></dt>
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "basecoat",
"version": "0.3.10-beta.2",
"version": "0.3.10",
"description": "shadcn/ui for the rest of us",
"author": "hunvreus",
"type": "module",
packages/cli/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "basecoat-cli",
"version": "0.3.10-beta.2",
"version": "0.3.10",
"description": "Add Basecoat components to your project",
"author": "hunvreus",
"license": "MIT",
packages/css/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "basecoat-css",
"version": "0.3.10-beta.2",
"version": "0.3.10",
"description": "Tailwind CSS for Basecoat components",
"author": {
"name": "hunvreus",
src/jinja/select.html.jinja
+3
View File
@@ -6,6 +6,7 @@
@param name {string} [optional] - The name attribute for the hidden input storing the selected value.
@param multiple {boolean} [optional] [default=false] - Enables multiple selection mode.
@param placeholder {string} [optional] - Placeholder text shown when no options are selected (multiple mode only).
@param close_on_select {boolean} [optional] [default=false] - Closes the popover when selecting an option in multiple mode.
@param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
@param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
@param popover_attrs {object} [optional] - Additional HTML attributes for the popover content div.
@@ -21,6 +22,7 @@
items=[],
multiple=false,
placeholder=None,
close_on_select=false,
main_attrs={},
trigger_attrs={},
popover_attrs={},
@@ -76,6 +78,7 @@
id="{{ id }}"
class="select {{ main_attrs.class }}"
{% if multiple and placeholder %}data-placeholder="{{ placeholder }}"{% endif %}
{% if multiple and close_on_select %}data-close-on-select="true"{% endif %}
{% for key, value in main_attrs.items() %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
src/js/select.js
+12 -4
View File
@@ -24,6 +24,7 @@
const isMultiple = listbox.getAttribute('aria-multiselectable') === 'true';
const selectedOptions = isMultiple ? new Set() : null;
const placeholder = isMultiple ? (selectComponent.dataset.placeholder || '') : null;
const closeOnSelect = selectComponent.dataset.closeOnSelect === 'true';
const getValue = (opt) => opt.dataset.value ?? opt.textContent.trim();
@@ -248,6 +249,9 @@
const option = options[activeIndex];
if (isMultiple) {
toggleMultipleValue(option);
if (closeOnSelect) {
closePopover();
}
} else {
if (input.value !== getValue(option)) {
updateValue(option);
@@ -358,11 +362,15 @@
if (isMultiple) {
toggleMultipleValue(option);
setActiveOption(options.indexOf(option));
if (filter) {
filter.focus();
if (closeOnSelect) {
closePopover();
} else {
trigger.focus();
setActiveOption(options.indexOf(option));
if (filter) {
filter.focus();
} else {
trigger.focus();
}
}
} else {
if (input.value !== getValue(option)) {
src/nunjucks/select.njk
+3
View File
@@ -6,6 +6,7 @@
@param name {string} [optional] - The name attribute for the hidden input storing the selected value.
@param multiple {boolean} [optional] [default=false] - Enables multiple selection mode.
@param placeholder {string} [optional] - Placeholder text shown when no options are selected (multiple mode only).
@param close_on_select {boolean} [optional] [default=false] - Closes the popover when selecting an option in multiple mode.
@param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
@param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
@param popover_attrs {object} [optional] - Additional HTML attributes for the popover content div.
@@ -21,6 +22,7 @@
items=None,
multiple=false,
placeholder=None,
close_on_select=false,
main_attrs={},
trigger_attrs={},
popover_attrs={},
@@ -76,6 +78,7 @@
id="{{ id }}"
class="select {{ main_attrs.class }}"
{% if multiple and placeholder %}data-placeholder="{{ placeholder }}"{% endif %}
{% if multiple and close_on_select %}data-close-on-select="true"{% endif %}
{% for key, value in main_attrs %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}