@ditojs/admin 2.2.16 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.2.16",
+  "version": "2.3.1",
   "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.2.14",
-    "@ditojs/utils": "^2.2.0",
+    "@ditojs/ui": "^2.3.1",
+    "@ditojs/utils": "^2.3.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.0.3",
@@ -74,7 +74,7 @@
     "vue-upload-component": "^3.1.8"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.2.3",
+    "@ditojs/build": "^2.3.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vue/compiler-sfc": "^3.2.47",
     "pug": "^3.0.2",
@@ -83,7 +83,7 @@
     "vite": "^4.3.1"
   },
   "types": "types",
-  "gitHead": "722b79d58335e249802d250fca9d250bad511b8c",
+  "gitHead": "1b5f5121a2e8e6d3741f0bb2b81d38c2343810d6",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoContainer.vue

@@ -131,6 +131,32 @@ export default DitoComponent.component('DitoContainer', {
       }
     }),
 
+    flexGrow() {
+      // Interpret '>50%' as '50%, flex-grow: 1`
+      return (
+        this.widthOperator === '>' ||
+        this.width === 'fill'
+      )
+    },
+
+    flexShrink() {
+      // Interpret '<50%' as '50%, flex-shrink: 1`
+      return this.widthOperator === '<'
+    },
+
+    flexBasis() {
+      const width = this.width
+      // 'auto' = no fitting:
+      const basis = [null, 'auto', 'fill'].includes(width)
+        ? 'auto'
+        : /%$/.test(width)
+          ? parseFloat(width) // percentage
+          : /[a-z]/.test(width)
+            ? width // native units
+            : parseFraction(width) * 100 // fraction
+      return isNumber(basis) ? `${basis}%` : basis
+    },
+
     containerClass() {
       const { class: containerClass } = this.schema
       const prefix = 'dito-container'
@@ -150,39 +176,27 @@ export default DitoComponent.component('DitoContainer', {
       }
     },
 
-    componentBasis() {
-      const width = this.width
-      // 'auto' = no fitting:
-      const basis = [null, 'auto', 'fill'].includes(width)
-        ? 'auto'
-        : /%$/.test(width)
-          ? parseFloat(width) // percentage
-          : /[a-z]/.test(width)
-            ? width // native units
-            : parseFraction(width) * 100 // fraction
-      return isNumber(basis) ? `${basis}%` : basis
-    },
-
     containerStyle() {
-      // Interpret '>50%' as '50%, flex-grow: 1`
-      const grow = (
-        this.widthOperator === '>' ||
-        this.width === 'fill'
-      )
-      // Interpret '<50%' as '50%, flex-shrink: 1`
-      const shrink = this.widthOperator === '<'
       return {
-        flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} ${this.componentBasis}`
+        flex: `${
+          this.flexGrow ? 1 : 0
+        } ${
+          this.flexShrink ? 1 : 0
+        } ${
+          this.flexBasis
+        }`
       }
     },
 
     componentClass() {
-      const basisIsAuto = this.componentBasis === 'auto'
+      const basisIsAuto = this.flexBasis === 'auto'
       return {
         // TODO: BEM?
         'dito-single': this.single,
         'dito-disabled': this.componentDisabled,
         'dito-width-fill': !basisIsAuto || this.width === 'fill',
+        'dito-width-grow': this.flexGrow,
+        'dito-width-shrink': this.flexShrink,
         'dito-has-errors': !!this.errors
       }
     }

package/src/components/DitoEditButtons.vue

@@ -10,23 +10,25 @@ DitoButtons.dito-edit-buttons.dito-buttons-round(
 )
   //- Firefox doesn't like <button> here, so use <a> instead:
   a.dito-button(
-    v-if="isDraggable"
+    v-if="hasDraggable"
     v-bind="getButtonAttributes(verbs.drag)"
   )
   RouterLink.dito-button(
-    v-if="isEditable"
-    :to="{ path: editPath }"
+    v-if="hasEditable"
+    :class="{ 'dito-disabled': !editPath }"
+    :to="editPath ? { path: editPath } : {}"
     v-bind="getButtonAttributes(verbs.edit)"
   )
   DitoCreateButton(
-    v-if="isCreatable"
+    v-if="hasCreatable"
+    :class="{ 'dito-disabled': !createPath }"
     :schema="schema"
     :path="createPath"
     :verb="verbs.create"
     :text="createButtonText"
   )
   button.dito-button(
-    v-if="isDeletable"
+    v-if="hasDeletable"
     type="button"
     v-bind="getButtonAttributes(verbs.delete)"
     @click="$emit('delete')"
@@ -61,19 +63,19 @@ export default DitoComponent.component('DitoEditButtons', {
       return this.getLabel(this.schema.form)
     },
 
-    isDraggable() {
+    hasDraggable() {
       return this.hasOption('draggable')
     },
 
-    isEditable() {
-      return this.hasOption('editable') && !!this.editPath
+    hasEditable() {
+      return this.hasOption('editable')
     },
 
-    isCreatable() {
-      return this.hasOption('creatable') && !!this.createPath
+    hasCreatable() {
+      return this.hasOption('creatable')
     },
 
-    isDeletable() {
+    hasDeletable() {
       return this.hasOption('deletable')
     },
 

package/src/components/DitoForm.vue

@@ -289,8 +289,9 @@ export default DitoComponent.component('DitoForm', {
       if (
         param &&
         this.providesData &&
-        from.params[param] !== 'create' &&
-        to.params[param] !== from.params[param]
+        from.matched[0].path === to.matched[0].path && // Staying on same form?
+        from.params[param] !== 'create' && // But haven't been creating?
+        to.params[param] !== from.params[param] // Going to a different entity?
       ) {
         this.loadData(true)
       }

package/src/components/DitoLabel.vue

@@ -28,8 +28,7 @@ component.dito-label(
     )
     .dito-info(
       v-if="info"
-      :data-tippy-content="info"
-      data-tippy-theme="info"
+      :data-info="info"
     )
   slot(name="edit-buttons")
 </template>
@@ -118,8 +117,11 @@ export default DitoComponent.component('DitoLabel', {
   .dito-label-suffix {
     @include user-select(none);
     @include ellipsis;
+  }
 
-    &::after {
+  .dito-label-prefix + label,
+  label + .dito-label-suffix {
+    &::before {
       content: '\a0'; // &nbsp;
     }
   }

package/src/components/DitoPanel.vue

@@ -224,10 +224,10 @@ export default DitoComponent.component('DitoPanel', {
     > .dito-schema-content {
       > .dito-pane {
         padding: $form-spacing-half $form-spacing;
-      }
 
-      .dito-container {
-        padding: $form-spacing-half;
+        > .dito-container {
+          padding: $form-spacing-half;
+        }
       }
 
       .dito-object {

package/src/components/DitoRoot.vue

@@ -92,7 +92,16 @@ export default DitoComponent.component('DitoRoot', {
 
   async mounted() {
     tippyDelegate(this.$el, {
-      target: '[data-tippy-content]'
+      target: '.dito-info',
+      onCreate(instance) {
+        instance.setContent(instance.reference.dataset.info)
+        instance.setProps({
+          theme: 'info',
+          interactive: true,
+          animation: 'shift-away-subtle',
+          delay: 250
+        })
+      }
     })
     // Clear the label marked as active on all mouse and keyboard events, except
     // the ones that DitoLabel itself intercepts.

package/src/mixins/OptionsMixin.js

@@ -1,5 +1,6 @@
 import DitoContext from '../DitoContext.js'
 import DataMixin from './DataMixin.js'
+import { hasViewSchema, getViewEditPath } from '../utils/schema.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { setTemporaryId, isReference } from '../utils/data.js'
 import {
@@ -145,6 +146,23 @@ export default {
       }
     }),
 
+    editable: getSchemaAccessor('editable', {
+      type: Boolean,
+      default: false,
+      get(editable) {
+        return (
+          editable &&
+          hasViewSchema(this.schema, this.context)
+        )
+      }
+    }),
+
+    editPath() {
+      return this.editable && this.selectedValue
+        ? getViewEditPath(this.schema, this.selectedValue, this.context)
+        : null
+    },
+
     groupByLabel() {
       return this.groupBy ? 'label' : null
     },
@@ -227,7 +245,7 @@ export default {
       return isString(optionValue)
         ? option?.[optionValue]
         : isFunction(optionValue)
-          ? optionValue.call(this, new DitoContext(this, { option }))
+          ? optionValue(new DitoContext(this, { option }))
           : option
     },
 
@@ -236,7 +254,7 @@ export default {
       return isString(optionLabel)
         ? option?.[optionLabel]
         : isFunction(optionLabel)
-          ? optionLabel.call(this, new DitoContext(this, { option }))
+          ? optionLabel(new DitoContext(this, { option }))
           : labelize(`${option}`)
     }
   },

package/src/mixins/TypeMixin.js

@@ -55,19 +55,15 @@ export default {
           { component: this }
         )
         const { format } = this.schema
-        // `schema.format` is only ever called in the life-cycle
-        // of the component and thus it's ok to bind it to `this`
         return format
-          ? format.call(this, new DitoContext(this, { value }))
+          ? format(new DitoContext(this, { value }))
           : value
       },
 
       set(value) {
         const { parse } = this.schema
-        // `schema.parse` is only ever called in the life-cycle
-        // of the component and thus it's ok to bind it to `this`
         this.parsedValue = parse
-          ? parse.call(this, new DitoContext(this, { value }))
+          ? parse(new DitoContext(this, { value }))
           : value
         // eslint-disable-next-line vue/no-mutating-props
         this.data[this.name] = this.parsedValue

package/src/styles/_button.scss

@@ -191,18 +191,18 @@
   cursor: pointer;
 
   &.dito-button-clear {
+    $self: &;
+
     width: $input-height;
     z-index: 1;
     background: $color-white;
     display: none;
 
-    $button-clear: &;
-
     @at-root .dito-component:hover {
       // Support two levels of nesting inside .dito-component, used by TypeColor
-      & > #{$button-clear},
-      & > * > #{$button-clear},
-      & > * > * > #{$button-clear} {
+      & > #{$self},
+      & > * > #{$self},
+      & > * > * > #{$self} {
         display: block;
       }
     }

package/src/styles/_info.scss

@@ -1,3 +1,5 @@
+@import 'tippy.js/animations/shift-away-subtle.css';
+
 .dito-info {
   --size: calc(1em * var(--line-height));
 
@@ -21,6 +23,7 @@
 .tippy-box[data-theme~='info'] {
   background-color: $color-active;
   color: $color-white;
+  filter: drop-shadow(0 2px 4px $color-shadow);
 
   > .tippy-arrow::before {
     color: $color-active;

package/src/types/DitoTypeButton.vue

@@ -14,8 +14,7 @@ button.dito-button(
       span {{ text }}
     .dito-info(
       v-if="!label && info"
-      :data-tippy-content="info"
-      data-tippy-theme="info"
+      :data-info="info"
     )
   template(
     v-else
@@ -97,19 +96,22 @@ export default DitoTypeComponent.register(
 @import '../styles/_imports';
 
 .dito-button {
-  display: flex;
+  $self: &;
 
   &__text {
     position: relative;
-    width: 100%;
     min-width: min-content;
     height: calc(1em * var(--line-height));
 
     span {
       @include ellipsis;
 
-      position: absolute;
-      inset: 0;
+      #{$self}:not(.dito-width-grow) & {
+        // Use `position: absolute` to prevent the text from growing over the
+        // button's width, which would cause the button to grow as well.
+        position: absolute;
+        inset: 0;
+      }
     }
   }
 }

package/src/types/DitoTypeList.vue

@@ -251,9 +251,11 @@ export default DitoTypeComponent.register('list', {
 
     getEditPath(item, index) {
       if (this.editable) {
-        const path = getViewEditPath(this.schema, this.context) || this.path
         const id = this.getItemId(this.schema, item, index)
-        return `${path}/${id}`
+        return (
+          getViewEditPath(this.schema, id, this.context) ||
+          `${this.path}/${id}`
+        )
       }
       return null
     },

package/src/types/DitoTypeMultiselect.vue

@@ -5,37 +5,48 @@
     'dito-multiselect-multiple': multiple
   }`
 )
-  VueMultiselect(
-    ref="element"
-    v-model="selectedOptions"
-    :class="{ 'multiselect--show-highlight': showHighlight }"
-    :showLabels="false"
-    :placeholder="placeholder"
-    tagPlaceholder="Press enter to add new tag"
-    :options="populate && activeOptions || []"
-    :customLabel="getLabelForOption"
-    :trackBy="optionValue"
-    :groupLabel="groupByLabel"
-    :groupValues="groupByOptions"
-    :multiple="multiple"
-    :taggable="taggable"
-    :searchable="searchable"
-    :internalSearch="!searchFilter"
-    :preserveSearch="!!searchFilter"
-    :clearOnSelect="!searchFilter"
-    :closeOnSelect="!stayOpen"
-    :loading="isLoading"
-    v-bind="attributes"
-    @open="onOpen"
-    @close="onClose"
-    @tag="onAddTag"
-    @search-change="onSearchChange"
-  )
-  button.dito-button-clear.dito-button-overlay(
-    v-if="showClearButton"
-    type="button"
-    :disabled="disabled"
-    @click="clear"
+  .dito-multiselect__inner
+    VueMultiselect(
+      ref="element"
+      v-model="selectedOptions"
+      :class="{ 'multiselect--show-highlight': showHighlight }"
+      :showLabels="false"
+      :placeholder="placeholder"
+      tagPlaceholder="Press enter to add new tag"
+      :options="populate && activeOptions || []"
+      :customLabel="getLabelForOption"
+      :trackBy="optionValue"
+      :groupLabel="groupByLabel"
+      :groupValues="groupByOptions"
+      :multiple="multiple"
+      :taggable="taggable"
+      :searchable="searchable"
+      :internalSearch="!searchFilter"
+      :preserveSearch="!!searchFilter"
+      :clearOnSelect="!searchFilter"
+      :closeOnSelect="!stayOpen"
+      :loading="isLoading"
+      v-bind="attributes"
+      @open="onOpen"
+      @close="onClose"
+      @tag="onAddTag"
+      @search-change="onSearchChange"
+    )
+    button.dito-button-clear.dito-button-overlay(
+      v-if="showClearButton"
+      type="button"
+      :disabled="disabled"
+      @click="clear"
+    )
+  DitoEditButtons(
+    v-if="editable"
+    :editable="editable"
+    :editPath="editPath"
+    :schema="schema"
+    :dataPath="dataPath"
+    :data="data"
+    :meta="meta"
+    :store="store"
   )
 </template>
 
@@ -218,12 +229,20 @@ $tag-padding: 3px;
 $tag-line-height: 1em;
 
 .dito-multiselect {
+  display: inline-flex;
   position: relative;
 
+  &__inner {
+    flex: 1;
+    position: relative;
+  }
+
+  // TODO: BEM
   &.dito-multiselect-single {
     --input-width: 100%;
   }
 
+  // TODO: BEM
   &.dito-multiselect-multiple {
     --input-width: auto;
   }
@@ -234,6 +253,10 @@ $tag-line-height: 1em;
     }
   }
 
+  .dito-edit-buttons {
+    margin-left: $form-spacing-half;
+  }
+
   .dito-button-clear {
     width: $spinner-width;
   }

package/src/types/DitoTypeSelect.vue

@@ -1,40 +1,51 @@
 <template lang="pug">
 //- Nesting is needed to make an arrow appear over the select item:
 .dito-select
-  select(
-    :id="dataPath"
-    ref="element"
-    v-model="selectedValue"
-    v-bind="attributes"
-    @mousedown="populate = true"
-    @focus="populate = true"
-  )
-    template(
-      v-if="populate"
+  .dito-select__inner
+    select(
+      :id="dataPath"
+      ref="element"
+      v-model="selectedValue"
+      v-bind="attributes"
+      @mousedown="populate = true"
+      @focus="populate = true"
     )
       template(
-        v-for="option in options"
+        v-if="populate"
       )
-        optgroup(
-          v-if="groupBy"
-          :label="option[groupByLabel]"
+        template(
+          v-for="option in options"
         )
+          optgroup(
+            v-if="groupBy"
+            :label="option[groupByLabel]"
+          )
+            option(
+              v-for="opt in option[groupByOptions]"
+              :value="getValueForOption(opt)"
+            ) {{ getLabelForOption(opt) }}
           option(
-            v-for="opt in option[groupByOptions]"
-            :value="getValueForOption(opt)"
-          ) {{ getLabelForOption(opt) }}
-        option(
-          v-else
-          :value="getValueForOption(option)"
-        ) {{ getLabelForOption(option) }}
-    template(
-      v-else-if="selectedOption"
+            v-else
+            :value="getValueForOption(option)"
+          ) {{ getLabelForOption(option) }}
+      template(
+        v-else-if="selectedOption"
+      )
+        option(:value="selectedValue") {{ getLabelForOption(selectedOption) }}
+    button.dito-button-clear.dito-button-overlay(
+      v-if="showClearButton"
+      :disabled="disabled"
+      @click="clear"
     )
-      option(:value="selectedValue") {{ getLabelForOption(selectedOption) }}
-  button.dito-button-clear.dito-button-overlay(
-    v-if="showClearButton"
-    :disabled="disabled"
-    @click="clear"
+  DitoEditButtons(
+    v-if="editable"
+    :editable="editable"
+    :editPath="editPath"
+    :schema="schema"
+    :dataPath="dataPath"
+    :data="data"
+    :meta="meta"
+    :store="store"
   )
 </template>
 
@@ -65,12 +76,30 @@ export default DitoTypeComponent.register('select', {
 $select-arrow-right: calc(($select-arrow-width - $select-arrow-size) / 2);
 
 .dito-select {
-  display: inline-block;
+  display: inline-flex;
   position: relative;
 
   select {
     padding-right: $select-arrow-width;
   }
+
+  &__inner {
+    flex: 1;
+    position: relative;
+
+    &::after {
+      position: absolute;
+      @include arrow($select-arrow-size);
+
+      bottom: $select-arrow-bottom;
+      right: calc(#{$select-arrow-right} + #{$border-width});
+    }
+  }
+
+  .dito-edit-buttons {
+    margin-left: $form-spacing-half;
+  }
+
   // Handle .dito-width-fill separately due to required nesting of select:
   &.dito-width-fill {
     select {
@@ -78,14 +107,6 @@ $select-arrow-right: calc(($select-arrow-width - $select-arrow-size) / 2);
     }
   }
 
-  &::after {
-    position: absolute;
-    @include arrow($select-arrow-size);
-
-    bottom: $select-arrow-bottom;
-    right: calc(#{$select-arrow-right} + #{$border-width});
-  }
-
   &.dito-disabled::after {
     border-color: $border-color;
   }