@farm-investimentos/front-mfe-components 11.0.3 → 11.1.0

package/package.json

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

package/src/components/Collapsible/Collapsible.vue

@@ -4,7 +4,7 @@
 			<div class="collapsible__header" @click="onToggleCollapsible(status)">
 				<div class="collapsible__content-title">
 					<div class="collapsible__icon collapsible__icon--main" v-if="icon !== ''">
-						<farm-icon color="secondary" size="md">
+						<farm-icon size="md">
 							{{ icon }}
 						</farm-icon>
 					</div>

package/src/components/ContextMenu/ContextMenu.scss

@@ -0,0 +1,32 @@
+@import '../../configurations/mixins';
+
+.farm-contextmenu {
+	display: inline-block;
+}
+
+.farm-contextmenu__popup {
+	visibility: hidden;
+	opacity: 0;
+	position: absolute;
+	display: block;
+	overflow-y: auto;
+	overflow-x: hidden;
+	contain: content;
+	font-family: 'Montserrat', sans-serif !important;
+
+	transform-origin: left top;
+	transition: visibility 0.1s linear, opacity 0.1s linear;
+
+	border-radius: 4px;
+	left: 0;
+
+	background: #FFFFFF;
+	border: 1px solid var(--farm-stroke-base);
+	@include addShadow;
+	border-radius: 5px;
+
+	&--visible {
+		opacity: 1;
+		visibility: visible;
+	}
+}

package/src/components/ContextMenu/ContextMenu.stories.js

@@ -0,0 +1,104 @@
+import { withDesign } from 'storybook-addon-designs';
+import ContextMenu from './';
+
+export default {
+	title: 'Interactions/ContextMenu',
+	component: ContextMenu,
+	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `ContextMenu<br />
+				selector: <em>farm-contextmenu</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		toggleValue() {
+			this.value = !this.value;
+		},
+	},
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
+        <farm-contextmenu v-model="value">
+            some text
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn @click="toggleValue">toggle</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});
+
+export const LongContent = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		toggleValue() {
+			this.value = !this.value;
+		},
+	},
+	template: `<div style="padding-left: 120px; padding-top: 80px;">
+        <farm-contextmenu v-model="value">
+            <div style="width: 160px">long content<br />
+			with breakline</div>
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn @click="toggleValue">toggle</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});
+
+export const Bottom = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		toggleValue() {
+			this.value = !this.value;
+		},
+	},
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
+        <farm-contextmenu v-model="value" :bottom="true">
+            some text
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn @click="toggleValue">toggle</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});
+
+export const ComplexContent = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		toggleValue() {
+			this.value = !this.value;
+		},
+	},
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
+        <farm-contextmenu v-model="value">
+            <farm-chip>farm chip</farm-chip>
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn @click="toggleValue">toggle</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});

package/src/components/ContextMenu/ContextMenu.vue

@@ -0,0 +1,129 @@
+<template>
+	<div class="farm-contextmenu" ref="parent">
+		<span ref="activator">
+			<slot name="activator"></slot>
+		</span>
+
+		<div
+			ref="popup"
+			:class="{
+				'farm-contextmenu__popup': true,
+				'farm-contextmenu__popup--visible': inputValue,
+			}"
+			:style="styles"
+		>
+			<slot></slot>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import Vue, { onMounted, ref, watch, reactive, onBeforeUnmount, toRefs } from 'vue';
+
+export default Vue.extend({
+	name: 'farm-contextmenu',
+	props: {
+		/**
+		 * Control visibility
+		 * v-model bind
+		 */
+		value: {
+			type: Boolean,
+			default: undefined,
+		},
+		/**
+		 * Aligns the component towards the bottom
+		 */
+		bottom: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props, { emit }) {
+		const parent = ref(null);
+		const popup = ref(null);
+		const activator = ref(null);
+		const styles = reactive({ minWidth: 0, top: 0 } as any);
+		const { bottom } = toRefs(props);
+
+		const inputValue = ref(props.value);
+
+		let hasBeenBoostrapped = false;
+
+		const outClick = (event: Event) => {
+			if (activator && !activator.value.contains(event.target)) {
+				emit('input', false);
+			}
+		};
+
+		const resizeWindowHandler = () => {
+			calculatePosition();
+		};
+
+		watch(
+			() => props.value,
+			newValue => {
+				if (newValue) {
+					if (!hasBeenBoostrapped) {
+						document.querySelector('body').appendChild(popup.value);
+
+						hasBeenBoostrapped = true;
+					}
+					window.addEventListener('click', outClick);
+					window.addEventListener('resize', resizeWindowHandler);
+
+					calculatePosition();
+				} else {
+					window.removeEventListener('click', outClick);
+				}
+				inputValue.value = newValue;
+			}
+		);
+
+		const calculatePosition = () => {
+			const parentBoundingClientRect = parent.value.getBoundingClientRect();
+			const popupClientRect = popup.value.getBoundingClientRect();
+
+			const offsetTop =
+				parentBoundingClientRect.top +
+				window.scrollY +
+				(!bottom.value ? 0 : parentBoundingClientRect.height);
+
+			let offsetLeft = parentBoundingClientRect.left;
+			if (popupClientRect.width > parentBoundingClientRect.width) {
+				offsetLeft =
+					offsetLeft + parentBoundingClientRect.width / 2 - popupClientRect.width / 2;
+			}
+			styles.minWidth =
+				parentBoundingClientRect.width > 96
+					? parseInt(parentBoundingClientRect.width)
+					: 96 + 'px';
+			styles.top = offsetTop + 'px';
+			styles.left = offsetLeft + 'px';
+		};
+
+		onMounted(() => {
+			calculatePosition();
+		});
+
+		onBeforeUnmount(() => {
+			if (hasBeenBoostrapped) {
+				window.removeEventListener('resize', resizeWindowHandler);
+				window.removeEventListener('click', outClick);
+				document.querySelector('body').removeChild(popup.value);
+			}
+		});
+
+		return {
+			parent,
+			popup,
+			activator,
+			styles,
+			inputValue,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import './ContextMenu';
+</style>

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

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

package/src/components/ContextMenu/index.ts

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

package/src/components/FilePicker/FilePicker.vue

@@ -7,7 +7,7 @@
 			:accept="acceptedFileTypes"
 		/>
 		<div v-if="!selectedFile" class="selectfile-container">
-			<farm-icon color="secondary">cloud-upload</farm-icon>
+			<farm-icon>cloud-upload</farm-icon>
 			<p>Clique para selecionar ou arraste o arquivo aqui</p>
 		</div>
 		<div v-if="selectedFile || maxSizeReach" class="reset-container">
@@ -21,7 +21,6 @@
 
 			<farm-btn
 				outlined
-				color="secondary"
 				class="farm-btn--responsive"
 				title="Escolher outro"
 				@click="reset"

package/src/components/Icon/Icon.scss

@@ -1,4 +1,5 @@
 @import '../../configurations/variables';
+@import '../../configurations/theme-colors';
 
 .farm-icon {
     align-items: center;
@@ -10,16 +11,20 @@
     position: relative;
     text-indent: 0;
 
-    @each $color in $colors {
-        &#{'.farm-icon--' + $color} {
-            color: var(--v-#{$color}-base);
+    @each $color in $theme-colors-list {
+        &#{'--' + $color} {
+            color: var(--farm-#{$color}-base);
         }
     }
 
+    &--gray-base {
+        color: var(--farm-neutral-darken);
+    }
+
     @each $size,
     $value in $sizes {
         &#{'.farm-icon[size=' + $size +']'} {
             font-size: $value;
         }
     }
-}
+}

package/src/components/Icon/Icon.stories.js

@@ -1,5 +1,6 @@
 import { withDesign } from 'storybook-addon-designs';
-import colors from '../../configurations/colors';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
 import sizes from '../../configurations/sizes';
 import iconsList from './icons_list';
 
@@ -22,7 +23,7 @@ export default {
 
 export const Atom = () => ({
 	template: `<div class="icons-container">
-        <farm-icon color="secondary">
+        <farm-icon color="primary">
             book
         </farm-icon>
 	</div>`,
@@ -31,7 +32,7 @@ export const Atom = () => ({
 export const Colors = () => ({
 	data() {
 		return {
-			colors,
+			colors: [...colors, 'gray'],
 		};
 	},
 	template: `<div class="icons-container">

package/src/components/Icon/Icon.vue

@@ -18,14 +18,15 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
-				| 'error'
-				| 'extra'
-				| 'accent'
+				| 'neutral'
 				| 'info'
 				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
 				| 'gray'
-				| 'yellow'
-				| 'white'
 			>,
 			default: 'primary',
 		},

package/src/components/IconBox/IconBox.scss

@@ -1,4 +1,5 @@
 @import '../../configurations/variables';
+@import '../../configurations/theme-colors';
 
 .farm-icon-box {
 	width: 48px;
@@ -8,17 +9,17 @@
 	justify-content: center;
 	align-items: center;
 
-	@each $color in $colors {
+	@each $color in $theme-colors-list {
 		&#{'--' + $color} {
-			background: var(--v-#{$color}-lighten5);
+			background: var(--farm-#{$color}-lighten);
 		}
 	}
 }
 
 .farm-icon-box--inverted.farm-icon-box {
-	@each $color in $colors {
+	@each $color in $theme-colors-list {
 		&#{'--' + $color} {
-			background: var(--v-#{$color}-base);
+			background: var(--farm-#{$color}-base);
 		}
 	}
 

package/src/components/IconBox/IconBox.stories.js

@@ -1,6 +1,7 @@
 import { withDesign } from 'storybook-addon-designs';
 import IconBox from './IconBox';
-import colors from '../../configurations/colors';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
 import sizes from '../../configurations/sizes';
 import('../Icon/Icons.stories.scss');
 

package/src/components/IconBox/IconBox.vue

@@ -7,9 +7,7 @@
 		}"
 		:size="size"
 	>
-		<farm-icon :color="inverted ? 'white' : color" :size="size">{{
-			iconParsed
-		}}</farm-icon>
+		<farm-icon :color="inverted ? 'white' : color" :size="size">{{ iconParsed }}</farm-icon>
 	</div>
 </template>
 
@@ -30,8 +28,20 @@ export default Vue.extend({
 		 * Color
 		 */
 		color: {
-			type: String,
-			default: 'secondary',
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
+			default: 'primary',
 		},
 		size: {
 			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,

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

@@ -31,7 +31,7 @@ describe('IconBox component', () => {
 		});
 
 		it('get cssColorClass', () => {
-			expect(component.cssColorClass).toEqual('farm-icon-box--secondary');
+			expect(component.cssColorClass).toEqual('farm-icon-box--primary');
 		});
 	});
 });

package/src/components/IdCaption/IdCaption.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="idcaption">
-		<farm-icon-box v-if="icon" :icon="icon" color="secondary" size="md" />
+		<farm-icon-box v-if="icon" :icon="icon" size="md" />
 		<div
 			:class="{ idcaption__body: true, 'idcaption__body--single': !hasTitle || !hasSubtitle }"
 		>

package/src/components/TableContextMenu/TableContextMenu.scss

@@ -1,8 +1,22 @@
-[role='menuitem'] {
+.v-list-item.v-list-item--link {
 	border-bottom: 1px solid var(--farm-stroke-base);
 }
 
 .v-list-item__title {
+	display: flex;
+	align-items: center;
+
+
+}
+
+::v-deep .v-application--wrap {
+	min-height: auto;
+	font-family: 'Montserrat', sans-serif !important;
+}
+
+.farm-listitem {
+	padding: auto 8px;
+
 	.farm-icon {
 		vertical-align: sub;
 		margin-right: 8px;

package/src/components/TableContextMenu/TableContextMenu.stories.js

@@ -23,13 +23,13 @@ export default {
 };
 
 export const Primary = () => ({
-	template: `<div>
+	template: `<div style="padding-left: 80px">
 		<farm-context-menu :items="[{ label: 'Remover', icon: { color: 'error', type: 'open-in-new' } }]" />
 	</div>`,
 });
 
 export const Icons = () => ({
-	template: `<div>
+	template: `<div style="padding-left: 80px">
 		<farm-context-menu
 			ref="icons"
 			:items="[{ label: 'Remover', icon: { color: 'error', type: 'delete' } }]"
@@ -41,13 +41,26 @@ export const Multi = () => ({
 	data() {
 		return {
 			items: [
-				{ label: 'Novo', icon: { color: 'grey', type: 'open-in-new' } },
+				{ label: 'Novo', icon: { type: 'open-in-new' } },
 				{ label: 'Editar', icon: { color: 'secondary', type: 'open-in-new' } },
 				{ label: 'Remover', icon: { color: 'error', type: 'delete' } },
 			],
 		};
 	},
-	template: `<div>
+	template: `<div style="padding-left: 80px">
 		<farm-context-menu ref="multi" :items="items" />
 	</div>`,
 });
+
+export const ClickHandler = () => ({
+	data() {
+		return {
+			editItem: () => {
+				alert('Click handler');
+			},
+		};
+	},
+	template: `<div style="padding-left: 80px">
+		<farm-context-menu :items="[{ label: 'Click me', icon: { type: 'open-in-new' }, handler: 'edit' }]" @edit="editItem()" />
+	</div>`,
+});

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -1,62 +1,65 @@
 <template>
-	<v-menu>
-		<template v-slot:activator="{ on, attrs }">
-			<farm-btn icon v-bind="attrs" v-on="on" title="Abrir opções" color="secondary">
+	<farm-contextmenu v-model="value">
+		<template v-slot:activator="{}">
+			<farm-btn icon @click="toggleValue" title="Abrir opções" color="secondary">
 				<farm-icon size="md">dots-horizontal</farm-icon>
 			</farm-btn>
 		</template>
-
-		<v-list dense class="pa-0">
-			<v-list-item
+		<farm-list>
+			<farm-listitem
 				v-for="item in items"
-				:key="item.label"
-				:title="item.label"
+				clickable
+				hoverColorVariation="lighten"
+				:key="'tablecontextmenu_item_' + item.label"
+				:hoverColor="item.icon.color || 'primary'"
 				@click="onClick(item.handler)"
 			>
-				<v-list-item-content>
-					<v-list-item-title>
-						<farm-icon
-							v-if="item.icon"
-							size="md"
-							:color="item.icon.color || 'secondary'"
-						>
-							{{ item.icon.type }}
-						</farm-icon>
-						{{ item.label }}
-					</v-list-item-title>
-				</v-list-item-content>
-			</v-list-item>
-		</v-list>
-	</v-menu>
+				<farm-icon v-if="item.icon" size="sm" :color="item.icon.color || 'primary'">
+					{{ item.icon.type }}
+				</farm-icon>
+				<farm-caption bold tag="span">{{ item.label }}</farm-caption>
+			</farm-listitem>
+		</farm-list>
+	</farm-contextmenu>
 </template>
 <script lang="ts">
-import Vue from 'vue';
-import { VMenu } from 'vuetify/lib/components/VMenu';
-import { VList } from 'vuetify/lib/components/VList';
-import VListItem from 'vuetify/lib/components/VList/VListItem';
-import { VListItemContent, VListItemTitle } from 'vuetify/lib';
+import Vue, { PropType } from 'vue';
+
+export interface IContextMenuOption {
+	label: string;
+	handler: string;
+	icon: IContextMenuOptionIcon;
+}
+
+export interface IContextMenuOptionIcon {
+	color?: string;
+	type: string;
+}
 
 export default Vue.extend({
 	name: 'farm-context-menu',
-	components: {
-		VMenu,
-		VList,
-		VListItem,
-		VListItemContent,
-		VListItemTitle,
-	},
+	components: {},
 	props: {
 		items: {
-			type: Array,
+			type: Array as PropType<Array<IContextMenuOption>>,
 			required: true,
 		},
 	},
+	data() {
+		return {
+			value: false,
+		};
+	},
 	methods: {
 		onClick(handler) {
 			if (handler !== undefined) {
 				this.$emit(handler);
+				// handler();
 			}
 		},
+		toggleValue() {
+			this.value = !this.value;
+		},
 	},
 });
 </script>

package/src/main.ts

@@ -62,6 +62,7 @@ export * from './components/Buttons/MultiImportButton';
 export * from './components/Card';
 export * from './components/Checkbox';
 export * from './components/Chip';
+export * from './components/ContextMenu';
 export * from './components/CopyToClipboard';
 export * from './components/Logos/ProductLogo';
 export * from './components/Logos/OriginatorLogo';