cedro 0.1.9 → 0.1.10

package/src/core/uid.ts

@@ -1,3 +1,3 @@
-export function UID(): string {
-    return "w-uid-" + Date.now().toString(36) + "-" + Math.random().toString(36);
-}
+export function UID(): string {
+    return "w-uid-" + Date.now().toString(36) + "-" + Math.random().toString(36);
+}

package/src/interfaces/application.interface.ts

@@ -4,7 +4,6 @@ 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;
@@ -30,6 +29,8 @@ export interface IApplication {
 
     theme: ThemeManager;
 
+    loadedModule: any;
+
     attachWidget(guest: IWidget, host: IWidget): void;
 
     subscribe: (cb: WUICallback) => void;
@@ -48,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

@@ -13,6 +13,8 @@ export type WUIEvent =
     | "mouseleave"
     | "option-clicked"
     | "wheel"
+    | "render"
+    | "scroll"
     | "drag";
 
 export type WUICallback = {
@@ -111,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

@@ -9,6 +9,8 @@ import {
 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;
@@ -16,10 +18,13 @@ export class IconButton extends Button {
 
     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);
@@ -30,6 +35,16 @@ export class IconButton extends Button {
         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);
@@ -66,7 +81,8 @@ export class IconButton extends Button {
     public render(): void {
         super.render();
 
-        const iconWidth = 24;
+        const labelWidth = this.label.getRequiredWidth();
+        const iconWidth = this.icon.getRequiredWidth();
         const padding = 5;
 
         if (this.onlyIcon()) {
@@ -81,10 +97,23 @@ export class IconButton extends Button {
             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;
 
-            const startX = padding; //this.getBody().clientWidth / 2 - (iconWidth + labelWidth) / 2;
+            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;
 
@@ -112,10 +141,16 @@ export class IconButton extends Button {
     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;
     }
 }
 
@@ -123,12 +158,17 @@ 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 (
+    return normalizeWidget(
         <button
             id={props.id}
             w-icon-button
@@ -139,12 +179,9 @@ export const WIconButton = (props: wIconButtonProps) => {
             w-color={props.color}
             w-width={props.width}
             w-height={props.height}
-            w-class={props.classNames}
-            w-orientation={props.orientation}
-            w-fixed-size={props.fixedSize}
-            w-padding={props.padding}
-            w-type={props.type}
-        />
+            w-center-x={props.centerX}
+        />,
+        props
     );
 };
 
@@ -160,6 +197,7 @@ export function createIconButton(
     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);
 
@@ -187,5 +225,9 @@ export function createIconButton(
         newIconButton.onlyIcon();
     }
 
+    if (dataCenterX) {
+        newIconButton.setCenterX(true);
+    }
+
     return newIconButton;
 }

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

@@ -1,6 +1,7 @@
-import { WidgetProps } from "./widget.builder";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
 import "./styles/textbox.css";
 import { Widget, WidgetTypes, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
+import { UID } from "../core/uid";
 
 export type InputTypes =
     | "text"
@@ -53,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;
@@ -61,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();
     }
@@ -114,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;
     }
 
@@ -132,11 +133,11 @@ export class Textbox extends Widget {
         return this.label;
     }*/
 
-    getInput(): Widget {
+    public getInput(): Widget {
         return this.input;
     }
 
-    getInputType(): string {
+    public getInputType(): string {
         return this.inputType;
     }
 }
@@ -146,25 +147,27 @@ export type wTextBoxProps = WidgetProps & {
     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 (
+    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}
-            w-class={props.classNames}
-            w-orientation={props.orientation}
-            w-fixed-size={props.fixedSize}
-            w-padding={props.padding}
-            w-type={props.type}
-        />
+        />,
+        props
     );
 };
 
@@ -172,6 +175,7 @@ export function createTextbox(id: string, content: any, parent: Widget | null =
     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");
@@ -188,6 +192,10 @@ export function createTextbox(id: string, content: any, parent: Widget | null =
         newTextbox.setInitialH(dataHeight);
     }
 
+    if (dataValue) {
+        newTextbox.setValue(dataValue);
+    }
+
     newTextbox.setTitle(dataTitle);
 
     return newTextbox;

package/src/ui/accordion.ui.tsx

@@ -0,0 +1,152 @@
+import "./styles/accordion.css";
+import { IconButton } from "./IconButton.ui";
+import { Label } from "./label.ui";
+import { Widget, WidgetTypes } from "./widget.ui";
+import { createWidget, normalizeWidget, WidgetProps } from "./widget.builder";
+import { UID } from "../core/uid";
+
+const ACCORDION_HEADER_HEIGHT = 40;
+
+type AccordionItem = {
+    header: Widget;
+    content: Widget;
+};
+
+export class Accordion extends Widget {
+    items: Map<string, AccordionItem>;
+    selectedItemId: string | null;
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+
+        this.items = new Map<string, AccordionItem>();
+
+        this.selectedItemId = null;
+
+        this.addClass("WUIAccordion");
+    }
+
+    public selectItem(id: string): void {
+        this.fixItemsType();
+
+        const selected = this.items.get(id);
+
+        if (this.selectedItemId !== null) {
+            //deseleccionamos
+            const previous = this.items.get(this.selectedItemId);
+
+            if (previous) {
+                previous.content.setFixedSize(0);
+            }
+        }
+
+        if (selected) {
+            this.selectedItemId = id;
+            selected.content.setFixedSize(null);
+        }
+
+        this.render();
+    }
+
+    private fixItemsType(): void {
+        this.items.forEach((item) => {
+            item.header.deleteClass("WUIFixPosition");
+            item.header.addClass("WUINonFreePosition");
+            item.content.deleteClass("WUIFixPosition");
+            item.content.addClass("WUINonFreePosition");
+        });
+    }
+
+    public addItem(title: string, icon: string, content: Widget): string {
+        const headerId = this.id + ".item." + Array.from(this.items.entries()).length + ".header";
+        const header = icon !== "" ? new IconButton(headerId, icon) : new Label(headerId);
+
+        header.setType(WidgetTypes.FILL);
+        header.setFixedSize(ACCORDION_HEADER_HEIGHT);
+        header.setText(title);
+
+        header.deleteClass("WUIFixPosition");
+        header.addClass("WUINonFreePosition");
+
+        header.subscribe({
+            event: "click",
+            then: (_e, _w) => {
+                this.selectItem(headerId);
+            },
+        });
+
+        content.setType(WidgetTypes.FILL);
+        content.setFixedSize(0);
+
+        this.items.set(headerId, { header, content });
+
+        this.addChild(header);
+        this.addChild(content);
+
+        return headerId;
+    }
+}
+
+export type WAccordionProps = WidgetProps & {
+    children: any;
+};
+
+export type WAccordionItemProps = {
+    title?: string | null;
+    icon?: string | null;
+    children: any;
+};
+
+export const WAccordion = (props: WAccordionProps) => {
+    if (!props.id) {
+        props.id = "Accordion." + UID();
+    }
+
+    return normalizeWidget(
+        <div id={props.id} w-accordion>
+            {props.children}
+        </div>,
+        props
+    );
+};
+
+export const WAccordionItem = (props: WAccordionItemProps) => {
+    return (
+        <div w-accordion-item w-title={props.title} w-icon={props.icon}>
+            {props.children}
+        </div>
+    );
+};
+
+export function createAccordion(id: string, content: any, parent: Widget | null = null): Accordion {
+    let newAccordion = new Accordion(id, parent);
+    let firstWidgetId = "";
+
+    content.childNodes.forEach((accordionItem: HTMLElement, _index: number) => {
+        if (accordionItem.getAttribute("w-accordion-item") !== null) {
+            const accordionTitle = accordionItem.getAttribute("w-title");
+            const accordionIcon = accordionItem.getAttribute("w-icon");
+
+            if (!accordionItem.firstChild) {
+                throw new Error("Accordion Item must have a content");
+            }
+
+            const widget = createWidget(accordionItem.firstChild);
+
+            if (widget !== null) {
+                const itemId = newAccordion.addItem(
+                    accordionTitle || "Untitled",
+                    accordionIcon || "",
+                    widget
+                );
+
+                if (firstWidgetId === "") {
+                    firstWidgetId = itemId;
+                }
+            }
+        }
+    });
+
+    newAccordion.selectItem(firstWidgetId);
+
+    return newAccordion;
+}