feat: o TextInput e o NumberInput passam a emitir eventos de blur e f…

…ocus

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.0.0-beta.129",
+	"version": "3.0.0-beta.130",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",

src/components/NumberInput.vue

@@ -56,8 +56,8 @@
 				:placeholder="placeholder"
 				:disabled="disabled"
 				:class="inputClass"
-				@focus="isBeingFocused = true"
-				@blur="isBeingFocused = false"
+				@focus="handleFocus"
+				@blur="handleBlur"
 			>
 
 			<input
@@ -68,8 +68,8 @@
 				:disabled="disabled"
 				:class="inputClass"
 				type="number"
-				@focus="isBeingFocused = true"
-				@blur="isBeingFocused = false"
+				@focus="handleFocus"
+				@blur="handleBlur"
 			>
 
 			<div class="text-input__icon-container">
@@ -352,6 +352,18 @@ export default {
 			}
 		},
 	},
+
+	methods: {
+		handleBlur() {
+			this.isBeingFocused = false;
+			this.$emit('blur', true);
+		},
+
+		handleFocus() {
+			this.isBeingFocused = true;
+			this.$emit('focus', true);
+		},
+	}
 };
 </script>
 <style lang="scss" scoped>

src/components/TextInput.vue

@@ -57,8 +57,8 @@
 				:disabled="disabled"
 				:class="inputClass"
 				type="text"
-				@focus="isBeingFocused = true"
-				@blur="isBeingFocused = false"
+				@focus="handleFocus"
+				@blur="handleBlur"
 			>
 
 			<input
@@ -69,8 +69,8 @@
 				:disabled="disabled"
 				:class="inputClass"
 				type="text"
-				@focus="isBeingFocused = true"
-				@blur="isBeingFocused = false"
+				@focus="handleFocus"
+				@blur="handleBlur"
 			>
 
 			<div class="text-input__icon-container">
@@ -333,7 +333,17 @@ export default {
 			this.timeout = setTimeout(function () {
 				that.$emit('update:modelValue', value);
 			}, 1000);
-		}
+		},
+
+		handleBlur() {
+			this.isBeingFocused = false;
+			this.$emit('blur', true);
+		},
+
+		handleFocus() {
+			this.isBeingFocused = true;
+			this.$emit('focus', true);
+		},
 	}
 };
 </script>

src/stories/components/NumberInput.stories.mdx

@@ -47,7 +47,17 @@ export const Template = (args) => ({
 			v-bind="args" 
 			v-model="value"
 			v-model:unmaskedValue="unmaskedValue"
+			@blur="logBlur"
+			@focus="logFocus"
 		/>`,
+	methods: {
+		logBlur() {
+			console.info('blur event');
+		},
+		logFocus() {
+			console.info('focus event');
+		},
+	},
 	updated() {
 		console.info('%cv-model: ', 'color: #2C70CD;', this.value);
 		console.info('%cv-model:unmaskedValue ', 'color: #2C70CD;', this.unmaskedValue);

src/stories/components/TextInput.stories.mdx

@@ -45,7 +45,17 @@ export const Template = (args) => ({
 		<cds-text-input
 			v-bind="args" 
 			v-model="value"
+			@blur="logBlur"
+			@focus="logFocus"
 		/>`,
+	methods: {
+		logBlur() {
+			console.info('blur event');
+		},
+		logFocus() {
+			console.info('focus event');
+		},
+	},
 	updated() {
 		console.info('%cv-model: ', 'color: #2C70CD;', this.value);
 	},