@farm-investimentos/front-mfe-components 15.0.6 → 15.0.7

package/package.json

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

package/src/components/ContextMenu/ContextMenu.vue

@@ -74,7 +74,7 @@ export default Vue.extend({
 		} as any);
 
 		const inputValue = ref(props.value);
-
+		
 		let hasBeenBoostrapped = false;
 
 		const outClick = event => {

package/src/components/Label/Label.scss

@@ -23,4 +23,11 @@
             color: var(--farm-error-base);
         }
     }
+
+    &:has(.farm-tooltip):not(.farm-label--required) {
+        .farm-tooltip::before {
+            content: '';
+            margin-left: 2px;
+        }
+    }
 }

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

@@ -32,6 +32,20 @@ export const Required = () => ({
 });
 
 export const Tooltip = () => ({
+	template: `<div>
+		<farm-label>
+			Label with tooltip
+			<farm-tooltip>
+				this is the tooltip!
+				<template v-slot:activator="{ on, attrs }">
+					<farm-icon size="sm" color="gray">help-circle</farm-icon>
+				</template>
+			</farm-tooltip>
+		</farm-label>
+	</div>`,
+});
+
+export const TooltipWithRequired = () => ({
 	template: `<div>
 		<farm-label required>
 			Label with tooltip

package/src/components/List/List.vue

@@ -1,14 +1,73 @@
 <template>
-	<ul>
+	<ul ref="contentRef" @focusin="onFocusin" @focusout="onFocusout" @focus="onFocus">
 		<slot></slot>
 	</ul>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { onMounted, onUnmounted, ref } from 'vue';
+import { useFocus } from './composition';
 
 export default Vue.extend({
 	name: 'farm-list',
-	setup() {},
+	setup(_, { emit }) {
+		const contentRef = ref<HTMLElement>();
+		const isFocused = ref(false);
+		const { focus } = useFocus(contentRef);
+
+		onMounted(() => {
+			contentRef.value.querySelectorAll('[tabindex]:not([tabindex="-1"]), li').forEach(tag =>
+				tag.addEventListener('keydown', (e: KeyboardEvent) => {
+					e.preventDefault();
+					if (isFocused.value) {
+						emit('keydown', e);
+					}
+				})
+			);
+		});
+
+		onUnmounted(() => {
+			if (contentRef.value) {
+				contentRef.value
+					.querySelectorAll('[tabindex]:not([tabindex="-1"]), li')
+					.forEach(tag =>
+						tag.removeEventListener('keydown', (e: KeyboardEvent) => {
+							e.preventDefault();
+							if (isFocused.value) {
+								emit('keydown', e);
+							}
+						})
+					);
+			}
+		});
+
+		function onFocusin() {
+			isFocused.value = true;
+		}
+
+		function onFocusout() {
+			isFocused.value = false;
+		}
+
+		function onFocus(e: FocusEvent) {
+			if (
+				!(
+					isFocused.value ||
+					(e.relatedTarget && contentRef.value.contains(e.relatedTarget as Node))
+				)
+			) {
+				focus();
+			}
+		}
+
+		return {
+			contentRef,
+			focus,
+			onFocus,
+			onFocusin,
+			onFocusout,
+			isFocused,
+		};
+	},
 });
 </script>
 <style lang="scss" scoped>

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

@@ -3,9 +3,11 @@ import List from '../List';
 
 describe('List component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(List);
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -17,4 +19,15 @@ describe('List component', () => {
 			expect(wrapper.element).toMatchSnapshot();
 		});
 	});
+	describe('Methods', () => {
+		it('should isFocused be true when call onFocusin', () => {
+			component.onFocusin();
+			expect(component.isFocused).toBeTruthy();
+		});
+
+		it('should isFocused be false when call onFocusout', () => {
+			component.onFocusout();
+			expect(component.isFocused).toBeFalsy();
+		});
+	});
 });

package/src/components/List/composition/index.ts

@@ -0,0 +1,3 @@
+import useFocus from './useFocus';
+
+export { useFocus };

package/src/components/List/composition/useFocus.ts

@@ -0,0 +1,49 @@
+import { Ref } from 'vue';
+
+type UseFocusReturn = {
+	focus: (location?: 'next' | 'prev' | 'first' | 'last') => void;
+};
+
+export default function useFocus(contentRef: Ref<HTMLElement>): UseFocusReturn {
+	function focus(location?: 'next' | 'prev' | 'first' | 'last') {
+		if (!contentRef.value) return;
+
+		const focusable = [
+			...contentRef.value.querySelectorAll('[tabindex]:not([tabindex="-1"]), li'),
+		].filter(el => !el.hasAttribute('disabled')) as HTMLElement[];
+
+		const idx = focusable.indexOf(document.activeElement as HTMLElement);
+
+		if (!location) {
+			if (!contentRef.value.contains(document.activeElement)) {
+				focusable[0].focus();
+			}
+		} else if (location === 'first') {
+			const savedTabIndex = focusable[0].getAttribute('tabindex');
+
+			focusable[0].setAttribute('tabindex', '-1');
+			focusable[0].focus();
+			focusable[0].setAttribute('tabindex', savedTabIndex);
+		} else if (location === 'last') {
+			focusable[focusable.length - 1].focus();
+		} else {
+			let el;
+			let idxx = idx;
+			const inc = location === 'next' ? 1 : -1;
+
+			do {
+				idxx += inc;
+				el = focusable[idxx];
+			} while ((!el || el.offsetParent == null) && idxx < focusable.length && idxx >= 0);
+			if (el) {
+				el.focus();
+			} else {
+				focus(location === 'next' ? 'first' : 'last');
+			}
+		}
+	}
+
+	return {
+		focus,
+	};
+}

package/src/components/ListItem/ListItem.scss

@@ -1,39 +1,37 @@
 @import '../../configurations/theme-colors';
 
 .farm-listitem {
-    list-style-type: none;
-    transition: background-color 300ms linear;
-    padding: 8px;
-    height: 36px;
-    display: flex;
-    align-items: center;
-
-    &--clickable {
-        cursor: pointer;
-    }
-
-    >a {
-        text-decoration: none;
-    }
-
-    &:hover {
-
-        border-radius: 5px;
-
-        @each $color in $theme-colors-list {
-
-            &#{'.farm-listitem--' + $color + '-base'} {
-                background-color: rgba(themeColor($color), 0.27);
-            }
-
-            &#{'.farm-listitem--' + $color + '-lighten'} {
-                background-color: rgba(themeColor($color, 'lighten'), 0.27);
-            }
-
-            &#{'.farm-listitem--' + $color + '-darken'} {
-                background-color: rgba(themeColor($color, 'darken'), 0.27);
-            }
-        }
-    }
-
-}
+	list-style-type: none;
+	transition: background-color 300ms linear;
+	padding: 8px;
+	height: 36px;
+	display: flex;
+	align-items: center;
+
+	&--clickable {
+		cursor: pointer;
+	}
+
+	> 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-listitem--' + $color + '-lighten'} {
+				background-color: rgba(themeColor($color, 'lighten'), 0.27);
+			}
+
+			&#{'.farm-listitem--' + $color + '-darken'} {
+				background-color: rgba(themeColor($color, 'darken'), 0.27);
+			}
+		}
+	}
+}

package/src/components/Select/Select.scss

@@ -32,11 +32,18 @@
 	color: var(--farm-primary-base);
 }
 
+:deep(.farm-listitem:focus .farm-typography) {
+	color: var(--farm-primary-base);
+}
+
 :deep(.farm-listitem:hover .farm-checkbox .farm-icon) {
 	color: var(--farm-primary-lighten);
 }
 
+:deep(.farm-listitem: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

@@ -134,7 +134,6 @@ export const Validate = () => ({
 		return {
 			v: null,
 			items: [
-				{ value: null, text: '' },
 				{ value: 1, text: ' value 1' },
 				{ value: 2, text: ' value 2' },
 				{ value: 3, text: ' value 3' },

package/src/components/Select/Select.vue

@@ -14,8 +14,9 @@
 		:id="customId"
 	>
 		<farm-contextmenu bottom v-model="isVisible" :stay-open="multiple" ref="contextmenu">
-			<farm-list v-if="!readonly">
+			<farm-list v-if="!readonly" ref="listRef" @keydown="onKeyDown">
 				<farm-listitem
+					tabindex="0"
 					v-for="(item, index) in items"
 					clickable
 					hoverColorVariation="lighten"
@@ -45,7 +46,10 @@
 				</farm-listitem>
 			</farm-list>
 			<template v-slot:activator="{}">
-				<div class="farm-textfield--input farm-textfield--input--iconed">
+				<div
+					class="farm-textfield--input farm-textfield--input--iconed"
+					@keydown="onKeyDown"
+				>
 					<input
 						v-bind="$attrs"
 						v-model="selectedText"
@@ -57,7 +61,11 @@
 						@focusin="onFocus(true)"
 						@focusout="onFocus(false)"
 					/>
-					<farm-icon color="gray" :class="{ 'farm-icon--rotate': isVisible }">
+					<farm-icon
+						color="gray"
+						:class="{ 'farm-icon--rotate': isVisible }"
+						@click="addFocusToInput"
+					>
 						menu-down
 					</farm-icon>
 				</div>
@@ -231,8 +239,13 @@ export default Vue.extend({
 			checked,
 			notChecked,
 			inputField,
+			keys,
 		} = buildData(props);
 
+		const listRef = ref();
+
+		const contextmenu = ref(null);
+
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
 
 		let fieldValidator = validateFormFieldBuilder(rules.value);
@@ -251,7 +264,10 @@ export default Vue.extend({
 			newValue => {
 				innerValue.value = newValue;
 				errorBucket.value = [];
-				if(multiple.value && newValue === null || (Array.isArray(newValue) && newValue.length === 0)) {
+				if (
+					(multiple.value && newValue === null) ||
+					(Array.isArray(newValue) && newValue.length === 0)
+				) {
 					multipleValues.value = [];
 				}
 				validate(newValue);
@@ -400,8 +416,27 @@ export default Vue.extend({
 			);
 		};
 
-		const contextmenu = ref(null);
+		function onKeyDown(e) {
+			if (props.readonly) return;
+
+			if (['Space'].includes(e.code)) {
+				isVisible.value = true;
+				e.currentTarget.click();
+			}
+			if (['Escape'].includes(e.code)) {
+				isVisible.value = false;
+			}
+
+			if (keys[e.code]) {
+				listRef.value.focus(keys[e.code]);
+			}
+
+			e.preventDefault();
+		}
 
+		function addFocusToInput() {
+			inputField.value.focus();
+		}
 
 		return {
 			items,
@@ -432,6 +467,9 @@ export default Vue.extend({
 			multipleValues,
 			addLabelToMultiple,
 			inputField,
+			onKeyDown,
+			addFocusToInput,
+			listRef,
 		};
 	},
 });

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

@@ -124,5 +124,51 @@ describe('Select component', () => {
 				expect(component.selectedText).toBe('value 0 (+2 outros)');
 			});
 		});
+
+		describe('onKeyDown', () => {
+			it('should open the ContextMenu and click on current element', () => {
+				const event = {
+					code: 'Space',
+					preventDefault: jest.fn(),
+					currentTarget: {
+						click: jest.fn(),
+					},
+				};
+				component.onKeyDown(event);
+
+				expect(component.isVisible).toBeTruthy();
+				expect(event.currentTarget.click).toHaveBeenCalled();
+				expect(event.preventDefault).toHaveBeenCalled();
+			});
+			it('should open the ContextMenu and click on current element when prop readonly is true', async () => {
+				await wrapper.setProps({
+					readonly: true,
+				});
+				const event = {
+					code: 'Space',
+					preventDefault: jest.fn(),
+					currentTarget: {
+						click: jest.fn(),
+					},
+				};
+				component.onKeyDown(event);
+
+				expect(component.isVisible).toBeFalsy();
+				expect(event.currentTarget.click).not.toHaveBeenCalled();
+				expect(event.preventDefault).not.toHaveBeenCalled();
+			});
+
+			it('should close the ContextMenu', () => {
+				const event = {
+					code: 'Escape',
+					preventDefault: jest.fn(),
+				};
+				component.onKeyDown(event);
+
+				expect(component.isVisible).toBeFalsy();
+
+				expect(event.preventDefault).toHaveBeenCalled();
+			});
+		});
 	});
 });

package/src/components/Select/composition/buildData.ts

@@ -11,6 +11,12 @@ export default function (props) {
 	const checked = ref('1');
 	const notChecked = ref(false);
 	const inputField = ref();
+	const keys = {
+		ArrowDown: 'next',
+		ArrowUp: 'prev',
+		Home: 'first',
+		End: 'last',
+	};
 
 	return {
 		multipleValues,
@@ -23,5 +29,6 @@ export default function (props) {
 		checked,
 		notChecked,
 		inputField,
+		keys,
 	};
 }

package/src/components/Switcher/Switcher.stories.js

@@ -90,4 +90,23 @@ export const Colors = () => ({
 		</farm-col>
 
 	</farm-row>`,
-});
+});
+
+export const OutsideChangeVmodel = () => ({
+	data() {
+		return {
+			selectedValue: true,
+		};
+	},
+	methods: {
+		onClick() {
+			this.selectedValue = !this.selectedValue;
+		},
+	},
+	template: `<div>
+		<farm-switcher v-model="selectedValue" block />
+		<farm-btn @click="onClick">
+		toggle selection: {{ selectedValue }}
+		</farm-btn>
+	</div>`,
+});

package/src/components/Switcher/Switcher.vue

@@ -11,7 +11,7 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import Vue, { PropType, computed, ref, watch } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-switcher',
@@ -47,37 +47,45 @@ export default Vue.extend({
 		 * Is disabled?
 		 */
 		disabled: { type: Boolean, default: false },
-	},
-	data() {
-		return {
-			isDisabled: this.disabled,
-		};
-	},
-	computed: {
-		backgroundStyles() {
-			return {
-				'farm-switch--selected': this.value && !this.isDisabled,
-				'farm-switch--idle': !this.value && !this.isDisabled,
-				'farm-switch--disabled-on': this.value && this.isDisabled,
-				'farm-switch--disabled-off': !this.value && this.isDisabled,
-			};
-		},
-		indicatorStyles() {
-			return { transform: this.value ? 'translateX(16px)' : 'translateX(0)' };
-		},
-	},
-	watch: {
-		disabled(newValue: boolean) {
-			this.isDisabled = newValue;
+		/**
+		 * The updated bound model<br />
+		 * _event_
+		 */
+		input: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (value: [String, Number]) => {},
 		},
 	},
-	methods: {
-		toggle() {
-			if (this.isDisabled) {
+	setup(props, { emit }) {
+		const isDisabled = ref(props.disabled);
+
+		const backgroundStyles = computed(() => ({
+			'farm-switch--selected': props.value && !isDisabled.value,
+			'farm-switch--idle': !props.value && !isDisabled.value,
+			'farm-switch--disabled-on': props.value && isDisabled.value,
+			'farm-switch--disabled-off': !props.value && isDisabled.value,
+		}));
+
+		const indicatorStyles = computed(() => ({
+			transform: props.value ? 'translateX(16px)' : 'translateX(0)',
+		}));
+
+		watch(
+			() => props.disabled,
+			newValue => {
+				isDisabled.value = newValue;
+			}
+		);
+
+		const toggle = () => {
+			if (isDisabled.value) {
 				return false;
 			}
-			this.$emit('input', !this.value);
-		},
+			emit('input', !props.value);
+		};
+
+		return { isDisabled, backgroundStyles, indicatorStyles, toggle };
 	},
 });
 </script>