@farm-investimentos/front-mfe-components 12.1.0 → 12.1.2

package/package.json

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

package/src/components/ContextMenu/ContextMenu.scss

@@ -8,6 +8,7 @@
 .farm-contextmenu__popup {
 	visibility: hidden;
 	opacity: 0;
+	padding: 2px;
 	position: absolute;
 	display: block;
 	overflow-y: auto;
@@ -18,11 +19,10 @@
 	transform-origin: left top;
 	transition: visibility 0.1s linear, opacity 0.1s linear;
 
-	border-radius: 4px;
 	left: 0;
 
-	background: #FFFFFF;
-	border: 1px solid var(--farm-stroke-base);
+	background: #ffffff;
+
 	@include addShadow;
 	border-radius: 5px;
 
@@ -30,4 +30,4 @@
 		opacity: 1;
 		visibility: visible;
 	}
-}
+}

package/src/components/ContextMenu/ContextMenu.vue

@@ -4,10 +4,14 @@
 			<slot name="activator"></slot>
 		</span>
 
-		<div ref="popup" :class="{
-			'farm-contextmenu__popup': true,
-			'farm-contextmenu__popup--visible': inputValue,
-		}" :style="styles">
+		<div
+			ref="popup"
+			:class="{
+				'farm-contextmenu__popup': true,
+				'farm-contextmenu__popup--visible': inputValue,
+			}"
+			:style="styles"
+		>
 			<slot></slot>
 		</div>
 	</div>
@@ -41,12 +45,19 @@ export default Vue.extend({
 			type: [Number, String],
 			default: 320,
 		},
+		/**
+		 * Should stay open when click inside
+		 */
+		stayOpen: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const parent = ref(null);
 		const popup = ref(null);
 		const activator = ref(null);
-		const { bottom, maxHeight } = toRefs(props);
+		const { bottom, maxHeight, stayOpen } = toRefs(props);
 
 		const styles = reactive({
 			minWidth: 0,
@@ -59,8 +70,16 @@ export default Vue.extend({
 
 		let hasBeenBoostrapped = false;
 
-		const outClick = (event: Event) => {
-			if (activator && !activator.value.contains(event.target)) {
+		const outClick = (event: Record<string, any>) => {
+			const isInside =
+				event.path.some((e: HTMLElement) => {
+					if (e.classList) {
+						return e.classList.contains('farm-contextmenu__popup--visible');
+					}
+					return false;
+				}) && stayOpen.value;
+
+			if (activator && !activator.value.contains(event.target) && !isInside) {
 				emit('input', false);
 				inputValue.value = false;
 			}

package/src/components/Select/Select.scss

@@ -15,4 +15,15 @@
 	&--rotate {
 		transform: rotate(180deg);
 	}
-}
+}
+
+.farm-select__checkbox {
+	margin-right: 8px;
+}
+
+::v-deep .farm-listitem:hover .farm-checkbox .farm-icon {
+	color: var(--farm-primary-lighten);
+}
+::v-deep .farm-listitem:hover .farm-checkbox.farm-checkbox--checked .farm-icon {
+	color: white;
+}

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

@@ -34,7 +34,7 @@ export const Primary = () => ({
 			],
 		};
 	},
-	template: `<div style="width: 120px">
+	template: `<div style="width: 120px;">
 		<farm-select v-model="v" :items="items" />
 		v-model: {{ v }}
 	</div>`,
@@ -195,3 +195,54 @@ export const NoItems = () => ({
 		v-model: {{ v }}
 	</div>`,
 });
+
+export const Multiple = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 0, text: 'value 0' },
+				{ value: 1, text: 'value 1' },
+				{ value: 2, text: 'value 2' },
+				{ value: 3, text: 'value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 400px">
+		<farm-select v-model="v" :items="items" multiple />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const MultipleInitValue = () => ({
+	data() {
+		return {
+			v: [2, 3],
+			items: [
+				{ id: 0, label: 'value 0' },
+				{ id: 1, label: 'value 1' },
+				{ id: 2, label: 'value 2' },
+				{ id: 3, label: 'value 3' },
+			],
+		};
+	},
+	methods: {
+		click() {
+			this.$refs.select.reset();
+		},
+	},
+	template: `<div style="width: 400px">
+		<farm-select
+			v-model="v"
+			item-value="id"
+			item-text="label"
+			ref="select"
+			multiple
+			:items="items"
+		/>
+		v-model: {{ v }}
+		<farm-btn @click="click">
+			reset
+		</farm-btn>
+	</div>`,
+});

package/src/components/Select/Select.vue

@@ -11,7 +11,7 @@
 		}"
 		v-if="!readonly && !disabled"
 	>
-		<farm-contextmenu bottom v-model="isVisible">
+		<farm-contextmenu bottom v-model="isVisible" :stay-open="multiple">
 			<farm-list v-if="!readonly">
 				<farm-listitem
 					v-for="(item, index) in items"
@@ -22,7 +22,21 @@
 					:class="{ 'farm-listitem--selected': item[itemValue] === innerValue }"
 					@click="selectItem(item)"
 				>
-					<farm-caption bold tag="span">{{ item[itemText] }}</farm-caption>
+					<farm-checkbox
+						class="farm-select__checkbox"
+						v-model="checked"
+						value="1"
+						size="sm"
+						v-if="isChecked(item)"
+					></farm-checkbox>
+					<farm-checkbox
+						class="farm-select__checkbox"
+						v-model="checked"
+						value="2"
+						size="sm"
+						v-else-if="multiple"
+					></farm-checkbox
+					><farm-caption bold tag="span">{{ item[itemText] }}</farm-caption>
 				</farm-listitem>
 				<farm-listitem v-if="!items || items.length === 0">
 					{{ noDataText }}
@@ -68,7 +82,7 @@ export default Vue.extend({
 		/**
 		 * v-model binding
 		 */
-		value: { type: [String, Number], default: '' },
+		value: { type: [String, Number, Array], default: '' },
 		hint: {
 			type: String,
 			default: null,
@@ -123,14 +137,24 @@ export default Vue.extend({
 			type: String,
 			default: 'Não há dados',
 		},
+		/**
+		 * Set a multiple select
+		 */
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
-		const { rules, items, itemText, itemValue, disabled } = toRefs(props);
+		const { rules, items, itemText, itemValue, disabled, multiple } = toRefs(props);
 		const innerValue = ref(props.value);
 		const isTouched = ref(false);
 		const isBlured = ref(false);
 		const isVisible = ref(false);
 		const selectedText = ref('');
+		const multipleValues = ref(Array.isArray(props.value) ? [...props.value] : []);
+		const checked = ref('1');
+		const notChecked = ref(false);
 
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
 
@@ -169,6 +193,7 @@ export default Vue.extend({
 			() => {
 				isTouched.value = true;
 				isBlured.value = true;
+				validate(innerValue.value);
 				emit('input', innerValue.value);
 				emit('change', innerValue.value);
 			}
@@ -193,8 +218,13 @@ export default Vue.extend({
 				return;
 			}
 			innerValue.value = null;
+			multipleValues.value = [];
 			selectedText.value = '';
 			isTouched.value = true;
+			if (multiple.value) {
+				innerValue.value = [];
+				return;
+			}
 			emit('input', innerValue.value);
 		};
 
@@ -209,7 +239,21 @@ export default Vue.extend({
 		};
 
 		const selectItem = item => {
-			selectedText.value = item[itemText.value];
+			if (multiple.value) {
+				const alreadyAdded = multipleValues.value.findIndex(
+					val => val === item[itemValue.value]
+				);
+				checked.value = '1';
+				if (alreadyAdded !== -1) {
+					multipleValues.value.splice(alreadyAdded, 1);
+				} else {
+					multipleValues.value.push(item[itemValue.value]);
+				}
+				innerValue.value = [...multipleValues.value];
+
+				return;
+			}
+
 			innerValue.value = item[itemValue.value];
 			isVisible.value = false;
 		};
@@ -224,16 +268,51 @@ export default Vue.extend({
 		};
 
 		const updateSelectedTextValue = () => {
-			if (!items.value || items.value.length === 0 || innerValue.value === null) {
+			if (
+				!items.value ||
+				items.value.length === 0 ||
+				innerValue.value === null ||
+				(multiple.value && multipleValues.value.length === 0)
+			) {
 				selectedText.value = '';
 				return;
 			}
 			const selectedItem = items.value.find(
 				item => item[itemValue.value] == innerValue.value
 			);
+
 			if (selectedItem) {
 				selectedText.value = selectedItem[itemText.value];
 			}
+
+			addLabelToMultiple();
+		};
+
+		const addLabelToMultiple = () => {
+			if (multiple.value && Array.isArray(innerValue.value) && innerValue.value.length > 0) {
+				const labelItem = items.value.find(
+					item => item[itemValue.value] === innerValue.value[0]
+				);
+
+				if (innerValue.value.length === 0) {
+					selectedText.value = '';
+					return;
+				} else if (innerValue.value.length === 1) {
+					selectedText.value = labelItem[itemText.value];
+					return;
+				}
+
+				selectedText.value = `${labelItem[itemText.value]} (+${
+					innerValue.value.length - 1
+				} ${innerValue.value.length - 1 === 1 ? 'outro' : 'outros'})`;
+			}
+		};
+
+		const isChecked = item => {
+			return (
+				multiple.value &&
+				multipleValues.value.findIndex(val => val === item[itemValue.value]) !== -1
+			);
 		};
 
 		return {
@@ -256,6 +335,11 @@ export default Vue.extend({
 			clickInput,
 			updateSelectedTextValue,
 			makePristine,
+			checked,
+			notChecked,
+			isChecked,
+			multipleValues,
+			addLabelToMultiple,
 		};
 	},
 });

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

@@ -47,5 +47,82 @@ describe('Select component', () => {
 			component.makePristine();
 			expect(component.isTouched).toBeFalsy();
 		});
+
+		describe('isChecked', () => {
+			it('should return false when multiple is false', async () => {
+				component.multipleValues = [0, 1, 2];
+				const result = component.isChecked({ value: 1 });
+				expect(result).toBe(false);
+			});
+			it('should return true when multiple is true and item is checked', async () => {
+				await wrapper.setProps({
+					multiple: true,
+				});
+				component.multipleValues = [0, 1, 2];
+				const result = component.isChecked({ value: 1 });
+				expect(result).toBe(true);
+			});
+			it('should return false when item is not checked', async () => {
+				await wrapper.setProps({
+					multiple: true,
+				});
+				component.multipleValues = [0, 1, 2];
+				const result = component.isChecked({ value: 3 });
+				expect(result).toBe(false);
+			});
+		});
+		describe('addLabelToMultiple', () => {
+			it('should not do anything when multiple is false', async () => {
+				component.addLabelToMultiple();
+
+				expect(component.selectedText).toBe('');
+			});
+			it('should return a selectedText to a selected item', async () => {
+				await wrapper.setProps({
+					multiple: true,
+					items: [
+						{ value: 0, text: 'value 0' },
+						{ value: 1, text: 'value 1' },
+						{ value: 2, text: 'value 2' },
+						{ value: 3, text: 'value 3' },
+					],
+					value: [0],
+				});
+
+				component.addLabelToMultiple();
+				expect(component.selectedText).toBe('value 0');
+			});
+			it('should return a selectedText to two selected item', async () => {
+				await wrapper.setProps({
+					multiple: true,
+					items: [
+						{ value: 0, text: 'value 0' },
+						{ value: 1, text: 'value 1' },
+						{ value: 2, text: 'value 2' },
+						{ value: 3, text: 'value 3' },
+					],
+					value: [0, 1],
+				});
+
+				component.addLabelToMultiple();
+				expect(component.selectedText).toBe('value 0 (+1 outro)');
+			});
+
+			it('should return a selectedText to three or more selected item', async () => {
+				await wrapper.setProps({
+					multiple: true,
+					items: [
+						{ value: 0, text: 'value 0' },
+						{ value: 1, text: 'value 1' },
+						{ value: 2, text: 'value 2' },
+						{ value: 3, text: 'value 3' },
+					],
+					value: [0, 1, 2],
+				});
+
+				component.addLabelToMultiple();
+				expect(component.selectedText).toBe('value 0 (+2 outros)');
+			});
+		});
 	});
 });

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -11,6 +11,7 @@
 		border-radius: 5px;
 		padding: 8px;
 		margin-bottom: 4px;
+		background-color: white;
 
 		>button {
 			display: flex;

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -19,7 +19,7 @@ export default {
 		docs: {
 			description: {
 				component: `Text field v2<br />
-				selector: <em>farm-texfield-v2</em><br />
+				selector: <em>farm-textfield-v2</em><br />
 				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
@@ -38,7 +38,7 @@ export const Primary = () => ({
 			v: 'input text',
 		};
 	},
-	template: `<div style="width: 480px">
+	template: `<div style="width: 480px;">
 		<farm-textfield-v2 v-model="v" />
 		v-model: {{ v }}
 	</div>`,