@gisce/ooui 2.37.1 → 2.38.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/ooui",
-  "version": "2.37.1",
+  "version": "2.38.0-alpha.2",
   "engines": {
     "node": "20.5.0"
   },

package/src/ActionButtons.ts

@@ -0,0 +1,5 @@
+import Field from "./Field";
+
+class ActionButtons extends Field {}
+
+export default ActionButtons;

package/src/Card.ts

@@ -0,0 +1,35 @@
+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;
+  }
+
+  constructor(props: any) {
+    super(props);
+    if (props) {
+      if (props.title) {
+        this._title = props.title;
+      }
+      if (props.icon) {
+        this._icon = props.icon;
+      }
+    }
+  }
+}
+
+export default Card;

package/src/WidgetFactory.ts

@@ -3,6 +3,7 @@ import Page from "./Page";
 import Group from "./Group";
 import Button from "./Button";
 import ButtonGroup from "./ButtonGroup";
+import ActionButtons from "./ActionButtons";
 import Label from "./Label";
 import Char from "./Char";
 import Text from "./Text";
@@ -44,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 {
   /**
@@ -62,6 +64,9 @@ class WidgetFactory {
       case "group":
         this._widgetClass = Group;
         break;
+      case "card":
+        this._widgetClass = Card;
+        break;
       case "label":
         this._widgetClass = Label;
         break;
@@ -77,6 +82,9 @@ class WidgetFactory {
       case "buttonGroup":
         this._widgetClass = ButtonGroup;
         break;
+      case "action_buttons":
+        this._widgetClass = ActionButtons;
+        break;
       case "selection":
         this._widgetClass = Selection;
         break;
@@ -223,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

@@ -27,6 +27,7 @@ import Page from "./Page";
 import Separator from "./Separator";
 import Button from "./Button";
 import ButtonGroup from "./ButtonGroup";
+import ActionButtons from "./ActionButtons";
 import Reference from "./Reference";
 import Binary from "./Binary";
 import Image from "./Image";
@@ -56,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,
@@ -105,6 +107,7 @@ export {
   Separator,
   Button,
   ButtonGroup,
+  ActionButtons,
   Reference,
   Binary,
   Image,
@@ -148,4 +151,5 @@ export {
   Carousel,
   ColorPicker,
   QRCode,
+  Card,
 };

package/src/spec/Card.spec.ts

@@ -0,0 +1,71 @@
+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");
+  });
+  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);
+    });
+  });
+});