@ditojs/admin 2.7.0 → 2.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.7.0",
+  "version": "2.7.2",
   "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,8 +33,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.7.0",
-    "@ditojs/utils": "^2.7.0",
+    "@ditojs/ui": "^2.7.2",
+    "@ditojs/utils": "^2.7.1",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.0.3",
@@ -83,7 +83,7 @@
     "vite": "^4.3.4"
   },
   "types": "types",
-  "gitHead": "874c68d5807ba97b67867f6b8d13f8fcb4990533",
+  "gitHead": "1e84bcce13c988b1d388c128e6adf6ad9cb5517f",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoAdmin.js

@@ -4,7 +4,7 @@ import VueNotifications from '@kyvg/vue3-notification'
 import {
   isString,
   isAbsoluteUrl,
-  merge,
+  assignDeeply,
   hyphenate,
   camelize,
   defaultFormats,
@@ -31,12 +31,12 @@ export default class DitoAdmin {
     // Merge in `api` settings as passed from `config.admin` and through the
     // `AdminController` with `api` values from from 'admin/index.js'
     // NOTE: `AdminController` provides `dito.api.base`
-    this.api = api = merge({ base: '/' }, dito.api, api)
+    this.api = api = assignDeeply({ base: '/' }, dito.api, api)
     this.options = options
 
     // Setup default api settings:
     api.locale ||= 'en-US'
-    api.formats = merge({}, defaultFormats, api.formats)
+    api.formats = assignDeeply({}, defaultFormats, api.formats)
     api.request ||= options => request(api, options)
     api.getApiUrl ||= options => getApiUrl(api, options)
     api.isApiUrl ||= url => isApiUrl(api, url)

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/DitoErrors.vue

@@ -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

@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import { clone, capitalize, parseDataPath, merge } from '@ditojs/utils'
+import { clone, capitalize, parseDataPath, assignDeeply } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import RouteMixin from '../mixins/RouteMixin.js'
 import ResourceMixin from '../mixins/ResourceMixin.js'
@@ -99,7 +99,7 @@ export default DitoComponent.component('DitoForm', {
 
     buttonSchemas() {
       return getButtonSchemas(
-        merge(
+        assignDeeply(
           {
             cancel: {
               type: 'button',

package/src/mixins/TextMixin.js

@@ -9,7 +9,7 @@ export default {
     })
   },
 
-  processValue(schema, value) {
+  parseValue(schema, value) {
     return schema.trim && value != null ? value.trim() : 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/types/DitoTypeDate.vue

@@ -22,7 +22,7 @@
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { DatePicker, TimePicker, DateTimePicker } from '@ditojs/ui/src'
-import { isDate, merge } from '@ditojs/utils'
+import { isDate, assignDeeply } from '@ditojs/utils'
 
 export default DitoTypeComponent.register(
   ['date', 'datetime', 'time'],
@@ -53,7 +53,7 @@ export default DitoTypeComponent.register(
         type: Object,
         default: null,
         get(formats) {
-          const { date, time } = merge({}, this.api.formats, formats)
+          const { date, time } = assignDeeply({}, this.api.formats, formats)
           return {
             date: ['date', 'datetime'].includes(this.type) ? date : null,
             time: ['time', 'datetime'].includes(this.type) ? time : null

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,54 @@ $tag-line-height: 1em;
       border: $border-style;
       border-radius: $border-radius;
     }
+
+    &__content-wrapper {
+      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;
       @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

@@ -14,8 +14,8 @@ import {
   isModule,
   asArray,
   clone,
-  merge,
   camelize,
+  assignDeeply,
   mapConcurrently,
   getValueAtDataPath
 } from '@ditojs/utils'
@@ -321,7 +321,7 @@ export function processSchemaDefaults(api, schema) {
         if (schema[key] === undefined) {
           schema[key] = value
         } else {
-          schema[key] = merge(value, schema[key])
+          schema[key] = assignDeeply(value, schema[key])
         }
       }
     }
@@ -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
     }
   }