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

package/src/components/Chip/Chip.vue

@@ -1,23 +1,45 @@
 <template>
 	<span
+		v-bind="$props"
+		v-on="$listeners"
 		:class="{
 			'farm-chip': true,
 			'farm-chip--dense': dense,
 			'farm-chip--outlined': outlined,
+			'farm-chip--base': variation === 'base' || !variation,
 			'farm-chip--lighten': variation === 'lighten',
 			'farm-chip--darken': variation === 'darken',
 		}"
 	>
-		<farm-typography tag="span" size="sm" color="white" ellipsis> <slot></slot> </farm-typography>
+		<farm-caption tag="span" color="white" ellipsis> <slot></slot> </farm-caption>
 	</span>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-chip',
 	inheritAttrs: true,
 	props: {
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'primary',
+		},
 		/**
 		 * Is dense (not 100% width)?
 		 */
@@ -34,7 +56,7 @@ export default Vue.extend({
 		},
 		variation: {
 			type: String,
-			default: '',
+			default: 'base',
 		},
 	},
 });

package/src/components/Collapsible/Collapsible.scss

@@ -1,6 +1,6 @@
 .collapsible {
 	width: 100%;
-	
+
 	&__header {
 		width: 100%;
 		display: flex;
@@ -15,8 +15,13 @@
 		justify-content: flex-start;
 	}
 
-	&__icon {
+	&__content-right {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
 
+	&__icon {
 		&--main {
 			margin-right: 0.5rem;
 		}
@@ -40,4 +45,4 @@
 .fade-enter,
 .fade-leave-to {
 	opacity: 0;
-}
+}

package/src/components/Collapsible/Collapsible.stories.js

@@ -1,4 +1,7 @@
 import Collapsible from './Collapsible';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
+const variations = ['', 'darken', 'lighten'];
 
 export default {
 	title: 'Surfaces/Collapsible',
@@ -22,7 +25,8 @@ export const Title = () => ({
 });
 
 export const Icon = () => ({
-	template: '<farm-collapsible icon="book" title="With Icon">collapsible content</farm-collapsible>',
+	template:
+		'<farm-collapsible icon="plus" title="With Icon">collapsible content</farm-collapsible>',
 });
 
 export const Opened = () => ({
@@ -43,7 +47,70 @@ export const Opened = () => ({
     </div>`,
 });
 
+export const ColorsChips = () => ({
+	data() {
+		return {
+			colors,
+			variations,
+		};
+	},
+	template: `
+	<farm-row>
+		<farm-col cols="12" md="4"  v-for="color in colors" :key="'color_' + color">
+			<h4 style="margin:15px">{{ color }}</h4>
+			<farm-collapsible 
+				style="margin-top:15px"
+				v-for="variation in variations"
+				icon="plus" 
+				textChip="chip"
+				title="color chip" 
+				:key="color + '_' + variation"
+				:showChip="true" 
+				:colorChip="color"
+				:variation="variation"
+			>
+			</farm-collapsible>
+		</farm-col>
+	</farm-row>`,
+});
+
+export const ColorsOutlinedChips = () => ({
+	data() {
+		return {
+			colors,
+			variations,
+		};
+	},
+	template: `
+	<farm-row>
+		<farm-col cols="12" md="4"  v-for="color in colors" :key="'color_' + color">
+			<h4 style="margin:15px">{{ color }}</h4>
+			<farm-collapsible 
+				style="margin-top:15px"
+				v-for="variation in variations"
+				icon="plus" 
+				textChip="chip"
+				title="color chip" 
+				:key="color + '_' + variation"
+				:showChip="true"
+				:outlined="true"
+				:colorChip="color"
+				:variation="variation"
+			>
+			</farm-collapsible>
+		</farm-col>
+	</farm-row>`,
+});
+
+export const Dense = () => ({
+	template:
+		'<farm-collapsible icon="plus" title="With Icon" textChip="chip" dense showChip>collapsible content</farm-collapsible>',
+});
+
 Primary.storyName = 'Basic';
 Title.storyName = 'Title';
 Icon.storyName = 'Icon';
 Opened.storyName = 'Opened';
+ColorsChips.storyName = 'Colors';
+ColorsOutlinedChips.storyName = 'Outlined';
+Dense.storyName = 'Dense';

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"
@@ -67,27 +67,6 @@ export const IconActivator = () => ({
 	</div>`,
 });
 
-export const VModel = () => ({
-	data() {
-		return {
-			value: false,
-		};
-	},
-	methods: {
-		toggleValue() {
-			this.value = !this.value;
-		},
-	},
-	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
-        <farm-contextmenu v-model="value">
-            some text
-            <template v-slot:activator="{ on, attrs }">
-                <farm-btn @click="toggleValue">toggle</farm-btn>
-            </template>
-        </farm-contextmenu>
-	</div>`,
-});
-
 export const LongContent = () => ({
 	data() {
 		return {
@@ -95,8 +74,9 @@ export const LongContent = () => ({
 		};
 	},
 	methods: {
-		toggleValue() {
+		toggleValue(event) {
 			this.value = !this.value;
+			event.stopPropagation();
 		},
 	},
 	template: `<div style="padding-left: 120px; padding-top: 80px;">
@@ -117,8 +97,9 @@ export const Bottom = () => ({
 		};
 	},
 	methods: {
-		toggleValue() {
+		toggleValue(event) {
 			this.value = !this.value;
+			event.stopPropagation();
 		},
 	},
 	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
@@ -138,8 +119,9 @@ export const ComplexContent = () => ({
 		};
 	},
 	methods: {
-		toggleValue() {
+		toggleValue(event) {
 			this.value = !this.value;
+			event.stopPropagation();
 		},
 	},
 	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
@@ -159,8 +141,9 @@ export const OverflowContent = () => ({
 		};
 	},
 	methods: {
-		toggleValue() {
+		toggleValue(event) {
 			this.value = !this.value;
+			event.stopPropagation();
 		},
 	},
 	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex; flex-direction: column">
@@ -190,8 +173,9 @@ export const MaxHeight = () => ({
 		};
 	},
 	methods: {
-		toggleValue() {
+		toggleValue(event) {
 			this.value = !this.value;
+			event.stopPropagation();
 		},
 	},
 	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex; flex-direction: column;">
@@ -210,3 +194,32 @@ export const MaxHeight = () => ({
         </farm-contextmenu>
 	</div>`,
 });
+
+export const VModel = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		toggleValue(event) {
+			this.value = true;
+
+			setTimeout(() => {
+				this.value = false;
+			}, 2000);
+			event.preventDefault();
+			event.stopPropagation();
+		},
+	},
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
+        <farm-contextmenu bottom v-model="value">
+            some text
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn :disabled="value" @click="toggleValue">
+					{{ !value ? 'Open' : 'Will close in 2s' }}
+				</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});

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',
@@ -97,6 +97,13 @@ export default Vue.extend({
 			calculatePosition();
 		};
 
+		watch(
+			() => props.value,
+			newValue => {
+				inputValue.value = newValue;
+			}
+		);
+
 		watch(
 			() => inputValue.value,
 			newValue => {
@@ -123,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();
@@ -166,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;
+}