@ditojs/admin 2.25.0 → 2.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.25.0",
+  "version": "2.26.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,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.0",
+    "@ditojs/utils": "^2.26.0",
+    "@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.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",
+    "@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-router": "^4.3.0",
+    "vue-upload-component": "^3.1.15"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.25.0",
+    "@ditojs/build": "^2.26.0",
     "@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.74.1",
+    "typescript": "^5.4.4",
+    "vite": "^5.2.8"
   },
   "types": "types",
-  "gitHead": "888c84b30ad53c2a44ce50174f7ffb851454cec2",
+  "gitHead": "da47b5b8b9fca80193a7e93344bdc14cdaada329",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoForm.vue

@@ -88,15 +88,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() {
@@ -156,7 +159,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 +238,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 +334,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/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/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/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)

package/src/utils/schema.js

@@ -23,6 +23,7 @@ import { markRaw } from 'vue'
 
 const typeComponents = {}
 const unknownTypeReported = {}
+const emptySchema = {}
 
 export function registerTypeComponent(type, component) {
   typeComponents[type] = component
@@ -324,7 +325,7 @@ export function processSchemaDefaults(api, schema) {
         if (schema[key] === undefined) {
           schema[key] = value
         } else {
-          schema[key] = assignDeeply(value, schema[key])
+          schema[key] = assignDeeply(schema[key], value)
         }
       }
     }
@@ -518,7 +519,15 @@ export function getItemFormSchemaFromForms(forms, item) {
 }
 
 export function getItemFormSchema(schema, item, context) {
-  return getItemFormSchemaFromForms(getFormSchemas(schema, context), item)
+  return (
+    getItemFormSchemaFromForms(getFormSchemas(schema, context), item) ||
+    // Always return a schema object so we don't need to check for it.
+    emptySchema
+  )
+}
+
+export function isEmptySchema(schema) {
+  return schema === emptySchema
 }
 
 export function isCompact(schema) {
@@ -672,11 +681,15 @@ export function computeValue(schema, data, name, dataPath, {
     if (value !== undefined) {
       // Access `data[name]` directly to update the value without calling
       // parse():
+      // TODO: Fix side-effects
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       data[name] = value
     }
   }
   // If the value is still missing after compute, set the default for it:
   if (!(name in data) && !ignoreMissingValue(schema)) {
+    // TODO: Fix side-effects
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     data[name] = getDefaultValue(schema)
   }
   // Now access the value. This is important for reactivity and needs to