@farm-investimentos/front-mfe-components 14.1.1 → 14.1.3

package/package.json

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

package/src/components/DatePicker/DatePicker.scss

@@ -5,16 +5,15 @@
 .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-picker__body) {
+	width: 341px !important;
 }
-.datepicker :deep(.v-date-picker-table__current.v-btn--active) {
-	color: white;
-}
-.btn-clean {
+
+.btn-cancel {
 	margin: 0 8px;
 }
+
 .farm-contextmenu {
 	width: 100%;
-}
+}

package/src/components/DatePicker/DatePicker.vue

@@ -14,18 +14,23 @@
 			scrollable
 			locale="pt-br"
 			class="datepicker"
+			show-adjacent-months
+			:header-date-format="formatDatePickerHeader"
 			:max="max"
 			:min="min"
 		>
-			<farm-btn outlined color="secondary" @click="closeDatepicker" title="Fechar">
-				Fechar
+			<farm-btn plain title="Limpar" color="primary" :disabled="isDisabled" @click="clear">
+				Limpar
 			</farm-btn>
-			<farm-btn outlined class="btn-clean" @click="clear"> Limpar </farm-btn>
+			<farm-btn outlined class="btn-cancel" title="Cancelar" @click="closeDatepicker">
+				Cancelar
+			</farm-btn>
+
 			<farm-btn class="ml-2" title="Confirmar" :disabled="!dateField.length" @click="save()">
-				Confirmar
+				Confirmar <farm-icon>check</farm-icon>
 			</farm-btn>
 		</v-date-picker>
-		<template v-slot:activator="{ }">
+		<template v-slot:activator="{}">
 			<farm-textfield-v2
 				icon="calendar"
 				v-model="fieldRange"
@@ -45,6 +50,7 @@
 import Vue from 'vue';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
 import { defaultFormat as dateDefaultFormatter, convertDate } from '../../helpers/date';
+import { formatDatePickerHeader } from '../../helpers';
 /**
  * Componente de input com datepicker para data
  */
@@ -186,6 +192,7 @@ export default Vue.extend({
 			this.menuField = false;
 			this.$refs.contextmenu.inputValue = false;
 		},
+		formatDatePickerHeader,
 	},
 	computed: {
 		inputVal: {
@@ -196,6 +203,9 @@ export default Vue.extend({
 				this.$emit('input', val);
 			},
 		},
+		isDisabled(): boolean {
+			return this.value.length === 0 ? true : false;
+		},
 	},
 });
 </script>

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -9,22 +9,30 @@
 	>
 		<v-date-picker
 			v-if="menuField"
-			class="datepicker"
+			class="rangedatepicker datepicker"
 			v-model="dateField"
 			no-title
 			scrollable
 			range
-			:max="max"
-			:min="min"
+			show-adjacent-months
+			:header-date-format="formatDatePickerHeader"
 			color="secondary"
 			locale="pt-br"
+			:max="max"
+			:min="min"
+			:class="{
+				'invert-date': isInvertedDate,
+			}"
 		>
-			<farm-btn outlined color="secondary" @click="closeDatepicker" title="Fechar">
-				Fechar
+			<farm-btn plain title="Limpar" color="primary" :disabled="isDisabled" @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 != 2" @click="save()">
-				Confirmar
+			<farm-btn outlined class="btn-cancel" title="Cancelar" @click="closeDatepicker">
+				Cancelar
+			</farm-btn>
+
+			<farm-btn class="ml-2" title="Confirmar" :disabled="!dateField.length" @click="save()">
+				Confirmar <farm-icon>check</farm-icon>
 			</farm-btn>
 		</v-date-picker>
 		<template v-slot:activator="{}">
@@ -44,6 +52,7 @@
 import Vue from 'vue';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
 import { defaultFormat as dateDefaultFormatter } from '../../helpers/date';
+import { formatDatePickerHeader } from '../../helpers';
 /**
  * Componente de input com datepicker para range de data
  */
@@ -136,6 +145,7 @@ export default Vue.extend({
 			this.menuField = false;
 			this.$refs.contextmenu.inputValue = false;
 		},
+		formatDatePickerHeader,
 	},
 	computed: {
 		inputVal: {
@@ -149,6 +159,18 @@ export default Vue.extend({
 		canConfirm() {
 			return !this.dateField || this.dateField.length == 1;
 		},
+		isDisabled() {
+			return this.value?.length === 0 ? true : false;
+		},
+		isInvertedDate() {
+			if (this.dateField.length === 2) {
+				const firstDate = new Date(this.dateField[0]);
+				const secondDate = new Date(this.dateField[1]);
+
+				return firstDate.getTime() > secondDate.getTime();
+			}
+			return false;
+		},
 	},
 });
 </script>

package/src/components/Select/Select.scss

@@ -28,9 +28,11 @@
 	margin-right: 8px;
 }
 
-::v-deep .farm-listitem:hover .farm-checkbox .farm-icon {
+:deep(.farm-listitem:hover .farm-checkbox .farm-icon) {
 	color: var(--farm-primary-lighten);
 }
-::v-deep .farm-listitem:hover .farm-checkbox.farm-checkbox--checked .farm-icon {
+
+
+:deep(.farm-listitem:hover .farm-checkbox.farm-checkbox--checked .farm-icon) {
 	color: white;
-}
+}

package/src/components/Select/Select.vue

@@ -47,11 +47,11 @@
 				<div class="farm-textfield--input farm-textfield--input--iconed">
 					<input
 						v-bind="$attrs"
-						:id="$props.id"
 						v-model="selectedText"
 						ref="inputField"
+						readonly
+						:id="$props.id"
 						@click="clickInput"
-						@keyup="onKeyUp"
 						@blur="onBlur"
 						@focusin="onFocus(true)"
 						@focusout="onFocus(false)"
@@ -81,12 +81,13 @@
 </template>
 
 <script lang="ts">
-import Vue, { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
+import Vue, { computed, onBeforeMount, PropType, toRefs, watch } from 'vue';
 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';
+import { buildData } from './composition';
 
 export default Vue.extend({
 	name: 'farm-select',
@@ -217,16 +218,19 @@ export default Vue.extend({
 	},
 	setup(props, { emit }) {
 		const { rules, items, itemText, itemValue, disabled, multiple } = toRefs(props);
-		const innerValue = ref(props.value);
-		const isTouched = ref(false);
-		const isFocus = ref(false);
-		const isBlured = ref(false);
-		const isVisible = ref(false);
-		const selectedText = ref('');
-		const multipleValues = ref(Array.isArray(props.value) ? [...props.value] : []);
-		const checked = ref('1');
-		const notChecked = ref(false);
-		const inputField = ref();
+
+		const {
+			multipleValues,
+			innerValue,
+			isTouched,
+			isFocus,
+			isBlured,
+			isVisible,
+			selectedText,
+			checked,
+			notChecked,
+			inputField,
+		} = buildData(props);
 
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
 
@@ -300,10 +304,6 @@ export default Vue.extend({
 			emit('input', innerValue.value);
 		};
 
-		const onKeyUp = (event: Event) => {
-			emit('keyup', event);
-		};
-
 		const onBlur = (event: Event) => {
 			isBlured.value = true;
 			validate(innerValue.value);
@@ -413,7 +413,6 @@ export default Vue.extend({
 			validate,
 			reset,
 			selectItem,
-			onKeyUp,
 			onBlur,
 			onFocus,
 			clickInput,

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

@@ -0,0 +1,27 @@
+import buildData from '../composition/buildData';
+
+describe('buildData', () => {
+	it('should initialize with empty arrays and false values', () => {
+		const props = { value: [] };
+		const result = buildData(props);
+
+		expect(result.multipleValues.value).toEqual([]);
+		expect(result.innerValue.value).toEqual([]);
+		expect(result.isTouched.value).toBe(false);
+		expect(result.isFocus.value).toBe(false);
+		expect(result.isBlured.value).toBe(false);
+		expect(result.isVisible.value).toBe(false);
+		expect(result.selectedText.value).toBe('');
+		expect(result.checked.value).toBe('1');
+		expect(result.notChecked.value).toBe(false);
+		expect(result.inputField.value).toBe(undefined);
+	});
+
+	it('should initialize with provided values', () => {
+		const props = { value: 'test' };
+		const result = buildData(props);
+
+		expect(result.multipleValues.value).toEqual([]);
+		expect(result.innerValue.value).toBe('test');
+	});
+});

package/src/components/Select/composition/buildData.ts

@@ -0,0 +1,27 @@
+import { ref } from 'vue';
+
+export default function (props) {
+	const multipleValues = ref(Array.isArray(props.value) ? [...props.value] : []);
+	const innerValue = ref(props.value);
+	const isTouched = ref(false);
+	const isFocus = ref(false);
+	const isBlured = ref(false);
+	const isVisible = ref(false);
+	const selectedText = ref('');
+	const checked = ref('1');
+	const notChecked = ref(false);
+	const inputField = ref();
+
+	return {
+		multipleValues,
+		innerValue,
+		isTouched,
+		isFocus,
+		isBlured,
+		isVisible,
+		selectedText,
+		checked,
+		notChecked,
+		inputField,
+	};
+}

package/src/components/Select/composition/index.ts

@@ -0,0 +1,3 @@
+import buildData from './buildData';
+
+export { buildData };

package/src/components/Stepper/StepperHeader/StepperHeader.scss

@@ -40,7 +40,7 @@ $step-height: 64px;
 			}
 		}
 
-		.farm-bodytext--2 {
+		.farm-bodytext--2:not(.farm-icon__number) {
 			margin-top: 8px;
 			text-align: center;
 		}

package/src/components/Typography/BodyText/BodyText.vue

@@ -1,10 +1,11 @@
 <template>
 	<farm-typography
+		v-bind="$attrs"
+		v-on="$listeners"
 		:weight="weight"
 		:size="size"
 		:key="key"
 		:class="{ [`farm-bodytext--${type}`]: true, [`farm-bodytext--${variation}`]: true }"
-		v-bind="$attrs"
 	>
 		<slot></slot>
 	</farm-typography>

package/src/components/Typography/Caption/Caption.vue

@@ -1,10 +1,11 @@
 <template>
 	<farm-typography
+		v-bind="$attrs"
+		v-on="$listeners"
 		:weight="weight"
 		:size="size"
 		:key="key"
 		:class="{ 'farm-caption': true, [`farm-caption--${variation}`]: true }"
-		v-bind="$attrs"
 	>
 		<slot></slot>
 	</farm-typography>

package/src/components/Typography/Heading/Heading.vue

@@ -1,5 +1,7 @@
 <template>
 	<farm-typography
+		v-bind="$attrs"
+		v-on="$listeners"
 		:weight="weight"
 		:size="size"
 		:tag="tag"
@@ -18,9 +20,9 @@ export default Vue.extend({
 	inheritAttrs: true,
 	name: 'farm-heading',
 	props: {
-        /**
-         * Type of the heading
-         */
+		/**
+		 * Type of the heading
+		 */
 		type: { type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6>, default: 1 },
 	},
 	setup(props) {

package/src/components/Typography/OverlayText/OverlayText.vue

@@ -1,5 +1,11 @@
 <template>
-	<farm-typography v-bind="$attrs" size="10px" class="farm-overlaytext" :weight="400">
+	<farm-typography
+		v-bind="$attrs"
+		v-on="$listeners"
+		size="10px"
+		class="farm-overlaytext"
+		:weight="400"
+	>
 		<slot></slot>
 	</farm-typography>
 </template>

package/src/components/Typography/Subtitle/Subtitle.vue

@@ -1,10 +1,11 @@
 <template>
 	<farm-typography
+		v-bind="$attrs"
+		v-on="$listeners"
 		:weight="weight"
 		:size="size"
 		:key="key"
 		:class="{ [`farm-subtitle--${type}`]: true, [`farm-subtitle--${variation}`]: true }"
-		v-bind="$attrs"
 	>
 		<slot></slot>
 	</farm-typography>

package/src/components/Typography/Typography.stories.js

@@ -183,4 +183,15 @@ export const Ellipsis = () => ({
 	template: `<div style="width: 100px;">
 		<farm-typography ellipsis>sample text for css text ellipsis</farm-typography>
 	</div>`,
+});
+
+export const Listener = () => ({
+	methods: {
+		handleEvent(type) {
+			alert(type);
+		},
+	},
+	template: `<farm-bodytext @click="handleEvent">
+		Click me
+	</farm-bodytext>`,
 });

package/src/components/Typography/Typography.vue

@@ -1,5 +1,6 @@
 <template>
 	<component
+		v-on="$listeners"
 		:is="tag"
 		:class="{
 			'farm-typography': true,

package/src/helpers/formatDatePickerHeader.ts

@@ -0,0 +1,19 @@
+const monthNumberToMonthName = {
+	'01': 'Janeiro',
+	'02': 'Fevereiro',
+	'03': 'Março',
+	'04': 'Abril',
+	'05': 'Maio',
+	'06': 'Junho',
+	'07': 'Julho',
+	'08': 'Agosto',
+	'09': 'Setembro',
+	'10': 'Outubro',
+	'11': 'Novembro',
+	'12': 'Dezembro',
+};
+
+export function formatDatePickerHeader(date: string): string {
+	const [year, month] = date.split('-');
+	return `${month ? monthNumberToMonthName[month] + ' ' : ''}${year}`;
+}

package/src/helpers/index.ts

@@ -0,0 +1,3 @@
+import { formatDatePickerHeader } from './formatDatePickerHeader';
+export { default as calculateMainZindex } from './calculateMainZindex';
+export { formatDatePickerHeader };

package/src/scss/VuejsDialog.scss

@@ -1,6 +1,7 @@
 @import 'vuejs-dialog/dist/vuejs-dialog.min';
 @import '../components/Buttons/DefaultButton/DefaultButton.scss';
 
+
 .dg-main-content {
     font-family: Montserrat, sans-serif !important;
 }
@@ -27,6 +28,11 @@
     margin: 24px 0;
     font-size: 12px;
     line-height: 20px;
+    word-break: break-all;
+
+    ul {
+        margin-left: 16px;
+    }
 }
 
 .dg-content-footer {
@@ -53,7 +59,7 @@
     background-color: rgba(0, 0, 0, .46);
 }
 
-.dg-parent-nofooter{
+.dg-parent-nofooter {
     .dg-content-footer {
         display: none;
     }
@@ -73,6 +79,7 @@
     .dg-btn--ok {
         @extend .farm-btn--error;
     }
+
     .dg-title {
         color: var(--farm-error-base);
     }

package/src/scss/utils.scss

@@ -92,7 +92,7 @@ tr.v-data-table__empty-wrapper {
 	}
 	.v-date-picker-header {
 		display: grid;
-		grid-template-columns: 1fr 2rem 2rem;
+		grid-template-columns: 1fr 60px 36px;
 		grid-template-areas: ' a b c ';
 		margin-top: 0.5rem;
 
@@ -106,6 +106,159 @@ tr.v-data-table__empty-wrapper {
 			grid-area: c;
 		}
 	}
+
+	.v-date-picker-table__current.v-btn--active {
+		color: white;
+	}
+	.v-date-picker-header {
+		padding: 0;
+		margin-top: 16px;
+		margin-bottom: 16px;
+		margin-left: 4px;
+
+		.mdi-chevron-left::before,
+		.mdi-chevron-right::before {
+			color: var(--farm-neutral-darken);
+			font-size: 20px;
+			font-weight: 900;
+		}
+	}
+
+	.v-picker__body:has(div > .v-date-picker-years) {
+		li {
+			color: var(--farm-neutral-darken);
+			font-size: 12px;
+			font-weight: 500;
+			width: 70px;
+			margin: 0 auto;
+			border-radius: 5px;
+
+			&.active {
+				color: #fff;
+				background-color: var(--farm-primary-base);
+				border: 1px solid var(--farm-primary-base);
+			}
+
+			&:hover:not(.active) {
+				background-color: var(--farm-primary-lighten);
+			}
+		}
+	}
+
+	.v-date-picker-header__value {
+		button {
+			padding-left: 0;
+		}
+	}
+
+	.v-picker__actions {
+		margin-bottom: 24px;
+	}
+
+	.v-date-picker-table {
+		padding: 0 40px;
+		margin-bottom: 24px;
+
+		table {
+			height: 100%;
+		}
+
+		table thead th {
+			color: var(--farm-neutral-darken);
+			font-size: 16px;
+			font-weight: 700;
+		}
+
+		table tbody td .v-btn {
+			color: var(--farm-neutral-darken);
+			font-size: 12px;
+			font-weight: 500;
+		}
+
+		table tbody td .v-btn.v-btn--disabled {
+			color: var(--farm-gray-lighten);
+		}
+
+		table tbody td .v-btn.v-date-picker-table__current,
+		.v-btn.v-btn--active {
+			border-radius: 5px;
+			border-color: var(--farm-primary-base);
+			border-width: 2px;
+		}
+
+		table tbody td .v-btn.v-date-picker-table__current {
+			color: var(--farm-primary-base);
+		}
+
+		table tbody td .v-btn.v-btn--active {
+			color: white;
+		}
+
+		table tbody td .v-btn--rounded {
+			border-radius: 5px;
+		}
+
+		table tbody td .v-btn {
+			&:not(.v-btn--active):hover::before {
+				background-color: var(--farm-primary-lighten);
+				opacity: 1;
+			}
+			&::before {
+				background-color: transparent;
+			}
+		}
+	}
+
+	&.rangedatepicker .v-date-picker-table {
+		table tbody td .v-btn.v-btn--active {
+			&:not(.v-date-picker--first-in-range, .v-date-picker--last-in-range) {
+				background: var(--farm-primary-lighten);
+				color: var(--farm-primary-base);
+				border-radius: 0;
+				width: 37px;
+			}
+
+			&.v-date-picker--first-in-range,
+			&.v-date-picker--last-in-range {
+				width: 37px;
+			}
+
+			&.v-date-picker--first-in-range {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+				border-top-left-radius: 5px;
+				border-bottom-left-radius: 5px;
+			}
+
+			&.v-date-picker--last-in-range {
+				border-top-right-radius: 5px;
+				border-bottom-right-radius: 5px;
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+
+			&.v-date-picker--last-in-range.v-date-picker--first-in-range {
+				border-radius: 5px;
+			}
+		}
+	}
+	&.rangedatepicker.invert-date .v-date-picker-table {
+		table tbody td .v-btn.v-btn--active {
+			&.v-date-picker--first-in-range {
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+				border-top-right-radius: 5px;
+				border-bottom-right-radius: 5px;
+			}
+
+			&.v-date-picker--last-in-range {
+				border-top-left-radius: 5px;
+				border-bottom-left-radius: 5px;
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+		}
+	}
 }
 
 .v-icon.v-icon__extral4 {

package/src/stories/Introduction.stories.mdx

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/addon-docs';
+import imageFile from './assets/logo_farmtech.svg';
 
 <Meta title="Introduction" />
 
@@ -106,8 +107,10 @@ import { Meta } from '@storybook/addon-docs';
   
 `}</style>
 
-# Bem vindo ao Storybook da Farm
+# Welcome to Farmtech Storybook
 
-Aqui você encontrará todos os componentes de User Interface da Farm para projetos web.
-Navegue pelo menu lateral para conhecê-los.
+<img src={imageFile} />
 
+Here you can find the components from the Farmtech's Design System on the top of Vue 2. 
+
+Currrent version: {VERSION}