@ditojs/admin 2.7.1 → 2.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.7.1",
+  "version": "2.7.3",
   "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.1",
+    "@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": "3fe49034af7e93f2cc61da3f2add40c4e41893d5",
+  "gitHead": "13bec1eda290997bdc10d110652180cdc9d3653b",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoContainer.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
 .dito-container(
   v-show="componentVisible"
-  :class="containerClass"
-  :style="containerStyle"
+  :class="containerClasses"
+  :style="containerStyles"
 )
   Teleport(
     v-if="isMounted && panelEntries.length > 0"
@@ -17,7 +17,7 @@
     )
   DitoLabel(
     v-if="hasLabel"
-    :class="componentClass"
+    :class="layoutClasses"
     :label="label"
     :dataPath="labelDataPath"
     :info="info"
@@ -25,7 +25,7 @@
   component.dito-component(
     :is="typeComponent"
     ref="component"
-    :class="componentClass"
+    :class="componentClasses"
     :schema="schema"
     :dataPath="dataPath"
     :data="data"
@@ -176,22 +176,20 @@ export default DitoComponent.component('DitoContainer', {
         : null
     },
 
-    containerClass() {
-      const { class: containerClass } = this.schema
+    containerClasses() {
+      const { class: classes } = this.schema
       const prefix = 'dito-container'
       return {
         [`${prefix}--single`]: this.single,
+        'dito-disabled': this.componentDisabled,
+        'dito-has-errors': !!this.errors,
         [`${prefix}--label-vertical`]: this.verticalLabels,
         [`${prefix}--omit-padding`]: omitPadding(this.schema),
-        ...(
-          isString(containerClass)
-            ? { [containerClass]: true }
-            : containerClass
-        )
+        ...(isString(classes) ? { [classes]: true } : classes)
       }
     },
 
-    containerStyle() {
+    containerStyles() {
       const { flexBasis, combinedBasis } = this
       return {
         '--grow': this.flexGrow ? 1 : 0,
@@ -204,15 +202,18 @@ export default DitoComponent.component('DitoContainer', {
       }
     },
 
-    componentClass() {
+    componentClasses() {
       return {
-        // TODO: BEM?
         'dito-single': this.single,
-        'dito-disabled': this.componentDisabled,
+        ...this.layoutClasses
+      }
+    },
+
+    layoutClasses() {
+      return {
         'dito-width-fill': this.width === 'fill' || this.flexBasis !== 'auto',
         'dito-width-grow': this.flexGrow,
-        'dito-width-shrink': this.flexShrink,
-        'dito-has-errors': !!this.errors
+        'dito-width-shrink': this.flexShrink
       }
     },
 

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()
@@ -74,7 +74,7 @@ export default DitoComponent.component('DitoErrors', {
 
 .dito-errors {
   position: absolute;
-  opacity: 0;
+  visibility: hidden;
 
   ul {
     color: $color-error;

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

@@ -811,7 +811,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
@@ -10,6 +12,14 @@ export default {
   },
 
   processValue(schema, value) {
-    return schema.trim && value != null ? value.trim() : 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

@@ -48,26 +48,36 @@ export default {
 
     value: {
       get() {
-        const value = computeValue(
+        let value = computeValue(
           this.schema,
           this.data,
           this.name,
           this.dataPath,
           { component: this }
         )
+        const { formatValue } = this.$options
+        if (formatValue) {
+          value = formatValue(this.schema, value, this.dataPath)
+        }
         const { format } = this.schema
-        return format
-          ? format(new DitoContext(this, { value }))
-          : value
+        if (format) {
+          value = format(new DitoContext(this, { value }))
+        }
+        return value
       },
 
       set(value) {
+        const { parseValue } = this.$options
+        if (parseValue) {
+          value = parseValue(this.schema, value, this.dataPath)
+        }
         const { parse } = this.schema
-        this.parsedValue = parse
-          ? parse(new DitoContext(this, { value }))
-          : value
+        if (parse) {
+          value = parse(new DitoContext(this, { value }))
+        }
         // eslint-disable-next-line vue/no-mutating-props
-        this.data[this.name] = this.parsedValue
+        this.data[this.name] = value
+        this.parsedValue = value
         this.changedValue = undefined
       }
     },

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

@@ -251,12 +251,6 @@ $tag-line-height: 1em;
     --input-width: auto;
   }
 
-  &.dito-has-errors {
-    &__tags {
-      border-color: $color-error;
-    }
-  }
-
   .dito-edit-buttons {
     margin-left: $form-spacing-half;
   }
@@ -268,53 +262,6 @@ $tag-line-height: 1em;
     min-height: inherit;
     color: $color-black;
 
-    &--active {
-      #{$self}__placeholder {
-        // Don't use `display: none` to hide place-holder, as the layout would
-        // collapse.
-        display: inline-block;
-        visibility: hidden;
-      }
-
-      #{$self}__single,
-      #{$self}__input {
-        // Sadly, vue-select sets `style="width"` in addition to using classes
-        // so `!important` is necessary:
-        width: var(--input-width) !important;
-      }
-
-      #{$self}__tags {
-        border-color: $color-active;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      #{$self}__content-wrapper {
-        border: $border-width solid $color-active;
-        border-top-color: $border-color;
-        margin: -1px 0 0;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-
-      &#{$self}--above {
-        #{$self}__tags {
-          border-radius: $border-radius;
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
-        }
-
-        #{$self}__content-wrapper {
-          border: $border-width solid $color-active;
-          border-bottom-color: $border-color;
-          margin: 0 0 -1px;
-          border-radius: $border-radius;
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-      }
-    }
-
     &__tags {
       display: flex;
       font-size: inherit;
@@ -323,6 +270,10 @@ $tag-line-height: 1em;
       padding: 0 $spinner-width 0 0;
       // So tags can float on multiple lines and have proper margins:
       padding-bottom: $tag-margin;
+
+      .dito-has-errors & {
+        border-color: $color-error;
+      }
     }
 
     &__tag {
@@ -412,7 +363,7 @@ $tag-line-height: 1em;
 
       min-height: unset;
       height: unset;
-      line-height: $tag-line-height;
+      line-height: $line-height;
       padding: $input-padding;
 
       &::after {
@@ -451,7 +402,7 @@ $tag-line-height: 1em;
         color: $color-text;
         background: $color-highlight;
 
-        &#{$option}--highlight {
+        @at-root #{$self}#{$self}--show-highlight &#{$option}--highlight {
           color: $color-text-inverted;
         }
       }
@@ -490,6 +441,55 @@ $tag-line-height: 1em;
       border: $border-style;
       border-radius: $border-radius;
     }
+
+    &__content-wrapper {
+      z-index: $z-index-popup;
+      border-color: $color-active;
+    }
+
+    &:not(&--above) #{$self}__content-wrapper {
+      margin: (-$border-width) 0 0;
+      border-top-color: $border-color;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &--above #{$self}__content-wrapper {
+      margin: 0 0 (-$border-width);
+      border-bottom-color: $border-color;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &--active {
+      #{$self}__placeholder {
+        // Don't use `display: none` to hide place-holder, as the layout would
+        // collapse.
+        display: inline-block;
+        visibility: hidden;
+      }
+
+      #{$self}__single,
+      #{$self}__input {
+        // Sadly, vue-select sets `style="width"` in addition to using classes
+        // so `!important` is necessary:
+        width: var(--input-width) !important;
+      }
+
+      #{$self}__tags {
+        border-color: $color-active;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &#{$self}--above {
+        #{$self}__tags {
+          border-radius: $border-radius;
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+        }
+      }
+    }
   }
 }
 </style>

package/src/types/DitoTypeSelect.vue

@@ -80,17 +80,21 @@ $select-arrow-right: calc(($select-arrow-width - $select-arrow-size) / 2);
   position: relative;
 
   select {
+    @extend %input;
+
     padding-right: $select-arrow-width;
   }
 
+  // `&___inner` is needed to make the edit buttons appear to the right of the
+  // select:
   &__inner {
     flex: 1;
     position: relative;
 
-    &::after {
-      position: absolute;
+    &::before {
       @include arrow($select-arrow-size);
 
+      position: absolute;
       bottom: $select-arrow-bottom;
       right: calc(#{$select-arrow-right} + #{$border-width});
     }

package/src/utils/options.js

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

package/src/utils/schema.js

@@ -765,7 +765,14 @@ export function processData(schema, sourceSchema, data, dataPath, {
       value = value.map(object => object[wrapPrimitives])
     }
 
-    // Handle the user's `process()` callback first, if one is provided, so that
+    // Each component type can provide its own static `processValue()` method
+    // to convert the data for storage.
+    const processValue = typeOptions?.processValue
+    if (processValue) {
+      value = processValue(schema, value, dataPath, graph)
+    }
+
+    // Handle the user's `process()` callback next, if one is provided, so that
     // it can modify data in `processedData` even if it provides `exclude: true`
     if (process) {
       value = process(getContext())
@@ -779,12 +786,6 @@ export function processData(schema, sourceSchema, data, dataPath, {
     ) {
       delete processedData[name]
     } else {
-      // Each component type can provide its own static `processValue()` method
-      // to convert the data for storage.
-      const processValue = typeOptions?.processValue
-      if (processValue) {
-        value = processValue(schema, value, dataPath, graph)
-      }
       processedData[name] = value
     }
   }