Brunobkr/llama.cpp_AlgMor24_github

1import { attachRef, } from "svelte-toolbelt";2import { Context } from "runed";3import { createBitsAttrs, getAriaChecked, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, } from "../../internal/attrs.js";4import { kbd } from "../../internal/kbd.js";5import { RovingFocusGroup } from "../../internal/roving-focus-group.js";6export const toolbarAttrs = createBitsAttrs({7    component: "toolbar",8    parts: ["root", "item", "group", "group-item", "link", "button"],9});10const ToolbarRootContext = new Context("Toolbar.Root");11const ToolbarGroupContext = new Context("Toolbar.Group");12export class ToolbarRootState {13    static create(opts) {14        return ToolbarRootContext.set(new ToolbarRootState(opts));15    }16    opts;17    rovingFocusGroup;18    attachment;19    constructor(opts) {20        this.opts = opts;21        this.attachment = attachRef(this.opts.ref);22        this.rovingFocusGroup = new RovingFocusGroup({23            orientation: this.opts.orientation,24            loop: this.opts.loop,25            rootNode: this.opts.ref,26            candidateAttr: toolbarAttrs.item,27        });28    }29    props = $derived.by(() => ({30        id: this.opts.id.current,31        role: "toolbar",32        "data-orientation": this.opts.orientation.current,33        [toolbarAttrs.root]: "",34        ...this.attachment,35    }));36}37class ToolbarGroupBaseState {38    opts;39    root;40    attachment;41    constructor(opts, root) {42        this.opts = opts;43        this.root = root;44        this.attachment = attachRef(this.opts.ref);45    }46    props = $derived.by(() => ({47        id: this.opts.id.current,48        [toolbarAttrs.group]: "",49        role: "group",50        "data-orientation": this.root.opts.orientation.current,51        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),52        ...this.attachment,53    }));54}55class ToolbarGroupSingleState extends ToolbarGroupBaseState {56    opts;57    root;58    isMulti = false;59    anyPressed = $derived.by(() => this.opts.value.current !== "");60    constructor(opts, root) {61        super(opts, root);62        this.opts = opts;63        this.root = root;64    }65    includesItem(item) {66        return this.opts.value.current === item;67    }68    toggleItem(item) {69        if (this.includesItem(item)) {70            this.opts.value.current = "";71        }72        else {73            this.opts.value.current = item;74        }75    }76}77class ToolbarGroupMultipleState extends ToolbarGroupBaseState {78    opts;79    root;80    isMulti = true;81    anyPressed = $derived.by(() => this.opts.value.current.length > 0);82    constructor(opts, root) {83        super(opts, root);84        this.opts = opts;85        this.root = root;86    }87    includesItem(item) {88        return this.opts.value.current.includes(item);89    }90    toggleItem(item) {91        if (this.includesItem(item)) {92            this.opts.value.current = this.opts.value.current.filter((v) => v !== item);93        }94        else {95            this.opts.value.current = [...this.opts.value.current, item];96        }97    }98}99export class ToolbarGroupState {100    static create(opts) {101        const { type, ...rest } = opts;102        const rootState = ToolbarRootContext.get();103        const groupState = type === "single"104            ? new ToolbarGroupSingleState(rest, rootState)105            : new ToolbarGroupMultipleState(rest, rootState);106        return ToolbarGroupContext.set(groupState);107    }108}109export class ToolbarGroupItemState {110    static create(opts) {111        const group = ToolbarGroupContext.get();112        return new ToolbarGroupItemState(opts, group, group.root);113    }114    opts;115    group;116    root;117    attachment;118    #isDisabled = $derived.by(() => this.opts.disabled.current || this.group.opts.disabled.current);119    constructor(opts, group, root) {120        this.opts = opts;121        this.group = group;122        this.root = root;123        this.attachment = attachRef(this.opts.ref);124        $effect(() => {125            this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);126        });127        this.onclick = this.onclick.bind(this);128        this.onkeydown = this.onkeydown.bind(this);129    }130    #toggleItem() {131        if (this.#isDisabled)132            return;133        this.group.toggleItem(this.opts.value.current);134    }135    onclick(_) {136        if (this.#isDisabled)137            return;138        this.#toggleItem();139    }140    onkeydown(e) {141        if (this.#isDisabled)142            return;143        if (e.key === kbd.ENTER || e.key === kbd.SPACE) {144            e.preventDefault();145            this.#toggleItem();146            return;147        }148        this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);149    }150    isPressed = $derived.by(() => this.group.includesItem(this.opts.value.current));151    #ariaChecked = $derived.by(() => {152        return this.group.isMulti ? undefined : getAriaChecked(this.isPressed, false);153    });154    #ariaPressed = $derived.by(() => {155        return this.group.isMulti ? boolToStr(this.isPressed) : undefined;156    });157    #tabIndex = $state(0);158    props = $derived.by(() => ({159        id: this.opts.id.current,160        role: this.group.isMulti ? undefined : "radio",161        tabindex: this.#tabIndex,162        "data-orientation": this.root.opts.orientation.current,163        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),164        "data-state": getToggleItemDataState(this.isPressed),165        "data-value": this.opts.value.current,166        "aria-pressed": this.#ariaPressed,167        "aria-checked": this.#ariaChecked,168        [toolbarAttrs.item]: "",169        [toolbarAttrs["group-item"]]: "",170        disabled: boolToTrueOrUndef(this.#isDisabled),171        //172        onclick: this.onclick,173        onkeydown: this.onkeydown,174        ...this.attachment,175    }));176}177export class ToolbarLinkState {178    static create(opts) {179        return new ToolbarLinkState(opts, ToolbarRootContext.get());180    }181    opts;182    root;183    attachment;184    constructor(opts, root) {185        this.opts = opts;186        this.root = root;187        this.attachment = attachRef(this.opts.ref);188        $effect(() => {189            this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);190        });191        this.onkeydown = this.onkeydown.bind(this);192    }193    onkeydown(e) {194        this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);195    }196    #role = $derived.by(() => {197        if (!this.opts.ref.current)198            return undefined;199        const tagName = this.opts.ref.current.tagName;200        if (tagName !== "A")201            return "link";202        return undefined;203    });204    #tabIndex = $state(0);205    props = $derived.by(() => ({206        id: this.opts.id.current,207        [toolbarAttrs.link]: "",208        [toolbarAttrs.item]: "",209        role: this.#role,210        tabindex: this.#tabIndex,211        "data-orientation": this.root.opts.orientation.current,212        //213        onkeydown: this.onkeydown,214        ...this.attachment,215    }));216}217export class ToolbarButtonState {218    static create(opts) {219        return new ToolbarButtonState(opts, ToolbarRootContext.get());220    }221    opts;222    root;223    attachment;224    constructor(opts, root) {225        this.opts = opts;226        this.root = root;227        this.attachment = attachRef(this.opts.ref);228        $effect(() => {229            this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);230        });231        this.onkeydown = this.onkeydown.bind(this);232    }233    onkeydown(e) {234        this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);235    }236    #tabIndex = $state(0);237    #role = $derived.by(() => {238        if (!this.opts.ref.current)239            return undefined;240        const tagName = this.opts.ref.current.tagName;241        if (tagName !== "BUTTON")242            return "button";243        return undefined;244    });245    props = $derived.by(() => ({246        id: this.opts.id.current,247        [toolbarAttrs.item]: "",248        [toolbarAttrs.button]: "",249        role: this.#role,250        tabindex: this.#tabIndex,251        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),252        "data-orientation": this.root.opts.orientation.current,253        disabled: boolToTrueOrUndef(this.opts.disabled.current),254        //255        onkeydown: this.onkeydown,256        ...this.attachment,257    }));258}259//260// HELPERS261//262function getToggleItemDataState(condition) {263    return condition ? "on" : "off";264}265