@farm-investimentos/front-mfe-components 3.2.0 → 3.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "3.2.0",
+	"version": "3.4.1",
 	"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/components/ChipInviteStatus/ChipInviteStatus.scss

@@ -0,0 +1,26 @@
+.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;
+	}
+}

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

@@ -0,0 +1,19 @@
+import ChipInviteStatus from './ChipInviteStatus.vue';
+
+export default {
+	title: 'Example/Onboarding/ChipInviteStatus',
+	component: ChipInviteStatus,
+};
+
+export const Primary = () => ({
+	components: { ChipInviteStatus },
+	template: `<div style="width: 120px;">
+        <ChipInviteStatus status="CONVIDAR" />
+        <ChipInviteStatus status="CONVIDADO" />
+        <ChipInviteStatus status="INCOMPLETO" />
+        <ChipInviteStatus status="CONCLUIDO" />
+        <ChipInviteStatus status="FALHA/ERRO" />
+    </div>`,
+});
+
+Primary.storyName = 'Básico';

package/src/components/ChipInviteStatus/ChipInviteStatus.vue

@@ -0,0 +1,63 @@
+<template>
+	<v-chip
+		small
+		:class="
+			`status-chip ${
+				isFull ? 'status-chip--fullwidth' : ''
+			} status-chip-${color} status-chip--onboarding`
+		"
+	>
+		<span :class="`${textColor}--text`">
+			{{ label }}
+		</span>
+	</v-chip>
+</template>
+<script>
+import Vue from 'vue';
+const StatusColor = {
+	CONVIDAR: 'secondary',
+	CONVIDADO: 'yellow',
+	INCOMPLETO: 'yellow',
+	CONCLUIDO: 'success',
+	'FALHA/ERRO': 'error',
+};
+
+import VChip from 'vuetify/lib/components/VChip/';
+
+export default Vue.extend({
+	name: 'farm-chip-invite',
+	components: {
+		VChip,
+	},
+	props: {
+		/**
+		 * Invite status
+		 */
+		status: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Full width (from parent)
+		 */
+		isFull: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	computed: {
+		textColor() {
+			return this.status === 'CONVIDAR' ? '' : StatusColor[this.status];
+		},
+		color() {
+			return !this.status ? '' : StatusColor[this.status];
+		},
+		label() {
+			return this.status;
+		},
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import './ChipInviteStatus.scss';
+</style>

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

@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils';
+import ChipInviteStatus from '../ChipInviteStatus.vue';
+describe('ChipInviteStatus component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ChipInviteStatus, {
+			propsData: {
+				status: 'CONVIDAR',
+			},
+		});
+		component = wrapper.vm;
+	});
+	test('ChipInviteStatus created', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			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/index.js

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

package/src/components/DefaultTextField/DefaultTextField.stories.js

@@ -1,19 +1,43 @@
 import DefaultTextField from './DefaultTextField.vue';
 
 export default {
-    title: 'Example/Form/DefaultTextField',
-    component: DefaultTextField,
+	title: 'Example/Form/DefaultTextField',
+	component: DefaultTextField,
 };
 
 export const Primary = () => ({
-    components: { DefaultTextField },
-    template: '<DefaultTextField :item="{ label: \'Nome do campo\'}" />',
+	components: { DefaultTextField },
+	data() {
+		return {
+			model: 'primary',
+			item: { label: 'Nome do campo', key: 'key' },
+		};
+	},
+	template: '<DefaultTextField v-model="model" :item="item" />',
 });
 
 export const Secondary = () => ({
-    components: { DefaultTextField },
-    template: '<DefaultTextField :item="{ label: \'Nome do campo\'} :required="true" />',
+	components: { DefaultTextField },
+	data() {
+		return {
+			model: 'secondary',
+			item: { label: 'Nome do campo', key: 'key' },
+		};
+	},
+	template: '<DefaultTextField :item="item" v-model="model" required="true" />',
+});
+
+export const ReadOnly = () => ({
+	components: { DefaultTextField },
+	data() {
+		return {
+			model: 'readonly',
+			item: { label: 'Nome do campo', key: 'key' },
+		};
+	},
+	template: '<DefaultTextField :item="item" v-model="model" :readonly="true" />',
 });
 
 Primary.storyName = 'Básico';
 Secondary.storyName = 'Label de obrigatório';
+ReadOnly.storyName = 'Input readonly';

package/src/components/DefaultTextField/DefaultTextField.vue

@@ -1,18 +1,19 @@
 <template>
 	<v-col cols="12" sm="12" :md="item.md ? item.md : 2" class="v-col-fieldset-default pl-0">
-		<label :for="`${forKey}-${item.key}`">
+		<label :for="inputId">
 			{{ item.label }}
 			<span class="required" v-if="required && !disabled">*</span>
 		</label>
 		<v-text-field
-			:id="`${forKey}-${item.key}`"
 			color="secondary"
 			v-model="inputVal"
 			outlined
 			dense
 			v-mask="`${mask ? mask : ''}`"
+			:id="inputId"
 			:rules="inputRules"
 			:disabled="disabled"
+			:readonly="readonly"
 		></v-text-field>
 	</v-col>
 </template>
@@ -38,16 +39,20 @@ export default {
 		forKey: {
 			type: String,
 			required: false,
+			default: 'form',
 		},
 		required: {
 			type: Boolean,
 			default: false,
-			required: false,
 		},
 		mask: {
 			type: String,
 			default: null,
 		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	components: {
 		VCol,
@@ -71,6 +76,9 @@ export default {
 			}
 			return [];
 		},
+		inputId() {
+			return `${this.forKey}-${this.item.key}`;
+		},
 	},
 };
 </script>

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

@@ -3,14 +3,16 @@ import DefaultTextField from '../DefaultTextField';
 
 describe('DefaultTextField component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(DefaultTextField, {
 			propsData: {
-				item: {},
+				item: { key: 'key' },
 				value: false,
 			},
 		});
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -22,4 +24,10 @@ describe('DefaultTextField component', () => {
 			expect(wrapper.element).toMatchSnapshot();
 		});
 	});
+
+	describe('Computed properties', () => {
+		it('Should have inputId', () => {
+			expect(component.inputId).toEqual('form-key');
+		});
+	});
 });

package/src/main.js

@@ -51,8 +51,10 @@ 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/';
 export * from './components/MultipleSelectShortener/';
 export * from './components/SelectModalOptions/';
+export * from './components/ChipInviteStatus/';

package/src/scss/Status-Chip.scss

@@ -24,7 +24,11 @@ $statusList: 'primary', 'secondary', 'accent', 'error', 'info', 'success', 'warn
     }
     &.status-chip-yellow {
         background-color: var(--v-yellow-base) !important;
-        color: var(--v-gray-lighten5);
+        color: var(--v-gray-lighten3) !important;
     }
 
+    &.status-chip--fullwidth {
+        width: 100%;
+        justify-content: center;
+    }
 }