Brunobkr/llama.cpp_AlgMor24_github

1import { SvelteMap } from "svelte/reactivity";2import { attachRef } from "svelte-toolbelt";3import { Context, watch } from "runed";4import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, } from "../../internal/attrs.js";5import { kbd } from "../../internal/kbd.js";6import { RovingFocusGroup } from "../../internal/roving-focus-group.js";7const tabsAttrs = createBitsAttrs({8    component: "tabs",9    parts: ["root", "list", "trigger", "content"],10});11const TabsRootContext = new Context("Tabs.Root");12export class TabsRootState {13    static create(opts) {14        return TabsRootContext.set(new TabsRootState(opts));15    }16    opts;17    attachment;18    rovingFocusGroup;19    triggerIds = $state([]);20    // holds the trigger ID for each value to associate it with the content21    valueToTriggerId = new SvelteMap();22    // holds the content ID for each value to associate it with the trigger23    valueToContentId = new SvelteMap();24    constructor(opts) {25        this.opts = opts;26        this.attachment = attachRef(opts.ref);27        this.rovingFocusGroup = new RovingFocusGroup({28            candidateAttr: tabsAttrs.trigger,29            rootNode: this.opts.ref,30            loop: this.opts.loop,31            orientation: this.opts.orientation,32        });33    }34    registerTrigger(id, value) {35        this.triggerIds.push(id);36        this.valueToTriggerId.set(value, id);37        // returns the deregister function38        return () => {39            this.triggerIds = this.triggerIds.filter((triggerId) => triggerId !== id);40            this.valueToTriggerId.delete(value);41        };42    }43    registerContent(id, value) {44        this.valueToContentId.set(value, id);45        // returns the deregister function46        return () => {47            this.valueToContentId.delete(value);48        };49    }50    setValue(v) {51        this.opts.value.current = v;52    }53    props = $derived.by(() => ({54        id: this.opts.id.current,55        "data-orientation": this.opts.orientation.current,56        [tabsAttrs.root]: "",57        ...this.attachment,58    }));59}60export class TabsListState {61    static create(opts) {62        return new TabsListState(opts, TabsRootContext.get());63    }64    opts;65    root;66    attachment;67    #isDisabled = $derived.by(() => this.root.opts.disabled.current);68    constructor(opts, root) {69        this.opts = opts;70        this.root = root;71        this.attachment = attachRef(opts.ref);72    }73    props = $derived.by(() => ({74        id: this.opts.id.current,75        role: "tablist",76        "aria-orientation": this.root.opts.orientation.current,77        "data-orientation": this.root.opts.orientation.current,78        [tabsAttrs.list]: "",79        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),80        ...this.attachment,81    }));82}83export class TabsTriggerState {84    static create(opts) {85        return new TabsTriggerState(opts, TabsRootContext.get());86    }87    opts;88    root;89    attachment;90    #tabIndex = $state(0);91    #isActive = $derived.by(() => this.root.opts.value.current === this.opts.value.current);92    #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);93    #ariaControls = $derived.by(() => this.root.valueToContentId.get(this.opts.value.current));94    constructor(opts, root) {95        this.opts = opts;96        this.root = root;97        this.attachment = attachRef(opts.ref);98        watch([() => this.opts.id.current, () => this.opts.value.current], ([id, value]) => {99            return this.root.registerTrigger(id, value);100        });101        $effect(() => {102            this.root.triggerIds.length;103            if (this.#isActive || !this.root.opts.value.current) {104                this.#tabIndex = 0;105            }106            else {107                this.#tabIndex = -1;108            }109        });110        this.onfocus = this.onfocus.bind(this);111        this.onclick = this.onclick.bind(this);112        this.onkeydown = this.onkeydown.bind(this);113    }114    #activate() {115        if (this.root.opts.value.current === this.opts.value.current)116            return;117        this.root.setValue(this.opts.value.current);118    }119    onfocus(_) {120        if (this.root.opts.activationMode.current !== "automatic" || this.#isDisabled)121            return;122        this.#activate();123    }124    onclick(_) {125        if (this.#isDisabled)126            return;127        this.#activate();128    }129    onkeydown(e) {130        if (this.#isDisabled)131            return;132        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {133            e.preventDefault();134            this.#activate();135            return;136        }137        this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);138    }139    props = $derived.by(() => ({140        id: this.opts.id.current,141        role: "tab",142        "data-state": getTabDataState(this.#isActive),143        "data-value": this.opts.value.current,144        "data-orientation": this.root.opts.orientation.current,145        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),146        "aria-selected": boolToStr(this.#isActive),147        "aria-controls": this.#ariaControls,148        [tabsAttrs.trigger]: "",149        disabled: boolToTrueOrUndef(this.#isDisabled),150        tabindex: this.#tabIndex,151        //152        onclick: this.onclick,153        onfocus: this.onfocus,154        onkeydown: this.onkeydown,155        ...this.attachment,156    }));157}158export class TabsContentState {159    static create(opts) {160        return new TabsContentState(opts, TabsRootContext.get());161    }162    opts;163    root;164    attachment;165    #isActive = $derived.by(() => this.root.opts.value.current === this.opts.value.current);166    #ariaLabelledBy = $derived.by(() => this.root.valueToTriggerId.get(this.opts.value.current));167    constructor(opts, root) {168        this.opts = opts;169        this.root = root;170        this.attachment = attachRef(opts.ref);171        watch([() => this.opts.id.current, () => this.opts.value.current], ([id, value]) => {172            return this.root.registerContent(id, value);173        });174    }175    props = $derived.by(() => ({176        id: this.opts.id.current,177        role: "tabpanel",178        hidden: boolToTrueOrUndef(!this.#isActive),179        tabindex: 0,180        "data-value": this.opts.value.current,181        "data-state": getTabDataState(this.#isActive),182        "aria-labelledby": this.#ariaLabelledBy,183        "data-orientation": this.root.opts.orientation.current,184        [tabsAttrs.content]: "",185        ...this.attachment,186    }));187}188function getTabDataState(condition) {189    return condition ? "active" : "inactive";190}191