@ditojs/admin 2.25.0 → 2.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.25.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,57 +33,57 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.25.0",
-    "@ditojs/utils": "^2.25.0",
-    "@kyvg/vue3-notification": "^3.1.4",
+    "@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.2",
-    "@tiptap/extension-blockquote": "^2.2.2",
-    "@tiptap/extension-bold": "^2.2.2",
-    "@tiptap/extension-bullet-list": "^2.2.2",
-    "@tiptap/extension-code": "^2.2.2",
-    "@tiptap/extension-code-block": "^2.2.2",
-    "@tiptap/extension-document": "^2.2.2",
-    "@tiptap/extension-hard-break": "^2.2.2",
-    "@tiptap/extension-heading": "^2.2.2",
-    "@tiptap/extension-history": "^2.2.2",
-    "@tiptap/extension-horizontal-rule": "^2.2.2",
-    "@tiptap/extension-italic": "^2.2.2",
-    "@tiptap/extension-link": "^2.2.2",
-    "@tiptap/extension-list-item": "^2.2.2",
-    "@tiptap/extension-ordered-list": "^2.2.2",
-    "@tiptap/extension-paragraph": "^2.2.2",
-    "@tiptap/extension-strike": "^2.2.2",
-    "@tiptap/extension-text": "^2.2.2",
-    "@tiptap/extension-underline": "^2.2.2",
-    "@tiptap/pm": "^2.2.2",
-    "@tiptap/vue-3": "^2.2.2",
-    "@vueuse/integrations": "^10.7.2",
+    "@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.0",
+    "filesize": "^10.1.1",
     "filesize-parser": "^1.5.0",
     "focus-trap": "^7.5.4",
-    "nanoid": "^5.0.5",
+    "nanoid": "^5.0.7",
     "sortablejs": "^1.15.2",
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
-    "type-fest": "^4.10.2",
+    "type-fest": "^4.15.0",
     "vue": "3.4.10",
-    "vue-multiselect": "^3.0.0-beta.3",
-    "vue-router": "^4.2.5",
-    "vue-upload-component": "^3.1.8"
+    "vue-multiselect": "^3.0.0",
+    "vue-router": "^4.3.0",
+    "vue-upload-component": "^3.1.15"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.25.0",
+    "@ditojs/build": "^2.26.1",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/compiler-sfc": "3.4.10",
+    "@vue/compiler-sfc": "3.4.21",
     "pug": "^3.0.2",
-    "sass": "1.70.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.1"
+    "sass": "1.75.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8"
   },
   "types": "types",
-  "gitHead": "888c84b30ad53c2a44ce50174f7ffb851454cec2",
+  "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 {
@@ -88,15 +104,18 @@ export default DitoComponent.component('DitoForm', {
     },
 
     schema() {
-      return (
-        this.getItemFormSchema(
-          this.sourceSchema,
-          // If there is no data yet, provide an empty object with just the
-          // right type set, so the form can always be determined.
-          this.data || { type: this.type },
-          this.context
-        ) || {}
-      ) // Always return a schema object so we don't need to check for it.
+      return this.getItemFormSchema(
+        this.sourceSchema,
+        this.data || (
+          this.creationType
+            ? // If there is no data yet but the type to create a new item is
+              // is specified, provide a temporary empty object with just the
+              // type set, so `getItemFormSchema()` can determine the form.
+              { type: this.creationType }
+            : null
+        ),
+        this.context
+      )
     },
 
     buttonSchemas() {
@@ -124,8 +143,8 @@ export default DitoComponent.component('DitoForm', {
       )
     },
 
-    isRootForm() {
-      return this.dataPath === '' && !this.isNestedRoute
+    isInlinedSource() {
+      return isInlined(this.sourceSchema)
     },
 
     isActive() {
@@ -156,7 +175,7 @@ export default DitoComponent.component('DitoForm', {
       return this.mainSchemaComponent?.selectedTab || null
     },
 
-    type() {
+    creationType() {
       // The type of form to create, if there are multiple forms to choose from.
       return this.$route.query.type
     },
@@ -235,7 +254,8 @@ export default DitoComponent.component('DitoForm', {
           // parent data so we can replace the entry at `sourceKey` on it.
           if (i === l - 1) {
             // 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.sourceKey = key
           } else {
             data = data[key]
@@ -330,7 +350,7 @@ export default DitoComponent.component('DitoForm', {
     // @override ResourceMixin.setupData()
     setupData() {
       if (this.isCreating) {
-        this.createdData ||= this.createData(this.schema, this.type)
+        this.createdData ||= this.createData(this.schema, this.creationType)
       } else {
         this.ensureData()
       }

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/DitoPane.vue

@@ -17,7 +17,7 @@
     // -Use <span> for .dito-break so we can use `.dito-container:first-of-type`
     // selector.
     span.dito-break(
-      v-if="schema.break === 'before'"
+      v-if="['before', 'both'].includes(schema.break)"
     )
     DitoContainer(
       v-if="shouldRenderSchema(schema)"
@@ -37,7 +37,7 @@
       :accumulatedBasis="accumulatedBasis"
     )
     span.dito-break(
-      v-if="schema.break === 'after'"
+      v-if="['after', 'both'].includes(schema.break)"
     )
 </template>
 

package/src/components/DitoSchema.vue

@@ -118,7 +118,8 @@ import {
   getNamedSchemas,
   getPanelEntries,
   setDefaultValues,
-  processData
+  processData,
+  isEmptySchema
 } from '../utils/schema.js'
 import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
 
@@ -233,11 +234,15 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     processedData() {
+      // TODO: Fix side-effects
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       return this.processData({ target: 'server', schemaOnly: true })
     },
 
     clipboardData: {
       get() {
+        // TODO: Fix side-effects
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         return this.processData({ target: 'clipboard', schemaOnly: true })
       },
 
@@ -361,6 +366,17 @@ export default DitoComponent.component('DitoSchema', {
   },
 
   watch: {
+    schema: {
+      immediate: true,
+      handler(schema) {
+        // For forms with type depending on loaded data, we need to wait for the
+        // actual schema to become ready before setting up schema related things
+        if (!isEmptySchema(schema)) {
+          this.setupSchema()
+        }
+      }
+    },
+
     routeTab: {
       immediate: true,
       // https://github.com/vuejs/vue-router/issues/3393#issuecomment-1158470149
@@ -397,10 +413,6 @@ export default DitoComponent.component('DitoSchema', {
 
   created() {
     this._register(true)
-    this.setupSchemaFields()
-    // Delegate change events through to parent schema:
-    this.delegate('change', this.parentSchemaComponent)
-    this.emitEvent('initialize') // Not `'create'`, since that's for data.
     if (this.scrollable && this.wide) {
       this.appState.pageClass = 'dito-page--wide'
     }
@@ -419,6 +431,13 @@ export default DitoComponent.component('DitoSchema', {
   },
 
   methods: {
+    setupSchema() {
+      this.setupSchemaFields()
+      // Delegate change events through to parent schema:
+      this.delegate('change', this.parentSchemaComponent)
+      this.emitEvent('initialize') // Not `'create'`, since that's for data.
+    },
+
     getComponentsByDataPath(dataPath) {
       return this._getEntriesByDataPath(this.componentsByDataPath, dataPath)
     },

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/OptionsMixin.js

@@ -186,6 +186,9 @@ export default {
           // we're currently editing.
           for (const option of options) {
             if (!('id' in option)) {
+              // TODO: Fix side-effects
+              // eslint-disable-next-line max-len
+              // eslint-disable-next-line vue/no-side-effects-in-computed-properties
               setTemporaryId(option, 'id')
             }
           }
@@ -203,7 +206,7 @@ export default {
                 }
                 results.push(entry)
               }
-              entry.options.push(option)
+              entry[this.groupByOptions].push(option)
               return results
             },
             []

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/types/DitoTypeColor.vue

@@ -87,7 +87,8 @@ export default DitoTypeComponent.register('color', {
           const color = tinycolor(this.value)
           if (color.isValid()) {
             // 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.convertedHexValue = color
               .toString(color.getAlpha() < 1 ? 'hex8' : 'hex6')
               .slice(1)

package/src/types/DitoTypeComputed.vue

@@ -33,7 +33,8 @@ export default DitoTypeComponent.register(
           if (schema.data || schema.dataPath) {
             const value = this.handleDataSchema(schema, 'schema')
             // 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.data[this.name] = value
           }
           return TypeMixin.computed.value.get.call(this)