@farm-investimentos/front-mfe-components 3.2.1 → 3.3.0

package/package.json

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

package/src/components/Buttons/MultiImportButton/MultiImportButton.scss

@@ -0,0 +1,17 @@
+.v-btn.v-btn--import {
+	background: var(--v-extra-lighten2);
+	color: var(--v-gray-lighten5);
+	.v-icon {
+		margin-right: 1rem;
+	}
+}
+
+.v-list-item {
+	border-bottom: 1px solid var(--v-gray-lighten2);
+	&:last-child {
+		border-bottom: none;
+	}
+}
+.v-list-item--link {
+	font-size: 0.875rem;
+}

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

@@ -0,0 +1,19 @@
+import MultiImport from './MultiImportButton.vue';
+
+export default {
+	title: 'Example/Buttons/MultiImport',
+	component: MultiImport,
+};
+
+export const Primary = () => ({
+	components: { MultiImport },
+	template: '<MultiImport />',
+});
+
+export const List = () => ({
+	components: { MultiImport },
+	template: `<MultiImport :optionsList="[{ listenerKey: 1, title: 'XLS teste'}, { listenerKey: 2, title: 'CSV teste novo'}]" />`,
+});
+
+Primary.storyName = 'Básico';
+List.storyName = 'Lista';

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

@@ -0,0 +1,78 @@
+<template>
+	<v-menu
+		content-class="elevation-1"
+		v-model="togglePopover"
+		:offset-y="true"
+		:rounded="'b t-0'"
+	>
+		<template v-slot:activator="{ on, attrs }">
+			<v-btn
+				v-bind="attrs"
+				v-on="on"
+				dense
+				@onClick="togglePopover = true"
+				class="v-btn--responsive v-btn--import"
+				outlined
+				title="Importar"
+			>
+				Importar
+				<v-icon class="ml-2 mr-0">
+					{{ togglePopover ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
+				</v-icon>
+			</v-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)"
+			>
+				<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>
+</template>
+<script>
+import Vue from 'vue';
+import VBtn from 'vuetify/lib/components/VBtn';
+import VIcon from 'vuetify/lib/components/VIcon';
+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';
+
+export default Vue.extend({
+	name: 'farm-btn-multipleimport',
+	components: {
+		VBtn,
+		VIcon,
+		VList,
+		VListItem,
+		VMenu,
+		VListItemContent,
+		VListItemTitle,
+	},
+	props: {
+		/**
+		 * Lista de opções para o menu dropdown
+		 */
+		optionsList: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			togglePopover: false,
+		};
+	},
+});
+</script>
+<style scoped lang="scss">
+@import './MultiImportButton.scss';
+</style>

package/src/components/Buttons/MultiImportButton/__tests__/MultiImportButton.spec.js

@@ -0,0 +1,16 @@
+import { shallowMount } from '@vue/test-utils';
+import MultiImportButton from '../MultiImportButton';
+
+describe('MultiImportButton component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(MultiImportButton);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

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

@@ -0,0 +1,4 @@
+import MultiImportButton from './MultiImportButton';
+
+export { MultiImportButton };
+export default MultiImportButton;

package/src/main.js

@@ -51,6 +51,7 @@ export * from './components/Buttons/ExportButton/';
 export * from './components/Buttons/ImportButton/';
 export * from './components/Buttons/ToggleButton/';
 export * from './components/Buttons/RemoveButton/';
+export * from './components/Buttons/MultiImportButton/';
 export * from './components/Logos/ProductLogo/';
 export * from './components/Logos/OriginatorLogo/';
 export * from './components/ResetTableRowSelection/';