@sujalchoudhari/solaris-ui/dist/components/component.d.ts

A UI framework to create HTML pages with just JavaScript.

/**
 * Component
 * -----
 * Represents the entire hirarchy of HTML elements
 * Each and every html element can be expressed as a single
 * Component or A hirarchy of components.
 *
 * @remarks
 * This class hirarchy is then compiled into normal HTML code.
 * This Component can be inherited to create newer more complex components.
 *
 * @example
 * Creating A component
 * ```js
 *
 * var myComponent = new Component("div",{"id":"my-component"});
 * ```
 *
 * @author Sujal Choudhari <sjlchoudhari@gmail.com>
 */
export default class Component {
    /**
     * The html tag it is supposed to represent.
     */
    tag: string;
    /**
     * HTMl attributes in the form of key value pairs.
     */
    attribute: {
        [key: string]: string;
    };
    /**
     * An array of `Component` which would be rendered as
     * child elements of the current element
     */
    children: Component[];
    props: any;
    private parent;
    /**
     * Create a new Component instance
     * @param tag  The tag the Component belongs to. For example div,p,a,strong,etc.
     * @param attributes The html attributes in the form of key value pairs
     * @param children The children of the Component
     */
    constructor(tag: string, attributes?: {
        [key: string]: string;
    }, children?: Component[], parent?: Component | null);
    /**
     * Get the tag name
     * @returns the tag of the component
     *
     * @example
     * ```js
     * var tag = myComponent.getTag(); // a div component
     * console.log(tag); // div
     * ```
     */
    getTag(): string;
    /**
         * Get the attributes of the component
         * @returns Object containing all the attributes of the component
         *
         * @example
         * ```js
         * var myComponent = new Component("div",{"id":"my-component"});

         * var attributes = myComponent.getAttributes(); // a div component
         * console.log(attributes); // {"id":"my-component"};
         *
         * ```
         */
    getAttributes(): {
        [key: string]: string;
    };
    /**
     * Get the children of the component
     * @returns List of all the Childrens of the component
     */
    getChildren(): Component[];
    /**
     * Get the parent of the component
     * @returns Parent of the component
     */
    getParent(): Component | null;
    /**
     * Sets or Creates a new attribute on the component
     * @param name nmae of the attribute to set
     * @param value the value of the attribute to set
     *
     * @example
     * ```js
     *
     * var myComponent = new Component("p");
     * myComponent.setAttribute("class", "my-component para lg:mx-5 sm:mx-1");
     * myComponent.setAttribute("id","my-unique-id");
     *
     * ```
     */
    setAttribute(name: string, value: string): void;
    /**
     * Get the value of the attribute at the specified name
     * @param name the value of the attribute to get
     * @returns the value of the attribute
     */
    getAttribute(name: string): string | undefined;
    /**
     * Remove the attribute at the specified name
     * @param name Attribute to remove from the component
     */
    removeAttribute(name: string): void;
    /**
     * Add a new child to the component
     * @param child Add a child to the component. Child can be of any level of inheritance of component.
     *
     * @example
     * ```js
     *  var component1 = new Component("div"); // parent component
     *  var component2 = new Component("p"); // child component
     *  component1.addChild(component2);
     *
     * ```
     * @deprecated Use `addChildren` instead
     */
    addChild(child: Component): void;
    /**
     * Add multiple children to the component
     * @param childrenToAdd  A destructured list of components to add as children
     *
     * @example
     * ```js
     *  var component1 = new Component("div"); // parent component
     *  var component2 = new Component("p"); // child component
     *  component1.addChildren(component2);
     *
     * ```
     */
    addChildren(...childrenToAdd: Component[]): void;
    /**
     * Remove the child from the parent.
     * Note if the child is not refrenced anywhere but only by the parent, then remove it will delete it.
     * @param child The children component to remove as a child
     */
    removeChild(child: Component): void;
    /**
     * Add multiple classes to the list of classes
     * @param classNames the destructured string array of class names to add to the component
     *
     * @example
     * ```js
     *  var myComponent = new Component("div");
     *  myComponent.addClasses("mx-5"); // class = "mx-5"
     *  myComponent.addClasses("my-1"); // class = "my-1" "mx-5"
     * ```
     */
    addClasses(...classNames: string[]): void;
    /**
     * Get the string version of the entire component
     * @returns converted string representation
     */
    toString(): string;
}