@ditojs/admin 2.72.0 → 2.73.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.72.0",
+  "version": "2.73.0",
   "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",
@@ -42,8 +42,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.72.0",
-    "@ditojs/utils": "^2.72.0",
+    "@ditojs/ui": "^2.73.0",
+    "@ditojs/utils": "^2.73.0",
     "@kyvg/vue3-notification": "^3.4.2",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^3.15.3",
@@ -89,9 +89,9 @@
     "vue-upload-component": "^3.1.17"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.72.0",
+    "@ditojs/build": "^2.73.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"
   },
-  "gitHead": "6af5f5bad3ff155436e4344d9c422933ff5ee7d8"
+  "gitHead": "0afe5ac938419c584db685cddcbd8974ee000d7e"
 }

package/src/DitoContext.js

@@ -276,6 +276,14 @@ export default class DitoContext {
     return get(this, 'wasNotified', false)
   }
 
+  get isRunning() {
+    return get(this, 'isRunning', false)
+  }
+
+  set isRunning(value) {
+    set(this, 'isRunning', value)
+  }
+
   // Helper Methods
 
   get request() {

package/src/components/DitoAffix.vue

@@ -0,0 +1,56 @@
+<template lang="pug">
+component(
+  v-if="item.type === 'text'"
+  :is="item.as || 'span'"
+) {{ item.text }}
+component(
+  v-else-if="item.type === 'html'"
+  :is="item.as || 'span'"
+  v-html="item.html"
+)
+DitoSpinner(
+  v-else-if="item.type === 'spinner'"
+  :size="item.size"
+  :color="item.color"
+)
+DitoIcon(
+  v-else-if="item.type === 'icon'"
+  :name="item.name"
+  :disabled="item.disabled"
+)
+component(
+  v-else-if="item.type === 'component'"
+  :is="item.component"
+  v-bind="item.props"
+)
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import DitoSpinner from './DitoSpinner.vue'
+import { DitoIcon } from '@ditojs/ui/src'
+
+export default DitoComponent.component('DitoAffix', {
+  components: { DitoSpinner, DitoIcon },
+
+  props: {
+    item: { type: Object, required: true },
+    parentContext: { type: Object, required: true }
+  },
+
+  computed: {
+    // Override DitoMixin's context with the parent's context
+    context() {
+      return this.parentContext
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.dito-affix {
+  &--text {
+    display: inline-block;
+  }
+}
+</style>

package/src/components/DitoAffixes.vue

@@ -0,0 +1,82 @@
+<template lang="pug">
+.dito-affixes(
+  v-if="visibleItems.length > 0"
+)
+  DitoAffix.dito-affix(
+    v-for="(item, index) in visibleItems"
+    :key="index"
+    :class="[`dito-affix--${item.type}`, item.class]"
+    :style="item.style"
+    :item="item"
+    :parentContext="parentContext"
+  )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import DitoAffix from './DitoAffix.vue'
+import { asArray, isString } from '@ditojs/utils'
+import { shouldRenderSchema } from '../utils/schema.js'
+
+export default DitoComponent.component('DitoAffixes', {
+  components: { DitoAffix },
+
+  props: {
+    items: { type: [String, Object, Array], default: null },
+    parentContext: { type: Object, required: true }
+  },
+
+  computed: {
+    // Override DitoMixin's context with the parent's context
+    context() {
+      return this.parentContext
+    },
+
+    processedItems() {
+      return asArray(this.items)
+        .filter(Boolean)
+        .map(item =>
+          isString(item)
+            ? { type: 'text', text: item }
+            : item.type
+              ? item
+              : item.text != null
+                ? { type: 'text', ...item }
+                : item.html != null
+                  ? { type: 'html', ...item }
+                  : item
+        )
+    },
+
+    visibleItems() {
+      return this.processedItems.filter(item =>
+        shouldRenderSchema(item, this.context)
+      )
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-affixes {
+  @include user-select(none);
+
+  display: flex;
+  align-items: center;
+  gap: $input-padding-hor;
+
+  @at-root .dito-input & {
+    color: $color-grey;
+
+    .dito-icon--disabled {
+      color: $color-light;
+    }
+  }
+
+  @at-root .dito-input:focus-within & {
+    color: $color-active;
+  }
+}
+</style>

package/src/components/DitoLabel.vue

@@ -12,29 +12,19 @@ component.dito-label(
   .dito-label__inner(
     v-if="text || prefixes.length > 0 || suffixes.length > 0"
   )
-    .dito-label__prefix(
-      v-if="prefixes.length > 0"
+    DitoAffixes.dito-label__prefix(
+      :items="prefixes"
+      :parentContext="context"
     )
-      DitoElement(
-        v-for="(prefix, index) of prefixes"
-        :key="`prefix-${index}`"
-        as="span"
-        :content="prefix"
-      )
     label(
       v-if="text"
       :for="dataPath"
       v-html="text"
     )
-    .dito-label__suffix(
-      v-if="suffixes.length > 0"
+    DitoAffixes.dito-label__suffix(
+      :items="suffixes"
+      :parentContext="context"
     )
-      DitoElement(
-        v-for="(suffix, index) of suffixes"
-        :key="`suffix-${index}`"
-        as="span"
-        :content="suffix"
-      )
     .dito-info(
       v-if="info"
       :data-info="info"
@@ -43,10 +33,13 @@ component.dito-label(
 
 <script>
 import DitoComponent from '../DitoComponent.js'
+import DitoAffixes from './DitoAffixes.vue'
 import { isObject, asArray } from '@ditojs/utils'
 
 // @vue/component
 export default DitoComponent.component('DitoLabel', {
+  components: { DitoAffixes },
+
   emits: ['open'],
 
   props: {

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

@@ -18,7 +18,7 @@ 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(

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"
@@ -101,7 +101,7 @@ slot(name="before")
     v-if="inlined && !hasHeader"
     name="edit-buttons"
   )
-slot(name="after")
+slot(name="append")
 </template>
 
 <script>

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/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/styles/_button.scss

@@ -111,8 +111,10 @@
   }
 
   &--overlay {
+    $overlay-inset: calc(2 * $border-width);
+
     position: absolute;
-    inset: $border-width;
+    inset: $overlay-inset;
     left: unset;
     padding: 0;
     border: 0;
@@ -120,8 +122,7 @@
     cursor: pointer;
 
     &.dito-button--clear {
-      width: 2em;
-      background: $color-white;
+      width: calc(2em - 2 * ($border-width + $overlay-inset));
       display: none;
 
       @at-root .dito-component:hover:not(:has(.dito-component)) & {

package/src/types/DitoTypeButton.vue

@@ -1,36 +1,55 @@
 <template lang="pug">
-button.dito-button(
+DitoButton.dito-button(
   :id="dataPath"
   ref="element"
   :type="type"
+  :text="text"
   :title="title"
   :class="buttonClass"
   v-bind="attributes"
 )
-  .dito-button__text(
-    v-if="text"
-  ) {{ text }}
-  .dito-info(
-    v-if="!label && info"
-    :data-info="info"
-  )
+  template(#prefix)
+    DitoAffixes(
+      v-if="prefixes.length > 0"
+      :items="prefixes"
+      :parentContext="context"
+    )
+  template(#suffix)
+    DitoAffixes(
+      v-if="suffixes.length > 0"
+      :items="suffixes"
+      :parentContext="context"
+    )
+    .dito-info(
+      v-if="!label && info"
+      :data-info="info"
+    )
 </template>
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
+import DitoAffixes from '../components/DitoAffixes.vue'
+import { DitoButton } from '@ditojs/ui/src'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { hasResource } from '../utils/resource.js'
-import { labelize } from '@ditojs/utils'
+import { labelize, asArray } from '@ditojs/utils'
 
 export default DitoTypeComponent.register(
   ['button', 'submit'],
   // @vue/component
   {
+    components: { DitoAffixes, DitoButton },
     defaultValue: () => undefined, // Callback to override `defaultValue: null`
     excludeValue: true,
     defaultWidth: 'auto',
     generateLabel: false,
 
+    data() {
+      return {
+        isRunning: false
+      }
+    },
+
     computed: {
       verb() {
         return this.verbs[this.name]
@@ -53,6 +72,14 @@ export default DitoTypeComponent.register(
         default: null
       }),
 
+      prefixes() {
+        return asArray(this.schema.prefix)
+      },
+
+      suffixes() {
+        return asArray(this.schema.suffix)
+      },
+
       closeForm: getSchemaAccessor('closeForm', {
         type: Boolean,
         default: false
@@ -71,15 +98,31 @@ export default DitoTypeComponent.register(
       },
 
       async onClick() {
-        const res = await this.emitEvent('click', {
-          parent: this.schemaComponent
-        })
-        // Have buttons that define resources call `this.submit()` by default:
-        if (
-          res === undefined && // Meaning: don't prevent default.
-          hasResource(this.schema)
-        ) {
-          await this.submit()
+        this.isRunning = true
+        try {
+          const res = await this.emitEvent('click', {
+            parent: this.schemaComponent
+          })
+          // Have buttons that define resources call `this.submit()` by default:
+          if (
+            res === undefined && // Meaning: don't prevent default.
+            hasResource(this.schema)
+          ) {
+            await this.submit()
+          }
+        } catch (error) {
+          const res = await this.emitEvent('error', { error })
+          if (res === undefined) {
+            if (error instanceof AggregateError) {
+              for (const err of error.errors) {
+                this.notify({ type: 'error', text: err })
+              }
+            } else {
+              this.notify({ type: 'error', text: error })
+            }
+          }
+        } finally {
+          this.isRunning = false
         }
       }
     }

package/src/types/DitoTypeColor.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-Trigger.dito-color(
+DitoTrigger.dito-color(
   v-model:show="showPopup"
   trigger="focus"
 )
@@ -35,7 +35,7 @@ Trigger.dito-color(
 import tinycolor from 'tinycolor2'
 import { Sketch as SketchPicker } from '@lk77/vue3-color'
 import { isObject, isString } from '@ditojs/utils'
-import { Trigger } from '@ditojs/ui/src'
+import { DitoTrigger } from '@ditojs/ui/src'
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 
@@ -48,7 +48,7 @@ SketchPicker.computed.hex = function () {
 
 // @vue/component
 export default DitoTypeComponent.register('color', {
-  components: { Trigger, SketchPicker },
+  components: { DitoTrigger, SketchPicker },
 
   data() {
     return {

package/src/types/DitoTypeDate.vue

@@ -9,7 +9,16 @@
     :format="formats"
     v-bind="attributes"
   )
-    template(#after)
+    template(#prefix)
+      DitoAffixes(
+        :items="schema.prefix"
+        :parentContext="context"
+      )
+    template(#suffix)
+      DitoAffixes(
+        :items="schema.suffix"
+        :parentContext="context"
+      )
       button.dito-button--clear.dito-button--overlay(
         v-if="showClearButton"
         :disabled="disabled"
@@ -21,14 +30,19 @@
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { DatePicker, TimePicker, DateTimePicker } from '@ditojs/ui/src'
+import DitoAffixes from '../components/DitoAffixes.vue'
+import {
+  DitoDatePicker,
+  DitoTimePicker,
+  DitoDateTimePicker
+} from '@ditojs/ui/src'
 import { isDate, assignDeeply } from '@ditojs/utils'
 
 export default DitoTypeComponent.register(
   ['date', 'datetime', 'time'],
   // @vue/component
   {
-    components: { DatePicker, TimePicker, DateTimePicker },
+    components: { DitoAffixes },
     // TODO: This is only here so we get placeholder added. Come up with a
     // better way to support attributes per component (a list of actually
     // supported attributes)
@@ -65,9 +79,9 @@ export default DitoTypeComponent.register(
     methods: {
       getComponent(type) {
         return {
-          date: 'date-picker',
-          time: 'time-picker',
-          datetime: 'date-time-picker'
+          date: DitoDatePicker,
+          time: DitoTimePicker,
+          datetime: DitoDateTimePicker
         }[type]
       }
     },

package/src/types/DitoTypeMarkup.vue

@@ -12,7 +12,7 @@
         :class="{ 'dito-button--active': isActive }"
         @click="onClick"
       )
-        Icon(:name="icon")
+        DitoIcon(:name="icon")
   EditorContent.dito-markup-editor(
     ref="editor"
     :editor="editor"
@@ -66,7 +66,7 @@ import { Footnotes, FootnoteReference, Footnote } from 'tiptap-footnotes'
 // Tools:
 import { History } from '@tiptap/extension-history'
 
-import { Icon } from '@ditojs/ui/src'
+import { DitoIcon } from '@ditojs/ui/src'
 import { isArray, isObject, hyphenate, debounce, camelize } from '@ditojs/utils'
 
 // @vue/component
@@ -74,7 +74,7 @@ export default DitoTypeComponent.register('markup', {
   mixins: [DomMixin],
   components: {
     EditorContent,
-    Icon
+    DitoIcon
   },
 
   data() {
@@ -298,6 +298,7 @@ export default DitoTypeComponent.register('markup', {
     async onClickLink(editor) {
       const attributes = await this.rootComponent.showDialog({
         components: {
+          DitoIcon,
           href: {
             type: 'url',
             label: 'Link',

package/src/types/DitoTypeNumber.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-InputField.dito-number(
+DitoInput.dito-number(
   :id="dataPath"
   ref="element"
   v-model="inputValue"
@@ -9,7 +9,16 @@ InputField.dito-number(
   :max="max"
   :step="stepValue"
 )
-  template(#after)
+  template(#prefix)
+    DitoAffixes(
+      :items="schema.prefix"
+      :parentContext="context"
+    )
+  template(#suffix)
+    DitoAffixes(
+      :items="schema.suffix"
+      :parentContext="context"
+    )
     button.dito-button--clear.dito-button--overlay(
       v-if="showClearButton"
       :disabled="disabled"
@@ -20,14 +29,15 @@ InputField.dito-number(
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import NumberMixin from '../mixins/NumberMixin.js'
-import { InputField } from '@ditojs/ui/src'
+import DitoAffixes from '../components/DitoAffixes.vue'
+import { DitoInput } from '@ditojs/ui/src'
 
 export default DitoTypeComponent.register(
   ['number', 'integer'],
   // @vue/component
   {
     mixins: [NumberMixin],
-    components: { InputField },
+    components: { DitoInput, DitoAffixes },
     nativeField: true,
     textField: true,
 

package/src/types/DitoTypeSlider.vue

@@ -10,7 +10,7 @@
     :max="max"
     :step="stepValue"
   )
-  InputField.dito-number(
+  DitoInput.dito-number(
     v-if="input"
     v-model="inputValue"
     type="number"
@@ -25,12 +25,12 @@
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import NumberMixin from '../mixins/NumberMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { InputField } from '@ditojs/ui/src'
+import { DitoInput } from '@ditojs/ui/src'
 
 // @vue/component
 export default DitoTypeComponent.register('slider', {
   mixins: [NumberMixin],
-  components: { InputField },
+  components: { DitoInput },
   nativeField: true,
 
   computed: {

package/src/types/DitoTypeSwitch.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-SwitchButton.dito-switch(
+DitoSwitch.dito-switch(
   :id="dataPath"
   ref="element"
   v-model="value"
@@ -10,7 +10,7 @@ SwitchButton.dito-switch(
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
-import { SwitchButton } from '@ditojs/ui/src'
+import { DitoSwitch } from '@ditojs/ui/src'
 
 // @vue/component
 export default DitoTypeComponent.register('switch', {
@@ -18,7 +18,7 @@ export default DitoTypeComponent.register('switch', {
   defaultWidth: 'auto',
 
   components: {
-    SwitchButton
+    DitoSwitch
   },
 
   computed: {