@ditojs/admin 2.36.2 → 2.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.36.2",
+  "version": "2.38.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,54 +39,55 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.36.2",
-    "@ditojs/utils": "^2.36.0",
-    "@kyvg/vue3-notification": "^3.4.0",
+    "@ditojs/ui": "^2.38.0",
+    "@ditojs/utils": "^2.38.0",
+    "@kyvg/vue3-notification": "^3.4.1",
     "@lk77/vue3-color": "^3.0.6",
-    "@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",
+    "@tiptap/core": "^2.10.2",
+    "@tiptap/extension-blockquote": "^2.10.2",
+    "@tiptap/extension-bold": "^2.10.2",
+    "@tiptap/extension-bullet-list": "^2.10.2",
+    "@tiptap/extension-code": "^2.10.2",
+    "@tiptap/extension-code-block": "^2.10.2",
+    "@tiptap/extension-document": "^2.10.2",
+    "@tiptap/extension-hard-break": "^2.10.2",
+    "@tiptap/extension-heading": "^2.10.2",
+    "@tiptap/extension-history": "^2.10.2",
+    "@tiptap/extension-horizontal-rule": "^2.10.2",
+    "@tiptap/extension-italic": "^2.10.2",
+    "@tiptap/extension-link": "^2.10.2",
+    "@tiptap/extension-list-item": "^2.10.2",
+    "@tiptap/extension-ordered-list": "^2.10.2",
+    "@tiptap/extension-paragraph": "^2.10.2",
+    "@tiptap/extension-strike": "^2.10.2",
+    "@tiptap/extension-subscript": "^2.10.2",
+    "@tiptap/extension-superscript": "^2.10.2",
+    "@tiptap/extension-text": "^2.10.2",
+    "@tiptap/extension-text-style": "^2.10.2",
+    "@tiptap/extension-underline": "^2.10.2",
+    "@tiptap/pm": "^2.10.2",
+    "@tiptap/vue-3": "^2.10.2",
+    "@vueuse/integrations": "^11.3.0",
     "codeflask": "^1.4.1",
     "filesize": "^10.1.6",
     "filesize-parser": "^1.5.1",
-    "focus-trap": "^7.6.0",
-    "nanoid": "^5.0.7",
-    "sortablejs": "^1.15.3",
+    "focus-trap": "^7.6.2",
+    "nanoid": "^5.0.8",
+    "sortablejs": "^1.15.4",
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
-    "type-fest": "^4.26.1",
-    "vue": "^3.5.12",
+    "tiptap-footnotes": "^2.0.3",
+    "type-fest": "^4.28.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.2",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10"
+    "@ditojs/build": "^2.38.0",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11"
   },
   "types": "types",
-  "gitHead": "1fe383dfcdd9f856f324450d60c081be51071cf9"
+  "gitHead": "5e64e0bf42e2a526e58c10710ddb2ae14288ffae"
 }

package/src/styles/_layout.scss

@@ -3,17 +3,15 @@
   display: flex;
 
   > * {
-    flex: 1 0 auto;
+    flex: 0 0 auto;
     display: flex;
   }
 }
 
-.dito-layout-vertical {
-  flex-direction: column;
+.dito-layout-horizontal {
+  gap: $form-spacing;
 }
 
-.dito-layout-horizontal {
-  > :not(:first-child) {
-    padding-left: $form-spacing;
-  }
+.dito-layout-vertical {
+  flex-direction: column;
 }

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>