@nexdom/uimed-vue 2.0.0-beta.22 → 2.0.0-beta.23

package/dist/components.d.ts

@@ -254,7 +254,9 @@ type TextFieldProps = {
    */
   disabled?: boolean;
   /**
-   * Displays a loading indicator on the input.
+   * Displays a loading indicator on the input. The field keeps its label as
+   * accessible name and is marked as busy, and assistive technologies ignore
+   * the indicator.
    * @default false
    */
   loading?: boolean;
@@ -317,7 +319,9 @@ type AutocompleteFieldProps<T = string, Multiple extends boolean = false> = {
    */
   disabled?: boolean;
   /**
-   * Displays a loading indicator on the input.
+   * Displays a loading indicator on the input. The field keeps its label as
+   * accessible name and is marked as busy, and assistive technologies ignore
+   * the indicator.
    * @default false
    */
   loading?: boolean;
@@ -541,7 +545,9 @@ type DateTimeFieldProps = {
    */
   disabled?: boolean;
   /**
-   * Displays a loading indicator on the input.
+   * Displays a loading indicator on the input. The field keeps its label as
+   * accessible name and is marked as busy, and assistive technologies ignore
+   * the indicator.
    * @default false
    */
   loading?: boolean;

package/dist/components.js

@@ -1,7 +1,7 @@
 import { a as messages, n as owners, r as requests, s as useVuetifyColor } from "./use-dialog-Ck2_ZW7T.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, isRef, mergeModels, mergeProps, normalizeClass, onMounted, onScopeDispose, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, normalizeClass, normalizeProps, onMounted, onScopeDispose, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, 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, 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, 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) {
@@ -315,6 +315,34 @@ function associatedRuleType(type) {
 	return type in textFieldTypeToVuetifyRule;
 }
 //#endregion
+//#region src/components/inputs/field-loader.vue
+var field_loader_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "field-loader",
+	props: {
+		color: {
+			type: String,
+			required: false
+		},
+		isActive: {
+			type: Boolean,
+			required: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VProgressLinear), {
+				active: props.isActive,
+				color: props.color,
+				height: "2",
+				indeterminate: "",
+				"aria-hidden": "true"
+			}, null, 8, ["active", "color"]);
+		};
+	}
+});
+//#endregion
 //#region src/components/inputs/text-field/text-field.vue
 var text_field_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
@@ -398,13 +426,17 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 				"data-testid": props.dataTestid,
 				disabled: props.disabled,
 				loading: props.loading,
+				"aria-busy": props.loading || void 0,
 				readonly: props.readonly,
 				label: props.label,
 				placeholder: props.placeholder,
 				hint: props.hint,
 				clearable: computedClearable.value,
 				"onClick:clear": clear
-			}, null, 8, [
+			}, {
+				loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
+				_: 1
+			}, 8, [
 				"modelValue",
 				"variant",
 				"type",
@@ -413,6 +445,7 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 				"data-testid",
 				"disabled",
 				"loading",
+				"aria-busy",
 				"readonly",
 				"label",
 				"placeholder",
@@ -1115,6 +1148,7 @@ var autocomplete_field_default = /* @__PURE__ */ defineComponent({
 				"data-testid": props.dataTestid,
 				disabled: props.disabled,
 				loading: props.loading,
+				"aria-busy": props.loading || void 0,
 				readonly: props.readonly,
 				label: props.label,
 				placeholder: props.placeholder,
@@ -1124,13 +1158,17 @@ var autocomplete_field_default = /* @__PURE__ */ defineComponent({
 				"item-title": "label",
 				rules: unref(rules),
 				chips: ""
-			}, null, 8, [
+			}, {
+				loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
+				_: 1
+			}, 8, [
 				"modelValue",
 				"variant",
 				"items",
 				"data-testid",
 				"disabled",
 				"loading",
+				"aria-busy",
 				"readonly",
 				"label",
 				"placeholder",
@@ -1396,6 +1434,7 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 				"data-testid": props.dataTestid,
 				disabled: props.disabled,
 				loading: props.loading,
+				"aria-busy": props.loading || void 0,
 				label: props.label,
 				placeholder: props.placeholder,
 				hint: props.hint,
@@ -1403,6 +1442,7 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 				readonly: "",
 				"onClick:clear": clear
 			}, {
+				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),
@@ -1456,6 +1496,7 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 				"data-testid",
 				"disabled",
 				"loading",
+				"aria-busy",
 				"label",
 				"placeholder",
 				"hint",

package/package.json

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