@farm-investimentos/front-mfe-components 12.0.2 → 12.1.1

package/package.json

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

package/src/components/AlertBox/AlertBox.stories.js

@@ -10,7 +10,7 @@ export default {
 			description: {
 				component: `Alert Box<br />
 					selector: <em>farm-alertbox</em><br />
-					<span style="color: var(--farm-extra-1-base);">development</span>
+					<span style="color: var(--farm-primary-base);">ready for use</span>
 `,
 			},
 		},

package/src/components/ButtonToggle/ButtonToggle.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Button Toggle<br />
-				selector: <em>farm-button-toggle</em>
+				selector: <em>farm-button-toggle</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

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

@@ -13,7 +13,8 @@ export default {
 		docs: {
 			description: {
 				component: `Default button<br />
-				selector: <em>farm-btn</em>
+				selector: <em>farm-btn</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 			design: {

package/src/components/ChipInviteStatus/ChipInviteStatus.stories.js

@@ -3,6 +3,16 @@ import ChipInviteStatus from './ChipInviteStatus.vue';
 export default {
 	title: 'Display/Chips/Onboarding/InviteStatus',
 	component: ChipInviteStatus,
+	parameters: {
+		docs: {
+			description: {
+				component: `Chip Invite Status<br />
+					selector: <em>farm-chip-invite</em><br />
+					<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({

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/IconBox/IconBox.stories.js

@@ -13,7 +13,9 @@ export default {
 		viewMode: 'docs',
 		docs: {
 			description: {
-				component: `IconBox`,
+				component: `IconBox<br />
+				selector: <em>farm-icon-box</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},

package/src/components/IdCaption/IdCaption.stories.js

@@ -9,7 +9,8 @@ export default {
 		docs: {
 			description: {
 				component: `Id Caption<br />
-				selector: <em>farm-idcaption</em>
+				selector: <em>farm-idcaption</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Label/Label.stories.js

@@ -14,7 +14,8 @@ export default {
 		docs: {
 			description: {
 				component: `Label<br />
-				selector: <em>farm-label</em>`,
+				selector: <em>farm-label</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},

package/src/components/List/List.stories.js

@@ -11,7 +11,8 @@ export default {
 		docs: {
 			description: {
 				component: `List<br />
-				selector: <em>farm-list</em>`,
+				selector: <em>farm-list</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},

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

@@ -12,11 +12,11 @@ export default {
 	decorators: [withDesign],
 	parameters: {
 		viewMode: 'docs',
-
 		docs: {
 			description: {
 				component: `ListItem<br />
-				selector: <em>farm-listitem</em>`,
+				selector: <em>farm-listitem</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},

package/src/components/Radio/Radio.scss

@@ -1,6 +1,11 @@
 @import '../../configurations/variables';
 @import '../../configurations/theme-colors';
 
+.farm-radio-wrapper {
+	align-items: baseline;
+	display: flex;
+}
+
 input[type='radio'] {
 	-webkit-appearance: none;
 	appearance: none;
@@ -8,7 +13,7 @@ input[type='radio'] {
 	margin: 0;
 	font: inherit;
 	color: rgba(0, 0, 0, 0.6);
-	border: 1.5px solid rgba(0, 0, 0, 0.6);
+	border: 2.5px solid themeColor('neutral', 'darken');
 	border-radius: 50%;
 	display: grid;
 	place-content: center;
@@ -19,7 +24,6 @@ input[type='radio'] {
 		border-radius: 50%;
 		transform: scale(0);
 		transition: 120ms transform ease-in-out;
-		background-color: CanvasText;
 	}
 
 	&.farm-radio--checked::before {
@@ -53,6 +57,27 @@ input[type='radio'] {
 			}
 		}
 	}
+
+	&:disabled {
+		border: 2.5px solid themeColor('neutral', 'base');
+		cursor: auto;
+
+		&.farm-radio--checked::before {
+			box-shadow: inset 16px 16px themeColor('neutral', 'base');
+		}
+
+		&.farm-radio--checked {
+			border-color: themeColor('neutral', 'base');
+		}
+
+		&:hover,
+		&.farm-radio--checked:hover {
+			box-shadow: none;
+			background-color: transparent;
+			border-radius: 50%;
+			opacity: 1;
+		}
+	}
 }
 
 @each $size, $value in $sizes {

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

@@ -94,7 +94,7 @@ export const Sizes = () => ({
 	},
 	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 }}
+			<farm-radio v-model="v" :id="size" :value="size" :size="size"  />&nbsp;&nbsp;<label  :for="size">{{ size }}</label>
 		</div>
 	</div>`,
 });
@@ -108,7 +108,39 @@ export const Colors = () => ({
 	},
 	template: `<div style="width: 480px">
 		<div v-for="color in colors" :key="color" class="d-flex flex-row align-center mb-3">
-			<farm-radio v-model="v" :value="1" :color="color"  />&nbsp;&nbsp;{{ color }}
+			<farm-radio v-model="v" :id="color" :value="1" :color="color" :label="color" />
+		</div>
+	</div>`,
+});
+
+export const Disabled = () => ({
+	data() {
+		return {
+			v: 1,
+		};
+	},
+	template: `<div style="width: 480px">
+		<div class="d-flex flex-row align-center mb-3">
+			<farm-radio v-model="v" :value="2" disabled label="Disabled" />
+		</div>
+		<div class="d-flex flex-row align-center mb-3">
+			<farm-radio v-model="v" :value="1" disabled label="Checked and Disabled" />
+		</div>
+	</div>`,
+});
+
+export const Label = () => ({
+	data() {
+		return {
+			v: 1,
+		};
+	},
+	template: `<div style="width: 480px">
+		<div class="d-flex flex-row align-center mb-3">
+			<farm-radio v-model="v" :value="2" id="option1" label="Option 1" />
+		</div>
+		<div class="d-flex flex-row align-center mb-3">
+			<farm-radio v-model="v" :value="1" id="option2" label="Option 2" />
 		</div>
 	</div>`,
 });

package/src/components/Radio/Radio.vue

@@ -1,16 +1,23 @@
 <template>
-	<input
-		:class="{
-			'farm-radio': true,
-			'farm-radio--checked': isChecked,
-		}"
-		type="radio"
-		:color="color"
-		:size="$props.size"
-		:checked="isChecked"
-		:value="value"
-		@click="onClick"
-	/>
+	<div class="farm-radio-wrapper">
+		<input
+			:class="{
+				'farm-radio': true,
+				'farm-radio--checked': isChecked,
+			}"
+			:id="id"
+			type="radio"
+			:color="color"
+			:size="$props.size"
+			:checked="isChecked"
+			:value="value"
+			v-bind="$attrs"
+			@click="onClick"
+		/>
+		<farm-label v-if="label" class="ml-2" :for="id">
+			{{ label }}
+		</farm-label>
+	</div>
 </template>
 <script lang="ts">
 import Vue, { PropType } from 'vue';
@@ -34,7 +41,7 @@ export default Vue.extend({
 		 */
 		size: {
 			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
-			default: 'md',
+			default: 'sm',
 		},
 		/**
 		 * Color
@@ -54,6 +61,20 @@ export default Vue.extend({
 			>,
 			default: 'primary',
 		},
+		/**
+		 * Label
+		 */
+		label: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * ID
+		 */
+		id: {
+			type: String,
+			default: '',
+		},
 	},
 	computed: {
 		isChecked() {

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

@@ -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)');
+			});
+		});
 	});
 });