@ditojs/ui 3.2.0 → 3.3.0

package/src/components/DitoTrigger.vue

@@ -1,6 +1,8 @@
 <!-- Derived from ATUI, and further extended: https://aliqin.github.io/atui/ -->
 <template lang="pug">
-.dito-trigger-container
+.dito-trigger-container(
+  @keydown="onKeyDown"
+)
   .dito-trigger(
     v-if="alwaysShow"
     ref="trigger"
@@ -28,7 +30,10 @@
     :class="triggerClass"
   )
     slot(name="trigger")
-  Transition(:name="`dito-${transition}`")
+  Transition(
+    :name="transition ? `dito-${transition}` : undefined"
+    :css="!!transition"
+  )
     .dito-popup(
       v-if="trigger === 'hover'"
       v-show="showPopup"
@@ -60,11 +65,20 @@ import { hyphenate } from '@ditojs/utils'
 import { addEvents, combineEvents } from '../utils/event.js'
 import { getTarget } from '../utils/trigger'
 
+function isFocusableControl(element) {
+  return !!element.matches?.('input, textarea, select, button')
+}
+
+function isEditableControl(element) {
+  return !!element.matches?.('input, textarea, select')
+}
+
 export default {
   emits: ['update:show'],
 
   props: {
     trigger: { type: String, default: 'click' },
+    // The name of the transition of the popup, or `null` to show it at once.
     transition: { type: String, default: 'slide' },
     placement: { type: String, default: 'bottom' },
     show: { type: Boolean, default: false },
@@ -74,6 +88,8 @@ export default {
     zIndex: { type: Number, default: 0 },
     keepInView: { type: Boolean, default: true },
     hideWhenClickOutside: { type: Boolean, default: true },
+    // Whether the popup's first child takes on the width of the target.
+    matchTargetWidth: { type: Boolean, default: true },
     alwaysShow: { type: Boolean, default: false },
     cover: { type: Boolean, default: false },
     hideDelay: { type: Number, default: 0 }
@@ -82,12 +98,11 @@ export default {
   data() {
     return {
       showPopup: this.show,
-      popupPlacement: this.placement,
       focusEvents: null,
       closeEvents: null,
       popupEvents: null,
-      blurTimer: null,
-      mouseLeaveTimer: null
+      mouseLeaveTimer: null,
+      targetResizeObserver: null
     }
   },
 
@@ -110,10 +125,6 @@ export default {
 
     popupStyle() {
       return this.zIndex ? `z-index: ${this.zIndex}` : ''
-    },
-
-    triggerTarget() {
-      return getTarget(this)
     }
   },
 
@@ -124,72 +135,195 @@ export default {
 
     showPopup(to, from) {
       if (to ^ from) {
+        if (!to && this.trigger === 'focus' && this.isPopupFocused()) {
+          // Don't lose the focus with the popup, e.g. after selecting a date in
+          // a calendar with the keyboard.
+          this.focusTriggerInput()
+        }
         this.$emit('update:show', to)
         this.$nextTick(() => this.onShowPopup(to))
       }
+    },
+
+    target() {
+      if (this.$refs.trigger) {
+        this.addTargetEvents()
+        if (this.targetResizeObserver) {
+          this.unobserveTargetSize()
+          this.observeTargetSize()
+        }
+      }
+    },
+
+    placement() {
+      this.$nextTick(() => this.updatePosition())
     }
   },
 
   mounted() {
-    const { trigger, popup } = this.$refs
-    if (this.trigger === 'focus') {
-      this.focusEvents = this.addFocusEvents(this.triggerTarget ?? trigger)
-    }
-
-    if (this.hideWhenClickOutside && !this.alwaysShow) {
-      // Use 'mouseup' instead of 'click', since click appears to happen after
-      // the DOM inside of popups could change in a way so that the check
-      // `popup.contains(event.target)` would fail:
-      this.closeEvents = addEvents(window, {
-        mouseup: event => {
-          if (
-            this.showPopup &&
-            !popup.contains(event.target) &&
-            !trigger.contains(event.target) &&
-            !this.triggerTarget?.contains(event.target)
-          ) {
-            this.showPopup = false
-          }
-        },
-
-        blur: () => {
-          this.showPopup = false
-        }
-      })
-    }
+    this.addTargetEvents()
 
-    if (this.alwaysShow) {
+    if (this.showPopup) {
+      // The `showPopup` watcher doesn't see popups that are shown initially.
+      this.onShowPopup(true)
+    } else if (this.alwaysShow) {
       this.showPopup = true
     }
   },
 
   created() {
     this.showPopup = this.show
+    // Whether `focusTriggerInput()` is moving the focus, see there.
+    this.isFocusingTriggerInput = false
   },
 
   unmounted() {
     this.focusEvents?.remove()
-    this.closeEvents?.remove()
+    this.removeCloseEvents()
     this.popupEvents?.remove()
+    this.unobserveTargetSize()
+    clearTimeout(this.mouseLeaveTimer)
   },
 
   methods: {
+    open() {
+      if (!this.disabled) {
+        this.showPopup = true
+      }
+    },
+
+    close() {
+      if (!this.alwaysShow) {
+        this.showPopup = false
+      }
+    },
+
+    toggle() {
+      if (this.showPopup) {
+        this.close()
+      } else {
+        this.open()
+      }
+    },
+
+    // Returns the element that the popup is positioned at, resolving a `target`
+    // given by ref name, which is only possible once mounted. This is why it
+    // can't be a computed property: `$refs` aren't reactive.
+    getTargetElement() {
+      return getTarget(this) ?? this.$refs.trigger
+    },
+
     isPopupFocused() {
-      return !!this.$refs.popup?.matches(':focus-within')
+      return !!this.$refs.popup?.contains(document.activeElement)
+    },
+
+    // Returns whether `element` is part of the trigger, its target or the
+    // popup.
+    containsElement(element) {
+      return (
+        !!element && (
+          this.$el.contains(element) ||
+          this.getTargetElement().contains(element)
+        )
+      )
+    },
+
+    getTriggerInput() {
+      return this.getTargetElement()?.querySelector('input, textarea') ?? null
+    },
+
+    focusTriggerInput() {
+      // The input's focus event would open the popup again, see
+      // `addFocusEvents()`. Focus events are dispatched synchronously.
+      this.isFocusingTriggerInput = true
+      try {
+        this.getTriggerInput()?.focus()
+      } finally {
+        this.isFocusingTriggerInput = false
+      }
+    },
+
+    addTargetEvents() {
+      this.focusEvents?.remove()
+      this.focusEvents =
+        this.trigger === 'focus'
+          ? this.addFocusEvents(this.getTargetElement())
+          : null
+    },
+
+    // Adds the events that close the popup while it is shown, see
+    // `onShowPopup()`.
+    addCloseEvents() {
+      if (this.hideWhenClickOutside && !this.alwaysShow && !this.closeEvents) {
+        const { trigger, popup } = this.$refs
+        // Use 'mouseup' instead of 'click', since click appears to happen after
+        // the DOM inside of popups could change in a way so that the check
+        // `popup.contains(event.target)` would fail:
+        this.closeEvents = addEvents(window, {
+          mouseup: event => {
+            if (
+              this.showPopup &&
+              !popup.contains(event.target) &&
+              !trigger.contains(event.target) &&
+              !this.getTargetElement().contains(event.target)
+            ) {
+              this.showPopup = false
+            }
+          },
+
+          blur: () => {
+            this.showPopup = false
+          }
+        })
+      }
+    },
+
+    removeCloseEvents() {
+      this.closeEvents?.remove()
+      this.closeEvents = null
+    },
+
+    onKeyDown(event) {
+      if (event.key === 'Escape' && this.showPopup && !this.alwaysShow) {
+        // Don't let Escape also close what contains the trigger, e.g. dialogs.
+        event.stopPropagation()
+        this.close()
+      }
+    },
+
+    // Positions the popup whenever the size of the target changes, which
+    // includes the moment it is laid out, also if the popup is shown inside a
+    // hidden part of the page that only becomes visible later. The target is
+    // observed rather than the popup, since `updatePosition()` resizes the
+    // popup, which would trigger the observer again.
+    observeTargetSize() {
+      if (!this.targetResizeObserver) {
+        this.targetResizeObserver = new ResizeObserver(
+          () => this.updatePosition()
+        )
+        this.targetResizeObserver.observe(this.getTargetElement())
+      }
+    },
+
+    unobserveTargetSize() {
+      this.targetResizeObserver?.disconnect()
+      this.targetResizeObserver = null
     },
 
     updatePosition() {
       const { trigger, popup } = this.$refs
-      if (this.show && popup.offsetWidth === 0) {
-        setTimeout(() => this.updatePosition(), 0)
+      if (!popup || !this.showPopup || popup.offsetWidth === 0) {
+        // Unmounted, hidden, or not laid out yet, see `observeTargetSize()`.
         return
       }
 
-      const target = this.triggerTarget ?? trigger
-      // Actually resize the popup's first child, so they can set size limits.
-      const el = this.target === 'popup' ? trigger : popup.firstElementChild
-      if (el) {
-        el.style.width = getComputedStyle(target).width
+      const target = this.getTargetElement()
+      if (this.matchTargetWidth) {
+        // Actually resize the popup's first child, so it can set size limits.
+        const el = this.target === 'popup' ? trigger : popup.firstElementChild
+        if (el) {
+          el.style.width = getComputedStyle(target).width
+        }
       }
 
       const bounds = target.getBoundingClientRect()
@@ -200,42 +334,77 @@ export default {
       const popupWidth = popup.offsetWidth
       const popupHeight = popup.offsetHeight
 
-      let [part1, part2] = this.popupPlacement.split('-') || []
+      let [part1, part2] = this.placement.split('-') || []
       if (this.keepInView) {
         const winWidth = window.innerWidth
         const winHeight = window.innerHeight
+        const roomAbove = triggerTop
+        const roomBelow = winHeight - triggerTop - triggerHeight
+        const roomLeft = triggerLeft
+        const roomRight = winWidth - triggerLeft - triggerWidth
+        // Flips the popup to the other side if it doesn't fit, but only if
+        // there's more room there, so it doesn't move further out of view.
+        const shouldFlip = (room, otherRoom, size) => (
+          room < size && otherRoom > room
+        )
+
         if (part1 === 'top') {
-          if (triggerTop < popupHeight) {
+          if (shouldFlip(roomAbove, roomBelow, popupHeight)) {
             part1 = 'bottom'
           }
         } else if (part1 === 'bottom') {
-          if (winHeight - triggerTop - triggerHeight < popupHeight) {
+          if (shouldFlip(roomBelow, roomAbove, popupHeight)) {
             part1 = 'top'
           }
         } else if (part1 === 'left') {
-          if (triggerLeft < popupWidth) {
+          if (shouldFlip(roomLeft, roomRight, popupWidth)) {
             part1 = 'right'
           }
         } else if (part1 === 'right') {
-          if (winWidth - triggerLeft - triggerWidth < popupWidth) {
+          if (shouldFlip(roomRight, roomLeft, popupWidth)) {
             part1 = 'left'
           }
         }
 
+        // The alignments of the popup's edges with the trigger's edges.
         if (part2 === 'top') {
-          if (winHeight - triggerTop < popupHeight) {
+          if (
+            shouldFlip(
+              winHeight - triggerTop,
+              triggerTop + triggerHeight,
+              popupHeight
+            )
+          ) {
             part2 = 'bottom'
           }
         } else if (part2 === 'bottom') {
-          if (triggerTop + triggerHeight < popupHeight) {
+          if (
+            shouldFlip(
+              triggerTop + triggerHeight,
+              winHeight - triggerTop,
+              popupHeight
+            )
+          ) {
             part2 = 'top'
           }
         } else if (part2 === 'left') {
-          if (winWidth - triggerLeft < popupWidth) {
+          if (
+            shouldFlip(
+              winWidth - triggerLeft,
+              triggerLeft + triggerWidth,
+              popupWidth
+            )
+          ) {
             part2 = 'right'
           }
         } else if (part2 === 'right') {
-          if (triggerLeft + triggerWidth < popupWidth) {
+          if (
+            shouldFlip(
+              triggerLeft + triggerWidth,
+              winWidth - triggerLeft,
+              popupWidth
+            )
+          ) {
             part2 = 'left'
           }
         }
@@ -283,82 +452,109 @@ export default {
 
     addFocusEvents(parent) {
       const targets = parent.querySelectorAll('input, textarea')
-      let input
+      // The trigger's input while it is marked readonly, see `mousedown`, and
+      // the events that release it again.
+      let lockedInput = null
+      let releaseEvents = null
+
+      const releaseInput = event => {
+        const input = lockedInput
+        lockedInput = null
+        releaseEvents.remove()
+        releaseEvents = null
+        // Give some time for other events to update input before it becomes
+        // editable and still focused again.
+        setTimeout(() => {
+          input.removeAttribute('readonly')
+          // Only bring the focus back from the popup, not if the focus moved
+          // elsewhere in the meantime, e.g. by clicking outside.
+          if (!isFocusableControl(event.target) && this.isPopupFocused()) {
+            input.focus()
+          }
+        }, 0)
+      }
+
+      // Only close once the focus leaves the trigger, its target and the
+      // popup, e.g. when tabbing out, but not when it moves between them, e.g.
+      // when tabbing into the popup. Blur events don't bubble, so capture them.
+      const onBlur = event => {
+        if (!this.containsElement(event.relatedTarget)) {
+          this.close()
+        }
+      }
+      parent.addEventListener('blur', onBlur, true)
 
       return combineEvents(
         addEvents(targets, {
           focus: () => {
-            this.showPopup = true
-            clearTimeout(this.blurTimer)
-          },
-
-          blur: () => {
-            // Use timeout to allow clicked inputs to grab focus
-            this.blurTimer = setTimeout(() => {
-              if (!this.isPopupFocused()) {
-                this.showPopup = false
-              }
-            }, 0)
+            if (!this.isFocusingTriggerInput) {
+              this.open()
+            }
           }
         }),
 
         addEvents(parent, {
           mousedown: event => {
-            if (!event.target.matches('input, textarea, button')) {
+            const { target } = event
+            const isInPopup = !!this.$refs.popup?.contains(target)
+            // Controls take the focus, except for the buttons in the popup, so
+            // that the focus stays in the trigger's input when using the mouse.
+            const takesFocus = isInPopup
+              ? isEditableControl(target)
+              : isFocusableControl(target)
+            if (!takesFocus) {
               event.preventDefault()
               event.stopPropagation()
             }
-            if (!event.target.matches('.dito-button-clear')) {
-              const trigger = this.triggerTarget ?? this.$refs.trigger
-              // Mark trigger input as readonly so it can't loose focus while
-              // user does other mouse-activities in popup.
-              input = trigger.querySelector('input, textarea')
+            // Mark the trigger's input as readonly so it can't lose focus
+            // while the user does other mouse-activities in the popup, except
+            // for the controls in the popup that take the focus themselves,
+            // e.g. the fields of a color picker.
+            if (!lockedInput && !(isInPopup && takesFocus)) {
+              const input = this.getTriggerInput()
               if (input && !input.hasAttribute('readonly')) {
                 input.setAttribute('readonly', 'true')
-              } else {
-                input = null
+                lockedInput = input
+                // Release the input wherever the mouse is released, also
+                // outside of `parent`, e.g. after dragging in a color picker.
+                releaseEvents = addEvents(window, { mouseup: releaseInput })
               }
             }
-          },
+          }
+        }),
 
-          mouseup: event => {
-            if (input) {
-              // Give some time for other events to update input before it
-              // becomes editable and still focused again.
-              setTimeout(() => {
-                input.removeAttribute('readonly')
-                // Only bring the focus back from the popup, not if the focus
-                // moved elsewhere in the meantime, e.g. by clicking outside.
-                if (
-                  !event.target.matches('input, textarea, button') &&
-                  this.isPopupFocused()
-                ) {
-                  input.focus()
-                }
-                input = null
-              }, 0)
-            }
+        {
+          remove() {
+            parent.removeEventListener('blur', onBlur, true)
+            releaseEvents?.remove()
+            releaseEvents = null
+            lockedInput?.removeAttribute('readonly')
+            lockedInput = null
           }
-        })
+        }
       )
     },
 
     onShowPopup(show) {
+      // The popup may have been toggled again or unmounted in the meantime:
+      if (show !== this.showPopup || !this.$refs.popup) return
       if (show) {
         if (this.trigger === 'focus') {
+          this.popupEvents?.remove()
           this.popupEvents = this.addFocusEvents(this.$refs.popup)
         }
-        this.updatePosition()
+        this.addCloseEvents()
+        this.observeTargetSize()
       } else {
         this.popupEvents?.remove()
         this.popupEvents = null
+        this.removeCloseEvents()
+        this.unobserveTargetSize()
       }
     },
 
     onClick() {
-      if (!this.disabled) {
-        this.showPopup = true
-      }
+      this.toggle()
     },
 
     onHover(enter) {

package/src/components/index.js

@@ -4,6 +4,7 @@ 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 DitoMenuButton } from './DitoMenuButton.vue'
 export { default as DitoPagination } from './DitoPagination.vue'
 export { default as DitoSwitch } from './DitoSwitch.vue'
 export { default as DitoTimePicker } from './DitoTimePicker.vue'

package/src/styles/components/_button.scss

@@ -83,6 +83,13 @@
   &[disabled] {
     @extend %button-disabled;
   }
+
+  .dito-buttons--round & {
+    padding: $button-round-padding;
+    min-width: $input-height;
+    min-height: $input-height;
+    border-radius: 1em;
+  }
 }
 
 .dito-buttons {
@@ -101,15 +108,6 @@
     margin-left: 1.5em;
   }
 
-  &--round {
-    .dito-button {
-      padding: $button-round-padding;
-      min-width: $input-height;
-      min-height: $input-height;
-      border-radius: 1em;
-    }
-  }
-
   &--small {
     --button-margin: 1px;
   }

package/src/styles/components/_resize.scss

@@ -10,4 +10,12 @@
   height: 1em;
   z-index: 10;
   cursor: ns-resize;
+  // Let pointer drags resize instead of panning the page or selecting text:
+  touch-action: none;
+  user-select: none;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: $shadow-focus;
+  }
 }

package/src/styles/mixins/_input.scss

@@ -12,6 +12,12 @@
   &.dito-input--focus {
     border-color: $color-active;
   }
+
+  // Keep showing errors while the field has focus, e.g. the first invalid
+  // field, which is focused after a failed submit:
+  .dito-container--has-errors &:is(:focus, :focus-within, .dito-input--focus) {
+    border-color: $color-error;
+  }
 }
 
 %input-borderless {

package/src/utils/button.js

@@ -0,0 +1,24 @@
+import { labelize } from '@ditojs/utils'
+
+// Returns the attributes of buttons that perform `verb`, e.g. 'delete': the
+// modifier class that styles the verb, and the label of buttons that don't
+// display text, named by the verb and by its `subject` if known, e.g.
+// 'Add Section'. `hasText` states whether the button displays text, which it
+// does by default when `text` is set.
+export function getVerbButtonAttributes({
+  verb,
+  subject = null,
+  text = null,
+  hasText = !!text
+}) {
+  const label = hasText
+    ? null
+    : `${labelize(verb)}${subject ? ` ${subject}` : ''}`
+  return {
+    class: `dito-button--${verb}`,
+    ...(label && {
+      'title': label,
+      'aria-label': label
+    })
+  }
+}

package/src/utils/date.js

@@ -14,6 +14,24 @@ export function alterDate(date, overrides = {}) {
   return new Date(...Object.values({ ...describeDate(date), ...overrides }))
 }
 
+// Returns `date` with its part `partName`, e.g. 'month', stepped by `step`.
+// Stepping the year or the month clamps the day to the length of the new
+// month, so that e.g. January 31 plus a month is February 29, not March 2.
+export function stepDate(date, partName, step) {
+  const parts = describeDate(date)
+  parts[partName] += step
+  if (partName === 'year' || partName === 'month') {
+    parts.day = Math.min(parts.day, getDaysInMonth(parts.year, parts.month))
+  }
+  return alterDate(date, parts)
+}
+
+function getDaysInMonth(year, month) {
+  // Day 0 of the next month is the last day of `month`, and `Date` rolls
+  // `month` over into the next or previous year if it is out of range.
+  return new Date(year, month + 1, 0).getDate()
+}
+
 export function parseDate(string, {
   locale = 'en-US',
   date = true,