@ditojs/admin 2.1.1 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.1.1",
+  "version": "2.1.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.1.1",
+    "@ditojs/ui": "^2.1.2",
     "@ditojs/utils": "^2.1.1",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
@@ -82,7 +82,7 @@
     "vite": "^4.2.1"
   },
   "types": "types",
-  "gitHead": "b4ff87b7ffa812092a27b6c28a8ab3c5d7d7094d",
+  "gitHead": "39cbb715f40b8c3c657ca8d6790def22f170b31b",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoContext.js

@@ -67,6 +67,10 @@ export default class DitoContext {
     return get(this, 'nested', true)
   }
 
+  get schema() {
+    return get(this, 'schema', null)
+  }
+
   get value() {
     return get(this, 'value', undefined)
   }
@@ -154,9 +158,9 @@ export default class DitoContext {
     return get(this, 'formLabel', null)
   }
 
-  // TODO: Remove exposure since the associated component doesn't always exist,
-  // e.g. nested forms in `processData()`. Instead, bind component to `this`
-  // only where available.
+  // NOTE: Like 'options', the associated component doesn't always exist, e.g.
+  // in nested forms during `processData()`. But `schema` is guaranteed to
+  // always be available.
   get component() {
     return get(this, 'component', null)
   }

package/src/components/DitoPane.vue

@@ -37,7 +37,7 @@
 <script>
 import DitoComponent from '../DitoComponent.js'
 import { appendDataPath } from '../utils/data.js'
-import { getAllPanelSchemas, isNested } from '../utils/schema.js'
+import { getAllPanelEntries, isNested } from '../utils/schema.js'
 
 // @vue/component
 export default DitoComponent.component('DitoPane', {
@@ -95,12 +95,12 @@ export default DitoComponent.component('DitoPane', {
       )
     },
 
-    panelSchemas() {
+    panelEntries() {
       // Gather all panel schemas from all component schemas, by finding those
-      // that want to provide a panel. See `getAllPanelSchemas()` for details.
+      // that want to provide a panel. See `getAllPanelEntries()` for details.
       return this.componentSchemas.flatMap(
         ({ schema, nestedDataPath: dataPath }) =>
-          getAllPanelSchemas(
+          getAllPanelEntries(
             schema,
             dataPath,
             this.schemaComponent,

package/src/components/DitoSchema.vue

@@ -75,7 +75,7 @@
     v-else-if="isPopulated"
   )
     DitoPanels(
-      :panels="panelSchemas"
+      :panels="panelEntries"
       :data="data"
       :meta="meta"
       :store="store"
@@ -99,7 +99,7 @@ import ItemMixin from '../mixins/ItemMixin.js'
 import { appendDataPath, getParentItem } from '../utils/data.js'
 import {
   getNamedSchemas,
-  getPanelSchemas,
+  getPanelEntries,
   setDefaultValues,
   processData
 } from '../utils/schema.js'
@@ -164,12 +164,12 @@ export default DitoComponent.component('DitoSchema', {
       return this.hasOwnData ? null : this.parentComponent.schemaComponent
     },
 
-    panelSchemas() {
-      const panels = getPanelSchemas(this.schema.panels, '')
+    panelEntries() {
+      const panelEntries = getPanelEntries(this.schema.panels, '')
       for (const pane of this.panes) {
-        panels.push(...pane.panelSchemas)
+        panelEntries.push(...pane.panelEntries)
       }
-      return panels
+      return panelEntries
     },
 
     tabs() {

package/src/components/DitoView.vue

@@ -93,10 +93,7 @@ export default DitoComponent.component('DitoView', {
     },
 
     providesData() {
-      return someSchemaComponent(
-        this.viewSchema,
-        component => hasResource(component)
-      )
+      return someSchemaComponent(this.viewSchema, hasResource)
     }
   },
 

package/src/mixins/OptionsMixin.js

@@ -100,6 +100,7 @@ export default {
       default: null
     }),
 
+    // TODO: Rename to `options.labelKey` / `optionLabelKey`?
     optionLabel: getSchemaAccessor('options.label', {
       type: [String, Function],
       default: null,
@@ -114,6 +115,7 @@ export default {
       }
     }),
 
+    // TODO: Rename to `options.valueKey` / `optionValueKey`?
     optionValue: getSchemaAccessor('options.value', {
       type: [String, Function],
       default: null,

package/src/mixins/SortableMixin.js

@@ -16,7 +16,8 @@ export default {
     getSortableOptions(draggable, fallback = false) {
       return {
         animation: 150,
-        disabled: !draggable,
+        // TODO: This is broken in VueSortable, always enable it for now.
+        // disabled: !draggable,
         handle: '.dito-button-drag',
         dragClass: 'dito-sortable-active',
         chosenClass: 'dito-sortable-chosen',

package/src/types/DitoTypeMultiselect.vue

@@ -8,6 +8,7 @@
   VueMultiselect(
     ref="element"
     v-model="selectedOptions"
+    :class="{ 'multiselect--show-highlight': showHighlight }"
     :showLabels="false"
     :placeholder="placeholder"
     tagPlaceholder="Press enter to add new tag"
@@ -45,6 +46,7 @@ import TypeMixin from '../mixins/TypeMixin.js'
 import OptionsMixin from '../mixins/OptionsMixin.js'
 import VueMultiselect from 'vue-multiselect'
 import { getSchemaAccessor } from '../utils/accessor.js'
+import { isBoolean } from '@ditojs/utils'
 
 // @vue/component
 export default DitoTypeComponent.register('multiselect', {
@@ -53,6 +55,7 @@ export default DitoTypeComponent.register('multiselect', {
 
   data() {
     return {
+      isMounted: false,
       searchedOptions: null,
       populate: false
     }
@@ -71,8 +74,8 @@ export default DitoTypeComponent.register('multiselect', {
                 )
               )
               // Filter out options that we couldn't match.
-              // TODO: We really should display an error instead
-              .filter(value => value)
+              // TODO: Should we display an error instead?
+              .filter(Boolean)
           : this.selectedOption
       },
 
@@ -111,20 +114,26 @@ export default DitoTypeComponent.register('multiselect', {
     }),
 
     placeholder() {
-      const { placeholder, searchable, taggable } = this.schema
-      return (
-        placeholder || (
-          searchable && taggable
-            ? `Search or add a ${this.label}`
-            : searchable
-              ? `Select or search ${this.label}`
-              : undefined
-        )
-      )
+      let { placeholder, searchable, taggable } = this.schema
+      if (isBoolean(placeholder)) {
+        placeholder = placeholder ? undefined : null
+      }
+      return placeholder === undefined
+        ? searchable && taggable
+          ? `Search or add a ${this.label}`
+          : searchable
+            ? `Select or search ${this.label}`
+            : undefined
+        : placeholder
+    },
+
+    showHighlight() {
+      return this.isMounted && this.$refs.element.pointerDirty
     }
   },
 
   mounted() {
+    this.isMounted = true
     if (this.autofocus) {
       // vue-multiselect doesn't support the autofocus attribute. We need to
       // handle it here.
@@ -211,224 +220,248 @@ $tag-line-height: 1em;
 .dito-multiselect {
   position: relative;
 
-  .multiselect {
-    font-size: inherit;
-    min-height: inherit;
-    color: $color-black;
+  &.dito-multiselect-single {
+    --input-width: 100%;
   }
 
-  .multiselect__tags {
-    font-size: inherit;
-    overflow: auto;
-    min-height: inherit;
-    padding: 0 $spinner-width 0 0;
-    // So tags can float on multiple lines and have proper margins:
-    padding-bottom: $tag-margin;
+  &.dito-multiselect-multiple {
+    --input-width: auto;
   }
 
-  .multiselect__tag {
-    float: left;
-    margin: $tag-margin 0 0 $tag-margin;
-    border-radius: 1em;
-    padding: $tag-padding $tag-icon-width $tag-padding 0.8em;
-    line-height: $tag-line-height;
-    height: calc($input-height - 2 * $tag-padding);
+  &.dito-has-errors {
+    &__tags {
+      border-color: $color-error;
+    }
   }
 
-  .multiselect__tags-wrap {
-    overflow: auto;
-    line-height: 0;
+  .dito-button-clear {
+    width: $spinner-width;
   }
 
-  .multiselect__single,
-  .multiselect__placeholder,
-  .multiselect__input {
+  .multiselect {
+    $self: last-selector(&);
+
     font-size: inherit;
-    line-height: inherit;
-    min-height: 0;
-    margin: 0 0 1px 0;
-    // Sadly, vue-select sets style="padding: ...;" in addition to using
-    // classes, so `!important` is necessary:
-    padding: $input-padding !important;
-    // So input can float next to tags and have proper margins with
-    // .multiselect__tags:
-    padding-bottom: 0 !important;
-    background: none;
-  }
+    min-height: inherit;
+    color: $color-black;
 
-  .multiselect__placeholder,
-  .multiselect__input::placeholder {
-    color: $color-placeholder;
-  }
+    &--active {
+      #{$self}__placeholder {
+        // Don't use `display: none` to hide place-holder, as the layout would
+        // collapse.
+        display: inline-block;
+        visibility: hidden;
+      }
 
-  .multiselect--active {
-    .multiselect__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;
+      }
 
-  .multiselect__select,
-  .multiselect__spinner {
-    padding: 0;
-    // $border-width to prevent masking border with .multiselect__spinner
-    top: $border-width;
-    right: $border-width;
-    bottom: $border-width;
-    height: inherit;
-    border-radius: $border-radius;
-  }
+      #{$self}__tags {
+        border-color: $color-active;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
 
-  .multiselect__select {
-    width: 0;
-    margin-right: calc($select-arrow-width / 2);
+      #{$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;
+      }
 
-    &::before {
-      @include arrow($select-arrow-size);
+      &#{$self}--above {
+        #{$self}__tags {
+          border-radius: $border-radius;
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+        }
 
-      bottom: $select-arrow-bottom;
-      right: calc(-1 * $select-arrow-size / 2);
+        #{$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;
+        }
+      }
     }
-  }
 
-  .multiselect__spinner {
-    width: $spinner-width;
-
-    &::before,
-    &::after {
-      // Change the width of the loading spinner
-      border-width: 3px;
-      border-top-color: $color-active;
-      inset: 0;
-      margin: auto;
+    &__tags {
+      font-size: inherit;
+      overflow: auto;
+      min-height: inherit;
+      padding: 0 $spinner-width 0 0;
+      // So tags can float on multiple lines and have proper margins:
+      padding-bottom: $tag-margin;
     }
-  }
 
-  .multiselect__option {
-    min-height: unset;
-    height: unset;
-    line-height: $tag-line-height;
-    padding: $input-padding;
-
-    &::after {
-      // Instruction text for options
-      padding: $input-padding;
+    &__tag {
+      float: left;
+      margin: $tag-margin 0 0 $tag-margin;
+      border-radius: 1em;
+      padding: $tag-padding $tag-icon-width $tag-padding 0.8em;
       line-height: $tag-line-height;
+      height: calc($input-height - 2 * $tag-padding);
     }
-  }
 
-  .multiselect__option--highlight {
-    &::after {
-      display: block;
-      position: absolute;
-      background: transparent;
-      color: $color-white;
+    &__tags-wrap {
+      overflow: auto;
+      line-height: 0;
     }
-  }
 
-  .multiselect__option--disabled {
-    background: none;
-    color: $color-disabled;
-  }
+    &__single,
+    &__placeholder,
+    &__input {
+      font-size: inherit;
+      line-height: inherit;
+      min-height: 0;
+      margin: 0 0 1px 0;
+      // Sadly, vue-select sets style="padding: ...;" in addition to using
+      // classes, so `!important` is necessary:
+      padding: $input-padding !important;
+      // So input can float next to tags and have proper margins with
+      // &__tags:
+      padding-bottom: 0 !important;
+      background: none;
+    }
 
-  .multiselect__tag-icon {
-    background: none;
-    border-radius: 1em;
-    width: $tag-icon-width;
-    margin: 0;
+    &__placeholder,
+    &__input::placeholder {
+      color: $color-placeholder;
+    }
 
-    &::after {
-      @extend %icon-clear;
+    &__placeholder {
+      &::after {
+        // Enforce actual line-height for positioning.
+        content: '\200b';
+      }
+    }
 
-      font-size: 0.9em;
-      color: $color-text-inverted;
+    &__select,
+    &__spinner {
+      padding: 0;
+      // $border-width to prevent masking border with &__spinner
+      top: $border-width;
+      right: $border-width;
+      bottom: $border-width;
+      height: inherit;
+      border-radius: $border-radius;
     }
 
-    &:hover::after {
-      color: $color-text;
+    &__select {
+      width: 0;
+      margin-right: calc($select-arrow-width / 2);
+
+      &::before {
+        @include arrow($select-arrow-size);
+
+        bottom: $select-arrow-bottom;
+        right: calc(-1 * $select-arrow-size / 2);
+      }
     }
-  }
 
-  .multiselect__option--selected {
-    background: $color-highlight;
-    color: $color-text;
-    font-weight: normal;
+    &__spinner {
+      width: $spinner-width;
 
-    &.multiselect__option--highlight {
-      color: $color-text-inverted;
+      &::before,
+      &::after {
+        // Change the width of the loading spinner
+        border-width: 3px;
+        border-top-color: $color-active;
+        inset: 0;
+        margin: auto;
+      }
     }
-  }
 
-  .multiselect__tag,
-  .multiselect__option--highlight {
-    background: $color-active;
-    color: $color-text-inverted;
-  }
+    &__option {
+      $option: last-selector(&);
 
-  .multiselect__tags,
-  .multiselect__content-wrapper {
-    border: $border-style;
-    border-radius: $border-radius;
-  }
+      min-height: unset;
+      height: unset;
+      line-height: $tag-line-height;
+      padding: $input-padding;
 
-  &.dito-multiselect-single {
-    --input-width: 100%;
-  }
+      &::after {
+        // Instruction text for options
+        padding: $input-padding;
+        line-height: $tag-line-height;
+      }
 
-  &.dito-multiselect-multiple {
-    --input-width: auto;
-  }
+      // Only show the highlight once the pulldown has received mouse or
+      // keyboard interaction, in which case `&--show-highlight` will be set,
+      // which is controlled by `pointerDirty` in vue-multiselect.
+      // Until then, clear the highlight style, but only if it isn't also
+      // disabled or selected, in which case we want to keep the style.
+      @at-root #{$self}:not(#{$self}--show-highlight)
+          #{$option}:not(#{$option}--disabled):not(#{$option}--selected) {
+        color: $color-text;
+        background: transparent;
+      }
 
-  .multiselect--active {
-    .multiselect__single,
-    .multiselect__input {
-      // Sadly, vue-select sets `style="width"` in addition to using classes
-      // so `!important` is necessary:
-      width: var(--input-width) !important;
-    }
+      &--highlight {
+        &::after {
+          display: block;
+          position: absolute;
+          background: transparent;
+          color: $color-white;
+        }
+
+        @at-root #{$self}#{$self}--show-highlight #{last-selector(&)} {
+          color: $color-text-inverted;
+          background: $color-active;
+        }
+      }
+
+      &--selected {
+        font-weight: normal;
+        color: $color-text;
+        background: $color-highlight;
+
+        &#{$option}--highlight {
+          color: $color-text-inverted;
+        }
+      }
 
-    .multiselect__tags {
-      border-color: $color-active;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+      &--disabled {
+        background: none;
+        color: $color-disabled;
+      }
     }
 
-    .multiselect__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;
+    &__tag {
+      color: $color-text-inverted;
+      background: $color-active;
     }
 
-    &.multiselect--above {
-      .multiselect__tags {
-        border-radius: $border-radius;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
+    &__tag-icon {
+      background: none;
+      border-radius: 1em;
+      width: $tag-icon-width;
+      margin: 0;
+
+      &::after {
+        @extend %icon-clear;
+
+        font-size: 0.9em;
+        color: $color-text-inverted;
       }
 
-      .multiselect__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;
+      &:hover::after {
+        color: $color-text;
       }
     }
-  }
 
-  &.dito-has-errors {
-    .multiselect__tags {
-      border-color: $color-error;
+    &__tags,
+    &__content-wrapper {
+      border: $border-style;
+      border-radius: $border-radius;
     }
   }
-
-  .dito-button-clear {
-    width: $spinner-width;
-  }
 }
 </style>

package/src/types/DitoTypeText.vue

@@ -46,9 +46,11 @@ export default DitoTypeComponent.register(
 
       inputValue: {
         get() {
-          return this.type === 'password' &&
+          return (
+            this.type === 'password' &&
             this.value === undefined &&
             !this.focused
+          )
             ? maskedPassword
             : this.value
         },

package/src/utils/filter.js

@@ -63,6 +63,7 @@ export const filterComponents = {
 
 export function getFiltersPanel(filters, dataPath, proxy) {
   const panel = {
+    type: 'panel',
     label: 'Filters',
     name: '$filters',
     target: dataPath,
@@ -125,6 +126,7 @@ function getFiltersComponents(filters) {
       ? filterComponents[type]?.(filter)
       : filter.components
     if (components) {
+      form.type = 'form'
       form.components = {}
       // Convert labels to placeholders:
       for (const [key, component] of Object.entries(components)) {