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

package/package.json

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

package/src/components/AlertBox/AlertBox.stories.js

@@ -62,3 +62,17 @@ export const Colors = () => ({
 		<farm-alertbox class="mt-3" v-for="color of colors" :key="'random_10_' + color" :color="color" icon="book" dismissable>alert box</farm-alertbox>
 		</div> `,
 });
+
+export const withDismissableShowAgain = () => ({
+	data() {
+		return {
+			v: true,
+		}
+	},
+	template: `<div>
+		<farm-alertbox v-model="v" dismissable>alert box</farm-alertbox>
+		<farm-btn v-if="!v" @click="v = true;">
+			show
+		</farm-btn>
+	</div>`,
+});

package/src/components/AlertBox/AlertBox.vue

@@ -44,6 +44,7 @@
 
 <script lang="ts">
 import Vue, { ref, PropType } from 'vue';
+import valueWatcher from './valueWatcher';
 
 export default Vue.extend({
 	name: 'farm-alertbox',
@@ -87,20 +88,29 @@ export default Vue.extend({
 			>,
 			default: 'primary',
 		},
+		value: {
+			type: Boolean,
+			default: true,
+		},
 	},
-	setup() {
+	setup(props, { emit }) {
 		const visible = ref(true);
 
 		function close() {
 			visible.value = false;
+			emit('input', false);
 		}
 
+		valueWatcher(props, visible);
+
 		return {
 			visible,
 			close,
 		};
 	},
 });
+
+
 </script>
 <style lang="scss" scoped>
 @import './AlertBox';

package/src/components/AlertBox/__tests__/valueWatcher.spec.js

@@ -0,0 +1,15 @@
+import { ref, reactive } from 'vue';
+import valueWatcher from '../valueWatcher';
+
+describe('valueWatcher', () => {
+	it('Should change value for visible', done => {
+		const visible = ref(false);
+		const mockProps = reactive({ value: false });
+		valueWatcher(mockProps, visible);
+		mockProps.value = true;
+		setTimeout(() => {
+			expect(visible.value).toBeTruthy();
+			done();
+		});
+	});
+});

package/src/components/AlertBox/valueWatcher.ts

@@ -0,0 +1,10 @@
+import { Ref, watch } from 'vue';
+
+export default function (props, visible: Ref) {
+	watch(
+		() => props.value,
+		(newValue: boolean) => {
+			visible.value = newValue;
+		}
+	);
+}

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;
 		}
@@ -160,15 +172,18 @@
 		background-color: var(--farm-#{$color}-base);
 		color: white;
 
-		::v-deep .farm-btn__content {
-			i.mdi {
-				color: white;
-			}
+		&:not(.farm-btn--outlined):not(.farm-btn--plain):not(.farm-btn--icon) {
+			::v-deep .farm-btn__content {
+				i.mdi {
+					color: white;
+				}
 
-			.farm-btn__content i.mdi {
-				color: black;
+				.farm-btn__content i.mdi {
+					color: black;
+				}
 			}
 		}
+
 	}
 
 	.farm-btn--extra,
@@ -248,4 +263,4 @@
 		width: 100%;
 		margin: 0;
 	}
-}
+}

package/src/components/Buttons/DefaultButton/DefaultButton.stories.js

@@ -172,17 +172,17 @@ export const Icons = () => ({
 	template: `<div class="buttons-container">
 		<h4>Full</h4>
         <farm-btn v-for="color of colors":key="'random_3_' + color" :color="color">
-            <v-icon>mdi-book</v-icon> book
+			<farm-icon>book</farm-icon> book
         </farm-btn>
 
 		<h4>Outlined</h4>
         <farm-btn v-for="color of colors":key="color + 'outlined'" :color="color" outlined>
-            <v-icon>mdi-book</v-icon> book
+			<farm-icon>book</farm-icon> book
         </farm-btn>
 
 		<h4>Plain</h4>
         <farm-btn v-for="color of colors":key="color + 'plain'" :color="color" plain>
-            <v-icon>mdi-book</v-icon> book
+			<farm-icon color="primary">book</farm-icon> book
         </farm-btn>
 		
 

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');
 					}

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

@@ -35,8 +35,12 @@ export const Primary = () => ({
 		};
 	},
 	template: `<div style="width: 120px;">
-		<farm-select v-model="v" :items="items" />
+		<farm-label for="select_id">
+			label
+		</farm-label>
+		<farm-select id="select_id" v-model="v" :items="items" />
 		v-model: {{ v }}
+
 	</div>`,
 });
 

package/src/components/Select/Select.vue

@@ -1,6 +1,5 @@
 <template>
 	<div
-		class="farm-textfield"
 		:class="{
 			'farm-textfield': true,
 			'farm-textfield--validatable': rules.length > 0,
@@ -11,8 +10,9 @@
 			'farm-textfield--hiddendetails': hideDetails,
 		}"
 		v-if="!readonly && !disabled"
+		:id="customId"
 	>
-		<farm-contextmenu bottom v-model="isVisible" :stay-open="multiple">
+		<farm-contextmenu bottom v-model="isVisible" :stay-open="multiple" ref="contextmenu">
 			<farm-list v-if="!readonly">
 				<farm-listitem
 					v-for="(item, index) in items"
@@ -29,15 +29,15 @@
 						value="1"
 						size="sm"
 						v-if="isChecked(item)"
-					></farm-checkbox>
+					/>
 					<farm-checkbox
 						class="farm-select__checkbox"
 						v-model="checked"
 						value="2"
 						size="sm"
 						v-else-if="multiple"
-					></farm-checkbox
-					><farm-caption bold tag="span">{{ item[itemText] }}</farm-caption>
+					/>
+					<farm-caption bold tag="span">{{ item[itemText] }}</farm-caption>
 				</farm-listitem>
 				<farm-listitem v-if="!items || items.length === 0">
 					{{ noDataText }}
@@ -46,9 +46,9 @@
 			<template v-slot:activator="{}">
 				<div class="farm-textfield--input farm-textfield--input--iconed">
 					<input
+						v-bind="$attrs"
+						:id="$props.id"
 						v-model="selectedText"
-						:disabled="disabled"
-						:readonly="true"
 						@click="clickInput"
 						@keyup="onKeyUp"
 						@blur="onBlur"
@@ -75,6 +75,7 @@ import validateFormStateBuilder from '../../composition/validateFormStateBuilder
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
 import deepEqual from '../../composition/deepEqual';
+import randomId from '../../helpers/randomId';
 
 export default Vue.extend({
 	name: 'farm-select',
@@ -152,6 +153,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Select id
+		 */
+		id: {
+			type: String,
+			default: '',
+		},
 	},
 	setup(props, { emit }) {
 		const { rules, items, itemText, itemValue, disabled, multiple } = toRefs(props);
@@ -173,6 +181,8 @@ export default Vue.extend({
 			return errorBucket.value.length > 0;
 		});
 
+		const customId = 'farm-select-' + (props.id || randomId(2));
+
 		const showErrorText = computed(() => hasError.value && isTouched.value);
 
 		watch(
@@ -334,6 +344,7 @@ export default Vue.extend({
 			isTouched,
 			isBlured,
 			isVisible,
+			customId,
 			showErrorText,
 			validate,
 			reset,

package/src/components/TextArea/TextArea.vue

@@ -17,8 +17,9 @@
 			}"
 		>
 			<textarea
-				v-bind="$attrs"
 				v-model="innerValue"
+				v-bind="$attrs"
+				:id="$props.id"
 				:rows="$props.rows"
 				:disabled="disabled"
 				:readonly="readonly"
@@ -42,6 +43,7 @@ import validateFormStateBuilder from '../../composition/validateFormStateBuilder
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
 import deepEqual from '../../composition/deepEqual';
+import randomId from '../../helpers/randomId';
 
 export default Vue.extend({
 	name: 'farm-textarea',
@@ -95,6 +97,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Select id
+		 */
+		id: {
+			type: String,
+			default: '',
+		},
 	},
 	setup(props, { emit }) {
 		const { rules } = toRefs(props);
@@ -109,6 +118,7 @@ export default Vue.extend({
 		const hasError = computed(() => {
 			return errorBucket.value.length > 0;
 		});
+		const customId = 'farm-textarea-' + (props.id || randomId(2));
 
 		const showErrorText = computed(() => hasError.value && isTouched.value);
 
@@ -171,6 +181,7 @@ export default Vue.extend({
 			valid,
 			validatable,
 			hasError,
+			customId,
 			isTouched,
 			isBlured,
 			showErrorText,

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -39,7 +39,10 @@ export const Primary = () => ({
 		};
 	},
 	template: `<div style="width: 480px;">
-		<farm-textfield-v2 v-model="v" />
+		<farm-label for="select_label">
+			label
+		</farm-label>
+		<farm-textfield-v2 id="select_label" v-model="v" />
 		v-model: {{ v }}
 	</div>`,
 });

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -10,6 +10,7 @@
 			'farm-textfield--disabled': disabled,
 			'farm-textfield--hiddendetails': hideDetails,
 		}"
+		:id="customId"
 	>
 		<div
 			:class="{
@@ -28,6 +29,7 @@
 				v-bind="$attrs"
 				v-model="innerValue"
 				v-mask="mask"
+				:id="$props.id"
 				:disabled="disabled"
 				:readonly="readonly"
 				@click="$emit('click')"
@@ -61,6 +63,7 @@ import validateFormStateBuilder from '../../composition/validateFormStateBuilder
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
 import deepEqual from '../../composition/deepEqual';
+import randomId from '../../helpers/randomId';
 
 export default Vue.extend({
 	name: 'farm-textfield-v2',
@@ -125,6 +128,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Input id
+		 */
+		id: {
+			type: String,
+			default: '',
+		},
 	},
 	setup(props, { emit }) {
 		const { rules } = toRefs(props);
@@ -139,6 +149,7 @@ export default Vue.extend({
 		const hasError = computed(() => {
 			return errorBucket.value.length > 0;
 		});
+		const customId = 'farm-textfield-' + (props.id || randomId(2));
 
 		const showErrorText = computed(() => hasError.value && isTouched.value);
 
@@ -201,6 +212,7 @@ export default Vue.extend({
 			valid,
 			validatable,
 			hasError,
+			customId,
 			isTouched,
 			isBlured,
 			showErrorText,

package/src/helpers/randomId.ts

@@ -0,0 +1,9 @@
+export default (length: number) => {
+	let text = '';
+	const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+	for (let i = 0; i < length; i++) {
+		text += possible.charAt(Math.floor(Math.random() * possible.length));
+	}
+	return text;
+};