natxocc
59e6d972a8
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
// components/Radio.js
|
|
import { h } from "sigpro";
|
|
import { val, ui } from "../utils.js";
|
|
|
|
/**
|
|
* Radio component
|
|
*
|
|
* daisyUI classes used:
|
|
* - radio, radio-primary, radio-secondary, radio-accent
|
|
* - radio-info, radio-success, radio-warning, radio-error
|
|
* - radio-xs, radio-sm, radio-md, radio-lg
|
|
* - label, label-text, cursor-pointer, justify-start, gap-3
|
|
* - tooltip, tooltip-top, tooltip-bottom, tooltip-left, tooltip-right
|
|
*/
|
|
export const Radio = (props) => {
|
|
const { class: className, label, tooltip, value, inputValue, name, ...rest } = props;
|
|
|
|
const radioEl = h("input", {
|
|
...rest,
|
|
type: "radio",
|
|
name: name,
|
|
class: ui('radio', className),
|
|
checked: () => val(value) === inputValue,
|
|
onclick: () => {
|
|
if (typeof value === "function") value(inputValue);
|
|
},
|
|
});
|
|
|
|
if (!label && !tooltip) return radioEl;
|
|
|
|
const layout = h("label", { class: "label cursor-pointer justify-start gap-3" }, [
|
|
radioEl,
|
|
label ? h("span", { class: "label-text" }, label) : null,
|
|
]);
|
|
|
|
return tooltip ? h("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
|
|
}; |