@farm-investimentos/front-mfe-components-vue3 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.0.7",
+	"version": "0.0.9",
 	"private": false,
 	"repository": {
 		"type": "git",
@@ -78,7 +78,7 @@
 		"react-dom": "^18.2.0",
 		"sass": "~1.32.0",
 		"sass-loader": "10.4.1",
-		"storybook": "7.5.0",
+		"storybook": "^7.5.0",
 		"ts-jest": "^29.0.0",
 		"typescript": "~4.1.5",
 		"vite": "^4.4.9",

package/src/components/DialogHeader/DialogHeader.scss

@@ -3,15 +3,15 @@
 .farm-dialog-header__close {
 	position: absolute;
 	margin-top: 0;
+	right: 4px;
 	font-size: 16px;
 	transition: all 0.4s;
-	right: 0;
 	&:hover {
 		opacity: 0.8;
 	}
 }
 
-header {
+header.farm-dialog-header {
 	font-size: 12px;
 	padding: 6px 16px;
 	background-color: #fff;

package/src/components/DialogHeader/DialogHeader.vue

@@ -1,7 +1,16 @@
 <template>
-	<header>
-		<farm-icon v-if="iconTitle" size="16px" color="primary" class="mr-2">{{ iconTitle }}</farm-icon>
-		<farm-caption v-if="title" variation="semiBold">
+	<header class="farm-dialog-header">
+		<farm-icon
+			v-if="iconTitle"
+			size="16px"
+			color="primary"
+			class="mr-2"
+			>{{ iconTitle }}</farm-icon
+		>
+		<farm-caption
+			v-if="title"
+			variation="semiBold"
+		>
 			{{ title }}
 		</farm-caption>
 
@@ -15,12 +24,16 @@
 			title="Fechar"
 			@click="onClose"
 		>
-			<farm-icon role="button" size="24px"> window-close </farm-icon>
+			<farm-icon
+				role="button"
+				size="24px"
+			>
+				window-close
+			</farm-icon>
 		</farm-btn>
 	</header>
 </template>
 <script lang="ts">
-
 /**
  * Header de dialog/modal
  */
@@ -49,10 +62,13 @@ export default {
 			default: true,
 		},
 	},
-	methods: {
-		onClose() {
-			this.$emit('onClose', {});
-		},
+	setup(_, { emit }) {
+		const onClose = () => {
+			emit('onClose', {});
+		};
+		return {
+			onClose,
+		};
 	},
 };
 </script>

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

@@ -8,8 +8,8 @@ describe('DialogHeader component', () => {
 	beforeEach(() => {
 		wrapper = shallowMount(DialogHeader, {
 			propsData: {
-				title: ''
-			}
+				title: '',
+			},
 		});
 	});
 
@@ -22,4 +22,11 @@ describe('DialogHeader component', () => {
 			expect(wrapper.element).toBeDefined();
 		});
 	});
+
+	describe('methods', () => {
+		it('should handle close', () => {
+			wrapper.vm.onClose();
+			expect(wrapper.emitted().onClose).toBeDefined();
+		});
+	});
 });

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

@@ -8,7 +8,7 @@ describe('Modal component', () => {
 	beforeEach(() => {
 		wrapper = shallowMount(Modal, {
 			propsData: {
-				value: false,
+				modelValue: false,
 			},
 		});
 	});

package/src/components/ModalPromptUser/ModalPromptUser.vue

@@ -1,7 +1,15 @@
 <template>
-	<farm-modal v-model="inputVal" size="sm" :offsetTop="48" :offsetBottom="68">
+	<farm-modal
+		v-model="inputVal"
+		size="sm"
+		:offsetTop="48"
+		:offsetBottom="68"
+	>
 		<template v-slot:header>
-			<farm-dialog-header :title="title" @onClose="close" />
+			<farm-dialog-header
+				:title="title"
+				@onClose="close"
+			/>
 		</template>
 		<template v-slot:content>
 			<section class="modal-content">
@@ -39,7 +47,7 @@ export default {
 		/**
 		 * Open/close modal
 		 */
-		value: {
+		modelValue: {
 			required: true,
 		},
 		/**
@@ -110,7 +118,7 @@ export default {
 				return this.value;
 			},
 			set(val) {
-				this.$emit('input', val);
+				this.$emit('update:modelValue', val);
 			},
 		},
 	},

package/src/components/TextArea/TextArea.vue

@@ -31,7 +31,11 @@
 				@focusout="onFocus(false)"
 			/>
 		</div>
-		<farm-caption v-if="showErrorText" color="error" variation="regular">
+		<farm-caption
+			v-if="showErrorText"
+			color="error"
+			variation="regular"
+		>
 			{{ errorBucket[0] }}
 		</farm-caption>
 		<farm-caption
@@ -49,7 +53,7 @@
 </template>
 
 <script lang="ts">
-import {  computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
+import { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
 
 import deepEqual from '../../composition/deepEqual';
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
@@ -64,7 +68,7 @@ export default {
 		/**
 		 * v-model binding
 		 */
-		value: { type: [String, Number], default: '' },
+		modelValue: { type: [String, Number], default: '' },
 		/**
 		 * Show hint text
 		 */
@@ -126,7 +130,7 @@ export default {
 	},
 	setup(props, { emit }) {
 		const { rules } = toRefs(props);
-		const innerValue = ref(props.value);
+		const innerValue = ref(props.modelValue);
 		const isTouched = ref(false);
 		const isFocus = ref(false);
 		const isBlured = ref(false);
@@ -143,9 +147,9 @@ export default {
 		const showErrorText = computed(() => hasError.value && isTouched.value);
 
 		watch(
-			() => props.value,
+			() => props.modelValue,
 			() => {
-				innerValue.value = props.value;
+				innerValue.value = props.modelValue;
 				validate(innerValue.value);
 			}
 		);
@@ -153,7 +157,7 @@ export default {
 		watch(
 			() => innerValue.value,
 			() => {
-				emit('input', innerValue.value);
+				emit('update:modelValue', innerValue.value);
 				emit('change', innerValue.value);
 			}
 		);
@@ -191,7 +195,7 @@ export default {
 		const reset = () => {
 			innerValue.value = '';
 			isTouched.value = true;
-			emit('input', innerValue.value);
+			emit('update:modelValue', innerValue.value);
 		};
 
 		const makePristine = () => {

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

@@ -46,4 +46,17 @@ describe('TextArea component', () => {
 			expect(component.isBlured).toBeFalsy();
 		});
 	});
+
+	describe('computed properties', () => {
+		it('hasError', () => {
+			expect(component.hasError).toBeFalsy();
+		});
+	});
+
+	describe('watchers', () => {
+		it('props.rules', async () => {
+			await wrapper.setProps({ rules: [() => false] });
+			expect(component.hasError).toBeTruthy();
+		});
+	});
 });