@ditojs/admin 2.44.0 → 2.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.44.0",
+  "version": "2.45.0",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -39,8 +39,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.44.0",
-    "@ditojs/utils": "^2.44.0",
+    "@ditojs/ui": "^2.45.0",
+    "@ditojs/utils": "^2.45.0",
     "@kyvg/vue3-notification": "^3.4.1",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.11.5",
@@ -72,22 +72,22 @@
     "filesize": "^10.1.6",
     "filesize-parser": "^1.5.1",
     "focus-trap": "^7.6.4",
-    "nanoid": "^5.1.3",
+    "nanoid": "^5.1.5",
     "sortablejs": "^1.15.6",
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
     "tiptap-footnotes": "^2.0.3",
-    "type-fest": "^4.37.0",
+    "type-fest": "^4.38.0",
     "vue": "^3.5.13",
     "vue-multiselect": "^3.2.0",
     "vue-router": "^4.5.0",
     "vue-upload-component": "^3.1.17"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.44.0",
+    "@ditojs/build": "^2.45.0",
     "typescript": "^5.8.2",
-    "vite": "^6.2.1"
+    "vite": "^6.2.3"
   },
   "types": "types",
-  "gitHead": "64f76ac9f74a8915bc02bfea79f0db125f3f4437"
+  "gitHead": "dfcb589d51438ee3d7ef0c34017cd7090e691653"
 }

package/src/components/DitoTreeItem.vue

@@ -76,9 +76,9 @@
   DitoDraggable(
     v-if="childrenSchema"
     v-show="opened"
-    :modelValue="updateOrder(childrenSchema, childrenList)"
     :options="getDraggableOptions(true)"
     :draggable="childrenDraggable"
+    :modelValue="updateOrder(childrenSchema, childrenList)"
     @update:modelValue="value => (childrenList = value)"
   )
     DitoTreeItem(
@@ -160,15 +160,24 @@ export default DitoComponent.component('DitoTreeItem', {
 
     childrenList: {
       get() {
-        const name = this.childrenSchema?.name
-        return name && this.data[name]
+        const { name, orderKey } = this.childrenSchema ?? {}
+        const value = name && this.data[name]
+        // In order to fix reactivity for `updateOrder()` at root level of tree
+        // views, we need to access all order keys once, in order to track them
+        // for reactivity.
+        // TODO: Find a proper fix.
+        value?.map(child => child[orderKey])
+        return value
       },
 
       set(value) {
         const name = this.childrenSchema?.name
         if (name) {
           // eslint-disable-next-line vue/no-mutating-props
-          this.data[name] = value
+          this.data[name] = this.updateOrder(
+            this.childrenSchema,
+            value
+          )
         }
       }
     },
@@ -202,27 +211,19 @@ export default DitoComponent.component('DitoTreeItem', {
         const { editPath } = this.container
         const childrenOpen = !this.path && childrenSchema.open
         // Build a children list with child meta information for the template.
-        return this.updateOrder(
-          childrenSchema,
-          childrenList.map((data, index) => {
-            const path = (
-              childrenSchema.path &&
-              `${this.path}/${childrenSchema.path}/${index}`
-            )
-            const open = (
-              childrenOpen ||
-              // Only count as "in edit path" when it's not the full edit path.
-              editPath.startsWith(path) && path.length < editPath.length
-            )
-            const active = editPath === path
-            return {
-              data,
-              path,
-              open,
-              active
-            }
-          })
-        )
+        return childrenList.map((data, index) => {
+          const path = (
+            childrenSchema.path &&
+            `${this.path}/${childrenSchema.path}/${index}`
+          )
+          const open = (
+            childrenOpen ||
+            // Only count as "in edit path" when it's not the full edit path.
+            editPath.startsWith(path) && path.length < editPath.length
+          )
+          const active = editPath === path
+          return { data, path, open, active }
+        })
       }
       return []
     },

package/src/types/DitoTypeList.vue

@@ -38,9 +38,9 @@
     )
     DitoDraggable(
       tag="tbody"
-      :modelValue="updateOrder(sourceSchema, listData, paginationRange)"
       :options="getDraggableOptions()"
       :draggable="draggable"
+      :modelValue="updateOrder(sourceSchema, listData, paginationRange)"
       @update:modelValue="value => (listData = value)"
     )
       tr(