@farm-investimentos/front-mfe-components-vue3 0.6.1 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.6.1",
+	"version": "0.7.1",
 	"private": false,
 	"repository": {
 		"type": "git",

package/src/components/ChipInviteStatus/keys.ts

@@ -1,11 +1,11 @@
 export default {
-	10: { label: 'Convidar', color: 'primary' },
-	11: { label: 'Convidado', color: 'warning', outlined: true },
-	12: { label: 'Incompleto', color: 'warning', outlined: true },
-	13: { label: 'Concluído', color: 'primary', outlined: true },
-	14: { label: 'Falha/Erro', color: 'error', outlined: true },
-	15: { label: 'Em Análise', color: 'info', outlined: true },
-	16: { label: 'Em Andamento', color: 'secondary', variation: 'darken' },
-	17: { label: 'Em Espera', color: 'secondary' },
-	18: { label: 'Declinado', color: 'error', outlined: true },
+	10: { label: 'Convidar', color: 'success', variation: 'base' },
+	11: { label: 'Convidado', color: 'warning', variation: 'lighten' },
+	12: { label: 'Incompleto', color: 'error', variation: 'lighten' },
+	13: { label: 'Concluído', color: 'success', variation: 'lighten' },
+	14: { label: 'Falha/Erro', color: 'error', variation: 'base' },
+	15: { label: 'Em Análise', color: 'info', variation: 'base' },
+	16: { label: 'Em Andamento', color: 'secondary-golden', variation: 'darken' },
+	17: { label: 'Em Espera', color: 'info', variation: 'lighten' },
+	18: { label: 'Declinado', color: 'neutral', variation: 'base' },
 };

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

@@ -25,7 +25,6 @@ export const Primary = () => ({
 			<template v-slot:activator="{ on, attrs }">
                 <farm-btn
 					v-bind="attrs"
-					v-on="on"
 				>
 					open
 				</farm-btn>
@@ -41,7 +40,6 @@ export const LongActivator = () => ({
             <template v-slot:activator="{ on, attrs }">
                 <farm-btn
 					v-bind="attrs"
-					v-on="on"
 				>
 					Very long Activator
 				</farm-btn>
@@ -57,7 +55,6 @@ export const IconActivator = () => ({
             <template v-slot:activator="{ on, attrs }">
                 <farm-btn
 					v-bind="attrs"
-					v-on="on"
 					icon
 				>
 					<farm-icon>help-circle</farm-icon>
@@ -209,7 +206,6 @@ export const Right = () => ({
 			<template v-slot:activator="{ on, attrs }">
                 <farm-btn
 					v-bind="attrs"
-					v-on="on"
 				>
 					open
 				</farm-btn>

package/src/components/DatePicker/DatePicker.vue

@@ -233,13 +233,15 @@ export default {
 				this.dateField = this.modelValue;
 			}
 		},
+		pickerDate(newValue) {
+			this.internalPickerDate = newValue;
+		},
 	},
 	methods: {
 		save() {
 			this.inputVal = this.dateField;
 			this.menuField = false;
 			this.closeDatepicker();
-
 		},
 		clear() {
 			this.dateField = this.multiple ? [] : '';

package/src/components/InputDecimalFormatter/__tests__/InputMoney.spec.js

@@ -8,9 +8,12 @@ describe('InputDecimalFormatter component', () => {
 
 	beforeEach(() => {
 		wrapper = shallowMount(InputDecimalFormatter, {
-			directives: {
-				mask: () => { },
-			},
+			global: {
+				directives: {
+					mask: () => { },
+					money3: () => { },
+				},
+			}
 		});
 		component = wrapper.vm;
 	});

package/src/components/ListItem/ListItem.scss

@@ -8,10 +8,24 @@
 	display: flex;
 	align-items: center;
 
+	.farm-icon,
+	.farm-typography {
+		color: var(--farm-neutral-darken);
+	}
+
 	&--clickable {
 		cursor: pointer;
 	}
 
+	&--disabled {
+		cursor: default;
+
+		.farm-icon,
+		.farm-typography {
+			color: var(--farm-stroke-disabled);
+		}
+	}
+
 	> a {
 		text-decoration: none;
 	}
@@ -20,17 +34,49 @@
 	&:focus {
 		border-radius: 5px;
 
-		@each $color in $theme-colors-list {
-			&#{'.farm-listitem--' + $color + '-base'} {
-				background-color: rgba(themeColor($color), 0.27);
-			}
+		&: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-listitem--' + $color + '-darken'} {
+					background-color: rgba(themeColor($color, 'darken'), 0.27);
+					.farm-icon,
+					.farm-typography {
+						color: rgba(themeColor($color), 1);
+					}
+				}
 			}
+		}
+	}
+
+	&:active {
+		&: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 + '-darken'} {
-				background-color: rgba(themeColor($color, 'darken'), 0.27);
+				&#{'.farm-listitem--' + $color + '-darken'} {
+					background-color: rgba(themeColor($color, 'darken'), 0.8);
+				}
 			}
 		}
 	}

package/src/components/ListItem/ListItem.vue

@@ -60,8 +60,8 @@ export default {
 			return `farm-listitem--${hoverColor.value}-${hoverColorVariation.value}`;
 		});
 
-		const onClick = () => {
-			emit('click:item');
+		const onClick = (event) => {
+			emit('click:item', event);
 		};
 
 		return {

package/src/components/MainFilter/MainFilter.vue

@@ -29,6 +29,7 @@
 		<farm-btn
 			v-if="hasExtraFilters"
 			class="farm-btn__cta"
+			outlined
 			:title="extraFiltersBtnLabel"
 			@click="onFilterClick"
 		>

package/src/components/Modal/Modal.vue

@@ -21,21 +21,16 @@
 					<slot name="footer"></slot>
 				</div>
 			</div>
-			<div class="farm-modal--overlay" @click="close()"></div>
+			<div
+				class="farm-modal--overlay"
+				@click="close()"
+			></div>
 		</div>
 	</transition>
 </template>
 
 <script lang="ts">
-import {
-	onBeforeUnmount,
-	onMounted,
-	PropType,
-	reactive,
-	ref,
-	toRefs,
-	watch,
-} from 'vue';
+import { onBeforeUnmount, onMounted, PropType, reactive, ref, toRefs, watch } from 'vue';
 
 import { calculateMainZindex } from '../../helpers';
 
@@ -87,6 +82,7 @@ export default {
 			window.removeEventListener('keyup', escHandler);
 			inputValue.value = false;
 			emit('update:modelValue', false);
+			emit('onClose');
 		};
 
 		watch(

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

@@ -4,6 +4,7 @@ import Modal from '../index';
 
 describe('Modal component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(Modal, {
@@ -11,9 +12,18 @@ describe('Modal component', () => {
 				modelValue: false,
 			},
 		});
+		component = wrapper.vm;
 	});
 
 	test('Modal created', () => {
 		expect(wrapper).toBeDefined();
 	});
+
+	describe('Methods', () => {
+		it('Should emit events when call close function', () => {
+			component.close();
+			expect(wrapper.emitted()['update:modelValue']).toBeDefined();
+			expect(wrapper.emitted()['onClose']).toBeDefined();
+		});
+	});
 });

package/src/components/ModalPromptUser/ModalPromptUser.vue

@@ -115,7 +115,7 @@ export default {
 	computed: {
 		inputVal: {
 			get() {
-				return this.value;
+				return this.modelValue;
 			},
 			set(val) {
 				this.$emit('update:modelValue', val);

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

@@ -7,7 +7,7 @@ describe('ModalPromptUser component', () => {
 
 	beforeEach(() => {
 		wrapper = shallowMount(ModalPromptUser, {
-			propsData: {
+			props: {
 				modelValue: false,
 				title: '',
 				subtitle: '',

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

@@ -8,7 +8,7 @@ describe('RadioGroup component', () => {
 	beforeEach(() => {
 		wrapper = shallowMount(RadioGroup, {
 			propsData: {
-				value: 1,
+				modelValue: 1,
 			},
 		});
 	});

package/src/components/Select/Select.scss

@@ -28,22 +28,22 @@
 	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);
 }
 
 :deep(.farm-listitem:hover .farm-checkbox.farm-checkbox--checked .farm-icon) {
 	color: white;
-}
+}

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

@@ -251,6 +251,42 @@ export const Multiple = () => ({
 	</div>`,
 });
 
+export const MultipleSelectAll = () => ({
+	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 has-all-option />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const MultipleWithAllOptionAndDisabledItems = () => ({
+	data() {
+		return {
+			v: null,
+			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 },
+			],
+		};
+	},
+	template: `<div style="width: 400px">
+		<farm-select v-model="v" :items="items" multiple has-all-option />
+		v-model: {{ v }}
+	</div>`,
+});
+
 export const MultipleInitValue = () => ({
 	data() {
 		return {
@@ -344,3 +380,41 @@ export const ChangeEvent = () => ({
 
 	</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' },
+			];
+			this.v = null;
+		},
+	},
+	template: `<farm-row>
+		<farm-col md="4">
+			<farm-select v-model="v" :items="items" />
+			v-model: {{ v }}
+			<farm-btn @click="allowAllOptions">Habilitar todos itens</farm-btn>
+			<farm-btn @click="reset">Resetar</farm-btn>
+		</farm-col>
+	</farm-row>`,
+});