@ditojs/admin 2.35.0 → 2.36.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.35.0",
+  "version": "2.36.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",
@@ -39,34 +39,34 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.35.0",
-    "@ditojs/utils": "^2.35.0",
+    "@ditojs/ui": "^2.36.1",
+    "@ditojs/utils": "^2.36.0",
     "@kyvg/vue3-notification": "^3.4.0",
     "@lk77/vue3-color": "^3.0.6",
-    "@tiptap/core": "^2.8.0",
-    "@tiptap/extension-blockquote": "^2.8.0",
-    "@tiptap/extension-bold": "^2.8.0",
-    "@tiptap/extension-bullet-list": "^2.8.0",
-    "@tiptap/extension-code": "^2.8.0",
-    "@tiptap/extension-code-block": "^2.8.0",
-    "@tiptap/extension-document": "^2.8.0",
-    "@tiptap/extension-hard-break": "^2.8.0",
-    "@tiptap/extension-heading": "^2.8.0",
-    "@tiptap/extension-history": "^2.8.0",
-    "@tiptap/extension-horizontal-rule": "^2.8.0",
-    "@tiptap/extension-italic": "^2.8.0",
-    "@tiptap/extension-link": "^2.8.0",
-    "@tiptap/extension-list-item": "^2.8.0",
-    "@tiptap/extension-ordered-list": "^2.8.0",
-    "@tiptap/extension-paragraph": "^2.8.0",
-    "@tiptap/extension-strike": "^2.8.0",
-    "@tiptap/extension-subscript": "^2.8.0",
-    "@tiptap/extension-superscript": "^2.8.0",
-    "@tiptap/extension-text": "^2.8.0",
-    "@tiptap/extension-text-style": "^2.8.0",
-    "@tiptap/extension-underline": "^2.8.0",
-    "@tiptap/pm": "^2.8.0",
-    "@tiptap/vue-3": "^2.8.0",
+    "@tiptap/core": "^2.9.1",
+    "@tiptap/extension-blockquote": "^2.9.1",
+    "@tiptap/extension-bold": "^2.9.1",
+    "@tiptap/extension-bullet-list": "^2.9.1",
+    "@tiptap/extension-code": "^2.9.1",
+    "@tiptap/extension-code-block": "^2.9.1",
+    "@tiptap/extension-document": "^2.9.1",
+    "@tiptap/extension-hard-break": "^2.9.1",
+    "@tiptap/extension-heading": "^2.9.1",
+    "@tiptap/extension-history": "^2.9.1",
+    "@tiptap/extension-horizontal-rule": "^2.9.1",
+    "@tiptap/extension-italic": "^2.9.1",
+    "@tiptap/extension-link": "^2.9.1",
+    "@tiptap/extension-list-item": "^2.9.1",
+    "@tiptap/extension-ordered-list": "^2.9.1",
+    "@tiptap/extension-paragraph": "^2.9.1",
+    "@tiptap/extension-strike": "^2.9.1",
+    "@tiptap/extension-subscript": "^2.9.1",
+    "@tiptap/extension-superscript": "^2.9.1",
+    "@tiptap/extension-text": "^2.9.1",
+    "@tiptap/extension-text-style": "^2.9.1",
+    "@tiptap/extension-underline": "^2.9.1",
+    "@tiptap/pm": "^2.9.1",
+    "@tiptap/vue-3": "^2.9.1",
     "@vueuse/integrations": "^11.1.0",
     "codeflask": "^1.4.1",
     "filesize": "^10.1.6",
@@ -77,16 +77,16 @@
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
     "type-fest": "^4.26.1",
-    "vue": "^3.5.11",
+    "vue": "^3.5.12",
     "vue-multiselect": "^3.1.0",
     "vue-router": "^4.4.5",
     "vue-upload-component": "^3.1.17"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.35.0",
+    "@ditojs/build": "^2.36.1",
     "typescript": "^5.6.3",
-    "vite": "^5.4.8"
+    "vite": "^5.4.10"
   },
   "types": "types",
-  "gitHead": "53671911f207390474d992e72a9671fb93f2b78c"
+  "gitHead": "70fd2abe897c2a4fd5d51cdaa06493c059f05d46"
 }

package/src/DitoContext.js

@@ -1,5 +1,5 @@
 import { toRaw } from 'vue'
-import { isFunction } from '@ditojs/utils'
+import { getValueAtDataPath, isFunction } from '@ditojs/utils'
 import {
   getItemDataPath,
   getParentItemDataPath,
@@ -11,24 +11,37 @@ import {
 
 const { hasOwnProperty } = Object.prototype
 
-// `DitoContext` instances are a thin wrapper around raw `context` objects,
-// which themselves actually inherit from the linked `component` instance, so
-// that they only need to provide the values that should be different than
-// in the underlying component. In order to not expose all fields from the
-// component, the wrapper is introduced:
+// See also `ContextMixin`: `DitoContext` instances are a thin wrapper around
+// raw `context` objects, which themselves actually inherit from the linked
+// `component` instance, so that they only need to provide the values that
+// should be different than in the underlying component. In order to not expose
+// all fields from the component, the wrapper is introduced.
+
 // Use WeakMap for the raw `context` objects, so we don't have to pollute the
 // actual `DitoContext` instance with it.
 const contexts = new WeakMap()
 
-function get(context, key, defaultValue) {
-  let raw = toRaw(context)
+function toObject(context) {
+  const rawStart = toRaw(context)
+  let raw = rawStart
   let object = null
   // In case `DitoContext.extend()` was used, we need to find the actual context
   // object from the object's the inheritance chain:
-  while (raw && !object) {
+  do {
     object = contexts.get(raw)
+    if (object) break
     raw = Object.getPrototypeOf(raw)
+  } while (raw)
+  if (object && raw !== rawStart) {
+    // Assign the passed context with the original object as well, so we don't
+    // have to search for it again:
+    contexts.set(raw, object)
   }
+  return object
+}
+
+function get(context, key, defaultValue) {
+  const object = toObject(context)
   const value = key in object ? object[key] : undefined
   // If `object` explicitly sets the key to `undefined`, return it.
   return value !== undefined || hasOwnProperty.call(object, key)
@@ -39,7 +52,7 @@ function get(context, key, defaultValue) {
 }
 
 function set(context, key, value) {
-  contexts.get(toRaw(context))[key] = value
+  toObject(context)[key] = value
 }
 
 export default class DitoContext {
@@ -85,7 +98,16 @@ export default class DitoContext {
   }
 
   get value() {
-    return get(this, 'value', undefined)
+    return get(
+      this,
+      'value',
+      () =>
+        // If the value is not defined on the underlying object, it's not a type
+        // component. If it is nested, we can still get the value from the root.
+        this.nested
+          ? getValueAtDataPath(this.rootItem, this.dataPath)
+          : undefined
+    )
   }
 
   get dataPath() {
@@ -118,10 +140,12 @@ export default class DitoContext {
 
   // NOTE: While internally, we speak of `data`, in the API surface the
   // term `item` is used for the data that relates to editing objects:
-  // If `data` isn't provided, we can determine it from rootData & dataPath:
   get item() {
-    return get(this, 'data', () =>
-      getItem(this.rootItem, this.dataPath, this.nested)
+    return get(
+      this,
+      'data',
+      // If `data` isn't provided, we can determine it from rootData & dataPath:
+      () => getItem(this.rootItem, this.dataPath, this.nested) || null
     )
   }
 
@@ -133,8 +157,7 @@ export default class DitoContext {
   // processing with `rootData` and `dataPath`.
   get parentItem() {
     const item = (
-      getParentItem(this.rootItem, this.dataPath, this.nested) ||
-      null
+      getParentItem(this.rootItem, this.dataPath, this.nested) || null
     )
     return item !== this.item ? item : null
   }

package/src/components/DitoButtons.vue

@@ -12,6 +12,7 @@
       :dataPath="buttonDataPath"
       :data="data"
       :meta="meta"
+      :nested="nested"
       :store="getChildStore(buttonSchema.name)"
       :disabled="disabled"
     )
@@ -28,11 +29,14 @@
 
 <script>
 import DitoComponent from '../DitoComponent.js'
+import ContextMixin from '../mixins/ContextMixin.js'
 import { appendDataPath } from '../utils/data.js'
 import { hasSlotContent, hasVNodeContent } from '@ditojs/ui/src'
 
 // @vue/component
 export default DitoComponent.component('DitoButtons', {
+  mixins: [ContextMixin],
+
   provide: {
     $tabComponent: () => null
   },
@@ -43,6 +47,7 @@ export default DitoComponent.component('DitoButtons', {
     data: { type: [Object, Array], default: null },
     meta: { type: Object, default: () => ({}) },
     store: { type: Object, default: () => ({}) },
+    nested: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false }
   },
 

package/src/components/DitoContainer.vue

@@ -46,7 +46,8 @@
 <script>
 import { isString, isNumber } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
-import DitoContext from '../DitoContext.js'
+import ValueMixin from '../mixins/ValueMixin.js'
+import ContextMixin from '../mixins/ContextMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import {
   getAllPanelEntries,
@@ -58,6 +59,7 @@ import { parseFraction } from '../utils/math.js'
 
 // @vue/component
 export default DitoComponent.component('DitoContainer', {
+  mixins: [ValueMixin, ContextMixin],
   props: {
     schema: { type: Object, required: true },
     dataPath: { type: String, default: '' },
@@ -79,8 +81,8 @@ export default DitoComponent.component('DitoContainer', {
   },
 
   computed: {
-    context() {
-      return new DitoContext(this, { nested: this.nested })
+    name() {
+      return this.schema.name
     },
 
     type() {

package/src/components/DitoCreateButton.vue

@@ -30,12 +30,13 @@
 
 <script>
 import DitoComponent from '../DitoComponent.js'
+import ContextMixin from '../mixins/ContextMixin.js'
 import PulldownMixin from '../mixins/PulldownMixin.js'
 import { getFormSchemas, isInlined } from '../utils/schema.js'
 
 // @vue/component
 export default DitoComponent.component('DitoCreateButton', {
-  mixins: [PulldownMixin],
+  mixins: [ContextMixin, PulldownMixin],
 
   props: {
     schema: { type: Object, required: true },
@@ -52,6 +53,7 @@ export default DitoComponent.component('DitoCreateButton', {
     data: { type: [Object, Array], default: null },
     meta: { type: Object, required: true },
     store: { type: Object, required: true },
+    nested: { type: Boolean, default: false },
     path: { type: String, required: true },
     verb: { type: String, required: true },
     text: { type: String, default: null },

package/src/components/DitoEditButtons.vue

@@ -6,6 +6,7 @@ DitoButtons.dito-edit-buttons.dito-buttons-round(
   :data="data"
   :meta="meta"
   :store="store"
+  :nested="nested"
   @click.stop
 )
   //- Firefox doesn't like <button> here, so use <a> instead:
@@ -27,6 +28,7 @@ DitoButtons.dito-edit-buttons.dito-buttons-round(
     :data="data"
     :meta="meta"
     :store="store"
+    :nested="nested"
     :path="createPath"
     :verb="verbs.create"
     :text="createButtonText"
@@ -43,10 +45,12 @@ DitoButtons.dito-edit-buttons.dito-buttons-round(
 
 <script>
 import DitoComponent from '../DitoComponent.js'
+import ContextMixin from '../mixins/ContextMixin.js'
 import { capitalize } from '@ditojs/utils'
 
 // @vue/component
 export default DitoComponent.component('DitoEditButtons', {
+  mixins: [ContextMixin],
   emits: ['delete'],
 
   props: {
@@ -56,6 +60,7 @@ export default DitoComponent.component('DitoEditButtons', {
     data: { type: [Object, Array], default: null },
     meta: { type: Object, required: true },
     store: { type: Object, required: true },
+    nested: { type: Boolean, default: false },
     disabled: { type: Boolean, required: true },
     draggable: { type: Boolean, default: false },
     editable: { type: Boolean, default: false },

package/src/components/DitoPane.vue

@@ -43,11 +43,14 @@
 
 <script>
 import DitoComponent from '../DitoComponent.js'
+import ContextMixin from '../mixins/ContextMixin.js'
 import { appendDataPath } from '../utils/data.js'
 import { isNested } from '../utils/schema.js'
 
 // @vue/component
 export default DitoComponent.component('DitoPane', {
+  mixins: [ContextMixin],
+
   provide() {
     return {
       $tabComponent: () => this.tabComponent
@@ -75,6 +78,11 @@ export default DitoComponent.component('DitoPane', {
   },
 
   computed: {
+    nested() {
+      // For `ContextMixin`:
+      return false
+    },
+
     classes() {
       return {
         'dito-pane--single': this.isSingleComponent,

package/src/components/DitoPanel.vue

@@ -43,13 +43,14 @@ component.dito-panel(
 <script>
 import { isFunction } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
+import ContextMixin from '../mixins/ContextMixin.js'
 import ValidatorMixin from '../mixins/ValidatorMixin.js'
 import { getButtonSchemas } from '../utils/schema.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 
 // @vue/component
 export default DitoComponent.component('DitoPanel', {
-  mixins: [ValidatorMixin],
+  mixins: [ContextMixin, ValidatorMixin],
 
   provide() {
     return {
@@ -75,6 +76,11 @@ export default DitoComponent.component('DitoPanel', {
   },
 
   computed: {
+    nested() {
+      // For `ContextMixin`:
+      return true
+    },
+
     panelComponent() {
       return this
     },

package/src/components/DitoPanels.vue

@@ -20,9 +20,12 @@
 
 <script>
 import DitoComponent from '../DitoComponent.js'
+import ContextMixin from '../mixins/ContextMixin.js'
 
 // @vue/component
 export default DitoComponent.component('DitoPanels', {
+  mixins: [ContextMixin],
+
   props: {
     panels: { type: Array, default: null },
     data: { type: Object, required: true },
@@ -31,6 +34,13 @@ export default DitoComponent.component('DitoPanels', {
     disabled: { type: Boolean, required: true }
   },
 
+  computed: {
+    nested() {
+      // For `ContextMixin`:
+      return false
+    }
+  },
+
   methods: {
     getPanelKey(dataPath, tabComponent) {
       // Allow separate tabs to use panels of the same name, by

package/src/components/DitoRoot.vue

@@ -124,7 +124,7 @@ export default DitoComponent.component('DitoRoot', {
       interactive: true,
       delay: 250,
       zIndex: 1,
-      onCreate(instance) {
+      onShow(instance) {
         instance.setContent(instance.reference.dataset.info)
       }
     })

package/src/components/DitoSchema.vue

@@ -115,8 +115,9 @@ import {
 } from '@ditojs/utils'
 import { TransitionHeight } from '@ditojs/ui/src'
 import DitoComponent from '../DitoComponent.js'
+import ContextMixin from '../mixins/ContextMixin.js'
 import ItemMixin from '../mixins/ItemMixin.js'
-import { appendDataPath, getParentItem } from '../utils/data.js'
+import { appendDataPath } from '../utils/data.js'
 import {
   getNamedSchemas,
   getPanelEntries,
@@ -129,7 +130,7 @@ import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
 
 // @vue/component
 export default DitoComponent.component('DitoSchema', {
-  mixins: [ItemMixin],
+  mixins: [ContextMixin, ItemMixin],
   components: { TransitionHeight },
   inheritAttrs: false,
 
@@ -184,6 +185,11 @@ export default DitoComponent.component('DitoSchema', {
   },
 
   computed: {
+    nested() {
+      // For `ContextMixin`:
+      return false
+    },
+
     schemaComponent() {
       // Override DitoMixin's schemaComponent() which uses the injected value.
       return this
@@ -236,11 +242,7 @@ export default DitoComponent.component('DitoSchema', {
         : this.labelNode
     },
 
-    parentData() {
-      const data = getParentItem(this.rootData, this.dataPath, false)
-      return data !== this.data ? data : null
-    },
-
+    // @override
     processedData() {
       // TODO: Fix side-effects
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
@@ -259,28 +261,6 @@ export default DitoComponent.component('DitoSchema', {
       }
     },
 
-    // The following computed properties are similar to `DitoContext`
-    // properties, so that we can access these on `this` as well:
-    // NOTE: While internally, we speak of `data`, in the API surface the
-    // term `item` is used for the data that relates to editing objects.
-    // NOTE: This should always return the same as:
-    // return getItem(this.rootData, this.dataPath, false)
-    item() {
-      return this.data
-    },
-
-    parentItem() {
-      return this.parentData
-    },
-
-    rootItem() {
-      return this.rootData
-    },
-
-    processedItem() {
-      return this.processedData
-    },
-
     clipboardItem() {
       return this.clipboardData
     },

package/src/components/DitoTableCell.vue

@@ -24,11 +24,14 @@ td(
 <script>
 import DitoComponent from '../DitoComponent.js'
 import DitoContext from '../DitoContext.js'
+import ContextMixin from '../mixins/ContextMixin.js'
 import { appendDataPath } from '../utils/data.js'
 import { escapeHtml } from '@ditojs/utils'
 
 // @vue/component
 export default DitoComponent.component('DitoTableCell', {
+  mixins: [ContextMixin],
+
   props: {
     cell: { type: Object, required: true },
     schema: { type: Object, required: true },

package/src/mixins/ContextMixin.js

@@ -0,0 +1,68 @@
+import DitoContext from '../DitoContext.js'
+import { getItem, getParentItem } from '../utils/data.js'
+
+// @vue/component
+export default {
+  computed: {
+    context() {
+      return new DitoContext(this, { nested: this.nested })
+    },
+
+    // The following computed properties are similar to `DitoContext`
+    // properties, so that we can access these on `this` as well:
+    // NOTE: While internally, we speak of `data`, in the API surface the
+    // term `item` is used for the data that relates to editing objects.
+    // NOTE: This should always return the same as:
+    // return getItem(this.rootData, this.dataPath, false)
+    parentData() {
+      const data = getParentItem(this.rootData, this.dataPath, this.nested)
+      return data !== this.data ? data : null
+    },
+
+    // @overridable
+    processedData() {
+      return getProcessedParentData(this, this.dataPath, this.nested)
+    },
+
+    processedRootData() {
+      return getProcessedParentData(this, '', false)
+    },
+
+    item() {
+      return this.data
+    },
+
+    parentItem() {
+      return this.parentData
+    },
+
+    rootItem() {
+      return this.rootData
+    },
+
+    processedItem() {
+      return this.processedData
+    },
+
+    processedRootItem() {
+      return this.processedRootData
+    }
+  }
+}
+
+function getProcessedParentData(component, dataPath, nested = false) {
+  // We can only get the processed data through the schemaComponent, but
+  // that's not necessarily the item represented by this component.
+  // Solution: Find the relative path and the processed sub-item from there:
+  let { schemaComponent } = component
+  // Find the schema component that contains the desired data-path:
+  while (schemaComponent.dataPath.length > dataPath.length) {
+    schemaComponent = schemaComponent.parentSchemaComponent
+  }
+  return getItem(
+    schemaComponent.processedData,
+    // Get the dataPath relative to the schemaComponent's data:
+    dataPath.slice(schemaComponent.dataPath.length),
+    nested
+  )
+}

package/src/mixins/TypeMixin.js

@@ -1,13 +1,12 @@
-import DitoContext from '../DitoContext.js'
+import ValueMixin from './ValueMixin.js'
+import ContextMixin from './ContextMixin.js'
 import ValidationMixin from './ValidationMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { computeValue } from '../utils/schema.js'
-import { getItem, getParentItem } from '../utils/data.js'
 import { asArray, camelize } from '@ditojs/utils'
 
 // @vue/component
 export default {
-  mixins: [ValidationMixin],
+  mixins: [ValueMixin, ContextMixin, ValidationMixin],
 
   props: {
     schema: { type: Object, required: true },
@@ -41,71 +40,6 @@ export default {
       return this.schema.type
     },
 
-    context() {
-      return new DitoContext(this, { nested: this.nested })
-    },
-
-    value: {
-      get() {
-        const value = computeValue(
-          this.schema,
-          this.data,
-          this.name,
-          this.dataPath,
-          { component: this }
-        )
-        const { format } = this.schema
-        return format
-          ? format(new DitoContext(this, { value }))
-          : value
-      },
-
-      set(value) {
-        const { parse } = this.schema
-        if (parse) {
-          value = parse(new DitoContext(this, { value }))
-        }
-        this.parsedValue = value
-        // eslint-disable-next-line vue/no-mutating-props
-        this.data[this.name] = value
-      }
-    },
-
-    parentData() {
-      const data = getParentItem(this.rootData, this.dataPath, this.nested)
-      return data !== this.data ? data : null
-    },
-
-    processedData() {
-      return getProcessedParentData(this, this.dataPath, this.nested)
-    },
-
-    processedRootData() {
-      return getProcessedParentData(this, '', false)
-    },
-
-    // The following computed properties are similar to `DitoContext`
-    // properties, so that we can access these on `this` as well:
-    item() {
-      return this.data
-    },
-
-    parentItem() {
-      return this.parentData
-    },
-
-    rootItem() {
-      return this.rootData
-    },
-
-    processedItem() {
-      return this.processedData
-    },
-
-    processedRootItem() {
-      return this.processedRootData
-    },
-
     labelNode() {
       const node = this.isMounted ? this.$el.previousElementSibling : null
       return node?.matches('.dito-label') ? node : null
@@ -326,20 +260,3 @@ export default {
     }
   }
 }
-
-function getProcessedParentData(component, dataPath, nested = false) {
-  // We can only get the processed data through the schemaComponent, but
-  // that's not necessarily the item represented by this component.
-  // Solution: Find the relative path and the processed sub-item from there:
-  let { schemaComponent } = component
-  // Find the schema component that contains the desired data-path:
-  while (schemaComponent.dataPath.length > dataPath.length) {
-    schemaComponent = schemaComponent.parentSchemaComponent
-  }
-  return getItem(
-    schemaComponent.processedData,
-    // Get the dataPath relative to the schemaComponent's data:
-    dataPath.slice(schemaComponent.dataPath.length),
-    nested
-  )
-}