@farm-investimentos/front-mfe-components 15.0.4 → 15.0.6

package/package.json

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

package/src/components/Card/CardContent/CardContent.scss

@@ -8,13 +8,9 @@
             padding: map-get($gutters, $k);
         }
     }
-
-
 }
 
 @each $k in map-keys($background-colors) {
-    @debug $k;
-
     #{'.farm-card__content--' + $k} {
         background-color: map-get($background-colors, $k);
     }

package/src/components/ContextMenu/ContextMenu.stories.js

@@ -195,6 +195,29 @@ export const MaxHeight = () => ({
 	</div>`,
 });
 
+export const Right = () => ({
+	template: `<div style="width: 100%; display: flex; justify-content: right;">
+			<farm-contextmenu>
+				<farm-list>
+				<farm-listitem clickable hoverColor="primary">primary</farm-listitem>
+				<farm-listitem clickable hoverColor="extra-1" hoverColorVariation="lighten">extra 1 lighten</farm-listitem>
+				<farm-listitem clickable hoverColor="error" hoverColorVariation="lighten">
+					<farm-icon size="sm" color="error">trash-can</farm-icon>
+					<farm-typography color="error" tag="span">Error</farm-typography>
+				</farm-listitem>
+			</farm-list>
+			<template v-slot:activator="{ on, attrs }">
+                <farm-btn
+					v-bind="attrs"
+					v-on="on"
+				>
+					open
+				</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});
+
 export const VModel = () => ({
 	data() {
 		return {

package/src/components/ContextMenu/ContextMenu.vue

@@ -117,9 +117,8 @@ export default Vue.extend({
 					window.addEventListener('resize', resizeWindowHandler);
 					calculatePosition();
 				} else {
-					styles.display = 'none';
-					styles.top = 0;
-					styles.left = 0;
+					styles.top = '-10000px';
+					styles.left = '-10000px';
 					styles.zIndex = 0;
 					window.removeEventListener('click', outClick);
 				}
@@ -161,7 +160,6 @@ export default Vue.extend({
 			}
 
 			//Do not allow to open outside window
-
 			const rightEdge = offsetLeft + popupClientRect.width;
 			const clientWidth = document.documentElement.clientWidth;
 

package/src/components/CopyToClipboard/CopyToClipboard.stories.js

@@ -42,12 +42,24 @@ export const CustomSuccessMessage = () => ({
     </div>`,
 });
 
+export const CustomButtonColor = () => ({
+	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
+		<farm-copytoclipboard toCopy="To be copied" button-color="error" />
+    </div>`,
+});
+
 export const CustomTooltipColor = () => ({
 	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
 		<farm-copytoclipboard toCopy="To be copied" tooltip-color="info" />
     </div>`,
 });
 
+export const CustomButtonAndTooltipColor = () => ({
+	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
+		<farm-copytoclipboard toCopy="To be copied" button-color="error" tooltip-color="extra-1" />
+    </div>`,
+});
+
 export const Modal = () => ({
 	data() {
 		return {

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -1,8 +1,15 @@
 <template>
-	<farm-tooltip v-model="show" :color="tooltipColor">
+	<farm-tooltip v-model="show" :color="tooltipColor || buttonColor">
 		{{ feedbackMessage }}
 		<template v-slot:activator="{}">
-			<farm-btn v-if="isIcon" title="Copiar" icon :disabled="disabled" @click="onClick">
+			<farm-btn
+				v-if="isIcon"
+				title="Copiar"
+				icon
+				:disabled="disabled"
+				:color="buttonColor"
+				@click="onClick"
+			>
 				<farm-icon :size="sizeIcon">content-copy</farm-icon>
 			</farm-btn>
 			<farm-btn v-else outlined title="Copiar" :disabled="disabled" @click="onClick">
@@ -44,6 +51,25 @@ export default Vue.extend({
 			type: String,
 			default: 'Conteúdo copiado para a área de trabalho',
 		},
+		/**
+		 * Button color
+		 */
+		buttonColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'primary',
+		},
 		/**
 		 * Tooltip color
 		 */
@@ -61,7 +87,7 @@ export default Vue.extend({
 				| 'extra-1'
 				| 'extra-2'
 			>,
-			default: 'primary',
+			default: null,
 		},
 		/**
 		 * Success message timeout (in ms)

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -18,17 +18,17 @@
 
 th.sortable {
 	cursor: pointer;
+	.farm-icon::before {
+		transition: all 0.3s linear;
+	}
+	
 	&:not(.active) {
 		&:hover {
 			.farm-icon::before {
-				color: var(--farm-bw-black-30) !important;
+				color: var(--farm-bw-black-10) !important;
 			}
 		}
 	}
-
-	.header-text {
-		transition: color 0.5s ease;
-	}
 }
 
 th span.span-checkbox {

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -19,7 +19,13 @@
 				@mouseover="changeShow($index)"
 				@mouseout="changeHidden($index)"
 			>
-				<span class="header-text" v-if="!isTHDataTableSelect(item)">
+				<span
+					class="header-text"
+					v-if="!isTHDataTableSelect(item)"
+					:title="
+						item.sortable && sortClick[$index].show ? `Ordernar por ${item.text}` : null
+					"
+				>
 					{{ item.text }}
 
 					<farm-icon

package/src/components/Form/Form.stories.js

@@ -31,11 +31,12 @@ export const Primary = () => ({
 		return {
 			form: {
 				document: 'Document',
-				name: 'Name',
+				name: '',
 				checkbox: '2',
 				birthDate: new Date('1980/09/20').toISOString(),
 				selectId: 1,
 				rangeDate: [],
+				cityName: null,
 			},
 			validForm: false,
 			rules: {
@@ -51,14 +52,14 @@ export const Primary = () => ({
 		};
 	},
 	template: `
-        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form" autocomplete="off">
 			<div>
 				<farm-label :required="true">Documento</farm-label>
 				<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
 			</div>
 			<farm-label :required="true">Nome</farm-label>
-			<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
-			
+			<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" hint="Seu nome igual ao do RG" />
+
 			<farm-label :required="true">True/false</farm-label>
 			<farm-checkbox v-model="form.checkbox" value="1" :rules="[rules.checked]" />
 

package/src/components/IdCaption/IdCaption.stories.js

@@ -173,11 +173,12 @@ export const CustomSuccessMessageAfterCopyToClipboard = () => ({
     `,
 });
 
-export const CustomTooltipColor = () => ({
+export const CustomColors = () => ({
 	template: `
     <farm-idcaption 
         icon="account-box-outline"
         copy-text="Custom Success Message to be copied"
+        buttons-color="extra-1"
         tooltip-color="info"
     >
         <template v-slot:title>

package/src/components/IdCaption/IdCaption.vue

@@ -27,8 +27,9 @@
 				<farm-btn
 					v-if="link"
 					icon
-					color="primary"
 					class="farm-btn--clickable"
+					title="Ver mais"
+					:color="buttonsColor"
 					@click="$emit('onLinkClick')"
 				>
 					<farm-icon size="16px">open-in-new</farm-icon>
@@ -44,7 +45,8 @@
 					sizeIcon="16px"
 					:toCopy="copyText"
 					:successMessage="successMessage"
-					:tooltipColor="tooltipColor"
+					:buttonColor="buttonsColor"
+					:tooltipColor="tooltipColor || buttonsColor"
 				/>
 			</farm-caption>
 		</div>
@@ -83,6 +85,26 @@ export default Vue.extend({
 			>,
 			default: 'secondary-golden',
 		},
+		/**
+		 * Buttons Color (change from link and copy to clipboard)
+		 */
+		buttonsColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
+			default: 'primary',
+		},
 		/**
 		 * Text to be copied to clipboard
 		 */
@@ -121,7 +143,7 @@ export default Vue.extend({
 				| 'extra-1'
 				| 'extra-2'
 			>,
-			default: 'secondary',
+			default: 'primary',
 		},
 		/**
 		 * noHeight remove min-height of 48px

package/src/components/Logger/Logger.scss

@@ -3,42 +3,18 @@
 	flex-direction: column;
 }
 
+$colorsList: success, error, info;
+
 .logger__divider {
 	height: 40px;
 	margin: -4px 0 -4px 16px;
 	width: 1px;
 
-	&.logger__divider--success-to-success  {
-		background: var(--farm-primary-base);
-	}
-
-	&.logger__divider--error-to-error {
-		background: var(--farm-error-base);
-	}
-
-	&.logger__divider--info-to-info {
-		background: var(--farm-info-base);
-	}
-
-	&.logger__divider--success-to-error {
-		background: linear-gradient(to bottom, var(--farm-primary-base), var(--farm-error-base));
-	}
-	&.logger__divider--success-to-info {
-		background: linear-gradient(to bottom, var(--farm-error-base), var(--farm-info-base));
-	}
-
-	&.logger__divider--error-to-success {
-		background: linear-gradient(to bottom, var(--farm-error-base), var(--farm-primary-base));
-	}
-	&.logger__divider--error-to-info {
-		background: linear-gradient(to bottom, var(--farm-error-base), var(--farm-info-base));
-	}
-
-	&.logger__divider--info-to-success {
-		background: linear-gradient(to bottom, var(--farm-info-base), var(--farm-primary-base));
-	}
-	&.logger__divider--info-to-error {
-		background: linear-gradient(to bottom, var(--farm-info-base), var(--farm-error-base));
+	@each $fromColor in $colorsList {
+		@each $toColor in $colorsList {
+			&.logger__divider--#{$fromColor}-to-#{$toColor} {
+				background: linear-gradient(to bottom, var(--farm-#{$fromColor}-base), var(--farm-#{$toColor}-base));
+			}
+		}
 	}
-	
 }

package/src/components/Logger/Logger.stories.js

@@ -62,6 +62,18 @@ export const Primary = () => ({
 					formattedDate: '13/06/2022  20:40',
 					status: 'info',
 				},
+				{
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+				},
+				{
+					message: 'Info',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'info',
+				},
 			],
 		};
 	},

package/src/components/Logger/LoggerItem/LoggerItem.scss

@@ -26,7 +26,7 @@
 	}
 
 	&.logger__item--success {
-		@include loggerMessage(var(--farm-primary-base));
+		@include loggerMessage(var(--farm-success-base));
 	}
 
 	&.logger__item--info {

package/src/components/Logger/LoggerItem/LoggerItem.stories.js

@@ -19,7 +19,7 @@ export default {
 	},
 };
 
-export const Primary = () => ({
+export const Default = () => ({
 	data() {
 		return {
 			item: {
@@ -129,10 +129,10 @@ export const Details = () => ({
 				},
 				{
 					icon: 'book',
-					message: 'Reprovado entre as pré elegíveis',
+					message: 'Info',
 					userName: 'Cleyton Rasta',
 					formattedDate: '13/06/2022  20:40',
-					status: 'primary',
+					status: 'info',
 					details() {
 						alert('Ver Detalhes');
 					},

package/src/components/Logger/LoggerItem/LoggerItem.vue

@@ -77,16 +77,10 @@ export default Vue.extend({
 				return '';
 			}
 
-			return this.item.status ? mappingIconKeys[this.item.status] : 'error';
+			return this.item.status ? mappingIconKeys[this.item.status] : 'success';
 		},
 		buttonColor(): string {
-			if (this.item.status === 'success') {
-				return 'primary';
-			} else if (this.item.status === 'error') {
-				return 'error';
-			}
-
-			return 'primary';
+			return this.item.status ? this.item.status : 'success';
 		},
 		hasDetails(): boolean {
 			return !!this.item.details;

package/src/components/Logger/LoggerItem/__tests__/LoggerItem.spec.js

@@ -55,7 +55,7 @@ describe('LoggerItem component', () => {
 					status: 'success',
 				},
 			});
-			expect(component.buttonColor).toEqual('primary');
+			expect(component.buttonColor).toEqual('success');
 		});
 
 		it('Should return error button color', async () => {

package/src/components/RangeDatePicker/RangeDatePicker.stories.js

@@ -49,3 +49,23 @@ export const InitialValue = () => ({
 export const MinMax = () => ({
 	template: `<RangeDatePicker inputId="input-custom-id" min="2022-01-17" max="2022-02-15" />`,
 });
+
+export const Reset = () => ({
+	data() {
+		return {
+			date: null,
+		};
+	},
+	methods: {
+		click() {
+			this.$refs.datepickerExemple.clear();
+		},
+	},
+	template: `<div style="width: 480px">
+	<RangeDatePicker ref="datepickerExemple" inputId="input-custom-id" v-model="date" />
+	date: {{ date }}
+		<farm-btn @click="click">
+			reset
+		</farm-btn>
+	</div>`,
+});

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -178,10 +178,9 @@ export default Vue.extend({
 			return true;
 		},
 		isInvertedDate() {
-			if (this.dateField.length === 2) {
+			if ((Array.isArray(this.dateField)) && 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;

package/src/configurations/_variables.scss

@@ -30,7 +30,7 @@ $fontWeights: 100, 200, 300, 400, 500, 600, 700;
 
 $bwVariations: 80, 50, 40, 30, 10, 5;
 
-$aligns: start,center,end,auto,baseline,stretch;
-$align-contents: start,center,end,space-between,space-around,stretch;
-$justifications: start,center,end,space-between,space-around;
-$directions: row,row-reverse,column,column-reverse;
+$aligns: start, center, end, auto, baseline, stretch;
+$align-contents: start, center, end, space-between, space-around, stretch;
+$justifications: start, center, end, space-between, space-around;
+$directions: row, row-reverse, column, column-reverse;

package/src/scss/Sticky-table.scss

@@ -1,24 +1,29 @@
 $defaultLefts: 0, 4rem, 4rem;
+
 @mixin stickytable($selector, $columns: 1, $lefts: $defaultLefts) {
 	#{$selector} {
 		tbody {
 			font-size: 12px;
 		}
+
 		tbody tr:nth-of-type(odd) td {
-			background-color: var(--farm-bw-black-5);
+			background-color: var(--farm-background-base);
 		}
+
 		tr td {
-			background-color: var(--farm-bw-white);
+			background-color: var(--farm-background-white);
 		}
 
 		tr:not(:last-child) td,
 		tr th {
 			border-bottom: none;
 		}
+
 		.v-data-table__wrapper {
 			border-top: 1px solid var(--farm-gray-lighten);
 			border-bottom: 1px solid var(--farm-gray-lighten);
 		}
+
 		tr td:first-child,
 		th:first-child {
 			&:after {
@@ -30,13 +35,17 @@ $defaultLefts: 0, 4rem, 4rem;
 			}
 		}
 
-		&.v-data-table > .v-data-table__wrapper > table > tbody > tr > td:first-child,
-		&.v-data-table > .v-data-table__wrapper > table > thead > tr > th:first-child {
-			padding-left: 24px;
+		&.v-data-table>.v-data-table__wrapper>table {
+
+			>tbody>tr>td:first-child,
+			>thead>tr>th:first-child {
+				padding-left: 24px;
+			}
 		}
 
-		@if $columns > 0 {
+		@if $columns >0 {
 			@for $i from 1 through $columns {
+
 				tr td:nth-child(#{$i}),
 				th:nth-child(#{$i}) {
 					position: sticky;
@@ -46,6 +55,7 @@ $defaultLefts: 0, 4rem, 4rem;
 			}
 
 			@for $i from 1 through $columns {
+
 				tr td:nth-child(#{$i}),
 				th:nth-child(#{$i}) {
 					left: nth($lefts, $i);
@@ -53,24 +63,11 @@ $defaultLefts: 0, 4rem, 4rem;
 			}
 		}
 
-		tr td:first-child, tr th:first-child  {
+		tr td:first-child,
+		tr th:first-child {
 			padding-left: 24px;
 		}
 
-		.v-chip {
-			font-size: 0.75rem;
-			padding: 0 1.5rem;
-		}
-
-		.v-pagination {
-			li button:not([disabled]):not(.v-pagination__item--active):hover {
-				opacity: 0.6;
-			}
-			li button.v-pagination__item--active:hover {
-				cursor: default;
-			}
-		}
-
 		th[role='columnheader'] {
 			color: var(--farm-secondary-green-darken);
 			font-size: 14px;
@@ -93,10 +90,6 @@ $defaultLefts: 0, 4rem, 4rem;
 			padding-left: 24px;
 		}
 
-		.v-data-table-header tr th {
-			box-shadow: 0px 1px 0px 0px var(--farm-gray-lighten);
-		}
-
 		.v-data-table-header__icon {
 			color: var(--farm-gray-base) !important;
 			font-size: 12px;
@@ -116,6 +109,6 @@ $defaultLefts: 0, 4rem, 4rem;
 			margin-right: 0 !important;
 		}
 
-		
+
 	}
-}
+}