mats.bosson/PettyUI
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix Checkbox indeterminate state

Browse Source
This commit is contained in:
Mats Bosson 2026-03-29 07:23:19 +07:00
parent 3a84dfaac9
commit 041217ca33
2 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/core/src/components/checkbox/checkbox.tsx
View File

@ -1,5 +1,5 @@
import type { JSX } from "solid-js"; import type { JSX } from "solid-js";
import { splitProps } from "solid-js"; import { createEffect, splitProps } from "solid-js";
import { createControllableSignal } from "../../primitives/create-controllable-signal"; import { createControllableSignal } from "../../primitives/create-controllable-signal";
/** Represents all three states a checkbox can be in. */ /** Represents all three states a checkbox can be in. */
@ -37,18 +37,11 @@ export function Checkbox(props: CheckboxProps): JSX.Element {
"children", "children",
]); ]);
const [isChecked, setChecked] = createControllableSignal<CheckedState>( const [isChecked, setChecked] = createControllableSignal<CheckedState>({
local.onCheckedChange value: () => local.checked,
? { defaultValue: () => local.defaultChecked ?? false,
value: () => local.checked, onChange: local.onCheckedChange,
defaultValue: () => local.defaultChecked ?? false, });
onChange: local.onCheckedChange,
}
: {
value: () => local.checked,
defaultValue: () => local.defaultChecked ?? false,
},
);
const ariaChecked = (): boolean | "mixed" => { const ariaChecked = (): boolean | "mixed" => {
const c = isChecked(); const c = isChecked();
@ -87,7 +80,9 @@ export function Checkbox(props: CheckboxProps): JSX.Element {
value={local.value ?? "on"} value={local.value ?? "on"}
checked={isChecked() === true} checked={isChecked() === true}
ref={(el) => { ref={(el) => {
if (el) el.indeterminate = isChecked() === "indeterminate"; createEffect(() => {
el.indeterminate = isChecked() === "indeterminate";
});
}} }}
style={{ display: "none" }} style={{ display: "none" }}
/> />

2
packages/core/src/primitives/create-controllable-signal.ts
View File

@ -6,7 +6,7 @@ export interface CreateControllableSignalOptions<T> {
/** Default value used when uncontrolled. Only read once at creation time — not reactive after mount. */ /** Default value used when uncontrolled. Only read once at creation time — not reactive after mount. */
defaultValue: Accessor<T>; defaultValue: Accessor<T>;
/** Called whenever the value changes (both modes). */ /** Called whenever the value changes (both modes). */
onChange?: (value: T) => void; onChange?: ((value: T) => void) | undefined;
} }
/** /**