cedro 0.1.8 → 0.1.10

package/src/ui/dialog.tsx

@@ -1,7 +1,10 @@
+import { UID } from "../core/uid";
 import { WUICallback } from "../interfaces/widget.interface";
 import { Button } from "./button.ui";
+import { Spacer } from "./container.ui";
 import { Label } from "./label.ui";
 import "./styles/dialog.css";
+import { createWidget, normalizeWidget, WidgetProps } from "./widget.builder";
 import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
 
 const TITLE_BAR_HEIGHT = 40;
@@ -34,6 +37,9 @@ export class Dialog extends Widget {
     draging: boolean;
     resizing: boolean;
 
+    startX: number;
+    startY: number;
+
     constructor(
         id: string,
         parent: Widget | null = null,
@@ -42,6 +48,9 @@ export class Dialog extends Widget {
     ) {
         super(id, "div", parent);
 
+        this.startX = -1;
+        this.startY = -1;
+
         this.buttonContainer = null;
         this.handlerResizable = null;
 
@@ -71,23 +80,11 @@ export class Dialog extends Widget {
         this.setType(WidgetTypes.CUSTOM);
         this.setAlign(WidgetAlignTypes.VERTICAL);
 
-        this.titleContainer = new Widget(
-            this.id + ".titleContainer",
-            "div",
-            this
-        );
-        this.contentCntainer = new Widget(
-            this.id + ".contentCntainer",
-            "div",
-            this
-        );
+        this.titleContainer = new Widget(this.id + ".titleContainer", "div", null);
+        this.contentCntainer = new Widget(this.id + ".contentCntainer", "div", null);
 
         if (hasButtons) {
-            this.buttonContainer = new Widget(
-                this.id + ".buttonContainer",
-                "div",
-                this
-            );
+            this.buttonContainer = new Widget(this.id + ".buttonContainer", "div", null);
 
             this.buttonContainer.setType(WidgetTypes.FILL);
             this.buttonContainer.setAlign(WidgetAlignTypes.HORIZONTAL);
@@ -96,11 +93,7 @@ export class Dialog extends Widget {
         }
 
         if (resizable) {
-            this.handlerResizable = new Widget(
-                this.id + ".handlerResizable",
-                "div",
-                this
-            );
+            this.handlerResizable = new Widget(this.id + ".handlerResizable", "div", this);
             this.handlerResizable.setType(WidgetTypes.CUSTOM);
             this.handlerResizable.getBody().innerHTML = " ";
             this.handlerResizable.addClass("WUIDialogResizeHandler");
@@ -117,55 +110,37 @@ export class Dialog extends Widget {
 
         this.titleContainer.setFixedSize(TITLE_BAR_HEIGHT);
 
-        this.titleBar = new Label(
-            this.id + ".titleBar",
-            "span",
-            this.titleContainer
-        );
+        this.titleBar = new Label(this.id + ".titleBar", "span", null);
         this.titleBar.setType(WidgetTypes.FILL);
         this.titleBar.setText("Title");
         this.titleBar.addClass("WUITitlebar");
 
-        this.close = new Button(this.id + ".close", this.titleContainer);
+        this.close = new Button(this.id + ".close", null);
         this.close.setType(WidgetTypes.FILL);
         this.close.setColor("primary");
         this.close.setVariant("text");
         this.close.setText("X");
         this.close.setFixedSize(40);
 
-        this.btnSpacerLeft = new Widget(
-            this.id + ".btnSpacerLeft",
-            "div",
-            this.buttonContainer
-        );
-        this.btnSpacerLeft.setType(WidgetTypes.FILL);
-        this.btnSpacerLeft.setAlign(WidgetAlignTypes.HORIZONTAL);
-
         if (this.buttonContainer) {
-            this.cancell = new Button(
-                this.id + ".cancell",
-                this.buttonContainer
-            );
+            this.cancell = new Button(this.id + ".cancell", null);
             this.cancell.setType(WidgetTypes.FILL);
             this.cancell.setColor("error");
             this.cancell.setText("Cancel");
             this.cancell.setVariant("contained");
             this.cancell.setFixedSize(100);
 
-            this.ok = new Button(this.id + ".ok", this.buttonContainer);
+            this.ok = new Button(this.id + ".ok", null);
             this.ok.setType(WidgetTypes.FILL);
             this.ok.setText("OK");
             this.ok.setVariant("contained");
             this.ok.setColor("success");
             this.ok.setFixedSize(100);
 
-            this.btnSpacerRight = new Widget(
-                this.id + ".btnSpacerRight",
-                "div",
-                this.buttonContainer
-            );
-            this.btnSpacerRight.setType(WidgetTypes.FILL);
-            this.btnSpacerRight.setAlign(WidgetAlignTypes.HORIZONTAL);
+            this.buttonContainer.addChild(Spacer());
+            this.buttonContainer.addChild(this.cancell);
+            this.buttonContainer.addChild(this.ok);
+            this.buttonContainer.addChild(Spacer());
 
             this.ok.subscribe({
                 event: "click",
@@ -256,12 +231,8 @@ export class Dialog extends Widget {
                     if (!this.handlerResizable) return;
                     const mouseX = (e as MouseEvent).clientX;
                     const mouseY = (e as MouseEvent).clientY;
-                    this.dragDistX = Math.abs(
-                        this.handlerResizable.getPosition().x - mouseX
-                    );
-                    this.dragDistY = Math.abs(
-                        this.handlerResizable.getPosition().y - mouseY
-                    );
+                    this.dragDistX = Math.abs(this.handlerResizable.getPosition().x - mouseX);
+                    this.dragDistY = Math.abs(this.handlerResizable.getPosition().y - mouseY);
 
                     this.resizing = true;
                     this.background.setVisible(true);
@@ -272,6 +243,13 @@ export class Dialog extends Widget {
             });
         }
 
+        this.titleContainer.addChild(this.titleBar);
+        this.titleContainer.addChild(this.close);
+
+        this.addChild(this.titleContainer);
+        this.addChild(this.contentCntainer);
+        if (hasButtons) this.addChild(this.buttonContainer);
+
         this.init();
     }
 
@@ -322,7 +300,13 @@ export class Dialog extends Widget {
         this.deleteClass("WUIDialogHide");
         this.addClass("WUIDialogDisplayed");
         this.render();
-        this.center();
+
+        if (this.startX > 0 && this.startY > 0) {
+            this.setX(this.startX);
+            this.setY(this.startY);
+        } else {
+            this.center();
+        }
 
         this.background.setVisible(true);
         this.background.raisteTop();
@@ -345,7 +329,7 @@ export class Dialog extends Widget {
         this.raiseBottom();
     }
 
-    init() {
+    public init() {
         super.init();
     }
 
@@ -354,7 +338,7 @@ export class Dialog extends Widget {
      *
      * @param {number} height - The height of the title bar.
      */
-    setTitlebarHeight(height: number) {
+    public setTitlebarHeight(height: number) {
         this.titleBarHeight = height;
     }
 
@@ -363,7 +347,7 @@ export class Dialog extends Widget {
      *
      * @param {number} height - The height of the button bar.
      */
-    setButtonbarHeight(height: number) {
+    public setButtonbarHeight(height: number) {
         this.buttonBarHeight = height;
     }
 
@@ -395,4 +379,107 @@ export class Dialog extends Widget {
         if (!this.cancell) return;
         this.cancell.subscribe({ event: "click", then: cb.then });
     }
+
+    public setStartX(x: number): void {
+        this.startX = x;
+    }
+
+    public setStartY(y: number): void {
+        this.startY = y;
+    }
+}
+
+export type WDialogProps = Omit<WidgetProps, "orientation" | "hidden"> & {
+    hasButtons?: boolean;
+    resizable?: boolean;
+    visible?: boolean;
+    titleBarHeight?: number;
+    buttonBarHeight?: number;
+    positionX?: number;
+    positionY?: number;
+    width?: number;
+    height?: number;
+    children: any;
+};
+
+export const WDialog = (props: WDialogProps) => {
+    if (!props.id) {
+        props.id = "Dialog." + UID();
+    }
+
+    return normalizeWidget(
+        <div
+            id={props.id}
+            w-dialog
+            w-position-x={props.positionX}
+            w-position-y={props.positionY}
+            w-dialog-width={props.width}
+            w-dialog-height={props.height}
+            w-has-buttons={props.hasButtons}
+            w-resizable={props.resizable}
+            w-visible={props.visible}
+            w-titlebar-height={props.titleBarHeight}
+            w-buttonbar-height={props.buttonBarHeight}
+        >
+            {props.children}
+        </div>,
+        props
+    );
+};
+
+export function createDialog(id: string, content: any, _parent: Widget | null = null): Dialog {
+    const dataHasButtons = content.getAttribute("w-has-buttons") ? true : false;
+    const dataResizable = content.getAttribute("w-resizable") ? true : false;
+    const dataVisible = content.getAttribute("w-visible") ? true : false;
+    const dataTitlebarHeight = content.getAttribute("w-titlebar-height")
+        ? parseInt(content.getAttribute("w-titlebar-height"))
+        : null;
+    const dataButtonbarHeight = content.getAttribute("w-buttonbar-height")
+        ? parseInt(content.getAttribute("w-buttonbar-height"))
+        : null;
+
+    const dataPositionX = content.getAttribute("w-position-x")
+        ? parseInt(content.getAttribute("w-position-x"))
+        : null;
+
+    const dataPositionY = content.getAttribute("w-position-y")
+        ? parseInt(content.getAttribute("w-position-y"))
+        : null;
+
+    const dataWidth = content.getAttribute("w-dialog-width")
+        ? parseInt(content.getAttribute("w-dialog-width"))
+        : null;
+
+    const dataHeight = content.getAttribute("w-dialog-height")
+        ? parseInt(content.getAttribute("w-dialog-height"))
+        : null;
+
+    let newDialog = new Dialog(id, null, dataHasButtons, dataResizable);
+
+    if (dataTitlebarHeight !== null) newDialog.setTitlebarHeight(dataTitlebarHeight);
+    if (dataButtonbarHeight !== null) newDialog.setButtonbarHeight(dataButtonbarHeight);
+    if (dataPositionX !== null) newDialog.setStartX(dataPositionX);
+    if (dataPositionY !== null) newDialog.setStartY(dataPositionY);
+    if (dataHeight !== null) newDialog.setY(dataHeight);
+    if (dataWidth !== null) newDialog.setW(dataWidth);
+
+    if (content.childNodes.length > 1) {
+        throw new Error("Dialog must have only one child");
+    }
+
+    const childWidget = content.firstChild;
+
+    if (childWidget !== null) {
+        const widget = createWidget(childWidget);
+        if (widget) {
+            newDialog.getContentCntainer().setPadding(0);
+            newDialog.getContentCntainer().attachWidget(widget);
+        }
+    }
+
+    if (dataVisible) newDialog.show();
+
+    newDialog.background.setVisible(false);
+
+    return newDialog;
 }

package/src/ui/{hpanel.ui.ts → hpanel.ui.tsx}

@@ -1,6 +1,14 @@
+import { UID } from "../core/uid";
 import { Draggable } from "./draggable.ui";
 import "./styles/hpanel.css";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import { WidgetProps, createWidget, normalizeWidget } from "./widget.builder";
+import {
+    connectWidgetCallback,
+    getOnlyEventProps,
+    Widget,
+    WidgetAlignTypes,
+    WidgetTypes,
+} from "./widget.ui";
 
 const HPANEL_HANDLER_SIZE = 4;
 
@@ -100,6 +108,16 @@ export class HPanel extends Widget {
         this.render();
     }
 
+    public setLeftWidth(width: number): void {
+        this.leftWidth = width;
+        this.rightWidth = null;
+    }
+
+    public setRightWidth(width: number): void {
+        this.leftWidth = null;
+        this.rightWidth = width;
+    }
+
     public render(): void {
         super.render();
         this.handler.setW(HPANEL_HANDLER_SIZE);
@@ -124,4 +142,49 @@ export class HPanel extends Widget {
 
         this.handler.setY(this.getY(true));
     }
+
+    public free(): void {
+        this.handler.free();
+        this.leftContent?.free();
+        this.rightContent?.free();
+        //this.draggable.free();
+        super.free();
+    }
+}
+
+export type WHPanelProps = WidgetProps & {
+    children: any;
+};
+
+export const WHPanel = (props: WHPanelProps) => {
+    if (!props.id) {
+        props.id = "Icon." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <div id={props.id} w-hpanel>
+            {props.children}
+        </div>,
+        props
+    );
+};
+
+export function createHPanel(id: string, content: any, parent: Widget | null = null): HPanel {
+    let newPanel = new HPanel(id, parent);
+
+    content.childNodes.forEach((item: HTMLElement, index: number) => {
+        const widget = createWidget(item);
+
+        if (widget !== null) {
+            if (index === 0) {
+                newPanel.setLeft(widget, widget.getFixedSize());
+            } else if (index === 1) {
+                newPanel.setRight(widget);
+            }
+        }
+    });
+
+    return newPanel;
 }

package/src/ui/iconButtonMenu.ui.tsx

@@ -0,0 +1,176 @@
+import { IconButton, wIconButtonProps } from "./IconButton.ui";
+import { Menu } from "./menu.ui";
+import { SelectItem } from "../types/select.item.type";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
+import { UID } from "../core/uid";
+import { connectCustomWidget } from "./widget.collection";
+import { IWidget } from "../interfaces/widget.interface";
+
+export class IconButtonMenu extends IconButton {
+    menu: Menu;
+    items: Array<SelectItem>;
+    selectedItem: SelectItem | null;
+
+    whenOptionClicked: (args: any) => {} | void;
+
+    public constructor(id: string, icon: string) {
+        super(id, icon);
+
+        this.whenOptionClicked = () => {};
+
+        this.menu = new Menu(this.id + ".menu", this.id, null);
+
+        this.items = new Array<SelectItem>();
+        this.selectedItem = null;
+
+        this.subscribe({
+            event: "click",
+            then: () => {
+                this.menu.clearOptions();
+                this.items.forEach((item) => {
+                    this.menu.addOption(item.id, item.icon, item.label);
+                });
+
+                this.menu.wakeUp();
+
+                if (this.getW() > this.menu.getW()) {
+                    this.menu.setW(this.getBody().clientWidth);
+                    console.log("cambiando ancho...");
+                }
+            },
+        });
+
+        this.menu.subscribe({
+            event: "option-clicked",
+            then: (_e, clickedOption) => {
+                const option = clickedOption as IconButton;
+                const fintOption = this.items.find((item) => item.id === option.id);
+
+                if (fintOption) {
+                    this.selectedItem = fintOption;
+                    this.whenOptionClicked({ id: fintOption.id });
+                }
+
+                // const selectedText = this.selectedItem?.label;
+                // if (selectedText) {
+                //     this.setText(selectedText);
+                // } else {
+                //     this.setText("");
+                // }
+            },
+        });
+    }
+
+    public setOnOptionClicked(cb: ({}) => {} | void) {
+        this.whenOptionClicked = cb;
+    }
+
+    public addItem(id: string, label: string, icon: string): void {
+        this.items.push(new SelectItem(id, label, icon));
+    }
+}
+
+export type WIconButtonMenuProps = WidgetProps &
+    wIconButtonProps & {
+        icon?: string | null;
+        onOptionClicked?: (args: any) => {} | void;
+        children: any;
+    };
+
+export type WIconButtonMenuItemProps = {
+    id: string;
+    label?: string | null;
+    icon?: string | null;
+};
+
+export const WIconButtonMenu = (props: WIconButtonMenuProps) => {
+    if (!props.id) {
+        props.id = "IconButtonMenu." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    connectCustomWidget("widget-custom-added-" + props.id, {
+        event: "widget-load",
+        then: (_e: Event, _w: IWidget | null) => {
+            if (!props.id) return;
+            const widget = w.get(props.id) as IconButtonMenu;
+
+            if (props.onOptionClicked) {
+                widget.setOnOptionClicked(props.onOptionClicked);
+            }
+        },
+    });
+
+    return normalizeWidget(
+        <div
+            id={props.id}
+            w-icon-button-menu
+            w-text={props.text}
+            w-icon={props.icon}
+            w-variant={props.variant}
+            w-color={props.color}
+            w-width={props.width}
+            w-height={props.height}
+        >
+            {props.children}
+        </div>,
+        props
+    );
+};
+
+export const WIconButtonMenuItem = (props: WIconButtonMenuItemProps) => {
+    return (
+        <div w-icon-button-menu-item id={props.id} w-label={props.label} w-icon={props.icon}></div>
+    );
+};
+
+export function createIconButtonMenu(
+    id: string,
+    content: any,
+    _parent: Widget | null = null
+): IconButtonMenu {
+    const btnIcon = content.getAttribute("w-icon");
+    const btnText = content.getAttribute("w-text");
+    const btnColor = content.getAttribute("w-color");
+    const btnVariant = content.getAttribute("w-variant");
+    const dataWidth = content.getAttribute("w-width");
+    const dataHeight = content.getAttribute("w-height");
+
+    let newIconButtonMenu = new IconButtonMenu(id, btnIcon || "home");
+
+    if (btnText) {
+        newIconButtonMenu.setText(btnText);
+    }
+
+    if (btnColor) {
+        newIconButtonMenu.setColor(btnColor);
+    }
+
+    if (btnVariant) {
+        newIconButtonMenu.setVariant(btnVariant);
+    }
+
+    if (dataWidth) {
+        newIconButtonMenu.setInitialW(dataWidth);
+    }
+
+    if (dataHeight) {
+        newIconButtonMenu.setInitialH(dataHeight);
+    }
+
+    content.childNodes.forEach((menuItem: HTMLElement, index: number) => {
+        if (menuItem.getAttribute("w-icon-button-menu-item") !== null) {
+            const itemId = menuItem.getAttribute("id");
+            const itemLabel = menuItem.getAttribute("w-label");
+            const itemIcon = menuItem.getAttribute("w-icon");
+
+            if (itemId !== null) {
+                newIconButtonMenu.addItem(itemId, itemLabel || "Unnamed" + index, itemIcon || "");
+            }
+        }
+    });
+
+    return newIconButtonMenu;
+}

package/src/ui/image.ui.tsx

@@ -0,0 +1,123 @@
+import { UID } from "../core/uid";
+import "./styles/image.css";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { Widget, WidgetTypes, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
+import { decode } from "html-entities";
+
+export class Image extends Widget {
+    imageContainer: Widget;
+    image: Widget;
+    constructor(id: string, src: string = "", parent: Widget | null = null) {
+        super(id, "div", parent);
+
+        this.imageContainer = new Widget(id + ".imageContainer", "div", this);
+        this.imageContainer.addClass("WUIImageContainer");
+
+        this.image = new Widget(id + ".image", "img", this.imageContainer);
+        this.image.setType(WidgetTypes.CUSTOM);
+        this.image.getBody().setAttribute("src", src);
+    }
+
+    public render(): void {
+        super.render();
+
+        this.imageContainer.setX(0);
+        this.imageContainer.setY(0);
+        this.imageContainer.setWH(this.getW(), this.getH());
+
+        this.image.getBody().style.position = "relative";
+
+        const imageH = this.image.getH();
+
+        this.image.setX(0);
+        this.image.setY(this.getH() / 2 - imageH / 2);
+    }
+
+    public fillWidth(): void {
+        this.image.addClass("WUIImageFillWidth");
+    }
+
+    public fillHeight(): void {
+        this.image.addClass("WUIImageFillHeight");
+    }
+
+    public setAlternateText(text: string): void {
+        this.image.getBody().setAttribute("alt", text);
+    }
+
+    public setImageUrl(url: string): void {
+        this.image.getBody().setAttribute("src", url);
+    }
+
+    public getImageUrl(): string | null {
+        return this.image.getBody().getAttribute("src");
+    }
+
+    public getAlternateText(): string | null {
+        return this.image.getBody().getAttribute("alt");
+    }
+}
+
+export type wImageProps = WidgetProps & {
+    src: string;
+    alt?: string | null;
+    fillWidth?: boolean | null;
+    fillHeight?: boolean | null;
+    width?: number | null;
+    height?: number | null;
+};
+
+export const WImage = (props: wImageProps) => {
+    if (!props.id) {
+        props.id = "Image." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <div
+            id={props.id}
+            w-image
+            w-src={props.src}
+            w-alt={props.alt}
+            w-fill-width={props.fillWidth}
+            w-fill-height={props.fillHeight}
+            w-width={props.width}
+            w-height={props.height}
+        ></div>,
+        props
+    );
+};
+
+export function createImage(id: string, content: any, parent: Widget | null = null): Image {
+    const dataSrc = content.getAttribute("w-src");
+    const dataAlt = content.getAttribute("w-alt");
+    const dataFillWidth = content.getAttribute("w-fill-width");
+    const dataFillHeight = content.getAttribute("w-fill-height");
+    const dataWidth = content.getAttribute("w-width");
+    const dataHeight = content.getAttribute("w-height");
+
+    let newImage = new Image(id, decode(dataSrc), parent);
+
+    if (dataAlt) {
+        newImage.setAlternateText(dataAlt);
+    }
+
+    if (dataFillWidth) {
+        newImage.fillWidth();
+    }
+
+    if (dataFillHeight) {
+        newImage.fillHeight();
+    }
+
+    if (dataWidth) {
+        newImage.setInitialW(dataWidth);
+    }
+
+    if (dataHeight) {
+        newImage.setInitialH(dataHeight);
+    }
+
+    return newImage;
+}