@ditojs/admin 2.100.0 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.100.0",
+  "version": "3.1.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",
@@ -22,13 +22,14 @@
   "files": [
     "src/",
     "dist/",
-    "types/"
+    "types/",
+    "!src/**/*.test.js",
+    "!src/**/__snapshots__/"
   ],
   "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 +41,95 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.100.0",
-    "@ditojs/utils": "^2.100.0"
+    "@ditojs/ui": "^3.1.0",
+    "@ditojs/utils": "^3.1.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",
+    "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.100.0",
+    "@ditojs/build": "^3.1.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.3.2"
+    "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": "c6fdbe03971188779fc9cf5f1b4202e08bc75a65"
+  "gitHead": "97314265c5cbac6a248d7350f43fea8ea92b995f"
 }

package/src/DitoAdmin.js

@@ -3,7 +3,6 @@ import { createRouter, createWebHistory } from 'vue-router'
 import VueNotifications from '@kyvg/vue3-notification'
 import {
   isString,
-  isAbsoluteUrl,
   assignDeeply,
   hyphenate,
   camelize,
@@ -15,7 +14,7 @@ import DitoRoot from './components/DitoRoot.vue'
 import DitoTypeComponent from './DitoTypeComponent.js'
 import ResizeDirective from './directives/resize.js'
 import { getResource } from './utils/resource.js'
-import { formatQuery } from './utils/route.js'
+import { request, getApiUrl, isApiUrl } from './utils/request.js'
 import verbs from './verbs.js'
 
 export default class DitoAdmin {
@@ -228,66 +227,3 @@ export default class DitoAdmin {
     return DitoTypeComponent.register(type, options)
   }
 }
-
-class RequestError extends Error {
-  constructor(response) {
-    super(
-      `Request failed with status code: ${response.status} (${
-        response.statusText
-      })`
-    )
-    this.response = response
-  }
-}
-
-async function request(api, {
-  url,
-  method = 'get',
-  query = null,
-  headers = null,
-  data = null,
-  signal = null
-}) {
-  const isApiUrl = api.isApiUrl(url)
-
-  const response = await fetch(api.getApiUrl({ url, query }), {
-    method: method.toUpperCase(),
-    ...(data && { body: JSON.stringify(data) }),
-    headers: {
-      ...(isApiUrl && api.headers),
-      ...headers
-    },
-    credentials:
-      isApiUrl && api.cors?.credentials
-        ? 'include'
-        : 'same-origin',
-    signal
-  })
-
-  if (response.headers.get('Content-Type')?.includes('application/json')) {
-    response.data = await response.json()
-  }
-
-  if (!response.ok) {
-    throw new RequestError(response)
-  }
-  return response
-}
-
-function isApiUrl(api, url) {
-  return !isAbsoluteUrl(url) || url.startsWith(api.url)
-}
-
-function getApiUrl(api, { url, query }) {
-  if (!url.startsWith(api.url) && !isAbsoluteUrl(url)) {
-    url = combineUrls(api.url, url)
-  }
-  // Support optional query parameters, to be are added to the URL.
-  const search = formatQuery(query)
-  return search ? `${url}${url.includes('?') ? '&' : '?'}${search}` : url
-}
-
-function combineUrls(baseUrl, relativeUrl) {
-  // Use same approach as axios `combineURLs()` to join baseUrl & relativeUrl:
-  return `${baseUrl.replace(/\/+$/, '')}/${relativeUrl.replace(/^\/+/, '')}`
-}

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,
 
@@ -30,6 +35,15 @@ export default {
 
   register(types, definition = {}) {
     types = asArray(types)
+    if (hasValidationsMethod(definition)) {
+      // Validation doesn't depend on components anymore, so that it also
+      // covers fields that aren't rendered, see `utils/schema/validation.js`.
+      console.warn(
+        `Type '${types[0]}': The \`getValidations()\` method isn't supported ` +
+        `anymore, use the static \`getTypeValidations(schema, context)\` ` +
+        `option instead.`
+      )
+    }
     const component = this.component(
       `DitoType${camelize(types[0], true)}`,
       definition
@@ -40,3 +54,11 @@ export default {
     return component
   }
 }
+
+// Returns whether the component definition or one of its mixins defines the
+// `getValidations()` method that types used to override.
+function hasValidationsMethod(definition) {
+  return [definition, ...(definition.mixins ?? [])].some(
+    ({ methods }) => !!methods?.getValidations
+  )
+}

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

@@ -48,10 +48,23 @@ export default DitoComponent.component('DitoButtons', {
     meta: { type: Object, default: () => ({}) },
     store: { type: Object, default: () => ({}) },
     nested: { type: Boolean, default: true },
-    disabled: { type: Boolean, default: false }
+    disabled: { type: Boolean, default: false },
+    // The name of the group of buttons, e.g. `panelButtons`, see
+    // `componentPath`.
+    buttonsName: { type: String, default: 'buttons' }
   },
 
   computed: {
+    componentPath() {
+      // Add the name of the group, so that buttons don't share their component
+      // paths with components of the same name, e.g. a `publish` button with a
+      // `publish` field, as component paths are used for registries.
+      return appendDataPath(
+        this.continueParentComponentPath(),
+        `$${this.buttonsName}`
+      )
+    },
+
     buttonSchemas() {
       // Compute a buttons list which has the dataPath baked into its keys.
       const { dataPath, buttons } = this

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.waitForPendingLoadsOf(this.formModel)
       this.resolve(this.dialogData)
     },