cedro 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cedro",
-    "version": "0.1.7",
+    "version": "0.1.9",
     "type": "module",
     "devDependencies": {
         "@types/node": "^20.4.4",

package/src/core/application.builder.tsx

@@ -0,0 +1,60 @@
+//import { createWidget } from "src/ui/builder/widget.builder";
+import { WidgetAlignTypes } from "../ui";
+import { createWidget } from "../ui/widget.builder";
+import Application, { ApplicationProps } from "./application.core";
+
+function getApplicationProps(content: any): ApplicationProps {
+    let props: ApplicationProps = {
+        title: content.title,
+        padding: 0,
+        orientation: null,
+        children: null,
+    };
+
+    if (content.getAttribute("w-title") !== null) {
+        props.title = content.getAttribute("w-title");
+    }
+
+    if (content.getAttribute("w-padding") !== null) {
+        props.padding = parseInt(content.getAttribute("w-padding"));
+    }
+
+    if (content.getAttribute("w-orientation") !== null) {
+        props.orientation = content.getAttribute("w-orientation");
+    }
+
+    return props;
+}
+
+export function createApplication(content: any): Application {
+    const appProps = getApplicationProps(content);
+    const newApp = new Application(appProps.title);
+
+    if (appProps.padding) {
+        newApp.getRoot().setPadding(appProps.padding);
+    }
+
+    if (appProps.orientation) {
+        if (appProps.orientation === "horizontal") {
+            newApp.getRoot().setAlign(WidgetAlignTypes.HORIZONTAL);
+        } else {
+            newApp.getRoot().setAlign(WidgetAlignTypes.VERTICAL);
+        }
+    }
+
+    content.childNodes.forEach((item: HTMLElement) => {
+        if (item.getAttribute("w-widget-collection")) {
+            item.childNodes.forEach((ietmWidget: any) => {
+                const appWidgets = createWidget(ietmWidget);
+
+                if (appWidgets !== null) {
+                    newApp.getRoot().addChild(appWidgets);
+                }
+            });
+        } else if (item.getAttribute("w-routes")) {
+            console.log("routes:", item);
+        }
+    });
+
+    return newApp;
+}

package/src/core/{application.core.ts → application.core.tsx}

@@ -9,17 +9,20 @@ import "material-icons/iconfont/material-icons.css";
 import { Widget, WidgetAlignTypes, WidgetTypes } from "../ui/widget.ui";
 import { Screen } from "./screeen.core";
 import { IApplication, IScreenSize } from "../interfaces/application.interface";
-import { IWidget } from "../interfaces/widget.interface";
+import { IWidget, WUICallback, WUIEvent } from "../interfaces/widget.interface";
 import Navigo from "navigo";
 import { Dialog } from "../ui/dialog";
 import { Label } from "../ui/label.ui";
 import { Seo } from "./seo";
 import { DarkTheme, LightTheme, ThemeManager } from "./themes.core";
 import { Loading } from "../ui/loading.ui";
+import { OrientationTypes } from "../types/orientation.type";
 
 class WApplication implements IApplication {
     seo: Seo;
 
+    subscribers: Map<string, WUICallback>;
+
     screen: Screen;
     root: Widget;
     router: Navigo;
@@ -35,7 +38,10 @@ class WApplication implements IApplication {
     constructor(title: string) {
         this.seo = new Seo(title);
 
+        this.subscribers = new Map<string, WUICallback>();
+
         this.root = new Widget("root");
+
         this.root.setType(WidgetTypes.FILL);
         this.screen = new Screen();
         this.router = new Navigo("/");
@@ -53,6 +59,7 @@ class WApplication implements IApplication {
         window.addEventListener("load", () => {
             this.screen.updateSize();
             this.getRoot().resize();
+            this.run("load");
         });
 
         this.alertDialog = new Dialog("Dialog.alert", null);
@@ -63,6 +70,26 @@ class WApplication implements IApplication {
         this.theme.load();
     }
 
+    public run(eventId: WUIEvent): void {
+        this.subscribers.forEach((callback) => {
+            if (callback.event == eventId) {
+                callback.then(new Event(eventId), null);
+            }
+        });
+    }
+
+    public subscribe(cb: WUICallback) {
+        const randomId =
+            Math.random().toString(36).substring(2, 15) +
+            Math.random().toString(36).substring(2, 15);
+
+        this.subscribers.set(`${randomId}.${cb.event}`, cb);
+    }
+
+    public unsubscribe(event: WUIEvent) {
+        this.subscribers.delete(`${event}`);
+    }
+
     alert(msg: string, onOk: () => void = () => {}, onCancell: () => void = () => {}): void {
         const mesageLabel = new Label("alert.label", "span");
 
@@ -151,6 +178,7 @@ class WApplication implements IApplication {
         });
 
         this.root.render();
+        this.seo.setTitle(this.seo.getTitle());
     }
 
     /**
@@ -182,4 +210,43 @@ class WApplication implements IApplication {
     }
 }
 
+export type ApplicationProps = {
+    title: string;
+    padding?: number | null;
+    orientation?: OrientationTypes | null;
+    children: any;
+};
+
+export const Application = (props: ApplicationProps) => {
+    return (
+        <div title={props.title} w-padding={props.padding} w-orientation={props.orientation}>
+            {props.children}
+        </div>
+    );
+};
+
+export type WidgetsProps = {
+    children: any;
+};
+
+export const Widgets = (props: WidgetsProps) => {
+    return <div w-widget-collection>{props.children}</div>;
+};
+
+export type RoutesProps = {
+    children: any;
+};
+
+export const Routes = (props: RoutesProps) => {
+    return <div w-routes>{props.children}</div>;
+};
+
+export type RouteProps = {
+    src: string;
+};
+
+export const Route = (props: RouteProps) => {
+    return <a w-path href={props.src}></a>;
+};
+
 export default WApplication;

package/src/index.ts

@@ -2,7 +2,7 @@ import Application from "./core/application.core";
 import { DOMcreateElement, DOMcreateFragment } from "./core/jsxsupport";
 import { Widget, WidgetTypes, WidgetAlignTypes } from "./ui/widget.ui";
 import { initWidgetCollection } from "./ui/widget.collection";
-import { createWidget } from "./ui/widget.builder.ui";
+import { createWidget } from "./ui/widget.builder";
 
 initWidgetCollection();
 

package/src/interfaces/application.interface.ts

@@ -1,6 +1,6 @@
 import Navigo from "navigo";
 import { IScreen } from "./screen.interface";
-import { IWidget } from "./widget.interface";
+import { IWidget, WUICallback, WUIEvent } from "./widget.interface";
 import { Dialog } from "../ui/dialog";
 import { Seo } from "../core/seo";
 import { ThemeManager } from "../core/themes.core";
@@ -26,10 +26,16 @@ export interface IApplication {
     confirmDialog: Dialog;
     mediaQueries: Map<string, IScreenSize>;
 
+    subscribers: Map<string, WUICallback>;
+
     theme: ThemeManager;
 
     attachWidget(guest: IWidget, host: IWidget): void;
 
+    subscribe: (cb: WUICallback) => void;
+    unsubscribe: (event: WUIEvent) => void;
+    run(eventId: WUIEvent): void;
+
     addMediaQuery(
         query: string,
         minWidth: number,

package/src/interfaces/widget.interface.ts

@@ -2,6 +2,8 @@ import { WidgetAlignTypes, WidgetTypes } from "../ui/widget.ui";
 import { Vector2D } from "../types/vector2d.type";
 
 export type WUIEvent =
+    | "widget-load"
+    | "load"
     | "click"
     | "resize"
     | "mousedown"
@@ -15,7 +17,7 @@ export type WUIEvent =
 
 export type WUICallback = {
     event: WUIEvent;
-    then: (event: Event, wuie: IWidget) => void;
+    then: (event: Event, wuie: IWidget | null) => void;
 };
 
 export interface IWidget {

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

@@ -1,6 +1,12 @@
 import "./styles/button.css";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
-import { Button } from "./button.ui";
+import {
+    Widget,
+    WidgetAlignTypes,
+    WidgetTypes,
+    connectWidgetCallback,
+    getOnlyEventProps,
+} from "./widget.ui";
+import { Button, wButtonProps } from "./button.ui";
 import { Icon } from "./Icon.ui";
 import { Label } from "./label.ui";
 
@@ -112,3 +118,74 @@ export class IconButton extends Button {
         this.icon.setIcon(icon);
     }
 }
+
+export type wIconButtonProps = Omit<wButtonProps, "text"> & {
+    icon?: string | null;
+    text?: string | null;
+    onlyIcon?: boolean | null;
+};
+
+export const WIconButton = (props: wIconButtonProps) => {
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return (
+        <button
+            id={props.id}
+            w-icon-button
+            w-icon={props.icon}
+            w-text={props.text}
+            w-only-icon={props.onlyIcon}
+            w-variant={props.variant}
+            w-color={props.color}
+            w-width={props.width}
+            w-height={props.height}
+            w-class={props.classNames}
+            w-orientation={props.orientation}
+            w-fixed-size={props.fixedSize}
+            w-padding={props.padding}
+            w-type={props.type}
+        />
+    );
+};
+
+export function createIconButton(
+    id: string,
+    content: any,
+    parent: Widget | null = null
+): IconButton {
+    const dataIcon = content.getAttribute("w-icon");
+    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");
+    const dataOnlyIcon = content.getAttribute("w-only-icon");
+
+    let newIconButton = new IconButton(id, dataIcon, parent);
+
+    if (dataText) {
+        newIconButton.setText(dataText);
+    }
+
+    if (dataVariant) {
+        newIconButton.setVariant(dataVariant);
+    }
+
+    if (dataColor) {
+        newIconButton.setColor(dataColor);
+    }
+
+    if (dataWidth) {
+        newIconButton.setInitialW(dataWidth);
+    }
+
+    if (dataHeight) {
+        newIconButton.setInitialH(dataHeight);
+    }
+
+    if (dataOnlyIcon) {
+        newIconButton.onlyIcon();
+    }
+
+    return newIconButton;
+}

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

@@ -2,7 +2,8 @@ import "./styles/button.css";
 import "./styles/stackbutton.css";
 import "./styles/vstackbutton.css";
 import { Colors } from "./colors.ui";
-import { Widget } from "./widget.ui";
+import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
+import { WidgetProps } from "./widget.builder";
 
 export type ButonVariants =
     | "contained"
@@ -103,3 +104,64 @@ export class Button extends Widget {
         return this.text;
     }
 }
+
+export type wButtonProps = WidgetProps & {
+    text: string;
+    variant?: ButonVariants | null;
+    color?: Colors | null;
+    width?: number | null;
+    height?: number | null;
+};
+
+export const WButton = (props: wButtonProps) => {
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return (
+        <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}
+            w-class={props.classNames}
+            w-orientation={props.orientation}
+            w-fixed-size={props.fixedSize}
+            w-padding={props.padding}
+            w-type={props.type}
+        />
+    );
+};
+
+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/checkbox.ui.tsx

@@ -0,0 +1,47 @@
+import { ToggleButton } from "./toggle.ui";
+import { WidgetProps } from "./widget.builder";
+import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
+
+export class Checkbox extends ToggleButton {
+    constructor(id: string, text: string = "", parent: Widget | null = null) {
+        super(id, text, "check_box_outlined", "check_box_outline_blank", parent);
+    }
+}
+
+export type wCheckboxProps = WidgetProps & {
+    text: string;
+    checked?: boolean | null;
+};
+
+export const WCheckbox = (props: wCheckboxProps) => {
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return (
+        <div
+            id={props.id}
+            w-checkbox
+            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}
+        />
+    );
+};
+
+export function createCheckbox(id: string, content: any, parent: Widget | null = null): Checkbox {
+    const dataText = content.getAttribute("w-text");
+    const dataChecked = content.getAttribute("w-checked");
+
+    let newCheckbox = new Checkbox(id, dataText, parent);
+
+    if (dataChecked !== null) {
+        newCheckbox.setState(true);
+    } else {
+        newCheckbox.setState(false);
+    }
+
+    return newCheckbox;
+}

package/src/ui/container.ui.tsx

@@ -0,0 +1,76 @@
+import { OrientationTypes } from "src/types/orientation.type";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import { UID } from "../core/uid";
+import { WidgetProps, createWidget } from "./widget.builder";
+
+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({});
+}
+
+export type ContainerProps = Omit<WidgetProps, "id"> & {
+    children: any;
+};
+
+export const WContainer = (props: ContainerProps) => {
+    return (
+        <div
+            w-container
+            w-class={props.classNames}
+            w-orientation={props.orientation}
+            w-fixed-size={props.fixedSize}
+            w-padding={props.padding}
+            w-type={props.type}
+        >
+            {props.children}
+        </div>
+    );
+};
+
+export function createContainer(content: any, parent: Widget | null = null): Container {
+    const dataOrientation = content.getAttribute("w-orientation");
+
+    let orientation: OrientationTypes = dataOrientation ? dataOrientation : "horizontal";
+
+    let newContainer = new Container({ orientation, parent });
+
+    content.childNodes.forEach((item: HTMLElement) => {
+        const widget = createWidget(item);
+
+        if (widget !== null) {
+            newContainer.addChild(widget);
+        }
+    });
+
+    return newContainer;
+}

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

@@ -1,5 +1,6 @@
 import { Draggable } from "./draggable.ui";
 import "./styles/hpanel.css";
+import { WidgetProps, createWidget } from "./widget.builder";
 import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
 
 const HPANEL_HANDLER_SIZE = 4;
@@ -125,3 +126,39 @@ export class HPanel extends Widget {
         this.handler.setY(this.getY(true));
     }
 }
+
+export type WHPanelProps = WidgetProps & {
+    children: any;
+};
+
+export const WHPanel = (props: WHPanelProps) => {
+    return (
+        <div
+            w-hpanel
+            w-class={props.classNames}
+            w-fixed-size={props.fixedSize}
+            w-padding={props.padding}
+            w-type={props.type}
+        >
+            {props.children}
+        </div>
+    );
+};
+
+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/image.ui.tsx

@@ -0,0 +1,112 @@
+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;
+}

package/src/ui/index.ts

@@ -24,7 +24,7 @@ import { DataGrid } from "./datagrid.ui";
 import { RadioButton } from "./radiobutton";
 import { ValueBar } from "./valuebar.ui";
 import { VPanel } from "./vpanel.ui";
-import { createWidget } from "./widget.builder.ui";
+import { createWidget } from "./widget.builder";
 import { IconButtonMenu } from "./iconButtonMenu.ui";
 
 export type { ContainerParams };