@nexdom/uimed-vue 2.0.0-beta.26 → 2.0.0-beta.28

package/AGENTS.md

@@ -216,7 +216,7 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
 - Keep temporary files (scripts, specs, configs) outside the repo, e.g. in the system's temp folder. Vitest collects test files from every folder except the excluded ones in `vite.config.ts`, so a temporary spec in a gitignored folder such as `reports/` still runs, and fails, with the unit tests.
 - Never run Stryker at the same time as another test command: they share build output and Stryker fails with `ENOENT`.
 - Unit tests that mount several apps at once (e.g. nested dialogs) need a distinct `global.config.idPrefix` per mount, since `useId()` restarts in each app.
-- In E2E, a paused `page.clock` also freezes transitions, so overlays never finish leaving. Use `page.clock.pauseAt` to hold time-based work (e.g. a demo action with `setTimeout`), `page.clock.fastForward` to complete it, then `page.clock.resume()` before expecting the overlay to be hidden (see `e2e/composables/use-confirm.spec.ts`).
+- In E2E, a paused `page.clock` also freezes transitions, so overlays never finish leaving. Use `pauseClock(page)` from `e2e/utils.ts` to hold time-based work (e.g. a demo action with `setTimeout`), `page.clock.fastForward` to complete it, then `page.clock.resume()` before expecting the overlay to be hidden (see `e2e/composables/use-confirm.spec.ts`). Don't call `page.clock.pauseAt` with the test runner's time (`new Date()`, `Date.now()`): the page clock can be ahead of it, and the pause then fails with "Cannot fast-forward to the past". `pauseClock` pauses from the page's own time instead.
 
 ## Public API design
 

package/dist/components.d.ts

@@ -1,4 +1,4 @@
-import { t as ButtonProps } from "./types-HPMP8IrV.js";
+import { t as ButtonProps } from "./types-Zex9kf7C.js";
 import { RouteLocationRaw } from "vue-router";
 //#region src/components/app-bar/types.d.ts
 /**

package/dist/components.js

@@ -1,7 +1,7 @@
 import { a as messages, n as owners$1, r as requests, s as useVuetifyColor } from "./use-dialog-Ck2_ZW7T.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onScopeDispose, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
 import { pt } from "vuetify/locale";
-import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VProgressLinear, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
+import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VProgressCircular, VProgressLinear, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
 import { formatDateTime, isEmail, isEmpty, isPhone, isUrl } from "@nexdom/shared/utils";
 //#region src/composables/navigation/use-route-props.ts
 function useRouteProps(route) {
@@ -803,6 +803,11 @@ var button_default = /* @__PURE__ */ defineComponent({
 				form: unref(form),
 				onClick
 			}, {
+				loader: withCtx(() => [createVNode(unref(VProgressCircular), {
+					indeterminate: "",
+					width: "2",
+					"aria-hidden": "true"
+				})]),
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			}, 8, [
@@ -1361,6 +1366,15 @@ var checkbox_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/composables/inputs/date-time-field.ts
 /**
+* The menu's content is a dialog with the pickers. `aria-owns` is removed since the input can't
+* own the content, and the menu still adds `aria-expanded` and `aria-controls`.
+*/
+const activatorProps = {
+	role: "combobox",
+	"aria-haspopup": "dialog",
+	"aria-owns": void 0
+};
+/**
 * Extracts the date part (`YYYY-MM-DD`) of a value, or an empty string when
 * the type has no date.
 */
@@ -1418,6 +1432,31 @@ function useDateTimeFieldPickerBounds(props, selectedDate) {
 		};
 	});
 }
+/**
+* Makes the field's input the activator of the pickers' menu, so the menu's attributes are on an
+* element whose role accepts them.
+* @param isOpen - Whether the menu is open.
+* @param isDisabled - Whether the menu can't open, as when the field is disabled or readonly.
+* @param hasLabel - Whether the field has a label, which names the menu's dialog.
+*/
+function useDateTimeFieldMenu(isOpen, isDisabled, hasLabel) {
+	const inputId = useId();
+	const activator = computed(() => toValue(isDisabled) ? void 0 : `#${inputId}`);
+	const contentProps = computed(() => ({
+		role: "dialog",
+		"aria-labelledby": toValue(hasLabel) ? `${inputId}-label` : void 0
+	}));
+	function open() {
+		if (!toValue(isDisabled)) isOpen.value = true;
+	}
+	return {
+		inputId,
+		activator,
+		activatorProps,
+		contentProps,
+		open
+	};
+}
 function getTimeBound(bound, type, selectedDate) {
 	if (type === "datetime" && getDatePart(bound, type) !== selectedDate) return "";
 	return getTimePart(bound, type);
@@ -1513,6 +1552,7 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 		const draftTime = computed(() => draft.value.time ?? getTimePart(modelValue.value, props.type));
 		const draftValue = computed(() => joinDateTime(props.type, draftDate.value, draftTime.value));
 		const bounds = useDateTimeFieldPickerBounds(props, draftDate);
+		const { inputId, activator, activatorProps, contentProps, open: openMenu } = useDateTimeFieldMenu(isMenuOpen, isMenuDisabled, () => !!props.label);
 		watch(isMenuOpen, () => {
 			draft.value = {};
 		});
@@ -1536,6 +1576,7 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VTextField), {
+				id: unref(inputId),
 				"model-value": displayValue.value,
 				"validation-value": modelValue.value,
 				variant: unref(vuetifyVariant),
@@ -1549,13 +1590,17 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 				hint: props.hint,
 				clearable: isClearable.value,
 				readonly: "",
-				"onClick:clear": clear
+				"onClick:clear": clear,
+				"onClick:control": unref(openMenu)
 			}, {
 				loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
 				default: withCtx(() => [createVNode(unref(VMenu), {
 					modelValue: isMenuOpen.value,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event),
-					activator: "parent",
+					activator: unref(activator),
+					target: "parent",
+					"activator-props": unref(activatorProps),
+					"content-props": unref(contentProps),
 					location: "bottom start",
 					"min-width": "0",
 					disabled: isMenuDisabled.value,
@@ -1595,9 +1640,16 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 						_: 1
 					})]),
 					_: 1
-				}, 8, ["modelValue", "disabled"])]),
+				}, 8, [
+					"modelValue",
+					"activator",
+					"activator-props",
+					"content-props",
+					"disabled"
+				])]),
 				_: 1
 			}, 8, [
+				"id",
 				"model-value",
 				"validation-value",
 				"variant",
@@ -1609,7 +1661,8 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 				"label",
 				"placeholder",
 				"hint",
-				"clearable"
+				"clearable",
+				"onClick:control"
 			]);
 		};
 	}

package/dist/composables.d.ts

@@ -1,4 +1,4 @@
-import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-HPMP8IrV.js";
+import { i as FeedbackColorVariant, n as ButtonVariant, r as ColorVariant } from "./types-Zex9kf7C.js";
 //#region src/composables/dialogs/types.d.ts
 interface ToastOptions {
   /**

package/dist/{types-HPMP8IrV.d.ts → types-Zex9kf7C.d.ts}

@@ -33,6 +33,8 @@ type ButtonProps = {
   disabled?: boolean;
   /**
    * Displays a loading indicator on the button, disabling interaction.
+   * The button keeps its text as accessible name and is marked as busy, and
+   * assistive technologies ignore the indicator.
    * @default false
    */
   loading?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "2.0.0-beta.26",
+  "version": "2.0.0-beta.28",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",