cedro 0.1.6 → 0.1.7

package/package.json

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

package/src/core/uid.ts

@@ -0,0 +1,3 @@
+export function UID(): string {
+    return "w-uid-" + Date.now().toString(36) + "-" + Math.random().toString(36);
+}

package/src/ui/container.ui.ts

@@ -0,0 +1,33 @@
+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;
+};
+
+export class Container extends Widget {
+    constructor(params: ContainerParams) {
+        const { orientation = "horizontal", parent = null, size = null } = params;
+
+        super(UID(), "div", parent);
+
+        if (orientation === "horizontal") {
+            this.setAlign(WidgetAlignTypes.HORIZONTAL);
+        } else {
+            this.setAlign(WidgetAlignTypes.VERTICAL);
+        }
+
+        if (size !== null) {
+            this.setFixedSize(size);
+        }
+
+        this.setType(WidgetTypes.FILL);
+    }
+}
+
+export function Spacer(): Container {
+    return new Container({});
+}

package/src/ui/index.ts

@@ -4,6 +4,7 @@ import { ButtonColor } from "./buttonColor.ui";
 import { ButtonMenu } from "./buttonmenu.ui";
 import { ButtonStack } from "./buttonstack.ui";
 import { Checkbox } from "./checkbox.ui";
+import { Container, Spacer, ContainerParams } from "./container.ui";
 import { WidgetAlignTypes, WidgetTypes, Widget } from "./widget.ui";
 import { Dialog } from "./dialog";
 import { HPanel } from "./hpanel.ui";
@@ -26,6 +27,8 @@ import { VPanel } from "./vpanel.ui";
 import { createWidget } from "./widget.builder.ui";
 import { IconButtonMenu } from "./iconButtonMenu.ui";
 
+export type { ContainerParams };
+
 export {
     Accordion,
     Button,
@@ -33,6 +36,7 @@ export {
     ButtonMenu,
     ButtonStack,
     Checkbox,
+    Container,
     Dialog,
     HPanel,
     Icon,
@@ -44,6 +48,7 @@ export {
     ProgressBar,
     RadioButton,
     Select,
+    Spacer,
     Switch,
     Tabs,
     TextArea,

package/src/ui/label.ui.ts

@@ -1,26 +1,14 @@
 import { Colors } from "./colors.ui";
 import { Widget } from "./widget.ui";
 
-export type LabelVariants =
-    | "h1"
-    | "h2"
-    | "h3"
-    | "h4"
-    | "h5"
-    | "h6"
-    | "p"
-    | "span";
+export type LabelVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
 
 export class Label extends Widget {
     variant: LabelVariants;
     color: Colors;
     text: string;
 
-    constructor(
-        id: string,
-        variant: LabelVariants = "span",
-        parent: Widget | null = null
-    ) {
+    constructor(id: string, variant: LabelVariants = "span", parent: Widget | null = null) {
         super(id, variant, parent);
 
         this.variant = variant;
@@ -34,28 +22,36 @@ export class Label extends Widget {
         super.init();
     }
 
-    setText(text: string): void {
+    public centerV(): void {
+        this.getBody().style.lineHeight = this.getH() + "px";
+    }
+
+    public centerH(): void {
+        this.getBody().style.textAlign = "center";
+    }
+
+    public setText(text: string): void {
         this.text = text;
         this.body.innerHTML = text;
     }
 
-    setVariant(variant: LabelVariants = "span"): void {
+    public setVariant(variant: LabelVariants = "span"): void {
         this.variant = variant;
     }
 
-    setColor(color: Colors = "primary"): void {
+    public setColor(color: Colors = "primary"): void {
         this.color = color;
     }
 
-    getVariant(): LabelVariants {
+    public getVariant(): LabelVariants {
         return this.variant;
     }
 
-    getColor(): Colors {
+    public getColor(): Colors {
         return this.color;
     }
 
-    getText(): string {
+    public getText(): string {
         return this.text;
     }
 }