@veams/component/lib/index.d.ts

Component Class for Components in Veams for static page apps

/**
 * Represents a component constructor which supports
 * options merging,
 * binding and unbinding of events and subscriptions with template strings,
 * rendering of templates
 * and a destroy behaviour.
 *
 * @module @veams/component
 * @author Sebastian Fitzner
 */
/**
 * Imports
 */
import Base, { BaseConfig } from '@veams/base';
import { Collection } from './helpers/collection';
export interface ComponentConfig extends BaseConfig {
    context?: any;
}
export interface Subscriber {
    id?: string;
    delegate?: any;
    type: any;
    event: any;
    handler: any;
}
declare abstract class Component extends Base {
    context: any;
    _events: {
        [key: string]: string;
    };
    _subscribe: {
        [key: string]: string;
    };
    __subscribers: Collection<Subscriber>;
    private __eventElement;
    /**
     * Constructor
     *
     * to save standard elements like el and options and
     * execute initialize as default method.
     *
     * @param {Object} obj [{}] - Object which contains el, options from the DOM and namespace.
     * @param {Object} options [{}] - Object which contains options of the extended class.
     */
    constructor(obj: ComponentConfig, options?: {});
    /**
     * Get and set events object
     */
    events: {
        [key: string]: string;
    };
    /**
     * Get and set subscribe object
     */
    subscribe: {
        [key: string]: string;
    };
    addSubscriber(obj: Subscriber): void;
    readonly _subscribers: Collection<Subscriber>;
    initialize(...args: any[]): void;
    /**
     * Private method to create all necessary elements and bindings.
     *
     * @private
     */
    create(): void;
    /**
     * Bind local and global events
     *
     * @public
     */
    bindEvents(): void;
    /**
     * Unbind events
     *
     * @public
     */
    unbindEvents(): void;
    /**
     * Pre-Render templates
     * which can be used to render content into it
     *
     * @public
     */
    preRender(): this;
    /**
     * Render your module
     *
     * @public
     */
    render(): this;
    /**
     * Destroy component by unbinding events and
     * removing element from DOM
     */
    destroy(): void;
    /**
     * Render template with data
     *
     * @param {String} tplName - Template name which gets returned as rendered element.
     * @param {Object} data - Data which gets handled by the template.
     */
    renderTemplate(tplName: string, data: object): any;
    /**
     * This method will be executed after initialise
     */
    willMount(): void;
    /**
     * This method will be executed before unregistering events
     */
    willUnmount(): void;
    /**
     * This method will be executed after render
     */
    didMount(): void;
    /**
     * This method will be executed after unregistering events
     */
    didUnmount(): void;
    /**
     * Register multiple events which are saved in an object.
     *
     * @param {Object} evts - Events object which contains an object with events as key and functions as value.
     * @param {Boolean} global - Flag to switch between global and local events.
     *
     * @private
     */
    registerEvents(evts: object, global?: boolean): void;
    /**
     * Register an event by using a simple template engine and
     * a key/value pair.
     *
     * @param {String} evtKey - Event key which contains event and additionally a delegated element.
     * @param {String} fn - Function defined as string which will be bound to this.
     * @param {Boolean} global - Flag if global or local event .
     *
     * @public
     *
     * @example
     * this.registerEvent('click .btn', 'render');
     * this.registerEvent('click {{this.options.btn}}', 'render');
     * this.registerEvent('{{App.EVENTS.custom.event', 'render');
     * this.registerEvent('{{App.EVENTS.resize', 'render', true);
     */
    registerEvent(evtKey: string, fn: string, global?: boolean): void;
    /**
     * Delete all registered events.
     */
    unregisterEvents(): void;
    /**
     * Unregister an event by using the saved subscribers and
     * a key/value pair.
     *
     * @param {String} evtKey - Event key which contains event and additionally a delegated element.
     * @param {String} fn - Function defined as string which will be unbound to this.
     *
     * @public
     *
     * @example
     * this.unregisterEvent('click .btn', 'render');
     * this.unregisterEvent('click {{this.options.btn}}', 'render');
     * this.unregisterEvent('{{App.EVENTS.custom.event', 'render');
     * this.unregisterEvent('{{App.EVENTS.resize', 'render');
     */
    unregisterEvent(evtKey: string, fn: string): void;
}
declare function autocreate(lifecycles: any): (instance: Component) => Component;
export default Component;
export { autocreate };