@ditojs/admin 2.71.1 → 2.73.0

package/src/components/DitoMenu.vue

@@ -3,20 +3,19 @@ ul.dito-menu(
   v-resize="onResize"
   :style="{ '--width': width ? `${width}px` : null }"
 )
-  li(
+  li.dito-menu__item(
     v-for="item in items"
   )
     template(
       v-if="shouldShowItem(item)"
     )
-      a.dito-link(
+      a.dito-menu__link(
         :href="getItemHref(item)"
-        :class="getItemClass(item, 'dito-sub-menu-link')"
+        :class="{ 'dito-menu__link--active': isActiveItem(item) }"
         @click.prevent.stop="onClickItem(item)"
       ) {{ getLabel(item) }}
-      DitoMenu(
+      DitoMenu.dito-menu__sub(
         v-if="item.items"
-        :class="getItemClass(item, 'dito-sub-menu')"
         :items="item.items"
         :path="getItemPath(item, false)"
       )
@@ -60,13 +59,6 @@ export default DitoComponent.component('DitoMenu', {
       }
     },
 
-    getItemClass(item, subMenuClass) {
-      return {
-        [subMenuClass]: !!item.items,
-        'dito-active': this.isActiveItem(item)
-      }
-    },
-
     getItemPath(item, firstChild) {
       const path = item.path ? `${this.path}/${item.path}` : null
       return firstChild && path && item.items
@@ -101,20 +93,24 @@ export default DitoComponent.component('DitoMenu', {
 @import '../styles/_imports';
 
 .dito-menu {
+  $self: &;
   $item-height: $menu-font-size + 2 * $menu-padding-ver;
 
+  --menu-active-color: #{$color-white};
+  --menu-active-background: #{$color-active};
+
   border-right: $border-style;
   padding: 0 $menu-spacing;
 
-  li {
-    &:has(.dito-sub-menu:not(.dito-active)) {
+  &__item {
+    &:has(#{$self}__sub):not(:has(#{$self}__link--active)) {
       // Pop-out sub-menus on hover:
       &:hover {
-        .dito-sub-menu-link {
+        > #{$self}__link {
           background: $color-lightest;
         }
 
-        .dito-sub-menu {
+        #{$self}__sub {
           display: block;
           position: absolute;
           width: var(--width);
@@ -122,8 +118,8 @@ export default DitoComponent.component('DitoMenu', {
           transform: translateX(calc(var(--width) + 2 * $menu-spacing))
             translateY(-$item-height);
 
-          li:first-child {
-            .dito-link {
+          #{$self}__item:first-child {
+            #{$self}__link {
               margin-top: 0;
             }
           }
@@ -140,22 +136,21 @@ export default DitoComponent.component('DitoMenu', {
           }
         }
 
-        // .dito-sub-menu-link,
-        .dito-sub-menu {
+        #{$self}__sub {
           box-shadow: $shadow-window;
         }
       }
     }
   }
 
-  .dito-link {
+  &__link {
     display: block;
     padding: $menu-padding;
     line-height: $menu-line-height;
     border-radius: $border-radius;
     margin-top: $menu-spacing;
 
-    &:focus:not(:active, .dito-active) {
+    &:focus:not(:active, &--active) {
       box-shadow: $shadow-focus;
     }
 
@@ -163,28 +158,29 @@ export default DitoComponent.component('DitoMenu', {
       background: rgb(255, 255, 255, 0.5);
     }
 
-    &.dito-active {
-      color: $color-white;
-      background: $color-active;
-    }
-  }
+    &--active {
+      &,
+      &:hover {
+        color: var(--menu-active-color);
+        background: var(--menu-active-background);
+      }
 
-  .dito-sub-menu-link {
-    &.dito-active {
-      background: color.adjust($color-active, $alpha: -0.3);
+      &:has(+ #{$self}__sub) {
+        --menu-active-background: #{color.adjust($color-active, $alpha: -0.3)};
+      }
     }
   }
 
-  .dito-sub-menu {
+  &__sub {
     display: none;
     border-right: 0;
     padding: 0;
     border-radius: $border-radius;
     background: $color-lightest;
+  }
 
-    &.dito-active {
-      display: block;
-    }
+  &__link--active + &__sub {
+    display: block;
   }
 }
 </style>

package/src/components/DitoPagination.vue

@@ -7,7 +7,7 @@ Pagination(
 </template>
 
 <script>
-import { Pagination } from '@ditojs/ui/src'
+import { DitoPagination as Pagination } from '@ditojs/ui/src'
 import DitoComponent from '../DitoComponent.js'
 
 // @vue/component

package/src/components/DitoPane.vue

@@ -14,9 +14,9 @@
       store
     }, index in componentSchemas`
   )
-    //- Use <span> for .dito-break so we can use `.dito-container:first-of-type`
-    //- selector.
-    span.dito-break(
+    //- Use <span> for .dito-pane__break so we can use the
+    //- `.dito-container:first-of-type` selector.
+    span.dito-pane__break(
       v-if="['before', 'both'].includes(schema.break)"
     )
     DitoContainer(
@@ -32,11 +32,12 @@
       :single="isSingleComponent"
       :nested="nested"
       :disabled="disabled"
+      :compact="compact"
       :generateLabels="generateLabels"
       :verticalLabels="isInLabeledRow(index)"
       :accumulatedBasis="accumulatedBasis"
     )
-    span.dito-break(
+    span.dito-pane__break(
       v-if="['after', 'both'].includes(schema.break)"
     )
 </template>
@@ -67,6 +68,7 @@ export default DitoComponent.component('DitoPane', {
     padding: { type: String, default: null },
     single: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
+    compact: { type: Boolean, default: false },
     generateLabels: { type: Boolean, default: false },
     accumulatedBasis: { type: Number, default: null }
   },
@@ -261,7 +263,7 @@ export default DitoComponent.component('DitoPane', {
   margin: -$form-spacing-half;
   padding: var(--pane-padding);
   // Use `flex: 0%` for all `.dito-pane` except `.dito-pane__main`,
-  // so that the `.dito-buttons-main` can be moved all the way to the bottom.
+  // so that the `.dito-buttons--main` can be moved all the way to the bottom.
   flex: 0%;
 
   &__main {
@@ -299,7 +301,7 @@ export default DitoComponent.component('DitoPane', {
       }
     }
 
-    &__main + .dito-buttons-main {
+    &__main + .dito-buttons--main {
       // Needed forms with sticky main buttons.
       margin: $content-padding;
       margin-bottom: 0;
@@ -319,8 +321,8 @@ export default DitoComponent.component('DitoPane', {
     }
   }
 
-  .dito-break {
-    // `.dito-break` is rendered as <span> so we can use the
+  &__break {
+    // `&_break` is rendered as <span> so we can use the
     // `.dito-container:first-of-type` selector to match the first container
     // even if it has a break before it.
     display: block;

package/src/components/DitoPanel.vue

@@ -18,10 +18,10 @@ component.dito-panel(
     :hasOwnData="hasOwnData"
     generateLabels
   )
-    template(#before)
+    template(#prepend)
       h2.dito-panel__header(:class="{ 'dito-panel__header--sticky': sticky }")
         span {{ getLabel(schema) }}
-        DitoButtons.dito-buttons-small(
+        DitoButtons.dito-buttons--small(
           :buttons="panelButtonSchemas"
           :dataPath="panelDataPath"
           :data="panelData"

package/src/components/DitoSchema.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-slot(name="before")
+slot(name="prepend")
 .dito-schema(
   :class="{ 'dito-scroll-parent': scrollable, 'dito-schema--open': opened }"
   v-bind="$attrs"
@@ -74,6 +74,7 @@ slot(name="before")
             :padding="padding"
             :single="!inlined && !hasMainPane"
             :disabled="disabled"
+            :compact="compact"
             :generateLabels="generateLabels"
             :accumulatedBasis="accumulatedBasis"
           )
@@ -88,6 +89,7 @@ slot(name="before")
         :padding="padding"
         :single="!inlined && !hasTabs"
         :disabled="disabled"
+        :compact="compact"
         :generateLabels="generateLabels"
         :accumulatedBasis="accumulatedBasis"
       )
@@ -99,7 +101,7 @@ slot(name="before")
     v-if="inlined && !hasHeader"
     name="edit-buttons"
   )
-slot(name="after")
+slot(name="append")
 </template>
 
 <script>
@@ -158,6 +160,7 @@ export default DitoComponent.component('DitoSchema', {
     active: { type: Boolean, default: true },
     inlined: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
+    compact: { type: Boolean, default: false },
     collapsed: { type: Boolean, default: false },
     collapsible: { type: Boolean, default: false },
     scrollable: { type: Boolean, default: false },

package/src/components/DitoSchemaInlined.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 DitoSchema.dito-schema-inlined(
-  :class="{ 'dito-schema-compact': isCompact }"
   :schema="schema"
   :dataPath="dataPath"
   :data="data"
@@ -10,6 +9,7 @@ DitoSchema.dito-schema-inlined(
   :padding="padding ?? 'inlined'"
   :inlined="true"
   :disabled="disabled"
+  :compact="isCompact"
   :collapsed="collapsed"
   :collapsible="collapsible"
   :generateLabels="!isCompact"

package/src/components/DitoScopes.vue

@@ -9,7 +9,7 @@
   )
     button.dito-button(
       type="button"
-      :class="{ 'dito-selected': scope.name === query.scope }"
+      :class="{ 'dito-button--selected': scope.name === query.scope }"
       :title="scope.hint || getLabel(scope)"
       @click="navigate"
     ) {{ getLabel(scope) }}

package/src/components/DitoTableHead.vue

@@ -19,7 +19,7 @@ thead.dito-table-head
             :class="getSortClass(column)"
             @click="navigate"
           )
-            .dito-order-arrows
+            .dito-button__order-arrows
             span {{ getLabel(column) }}
         span(
           v-else
@@ -55,12 +55,12 @@ export default DitoComponent.component('DitoTableHead', {
 
   methods: {
     getColumnClass(column) {
-      return `dito-column-${hyphenate(column.name)}`
+      return `dito-column--${hyphenate(column.name)}`
     },
 
     getSortClass(column) {
       return this.sort.name === column.name
-        ? `dito-selected dito-order-${this.sort.order}`
+        ? `dito-button--selected dito-button--order-${this.sort.order}`
         : null
     },
 

package/src/components/DitoTabs.vue

@@ -3,10 +3,10 @@
   template(
     v-for="(tabSchema, key) in tabs"
   )
-    a.dito-link(
+    a.dito-tabs__link(
       v-if="shouldRenderSchema(tabSchema)"
       :key="key"
-      :class="{ 'dito-active': modelValue === key }"
+      :class="{ 'dito-tabs__link--active': modelValue === key }"
       @click="$emit('update:modelValue', key)"
     ) {{ getLabel(tabSchema, key) }}
 </template>
@@ -31,7 +31,7 @@ export default DitoComponent.component('DitoTabs', {
 .dito-tabs {
   display: flex;
 
-  .dito-link {
+  &__link {
     @include user-select(none);
 
     display: block;
@@ -53,7 +53,7 @@ export default DitoComponent.component('DitoTabs', {
         background: $color-lightest;
       }
 
-      &.dito-active {
+      &--active {
         background: $color-lightest;
       }
     }
@@ -81,7 +81,7 @@ export default DitoComponent.component('DitoTabs', {
         background: $color-lighter;
       }
 
-      &.dito-active {
+      &--active {
         background: $color-active;
         border-color: color.adjust($color-active, $lightness: -10%);
         color: $color-white;

package/src/components/DitoTrail.vue

@@ -4,12 +4,14 @@
     li(
       v-for="component in trail"
     )
-      a.dito-link(
-        :class="getLinkClass(component)"
+      a.dito-trail__link(
+        :class="{ 'dito-trail__link--active': component.path === $route.path }"
         :href="getComponentHref(component)"
         @click.prevent.stop="onClickComponent(component)"
       )
-        span(:class="getSpanClass(component)")
+        span.dito-trail__text(
+          :class="{ 'dito-trail__text--dirty': component.isDirty }"
+        )
           | {{ component.breadcrumb }}
   slot
 </template>
@@ -45,18 +47,6 @@ export default DitoComponent.component('DitoTrail', {
         path: this.getComponentPath(component),
         force: true
       })
-    },
-
-    getLinkClass(component) {
-      return {
-        'dito-active': component.path === this.$route.path
-      }
-    },
-
-    getSpanClass(component) {
-      return {
-        'dito-dirty': component.isDirty
-      }
     }
   }
 })
@@ -66,6 +56,8 @@ export default DitoComponent.component('DitoTrail', {
 @import '../styles/_imports';
 
 .dito-trail {
+  $self: &;
+
   display: flex;
   box-sizing: border-box;
   height: 3em;
@@ -78,18 +70,31 @@ export default DitoComponent.component('DitoTrail', {
     white-space: nowrap;
   }
 
-  a {
+  &__link {
     position: relative;
     display: block;
 
     &:hover {
-      span {
+      #{$self}__text {
         color: $color-light;
       }
     }
   }
 
-  li:not(:last-child) a {
+  &__text--dirty {
+    &::after {
+      content: '';
+      display: inline-block;
+      background-color: $color-white;
+      width: 8px;
+      height: 8px;
+      margin: 2px;
+      margin-left: 0.5em;
+      border-radius: 100%;
+    }
+  }
+
+  li:not(:last-child) &__link {
     $angle: 33deg;
 
     &::before,

package/src/components/DitoTreeItem.vue

@@ -2,8 +2,8 @@
 .dito-tree-item(
   :id="dataPath"
   :class=`{
-    'dito-dragging': isDragging,
-    'dito-active': active
+    'dito-tree-item--dragging': isDragging,
+    'dito-tree-item--active': active
   }`
   :style="level > 0 && { '--level': level }"
   :data-path="path"
@@ -17,7 +17,7 @@
     )
       .dito-chevron(
         v-if="numEntries"
-        :class="{ 'dito-open': opened }"
+        :class="{ 'dito-chevron--open': opened }"
       )
       .dito-tree-label(
         v-html="label"
@@ -31,7 +31,7 @@
       .dito-tree-label(
         v-html="label"
       )
-    .dito-buttons.dito-buttons-small(
+    .dito-buttons.dito-buttons--small(
       v-if="hasEditButtons"
     )
       //- Firefox doesn't like <button> here, so use <a> instead:
@@ -294,7 +294,7 @@ export default DitoComponent.component('DitoTreeItem', {
       SortableMixin.methods.onEndDrag.call(this, event)
       const { item } = event
       // Preserve active state of edited sub-items, by editing their new path.
-      if (item.classList.contains('dito-active')) {
+      if (item.classList.contains('dito-tree-item--active')) {
         this.$nextTick(() => {
           this.editPath(event.item.dataset.path)
         })
@@ -315,7 +315,7 @@ export default DitoComponent.component('DitoTreeItem', {
     > .dito-tree-leaf {
       // Use `--level` CSS variable to calculated the accumulated indent
       // padding directly instead of having it accumulate in nested CSS.
-      // This way, we can keep the .dito-active area cover the full width:
+      // This way, we can keep the &--active area cover the full width:
       padding-left: calc(var(--chevron-indent) * (var(--level, 1) - 1));
     }
   }
@@ -361,7 +361,7 @@ export default DitoComponent.component('DitoTreeItem', {
     } // Hide buttons during dragging
   }
 
-  &.dito-dragging {
+  &--dragging {
     .dito-tree-header {
       > .dito-buttons {
         visibility: hidden;
@@ -369,7 +369,7 @@ export default DitoComponent.component('DitoTreeItem', {
     }
   }
 
-  &.dito-active {
+  &--active {
     > .dito-tree-header {
       background: $color-active;
       padding: 0 $input-padding-hor;

package/src/components/index.js

@@ -12,7 +12,6 @@ export { default as DitoNotifications } from './DitoNotifications.vue'
 export { default as DitoSidebar } from './DitoSidebar.vue'
 export { default as DitoAccount } from './DitoAccount.vue'
 export { default as DitoDialog } from './DitoDialog.vue'
-export { default as DitoElement } from './DitoElement.vue'
 export { default as DitoLabel } from './DitoLabel.vue'
 export { default as DitoSchema } from './DitoSchema.vue'
 export { default as DitoSchemaInlined } from './DitoSchemaInlined.vue'
@@ -38,4 +37,6 @@ export { default as DitoTableCell } from './DitoTableCell.vue'
 export { default as DitoUploadFile } from './DitoUploadFile.vue'
 export { default as DitoDraggable } from './DitoDraggable.vue'
 export { default as DitoSpinner } from './DitoSpinner.vue'
+export { default as DitoAffix } from './DitoAffix.vue'
+export { default as DitoAffixes } from './DitoAffixes.vue'
 export { default as DitoVNode } from './DitoVNode.vue'

package/src/mixins/DitoMixin.js

@@ -278,7 +278,7 @@ export default {
 
     getButtonAttributes(verb) {
       return {
-        class: `dito-button-${verb}`,
+        class: `dito-button--${verb}`,
         title: labelize(verb)
       }
     },

package/src/mixins/EmitterMixin.js

@@ -91,6 +91,7 @@ export default {
             const entry = queue.shift()
             if (entry) {
               let result
+              const errors = []
               for (const callback of callbacks) {
                 try {
                   const res = await callback.apply(this, entry.args)
@@ -98,15 +99,20 @@ export default {
                     result = res
                   }
                 } catch (error) {
-                  console.error(
-                    `Error during event handler for '${event}':`,
-                    error
-                  )
+                  errors.push(error)
                 }
               }
-              // Resolve the promise that was added to the queue for the event
-              // that was just completed by the wrapper that called `next()`
-              entry.resolve(result)
+              if (errors.length > 0) {
+                const error = new AggregateError(
+                  errors,
+                  `Errors during event handler for '${event}'`
+                )
+                entry.resolve(Promise.reject(error))
+              } else {
+                // Resolve the promise that was added to the queue for the event
+                // that was just completed by the wrapper that called `next()`
+                entry.resolve(result)
+              }
               next()
             }
           }

package/src/mixins/SortableMixin.js

@@ -11,7 +11,7 @@ export default {
       const prefix = 'dito-draggable'
       return {
         animation: 150,
-        handle: '.dito-button-drag',
+        handle: '.dito-button--drag',
         dragClass: `${prefix}__drag`,
         chosenClass: `${prefix}__chosen`,
         ghostClass: `${prefix}__ghost`,