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

package/package.json

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

package/src/components/Form/Form.stories.js

@@ -182,10 +182,6 @@ export const InitInvalid = () => ({
     `,
 });
 
-
-
-
-
 export const Grid = () => ({
 	data() {
 		return {};

package/src/components/Form/Form.vue

@@ -71,7 +71,7 @@ export default Vue.extend({
 			recursiveFormField(instance);
 			validationFields.forEach(field => {
 				watchInput(field);
-				field.validate();
+				field.validate(field.value);
 			});
 		};
 

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)"
 				>
@@ -41,7 +41,6 @@
 				</div>
 			</template>
 		</farm-contextmenu>
-
 		<farm-caption v-if="showErrorText" color="error" variation="regular">
 			{{ errorBucket[0] }}
 		</farm-caption>
@@ -85,8 +84,6 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
-
-		errorMessage: String,
 		/**
 		 * Array of rules used for validation
 		 */
@@ -118,7 +115,7 @@ export default Vue.extend({
 		},
 	},
 	setup(props, { emit }) {
-		const { rules, items, itemText, itemValue } = toRefs(props);
+		const { rules, items, itemText, itemValue, disabled } = toRefs(props);
 		const innerValue = ref(props.value);
 		const isTouched = ref(false);
 		const isBlured = ref(false);
@@ -128,6 +125,7 @@ export default Vue.extend({
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
 
 		let fieldValidator = validateFormFieldBuilder(rules.value);
+		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
 
 		const hasError = computed(() => {
 			return errorBucket.value.length > 0;
@@ -137,9 +135,22 @@ export default Vue.extend({
 
 		watch(
 			() => props.value,
+			newValue => {
+				innerValue.value = newValue;
+				errorBucket.value = [];
+				validate(newValue);
+				updateSelectedTextValue();
+				emit('input', newValue);
+				emit('change', newValue);
+			}
+		);
+
+		watch(
+			() => props.items,
 			() => {
-				innerValue.value = props.value;
+				errorBucket.value = [];
 				validate(innerValue.value);
+				updateSelectedTextValue();
 			}
 		);
 
@@ -158,26 +169,20 @@ export default Vue.extend({
 			(newVal, oldVal) => {
 				if (deepEqual(newVal, oldVal)) return;
 				fieldValidator = validateFormFieldBuilder(rules.value);
-				validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
 				validate(innerValue.value);
 			}
 		);
 
 		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);
-
 		const reset = () => {
-			innerValue.value = '';
+			if (disabled.value) {
+				return;
+			}
+			innerValue.value = null;
 			selectedText.value = '';
 			isTouched.value = true;
 			emit('input', innerValue.value);
@@ -203,6 +208,19 @@ export default Vue.extend({
 			emit('click');
 		};
 
+		const updateSelectedTextValue = () => {
+			if (!items.value || items.value.length === 0) {
+				selectedText.value = '';
+				return;
+			}
+			const selectedItem = items.value.find(
+				item => item[itemValue.value] === innerValue.value
+			);
+			if (selectedItem) {
+				selectedText.value = selectedItem[itemText.value];
+			}
+		};
+
 		return {
 			items,
 			innerValue,
@@ -221,6 +239,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();
+		});
+		
 	});
 });