@ditojs/admin 2.23.0 → 2.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.23.0",
+  "version": "2.24.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",
@@ -33,8 +33,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.23.0",
-    "@ditojs/utils": "^2.23.0",
+    "@ditojs/ui": "^2.24.0",
+    "@ditojs/utils": "^2.24.0",
     "@kyvg/vue3-notification": "^3.1.4",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.2.2",
@@ -67,23 +67,23 @@
     "sortablejs": "^1.15.2",
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
-    "type-fest": "^4.9.0",
-    "vue": "3.4.10",
+    "type-fest": "^4.10.2",
+    "vue": "^3.4.18",
     "vue-multiselect": "^3.0.0-beta.3",
     "vue-router": "^4.2.5",
     "vue-upload-component": "^3.1.8"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.23.0",
+    "@ditojs/build": "^2.24.0",
     "@vitejs/plugin-vue": "^5.0.3",
-    "@vue/compiler-sfc": "3.4.10",
+    "@vue/compiler-sfc": "^3.4.18",
     "pug": "^3.0.2",
     "sass": "1.70.0",
     "typescript": "^5.3.3",
-    "vite": "^5.1.0"
+    "vite": "^5.1.1"
   },
   "types": "types",
-  "gitHead": "6aee1fd0e7569c8eb21f46138012c532b9ac8db7",
+  "gitHead": "cd3083bf66a2f1b3fdb568fbb85e58ba0c202287",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoForm.vue

@@ -431,10 +431,11 @@ export default DitoComponent.component('DitoForm', {
               ]
             })
           },
-          notifyError: () => {
+          notifyError: error => {
             const verb = getVerb(true)
             this.notify({
               type: 'error',
+              error,
               title: 'Request Error',
               text: `Unable to ${verb} ${this.itemLabel}.`
             })
@@ -460,6 +461,7 @@ export default DitoComponent.component('DitoForm', {
             const verb = getVerb(true)
             this.notify({
               type: 'error',
+              error,
               title: 'Request Error',
               text: [
                 `Unable to ${verb} ${this.itemLabel}${error ? ':' : ''}`,

package/src/components/DitoNotifications.vue

@@ -23,7 +23,7 @@ export default DitoComponent.component('DitoNotifications', {
   },
 
   methods: {
-    notify({ type = 'info', title, text } = {}) {
+    notify({ type = 'info', title, text, error } = {}) {
       title ||= (
         {
           warning: 'Warning',
@@ -46,7 +46,12 @@ export default DitoComponent.component('DitoNotifications', {
         'error'
       )
       // eslint-disable-next-line no-console
-      console[log](stripTags(text))
+      console[log](
+        ...[
+          stripTags(text),
+          ...(type === 'error' && error ? [error] : [])
+        ]
+      )
       const { notifications = true } = this.api
       if (notifications) {
         // Calculate display-duration for the notification based on its content

package/src/components/DitoRoot.vue

@@ -233,8 +233,8 @@ export default DitoComponent.component('DitoRoot', {
       })
     },
 
-    notify({ type = 'info', title, text } = {}) {
-      this.notifications.notify({ type, title, text })
+    notify({ type = 'info', title, text, error } = {}) {
+      this.notifications.notify({ type, title, text, error })
     },
 
     closeNotifications() {
@@ -325,15 +325,13 @@ export default DitoComponent.component('DitoRoot', {
             await this.resolveViews()
           }
         } catch (err) {
-          const error = err.response?.data?.error
+          const error = err.response?.data?.error || err
           this.notify({
             type: 'error',
+            error,
             title: 'Authentication Error',
-            text: error || err
+            text: error
           })
-          if (!error) {
-            console.error(err, err.response)
-          }
           this.login()
         }
       }
@@ -367,10 +365,12 @@ export default DitoComponent.component('DitoRoot', {
         })
         user = response.data.user || null
       } catch (err) {
+        const error = err.response?.data?.error || err
         this.notify({
           type: 'error',
+          error,
           title: 'Authentication Error',
-          text: err
+          text: error
         })
       }
       this.setUser(user)

package/src/components/DitoSchema.vue

@@ -209,6 +209,10 @@ export default DitoComponent.component('DitoSchema', {
       return first
     },
 
+    routeTab() {
+      return this.$route.hash?.slice(1) || null
+    },
+
     clipboard() {
       return this.schema?.clipboard ?? null
     },
@@ -357,21 +361,21 @@ export default DitoComponent.component('DitoSchema', {
   },
 
   watch: {
-    '$route.hash': {
+    routeTab: {
       immediate: true,
       // https://github.com/vuejs/vue-router/issues/3393#issuecomment-1158470149
       flush: 'post',
-      handler(hash) {
+      handler(routeTab) {
         // Remember the current path to know if tab changes should still be
         // handled, but remove the trailing `/create` or `/:id` from it so that
         // tabs informs that stay open after creation still work.
         if (this.hasRootTabs) {
-          this.selectedTab = hash?.slice(1) || null
+          this.selectedTab = routeTab
         }
       }
     },
 
-    'selectedTab'(newTab, oldTab) {
+    selectedTab(newTab, oldTab) {
       if (this.scrollable) {
         const { content } = this.$refs
         this.scrollPositions[oldTab] = content.scrollTop
@@ -403,7 +407,7 @@ export default DitoComponent.component('DitoSchema', {
   },
 
   mounted() {
-    this.selectedTab = this.defaultTab
+    this.selectedTab = this.routeTab || this.defaultTab
   },
 
   unmounted() {

package/src/mixins/DataMixin.js

@@ -5,7 +5,7 @@ import {
   normalizeDataPath,
   getValueAtDataPath
 } from '@ditojs/utils'
-import { reactive } from 'vue'
+import { markRaw, ref } from 'vue'
 import LoadingMixin from './LoadingMixin.js'
 
 // @vue/component
@@ -25,8 +25,12 @@ export default {
         schema = { data: schema }
       }
       let { data = undefined, dataPath = null } = schema
-      // See if there is async data loading already in process.
-      const asyncEntry = (this.asyncDataEntries[name] ||= reactive({
+      // Create a reactive entry for the async data, if it doesn't exist yet.
+      // NOTE: Use `markRaw()` to avoid reactivity on the entry itself, as
+      // reactivity is only desired on the `reactiveVersion` property, which is
+      // used to trigger controlled reevaluation of the computed getter.
+      const asyncEntry = (this.asyncDataEntries[name] ||= markRaw({
+        reactiveVersion: ref(1),
         dependencyFunction: null,
         resolvedData: undefined,
         resolving: false,
@@ -34,7 +38,9 @@ export default {
       }))
       // If the data callback provided a dependency function when it was called,
       // cal it in every call of `handleDataSchema()` to force Vue to keep track
-      // of the async dependencies.
+      // of the async dependencies. Also access `reactiveVersion.value` right
+      // away, to ensure that the reactive property is tracked as a dependency:
+      asyncEntry.reactiveVersion.value &&
       asyncEntry.dependencyFunction?.(this.context)
 
       if (asyncEntry.resolved) {
@@ -80,6 +86,9 @@ export default {
               asyncEntry.resolvedData = data
               asyncEntry.resolving = false
               asyncEntry.resolved = true
+              // Trigger reevaluation of the computed getter by increasing the
+              // `reactiveVersion` value.
+              asyncEntry.reactiveVersion.value++
             })
             .catch(error => {
               console.error(error)

package/src/mixins/ResourceMixin.js

@@ -261,7 +261,7 @@ export default {
               ? labelize(data.type)
               : 'Error'
             const text = data?.message ?? error
-            this.notify({ type: 'error', title, text })
+            this.notify({ type: 'error', error, title, text })
           }
         }
       }
@@ -309,6 +309,7 @@ export default {
       notifyError = error =>
         this.notify({
           type: 'error',
+          error,
           title: 'Request Error',
           text: [
             `Unable to send request${error ? ':' : ''}`,

package/src/mixins/SourceMixin.js

@@ -27,6 +27,7 @@ import {
   parseDataPath,
   normalizeDataPath
 } from '@ditojs/utils'
+import { raw } from '@ditojs/ui'
 
 // @vue/component
 export default {
@@ -45,7 +46,7 @@ export default {
   data() {
     return {
       wrappedPrimitives: null,
-      unwrappingPrimitives: false
+      unwrappingPrimitives: raw(false)
     }
   },
 
@@ -95,16 +96,18 @@ export default {
         data ||= []
         const { wrapPrimitives } = this
         if (wrapPrimitives) {
-          if (this.unwrappingPrimitives) {
+          if (this.unwrappingPrimitives.value) {
             // We're done unwrapping once `listData` is reevaluated, so set
             // this to `false` again. See `wrappedPrimitives` watcher above.
             // TODO: Fix side-effects
-            // eslint-disable-next-line
-            this.unwrappingPrimitives = false
+            // eslint-disable-next-line max-len
+            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+            this.unwrappingPrimitives.value = false
           } else {
             // Convert data to a list of wrapped primitives, and return it.
             // TODO: Fix side-effects
-            // eslint-disable-next-line
+            // eslint-disable-next-line max-len
+            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
             this.wrappedPrimitives = data.map(value => ({
               [wrapPrimitives]: value
             }))
@@ -337,11 +340,11 @@ export default {
         const { wrapPrimitives } = this
         // Skip the initial setting of wrappedPrimitives array
         if (wrapPrimitives && from !== null) {
-          // Whenever the wrappedPrimitives change, map their values back to
-          // the array of primitives, in a primitive way :)
-          // But set `unwrappingPrimitives = true`, so the `listData` computed
+          // Whenever the wrappedPrimitives change, map their values back to the
+          // array of primitives, in a primitive way :)
+          // But set `unwrappingPrimitives` to true, so the `listData` computed
           // property knows about it, which sets it to `false` again.
-          this.unwrappingPrimitives = true
+          this.unwrappingPrimitives.value = true
           this.value = to.map(object => object[wrapPrimitives])
         }
       }

package/src/types/DitoTypeUpload.vue

@@ -416,6 +416,7 @@ export default DitoTypeComponent.register('upload', {
           )
           this.notify({
             type: 'error',
+            error,
             title: 'File Upload Error',
             text
           })