@farm-investimentos/front-mfe-components 14.2.2 → 15.0.0

package/src/components/Collapsible/Collapsible.vue

@@ -4,18 +4,30 @@
 			<div class="collapsible__header" @click="onToggleCollapsible(status)">
 				<div class="collapsible__content-title">
 					<div class="collapsible__icon collapsible__icon--main" v-if="icon !== ''">
-						<farm-icon size="md">
+						<farm-icon size="md" color="secondary-green">
 							{{ icon }}
 						</farm-icon>
 					</div>
-					<farm-typography bold size="lg">
+					<farm-heading type="6" color="black">
 						{{ title }}
-					</farm-typography>
+					</farm-heading>
 				</div>
-				<div class="collapsible__icon collapsible__icon--arrow">
-					<farm-icon size="md" color="secondary">
-						{{ arrowIcon }}
-					</farm-icon>
+				<div class="collapsible__content-right">
+					<div class="collapsible__icon" v-if="showChip">
+						<farm-chip
+							:color="colorChip"
+							:dense="dense"
+							:variation="variation"
+							:outlined="outlined"
+						>
+							{{ textChip }}
+						</farm-chip>
+					</div>
+					<div class="collapsible__icon collapsible__icon--arrow">
+						<farm-icon size="md" color="primary">
+							{{ arrowIcon }}
+						</farm-icon>
+					</div>
 				</div>
 			</div>
 			<transition name="fade">
@@ -28,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-collapsible',
@@ -56,6 +68,54 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * show Chip
+		 */
+		showChip: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * text of Chip
+		 */
+		textChip: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * color of Chip
+		 */
+		colorChip: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'primary',
+		},
+		dense: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Is outlined
+		 */
+		outlined: {
+			type: Boolean,
+			default: false,
+		},
+		variation: {
+			type: String,
+			default: 'base',
+		},
 	},
 
 	data() {

package/src/components/ContextMenu/ContextMenu.scss

@@ -14,7 +14,7 @@
 	overflow-y: auto;
 	overflow-x: hidden;
 	contain: content;
-	font-family: 'Montserrat', sans-serif !important;
+	font-family: 'Manrope', sans-serif !important;
 
 	transform-origin: left top;
 	transition: visibility 0.1s linear, opacity 0.1s linear;

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

@@ -20,9 +20,9 @@ export default {
 
 export const Primary = () => ({
 	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
-        <farm-contextmenu>
-            some text
-            <template v-slot:activator="{ on, attrs }">
+		<farm-contextmenu>
+			some text
+			<template v-slot:activator="{ on, attrs }">
                 <farm-btn
 					v-bind="attrs"
 					v-on="on"

package/src/components/ContextMenu/ContextMenu.vue

@@ -18,7 +18,7 @@
 </template>
 <script lang="ts">
 import Vue, { ref, watch, reactive, onBeforeUnmount, toRefs } from 'vue';
-import { calculateMainZindex } from '../../helpers';
+import { calculateMainZindex, isChildOfFixedElement } from '../../helpers';
 
 export default Vue.extend({
 	name: 'farm-contextmenu',
@@ -74,7 +74,7 @@ export default Vue.extend({
 		} as any);
 
 		const inputValue = ref(props.value);
-		
+
 		let hasBeenBoostrapped = false;
 
 		const outClick = event => {
@@ -130,6 +130,8 @@ export default Vue.extend({
 			if (!parent.value || !activator.value.children[0]) {
 				return;
 			}
+			const activatorChildOfFixedElement = isChildOfFixedElement(activator.value);
+
 			const parentBoundingClientRect = parent.value.getBoundingClientRect();
 			const activatorBoundingClientRect = activator.value.children[0].getBoundingClientRect();
 			const popupClientRect = popup.value.getBoundingClientRect();
@@ -173,8 +175,18 @@ export default Vue.extend({
 				offsetTop -= bottomEdge - window.scrollY - clientHeight + 12;
 			}
 
+			if (activatorChildOfFixedElement) {
+				styles.position = 'fixed';
+				offsetTop =
+					parentBoundingClientRect.top +
+					(!bottom.value ? 0 : activatorBoundingClientRect.height);
+			} else {
+				styles.position = 'absolute';
+			}
+
 			styles.top = `${offsetTop}px`;
 			styles.left = `${offsetLeft}px`;
+
 			styles.zIndex = calculateMainZindex();
 		};
 

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

@@ -24,6 +24,12 @@ export const Primary = () => ({
     </div>`,
 });
 
+export const SizeIcon = () => ({
+	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
+		<farm-copytoclipboard toCopy="To be copied" sizeIcon="20px" />
+    </div>`,
+});
+
 export const NoIcon = () => ({
 	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
 		<farm-copytoclipboard toCopy="To be copied" :isIcon="false" />
@@ -62,4 +68,4 @@ export const SuccessTimeout = () => ({
 	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
 		<farm-copytoclipboard toCopy="To be copied" success-timeout="5000" />
     </div>`,
-});
+});

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -3,10 +3,10 @@
 		{{ feedbackMessage }}
 		<template v-slot:activator="{}">
 			<farm-btn v-if="isIcon" title="Copiar" icon :disabled="disabled" @click="onClick">
-				<farm-icon size="xs">content-copy</farm-icon>
+				<farm-icon :size="sizeIcon">content-copy</farm-icon>
 			</farm-btn>
 			<farm-btn v-else outlined title="Copiar" :disabled="disabled" @click="onClick">
-				<farm-icon>content-copy</farm-icon>
+				<farm-icon :size="sizeIcon">content-copy</farm-icon>
 				Copiar
 			</farm-btn>
 		</template>
@@ -28,6 +28,15 @@ export default Vue.extend({
 		 * Is button with icon?
 		 */
 		isIcon: { type: Boolean, default: true },
+		/**
+		 * sizeIcon: icon size setting
+		 */
+		sizeIcon: {
+			type: String as PropType<
+				'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'other (examples: 12px, 3rem)'
+			>,
+			default: 'xs',
+		},
 		/**
 		 * Success message content after copy
 		 */
@@ -42,12 +51,13 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'
 				| 'error'
 				| 'warning'
-				| 'success'
 				| 'extra-1'
 				| 'extra-2'
 			>,
@@ -65,6 +75,7 @@ export default Vue.extend({
 		const show = ref(false);
 		const feedbackMessage = ref('');
 		const disabled = ref(false);
+		const sizeIcon = ref(props.sizeIcon);
 		const { toCopy, isIcon, successMessage, successTimeout } = toRefs(props);
 
 		const onClick = async () => {
@@ -86,6 +97,7 @@ export default Vue.extend({
 		return {
 			show,
 			isIcon,
+			sizeIcon,
 			feedbackMessage,
 			disabled,
 			onClick,

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.scss

@@ -1,20 +1,17 @@
 div {
-    border-top: 1px solid var(--farm-stroke-divider);
     padding: 64px 24px 32px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
 
-    p:first-of-type {
-        margin: 24px auto 16px;
+    p {
+        &:first-of-type {
+            margin: 24px auto;
+        }
     }
 
-    p:last-child {
-        color: var(--farm-text-secondary);
-    }
-
-    .farm-icon.farm-icon--primary {
-        color: var(--farm-text-disabled);
+    &.farm-emptywrapper--bordered {
+        border-top: 1px solid var(--farm-stroke-divider);
     }
 }

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.stories.js

@@ -24,3 +24,7 @@ export const CustomTitles = () => ({
 	template:
 		'<farm-emptywrapper title="Título customizado" subtitle="Subtítulo customizado" />',
 });
+
+export const NoBorder = () => ({
+	template: '<farm-emptywrapper :bordered="false" />',
+});

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.vue

@@ -1,8 +1,17 @@
 <template>
-	<div>
-		<farm-icon size="lg">magnify</farm-icon>
-		<farm-caption bold>{{ title }}</farm-caption>
-		<farm-caption variation="regular" v-if="subtitle">{{ subtitle }}</farm-caption>
+	<div
+		:class="{
+			'farm-emptywrapper': true,
+			'farm-emptywrapper--bordered': bordered,
+		}"
+	>
+		<farm-icon size="xl" color="gray">magnify</farm-icon>
+		<farm-bodytext type="2" variation="bold" color="black" color-variation="40">
+			{{ title }}
+		</farm-bodytext>
+		<farm-caption v-if="subtitle" variation="regular" color-variation="30">
+			{{ subtitle }}
+		</farm-caption>
 	</div>
 </template>
 <script lang="ts">
@@ -24,7 +33,14 @@ export default Vue.extend({
 		subtitle: {
 			type: String,
 			default:
-				'Tente filtrar novamente sua pesquisa ou faça uma importação para ver mais resultados',
+				'Tente filtrar novamente sua pesquisa.',
+		},
+		/**
+		 * Has border?
+		 */
+		bordered: {
+			type: Boolean,
+			default: true,
 		},
 	},
 });

package/src/components/{TextField/__tests__/TextField.spec.js → DataTableEmptyWrapper/__tests__/DataTableEmptyWrapper.spec.js}

@@ -1,11 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
-import TextField from '../TextField';
+import DataTableEmptyWrapper from '../DataTableEmptyWrapper';
 
-describe('TextField component', () => {
+describe('DataTableEmptyWrapper component', () => {
 	let wrapper;
 
 	beforeEach(() => {
-		wrapper = shallowMount(TextField);
+		wrapper = shallowMount(DataTableEmptyWrapper, {});
 	});
 
 	test('Created hook', () => {

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -1,16 +1,15 @@
 .header-text {
 	position: relative;
-	color: var(--farm-secondary-base);
+	color: var(--farm-secondary-green-darken);
 	font-size: 14px;
+	font-weight: 700;
 
 	.farm-icon {
 		position: absolute;
 		right: -20px;
 		top: -1px;
-	}
+		transition: transform 0.8s ease-in-out;
 
-	.farm-icon {
-		transition: transform .8s ease-in-out;  
 		&.farm-icon--asc {
 			transform: rotateX(180deg);
 		}
@@ -22,7 +21,7 @@ th.sortable {
 	&:not(.active) {
 		&:hover {
 			.farm-icon::before {
-				color: var(--farm-gray-base) !important;
+				color: var(--farm-bw-black-30) !important;
 			}
 		}
 	}
@@ -30,7 +29,6 @@ th.sortable {
 	.header-text {
 		transition: color 0.5s ease;
 	}
-
 }
 
 th span.span-checkbox {
@@ -55,13 +53,13 @@ th {
 	}
 }
 
-:deep(.mdi-sort-descending)::before {
-	color: var(--farm-secondary-base);
-	font-size: 12px;
-	font-weight: 900;
+:deep(.mdi-sort-reverse-variant)::before {
+	color: var(--farm-bw-black-30);
+	font-size: 16px;
+	font-weight: 400;
 }
 
 .farm-icon--desc,
 .farm-icon--asc {
-	margin-top: 3.5px;
-}
+	margin-top: 3px;
+}

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -8,7 +8,7 @@
 					item.sortable ? 'sortable' : '',
 					sortClick[$index].clicked ? 'active' : '',
 					item.sortable ? (sortClick[$index].descending === 'DESC' ? 'DESC' : 'ASC') : '',
-					showCheckbox && $index == 0 ? 'checkbox-container' : ''
+					showCheckbox && $index == 0 ? 'checkbox-container' : '',
 				]"
 				v-bind:style="{
 					textAlign: item.align ? item.align : '',
@@ -28,10 +28,11 @@
 							sortClick[$index][item.value] ? 'farm-icon--desc' : 'farm-icon--asc',
 						]"
 						class="ml-2"
-						size="12px"
-						color="gray"
+						size="16px"
+						color="black"
+						variation="30"
 					>
-						sort-descending
+						sort-reverse-variant
 					</farm-icon>
 				</span>
 

package/src/components/DataTablePaginator/DataTablePaginator.scss

@@ -1,88 +1,90 @@
+@import '../../configurations/theme-colors';
 ul.farm-paginator {
-    display: flex;
-    flex-direction: row;
-    list-style-type: none;
-    align-items: flex-start;
+	display: flex;
+	flex-direction: row;
+	list-style-type: none;
+	align-items: flex-start;
 
-    &--disabled {
-        opacity: 0.7;
-    }
+	&--disabled {
+		opacity: 0.7;
+	}
 
-    >li {
-        align-items: center;
-        display: flex;
+	> li {
+		align-items: center;
+		display: flex;
 
-        button {
-            border: 1px solid var(--farm-stroke-base);
-            border-right: 0;
-            height: 36px;
-            min-width: 36px;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 12px;
-            transition: all ease 0.5s;
-            padding: 4px 12px;
+		button {
+			border: 1px solid var(--farm-bw-black-10);
+			border-right: 0;
+			height: 36px;
+			min-width: 36px;
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 12px;
+			font-weight: 400;
+			transition: all ease 0.5s;
+			padding: 4px 12px;
 
-            p {
-                color: var(--farm-neutral-darken);
-                margin: 0;
-            }
-            
-            .farm-icon {
-                color: var(--farm-text-primary);
-            }
-            
-            &:disabled {
-                .farm-icon {
-                    color: var(--farm-neutral-base);
-                }
-            }
-        }
+			p {
+				color: var(--farm-neutral-darken);
+				margin: 0;
+			}
 
-        &:first-child button {
-            border-radius: 4px 0 0 4px;
-        }
+			.farm-icon {
+				color: var(--farm-bw-black-80);
+			}
 
-        &:last-child button {
-            border-right: 1px solid var(--farm-stroke-base);
-            border-radius: 0 4px 4px 0;
-        }
+			&:disabled {
+				background-color: var(--farm-bw-black-5);
+				.farm-icon {
+					color: var(--farm-bw-black-10);
+				}
+			}
+		}
 
-        &.farm-paginator__item--selected {
-            button {
-                background-color: var(--farm-primary-base);
+		&:first-child button {
+			border-radius: 4px 0 0 4px;
+		}
 
-                p{
-                    color: #FFFFFF;  
-                }
-                
-            }
-        }
+		&:last-child button {
+			border-right: 1px solid var(--farm-stroke-base);
+			border-radius: 0 4px 4px 0;
+		}
 
-        &:hover {
-            button:not([disabled="disabled"]) {
-                background-color: var(--farm-primary-lighten);
-            }
-        }
-    }
+		&.farm-paginator__item--selected {
+			button {
+				background-color: var(--farm-primary-base);
+
+				p {
+					color: #ffffff;
+				}
+			}
+		}
+
+		&:hover {
+			button:not([disabled='disabled']) {
+				background-color: transparentize(themeColor('primary', 'lighten'), 0.86);
+			}
+		}
+	}
 }
 
-.farm-paginator-footer{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin: 0;
+.farm-paginator-footer {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin: 0;
 
-    &.hidden-perpageoptions {
-        justify-content: flex-end;
-    }
+	&.hidden-perpageoptions {
+		justify-content: flex-end;
+	}
 }
 
 .farm-paginator--gutter {
-    margin: 16px 24px 0;
+	margin: 16px 24px 0;
 }
 
 .farm-typography.button {
-    font-size: 14px;
-}
+	font-size: 14px;
+}

package/src/components/DatePicker/DatePicker.scss

@@ -1,13 +1,9 @@
-.datepicker :deep(.v-picker__actions) {
-	padding: 0;
-	margin: 0 16px 16px;
-}
 .datepicker :deep(.v-btn--active) {
 	background: var(--farm-primary-base);
 }
 
 .datepicker :deep(.v-picker__body) {
-	width: 341px !important;
+	width: 304px !important;
 }
 
 .btn-cancel {
@@ -17,3 +13,7 @@
 .farm-contextmenu {
 	width: 100%;
 }
+
+.v-picker ::v-deep   {
+	@import './vDatePicker.scss';
+}