@ditojs/admin 2.2.7-debug.4 → 2.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.2.7-debug.4",
+  "version": "2.2.7",
   "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",
@@ -82,7 +82,7 @@
     "vite": "^4.3.1"
   },
   "types": "types",
-  "gitHead": "3950959411aefbd9ea2ab5a13f7c6aacfcb60018",
+  "gitHead": "9636ab2adc6d813af39097fe8d92ce7a00020f93",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/mixins/DitoMixin.js

@@ -15,7 +15,7 @@ import DitoContext from '../DitoContext.js'
 import EmitterMixin from './EmitterMixin.js'
 import { isMatchingType, convertType } from '../utils/type.js'
 import { getResource, getMemberResource } from '../utils/resource.js'
-import { reactive } from 'vue'
+import { computed, reactive } from 'vue'
 
 // @vue/component
 export default {
@@ -433,17 +433,25 @@ export default {
     },
 
     setupComputed() {
-      for (const [key, value] of Object.entries(this.schema.computed || {})) {
-        const accessor = isFunction(value)
-          ? { get: value }
-          : isObject(value) && isFunction(value.get)
-            ? value
+      const getComputedAccessor = ({ get, set }) => {
+        const getter = computed(() => get.call(this))
+        return {
+          get: () => getter.value,
+          set: set ? value => set.call(this, value) : undefined
+        }
+      }
+
+      for (const [key, item] of Object.entries(this.schema.computed || {})) {
+        const accessor = isFunction(item)
+          ? getComputedAccessor({ get: item })
+          : isObject(item) && isFunction(item.get)
+            ? getComputedAccessor(item)
             : null
         if (accessor) {
           Object.defineProperty(this, key, accessor)
         } else {
           console.error(
-            `Invalid computed property definition: ${key}: ${value}`
+            `Invalid computed property definition: ${key}: ${item}`
           )
         }
       }

package/src/mixins/SourceMixin.js

@@ -3,6 +3,7 @@ import ResourceMixin from './ResourceMixin.js'
 import SchemaParentMixin from '../mixins/SchemaParentMixin.js'
 import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
 import { getMemberResource } from '../utils/resource.js'
+import { replaceRoute } from '../utils/route.js'
 import {
   processRouteSchema,
   processForms,
@@ -43,7 +44,6 @@ export default {
   data() {
     return {
       wrappedPrimitives: null,
-      ignoreRouteChange: false,
       unwrappingPrimitives: false
     }
   },
@@ -177,12 +177,9 @@ export default {
           ...query
         }
         if (!equals(query, this.$route.query)) {
-          // Tell the `$route` watcher to ignore the changed triggered here:
-          this.ignoreRouteChange = true
-          this.$router.replace({ query, hash: this.$route.hash })
           // Change the route query parameters, but don't trigger a route
           // change, as that would cause the list to reload.
-          // replaceRoute({ query })
+          replaceRoute({ query })
         }
         return query // Let getStoreAccessor() do the actual setting
       }
@@ -317,10 +314,6 @@ export default {
 
   watch: {
     $route(to, from) {
-      if (this.ignoreRouteChange) {
-        this.ignoreRouteChange = false
-        return
-      }
       if (from.path === to.path && from.hash === to.hash) {
         // Paths and hashes remain the same, so only queries have changed.
         // Update filter and reload data without clearing.

package/src/mixins/TypeMixin.js

@@ -69,6 +69,7 @@ export default {
           : value
         // eslint-disable-next-line vue/no-mutating-props
         this.data[this.name] = this.parsedValue
+        this.changedValue = undefined
       }
     },
 
@@ -277,6 +278,7 @@ export default {
 
     clear() {
       this.value = null
+      this.changedValue = undefined
       this.onChange()
     },
 
@@ -293,7 +295,6 @@ export default {
     },
 
     onInput() {
-      console.log('onInput()', this.name)
       this.markDirty()
       this.emitEvent('input')
     },
@@ -306,14 +307,10 @@ export default {
         // For some odd reason, the native change event now sometimes fires
         // twice on Vue3. Filter out second call.
         // TODO: Investigate why this happens, and if it's a bug in Vue3.
-        if (value === this.changedValue) {
-          console.log('onChange() double', this.name)
-          return
-        }
+        if (value === this.changedValue) return
         this.changedValue = value
       }
 
-      console.log('onChange()', this.name, value)
       this.markDirty()
       this.emitEvent('change', {
         // Prevent endless parse recursion:

package/src/types/DitoTypeList.vue

@@ -195,17 +195,10 @@ export default DitoTypeComponent.register('list', {
         },
         set query(query) {
           const component = getListComponent()
-          console.log('set query', !!component)
           if (component) {
             // Filter out undefined values for comparing with equals()
             const filter = obj => pickBy(obj, value => value !== undefined)
-            console.log(
-              'set query',
-              JSON.stringify(filter(query)),
-              JSON.stringify(filter(component.query))
-            )
             if (!equals(filter(query), filter(component.query))) {
-              console.log('load data')
               component.query = query
               component.loadData(false)
             }

package/src/utils/filter.js

@@ -109,13 +109,6 @@ export function createFiltersPanel(api, filters, dataPath, proxy) {
 
     methods: {
       applyFilters() {
-        console.log(
-          'applyFilters()',
-          JSON.stringify({
-            data: this.data,
-            filters: this.filters
-          })
-        )
         proxy.query = {
           ...proxy.query,
           filter: this.filters,
@@ -125,7 +118,6 @@ export function createFiltersPanel(api, filters, dataPath, proxy) {
       },
 
       clearFilters() {
-        console.log('clearFilters()')
         this.resetData()
         this.applyFilters()
       }
@@ -211,13 +203,6 @@ function getComponentsForFilter(schema, name) {
 }
 
 function formatFiltersData(schema, data) {
-  console.log(
-    'formatFiltersData()',
-    JSON.stringify({
-      data,
-      schema: Object.keys(schema?.components || {})
-    })
-  )
   const filters = []
   for (const name in data) {
     const entry = data[name]