@ditojs/admin 2.99.1 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.99.1",
+  "version": "3.0.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/main/packages/admin",
@@ -27,8 +27,7 @@
   "scripts": {
     "build": "vite build",
     "watch": "pnpm run build --mode 'development' --watch",
-    "prepare": "pnpm run build",
-    "types": "tsc --noEmit types/index.d.ts"
+    "prepare": "pnpm run build"
   },
   "engines": {
     "node": ">= 24.0.0"
@@ -40,58 +39,95 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.99.0",
-    "@ditojs/utils": "^2.99.0"
+    "@ditojs/ui": "^3.0.0",
+    "@ditojs/utils": "^3.0.0"
   },
   "peerDependencies": {
     "@kyvg/vue3-notification": "^3.4.2",
-    "@lk77/vue3-color": "^3.0.6",
-    "@tiptap/core": "^3.20.1",
-    "@tiptap/extension-blockquote": "^3.20.1",
-    "@tiptap/extension-bold": "^3.20.1",
-    "@tiptap/extension-bullet-list": "^3.20.1",
-    "@tiptap/extension-code": "^3.20.1",
-    "@tiptap/extension-code-block": "^3.20.1",
-    "@tiptap/extension-document": "^3.20.1",
-    "@tiptap/extension-hard-break": "^3.20.1",
-    "@tiptap/extension-heading": "^3.20.1",
-    "@tiptap/extension-history": "^3.20.1",
-    "@tiptap/extension-horizontal-rule": "^3.20.1",
-    "@tiptap/extension-italic": "^3.20.1",
-    "@tiptap/extension-link": "^3.20.1",
-    "@tiptap/extension-list": "^3.20.1",
-    "@tiptap/extension-list-item": "^3.20.1",
-    "@tiptap/extension-ordered-list": "^3.20.1",
-    "@tiptap/extension-paragraph": "^3.20.1",
-    "@tiptap/extension-strike": "^3.20.1",
-    "@tiptap/extension-subscript": "^3.20.1",
-    "@tiptap/extension-superscript": "^3.20.1",
-    "@tiptap/extension-text": "^3.20.1",
-    "@tiptap/extension-text-style": "^3.20.1",
-    "@tiptap/extension-underline": "^3.20.1",
-    "@tiptap/extensions": "^3.20.1",
-    "@tiptap/pm": "^3.20.1",
-    "@tiptap/vue-3": "^3.20.1",
-    "@vueuse/integrations": "^14.2.1",
+    "@tiptap/core": "^3.31.4",
+    "@tiptap/extension-blockquote": "^3.31.4",
+    "@tiptap/extension-bold": "^3.31.4",
+    "@tiptap/extension-bullet-list": "^3.31.4",
+    "@tiptap/extension-code": "^3.31.4",
+    "@tiptap/extension-code-block": "^3.31.4",
+    "@tiptap/extension-document": "^3.31.4",
+    "@tiptap/extension-hard-break": "^3.31.4",
+    "@tiptap/extension-heading": "^3.31.4",
+    "@tiptap/extension-history": "^3.31.4",
+    "@tiptap/extension-horizontal-rule": "^3.31.4",
+    "@tiptap/extension-italic": "^3.31.4",
+    "@tiptap/extension-link": "^3.31.4",
+    "@tiptap/extension-list": "^3.31.4",
+    "@tiptap/extension-list-item": "^3.31.4",
+    "@tiptap/extension-ordered-list": "^3.31.4",
+    "@tiptap/extension-paragraph": "^3.31.4",
+    "@tiptap/extension-strike": "^3.31.4",
+    "@tiptap/extension-subscript": "^3.31.4",
+    "@tiptap/extension-superscript": "^3.31.4",
+    "@tiptap/extension-text": "^3.31.4",
+    "@tiptap/extension-text-style": "^3.31.4",
+    "@tiptap/extension-underline": "^3.31.4",
+    "@tiptap/extensions": "^3.31.4",
+    "@tiptap/pm": "^3.31.4",
+    "@tiptap/vue-3": "^3.31.4",
+    "@vueuse/integrations": "^15.0.0",
     "codeflask": "^1.4.1",
-    "filesize": "^11.0.13",
-    "filesize-parser": "^1.5.1",
-    "focus-trap": "^8.0.0",
-    "nanoid": "^5.1.6",
+    "focus-trap": "^8.2.2",
+    "nanoid": "^6.0.1",
     "sortablejs": "^1.15.7",
-    "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
     "tiptap-footnotes": "^3.0.1",
-    "type-fest": "^5.4.4",
-    "vue": "^3.5.30",
-    "vue-multiselect": "^3.4.0",
-    "vue-router": "^5.0.3",
-    "vue-upload-component": "^3.1.17"
+    "type-fest": "^5.10.0",
+    "vue": "^3.5.43",
+    "vue-color": "^3.3.3",
+    "vue-multiselect": "^3.5.0",
+    "vue-router": "^5.3.1",
+    "vue-upload-component": "^3.2.2"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.99.0",
+    "@ditojs/build": "^3.0.0",
+    "@kyvg/vue3-notification": "^3.4.2",
+    "@tiptap/core": "^3.31.4",
+    "@tiptap/extension-blockquote": "^3.31.4",
+    "@tiptap/extension-bold": "^3.31.4",
+    "@tiptap/extension-bullet-list": "^3.31.4",
+    "@tiptap/extension-code": "^3.31.4",
+    "@tiptap/extension-code-block": "^3.31.4",
+    "@tiptap/extension-document": "^3.31.4",
+    "@tiptap/extension-hard-break": "^3.31.4",
+    "@tiptap/extension-heading": "^3.31.4",
+    "@tiptap/extension-history": "^3.31.4",
+    "@tiptap/extension-horizontal-rule": "^3.31.4",
+    "@tiptap/extension-italic": "^3.31.4",
+    "@tiptap/extension-link": "^3.31.4",
+    "@tiptap/extension-list": "^3.31.4",
+    "@tiptap/extension-list-item": "^3.31.4",
+    "@tiptap/extension-ordered-list": "^3.31.4",
+    "@tiptap/extension-paragraph": "^3.31.4",
+    "@tiptap/extension-strike": "^3.31.4",
+    "@tiptap/extension-subscript": "^3.31.4",
+    "@tiptap/extension-superscript": "^3.31.4",
+    "@tiptap/extension-text": "^3.31.4",
+    "@tiptap/extension-text-style": "^3.31.4",
+    "@tiptap/extension-underline": "^3.31.4",
+    "@tiptap/extensions": "^3.31.4",
+    "@tiptap/pm": "^3.31.4",
+    "@tiptap/vue-3": "^3.31.4",
+    "@vueuse/integrations": "^15.0.0",
+    "codeflask": "^1.4.1",
+    "focus-trap": "^8.2.2",
+    "nanoid": "^6.0.1",
+    "sortablejs": "^1.15.7",
+    "tippy.js": "^6.3.7",
+    "tiptap-footnotes": "^3.0.1",
+    "type-fest": "^5.10.0",
     "typescript": "^6.0.3",
-    "vite": "^8.0.10"
+    "vite": "^8.3.2",
+    "vue": "^3.5.43",
+    "vue-color": "^3.3.3",
+    "vue-multiselect": "^3.5.0",
+    "vue-router": "^5.3.1",
+    "vue-upload-component": "^3.2.2"
   },
-  "gitHead": "537d4483092604a1bfa055c151bccca4821de19a"
+  "gitHead": "399f683a6ca227a03cfc0978fee9055383e6b3d8"
 }

package/src/DitoComponent.js

@@ -1,5 +1,5 @@
 import DitoMixin from './mixins/DitoMixin.js'
-import { getTypeComponent } from './utils/schema.js'
+import { getTypeComponent } from './utils/schema/types.js'
 import { resolveMergedOptions } from './utils/options.js'
 import { isPlainObject } from '@ditojs/utils'
 

package/src/DitoContext.js

@@ -1,6 +1,7 @@
 import { toRaw } from 'vue'
 import { getValueAtDataPath, isFunction } from '@ditojs/utils'
 import {
+  appendDataPath,
   getItemDataPath,
   getParentItemDataPath,
   getParentItem,
@@ -8,6 +9,7 @@ import {
   getLastDataPathName,
   getLastDataPathIndex
 } from './utils/data.js'
+import { isNested } from './utils/schema/structure.js'
 
 const { hasOwnProperty } = Object.prototype
 
@@ -81,6 +83,55 @@ export default class DitoContext {
       : new DitoContext(component, context)
   }
 
+  // Creates the context of the component described by `schema` and `name` in
+  // `data`, e.g. to evaluate its `if` before it's rendered, the same way as
+  // once it's rendered. Its `value` is read from `data` only when it's used,
+  // so that watchers only depend on it if it's used, and missing values don't
+  // need to be resolved through the data path.
+  static createForSchema(component, {
+    schema,
+    name,
+    nested = isNested(schema),
+    data,
+    dataPath,
+    rootData
+  }) {
+    // Pass a function, so that the `value` getter isn't evaluated when the
+    // context is created.
+    return new DitoContext(component, () => ({
+      schema,
+      name,
+      nested,
+      data,
+      dataPath,
+      rootData,
+      get value() {
+        return name != null ? data?.[name] : undefined
+      }
+    }))
+  }
+
+  // Creates the context of a component of this context's schema, e.g. of a
+  // section, the same way as when that component is rendered: Its data is the
+  // value of this context's component if that is nested, or else the same
+  // data. The data path adds `name` if the child component is nested.
+  createChildContext(schema, name) {
+    const nested = isNested(schema)
+    // Contexts without a schema don't hold a value either, e.g. the ones of
+    // `DitoMenu` and `DitoPanels`, evaluating views and panels.
+    const holdsOwnValue = !!this.schema && isNested(this.schema)
+    return DitoContext.createForSchema(this.component, {
+      schema,
+      name,
+      nested,
+      // Read the value from the item that holds it rather than through the data
+      // path, as items that are being created aren't part of the root data.
+      data: holdsOwnValue ? this.item?.[this.name] : this.item,
+      dataPath: nested ? appendDataPath(this.dataPath, name) : this.dataPath,
+      rootData: this.rootItem
+    })
+  }
+
   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`.

package/src/DitoTypeComponent.js

@@ -4,7 +4,10 @@
 import { asArray, camelize } from '@ditojs/utils'
 import DitoComponent from './DitoComponent.js'
 import TypeMixin from './mixins/TypeMixin.js'
-import { registerTypeComponent, getTypeComponent } from './utils/schema.js'
+import {
+  registerTypeComponent,
+  getTypeComponent
+} from './utils/schema/types.js'
 
 // @vue/component
 export default {
@@ -22,7 +25,9 @@ export default {
   generateLabel: true,
   excludeValue: false,
   ignoreMissingValue: null,
+  treatNullAsMissing: null,
   omitSpacing: false,
+  getTypeValidations: null,
 
   component: DitoComponent.component,
 

package/src/components/DitoAffixes.vue

@@ -32,7 +32,7 @@ import DitoComponent from '../DitoComponent.js'
 import DitoAffix from './DitoAffix.vue'
 import { asArray, isString } from '@ditojs/utils'
 import { hasSlotContent } from '@ditojs/ui/src'
-import { shouldRenderSchema } from '../utils/schema.js'
+import { shouldRenderSchema } from '../utils/schema/data.js'
 
 export default DitoComponent.component('DitoAffixes', {
   components: { DitoAffix },
@@ -175,7 +175,10 @@ export default DitoComponent.component('DitoAffixes', {
     padding: 0;
     border: 0;
 
-    @at-root .dito-component:not(:has(.dito-component)):hover & {
+    // Only show when hovering the component itself, not its open popup, e.g.
+    // the color picker.
+    @at-root .dito-component:not(:has(.dito-component, .dito-popup:hover)):hover
+        & {
       display: block;
     }
 
@@ -192,7 +195,7 @@ export default DitoComponent.component('DitoAffixes', {
 
   // Hide other affixes when clear button is shown
   // prettier-ignore
-  @at-root .dito-component:hover:not(:has(.dito-component))
+  @at-root .dito-component:hover:not(:has(.dito-component, .dito-popup:hover))
         #{$self}:has(#{$self}__clear) > *:not(#{$self}__clear) {
       display: none;
     }

package/src/components/DitoContainer.vue

@@ -18,7 +18,7 @@
   DitoLabel(
     v-if="hasLabel"
     :class="labelClasses"
-    :dataPath="labelDataPath"
+    :htmlFor="labelHtmlFor"
     :label="label"
     :info="info"
   )
@@ -50,13 +50,11 @@ import ValueMixin from '../mixins/ValueMixin.js'
 import ContextMixin from '../mixins/ContextMixin.js'
 import DitoContext from '../DitoContext.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import {
-  getAllPanelEntries,
-  getTypeComponent,
-  hasLabel,
-  omitSpacing
-} from '../utils/schema.js'
+import { getTypeComponent } from '../utils/schema/types.js'
+import { hasLabel, omitSpacing } from '../utils/schema/structure.js'
+import { getAllPanelEntries } from '../utils/schema/lookup.js'
 import { parseFraction } from '../utils/math.js'
+import { appendDataPath } from '../utils/data.js'
 
 // @vue/component
 export default DitoComponent.component('DitoContainer', {
@@ -105,6 +103,12 @@ export default DitoComponent.component('DitoContainer', {
       return this.schema.name
     },
 
+    componentPath() {
+      // Add the component's name, also for unnested components that don't
+      // add it to their data path, see `DitoMixin.componentPath`.
+      return appendDataPath(this.parentComponent.componentPath, this.name)
+    },
+
     type() {
       return this.schema.type
     },
@@ -125,9 +129,10 @@ export default DitoComponent.component('DitoContainer', {
       return this.hasLabel ? this.getLabel(this.schema) : null
     },
 
-    labelDataPath() {
-      // Unnested types don't have a dataPath for themselves, don't use it:
-      return this.nested ? this.dataPath : null
+    labelHtmlFor() {
+      // Type components use their component path as DOM id. Unnested types
+      // don't display a value of their own to label:
+      return this.nested ? this.componentPath : null
     },
 
     info: getSchemaAccessor('info', {
@@ -252,6 +257,10 @@ export default DitoComponent.component('DitoContainer', {
         this.api,
         this.schema,
         this.dataPath,
+        // The panel of the type is addressed relative to the data path, which
+        // unnested components don't add their name to:
+        this.nested ? this.componentPath : this.parentComponent.componentPath,
+        this.componentPath,
         this.$refs.component,
         this.tabComponent
       )

package/src/components/DitoCreateButton.vue

@@ -4,7 +4,7 @@
     v-if="creatableForm"
     :type="isInlined ? 'button' : 'submit'"
     :disabled="disabled"
-    v-bind="getButtonAttributes(verb)"
+    v-bind="getButtonAttributes(verb, formLabel)"
     @click="createItem(creatableForm)"
   ) {{ text }}
   template(
@@ -38,7 +38,8 @@
 import DitoComponent from '../DitoComponent.js'
 import ContextMixin from '../mixins/ContextMixin.js'
 import PulldownMixin from '../mixins/PulldownMixin.js'
-import { getFormSchemas, isInlined } from '../utils/schema.js'
+import { isInlined } from '../utils/schema/structure.js'
+import { getFormSchemas } from '../utils/schema/lookup.js'
 
 // @vue/component
 export default DitoComponent.component('DitoCreateButton', {
@@ -93,6 +94,14 @@ export default DitoComponent.component('DitoCreateButton', {
       return forms && Object.keys(forms).length === 1 && forms.default || null
     },
 
+    formLabel() {
+      // Only use labels declared on the form, not ones derived from its name.
+      const form = this.creatableForm
+      return form
+        ? this.getSchemaValue('label', { schema: form, type: String })
+        : null
+    },
+
     isInlined() {
       return isInlined(this.schema)
     }

package/src/components/DitoDialog.vue

@@ -35,7 +35,8 @@
 import { clone } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import DomMixin from '../mixins/DomMixin.js'
-import { getButtonSchemas } from '../utils/schema.js'
+import { getButtonSchemas } from '../utils/schema/lookup.js'
+import { FormModel } from '../utils/FormModel.js'
 import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component'
 
 // @vue/component
@@ -126,6 +127,16 @@ export default DitoComponent.component('DitoDialog', {
     }
   },
 
+  created() {
+    // Writes defaults and computed values into the dialog's data and resolves
+    // options, see `FormModel`:
+    this.formModel = new FormModel({
+      component: this,
+      getSchema: () => this.schema,
+      getData: () => this.dialogData
+    })
+  },
+
   mounted() {
     this.domOn(window, {
       keyup: event => {
@@ -136,6 +147,12 @@ export default DitoComponent.component('DitoDialog', {
     })
   },
 
+  beforeUnmount() {
+    // Stop the model before the component's own watchers are stopped, as the
+    // model's watchers aren't part of the component, see `FormModel`.
+    this.formModel.stop()
+  },
+
   methods: {
     remove() {
       this.$emit('remove')
@@ -160,7 +177,9 @@ export default DitoComponent.component('DitoDialog', {
       }
     },
 
-    submit() {
+    async submit() {
+      // Wait for computed values that depend on pending loads, e.g. options.
+      await this.formModel.waitForPendingLoads()
       this.resolve(this.dialogData)
     },