@farm-investimentos/front-mfe-components 12.2.2 → 12.2.3

package/package.json

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

package/src/components/Buttons/DefaultButton/DefaultButton.scss

@@ -1,6 +1,14 @@
 @import '../../../configurations/variables';
 @import '../../../configurations/mixins';
 @import '../../../configurations/theme-colors';
+$butonSizes: (
+	"xs": 12px,
+	"sm": 16px,
+	"md": 24px,
+	"lg": 48px,
+	"xl": 56px,
+	'default': 36px,
+);
 
 .farm-btn {
 	font-size: 14px;
@@ -29,9 +37,11 @@
 		width: 100%;
 	}
 
-	@each $size, $value in $sizes {
+	@each $size,
+	$value in $sizes {
 		&#{'.farm-btn[size=' + $size + ']'} {
 			font-size: $value;
+			height: map-get($butonSizes, $size);
 		}
 	}
 
@@ -95,6 +105,7 @@
 
 	&.farm-btn--plain {
 		background-color: transparent !important;
+
 		&:hover {
 			.farm-btn__content {
 				opacity: 0.68;
@@ -125,7 +136,8 @@
 		color: gray;
 	}
 
-	@each $size, $value in $sizes {
+	@each $size,
+	$value in $sizes {
 		&#{'.farm-btn[size=' + $size + ']'} {
 			font-size: $value;
 		}
@@ -165,12 +177,13 @@
 				i.mdi {
 					color: white;
 				}
+
 				.farm-btn__content i.mdi {
 					color: black;
 				}
 			}
 		}
-		
+
 	}
 
 	.farm-btn--extra,
@@ -250,4 +263,4 @@
 		width: 100%;
 		margin: 0;
 	}
-}
+}

package/src/components/Checkbox/Checkbox.vue

@@ -1,14 +1,18 @@
 <template>
 	<div class="farm-checkbox__container" :color="$props.color">
-		<span :class="{
-			'farm-checkbox': true,
-			'farm-checkbox--checked': isChecked,
-			'farm-checkbox--disabled': disabled,
-			'farm-checkbox--indeterminate': indeterminate,
-			'farm-checkbox--lighten': variation === 'lighten',
-			'farm-checkbox--darken': variation === 'darken',
-			'farm-checkbox--error': showError,
-		}" :size="$props.size" @click="toggleValue">
+		<span
+			:class="{
+				'farm-checkbox': true,
+				'farm-checkbox--checked': isChecked,
+				'farm-checkbox--disabled': disabled,
+				'farm-checkbox--indeterminate': indeterminate,
+				'farm-checkbox--lighten': variation === 'lighten',
+				'farm-checkbox--darken': variation === 'darken',
+				'farm-checkbox--error': showError,
+			}"
+			:size="$props.size"
+			@click="toggleValue"
+		>
 			<farm-icon :size="$props.size" v-if="innerValue && !indeterminate">check</farm-icon>
 			<farm-icon :size="$props.size" v-if="indeterminate">minus</farm-icon>
 		</span>
@@ -24,6 +28,7 @@ import validateFormStateBuilder from '../../composition/validateFormStateBuilder
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
 import deepEqual from '../../composition/deepEqual';
+import modelValueWatcher from './modelValueWatcher';
 
 export default Vue.extend({
 	name: 'farm-checkbox',
@@ -100,46 +105,15 @@ export default Vue.extend({
 				return false;
 			}
 			isTouched.value = true;
-			if (isChecked.value) {
-				innerValue.value = null;
-			} else {
-				innerValue.value = props.value;
-			}
+			innerValue.value = isChecked.value ? null : props.value;
 			emit('input', innerValue.value);
 			validate(innerValue.value);
 		};
 
-		const isChecked = computed(() => {
-			return innerValue.value == props.value;
-		});
-
-		const hasError = computed(() => {
-			return errorBucket.value.length > 0;
-		});
-
+		const isChecked = computed(() => innerValue.value == props.value);
+		const hasError = computed(() => errorBucket.value.length > 0);
 		const showError = computed(() => hasError.value && isTouched.value);
 
-		
-		watch(
-			() => props.modelValue,
-			(newValue) => {
-				isTouched.value = true;
-				innerValue.value = newValue;
-				validate(innerValue.value);
-			}
-		);
-		
-
-		watch(
-			() => props.rules,
-			(newVal, oldVal) => {
-				if (deepEqual(newVal, oldVal)) return;
-				fieldValidator = validateFormFieldBuilder(rules.value);
-				validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
-				validate(innerValue.value);
-			}
-		);
-
 		const reset = () => {
 			if (disabled.value) {
 				return false;
@@ -160,6 +134,18 @@ export default Vue.extend({
 			isTouched.value = false;
 		};
 
+		modelValueWatcher(props, isTouched, innerValue, validate);
+
+		watch(
+			() => props.rules,
+			(newVal, oldVal) => {
+				if (deepEqual(newVal, oldVal)) return;
+				fieldValidator = validateFormFieldBuilder(rules.value);
+				validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+				validate(innerValue.value);
+			}
+		);
+
 		return {
 			innerValue,
 			label,

package/src/components/Checkbox/__tests__/modelValueWatcher.spec.js

@@ -0,0 +1,43 @@
+import { ref, reactive } from 'vue';
+import modelValueWatcher from '../modelValueWatcher.ts';
+
+describe('modelValueWatcher', () => {
+	let props;
+	let isTouched;
+	let innerValue;
+	let validate;
+
+	beforeEach(() => {
+		props = reactive({
+			modelValue: 'initial value',
+		});
+		isTouched = ref(false);
+		innerValue = ref('');
+		validate = jest.fn();
+		modelValueWatcher(props, isTouched, innerValue, validate);
+	});
+
+	it('should set isTouched.value to true when props.modelValue changes', done => {
+		props.modelValue = 'new value';
+		setTimeout(() => {
+			expect(isTouched.value).toBe(true);
+			done();
+		});
+	});
+
+	it('should update innerValue.value with new props.modelValue', done => {
+		props.modelValue = 'new value';
+		setTimeout(() => {
+			expect(innerValue.value).toBe('new value');
+			done();
+		});
+	});
+
+	it('should call validate function with new innerValue.value', done => {
+		props.modelValue = 'new value';
+		setTimeout(() => {
+			expect(validate).toHaveBeenCalledWith('new value');
+			done();
+		});
+	});
+});

package/src/components/Checkbox/modelValueWatcher.ts

@@ -0,0 +1,12 @@
+import { Ref, watch } from 'vue';
+
+export default function (props, isTouched: Ref, innerValue: Ref, validate: Function) {
+	watch(
+		() => props.modelValue,
+		newValue => {
+			isTouched.value = true;
+			innerValue.value = newValue;
+			validate(innerValue.value);
+		}
+	);
+}

package/src/components/ContextMenu/ContextMenu.vue

@@ -70,9 +70,10 @@ export default Vue.extend({
 
 		let hasBeenBoostrapped = false;
 
-		const outClick = (event: Record<string, any>) => {
+		const outClick = event => {
+			const path = event.path || (event.composedPath && event.composedPath());
 			const isInside =
-				event.path.some((e: HTMLElement) => {
+				path.some((e: HTMLElement) => {
 					if (e.classList) {
 						return e.classList.contains('farm-contextmenu__popup--visible');
 					}