@ditojs/admin 2.36.1 → 2.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.36.1",
+  "version": "2.37.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",
@@ -39,9 +39,9 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.36.1",
-    "@ditojs/utils": "^2.36.0",
-    "@kyvg/vue3-notification": "^3.4.0",
+    "@ditojs/ui": "^2.37.0",
+    "@ditojs/utils": "^2.37.0",
+    "@kyvg/vue3-notification": "^3.4.1",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.9.1",
     "@tiptap/extension-blockquote": "^2.9.1",
@@ -67,26 +67,27 @@
     "@tiptap/extension-underline": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/vue-3": "^2.9.1",
-    "@vueuse/integrations": "^11.1.0",
+    "@vueuse/integrations": "^11.2.0",
     "codeflask": "^1.4.1",
     "filesize": "^10.1.6",
     "filesize-parser": "^1.5.1",
-    "focus-trap": "^7.6.0",
-    "nanoid": "^5.0.7",
+    "focus-trap": "^7.6.2",
+    "nanoid": "^5.0.8",
     "sortablejs": "^1.15.3",
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
-    "type-fest": "^4.26.1",
-    "vue": "^3.5.12",
+    "tiptap-footnotes": "^2.0.1",
+    "type-fest": "^4.27.0",
+    "vue": "^3.5.13",
     "vue-multiselect": "^3.1.0",
     "vue-router": "^4.4.5",
     "vue-upload-component": "^3.1.17"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.36.1",
+    "@ditojs/build": "^2.37.0",
     "typescript": "^5.6.3",
-    "vite": "^5.4.10"
+    "vite": "^5.4.11"
   },
   "types": "types",
-  "gitHead": "70fd2abe897c2a4fd5d51cdaa06493c059f05d46"
+  "gitHead": "22955cc5d9a91f267dc22934d2fcc6824b8a42a8"
 }

package/src/components/DitoRoot.vue

@@ -119,14 +119,12 @@ export default DitoComponent.component('DitoRoot', {
     tippyDelegate(this.$el, {
       target: '.dito-info',
       theme: 'info',
-      appendTo: node => node.closest('.dito-pane'),
       animation: 'shift-away-subtle',
       interactive: true,
       delay: 250,
       zIndex: 1,
-      onShow(instance) {
-        instance.setContent(instance.reference.dataset.info)
-      }
+      appendTo: node => node.closest('.dito-pane'),
+      onShow: instance => instance.setContent(instance.reference.dataset.info)
     })
 
     // Clear the label marked as active on all mouse and keyboard events, except

package/src/components/DitoSchema.vue

@@ -598,26 +598,32 @@ export default DitoComponent.component('DitoSchema', {
           while (dataPathParts.length > 0) {
             const components = this.getComponentsByDataPath(dataPathParts)
             for (const component of components) {
-              if (
-                await component.navigateToComponent?.(
-                  fullDataPath,
-                  subComponents => {
-                    let found = false
-                    for (const component of subComponents) {
-                      const errs = errors[component.dataPath]
-                      if (
-                        errs &&
-                        component.showValidationErrors(errs, first && focus)
-                      ) {
-                        found = true
-                        first = false
-                        break
-                      }
+              const navigated = await component.navigateToComponent?.(
+                fullDataPath,
+                subComponents => {
+                  let found = false
+                  for (const component of subComponents) {
+                    const matched = Object.fromEntries(
+                      Object.entries(errors).filter(
+                        ([dataPath]) =>
+                          normalizeDataPath(dataPath).startsWith(
+                            component.dataPath
+                          )
+                      )
+                    )
+                    if (
+                      Object.keys(matched).length > 0 &&
+                      component.showValidationErrors(matched, first && focus)
+                    ) {
+                      found = true
+                      first = false
+                      break
                     }
-                    return found
                   }
-                )
-              ) {
+                  return found
+                }
+              )
+              if (navigated) {
                 // Found a nested form to display at least parts fo the errors.
                 // We can't show all errors at once, so we're done. Don't call
                 // `notifyErrors()` yet, as we can only display it once

package/src/mixins/SourceMixin.js

@@ -587,6 +587,7 @@ export default {
                   this.$nextTick(callOnComplete)
                 })
             }
+            return
           }
           // Keep removing the last part until we find a match.
           dataPathParts.pop()

package/src/mixins/ValidationMixin.js

@@ -95,6 +95,9 @@ export default {
     showValidationErrors(errors, focus) {
       // Convert from AJV errors objects to an array of error messages
       this.errors = []
+      if (errors.length === 0) {
+        return false
+      }
       for (const { message } of errors) {
         this.addError(message, true)
       }

package/src/types/DitoTypeComputed.vue

@@ -31,7 +31,7 @@ export default DitoTypeComponent.register(
         get() {
           const { schema } = this
           if (schema.data || schema.dataPath) {
-            const value = this.handleDataSchema(schema, 'schema')
+            const value = this.handleDataSchema(schema, 'value')
             // TODO: Fix side-effects
             // eslint-disable-next-line max-len
             // eslint-disable-next-line vue/no-side-effects-in-computed-properties

package/src/types/DitoTypeMarkup.vue

@@ -52,6 +52,8 @@ import { HorizontalRule } from '@tiptap/extension-horizontal-rule'
 import { OrderedList } from '@tiptap/extension-ordered-list'
 import { BulletList } from '@tiptap/extension-bullet-list'
 import { ListItem } from '@tiptap/extension-list-item'
+// Footnotes:
+import { Footnotes, FootnoteReference, Footnote } from 'tiptap-footnotes'
 // TODO:
 // import { Image } from '@tiptap/extension-image'
 // import { Mention } from '@tiptap/extension-mention'
@@ -139,7 +141,10 @@ export default DitoTypeComponent.register('markup', {
     toolButtons() {
       return this.getButtons('tools', {
         undo: true,
-        redo: true
+        redo: true,
+        footnotes: {
+          command: 'addFootnote'
+        }
       })
     },
 
@@ -341,7 +346,10 @@ export default DitoTypeComponent.register('markup', {
       } = this.schema
       return [
         // Essentials:
-        Document,
+        tools.footnotes
+          ? Document.extend({ content: 'block+ footnotes?' })
+          : Document,
+
         Text,
         Paragraph, // button can be controlled, but node needs to be on.
 
@@ -364,6 +372,10 @@ export default DitoTypeComponent.register('markup', {
         (nodes.orderedList || nodes.bulletList) && ListItem,
         nodes.bulletList && BulletList,
         nodes.orderedList && OrderedList,
+
+        // Footnotes:
+        ...(tools.footnotes ? [Footnotes, Footnote, FootnoteReference] : []),
+
         // TODO:
         // nodes.todoList && TodoItem,
         // nodes.todoList && TodoList,
@@ -625,12 +637,23 @@ const LinkWithTitle = Link.extend({
 
   blockquote {
     border-left: 3px solid $color-lighter;
-    padding-left: 1rem;
+    padding-left: 1em;
     font-style: italic;
 
     p {
       margin: 0;
     }
   }
+
+  ol.footnotes {
+    margin-top: 1em;
+    padding: 1em 0;
+    list-style-type: decimal;
+    padding-left: 2em;
+
+    &:has(li) {
+      border-top: 1px solid $color-light;
+    }
+  }
 }
 </style>