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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.10.2",
+	"version": "11.10.4",
 	"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

@@ -181,3 +181,16 @@ export const OutsideChangeVmodel = () => ({
 		</farm-btn>
 	</div>`,
 });
+
+export const NoItems = () => ({
+	data() {
+		return {
+			v: null,
+			items: [],
+		};
+	},
+	template: `<div style="width: 120px">
+		<farm-select v-model="v" :items="items" />
+		v-model: {{ v }}
+	</div>`,
+});

package/src/components/Select/Select.vue

@@ -24,6 +24,9 @@
 				>
 					<farm-caption bold tag="span">{{ item[itemText] }}</farm-caption>
 				</farm-listitem>
+				<farm-listitem v-if="!items || items.length === 0">
+					{{ noDataText }}
+				</farm-listitem>
 			</farm-list>
 			<template v-slot:activator="{}">
 				<div class="farm-textfield--input farm-textfield--input--iconed">
@@ -41,7 +44,6 @@
 				</div>
 			</template>
 		</farm-contextmenu>
-
 		<farm-caption v-if="showErrorText" color="error" variation="regular">
 			{{ errorBucket[0] }}
 		</farm-caption>
@@ -114,9 +116,16 @@ export default Vue.extend({
 			type: String,
 			default: 'value',
 		},
+		/**
+		 * No data text
+		 */
+		noDataText: {
+			type: String,
+			default: 'Não há dados',
+		},
 	},
 	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);
@@ -126,6 +135,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;
@@ -135,8 +145,20 @@ 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();
 			}
@@ -157,21 +179,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);
-
 			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);
@@ -198,6 +219,10 @@ export default Vue.extend({
 		};
 
 		const updateSelectedTextValue = () => {
+			if (!items.value || items.value.length === 0) {
+				selectedText.value = '';
+				return;
+			}
 			const selectedItem = items.value.find(
 				item => item[itemValue.value] === innerValue.value
 			);

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

@@ -24,7 +24,7 @@ describe('Select component', () => {
 		it('reset', () => {
 			component.reset();
 			expect(component.isTouched).toBeTruthy();
-			expect(component.innerValue).toEqual('');
+			expect(component.innerValue).toEqual(null);
 		});
 
 		it('onBlur', () => {
@@ -41,6 +41,5 @@ describe('Select component', () => {
 			component.updateSelectedTextValue();
 			expect(component.selectedText).toBeDefined();
 		});
-		
 	});
 });