@ditojs/admin 3.1.2 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "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/main/packages/admin",
@@ -41,8 +41,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^3.1.2",
-    "@ditojs/utils": "^3.1.2"
+    "@ditojs/ui": "^3.1.3",
+    "@ditojs/utils": "^3.1.3"
   },
   "peerDependencies": {
     "@kyvg/vue3-notification": "^3.4.2",
@@ -87,7 +87,7 @@
     "vue-upload-component": "^3.2.2"
   },
   "devDependencies": {
-    "@ditojs/build": "^3.1.2",
+    "@ditojs/build": "^3.1.3",
     "@kyvg/vue3-notification": "^3.4.2",
     "@tiptap/core": "^3.31.4",
     "@tiptap/extension-blockquote": "^3.31.4",
@@ -131,5 +131,5 @@
     "vue-router": "^5.3.1",
     "vue-upload-component": "^3.2.2"
   },
-  "gitHead": "a87ccff01f65386d9363366fb19bb993d38e8fbc"
+  "gitHead": "3dba854ad248a56da1614122b960ad8a7eda70dd"
 }

package/src/components/DitoCreateButton.vue

@@ -4,7 +4,7 @@
     v-if="creatableForm"
     :type="isInlined ? 'button' : 'submit'"
     :disabled="disabled"
-    v-bind="getButtonAttributes(verb, formLabel)"
+    v-bind="getButtonAttributes(verb, formLabel, text)"
     @click="createItem(creatableForm)"
   ) {{ text }}
   template(
@@ -13,7 +13,10 @@
     button.dito-button(
       type="button"
       :disabled="disabled"
-      v-bind="{ ...pulldownTriggerAttributes, ...getButtonAttributes(verb) }"
+      v-bind=`{
+        ...pulldownTriggerAttributes,
+        ...getButtonAttributes(verb, null, text)
+      }`
       @mousedown.stop="onPulldownMouseDown()"
     ) {{ text }}
     ul.dito-pulldown(

package/src/mixins/DitoMixin.js

@@ -295,13 +295,18 @@ export default {
         : labelize(name) || ''
     },
 
-    getButtonAttributes(verb, subject = null) {
-      // Name buttons by what they act on if known, e.g. 'Add Section'.
-      const label = subject ? `${labelize(verb)} ${subject}` : labelize(verb)
+    getButtonAttributes(verb, subject = null, text = null) {
+      // Buttons that display text are named by it, others by what they act on
+      // if known, e.g. 'Add Section'.
+      const label = text
+        ? null
+        : `${labelize(verb)}${subject ? ` ${subject}` : ''}`
       return {
-        'class': `dito-button--${verb}`,
-        'title': label,
-        'aria-label': label
+        class: `dito-button--${verb}`,
+        ...(label && {
+          'title': label,
+          'aria-label': label
+        })
       }
     },
 

package/src/mixins/OptionsMixin.js

@@ -82,11 +82,6 @@ export default {
       return this.getOptionForValue(this.selectedValue)
     },
 
-    // The form model of the data, owned by the dialog or route component.
-    formModel() {
-      return (this.dialogComponent ?? this.routeComponent).formModel
-    },
-
     // The resolver of the options in the form model of the data, which loads
     // them and shares them with the computes of the form. It is looked up with
     // the entry of this component, in the shape of the entries of

package/src/mixins/SourceMixin.js

@@ -424,7 +424,7 @@ export default {
     // @override ResourceMixin.clearData()
     clearData() {
       this.total = 0
-      this.value = null
+      this.setLoadedValue(null)
     },
 
     // @override ResourceMixin.setData()
@@ -437,7 +437,7 @@ export default {
       if (this.isListSource && isArray(data)) {
         this.setLoadedListItems(data)
       } else if (!data || this.isObjectSource && isObject(data)) {
-        this.value = data
+        this.setLoadedValue(data)
       } else if (this.unwrapListData(data)) {
         // The format didn't match, see if we received a `{ results, total }`
         // object, in which case `this.value` was already set by
@@ -483,7 +483,21 @@ export default {
     // current order. Lists in the data of forms, views and dialogs are
     // numbered by `FormModel`, see `initializeData()`.
     setLoadedListItems(items) {
-      this.value = updateOrder(this.sourceSchema, items, this.paginationRange)
+      this.setLoadedValue(
+        updateOrder(this.sourceSchema, items, this.paginationRange)
+      )
+    },
+
+    // Writes the value loaded through the source's resource. Loading isn't an
+    // edit of the data, so the value is written as a clean change, which
+    // doesn't make the form dirty, e.g. for sources whose value is stored,
+    // like the order of their items, see `FormModel.applyCleanChanges()`.
+    setLoadedValue(value) {
+      this.formModel
+        .applyCleanChanges(() => {
+          this.value = value
+        })
+        .catch(console.error)
     },
 
     createItem(schema, type, index = null) {

package/src/mixins/TypeMixin.js

@@ -37,6 +37,11 @@ export default {
       return this.schema.name
     },
 
+    // The form model of the data, owned by the dialog or route component.
+    formModel() {
+      return (this.dialogComponent ?? this.routeComponent).formModel
+    },
+
     type() {
       return this.schema.type
     },

package/src/types/DitoTypeMarkup.vue

@@ -251,9 +251,11 @@ export default DitoTypeComponent.register('markup', {
     const onFocus = () => this.onFocus()
 
     const onBlur = () => {
-      // Write the value first, so that validating on blur validates it.
+      // Write the value first, so that validating on blur validates it, and
+      // emit the change once the editor isn't focused anymore.
       updateValue()
       this.onBlur()
+      emitChange()
     }
 
     const onUpdate = () => {
@@ -275,9 +277,16 @@ export default DitoTypeComponent.register('markup', {
         ignoreWatch = true
         this.value = value
       }
-      if (!this.focused && changed) {
-        this.onChange()
+      if (!this.focused) {
+        emitChange()
+      }
+    }
+
+    // Emits the change of the value, once the editing is done.
+    const emitChange = () => {
+      if (changed) {
         changed = false
+        this.onChange()
       }
     }