@farm-investimentos/front-mfe-components-vue3 0.6.0 → 0.6.5

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

@@ -78,7 +78,32 @@ export const Application = () => ({
 
 export const FullWidth = () => ({
 	template: `
-	<div style="max-width: 480px; padding-top: 32px; margin-left: 32px;">
+	<farm-box>
 		<farm-form-mainfilter  label="Label" fullWidth :hasExtraFilters="false"/>
-	</div>`,
+	</farm-box>`,
+});
+
+export const InitialValue = () => ({
+	template: `
+	<farm-row>
+		<farm-col md="4">
+		<farm-form-mainfilter label="Label" initialValue="with initial value" />
+		</farm-col>
+	</farm-row>`,
+});
+
+export const onInputChange = () => ({
+	setup() {
+		function handler(value) {
+			alert(`onInputChange: ${value}`);
+		}
+
+		return { handler };
+	},
+	template: `
+	<farm-row>
+		<farm-col md="4">
+		<farm-form-mainfilter label="Label" @onInputChange="handler"  />
+		</farm-col>
+	</farm-row>`,
 });

package/src/components/MainFilter/MainFilter.vue

@@ -1,6 +1,9 @@
 <template>
 	<farm-row :class="{ 'justify-end': justifyEnd === true }">
-		<farm-col v-if="hasInitialInput" :md="fullWidth ? 12 : 6">
+		<farm-col
+			v-if="hasInitialInput"
+			:md="fullWidth ? 12 : 6"
+		>
 			<farm-label :for="elementId">
 				{{ !hasSlotData ? label : '' }}
 				<slot v-if="hasSlotData"></slot>
@@ -9,15 +12,24 @@
 						{{ tooltip }}
 					</farm-caption>
 					<template v-slot:activator>
-						<farm-icon size="sm" color="gray">help-circle</farm-icon>
+						<farm-icon
+							size="sm"
+							color="gray"
+							>help-circle</farm-icon
+						>
 					</template>
 				</farm-tooltip>
 			</farm-label>
-			<farm-textfield-v2 v-model="inputValue" :id="elementId" @keyup="onKeyUp" />
+			<farm-textfield-v2
+				v-model="inputValue"
+				:id="elementId"
+				@keyup="onKeyUp"
+			/>
 		</farm-col>
 		<farm-btn
 			v-if="hasExtraFilters"
 			class="farm-btn__cta"
+			outlined
 			:title="extraFiltersBtnLabel"
 			@click="onFilterClick"
 		>
@@ -28,7 +40,7 @@
 </template>
 
 <script lang="ts">
-
+import { computed, ref, toRefs, getCurrentInstance } from 'vue';
 
 export default {
 	name: 'farm-form-mainfilter',
@@ -88,34 +100,37 @@ export default {
 			default: false,
 		},
 	},
+	setup(props) {
+		const { showFilters, initialValue } = toRefs(props);
+
+		const internalInstance = getCurrentInstance().proxy;
+
+		const timer = ref<Number>(null);
+
+		const inputValue = ref(initialValue.value);
+
+		const extraFiltersBtnIcon = computed(() =>
+			showFilters.value ? 'filter-off-outline' : 'filter-outline'
+		);
+		const extraFiltersBtnLabel = computed(
+			() => `${showFilters.value ? 'Esconder' : 'Ver'} Filtros`
+		);
+
+		const hasSlotData = computed(() => internalInstance.$slots.default);
+
+		return { inputValue, extraFiltersBtnIcon, extraFiltersBtnLabel, timer, hasSlotData };
+	},
 
 	watch: {
 		initialValue(newValue: string) {
 			this.inputValue = newValue;
 		},
 	},
-	computed: {
-		hasSlotData() {
-			return this.$slots.default;
-		},
-		extraFiltersBtnLabel() {
-			return `${this.showFilters ? 'Esconder' : 'Ver'} Filtros`;
-		},
-		extraFiltersBtnIcon() {
-			return this.showFilters ? 'filter-off' : 'filter';
-		},
-	},
-	data() {
-		return {
-			timer: null,
-			inputValue: this.initialValue,
-		};
-	},
 	methods: {
 		onFilterClick() {
 			this.$emit('onClick');
 		},
-		isInvalidKey(keyCode: Number) {
+		isInvalidKey(keyCode: number) {
 			return (
 				(keyCode < 48 && keyCode !== 8 && keyCode !== 46) ||
 				(keyCode > 90 && keyCode < 96 && keyCode !== 91) ||

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

@@ -36,11 +36,11 @@ describe('MainFilter component', () => {
 		});
 
 		it('get extraFiltersBtnIcon', async () => {
-			expect(component.extraFiltersBtnIcon).toEqual('filter');
+			expect(component.extraFiltersBtnIcon).toEqual('filter-outline');
 			await wrapper.setProps({
 				showFilters: true,
 			});
-			expect(component.extraFiltersBtnIcon).toEqual('filter-off');
+			expect(component.extraFiltersBtnIcon).toEqual('filter-off-outline');
 		});
 	});
 });

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>`,
+});