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

package/package.json

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

@@ -6,7 +6,11 @@ describe('DataTablePaginator component', () => {
 	let component;
 
 	beforeEach(() => {
-		wrapper = shallowMount(DataTablePaginator);
+		wrapper = shallowMount(DataTablePaginator, {
+			propsData: {
+				title: '',
+			},
+		});
 		component = wrapper.vm;
 	});
 

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/Radio/Radio.scss

@@ -1,3 +1,5 @@
+@import '../../configurations/variables';
+
 input[type="radio"] {
     -webkit-appearance: none;
     appearance: none;
@@ -5,8 +7,6 @@ input[type="radio"] {
     margin: 0;
     font: inherit;
     color: rgba(0, 0, 0, .6);
-    width: 24px;
-    height: 24px;
     border: 1.5px solid rgba(0, 0, 0, .6);
     border-radius: 50%;
     display: grid;
@@ -15,8 +15,6 @@ input[type="radio"] {
 
     &::before {
         content: "";
-        width: 10px;
-        height: 10px;
         border-radius: 50%;
         transform: scale(0);
         transition: 120ms transform ease-in-out;
@@ -47,4 +45,19 @@ input[type="radio"] {
     &:active {
         animation: pulse 0.2s 1 ease-out;
     }
+}
+
+
+@each $size,
+$value in $sizes {
+    #{'input[type="radio"][size=' + $size +']'} {
+        width: $value;
+        height: $value;
+
+        &::before {
+            content: "";
+            width: $value / 2;
+            height: $value / 2;
+        }
+    }
 }

package/src/components/Radio/Radio.stories.js

@@ -1,5 +1,6 @@
 import { withDesign } from 'storybook-addon-designs';
 import Radio from './Radio.vue';
+import sizes from '../../configurations/sizes';
 
 export default {
 	title: 'Form/Radio',
@@ -10,7 +11,7 @@ export default {
 			description: {
 				component: `Radio<br />
 				selector: <em>farm-radio</em><br />
-				<span style="color: var(--farm-extra-1-base);">development</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 			design: {
@@ -81,3 +82,17 @@ export const Checked = () => ({
 		v-model: {{ v }}
 	</div>`,
 });
+
+export const Sizes = () => ({
+	data() {
+		return {
+			sizes,
+			v: 1,
+		};
+	},
+	template: `<div style="width: 480px">
+		<div v-for="size in sizes" :key="size" class="d-flex flex-row align-center mb-3">
+			<farm-radio v-model="v" :value="size" :size="size"  />&nbsp;&nbsp;{{ size }}
+		</div>
+	</div>`,
+});

package/src/components/Radio/Radio.vue

@@ -5,13 +5,14 @@
 			'farm-radio--checked': isChecked,
 		}"
 		type="radio"
+		:size="$props.size"
 		:checked="isChecked"
 		:value="value"
 		@click="onClick"
 	/>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-radio',
@@ -27,6 +28,13 @@ export default Vue.extend({
 		 * Value to be set to v-model
 		 */
 		value: { type: [String, Number, Boolean], required: true },
+		/**
+		 * Size
+		 */
+		size: {
+			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
+			default: 'md',
+		},
 	},
 	computed: {
 		isChecked() {

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

@@ -4,14 +4,24 @@ import Radio from '../Radio.vue';
 
 describe('Radio component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(Radio, {
-			propsData: {},
+			propsData: {
+				value: 1,
+			},
 		});
+		component = wrapper.vm;
 	});
 
 	test('Radio created', () => {
 		expect(wrapper).toBeDefined();
 	});
+
+	describe('computed properties', () => {
+		it('get isRound false', () => {
+			expect(component.isChecked).toBeFalsy();
+		});
+	});
 });

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/RadioGroup/__tests__/RadioGroup.spec.js

@@ -5,7 +5,11 @@ describe('RadioGroup component', () => {
 	let wrapper;
 
 	beforeEach(() => {
-		wrapper = shallowMount(RadioGroup, {});
+		wrapper = shallowMount(RadioGroup, {
+			propsData: {
+				value: 1,
+			},
+		});
 	});
 
 	test('Created hook', () => {

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>`,
+});