cedro 0.1.8 → 0.1.10

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;
+}

package/src/ui/button.ui.tsx

@@ -0,0 +1,209 @@
+import "./styles/button.css";
+import "./styles/stackbutton.css";
+import "./styles/vstackbutton.css";
+import { Colors } from "./colors.ui";
+import { Widget, WidgetTypes, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { UID } from "../core/uid";
+
+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;
+    minWidth: boolean;
+    size: ButonSizes;
+    href: string;
+    text: string;
+    requiredWidth: number;
+
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "button", parent);
+
+        this.requiredWidth = -1;
+
+        this.fullWidth = false;
+        this.minWidth = 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}`);
+        if (this.type === WidgetTypes.FILL) {
+            this.addClass("WUINonFreePosition");
+        } else if (this.type === WidgetTypes.CUSTOM) {
+            this.addClass("WUINonFreePosition");
+        } else if (this.type === WidgetTypes.FREE) {
+            this.addClass("WUIFixPosition");
+        }
+        this.updateRequiredWidth();
+    }
+
+    protected updateRequiredWidth(): void {
+        const div = document.createElement("div");
+        div.id = this.id + ".requiredWidth";
+        div.innerHTML = this.text;
+        div.classList.add(`WUIButton-${this.variant}`);
+        div.classList.add(`WUIButton-${this.variant}-color-${this.color}`);
+        div.style.position = "absolute";
+        div.style.overflow = "hidden";
+        document.body.appendChild(div);
+        this.requiredWidth = div.clientWidth;
+        div.parentNode?.removeChild(div);
+    }
+
+    public init(): void {
+        super.init();
+    }
+
+    public setText(text: string): void {
+        this.text = text;
+        this.body.innerHTML = text;
+        this.updateRequiredWidth();
+    }
+
+    public setVariant(variant: ButonVariants = "contained"): void {
+        this.variant = variant;
+        this.configureStyles();
+    }
+
+    public setColor(color: Colors = "primary"): void {
+        this.color = color;
+        this.configureStyles();
+    }
+
+    public setFullWidth(fullWidth: boolean = false): void {
+        this.fullWidth = fullWidth;
+    }
+
+    public setMinWidth(minWidth: boolean = false): void {
+        this.minWidth = minWidth;
+        if (this.minWidth) {
+            if (this.requiredWidth > 0) {
+                console.log("cambiando tamano:", this.requiredWidth, " id:", this.id);
+                this.setW(this.requiredWidth);
+            }
+        }
+    }
+
+    public 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;
+    }
+
+    public getRequiredWidth(): number {
+        return this.requiredWidth;
+    }
+}
+
+export type wButtonProps = WidgetProps & {
+    text: string;
+    variant?: ButonVariants | null;
+    color?: Colors | null;
+    width?: number | null;
+    height?: number | null;
+};
+
+export const WButton = (props: wButtonProps) => {
+    if (!props.id) {
+        props.id = "button." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <button
+            id={props.id}
+            w-button
+            w-text={props.text}
+            w-variant={props.variant}
+            w-color={props.color}
+            w-width={props.width}
+            w-height={props.height}
+        />,
+        props
+    );
+};
+
+export function createButton(id: string, content: any, parent: Widget | null = null): Button {
+    let newButton = new Button(id, parent);
+
+    const dataText = content.getAttribute("w-text");
+    const dataVariant = content.getAttribute("w-variant");
+    const dataColor = content.getAttribute("w-color");
+    const dataWidth = content.getAttribute("w-width");
+    const dataHeight = content.getAttribute("w-height");
+
+    if (dataText) {
+        newButton.setText(dataText);
+    }
+
+    if (dataVariant) {
+        newButton.setVariant(dataVariant);
+    }
+
+    if (dataColor) {
+        newButton.setColor(dataColor);
+    }
+
+    if (dataWidth) {
+        newButton.setInitialW(dataWidth);
+    }
+
+    if (dataHeight) {
+        newButton.setInitialH(dataHeight);
+    }
+
+    return newButton;
+}

package/src/ui/buttonColor.ui.tsx

@@ -0,0 +1,87 @@
+import "./styles/buttoncolor.css";
+import { Button, wButtonProps } from "./button.ui";
+import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
+import { normalizeWidget } from "./widget.builder";
+import { UID } from "../core/uid";
+
+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 : "";
+    }
+}
+
+export type wButtonColorProps = Omit<wButtonProps, "text"> & {
+    value: string;
+};
+
+export const WButtonColor = (props: wButtonColorProps) => {
+    if (!props.id) {
+        props.id = "ButtonColor." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <button
+            id={props.id}
+            w-button-color
+            w-value={props.value}
+            w-variant={props.variant}
+            w-color={props.color}
+            w-width={props.width}
+            w-height={props.height}
+        />,
+        props
+    );
+};
+
+export function createButtonColor(
+    id: string,
+    content: any,
+    parent: Widget | null = null
+): ButtonColor {
+    let newButton = new ButtonColor(id, parent);
+
+    const dataValue = content.getAttribute("w-value");
+    const dataVariant = content.getAttribute("w-variant");
+    const dataColor = content.getAttribute("w-color");
+    const dataWidth = content.getAttribute("w-width");
+    const dataHeight = content.getAttribute("w-height");
+
+    if (dataValue) {
+        newButton.setValue(dataValue);
+    }
+
+    if (dataVariant) {
+        newButton.setVariant(dataVariant);
+    }
+
+    if (dataColor) {
+        newButton.setColor(dataColor);
+    }
+
+    if (dataWidth) {
+        newButton.setInitialW(dataWidth);
+    }
+
+    if (dataHeight) {
+        newButton.setInitialH(dataHeight);
+    }
+
+    return newButton;
+}

package/src/ui/buttonmenu.ui.tsx

@@ -0,0 +1,134 @@
+import { UID } from "../core/uid";
+import { SelectItem } from "../types/select.item.type";
+import { Button, wButtonProps } from "./button.ui";
+import { Menu } from "./menu.ui";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { Widget } from "./widget.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));
+    }
+}
+
+export type WButtonMenuProps = WidgetProps &
+    wButtonProps & {
+        children: any;
+    };
+
+export type WButtonMenuItemProps = {
+    id: string;
+    label?: string | null;
+    icon?: string | null;
+};
+
+export const WButtonMenu = (props: WButtonMenuProps) => {
+    if (!props.id) {
+        props.id = "ButtonMenu." + UID();
+    }
+
+    return normalizeWidget(
+        <div
+            id={props.id}
+            w-button-menu
+            w-text={props.text}
+            w-variant={props.variant}
+            w-color={props.color}
+        >
+            {props.children}
+        </div>,
+        props
+    );
+};
+
+export const WButtonMenuItem = (props: WButtonMenuItemProps) => {
+    return <div w-button-menu-item id={props.id} w-label={props.label} w-icon={props.icon}></div>;
+};
+
+export function createButtonMenu(
+    id: string,
+    content: any,
+    _parent: Widget | null = null
+): ButtonMenu {
+    let newButtonMenu = new ButtonMenu(id);
+
+    const btnText = content.getAttribute("w-text");
+    const btnColor = content.getAttribute("w-color");
+    const btnVariant = content.getAttribute("w-variant");
+
+    if (btnText) {
+        newButtonMenu.setText(btnText);
+    }
+
+    if (btnColor) {
+        newButtonMenu.setColor(btnColor);
+    }
+
+    if (btnVariant) {
+        newButtonMenu.setVariant(btnVariant);
+    }
+
+    content.childNodes.forEach((menuItem: HTMLElement, index: number) => {
+        if (menuItem.getAttribute("w-button-menu-item") !== null) {
+            const itemId = menuItem.getAttribute("id");
+            const itemLabel = menuItem.getAttribute("w-label");
+            const itemIcon = menuItem.getAttribute("w-icon");
+
+            if (itemId !== null) {
+                newButtonMenu.addItem(itemId, itemLabel || "Unnamed" + index, itemIcon || "");
+            }
+        }
+    });
+
+    return newButtonMenu;
+}

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

@@ -1,12 +1,21 @@
 import { OrientationTypes } from "src/types/orientation.type";
 import { IconButton } from "./IconButton.ui";
 import { ButonVariants, Button } from "./button.ui";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import {
+    connectWidgetCallback,
+    getOnlyEventProps,
+    Widget,
+    WidgetAlignTypes,
+    WidgetTypes,
+} from "./widget.ui";
+import { createWidget, normalizeWidget, WidgetProps } from "./widget.builder";
+import { UID } from "../core/uid";
 
 export class ButtonStack extends Widget {
     orientation: OrientationTypes;
     buttons: Map<string, Button | IconButton>;
     activeButton: string | null;
+    centeredButtons: boolean;
     constructor(
         id: string,
         orientation: OrientationTypes = "horizontal",
@@ -14,6 +23,8 @@ export class ButtonStack extends Widget {
     ) {
         super(id, "div", parent);
 
+        this.centeredButtons = false;
+
         this.orientation = orientation;
 
         if (this.orientation === "horizontal") {
@@ -74,6 +85,9 @@ export class ButtonStack extends Widget {
 
     public addButton(button: Button | IconButton): void {
         this.buttons.set(button.id, button);
+        if (button instanceof IconButton && this.centeredButtons) {
+            (button as IconButton).setCenterX(true);
+        }
         button.setType(WidgetTypes.FILL);
         button.subscribe({ event: "click", then: () => this.setActive(button.id) });
         this.addChild(button);
@@ -91,4 +105,56 @@ export class ButtonStack extends Widget {
     private thereAreMoreThanTwoButtons(): boolean {
         return this.buttons.size > 2;
     }
+
+    public setCenteredButtons(centeredButtons: boolean): void {
+        this.centeredButtons = centeredButtons;
+    }
+}
+
+export type WButtonStackProps = WidgetProps & {
+    centerX?: boolean | null;
+    children: any;
+};
+
+export const WButtonStack = (props: WButtonStackProps) => {
+    if (!props.id) {
+        props.id = "ButtonStack." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <div id={props.id} w-button-stack w-centerX={props.centerX}>
+            {props.children}
+        </div>,
+        props
+    );
+};
+
+export function createButtonStack(
+    id: string,
+    content: any,
+    parent: Widget | null = null
+): ButtonStack {
+    const dataOrientation = content.getAttribute("w-orientation")
+        ? content.getAttribute("w-orientation")
+        : "vertical";
+
+    let newStack = new ButtonStack(id, dataOrientation, parent);
+
+    if (content.getAttribute("w-centerX")) {
+        newStack.setCenteredButtons(true);
+    }
+
+    content.childNodes.forEach((item: HTMLElement, _index: number) => {
+        if (item.getAttribute("w-button") || item.getAttribute("w-icon-button")) {
+            const widget = createWidget(item) as Button;
+
+            if (widget !== null) {
+                newStack.addButton(widget);
+            }
+        }
+    });
+
+    return newStack;
 }