cedro 0.1.8 → 0.1.10

package/src/ui/IconButton.ui.ts

@@ -1,114 +0,0 @@
-import "./styles/button.css";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
-import { Button } from "./button.ui";
-import { Icon } from "./Icon.ui";
-import { Label } from "./label.ui";
-
-export class IconButton extends Button {
-    icon: Icon;
-    label: Label;
-
-    showIcon: boolean;
-    showText: boolean;
-
-    constructor(id: string, icon: string = "dark_mode", parent: Widget | null = null) {
-        super(id, parent);
-
-        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();
-    }
-
-    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 iconWidth = 24;
-        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 labelHeight = this.label.getBody().clientHeight;
-
-            const startX = padding; //this.getBody().clientWidth / 2 - (iconWidth + labelWidth) / 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);
-    }
-
-    public setIcon(icon: string): void {
-        this.icon.setIcon(icon);
-    }
-}

package/src/ui/accordion.ui.ts

@@ -1,71 +0,0 @@
-import "./styles/accordion.css";
-import { IconButton } from "./IconButton.ui";
-import { Label } from "./label.ui";
-import { Widget, WidgetTypes } from "./widget.ui";
-
-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 {
-        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();
-    }
-
-    public addItem(title: string, icon: string, content: Widget): void {
-        const header =
-            icon !== ""
-                ? new IconButton(content.id + ".header", icon, null)
-                : new Label(content.id + ".header", "span", null);
-
-        header.setType(WidgetTypes.FILL);
-        header.setFixedSize(ACCORDION_HEADER_HEIGHT);
-        header.setText(title);
-
-        header.subscribe({
-            event: "click",
-            then: (_e, _w) => {
-                this.selectItem(content.id);
-            },
-        });
-
-        content.setType(WidgetTypes.FILL);
-        content.setFixedSize(0);
-
-        this.items.set(content.id, { header, content });
-
-        this.addChild(header);
-        this.addChild(content);
-    }
-}

package/src/ui/button.ui.ts

@@ -1,105 +0,0 @@
-import "./styles/button.css";
-import "./styles/stackbutton.css";
-import "./styles/vstackbutton.css";
-import { Colors } from "./colors.ui";
-import { Widget } from "./widget.ui";
-
-export type ButonVariants =
-    | "contained"
-    | "outlined"
-    | "text"
-    | "stack-start"
-    | "stack-middle"
-    | "stack-end"
-    | "stack-start-active"
-    | "stack-middle-active"
-    | "stack-end-active"
-    | "stack-vertical-start"
-    | "stack-vertical-middle"
-    | "stack-vertical-end"
-    | "stack-vertical-start-active"
-    | "stack-vertical-middle-active"
-    | "stack-vertical-end-active";
-export type ButonSizes = "small" | "medium" | "large";
-
-export class Button extends Widget {
-    variant: ButonVariants;
-    color: Colors;
-    fullWidth: boolean;
-    size: ButonSizes;
-    href: string;
-    text: string;
-
-    constructor(id: string, parent: Widget | null = null) {
-        super(id, "button", parent);
-
-        this.fullWidth = false;
-        //this.setType(WidgetTypes.CUSTOM);
-        this.variant = "text";
-        this.color = "primary"; //primary";
-        this.size = "medium";
-        this.href = "#";
-        this.text = "";
-
-        this.configureStyles();
-
-        this.init();
-    }
-
-    private configureStyles(): void {
-        this.deleteAllClasses();
-        this.addClass(`WUIButton-${this.variant}`);
-        this.addClass(`WUIButton-${this.variant}-color-${this.color}`);
-    }
-
-    public init(): void {
-        super.init();
-    }
-
-    setText(text: string): void {
-        this.text = text;
-        this.body.innerHTML = text;
-    }
-
-    setVariant(variant: ButonVariants = "contained"): void {
-        this.variant = variant;
-        this.configureStyles();
-    }
-
-    setColor(color: Colors = "primary"): void {
-        this.color = color;
-        this.configureStyles();
-    }
-
-    setFullWidth(fullWidth: boolean = false): void {
-        this.fullWidth = fullWidth;
-    }
-
-    setSize(size: ButonSizes = "medium"): void {
-        this.size = size;
-    }
-
-    setHref(href: string): void {
-        this.href = href;
-    }
-
-    getVariant(): ButonVariants {
-        return this.variant;
-    }
-
-    getColor(): Colors {
-        return this.color;
-    }
-
-    getSize(): ButonSizes {
-        return this.size;
-    }
-
-    getHref(): string {
-        return this.href;
-    }
-
-    getText(): string {
-        return this.text;
-    }
-}

package/src/ui/buttonColor.ui.ts

@@ -1,24 +0,0 @@
-import "./styles/buttoncolor.css";
-import { Button } from "./button.ui";
-import { Widget } from "./widget.ui";
-
-export class ButtonColor extends Button {
-    inputColor: Widget;
-    constructor(id: string, parent: Widget | null = null) {
-        super(id, parent);
-
-        this.inputColor = new Widget(id + ".inputColor", "input", this);
-        this.inputColor.getBody().setAttribute("type", "color");
-        this.inputColor.addClass("WUIButtonColorInput");
-    }
-
-    public setValue(value: string): void {
-        this.inputColor.getBody().setAttribute("value", value);
-    }
-
-    public getValue(): string {
-        const value = this.inputColor.getBody().getAttribute("value");
-
-        return value ? value : "";
-    }
-}

package/src/ui/buttonmenu.ui.ts

@@ -1,59 +0,0 @@
-import { Button } from "./button.ui";
-import { Menu } from "./menu.ui";
-import { SelectItem } from "./select.ui";
-
-export class ButtonMenu extends Button {
-    menu: Menu;
-    items: Array<SelectItem>;
-    selectedItem: SelectItem | null;
-
-    public constructor(id: string) {
-        super(id);
-
-        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;
-                }
-
-                const selectedText = this.selectedItem?.label;
-                if (selectedText) {
-                    this.setText(selectedText);
-                } else {
-                    this.setText("");
-                }
-            },
-        });*/
-    }
-
-    public addItem(id: string, label: string, icon: string): void {
-        this.items.push(new SelectItem(id, label, icon));
-    }
-}

package/src/ui/checkbox.ui.ts

@@ -1,8 +0,0 @@
-import { ToggleButton } from "./toggle.ui";
-import { Widget } from "./widget.ui";
-
-export class Checkbox extends ToggleButton {
-    constructor(id: string, text: string = "", parent: Widget | null = null) {
-        super(id, text, "check_box_outline_blank", "check_box_outlined", parent);
-    }
-}

package/src/ui/container.ui.ts

@@ -1,38 +0,0 @@
-import { OrientationTypes } from "src/types/orientation.type";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
-import { UID } from "../core/uid";
-
-export type ContainerParams = {
-    orientation?: OrientationTypes;
-    parent?: Widget | null;
-    size?: number | null;
-    padding?: number | null;
-};
-
-export class Container extends Widget {
-    constructor(params: ContainerParams) {
-        const { orientation = "horizontal", parent = null, size = null, padding = null } = params;
-
-        super(UID(), "div", parent);
-
-        if (orientation === "horizontal") {
-            this.setAlign(WidgetAlignTypes.HORIZONTAL);
-        } else {
-            this.setAlign(WidgetAlignTypes.VERTICAL);
-        }
-
-        if (size !== null) {
-            this.setFixedSize(size);
-        }
-
-        if (padding !== null) {
-            this.setPadding(padding);
-        }
-
-        this.setType(WidgetTypes.FILL);
-    }
-}
-
-export function Spacer(): Container {
-    return new Container({});
-}

package/src/ui/datagrid.ui.ts

@@ -1,231 +0,0 @@
-import "./styles/datagrid.css";
-import { Label } from "./label.ui";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
-import { Scroll } from "./scroll.ui";
-
-const DATA_GRID_HEADER_HEIGHT = 30;
-const DATA_GRID_FOOTER_HEIGHT = 40;
-const DATA_GRID_ROW_HEIGHT = 20;
-const DATA_GRID_MIN_COLUMN_WIDTH = 24;
-
-type DataGridColumn = {
-    header: string;
-    width: number | null;
-    handler: (args: any) => void;
-};
-
-export class DataGrid extends Widget {
-    headerContainer: Widget;
-    dataContainer: Widget;
-    footerContainer: Widget;
-    data: Array<any>;
-    verticalScrollbar: Scroll;
-    horizontalScrollbar: Scroll;
-
-    rowHeight: number;
-
-    columns: Array<DataGridColumn>;
-
-    constructor(id: string, parent: Widget | null = null) {
-        super(id, "div", parent);
-
-        this.rowHeight = DATA_GRID_ROW_HEIGHT;
-
-        this.headerContainer = new Widget(id + ".header", "div");
-        this.headerContainer.setType(WidgetTypes.FILL);
-        this.headerContainer.setFixedSize(DATA_GRID_HEADER_HEIGHT);
-        this.headerContainer.addClass("WUIDataGrid-Header");
-
-        this.dataContainer = new Widget(id + ".data", "div");
-        this.dataContainer.setType(WidgetTypes.FILL);
-
-        this.footerContainer = new Widget(id + ".footer", "div");
-        this.footerContainer.setType(WidgetTypes.FILL);
-        this.footerContainer.setFixedSize(DATA_GRID_FOOTER_HEIGHT);
-
-        this.setType(WidgetTypes.FILL);
-        this.setAlign(WidgetAlignTypes.VERTICAL);
-
-        this.addChild(this.headerContainer);
-        this.addChild(this.dataContainer);
-        this.addChild(this.footerContainer);
-
-        this.verticalScrollbar = new Scroll(id + ".VerticalScrollbar", this.dataContainer);
-        this.horizontalScrollbar = new Scroll(
-            id + ".HorizontalScrollbar",
-            this.dataContainer,
-            "horizontal"
-        );
-
-        this.columns = new Array<DataGridColumn>();
-
-        this.data = new Array<any>();
-
-        this.addClass("WUIDataGrid");
-    }
-
-    public hideFooter(): void {
-        this.footerContainer.setFixedSize(0);
-    }
-
-    public showFooter(): void {
-        this.footerContainer.setFixedSize(DATA_GRID_FOOTER_HEIGHT);
-    }
-
-    private getFreeWidth(): number {
-        let freeW = 0;
-        for (let i = 0; i < this.columns.length; i++) {
-            let width = this.columns[i].width;
-            if (width) {
-                freeW += width;
-            }
-        }
-
-        freeW = this.dataContainer.getW() - freeW;
-
-        if (freeW < DATA_GRID_MIN_COLUMN_WIDTH) {
-            freeW = DATA_GRID_MIN_COLUMN_WIDTH;
-        }
-        return freeW;
-    }
-
-    private getAllColumnsWidth(): number {
-        let returnValue = 0;
-        for (let i = 0; i < this.columns.length; i++) {
-            let width = this.columns[i].width;
-            if (width) {
-                returnValue += width;
-            }
-        }
-        return returnValue;
-    }
-
-    public init(): void {
-        super.init();
-
-        this.createHeaders();
-    }
-
-    private createHeaders(): void {
-        if (!this.columns) {
-            return;
-        }
-
-        for (let i = 0; i < this.columns.length; i++) {
-            const btn = new Label(this.id + "header." + i, "span");
-            btn.addClass("WUIDataGrid-HeaderLabel");
-            this.headerContainer.addChild(btn);
-        }
-
-        this.buildRows();
-        this.renderHeaders();
-    }
-
-    private renderHeaders(): void {
-        if (!this.columns) {
-            return;
-        }
-
-        let startX = 0;
-        for (let i = 0; i < this.columns.length; i++) {
-            const column = this.columns[i];
-            const btn = window.w.get(this.id + "header." + i) as Label;
-            const width = column.width ? column.width : this.getFreeWidth();
-            btn.setType(WidgetTypes.CUSTOM);
-            btn.setX(startX);
-            btn.setY(0);
-            btn.setW(width);
-            btn.setH(DATA_GRID_HEADER_HEIGHT);
-            btn.getBody().style.lineHeight = DATA_GRID_HEADER_HEIGHT + "px";
-            btn.setText(column.header);
-            this.headerContainer.addChild(btn);
-            startX += width;
-        }
-    }
-
-    private buildRows(): void {
-        let rowY = 0;
-
-        for (let i = 0; i < this.data.length; i++) {
-            const row = new Widget(this.id + ".row." + i, "div");
-
-            row.setType(WidgetTypes.CUSTOM);
-            row.getBody().style.position = "absolute";
-            row.getBody().style.overflow = "hidden";
-            row.addClass("WUIDataGrid-Row");
-
-            this.dataContainer.addChild(row);
-
-            for (let j = 0; j < this.columns.length; j++) {
-                const column = this.columns[j];
-                const fieldId = this.id + ".row." + i + ".column." + j;
-                column.handler({
-                    data: this.data[i],
-                    index: i,
-                    fieldId: fieldId,
-                    row: row,
-                });
-                const columnWidget = window.w.get(fieldId) as Widget;
-                columnWidget.getBody().style.position = "absolute";
-            }
-            rowY += this.rowHeight;
-        }
-    }
-
-    private renderRows(): void {
-        let rowY = 0;
-
-        for (let i = 0; i < this.data.length; i++) {
-            const row = window.w.get(this.id + ".row." + i) as Widget;
-
-            row.setX(0);
-            row.setY(rowY);
-            row.setW(this.getAllColumnsWidth());
-            row.setH(this.rowHeight);
-
-            let widgetX = 0;
-            for (let j = 0; j < this.columns.length; j++) {
-                const column = this.columns[j];
-                const fieldId = this.id + ".row." + i + ".column." + j;
-                const columnWidget = window.w.get(fieldId) as Widget;
-                columnWidget.setY(0);
-                columnWidget.setX(widgetX);
-                columnWidget.setH(this.rowHeight);
-                if (column.width) {
-                    columnWidget.setW(column.width);
-                } else {
-                    columnWidget.setW(this.getFreeWidth());
-                }
-                widgetX += column.width ? column.width : columnWidget.getW();
-            }
-            rowY += this.rowHeight;
-        }
-    }
-
-    public render(): void {
-        super.render();
-        this.renderHeaders();
-        this.renderRows();
-        this.verticalScrollbar.render();
-        this.horizontalScrollbar.render();
-    }
-
-    public setRowHeight(rowHeight: number): void {
-        this.rowHeight = rowHeight;
-    }
-
-    public addColumn(header: string, width: number | null, handler: (args: any) => void) {
-        this.columns.push({ header, width, handler });
-    }
-
-    public getHeader(index: number): Label {
-        return window.w.get(this.id + "header." + index) as Label;
-    }
-
-    public setData(data: Array<any>): void {
-        this.data = data;
-
-        this.buildRows();
-        this.renderRows();
-    }
-}