@ditojs/ui 2.72.0 → 2.73.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/ui",
-  "version": "2.72.0",
+  "version": "2.73.1",
   "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.72.0",
+    "@ditojs/utils": "^2.73.0",
     "@soda/get-current-script": "^1.0.2"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.72.0",
+    "@ditojs/build": "^2.73.0",
     "vite": "^7.3.1"
   },
-  "gitHead": "6af5f5bad3ff155436e4344d9c422933ff5ee7d8"
+  "gitHead": "f40a5de8cb0b711af68838e386a182e3d94ee106"
 }

package/src/components/DitoButton.vue

@@ -0,0 +1,54 @@
+<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(this.$slots.prefix) ||
+        hasSlotContent(this.$slots.suffix)
+      )
+    },
+
+    classes() {
+      return this.$attrs.class
+    },
+
+    attributes() {
+      const { class: _, ...attributes } = this.$attrs
+      return attributes
+    }
+  }
+}
+</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,7 +11,7 @@ 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"
@@ -22,17 +22,17 @@ Trigger.dito-date-picker(
       @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 }"
@@ -42,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}

@@ -3,7 +3,7 @@
   .dito-date-time-picker__inner(
     :class="{ 'dito-date-time-picker__inner--focus': focused }"
   )
-    InputField.dito-date-time-picker__input(
+    DitoInput.dito-date-time-picker__input(
       ref="input"
       v-model="currentText"
       type="text"
@@ -13,16 +13,16 @@
       @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"
@@ -32,7 +32,7 @@
     )
       template(#trigger)
         //- Intentionally empty
-    TimePicker(
+    DitoTimePicker(
       ref="time"
       v-model="currentValue"
       v-model:show="showTime"
@@ -46,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>
@@ -92,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()
+      }
     }
   }
 }
@@ -101,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/{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,7 +11,7 @@ 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"
@@ -22,15 +22,15 @@ Trigger.dito-time-picker(
       @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
@@ -67,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'

package/src/styles/components/_button.scss

@@ -17,6 +17,27 @@
   min-height: 1.5em;
   @include user-select(none);
 
+  &--affixed {
+    display: inline-grid;
+    grid-template-columns: 1fr auto 1fr;
+  }
+
+  &__text,
+  &__prefix,
+  &__suffix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__prefix {
+    justify-content: flex-start;
+  }
+
+  &__suffix {
+    justify-content: flex-end;
+  }
+
   &:focus {
     border-color: $color-active;
   }