Add Select component for dropdown selection
Implement a Select component with label and options.
This commit is contained in:
36
src/components/Select.js
Normal file
36
src/components/Select.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import { $html, $for } from "sigpro";
|
||||
import { val, joinClass } from "../core/utils.js";
|
||||
|
||||
/** SELECT */
|
||||
export const Select = (props) => {
|
||||
const { label, options, value, ...rest } = props;
|
||||
|
||||
const selectEl = $html(
|
||||
"select",
|
||||
{
|
||||
...rest,
|
||||
class: joinClass("select select-bordered w-full", props.class),
|
||||
value: value
|
||||
},
|
||||
$for(
|
||||
() => val(options) || [],
|
||||
(opt) =>
|
||||
$html(
|
||||
"option",
|
||||
{
|
||||
value: opt.value,
|
||||
$selected: () => String(val(value)) === String(opt.value),
|
||||
},
|
||||
opt.label,
|
||||
),
|
||||
(opt) => opt.value,
|
||||
),
|
||||
);
|
||||
|
||||
if (!label) return selectEl;
|
||||
|
||||
return $html("label", { class: "fieldset-label flex flex-col gap-1" }, [
|
||||
$html("span", {}, label),
|
||||
selectEl
|
||||
]);
|
||||
};
|
||||
Reference in New Issue
Block a user