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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.2.1",
+	"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/ContextMenu/ContextMenu.vue

@@ -18,6 +18,7 @@
 </template>
 <script lang="ts">
 import Vue, { ref, watch, reactive, onBeforeUnmount, toRefs } from 'vue';
+import { calculateMainZindex } from '../../helpers';
 
 export default Vue.extend({
 	name: 'farm-contextmenu',
@@ -42,7 +43,7 @@ export default Vue.extend({
 		const parent = ref(null);
 		const popup = ref(null);
 		const activator = ref(null);
-		const styles = reactive({ minWidth: 0, top: 0 } as any);
+		const styles = reactive({ minWidth: 0, top: 0, zIndex: 1 } as any);
 		const { bottom } = toRefs(props);
 
 		const inputValue = ref(props.value);
@@ -111,8 +112,9 @@ export default Vue.extend({
 				offsetTop -= bottomEdge - window.scrollY - clientHeight + 12;
 			}
 
-			styles.top = offsetTop + 'px';
-			styles.left = offsetLeft + 'px';
+			styles.top = `${offsetTop}px`;
+			styles.left = `${offsetLeft}px`;
+			styles.zIndex = calculateMainZindex();
 		};
 
 		onBeforeUnmount(() => {

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -0,0 +1,35 @@
+import { withDesign } from 'storybook-addon-designs';
+import TextFieldV2 from './TextFieldV2.vue';
+
+export default {
+	title: 'Form/TextFieldV2',
+	component: TextFieldV2,
+	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Text field v2<br />
+				selector: <em>farm-texfield-v2</em><br />
+				<span style="color: var(--farm-extra-1-base);">development</span>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%85---Design-System-%7C-v1?node-id=1503%3A227',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			v: 'some text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" />
+		value: {{ v }}
+	</div>`,
+});

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -0,0 +1,46 @@
+<template>
+	<div class="farm-textfield">
+		<div class="farm-textfield--input">
+			<input v-bind="$attrs" v-model="innerValue" />
+		</div>
+		<span class="farm-textfield--text"> hint text</span>
+	</div>
+</template>
+<script lang="ts">
+import Vue, { ref, watch } from 'vue';
+
+export default Vue.extend({
+	name: 'farm-textfield-v2',
+	inheritAttrs: true,
+	props: {
+		/**
+		 * v-model binding
+		 */
+		value: {},
+	},
+	setup(props, { emit }) {
+		const innerValue = ref(props.value);
+
+		watch(
+			() => props.value,
+			() => {
+				innerValue.value = props.value;
+			}
+		);
+
+		watch(
+			() => innerValue.value,
+			() => {
+				emit('input', innerValue.value);
+			}
+		);
+
+		return {
+			innerValue,
+		};
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import 'TextFieldV2';
+</style>

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

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import TextFieldV2 from '../TextFieldV2';
+
+describe('TextFieldV2 component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(TextFieldV2);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/TextFieldV2/index.ts

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

package/src/helpers/calculateMainZindex.js

@@ -1,9 +1,11 @@
 export default () => {
-	const zIndex = Math.max(
-		...Array.from(document.querySelectorAll('body *'), el =>
-			parseFloat(window.getComputedStyle(el).zIndex)
-		).filter(zIndex => !Number.isNaN(zIndex)),
-		0
+	const all_z = [];
+	document.querySelectorAll('*').forEach(function (elem) {
+		all_z.push(elem.style.zIndex);
+	});
+	const zIndex = Math.max.apply(
+		null,
+		all_z.map(x => Number(x))
 	);
 
 	return zIndex;

package/src/main.ts

@@ -83,6 +83,7 @@ export * from './components/RadioGroup';
 export * from './components/Stepper';
 export * from './components/Switcher';
 export * from './components/TextField';
+export * from './components/TextFieldV2';
 export * from './components/Tooltip';
 export * from './components/Typography';
 

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;
-	}
-}