@ditojs/admin 2.26.0 → 2.26.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.26.0",
+  "version": "2.26.2",
   "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,31 +33,31 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.26.0",
-    "@ditojs/utils": "^2.26.0",
+    "@ditojs/ui": "^2.26.1",
+    "@ditojs/utils": "^2.26.1",
     "@kyvg/vue3-notification": "^3.2.1",
     "@lk77/vue3-color": "^3.0.6",
-    "@tiptap/core": "^2.2.6",
-    "@tiptap/extension-blockquote": "^2.2.6",
-    "@tiptap/extension-bold": "^2.2.6",
-    "@tiptap/extension-bullet-list": "^2.2.6",
-    "@tiptap/extension-code": "^2.2.6",
-    "@tiptap/extension-code-block": "^2.2.6",
-    "@tiptap/extension-document": "^2.2.6",
-    "@tiptap/extension-hard-break": "^2.2.6",
-    "@tiptap/extension-heading": "^2.2.6",
-    "@tiptap/extension-history": "^2.2.6",
-    "@tiptap/extension-horizontal-rule": "^2.2.6",
-    "@tiptap/extension-italic": "^2.2.6",
-    "@tiptap/extension-link": "^2.2.6",
-    "@tiptap/extension-list-item": "^2.2.6",
-    "@tiptap/extension-ordered-list": "^2.2.6",
-    "@tiptap/extension-paragraph": "^2.2.6",
-    "@tiptap/extension-strike": "^2.2.6",
-    "@tiptap/extension-text": "^2.2.6",
-    "@tiptap/extension-underline": "^2.2.6",
-    "@tiptap/pm": "^2.2.6",
-    "@tiptap/vue-3": "^2.2.6",
+    "@tiptap/core": "^2.3.0",
+    "@tiptap/extension-blockquote": "^2.3.0",
+    "@tiptap/extension-bold": "^2.3.0",
+    "@tiptap/extension-bullet-list": "^2.3.0",
+    "@tiptap/extension-code": "^2.3.0",
+    "@tiptap/extension-code-block": "^2.3.0",
+    "@tiptap/extension-document": "^2.3.0",
+    "@tiptap/extension-hard-break": "^2.3.0",
+    "@tiptap/extension-heading": "^2.3.0",
+    "@tiptap/extension-history": "^2.3.0",
+    "@tiptap/extension-horizontal-rule": "^2.3.0",
+    "@tiptap/extension-italic": "^2.3.0",
+    "@tiptap/extension-link": "^2.3.0",
+    "@tiptap/extension-list-item": "^2.3.0",
+    "@tiptap/extension-ordered-list": "^2.3.0",
+    "@tiptap/extension-paragraph": "^2.3.0",
+    "@tiptap/extension-strike": "^2.3.0",
+    "@tiptap/extension-text": "^2.3.0",
+    "@tiptap/extension-underline": "^2.3.0",
+    "@tiptap/pm": "^2.3.0",
+    "@tiptap/vue-3": "^2.3.0",
     "@vueuse/integrations": "^10.9.0",
     "codeflask": "^1.4.1",
     "filesize": "^10.1.1",
@@ -69,21 +69,21 @@
     "tippy.js": "^6.3.7",
     "type-fest": "^4.15.0",
     "vue": "3.4.10",
-    "vue-multiselect": "^3.0.0-beta.3",
+    "vue-multiselect": "^3.0.0",
     "vue-router": "^4.3.0",
     "vue-upload-component": "^3.1.15"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.26.0",
+    "@ditojs/build": "^2.26.1",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/compiler-sfc": "3.4.21",
     "pug": "^3.0.2",
-    "sass": "1.74.1",
-    "typescript": "^5.4.4",
+    "sass": "1.75.0",
+    "typescript": "^5.4.5",
     "vite": "^5.2.8"
   },
   "types": "types",
-  "gitHead": "da47b5b8b9fca80193a7e93344bdc14cdaada329",
+  "gitHead": "7fd7a0b9a8727e1a27a8e78e7381f58c95017499",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoContext.js

@@ -61,6 +61,12 @@ export default class DitoContext {
       : new DitoContext(component, context)
   }
 
+  extend(object) {
+    // Create a copy of this context that inherits from the real one, but
+    // overrides some properties with the ones from the passed `object`.
+    return Object.setPrototypeOf(object, this)
+  }
+
   // `nested` is `true` when the data-path points a value inside an item, and
   // `false` when it points to the item itself.
   get nested() {

package/src/components/DitoForm.vue

@@ -3,20 +3,18 @@
   :class="{ 'dito-form-nested': isNestedRoute }"
   :data-resource="sourceSchema.path"
 )
-  //- NOTE: Nested form components are kept alive by using `v-show` instead of
-  //- `v-if` here, so event handling and other things still work with nested
-  //- editing. Only render a router-view here if this isn't the last data route
-  //- and not a nested form route, which will appear elsewhere in its own view.
+  //- Only render a router-view here if this isn't the last data route and not a
+  //- nested form route, which will appear elsewhere in its own view.
   RouterView(
-    v-if="!(isLastUnnestedRoute || isNestedRoute)"
+    v-if="!isLastUnnestedRoute && !isNestedRoute"
     v-show="!isActive"
   )
-  //- Use a <div> for inlined forms, as we shouldn't nest actual <form> tags.
-  component(
+  //- NOTE: Nested form components are kept alive by using `v-show` instead of
+  //- `v-if` here, so event handling and other things still work with nested
+  //- editing.
+  DitoFormInner(
     v-show="isActive"
-    :is="isNestedRoute ? 'div' : 'form'"
-    :class="{ 'dito-scroll-parent': isRootForm }"
-    @submit.prevent
+    :nested="isNestedRoute"
   )
     //- Prevent implicit submission of the form, for example when typing enter
     //- in an input field.
@@ -34,12 +32,12 @@
       :store="store"
       :padding="isNestedRoute ? 'nested' : 'root'"
       :disabled="isLoading"
-      :scrollable="isRootForm"
+      :scrollable="!isNestedRoute"
       generateLabels
     )
       template(#buttons)
         DitoButtons.dito-buttons-round.dito-buttons-large.dito-buttons-main(
-          :class="{ 'dito-buttons-sticky': isRootForm }"
+          :class="{ 'dito-buttons-sticky': !isNestedRoute }"
           :buttons="buttonSchemas"
           :dataPath="dataPath"
           :data="data"
@@ -127,10 +125,6 @@ export default DitoComponent.component('DitoForm', {
       )
     },
 
-    isRootForm() {
-      return this.dataPath === '' && !this.isNestedRoute
-    },
-
     isActive() {
       return this.isLastRoute || this.isLastUnnestedRoute
     },

package/src/components/DitoFormInner.vue

@@ -0,0 +1,26 @@
+<template lang="pug">
+//- Use a <div> for nested forms, as we shouldn't nest actual <form> tags.
+div(
+  v-if="nested"
+)
+  slot
+form.dito-scroll-parent(
+  v-else
+  @submit.prevent
+)
+  slot
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoFormInner', {
+  props: {
+    nested: {
+      type: Boolean,
+      default: false
+    }
+  }
+})
+</script>

package/src/components/index.js

@@ -27,6 +27,7 @@ export { default as DitoCreateButton } from './DitoCreateButton.vue'
 export { default as DitoClipboard } from './DitoClipboard.vue'
 export { default as DitoView } from './DitoView.vue'
 export { default as DitoForm } from './DitoForm.vue'
+export { default as DitoFormInner } from './DitoFormInner.vue'
 export { default as DitoFormNested } from './DitoFormNested.vue'
 export { default as DitoErrors } from './DitoErrors.vue'
 export { default as DitoScopes } from './DitoScopes.vue'

package/src/mixins/DitoMixin.js

@@ -534,30 +534,36 @@ export default {
       }
     },
 
-    async emitEvent(event, {
+    emitEvent(event, {
       context = null,
       parent = null
     } = {}) {
       const hasListeners = this.hasListeners(event)
       const parentHasListeners = parent?.hasListeners(event)
       if (hasListeners || parentHasListeners) {
-        // The effects of some events need some time to propagate through Vue.
-        // Use $nextTick() to make sure our handlers see these changes.
-        // For example, `processedItem` is only correct after components that
-        // are newly rendered due to data changes have registered themselves.
-        if (['load', 'change'].includes(event)) {
-          await this.$nextTick()
-        }
-
-        const getContext = () => (context = DitoContext.get(this, context))
-        const res = hasListeners
-          ? await this.emit(event, getContext())
-          : undefined
-        // Don't bubble to parent if handled event returned `false`
-        if (parentHasListeners && res !== false) {
-          parent.emit(event, getContext())
-        }
-        return res
+        const emitEvent = target =>
+          target.emit(event, (context = DitoContext.get(this, context)))
+
+        const handleParentListeners = result =>
+          // Don't bubble to parent if handled event returned `false`
+          parentHasListeners && result !== false
+            ? emitEvent(parent).then(() => result)
+            : result
+
+        const handleListeners = () =>
+          hasListeners
+            ? emitEvent(this).then(handleParentListeners)
+            : handleParentListeners(undefined)
+
+        return ['load', 'change'].includes(event)
+          ? // The effects of some events need time to propagate through Vue.
+            // Use $nextTick() to make sure our handlers see these changes.
+            // For example, `processedItem` is only correct after components
+            // that are newly rendered due to data changes have registered.
+            // NOTE: The result of `handleListeners()` makes it through the
+            // `$nextTick()` call and will be returned as expected.
+            this.$nextTick(handleListeners)
+          : handleListeners()
       }
     },
 

package/src/mixins/EmitterMixin.js

@@ -118,6 +118,8 @@ export default {
           }
         })
       }
+      // Make sure it's thenable even if there are no listeners.
+      return Promise.resolve()
     },
 
     // Checks if the component has listeners for a given event type:

package/src/utils/schema.js

@@ -122,7 +122,12 @@ export function getSchemaIdentifier(schema) {
   return JSON.stringify(schema)
 }
 
-export async function resolveSchema(schema, unwrapModule = false) {
+const resolvedSchemas = new WeakMap()
+export async function resolveSchema(value, unwrapModule = false) {
+  if (resolvedSchemas.has(value)) {
+    return resolvedSchemas.get(value)
+  }
+  let schema = value
   if (isFunction(schema)) {
     schema = schema()
   }
@@ -147,6 +152,7 @@ export async function resolveSchema(schema, unwrapModule = false) {
       }
     }
   }
+  resolvedSchemas.set(value, schema)
   return schema
 }
 
@@ -236,29 +242,34 @@ export async function resolveSchemaComponents(schemas) {
   await mapConcurrently(Object.values(schemas || {}), resolveSchemaComponent)
 }
 
+const processedSchemas = new WeakSet()
 export async function processSchemaComponents(
   api,
   schema,
   routes = null,
   level = 0
 ) {
-  const promises = []
-  const process = (component, name, relativeLevel) => {
-    promises.push(
-      processSchemaComponent(
-        api,
-        component,
-        name,
-        routes,
-        level + relativeLevel
+  if (schema && !processedSchemas.has(schema)) {
+    processedSchemas.add(schema)
+
+    const promises = []
+    const process = (component, name, relativeLevel) => {
+      promises.push(
+        processSchemaComponent(
+          api,
+          component,
+          name,
+          routes,
+          level + relativeLevel
+        )
       )
-    )
-  }
+    }
 
-  iterateNestedSchemaComponents(schema, process)
-  iterateSchemaComponents(getPanelSchemas(schema), process)
+    iterateNestedSchemaComponents(schema, process)
+    iterateSchemaComponents(getPanelSchemas(schema), process)
 
-  await Promise.all(promises)
+    await Promise.all(promises)
+  }
 }
 
 export async function processSchemaComponent(