@gisce/ooui 2.40.0-alpha.2 → 2.40.0-alpha.3

package/package.json

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

package/src/Icon.ts

@@ -0,0 +1,59 @@
+import Field from "./Field";
+
+class Icon extends Field {
+  /**
+   * Icon name
+   */
+  _name: string = "";
+  get name(): string {
+    return this._name;
+  }
+
+  set name(value: string) {
+    this._name = value;
+  }
+
+  /**
+   * Icon size
+   */
+  _size: number = 16;
+  get size(): number {
+    return this._size;
+  }
+
+  set size(value: number) {
+    this._size = value;
+  }
+
+  /**
+   * Icon color
+   */
+  _color: string = "";
+  get color(): string {
+    return this._color;
+  }
+
+  set color(value: string) {
+    this._color = value;
+  }
+
+  constructor(props?: any) {
+    super({ ...props, nolabel: true });
+
+    if (props) {
+      if (props.name) {
+        this._name = props.name;
+      }
+
+      if (props.size) {
+        this._size = props.size;
+      }
+
+      if (props.color) {
+        this._color = props.color;
+      }
+    }
+  }
+}
+
+export default Icon;

package/src/WidgetFactory.ts

@@ -25,6 +25,7 @@ import Separator from "./Separator";
 import Reference from "./Reference";
 import Binary from "./Binary";
 import Image from "./Image";
+import Icon from "./Icon";
 import FiberGrid from "./FiberGrid";
 import Timeline from "./Timeline";
 import Indicator from "./Indicator";
@@ -141,6 +142,9 @@ class WidgetFactory {
       case "image":
         this._widgetClass = Image;
         break;
+      case "icon":
+        this._widgetClass = Icon;
+        break;
       case "fiber_grid":
         this._widgetClass = FiberGrid;
         break;

package/src/index.ts

@@ -32,6 +32,7 @@ import ActionButtons from "./ActionButtons";
 import Reference from "./Reference";
 import Binary from "./Binary";
 import Image from "./Image";
+import Icon from "./Icon";
 import { parseContext, parseContextFields } from "./helpers/contextParser";
 import {
   transformDomainForChildWidget,
@@ -113,6 +114,7 @@ export {
   Reference,
   Binary,
   Image,
+  Icon,
   parseContext,
   parseContextFields,
   transformDomainForChildWidget,

package/src/spec/Icon.spec.ts

@@ -0,0 +1,93 @@
+import WidgetFactory from "../WidgetFactory";
+import { it, expect, describe } from "vitest";
+
+describe("An Icon", () => {
+  it("should have an id corresponding to field name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+    };
+
+    const widget = widgetFactory.createWidget("icon", props);
+
+    expect(widget.id).toBe("icon1");
+  });
+
+  it("should properly have nolabel as true by default", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+    };
+    const widget = widgetFactory.createWidget("icon", props);
+
+    expect(widget.nolabel).toBe(true);
+  });
+
+  it("should properly set name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+    };
+    const widget = widgetFactory.createWidget("icon", props);
+
+    widget.name = "home";
+    expect(widget.name).toBe("home");
+  });
+
+  it("should properly set size", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+      size: 24,
+    };
+    const widget = widgetFactory.createWidget("icon", props);
+
+    expect(widget.size).toBe(24);
+  });
+
+  it("should have default size of 16", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+    };
+    const widget = widgetFactory.createWidget("icon", props);
+
+    expect(widget.size).toBe(16);
+  });
+
+  it("should properly set color", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+      color: "#FF0000",
+    };
+    const widget = widgetFactory.createWidget("icon", props);
+
+    expect(widget.color).toBe("#FF0000");
+  });
+
+  it("should have empty color by default", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+    };
+    const widget = widgetFactory.createWidget("icon", props);
+
+    expect(widget.color).toBe("");
+  });
+
+  it("should properly parse all props together", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+      size: 32,
+      color: "blue",
+    };
+    const widget = widgetFactory.createWidget("icon", props);
+
+    widget.name = "star";
+    expect(widget.name).toBe("star");
+    expect(widget.size).toBe(32);
+    expect(widget.color).toBe("blue");
+  });
+});