bits-ui/dist/bits/switch/switch.svelte.js

The headless components for Svelte.

import { attachRef } from "svelte-toolbelt";
import { Context } from "runed";
import { getAriaChecked, getAriaRequired, getDataChecked, getDataDisabled, getDataRequired, getDisabled, createBitsAttrs, } from "../../internal/attrs.js";
import { kbd } from "../../internal/kbd.js";
const switchAttrs = createBitsAttrs({
    component: "switch",
    parts: ["root", "thumb"],
});
const SwitchRootContext = new Context("Switch.Root");
export class SwitchRootState {
    static create(opts) {
        return SwitchRootContext.set(new SwitchRootState(opts));
    }
    opts;
    attachment;
    constructor(opts) {
        this.opts = opts;
        this.attachment = attachRef(opts.ref);
        this.onkeydown = this.onkeydown.bind(this);
        this.onclick = this.onclick.bind(this);
    }
    #toggle() {
        this.opts.checked.current = !this.opts.checked.current;
    }
    onkeydown(e) {
        if (!(e.key === kbd.ENTER || e.key === kbd.SPACE) || this.opts.disabled.current)
            return;
        e.preventDefault();
        this.#toggle();
    }
    onclick(_) {
        if (this.opts.disabled.current)
            return;
        this.#toggle();
    }
    sharedProps = $derived.by(() => ({
        "data-disabled": getDataDisabled(this.opts.disabled.current),
        "data-state": getDataChecked(this.opts.checked.current),
        "data-required": getDataRequired(this.opts.required.current),
    }));
    snippetProps = $derived.by(() => ({
        checked: this.opts.checked.current,
    }));
    props = $derived.by(() => ({
        ...this.sharedProps,
        id: this.opts.id.current,
        role: "switch",
        disabled: getDisabled(this.opts.disabled.current),
        "aria-checked": getAriaChecked(this.opts.checked.current, false),
        "aria-required": getAriaRequired(this.opts.required.current),
        [switchAttrs.root]: "",
        //
        onclick: this.onclick,
        onkeydown: this.onkeydown,
        ...this.attachment,
    }));
}
export class SwitchInputState {
    static create() {
        return new SwitchInputState(SwitchRootContext.get());
    }
    root;
    shouldRender = $derived.by(() => this.root.opts.name.current !== undefined);
    constructor(root) {
        this.root = root;
    }
    props = $derived.by(() => ({
        type: "checkbox",
        name: this.root.opts.name.current,
        value: this.root.opts.value.current,
        checked: this.root.opts.checked.current,
        disabled: this.root.opts.disabled.current,
        required: this.root.opts.required.current,
    }));
}
export class SwitchThumbState {
    static create(opts) {
        return new SwitchThumbState(opts, SwitchRootContext.get());
    }
    opts;
    root;
    attachment;
    constructor(opts, root) {
        this.opts = opts;
        this.root = root;
        this.attachment = attachRef(opts.ref);
    }
    snippetProps = $derived.by(() => ({
        checked: this.root.opts.checked.current,
    }));
    props = $derived.by(() => ({
        ...this.root.sharedProps,
        id: this.opts.id.current,
        [switchAttrs.thumb]: "",
        ...this.attachment,
    }));
}