@farm-investimentos/front-mfe-components 11.5.4 → 11.5.6

package/package.json

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

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

@@ -142,6 +142,10 @@ export const DisabledButtons = () => ({
         <farm-btn v-for="color of colors":key="color + '_disabled_icon'" :color="color" plain disabled>
             <farm-icon>book</farm-icon> {{ color }}
         </farm-btn>
+		<farm-btn v-for="color of colors":key="'random_icon_' + color" :color="color" disabled>
+			<farm-icon>book</farm-icon>
+			{{ color }}
+	</farm-btn>
 	</div>`,
 });
 

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

@@ -19,6 +19,55 @@ export default {
 };
 
 export const Primary = () => ({
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
+        <farm-contextmenu>
+            some text
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn
+					v-bind="attrs"
+					v-on="on"
+				>
+					open
+				</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});
+
+export const LongActivator = () => ({
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
+        <farm-contextmenu>
+            some text
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn
+					v-bind="attrs"
+					v-on="on"
+				>
+					Very long Activator
+				</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});
+
+export const IconActivator = () => ({
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
+        <farm-contextmenu>
+            some text
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn
+					v-bind="attrs"
+					v-on="on"
+					icon
+				>
+					<farm-icon>help-circle</farm-icon>
+				</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});
+
+export const VModel = () => ({
 	data() {
 		return {
 			value: false,
@@ -160,4 +209,4 @@ export const MaxHeight = () => ({
             </template>
         </farm-contextmenu>
 	</div>`,
-});
+});

package/src/components/ContextMenu/ContextMenu.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="farm-contextmenu" ref="parent">
-		<span ref="activator">
+		<span ref="activator" @click="click">
 			<slot name="activator"></slot>
 		</span>
 
@@ -66,6 +66,7 @@ export default Vue.extend({
 		const outClick = (event: Event) => {
 			if (activator && !activator.value.contains(event.target)) {
 				emit('input', false);
+				inputValue.value = false;
 			}
 		};
 
@@ -74,12 +75,11 @@ export default Vue.extend({
 		};
 
 		watch(
-			() => props.value,
+			() => inputValue.value,
 			newValue => {
 				if (newValue) {
 					if (!hasBeenBoostrapped) {
 						document.querySelector('body').appendChild(popup.value);
-
 						hasBeenBoostrapped = true;
 					}
 					window.addEventListener('click', outClick);
@@ -88,11 +88,13 @@ export default Vue.extend({
 				} else {
 					window.removeEventListener('click', outClick);
 				}
-				inputValue.value = newValue;
 			}
 		);
 
 		const calculatePosition = () => {
+			if (!parent.value || !activator.value.children[0]) {
+				return;
+			}
 			const parentBoundingClientRect = parent.value.getBoundingClientRect();
 			const activatorBoundingClientRect = activator.value.children[0].getBoundingClientRect();
 			const popupClientRect = popup.value.getBoundingClientRect();
@@ -102,8 +104,16 @@ export default Vue.extend({
 				window.scrollY +
 				(!bottom.value ? 0 : activatorBoundingClientRect.height);
 
+			//
+
 			let offsetLeft = activatorBoundingClientRect.left;
-			if (popupClientRect.width > activatorBoundingClientRect.width) {
+
+			styles.minWidth =
+				(activatorBoundingClientRect.width > 96
+					? parseInt(activatorBoundingClientRect.width)
+					: 96) + 'px';
+
+			if(activatorBoundingClientRect.width < 96) {
 				const w = popupClientRect.width < 96 ? 96 : popupClientRect.width;
 				offsetLeft =
 					activatorBoundingClientRect.left +
@@ -111,16 +121,11 @@ export default Vue.extend({
 					w / 2;
 			}
 
-			styles.minWidth =
-				(activatorBoundingClientRect.width > 96
-					? parseInt(activatorBoundingClientRect.width)
-					: 96) + 'px';
-
 			//Do not allow to open outside window
-			
+
 			const rightEdge = offsetLeft + popupClientRect.width;
 			const clientWidth = document.documentElement.clientWidth;
-			
+
 			if (rightEdge > clientWidth - 12) {
 				offsetLeft = clientWidth - 12 - popupClientRect.width;
 			}
@@ -131,7 +136,6 @@ export default Vue.extend({
 				offsetTop -= bottomEdge - window.scrollY - clientHeight + 12;
 			}
 
-
 			styles.top = `${offsetTop}px`;
 			styles.left = `${offsetLeft}px`;
 			styles.zIndex = calculateMainZindex();
@@ -145,12 +149,18 @@ export default Vue.extend({
 			}
 		});
 
+		const click = () => {
+			inputValue.value = !inputValue.value;
+			emit('input', inputValue.value);
+		};
+
 		return {
 			parent,
 			popup,
 			activator,
 			styles,
 			inputValue,
+			click,
 		};
 	},
 });

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

@@ -3,9 +3,11 @@ import ContextMenu from '../ContextMenu';
 
 describe('ContextMenu component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(ContextMenu, {});
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -17,4 +19,11 @@ describe('ContextMenu component', () => {
 			expect(wrapper.element).toMatchSnapshot();
 		});
 	});
+
+	describe('Methods', () =>{
+		it('Should handle click', () =>{
+			component.click();
+			expect(component.inputValue).toBeTruthy();
+		})
+	})
 });

package/src/components/CopyToClipboard/CopyToClipboard.stories.js

@@ -19,22 +19,25 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-copytoclipboard': CopyToClipboard },
 	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
 		<farm-copytoclipboard toCopy="To be copied" />
     </div>`,
 });
 
 export const NoIcon = () => ({
-	components: { 'farm-copytoclipboard': CopyToClipboard },
 	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
 		<farm-copytoclipboard toCopy="To be copied" :isIcon="false" />
     </div>`,
 });
 
 export const CustomSuccessMessage = () => ({
-	components: { 'farm-copytoclipboard': CopyToClipboard },
 	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
-		<farm-copytoclipboard toCopy="To be copied" success-message="Custom Succes Message" />
+		<farm-copytoclipboard toCopy="To be copied" success-message="Custom Success Message" />
+    </div>`,
+});
+
+export const CustomTooltipColor = () => ({
+	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
+		<farm-copytoclipboard toCopy="To be copied" tooltip-color="info" />
     </div>`,
 });

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -1,5 +1,5 @@
 <template>
-	<farm-tooltip v-model="show">
+	<farm-tooltip v-model="show" :color="tooltipColor">
 		{{ feedbackMessage }}
 		<template v-slot:activator="{}">
 			<farm-btn v-if="isIcon" title="Copiar" icon :disabled="disabled" @click="onClick">
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { ref, toRefs } from 'vue';
+import Vue, { PropType, ref, toRefs } from 'vue';
 import { toClipboard } from '@farm-investimentos/front-mfe-libs-ts';
 
 export default Vue.extend({
@@ -35,6 +35,24 @@ export default Vue.extend({
 			type: String,
 			default: 'Conteúdo copiado para a área de trabalho',
 		},
+		/**
+		 * Tooltip color
+		 */
+		tooltipColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'secondary',
+		},
 	},
 	setup(props) {
 		const show = ref(false);

package/src/components/IdCaption/IdCaption.stories.js

@@ -149,3 +149,37 @@ export const CustomTag = () => ({
     </farm-idcaption>
     `,
 });
+
+export const CustomSuccessMessageAfterCopyToClipboard = () => ({
+	template: `
+    <farm-idcaption 
+        icon="account-box-outline"
+        copy-text="Custom Success Message to be copied"
+        success-message="Custom Success Message"
+    >
+        <template v-slot:title>
+            <b>Upper Line Text</b>
+        </template>
+        <template v-slot:subtitle>
+            <b>Lower:</b> Line Text Line Text Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const CustomTooltipColor = () => ({
+	template: `
+    <farm-idcaption 
+        icon="account-box-outline"
+        copy-text="Custom Success Message to be copied"
+        tooltip-color="info"
+    >
+        <template v-slot:title>
+            <b>Upper Line Text</b>
+        </template>
+        <template v-slot:subtitle>
+            <b>Lower:</b> Line Text Line Text Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});

package/src/components/IdCaption/IdCaption.vue

@@ -16,7 +16,12 @@
 			<farm-caption variation="regular" color="gray" v-if="hasSubtitle">
 				<span>
 					<slot name="subtitle"></slot>
-					<farm-copytoclipboard v-if="copyText" :toCopy="copyText" />
+					<farm-copytoclipboard
+						v-if="copyText"
+						:toCopy="copyText"
+						:successMessage="successMessage"
+						:tooltipColor="tooltipColor"
+					/>
 				</span>
 			</farm-caption>
 		</div>
@@ -59,6 +64,7 @@ export default Vue.extend({
 		 */
 		copyText: {
 			type: String,
+			default: 'Conteúdo copiado para a área de trabalho',
 		},
 		/**
 		 * Has link?
@@ -67,6 +73,31 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Success message content after copy
+		 */
+		successMessage: {
+			type: String,
+			default: 'Conteúdo copiado para a área de trabalho',
+		},
+		/**
+		 * Tooltip color
+		 */
+		tooltipColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'secondary',
+		},
 	},
 
 	setup(_, { slots }) {
@@ -79,5 +110,5 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-@import './IdCaption.scss';
+@import './IdCaption';
 </style>

package/src/components/layout/DisplayBreakpoints.stories.mdx

@@ -4,8 +4,6 @@ import { Meta } from '@storybook/addon-docs';
 
 # Display Breakpoints
 
-<farm-col>aaa</farm-col>
-
 <table width="100%">
 	<thead>
 		<tr>