@farm-investimentos/front-mfe-components 15.5.4 → 15.6.0

package/package.json

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

package/src/components/Collapsible/Collapsible.scss

@@ -7,6 +7,11 @@
 		align-items: center;
 		justify-content: space-between;
 		cursor: pointer;
+
+		&--custom {
+			position: relative;
+			cursor: pointer;
+		}
 	}
 
 	&__content-title {
@@ -19,6 +24,12 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+
+		&--custom {
+			position: absolute;
+			right: 0;
+			top: 3px;
+		}
 	}
 
 	&__icon {
@@ -37,6 +48,10 @@
 	}
 }
 
+.full-width {
+	width: 100%;
+}
+
 .fade-enter-active,
 .fade-leave-active {
 	transition: opacity 0.3s ease-in-out;

package/src/components/Collapsible/Collapsible.stories.js

@@ -152,20 +152,182 @@ export const Dense = () => ({
 
 export const Custom = () => ({
 	template: `
-		<farm-collapsible custom>
+		<farm-collapsible title="" custom open>
 		<template #custom>
+			<farm-row justify="space-between" align="center">
+			<farm-col md="6">
+			<farm-caption>caption</farm-caption>
+			</farm-col>
+			<farm-col md="6" justify="end"
+			align="end">
 			<farm-btn
-				v-bind="attrs"
-				v-on="on"
+				
 			>
 				custom
 			</farm-btn>
+			</farm-col>
+			</farm-row>
 		</template>
 		collapsible content		
 		</farm-collapsible>
 		`,
 });
 
+export const CustomHeaderContent = () => ({
+	template: `
+		<farm-collapsible title="" custom-header>
+		<template #header-content>
+			<farm-row>
+				<farm-col md="12">
+					<farm-bodytext color="success">initial text</farm-bodytext>
+				</farm-col>
+			</farm-row>
+
+			<farm-row class="pt-4">
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>text here</farm-caption
+					>
+					123455
+				</farm-col>
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>label here</farm-caption
+					>
+
+					<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold">LABEL HERE</farm-caption>
+
+					<farm-caption		 variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col>
+					<farm-caption variation="semiBold"
+						>Label here (text here)</farm-caption
+					>
+					<farm-caption variation="medium" class="my-1">value here</farm-caption>
+				</farm-col>
+		</farm-row>
+		</template>
+	
+		<farm-bodytext >collapsible content</farm-bodytext>
+		</farm-collapsible>
+		`,
+});
+
+export const customBodyContent = () => ({
+	template: `
+		<farm-collapsible title="simple title"  custom-body>
+		<farm-row extraDecrease style="background-color:#f5f5f5;" class="px-4">
+		<farm-col class="collapsible-stories-class-with-line">
+			<farm-caption variation="semiBold"
+				>text here</farm-caption
+			>
+			123455
+		</farm-col>
+		<farm-col class="collapsible-stories-class-with-line">
+			<farm-caption variation="semiBold"
+				>label here</farm-caption
+			>
+
+			<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
+		</farm-col>
+
+		<farm-col class="collapsible-stories-class-with-line">
+			<farm-caption variation="semiBold">LABEL HERE</farm-caption>
+
+			<farm-caption		 variation="medium" class="my-1">R$ 1000</farm-caption>
+		</farm-col>
+
+		<farm-col>
+			<farm-caption variation="semiBold"
+				>Label here (text here)</farm-caption
+			>
+			<farm-caption variation="medium" class="my-1">value here</farm-caption>
+		</farm-col>
+		</farm-row>
+		</farm-collapsible>
+		`,
+});
+
+export const CustomHeaderAndBodyContent = () => ({
+	template: `
+		<farm-collapsible title="" custom-header custom-body>
+
+		<template #header-content>
+			<div class="mb-4">
+				<farm-row>
+					<farm-col md="12">
+						<farm-bodytext color="success">initial text</farm-bodytext>
+					</farm-col>
+				</farm-row>
+
+				<farm-row class="pt-4">
+					<farm-col class="collapsible-stories-class-with-line">
+						<farm-caption variation="semiBold"
+							>text here</farm-caption
+						>
+						123455
+					</farm-col>
+					<farm-col class="collapsible-stories-class-with-line">
+						<farm-caption variation="semiBold"
+							>label here</farm-caption
+						>
+
+						<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
+					</farm-col>
+
+					<farm-col class="collapsible-stories-class-with-line">
+						<farm-caption variation="semiBold">LABEL HERE</farm-caption>
+
+						<farm-caption		 variation="medium" class="my-1">R$ 1000</farm-caption>
+					</farm-col>
+
+					<farm-col>
+						<farm-caption variation="semiBold"
+							>Label here (text here)</farm-caption
+						>
+						<farm-caption variation="medium" class="my-1">value here</farm-caption>
+					</farm-col>
+				</farm-row>
+			</div>
+		</template>
+	
+			<farm-row extraDecrease style="background-color:#f5f5f5;" class="mt-5 px-2">
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>text here</farm-caption
+					>
+					123455
+				</farm-col>
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>label here</farm-caption
+					>
+
+					<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold">LABEL HERE</farm-caption>
+
+					<farm-caption		 variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col>
+					<farm-caption variation="semiBold"
+						>Label here (text here)</farm-caption
+					>
+					<farm-caption variation="medium" class="my-1">value here</farm-caption>
+				</farm-col>
+			</farm-row>
+		</farm-collapsible>
+		`,
+});
+
 Primary.storyName = 'Basic';
 Title.storyName = 'Title';
 Icon.storyName = 'Icon';

package/src/components/Collapsible/Collapsible.vue

@@ -1,9 +1,19 @@
 <template>
 	<farm-card class="collapsible">
-		<farm-card-content gutter="md">
-			<div class="collapsible__header" @click="onToggleCollapsible(status)">
-				<div class="collapsible__content-title">
-					<div class="collapsible__icon collapsible__icon--main" v-if="icon !== '' && !custom">
+		<farm-card-content gutter="md" :class="{ 'pb-0': customBody }">
+			<div
+				v-if="!customHeader"
+				class="collapsible__header"
+				@click="onToggleCollapsible(status)"
+			>
+				<div
+					class="collapsible__content-title"
+					:class="{ 'full-width': custom, 'pb-4': customBody }"
+				>
+					<div
+						class="collapsible__icon collapsible__icon--main"
+						v-if="icon !== '' && !custom"
+					>
 						<farm-icon size="md" :color="colorIcon">
 							{{ icon }}
 						</farm-icon>
@@ -40,7 +50,29 @@
 					</div>
 				</div>
 			</div>
-			<transition name="fade">
+
+			<div
+				v-if="customHeader"
+				class="collapsible__header--custom"
+				@click="onToggleCollapsible(status)"
+			>
+				<slot name="header-content"></slot>
+				<div class="collapsible__content-right--custom">
+					<div class="collapsible__icon collapsible__icon--arrow">
+						<farm-icon size="md" color="primary">
+							{{ arrowIcon }}
+						</farm-icon>
+					</div>
+				</div>
+			</div>
+
+			<transition v-if="customBody" name="fade">
+				<div v-show="status">
+					<slot></slot>
+				</div>
+			</transition>
+
+			<transition v-else name="fade">
 				<div class="collapsible__body" v-show="status">
 					<slot></slot>
 				</div>
@@ -180,6 +212,14 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		customBody: {
+			type: Boolean,
+			default: false,
+		},
+		customHeader: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {

package/src/components/ListItem/ListItem.scss

@@ -8,62 +8,75 @@
 	display: flex;
 	align-items: center;
 
+	.farm-icon,
+	.farm-typography {
+		color: var(--farm-neutral-darken);
+	}
+
 	&--clickable {
 		cursor: pointer;
 	}
 
-	> a {
-		text-decoration: none;
+	&--disabled {
+		cursor: default;
+
+		.farm-icon,
+		.farm-typography {
+			color: var(--farm-stroke-disabled);
+		}
 	}
 
-	.farm-icon,
-	.farm-typography {
-		color: var(--farm-neutral-darken);
+	> a {
+		text-decoration: none;
 	}
 
 	&:hover,
 	&:focus {
 		border-radius: 5px;
 
-		@each $color in $theme-colors-list {
-			&#{'.farm-listitem--' + $color + '-base'} {
-				background-color: rgba(themeColor($color), 0.27);
-				.farm-icon,
-				.farm-typography {
-					color: rgba(themeColor($color), 1);
+		&:not(.farm-listitem--disabled) {
+			@each $color in $theme-colors-list {
+				&#{'.farm-listitem--' + $color + '-base'} {
+					background-color: rgba(themeColor($color), 0.27);
+					.farm-icon,
+					.farm-typography {
+						color: rgba(themeColor($color), 1);
+					}
 				}
-			}
 
-			&#{'.farm-listitem--' + $color + '-lighten'} {
-				background-color: rgba(themeColor($color, 'lighten'), 0.27);
-				.farm-icon,
-				.farm-typography {
-					color: rgba(themeColor($color), 1);
+				&#{'.farm-listitem--' + $color + '-lighten'} {
+					background-color: rgba(themeColor($color, 'lighten'), 0.27);
+					.farm-icon,
+					.farm-typography {
+						color: rgba(themeColor($color), 1);
+					}
 				}
-			}
 
-			&#{'.farm-listitem--' + $color + '-darken'} {
-				background-color: rgba(themeColor($color, 'darken'), 0.27);
-				.farm-icon,
-				.farm-typography {
-					color: rgba(themeColor($color), 1);
+				&#{'.farm-listitem--' + $color + '-darken'} {
+					background-color: rgba(themeColor($color, 'darken'), 0.27);
+					.farm-icon,
+					.farm-typography {
+						color: rgba(themeColor($color), 1);
+					}
 				}
 			}
 		}
 	}
 
 	&:active {
-		@each $color in $theme-colors-list {
-			&#{'.farm-listitem--' + $color + '-base'} {
-				background-color: rgba(themeColor($color), 0.8);
-			}
+		&:not(.farm-listitem--disabled) {
+			@each $color in $theme-colors-list {
+				&#{'.farm-listitem--' + $color + '-base'} {
+					background-color: rgba(themeColor($color), 0.8);
+				}
 
-			&#{'.farm-listitem--' + $color + '-lighten'} {
-				background-color: rgba(themeColor($color, 'lighten'), 0.8);
-			}
+				&#{'.farm-listitem--' + $color + '-lighten'} {
+					background-color: rgba(themeColor($color, 'lighten'), 0.8);
+				}
 
-			&#{'.farm-listitem--' + $color + '-darken'} {
-				background-color: rgba(themeColor($color, 'darken'), 0.8);
+				&#{'.farm-listitem--' + $color + '-darken'} {
+					background-color: rgba(themeColor($color, 'darken'), 0.8);
+				}
 			}
 		}
 	}

package/src/components/Select/Select.scss

@@ -28,19 +28,19 @@
 	margin-right: 8px;
 }
 
-:deep(.farm-listitem:hover .farm-typography) {
+:deep(.farm-listitem:not(.farm-listitem--disabled):hover .farm-typography) {
 	color: var(--farm-primary-base);
 }
 
-:deep(.farm-listitem:focus .farm-typography) {
+:deep(.farm-listitem:not(.farm-listitem--disabled):focus .farm-typography) {
 	color: var(--farm-primary-base);
 }
 
-:deep(.farm-listitem:hover .farm-checkbox .farm-icon) {
+:deep(.farm-listitem:not(.farm-listitem--disabled):hover .farm-checkbox .farm-icon) {
 	color: var(--farm-primary-lighten);
 }
 
-:deep(.farm-listitem:focus .farm-checkbox .farm-icon) {
+:deep(.farm-listitem:not(.farm-listitem--disabled):focus .farm-checkbox .farm-icon) {
 	color: var(--farm-primary-lighten);
 }
 

package/src/components/Select/Select.stories.js

@@ -10,7 +10,8 @@ export default {
 			description: {
 				component: `Select<br />
 				selector: <em>farm-select</em><br />
-				<span style="color: var(--farm-primary-base);">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span><br />
+				<a href="https://github.com/Farm-Investimentos/front-mfe-components/blob/develop/src/components/Select/Select.vue" target="_blank">Github</a>
 				`,
 			},
 		},
@@ -129,6 +130,42 @@ export const Disabled = () => ({
 	</div>`,
 });
 
+export const DisabledKeys = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 1, text: ' value 1', disabled: true },
+				{ value: 2, text: ' value 2', disabled: true },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	methods: {
+		allowAllOptions() {
+			this.items = [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			];
+		},
+		reset() {
+			this.items = [
+				{ value: 1, text: ' value 1', disabled: true },
+				{ value: 2, text: ' value 2', disabled: true },
+				{ value: 3, text: ' value 3' },
+			];
+		},
+	},
+	template: `<div style="width: 480px">
+		<farm-select v-model="v" :items="items" />
+		v-model: {{ v }}
+		<br><br>
+		<farm-btn @click="allowAllOptions">Habilitar todos itens</farm-btn>
+		<farm-btn @click="reset">Resetar</farm-btn>
+	</div>`,
+});
+
 export const Validate = () => ({
 	data() {
 		return {

package/src/components/Select/Select.vue

@@ -13,16 +13,24 @@
 		v-if="!readonly && !disabled"
 		:id="customId"
 	>
-		<farm-contextmenu bottom v-model="isVisible" :stay-open="multiple" ref="contextmenu">
+		<farm-contextmenu
+			bottom
+			v-model="isVisible"
+			:stay-open="multiple || clickedDisabledItem"
+			ref="contextmenu"
+		>
 			<farm-list v-if="!readonly" ref="listRef" @keydown="onKeyDown">
 				<farm-listitem
-					tabindex="0"
 					v-for="(item, index) in items"
+					tabindex="0"
 					clickable
-					hoverColorVariation="lighten"
-					hover-color="primary"
+					hover-color-variation="lighten"
+					:hover-color="item.disabled ? 'neutral' : 'primary'"
 					:key="'contextmenu_item_' + index"
-					:class="{ 'farm-listitem--selected': item[itemValue] === innerValue }"
+					:class="{
+						'farm-listitem--selected': item[itemValue] === innerValue,
+						'farm-listitem--disabled': item.disabled,
+					}"
 					@click="selectItem(item)"
 				>
 					<farm-checkbox
@@ -30,6 +38,7 @@
 						v-model="checked"
 						value="1"
 						size="sm"
+						:disabled="item.disabled"
 						v-if="isChecked(item)"
 					/>
 					<farm-checkbox
@@ -37,6 +46,7 @@
 						v-model="checked"
 						value="2"
 						size="sm"
+						:disabled="item.disabled"
 						v-else-if="multiple"
 					/>
 					<farm-caption bold tag="span">{{ item[itemText] }}</farm-caption>
@@ -242,6 +252,7 @@ export default defineComponent({
 			keys,
 		} = buildData(props);
 
+		const clickedDisabledItem = ref(false);
 		const listRef = ref();
 
 		const contextmenu = ref(null);
@@ -339,7 +350,20 @@ export default defineComponent({
 		};
 
 		const selectItem = item => {
-			inputField.value.focus();
+			if (inputField.value) {
+				inputField.value.focus();
+			}
+
+			if (item.disabled) {
+				clickedDisabledItem.value = true;
+
+				// "Schedule" execution to next loop, so the contextMenu won't close immediately if a disabled item is clicked
+				setTimeout(() => {
+					clickedDisabledItem.value = false;
+				});
+				return;
+			}
+
 			if (multiple.value) {
 				const alreadyAdded = multipleValues.value.findIndex(
 					val => val === item[itemValue.value]
@@ -457,6 +481,7 @@ export default defineComponent({
 			customId,
 			showErrorText,
 			contextmenu,
+			clickedDisabledItem,
 			validate,
 			reset,
 			selectItem,

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

@@ -1,6 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
 import Select from '../Select';
 
+/* jest.spyOn(global, 'setTimeout').mockImplementation(fn => {
+	fn();
+	return setTimeout(() => 1, 0);
+}); */
+
 describe('Select component', () => {
 	let wrapper;
 	let component;
@@ -124,6 +129,66 @@ describe('Select component', () => {
 				expect(component.selectedText).toBe('value 0 (+2 outros)');
 			});
 		});
+		describe('disabled items', () => {
+			it('should not select a disabled item', async () => {
+				const items = [
+					{ value: 0, text: 'value 0', disabled: true },
+					{ value: 1, text: 'value 1' },
+					{ value: 2, text: 'value 2' },
+					{ value: 3, text: 'value 3' },
+				];
+
+				await wrapper.setProps({
+					items,
+					value: 1,
+				});
+
+				expect(component.innerValue).toBe(1);
+				expect(component.selectedText).toBe('value 1');
+				component.selectItem(items[2]);
+				setTimeout(() => {
+					expect(component.innerValue).toBe(2);
+					expect(component.selectedText).toBe('value 2');
+				}, 150);
+				component.selectItem(items[0]);
+				setTimeout(() => {
+					expect(component.innerValue).toBe(2);
+					expect(component.selectedText).toBe('value 2');
+				}, 150);
+				component.selectItem(items[3]);
+				setTimeout(() => {
+					expect(component.innerValue).toBe(3);
+					expect(component.selectedText).toBe('value 3');
+				}, 150);
+			});
+			it('should not select a disabled item if is multiple', async () => {
+				const items = [
+					{ value: 0, text: 'value 0' },
+					{ value: 1, text: 'value 1', disabled: true },
+					{ value: 2, text: 'value 2' },
+					{ value: 3, text: 'value 3', disabled: true },
+				];
+
+				await wrapper.setProps({
+					multiple: true,
+					items,
+					value: [0],
+				});
+
+				expect(component.innerValue).toEqual([0]);
+				expect(component.selectedText).toBe('value 0');
+				component.selectItem(items[2]);
+				setTimeout(() => {
+					expect(component.innerValue).toEqual([0, 2]);
+					expect(component.selectedText).toBe('value 0 (+1 outro)');
+				}, 150);
+				component.selectItem(items[1]);
+				setTimeout(() => {
+					expect(component.innerValue).toEqual([0, 2]);
+					expect(component.selectedText).toBe('value 0 (+1 outro)');
+				}, 150);
+			});
+		});
 
 		describe('onKeyDown', () => {
 			it('should open the ContextMenu and click on current element', () => {

package/src/scss/utils.scss

@@ -11,9 +11,8 @@ tr.v-data-table__empty-wrapper {
 	}
 }
 
-
 .mf-Containers.mf-Containers-authenticated {
-	>.mf-Container>div.v-application {
+	> .mf-Container > div.v-application {
 		padding-bottom: 2.625rem;
 	}
 }
@@ -37,8 +36,6 @@ body.body--has-footer {
 	.v-icon.v-icon {
 		font-size: 22px;
 		color: var(--farm-neutral-farken);
-		;
-
 		&.mdi-checkbox-marked,
 		&.mdi-minus-box {
 			color: var(--farm-primary-base);
@@ -48,4 +45,18 @@ body.body--has-footer {
 	.v-input--selection-controls__ripple {
 		display: none;
 	}
-}
+}
+
+.collapsible-stories-class-with-line {
+	position: relative;
+	padding-right: 20px;
+	&:after {
+		content: '';
+		position: absolute;
+		height: 80%;
+		width: 1px;
+		border-right: 1px solid var(--farm-stroke-base);
+		right: 10px;
+		top: 5%;
+	}
+}