Various bug fixes including:

- Zooming and scrolling in viewport no longer impacts surrounding page.
- Centred and tweaked warning when passed invalid JSON as prop.
- Fixed bug where properties with empty arrays didn't render correctly.
- Fixed type labelling for arrays in collapsed view.
- Tweaked appearance of array length and index counts.
- Array index labels are now zero-indexed.
- Tweaked overflow and parenthesis appearance for properties.
- Tweaked padding and appearance of buttons in viewport.
- Moved vue from dependencies to dev dependencies.
- Included link to git repo in package.json
- Updated NodeArrayProperty test in-line with changes.
- Added new fixtures and tests for NodeArrayProperty.
- Added new fixtures and tests for Tree regarding empty-array JSON.
- Added new test for VisualJSON regarding custom default formatting.

cypress/fixtures/mocks/empty-array-json.json

@@ -0,0 +1,42 @@
+{
+  "users": [
+    {
+      "id": 1,
+      "name": "Alice Smith",
+      "roles": ["admin", "editor"]
+    },
+    {
+      "id": 2,
+      "name": "Bob Jones",
+      "roles": []
+    },
+    {
+      "id": 3,
+      "name": "Charlie Brown",
+      "roles": ["viewer"]
+    }
+  ],
+  "products": [
+    {
+      "productId": 1001,
+      "productName": "Laptop",
+      "tags": ["electronics", "computers"]
+    },
+    {
+      "productId": 1002,
+      "productName": "Table",
+      "tags": []
+    },
+    {
+      "productId": 1003,
+      "productName": "Pen",
+      "tags": ["stationery"]
+    }
+  ],
+  "emptyArray": [],
+  "settings": {
+    "theme": "dark",
+    "notifications": [],
+    "preferences": ["email", "sms"]
+  }
+}

cypress/fixtures/nodeProperties.ts

@@ -90,6 +90,28 @@ const arrayPropertyWithArrays: NodeProperty = {
   },
 };
 
+const arrayPropertyWithEmptyArray: NodeProperty = {
+  key: "arrayPropertyKey",
+  value: "empty array",
+  type: "emptyArray",
+  array: {
+    data: [],
+    index: 0,
+    length: 0,
+  },
+};
+
+const arrayPropertyWithMixedTypes: NodeProperty = {
+  key: "arrayPropertyKey",
+  value: "array",
+  type: "array",
+  array: {
+    data: ["array", 42, true, "null", "object", "array"],
+    index: 0,
+    length: 6,
+  },
+};
+
 const objectProperty: NodeProperty = {
   key: "objectPropertyKey",
   value: "object",
@@ -107,5 +129,7 @@ export {
   arrayPropertyWithNulls,
   arrayPropertyWithObjects,
   arrayPropertyWithArrays,
+  arrayPropertyWithEmptyArray,
+  arrayPropertyWithMixedTypes,
   objectProperty,
 };

cypress/tests/components/Node.cy.ts

@@ -185,7 +185,7 @@ describe("<Node />", () => {
       .get("[class='property']")
       .eq(5)
       .find("button")
-      .eq(0)
+      .eq(1)
       .click()
       .then(() => {
         expect(onDecrementIndexSpy).to.be.calledOnce;
@@ -203,7 +203,7 @@ describe("<Node />", () => {
       .get("[class='property']")
       .eq(5)
       .find("button")
-      .eq(1)
+      .eq(0)
       .click()
       .then(() => {
         expect(onIncrementIndexSpy).to.be.calledOnce;