@ditojs/admin 3.2.5 → 3.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "3.2.5",
+  "version": "3.2.7",
   "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/main/packages/admin",
@@ -41,8 +41,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^3.2.0",
-    "@ditojs/utils": "^3.2.0"
+    "@ditojs/ui": "^3.2.6",
+    "@ditojs/utils": "^3.2.6"
   },
   "peerDependencies": {
     "@kyvg/vue3-notification": "^3.4.2",
@@ -87,7 +87,7 @@
     "vue-upload-component": "^3.2.2"
   },
   "devDependencies": {
-    "@ditojs/build": "^3.2.0",
+    "@ditojs/build": "^3.2.6",
     "@kyvg/vue3-notification": "^3.4.2",
     "@tiptap/core": "^3.31.4",
     "@tiptap/extension-blockquote": "^3.31.4",
@@ -131,5 +131,5 @@
     "vue-router": "^5.3.1",
     "vue-upload-component": "^3.2.2"
   },
-  "gitHead": "f149113bc95317c74b17f4af56ccfebed789c47b"
+  "gitHead": "88a3df9bbd036594e886ea6169cef3dfd4b10fe7"
 }

package/src/DitoAdmin.js

@@ -150,9 +150,10 @@ export default class DitoAdmin {
       components: {
         DitoRoot,
         VueNotifications,
-        // This may only be needed to avoid tree-shacking of these components,
-        // since they actually handle registry internally already.
-        // TODO: Remove this once we have a better solution.
+        // Registered globally too, so that the custom components of apps can
+        // use them in their templates: Unlike the admin's own components, they
+        // don't extend `DitoComponent`, which shares its registry. This also
+        // keeps the modules from being tree-shaken.
         ...components,
         ...types
       },

package/src/components/DitoButtons.vue

@@ -5,7 +5,7 @@
   template(
     v-for="(buttonSchema, buttonDataPath) in buttonSchemas"
   )
-    DitoContainer(
+    DitoContainer.dito-buttons__container(
       v-if="shouldRenderSchema(buttonSchema)"
       :key="buttonDataPath"
       :schema="buttonSchema"
@@ -21,7 +21,7 @@
   )
     //- Render each node in the default slot through `dito-vnode`,
     //- so it can be wrapped in a `.dito-container` class.
-    .dito-container(
+    .dito-container.dito-buttons__container(
       v-if="hasVNodeContent(vnode)"
     )
       DitoVnode(:vnode="vnode")
@@ -86,8 +86,7 @@ export default DitoComponent.component('DitoButtons', {
 
 <style lang="scss">
 .dito-buttons {
-  > .dito-container {
-    padding: 0;
-  }
+  // The containers of the buttons don't add padding around them.
+  --container-padding: 0px;
 }
 </style>

package/src/components/DitoCreateButton.vue

@@ -159,6 +159,7 @@ export default DitoComponent.component('DitoCreateButton', {
   .dito-pulldown {
     right: 0;
 
+    // TODO: BEM: Use a modifier of this block for sticky button groups.
     .dito-buttons--sticky & {
       top: unset;
       right: unset;

package/src/components/DitoDialog.vue

@@ -8,7 +8,7 @@
   @mouseup="onMouseUp"
 )
   UseFocusTrap.dito-dialog__focus-trap(:options="focusTrapOptions")
-    form.dito-scroll-parent(
+    form.dito-dialog__form.dito-scroll-parent(
       @submit.prevent="submit"
       @keydown.enter="onEnter"
     )
@@ -209,6 +209,8 @@ export default DitoComponent.component('DitoDialog', {
 @import '../styles/_imports';
 
 .dito-dialog {
+  $self: &;
+
   position: fixed;
   display: flex;
   inset: 0;
@@ -231,8 +233,7 @@ export default DitoComponent.component('DitoDialog', {
     order: -1;
   }
 
-  // TODO: `&__inner`
-  form {
+  &__form {
     position: relative;
     display: flex;
     box-sizing: border-box;
@@ -242,23 +243,23 @@ export default DitoComponent.component('DitoDialog', {
     max-height: 100%;
     box-shadow: 0 20px 60px -2px rgb(27, 33, 58, 0.4);
   }
-}
 
-.dito-dialog-enter-active,
-.dito-dialog-leave-active {
-  transition: opacity 0.15s;
+  &-enter-active,
+  &-leave-active {
+    transition: opacity 0.15s;
 
-  form {
-    transition: transform 0.25s;
+    #{$self}__form {
+      transition: transform 0.25s;
+    }
   }
-}
 
-.dito-dialog-enter-from,
-.dito-dialog-leave-to {
-  opacity: 0;
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
 
-  form {
-    transform: translateY(-20px);
+    #{$self}__form {
+      transform: translateY(-20px);
+    }
   }
 }
 </style>

package/src/components/DitoForm.vue

@@ -311,8 +311,6 @@ export default DitoComponent.component('DitoForm', {
         if (
           param &&
           this.providesData &&
-          // TODO: See if we can remove this due to `flush: 'post'`.
-          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
         ) {

package/src/components/DitoLabel.vue

@@ -152,6 +152,7 @@ export default DitoComponent.component('DitoLabel', {
     transform: translateY(-4px);
   }
 
+  // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
   .dito-buttons {
     // Move the label padding inside .dito-buttons, so that it captures all
     // near mouse events:

package/src/components/DitoPane.vue

@@ -349,6 +349,7 @@ export default DitoComponent.component('DitoPane', {
       }
     }
 
+    // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
     &__main + .dito-buttons--main {
       // Needed forms with sticky main buttons.
       margin: $content-padding;

package/src/components/DitoPanel.vue

@@ -244,6 +244,7 @@ export default DitoComponent.component('DitoPanel', {
       }
     }
 
+    // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
     .dito-buttons {
       position: absolute;
       right: $input-padding-ver;
@@ -266,6 +267,7 @@ export default DitoComponent.component('DitoPanel', {
         padding: 0;
       }
 
+      // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
       > .dito-buttons {
         --button-margin: #{$form-spacing};
 

package/src/components/DitoSchema.vue

@@ -975,6 +975,7 @@ function compareByDocumentPosition(component1, component2) {
     margin-bottom: 0;
   }
 
+  // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
   > .dito-buttons {
     margin-left: var(--button-margin, 0);
   }

package/src/components/DitoTreeItem.vue

@@ -97,6 +97,7 @@
       :draggable="childrenDraggable"
       :label="getItemLabel(childrenSchema, item.data, { index })"
       :level="level + 1"
+      @delete="deleteChild(index)"
     )
     //- TODO: Convert dito-tree-item to use dito-label internally, and then
     //- pass `asObject: true` in the `getItemLabel()` call above.
@@ -115,7 +116,7 @@ import { stripHtml } from '@ditojs/utils'
 // @vue/component
 export default DitoComponent.component('DitoTreeItem', {
   mixins: [ItemMixin, SortableMixin],
-  emits: ['update:data'],
+  emits: ['update:data', 'delete'],
   inject: ['container'],
 
   props: {
@@ -302,8 +303,56 @@ export default DitoComponent.component('DitoTreeItem', {
       this.editPath(this.path)
     },
 
+    // Items are removed from the children of their parent, see
+    // `deleteChild()`.
     onDelete() {
-      // TODO: Implement!
+      this.$emit('delete')
+    },
+
+    // Removes the child after confirming it, like inlined lists do. Open forms
+    // of the child or of its later siblings are closed, as the removal shifts
+    // the indices in their paths. The removal is transient, as the tree is
+    // part of its form's data.
+    deleteChild(index) {
+      const { childrenSchema, container } = this
+      const item = this.childrenList[index]
+      const label = this.getItemLabel(childrenSchema, item, {
+        index,
+        extended: true
+      })
+      if (
+        window.confirm(`Do you really want to ${this.verbs.delete} ${label}?`)
+      ) {
+        if (this.isEditingChildFrom(index)) {
+          this.$router.push({
+            path: container.path,
+            query: this.$route.query
+          })
+        }
+        this.childrenList = this.childrenList.toSpliced(index, 1)
+        this.onChange()
+        this.notify({
+          type: 'info',
+          title: 'Successfully Removed',
+          text: [`${label} was ${this.verbs.deleted}.`, container.transientNote]
+        })
+      }
+    },
+
+    // Returns whether the form of a child at the index or after it is open,
+    // or the form of one of their own children.
+    isEditingChildFrom(index) {
+      const childrenPath = this.childrenSchema.path
+      if (!childrenPath) {
+        return false
+      }
+      const prefix = `${this.path}/${childrenPath}/`
+      const { editPath } = this.container
+      if (!editPath.startsWith(prefix)) {
+        return false
+      }
+      const [childIndex] = editPath.slice(prefix.length).split('/')
+      return Number(childIndex) >= index
     },
 
     onChange() {
@@ -391,6 +440,7 @@ export default DitoComponent.component('DitoTreeItem', {
     color: rgba($color-black, 0.2);
   }
 
+  // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
   .dito-buttons {
     flex: auto;
     display: flex;

package/src/mixins/OptionsMixin.js

@@ -5,6 +5,7 @@ import { getMultipleValue } from '../utils/schema/data.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { setTemporaryId, isReference } from '../utils/data.js'
 import {
+  asArray,
   isObject,
   isArray,
   isString,
@@ -46,7 +47,12 @@ export default {
           if (!this.relate) {
             return value
           }
-          const option = this.getOptionForValue(value)
+          // Keep related objects without options, see
+          // `DitoTypeMultiselect.getFallbackOption()`.
+          const option = (
+            this.getOptionForValue(value) ??
+            this.getRelatedObject(value)
+          )
           if (this.shouldSetTemporaryId(option)) {
             // Options without ids, e.g. new items of the edited data, get
             // temporary ids when selected, so that the relation can reference
@@ -325,6 +331,14 @@ export default {
         : value
     },
 
+    // Returns the related object in the value with the given value of its
+    // option, e.g. its id.
+    getRelatedObject(value) {
+      return asArray(this.value).find(
+        object => this.getValueForOption(object) === value
+      )
+    },
+
     getValueForOption(option) {
       if (this.shouldSetTemporaryId(option)) {
         // Until they're selected and get temporary ids, options without ids

package/src/mixins/ResourceMixin.js

@@ -26,6 +26,12 @@ export default {
   },
 
   computed: {
+    // Whether the component is part of a form, e.g. a list that loads its own
+    // data, unlike forms and the lists of views.
+    isInsideForm() {
+      return !this.isForm && !!this.formComponent
+    },
+
     resourceComponent() {
       return this
     },
@@ -215,9 +221,15 @@ export default {
               this.onFilterErrors?.(data.errors)
             ) {
               return true
-            } else if (this.isUnauthorizedError(response)) {
-              // TODO: Can we really swallow these errors?
-              // Is calling `ensureUser()` in `onBeforeRequest()` enough?
+            } else if (
+              this.isUnauthorizedError(response) &&
+              this.isInsideForm
+            ) {
+              // The user is logged in, see `sendRequest()`, but may not access
+              // the resource of a component in a form, e.g. a list that loads
+              // its own data. Show it on the component, as several components
+              // of the form may be affected. Others notify like for errors.
+              this.addUnauthorizedError()
               return true
             }
           }
@@ -242,6 +254,13 @@ export default {
       return response?.status === 401
     },
 
+    addUnauthorizedError() {
+      const error = `You don't have permission to load this data.`
+      if (!this.errors?.includes(error)) {
+        this.addError(error)
+      }
+    },
+
     async handleRequest(
       {
         method,

package/src/styles/_button.scss

@@ -109,10 +109,53 @@
       cursor: grabbing;
     }
   }
+
+  .dito-buttons--large & {
+    border-radius: 2em;
+    padding: $button-round-padding;
+  }
+
+  // Buttons in round and small button groups show icons instead of text.
+  // For now, nothing for create: &--create:empty::before
+  .dito-buttons--round &,
+  .dito-buttons--small & {
+    &--add:empty::before {
+      @extend %icon-add;
+    }
+
+    &--upload:empty::before {
+      @extend %icon-upload;
+    }
+
+    &--delete:empty::before,
+    &--remove:empty::before {
+      @extend %icon-remove;
+    }
+
+    &--edit:empty::before {
+      @extend %icon-edit;
+    }
+
+    &--clear:empty::before {
+      @extend %icon-clear;
+    }
+
+    &--drag:empty::before {
+      @extend %icon-drag;
+    }
+
+    &--copy:empty::before {
+      @extend %icon-copy;
+    }
+
+    &--paste:empty::before {
+      @extend %icon-paste;
+    }
+  }
 }
 
 .dito-buttons {
-  // TODO: BEM
+  $self: &;
 
   &--large {
     --button-margin: 3px;
@@ -122,15 +165,10 @@
     justify-content: center;
     padding-bottom: $content-padding;
 
-    .dito-container {
+    #{$self}__container {
       // Do not specify this on .dito-buttons directly as it would break borders
       margin-top: $content-padding;
     }
-
-    .dito-button {
-      border-radius: 2em;
-      padding: $button-round-padding;
-    }
   }
 
   &--main {
@@ -152,43 +190,4 @@
       display: none;
     }
   }
-
-  &--round,
-  &--small {
-    // For now, nothing for create:
-    // .dito-button--create:empty::before
-
-    .dito-button--add:empty::before {
-      @extend %icon-add;
-    }
-
-    .dito-button--upload:empty::before {
-      @extend %icon-upload;
-    }
-
-    .dito-button--delete:empty::before,
-    .dito-button--remove:empty::before {
-      @extend %icon-remove;
-    }
-
-    .dito-button--edit:empty::before {
-      @extend %icon-edit;
-    }
-
-    .dito-button--clear:empty::before {
-      @extend %icon-clear;
-    }
-
-    .dito-button--drag:empty::before {
-      @extend %icon-drag;
-    }
-
-    .dito-button--copy:empty::before {
-      @extend %icon-copy;
-    }
-
-    .dito-button--paste:empty::before {
-      @extend %icon-paste;
-    }
-  }
 }

package/src/types/DitoTypeCode.vue

@@ -47,10 +47,10 @@ export default DitoTypeComponent.register('code', {
       default: false
     }),
 
+    // The height of the lines is set through `--lines` and the styles, which
+    // add the padding, unless the editor was resized to a height of its own.
     style() {
-      return {
-        height: this.height || `calc(${this.lines}em * var(--line-height))`
-      }
+      return this.height ? { height: this.height } : { '--lines': this.lines }
     }
   },
 
@@ -175,6 +175,9 @@ export default DitoTypeComponent.register('code', {
   // For proper sizing of content along with :style="style" setting above,
   // for proper line-height calculation.
   padding: $input-padding;
+  height: calc(
+    var(--lines) * 1em * var(--line-height) + 2 * #{$input-padding-ver}
+  );
   min-height: calc(1em * var(--line-height) + 2 * $input-padding-ver);
 
   .codeflask {

package/src/types/DitoTypeMarkup.vue

@@ -613,6 +613,7 @@ const LinkWithTitle = Link.extend({
     padding-right: $input-padding-hor;
   }
 
+  // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
   .dito-buttons--toolbar {
     margin: 0;
   }

package/src/types/DitoTypeMultiselect.vue

@@ -37,6 +37,21 @@
       @tag="onAddTag"
       @search-change="onSearchChange"
     )
+      //- The default tag, which marks values without options.
+      template(#tag="{ option, remove }")
+        span.multiselect__tag.dito-multiselect__tag(
+          :class=`{
+            'dito-multiselect__tag--unavailable': isUnavailableOption(option)
+          }`
+          :title="isUnavailableOption(option) ? 'Not among the options' : null"
+          @mousedown.prevent
+        )
+          span {{ getLabelForOption(option) }}
+          i.multiselect__tag-icon(
+            tabindex="1"
+            @keydown.enter.prevent="remove(option)"
+            @mousedown.prevent="remove(option)"
+          )
     DitoAffixes(
       :items="schema.suffix"
       position="suffix"
@@ -70,7 +85,7 @@ import OptionsMixin from '../mixins/OptionsMixin.js'
 import DitoAffixes from '../components/DitoAffixes.vue'
 import VueMultiselect from 'vue-multiselect'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { isBoolean } from '@ditojs/utils'
+import { isArray, isBoolean, isObject, isString } from '@ditojs/utils'
 
 // @vue/component
 export default DitoTypeComponent.register('multiselect', {
@@ -90,18 +105,22 @@ export default DitoTypeComponent.register('multiselect', {
   computed: {
     selectedOptions: {
       get() {
+        // Values without options stay visible once the options are loaded,
+        // and are kept when the selection changes, see `getFallbackOption()`,
+        // unless the multiselect is taggable and can add them as options.
         return this.multiple
-          ? (this.selectedValue || [])
-              .map(
-                // If an option cannot be found, we may be in taggable mode and
-                // can add it.
-                value => (
-                  this.getOptionForValue(value) || this.addTagOption(value)
+          ? this.hasOptions && isArray(this.value)
+            ? this.value.map(value => {
+                const selectedValue = this.relate
+                  ? this.getValueForOption(value)
+                  : value
+                return (
+                  this.getOptionForValue(selectedValue) ||
+                  this.addTagOption(selectedValue) ||
+                  this.getFallbackOption(value)
                 )
-              )
-              // Filter out options that we couldn't match.
-              // TODO: Should we display an error instead?
-              .filter(Boolean)
+              })
+            : []
           : this.selectedOption
       },
 
@@ -196,6 +215,27 @@ export default DitoTypeComponent.register('multiselect', {
       }
     },
 
+    // Returns whether the option is a fallback option for a value without
+    // one, see `getFallbackOption()`. Plain options are their own values.
+    isUnavailableOption(option) {
+      return this.optionValue
+        ? !this.getOptionForValue(this.getValueForOption(option))
+        : !this.options.includes(option)
+    },
+
+    // Returns an option for a value without one, e.g. of options that only
+    // hold the results of searches: Related objects are their own options,
+    // other values get an option that holds them as value and label.
+    getFallbackOption(value) {
+      const { optionValue, optionLabel } = this
+      return isObject(value) || !isString(optionValue)
+        ? value
+        : {
+            [optionValue]: value,
+            ...(isString(optionLabel) && { [optionLabel]: `${value}` })
+          }
+    },
+
     focusElement() {
       this.$refs.element.activate()
     },
@@ -289,6 +329,16 @@ $tag-line-height: 1em;
   display: inline-flex;
   position: relative;
 
+  &__tag {
+    color: $color-text-inverted;
+    background: $color-active;
+
+    // Values without options, see `getFallbackOption()`.
+    &--unavailable {
+      background: $color-grey;
+    }
+  }
+
   &__inner {
     flex: 1;
     position: relative;
@@ -463,11 +513,6 @@ $tag-line-height: 1em;
       }
     }
 
-    &__tag {
-      color: $color-text-inverted;
-      background: $color-active;
-    }
-
     &__tag-icon {
       background: none;
       border-radius: 1em;

package/src/types/DitoTypeTreeList.vue

@@ -6,7 +6,9 @@
     :scopes="scopes"
   )
   .dito-tree-panel
+    //- Objects that are `null` have no tree, as tree items can't create them.
     DitoTreeItem(
+      v-if="treeData"
       :schema="treeSchema"
       :dataPath="treeDataPath"
       :data="treeData"

package/src/utils/DataSchemaResolver.js

@@ -17,7 +17,7 @@ import {
 //   e.g. `data: ({ item: { id } }) => async () => load(id)`, so that loading
 //   only starts again when these dependencies change.
 // - `dataPath` is resolved relative to the data path of the context, in its
-//   root data, e.g. `'../fontFamily/fontShopSets'`.
+//   root data, e.g. `'../author/books'`.
 // - Data schemas that aren't objects are values, e.g. `options: ['A', 'B']`.
 //
 // While a value is loading, `value` is `undefined` and `isLoading` is `true`.

package/src/utils/options.js

@@ -44,8 +44,8 @@ const ditoOptionKeys = [
   'processSchema',
   'getPanelSchema',
   'getFormSchemasForProcessing',
-  // Vue 3 / Vue-router 4 forgets these.
-  // TODO: Create bug-report?
+  // vue-router reads route guards from the raw component options, without
+  // their mixins, see `extractComponentsGuards()` in its `navigationGuards.ts`.
   'beforeRouteUpdate',
   'beforeRouteLeave'
 ]