galhui/galhui.d.ts

UI library using galho framework

import { Component, Content, G, HSElement, HTMLTag, NotRender, One, Render } from "galho";
import { L } from "galho/orray.js";
import { Dic, Key, Task, bool, falsy, float, int, str } from "galho/util.js";
declare global {
    interface Settings {
        fileURI?: (name: string) => string;
        /**shortcuts */
        sc?: {
            edit?: str;
            remove?: str;
        };
        /**icon scale */
        is?: str;
        delay?: int;
        /**is mobile */
        mob?: bool;
        rem: float;
        /**outline form */
        oform?: bool;
    }
    interface Words {
        cancel?: str;
        confirm?: str;
        search?: str;
        yes?: str;
        no?: str;
        camera?: str;
        required?: str;
        invalidFmt?: str;
    }
    interface Icons {
        /**dropdown */
        dd: Icon;
        info: Icon;
        minus: Icon;
        close: Icon;
        cancel: Icon;
        search: Icon;
        upload: Icon;
        up: Icon;
        down: Icon;
    }
}
export type FormatType = "s" | "d" | "b" | "n";
/**@deprecated classes */
export declare const enum C {
    full = "full",
    disabled = "ds",
    message = "msg",
    buttons = "bs",
    heading = "heading",
    accordion = "ac",
    close = "cl",
    tab = "ta",
    link = "lk",
    loading = "ld",
    lever = "lv",
    container = "container",
    modalArea = "blank",
    modal = "modal",
    tree = "tree",
    table = "tb",
    grid = "grid",
    placeholder = "ph",
    select = "sel",
    checkbox = "cb",
    switch = "sw",
    group = "g",
    side = "sd",
    main = "ma",
    separator = "div",
    bordered = "brd",
    on = "on",
    current = "crt",
    inline = "inline",
    off = "off",
    extra = "extra",
    options = "opts",
    context = "context",
    mobile = "m"
}
export declare const icons: Partial<Icons>;
/**settings */
export declare const $: Settings;
/**words */
export declare const w: Partial<Words>;
export type Child = str | int | float | G<HSElement> | Render;
export declare function word(key: str): string;
export declare function sentence(format: str): void;
export declare const enum VAlign {
    top = "t",
    middle = "m",
    bottom = "b"
}
export type vAlign = "t" | "m" | "b";
export declare const enum HAlign {
    left = "l",
    center = "c",
    right = "r",
    justify = "j"
}
export type hAlign = "l" | "c" | "r" | "j";
export declare const enum OriOld {
    h = "h",
    v = "v"
}
export type Ori = "v" | "h";
export type Size = "xxl" | "xl" | "l" | "n" | "n" | "s" | "xs" | "xxs";
export type Color = "error" | "main" | "side" | "warn" | "accept";
export declare const body: () => G<HTMLElement>;
export declare const doc: () => G<any>;
/**selector for element that can gain focus*/
export declare const focusable = ":not(:disabled):is(a[href],button,input,textarea,select,[tabindex])";
export type Icon = {
    d: str;
    c?: str | Color;
} | str | G<SVGSVGElement> | falsy;
export declare function icon(dt: Icon, size?: Size): G<SVGSVGElement>;
export type Label = [icon: Icon, text: any] | One | str | false | "";
export declare const label: (v: Label, cls?: str) => G<HTMLElement>;
export type click = ((this: HTMLButtonElement, e: MouseEvent) => any) | falsy;
export type ButtonType = "submit" | "reset" | "button";
export declare function bt(text: any, click?: click, type?: ButtonType): G<HTMLButtonElement>;
export declare const link: (text: Child, href?: str) => G<HTMLAnchorElement>;
/** button with icon */
export declare function ibt(i: Icon, text: Child, click?: click, type?: ButtonType): G<HTMLButtonElement>;
export declare function positive(i: Icon, text: Child, click?: click, type?: ButtonType): G<HTMLButtonElement>;
export declare function negative(i: Icon, text: Child, click?: click, type?: ButtonType): G<HTMLButtonElement>;
/** link with icon */
export declare function ilink(i: Icon, text: Child, href?: str): G<HTMLAnchorElement>;
/**close button */
export declare function close(click?: click): G<HTMLButtonElement>;
/**cancel button */
export declare function cancel(click?: click): G<HTMLButtonElement>;
/**confirm button */
export declare function confirm(click?: click): G<HTMLButtonElement>;
export declare function buttons(...buttons: G[]): G<HTMLDivElement>;
export declare function img(src: str, cls?: str): G<HTMLImageElement>;
export declare function a(href: str, content: any, cls?: str): G<HTMLAnchorElement>;
export declare function hr(cls?: str): G<HTMLHRElement>;
export declare function logo(v: str | Icon): G<SVGSVGElement> | G<HTMLImageElement> | import("galho").M<SVGElement>;
/**
 * if vertical main axis is x
 * start/end means that start/end border will be used as ref(will remein inplace)
 */
type Tt = /*start*/ "s" | /*end*/ "e" | /*center*/ "c";
export type FluidAlign = Ori | `${Ori}${Tt}` | `${Ori}${Tt}${Tt}` | [Ori, Tt?, Tt?];
export interface FluidRect {
    x: float;
    y: float;
    right: float;
    bottom: float;
}
export declare function hoverBox(refRect: FluidRect, e: G, align: FluidAlign): void;
export interface Notify {
    style?: Color;
    close?: bool;
    v?: Tt;
    h?: Tt;
}
export declare function notify(content: any, { style, close: cl, v, h }: Notify): void;
export type MenuItems = Task<Array<G<HTMLTableRowElement> | HTMLTableRowElement | MenuItems>>;
export type Tr = One<HTMLTableRowElement>;
export type MenuContent = Content<(NotRender | Tr | (NotRender | Tr)[])[] | Tr>;
export declare function menu(items?: MenuContent): G<HTMLDivElement>;
/**menu item */
export declare function menuitem(i: Icon, text: any, action?: (e: MouseEvent) => any, side?: any, disabled?: bool): G<HTMLTableRowElement>;
/**checkbox */
export declare function menucb(checked: bool, text: any, toggle?: (this: G<HTMLInputElement>, checked: bool) => any, id?: str, disabled?: bool): G<HTMLTableRowElement>;
export declare function menuwait(callback?: WaitCB): G<HTMLTableRowElement>;
export declare const submenu: (i: Icon, text: any, items: MenuItems) => G<HTMLTableRowElement>;
export declare const menusep: () => G<HTMLTableRowElement>;
/** @deprecated */
export declare function menubar(...items: any): G<HTMLDivElement>;
export declare function containedBar(...items: any): G<HTMLElement>;
/** @deprecated */
export declare function right(): G<HTMLDivElement>;
export declare function mbitem(i: Icon, text: any, action?: (e: MouseEvent) => any): G<HTMLButtonElement>;
/**menubar separator */
export declare function mbsep(): G<HTMLHRElement>;
/**menubar checkbox */
export declare function barcb(checked: bool, text: any, toggle?: (this: G<HTMLInputElement>, checked: bool) => any, disabled?: bool): G<HTMLLabelElement>;
/**call back */
export type WaitCB = PromiseLike<any> | (() => Promise<any>);
/**wait type */
export declare const enum WaitType {
    inline = 0,
    out = 1
}
/**place holder */
export declare function ph(type?: WaitType): G<HTMLDivElement>;
export declare function waiter(element: G, cb: WaitCB): void;
export declare function wait(body?: WaitCB): G;
export declare function wait(type: WaitType, body?: WaitCB): G;
export declare function loading(sz?: string): G<HTMLDivElement>;
export declare function busy<T>(cb: () => Task<T>, sz?: Size, time?: int): G | T;
export declare function busy(container: G, cb: (close: () => void) => any, sz?: Size, time?: int): Promise<void>;
export declare const blobToBase64: (v: Blob) => Promise<string>;
export type TextInputTp = "text" | "email" | "url" | "tel";
export type InputTp = TextInputTp | "number" | "search" | "checkbox" | "radio" | "password";
export type Input = G<HTMLInputElement | HTMLTextAreaElement>;
export declare const input: (type: InputTp, name: str, ph?: str, input?: (e: Event) => any) => G<HTMLInputElement>;
export declare const textarea: (name: str, ph: str, input?: (text: str) => void) => G<HTMLTextAreaElement>;
export declare const checkbox: (label: any, input?: (checked: bool) => void, checked?: bool) => G<HTMLLabelElement>;
export declare function search(input?: (value: str) => any): G<HTMLDivElement>;
export interface iImgSelector {
    k?: str;
    accept?: str;
    /**placeholder */
    ph?: str;
    value?: Blob;
    w?: float;
    h?: float;
    loading?: bool;
}
export declare class ImgSelector extends Component<iImgSelector> {
    view(): G<HTMLSpanElement>;
}
export declare const submitImg: (url: str, value: Blob, img?: ImgSelector) => Promise<string>;
export declare const output: (...content: any[]) => G<HTMLSpanElement>;
export declare const keyVal: (key: any, val: any, c?: Color | falsy, tag?: HTMLTag) => G<HTMLElement | HTMLObjectElement | HTMLButtonElement | HTMLMeterElement | HTMLTextAreaElement | HTMLStyleElement | HTMLProgressElement | HTMLTableElement | HTMLEmbedElement | HTMLPreElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLMapElement | HTMLInputElement | HTMLSelectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMetaElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPictureElement | HTMLScriptElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>;
export declare const message: (c?: Color, data?: any) => G<HTMLDivElement>;
export declare const errorMessage: (data?: any) => G<HTMLDivElement>;
export type IModal = One<HTMLDialogElement>;
export type Modal = G<HTMLDialogElement>;
/**open modal
 * @returns modal container, to close modal only remove the modal container */
export declare function modal(hd: Label, bd?: any, actions?: (close: () => void, modal: G) => any, sz?: Size, blur?: boolean): Modal;
export declare function tabModal(initial: int, items: TabItem[], actions?: (close: () => void, modal: G) => any, sz?: string): G<HTMLDialogElement>;
export declare const showDialog: (e: Modal) => Modal;
/**modal with ok and cancel buttons */
export declare function mdOkCancel(body: any, sz?: Size, valid?: () => boolean): Promise<boolean>;
/**modal with yes/no buttons */
export declare function mdYN(body: any, sz?: Size, valid?: () => boolean): Promise<boolean>;
/**modal with ok */
export declare function mdOk(body: any, sz?: Size): Promise<void>;
/**md with error style and ok button */
export declare function mdError(body: any, sz?: Size): Promise<void>;
export declare function popup(refArea: () => FluidRect, div: G, align: FluidAlign): () => void;
/**context menu */
export declare function ctxmenu(e: MouseEvent, data: MenuItems, align?: FluidAlign): void;
export declare function tip<T extends HSElement>(root: One<T>, content: any, align?: FluidAlign): G<T>;
export interface iRoot extends iSelectBase {
    /**gain focus via tab key
     * @default true
    */
    tab?: bool;
}
export type Root = Component<iRoot, {
    open?: [bool];
}> & {
    value: Key;
};
export interface iSelectBase {
    open?: bool;
    /**if should have menu-down icon
     * @default true */
    icon?: bool;
    /**if should open when clicked
     * @default true */
    click?: bool;
    off?: bool;
}
export interface SelectBase<T extends iSelectBase = iSelectBase> extends Component<T, {
    open?: [bool];
}> {
}
/**create root, add handlers */
export declare function selectRoot(me: SelectBase, options: L, label: G, menu: G, setValue: (v: Key) => any, tag?: HTMLTag): G<HTMLElement>;
export interface iSingleSelectBase<T = Dic> extends iSelectBase {
    clear?: bool;
    /**placeholder */
    ph?: any;
    item?(v: T): any;
}
export interface SingleSelectBase<K = any, T = Dic> extends SelectBase<iSingleSelectBase<T>> {
    option(k: K): Task<Dic>;
    value: K;
}
export declare function setValue(me: SingleSelectBase, label: G): Promise<void>;
type MnItems = MenuContent | ((close: () => any) => G);
export declare const dropdown: (label: any, items: MnItems, align?: FluidAlign) => G<HTMLDivElement>;
export declare const idropdown: (label: any, items: MnItems, align?: FluidAlign) => G<HTMLDivElement>;
export type AccordionItem = [head: any, body: any];
export interface IAccordion {
    icon?: bool;
    single?: bool;
    def?: int;
}
export declare const hidden: (head: any, body: any, open?: bool) => G<HTMLDivElement>;
export declare function accordion(items: AccordionItem[], i?: IAccordion): G<HTMLDivElement>;
export type TabItem = [hd: Label, bd: any];
export declare function tab(initial: int, items: TabItem[]): G<HTMLDivElement>;
export type SShowItem = [src: str, title?: any, alt?: str];
export interface iSlideshow {
    click?: (src: str) => any;
}
export declare function slideshow(i: iSlideshow, items: SShowItem[], index?: number): G<HTMLDivElement>;
export declare const sshowModal: (src: str) => Modal;
export declare const sshowTitle: (main: str, info?: str) => (string | G<HTMLDivElement>)[];
export {};