@abydahana/aksara-ui 0.1.0

package/dist/aksara.d.ts

@@ -0,0 +1,284 @@
+export interface ComponentOptions {
+    [key: string]: unknown;
+}
+export interface ModalOptions extends ComponentOptions {
+    backdrop?: boolean | "static" | string;
+    keyboard?: boolean | string;
+    focus?: boolean | string;
+    scrollLock?: boolean | string;
+    draggable?: boolean | string;
+}
+export interface DropdownOptions extends ComponentOptions {
+    menu?: string | HTMLElement;
+    target?: string | HTMLElement;
+    placement?: "top" | "bottom" | "start" | "end" | "auto" | string;
+    container?: string | HTMLElement;
+    offset?: number;
+    keyboard?: boolean;
+    closeOnSelect?: boolean;
+    closeOnOutside?: boolean;
+}
+export interface FloatingTextOptions extends ComponentOptions {
+    content?: string;
+    text?: string;
+    container?: string | HTMLElement;
+    html?: boolean;
+    placement?: "top" | "bottom" | "left" | "right" | "start" | "end" | "auto" | string;
+    trigger?: string;
+    offset?: number;
+    showDelay?: number;
+    hideDelay?: number;
+    keyboard?: boolean;
+}
+export type TooltipOptions = FloatingTextOptions;
+export type PopoverOptions = FloatingTextOptions;
+export interface AccordionOptions extends ComponentOptions {
+    parent?: boolean | string | HTMLElement;
+    collapsible?: boolean;
+    buttonSelector?: string;
+    duration?: number;
+}
+export interface TabsOptions extends ComponentOptions {
+    tabSelector?: string;
+    panelSelector?: string | null;
+    active?: string | HTMLElement | null;
+    activeIndex?: number;
+    keyboard?: boolean;
+    loop?: boolean;
+    orientation?: "horizontal" | "vertical" | string;
+}
+export interface ToastOptions extends ComponentOptions {
+    delay?: number;
+    autohide?: boolean;
+}
+export interface CarouselOptions extends ComponentOptions {
+    interval?: number;
+    autoplay?: boolean;
+    pauseOnHover?: boolean;
+    keyboard?: boolean;
+    loop?: boolean;
+    activeIndex?: number;
+}
+export type OffcanvasOptions = ModalOptions;
+export type TargetElements = string | Element | NodeList | Element[] | HTMLElement | HTMLElement[] | null | undefined;
+export interface ComponentConstructor<T extends Component = Component, O extends ComponentOptions = ComponentOptions> {
+    new (element: HTMLElement, options?: O): T;
+    componentName: string;
+}
+interface DragState {
+    originX: number;
+    originY: number;
+    pointerX: number;
+    pointerY: number;
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+}
+export declare class Component {
+    element: HTMLElement;
+    options: Record<string, unknown>;
+    cleanups: Array<() => void>;
+    constructor(element: HTMLElement, options?: Record<string, unknown>);
+    updateOptions(options?: Record<string, unknown>): this;
+    on(target: EventTarget, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    destroy(): void;
+}
+export declare class Modal extends Component {
+    static componentName: string;
+    isOpen: boolean;
+    previousFocus: HTMLElement | null;
+    dialog: HTMLElement | null;
+    dragState: DragState | null;
+    backdrop: boolean | "static";
+    keyboard: boolean;
+    focus: boolean;
+    scrollLock: boolean;
+    draggable: boolean;
+    constructor(element: HTMLElement, options?: ModalOptions);
+    updateOptions(options?: ModalOptions): this;
+    bindDrag(): void;
+    startDrag(event: PointerEvent): void;
+    drag(event: PointerEvent): void;
+    resetPosition(): void;
+    show(): this;
+    hide(): this;
+    toggle(): this;
+    focusFirst(): void;
+    onKeydown(event: KeyboardEvent): void;
+}
+export declare class Dropdown extends Component {
+    static componentName: string;
+    trigger: HTMLElement | null;
+    menu: HTMLElement | null;
+    isOpen: boolean;
+    originalParent: Node | null;
+    originalSibling: Node | null;
+    scrollHandler: (() => void) | null;
+    placement: string;
+    container: string | HTMLElement;
+    offset: number;
+    keyboard: boolean;
+    closeOnSelect: boolean;
+    closeOnOutside: boolean;
+    constructor(element: HTMLElement, options?: DropdownOptions);
+    updateOptions(options?: DropdownOptions): this;
+    position(): void;
+    show(): this;
+    hide(): this;
+    toggle(event?: Event): this;
+    destroy(): void;
+}
+export declare class FloatingText extends Component {
+    static dataAttribute: string;
+    static role: string;
+    static componentName: string;
+    tip: HTMLElement | null;
+    showTimeout: ReturnType<typeof setTimeout> | null;
+    hideTimeout: ReturnType<typeof setTimeout> | null;
+    container: string | HTMLElement;
+    html: boolean;
+    content: string;
+    placement: string;
+    trigger: string;
+    offset: number;
+    showDelay: number;
+    hideDelay: number;
+    keyboard: boolean;
+    constructor(element: HTMLElement, options?: FloatingTextOptions);
+    updateOptions(options?: FloatingTextOptions): this;
+    bindTriggers(): void;
+    scheduleShow(): void;
+    scheduleHide(): void;
+    show(): this;
+    toggle(): this;
+    hide(): this;
+    position(): void;
+    destroy(): void;
+}
+export declare class Tooltip extends FloatingText {
+    static componentName: string;
+    static dataAttribute: string;
+    static role: string;
+}
+export declare class Popover extends FloatingText {
+    static componentName: string;
+    static dataAttribute: string;
+    static role: string;
+}
+export declare class Accordion extends Component {
+    static componentName: string;
+    parent: boolean | string | HTMLElement;
+    collapsible: boolean;
+    buttonSelector: string;
+    duration: number;
+    constructor(element: HTMLElement, options?: AccordionOptions);
+    updateOptions(options?: AccordionOptions): this;
+    getParentScope(): Element | null;
+}
+export declare class Tabs extends Component {
+    static componentName: string;
+    tabSelector: string;
+    panelSelector: string | null;
+    active: string | HTMLElement | null;
+    activeIndex: number;
+    keyboard: boolean;
+    loop: boolean;
+    orientation: string;
+    constructor(element: HTMLElement, options?: TabsOptions);
+    updateOptions(options?: TabsOptions): this;
+    activateInitial(): void;
+    show(tab: HTMLElement): this;
+}
+export declare class Toast extends Component {
+    static componentName: string;
+    timeout: ReturnType<typeof setTimeout> | null;
+    delay: number;
+    autohide: boolean;
+    constructor(element: HTMLElement, options?: ToastOptions);
+    updateOptions(options?: ToastOptions): this;
+    show(): this;
+    hide(): this;
+    destroy(): void;
+}
+export declare class Carousel extends Component {
+    static componentName: string;
+    timeout: ReturnType<typeof setInterval> | null;
+    items: HTMLElement[];
+    index: number;
+    interval: number;
+    autoplay: boolean;
+    pauseOnHover: boolean;
+    keyboard: boolean;
+    loop: boolean;
+    constructor(element: HTMLElement, options?: CarouselOptions);
+    updateOptions(options?: CarouselOptions): this;
+    resolveInitialIndex(): number;
+    show(index: number): this;
+    next(): this;
+    prev(): this;
+    play(): this;
+    pause(): this;
+    destroy(): void;
+}
+export declare class Offcanvas extends Modal {
+    static componentName: string;
+    show(): this;
+    hide(): this;
+}
+export interface AksaraNamespace {
+    Modal: typeof Modal;
+    Tooltip: typeof Tooltip;
+    Popover: typeof Popover;
+    Accordion: typeof Accordion;
+    Dropdown: typeof Dropdown;
+    Tabs: typeof Tabs;
+    Toast: typeof Toast;
+    Carousel: typeof Carousel;
+    Offcanvas: typeof Offcanvas;
+    modal(target?: TargetElements | (ModalOptions & {
+        target?: TargetElements;
+        selector?: TargetElements;
+    }), options?: ModalOptions): Modal;
+    tooltip(target?: TargetElements | (TooltipOptions & {
+        target?: TargetElements;
+        selector?: TargetElements;
+    }), options?: TooltipOptions): Tooltip;
+    popover(target?: TargetElements | (PopoverOptions & {
+        target?: TargetElements;
+        selector?: TargetElements;
+    }), options?: PopoverOptions): Popover;
+    accordion(target?: TargetElements | (AccordionOptions & {
+        target?: TargetElements;
+        selector?: TargetElements;
+    }), options?: AccordionOptions): Accordion;
+    dropdown(target?: TargetElements | (DropdownOptions & {
+        target?: TargetElements;
+        selector?: TargetElements;
+    }), options?: DropdownOptions): Dropdown;
+    tabs(target?: TargetElements | (TabsOptions & {
+        target?: TargetElements;
+        selector?: TargetElements;
+    }), options?: TabsOptions): Tabs;
+    toast(target?: TargetElements | (ToastOptions & {
+        target?: TargetElements;
+        selector?: TargetElements;
+    }), options?: ToastOptions): Toast;
+    carousel(target?: TargetElements | (CarouselOptions & {
+        target?: TargetElements;
+        selector?: TargetElements;
+    }), options?: CarouselOptions): Carousel;
+    offcanvas(target?: TargetElements | (OffcanvasOptions & {
+        target?: TargetElements;
+        selector?: TargetElements;
+    }), options?: OffcanvasOptions): Offcanvas;
+    init(root?: ParentNode | Document | HTMLElement): AksaraNamespace;
+    destroy(): AksaraNamespace;
+}
+export declare const Aksara: AksaraNamespace;
+declare global {
+    interface Window {
+        Aksara?: AksaraNamespace;
+    }
+}
+export default Aksara;