@ditojs/admin 2.26.0 → 2.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.26.0",
+  "version": "2.26.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,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": "8f2e07e3774d0e03b24ee78cffe60c5edacb93ae",
   "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

@@ -1,66 +1,82 @@
 <template lang="pug">
+DefineTemplate
+  //- Prevent implicit submission of the form, for example when typing enter
+  //- in an input field.
+  //- https://stackoverflow.com/a/51507806
+  button(
+    v-show="false"
+    type="submit"
+    disabled
+  )
+  DitoSchema(
+    :schema="schema"
+    :dataPath="dataPath"
+    :data="data"
+    :meta="meta"
+    :store="store"
+    :padding="isInlinedSource ? 'nested' : 'root'"
+    :disabled="isLoading"
+    :scrollable="!isInlinedSource"
+    generateLabels
+  )
+    template(#buttons)
+      DitoButtons.dito-buttons-round.dito-buttons-large.dito-buttons-main(
+        :class="{ 'dito-buttons-sticky': !isInlinedSource }"
+        :buttons="buttonSchemas"
+        :dataPath="dataPath"
+        :data="data"
+        :meta="meta"
+        :store="store"
+        :disabled="isLoading"
+      )
+
 .dito-form.dito-scroll-parent(
-  :class="{ 'dito-form-nested': isNestedRoute }"
+  :class="{ 'dito-form-inlined': isInlinedSource }"
   :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.
-  RouterView(
-    v-if="!(isLastUnnestedRoute || isNestedRoute)"
-    v-show="!isActive"
+  template(
+    v-if="isInlinedSource"
   )
-  //- Use a <div> for inlined forms, as we shouldn't nest actual <form> tags.
-  component(
-    v-show="isActive"
-    :is="isNestedRoute ? 'div' : 'form'"
-    :class="{ 'dito-scroll-parent': isRootForm }"
-    @submit.prevent
+    //- Use a <div> for inlined forms, as we shouldn't nest actual <form> tags.
+    //- NOTE: inlined form components are kept alive by using `v-show` instead
+    //- of `v-if` here, so event handling and other things still work with
+    //- inlined editing.
+    div(
+      v-show="isActive"
+    )
+      ReuseTemplate
+  template(
+    v-else
   )
-    //- Prevent implicit submission of the form, for example when typing enter
-    //- in an input field.
-    //- https://stackoverflow.com/a/51507806
-    button(
-      v-show="false"
-      type="submit"
-      disabled
+    //- Only render a router-view here if this isn't the last data route and not
+    //- an inlined form route, which will appear elsewhere in its own view.
+    RouterView(
+      v-if="!isLastUnnestedRoute"
+      v-show="!isActive"
     )
-    DitoSchema(
-      :schema="schema"
-      :dataPath="dataPath"
-      :data="data"
-      :meta="meta"
-      :store="store"
-      :padding="isNestedRoute ? 'nested' : 'root'"
-      :disabled="isLoading"
-      :scrollable="isRootForm"
-      generateLabels
+    form.dito-scroll-parent(
+      v-show="isActive"
+      @submit.prevent
     )
-      template(#buttons)
-        DitoButtons.dito-buttons-round.dito-buttons-large.dito-buttons-main(
-          :class="{ 'dito-buttons-sticky': isRootForm }"
-          :buttons="buttonSchemas"
-          :dataPath="dataPath"
-          :data="data"
-          :meta="meta"
-          :store="store"
-          :disabled="isLoading"
-        )
+      ReuseTemplate
 </template>
 
 <script>
+import { createReusableTemplate } from '@vueuse/core'
 import { clone, capitalize, parseDataPath, assignDeeply } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import RouteMixin from '../mixins/RouteMixin.js'
 import ResourceMixin from '../mixins/ResourceMixin.js'
 import { getResource, getMemberResource } from '../utils/resource.js'
-import { getButtonSchemas, isObjectSource } from '../utils/schema.js'
+import { getButtonSchemas, isInlined, isObjectSource } from '../utils/schema.js'
 import { resolvePath } from '../utils/path.js'
 
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+
 // @vue/component
 export default DitoComponent.component('DitoForm', {
   mixins: [RouteMixin, ResourceMixin],
+  components: { DefineTemplate, ReuseTemplate },
 
   data() {
     return {
@@ -127,8 +143,8 @@ export default DitoComponent.component('DitoForm', {
       )
     },
 
-    isRootForm() {
-      return this.dataPath === '' && !this.isNestedRoute
+    isInlinedSource() {
+      return isInlined(this.sourceSchema)
     },
 
     isActive() {

package/src/components/{DitoFormNested.vue → DitoFormInlined.vue}

@@ -3,14 +3,14 @@ import DitoComponent from '../DitoComponent.js'
 import DitoForm from './DitoForm.vue'
 
 // @vue/component
-export default DitoComponent.component('DitoFormNested', {
+export default DitoComponent.component('DitoFormInlined', {
   extends: DitoForm
 })
 </script>
 
 <style lang="scss">
-.dito-form-nested {
-  // No scrolling inside nested forms, and prevent open .multiselect from
+.dito-form-inlined {
+  // No scrolling in inlined forms, and prevent open .multiselect from
   // being cropped.
   overflow: visible;
 }

package/src/components/index.js

@@ -27,7 +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 DitoFormNested } from './DitoFormNested.vue'
+export { default as DitoFormInlined } from './DitoFormInlined.vue'
 export { default as DitoErrors } from './DitoErrors.vue'
 export { default as DitoScopes } from './DitoScopes.vue'
 export { default as DitoPagination } from './DitoPagination.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/mixins/RouteMixin.js

@@ -60,10 +60,6 @@ export default {
       return false
     },
 
-    isNestedRoute() {
-      return this.meta.nested
-    },
-
     isView() {
       return false
     },

package/src/mixins/SourceMixin.js

@@ -617,7 +617,7 @@ export default {
           isListSource(schema) ? param : null
         ),
         component: DitoComponent.component(
-          nested ? 'DitoFormNested' : 'DitoForm'
+          nested ? 'DitoFormInlined' : 'DitoForm'
         ),
         meta: formMeta
       }

package/src/styles/_table.scss

@@ -219,6 +219,6 @@ table.dito-table {
 }
 
 table.dito-table table.dito-table,
-.dito-form-nested table.dito-table {
+.dito-form-inlined table.dito-table {
   margin: 0;
 }

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(