cedro 0.1.30 → 0.1.32

package/package.json

@@ -16,25 +16,24 @@
         "ui-library",
         "widget-based"
     ],
-    "version": "0.1.30",
+    "version": "0.1.32",
     "type": "module",
     "devDependencies": {
-        "@types/node": "^20.4.4",
-        "typescript": "^5.0.2",
         "@fontsource/roboto": "^5.0.5",
         "@oothkoo/seo-js": "1.0.5",
         "@types/color": "3.0.3",
+        "@types/node": "^20.4.4",
         "@types/react": "18.2.17",
         "color": "4.2.3",
         "glob": "^11.0.0",
         "material-icons": "1.13.12",
         "navigo": "8.11.1",
-        "vite": "^5.0.8"
+        "typescript": "^5.0.2",
+        "vite": "^7.3.1"
     },
     "scripts": {
         "working": "vite",
         "working-build": "tsc && vite build",
         "working-preview": "vite preview"
-    },
-    "dependencies": {}
+    }
 }

package/src/core/application.builder.tsx

@@ -104,11 +104,13 @@ export function createApplication(content: any): Application {
         }
     });
 
-    appConnections.forEach((cb) => {
-        newApp.subscribe(cb);
-    });
+    if (window.appConnections) {
+        window.appConnections.forEach((cb) => {
+            newApp.subscribe(cb);
+        });
+    }
 
-    appConnections = [];
+    window.appConnections = [];
 
     return newApp;
 }

package/src/core/path.import.dev.ts

@@ -1,7 +1,7 @@
 export const getAdaptedUrl = (url: string) => {
     const timestamp = new Date().getTime();
     const isProduction = process.env.NODE_ENV === "production";
-    const pathDev = ".." + url + "?ts=" + timestamp;
+    const pathDev = `../../../../src${url}index.js?ts=${timestamp}`;
     const pathProduction = `../../assets${url}/index.js?ts=${timestamp}`;
     return isProduction ? pathProduction : pathDev;
 };

package/src/ui/Icon.ui.tsx

@@ -8,14 +8,14 @@ import { normalizeWidget } from "./widget.normalize";
 export type IconVariants = "Filled" | "Outlined" | "Round" | "Sharp" | "Two Tone";
 export type IconSizes = "small" | "medium" | "large" | "xlarge";
 
-const iconSizesMap = {
+export const iconSizesMap = {
     small: "md-18",
     medium: "md-24",
     large: "md-36",
     xlarge: "md-48",
 };
 
-const iconPixelSizesMap = {
+export const iconPixelSizesMap = {
     small: "18px",
     medium: "24px",
     large: "36px",
@@ -42,6 +42,20 @@ export class Icon extends Widget {
 
         this.setIconSize("medium");
 
+        this.updateStyle();
+
+        this.setIcon(icon);
+
+        this.init();
+    }
+
+    private updateStyle(): void {
+        //Borramos las clases anteriores si las hay.
+        this.deleteClass("material-icons");
+        this.deleteClass(
+                "material-icons-" + this.variant.toString().replace(" ", "-").toLowerCase()
+            );
+        //Agregamos las clases del estilo actual.
         if (this.variant === "Filled") {
             this.addClass("material-icons");
         } else {
@@ -49,10 +63,6 @@ export class Icon extends Widget {
                 "material-icons-" + this.variant.toString().replace(" ", "-").toLowerCase()
             );
         }
-
-        this.setIcon(icon);
-
-        this.init();
     }
 
     public init(): void {
@@ -77,6 +87,7 @@ export class Icon extends Widget {
 
     public setVariant(variant: IconVariants = "Filled"): void {
         this.variant = variant;
+        this.updateStyle();
     }
 
     public setColor(color: Colors = "primary"): void {

package/src/ui/IconView.ui.tsx

@@ -0,0 +1,203 @@
+import "./styles/icon.css";
+
+import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
+import { WidgetAlignTypes, WidgetProps, WidgetTypes } from "./widget.types";
+import { Scroll } from "./scroll.ui";
+import { createIconViewItem, IconViewItem } from "./IconViewItem.ui";
+import { IconSizes, IconVariants } from "./Icon.ui";
+import { Colors } from "./colors.ui";
+import { UID } from "../core/uid";
+import { normalizeWidget } from "./widget.normalize";
+
+export class IconView extends Widget {
+    container: Widget;
+    verticalScrollbar: Scroll;
+    items: Array<IconViewItem> = [];
+    itemWidth: number = 100;
+    variant: IconVariants = "Outlined";
+    color: Colors = "primary";
+    size: IconSizes = "medium";
+
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+
+        this.setType(WidgetTypes.FILL);
+        this.setAlign(WidgetAlignTypes.VERTICAL);
+
+        this.container = new Widget(id + ".container", "div");
+        this.container.setType(WidgetTypes.FILL);
+
+        this.verticalScrollbar = new Scroll(id + ".VerticalScrollbar", this.container);
+
+        this.items = [];
+
+        this.addChild(this.container);
+
+        this.init();
+    }
+
+    public addItem(item: IconViewItem): void {
+        item.setWH(this.itemWidth, this.itemWidth);
+        this.items.push(item);
+        this.container.addChild(item);
+    }
+
+    public init(): void {
+        super.init();
+    }
+
+    private renderIcons(): void {
+        let currentLeft = 0;
+        let currentTop = 0;
+        const margin = 10;
+        const itemWidth = this.itemWidth + margin * 2;
+
+        let itemsByRow = Math.floor(this.getW() / itemWidth);
+        if (itemsByRow == 0) {
+            itemsByRow = 1;
+        }
+        const rows = Math.ceil(this.items.length / itemsByRow);
+        const rowsHeight: Array<number> = Array(rows).fill(0);
+
+        //Reseteamos las dimensiones de los items antes de calcular su tamanio.
+        for (const item of this.items) {
+            item.setH(item.getW());
+        }
+
+        //Calculamos el tamanio de cada fila.
+        for (let i = 0; i < rows; i++) {
+            for (let x = 0; x < this.items.length; x++) {
+                const item = this.items[x];
+                const isItemInRow = i * itemsByRow <= x && x < (i + 1) * itemsByRow;
+                if (isItemInRow) {
+                    if (item.text.getBody().scrollHeight + item.icon.getH() > rowsHeight[i]) {
+                        rowsHeight[i] = item.text.getBody().scrollHeight + item.icon.getH();
+                    }
+                }
+            }
+        }
+
+        //Aplicamos las dimensiones a los items.
+        for (let i = 0; i < rows; i++) {
+            for (let x = 0; x < this.items.length; x++) {
+                const item = this.items[x];
+                const isItemInRow = i * itemsByRow <= x && x < (i + 1) * itemsByRow;
+                if (isItemInRow) {
+                    item.setX(currentLeft + margin);
+                    item.setY(currentTop + margin);
+                    item.setH(rowsHeight[i]);
+
+                    item.text.setHCentered(true);
+
+                    item.render();
+                    currentLeft += itemWidth;
+                    if (currentLeft + itemWidth > this.container.getW()) {
+                        currentLeft = 0;
+                        currentTop += rowsHeight[i] + margin * 2;
+                    }
+                }
+            }
+        }
+    }
+
+    public render(): void {
+        super.render();
+        this.renderIcons();
+        this.verticalScrollbar.render();
+    }
+
+    public setItemWidth(itemWidth: number): void {
+        this.itemWidth = itemWidth;
+    }
+
+    public setVariant(variant: IconVariants): void {
+        this.variant = variant;
+        for (const icon of this.items) {
+            icon.setVariant(variant);
+        }
+    }
+
+    public setColor(color: Colors): void {
+        this.color = color;
+        for (const icon of this.items) {
+            icon.setColor(color);
+        }
+    }
+
+    public setSize(size: IconSizes): void {
+        this.size = size;
+        for (const icon of this.items) {
+            icon.setIconSize(size);
+        }
+    }
+}
+
+export type wIconViewProps = WidgetProps & {
+    id?: string | null;
+    variant?: IconVariants | null;
+    color?: Colors | null;
+    size?: IconSizes | null;
+    itemWidth?: number | null;
+    children?: any;
+};
+
+export const WIconView = (props: wIconViewProps) => {
+    if (!props.id) {
+        props.id = "IconView." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <div
+            id={props.id}
+            w-icon-view
+            w-variant={props.variant}
+            w-color={props.color}
+            w-size={props.size}
+            w-item-width={props.itemWidth}
+        >
+            {props.children}
+        </div>,
+        props
+    );
+};
+
+export function createIconView(id: string, content: any, parent: Widget | null = null): IconView {
+    const dataVariant = content.getAttribute("w-variant") || "Filled";
+    const dataColor = content.getAttribute("w-color") || "primary";
+    const dataSize = content.getAttribute("w-size") || "medium";
+    const dataItemWidth = content.getAttribute("w-item-width") || 100;
+
+    let newIconView = new IconView(id, parent);
+
+    content.childNodes.forEach((iconItem: HTMLElement, index: number) => {
+        if (iconItem.getAttribute("w-icon-view-item") !== null) {
+            const itemId = iconItem.getAttribute("id") || "icon-view-item." + index;
+
+            const newItem = createIconViewItem(itemId, iconItem, null);
+
+            if (itemId !== null) {
+                newIconView.addItem(newItem);
+            }
+        }
+    });
+
+    if (dataVariant) {
+        newIconView.setVariant(dataVariant);
+    }
+
+    if (dataColor) {
+        newIconView.setColor(dataColor);
+    }
+
+    if (dataSize) {
+        newIconView.setSize(dataSize);
+    }
+
+    if (dataItemWidth) {
+        newIconView.setItemWidth(parseInt(dataItemWidth));
+    }
+
+    return newIconView;
+}

package/src/ui/IconViewItem.ui.tsx

@@ -0,0 +1,169 @@
+import "./styles/iconviewitem.css";
+import { Colors } from "./colors.ui";
+import { addNewWidget } from "./widget.collection";
+import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
+import { UID } from "../core/uid";
+import { WidgetAlignTypes, WidgetProps, WidgetTypes } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
+import { Icon, iconPixelSizesMap, IconSizes, IconVariants } from "./Icon.ui";
+import { Label } from "./label.ui";
+import { Container } from "./container.ui";
+
+export class IconViewItem extends Widget {
+    variant: IconVariants;
+    color: Colors | null = null;
+    iconSize: IconSizes = "medium";
+    container: Container;
+
+    icon: Icon;
+    text: Label;
+
+    constructor(
+        id: string,
+        icon: string,
+        text: string,
+        variant: IconVariants = "Filled",
+        parent: Widget | null = null
+    ) {
+        super(id, "span", parent);
+
+        this.variant = variant;
+        this.setType(WidgetTypes.CUSTOM);
+        this.setAlign(WidgetAlignTypes.VERTICAL);
+
+        this.container = new Container({ id: id + ".container", orientation: "vertical" });
+
+        this.icon = new Icon(this.id + ".icon", icon, variant, this.container);
+        this.icon.setIconSize(this.iconSize);
+
+        this.text = new Label(id + ".text", "h4", this.container);
+        this.text.setText(text);
+
+        this.container.addChild(this.icon);
+        this.container.addChild(this.text);
+
+        this.addClass("WUI-icon-view-item");
+
+        this.addChild(this.container);
+
+        this.init();
+    }
+
+    public render(): void {
+        super.render();
+    }
+
+    public setWH(w: number, h: number): void {
+        super.setWH(w, h);
+    }
+
+    public setW(w: number): void {
+        super.setWH(w, this.getH());
+    }
+
+    public setH(h: number): void {
+        super.setWH(this.getW(), h);
+
+        this.container.setH(h);
+        this.text.setH(h - this.icon.getH());
+    }
+
+    public init(): void {
+        super.init();
+    }
+
+    public setIconSize(size: IconSizes = "medium"): void {
+        this.icon.setIconSize(size);
+    }
+
+    public setIcon(icon: string): void {
+        this.icon.setIcon(icon);
+    }
+
+    public setVariant(variant: IconVariants = "Filled"): void {
+        this.variant = variant;
+        this.icon.setVariant(variant);
+    }
+
+    public setColor(color: Colors = "primary"): void {
+        this.icon.setColor(color);
+    }
+
+    public getVariant(): IconVariants {
+        return this.variant;
+    }
+
+    public getColor(): Colors {
+        return this.icon.getColor();
+    }
+
+    public getIcon(): string {
+        return this.icon.getIcon();
+    }
+
+    public getIconSize(): IconSizes {
+        return this.icon.getIconSize();
+    }
+
+    public getRequiredWidth(): number {
+        const sizeString = iconPixelSizesMap[this.iconSize];
+        const size = parseInt(sizeString.split("px")[0]);
+        return size;
+    }
+}
+
+export type wIconViewItemProps = WidgetProps & {
+    icon: string;
+    text: string;
+    variant?: IconVariants | null;
+    color?: Colors | null;
+    size?: IconSizes | null;
+};
+
+export const WIconViewItem = (props: wIconViewItemProps) => {
+    if (!props.id) {
+        props.id = "IconViewItem." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <div
+            id={props.id}
+            w-icon-view-item
+            w-icon-name={props.icon}
+            w-icon-text={props.text}
+            w-variant={props.variant}
+            w-color={props.color}
+            w-size={props.size}
+        ></div>,
+        props
+    );
+};
+
+export function createIconViewItem(
+    id: string,
+    content: any,
+    parent: Widget | null = null
+): IconViewItem {
+    const dataIcon = content.getAttribute("w-icon-name");
+    const dataText = content.getAttribute("w-icon-text");
+    const dataVariant = content.getAttribute("w-variant") || "Filled";
+    const dataColor = content.getAttribute("w-color") || "primary";
+    const dataSize = content.getAttribute("w-size") || "medium";
+
+    let newIconViewItem = new IconViewItem(id, dataIcon, dataText, dataVariant, parent);
+
+    if (dataColor) {
+        newIconViewItem.setColor(dataColor);
+    }
+
+    if (dataSize) {
+        newIconViewItem.setIconSize(dataSize);
+    }
+
+    //Agregamos el widget para que puedan ser inicializados los eventos asociados
+    addNewWidget(id, newIconViewItem);
+
+    return newIconViewItem;
+}

package/src/ui/styles/iconview.css

@@ -0,0 +1,29 @@
+.WUI-icon-color-primary {
+    color: var(--palette-text-primary);
+    background-color: transparent;
+}
+
+.WUI-icon-color-secondary {
+    color: var(--palette-text-secondary);
+    background-color: transparent;
+}
+
+.WUI-icon-color-success {
+    color: var(--palette-success-text-main);
+    background-color: transparent;
+}
+
+.WUI-icon-color-error {
+    color: var(--palette-error-text-main);
+    background-color: transparent;
+}
+
+.WUI-icon-color-info {
+    color: var(--palette-info-text-main);
+    background-color: transparent;
+}
+
+.WUI-icon-color-warning {
+    color: var(--palette-warning-text-main);
+    background-color: transparent;
+}

package/src/ui/styles/iconviewitem.css

@@ -0,0 +1,4 @@
+.WUI-icon-view-item {
+    text-align: center;
+    cursor: pointer;
+}

package/src/ui/widget.builder.ts

@@ -27,6 +27,7 @@ import { createSelect } from "./select.ui";
 import { createDialog, Dialog } from "./dialog";
 import { createDataGrid, DataGrid } from "./datagrid.ui";
 import { WidgetAlignTypes, WidgetProps, WidgetTypes } from "./widget.types";
+import { createIconView } from "./IconView.ui";
 
 export function createWidget(
     content: any,
@@ -115,6 +116,8 @@ export function createWidget(
         widget = createDialog(widgetProps.id, content, null);
     } else if (content.getAttribute("w-data-grid")) {
         widget = createDataGrid(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-icon-view")) {
+        widget = createIconView(widgetProps.id, content, parent);
     } else {
         widget = new Widget(widgetProps.id, content.tagName, parent);