@farm-investimentos/front-mfe-components 11.2.2 → 11.3.1

package/package.json

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

package/src/components/Buttons/MultiImportButton/MultiImportButton.stories.js

@@ -10,7 +10,13 @@ export const Primary = () => ({
 });
 
 export const List = () => ({
-	template: `<farm-btn-multipleimport :optionsList="[{ listenerKey: 1, title: 'XLS teste'}, { listenerKey: 2, title: 'CSV teste novo'}]" />`,
+	methods: {
+		listener(key) {
+			alert('Handler for item ' + key);
+		},
+	},
+	template: `<farm-btn-multipleimport
+			:optionsList="[{ listenerKey: 1, title: 'XLS teste'}, { listenerKey: 2, title: 'CSV teste novo'}]"
+			@onClick="listener"
+		/>`,
 });
-
-List.storyName = 'Lista';

package/src/components/Buttons/MultiImportButton/MultiImportButton.vue

@@ -1,77 +1,57 @@
 <template>
-	<v-menu content-class="elevation-1" v-model="togglePopover" :offset-y="true" :rounded="'b t-0'">
-		<template v-slot:activator="{ on, attrs }">
-			<farm-btn
-				v-bind="attrs"
-				v-on="on"
-				dense
-				class="farm-btn--responsive farm-btn--import"
-				outlined
-				color="secondary"
-				title="Importar"
-				@onClick="togglePopover = true"
-			>
+	<farm-contextmenu v-model="value" :bottom="true">
+		<template v-slot:activator="{}">
+			<farm-btn outlined title="Importar" color="secondary" @click="toggleValue">
 				Importar
-				<i
-					:class="{
-						'ml-2': true,
-						'mr-0': true,
-						mdi: true,
-						'mdi-chevron-up': togglePopover,
-						'mdi-chevron-down': !togglePopover,
-					}"
-				>
-				</i>
+				<farm-icon class="ml-2"> chevron-{{ value ? 'up' : 'down' }} </farm-icon>
 			</farm-btn>
 		</template>
-
-		<v-list dense class="pa-0">
-			<v-list-item
-				v-for="option in optionsList"
-				:key="option.listenerKey"
-				link
-				:title="option.title"
-				@click="$emit('onClick', option.listenerKey)"
+		<farm-list>
+			<farm-listitem
+				v-for="item in optionsList"
+				clickable
+				hoverColor="primary"
+				hoverColorVariation="lighten"
+				:key="'importbutton_key_' + item.title"
+				:title="item.title"
+				@click="onClick(item.listenerKey)"
 			>
-				<v-list-item-content>
-					<v-list-item-title>{{ option.title }}</v-list-item-title>
-				</v-list-item-content>
-			</v-list-item>
-		</v-list>
-	</v-menu>
+				<farm-caption bold tag="span">{{ item.title }}</farm-caption>
+			</farm-listitem>
+		</farm-list>
+	</farm-contextmenu>
 </template>
-<script>
-import Vue from 'vue';
-import VList from 'vuetify/lib/components/VList/VList';
-import VMenu from 'vuetify/lib/components/VMenu';
-import VListItem from 'vuetify/lib/components/VList/VListItem';
-import { VListItemContent, VListItemTitle } from 'vuetify/lib';
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+export interface IImportOption {
+	title: String;
+	listenerKey: String;
+}
 
 export default Vue.extend({
 	name: 'farm-btn-multipleimport',
-	components: {
-		VList,
-		VListItem,
-		VMenu,
-		VListItemContent,
-		VListItemTitle,
-	},
 	props: {
 		/**
-		 * Lista de opções para o menu dropdown
+		 * Options list
 		 */
 		optionsList: {
-			type: Array,
+			type: Array as PropType<Array<IImportOption>>,
 			default: () => [],
 		},
 	},
 	data() {
 		return {
-			togglePopover: false,
+			value: false,
 		};
 	},
+	methods: {
+		onClick(key) {
+			this.$emit('onClick', key);
+		},
+		toggleValue() {
+			this.value = !this.value;
+		},
+	},
 });
 </script>
-<style scoped lang="scss">
-@import './MultiImportButton.scss';
-</style>

package/src/components/ChipInviteStatus/ChipInviteStatus.stories.js

@@ -15,5 +15,6 @@ export const Primary = () => ({
         <farm-chip-invite :status="15" />
         <farm-chip-invite :status="16" />
         <farm-chip-invite :status="17" />
+        <farm-chip-invite :status="18" />
     </div>`,
 });

package/src/components/ChipInviteStatus/ChipInviteStatus.vue

@@ -1,50 +1,18 @@
 <template>
-	<v-chip
-		small
-		:class="
-			`status-chip ${
-				isFull ? 'status-chip--fullwidth' : ''
-			} status-chip-${color} status-chip--onboarding`
-		"
+	<farm-chip
+		:color="obj.color"
+		:outlined="obj.outlined"
+		:variation="obj.variation"
+		:dense="!isFull"
 	>
-		<span :class="`${textColor}--text`">
-			{{ label }}
-		</span>
-	</v-chip>
+		{{ obj.label }}
+	</farm-chip>
 </template>
-<script>
+<script lang="ts">
 import Vue from 'vue';
-const StatusLabel = {
-	10: 'CONVIDAR',
-	11: 'CONVIDADO',
-	12: 'INCOMPLETO',
-	13: 'CONCLUÍDO',
-	14: 'FALHA/ERRO',
-	15: 'EM ANÁLISE',
-	16: 'EM ANDAMENTO',
-	17: 'EM ESPERA',
-	18: 'DECLINADO'
-};
-
-const StatusColor = {
-	10: 'secondary',
-	11: 'yellow',
-	12: 'yellow',
-	13: 'success',
-	14: 'error',
-	15: 'accent',
-	16: 'primary',
-	17: 'on-wait',
-	18: 'error',
-};
-
-import VChip from 'vuetify/lib/components/VChip/';
-
+import keys from './keys';
 export default Vue.extend({
 	name: 'farm-chip-invite',
-	components: {
-		VChip,
-	},
 	props: {
 		/**
 		 * Invite status
@@ -58,24 +26,13 @@ export default Vue.extend({
 		 */
 		isFull: {
 			type: Boolean,
-			default: true,
+			default: false,
 		},
 	},
 	computed: {
-		textColor() {
-			return this.status === 10 || this.status === 16 || this.status === 17
-				? ''
-				: StatusColor[this.status];
-		},
-		color() {
-			return !this.status ? '' : StatusColor[this.status];
-		},
-		label() {
-			return StatusLabel[this.status];
+		obj() {
+			return keys[this.status];
 		},
 	},
 });
 </script>
-<style lang="scss" scoped>
-@import './ChipInviteStatus.scss';
-</style>

package/src/components/ChipInviteStatus/__tests__/ChipInviteStatus.spec.js

@@ -21,16 +21,4 @@ describe('ChipInviteStatus component', () => {
 			expect(wrapper.element).toMatchSnapshot();
 		});
 	});
-
-	describe('Computed properties', () => {
-		it('Should have text color', () => {
-			expect(component.textColor).toBeDefined();
-		});
-		it('Should have color', () => {
-			expect(component.color).toBeDefined();
-		});
-		it('Should have label', () => {
-			expect(component.label).toBeDefined();
-		});
-	});
 });

package/src/components/ChipInviteStatus/keys.ts

@@ -0,0 +1,11 @@
+export default {
+	10: { label: 'Convidar', color: 'primary' },
+	11: { label: 'Convidado', color: 'warning', outlined: true },
+	12: { label: 'Incompleto', color: 'warning', outlined: true },
+	13: { label: 'Concluído', color: 'primary', outlined: true },
+	14: { label: 'Falha/Erro', color: 'error', outlined: true },
+	15: { label: 'Em Análise', color: 'info', outlined: true },
+	16: { label: 'Em Andamento', color: 'secondary', variation: 'darken' },
+	17: { label: 'Em Espera', color: 'secondary' },
+	18: { label: 'Declinado', color: 'error', outlined: true },
+};

package/src/components/ContextMenu/ContextMenu.vue

@@ -82,15 +82,18 @@ export default Vue.extend({
 
 		const calculatePosition = () => {
 			const parentBoundingClientRect = parent.value.getBoundingClientRect();
+			const activatorBoundingClientRect = activator.value.children[0].getBoundingClientRect();
 			const popupClientRect = popup.value.getBoundingClientRect();
 
+			console.log(activatorBoundingClientRect);
+
 			let offsetTop =
 				parentBoundingClientRect.top +
 				window.scrollY +
-				(!bottom.value ? 0 : parentBoundingClientRect.height);
+				(!bottom.value ? 0 : activatorBoundingClientRect.height);
 
 			let offsetLeft = parentBoundingClientRect.left;
-			if (popupClientRect.width > parentBoundingClientRect.width) {
+			if (popupClientRect.width > activatorBoundingClientRect.width) {
 				offsetLeft =
 					offsetLeft + parentBoundingClientRect.width / 2 - popupClientRect.width / 2;
 			}

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

@@ -4,7 +4,7 @@ import IdCaption from './';
 export default {
 	title: 'Display/IdCaption',
 	component: IdCaption,
-    decorators: [withDesign],
+	decorators: [withDesign],
 	parameters: {
 		docs: {
 			description: {
@@ -132,3 +132,20 @@ export const IconBoxCustomColor = () => ({
     </farm-idcaption>
     `,
 });
+
+export const CustomTag = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    :link="true"
+    >
+        <template v-slot:title>
+            <b>Upper Line Text</b>
+        </template>
+        <template v-slot:subtitle>
+            <b>Lower:</b> Line Text Line Text Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});

package/src/components/IdCaption/IdCaption.vue

@@ -6,7 +6,7 @@
 		>
 			<farm-caption variation="medium" v-if="hasTitle">
 				<span>
-					{{ $slots.title ? $slots.title[0].text : null }}
+					<slot name="title"></slot>
 					<farm-btn icon color="gray" v-if="link" @click="$emit('onLinkClick')">
 						<farm-icon size="xs">open-in-new</farm-icon>
 					</farm-btn>
@@ -15,7 +15,7 @@
 
 			<farm-caption variation="regular" color="gray" v-if="hasSubtitle">
 				<span>
-					{{ $slots.subtitle ? $slots.subtitle[0].text : null }}
+					<slot name="subtitle"></slot>
 					<farm-copytoclipboard v-if="copyText" :toCopy="copyText" />
 				</span>
 			</farm-caption>

package/src/helpers/calculateMainZindex.js

@@ -8,5 +8,5 @@ export default () => {
 		all_z.map(x => Number(x))
 	);
 
-	return zIndex;
+	return zIndex > 5 ? zIndex : 5;
 };

package/src/components/ChipInviteStatus/ChipInviteStatus.scss

@@ -1,31 +0,0 @@
-.status-chip--onboarding {
-	font-weight: bold;
-	.status-chip-yellow {
-		color: black;
-	}
-	&.status-chip.status-chip-accent {
-		color: var(--v-accent-base) !important;
-		border: 2px solid var(--v-accent-base) !important;
-		background-color: white !important;
-	}
-	&.status-chip.status-chip-yellow {
-		color: black !important;
-		border: 2px solid var(--v-yellow-lighten1) !important;
-		background-color: white !important;
-	}
-	&.status-chip.status-chip-error {
-		color: var(--v-error-base) !important;
-		border: 2px solid var(--v-error-base) !important;
-		background-color: white !important;
-	}
-	&.status-chip.status-chip-success {
-		color: var(--v-secondary-base) !important;
-		border: 2px solid var(--v-success-base) !important;
-		background-color: white !important;
-	}
-	&.status-chip.status-chip-on-wait {
-		color: white !important;
-		border: 2px solid #467d7e !important;
-		background-color: #467d7e !important;
-	}
-}