@ditojs/admin 2.71.1 → 2.73.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.71.1",
+  "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,41 +42,41 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.71.0",
-    "@ditojs/utils": "^2.71.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.14.0",
-    "@tiptap/extension-blockquote": "^3.14.0",
-    "@tiptap/extension-bold": "^3.14.0",
-    "@tiptap/extension-bullet-list": "^3.14.0",
-    "@tiptap/extension-code": "^3.14.0",
-    "@tiptap/extension-code-block": "^3.14.0",
-    "@tiptap/extension-document": "^3.14.0",
-    "@tiptap/extension-hard-break": "^3.14.0",
-    "@tiptap/extension-heading": "^3.14.0",
-    "@tiptap/extension-history": "^3.14.0",
-    "@tiptap/extension-horizontal-rule": "^3.14.0",
-    "@tiptap/extension-italic": "^3.14.0",
-    "@tiptap/extension-link": "^3.14.0",
-    "@tiptap/extension-list": "^3.14.0",
-    "@tiptap/extension-list-item": "^3.14.0",
-    "@tiptap/extension-ordered-list": "^3.14.0",
-    "@tiptap/extension-paragraph": "^3.14.0",
-    "@tiptap/extension-strike": "^3.14.0",
-    "@tiptap/extension-subscript": "^3.14.0",
-    "@tiptap/extension-superscript": "^3.14.0",
-    "@tiptap/extension-text": "^3.14.0",
-    "@tiptap/extension-text-style": "^3.14.0",
-    "@tiptap/extension-underline": "^3.14.0",
-    "@tiptap/extensions": "^3.14.0",
-    "@tiptap/pm": "^3.14.0",
-    "@tiptap/vue-3": "^3.14.0",
+    "@tiptap/core": "^3.15.3",
+    "@tiptap/extension-blockquote": "^3.15.3",
+    "@tiptap/extension-bold": "^3.15.3",
+    "@tiptap/extension-bullet-list": "^3.15.3",
+    "@tiptap/extension-code": "^3.15.3",
+    "@tiptap/extension-code-block": "^3.15.3",
+    "@tiptap/extension-document": "^3.15.3",
+    "@tiptap/extension-hard-break": "^3.15.3",
+    "@tiptap/extension-heading": "^3.15.3",
+    "@tiptap/extension-history": "^3.15.3",
+    "@tiptap/extension-horizontal-rule": "^3.15.3",
+    "@tiptap/extension-italic": "^3.15.3",
+    "@tiptap/extension-link": "^3.15.3",
+    "@tiptap/extension-list": "^3.15.3",
+    "@tiptap/extension-list-item": "^3.15.3",
+    "@tiptap/extension-ordered-list": "^3.15.3",
+    "@tiptap/extension-paragraph": "^3.15.3",
+    "@tiptap/extension-strike": "^3.15.3",
+    "@tiptap/extension-subscript": "^3.15.3",
+    "@tiptap/extension-superscript": "^3.15.3",
+    "@tiptap/extension-text": "^3.15.3",
+    "@tiptap/extension-text-style": "^3.15.3",
+    "@tiptap/extension-underline": "^3.15.3",
+    "@tiptap/extensions": "^3.15.3",
+    "@tiptap/pm": "^3.15.3",
+    "@tiptap/vue-3": "^3.15.3",
     "@vueuse/integrations": "^14.1.0",
     "codeflask": "^1.4.1",
     "filesize": "^11.0.13",
     "filesize-parser": "^1.5.1",
-    "focus-trap": "^7.7.0",
+    "focus-trap": "^7.7.1",
     "nanoid": "^5.1.6",
     "sortablejs": "^1.15.6",
     "tinycolor2": "^1.6.0",
@@ -89,9 +89,9 @@
     "vue-upload-component": "^3.1.17"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.71.0",
+    "@ditojs/build": "^2.73.0",
     "typescript": "^5.9.3",
-    "vite": "^7.3.0"
+    "vite": "^7.3.1"
   },
-  "gitHead": "852e9e0490d019c946eff537856157c7064ee3a5"
+  "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/DitoAccount.vue

@@ -4,7 +4,7 @@
     @mousedown.stop="onPulldownMouseDown()"
   )
     span {{ user.username }}
-  ul.dito-pulldown(:class="{ 'dito-open': pulldown.open }")
+  ul.dito-pulldown(:class="{ 'dito-pulldown--open': pulldown.open }")
     li(
       v-for="(label, value) of items"
     )

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

@@ -1,15 +1,15 @@
 <template lang="pug">
-.dito-clipboard.dito-buttons.dito-buttons-round(
+.dito-clipboard.dito-buttons.dito-buttons--round(
   v-if="clipboard"
 )
-  button.dito-button.dito-button-copy(
+  button.dito-button.dito-button--copy(
     ref="copyData"
     type="button"
     title="Copy Data"
     :disabled="!copyEnabled"
     @click="onCopy"
   )
-  button.dito-button.dito-button-paste(
+  button.dito-button.dito-button--paste(
     type="button"
     title="Paste Data"
     :disabled="!pasteEnabled"

package/src/components/DitoContainer.vue

@@ -69,6 +69,7 @@ export default DitoComponent.component('DitoContainer', {
     single: { type: Boolean, default: false },
     nested: { type: Boolean, default: true },
     disabled: { type: Boolean, required: true },
+    compact: { type: Boolean, default: false },
     generateLabels: { type: Boolean, default: false },
     verticalLabels: { type: Boolean, default: false },
     accumulatedBasis: { type: Number, default: null }
@@ -191,8 +192,9 @@ export default DitoComponent.component('DitoContainer', {
       const prefix = 'dito-container'
       return {
         [`${prefix}--single`]: this.single,
-        'dito-disabled': this.componentDisabled,
-        'dito-has-errors': !!this.errors,
+        [`${prefix}--disabled`]: this.componentDisabled,
+        [`${prefix}--has-errors`]: !!this.errors,
+        [`${prefix}--compact`]: this.compact,
         [`${prefix}--label-vertical`]: this.verticalLabels,
         [`${prefix}--omit-spacing`]: omitSpacing(this.schema),
         ...(isString(classes) ? { [classes]: true } : classes)
@@ -214,23 +216,15 @@ export default DitoComponent.component('DitoContainer', {
 
     componentClasses() {
       return {
-        'dito-single': this.single,
-        ...this.layoutClasses
-      }
-    },
-
-    layoutClasses() {
-      return {
-        'dito-width-fill': this.width === 'fill' || this.flexBasis !== 'auto',
-        'dito-width-grow': this.flexGrow,
-        'dito-width-shrink': this.flexShrink
+        'dito-component--single': this.single,
+        ...this.getLayoutClasses('dito-component')
       }
     },
 
     labelClasses() {
       return {
         'dito-label--visible': this.isLabel,
-        ...this.layoutClasses
+        ...this.getLayoutClasses('dito-label')
       }
     },
 
@@ -246,6 +240,14 @@ export default DitoComponent.component('DitoContainer', {
   },
 
   methods: {
+    getLayoutClasses(prefix) {
+      return {
+        [`${prefix}--fill`]: this.width === 'fill' || this.flexBasis !== 'auto',
+        [`${prefix}--grow`]: this.flexGrow,
+        [`${prefix}--shrink`]: this.flexShrink
+      }
+    },
+
     onErrors(errors) {
       this.errors = errors
     }
@@ -319,6 +321,14 @@ export default DitoComponent.component('DitoContainer', {
     }
   }
 
+  &--compact:not(&--label-vertical) {
+    // Display labels in compact schema as inline-blocks, to allow compact
+    // layouts with `width: 'auto'` elements:
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+  }
+
   &--omit-spacing {
     padding: 0;
 
@@ -328,12 +338,10 @@ export default DitoComponent.component('DitoContainer', {
   }
 }
 
-// NOTE: This is not nested inside `.dito-container` so that other
-// type components can override `.dito-width-fill` class (filter precedence).
 .dito-component {
   position: relative;
 
-  &.dito-width-fill {
+  &--fill {
     width: 100%;
 
     &.dito-checkbox,

package/src/components/DitoCreateButton.vue

@@ -16,13 +16,15 @@
       v-bind="getButtonAttributes(verb)"
       @mousedown.stop="onPulldownMouseDown()"
     ) {{ text }}
-    ul.dito-pulldown(:class="{ 'dito-open': pulldown.open }")
+    ul.dito-pulldown(:class="{ 'dito-pulldown--open': pulldown.open }")
       li(
         v-for="(form, type) in creatableForms"
+        v-show="shouldShowSchema(form)"
       )
-        a(
-          v-show="shouldShowSchema(form)"
-          :class="getFormClass(form, type)"
+        a.dito-pulldown__item(
+          :class=`{
+            'dito-pulldown__item--disabled': shouldDisableSchema(form)
+          }`
           @mousedown.stop="onPulldownMouseDown(type)"
           @mouseup="onPulldownMouseUp(type)"
         ) {{ getLabel(form) }}
@@ -113,13 +115,6 @@ export default DitoComponent.component('DitoCreateButton', {
       }
     },
 
-    getFormClass(form, type) {
-      return {
-        [`dito-type-${type}`]: true,
-        'dito-disabled': this.shouldDisableSchema(form)
-      }
-    },
-
     onPulldownSelect(type) {
       this.createItem(this.forms[type], type)
       this.setPulldownOpen(false)
@@ -135,7 +130,7 @@ export default DitoComponent.component('DitoCreateButton', {
   .dito-pulldown {
     right: 0;
 
-    .dito-buttons-sticky & {
+    .dito-buttons--sticky & {
       top: unset;
       right: unset;
       bottom: 0;

package/src/components/DitoDialog.vue

@@ -24,7 +24,7 @@
         generateLabels
       )
         template(#buttons)
-          DitoButtons.dito-buttons-large(
+          DitoButtons.dito-buttons--large(
             :buttons="buttonSchemas"
             :data="dialogData"
           )

package/src/components/DitoEditButtons.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 //- Set `@click.stop` to prevent click events from bubbling to dito-label.
-DitoButtons.dito-edit-buttons.dito-buttons-round(
+DitoButtons.dito-edit-buttons.dito-buttons--round(
   :buttons="buttons"
   :dataPath="dataPath"
   :data="data"
@@ -12,12 +12,12 @@ DitoButtons.dito-edit-buttons.dito-buttons-round(
   //- Firefox doesn't like <button> here, so use <a> instead:
   a.dito-button(
     v-if="draggable"
-    :class="{ 'dito-disabled': isDraggableDisabled }"
+    :class="{ 'dito-button--disabled': isDraggableDisabled }"
     v-bind="getButtonAttributes(verbs.drag)"
   )
   RouterLink.dito-button(
     v-if="editable"
-    :class="{ 'dito-disabled': isEditableDisabled }"
+    :class="{ 'dito-button--disabled': isEditableDisabled }"
     :to="editPath ? { path: editPath } : {}"
     v-bind="getButtonAttributes(verbs.edit)"
   )

package/src/components/DitoForm.vue

@@ -1,8 +1,5 @@
 <template lang="pug">
-.dito-form.dito-scroll-parent(
-  :class="{ 'dito-form-nested': isNestedRoute }"
-  :data-resource="sourceSchema.path"
-)
+.dito-form.dito-scroll-parent(:data-resource="sourceSchema.path")
   //- Only render a router-view here if this isn't the last data route and not a
   //- nested form route, which will appear elsewhere in its own view.
   RouterView(
@@ -37,8 +34,8 @@
       generateLabels
     )
       template(#buttons)
-        DitoButtons.dito-buttons-round.dito-buttons-large.dito-buttons-main(
-          :class="{ 'dito-buttons-sticky': !isNestedRoute }"
+        DitoButtons.dito-buttons--round.dito-buttons--large.dito-buttons--main(
+          :class="{ 'dito-buttons--sticky': !isNestedRoute }"
           :buttons="buttonSchemas"
           :dataPath="dataPath"
           :data="data"

package/src/components/DitoHeader.vue

@@ -62,19 +62,6 @@ export default DitoComponent.component('DitoHeader', {
     }
   }
 
-  .dito-dirty {
-    &::after {
-      content: '';
-      display: inline-block;
-      background-color: $color-white;
-      width: 8px;
-      height: 8px;
-      margin: 2px;
-      margin-left: 0.5em;
-      border-radius: 100%;
-    }
-  }
-
   &__teleport {
     // Align the teleported schema headers on top of to the header menu.
     position: absolute;

package/src/components/DitoLabel.vue

@@ -3,38 +3,28 @@ component.dito-label(
   v-if="text || collapsible"
   :is="as"
   v-bind="attributes"
-  :class="{ 'dito-active': isActive }"
+  :class="{ 'dito-label--active': isActive }"
 )
   .dito-chevron(
     v-if="collapsible"
-    :class="{ 'dito-open': !collapsed }"
+    :class="{ 'dito-chevron--open': !collapsed }"
   )
   .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: {
@@ -59,7 +52,7 @@ export default DitoComponent.component('DitoLabel', {
 
   computed: {
     as() {
-      return this.collapsible ? 'a' : 'div'
+      return this.collapsible ? 'button' : 'div'
     },
 
     text() {
@@ -194,7 +187,7 @@ export default DitoComponent.component('DitoLabel', {
     padding: var(--label-padding);
   }
 
-  &.dito-width-fill {
+  &--fill {
     width: 100%;
 
     // In order for ellipsis to work on labels without affecting other layout,
@@ -219,32 +212,21 @@ export default DitoComponent.component('DitoLabel', {
   .dito-info {
     margin-left: 0.35em;
   }
-}
 
-a.dito-label {
-  &:hover {
-    .dito-chevron {
-      color: $color-darker;
-    }
-  }
+  @at-root button#{&} {
+    border: 0;
+    padding: 0;
+    text-align: start;
 
-  &:focus:not(:active, .dito-active) {
-    .dito-chevron {
-      -webkit-text-stroke: $border-width $color-active;
+    &:hover {
+      .dito-chevron {
+        color: $color-darker;
+      }
     }
-    // Display labels in compact schema as inline-blocks, to allow compact
-    // layouts with `width: 'auto'` elements:
-    // TODO: Find a better way to control this behavior.
-  }
-}
 
-.dito-schema-compact {
-  > .dito-schema-content {
-    > .dito-pane {
-      > .dito-container:not(.dito-container--label-vertical) {
-        display: flex;
-        flex-flow: row wrap;
-        align-items: center;
+    &:focus:not(:active, &--active) {
+      .dito-chevron {
+        -webkit-text-stroke: $border-width $color-active;
       }
     }
   }