@farm-investimentos/front-mfe-components 11.10.1 → 11.10.2

package/package.json

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

package/src/components/Select/Select.stories.js

@@ -27,9 +27,9 @@ export const Primary = () => ({
 		return {
 			v: null,
 			items: [
-				{ value: 1, text: ' value 1' },
-				{ value: 2, text: ' value 2' },
-				{ value: 3, text: ' value 3' },
+				{ value: 1, text: 'value 1' },
+				{ value: 2, text: 'value 2' },
+				{ value: 3, text: 'value 3' },
 			],
 		};
 	},
@@ -156,3 +156,28 @@ export const CustomKeys = () => ({
 		v-model: {{ v }}
 	</div>`,
 });
+
+export const OutsideChangeVmodel = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 1, text: 'value 1' },
+				{ value: 2, text: 'value 2' },
+				{ value: 3, text: 'value 3' },
+			],
+		};
+	},
+	methods: {
+		onClick() {
+			this.v = 2;
+		},
+	},
+	template: `<div style="width: 120px">
+		<farm-select v-model="v" :items="items" />
+		v-model: {{ v }}
+		<farm-btn @click="onClick">
+		change value
+		</farm-btn>
+	</div>`,
+});

package/src/components/Select/Select.vue

@@ -14,11 +14,11 @@
 		<farm-contextmenu bottom v-model="isVisible">
 			<farm-list v-if="!readonly">
 				<farm-listitem
-					v-for="item in items"
+					v-for="(item, index) in items"
 					clickable
 					hoverColorVariation="lighten"
 					hover-color="primary"
-					:key="'contextmenu_item_' + item[itemText]"
+					:key="'contextmenu_item_' + index"
 					:class="{ 'farm-listitem--selected': item[itemValue] === innerValue }"
 					@click="selectItem(item)"
 				>
@@ -85,8 +85,6 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
-
-		errorMessage: String,
 		/**
 		 * Array of rules used for validation
 		 */
@@ -140,6 +138,7 @@ export default Vue.extend({
 			() => {
 				innerValue.value = props.value;
 				validate(innerValue.value);
+				updateSelectedTextValue();
 			}
 		);
 
@@ -166,12 +165,7 @@ export default Vue.extend({
 		onBeforeMount(() => {
 			validate(innerValue.value);
 
-			const selectedItem = items.value.find(
-				item => item[itemValue.value] === innerValue.value
-			);
-			if (selectedItem) {
-				selectedText.value = selectedItem[itemText.value];
-			}
+			updateSelectedTextValue();
 		});
 
 		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
@@ -203,6 +197,15 @@ export default Vue.extend({
 			emit('click');
 		};
 
+		const updateSelectedTextValue = () => {
+			const selectedItem = items.value.find(
+				item => item[itemValue.value] === innerValue.value
+			);
+			if (selectedItem) {
+				selectedText.value = selectedItem[itemText.value];
+			}
+		};
+
 		return {
 			items,
 			innerValue,
@@ -221,6 +224,7 @@ export default Vue.extend({
 			onKeyUp,
 			onBlur,
 			clickInput,
+			updateSelectedTextValue,
 		};
 	},
 });

package/src/components/Select/__tests__/Select.spec.js

@@ -36,5 +36,11 @@ describe('Select component', () => {
 			component.clickInput();
 			expect(component.isTouched).toBeTruthy();
 		});
+
+		it('updateSelectedTextValue', () => {
+			component.updateSelectedTextValue();
+			expect(component.selectedText).toBeDefined();
+		});
+		
 	});
 });