Brunobkr/llama.cpp_AlgMor24_github

1import { attachRef } from "svelte-toolbelt";2import { Context } from "runed";3import { createBitsAttrs } from "../../internal/attrs.js";4import { getElemDirection } from "../../internal/locale.js";5import { kbd } from "../../internal/kbd.js";6import { getDirectionalKeys } from "../../internal/get-directional-keys.js";7import { useId } from "../../shared/index.js";8const paginationAttrs = createBitsAttrs({9    component: "pagination",10    parts: ["root", "page", "prev", "next"],11});12const PaginationRootContext = new Context("Pagination.Root");13export class PaginationRootState {14    static create(opts) {15        return PaginationRootContext.set(new PaginationRootState(opts));16    }17    opts;18    attachment;19    totalPages = $derived.by(() => {20        if (this.opts.count.current === 0)21            return 1;22        return Math.ceil(this.opts.count.current / this.opts.perPage.current);23    });24    range = $derived.by(() => {25        const start = (this.opts.page.current - 1) * this.opts.perPage.current;26        const end = Math.min(start + this.opts.perPage.current, this.opts.count.current);27        return { start: start + 1, end };28    });29    pages = $derived.by(() => getPageItems({30        page: this.opts.page.current,31        totalPages: this.totalPages,32        siblingCount: this.opts.siblingCount.current,33    }));34    hasPrevPage = $derived.by(() => this.opts.page.current > 1);35    hasNextPage = $derived.by(() => this.opts.page.current < this.totalPages);36    constructor(opts) {37        this.opts = opts;38        this.attachment = attachRef(this.opts.ref);39    }40    setPage(page) {41        this.opts.page.current = page;42    }43    getPageTriggerNodes() {44        const node = this.opts.ref.current;45        if (!node)46            return [];47        return Array.from(node.querySelectorAll("[data-pagination-page]"));48    }49    getButtonNode(type) {50        const node = this.opts.ref.current;51        if (!node)52            return;53        return node.querySelector(paginationAttrs.selector(type));54    }55    prevPage() {56        this.opts.page.current = Math.max(this.opts.page.current - 1, 1);57    }58    nextPage() {59        this.opts.page.current = Math.min(this.opts.page.current + 1, this.totalPages);60    }61    snippetProps = $derived.by(() => ({62        pages: this.pages,63        range: this.range,64        currentPage: this.opts.page.current,65    }));66    props = $derived.by(() => ({67        id: this.opts.id.current,68        "data-orientation": this.opts.orientation.current,69        [paginationAttrs.root]: "",70        ...this.attachment,71    }));72}73export class PaginationPageState {74    static create(opts) {75        return new PaginationPageState(opts, PaginationRootContext.get());76    }77    opts;78    root;79    attachment;80    #isSelected = $derived.by(() => this.opts.page.current.value === this.root.opts.page.current);81    constructor(opts, root) {82        this.opts = opts;83        this.root = root;84        this.attachment = attachRef(this.opts.ref);85        this.onclick = this.onclick.bind(this);86        this.onkeydown = this.onkeydown.bind(this);87    }88    onclick(e) {89        if (this.opts.disabled.current)90            return;91        if (e.button !== 0)92            return;93        this.root.setPage(this.opts.page.current.value);94    }95    onkeydown(e) {96        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {97            e.preventDefault();98            this.root.setPage(this.opts.page.current.value);99        }100        else {101            handleTriggerKeydown(e, this.opts.ref.current, this.root);102        }103    }104    props = $derived.by(() => ({105        id: this.opts.id.current,106        "aria-label": `Page ${this.opts.page.current.value}`,107        "data-value": `${this.opts.page.current.value}`,108        "data-selected": this.#isSelected ? "" : undefined,109        [paginationAttrs.page]: "",110        //111        onclick: this.onclick,112        onkeydown: this.onkeydown,113        ...this.attachment,114    }));115}116export class PaginationButtonState {117    static create(opts) {118        return new PaginationButtonState(opts, PaginationRootContext.get());119    }120    opts;121    root;122    attachment;123    constructor(opts, root) {124        this.opts = opts;125        this.root = root;126        this.attachment = attachRef(this.opts.ref);127        this.onclick = this.onclick.bind(this);128        this.onkeydown = this.onkeydown.bind(this);129    }130    #action() {131        this.opts.type === "prev" ? this.root.prevPage() : this.root.nextPage();132    }133    #isDisabled = $derived.by(() => {134        if (this.opts.disabled.current)135            return true;136        if (this.opts.type === "prev")137            return !this.root.hasPrevPage;138        if (this.opts.type === "next")139            return !this.root.hasNextPage;140        return false;141    });142    onclick(e) {143        if (this.opts.disabled.current)144            return;145        if (e.button !== 0)146            return;147        this.#action();148    }149    onkeydown(e) {150        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {151            e.preventDefault();152            this.#action();153        }154        else {155            handleTriggerKeydown(e, this.opts.ref.current, this.root);156        }157    }158    props = $derived.by(() => ({159        id: this.opts.id.current,160        [paginationAttrs[this.opts.type]]: "",161        disabled: this.#isDisabled,162        //163        onclick: this.onclick,164        onkeydown: this.onkeydown,165        ...this.attachment,166    }));167}168//169// HELPERS170//171/**172 * Shared logic for handling keyboard navigation on173 * pagination page triggers and prev/next buttons.174 *175 *176 * @param e - KeyboardEvent177 * @param node - The HTMLElement that triggered the event.178 * @param root - The root pagination state instance179 */180function handleTriggerKeydown(e, node, root) {181    if (!node || !root.opts.ref.current)182        return;183    const items = root.getPageTriggerNodes();184    const nextButton = root.getButtonNode("next");185    const prevButton = root.getButtonNode("prev");186    if (prevButton) {187        items.unshift(prevButton);188    }189    if (nextButton) {190        items.push(nextButton);191    }192    const currentIndex = items.indexOf(node);193    const dir = getElemDirection(root.opts.ref.current);194    const { nextKey, prevKey } = getDirectionalKeys(dir, root.opts.orientation.current);195    const loop = root.opts.loop.current;196    const keyToIndex = {197        [nextKey]: currentIndex + 1,198        [prevKey]: currentIndex - 1,199        [kbd.HOME]: 0,200        [kbd.END]: items.length - 1,201    };202    let itemIndex = keyToIndex[e.key];203    if (itemIndex === undefined)204        return;205    e.preventDefault();206    if (itemIndex < 0 && loop) {207        itemIndex = items.length - 1;208    }209    else if (itemIndex === items.length && loop) {210        itemIndex = 0;211    }212    const itemToFocus = items[itemIndex];213    if (!itemToFocus)214        return;215    itemToFocus.focus();216}217/**218 * Returns an array of page items used to render out the219 * pagination page triggers.220 *221 * Credit: https://github.com/melt-ui/melt-ui222 */223function getPageItems({ page = 1, totalPages, siblingCount = 1 }) {224    const pageItems = [];225    const pagesToShow = new Set([1, totalPages]);226    const firstItemWithSiblings = 3 + siblingCount;227    const lastItemWithSiblings = totalPages - 2 - siblingCount;228    if (firstItemWithSiblings > lastItemWithSiblings) {229        for (let i = 2; i <= totalPages - 1; i++) {230            pagesToShow.add(i);231        }232    }233    else if (page < firstItemWithSiblings) {234        for (let i = 2; i <= Math.min(firstItemWithSiblings, totalPages); i++) {235            pagesToShow.add(i);236        }237    }238    else if (page > lastItemWithSiblings) {239        for (let i = totalPages - 1; i >= Math.max(lastItemWithSiblings, 2); i--) {240            pagesToShow.add(i);241        }242    }243    else {244        for (let i = Math.max(page - siblingCount, 2); i <= Math.min(page + siblingCount, totalPages); i++) {245            pagesToShow.add(i);246        }247    }248    function addPage(value) {249        pageItems.push({ type: "page", value, key: `page-${value}` });250    }251    function addEllipsis() {252        const id = useId();253        pageItems.push({ type: "ellipsis", key: `ellipsis-${id}` });254    }255    let lastNumber = 0;256    for (const p of Array.from(pagesToShow).sort((a, b) => a - b)) {257        if (p - lastNumber > 1) {258            addEllipsis();259        }260        addPage(p);261        lastNumber = p;262    }263    return pageItems;264}265