@ditojs/admin 2.75.0 → 2.75.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.75.0",
+  "version": "2.75.1",
   "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": "d16421580ee018bd1e606570bbf7b41c0f537fc8"
 }

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"
@@ -36,6 +36,7 @@ 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 },
@@ -75,6 +76,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
       }
     },
@@ -87,6 +89,21 @@ export default DitoComponent.component('DitoAffixes', {
         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 +139,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 +169,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/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,6 +118,7 @@ export default DitoComponent.component('DitoLabel', {
     display: flex;
     align-items: center;
     overflow: hidden;
+    gap: $input-padding-hor;
   }
 
   label {
@@ -140,44 +142,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/types/DitoTypeColor.vue

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

package/src/types/DitoTypeDate.vue

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

package/src/types/DitoTypeMultiselect.vue

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

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,6 +21,7 @@ DitoInput.dito-number(
     DitoAffixes(
       :items="schema.suffix"
       position="suffix"
+      mode="input"
       :clearable="showClearButton"
       :disabled="disabled"
       :parentContext="context"

package/src/types/DitoTypeSelect.vue

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

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,6 +18,7 @@ DitoInput.dito-text(
     DitoAffixes(
       :items="schema.suffix"
       position="suffix"
+      mode="input"
       :clearable="showClearButton"
       :disabled="disabled"
       :parentContext="context"