@ditojs/admin 2.75.0 → 2.75.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.75.0",
+  "version": "2.75.2",
   "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",
@@ -93,5 +93,5 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1"
   },
-  "gitHead": "cfc4ee21dc3f5808b5a78a3b1fab83500c05907a"
+  "gitHead": "70ff8a3042925a27c2b2a792505db04038f92493"
 }

package/src/components/DitoAffix.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
 component(
   v-if="item.type === 'text'"
-  :is="item.as || 'span'"
+  :is="item.as || 'div'"
 ) {{ item.text }}
 component(
   v-else-if="item.type === 'html'"
-  :is="item.as || 'span'"
+  :is="item.as || 'div'"
   v-html="item.html"
 )
 DitoSpinner(
@@ -48,9 +48,21 @@ export default DitoComponent.component('DitoAffix', {
 </script>
 
 <style lang="scss">
+@import '../styles/_imports';
+
 .dito-affix {
+  &--html,
   &--text {
     display: inline-block;
   }
+
+  &--ellipsis {
+    @include ellipsis;
+
+    flex: 1;
+    display: block;
+    min-width: 0;
+    width: 0;
+  }
 }
 </style>

package/src/components/DitoAffixes.vue

@@ -7,7 +7,7 @@
   DitoAffix.dito-affix(
     v-for="(item, index) in visibleItems"
     :key="index"
-    :class="[`dito-affix--${item.type}`, item.class]"
+    :class="getItemClasses(item)"
     :style="item.style"
     :item="item"
     :parentContext="parentContext"
@@ -21,6 +21,10 @@
     @mousedown.stop
   )
   slot(name="append")
+  .dito-info(
+    v-if="inlineInfo"
+    :data-info="inlineInfo"
+  )
 </template>
 
 <script>
@@ -36,10 +40,12 @@ export default DitoComponent.component('DitoAffixes', {
 
   props: {
     items: { type: [String, Object, Array], default: null },
+    mode: { type: String, default: null },
     position: { type: String, default: null },
     absolute: { type: Boolean, default: false },
     clearable: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
+    inlineInfo: { type: String, default: null },
     parentContext: { type: Object, required: true }
   },
 
@@ -75,6 +81,7 @@ export default DitoComponent.component('DitoAffixes', {
       const prefix = 'dito-affixes'
       return {
         [`${prefix}--${this.position}`]: this.position,
+        [`${prefix}--${this.mode}`]: this.mode,
         [`${prefix}--absolute`]: this.absolute
       }
     },
@@ -83,10 +90,26 @@ export default DitoComponent.component('DitoAffixes', {
       return (
         this.visibleItems.length > 0 ||
         this.clearable ||
+        this.inlineInfo ||
         hasSlotContent(this.$slots.prepend) ||
         hasSlotContent(this.$slots.append)
       )
     }
+  },
+
+  methods: {
+    getItemClasses(item) {
+      const prefix = 'dito-affix'
+      return [
+        {
+          [`${prefix}--${item.type}`]: item.type,
+          [`${prefix}--ellipsis`]: (
+            this.mode === 'ellipsis' && ['text', 'html'].includes(item.type)
+          )
+        },
+        item.class
+      ]
+    }
   }
 })
 </script>
@@ -122,16 +145,20 @@ export default DitoComponent.component('DitoAffixes', {
     }
   }
 
-  @at-root .dito-component & {
+  &--ellipsis {
+    flex: 1;
+  }
+
+  &--input {
     color: $color-grey;
 
     .dito-icon--disabled {
       color: $color-light;
     }
-  }
 
-  @at-root .dito-component:focus-within:not(:has(.dito-component)) & {
-    color: $color-active;
+    @at-root .dito-component:not(:has(.dito-component)):focus-within & {
+      color: $color-active;
+    }
   }
 
   &__clear {
@@ -148,7 +175,7 @@ export default DitoComponent.component('DitoAffixes', {
     padding: 0;
     border: 0;
 
-    @at-root .dito-component:hover:not(:has(.dito-component)) & {
+    @at-root .dito-component:not(:has(.dito-component)):hover & {
       display: block;
     }
 

package/src/components/DitoContainer.vue

@@ -210,9 +210,9 @@ export default DitoComponent.component('DitoContainer', {
       const { class: classes } = this.schema
       const prefix = 'dito-container'
       return {
-        [`${prefix}--single`]: this.single,
         [`${prefix}--disabled`]: this.componentDisabled,
         [`${prefix}--has-errors`]: !!this.errors,
+        [`${prefix}--single`]: this.single,
         [`${prefix}--compact`]: this.compact,
         [`${prefix}--label-vertical`]: this.verticalLabels,
         [`${prefix}--omit-spacing`]: omitSpacing(this.schema),

package/src/components/DitoLabel.vue

@@ -13,7 +13,7 @@ component.dito-label(
   .dito-label__inner(
     v-if="text || prefixes.length > 0 || suffixes.length > 0"
   )
-    DitoAffixes.dito-label__prefix(
+    DitoAffixes(
       :items="prefixes"
       position="prefix"
       :parentContext="context"
@@ -23,8 +23,9 @@ component.dito-label(
       :for="dataPath"
       v-html="text"
     )
-    DitoAffixes.dito-label__suffix(
+    DitoAffixes(
       :items="suffixes"
+      mode="ellipsis"
       position="suffix"
       :parentContext="context"
     )
@@ -117,9 +118,12 @@ export default DitoComponent.component('DitoLabel', {
     display: flex;
     align-items: center;
     overflow: hidden;
+    gap: $input-padding-hor;
   }
 
   label {
+    @include ellipsis;
+
     cursor: inherit;
     font-weight: bold;
     line-height: $input-height;
@@ -140,44 +144,6 @@ export default DitoComponent.component('DitoLabel', {
     transform: translateY(-4px);
   }
 
-  &__prefix,
-  &__suffix {
-    flex: 1;
-    position: relative;
-    line-height: $input-height;
-
-    // For ellipsis to work on prefix and suffix with flex layout, we need to
-    // use a nested absolutely positioned span.
-
-    &::before {
-      content: '\200b'; // zero-width space to keep container from collapsing.
-    }
-
-    span {
-      position: absolute;
-      inset: 0;
-    }
-  }
-
-  label,
-  &__prefix span,
-  &__suffix span {
-    @include user-select(none);
-    @include ellipsis;
-
-    white-space: nowrap;
-  }
-
-  &__prefix + label,
-  label + &__suffix {
-    &,
-    span {
-      &::before {
-        content: '\a0'; //  
-      }
-    }
-  }
-
   .dito-buttons {
     // Move the label padding inside .dito-buttons, so that it captures all
     // near mouse events:

package/src/components/DitoNotifications.vue

@@ -23,7 +23,7 @@ export default DitoComponent.component('DitoNotifications', {
   },
 
   methods: {
-    notify({ type = 'info', title, text, error } = {}) {
+    notify({ type = 'info', title, text, error, duration } = {}) {
       title ||= (
         {
           warning: 'Warning',
@@ -59,8 +59,13 @@ export default DitoComponent.component('DitoNotifications', {
         // amount of milliseconds multiplied with the amount of characters
         // displayed in the notification, plus 40 (40 + title + message):
         const { durationFactor = 20 } = notifications
-        const duration = (40 + text.length + title.length) * durationFactor
-        this.$notify({ type, title, text, duration })
+        duration ??= (40 + text.length + title.length) * durationFactor
+        this.$notify({
+          type,
+          title,
+          text,
+          duration: duration === 0 ? -1 : duration // < 0 -> <= 0 = sticky
+        })
       }
     },
 

package/src/components/DitoPane.vue

@@ -65,8 +65,8 @@ export default DitoComponent.component('DitoPane', {
     meta: { type: Object, required: true },
     store: { type: Object, required: true },
     tab: { type: String, default: null },
-    padding: { type: String, default: null },
     single: { type: Boolean, default: false },
+    padding: { type: String, default: null },
     disabled: { type: Boolean, default: false },
     compact: { type: Boolean, default: false },
     generateLabels: { type: Boolean, default: false },
@@ -86,9 +86,10 @@ export default DitoComponent.component('DitoPane', {
     },
 
     classes() {
+      const prefix = 'dito-pane'
       return {
-        'dito-pane--single': this.isSingleComponent,
-        [`dito-pane--padding-${this.padding}`]: !!this.padding
+        [`${prefix}--single`]: this.isSingleComponent,
+        [`${prefix}--padding-${this.padding}`]: !!this.padding
       }
     },
 

package/src/components/DitoSchema.vue

@@ -72,7 +72,7 @@ slot(name="prepend")
             :meta="meta"
             :store="store"
             :padding="padding"
-            :single="!inlined && !hasMainPane"
+            :single="single && !inlined && !hasMainPane"
             :disabled="disabled"
             :compact="compact"
             :generateLabels="generateLabels"
@@ -87,7 +87,7 @@ slot(name="prepend")
         :meta="meta"
         :store="store"
         :padding="padding"
-        :single="!inlined && !hasTabs"
+        :single="single && !inlined && !hasTabs"
         :disabled="disabled"
         :compact="compact"
         :generateLabels="generateLabels"
@@ -156,6 +156,7 @@ export default DitoComponent.component('DitoSchema', {
     meta: { type: Object, default: () => ({}) },
     store: { type: Object, default: () => ({}) },
     label: { type: [String, Object], default: null },
+    single: { type: Boolean, default: false },
     padding: { type: String, default: null },
     active: { type: Boolean, default: true },
     inlined: { type: Boolean, default: false },

package/src/components/DitoView.vue

@@ -23,6 +23,7 @@ template(
       padding="root"
       :disabled="isLoading"
       scrollable
+      single
     )
 </template>
 

package/src/mixins/TypeMixin.js

@@ -101,6 +101,17 @@ export default {
       type: String
     }),
 
+    info: getSchemaAccessor('info', {
+      type: String,
+      default: null
+    }),
+
+    inlineInfo() {
+      // When a label is present, info is shown in the label component.
+      // Otherwise, we have to show it inline.
+      return !this.label ? this.info : null
+    },
+
     events() {
       const events = this.getEvents()
       // Register callbacks for all provides non-recognized events,

package/src/types/DitoTypeButton.vue

@@ -72,11 +72,6 @@ export default DitoTypeComponent.register(
         return this.text || labelize(this.verb)
       },
 
-      info: getSchemaAccessor('info', {
-        type: String,
-        default: null
-      }),
-
       prefixes() {
         return asArray(this.schema.prefix)
       },

package/src/types/DitoTypeColor.vue

@@ -17,6 +17,7 @@ DitoTrigger.dito-color(
         DitoAffixes(
           :items="schema.prefix"
           position="prefix"
+          mode="input"
           :disabled="disabled"
           :parentContext="context"
         )
@@ -24,8 +25,10 @@ DitoTrigger.dito-color(
         DitoAffixes(
           :items="schema.suffix"
           position="suffix"
+          mode="input"
           :clearable="showClearButton"
           :disabled="disabled"
+          :inlineInfo="inlineInfo"
           :parentContext="context"
           @clear="clear"
         )

package/src/types/DitoTypeDate.vue

@@ -13,6 +13,7 @@
       DitoAffixes(
         :items="schema.prefix"
         position="prefix"
+        mode="input"
         absolute
         :disabled="disabled"
         :parentContext="context"
@@ -21,9 +22,11 @@
       DitoAffixes(
         :items="schema.suffix"
         position="suffix"
+        mode="input"
         absolute
         :clearable="showClearButton"
         :disabled="disabled"
+        :inlineInfo="inlineInfo"
         :parentContext="context"
         @clear="clear"
       )

package/src/types/DitoTypeMultiselect.vue

@@ -4,6 +4,7 @@
     DitoAffixes(
       :items="schema.prefix"
       position="prefix"
+      mode="input"
       absolute
       :disabled="disabled"
       :parentContext="context"
@@ -37,9 +38,11 @@
     DitoAffixes(
       :items="schema.suffix"
       position="suffix"
+      mode="input"
       absolute
       :clearable="showClearButton"
       :disabled="disabled"
+      :inlineInfo="inlineInfo"
       :parentContext="context"
       @clear="clear"
     )

package/src/types/DitoTypeNumber.vue

@@ -13,6 +13,7 @@ DitoInput.dito-number(
     DitoAffixes(
       :items="schema.prefix"
       position="prefix"
+      mode="input"
       :disabled="disabled"
       :parentContext="context"
     )
@@ -20,8 +21,10 @@ DitoInput.dito-number(
     DitoAffixes(
       :items="schema.suffix"
       position="suffix"
+      mode="input"
       :clearable="showClearButton"
       :disabled="disabled"
+      :inlineInfo="inlineInfo"
       :parentContext="context"
       @clear="clear"
     )

package/src/types/DitoTypeSelect.vue

@@ -5,6 +5,7 @@
     DitoAffixes(
       :items="schema.prefix"
       position="prefix"
+      mode="input"
       absolute
       :disabled="disabled"
       :parentContext="context"
@@ -42,9 +43,11 @@
     DitoAffixes(
       :items="schema.suffix"
       position="suffix"
+      mode="input"
       absolute
       :clearable="showClearButton"
       :disabled="disabled"
+      :inlineInfo="inlineInfo"
       :parentContext="context"
       @clear="clear"
     )

package/src/types/DitoTypeText.vue

@@ -10,6 +10,7 @@ DitoInput.dito-text(
     DitoAffixes(
       :items="schema.prefix"
       position="prefix"
+      mode="input"
       :disabled="disabled"
       :parentContext="context"
     )
@@ -17,8 +18,10 @@ DitoInput.dito-text(
     DitoAffixes(
       :items="schema.suffix"
       position="suffix"
+      mode="input"
       :clearable="showClearButton"
       :disabled="disabled"
+      :inlineInfo="inlineInfo"
       :parentContext="context"
       @clear="clear"
     )