oberry/dist/index.d.mts

A lightweight and modern jQuery alternative for DOM manipulation, user interactions, and reactive data binding

import { computed, effect, effectScope, signal } from 'alien-signals';

type Ref<T> = {
    (): T;
    (value: T): void;
};

type classMode = 'add' | 'remove' | 'toggle';
declare class ElementWrapper {
    elements: HTMLElement[];
    constructor(elements: HTMLElement[] | NodeList);
    class(): string[];
    class(name: string): this;
    class(name: string, mode: classMode): this;
    id(): string | undefined;
    id(id: string): this;
    /**
     * Modify the style of all elements.
     */
    css(styles: Partial<CSSStyleDeclaration>): this;
    html(content: string): this;
    html(): string | undefined;
    text(content: string): this;
    text(): string | undefined;
    /**
     *  Get the array of elements.
     */
    getArray(): HTMLElement[];
    /**
     * Get or set elements values.
     */
    value(newValue: string): this;
    value(): string | undefined;
    /**
     * Append elements to all selected elements.
     */
    append(content: string): this;
    append(content: HTMLElement): this;
    append(content: ElementWrapper): this;
    /**
     * Prepend elements to all selected elements.
     */
    prepend(content: string): this;
    prepend(content: HTMLElement): this;
    prepend(content: ElementWrapper): this;
    /**
     * Insert elements after all selected elements.
     */
    after(content: string): this;
    after(content: HTMLElement): this;
    after(content: ElementWrapper): this;
    /**
     * Insert elements before all selected elements.
     */
    before(content: string): this;
    before(content: HTMLElement): this;
    before(content: ElementWrapper): this;
    /**
     * Remove all the elements from DOM.
     */
    remove(): this;
    /**
     * Find descendants matching the selector within all elements.
     */
    find(selector: string): ElementWrapper;
    /**
     * Find the closest ancestor matching the selector for the first element.
     */
    closest(selector: string): ElementWrapper | null;
    /**
     * Get the parent wrapper of the first element.
     */
    parent(): ElementWrapper | null;
    /**
     * Get the children wrapper of the first element.
     */
    children(): ElementWrapper | null;
    /**
     * Get the children wrapper of the all elements.
     */
    allChildren(): ElementWrapper | null;
    /**
     * Bind the value of a ref into the element's inner HTML.
     */
    bindHTML<T>(ref: Ref<T>): this;
    /**
     * Bind the value of a ref into the element's text content.
     */
    bind<T>(ref: Ref<T>): this;
    /**
     * Bind the input value of the first element into a ref value.
     */
    bindInput<T>(ref: Ref<T>): this;
    /**
     * Get or set elements attributes.
     */
    attr(key: string): string | null;
    attr(key: string, value: string): this;
    /**
     * Get or set data attributes.
     */
    data(key: string): string | undefined;
    data(key: string, value: string): this;
    private on;
    onClick(callback: (this: HTMLElement, ev: HTMLElementEventMap['click']) => void): this;
    onMouseOver(callback: (this: HTMLElement, ev: HTMLElementEventMap['mouseover']) => void): this;
    onMouseOut(callback: (this: HTMLElement, ev: HTMLElementEventMap['mouseout']) => void): this;
    onChange(callback: (this: HTMLElement, ev: HTMLElementEventMap['change']) => void): this;
    onInput(callback: (this: HTMLElement, ev: HTMLElementEventMap['input']) => void): this;
    onSubmit(callback: (this: HTMLElement, ev: HTMLElementEventMap['submit']) => void): this;
    onFocus(callback: (this: HTMLElement, ev: HTMLElementEventMap['focus']) => void): this;
    onBlur(callback: (this: HTMLElement, ev: HTMLElementEventMap['blur']) => void): this;
    onKeyDown(callback: (this: HTMLElement, ev: HTMLElementEventMap['keydown']) => void): this;
    onKeyUp(callback: (this: HTMLElement, ev: HTMLElementEventMap['keyup']) => void): this;
    onKeyPress(callback: (this: HTMLElement, ev: HTMLElementEventMap['keypress']) => void): this;
    onDblClick(callback: (this: HTMLElement, ev: HTMLElementEventMap['dblclick']) => void): this;
    onContextMenu(callback: (this: HTMLElement, ev: HTMLElementEventMap['contextmenu']) => void): this;
    onScroll(callback: (this: HTMLElement, ev: HTMLElementEventMap['scroll']) => void): this;
    onResize(callback: (this: HTMLElement, ev: HTMLElementEventMap['resize']) => void): this;
    onLoad(callback: (this: HTMLElement, ev: HTMLElementEventMap['load']) => void): this;
    onDrag(callback: (this: HTMLElement, ev: HTMLElementEventMap['drag']) => void): this;
    onDrop(callback: (this: HTMLElement, ev: HTMLElementEventMap['drop']) => void): this;
    /**
     * Get the elements at even positions (1-based indexing).
     */
    even(): ElementWrapper;
    /**
     * Get the elements at odd positions (1-based indexing).
     */
    odd(): ElementWrapper;
    /**
     * Hide all elements.
     */
    hide(): this;
    /**
     * Show all elements.
     */
    show(): this;
    /**
     * Toggle visibility of all elements.
     */
    toggle(): this;
    /**
     * Get the nth element (0-based indexing).
     */
    eq(idx: number): ElementWrapper;
    /**
     * Get the first element.
     */
    first(): ElementWrapper;
    /**
     * Get the last element.
     */
    last(): ElementWrapper;
    /**
     * Filter elements based on a predicate function or CSS selector.
     */
    filter(predicate: string | ((element: HTMLElement, index: number) => boolean)): ElementWrapper;
    forEach(callback: (el: ElementWrapper) => void): void;
    length(): number;
    isEmpty(): boolean;
    static extend(name: string, func: (...args: any[]) => any): void;
}

declare function $new(tag: string): ElementWrapper;

type ExtendFunction = (name: string, func: (this: ElementWrapper, ...args: any[]) => any) => void;
declare class Plugin {
    name: string;
    private install;
    constructor(name: string, install: (extend: ExtendFunction) => void);
    getInstaller(): ($: ExtendFunction) => void;
}
declare function use(plugin: Plugin): void;

declare const $ref: typeof signal;
declare const $computed: typeof computed;
declare const $effect: typeof effect;
declare const $effectScope: typeof effectScope;

/**
 * Select DOM elements using a CSS selector, HTMLElement, NodeList, or an Array of HTMLElements.
 */
declare function $(selector: string): ElementWrapper;
declare function $(selector: NodeList): ElementWrapper;
declare function $(selector: HTMLElement): ElementWrapper;
declare function $(selector: HTMLElement[]): ElementWrapper;

export { $, $computed, $effect, $effectScope, $new, $ref, ElementWrapper, Plugin, type Ref, use };