natxocc
5a5f593025
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
34 lines
1.3 KiB
JavaScript
34 lines
1.3 KiB
JavaScript
// components/Select.js
|
|
import { Tag, For } from "sigpro";
|
|
|
|
export const Select = (props, children) => {
|
|
children === undefined && (children = props, props = {});
|
|
return Tag("select", { ...props, class: `select ${props.class ?? ''}` }, children);
|
|
};
|
|
|
|
export const SelectItems = (props) => {
|
|
const placeholderOption = props.placeholder
|
|
? Tag("option", { disabled: props.placeholderDisabled ?? true, selected: true }, props.placeholder)
|
|
: null;
|
|
|
|
const dynamicOptions = For(
|
|
() => [...(typeof props.items === "function" ? props.items() : props.items || [])],
|
|
(item) => {
|
|
const val = typeof item === "string" ? item : item.value;
|
|
const label = typeof item === "string" ? item : item.label;
|
|
return Tag("option", { value: val }, label);
|
|
},
|
|
props.keyFn || ((item) => (typeof item === "string" ? item : item.value))
|
|
);
|
|
|
|
return placeholderOption ? [placeholderOption, dynamicOptions] : dynamicOptions;
|
|
};
|
|
|
|
export const SelectLabel = (props, children) => Tag("label", { class: `${props.float ? 'floating-label' : 'select'}` },
|
|
[
|
|
Tag("span", { class: props.float ? '' : 'label opacity-50' }, props.label),
|
|
props.left ?? null,
|
|
Tag("select", { ...props, class: `${props.float ? 'select' : ''} ${props.class ?? ''}` }, children),
|
|
props.right ?? null
|
|
]
|
|
); |