@gisce/ooui 2.23.0-alpha.1 → 2.23.0-alpha.3

package/package.json

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

package/src/Carousel.ts

@@ -0,0 +1,30 @@
+import ContainerWidget from "./ContainerWidget";
+import Group from "./Group";
+import { parseBoolAttribute } from "./helpers/nodeParser";
+
+class Carousel extends ContainerWidget {
+  _autoPlay = true;
+
+  get autoPlay(): boolean {
+    return this._autoPlay;
+  }
+
+  set autoPlay(value: boolean) {
+    this._autoPlay = value;
+  }
+
+  get items(): Group[] {
+    return this._container.rows.flat().filter((g) => !g.invisible) as Group[];
+  }
+
+  constructor(props?: any) {
+    super(props);
+    if (props) {
+      if ("auto_play" in props) {
+        this._autoPlay = parseBoolAttribute(props.auto_play);
+      }
+    }
+  }
+}
+
+export default Carousel;

package/src/Field.ts

@@ -106,6 +106,14 @@ class Field extends Widget {
     this._sum = value;
   }
 
+  get suffix(): string {
+    return this._parsedWidgetProps.suffix || "";
+  }
+
+  get prefix(): string {
+    return this._parsedWidgetProps.prefix || "";
+  }
+
   /**
    * Values and keys
    */

package/src/Form.ts

@@ -3,7 +3,11 @@ import Container from "./Container";
 import ContainerWidget from "./ContainerWidget";
 import Widget from "./Widget";
 import { ParsedNode } from "./helpers/nodeParser";
-import { evaluateAttributes, replaceEntities } from "./helpers/attributeParser";
+import {
+  evaluateAttributes,
+  replaceEntities,
+  parseWidgetProps,
+} from "./helpers/attributeParser";
 import { evaluateStates, evaluateButtonStates } from "./helpers/stateParser";
 import { parseContext } from "./helpers/contextParser";
 import { parseOnChange } from "./helpers/onChangeParser";
@@ -208,6 +212,11 @@ class Form {
               );
             }
             widgetType = this._fields[name].type;
+            // Merge _fields[widget_props] with attributes[widget_props]
+            attributes.widget_props = {
+              ...parseWidgetProps(attributes.widget_props),
+              ...(this._fields[name].widget_props || {}),
+            };
           }
           tagAttributes = {
             ...this._fields[name],

package/src/Widget.ts

@@ -1,4 +1,4 @@
-import { replaceEntities } from "./helpers/attributeParser";
+import { replaceEntities, parseWidgetProps } from "./helpers/attributeParser";
 import { parseBoolAttribute } from "./helpers/nodeParser";
 
 abstract class Widget {
@@ -161,17 +161,7 @@ abstract class Widget {
         this._fieldType = props.fieldsWidgetType;
       }
       if (props.widget_props) {
-        if (typeof props.widget_props === "string") {
-          try {
-            this._parsedWidgetProps = JSON.parse(
-              props.widget_props.replace(/'/g, '"'),
-            );
-          } catch (err) {
-            console.error("Error parsing widget_props");
-          }
-        } else {
-          this._parsedWidgetProps = props.widget_props;
-        }
+        this._parsedWidgetProps = parseWidgetProps(props.widget_props);
       }
       if (props.key) {
         this._key = props.key;

package/src/WidgetFactory.ts

@@ -41,6 +41,7 @@ import Comments from "./Comments";
 import JSONField from "./JSONField";
 import Email from "./Email";
 import Spinner from "./Spinner";
+import Carousel from "./Carousel";
 
 class WidgetFactory {
   /**
@@ -184,6 +185,9 @@ class WidgetFactory {
       case "spinner":
         this._widgetClass = Spinner;
         break;
+      case "carousel":
+        this._widgetClass = Carousel;
+        break;
       default:
         break;
     }

package/src/helpers/attributeParser.ts

@@ -184,6 +184,22 @@ const parseAttributes = ({
   return newAttributes;
 };
 
+export const parseWidgetProps = (widget_props: string | object): object => {
+  if (widget_props === undefined) {
+    return {};
+  }
+  if (typeof widget_props === "string") {
+    try {
+      return JSON.parse(widget_props.replace(/'/g, '"'));
+    } catch (err) {
+      console.error("Error parsing widget_props");
+      return {};
+    }
+  } else {
+    return widget_props;
+  }
+};
+
 export const parseJsonAttributes = ({
   attrs,
   values,

package/src/index.ts

@@ -53,6 +53,7 @@ import JSONField from "./JSONField";
 import Comments from "./Comments";
 import Email from "./Email";
 import Spinner from "./Spinner";
+import Carousel from "./Carousel";
 
 import {
   Graph,
@@ -142,4 +143,5 @@ export {
   JSONField,
   Email,
   Spinner,
+  Carousel,
 };

package/src/spec/Carousel.spec.ts

@@ -0,0 +1,75 @@
+import WidgetFactory from "../WidgetFactory";
+import Form from "../Form";
+import Carousel from "../Carousel";
+import { it, expect, describe } from "vitest";
+
+describe("A Carousel", () => {
+  it("should have an id corresponding to field name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "carousel",
+    };
+
+    const widget = widgetFactory.createWidget("carousel", props);
+    expect(widget).toBeInstanceOf(Carousel);
+  });
+  it("should have autoPlay as true by default", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "carousel",
+    };
+    const widget = widgetFactory.createWidget("carousel", props);
+    expect(widget.autoPlay).toBe(true);
+  });
+  it("should allow autoPlay to be set", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "carousel",
+      auto_play: false,
+    };
+    const widget = widgetFactory.createWidget("carousel", props);
+    expect(widget.autoPlay).toBe(false);
+  });
+  it("should have items with the first childs group items", () => {
+    const xml = `
+      <form>
+        <carousel name="carousel">
+            <group string="Group 1">
+                <field name="field1" string="Field 1" />
+            </group>
+            <group string="Group 2">
+                <field name="field2" string="Field 2" />
+                <group string="Group 3">
+                    <field name="field3" string="Field 3" />
+                </group>
+            </group>
+        </carousel>
+      </form>
+    `;
+    const fields = {
+      field1: {
+        string: "Field 1",
+        type: "char",
+        size: 10,
+      },
+      field2: {
+        string: "Field 2",
+        type: "char",
+        size: 10,
+      },
+      field3: {
+        string: "Field 3",
+        type: "char",
+        size: 10,
+      },
+    };
+
+    const form = new Form(fields);
+    form.parse(xml);
+    const carousel = form.findById("carousel") as Carousel;
+    expect(carousel).toBeInstanceOf(Carousel);
+    expect(carousel.items.length).toBe(2);
+    expect(carousel.items[0].label).toBe("Group 1");
+    expect(carousel.items[1].label).toBe("Group 2");
+  });
+});

package/src/spec/Form.spec.ts

@@ -6065,4 +6065,34 @@ describe("A Form", () => {
     expect(form.autorefreshableFields.length).toBe(1);
     expect(form.autorefreshableFields[0]).toBe("field_char");
   });
+  describe("If the field has widget_props", () => {
+    it("should merge widget_props from fields definition and xml", () => {
+      const fields = {
+        field_integer: {
+          readonly: 1,
+          string: "Power",
+          type: "integer",
+          widget_props: {
+            suffix: "kW",
+          },
+        },
+      };
+
+      const xmlViewForm = `<?xml version="1.0"?>
+    <form string="Form1">
+    	<field name="field_integer" widget_props="{'prefix': 'Wow'}" />
+    </form>`;
+
+      const form = new Form(fields);
+      form.parse(xmlViewForm, {
+        values: {
+          field_integer: 10,
+        },
+      });
+      const field = form.findById("field_integer") as Field;
+      expect(field).toBeDefined();
+      expect(field.suffix).toBe("kW");
+      expect(field.prefix).toBe("Wow");
+    });
+  });
 });