cedro 0.1.8 → 0.1.10

package/src/interfaces/application.interface.ts

@@ -1,10 +1,9 @@
 import Navigo from "navigo";
 import { IScreen } from "./screen.interface";
-import { IWidget } from "./widget.interface";
+import { IWidget, WUICallback, WUIEvent } from "./widget.interface";
 import { Dialog } from "../ui/dialog";
 import { Seo } from "../core/seo";
 import { ThemeManager } from "../core/themes.core";
-import { Vector2D } from "src/types/vector2d.type";
 
 export interface IScreenSize {
     minWidth: number;
@@ -26,10 +25,18 @@ export interface IApplication {
     confirmDialog: Dialog;
     mediaQueries: Map<string, IScreenSize>;
 
+    subscribers: Map<string, WUICallback>;
+
     theme: ThemeManager;
 
+    loadedModule: any;
+
     attachWidget(guest: IWidget, host: IWidget): void;
 
+    subscribe: (cb: WUICallback) => void;
+    unsubscribe: (event: WUIEvent) => void;
+    run(eventId: WUIEvent): void;
+
     addMediaQuery(
         query: string,
         minWidth: number,
@@ -42,7 +49,7 @@ export interface IApplication {
     getRoot(): IWidget;
 
     confirm(msg: string): void;
-    alert(msg: string): void;
+    alert(title: string, msg: string): void;
 
     showLoading(): void;
     hideLoading(): void;

package/src/interfaces/widget.interface.ts

@@ -2,6 +2,8 @@ import { WidgetAlignTypes, WidgetTypes } from "../ui/widget.ui";
 import { Vector2D } from "../types/vector2d.type";
 
 export type WUIEvent =
+    | "widget-load"
+    | "load"
     | "click"
     | "resize"
     | "mousedown"
@@ -11,11 +13,13 @@ export type WUIEvent =
     | "mouseleave"
     | "option-clicked"
     | "wheel"
+    | "render"
+    | "scroll"
     | "drag";
 
 export type WUICallback = {
     event: WUIEvent;
-    then: (event: Event, wuie: IWidget) => void;
+    then: (event: Event, wuie: IWidget | null) => void;
 };
 
 export interface IWidget {
@@ -109,6 +113,7 @@ export interface IWidget {
     getOverflow(): boolean;
 
     addChild(child: IWidget | null): void;
+    populate(): void;
     disableSelection(): void;
     display(): void;
     enableSelection(): void;

package/src/types/select.item.type.ts

@@ -0,0 +1,11 @@
+export class SelectItem {
+    id: string;
+    label: string;
+    icon: string;
+
+    constructor(id: string, label: string, icon: string) {
+        this.id = id;
+        this.label = label;
+        this.icon = icon;
+    }
+}

package/src/ui/Icon.ui.tsx

@@ -0,0 +1,158 @@
+import "./styles/icon.css";
+import { Colors } from "./colors.ui";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
+import { UID } from "../core/uid";
+
+export type IconVariants = "Filled" | "Outlined" | "Round" | "Sharp" | "Two Tone";
+export type IconSizes = "small" | "medium" | "large" | "xlarge";
+
+const iconSizesMap = {
+    small: "md-18",
+    medium: "md-24",
+    large: "md-36",
+    xlarge: "md-48",
+};
+
+const iconPixelSizesMap = {
+    small: "18px",
+    medium: "24px",
+    large: "36px",
+    xlarge: "48px",
+};
+
+export class Icon extends Widget {
+    variant: IconVariants;
+    color: Colors | null = null;
+    iconSize: IconSizes = "medium";
+    icon: string;
+
+    constructor(
+        id: string,
+        icon: string,
+        variant: IconVariants = "Filled",
+        parent: Widget | null = null
+    ) {
+        super(id, "span", parent);
+
+        this.variant = variant;
+        this.setColor("primary");
+        this.icon = icon;
+
+        this.setIconSize("medium");
+
+        if (this.variant === "Filled") {
+            this.addClass("material-icons");
+        } else {
+            this.addClass(
+                "material-icons-" + this.variant.toString().replace(" ", "-").toLowerCase()
+            );
+        }
+
+        this.setIcon(icon);
+
+        this.init();
+    }
+
+    public init(): void {
+        super.init();
+    }
+
+    public setIconSize(size: IconSizes = "medium"): void {
+        if (this.iconSize !== size) {
+            this.deleteClass(iconSizesMap[this.iconSize]);
+        }
+
+        this.iconSize = size;
+        this.addClass(iconSizesMap[size]);
+
+        this.body.style.fontSize = iconPixelSizesMap[size];
+    }
+
+    public setIcon(icon: string): void {
+        this.icon = icon;
+        this.body.innerHTML = icon;
+    }
+
+    public setVariant(variant: IconVariants = "Filled"): void {
+        this.variant = variant;
+    }
+
+    public setColor(color: Colors = "primary"): void {
+        if (this.color !== color) {
+            this.deleteClass("WUI-icon-color-" + this.color);
+        }
+
+        this.addClass("WUI-icon-color-" + color);
+
+        this.color = color;
+    }
+
+    public getVariant(): IconVariants {
+        return this.variant;
+    }
+
+    public getColor(): Colors {
+        return this.color || "primary";
+    }
+
+    public getIcon(): string {
+        return this.icon;
+    }
+
+    public getIconSize(): IconSizes {
+        return this.iconSize;
+    }
+
+    public getRequiredWidth(): number {
+        const sizeString = iconPixelSizesMap[this.iconSize];
+        const size = parseInt(sizeString.split("px")[0]);
+        return size;
+    }
+}
+
+export type wIconProps = WidgetProps & {
+    icon: string;
+    variant?: IconVariants | null;
+    color?: Colors | null;
+    size?: IconSizes | null;
+};
+
+export const WIcon = (props: wIconProps) => {
+    if (!props.id) {
+        props.id = "Icon." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <div
+            id={props.id}
+            w-icon
+            w-icon-name={props.icon}
+            w-variant={props.variant}
+            w-color={props.color}
+            w-size={props.size}
+        ></div>,
+        props
+    );
+};
+
+export function createIcon(id: string, content: any, parent: Widget | null = null): Icon {
+    const dataIcon = content.getAttribute("w-icon-name");
+    const dataVariant = content.getAttribute("w-variant") || "Filled";
+    const dataColor = content.getAttribute("w-color") || "primary";
+    const dataSize = content.getAttribute("w-size") || "medium";
+
+    let newIcon = new Icon(id, dataIcon, dataVariant, parent);
+
+    if (dataColor) {
+        newIcon.setColor(dataColor);
+    }
+
+    if (dataSize) {
+        newIcon.setIconSize(dataSize);
+    }
+
+    return newIcon;
+}

package/src/ui/IconButton.ui.tsx

@@ -0,0 +1,233 @@
+import "./styles/button.css";
+import {
+    Widget,
+    WidgetAlignTypes,
+    WidgetTypes,
+    connectWidgetCallback,
+    getOnlyEventProps,
+} from "./widget.ui";
+import { Button, wButtonProps } from "./button.ui";
+import { Icon } from "./Icon.ui";
+import { Label } from "./label.ui";
+import { normalizeWidget } from "./widget.builder";
+import { UID } from "../core/uid";
+
+export class IconButton extends Button {
+    icon: Icon;
+    label: Label;
+
+    showIcon: boolean;
+    showText: boolean;
+    centerX: boolean;
+
+    constructor(id: string, icon: string = "dark_mode", parent: Widget | null = null) {
+        super(id, parent);
+
+        this.centerX = false;
+
+        this.setAlign(WidgetAlignTypes.HORIZONTAL);
+        this.icon = new Icon(id + ".icon", icon, undefined, this);
+        this.label = new Label(id + ".label", undefined, this);
+
+        this.showIcon = true;
+        this.showText = true;
+
+        this.init();
+    }
+
+    protected updateRequiredWidth(): void {
+        if (!this.label) return;
+        if (!this.icon) return;
+
+        const labelWidth = this.label.getRequiredWidth();
+        const iconWith = this.icon.getRequiredWidth();
+
+        this.requiredWidth = labelWidth + iconWith + 70;
+    }
+
+    public displayIcon(): void {
+        this.showIcon = true;
+        this.icon.setVisible(true);
+        this.render();
+    }
+
+    public hideIcon(): void {
+        this.showIcon = false;
+        this.icon.setVisible(false);
+        this.render();
+    }
+
+    public displayText(): void {
+        this.showText = true;
+        this.label.setVisible(true);
+        this.render();
+    }
+
+    public hideText(): void {
+        this.showText = false;
+        this.label.setVisible(false);
+        this.render();
+    }
+
+    public init(): void {
+        super.init();
+    }
+
+    public onlyIcon(): boolean {
+        if (this.label.getText().length > 0) return false;
+        return true;
+    }
+
+    public render(): void {
+        super.render();
+
+        const labelWidth = this.label.getRequiredWidth();
+        const iconWidth = this.icon.getRequiredWidth();
+        const padding = 5;
+
+        if (this.onlyIcon()) {
+            this.icon.getBody().style.position = "absolute";
+
+            const startX = this.getBody().clientWidth / 2 - iconWidth / 2;
+            const startY = this.getH() / 2 - this.icon.getH() / 2;
+
+            this.icon.setX(startX);
+            this.icon.setY(startY);
+        } else {
+            this.label.getBody().style.position = "absolute";
+            this.icon.getBody().style.position = "absolute";
+
+            const availableWidth = this.getW() - padding * 5; //Doble padding a la derecha e izquierda y uno de separacion entre label y icon.
+            const requiredWidth = labelWidth + iconWidth + padding * 5;
+
+            const labelHeight = this.label.getBody().clientHeight;
+
+            let startX = availableWidth / 2 - (iconWidth + padding + labelWidth) / 2;
+
+            if (availableWidth < requiredWidth) {
+                startX = padding * 2;
+            }
+
+            if (!this.centerX) {
+                startX = padding * 2;
+            }
+
+            const startLabelX = startX + iconWidth + padding;
+
+            let startY = this.getH() / 2 - iconWidth / 2;
+            let startLabelY = this.getH() / 2 - labelHeight / 2;
+
+            if (this.getType() !== WidgetTypes.FILL) {
+                startY = this.getH() / 2 - this.icon.getH() / 2;
+                this.label.getBody().style.lineHeight = this.getH() + "px";
+                startLabelY = this.getH() / 2 - this.label.getH() / 2;
+            }
+
+            if (startX < 0 || startY < 0) {
+                setTimeout(() => {
+                    this.render();
+                }, 500);
+                return;
+            }
+
+            this.icon.setX(startX);
+            this.label.setX(startLabelX + padding);
+
+            this.icon.setY(startY);
+            this.label.setY(startLabelY);
+        }
+    }
+
+    public setText(text: string): void {
+        //super.setText(text);
+        this.label.setText(text);
+        this.updateRequiredWidth();
+    }
+
+    public setIcon(icon: string): void {
+        this.icon.setIcon(icon);
+        this.updateRequiredWidth();
+    }
+
+    public setCenterX(centerX: boolean): void {
+        this.centerX = centerX;
+    }
+}
+
+export type wIconButtonProps = Omit<wButtonProps, "text"> & {
+    icon?: string | null;
+    text?: string | null;
+    onlyIcon?: boolean | null;
+    centerX?: boolean | null;
+};
+
+export const WIconButton = (props: wIconButtonProps) => {
+    if (!props.id) {
+        props.id = "IconButton." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <button
+            id={props.id}
+            w-icon-button
+            w-icon={props.icon}
+            w-text={props.text}
+            w-only-icon={props.onlyIcon}
+            w-variant={props.variant}
+            w-color={props.color}
+            w-width={props.width}
+            w-height={props.height}
+            w-center-x={props.centerX}
+        />,
+        props
+    );
+};
+
+export function createIconButton(
+    id: string,
+    content: any,
+    parent: Widget | null = null
+): IconButton {
+    const dataIcon = content.getAttribute("w-icon");
+    const dataText = content.getAttribute("w-text");
+    const dataVariant = content.getAttribute("w-variant");
+    const dataColor = content.getAttribute("w-color");
+    const dataWidth = content.getAttribute("w-width");
+    const dataHeight = content.getAttribute("w-height");
+    const dataOnlyIcon = content.getAttribute("w-only-icon");
+    const dataCenterX = content.getAttribute("w-center-x");
+
+    let newIconButton = new IconButton(id, dataIcon, parent);
+
+    if (dataText) {
+        newIconButton.setText(dataText);
+    }
+
+    if (dataVariant) {
+        newIconButton.setVariant(dataVariant);
+    }
+
+    if (dataColor) {
+        newIconButton.setColor(dataColor);
+    }
+
+    if (dataWidth) {
+        newIconButton.setInitialW(dataWidth);
+    }
+
+    if (dataHeight) {
+        newIconButton.setInitialH(dataHeight);
+    }
+
+    if (dataOnlyIcon) {
+        newIconButton.onlyIcon();
+    }
+
+    if (dataCenterX) {
+        newIconButton.setCenterX(true);
+    }
+
+    return newIconButton;
+}

package/src/ui/{textbox.ui.ts → Textbox.ui.tsx}

@@ -1,5 +1,7 @@
+import { normalizeWidget, WidgetProps } from "./widget.builder";
 import "./styles/textbox.css";
-import { Widget, WidgetTypes } from "./widget.ui";
+import { Widget, WidgetTypes, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
+import { UID } from "../core/uid";
 
 export type InputTypes =
     | "text"
@@ -52,7 +54,7 @@ export class Textbox extends Widget {
         this.getBody().style.overflow = "";
     }
 
-    getValue(): string {
+    public getValue(): string {
         const value = (this.input.getBody() as HTMLInputElement).value;
 
         if (value) return value;
@@ -60,7 +62,7 @@ export class Textbox extends Widget {
         return "";
     }
 
-    setValue(value: string): void {
+    public setValue(value: string): void {
         (this.input.getBody() as HTMLInputElement).value = value;
         this.positionLabel();
     }
@@ -113,17 +115,17 @@ export class Textbox extends Widget {
         super.render();
     }
 
-    setTitle(title: string): void {
+    public setTitle(title: string): void {
         this.title = title;
         this.label.getBody().innerHTML = this.title;
     }
 
-    setInputType(type: InputTypes): void {
+    public setInputType(type: InputTypes): void {
         this.inputType = type;
         this.input.getBody().setAttribute("type", this.inputType);
     }
 
-    getTitle(): string {
+    public getTitle(): string {
         return this.title;
     }
 
@@ -131,11 +133,70 @@ export class Textbox extends Widget {
         return this.label;
     }*/
 
-    getInput(): Widget {
+    public getInput(): Widget {
         return this.input;
     }
 
-    getInputType(): string {
+    public getInputType(): string {
         return this.inputType;
     }
 }
+
+export type wTextBoxProps = WidgetProps & {
+    title: string;
+    inputType?: InputTypes | null;
+    width?: number | null;
+    height?: number | null;
+    value?: string | null;
+};
+
+export const WTextbox = (props: wTextBoxProps) => {
+    if (!props.id) {
+        props.id = "Textbox." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <input
+            id={props.id}
+            w-textbox
+            w-title={props.title}
+            w-value={props.value}
+            w-input-type={props.inputType}
+            w-width={props.width}
+            w-height={props.height}
+        />,
+        props
+    );
+};
+
+export function createTextbox(id: string, content: any, parent: Widget | null = null): Textbox {
+    let newTextbox = new Textbox(id, parent);
+
+    const dataTitle = content.getAttribute("w-title");
+    const dataValue = content.getAttribute("w-value");
+    const dataInputType = content.getAttribute("w-input-type");
+    const dataWidth = content.getAttribute("w-width");
+    const dataHeight = content.getAttribute("w-height");
+
+    if (dataInputType) {
+        newTextbox.setInputType(dataInputType);
+    }
+
+    if (dataWidth) {
+        newTextbox.setInitialW(dataWidth);
+    }
+
+    if (dataHeight) {
+        newTextbox.setInitialH(dataHeight);
+    }
+
+    if (dataValue) {
+        newTextbox.setValue(dataValue);
+    }
+
+    newTextbox.setTitle(dataTitle);
+
+    return newTextbox;
+}