@ditojs/admin 2.9.2 → 2.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.9.2",
+  "version": "2.9.4",
   "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",
@@ -33,9 +33,9 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.9.0",
+    "@ditojs/ui": "^2.9.3",
     "@ditojs/utils": "^2.9.0",
-    "@kyvg/vue3-notification": "^2.9.0",
+    "@kyvg/vue3-notification": "^2.9.1",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-blockquote": "^2.0.3",
@@ -62,28 +62,28 @@
     "codeflask": "^1.4.1",
     "filesize": "^10.0.7",
     "filesize-parser": "^1.5.0",
-    "focus-trap": "^7.4.0",
+    "focus-trap": "^7.4.1",
     "nanoid": "^4.0.2",
     "sortablejs": "^1.15.0",
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
     "type-fest": "^3.10.0",
-    "vue": "^3.2.47",
-    "vue-multiselect": "^3.0.0-beta.1",
-    "vue-router": "^4.1.6",
+    "vue": "^3.3.2",
+    "vue-multiselect": "^3.0.0-beta.2",
+    "vue-router": "^4.2.0",
     "vue-upload-component": "^3.1.8"
   },
   "devDependencies": {
     "@ditojs/build": "^2.9.0",
-    "@vitejs/plugin-vue": "^4.2.1",
-    "@vue/compiler-sfc": "^3.2.47",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.2",
     "pug": "^3.0.2",
     "sass": "1.62.1",
     "typescript": "^5.0.4",
-    "vite": "^4.3.5"
+    "vite": "^4.3.7"
   },
   "types": "types",
-  "gitHead": "1f8607d92bdd39d14af2a06968ca4914c2d3988f",
+  "gitHead": "bb939da5847a9bc98d445de5dad49e7266a2d95b",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoCreateButton.vue

@@ -127,6 +127,13 @@ export default DitoComponent.component('DitoCreateButton', {
 
   .dito-pulldown {
     right: 0;
+
+    .dito-buttons-sticky & {
+      top: unset;
+      right: unset;
+      bottom: 0;
+      left: 0;
+    }
   }
 }
 </style>

package/src/components/DitoDialog.vue

@@ -4,7 +4,7 @@
   role="dialog"
   aria-expanded="true"
   aria-modal="true"
-  :style="{ '--width': `${settings.width}px` }"
+  :style="{ '--width': settings.width ? `${settings.width}px` : null }"
   @mouseup="onMouseUp"
 )
   UseFocusTrap.dito-dialog__focus-trap(:options="focusTrapOptions")

package/src/components/DitoNotifications.vue

@@ -5,8 +5,9 @@
   .dito-notifications__inner
     VueNotifications(
       ref="notifications"
-      position="none"
       classes="dito-notification"
+      position=""
+      width=""
     )
 </template>
 
@@ -75,7 +76,12 @@ export default DitoComponent.component('DitoNotifications', {
 }
 
 .dito-notifications {
+  $notification-width: 300px;
+
   flex: 1;
+  z-index: $z-index-notifications;
+  box-sizing: border-box;
+  margin-left: $form-spacing;
   // For the `@container` rule to work:
   container-type: inline-size;
 
@@ -94,10 +100,11 @@ export default DitoComponent.component('DitoNotifications', {
     position: absolute;
     left: 0;
     top: 0;
+    width: $notification-width;
 
-    @container (width < 300px) {
+    @container (width < #{$notification-width + $content-padding}) {
       left: unset;
-      right: 0;
+      right: $content-padding;
     }
   }
 
@@ -107,7 +114,7 @@ export default DitoComponent.component('DitoNotifications', {
 
   .dito-notification {
     padding: 8px;
-    margin: $content-padding;
+    margin: $content-padding 0;
     font-size: inherit;
     color: $color-white;
     border-radius: $border-radius;
@@ -119,6 +126,9 @@ export default DitoComponent.component('DitoNotifications', {
     }
 
     .notification-content {
+      overflow: hidden;
+      word-break: break-all;
+
       p {
         margin: 0;
 

package/src/components/DitoPanels.vue

@@ -13,7 +13,7 @@
       :data="data"
       :meta="meta"
       :store="getChildStore(schema.name)"
-      :disabled="schema.disabled != null ? schema.disabled : disabled"
+      :disabled="schema.disabled ?? disabled"
       :panelTabComponent="tabComponent"
     )
 </template>

package/src/styles/_settings.scss

@@ -72,6 +72,7 @@ $menu-padding: $menu-padding-ver $menu-padding-hor;
 // Z-Indices
 $z-index-dialog: 4000;
 $z-index-drag-overlay: 3000;
+$z-index-notifications: 2500;
 $z-index-header: 2000;
 $z-index-tippy: 750;
 $z-index-main-buttons: 500;

package/src/utils/options.js

@@ -37,8 +37,6 @@ const ditoOptionKeys = [
   'excludeValue',
   'ignoreMissingValue',
   'omitSpacing',
-  'formatValue',
-  'parseValue',
   'processValue',
   'processSchema',
   'getPanelSchema',