cedro 0.1.9 → 0.1.11

package/src/ui/image.ui.tsx

@@ -1,112 +1,123 @@
-import "./styles/image.css";
-import { WidgetProps } from "./widget.builder";
-import { Widget, WidgetTypes, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
-
-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());
-    }
-
-    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) => {
-    connectWidgetCallback(props.id, getOnlyEventProps(props));
-
-    return (
-        <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}
-            w-fixed-size={props.fixedSize}
-            w-padding={props.padding}
-            w-type={props.type}
-        ></div>
-    );
-};
-
-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, 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;
-}
+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;
+}

package/src/ui/index.ts

@@ -1,27 +1,27 @@
+import { WidgetAlignTypes, WidgetTypes, Widget } from "./widget.ui";
+import { Textbox } from "./Textbox.ui";
+import { Select } from "./select.ui";
 import { Accordion } from "./accordion.ui";
 import { Button } from "./button.ui";
 import { ButtonColor } from "./buttonColor.ui";
 import { ButtonMenu } from "./buttonmenu.ui";
 import { ButtonStack } from "./buttonstack.ui";
+import { IconButton } from "./IconButton.ui";
 import { Checkbox } from "./checkbox.ui";
 import { Container, Spacer, ContainerParams } from "./container.ui";
-import { WidgetAlignTypes, WidgetTypes, Widget } from "./widget.ui";
 import { Dialog } from "./dialog";
 import { HPanel } from "./hpanel.ui";
 import { Icon } from "./Icon.ui";
-import { IconButton } from "./IconButton.ui";
 import { Image } from "./image.ui";
 import { Label } from "./label.ui";
 import { Menu } from "./menu.ui";
 import { ProgressBar } from "./progressbar.ui";
-import { Select } from "./select.ui";
 import { Switch } from "./switch.ui";
-import { Textbox } from "./textbox.ui";
 import { Tabs } from "./tabs.ui";
 import { TextArea } from "./textarea.ui";
 import { Toolbar } from "./toolbar.ui";
 import { DataGrid } from "./datagrid.ui";
-import { RadioButton } from "./radiobutton";
+import { RadioButton } from "./radiobutton.ui";
 import { ValueBar } from "./valuebar.ui";
 import { VPanel } from "./vpanel.ui";
 import { createWidget } from "./widget.builder";
@@ -30,18 +30,19 @@ import { IconButtonMenu } from "./iconButtonMenu.ui";
 export type { ContainerParams };
 
 export {
+    Textbox,
     Accordion,
     Button,
     ButtonColor,
     ButtonMenu,
     ButtonStack,
+    IconButton,
+    IconButtonMenu,
     Checkbox,
     Container,
     Dialog,
     HPanel,
     Icon,
-    IconButton,
-    IconButtonMenu,
     Image,
     Label,
     Menu,
@@ -52,7 +53,6 @@ export {
     Switch,
     Tabs,
     TextArea,
-    Textbox,
     Toolbar,
     ValueBar,
     VPanel,

package/src/ui/label.ui.tsx

@@ -1,6 +1,8 @@
-import { WidgetProps } from "./widget.builder";
+import "./styles/label.css";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
 import { Colors } from "./colors.ui";
 import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
+import { UID } from "../core/uid";
 
 export type LabelVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
 
@@ -9,12 +11,16 @@ export class Label extends Widget {
     color: Colors;
     text: string;
 
+    requiredWidth: number;
+
     isHCentered: boolean;
     isVCentered: boolean;
 
     constructor(id: string, variant: LabelVariants = "span", parent: Widget | null = null) {
         super(id, variant, parent);
 
+        this.requiredWidth = -1;
+
         this.isHCentered = false;
         this.isVCentered = false;
 
@@ -22,6 +28,12 @@ export class Label extends Widget {
         this.color = "primary";
         this.text = "";
 
+        this.setColor(this.color);
+
+        //this.getBody().style.margin = "0px";
+
+        this.setVariant(this.variant);
+
         this.init();
     }
 
@@ -29,6 +41,19 @@ export class Label extends Widget {
         super.init();
     }
 
+    private updateRequiredWidth(): void {
+        const div = document.createElement("div");
+        div.id = this.id + ".requiredWidth";
+        div.innerHTML = this.text;
+        div.classList.add("WUILabel" + this.variant);
+        div.classList.add("WUILabel-" + this.color);
+        div.style.position = "absolute";
+        div.style.overflow = "hidden";
+        document.body.appendChild(div);
+        this.requiredWidth = div.clientWidth;
+        div.parentNode?.removeChild(div);
+    }
+
     public setHCentered(isHCentered: boolean = true): void {
         this.isHCentered = isHCentered;
     }
@@ -59,14 +84,26 @@ export class Label extends Widget {
     public setText(text: string): void {
         this.text = text;
         this.body.innerHTML = text;
+        this.updateRequiredWidth();
     }
 
     public setVariant(variant: LabelVariants = "span"): void {
+        if (this.variant !== variant) {
+            this.deleteClass("WUILabel" + this.variant);
+        }
+
         this.variant = variant;
+        this.addClass("WUILabel-" + this.variant);
+        this.updateRequiredWidth();
     }
 
     public setColor(color: Colors = "primary"): void {
+        if (this.color !== color) {
+            this.deleteClass("WUILabel-" + this.color);
+        }
         this.color = color;
+        this.addClass("WUILabel-" + this.color);
+        this.updateRequiredWidth();
     }
 
     public getVariant(): LabelVariants {
@@ -80,25 +117,38 @@ export class Label extends Widget {
     public getText(): string {
         return this.text;
     }
+
+    public getRequiredWidth(): number {
+        return this.requiredWidth;
+    }
 }
 
 export type wLabelProps = WidgetProps & {
     variant?: string | null;
     color?: Colors | null;
     text?: string | null;
+    centerX?: boolean | null;
+    centerY?: boolean | null;
 };
 
 export const WLabel = (props: wLabelProps) => {
+    if (!props.id) {
+        props.id = "Label." + UID();
+    }
+
     connectWidgetCallback(props.id, getOnlyEventProps(props));
 
-    return (
+    return normalizeWidget(
         <div
             id={props.id}
             w-label
             w-text={props.text}
             w-variant={props.variant}
             w-color={props.color}
-        ></div>
+            w-centerX={props.centerX}
+            w-centerY={props.centerY}
+        ></div>,
+        props
     );
 };
 
@@ -122,5 +172,13 @@ export function createLabel(id: string, content: any, parent: Widget | null = nu
         newLabel.setColor(dataColor);
     }
 
+    if (content.getAttribute("w-centerX")) {
+        newLabel.setHCentered(true);
+    }
+
+    if (content.getAttribute("w-centerY")) {
+        newLabel.setVCentered(true);
+    }
+
     return newLabel;
 }

package/src/ui/loading.ui.ts

@@ -1,10 +1,10 @@
-import "./styles/loading.css";
-import { Widget } from "./widget.ui";
-
-export class Loading extends Widget {
-    constructor(id: string, parent: Widget | null = null) {
-        super(id, "div", parent);
-        this.addClass("WUILoading");
-        this.setVisible(false);
-    }
-}
+import "./styles/loading.css";
+import { Widget } from "./widget.ui";
+
+export class Loading extends Widget {
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+        this.addClass("WUILoading");
+        this.setVisible(false);
+    }
+}

package/src/ui/menu.ui.ts

@@ -101,7 +101,7 @@ export class Menu extends Widget {
         if (this.triggeredBy) {
             const position = this.triggeredBy.getPosition(false);
 
-            const triggerW = this.triggeredBy.getBody().clientWidth;
+            //const triggerW = this.triggeredBy.getBody().clientWidth;
             const triggerH = this.triggeredBy.getBody().clientHeight;
 
             const screenW = window.innerWidth;
@@ -162,7 +162,7 @@ export class Menu extends Widget {
         newOption.setAlign(WidgetAlignTypes.VERTICAL);
         newOption.setText(label);
         newOption.setFixedSize(MENU_OPTION_HEIGHT);
-        //newOption.addClass("WUIMenuOptions");
+        newOption.addClass("WUIMenuOptions"); //Esta linea estaba comentada. Con esto se soliciono el ancho del menu
         //newOption.setH(MENU_OPTION_HEIGHT);
 
         newOption.subscribe({

package/src/ui/progressbar.ui.tsx

@@ -1,6 +1,7 @@
+import { UID } from "../core/uid";
 import { Label } from "./label.ui";
 import "./styles/progressbar.css";
-import { WidgetProps } from "./widget.builder";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
 import { Widget, WidgetTypes, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 
 const PROGRESS_BAR_HEIGHT = 40;
@@ -87,21 +88,21 @@ export type wProgressBarProps = WidgetProps & {
 };
 
 export const WProgressBar = (props: wProgressBarProps) => {
+    if (!props.id) {
+        props.id = "ProgressBar." + UID();
+    }
+
     connectWidgetCallback(props.id, getOnlyEventProps(props));
 
-    return (
+    return normalizeWidget(
         <div
             id={props.id}
             w-progressbar
             w-value={props.value}
             w-padding-bar={props.paddingBar}
             w-hide-label={props.hideLabel}
-            w-class={props.classNames}
-            w-orientation={props.orientation}
-            w-fixed-size={props.fixedSize}
-            w-padding={props.padding}
-            w-type={props.type}
-        ></div>
+        ></div>,
+        props
     );
 };
 

package/src/ui/{radiobutton.tsx → radiobutton.ui.tsx}

@@ -1,5 +1,6 @@
+import { UID } from "../core/uid";
 import { ToggleButton } from "./toggle.ui";
-import { WidgetProps } from "./widget.builder";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
 import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 
 export class RadioButton extends ToggleButton {
@@ -14,20 +15,15 @@ export type wRadioButtonProps = WidgetProps & {
 };
 
 export const WRadioButton = (props: wRadioButtonProps) => {
+    if (!props.id) {
+        props.id = "RadioButton." + UID();
+    }
+
     connectWidgetCallback(props.id, getOnlyEventProps(props));
 
-    return (
-        <div
-            id={props.id}
-            w-radiobutton
-            w-text={props.text}
-            w-checked={props.checked}
-            w-class={props.classNames}
-            w-orientation={props.orientation}
-            w-fixed-size={props.fixedSize}
-            w-padding={props.padding}
-            w-type={props.type}
-        />
+    return normalizeWidget(
+        <div id={props.id} w-radiobutton w-text={props.text} w-checked={props.checked} />,
+        props
     );
 };
 

package/src/ui/scroll.ui.ts

@@ -25,7 +25,7 @@ export class Scroll extends Widget {
     drag: Draggable;
 
     constructor(id: string, contentArea: Widget, orientation: OrientationTypes = "vertical") {
-        super(id, "div", contentArea.getParent());
+        super(id, "div");
 
         this.contentArea = contentArea;
         this.orientation = orientation;
@@ -33,7 +33,7 @@ export class Scroll extends Widget {
         this.setType(WidgetTypes.CUSTOM);
 
         this.getBody().style.overflow = "hidden";
-        this.getBody().style.position = "absolute";
+        this.getBody().style.position = "fixed";
 
         this.addClass("WUIScrollbar");
 
@@ -110,14 +110,15 @@ export class Scroll extends Widget {
         if (this.orientation === "vertical") {
             const recorrido = scrollData.scrollHeight - scrollData.areaHeight;
             const maxY = this.drag.maxY ? this.drag.maxY : 1;
-            const ratio = (this.getY() - this.contentArea.getY()) / maxY;
+            const ratio = (this.getY() - this.contentArea.getY(true)) / maxY;
             this.contentArea.getBody().scrollTop = recorrido * ratio;
         } else if (this.orientation === "horizontal") {
             const recorrido = scrollData.scrollWidth - scrollData.areaWidth;
             const maxX = this.drag.maxX ? this.drag.maxX : 1;
-            const ratio = (this.getX() - this.contentArea.getX()) / maxX;
+            const ratio = (this.getX() - this.contentArea.getX(true)) / maxX;
             this.contentArea.getBody().scrollLeft = recorrido * ratio;
         }
+        this.run("scroll");
     }
 
     public render(): void {
@@ -133,14 +134,14 @@ export class Scroll extends Widget {
                 return;
             }
 
-            this.setX(this.contentArea.getX() + this.contentArea.getW() - SCROLL_SIZE - 1);
-            this.setY(1 + this.contentArea.getY() + scrollData.position);
+            this.setX(this.contentArea.getX(true) + this.contentArea.getW() - SCROLL_SIZE - 1);
+            this.setY(1 + this.contentArea.getY(true) + scrollData.position);
             this.setH(scrollData.scrollBarHeight);
             this.setW(SCROLL_SIZE);
             this.raisteTop();
 
-            const minY = 1 + this.contentArea.getY();
-            const maxY = this.contentArea.getY() + scrollData.availablePositionSize;
+            const minY = 1 + this.contentArea.getY(true);
+            const maxY = this.contentArea.getY(true) + scrollData.availablePositionSize;
 
             this.drag.setMinY(minY);
             this.drag.setMaxY(maxY);
@@ -160,14 +161,14 @@ export class Scroll extends Widget {
                 return;
             }
 
-            this.setX(1 + this.contentArea.getX() + scrollData.position);
-            this.setY(scrollData.scrollPositionY - SCROLL_SIZE - 1);
+            this.setX(1 + this.contentArea.getX(true) + scrollData.position);
+            this.setY(this.contentArea.getY(true) + scrollData.scrollPositionY - SCROLL_SIZE - 1);
             this.setW(scrollData.scrollBarWidth);
             this.setH(SCROLL_SIZE);
             this.raisteTop();
 
-            const minX = 1 + this.contentArea.getX();
-            const maxX = this.contentArea.getX() + scrollData.availablePositionSize;
+            const minX = 1 + this.contentArea.getX(true);
+            const maxX = this.contentArea.getX(true) + scrollData.availablePositionSize;
 
             this.drag.setMinX(minX);
             this.drag.setMaxX(maxX);