@designcrowd/fe-shared-lib 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/src/atoms/components/FormControl/FormControl.mixin.js

@@ -97,11 +97,20 @@ export default {
       required: false,
       default: false,
     },
+    requiredMessage: {
+      type: String,
+      required: false,
+      default: 'Please fill in this field.',
+    },
   },
   methods: {
-    input(modelValue) {
+    input(modelValue, event) {
       this.$emit('update:modelValue', modelValue);
       this.$emit('input', modelValue);
+
+      if (event?.target) {
+        event.target.setCustomValidity('');
+      }
     },
     keyup(modelValue) {
       this.$emit('keyup', modelValue);

package/src/atoms/components/TextInput/TextInput.vue

@@ -73,7 +73,8 @@
             },
           ]"
           class="tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-px-4 tw-border tw-border-solid focus:tw-outline-none tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner"
-          @input.stop="input($event.target.value)"
+          @invalid="setValidationMessage"
+          @input.stop="input($event.target.value, $event)"
           @keyup.stop="keyup($event.target.value)"
           @keydown.stop="keydown($event.target.value, $event)"
           @focus="focus($event.target.value)"
@@ -151,6 +152,9 @@ export default {
         this.$emit('on-clear-confirmation');
       }
     },
+    setValidationMessage(event) {
+      event.target.setCustomValidity(this.requiredMessage);
+    },
   },
 };
 </script>