@ditojs/ui 2.100.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/ui",
-  "version": "2.100.0",
+  "version": "3.0.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/main/packages/ui",
@@ -38,12 +38,11 @@
     "ie_mob >= 11"
   ],
   "dependencies": {
-    "@ditojs/utils": "^2.100.0",
-    "@soda/get-current-script": "^1.0.2"
+    "@ditojs/utils": "^3.0.0"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.100.0",
+    "@ditojs/build": "^3.0.0",
     "vite": "^8.3.2"
   },
-  "gitHead": "c6fdbe03971188779fc9cf5f1b4202e08bc75a65"
+  "gitHead": "399f683a6ca227a03cfc0978fee9055383e6b3d8"
 }

package/src/components/DitoCalendar.vue

@@ -1,6 +1,9 @@
 <!-- Derived from ATUI, and further extended: https://aliqin.github.io/atui/ -->
 <template lang="pug">
-.dito-calendar
+.dito-calendar(
+  role="dialog"
+  aria-label="Choose date"
+)
   .dito-calendar-popup
     .dito-calendar-inner
       template(
@@ -8,22 +11,40 @@
       )
         .dito-calendar-header
           a.dito-calendar-step-prev.dito-calendar-step-year(
+            role="button"
+            tabindex="0"
+            aria-label="Previous year"
             @click="stepYear(-1)"
           )
           a.dito-calendar-step-prev.dito-calendar-step-month(
+            role="button"
+            tabindex="0"
+            aria-label="Previous month"
             @click="stepMonth(-1)"
           )
           span
             a.dito-calendar-select-year(
+              role="button"
+              tabindex="0"
+              aria-label="Switch to year selection"
               @click="setMode('year')"
             ) {{ dateToString(currentValue, { year: true }) }}
             a.dito-calendar-select-month(
+              role="button"
+              tabindex="0"
+              aria-label="Switch to month selection"
               @click="setMode('month')"
             ) {{ dateToString(currentValue, { month: true }) }}
           a.dito-calendar-step-next.dito-calendar-step-month(
+            role="button"
+            tabindex="0"
+            aria-label="Next month"
             @click="stepMonth(1)"
           )
           a.dito-calendar-step-next.dito-calendar-step-year(
+            role="button"
+            tabindex="0"
+            aria-label="Next year"
             @click="stepYear(1)"
           )
         .dito-calendar-body
@@ -31,15 +52,21 @@
             span(
               v-for="weekday in weekdayNames"
             ) {{ weekday.short }}
-          .dito-calendar-dates
+          .dito-calendar-dates(role="grid")
             span(
               v-for="date in dateRange"
               :class="date.state && `dito-calendar-item-${date.state}`"
+              role="gridcell"
+              :aria-label="dateToString(date.date)"
+              :aria-selected="date.state === 'active'"
+              :aria-disabled="date.state === 'disabled'"
               @click="date.state !== 'disabled' && selectDate(date.date)"
             ) {{ date.text }}
         .dito-calendar-footer
           a.dito-calendar-select-now(
             role="button"
+            tabindex="0"
+            :aria-label="`Select today (${dateToString(new Date())})`"
             :title="dateToString(new Date())"
             @click="selectDate(new Date())"
           )
@@ -48,20 +75,35 @@
       )
         .dito-calendar-header
           a.dito-calendar-step-prev(
+            role="button"
+            tabindex="0"
+            aria-label="Previous year"
             @click="stepYear(-1)"
           )
           span
             a.dito-calendar-select-year(
+              role="button"
+              tabindex="0"
+              aria-label="Switch to year selection"
               @click="setMode('year')"
             ) {{ dateToString(currentValue, { year: true }) }}
           a.dito-calendar-step-next(
+            role="button"
+            tabindex="0"
+            aria-label="Next year"
             @click="stepYear(1)"
           )
         .dito-calendar-body
-          .dito-calendar-months
+          .dito-calendar-months(
+            role="listbox"
+            aria-label="Month"
+          )
             span(
               v-for="(month, index) in monthNames"
               :class="getMonthClass(index)"
+              role="option"
+              :aria-label="month.long"
+              :aria-selected="getMonthClass(index)['dito-calendar-item-active']"
               @click="selectMonth(index)"
             ) {{ month.short }}
       template(
@@ -69,17 +111,29 @@
       )
         .dito-calendar-header
           a.dito-calendar-step-prev(
+            role="button"
+            tabindex="0"
+            aria-label="Previous decade"
             @click="stepDecade(-1)"
           )
           span {{ decadeToString(currentValue) }}
           a.dito-calendar-step-next(
+            role="button"
+            tabindex="0"
+            aria-label="Next decade"
             @click="stepDecade(1)"
           )
         .dito-calendar-body
-          .dito-calendar-years
+          .dito-calendar-years(
+            role="listbox"
+            aria-label="Year"
+          )
             span(
               v-for="year in yearRange"
               :class="getYearClass(year)"
+              role="option"
+              :aria-label="String(year)"
+              :aria-selected="getYearClass(year)['dito-calendar-item-active']"
               @click="selectYear(year)"
             ) {{ year }}
 </template>

package/src/components/DitoTimePicker.vue

@@ -32,34 +32,58 @@ DitoTrigger.dito-time-picker(
         )
         slot(name="suffix")
   template(#popup)
-    .dito-time-picker-popup
+    .dito-time-picker-popup(
+      role="dialog"
+      aria-label="Choose time"
+    )
       .dito-time-picker-panel
-        ul.dito-time-picker-hour(ref="hour")
+        ul.dito-time-picker-hour(
+          ref="hour"
+          role="listbox"
+          aria-label="Hour"
+        )
           template(
             v-for="index in 24"
           )
             li(
               v-if="!disabledHour(index - 1)"
+              role="option"
+              :aria-label="leftPad(index - 1)"
+              :aria-selected="hour === index - 1"
               :class="{ selected: hour === index - 1 }"
               @click="hour = index - 1"
             ) {{ leftPad(index - 1) }}
       .dito-time-picker-panel
-        ul.dito-time-picker-minute(ref="minute")
+        ul.dito-time-picker-minute(
+          ref="minute"
+          role="listbox"
+          aria-label="Minute"
+        )
           template(
             v-for="index in 60"
           )
             li(
               v-if="!disabledMinute(index - 1)"
+              role="option"
+              :aria-label="leftPad(index - 1)"
+              :aria-selected="minute === index - 1"
               :class="{ selected: minute === index - 1 }"
               @click="minute = index - 1"
             ) {{ leftPad(index - 1) }}
       .dito-time-picker-panel
-        ul.dito-time-picker-second(ref="second")
+        ul.dito-time-picker-second(
+          ref="second"
+          role="listbox"
+          aria-label="Second"
+        )
           template(
             v-for="index in 60"
           )
             li(
               v-if="!disabledSecond(index - 1)"
+              role="option"
+              :aria-label="leftPad(index - 1)"
+              :aria-selected="second === index - 1"
               :class="{ selected: second === index - 1 }"
               @click="second = index - 1"
             ) {{ leftPad(index - 1) }}

package/src/components/DitoTrigger.vue

@@ -174,6 +174,10 @@ export default {
   },
 
   methods: {
+    isPopupFocused() {
+      return !!this.$refs.popup?.matches(':focus-within')
+    },
+
     updatePosition() {
       const { trigger, popup } = this.$refs
       if (this.show && popup.offsetWidth === 0) {
@@ -291,7 +295,7 @@ export default {
           blur: () => {
             // Use timeout to allow clicked inputs to grab focus
             this.blurTimer = setTimeout(() => {
-              if (!this.$refs.popup.matches(':focus-within')) {
+              if (!this.isPopupFocused()) {
                 this.showPopup = false
               }
             }, 0)
@@ -323,7 +327,12 @@ export default {
               // becomes editable and still focused again.
               setTimeout(() => {
                 input.removeAttribute('readonly')
-                if (!event.target.matches('input, textarea, button')) {
+                // 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

package/src/utils/date.js

@@ -20,6 +20,11 @@ export function parseDate(string, {
   time = true
 } = {}) {
   const timeDefault = time ? null : 0
+  // Extract the 12-hour clock period, e.g. in en-US "11:30:00 AM".
+  const period = string?.match(/\s*\b([ap])\.?m\.?$/i)
+  if (period) {
+    string = string.slice(0, period.index)
+  }
   let [
     day,
     sep1,
@@ -36,10 +41,19 @@ export function parseDate(string, {
     millisecond = timeDefault
   ] = getDateParts(string, { date, time })
   if (year && year.length >= 4) {
-    if (locale === 'en-US' && sep1 === '/' && sep2 === '/') {
+    if (
       // American format: MM/DD/YYYY
+      (locale === 'en-US' && sep1 === '/' && sep2 === '/') ||
+      // Month name first, e.g. en-US "May 14, 2026"
+      (isNaN(+day) && !isNaN(+month))
+    ) {
       ;[day, month] = [month, day]
     }
+    if (period && hour !== null) {
+      const pm = period[1].toLowerCase() === 'p'
+      hour = (+hour % 12) + (pm ? 12 : 0)
+      hour = String(hour).padStart(2, '0')
+    }
     month = getMonthIndex(month, { locale })
     const isValidTimePart = part => part === null || part.length === 2
     if (
@@ -51,7 +65,7 @@ export function parseDate(string, {
         )
       )
     ) {
-      return new Date(
+      const result = new Date(
         +year,
         +month,
         +day,
@@ -60,6 +74,11 @@ export function parseDate(string, {
         +second,
         +millisecond
       )
+      // Reject invalid dates, including out-of-range parts that `Date` would
+      // roll over, e.g. day 45.
+      return result.getMonth() === +month && result.getDate() === +day
+        ? result
+        : null
     }
   }
   return null

package/src/utils/date.test.js

@@ -0,0 +1,38 @@
+import { parseDate } from './date.js'
+
+describe('parseDate()', () => {
+  const date = { day: 'numeric', month: 'long', year: 'numeric' }
+  const time = { hour: '2-digit', minute: '2-digit', second: '2-digit' }
+
+  it.each([
+    ['May 14, 2026', new Date(2026, 4, 14)],
+    ['14 May 2026', new Date(2026, 4, 14)],
+    ['05/14/2026', new Date(2026, 4, 14)],
+    ['14.05.2026', new Date(2026, 4, 14)]
+  ])('parses date %o', (string, expected) => {
+    expect(parseDate(string, { date, time: null })).toEqual(expected)
+  })
+
+  it.each([
+    ['May 14, 2026, 11:30:00 AM', new Date(2026, 4, 14, 11, 30, 0)],
+    ['May 14, 2026, 11:30:00 PM', new Date(2026, 4, 14, 23, 30, 0)],
+    ['May 14, 2026, 12:05:00 AM', new Date(2026, 4, 14, 0, 5, 0)],
+    ['May 14, 2026, 12:05:00 PM', new Date(2026, 4, 14, 12, 5, 0)],
+    ['14.05.2026, 23:30:00', new Date(2026, 4, 14, 23, 30, 0)]
+  ])('parses datetime %o', (string, expected) => {
+    expect(parseDate(string, { date, time })).toEqual(expected)
+  })
+
+  it('parses time %o', () => {
+    expect(parseDate('11:30:00 PM', { date: null, time })).toEqual(
+      new Date(2000, 0, 1, 23, 30, 0)
+    )
+  })
+
+  it.each(['', 'May', 'Foo 14, 2026', '2026-05-14', '13/45/2026'])(
+    'returns null for %o',
+    string => {
+      expect(parseDate(string, { date, time: null })).toBe(null)
+    }
+  )
+})