45 lines
1.1 KiB
JavaScript
45 lines
1.1 KiB
JavaScript
// components/Select.js
|
|
import { Tag, For } from "../sigpro.js";
|
|
import { val, ui } from "../core/utils.js";
|
|
|
|
/**
|
|
* Select component
|
|
*
|
|
* daisyUI classes used:
|
|
* - select, select-bordered, select-primary, select-secondary
|
|
* - select-accent, select-info, select-success, select-warning, select-error
|
|
* - select-xs, select-sm, select-md, select-lg
|
|
* - fieldset-label, flex, flex-col, gap-1, w-full
|
|
*/
|
|
export const Select = (props) => {
|
|
const { class: className, label, items, value, ...rest } = props;
|
|
|
|
const selectEl = Tag(
|
|
"select",
|
|
{
|
|
...rest,
|
|
class: ui('select select-bordered w-full', className),
|
|
value: value
|
|
},
|
|
For(
|
|
() => val(items) || [],
|
|
(opt) =>
|
|
Tag(
|
|
"option",
|
|
{
|
|
value: opt.value,
|
|
$selected: () => String(val(value)) === String(opt.value),
|
|
},
|
|
opt.label,
|
|
),
|
|
(opt) => opt.value,
|
|
),
|
|
);
|
|
|
|
if (!label) return selectEl;
|
|
|
|
return Tag("label", { class: "fieldset-label flex flex-col gap-1" }, [
|
|
Tag("span", {}, label),
|
|
selectEl
|
|
]);
|
|
}; |