Brunobkr/llama.cpp_AlgMor24_github

1import { attachRef, DOMContext, } from "svelte-toolbelt";2import { Context } from "runed";3import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef } from "../../internal/attrs.js";4import { kbd } from "../../internal/kbd.js";5const ratingGroupAttrs = createBitsAttrs({6    component: "rating-group",7    parts: ["root", "item"],8});9const RatingGroupRootContext = new Context("RatingGroup.Root");10export class RatingGroupRootState {11    static create(opts) {12        return RatingGroupRootContext.set(new RatingGroupRootState(opts));13    }14    opts;15    attachment;16    #hoverValue = $state(null);17    #keySequence = $state("");18    #keySequenceTimeout = null;19    domContext;20    hasValue = $derived.by(() => this.opts.value.current > 0);21    valueToUse = $derived.by(() => this.#hoverValue ?? this.opts.value.current);22    isRTL = $derived.by(() => {23        const element = this.opts.ref.current;24        if (!element)25            return false;26        const style = getComputedStyle(element);27        return style.direction === "rtl";28    });29    ariaValuetext = $derived.by(() => {30        return typeof this.opts.ariaValuetext.current === "function"31            ? this.opts.ariaValuetext.current(this.opts.value.current, this.opts.max.current)32            : this.opts.ariaValuetext.current;33    });34    items = $derived.by(() => {35        const value = this.valueToUse;36        return Array.from({ length: this.opts.max.current }, (_, i) => {37            const itemValue = i + 1;38            const halfValue = itemValue - 0.5;39            const state = value >= itemValue40                ? "active"41                : this.opts.allowHalf.current && value >= halfValue42                    ? "partial"43                    : "inactive";44            return { index: i, state };45        });46    });47    constructor(opts) {48        this.opts = opts;49        this.attachment = attachRef(opts.ref);50        this.onkeydown = this.onkeydown.bind(this);51        this.onpointerleave = this.onpointerleave.bind(this);52        this.domContext = new DOMContext(this.opts.ref);53    }54    isActive(itemIndex) {55        return this.valueToUse >= itemIndex + 1;56    }57    isPartial(itemIndex) {58        if (!this.opts.allowHalf.current)59            return false;60        const itemValue = itemIndex + 1;61        return this.valueToUse >= itemValue - 0.5 && this.valueToUse < itemValue;62    }63    setHoverValue(value) {64        if (this.opts.readonly.current ||65            this.opts.disabled.current ||66            !this.opts.hoverPreview.current)67            return;68        this.#hoverValue =69            value === null70                ? null71                : Math.max(this.opts.min.current, Math.min(this.opts.max.current, value));72    }73    setValue(value) {74        if (this.opts.readonly.current || this.opts.disabled.current)75            return;76        this.opts.value.current = Math.max(this.opts.min.current, Math.min(this.opts.max.current, value));77    }78    calculateRatingFromPointer(itemIndex, event) {79        const ratingValue = itemIndex + 1;80        if (!this.opts.allowHalf.current)81            return ratingValue;82        const rect = event.currentTarget.getBoundingClientRect();83        const style = getComputedStyle(event.currentTarget);84        const isHorizontal = this.opts.orientation.current === "horizontal";85        const position = isHorizontal86            ? (event.clientX - rect.left) / rect.width87            : (event.clientY - rect.top) / rect.height;88        const normalizedPosition = style.direction === "rtl" ? 1 - position : position;89        return normalizedPosition < 0.5 ? ratingValue - 0.5 : ratingValue;90    }91    onpointerleave() {92        this.setHoverValue(null);93    }94    handlers = {95        [kbd.ARROW_UP]: () => {96            this.setHoverValue(null);97            this.#adjustValue(this.opts.allowHalf.current ? 0.5 : 1);98        },99        [kbd.ARROW_RIGHT]: () => {100            this.setHoverValue(null);101            const increment = this.opts.allowHalf.current ? 0.5 : 1;102            // in RTL mode, right arrow should decrement103            this.#adjustValue(this.isRTL ? -increment : increment);104        },105        [kbd.ARROW_DOWN]: () => {106            this.setHoverValue(null);107            this.#adjustValue(this.opts.allowHalf.current ? -0.5 : -1);108        },109        [kbd.ARROW_LEFT]: () => {110            this.setHoverValue(null);111            const increment = this.opts.allowHalf.current ? 0.5 : 1;112            // in RTL mode, left arrow should increment113            this.#adjustValue(this.isRTL ? increment : -increment);114        },115        [kbd.HOME]: () => {116            this.setHoverValue(null);117            this.setValue(this.opts.min.current);118        },119        [kbd.END]: () => {120            this.setHoverValue(null);121            this.setValue(this.opts.max.current);122        },123        [kbd.PAGE_UP]: () => {124            this.setHoverValue(null);125            this.#adjustValue(1);126        },127        [kbd.PAGE_DOWN]: () => {128            this.setHoverValue(null);129            this.#adjustValue(-1);130        },131    };132    onkeydown(e) {133        if (this.opts.disabled.current || this.opts.readonly.current)134            return;135        if (this.handlers[e.key]) {136            e.preventDefault();137            this.#clearKeySequence();138            this.handlers[e.key]?.();139            return;140        }141        if (this.opts.allowHalf.current && this.#handleDecimalInput(e))142            return;143        // handle direct number input144        const num = parseInt(e.key || "");145        if (!isNaN(num) && e.key) {146            e.preventDefault();147            if (num >= this.opts.min.current && num <= this.opts.max.current) {148                this.setValue(num);149                if (this.opts.allowHalf.current) {150                    this.#startDecimalListening(num);151                }152            }153            return;154        }155        this.#clearKeySequence();156    }157    #adjustValue(delta) {158        this.setValue(this.opts.value.current + delta);159    }160    #handleDecimalInput(e) {161        if (!e.key)162            return false;163        if (e.key === ".") {164            e.preventDefault();165            this.#keySequence += e.key;166            return true;167        }168        if (e.key === "5" && this.#keySequence.match(/^\d+\.$/)) {169            e.preventDefault();170            this.#keySequence += e.key;171            const match = this.#keySequence.match(/^(\d+)\.5$/);172            if (match?.[1]) {173                const value = parseFloat(this.#keySequence);174                if (value >= this.opts.min.current && value <= this.opts.max.current) {175                    this.setValue(value);176                    this.#clearKeySequence();177                }178            }179            return true;180        }181        return false;182    }183    #startDecimalListening(baseValue) {184        this.#keySequence = baseValue.toString();185        if (this.#keySequenceTimeout) {186            this.domContext.clearTimeout(this.#keySequenceTimeout);187        }188        this.#keySequenceTimeout = this.domContext.setTimeout(() => this.#clearKeySequence(), 1000);189    }190    #clearKeySequence() {191        this.#keySequence = "";192        if (this.#keySequenceTimeout) {193            this.domContext.clearTimeout(this.#keySequenceTimeout);194            this.#keySequenceTimeout = null;195        }196    }197    snippetProps = $derived.by(() => ({198        items: this.items,199        value: this.opts.value.current,200        max: this.opts.max.current,201    }));202    props = $derived.by(() => {203        return {204            id: this.opts.id.current,205            role: "slider",206            "aria-valuenow": this.opts.value.current,207            "aria-valuemin": this.opts.min.current,208            "aria-valuemax": this.opts.max.current,209            "aria-valuetext": this.ariaValuetext,210            "aria-orientation": this.opts.orientation.current,211            "aria-required": boolToStr(this.opts.required.current),212            "aria-disabled": this.opts.disabled.current ? "true" : undefined,213            "aria-label": "Rating",214            "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),215            "data-readonly": this.opts.readonly.current ? "" : undefined,216            "data-orientation": this.opts.orientation.current,217            tabindex: this.opts.disabled.current ? -1 : 0,218            [ratingGroupAttrs.root]: "",219            onkeydown: this.onkeydown,220            onpointerleave: this.onpointerleave,221            ...this.attachment,222        };223    });224}225export class RatingGroupItemState {226    static create(opts) {227        return new RatingGroupItemState(opts, RatingGroupRootContext.get());228    }229    opts;230    root;231    attachment;232    #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);233    #isActive = $derived.by(() => this.root.isActive(this.opts.index.current));234    #isPartial = $derived.by(() => this.root.isPartial(this.opts.index.current));235    #state = $derived.by(() => {236        if (this.#isActive)237            return "active";238        if (this.#isPartial)239            return "partial";240        return "inactive";241    });242    constructor(opts, root) {243        this.opts = opts;244        this.root = root;245        this.attachment = attachRef(opts.ref);246        this.onclick = this.onclick.bind(this);247        this.onpointermove = this.onpointermove.bind(this);248    }249    onclick(e) {250        if (this.#isDisabled || this.root.opts.readonly.current)251            return;252        // handle clearing when clicking on first item (index 0) that's already253        // active and min is 0254        if (this.opts.index.current === 0 &&255            this.root.opts.min.current === 0 &&256            this.root.opts.value.current > 0) {257            const newValue = this.root.calculateRatingFromPointer(this.opts.index.current, e);258            const currentValue = this.root.opts.value.current;259            // only clear if the calculated rating exactly matches current value260            if (newValue === currentValue) {261                this.root.setValue(0);262                if (this.root.opts.ref.current) {263                    this.root.opts.ref.current.focus();264                }265                return;266            }267        }268        const newValue = this.root.calculateRatingFromPointer(this.opts.index.current, e);269        this.root.setValue(newValue);270        if (this.root.opts.ref.current) {271            this.root.opts.ref.current.focus();272        }273    }274    onpointermove(e) {275        if (this.#isDisabled ||276            this.root.opts.readonly.current ||277            !this.root.opts.hoverPreview.current)278            return;279        // skip hover preview for touch devices280        if (e.pointerType === "touch")281            return;282        const hoverValue = this.root.calculateRatingFromPointer(this.opts.index.current, e);283        this.root.setHoverValue(hoverValue);284    }285    snippetProps = $derived.by(() => {286        return {287            state: this.#state,288        };289    });290    props = $derived.by(() => ({291        id: this.opts.id.current,292        role: "presentation",293        "data-value": this.opts.index.current + 1,294        "data-orientation": this.root.opts.orientation.current,295        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),296        "data-readonly": this.root.opts.readonly.current ? "" : undefined,297        "data-state": this.#state,298        [ratingGroupAttrs.item]: "",299        //300        onclick: this.onclick,301        onpointermove: this.onpointermove,302        ...this.attachment,303    }));304}305export class RatingGroupHiddenInputState {306    static create() {307        return new RatingGroupHiddenInputState(RatingGroupRootContext.get());308    }309    root;310    shouldRender = $derived.by(() => this.root.opts.name.current !== undefined);311    props = $derived.by(() => ({312        name: this.root.opts.name.current,313        value: this.root.opts.value.current,314        required: this.root.opts.required.current,315        disabled: this.root.opts.disabled.current,316    }));317    constructor(root) {318        this.root = root;319    }320}321