@ditojs/admin 2.73.4 → 2.74.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.73.4",
+  "version": "2.74.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.73.2",
-    "@ditojs/utils": "^2.73.0",
+    "@ditojs/ui": "^2.74.0",
+    "@ditojs/utils": "^2.74.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.73.0",
+    "@ditojs/build": "^2.74.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"
   },
-  "gitHead": "bbb41fce56cdd91db7a090a2237bd130a699159a"
+  "gitHead": "26c5b4bd33d1bc469c8b621a214ae3c8f0927c11"
 }

package/src/components/DitoAffixes.vue

@@ -1,7 +1,9 @@
 <template lang="pug">
 .dito-affixes(
-  v-if="visibleItems.length > 0"
+  v-if="hasContent"
+  :class="classes"
 )
+  slot(name="prepend")
   DitoAffix.dito-affix(
     v-for="(item, index) in visibleItems"
     :key="index"
@@ -10,19 +12,33 @@
     :item="item"
     :parentContext="parentContext"
   )
+  button.dito-affixes__clear(
+    v-if="clearable"
+    type="button"
+    :disabled="disabled"
+    @click.stop="$emit('clear')"
+    @mousedown.stop
+  )
+  slot(name="append")
 </template>
 
 <script>
 import DitoComponent from '../DitoComponent.js'
 import DitoAffix from './DitoAffix.vue'
 import { asArray, isString } from '@ditojs/utils'
+import { hasSlotContent } from '@ditojs/ui/src'
 import { shouldRenderSchema } from '../utils/schema.js'
 
 export default DitoComponent.component('DitoAffixes', {
   components: { DitoAffix },
+  emits: ['clear'],
 
   props: {
     items: { type: [String, Object, Array], default: null },
+    position: { type: String, default: null },
+    absolute: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
     parentContext: { type: Object, required: true }
   },
 
@@ -52,6 +68,23 @@ export default DitoComponent.component('DitoAffixes', {
       return this.processedItems.filter(item =>
         shouldRenderSchema(item, this.context)
       )
+    },
+
+    classes() {
+      const prefix = 'dito-affixes'
+      return {
+        [`${prefix}--${this.position}`]: this.position,
+        [`${prefix}--absolute`]: this.absolute
+      }
+    },
+
+    hasContent() {
+      return (
+        this.visibleItems.length > 0 ||
+        this.clearable ||
+        hasSlotContent(this.$slots.prepend) ||
+        hasSlotContent(this.$slots.append)
+      )
     }
   }
 })
@@ -61,13 +94,34 @@ export default DitoComponent.component('DitoAffixes', {
 @import '../styles/_imports';
 
 .dito-affixes {
+  $self: &;
+
   @include user-select(none);
 
   display: flex;
   align-items: center;
   gap: $input-padding-hor;
 
-  @at-root .dito-input & {
+  &--absolute {
+    position: absolute;
+    inset: $border-width;
+    margin: $input-padding-ver $input-padding-hor;
+    pointer-events: none;
+
+    > * {
+      pointer-events: auto;
+    }
+
+    &#{$self}--prefix {
+      right: unset;
+    }
+
+    &#{$self}--suffix {
+      left: unset;
+    }
+  }
+
+  @at-root .dito-component & {
     color: $color-grey;
 
     .dito-icon--disabled {
@@ -75,8 +129,44 @@ export default DitoComponent.component('DitoAffixes', {
     }
   }
 
-  @at-root .dito-input:focus-within & {
+  @at-root .dito-component:focus-within:not(:has(.dito-component)) & {
     color: $color-active;
   }
+
+  &__clear {
+    --size: #{calc($input-height - 4 * $border-width)};
+
+    display: none;
+    position: relative;
+    cursor: pointer;
+    width: var(--size);
+    height: var(--size);
+    border-radius: $border-radius;
+    margin: (-$input-padding-ver + $border-width)
+      (-$input-padding-hor + $border-width);
+    padding: 0;
+    border: 0;
+
+    @at-root .dito-component:hover:not(:has(.dito-component)) & {
+      display: block;
+    }
+
+    &::before {
+      @extend %icon-clear;
+
+      color: $color-grey;
+    }
+
+    &:hover::before {
+      color: $color-black;
+    }
+  }
+
+  // Hide other affixes when clear button is shown
+  // prettier-ignore
+  @at-root .dito-component:hover:not(:has(.dito-component))
+        #{$self}:has(#{$self}__clear) > *:not(#{$self}__clear) {
+      display: none;
+    }
 }
 </style>

package/src/components/DitoLabel.vue

@@ -15,6 +15,7 @@ component.dito-label(
   )
     DitoAffixes.dito-label__prefix(
       :items="prefixes"
+      position="prefix"
       :parentContext="context"
     )
     label(
@@ -24,6 +25,7 @@ component.dito-label(
     )
     DitoAffixes.dito-label__suffix(
       :items="suffixes"
+      position="suffix"
       :parentContext="context"
     )
     .dito-info(
@@ -213,6 +215,7 @@ export default DitoComponent.component('DitoLabel', {
   @at-root button#{&} {
     border: 0;
     padding: 0;
+    background: none;
     text-align: start;
 
     &:hover {

package/src/styles/_button.scss

@@ -109,37 +109,6 @@
       cursor: grabbing;
     }
   }
-
-  &--overlay {
-    $overlay-inset: calc(2 * $border-width);
-
-    position: absolute;
-    inset: $overlay-inset;
-    left: unset;
-    padding: 0;
-    border: 0;
-    border-radius: $border-radius;
-    cursor: pointer;
-
-    &.dito-button--clear {
-      width: calc(2em - 2 * ($border-width + $overlay-inset));
-      display: none;
-
-      @at-root .dito-component:hover:not(:has(.dito-component)) & {
-        display: block;
-      }
-
-      &::before {
-        @extend %icon-clear;
-
-        color: $color-grey;
-      }
-
-      &:hover::before {
-        color: $color-black;
-      }
-    }
-  }
 }
 
 .dito-buttons {

package/src/types/DitoTypeButton.vue

@@ -13,12 +13,16 @@ DitoButton.dito-button(
     DitoAffixes(
       v-if="prefixes.length > 0"
       :items="prefixes"
+      position="prefix"
+      :disabled="disabled"
       :parentContext="context"
     )
   template(#suffix)
     DitoAffixes(
       v-if="suffixes.length > 0"
       :items="suffixes"
+      position="suffix"
+      :disabled="disabled"
       :parentContext="context"
     )
     .dito-info(

package/src/types/DitoTypeColor.vue

@@ -4,24 +4,36 @@ DitoTrigger.dito-color(
   trigger="focus"
 )
   template(#trigger)
-    .dito-input(:class="{ 'dito-input--focus': showPopup }")
-      input(
-        :id="dataPath"
-        ref="element"
-        v-model="hexValue"
-        type="input"
-        size="8"
-        v-bind="attributes"
-      )
-      .dito-color__preview(
-        v-if="value"
-      )
-        div(:style="{ background: `#${hexValue || '00000000'}` }")
-      button.dito-button--clear.dito-button--overlay(
-        v-if="showClearButton"
-        :disabled="disabled"
-        @click.stop="clear"
-      )
+    DitoInput(
+      :id="dataPath"
+      ref="element"
+      v-model="hexValue"
+      type="input"
+      size="8"
+      :focused="showPopup"
+      v-bind="attributes"
+    )
+      template(#prefix)
+        DitoAffixes(
+          :items="schema.prefix"
+          position="prefix"
+          :disabled="disabled"
+          :parentContext="context"
+        )
+      template(#suffix)
+        DitoAffixes(
+          :items="schema.suffix"
+          position="suffix"
+          :clearable="showClearButton"
+          :disabled="disabled"
+          :parentContext="context"
+          @clear="clear"
+        )
+          template(#append)
+            .dito-color__preview(
+              v-if="value"
+            )
+              div(:style="{ background: `#${hexValue || '00000000'}` }")
   template(#popup)
     SketchPicker.dito-color__picker(
       v-model="colorValue"
@@ -35,8 +47,9 @@ DitoTrigger.dito-color(
 import tinycolor from 'tinycolor2'
 import { Sketch as SketchPicker } from '@lk77/vue3-color'
 import { isObject, isString } from '@ditojs/utils'
-import { DitoTrigger } from '@ditojs/ui/src'
+import { DitoTrigger, DitoInput } from '@ditojs/ui/src'
 import DitoTypeComponent from '../DitoTypeComponent.js'
+import DitoAffixes from '../components/DitoAffixes.vue'
 import { getSchemaAccessor } from '../utils/accessor.js'
 
 // Monkey-patch the `SketchPicker's` `hex` computed property to return lowercase
@@ -48,7 +61,7 @@ SketchPicker.computed.hex = function () {
 
 // @vue/component
 export default DitoTypeComponent.register('color', {
-  components: { DitoTrigger, SketchPicker },
+  components: { DitoTrigger, DitoInput, DitoAffixes, SketchPicker },
 
   data() {
     return {
@@ -214,7 +227,7 @@ $color-swatch-radius: $border-radius - $border-width;
 
 .dito-color {
   .dito-input {
-    display: block;
+    display: flex;
     position: relative;
 
     input {
@@ -224,10 +237,6 @@ $color-swatch-radius: $border-radius - $border-width;
     }
   }
 
-  .dito-button--clear {
-    margin-right: $color-swatch-width;
-  }
-
   &__picker {
     margin: $popup-margin;
     border: $border-style;
@@ -238,15 +247,14 @@ $color-swatch-radius: $border-radius - $border-width;
 
   &__preview {
     background: $pattern-transparency;
+    margin: (-$input-padding-ver) (-$input-padding-hor);
+    margin-left: 0;
     border-left: $border-style;
 
     &,
     div {
-      position: absolute;
       width: $color-swatch-width;
-      top: 0;
-      right: 0;
-      bottom: 0;
+      height: calc($input-height - 2 * $border-width);
       border-top-right-radius: $color-swatch-radius;
       border-bottom-right-radius: $color-swatch-radius;
     }

package/src/types/DitoTypeDate.vue

@@ -12,18 +12,20 @@
     template(#prefix)
       DitoAffixes(
         :items="schema.prefix"
+        position="prefix"
+        absolute
+        :disabled="disabled"
         :parentContext="context"
       )
     template(#suffix)
       DitoAffixes(
         :items="schema.suffix"
-        :parentContext="context"
-      )
-      button.dito-button--clear.dito-button--overlay(
-        v-if="showClearButton"
+        position="suffix"
+        absolute
+        :clearable="showClearButton"
         :disabled="disabled"
-        @click.stop="clear"
-        @mousedown.stop
+        :parentContext="context"
+        @clear="clear"
       )
 </template>
 

package/src/types/DitoTypeMultiselect.vue

@@ -1,14 +1,17 @@
 <template lang="pug">
 .dito-multiselect
   .dito-multiselect__inner
+    DitoAffixes(
+      :items="schema.prefix"
+      position="prefix"
+      absolute
+      :disabled="disabled"
+      :parentContext="context"
+    )
     VueMultiselect(
       ref="element"
       v-model="selectedOptions"
-      :class=`{
-        'multiselect--multiple': multiple,
-        'multiselect--loading': isLoading,
-        'multiselect--highlight': showHighlight
-      }`
+      :class="multiselectClasses"
       :showLabels="false"
       :placeholder="placeholder"
       tagPlaceholder="Press enter to add new tag"
@@ -31,11 +34,14 @@
       @tag="onAddTag"
       @search-change="onSearchChange"
     )
-    button.dito-button--clear.dito-button--overlay(
-      v-if="showClearButton"
-      type="button"
+    DitoAffixes(
+      :items="schema.suffix"
+      position="suffix"
+      absolute
+      :clearable="showClearButton"
       :disabled="disabled"
-      @click="clear"
+      :parentContext="context"
+      @clear="clear"
     )
   //- Edit button is never disabled, even if the field is disabled.
   DitoEditButtons(
@@ -56,6 +62,7 @@ import DitoTypeComponent from '../DitoTypeComponent.js'
 import DitoContext from '../DitoContext.js'
 import TypeMixin from '../mixins/TypeMixin.js'
 import OptionsMixin from '../mixins/OptionsMixin.js'
+import DitoAffixes from '../components/DitoAffixes.vue'
 import VueMultiselect from 'vue-multiselect'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { isBoolean } from '@ditojs/utils'
@@ -63,7 +70,7 @@ import { isBoolean } from '@ditojs/utils'
 // @vue/component
 export default DitoTypeComponent.register('multiselect', {
   mixins: [OptionsMixin],
-  components: { VueMultiselect },
+  components: { DitoAffixes, VueMultiselect },
 
   data() {
     return {
@@ -125,6 +132,15 @@ export default DitoTypeComponent.register('multiselect', {
       default: false
     }),
 
+    multiselectClasses() {
+      const prefix = 'multiselect'
+      return {
+        [`${prefix}--multiple`]: this.multiple,
+        [`${prefix}--loading`]: this.isLoading,
+        [`${prefix}--highlight`]: this.showHighlight
+      }
+    },
+
     placeholder() {
       let { placeholder, searchable, taggable } = this.schema
       if (isBoolean(placeholder)) {
@@ -239,6 +255,8 @@ $tag-line-height: 1em;
   &__inner {
     flex: 1;
     position: relative;
+    display: flex;
+    align-items: center;
   }
 
   .dito-edit-buttons {

package/src/types/DitoTypeNumber.vue

@@ -12,17 +12,18 @@ DitoInput.dito-number(
   template(#prefix)
     DitoAffixes(
       :items="schema.prefix"
+      position="prefix"
+      :disabled="disabled"
       :parentContext="context"
     )
   template(#suffix)
     DitoAffixes(
       :items="schema.suffix"
-      :parentContext="context"
-    )
-    button.dito-button--clear.dito-button--overlay(
-      v-if="showClearButton"
+      position="suffix"
+      :clearable="showClearButton"
       :disabled="disabled"
-      @click.stop="clear"
+      :parentContext="context"
+      @clear="clear"
     )
 </template>
 

package/src/types/DitoTypeSelect.vue

@@ -2,6 +2,13 @@
 //- Nesting is needed to make an arrow appear over the select item:
 .dito-select
   .dito-select__inner
+    DitoAffixes(
+      :items="schema.prefix"
+      position="prefix"
+      absolute
+      :disabled="disabled"
+      :parentContext="context"
+    )
     select(
       :id="dataPath"
       ref="element"
@@ -32,10 +39,14 @@
         v-else-if="selectedOption"
       )
         option(:value="selectedValue") {{ getLabelForOption(selectedOption) }}
-    button.dito-button--clear.dito-button--overlay(
-      v-if="showClearButton"
+    DitoAffixes(
+      :items="schema.suffix"
+      position="suffix"
+      absolute
+      :clearable="showClearButton"
       :disabled="disabled"
-      @click="clear"
+      :parentContext="context"
+      @clear="clear"
     )
   //- Edit button is never disabled, even if the field is disabled.
   DitoEditButtons(
@@ -54,10 +65,12 @@
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import OptionsMixin from '../mixins/OptionsMixin.js'
+import DitoAffixes from '../components/DitoAffixes.vue'
 
 // @vue/component
 export default DitoTypeComponent.register('select', {
   mixins: [OptionsMixin],
+  components: { DitoAffixes },
 
   nativeField: true,
 

package/src/types/DitoTypeText.vue

@@ -9,17 +9,18 @@ DitoInput.dito-text(
   template(#prefix)
     DitoAffixes(
       :items="schema.prefix"
+      position="prefix"
+      :disabled="disabled"
       :parentContext="context"
     )
   template(#suffix)
     DitoAffixes(
       :items="schema.suffix"
-      :parentContext="context"
-    )
-    button.dito-button--clear.dito-button--overlay(
-      v-if="showClearButton"
+      position="suffix"
+      :clearable="showClearButton"
       :disabled="disabled"
-      @click.stop="clear"
+      :parentContext="context"
+      @clear="clear"
     )
 </template>