@ditojs/admin 3.2.2 → 3.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "3.2.2",
+  "version": "3.2.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/main/packages/admin",
@@ -131,5 +131,5 @@
     "vue-router": "^5.3.1",
     "vue-upload-component": "^3.2.2"
   },
-  "gitHead": "04e5e45534cf76e1472d62c5fb9203d37d0161f7"
+  "gitHead": "32147a4ee71f5bca6c051af04be9c15a16f37567"
 }

package/src/DitoContext.js

@@ -149,16 +149,16 @@ export default class DitoContext {
   }
 
   get value() {
-    return get(
-      this,
-      'value',
-      () =>
-        // If the value is not defined on the underlying object, it's not a type
-        // component. If it is nested, we can still get the value from the root.
-        this.nested
-          ? getValueAtDataPath(this.rootItem, this.dataPath)
-          : undefined
-    )
+    const object = toObject(this)
+    // Type components hold their value, also while it's `undefined`, e.g. a
+    // computed value that the data model hasn't written yet. Other components
+    // don't hold a value, but if they're nested, we can get it from the root,
+    // or `undefined` if it's missing there.
+    return 'value' in object
+      ? object.value
+      : this.nested
+        ? getValueAtDataPath(this.rootItem, this.dataPath, () => undefined)
+        : undefined
   }
 
   get dataPath() {

package/src/components/DitoDialog.vue

@@ -32,6 +32,7 @@
 </template>
 
 <script>
+import { markRaw } from 'vue'
 import { clone } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import DomMixin from '../mixins/DomMixin.js'
@@ -47,8 +48,7 @@ export default DitoComponent.component('DitoDialog', {
 
   provide() {
     return {
-      $dialogComponent: () => this,
-      $dataModel: () => this.ownDataModel
+      $dialogComponent: () => this
     }
   },
 
@@ -80,11 +80,6 @@ export default DitoComponent.component('DitoDialog', {
   },
 
   computed: {
-    // @override DitoMixin.dataModel
-    dataModel() {
-      return this.ownDataModel
-    },
-
     dialogComponent() {
       return this
     },
@@ -136,11 +131,13 @@ export default DitoComponent.component('DitoDialog', {
   created() {
     // Writes defaults and computed values into the dialog's data and resolves
     // options, see `DataModel`:
-    this.ownDataModel = new DataModel({
-      component: this,
-      getSchema: () => this.schema,
-      getData: () => this.dialogData
-    })
+    this.ownDataModel = markRaw(
+      new DataModel({
+        component: this,
+        getSchema: () => this.schema,
+        getData: () => this.dialogData
+      })
+    )
   },
 
   mounted() {

package/src/components/DitoForm.vue

@@ -51,6 +51,7 @@
 </template>
 
 <script>
+import { markRaw } from 'vue'
 import { clone, capitalize, parseDataPath, assignDeeply } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import RouteMixin from '../mixins/RouteMixin.js'
@@ -66,12 +67,6 @@ import { DataModel } from '../utils/DataModel.js'
 export default DitoComponent.component('DitoForm', {
   mixins: [RouteMixin, ResourceMixin],
 
-  provide() {
-    return {
-      $dataModel: () => this.ownDataModel
-    }
-  },
-
   data() {
     return {
       createdData: null,
@@ -80,11 +75,6 @@ export default DitoComponent.component('DitoForm', {
   },
 
   computed: {
-    // @override DitoMixin.dataModel
-    dataModel() {
-      return this.ownDataModel
-    },
-
     isForm() {
       return true
     },
@@ -366,12 +356,14 @@ export default DitoComponent.component('DitoForm', {
   created() {
     // Writes defaults and computed values into the form's data, resolves
     // options and tracks whether the data is dirty, see `DataModel`:
-    this.ownDataModel = new DataModel({
-      component: this,
-      getSchema: () => this.schema,
-      getData: () => this.data,
-      getSourceSchema: () => this.sourceSchema
-    })
+    this.ownDataModel = markRaw(
+      new DataModel({
+        component: this,
+        getSchema: () => this.schema,
+        getData: () => this.data,
+        getSourceSchema: () => this.sourceSchema
+      })
+    )
   },
 
   beforeUnmount() {

package/src/components/DitoView.vue

@@ -28,6 +28,7 @@ template(
 </template>
 
 <script>
+import { markRaw } from 'vue'
 import DitoComponent from '../DitoComponent.js'
 import RouteMixin from '../mixins/RouteMixin.js'
 import {
@@ -45,8 +46,7 @@ export default DitoComponent.component('DitoView', {
     // Redirect $sourceComponent and $resourceComponent to the main component:
     return {
       $sourceComponent: () => this.mainComponent?.sourceComponent || null,
-      $resourceComponent: () => this.mainComponent?.resourceComponent || null,
-      $dataModel: () => this.ownDataModel
+      $resourceComponent: () => this.mainComponent?.resourceComponent || null
     }
   },
 
@@ -61,11 +61,6 @@ export default DitoComponent.component('DitoView', {
   },
 
   computed: {
-    // @override DitoMixin.dataModel
-    dataModel() {
-      return this.ownDataModel
-    },
-
     schema() {
       return this.meta.schema ?? {}
     },
@@ -126,11 +121,13 @@ export default DitoComponent.component('DitoView', {
   created() {
     // Writes defaults and computed values into the view's data and resolves
     // options, see `DataModel`:
-    this.ownDataModel = new DataModel({
-      component: this,
-      getSchema: () => this.viewSchema,
-      getData: () => this.data
-    })
+    this.ownDataModel = markRaw(
+      new DataModel({
+        component: this,
+        getSchema: () => this.viewSchema,
+        getData: () => this.data
+      })
+    )
   },
 
   mounted() {

package/src/mixins/DitoMixin.js

@@ -39,29 +39,28 @@ export default {
 
   provide() {
     const self = () => this
-    return this.providesData
-      ? {
-          $parentComponent: self,
-          $dataComponent: self
-        }
-      : {
-          $parentComponent: self
-        }
+    return {
+      $parentComponent: self,
+      ...(this.providesData && { $dataComponent: self }),
+      $dataModel: () => this.dataModel
+    }
   },
 
   data() {
     return {
       appState,
       isMounted: false,
-      overrides: null // See accessor.js
+      overrides: null, // See accessor.js
+      // The data model that the component owns, see `dataModel`.
+      ownDataModel: null
     }
   },
 
   computed: {
-    // The data model, provided by the form, view or dialog that owns it, which
-    // override it with their own.
+    // The data model of the data: the component's own, e.g. of a form, view
+    // or dialog, or else the one of its closest ancestor that owns one.
     dataModel() {
-      return this.$dataModel()
+      return this.ownDataModel ?? this.$dataModel()
     },
 
     providesData() {

package/src/mixins/OptionsMixin.js

@@ -68,10 +68,12 @@ export default {
     // Whether the value needs to be replaced with the selected value, once the
     // options are available: if the value is forced to `null` because its
     // option disappeared, or if the value is a reference, so that it'll hold
-    // actual data, not just a reference id. See `watch`.
+    // actual data, not just a reference id. See `watch`. Filtered options, e.g.
+    // the results of a search, don't tell whether the value's option exists.
     shouldReplaceValueWithSelectedValue() {
       return (
-        this.hasOptions && (
+        this.hasOptions &&
+        !this.areOptionsFiltered && (
           this.selectedValue === null && this.value !== null ||
           isReference(this.value)
         )
@@ -114,6 +116,12 @@ export default {
       return this.options
     },
 
+    // Whether the active options are a filtered subset of the options, e.g.
+    // the results of a search, see `activeOptions`.
+    areOptionsFiltered() {
+      return this.activeOptions !== this.options
+    },
+
     hasOptions() {
       return this.activeOptions.length > 0
     },
@@ -304,8 +312,16 @@ export default {
         }
       }
 
-      return this.optionValue
-        ? findOption(this.activeOptions, value, this.groupBy)
+      const { optionValue, groupBy } = this
+      return optionValue
+        ? (findOption(this.activeOptions, value, groupBy) ??
+          // Options filtered out of the active options, e.g. by a search, are
+          // still options of the value.
+          (
+            this.areOptionsFiltered
+              ? findOption(this.options, value, groupBy)
+              : undefined
+          ))
         : value
     },
 

package/src/utils/DataModel.js

@@ -92,7 +92,7 @@ export class DataModel {
       watch(
         [getSchema, getData],
         ([schema, data]) => this.initializeData(schema, data),
-        modelWatchOptions
+        modelSetupWatchOptions
       )
       // The entries are read through a computed property, so that the watchers
       // of the entries can check synchronously whether their entry is still
@@ -101,19 +101,18 @@ export class DataModel {
       watch(
         () => this.dataEntries.value.computedValueEntries,
         entries => this.updateComputedValueRecords(entries),
-        modelWatchOptions
+        modelSetupWatchOptions
       )
       // Values that go missing after the data was set up, e.g. in items that
       // code adds, get their defaults too:
       watch(
         () => this.dataEntries.value.entriesWithMissingValues,
         entries => this.setDefaultValues(entries),
-        modelWatchOptions
+        modelSetupWatchOptions
       )
       if (getSourceSchema) {
         // Data that is set up, e.g. loaded, saved or applied, isn't dirty:
-        // After the data is set up, as the watchers run in the order in which
-        // they're created, see `modelWatchOptions`.
+        // After the data is set up, see `modelSetupWatchOptions`.
         watch(
           getData,
           () => this.takeProcessedDataSnapshot().catch(console.error),
@@ -641,13 +640,20 @@ function takeOverChangedValues(target, before, after) {
 
 const notFound = Symbol('notFound')
 
-// The watchers of the model run after the post-flush hooks, so that they write
-// the values that they derive from the data after the components that display
-// them are mounted. Otherwise, the `mounted` hooks of `v-model` directives
-// would restore the values that inputs had when they were mounted, see
-// https://github.com/vuejs/core/issues/15774. Vue processes the updates that
-// the written values cause in the same flush, before the browser renders them.
-// The watchers run in the order in which they're created.
+// The watchers of the model that set up the data and the scopes of its
+// components run before the components render, so that components of new
+// data, e.g. loaded data or added items, receive their defaults and computed
+// values from the start: The scopes compute their values right away, see
+// `createComputedValueScope()`.
+const modelSetupWatchOptions = { immediate: true, flush: 'pre' }
+
+// The other watchers of the model run after the post-flush hooks, so that they
+// write the values that they derive from the data after the components that
+// display them are mounted. Otherwise, the `mounted` hooks of `v-model`
+// directives would restore the values that inputs had when they were mounted,
+// see https://github.com/vuejs/core/issues/15774. Vue processes the updates
+// that the written values cause in the same flush, before the browser renders
+// them.
 const modelWatchOptions = { immediate: true, flush: 'post' }
 
 // Aborts `compute()` when it reads options that aren't loaded, see