@ditojs/admin 2.7.2 → 2.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.7.2",
+  "version": "2.7.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,7 +33,7 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.7.2",
+    "@ditojs/ui": "^2.7.3",
     "@ditojs/utils": "^2.7.1",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
@@ -67,7 +67,7 @@
     "sortablejs": "^1.15.0",
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
-    "type-fest": "^3.9.0",
+    "type-fest": "^3.10.0",
     "vue": "^3.2.47",
     "vue-multiselect": "^3.0.0-beta.1",
     "vue-router": "^4.1.6",
@@ -80,10 +80,10 @@
     "pug": "^3.0.2",
     "sass": "1.62.1",
     "typescript": "^5.0.4",
-    "vite": "^4.3.4"
+    "vite": "^4.3.5"
   },
   "types": "types",
-  "gitHead": "1e84bcce13c988b1d388c128e6adf6ad9cb5517f",
+  "gitHead": "6f35889443fbf18b1853dfaeb801766d197f0b87",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoDialog.vue

@@ -172,7 +172,7 @@ export default DitoComponent.component('DitoDialog', {
   position: fixed;
   display: flex;
   inset: 0;
-  z-index: 2000;
+  z-index: $z-index-dialog;
   padding: $content-padding;
   align-items: center;
   justify-content: center;

package/src/components/DitoErrors.vue

@@ -59,7 +59,7 @@ export default DitoComponent.component('DitoErrors', {
           interactive: true,
           hideOnClick: false,
           offset: [3, 3], // 1/2 form-spacing
-          zIndex: 1
+          zIndex: ''
         })
         tip.popper.addEventListener('mousedown', () => tip.hide())
         tip.show()

package/src/components/DitoForm.vue

@@ -24,7 +24,7 @@
       :meta="meta"
       :store="store"
       :disabled="isLoading"
-      scrollable
+      :scrollable="!isNestedRoute"
       headerInMenu
       generateLabels
     )

package/src/components/DitoHeader.vue

@@ -81,7 +81,7 @@ export default DitoComponent.component('DitoHeader', {
   background: $color-black;
   font-size: $header-font-size;
   line-height: $header-line-height;
-  z-index: $header-z-index;
+  z-index: $z-index-header;
   @include user-select(none);
 
   &::after {

package/src/components/DitoMenu.vue

@@ -109,7 +109,7 @@ export default DitoComponent.component('DitoMenu', {
           display: block;
           position: absolute;
           width: var(--width);
-          z-index: $header-z-index;
+          z-index: $z-index-header;
           transform: translateX(calc(var(--width) + 2 * $menu-spacing))
             translateY(-$item-height);
 

package/src/components/DitoRoot.vue

@@ -104,14 +104,14 @@ export default DitoComponent.component('DitoRoot', {
 
     tippyDelegate(this.$el, {
       target: '.dito-info',
+      theme: 'info',
+      appendTo: 'parent',
+      animation: 'shift-away-subtle',
+      interactive: true,
+      delay: 250,
+      zIndex: '',
       onCreate(instance) {
         instance.setContent(instance.reference.dataset.info)
-        instance.setProps({
-          theme: 'info',
-          interactive: true,
-          animation: 'shift-away-subtle',
-          delay: 250
-        })
       }
     })
 
@@ -506,7 +506,7 @@ function addRoutes(router, routes) {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: $drag-overlay-z-index;
+  z-index: $z-index-drag-overlay;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.25);
@@ -519,7 +519,7 @@ function addRoutes(router, routes) {
 
   background: $content-color-background;
   border-radius: $border-radius;
-  z-index: $drag-overlay-z-index + 1;
+  z-index: $z-index-drag-overlay + 1;
   filter: drop-shadow(0 4px 8px rgba(0, 0, 0, var(--shadow-alpha)));
 }
 

package/src/components/DitoSchema.vue

@@ -475,12 +475,14 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     repositionErrors() {
-      // Force repositioning of error tooltips, as otherwise they
-      // sometimes don't show up in the right place initially when
-      // changing tabs
-      const scrollParent = this.$refs.content.closest('.dito-scroll')
-      scrollParent.scrollTop++
-      scrollParent.scrollTop--
+      // Fire a fake scroll event to force the repositioning of error tooltips,
+      // as otherwise they sometimes don't show up in the right place initially
+      // when changing tabs.
+      const scrollContainer = this.$refs.content.closest('.dito-scroll')
+      const dispatch = () => scrollContainer.dispatchEvent(new Event('scroll'))
+      dispatch()
+      // This is required to handle `&--label-vertical` based layout changes.
+      setTimeout(dispatch, 0)
     },
 
     focus() {
@@ -811,7 +813,7 @@ export default DitoComponent.component('DitoSchema', {
     top: 0;
     left: 0;
     right: 0;
-    z-index: $header-z-index;
+    z-index: $z-index-header;
     // Turn off pointer events so that DitoTrail keeps receiving events...
     pointer-events: none;
     // ...but allow interaction with the tabs and buttons (e.g. clipboard)

package/src/mixins/TextMixin.js

@@ -1,3 +1,5 @@
+import { isString } from '@ditojs/utils'
+import { getDefaultValue } from '../utils/schema.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 
 // @vue/component
@@ -9,7 +11,15 @@ export default {
     })
   },
 
-  parseValue(schema, value) {
-    return schema.trim && value != null ? value.trim() : value
+  processValue(schema, value) {
+    if (schema.trim && value != null && isString(value)) {
+      // Text fields don't necessarily have a `String` value when `format()`
+      // without `parse()` is used.
+      value = value.trim()
+    }
+    if (value === '') {
+      value = getDefaultValue(schema)
+    }
+    return value
   }
 }

package/src/mixins/TypeMixin.js

@@ -3,7 +3,7 @@ import ValidationMixin from './ValidationMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { computeValue } from '../utils/schema.js'
 import { getItem, getParentItem } from '../utils/data.js'
-import { camelize } from '@ditojs/utils'
+import { asArray, camelize } from '@ditojs/utils'
 
 // @vue/component
 export default {
@@ -251,9 +251,7 @@ export default {
     // @overridable
     async scrollIntoView() {
       await this.focusSchema()
-      let { element = this } = this.$refs
-      element = element.scrollIntoView ? element : element.$el
-      element.scrollIntoView?.({
+      this.getFocusElement()?.scrollIntoView?.({
         behavior: 'smooth',
         block: 'center'
       })
@@ -261,16 +259,17 @@ export default {
 
     // @overridable
     focusElement() {
-      let { element = this } = this.$refs
-      element = element.focus ? element : element.$el
-      element.focus?.()
+      this.getFocusElement()?.focus?.()
     },
 
     // @overridable
     blurElement() {
-      let { element = this } = this.$refs
-      element = element.blur ? element : element.$el
-      element.blur?.()
+      this.getFocusElement()?.blur?.()
+    },
+
+    getFocusElement() {
+      const element = asArray(this.$refs.element)[0] ?? this
+      return element.$el ?? element
     },
 
     async focusSchema() {

package/src/styles/_button.scss

@@ -131,17 +131,21 @@
     }
   }
 
-  &.dito-buttons-main:not(:empty) {
-    position: sticky;
-    bottom: 0;
-    width: 100%;
-    align-self: flex-end;
-    z-index: 500;
-    margin-bottom: -$content-padding;
-    margin-top: 2 * $content-padding;
-    box-shadow: 0 (-$content-padding) $content-padding (-$content-padding)
-      $color-shadow;
-    background: $content-color-background;
+  &.dito-buttons-main {
+    border-top: $border-style;
+
+    .dito-scroll > &:not(:empty) {
+      position: sticky;
+      bottom: 0;
+      width: 100%;
+      align-self: flex-end;
+      z-index: $z-index-main-buttons;
+      margin-bottom: -$content-padding;
+      margin-top: 2 * $content-padding;
+      box-shadow: 0 (-$content-padding) $content-padding (-$content-padding)
+        $color-shadow;
+      background: $content-color-background;
+    }
   }
 
   &.dito-buttons-round,
@@ -192,7 +196,6 @@
 
   &.dito-button-clear {
     width: 2em;
-    z-index: 1;
     background: $color-white;
     display: none;
 

package/src/styles/_pulldown.scss

@@ -4,7 +4,7 @@ ul.dito-pulldown {
   display: none;
   position: absolute;
   top: 0;
-  z-index: 1000;
+  z-index: $z-index-popup;
   border-radius: $pulldown-radius;
   box-shadow: $shadow-window;
   overflow: hidden;

package/src/styles/_settings.scss

@@ -50,7 +50,6 @@ $form-spacing-half: calc($form-spacing / 2);
 // Header
 $header-font-size: 14px;
 $header-line-height: 1;
-$header-z-index: 1000;
 $header-padding-ver: $header-font-size;
 $header-padding-hor: $content-padding;
 $header-padding: $header-padding-ver $header-padding-hor;
@@ -70,8 +69,12 @@ $menu-padding-ver: $header-padding-ver - $menu-spacing;
 $menu-padding-hor: $header-padding-hor - $menu-spacing;
 $menu-padding: $menu-padding-ver $menu-padding-hor;
 
-// Drag & Drop
-$drag-overlay-z-index: 2000;
+// Z-Indices
+$z-index-dialog: 4000;
+$z-index-drag-overlay: 3000;
+$z-index-header: 2000;
+$z-index-tippy: 750;
+$z-index-main-buttons: 500;
 
 // Patterns
 $pattern-transparency-size: ($font-size - $border-width) * $input-height-factor;

package/src/styles/_tippy.scss

@@ -3,6 +3,11 @@
 @import 'tippy.js/animations/shift-away-subtle.css';
 
 .tippy-box {
+  .tippy-content,
+  .tippy-arrow {
+    z-index: $z-index-tippy;
+  }
+
   &[data-theme] {
     --color: #{$color-active};
 

package/src/types/DitoTypeMultiselect.vue

@@ -443,6 +443,7 @@ $tag-line-height: 1em;
     }
 
     &__content-wrapper {
+      z-index: $z-index-popup;
       border-color: $color-active;
     }
 

package/src/types/DitoTypeSelect.vue

@@ -91,7 +91,7 @@ $select-arrow-right: calc(($select-arrow-width - $select-arrow-size) / 2);
     flex: 1;
     position: relative;
 
-    &::after {
+    &::before {
       @include arrow($select-arrow-size);
 
       position: absolute;