Added support + test for object propertyOrder option

docs/json/editors/object-propertyOrder.json

@@ -0,0 +1,23 @@
+{
+  "type": "object",
+  "properties": {
+    "a": {
+      "type": "string",
+      "x-options": {
+        "propertyOrder": 3
+      }
+    },
+    "b": {
+      "type": "string",
+      "x-options": {
+        "propertyOrder": 2
+      }
+    },
+    "c": {
+      "type": "string",
+      "x-options": {
+        "propertyOrder": 1
+      }
+    }
+  }
+}

src/editors/object.js

@@ -1,7 +1,7 @@
 import Editor from './editor.js'
 import {
   equal,
-  hasOwn,
+  hasOwn, isNumber,
   isObject,
   isSet,
   pathToAttribute
@@ -173,6 +173,40 @@ class EditorObject extends Editor {
     }
   }
 
+  /**
+   * Sorts the children of the current instance based on their `propertyOrder` value in ascending order.
+   * The sorting is done using the `propertyOrder` obtained from each child's schema, which should be a number.
+   * If a child does not have a valid `propertyOrder` (i.e., the value is not a number), it will be placed after the child with a valid `propertyOrder`.
+   * @returns {void} This function modifies the `children` array of the instance in place.
+   */
+  sortChildrenByPropertyOrder () {
+    this.instance.children = this.instance.children.sort((a, b) => {
+      const propertyOrderA = getSchemaXOption(a.schema, 'propertyOrder')
+      const propertyOrderB = getSchemaXOption(b.schema, 'propertyOrder')
+
+      const isValidNumberA = isNumber(propertyOrderA)
+      const isValidNumberB = isNumber(propertyOrderB)
+
+      if (!isValidNumberA && isValidNumberB) {
+        return 1
+      }
+
+      if (isValidNumberA && !isValidNumberB) {
+        return -1
+      }
+
+      if (propertyOrderA < propertyOrderB) {
+        return -1
+      }
+
+      if (propertyOrderA > propertyOrderB) {
+        return 1
+      }
+
+      return 0
+    })
+  }
+
   refreshEditors () {
     this.instance.children.forEach((child) => {
       if (child.isActive) {
@@ -194,6 +228,7 @@ class EditorObject extends Editor {
   }
 
   refreshUI () {
+    this.sortChildrenByPropertyOrder()
     this.refreshInteractiveElements()
     this.refreshPropertiesSlot()
     this.refreshEditors()

tests/e2e/codecept.conf.cjs

@@ -14,6 +14,9 @@ exports.config = {
       waitForTimeout: 10000,
       windowSize: '1200x600',
       restart: false
+    },
+    ChaiWrapper: {
+      require: 'codeceptjs-chai'
     }
   }
 }

tests/e2e/tests/editors/object-propertyOrder_test.cjs

@@ -0,0 +1,19 @@
+/* global Feature Scenario */
+const theme = process.env.THEME || 'barebones'
+
+Feature('object')
+
+Scenario('@editor-object should sort by @propertyOrder', async ({ I }) => {
+  I.amOnPage(`playground.html?theme=${theme}`)
+  I.selectOption('#examples', '../json/editors/object-propertyOrder.json')
+  I._waitForElement('.jedi-ready')
+
+  const labelTexts = await I.executeScript(() => {
+    const labels = document.querySelectorAll('.jedi-children-slot label')
+    return Array.from(labels).map(label => label.textContent.trim())
+  })
+
+  I.assertEqual(labelTexts[0], 'c')
+  I.assertEqual(labelTexts[1], 'b')
+  I.assertEqual(labelTexts[2], 'a')
+})

todo.md

@@ -1,11 +1,7 @@
 ## Todo
 
-- editor tests @setValue should proof for changes in ui too when possible 
-- options tests with @option tag
 - inputAttributes option, containerAttributes, ...
 - printable
-- propertyOrder option
-- showValidationErrors
 - enforceConst documentation and test
 - readOnly test
 - complementary schema (for ui stuff)