@aws-amplify/ui-vue 2.4.8 → 2.4.9

package/dist/index.js

@@ -6882,7 +6882,7 @@ var o = { getAmplifyConfig: function() {
             /[0-9]/.test(n2) || s2.push("Password must have numbers");
             break;
           case "REQUIRES_SYMBOLS":
-            /[\W]/.test(n2) || s2.push("Password must have special characters");
+            /[\^$*.[\]{}()?"!@#%&\/\\,><':;|_~`=+\-\ ]/.test(n2) || s2.push("Password must have special characters");
         }
       }), [2, s2.length !== 0 ? { password: s2 } : null]) : [2, null];
     });
@@ -7993,6 +7993,23 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
+let nanoid = (size) => {
+  let id = "";
+  let bytes = crypto.getRandomValues(new Uint8Array(size));
+  while (size--) {
+    let byte2 = bytes[size] & 63;
+    if (byte2 < 36) {
+      id += byte2.toString(36);
+    } else if (byte2 < 62) {
+      id += (byte2 - 26).toString(36).toUpperCase();
+    } else if (byte2 < 63) {
+      id += "_";
+    } else {
+      id += "-";
+    }
+  }
+  return id;
+};
 const _sfc_main$q = {};
 const _hoisted_1$8 = { "data-amplify-label": "" };
 function _sfc_render$2(_ctx, _cache) {
@@ -8053,10 +8070,11 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     name: null,
     label: null,
     autocomplete: null,
-    ariainvalid: { type: Boolean },
+    hasError: { type: Boolean },
     labelHidden: { type: Boolean, default: true },
     placeholder: null,
-    required: { type: Boolean, default: true }
+    required: { type: Boolean, default: true },
+    describedBy: null
   },
   setup(__props) {
     var _a2;
@@ -8066,7 +8084,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const showHideType = ref("password");
     const showHideLabel = ref(showPassword);
     const random = Math.floor(Math.random() * 999999);
-    const { name, label, autocomplete, ariainvalid, labelHidden, placeholder, required } = toRefs(props);
+    const { name, label, autocomplete, hasError, labelHidden, placeholder, required } = toRefs(props);
     let password = ref("");
     function togglePasswordText() {
       showHideLabel.value = showHideLabel.value === showPassword ? hidePassword : showPassword;
@@ -8099,15 +8117,16 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                     modelValue: unref(password),
                     "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(password) ? password.value = $event : password = $event),
                     class: "amplify-input amplify-field-group__control",
-                    "aria-invalid": unref(ariainvalid),
                     id: "amplify-field-" + unref(random),
                     "data-amplify-password": "true",
                     name: unref(name),
                     autocomplete: unref(autocomplete),
                     required: (_a4 = unref(required)) != null ? _a4 : true,
                     placeholder: unref(placeholderValue),
-                    type: showHideType.value
-                  }), null, 16, ["modelValue", "aria-invalid", "id", "name", "autocomplete", "required", "placeholder", "type"]),
+                    type: showHideType.value,
+                    "aria-invalid": unref(hasError),
+                    "aria-describedBy": __props.describedBy
+                  }), null, 16, ["modelValue", "id", "name", "autocomplete", "required", "placeholder", "type", "aria-invalid", "aria-describedBy"]),
                   createVNode(_component_base_wrapper, { class: "amplify-field-group__outer-end" }, {
                     default: withCtx(() => [
                       createElementVNode("button", {
@@ -8183,7 +8202,9 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     required: { type: Boolean, default: true },
     dialCode: null,
     dialCodeList: null,
-    type: { default: "text" }
+    type: { default: "text" },
+    hasError: { type: Boolean },
+    describedBy: null
   },
   setup(__props) {
     const props = __props;
@@ -8256,14 +8277,15 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                   return [
                     createVNode(_component_base_input, {
                       class: "amplify-input amplify-field-group__control",
-                      "aria-invalid": "false",
                       id: "amplify-field-" + unref(random),
                       autocomplete: unref(autocomplete),
                       name: unref(name),
                       required: (_a2 = unref(required)) != null ? _a2 : true,
                       type: __props.type,
-                      placeholder: unref(placeholder)
-                    }, null, 8, ["id", "autocomplete", "name", "required", "type", "placeholder"])
+                      placeholder: unref(placeholder),
+                      "aria-invalid": __props.hasError,
+                      "aria-describedBy": __props.describedBy
+                    }, null, 8, ["id", "autocomplete", "name", "required", "type", "placeholder", "aria-invalid", "aria-describedBy"])
                   ];
                 }),
                 _: 1
@@ -8277,7 +8299,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = { key: 2 };
+const _hoisted_1$4 = ["id"];
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   name: "base-form-field",
   props: {
@@ -8290,10 +8312,15 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const useAuthShared = createSharedComposable(useAuthenticator);
     const { validationErrors } = toRefs(useAuthShared());
     const { type } = formField.value;
-    const errors = computed(() => u$2(validationErrors.value[name.value]));
     const isPasswordField = type === "password";
-    return (_ctx, _cache) => {
+    const errorId = nanoid(12);
+    const errors = computed(() => u$2(validationErrors.value[name.value]));
+    const hasError = computed(() => {
       var _a2;
+      return ((_a2 = errors.value) == null ? void 0 : _a2.length) > 0;
+    });
+    const ariaDescribedBy = computed(() => hasError.value ? errorId : void 0);
+    return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         isPasswordField ? (openBlock(), createBlock(_sfc_main$o, {
           key: 0,
@@ -8303,8 +8330,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           required: unref(formField).isRequired,
           "label-hidden": unref(formField).labelHidden,
           autocomplete: unref(formField).autocomplete,
-          ariainvalid: !!unref(validationErrors)[unref(name)]
-        }, null, 8, ["name", "label", "placeholder", "required", "label-hidden", "autocomplete", "ariainvalid"])) : (openBlock(), createBlock(_sfc_main$m, {
+          hasError: unref(hasError),
+          describedBy: unref(ariaDescribedBy)
+        }, null, 8, ["name", "label", "placeholder", "required", "label-hidden", "autocomplete", "hasError", "describedBy"])) : (openBlock(), createBlock(_sfc_main$m, {
           key: 1,
           name: unref(name),
           label: unref(formField).label,
@@ -8314,9 +8342,14 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           autocomplete: unref(formField).autocomplete,
           "dial-code": unref(formField).dialCode,
           "dial-code-list": unref(formField).dialCodeList,
-          type: unref(formField).type
-        }, null, 8, ["name", "label", "placeholder", "required", "label-hidden", "autocomplete", "dial-code", "dial-code-list", "type"])),
-        ((_a2 = unref(errors)) == null ? void 0 : _a2.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+          type: unref(formField).type,
+          hasError: unref(hasError),
+          describedBy: unref(ariaDescribedBy)
+        }, null, 8, ["name", "label", "placeholder", "required", "label-hidden", "autocomplete", "dial-code", "dial-code-list", "type", "hasError", "describedBy"])),
+        unref(hasError) ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          id: unref(ariaDescribedBy)
+        }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(errors), (error2, idx) => {
             return openBlock(), createElementBlock("p", {
               key: idx,
@@ -8325,7 +8358,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
               class: "amplify-text amplify-text--error"
             }, toDisplayString(unref(g$1)(error2)), 1);
           }), 128))
-        ])) : createCommentVNode("", true)
+        ], 8, _hoisted_1$4)) : createCommentVNode("", true)
       ], 64);
     };
   }