@gisce/ooui 2.38.0 → 2.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/ooui",
-  "version": "2.38.0",
+  "version": "2.39.0",
   "engines": {
     "node": "20.5.0"
   },

package/src/Card.ts

@@ -0,0 +1,52 @@
+import Spinner from "./Spinner";
+
+class Card extends Spinner {
+  _title: string | null = null;
+  get title(): string | null {
+    return this._title;
+  }
+
+  set title(value: string | null) {
+    this._title = value;
+  }
+
+  _icon: string | null = null;
+  get icon(): string | null {
+    return this._icon;
+  }
+
+  set icon(value: string | null) {
+    this._icon = value;
+  }
+
+  /**
+   * Height of the card component
+   */
+  _height: number | undefined = undefined;
+
+  get height(): number | undefined {
+    return this._height;
+  }
+
+  set height(value: number | undefined) {
+    this._height = value;
+  }
+
+  constructor(props: any) {
+    super(props);
+    if (props) {
+      if (props.title) {
+        this._title = props.title;
+      }
+      if (props.icon) {
+        this._icon = props.icon;
+      }
+      if (props.height) {
+        const parsedHeight = parseInt(props.height);
+        this._height = isNaN(parsedHeight) ? undefined : parsedHeight;
+      }
+    }
+  }
+}
+
+export default Card;

package/src/WidgetFactory.ts

@@ -45,6 +45,7 @@ import Spinner from "./Spinner";
 import Carousel from "./Carousel";
 import ColorPicker from "./ColorPicker";
 import QRCode from "./QRCode";
+import Card from "./Card";
 
 class WidgetFactory {
   /**
@@ -63,6 +64,9 @@ class WidgetFactory {
       case "group":
         this._widgetClass = Group;
         break;
+      case "card":
+        this._widgetClass = Card;
+        break;
       case "label":
         this._widgetClass = Label;
         break;
@@ -227,6 +231,7 @@ class WidgetFactory {
       case "notebook":
       case "page":
       case "group":
+      case "card":
         return new this._widgetClass({ ...props, type: finalType });
       case "button":
         return new this._widgetClass({

package/src/index.ts

@@ -57,6 +57,7 @@ import Spinner from "./Spinner";
 import Carousel from "./Carousel";
 import ColorPicker from "./ColorPicker";
 import QRCode from "./QRCode";
+import Card from "./Card";
 
 import {
   Graph,
@@ -150,4 +151,5 @@ export {
   Carousel,
   ColorPicker,
   QRCode,
+  Card,
 };

package/src/spec/Card.spec.ts

@@ -0,0 +1,89 @@
+import Card from "../Card";
+import WidgetImpl from "./fixtures/WidgetImpl";
+import WidgetFactory from "../WidgetFactory";
+import { it, expect, describe } from "vitest";
+
+describe("A Card", () => {
+  it("should be constructed with 4 columns and a colspan of 4", () => {
+    const card4 = new Card({ col: 4, colspan: 4 });
+    expect(card4.colspan).toBe(4);
+    expect(card4.container.columns).toBe(4);
+  });
+  it("should be constructed with 6 columns and a colspan of 2", () => {
+    const card4 = new Card({ col: 6, colspan: 2 });
+    expect(card4.colspan).toBe(2);
+    expect(card4.container.columns).toBe(6);
+  });
+  it("should have 1 rows if 4 items", () => {
+    const card4 = new Card({ col: 4, colspan: 4 });
+    card4.container.addWidget(new WidgetImpl({ name: "1" }));
+    card4.container.addWidget(new WidgetImpl({ name: "2" }));
+    card4.container.addWidget(new WidgetImpl({ name: "3" }));
+    card4.container.addWidget(new WidgetImpl({ name: "4" }));
+    expect(card4.container.rows.length).toBe(1);
+  });
+  it("should have 2 rows if 5 items", () => {
+    const card4 = new Card({ col: 4, colspan: 4 });
+    card4.container.addWidget(new WidgetImpl({ name: "1" }));
+    card4.container.addWidget(new WidgetImpl({ name: "2" }));
+    card4.container.addWidget(new WidgetImpl({ name: "3" }));
+    card4.container.addWidget(new WidgetImpl({ name: "4" }));
+    card4.container.addWidget(new WidgetImpl({ name: "5" }));
+    expect(card4.container.rows.length).toBe(2);
+  });
+  it("can have an icon property", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      title: "General",
+      icon: "home",
+    };
+    const widget = widgetFactory.createWidget("card", props);
+    expect(widget.icon).toEqual("home");
+  });
+  it("can have a title property", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      title: "Card Title",
+      icon: "user",
+    };
+    const widget = widgetFactory.createWidget("card", props);
+    expect(widget.title).toEqual("Card Title");
+  });
+  it("can have a height property", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      title: "Card Title",
+      height: "200",
+    };
+    const widget = widgetFactory.createWidget("card", props);
+    expect(widget.height).toEqual(200);
+  });
+  it("should handle invalid height values", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      title: "Card Title",
+      height: "invalid",
+    };
+    const widget = widgetFactory.createWidget("card", props);
+    expect(widget.height).toBeUndefined();
+  });
+  describe("working as a spinner", () => {
+    it("should be loading false as default", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        title: "A card",
+      };
+      const widget = widgetFactory.createWidget("card", props);
+      expect(widget.loading).toBe(false);
+    });
+    it("should be loading true if set", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        title: "A card",
+        loading: true,
+      };
+      const widget = widgetFactory.createWidget("card", props);
+      expect(widget.loading).toBe(true);
+    });
+  });
+});