@farm-investimentos/front-mfe-components-vue3 0.0.1

package/src/components/MainFilter/MainFilter.vue

@@ -0,0 +1,147 @@
+<template>
+	<farm-row :class="{ 'justify-end': justifyEnd === true }">
+		<farm-col v-if="hasInitialInput" :md="fullWidth ? 12 : 6">
+			<farm-label :for="elementId">
+				{{ !hasSlotData ? label : '' }}
+				<slot v-if="hasSlotData"></slot>
+				<farm-tooltip v-if="tooltip">
+					<farm-caption color="white">
+						{{ tooltip }}
+					</farm-caption>
+					<template v-slot:activator>
+						<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-col>
+		<farm-btn
+			v-if="hasExtraFilters"
+			class="farm-btn__cta"
+			:title="extraFiltersBtnLabel"
+			@click="onFilterClick"
+		>
+			<farm-icon class="mr-2">{{ extraFiltersBtnIcon }}</farm-icon>
+			{{ extraFiltersBtnLabel }}
+		</farm-btn>
+	</farm-row>
+</template>
+
+<script lang="ts">
+
+
+export default {
+	name: 'farm-form-mainfilter',
+	props: {
+		/**
+		 * Show or not button for extra filters
+		 */
+		hasExtraFilters: {
+			type: Boolean,
+			default: true,
+		},
+		hasInitialInput: {
+			type: Boolean,
+			default: true,
+		},
+		justifyEnd: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Label
+		 */
+		label: {
+			type: String,
+			default: 'Quer localizar um cliente?',
+		},
+		/**
+		 * Input's id
+		 */
+		elementId: {
+			type: String,
+			default: 'form-main-filter-search',
+		},
+		initialValue: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Toggle filters
+		 */
+		showFilters: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Tooltip text
+		 */
+		tooltip: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Input full width
+		 */
+		fullWidth: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	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) {
+			return (
+				(keyCode < 48 && keyCode !== 8 && keyCode !== 46) ||
+				(keyCode > 90 && keyCode < 96 && keyCode !== 91) ||
+				(keyCode > 105 && keyCode < 186)
+			);
+		},
+		onKeyUp(event: KeyboardEvent) {
+			const keyCode = event.keyCode;
+			if (keyCode === 13) {
+				this.$emit('onEnter', (event.target as HTMLInputElement).value);
+				return false;
+			}
+			if (this.isInvalidKey(keyCode)) {
+				return false;
+			}
+			if (this.timer) {
+				clearTimeout(this.timer);
+				this.timer = null;
+			}
+			this.timer = setTimeout(() => {
+				this.$emit('onInputChange', this.inputValue);
+			}, 750);
+		},
+	},
+};
+</script>
+<style scoped lang="scss">
+@import './MainFilter.scss';
+</style>

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

@@ -0,0 +1,45 @@
+import { shallowMount } from '@vue/test-utils';
+import MainFilter from '../MainFilter';
+
+describe('MainFilter component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(MainFilter);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('methods', () => {
+		it('Should emit event', () => {
+			component.onFilterClick();
+			expect(wrapper.emitted().onClick).toBeTruthy();
+		});
+
+		it('Should check if keyCode is valid', () => {
+			expect(component.isInvalidKey(120)).toBeTruthy();
+		});
+	});
+
+	describe('computed properties', () => {
+		it('get extraFiltersBtnLabel', async () => {
+			expect(component.extraFiltersBtnLabel).toEqual('Ver Filtros');
+			await wrapper.setProps({
+				showFilters: true,
+			});
+			expect(component.extraFiltersBtnLabel).not.toEqual('Ver Filtros');
+		});
+
+		it('get extraFiltersBtnIcon', async () => {
+			expect(component.extraFiltersBtnIcon).toEqual('filter');
+			await wrapper.setProps({
+				showFilters: true,
+			});
+			expect(component.extraFiltersBtnIcon).toEqual('filter-off');
+		});
+	});
+});

package/src/components/MainFilter/index.ts

@@ -0,0 +1,3 @@
+import MainFilter from './MainFilter.vue';
+
+export default MainFilter;

package/src/components/ManagersList/ManagersList.stories.js

@@ -0,0 +1,10 @@
+import ManagersList from './ManagersList';
+
+export default {
+    title: 'Display/ManagersList',
+    component: ManagersList,
+};
+
+export const Primary = () => ({
+    template: '<farm-managers-list managersString="nome1,nome2,nome3" />',
+});

package/src/components/ManagersList/ManagersList.vue

@@ -0,0 +1,29 @@
+<template>
+	<ul>
+		<li v-for="(m, index) in managers" :key="index">
+			{{ m }}
+		</li>
+	</ul>
+</template>
+<script lang="ts">
+
+export default {
+	name: 'farm-managers-list',
+	props: {
+		managersString: {
+			type: String,
+			required: true,
+		},
+	},
+	computed: {
+		managers() {
+			return !this.managersString ? [] : this.managersString.split(',');
+		},
+	},
+};
+</script>
+<style scoped lang="scss">
+ul {
+	list-style-type: none;
+}
+</style>

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

@@ -0,0 +1,27 @@
+import { shallowMount } from '@vue/test-utils';
+import ManagersList from '../ManagersList';
+
+describe('ManagersList component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ManagersList, {
+			propsData: {
+				managersString: 'a,b,c',
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('Computed properties', () => {
+		it('Should have managers array', () => {
+			expect(component.managers).toBeInstanceOf(Array);
+			expect(component.managers.length).toEqual(3);
+		});
+	});
+});

package/src/components/ManagersList/index.ts

@@ -0,0 +1,3 @@
+import ManagersList from './ManagersList.vue';
+
+export default ManagersList;

package/src/components/Modal/Modal.scss

@@ -0,0 +1,110 @@
+@import '../../configurations/mixins';
+
+.farm-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    transition: .2s cubic-bezier(0.25, 0.8, 0.25, 1), z-index 1ms;
+
+    &--overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        opacity: 0.36;
+        background-color: var(--farm-gray-darken);
+        z-index: 101;
+    }
+
+    &--container {
+        background-color: white;
+        border-radius: 4px;
+        max-height: calc(100vh - 48px);
+        position: relative;
+        overflow: hidden;
+        z-index: 102;
+        @include addShadow;
+    }
+
+    &--content {
+        max-height: calc(100vh - 48px);
+        width: 100%;
+        padding: 0;
+        >div {
+            overflow-y: auto;
+            padding: 0 16px;
+        }
+    }
+
+    &--header {
+        position: absolute;
+        top: 0;
+        background: white;
+        width: 100%;
+    }
+
+    &--footer {
+        position: absolute;
+        bottom: 0;
+        background: white;
+        width: 100%;
+    }
+
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity .25s
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0
+}
+
+@include upToSm {
+    .farm-modal {
+        &--container {
+            width: calc(100vw - 32px);
+            max-width: calc(100vw - 32px);
+        }
+    }
+}
+
+@include fromSm {
+    .farm-modal {
+        &--size-default {
+            .farm-modal--container {
+                width: 960px;
+                max-width: 960px;
+            }
+        }
+
+        &--size-md {
+            .farm-modal--container {
+                width: 568px;
+                max-width: 568px;
+            }
+        }
+
+        &--size-sm {
+            .farm-modal--container {
+                width: 448px;
+                max-width: 448px;
+            }
+        }
+
+        &--size-xs {
+            .farm-modal--container {
+                width: 360px;
+                max-width: 360px;
+            }
+        }
+    }
+}

package/src/components/Modal/Modal.stories.js

@@ -0,0 +1,299 @@
+import Modal from './Modal.vue';
+
+export default {
+	title: 'Display/Modal',
+	component: Modal,
+	parameters: {
+		docs: {
+			description: {
+				component: `Modal<br />
+				selector: <em>farm-modal</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value">
+		<template v-slot:content>
+			<div v-html="text" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const SmallContent = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	template: `<div>
+	<farm-btn @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value">
+		<template v-slot:content>
+			small content
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const HeaderAndBottomFromDS = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" :offsetTop="48" :offsetBottom="68">
+		<template v-slot:header>
+			<farm-dialog-header title="Título" @onClose="() => value = false" />
+		</template>
+		<template v-slot:content>
+		<div v-html="text" />
+		</template>
+		
+		<template v-slot:footer>
+			<farm-dialog-footer @onConfirm="() => value = false" @onClose="() => value = false" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const SizeMD = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" size="md">
+		<template v-slot:content>
+			<div v-html="text" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const SizeSmall = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" size="sm">
+		<template v-slot:content>
+			<div v-html="text" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const SizeXs = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" size="xs">
+		<template v-slot:content>
+			<div v-html="text" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const HeaderAndBottom = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" :offsetTop="24" :offsetBottom="68">
+		<template v-slot:header>
+			Header
+		</template>
+		<template v-slot:content>
+		<div v-html="text" />
+		</template>
+		
+		<template v-slot:footer>
+			Footer
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const HorizontalScroll = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	template: `<div>
+	<farm-btn @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" size="md" :offsetBottom="68">
+		<template v-slot:content>
+			<div style="width: 800px;">
+			horizontal scroll horizontal scroll horizontal scroll horizontal scroll horizontal scroll horizontal scroll horizontal scroll horizontal scroll horizontal scroll
+			</div>
+		</template>
+		<template v-slot:footer>
+			<farm-dialog-footer @onConfirm="() => value = false" @onClose="() => value = false" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const CustomHeader = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" :offsetTop="24" :offsetBottom="68">
+		<template v-slot:header>
+		<farm-dialog-header>
+			Template Slot <farm-chip :dense="true">chip</farm-chip>
+		</farm-dialog-header>
+		</template>
+		<template v-slot:content>
+		<div v-html="text" />
+		</template>
+		
+		<template v-slot:footer>
+			<farm-dialog-footer @onConfirm="() => value = false" @onClose="() => value = false" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const Persistent = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" :offsetTop="48" :offsetBottom="64" :persistent="true">
+		<template v-slot:header>
+			<farm-dialog-header title="Título" @onClose="() => value = false" />
+		</template>
+		<template v-slot:content>
+		<br />persistent modal<br />
+		</template>
+		
+		<template v-slot:footer>
+			<farm-dialog-footer @onConfirm="() => value = false" @onClose="() => value = false" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+const text = `inicio!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste 1!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste 2!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste 1!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste 2!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste 3!`;