@ditojs/ui 2.71.0 → 2.73.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/ui",
-  "version": "2.71.0",
+  "version": "2.73.0",
   "type": "module",
   "description": "Dito.js UI is a simple UI library, built with Vue.js for use in Dito.js Admin and elsewhere",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/ui",
@@ -41,12 +41,12 @@
     "ie_mob >= 11"
   ],
   "dependencies": {
-    "@ditojs/utils": "^2.71.0",
+    "@ditojs/utils": "^2.73.0",
     "@soda/get-current-script": "^1.0.2"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.71.0",
-    "vite": "^7.3.0"
+    "@ditojs/build": "^2.73.0",
+    "vite": "^7.3.1"
   },
-  "gitHead": "e5a095c7c44de8b6c84994d744612f0fce19eae2"
+  "gitHead": "0afe5ac938419c584db685cddcbd8974ee000d7e"
 }

package/src/components/DitoButton.vue

@@ -0,0 +1,55 @@
+<template lang="pug">
+button.dito-button(
+  :type="type"
+  :title="title"
+  :disabled="disabled"
+  :class="[classes, { 'dito-button--affixed': hasAffixes }]"
+  v-bind="attributes"
+)
+  .dito-button__prefix(
+    v-if="hasAffixes"
+  )
+    slot(name="prefix")
+  .dito-button__text(
+    v-if="text || hasAffixes"
+  ) {{ text || '' }}
+    slot
+  .dito-button__suffix(
+    v-if="hasAffixes"
+  )
+    slot(name="suffix")
+</template>
+
+<script>
+import { hasSlotContent } from '../utils/vue.js'
+
+export default {
+  inheritAttrs: false,
+
+  props: {
+    type: { type: String, default: 'button' },
+    text: { type: String, default: null },
+    title: { type: String, default: null },
+    disabled: { type: Boolean, default: false }
+  },
+
+  computed: {
+    hasAffixes() {
+      return hasSlotContent('prefix') || hasSlotContent('suffix')
+    },
+
+    classes() {
+      return this.$attrs.class
+    },
+
+    attributes() {
+      const { class: _, ...attributes } = this.$attrs
+      return attributes
+    }
+  },
+
+  methods: {
+    hasSlotContent
+  }
+}
+</script>

package/src/components/{DatePicker.vue → DitoDatePicker.vue}

@@ -1,6 +1,6 @@
 <!-- Derived from ATUI, and further extended: https://aliqin.github.io/atui/ -->
 <template lang="pug">
-Trigger.dito-date-picker(
+DitoTrigger.dito-date-picker(
   ref="trigger"
   v-model:show="showPopup"
   trigger="focus"
@@ -11,29 +11,28 @@ Trigger.dito-date-picker(
       v-if="$slots.trigger"
       name="trigger"
     )
-    InputField.dito-date-picker-input(
+    DitoInput.dito-date-picker-input(
       v-else
       ref="input"
       v-model="currentText"
       type="text"
-      :class="{ 'dito-focus': focused }"
-      v-bind="{ placeholder, disabled, ...$attrs }"
+      v-bind="{ placeholder, disabled, focused, ...$attrs }"
       @focus="onFocus(true)"
       @blur="onFocus(false)"
       @keydown="onKeyDown"
       @mousedown.stop="onMouseDown(false)"
     )
-      template(#before)
-        slot(name="before")
-      template(#after)
-        Icon(
+      template(#prefix)
+        slot(name="prefix")
+      template(#suffix)
+        DitoIcon(
           name="calendar"
           :disabled="disabled"
           @mousedown.prevent="onMouseDown(true)"
         )
-        slot(name="after")
+        slot(name="suffix")
   template(#popup)
-    Calendar.dito-date-picker-popup(
+    DitoCalendar.dito-date-picker-popup(
       ref="calendar"
       v-model="currentValue"
       v-bind="{ locale, disabledDate }"
@@ -43,17 +42,17 @@ Trigger.dito-date-picker(
 
 <script>
 import { format, defaultFormats } from '@ditojs/utils'
-import Trigger from './Trigger.vue'
-import Calendar from './Calendar.vue'
-import InputField from './InputField.vue'
-import Icon from './Icon.vue'
+import DitoTrigger from './DitoTrigger.vue'
+import DitoCalendar from './DitoCalendar.vue'
+import DitoInput from './DitoInput.vue'
+import DitoIcon from './DitoIcon.vue'
 import { parseDate, getDatePartAtPosition } from '../utils/date.js'
 import { getSelection, setSelection } from '../utils/selection.js'
 import { getKeyNavigation } from '../utils/event.js'
 import { getTarget } from '../utils/trigger.js'
 
 export default {
-  components: { Trigger, Calendar, InputField, Icon },
+  components: { DitoTrigger, DitoCalendar, DitoInput, DitoIcon },
   emits: ['update:modelValue', 'update:show', 'change', 'focus', 'blur'],
   inheritAttrs: false,
 

package/src/components/{DateTimePicker.vue → DitoDateTimePicker.vue}

@@ -1,27 +1,28 @@
 <template lang="pug">
 .dito-date-time-picker(ref="picker")
-  .dito-date-time-picker__inner(:class="{ 'dito-focus': focused }")
-    InputField.dito-date-time-picker__input(
+  .dito-date-time-picker__inner(
+    :class="{ 'dito-date-time-picker__inner--focus': focused }"
+  )
+    DitoInput.dito-date-time-picker__input(
       ref="input"
       v-model="currentText"
       type="text"
-      :class="{ 'dito-focus': focused }"
-      v-bind="{ placeholder, disabled, ...$attrs }"
+      v-bind="{ placeholder, disabled, focused, ...$attrs }"
       @focus="onFocus(true)"
       @blur="onFocus(false)"
       @keydown="onKeyDown"
       @mousedown.stop="onMouseDown(false)"
     )
-      template(#before)
-        slot(name="before")
-      template(#after)
-        Icon(
+      template(#prefix)
+        slot(name="prefix")
+      template(#suffix)
+        DitoIcon(
           name="calendar"
           :disabled="disabled"
           @mousedown.prevent="onMouseDown(true)"
         )
-        slot(name="after")
-    DatePicker(
+        slot(name="suffix")
+    DitoDatePicker(
       ref="date"
       v-model="currentValue"
       v-model:show="showDate"
@@ -31,7 +32,7 @@
     )
       template(#trigger)
         //- Intentionally empty
-    TimePicker(
+    DitoTimePicker(
       ref="time"
       v-model="currentValue"
       v-model:show="showTime"
@@ -45,16 +46,16 @@
 
 <script>
 import { format, defaultFormats, assignDeeply } from '@ditojs/utils'
-import InputField from './InputField.vue'
-import DatePicker from './DatePicker.vue'
-import TimePicker from './TimePicker.vue'
-import Icon from './Icon.vue'
+import DitoInput from './DitoInput.vue'
+import DitoDatePicker from './DitoDatePicker.vue'
+import DitoTimePicker from './DitoTimePicker.vue'
+import DitoIcon from './DitoIcon.vue'
 import { parseDate } from '../utils/date.js'
 import { getSelection, setSelection } from '../utils/selection.js'
 import { getKeyNavigation } from '../utils/event.js'
 
 export default {
-  components: { InputField, DatePicker, TimePicker, Icon },
+  components: { DitoInput, DitoDatePicker, DitoTimePicker, DitoIcon },
   emits: ['update:modelValue', 'change', 'focus', 'blur'],
   inheritAttrs: false,
 

package/src/components/{Icon.vue → DitoIcon.vue}

@@ -1,10 +1,5 @@
 <template lang="pug">
-i.dito-icon(
-  :class=`{
-    ['dito-icon--' + name]: true,
-    'dito-icon--disabled': disabled
-  }`
-)
+i.dito-icon(:class="classes")
 </template>
 
 <script>
@@ -18,6 +13,16 @@ export default {
       type: Boolean,
       default: false
     }
+  },
+
+  computed: {
+    classes() {
+      const prefix = 'dito-icon'
+      return {
+        [`${prefix}--${this.name}`]: true,
+        [`${prefix}--disabled`]: this.disabled
+      }
+    }
   }
 }
 </script>
@@ -40,17 +45,17 @@ export default {
 }
 
 .dito-icon {
+  position: relative;
+  width: 1em;
+  height: 1em;
+
   @at-root .dito-input & {
-    position: absolute;
-    inset: $border-width;
-    left: unset;
-    width: 2em;
     font-style: normal;
     border-radius: $border-radius;
     color: $color-grey;
     background: $color-white;
 
-    &--disabled {
+    &.dito-icon--disabled {
       color: $color-light;
     }
   }

package/src/components/{InputField.vue → DitoInput.vue}

@@ -1,6 +1,9 @@
 <template lang="pug">
-.dito-input(:class="classes")
-  slot(name="before")
+.dito-input(
+  :class="classes"
+  @mousedown.prevent="onMouseDown"
+)
+  slot(name="prefix")
   input(
     :id="id"
     ref="input"
@@ -16,7 +19,7 @@
     :aria-label="title"
     v-bind="attributes"
   )
-  slot(name="after")
+  slot(name="suffix")
 </template>
 
 <script>
@@ -33,21 +36,25 @@ export default {
     disabled: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
     autofocus: { type: Boolean, default: false },
+    focused: { type: Boolean, default: false },
     placeholder: { type: String, default: null },
     autocomplete: { type: String, default: 'off' }
   },
 
   data() {
     return {
-      currentValue: this.modelValue,
-      hovering: false,
-      focused: false
+      currentValue: this.modelValue
     }
   },
 
   computed: {
     classes() {
-      return this.$attrs.class
+      return [
+        this.$attrs.class,
+        {
+          'dito-input--focus': this.focused
+        }
+      ]
     },
 
     attributes() {
@@ -88,6 +95,14 @@ export default {
 
     blur() {
       this.input.blur()
+    },
+
+    onMouseDown() {
+      // Focus the input when the outer container is clicked, e.g. when clicking
+      // on affixes.
+      if (!this.disabled && !this.readonly) {
+        this.focus()
+      }
     }
   }
 }
@@ -97,15 +112,17 @@ export default {
 @import '../styles/_imports';
 
 .dito-input {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
 
   @extend %input;
 
   input {
     // Inherit all styling from .dito-input
     all: inherit;
+    flex: 1;
+    min-width: 0;
     display: inline-block;
-    width: 100%;
     border: 0;
     margin: 0;
     padding: 0;

package/src/components/{Pagination.vue → DitoPagination.vue}

@@ -7,7 +7,7 @@
     template(
       v-if="total > 0"
     ) {{ first }} – {{ last }} / {{ total }}
-  .dito-buttons.dito-buttons-round(
+  .dito-buttons.dito-buttons--round(
     v-if="numPages > 1"
   )
     button.dito-button(
@@ -136,13 +136,11 @@ export default {
 
   methods: {
     getButtonClasses(button) {
-      const classes = {
-        'dito-selected': button.active
+      const prefix = 'dito-button'
+      return {
+        [`${prefix}--${button.type}`]: button.type,
+        [`${prefix}--active`]: button.active
       }
-      if (button.type) {
-        classes[`dito-button-${button.type}`] = true
-      }
-      return classes
     },
 
     onClickButton(button) {
@@ -180,19 +178,19 @@ export default {
     font-variant-numeric: tabular-nums;
     padding: 0 0.5em;
 
-    &-prev,
-    &-next {
+    &--prev,
+    &--next {
       &::before {
         @extend %icon-arrow;
       }
     }
 
-    &-prev::before {
+    &--prev::before {
       transform: scaleX(-1);
     }
 
-    &-ellipsis-prev,
-    &-ellipsis-next {
+    &--ellipsis-prev,
+    &--ellipsis-next {
       background: none;
       border: 0;
       padding: 0;
@@ -216,7 +214,7 @@ export default {
       }
     }
 
-    &-ellipsis-prev::before {
+    &--ellipsis-prev::before {
       transform: scaleX(-1);
     }
   }

package/src/components/{SwitchButton.vue → DitoSwitch.vue}

@@ -3,7 +3,7 @@
   :class="classes"
   :style="styles"
 )
-  .dito-switch-pane
+  .dito-switch__pane
     input(
       :id="id"
       ref="input"
@@ -13,8 +13,8 @@
       :name="name"
       :disabled="disabled"
     )
-    .dito-switch-button
-    span.dito-switch-label(
+    .dito-switch__button
+    span.dito-switch__label(
       v-if="labels"
     )
       slot(
@@ -48,11 +48,12 @@ export default {
 
   computed: {
     classes() {
+      const prefix = 'dito-switch'
       return [
         this.$attrs.class,
         {
-          'dito-checked': this.checked,
-          'dito-disabled': this.disabled
+          [`${prefix}--checked`]: this.checked,
+          [`${prefix}--disabled`]: this.disabled
         }
       ]
     },
@@ -97,6 +98,8 @@ export default {
 @import '../styles/_imports';
 
 .dito-switch {
+  $self: &;
+
   // Use whole multiples of `rem` for sizes and `px` margins/padding along
   // with `calc()` to end up with even pixel sizes.
   --switch-width: 4em;
@@ -116,14 +119,14 @@ export default {
   vertical-align: bottom;
   @include user-select(none);
 
-  .dito-switch-pane {
+  &__pane {
     position: relative;
     width: var(--width);
     height: var(--height);
   }
 
-  .dito-switch-pane,
-  .dito-switch-label {
+  &__pane,
+  &__label {
     top: 50%;
     transform: translateY(-50%);
   }
@@ -140,7 +143,7 @@ export default {
       background-color 0.3s;
   }
 
-  .dito-switch-button {
+  &__button {
     --size: calc(var(--height) - 2 * var(--switch-padding));
 
     position: absolute;
@@ -155,39 +158,39 @@ export default {
     transform: translateX(0);
   }
 
-  .dito-switch-button,
-  .dito-switch-label {
+  &__button,
+  &__label {
     pointer-events: none;
   }
 
-  .dito-switch-label {
+  &__label {
     position: absolute;
     right: var(--label-margin);
     text-transform: uppercase;
     color: $color-white;
   }
 
-  &.dito-checked {
+  &--checked {
     input {
       background: $color-active;
     }
 
-    .dito-switch-button {
+    #{$self}__button {
       transform: translateX(var(--offset));
     }
 
-    .dito-switch-label {
+    #{$self}__label {
       left: var(--label-margin);
       right: unset;
     }
   }
 
-  &.dito-disabled {
+  &--disabled {
     @extend %button-disabled;
   }
 
   &:focus-within:not(:hover) {
-    .dito-switch-button {
+    #{$self}__button {
       box-shadow: $shadow-focus;
     }
   }

package/src/components/{TimePicker.vue → DitoTimePicker.vue}

@@ -1,6 +1,6 @@
 <!-- Derived from ATUI, and further extended: https://aliqin.github.io/atui/ -->
 <template lang="pug">
-Trigger.dito-time-picker(
+DitoTrigger.dito-time-picker(
   ref="trigger"
   v-model:show="showPopup"
   trigger="focus"
@@ -11,27 +11,26 @@ Trigger.dito-time-picker(
       v-if="$slots.trigger"
       name="trigger"
     )
-    InputField.dito-time-picker-input(
+    DitoInput.dito-time-picker-input(
       v-else
       ref="input"
       v-model="currentText"
       type="text"
-      :class="{ 'dito-focus': focused }"
-      v-bind="{ placeholder, disabled, ...$attrs }"
+      v-bind="{ placeholder, disabled, focused, ...$attrs }"
       @focus="onFocus(true)"
       @blur="onFocus(false)"
       @keydown="onKeyDown"
       @mousedown.stop="onMouseDown(false)"
     )
-      template(#before)
-        slot(name="before")
-      template(#after)
-        Icon(
+      template(#prefix)
+        slot(name="prefix")
+      template(#suffix)
+        DitoIcon(
           name="clock"
           :disabled="disabled"
           @mousedown.prevent="onMouseDown(true)"
         )
-        slot(name="after")
+        slot(name="suffix")
   template(#popup)
     .dito-time-picker-popup
       .dito-time-picker-panel
@@ -68,16 +67,16 @@ Trigger.dito-time-picker(
 
 <script>
 import { format, defaultFormats } from '@ditojs/utils'
-import Trigger from './Trigger.vue'
-import InputField from './InputField.vue'
-import Icon from './Icon.vue'
+import DitoTrigger from './DitoTrigger.vue'
+import DitoInput from './DitoInput.vue'
+import DitoIcon from './DitoIcon.vue'
 import { alterDate, parseDate, getDatePartAtPosition } from '../utils/date.js'
 import { getSelection, setSelection } from '../utils/selection.js'
 import { getKeyNavigation } from '../utils/event.js'
 import { getTarget } from '../utils/trigger.js'
 
 export default {
-  components: { Trigger, InputField, Icon },
+  components: { DitoTrigger, DitoInput, DitoIcon },
   emits: ['update:modelValue', 'update:show', 'change', 'focus', 'blur'],
   inheritAttrs: false,
 

package/src/components/index.js

@@ -1,9 +1,10 @@
-export { default as Calendar } from './Calendar.vue'
-export { default as DatePicker } from './DatePicker.vue'
-export { default as DateTimePicker } from './DateTimePicker.vue'
-export { default as Icon } from './Icon.vue'
-export { default as InputField } from './InputField.vue'
-export { default as Pagination } from './Pagination.vue'
-export { default as SwitchButton } from './SwitchButton.vue'
-export { default as TimePicker } from './TimePicker.vue'
-export { default as Trigger } from './Trigger.vue'
+export { default as DitoButton } from './DitoButton.vue'
+export { default as DitoCalendar } from './DitoCalendar.vue'
+export { default as DitoDatePicker } from './DitoDatePicker.vue'
+export { default as DitoDateTimePicker } from './DitoDateTimePicker.vue'
+export { default as DitoIcon } from './DitoIcon.vue'
+export { default as DitoInput } from './DitoInput.vue'
+export { default as DitoPagination } from './DitoPagination.vue'
+export { default as DitoSwitch } from './DitoSwitch.vue'
+export { default as DitoTimePicker } from './DitoTimePicker.vue'
+export { default as DitoTrigger } from './DitoTrigger.vue'