@farm-investimentos/front-mfe-components 11.5.0 → 11.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.5.0",
+	"version": "11.5.1",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -76,7 +76,9 @@ export const Validate = () => ({
 			rules: {
 				required: value => !!value || 'Required field',
 				email: v =>
-					/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'Must be an e-mail',
+					!v ||
+					/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
+					'Must be an e-mail',
 			},
 		};
 	},
@@ -93,6 +95,9 @@ export const Validate = () => ({
 		<farm-label required>Required field with hint</farm-label>
 		<farm-textfield-v2 v-model="v4" :rules="[rules.required]" hint="hint text" />
 
+		<farm-label required>Required field with icon</farm-label>
+		<farm-textfield-v2 v-model="v1" :rules="[rules.required]" icon="eye" />
+
 	</div>`,
 });
 
@@ -108,8 +113,8 @@ export const Icon = () => ({
 		},
 	},
 	template: `<div style="width: 480px">
-		<farm-textfield-v2 v-model="v" icon="eye" onClickIcon="this.show" />
-		<farm-textfield-v2 v-model="v" icon="eye" icon-position="left" onClickIcon="this.show" />
+		<farm-textfield-v2 v-model="v" icon="eye" @onClickIcon="show" />
+		<farm-textfield-v2 v-model="v" icon="eye" icon-position="left" @onClickIcon="show" />
 	</div>`,
 });
 
@@ -207,3 +212,20 @@ export const Mask = () => ({
 
 	</div>`,
 });
+
+export const ToggleVisibility = () => ({
+	data() {
+		return {
+			v: 'hidden password',
+			visible: false,
+		};
+	},
+	methods: {
+		toggle() {
+			this.visible = !this.visible;
+		},
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" :type="visible ? 'text' : 'password'"  :icon="visible ? 'eye-off' : 'eye'" @onClickIcon="toggle" />
+	</div>`,
+});

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -10,7 +10,7 @@
 		}"
 	>
 		<div class="farm-textfield--input">
-			<button v-if="icon && iconPosition === 'left'" @click="$emit('onClickIcon')">
+			<button type="button" v-if="icon && iconPosition === 'left'" @click="$emit('onClickIcon')">
 				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
 			</button>
 			<input
@@ -22,7 +22,7 @@
 				@keyup="onKeyUp"
 				@blur="onBlur"
 			/>
-			<button v-if="icon && iconPosition === 'right'" @click="$emit('onClickIcon')">
+			<button type="button" v-if="icon && iconPosition === 'right'" @click="$emit('onClickIcon')">
 				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
 			</button>
 		</div>