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

package/package.json

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

@@ -13,10 +13,11 @@ ul.farm-paginator {
         display: flex;
 
         button {
-            border: 1px solid var(--v-gray-lighten2);
+            border: 1px solid var(--farm-stroke-base);
             border-right: 0;
             height: 36px;
-            width: 36px;
+            min-width: 36px;
+            padding-inline: 4px;
             display: inline-flex;
             justify-content: center;
             align-items: center;
@@ -30,7 +31,7 @@ ul.farm-paginator {
         }
 
         &:last-child button {
-            border-right: 1px solid var(--v-gray-lighten2);
+            border-right: 1px solid var(--farm-stroke-base);
             border-radius: 0 4px 4px 0;
         }
 
@@ -63,5 +64,5 @@ ul.farm-paginator {
 }
 
 .farm-paginator--gutter {
-    margin: 1rem 1.5rem 0;
+    margin: 16px 24px 0;
 }

package/src/components/DataTablePaginator/DataTablePaginator.stories.js

@@ -28,23 +28,23 @@ export const Primary = () => ({
 			totalPages: 8,
 		};
 	},
-	template: '<DataTablePaginator :totalPages="totalPages" :page="1" />',
+	template: '<farm-datatable-paginator :totalPages="totalPages" :page="1" />',
 	mounted() {
 		setTimeout(() => {
-			this.totalPages = 0;
+			this.totalPages = 2;
 		}, 1000);
 	},
 });
 
 export const Secondary = () => ({
-	template: '<DataTablePaginator :hidePerPageOptions="true" :totalPages="190000" :page="1" />',
+	template: '<farm-datatable-paginator :hidePerPageOptions="true" :totalPages="190000" :page="1" />',
 });
 
 export const Disabled = () => ({
-	template: '<DataTablePaginator :disabled="true":totalPages="19" :page="1" />',
+	template: '<farm-datatable-paginator :disabled="true":totalPages="19" :page="1" />',
 });
 
 export const CustomPerPage = () => ({
 	template:
-		'<DataTablePaginator :perPageOptions="[1, 2, 4, 12, 27]" :totalPages="19" :page="1" />',
+		'<farm-datatable-paginator :perPageOptions="[1, 2, 4, 12, 27]" :totalPages="19" :page="1" />',
 });

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'] {
-	border-bottom: 1px solid var(--farm-stoke-base);
+.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>`,
+});