cedro 0.1.5 → 0.1.6

package/package.json

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

package/src/ui/image.ui.ts

@@ -0,0 +1,49 @@
+import "./styles/image.css";
+import { Widget, WidgetTypes } 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");
+    }
+}

package/src/ui/index.ts

@@ -1,4 +1,4 @@
-import { Accordion } from "./accordion";
+import { Accordion } from "./accordion.ui";
 import { Button } from "./button.ui";
 import { ButtonColor } from "./buttonColor.ui";
 import { ButtonMenu } from "./buttonmenu.ui";
@@ -9,6 +9,7 @@ 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";
@@ -37,6 +38,7 @@ export {
     Icon,
     IconButton,
     IconButtonMenu,
+    Image,
     Label,
     Menu,
     ProgressBar,

package/src/ui/styles/image.css

@@ -0,0 +1,19 @@
+.WUIImageContainer {
+    position: absolute;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.WUIImageContainer img {
+    margin: auto;
+}
+
+.WUIImageFillWidth {
+    width: 100% !important;
+}
+
+.WUIImageFillHeight {
+    height: 100% !important;
+}