@ditojs/admin 2.10.7 → 2.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.10.7",
+  "version": "2.11.1",
   "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,57 +33,57 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.10.7",
-    "@ditojs/utils": "^2.10.5",
+    "@ditojs/ui": "^2.11.1",
+    "@ditojs/utils": "^2.11.1",
     "@kyvg/vue3-notification": "^2.9.1",
     "@lk77/vue3-color": "^3.0.6",
-    "@tiptap/core": "^2.0.3",
-    "@tiptap/extension-blockquote": "^2.0.3",
-    "@tiptap/extension-bold": "^2.0.3",
-    "@tiptap/extension-bullet-list": "^2.0.3",
-    "@tiptap/extension-code": "^2.0.3",
-    "@tiptap/extension-code-block": "^2.0.3",
-    "@tiptap/extension-document": "^2.0.3",
-    "@tiptap/extension-hard-break": "^2.0.3",
-    "@tiptap/extension-heading": "^2.0.3",
-    "@tiptap/extension-history": "^2.0.3",
-    "@tiptap/extension-horizontal-rule": "^2.0.3",
-    "@tiptap/extension-italic": "^2.0.3",
-    "@tiptap/extension-link": "^2.0.3",
-    "@tiptap/extension-list-item": "^2.0.3",
-    "@tiptap/extension-ordered-list": "^2.0.3",
-    "@tiptap/extension-paragraph": "^2.0.3",
-    "@tiptap/extension-strike": "^2.0.3",
-    "@tiptap/extension-text": "^2.0.3",
-    "@tiptap/extension-underline": "^2.0.3",
-    "@tiptap/pm": "^2.0.3",
-    "@tiptap/vue-3": "^2.0.3",
+    "@tiptap/core": "^2.0.4",
+    "@tiptap/extension-blockquote": "^2.0.4",
+    "@tiptap/extension-bold": "^2.0.4",
+    "@tiptap/extension-bullet-list": "^2.0.4",
+    "@tiptap/extension-code": "^2.0.4",
+    "@tiptap/extension-code-block": "^2.0.4",
+    "@tiptap/extension-document": "^2.0.4",
+    "@tiptap/extension-hard-break": "^2.0.4",
+    "@tiptap/extension-heading": "^2.0.4",
+    "@tiptap/extension-history": "^2.0.4",
+    "@tiptap/extension-horizontal-rule": "^2.0.4",
+    "@tiptap/extension-italic": "^2.0.4",
+    "@tiptap/extension-link": "^2.0.4",
+    "@tiptap/extension-list-item": "^2.0.4",
+    "@tiptap/extension-ordered-list": "^2.0.4",
+    "@tiptap/extension-paragraph": "^2.0.4",
+    "@tiptap/extension-strike": "^2.0.4",
+    "@tiptap/extension-text": "^2.0.4",
+    "@tiptap/extension-underline": "^2.0.4",
+    "@tiptap/pm": "^2.0.4",
+    "@tiptap/vue-3": "^2.0.4",
     "@vueuse/integrations": "^10.2.1",
     "codeflask": "^1.4.1",
-    "filesize": "^10.0.7",
+    "filesize": "^10.0.8",
     "filesize-parser": "^1.5.0",
     "focus-trap": "^7.5.2",
     "nanoid": "^4.0.2",
     "sortablejs": "^1.15.0",
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
-    "type-fest": "^3.12.0",
+    "type-fest": "^4.0.0",
     "vue": "^3.3.4",
     "vue-multiselect": "^3.0.0-beta.2",
     "vue-router": "^4.2.4",
     "vue-upload-component": "^3.1.8"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.10.7",
+    "@ditojs/build": "^2.11.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/compiler-sfc": "^3.3.4",
     "pug": "^3.0.2",
-    "sass": "1.63.6",
+    "sass": "1.64.1",
     "typescript": "^5.1.6",
-    "vite": "^4.4.2"
+    "vite": "^4.4.7"
   },
   "types": "types",
-  "gitHead": "3d02df42dc8d7ee782d35f53c3877cc3e9fb88c7",
+  "gitHead": "fb1e7ce180f5c9ce8e058a7ef22465e0428cd758",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoAdmin.js

@@ -251,7 +251,8 @@ async function request(api, {
   params = null,
   query = params || null,
   headers = null,
-  data = null
+  data = null,
+  signal = null
 }) {
   if (params) {
     deprecate(
@@ -271,7 +272,8 @@ async function request(api, {
     credentials:
       isApiUrl && api.cors?.credentials
         ? 'include'
-        : 'same-origin'
+        : 'same-origin',
+    signal
   })
 
   if (response.headers.get('Content-Type')?.includes('application/json')) {

package/src/components/DitoForm.vue

@@ -476,7 +476,11 @@ export default DitoComponent.component('DitoForm', {
         } else if (this.isCreating) {
           // Redirect to the form editing the newly created item:
           const id = this.getItemId(this.schema, this.data)
-          this.$router.replace({ path: resolvePath(`${this.path}/../${id}`) })
+          this.$router.replace({
+            path: resolvePath(`${this.path}/../${id}`),
+            // Preserve hash for tabs:
+            hash: this.$route.hash
+          })
         }
       }
       return success

package/src/components/DitoPane.vue

@@ -240,6 +240,8 @@ export default DitoComponent.component('DitoPane', {
   $self: &;
   $root-padding: $content-padding - $form-spacing-half;
 
+  --pane-padding: 0px;
+
   display: flex;
   position: relative;
   flex-flow: row wrap;
@@ -247,6 +249,7 @@ export default DitoComponent.component('DitoPane', {
   align-content: flex-start;
   // Remove the padding added by `.dito-container` inside `.dito-pane`:
   margin: -$form-spacing-half;
+  padding: var(--pane-padding);
   // Use `flex: 0%` for all `.dito-pane` except `.dito-pane__main`,
   // so that the `.dito-buttons-main` can be moved all the way to the bottom.
   flex: 0%;
@@ -260,10 +263,10 @@ export default DitoComponent.component('DitoPane', {
     margin: 0;
     // Move the negative margin used to remove the padding added by
     // `.dito-container` inside `.dito-pane` to the padding:
-    padding: $root-padding;
+    --pane-padding: #{$root-padding};
 
     &#{$self}--single {
-      padding: $content-padding;
+      --pane-padding: #{$content-padding};
     }
 
     &:has(> .dito-container--label-vertical:first-of-type) {
@@ -293,11 +296,11 @@ export default DitoComponent.component('DitoPane', {
   }
 
   &--padding-inlined {
-    padding: 0;
+    --pane-padding: 0px;
   }
 
   &--padding-nested {
-    padding: $form-spacing;
+    --pane-padding: #{$form-spacing};
 
     &:has(> .dito-container--label-vertical:first-of-type) {
       // Reduce top spacing when the first row has labels.

package/src/components/DitoRoot.vue

@@ -502,7 +502,9 @@ function addRoutes(router, routes) {
 .dito-drag-leave-active {
   $duration: 0.15s;
 
-  transition: opacity $duration, backdrop-filter $duration;
+  transition:
+    opacity $duration,
+    backdrop-filter $duration;
 
   ~ * .dito-drop-target {
     transition: filter $duration;

package/src/components/DitoSchema.vue

@@ -57,11 +57,13 @@ slot(name="before")
       )
         template(
           v-for="(tabSchema, tab) in tabs"
+          :key="tab"
         )
+          //- TODO: Switch to v-if instead of v-show, once validation is
+          //- decoupled from components.
           DitoPane.dito-pane__tab(
-            v-if="selectedTab === tab"
+            v-show="selectedTab === tab"
             ref="tabs"
-            :key="tab"
             :tab="tab"
             :schema="tabSchema"
             :dataPath="dataPath"

package/src/mixins/DataMixin.js

@@ -20,10 +20,7 @@ export default {
   },
 
   methods: {
-    handleDataSchema(schema, name, {
-      resolveCounter = 1,
-      ...loadingOptions
-    } = {}) {
+    handleDataSchema(schema, name, loadingOptions) {
       if (!isObject(schema)) {
         schema = { data: schema }
       }
@@ -31,27 +28,24 @@ export default {
       // See if there is async data loading already in process.
       const asyncEntry = (this.asyncDataEntries[name] ||= reactive({
         dependencyFunction: null,
-        resolveCounter: 0,
-        resolvedData: null,
-        resolving: false
+        resolvedData: undefined,
+        resolving: false,
+        resolved: false
       }))
       // 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.
       asyncEntry.dependencyFunction?.(this.context)
 
-      if (asyncEntry.resolveCounter > 0) {
-        // If the data was resolved already, return it and clear the value once
-        // `resolveCounter` reaches zero. Counting is needed because depending
-        // on the use of data and reactivity, multiple calls to the computed
-        // getter are triggered when the data is changing. Clearing the resolved
-        // data works because Vue caches the result of computed getters and only
-        // reevaluates if one of the dependencies changed. This is to ensure
-        // that a cached value here doesn't block / override reevaluation:
+      if (asyncEntry.resolved) {
+        // If the data was resolved already, return it and clear the resolved
+        // value. This works because Vue caches the result of computed getters
+        // and only reevaluates if one of the dependencies changed. This is to
+        // ensure that a cached value here doesn't block / override
+        // reevaluation when a dependency changes:
         const { resolvedData } = asyncEntry
-        if (--asyncEntry.resolveCounter === 0) {
-          asyncEntry.resolvedData = null
-        }
+        asyncEntry.resolvedData = undefined
+        asyncEntry.resolved = false
         return resolvedData
       }
       // Avoid calling the data function twice:
@@ -73,6 +67,7 @@ export default {
             data = result
           }
         }
+        // NOTE: If the data is not a promise, it is resolved already.
         if (isPromise(data)) {
           // If the data is asynchronous, it can't be returned straight away.
           // But we can cheat using computed properties and `resolvedData`,
@@ -80,11 +75,16 @@ export default {
           // triggering a recompute of the computed property that calls
           // `handleDataSchema()`.
           asyncEntry.resolving = true
-          this.resolveData(data, loadingOptions).then(data => {
-            asyncEntry.resolveCounter = resolveCounter
-            asyncEntry.resolvedData = data
-            asyncEntry.resolving = false
-          })
+          this.resolveData(data, loadingOptions)
+            .then(data => {
+              asyncEntry.resolvedData = data
+              asyncEntry.resolving = false
+              asyncEntry.resolved = true
+            })
+            .catch(error => {
+              console.error(error)
+              asyncEntry.resolving = false
+            })
           // Clear data until promise is resolved and `resolvedData` is set
           data = null
         }

package/src/mixins/DitoMixin.js

@@ -321,14 +321,28 @@ export default {
       return url ? this.api.getApiUrl({ url, query: resource.query }) : null
     },
 
-    async sendRequest({ method, url, resource, query, data, internal }) {
+    async sendRequest({
+      method,
+      url,
+      resource,
+      query,
+      data,
+      signal,
+      internal
+    }) {
       url ||= this.getResourceUrl(resource)
       method ||= resource?.method
       const checkUser = !internal && this.api.isApiUrl(url)
       if (checkUser) {
         await this.rootComponent.ensureUser()
       }
-      const response = await this.api.request({ method, url, data, query })
+      const response = await this.api.request({
+        method,
+        url,
+        query,
+        data,
+        signal
+      })
       // Detect change of the own user, and fetch it again if it was changed.
       if (
         checkUser &&

package/src/mixins/OptionsMixin.js

@@ -69,9 +69,7 @@ export default {
     },
 
     options() {
-      const data = this.handleDataSchema(this.schema.options, 'options', {
-        resolveCounter: 1
-      }) ?? []
+      const data = this.handleDataSchema(this.schema.options, 'options') ?? []
       if (!isArray(data)) {
         throw new Error(`Invalid options data, should be array: ${data}`)
       }

package/src/mixins/ResourceMixin.js

@@ -20,7 +20,8 @@ export default {
 
   data() {
     return {
-      loadedData: null
+      loadedData: null,
+      abortController: null
     }
   },
 
@@ -239,8 +240,12 @@ export default {
         updateRoot: true, // Display spinner in header when loading in resources
         updateView: this.isInView // Notify view of loading for view components
       }
+      this.abortController?.abort()
+      const controller = new AbortController()
+      this.abortController = controller
+      const { signal } = controller
+      const request = { method, resource, query, data, signal }
       this.setLoading(true, loadingOptions)
-      const request = { method, resource, data, query }
       try {
         const response = await this.sendRequest(request)
         // Pass both request and response to the callback, so they can be
@@ -258,7 +263,10 @@ export default {
           this.notify({ type: 'error', title, text })
         }
       }
-      this.setLoading(false, loadingOptions)
+      if (this.abortController === controller) {
+        this.abortController = null
+        this.setLoading(false, loadingOptions)
+      }
     },
 
     getPayloadData(button, method) {

package/src/styles/_button.scss

@@ -142,11 +142,15 @@
     position: sticky;
     bottom: 0;
     z-index: $z-index-main-buttons;
-    margin-bottom: -$content-padding;
+    background: $content-color-background;
     margin-top: 2 * $content-padding;
+    margin-bottom: calc(-1 * var(--pane-padding, 0px));
     box-shadow: 0 (-$content-padding) $content-padding (-$content-padding)
       $color-shadow;
-    background: $content-color-background;
+
+    &:empty {
+      display: none;
+    }
   }
 
   &.dito-buttons-round,

package/src/types/DitoTypeComputed.vue

@@ -31,12 +31,7 @@ export default DitoTypeComponent.register(
         get() {
           const { schema } = this
           if (schema.data || schema.dataPath) {
-            const value = this.handleDataSchema(schema, 'schema', {
-              // Modifying `this.data` below triggers another call of the
-              // `value` getter, so use a value of 2 for `resolveCounter` to
-              // return the resolved data twice.
-              resolveCounter: 2
-            })
+            const value = this.handleDataSchema(schema, 'schema')
             // TODO: Fix side-effects
             // eslint-disable-next-line
             this.data[this.name] = value