@ditojs/ui 3.2.0 → 3.3.0

package/src/components/DitoMenuButton.vue

@@ -0,0 +1,226 @@
+<template lang="pug">
+DitoTrigger.dito-menu-button(
+  v-model:show="isOpen"
+  trigger="click"
+  :placement="placement"
+  :disabled="disabled"
+  :matchTargetWidth="false"
+  :cover="cover"
+  :transition="null"
+  :class=`{
+    'dito-menu-button--open': isOpen,
+    'dito-menu-button--offset': offset
+  }`
+)
+  template(#trigger)
+    DitoButton(
+      ref="button"
+      aria-haspopup="menu"
+      :aria-expanded="isOpen ? 'true' : 'false'"
+      :disabled="disabled"
+      v-bind="$attrs"
+      @keydown="onButtonKeyDown"
+      @keyup="onKeyUp"
+    )
+      slot
+  template(#popup)
+    ul.dito-menu-button__menu(
+      role="menu"
+      @keydown="onMenuKeyDown"
+      @keyup="onKeyUp"
+    )
+      li(
+        v-for="item in items"
+        :key="item.value"
+        role="none"
+      )
+        button.dito-menu-button__item(
+          :ref="element => setItemElement(item, element)"
+          type="button"
+          role="menuitem"
+          tabindex="-1"
+          :aria-disabled="item.disabled ? 'true' : null"
+          :class="{ 'dito-menu-button__item--disabled': item.disabled }"
+          @click="selectItem(item)"
+        ) {{ item.label }}
+</template>
+
+<script>
+import DitoTrigger from './DitoTrigger.vue'
+import DitoButton from './DitoButton.vue'
+
+// A button that opens a menu of `items`, each `{ value, label, disabled }`,
+// and emits `select` with the item that is chosen, by mouse or keyboard.
+// Attributes, e.g. `class` or the `verb` and `text` of `DitoButton`, go to the
+// button, its content to the default slot.
+export default {
+  components: { DitoTrigger, DitoButton },
+  inheritAttrs: false,
+  emits: ['select'],
+
+  props: {
+    items: { type: Array, required: true },
+    placement: { type: String, default: 'bottom' },
+    // Whether the menu opens over the button, like native menus do.
+    cover: { type: Boolean, default: true },
+    // Whether the menu opens one item padding below the top of the button,
+    // e.g. to line up with text inside a taller button.
+    offset: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
+  },
+
+  data() {
+    return {
+      isOpen: false
+    }
+  },
+
+  created() {
+    // The elements of the rendered items, by item.
+    this.itemElements = new Map()
+  },
+
+  methods: {
+    setItemElement(item, element) {
+      if (element) {
+        this.itemElements.set(item, element)
+      } else {
+        this.itemElements.delete(item)
+      }
+    },
+
+    getFocusedItemIndex() {
+      return this.items.findIndex(
+        item => this.itemElements.get(item) === document.activeElement
+      )
+    },
+
+    focusItemAt(index) {
+      this.itemElements.get(this.items[index])?.focus()
+    },
+
+    async open(focusIndex) {
+      this.isOpen = true
+      // Wait for the menu to be rendered, so its items can be focused.
+      await this.$nextTick()
+      this.focusItemAt(focusIndex)
+    },
+
+    close() {
+      this.isOpen = false
+      this.focusButton()
+    },
+
+    focusButton() {
+      this.$refs.button.$el.focus()
+    },
+
+    selectItem(item) {
+      if (!item.disabled) {
+        this.close()
+        this.$emit('select', item)
+      }
+    },
+
+    onButtonKeyDown(event) {
+      const { key } = event
+      if (key === 'Enter' || key === ' ' || key === 'ArrowDown') {
+        event.preventDefault()
+        this.open(0)
+      } else if (key === 'ArrowUp') {
+        event.preventDefault()
+        this.open(this.items.length - 1)
+      }
+    },
+
+    onMenuKeyDown(event) {
+      const { key } = event
+      const count = this.items.length
+      const index = this.getFocusedItemIndex()
+      if (key === 'Escape') {
+        // `DitoTrigger` closes the menu, return the focus to the button.
+        this.focusButton()
+      } else if (key === 'Enter' || key === ' ') {
+        event.preventDefault()
+        const item = this.items[index]
+        if (item) {
+          this.selectItem(item)
+        }
+      } else if (key === 'Tab') {
+        // Let the focus move on as usual, but close the menu.
+        this.isOpen = false
+      } else {
+        const targetIndex = {
+          ArrowDown: (index + 1) % count,
+          ArrowUp: (index - 1 + count) % count,
+          Home: 0,
+          End: count - 1
+        }[key]
+        if (targetIndex !== undefined) {
+          event.preventDefault()
+          this.focusItemAt(targetIndex)
+        }
+      }
+    },
+
+    onKeyUp(event) {
+      // Firefox clicks buttons on the keyup of Space even if its keydown was
+      // prevented, which would toggle the menu again or select an item, see
+      // `onButtonKeyDown()` and `onMenuKeyDown()`.
+      if (event.key === ' ') {
+        event.preventDefault()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+$menu-button-radius: 0.5em;
+$menu-button-padding-ver: 0.5em;
+$menu-button-padding: $menu-button-padding-ver 1em;
+
+.dito-menu-button {
+  display: inline-block;
+
+  &__menu {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-radius: $menu-button-radius;
+    box-shadow: $shadow-window;
+    overflow: hidden;
+  }
+
+  &--offset &__menu {
+    margin-top: $menu-button-padding-ver;
+  }
+
+  &__item {
+    display: block;
+    width: 100%;
+    padding: $menu-button-padding;
+    border: 0;
+    font: inherit;
+    line-height: 1;
+    text-align: left;
+    white-space: nowrap;
+    color: inherit;
+    background: $button-color;
+    @include user-select(none);
+
+    &--disabled {
+      color: $color-disabled;
+      cursor: default;
+    }
+
+    &:not(&--disabled):is(:hover, :focus-visible) {
+      background: $color-active;
+      color: $color-white;
+      outline: none;
+    }
+  }
+}
+</style>

package/src/components/DitoPagination.vue

@@ -10,8 +10,9 @@ nav.dito-pagination(aria-label="Pagination")
   .dito-buttons.dito-buttons--round(
     v-if="numPages > 1"
   )
-    button.dito-button(
+    DitoButton(
       v-for="button in buttons"
+      :key="button.type || button.index"
       :class="getButtonClasses(button)"
       :disabled="button.disabled"
       :aria-label="getButtonLabel(button)"
@@ -24,7 +25,10 @@ nav.dito-pagination(aria-label="Pagination")
 </template>
 
 <script>
+import DitoButton from './DitoButton.vue'
+
 export default {
+  components: { DitoButton },
   emits: ['update:page'],
 
   props: {
@@ -120,8 +124,10 @@ export default {
     },
 
     pageSize() {
-      if (this.currentPage > this.numPages) {
-        this.currentPage = this.numPages
+      // Without items there are no pages, but page 1 remains valid.
+      const lastPage = Math.max(1, this.numPages)
+      if (this.currentPage > lastPage) {
+        this.currentPage = lastPage
       }
     },
 

package/src/components/DitoPickerInput.vue

@@ -0,0 +1,285 @@
+<template lang="pug">
+DitoTrigger.dito-picker-input(
+  ref="trigger"
+  trigger="focus"
+  v-bind="{ show, transition, placement, disabled, target }"
+  @update:show="onUpdateShow"
+)
+  template(#trigger)
+    slot(
+      v-if="$slots.trigger"
+      name="trigger"
+    )
+    DitoInput(
+      v-else
+      ref="input"
+      v-model="currentText"
+      type="text"
+      :class="inputClass"
+      v-bind="{ placeholder, disabled, focused: isFocused, ...inputAttributes }"
+      @focus="onInputFocus"
+      @blur="isInputFocused = false"
+      @click="onInputClick"
+      @keydown="onInputKeyDown"
+      @keyup="updateCaretPart"
+    )
+      template(#prefix)
+        slot(name="prefix")
+      template(#suffix)
+        button.dito-picker-input__toggle(
+          type="button"
+          :aria-label="toggleLabel"
+          aria-haspopup="dialog"
+          :aria-expanded="isPopupShown ? 'true' : 'false'"
+          :disabled="disabled"
+          @mousedown.stop.prevent
+          @click="onToggleClick"
+        )
+          DitoIcon(
+            :name="icon"
+            :disabled="disabled"
+          )
+        slot(name="suffix")
+  template(#popup)
+    slot(
+      name="popup"
+      :value="currentValue"
+      :setValue="setValue"
+      :close="close"
+    )
+</template>
+
+<script>
+import { format } from '@ditojs/utils'
+import DitoTrigger from './DitoTrigger.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 { isTimePartName, editTimeText } from '../utils/time.js'
+
+// The input of the date and time pickers, with the icon button that toggles
+// their popup. It owns the picked value, the text that represents it and the
+// focus state of input and popup together. The popup's panel is rendered
+// through the `popup` slot, and navigated with the keyboard through
+// `handlePanelKey()`.
+export default {
+  components: { DitoTrigger, DitoInput, DitoIcon },
+  emits: [
+    'update:modelValue',
+    'update:show',
+    'change',
+    'focus',
+    'blur',
+    'caretPartChange'
+  ],
+
+  props: {
+    modelValue: { type: Date, default: null },
+    formatOptions: { type: Object, required: true },
+    icon: { type: String, required: true },
+    toggleLabel: { type: String, required: true },
+    placeholder: { type: String, default: null },
+    show: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    transition: { type: String, default: 'slide' },
+    placement: { type: String, default: 'bottom-left' },
+    target: { type: [String, HTMLElement], default: 'trigger' },
+    inputClass: { type: String, default: null },
+    // The attributes and listeners of the native input.
+    inputAttributes: { type: Object, default: () => ({}) },
+    // Values that can't be picked, also not by typing them.
+    isValueDisabled: { type: Function, default: () => false },
+    // Called with the keydown event of the input and the date part at the
+    // caret, returning whether the panel handled it.
+    handlePanelKey: { type: Function, default: () => false }
+  },
+
+  data() {
+    return {
+      currentValue: this.modelValue,
+      isPopupShown: this.show,
+      isInputFocused: false,
+      caretPartName: null
+    }
+  },
+
+  computed: {
+    isFocused() {
+      return this.isInputFocused || this.isPopupShown
+    },
+
+    currentText: {
+      get() {
+        return format(this.currentValue, this.formatOptions) || ''
+      },
+
+      set(text) {
+        const date = parseDate(text, this.formatOptions)
+        if (date) {
+          // Keep the caret in place while the text is replaced with the one
+          // of the new value.
+          const input = this.getInputElement()
+          const selection = getSelection(input)
+          if (this.setValue(date) && selection) {
+            this.$nextTick(() => setSelection(input, selection))
+          }
+        }
+      }
+    }
+  },
+
+  watch: {
+    modelValue(to, from) {
+      if (+to !== +from) {
+        this.currentValue = to
+      }
+    },
+
+    isFocused(to, from) {
+      if (to ^ from) {
+        this.$emit(to ? 'focus' : 'blur')
+      }
+    }
+  },
+
+  methods: {
+    getInputElement() {
+      return this.$refs.input?.input ?? null
+    },
+
+    // All changes of the value go through here, so disabled values are never
+    // set. Returns whether the value was set.
+    setValue(value) {
+      if (value && this.isValueDisabled(value)) {
+        return false
+      }
+      if (+value !== +this.currentValue) {
+        this.currentValue = value
+        if (+value !== +this.modelValue) {
+          this.$emit('update:modelValue', value)
+          this.$emit('change', value)
+        }
+      }
+      return true
+    },
+
+    open() {
+      this.$refs.trigger.open()
+    },
+
+    close() {
+      this.$refs.trigger.close()
+    },
+
+    focus() {
+      this.$refs.input?.focus()
+    },
+
+    blur() {
+      this.$refs.input?.blur()
+    },
+
+    getCaretPart() {
+      const position = getSelection(this.getInputElement())?.start
+      return position != null
+        ? getDatePartAtPosition(this.currentText, position, this.formatOptions)
+        : null
+    },
+
+    updateCaretPart() {
+      const name = this.getCaretPart()?.name ?? null
+      if (name !== this.caretPartName) {
+        this.caretPartName = name
+        this.$emit('caretPartChange', name)
+      }
+    },
+
+    onUpdateShow(show) {
+      // `DitoTrigger` owns the popup's state, this only mirrors it.
+      this.isPopupShown = show
+      this.$emit('update:show', show)
+    },
+
+    onInputFocus() {
+      this.isInputFocused = true
+      this.updateCaretPart()
+    },
+
+    onInputClick() {
+      this.updateCaretPart()
+      // Reopen the popup when clicking into the focused input after it was
+      // closed, e.g. with Escape.
+      this.open()
+    },
+
+    onToggleClick() {
+      if (this.isPopupShown) {
+        this.close()
+      } else {
+        this.open()
+        this.focus()
+      }
+    },
+
+    onInputKeyDown(event) {
+      const { ver: step, enter } = getKeyNavigation(event)
+      const part = this.getCaretPart()
+      if (step || enter) {
+        event.preventDefault()
+        if (!this.isPopupShown) {
+          if (step) {
+            this.open()
+          }
+        } else if (this.handlePanelKey(event, part) && part) {
+          // Select the changed part again, once the text was updated.
+          const input = this.getInputElement()
+          this.$nextTick(() => {
+            const changedPart = getDatePartAtPosition(
+              this.currentText,
+              part.start,
+              this.formatOptions
+            )
+            if (changedPart) {
+              setSelection(input, changedPart)
+            }
+          })
+        }
+      } else if (isTimePartName(part?.name)) {
+        editTimeText(event, this.getInputElement(), this.currentText.length)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-picker-input {
+  .dito-input {
+    font-variant-numeric: tabular-nums;
+    width: 100%;
+  }
+
+  &__toggle {
+    display: flex;
+    padding: 0;
+    border: 0;
+    border-radius: $border-radius;
+    font: inherit;
+    color: inherit;
+    background: none;
+
+    &:disabled {
+      cursor: default;
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: $shadow-focus;
+    }
+  }
+}
+</style>

package/src/components/DitoSwitch.vue

@@ -62,8 +62,8 @@ export default {
 
     styles() {
       const { labels: { checked, unchecked } = {} } = this
-      // Calculate `--switch-width` in `rem`, based on label length.
-      const length = Math.max(0, checked?.length, unchecked?.length)
+      // Calculate `--switch-width` in `rem`, based on the given labels' length.
+      const length = Math.max(checked?.length ?? 0, unchecked?.length ?? 0)
       return {
         '--switch-width': length ? `${length * 1.5}rem` : null
       }
@@ -191,10 +191,8 @@ export default {
     @extend %button-disabled;
   }
 
-  &:focus-within:not(:hover) {
-    #{$self}__button {
-      box-shadow: $shadow-focus;
-    }
+  input:focus-visible + #{$self}__button {
+    box-shadow: $shadow-focus;
   }
 }
 </style>