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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.2.2",
+	"version": "11.3.0",
 	"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,4 +1,5 @@
 <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
@@ -39,39 +40,60 @@
 			</v-list-item>
 		</v-list>
 	</v-menu>
+-->
+	<farm-contextmenu v-model="value" :bottom="true">
+		<template v-slot:activator="{}">
+			<farm-btn outlined title="Importar" color="secondary" @click="toggleValue">
+				Importar
+				<farm-icon class="ml-2"> chevron-{{ value ? 'up' : 'down' }} </farm-icon>
+			</farm-btn>
+		</template>
+		<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)"
+			>
+				<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/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;
-	}
-}