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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "12.2.2",
+	"version": "13.0.0",
 	"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": 20px,
+	"sm": 28px,
+	"md": 32px,
+	"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/Buttons/DefaultButton/DefaultButton.stories.js

@@ -225,7 +225,7 @@ export const Rounded = () => ({
 export const Sizes = () => ({
 	data() {
 		return {
-			sizes: ['xs', 'sm', 'md', 'lg', 'xl'],
+			sizes: ['xs', 'sm', 'md', 'lg', 'xl', 'default'],
 			styles: {
 				display: 'flex',
 				flexDirection: 'row',

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

@@ -52,6 +52,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Popup Width
+		 */
+		popupWidth: {
+			type: [Number, String],
+			default: null,
+		},
 	},
 	setup(props, { emit }) {
 		const parent = ref(null);
@@ -70,9 +77,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');
 					}
@@ -126,10 +134,14 @@ export default Vue.extend({
 
 			let offsetLeft = activatorBoundingClientRect.left;
 
-			styles.minWidth =
-				(activatorBoundingClientRect.width > 96
-					? parseInt(activatorBoundingClientRect.width)
-					: 96) + 'px';
+			if (props.popupWidth) {
+				styles.minWidth = props.popupWidth + 'px';
+			} else {
+				styles.minWidth =
+					(activatorBoundingClientRect.width > 96
+						? parseInt(activatorBoundingClientRect.width)
+						: 96) + 'px';
+			}
 
 			if (activatorBoundingClientRect.width < 96) {
 				const w = popupClientRect.width < 96 ? 96 : popupClientRect.width;

package/src/components/DatePicker/DatePicker.scss

@@ -0,0 +1,20 @@
+.datepicker :deep(.v-picker__actions) {
+	padding: 0;
+	margin: 0 16px 16px;
+}
+.datepicker :deep(.v-btn--active) {
+	background: var(--farm-primary-base);
+}
+.datepicker :deep(.v-date-picker-table__current) {
+	border-color: var(--farm-primary-base);
+	color: var(--farm-primary-base);
+}
+.datepicker :deep(.v-date-picker-table__current.v-btn--active) {
+	color: white;
+}
+.btn-clean {
+	margin: 0 8px;
+}
+.farm-contextmenu {
+	width: 100%;
+}

package/src/components/DatePicker/DatePicker.stories.js

@@ -29,25 +29,40 @@ export const Primary = () => ({
 });
 
 export const InitValue = () => ({
-	template: `<div style='max-width: 320px'><farm-input-datepicker inputId="input-custom-id-1" value="2021-08-01" /></div>`,
+	data() {
+		return {
+			date: '2023-08-01',
+		};
+	},
+	template: `<div style='max-width: 320px'><farm-input-datepicker inputId="input-custom-id-1" v-model="date" /></div>`,
 });
 
 export const MinMaxDates = () => ({
+	data() {
+		return {
+			date: '',
+		};
+	},
 	template: `<div style='max-width: 320px'>
-        <farm-input-datepicker inputId="input-custom-id-2" max="2021-12-02" min="2021-07-01" />
+        <farm-input-datepicker inputId="input-custom-id-2" max="2021-12-02" min="2021-07-01" v-model="date" />
         max="2021-12-02" min="2021-07-01"
     </div>`,
 });
 
 export const RequiredDates = () => ({
+	data() {
+		return {
+			date: '',
+		};
+	},
 	template: `<div style='max-width: 320px'>
-        <farm-input-datepicker inputId="input-custom-id-3" :required="true" />
+        <farm-input-datepicker inputId="input-custom-id-3" v-model="date" :required="true" />
     </div>`,
 });
 
-export const ReadonlyFalse = () => ({
+export const Readonly = () => ({
 	template: `<div style='max-width: 320px'>
-        <farm-input-datepicker :readonly="false" inputId="input-custom-id-3"/>
+        <farm-input-datepicker :readonly="true"  value="2021-08-01" inputId="input-custom-id-3"/>
     </div>`,
 });
 

package/src/components/DatePicker/DatePicker.vue

@@ -1,50 +1,48 @@
 <template>
-	<v-menu
-		ref="menuField"
+	<farm-contextmenu
+		stay-open
 		v-model="menuField"
-		:close-on-content-click="false"
-		:return-value.sync="fieldRange"
-		transition="scale-transition"
-		offset-y
-		min-width="290px"
+		ref="contextmenu"
+		maxHeight="auto"
+		bottom
+		popup-width="320"
 	>
-		<template v-slot:activator="{}">
-			<farm-textfield-v2
-				icon="calendar"
-				v-model="fieldRange"
-				autocomplete="off"
-				:readonly="readonly"
-				:mask="`${readonly ? '' : '##/##/####'}`"
-				:id="inputId"
-				:rules="[checkMax, checkMin, checkRequire]"
-				@keyup="keyUpInput"
-				@click="openDatepicker"
-				@onClickIcon="openDatepicker"
-			/>
-		</template>
 		<v-date-picker
 			v-if="menuField"
 			v-model="dateField"
 			no-title
 			scrollable
-			color="secondary"
 			locale="pt-br"
+			class="datepicker"
 			:max="max"
 			:min="min"
 		>
 			<farm-btn outlined color="secondary" @click="closeDatepicker" title="Fechar">
 				Fechar
 			</farm-btn>
-			<farm-btn outlined class="ml-2" @click="clear"> Limpar </farm-btn>
+			<farm-btn outlined class="btn-clean" @click="clear"> Limpar </farm-btn>
 			<farm-btn class="ml-2" title="Confirmar" :disabled="!dateField.length" @click="save()">
 				Confirmar
 			</farm-btn>
 		</v-date-picker>
-	</v-menu>
+		<template v-slot:activator="{ }">
+			<farm-textfield-v2
+				icon="calendar"
+				v-model="fieldRange"
+				autocomplete="off"
+				:readonly="readonly"
+				:mask="`${readonly ? '' : '##/##/####'}`"
+				:id="inputId"
+				:rules="[checkMax, checkMin, checkRequire]"
+				@keyup="keyUpInput"
+				@click="openDatepicker"
+				@onClickIcon="openDatepicker"
+			/>
+		</template>
+	</farm-contextmenu>
 </template>
 <script lang="ts">
 import Vue from 'vue';
-import { VMenu } from 'vuetify/lib/components/VMenu';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
 import { defaultFormat as dateDefaultFormatter, convertDate } from '../../helpers/date';
 /**
@@ -53,7 +51,6 @@ import { defaultFormat as dateDefaultFormatter, convertDate } from '../../helper
 export default Vue.extend({
 	name: 'farm-input-datepicker',
 	components: {
-		VMenu,
 		VDatePicker,
 	},
 	props: {
@@ -155,8 +152,10 @@ export default Vue.extend({
 			return dateDefaultFormatter(date);
 		},
 		save() {
-			this.$refs.menuField.save(this.formatDateRange(this.dateField));
+			this.formatDateRange(this.dateField);
 			this.inputVal = this.dateField;
+			this.menuField = false;
+			this.closeDatepicker();
 		},
 		clear() {
 			this.dateField = '';
@@ -185,6 +184,7 @@ export default Vue.extend({
 		},
 		closeDatepicker() {
 			this.menuField = false;
+			this.$refs.contextmenu.inputValue = false;
 		},
 	},
 	computed: {
@@ -200,7 +200,5 @@ export default Vue.extend({
 });
 </script>
 <style lang="scss" scoped>
-.theme--light.v-input.v-input--dense.v-text-field.v-text-field--outlined.error--text:after {
-	content: '' !important;
-}
+@import './DatePicker.scss';
 </style>

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -1,27 +1,15 @@
 <template>
-	<v-menu
-		ref="menuField"
+	<farm-contextmenu
+		stay-open
 		v-model="menuField"
-		:close-on-content-click="false"
-		:nudge-right="40"
-		:return-value.sync="fieldRange"
-		transition="scale-transition"
-		offset-y
-		min-width="290px"
+		ref="contextmenu"
+		maxHeight="auto"
+		bottom
+		popup-width="320"
 	>
-		<template v-slot:activator="{}">
-			<farm-textfield-v2
-				v-model="fieldRange"
-				icon="calendar"
-				readonly
-				:id="inputId"
-				:rules="required ? [requiredRule] : []"
-				@click="openDatepicker"
-				@onClickIcon="openDatepicker"
-			/>
-		</template>
 		<v-date-picker
 			v-if="menuField"
+			class="datepicker"
 			v-model="dateField"
 			no-title
 			scrollable
@@ -34,18 +22,27 @@
 			<farm-btn outlined color="secondary" @click="closeDatepicker" title="Fechar">
 				Fechar
 			</farm-btn>
-			<farm-btn outlined class="ml-2" @click="clear()" title="Limpar"> Limpar</farm-btn>
-			<farm-btn class="ml-2" :disabled="canConfirm" @click="save()" title="Confirmar">
+			<farm-btn outlined class="btn-clean" @click="clear"> Limpar </farm-btn>
+			<farm-btn class="ml-2" title="Confirmar" :disabled="!dateField.length" @click="save()">
 				Confirmar
 			</farm-btn>
 		</v-date-picker>
-	</v-menu>
+		<template v-slot:activator="{ }">
+			<farm-textfield-v2
+				v-model="fieldRange"
+				icon="calendar"
+				readonly
+				:id="inputId"
+				:rules="required ? [requiredRule] : []"
+				@click="openDatepicker"
+				@onClickIcon="openDatepicker"
+			/>
+		</template>
+	</farm-contextmenu>
 </template>
 <script>
 import Vue from 'vue';
-import { VMenu } from 'vuetify/lib/components/VMenu';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
-import DefaultButton from '../Buttons/DefaultButton';
 import { defaultFormat as dateDefaultFormatter } from '../../helpers/date';
 /**
  * Componente de input com datepicker para range de data
@@ -53,9 +50,7 @@ import { defaultFormat as dateDefaultFormatter } from '../../helpers/date';
 export default Vue.extend({
 	name: 'farm-input-rangedatepicker',
 	components: {
-		VMenu,
 		VDatePicker,
-		'farm-btn': DefaultButton,
 	},
 	props: {
 		/**
@@ -127,9 +122,10 @@ export default Vue.extend({
 			return dateDefaultFormatter(dateStart) + ' a ' + dateDefaultFormatter(dateEnd);
 		},
 		save() {
-			this.$refs.menuField.save(this.formatDateRange(this.dateField));
+			this.formatDateRange(this.dateField);
 			this.inputVal = this.dateField;
 			this.menuField = false;
+			this.closeDatepicker();
 		},
 		clear() {
 			this.dateField = [];
@@ -140,6 +136,7 @@ export default Vue.extend({
 		},
 		closeDatepicker() {
 			this.menuField = false;
+			this.$refs.contextmenu.inputValue = false;
 		},
 	},
 	computed: {
@@ -158,7 +155,5 @@ export default Vue.extend({
 });
 </script>
 <style lang="scss" scoped>
-.theme--light.v-input.v-input--dense.v-text-field.v-text-field--outlined.error--text:after {
-	content: '' !important;
-}
+@import '../DatePicker/DatePicker.scss';
 </style>

package/src/configurations/_variables.scss

@@ -1,8 +1,8 @@
 $colors: primary, secondary, error, accent, info, success, warning, gray, yellow, white;
 $sizes: (
     "xs": 12px,
-    "sm": 16px,
-    "md": 24px,
+    "sm": 14px,
+    "md": 20px,
     "lg": 36px,
     "xl": 40px
 );