@ditojs/ui 3.2.6 → 3.3.0

package/src/components/DitoDatePicker.vue

@@ -1,58 +1,48 @@
 <!-- Derived from ATUI, and further extended: https://aliqin.github.io/atui/ -->
 <template lang="pug">
-DitoTrigger.dito-date-picker(
-  ref="trigger"
-  v-model:show="showPopup"
-  trigger="focus"
-  v-bind="{ transition, placement, disabled, target }"
+DitoPickerInput.dito-date-picker(
+  ref="pickerInput"
+  v-bind="{ modelValue, show, transition, placement, target, disabled }"
+  :placeholder="placeholder"
+  :formatOptions="formatOptions"
+  icon="calendar"
+  toggleLabel="Choose date"
+  inputClass="dito-date-picker-input"
+  :inputAttributes="$attrs"
+  :isValueDisabled="disabledDate"
+  :handlePanelKey="handlePanelKey"
+  @update:modelValue="value => $emit('update:modelValue', value)"
+  @update:show="show => $emit('update:show', show)"
+  @change="value => $emit('change', value)"
+  @focus="$emit('focus')"
+  @blur="$emit('blur')"
 )
-  template(#trigger)
-    slot(
-      v-if="$slots.trigger"
-      name="trigger"
-    )
-    DitoInput.dito-date-picker-input(
-      v-else
-      ref="input"
-      v-model="currentText"
-      type="text"
-      v-bind="{ placeholder, disabled, focused, ...$attrs }"
-      @focus="onFocus(true)"
-      @blur="onFocus(false)"
-      @keydown="onKeyDown"
-      @mousedown.stop="onMouseDown(false)"
-    )
-      template(#prefix)
-        slot(name="prefix")
-      template(#suffix)
-        DitoIcon(
-          name="calendar"
-          :disabled="disabled"
-          @mousedown.prevent="onMouseDown(true)"
-        )
-        slot(name="suffix")
-  template(#popup)
+  template(
+    v-if="$slots.trigger"
+    #trigger
+  )
+    slot(name="trigger")
+  template(#prefix)
+    slot(name="prefix")
+  template(#suffix)
+    slot(name="suffix")
+  template(#popup="{ value, setValue, close }")
     DitoCalendar.dito-date-picker-popup(
       ref="calendar"
-      v-model="currentValue"
+      :modelValue="value"
       v-bind="{ locale, disabledDate }"
-      @select="showPopup = false"
+      @update:modelValue="setValue"
+      @select="close"
     )
 </template>
 
 <script>
-import { format, defaultFormats } from '@ditojs/utils'
-import DitoTrigger from './DitoTrigger.vue'
+import { defaultFormats } from '@ditojs/utils'
+import DitoPickerInput from './DitoPickerInput.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: { DitoTrigger, DitoCalendar, DitoInput, DitoIcon },
+  components: { DitoPickerInput, DitoCalendar },
   emits: ['update:modelValue', 'update:show', 'change', 'focus', 'blur'],
   inheritAttrs: false,
 
@@ -75,125 +65,26 @@ export default {
     disabledDate: { type: Function, default: () => false }
   },
 
-  data() {
-    return {
-      currentValue: this.modelValue,
-      showPopup: this.show,
-      inputFocused: false
-    }
-  },
-
   computed: {
-    focused() {
-      return this.inputFocused || this.showPopup
-    },
-
-    input() {
-      return getTarget(this)?.querySelector('input')
-    },
-
     formatOptions() {
       return {
         locale: this.locale,
         ...this.format
       }
-    },
-
-    currentText: {
-      get() {
-        return format(this.currentValue, this.formatOptions) || ''
-      },
-
-      set(value) {
-        const date = parseDate(value, this.formatOptions)
-        if (date) {
-          this.currentValue = date
-        }
-      }
-    }
-  },
-
-  watch: {
-    modelValue(to, from) {
-      if (+to !== +from) {
-        this.currentValue = to
-      }
-    },
-
-    currentValue(value) {
-      if (+value !== +this.modelValue) {
-        this.$emit('update:modelValue', value)
-        this.$emit('change', value)
-      }
-    },
-
-    show(show) {
-      this.showPopup = show
-    },
-
-    showPopup(to, from) {
-      if (to ^ from) {
-        this.$emit('update:show', to)
-      }
-    },
-
-    focused(to, from) {
-      if (to ^ from) {
-        this.$emit(to ? 'focus' : 'blur')
-      }
     }
   },
 
   methods: {
-    onFocus(focus) {
-      this.inputFocused = focus
-      this.showPopup = focus
-    },
-
-    onKeyDown(event) {
-      if (event.key === 'Escape') {
-        this.showPopup = false
-        event.preventDefault()
-        return
-      }
-      const { ver: step, enter } = getKeyNavigation(event)
-      if (step || enter) {
-        event.preventDefault()
-
-        const position = getSelection(this.input)?.start
-        const getDatePart = position =>
-          getDatePartAtPosition(this.currentText, position, this.formatOptions)
-
-        if (step && !this.showPopup) {
-          this.showPopup = true
-        } else {
-          const { calendar } = this.$refs
-          if (calendar) {
-            const { name: mode, start } = getDatePart(position) || {}
-            if (
-              mode &&
-              calendar.navigate({ step, enter, mode, update: true })
-            ) {
-              this.$nextTick(() => setSelection(this.input, getDatePart(start)))
-            }
-          }
-        }
-      }
-    },
-
-    onMouseDown(toggle) {
-      this.showPopup = !this.disabled && (!toggle || !this.showPopup)
-      if (this.showPopup) {
-        this.focus()
-      }
+    handlePanelKey(event, part) {
+      return this.$refs.calendar?.handleKey(event, part) ?? false
     },
 
     focus() {
-      this.input.focus()
+      this.$refs.pickerInput.focus()
     },
 
     blur() {
-      this.input.blur()
+      this.$refs.pickerInput.blur()
     }
   }
 }
@@ -204,8 +95,6 @@ export default {
 
 .dito-date-picker {
   .dito-input {
-    font-variant-numeric: tabular-nums;
-    width: 100%;
     min-width: 8em;
   }
 }

package/src/components/DitoDateTimePicker.vue

@@ -1,61 +1,52 @@
 <template lang="pug">
-.dito-date-time-picker(ref="picker")
-  .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"
-      v-bind="{ placeholder, disabled, focused, ...$attrs }"
-      @focus="onFocus(true)"
-      @blur="onFocus(false)"
-      @keydown="onKeyDown"
-      @mousedown.stop="onMouseDown(false)"
+DitoPickerInput.dito-date-time-picker(
+  ref="pickerInput"
+  v-bind="{ modelValue, transition, disabled, placeholder, formatOptions }"
+  :placement="activePanel === 'time' ? 'bottom-right' : 'bottom-left'"
+  icon="calendar"
+  toggleLabel="Choose date and time"
+  inputClass="dito-date-time-picker__input"
+  :inputAttributes="$attrs"
+  :handlePanelKey="handlePanelKey"
+  @update:modelValue="value => $emit('update:modelValue', value)"
+  @change="value => $emit('change', value)"
+  @focus="$emit('focus')"
+  @blur="$emit('blur')"
+  @caret-part-change="onCaretPartChange"
+)
+  template(#prefix)
+    slot(name="prefix")
+  template(#suffix)
+    slot(name="suffix")
+  template(#popup="{ value, setValue, close }")
+    DitoCalendar.dito-date-picker-popup(
+      v-if="activePanel === 'date'"
+      ref="calendar"
+      :modelValue="value"
+      :locale="locale"
+      @update:modelValue="setValue"
+      @select="close"
     )
-      template(#prefix)
-        slot(name="prefix")
-      template(#suffix)
-        DitoIcon(
-          name="calendar"
-          :disabled="disabled"
-          @mousedown.prevent="onMouseDown(true)"
-        )
-        slot(name="suffix")
-    DitoDatePicker(
-      ref="date"
-      v-model="currentValue"
-      v-model:show="showDate"
-      placement="bottom-left"
-      :target="$refs.picker"
-      v-bind="attributes"
+    DitoTimePanel(
+      v-else
+      ref="timePanel"
+      :modelValue="value"
+      @update:modelValue="setValue"
+      @select="close"
     )
-      template(#trigger)
-        //- Intentionally empty
-    DitoTimePicker(
-      ref="time"
-      v-model="currentValue"
-      v-model:show="showTime"
-      placement="bottom-right"
-      :target="$refs.picker"
-      v-bind="attributes"
-    )
-      template(#trigger)
-        //- Intentionally empty
 </template>
 
 <script>
-import { format, defaultFormats, assignDeeply } from '@ditojs/utils'
-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'
-
+import { defaultFormats, assignDeeply, isPlainObject } from '@ditojs/utils'
+import DitoPickerInput from './DitoPickerInput.vue'
+import DitoCalendar from './DitoCalendar.vue'
+import DitoTimePanel from './DitoTimePanel.vue'
+import { isTimePartName } from '../utils/time.js'
+
+// Shows a calendar below the date and a time panel below the time, depending
+// on where the caret is in the input.
 export default {
-  components: { DitoInput, DitoDatePicker, DitoTimePicker, DitoIcon },
+  components: { DitoPickerInput, DitoCalendar, DitoTimePanel },
   emits: ['update:modelValue', 'change', 'focus', 'blur'],
   inheritAttrs: false,
 
@@ -70,173 +61,76 @@ export default {
 
   data() {
     return {
-      currentValue: this.modelValue,
-      showDate: false,
-      showTime: false,
-      inputFocused: false,
-      dateFocused: false,
-      timeFocused: false,
-      closedMode: null
+      // The panel that the popup shows, 'date' or 'time'.
+      activePanel: 'date'
     }
   },
 
   computed: {
-    attributes() {
-      const { transition, disabled, locale, formatOptions: format } = this
-      return { transition, disabled, locale, format }
-    },
-
-    focused() {
-      return this.inputFocused || this.showDate || this.showTime
-    },
-
-    input() {
-      return this.$refs.input.input
-    },
-
     formatOptions() {
-      return assignDeeply(
+      const options = assignDeeply(
         {
           locale: this.locale,
           time: defaultFormats.time,
           date: defaultFormats.date
         },
-        {
-          date: {
-            month: 'short',
-            format: (value, type, options) =>
-              type === 'literal' && /\bat\b/.test(value)
-                ? ', '
-                : this.format?.date?.format?.(value, type, options) ?? value
-          }
-        },
+        { date: { month: 'short' } },
         this.format
       )
-    },
-
-    timeIndex() {
-      const text = this.currentText
-      if (text) {
-        const time = text.match(/([\S]+\s*)$/)?.[1]
-        if (time) {
-          return text.length - time.length
-        }
-      }
-      return null
-    },
-
-    currentText: {
-      get() {
-        return format(this.currentValue, this.formatOptions) || ''
-      },
-
-      set(value) {
-        const date = parseDate(value, this.formatOptions)
-        if (date) {
-          const selection = getSelection(this.input)
-          this.currentValue = date
-          this.$nextTick(() => setSelection(this.input, selection))
-        }
-      }
-    }
-  },
-
-  watch: {
-    modelValue(to, from) {
-      if (+to !== +from) {
-        this.currentValue = to
-      }
-    },
-
-    currentValue(value) {
-      if (+value !== +this.modelValue) {
-        this.$emit('update:modelValue', value)
-        this.$emit('change', value)
-      }
-    },
-
-    focused(to, from) {
-      if (to ^ from) {
-        this.$emit(to ? 'focus' : 'blur')
+      // Wrap the merged date `format()`, which may be a custom one, to
+      // separate the date and time with a comma rather than "at". `date` can
+      // also be `true` for the default format, or `false` to omit the date.
+      if (isPlainObject(options.date)) {
+        const { format } = options.date
+        options.date.format = (value, type, formatOptions) =>
+          type === 'literal' && /\bat\b/.test(value)
+            ? ', '
+            : format?.(value, type, formatOptions) ?? value
       }
+      return options
     }
   },
 
   methods: {
-    onFocus(focus) {
-      this.inputFocused = focus
-      if (focus) {
-        this.updatePopups()
-      } else {
-        this.showDate = false
-        this.showTime = false
-      }
-    },
-
-    onMouseDown(toggle) {
-      if (toggle && (this.showDate || this.showTime)) {
-        this.showDate = false
-        this.showTime = false
-      } else if (!this.disabled) {
-        this.focus()
-        requestAnimationFrame(() => this.updatePopups())
-      }
+    getPanelForPart(name) {
+      return isTimePartName(name) ? 'time' : 'date'
     },
 
-    onKeyDown(event) {
-      const mode = this.getMode(event)
-      this.$refs[mode].onKeyDown(event)
-      if (event.defaultPrevented) {
-        this.closedMode = mode
-      } else if (mode !== this.closedMode) {
-        this.updatePopups(mode)
+    onCaretPartChange(name) {
+      const panel = this.getPanelForPart(name)
+      if (panel !== this.activePanel) {
+        this.activePanel = panel
+        // Show the other panel, also if the popup was closed for this one.
+        this.$refs.pickerInput.open()
       }
     },
 
-    getMode(event = null) {
-      const { start } = getSelection(this.input)
-      const { hor: step } = getKeyNavigation(event)
-      return this.timeIndex === null || start + step < this.timeIndex
-        ? 'date'
-        : 'time'
-    },
-
-    updatePopups(mode = this.getMode()) {
-      if (mode) {
-        this.closedMode = null
+    handlePanelKey(event, part) {
+      // Only the shown panel handles keys, see `onCaretPartChange()` for how
+      // it follows the caret.
+      if (this.getPanelForPart(part?.name) !== this.activePanel) {
+        return false
       }
-      this.showDate = mode === 'date'
-      this.showTime = mode === 'time'
+      const { calendar, timePanel } = this.$refs
+      const panel = this.activePanel === 'time' ? timePanel : calendar
+      return panel?.handleKey(event, part) ?? false
     },
 
     focus() {
-      this.input.focus()
+      this.$refs.pickerInput.focus()
     },
 
     blur() {
-      this.input.blur()
+      this.$refs.pickerInput.blur()
     }
   }
 }
 </script>
 
 <style lang="scss">
-@import '../styles/_imports';
-
 .dito-date-time-picker {
-  &__inner {
-    display: flex;
-  }
-
-  &__input {
-    flex: 1;
-    font-variant-numeric: tabular-nums;
+  .dito-input {
     min-width: 12em;
   }
-
-  .dito-date-picker,
-  .dito-time-picker {
-    position: absolute;
-  }
 }
 </style>

package/src/components/DitoInput.vue

@@ -17,6 +17,7 @@
     :placeholder="placeholder"
     :autocomplete="autocomplete"
     :aria-label="title"
+    :size="size"
     v-bind="attributes"
     @mousedown="onMouseDown"
   )
@@ -59,7 +60,8 @@ export default {
     },
 
     attributes() {
-      const { class: _, ...attributes } = this.$attrs
+      // `size` is bound separately, see the `size` computed property.
+      const { class: _class, size: _size, ...attributes } = this.$attrs
       return attributes
     },
 
@@ -68,10 +70,10 @@ export default {
     },
 
     size() {
-      // Determine size based on min & max settings, if they're provided.
+      // Unless a size is provided, fit the longest of the min & max settings.
       const { size, min, max } = this.$attrs
       const getLength = value => (value != null ? `${value}`.length : 0)
-      return size || getLength(min) || getLength(max) || undefined
+      return size || Math.max(getLength(min), getLength(max)) || undefined
     }
   },