@farm-investimentos/front-mfe-components 14.2.0 → 14.2.2

package/package.json

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

package/src/components/Buttons/DefaultButton/DefaultButton.scss

@@ -37,7 +37,8 @@ $butonSizes: (
 		width: 100%;
 	}
 
-	@each $size, $value in $sizes {
+	@each $size,
+	$value in $sizes {
 		&#{'.farm-btn[size=' + $size + ']'} {
 			font-size: $value;
 			height: map-get($butonSizes, $size);
@@ -125,7 +126,8 @@ $butonSizes: (
 
 .farm-btn.farm-btn--icon {
 	border: none;
-	background: transparent;
+	background: transparent !important;
+	border: transparent !important;
 	transition: color 0.5s ease;
 
 	min-width: auto;
@@ -135,7 +137,8 @@ $butonSizes: (
 		color: gray;
 	}
 
-	@each $size, $value in $sizes {
+	@each $size,
+	$value in $sizes {
 		&#{'.farm-btn[size=' + $size + ']'} {
 			font-size: $value;
 		}
@@ -157,26 +160,26 @@ $butonSizes: (
 				color: var(--farm-#{$color}-base);
 			}
 
-			::v-deep .farm-btn__content i.mdi {
+			.farm-btn__content :deep(i.mdi) {
 				color: var(--farm-#{$color}-base);
 			}
 
-			&.lighten-variation-icon {
+			&.farm-btn--variation-lighten {
 				&:hover {
 					color: var(--farm-#{$color}-lighten);
 				}
 
-				::v-deep .farm-btn__content i.mdi {
+				.farm-btn__content :deep(i.mdi) {
 					color: var(--farm-#{$color}-lighten);
 				}
 			}
 
-			&.darken-variation-icon {
+			&.farm-btn--variation-darken {
 				&:hover {
 					color: var(--farm-#{$color}-darken);
 				}
 
-				::v-deep .farm-btn__content i.mdi {
+				.farm-btn__content :deep(i.mdi) {
 					color: var(--farm-#{$color}-darken);
 				}
 			}
@@ -207,6 +210,16 @@ $butonSizes: (
 				}
 			}
 		}
+
+		&.farm-btn--variation-lighten {
+			border: 1px solid var(--farm-#{$color}-lighten);
+			background-color: var(--farm-#{$color}-lighten);
+			color: var(--farm-text-primary);
+		}
+		&.farm-btn--variation-darken {
+			border: 1px solid var(--farm-#{$color}-darken);
+			background-color: var(--farm-#{$color}-darken);
+		}
 	}
 
 	.farm-btn--extra,
@@ -286,4 +299,4 @@ $butonSizes: (
 		width: 100%;
 		margin: 0;
 	}
-}
+}

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

@@ -92,11 +92,31 @@ export const ActiveButtons = () => ({
 			colors,
 		};
 	},
-	template: `<div class="buttons-container">
-        <farm-btn v-for="color of colors":key="'random_9_' + color" :color="color">
-            {{ color }}
-        </farm-btn>
-	</div>`,
+	template: `<farm-box>
+		<farm-row>
+		
+		<farm-col cols="12" md="3" class="d-flex flex-column">
+			Base
+			<farm-btn v-for="color of colors":key="'random_9_' + color" :color="color" class="mb-2">
+				{{ color }}
+			</farm-btn>
+		</farm-col>
+	
+		<farm-col cols="12" md="3"  class="d-flex flex-column">
+			Lighten
+			<farm-btn v-for="color of colors":key="'random_9_lighten_' + color" :color="color" variation="lighten" class="mb-2">
+				{{ color }}
+			</farm-btn>
+		</farm-col>
+
+			<farm-col cols="12" md="3"  class="d-flex flex-column">
+			Darken
+			<farm-btn v-for="color of colors":key="'random_9_darken_' + color" :color="color" variation="darken" class="mb-2">
+				{{ color }}
+			</farm-btn>
+		</farm-col>
+		<farm-row>
+	</farm-box>`,
 });
 
 export const OutlinedButtons = () => ({
@@ -195,28 +215,41 @@ export const Iconed = () => ({
 			colors: [...colors, 'white'],
 		};
 	},
-	template: `<div class="buttons-container">
-		<h4>Icon</h4>
+	template: `<farm-box>
+	<farm-row>
+	
+	<farm-col cols="12" md="3" class="d-flex flex-column">
+		Base
         <farm-btn icon v-for="color of colors" :key="'random_2_' + color" :color="color">
             <farm-icon>book</farm-icon>
         </farm-btn>
+	</farm-col>
+	
+	<farm-col cols="12" md="3"  class="d-flex flex-column">
 
-		<h4>Darken Icon</h4>
+		<h4>Darken</h4>
         <farm-btn icon v-for="color of colors" :key="'random_2_' + color" :color="color" variation="darken">
             <farm-icon>book</farm-icon>
         </farm-btn>
+		</farm-col>
+	
+	<farm-col cols="12" md="3"  class="d-flex flex-column">
 
-		<h4>Lighten Icon</h4>
+		<h4>Lighten </h4>
         <farm-btn icon v-for="color of colors" :key="'random_2_' + color" :color="color" variation="lighten">
             <farm-icon>book</farm-icon>
         </farm-btn>
+	</farm-col>
+
+	<farm-col cols="12" md="3"  class="d-flex flex-column">
 
-		<h4>Disabled Icon</h4>
+		<h4>Disabled</h4>
         <farm-btn icon v-for="color of colors" :key="'disabled_random_2_' + color" :color="color" :disabled="true">
             <farm-icon>book</farm-icon>
         </farm-btn>
-
-	</div>`,
+		</farm-col>
+	</farm-row>
+	</farm-box>`,
 });
 
 export const Rounded = () => ({

package/src/components/Buttons/DefaultButton/DefaultButton.vue

@@ -112,7 +112,7 @@ export default Vue.extend({
 				'farm-btn--icon': this.icon,
 				'farm-btn--full': this.full,
 				['farm-btn--' + this.color]: true,
-				[this.variation + '-variation-icon']: true,
+				['farm-btn--variation-' + this.variation]: true,
 				...obj,
 			};
 		},

package/src/components/Buttons/ExportButton/ExportButton.vue

@@ -72,8 +72,9 @@ export default Vue.extend({
 		onClick(key) {
 			this.$emit('onClick', key);
 		},
-		toggleValue() {
+		toggleValue(event: MouseEvent) {
 			this.value = !this.value;
+			event.stopPropagation();
 		},
 	},
 });

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

@@ -67,27 +67,6 @@ export const IconActivator = () => ({
 	</div>`,
 });
 
-export const VModel = () => ({
-	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 {
@@ -95,8 +74,9 @@ export const LongContent = () => ({
 		};
 	},
 	methods: {
-		toggleValue() {
+		toggleValue(event) {
 			this.value = !this.value;
+			event.stopPropagation();
 		},
 	},
 	template: `<div style="padding-left: 120px; padding-top: 80px;">
@@ -117,8 +97,9 @@ export const Bottom = () => ({
 		};
 	},
 	methods: {
-		toggleValue() {
+		toggleValue(event) {
 			this.value = !this.value;
+			event.stopPropagation();
 		},
 	},
 	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
@@ -138,8 +119,9 @@ export const ComplexContent = () => ({
 		};
 	},
 	methods: {
-		toggleValue() {
+		toggleValue(event) {
 			this.value = !this.value;
+			event.stopPropagation();
 		},
 	},
 	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
@@ -159,8 +141,9 @@ export const OverflowContent = () => ({
 		};
 	},
 	methods: {
-		toggleValue() {
+		toggleValue(event) {
 			this.value = !this.value;
+			event.stopPropagation();
 		},
 	},
 	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex; flex-direction: column">
@@ -190,8 +173,9 @@ export const MaxHeight = () => ({
 		};
 	},
 	methods: {
-		toggleValue() {
+		toggleValue(event) {
 			this.value = !this.value;
+			event.stopPropagation();
 		},
 	},
 	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex; flex-direction: column;">
@@ -210,3 +194,32 @@ export const MaxHeight = () => ({
         </farm-contextmenu>
 	</div>`,
 });
+
+export const VModel = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		toggleValue(event) {
+			this.value = true;
+
+			setTimeout(() => {
+				this.value = false;
+			}, 2000);
+			event.preventDefault();
+			event.stopPropagation();
+		},
+	},
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
+        <farm-contextmenu bottom v-model="value">
+            some text
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn :disabled="value" @click="toggleValue">
+					{{ !value ? 'Open' : 'Will close in 2s' }}
+				</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});

package/src/components/ContextMenu/ContextMenu.vue

@@ -74,7 +74,7 @@ export default Vue.extend({
 		} as any);
 
 		const inputValue = ref(props.value);
-
+		
 		let hasBeenBoostrapped = false;
 
 		const outClick = event => {
@@ -97,6 +97,13 @@ export default Vue.extend({
 			calculatePosition();
 		};
 
+		watch(
+			() => props.value,
+			newValue => {
+				inputValue.value = newValue;
+			}
+		);
+
 		watch(
 			() => inputValue.value,
 			newValue => {

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -19,8 +19,6 @@
 
 th.sortable {
 	cursor: pointer;
-
-
 	&:not(.active) {
 		&:hover {
 			.farm-icon::before {
@@ -38,7 +36,7 @@ th.sortable {
 th span.span-checkbox {
 	display: flex;
 	justify-content: flex-start;
-	padding-left: 4px;
+	padding-left: 0;
 }
 
 thead {
@@ -51,6 +49,10 @@ th {
 	font-weight: 700;
 	text-transform: uppercase;
 	box-shadow: 0px -1px 0px var(--farm-gray-lighten), 0px 1px 0px var(--farm-gray-lighten);
+	&.checkbox-container {
+		width: 60px !important;
+		min-width: 60px !important;
+	}
 }
 
 :deep(.mdi-sort-descending)::before {

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -8,6 +8,7 @@
 					item.sortable ? 'sortable' : '',
 					sortClick[$index].clicked ? 'active' : '',
 					item.sortable ? (sortClick[$index].descending === 'DESC' ? 'DESC' : 'ASC') : '',
+					showCheckbox && $index == 0 ? 'checkbox-container' : ''
 				]"
 				v-bind:style="{
 					textAlign: item.align ? item.align : '',
@@ -36,7 +37,7 @@
 
 				<span v-if="isTHDataTableSelect(item) && showCheckbox" class="span-checkbox">
 					<farm-checkbox
-						size="md"
+						size="sm"
 						v-model="inputVal"
 						:value="true"
 						:indeterminate="headerProps.someItems && !headerProps.everyItem"

package/src/components/DatePicker/DatePicker.vue

@@ -46,8 +46,6 @@
 				:id="inputId"
 				:rules="[checkMax, checkMin, checkRequire]"
 				@keyup="keyUpInput"
-				@click="openDatepicker"
-				@onClickIcon="openDatepicker"
 			/>
 		</template>
 	</farm-contextmenu>
@@ -192,8 +190,9 @@ export default Vue.extend({
 			const arr = onlyDMY.split('/');
 			return new Date(arr[2], arr[1] - 1, arr[0]);
 		},
-		openDatepicker() {
+		openDatepicker(event: MouseEvent) {
 			this.menuField = true;
+			event.stopPropagation();
 		},
 		closeDatepicker() {
 			this.menuField = false;

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

@@ -77,7 +77,7 @@ describe('DatePicker component', () => {
 
 	describe('methods', () => {
 		it('openDatepicker', () => {
-			component.openDatepicker();
+			component.openDatepicker({ stopPropagation: jest.fn() });
 			expect(component.menuField).toBeTruthy();
 		});
 

package/src/components/ListItem/ListItem.stories.js

@@ -23,7 +23,9 @@ export default {
 };
 
 export const Primary = () => ({
-	template: '<farm-listitem>aaa</farm-listitem>',
+	template: `<farm-listitem>
+	Item
+	</farm-listitem>`,
 });
 
 export const HoverColors = () => ({
@@ -33,8 +35,16 @@ export const HoverColors = () => ({
 			variations,
 		};
 	},
-	template: `<div style="display: flex; flex-direction: row; flex-wrap: wrap;">
-		<div class="chips-container" v-for="color in colors" :key="color" style="width: 33.3%; margin-bottom: 32px;">
+	methods: {
+		getIconVariation(variation) {
+			if (variation === 'base' || variation === 'lighten') {
+				return 'darken';
+			}
+			return 'base';
+		},
+	},
+	template: `<farm-row>
+		<farm-col v-for="color in colors" :key="color" cols="12" md="4" class="mb-4">
 			<h4>{{ color }}</h4>
 			<farm-listitem
 				v-for="variation in variations"
@@ -42,24 +52,25 @@ export const HoverColors = () => ({
 				:hoverColor="color"
 				:hoverColorVariation="variation"
 				>
+				<farm-icon
+					:color="color"
+					:variation="getIconVariation(variation)"
+				>
+					book
+				</farm-icon>
 				{{ color }} {{ variation }}
 			</farm-listitem>
-		</div>
-	</div>`,
+		</farm-col>
+	</farm-row>`,
 });
 
-export const ClickableCursor = () => ({
-	template: '<farm-listitem clickable>Clickable cursor</farm-listitem>',
-});
-
-export const ClickListener = () => ({
+export const Clickable = () => ({
 	methods: {
 		onClick() {
 			alert('Clicked');
-		}
+		},
 	},
-	template:
-		`<farm-listitem
+	template: `<farm-listitem
 			clickable
 			hoverColor="error"
 			hoverColorVariation="lighten"

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -47,8 +47,6 @@
 				readonly
 				:id="inputId"
 				:rules="required ? [requiredRule] : []"
-				@click="openDatepicker"
-				@onClickIcon="openDatepicker"
 			/>
 		</template>
 	</farm-contextmenu>

package/src/components/Select/Select.vue

@@ -81,7 +81,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { computed, onBeforeMount, PropType, toRefs, watch } from 'vue';
+import Vue, { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
 import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
@@ -396,6 +396,9 @@ export default Vue.extend({
 			);
 		};
 
+		const contextmenu = ref(null);
+
+
 		return {
 			items,
 			innerValue,
@@ -410,6 +413,7 @@ export default Vue.extend({
 			isVisible,
 			customId,
 			showErrorText,
+			contextmenu,
 			validate,
 			reset,
 			selectItem,

package/src/components/Stepper/StepperHeader/StepperHeader.vue

@@ -64,42 +64,41 @@ export default Vue.extend({
 		 */
 		errorCurrentStepStatus: { type: Boolean, default: false },
 	},
-	methods: {
-		isStepCurrent(index: number): boolean {
-			return this.currentStep === index + 1;
-		},
-		isStepPrevious(index: number): boolean {
-			return this.currentStep > index + 1;
-		},
-		isStepError(index: number): boolean {
-			return this.currentStep === index + 1 && this.errorCurrentStepStatus;
-		},
-		hasDivider(index: number): boolean {
-			return index < this.steps.length - 1;
-		},
-		isStepPreviousToCurrent(index: number): boolean {
-			return (
-				index + 2 == this.currentStep &&
-				this.isStepCurrent(index + 1) &&
-				!this.isStepError(index + 1)
-			);
-		},
-		isStepPreviousToError(index: number): boolean {
-			return (
-				index + 2 == this.currentStep &&
-				this.isStepCurrent(index + 1) &&
-				this.isStepError(index + 1)
-			);
-		},
-		isStepNext(index: number): boolean {
-			return index + 1 > this.currentStep;
-		},
-		isStepErrorToNext(index: number): boolean {
-			return this.errorCurrentStepStatus && index + 1 === this.currentStep;
-		},
-		isStepCurrentToNext(index: number): boolean {
-			return !this.errorCurrentStepStatus && index + 1 === this.currentStep;
-		},
+	setup(props) {
+		const isStepCurrent = (index: number) => props.currentStep === index + 1;
+
+		const isStepPrevious = (index: number) => props.currentStep > index + 1;
+
+		const isStepError = (index: number) =>
+			props.currentStep === index + 1 && props.errorCurrentStepStatus;
+
+		const hasDivider = (index: number) => index < props.steps.length - 1;
+
+		const isStepPreviousToCurrent = (index: number) =>
+			index + 2 === props.currentStep && isStepCurrent(index + 1) && !isStepError(index + 1);
+
+		const isStepPreviousToError = (index: number) =>
+			index + 2 === props.currentStep && isStepCurrent(index + 1) && isStepError(index + 1);
+
+		const isStepNext = (index: number) => index + 1 > props.currentStep;
+
+		const isStepErrorToNext = (index: number) =>
+			props.errorCurrentStepStatus && index + 1 === props.currentStep;
+
+		const isStepCurrentToNext = (index: number) =>
+			!props.errorCurrentStepStatus && index + 1 === props.currentStep;
+
+		return {
+			isStepCurrent,
+			isStepPrevious,
+			isStepError,
+			isStepPreviousToCurrent,
+			isStepPreviousToError,
+			isStepNext,
+			isStepErrorToNext,
+			isStepCurrentToNext,
+			hasDivider,
+		};
 	},
 });
 </script>

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -75,8 +75,9 @@ export default Vue.extend({
 				this.$emit(handler);
 			}
 		},
-		toggleValue() {
+		toggleValue(event: MouseEvent) {
 			this.value = !this.value;
+			event.stopPropagation();
 		},
 	},
 });

package/src/components/Tabs/Tabs.scss

@@ -0,0 +1,58 @@
+.tabs {
+	display: flex;
+
+	&__tab {
+		border-bottom: 1px solid var(--farm-gray-lighten);
+		cursor: pointer;
+		display: inline-flex;
+		padding: 16px 24px;
+		height: 54px;
+
+		&:hover {
+			background-color: var(--farm-neutral-lighten);
+		}
+
+		span {
+			font-weight: 400;
+		}
+
+		&--selected {
+			border-bottom: 4px solid var(--farm-primary-base);
+			transition: border-bottom 0.2s ease-in-out;
+
+			&:hover {
+				background-color: var(--farm-primary-lighten);
+			}
+
+			span {
+				font-weight: 500;
+			}
+		}
+	}
+
+	&--disabled {
+		.tabs__tab {
+			cursor: default;
+
+			&:hover {
+				background-color: transparent;
+			}
+
+			&--selected {
+				&:hover {
+					background-color: transparent;
+				}
+			}
+		}
+	}
+}
+
+div.rounded-circle {
+	background-color: var(--farm-gray-lighten);
+	width: 24px;
+	height: 24px;
+
+	&.is-selected {
+		background-color: var(--farm-primary-base);
+	}
+}