@ditojs/admin 2.34.2 → 2.34.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.34.2",
+  "version": "2.34.4",
   "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",
@@ -91,5 +91,5 @@
     "vite": "^5.4.8"
   },
   "types": "types",
-  "gitHead": "305801f364bf3d0b663eb0aa4bcd5ef31d88beac"
+  "gitHead": "1112f28f40e1e95d9301820cc68f787308cbab50"
 }

package/src/components/DitoTreeItem.vue

@@ -6,6 +6,7 @@
     'dito-active': active
   }`
   :style="level > 0 && { '--level': level }"
+  :data-path="path"
 )
   .dito-tree-header(
     v-if="label"
@@ -271,22 +272,38 @@ export default DitoComponent.component('DitoTreeItem', {
       return appendDataPath(this.dataPath, property.name)
     },
 
-    onEdit() {
+    editPath(path) {
       // All we got to do is push the right edit path to the router, the rest
       // is handled by our routes, allowing reloads as well.
       this.$router.push({
-        path: `${this.container.path}${this.path}`,
+        path: `${this.container.path}${path}`,
         // Preserve current query
         query: this.$route.query
       })
     },
 
+    onEdit() {
+      this.editPath(this.path)
+    },
+
     onDelete() {
       // TODO: Implement!
     },
 
     onChange() {
       this.container.onChange()
+    },
+
+    // @override
+    onEndDrag(event) {
+      SortableMixin.methods.onEndDrag.call(this, event)
+      const { item } = event
+      // Preserve active state of edited sub-items, by editing their new path.
+      if (item.classList.contains('dito-active')) {
+        this.$nextTick(() => {
+          this.editPath(event.item.dataset.path)
+        })
+      }
     }
   }
 })

package/src/mixins/DitoMixin.js

@@ -234,9 +234,11 @@ export default {
       }
       if (!store) {
         store = this.setStore(key, reactive({}))
-        if (index != null) {
-          this.setStoreKeyByIndex(index, key)
-        }
+      }
+      if (index != null) {
+        // temporary uid keys will change between persistence, so we need to
+        // assign the key to the index even when the store already existed.
+        this.setStoreKeyByIndex(index, key)
       }
       return store
     },
@@ -269,7 +271,7 @@ export default {
 
     getLabel(schema, name) {
       return schema
-        ? this.getSchemaValue('label', { type: String, schema }) ||
+        ? this.getSchemaValue('label', { schema, type: [String, Object] }) ||
           labelize(name || schema.name)
         : labelize(name) || ''
     },

package/src/mixins/OptionsMixin.js

@@ -26,18 +26,24 @@ export default {
   computed: {
     selectedValue: {
       get() {
-        const convertValue = value =>
-          this.relate
-            ? this.hasOption(value)
-              ? this.getValueForOption(value)
+        const convertValue = value => {
+          const val = this.relate
+            ? this.getValueForOption(value)
+            : value
+
+          return this.hasOptions
+            ? this.getOptionForValue(val)
+              ? val
               : null
             : value
+        }
+
         const value = isArray(this.value)
           ? this.value.map(convertValue).filter(value => value !== null)
           : convertValue(this.value)
+
         if (
-          // When relating and as soon as the options are available...
-          this.relate &&
+          // As soon as the options are available, and...
           this.hasOptions && (
             // ...if the value is forced to null because a disappeared option...
             value === null && this.value !== null ||
@@ -54,13 +60,14 @@ export default {
       },
 
       set(value) {
-        const convert = value =>
+        const convertValue = value =>
           this.relate
             ? this.getOptionForValue(value)
             : value
+
         this.value = isArray(value)
-          ? value.map(convert)
-          : convert(value)
+          ? value.map(convertValue)
+          : convertValue(value)
       }
     },
 
@@ -216,10 +223,6 @@ export default {
       return options
     },
 
-    hasOption(option) {
-      return !!this.getOptionForValue(this.getValueForOption(option))
-    },
-
     getOptionForValue(value) {
       const findOption = (options, value, groupBy) => {
         // Search for the option object with the given value and return the
@@ -244,7 +247,7 @@ export default {
     getValueForOption(option) {
       const { optionValue } = this
       return isString(optionValue)
-        ? option?.[optionValue]
+        ? option?.[optionValue] ?? null
         : isFunction(optionValue)
           ? optionValue(new DitoContext(this, { option }))
           : option

package/src/types/DitoTypeMarkup.vue

@@ -373,11 +373,11 @@ export default DitoTypeComponent.register('markup', {
 
         HardBreak.extend({
           addKeyboardShortcuts: () => {
-            const callback = () => this.editor.commands.setHardBreak()
+            const setHardBreak = () => this.editor.commands.setHardBreak()
             return {
-              'Mod-Enter': callback,
-              'Shift-Enter': callback,
-              ...(this.hardBreak ? { Enter: callback } : null)
+              'Mod-Enter': setHardBreak,
+              'Shift-Enter': setHardBreak,
+              ...(this.hardBreak ? { Enter: setHardBreak } : null)
             }
           }
         })