@farm-investimentos/front-mfe-components 11.11.4 → 11.12.0

package/package.json

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

package/src/components/ContextMenu/ContextMenu.vue

@@ -78,6 +78,7 @@ export default Vue.extend({
 			() => inputValue.value,
 			newValue => {
 				if (newValue) {
+					styles.display = 'block';
 					if (!hasBeenBoostrapped) {
 						document.querySelector('body').appendChild(popup.value);
 						hasBeenBoostrapped = true;
@@ -86,6 +87,7 @@ export default Vue.extend({
 					window.addEventListener('resize', resizeWindowHandler);
 					calculatePosition();
 				} else {
+					styles.display = 'none';
 					styles.top = 0;
 					styles.left = 0;
 					styles.zIndex = 0;
@@ -107,8 +109,6 @@ export default Vue.extend({
 				window.scrollY +
 				(!bottom.value ? 0 : activatorBoundingClientRect.height);
 
-			//
-
 			let offsetLeft = activatorBoundingClientRect.left;
 
 			styles.minWidth =

package/src/components/MainFilter/MainFilter.scss

@@ -1,29 +1,16 @@
-section {
-	display: flex;
-	flex-direction: row;
-
-	.farm-btn {
-		margin-left: 16px;
-	}
-
-	fieldset {
-		border: 0;
-	}
-
-	.farm-tooltip {
-		margin-left: 4px;
-	}
+.farm-tooltip {
+	margin-left: 4px;
+}
 
+.farm-btn {
+	margin-left: 12px;
 }
 
 @media screen and (max-width: 600px) {
-	section {
-		flex-direction: column;
-		margin-bottom: 1rem;
-
-		.farm-btn {
-			margin-left: 0;
-			margin-top: 0 !important;
-		}
+	.farm-btn {
+		width: calc(100% - 24px);
+		margin-left: 12px;
+		margin-top: 0 !important;
 	}
+
 }

package/src/components/MainFilter/MainFilter.stories.js

@@ -32,29 +32,46 @@ export const WithSlot = () => ({
 	template: '<farm-form-mainfilter>With Slot</farm-form-mainfilter>',
 });
 
-export const MainFilters = () => ({
+export const Tooltip = () => ({
 	data() {
 		return {
-			showFilters: false,
-			items: [1, 2, 3, 4, 5],
+			text: 'Some long tooltip text to be placed here!',
 		};
 	},
-	template: `<div style="max-width: 480px">
-		<farm-form-mainfilter @onClick="showFilters = !showFilters" :showFilters="showFilters" />
-        <section v-if="showFilters">
-            <v-select :items="items" />
-        </section>
+	template: `
+	<div style="max-width: 480px; padding-top: 32px; margin-left: 32px;">
+		<farm-form-mainfilter label="Label" :tooltip="text" />
 	</div>`,
 });
 
-export const Tooltip = () => ({
+export const Application = () => ({
 	data() {
 		return {
-			text: 'Some long tooltip text to be placed here!',
+			showFilters: false,
 		};
 	},
-	template: `
-	<div style="max-width: 480px; padding-top: 32px; margin-left: 32px;">
-		<farm-form-mainfilter label="Label" :tooltip="text" />
+	template: `<div>
+		<farm-row>
+			<farm-col md="6">
+				<farm-form-mainfilter @onClick="showFilters = !showFilters" :showFilters="showFilters" />
+			</farm-col>
+		</farm-row>
+		<farm-row v-if="showFilters">
+			<farm-col cols="12">
+			Aqui são os filtros extras
+			</farm-col>
+			<farm-col cols="12" md="3">
+				<farm-textfield />
+			</farm-col>
+			<farm-col cols="12" md="3">
+				<farm-textfield />
+			</farm-col>
+			<farm-col cols="12" md="3">
+				<farm-textfield />
+			</farm-col>
+			<farm-col cols="12" md="3">
+				<farm-textfield />
+			</farm-col>
+		</farm-row>
 	</div>`,
-});
+});

package/src/components/MainFilter/MainFilter.vue

@@ -1,6 +1,6 @@
 <template>
-	<section :class="{ 'justify-end': justifyEnd === true }">
-		<fieldset v-if="hasInitialInput">
+	<farm-row :class="{ 'justify-end': justifyEnd === true }">
+		<farm-col v-if="hasInitialInput" md="6">
 			<farm-label :for="elementId">
 				{{ !hasSlotData ? label : '' }}
 				<slot v-if="hasSlotData"></slot>
@@ -14,16 +14,16 @@
 				</farm-tooltip>
 			</farm-label>
 			<farm-textfield-v2 v-model="inputValue" :id="elementId" @keyup="onKeyUp" />
-		</fieldset>
+		</farm-col>
 		<farm-btn
 			v-if="hasExtraFilters"
-			class="farm-btn--responsive mt-14 mt-sm-8"
+			class="mt-14 mt-sm-8"
 			@click="onFilterClick"
 		>
 			<farm-icon class="mr-2">{{ extraFiltersBtnIcon }}</farm-icon>
 			{{ extraFiltersBtnLabel }}
 		</farm-btn>
-	</section>
+	</farm-row>
 </template>
 
 <script lang="ts">

package/src/components/Modal/Modal.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType, reactive, ref, toRefs, watch } from 'vue';
+import Vue, { onBeforeUnmount, onMounted, PropType, reactive, ref, toRefs, watch } from 'vue';
 import { calculateMainZindex } from '../../helpers';
 
 export default Vue.extend({
@@ -61,6 +61,7 @@ export default Vue.extend({
 		},
 	},
 	setup(props, { emit }) {
+		let hasBeenBoostrapped = false;
 		const { offsetTop, offsetBottom, persistent, size } = toRefs(props);
 		const inputValue = ref(props.value);
 		const styleObject = reactive({ zIndex: 1 });
@@ -84,18 +85,33 @@ export default Vue.extend({
 			newValue => {
 				inputValue.value = newValue;
 				if (newValue) {
-					(styleObject.zIndex = calculateMainZindex()),
-						window.addEventListener('keyup', escHandler);
+					bootstrap();
 				}
 			}
 		);
 
+		onMounted(() => {
+			bootstrap();
+		});
+
 		const escHandler = event => {
 			if (event.key === 'Escape') {
 				close();
 			}
 		};
 
+		const bootstrap = () => {
+			styleObject.zIndex = calculateMainZindex();
+			window.addEventListener('keyup', escHandler);
+			hasBeenBoostrapped = true;
+		};
+
+		onBeforeUnmount(() => {
+			if (hasBeenBoostrapped) {
+				window.removeEventListener('resize', escHandler);
+			}
+		});
+
 		return {
 			inputValue,
 			styles,

package/src/components/RadioGroup/RadioGroup.stories.js

@@ -1,11 +1,10 @@
 import RadioGroup from './RadioGroup';
-import baseThemeColors from '../../configurations/_theme-colors-base.scss';
-
-const colors = Object.keys(baseThemeColors);
+import { withDesign } from 'storybook-addon-designs';
 
 export default {
 	title: 'Form/RadioGroup',
 	component: RadioGroup,
+	decorators: [withDesign],
 	parameters: {
 		docs: {
 			description: {

package/src/components/ValueCaption/ValueCaption.stories.js

@@ -1,5 +1,7 @@
 import { withDesign } from 'storybook-addon-designs';
 import ValueCaption from '.';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
 
 export default {
 	title: 'Display/ValueCaption',
@@ -31,3 +33,26 @@ export const Primary = () => ({
     </farm-valuecaption>
     `,
 });
+
+export const Colors = () => ({
+	data() {
+		return {
+			colors: [...colors],
+		};
+	},
+	template: `<div class="d-flex flex-column">
+       <farm-valuecaption
+			icon="account-box-outline"
+			v-for="color of colors":key="color"
+			:iconBoxColor="color"
+			class="mb-3"
+		>
+			<template v-slot:title>
+				color: {{ color }}
+			</template>
+			<template v-slot:subtitle>
+				R$ 1.000,00
+			</template>
+		</farm-valuecaption>
+	</div>`,
+});