@farm-investimentos/front-mfe-components 14.2.0 → 14.2.2

package/src/components/Tabs/Tabs.stories.js

@@ -1,9 +1,9 @@
 import Tabs from './Tabs.vue';
 
 export default {
-    title: 'Display/Tabs',
-    component: Tabs,
-    parameters: {
+	title: 'Display/Tabs',
+	component: Tabs,
+	parameters: {
 		docs: {
 			description: {
 				component: `Tabs<br />
@@ -17,5 +17,52 @@ export default {
 };
 
 export const Primary = () => ({
-    template: '<farm-tabs />',
+	data() {
+		return {
+			v: 'Seleção',
+		};
+	},
+	methods: {
+		updateValue(value) {
+			this.v = value.name;
+		},
+	},
+	template: `<div>
+				<farm-tabs @update="updateValue" /> 
+				<p class="mt-2">selected: {{v}}</p>
+			</div>`,
+});
+
+export const WithoutCounter = () => ({
+	data() {
+		return {
+			v: 'Seleção',
+		};
+	},
+	methods: {
+		updateValue(value) {
+			this.v = value.name;
+		},
+	},
+	template: `<div>
+				<farm-tabs :showCounter="false" @update="updateValue" /> 
+				<p class="mt-2">selected: {{v}}</p>
+			</div>`,
+});
+
+export const Disabled = () => ({
+	data() {
+		return {
+			v: 'Seleção',
+		};
+	},
+	methods: {
+		updateValue(value) {
+			this.v = value.name;
+		},
+	},
+	template: `<div>
+				<farm-tabs :showCounter="false" :allow-user-change="false" @update="updateValue" /> 
+				<p class="mt-2">selected: {{v}}</p>
+			</div>`,
 });

package/src/components/Tabs/Tabs.vue

@@ -1,27 +1,40 @@
 <template>
-	<v-tabs color="secondary" v-model="selected">
-		<v-tab
+	<div class="tabs" :class="{ 'tabs--disabled': !allowUserChange }">
+		<div
 			v-for="(tab, index) in tabs"
+			class="tabs__tab"
 			:key="index"
-			:class="{ hideCounter: !showCounter }"
-			@change="changeTab(tab, index)"
-			:disabled="!allowUserChange"
+			:class="{ hideCounter: !showCounter, 'tabs__tab--selected': isSelected(index) }"
+			@click="changeTab(tab, index)"
 		>
 			<div
 				v-if="showCounter"
+				class="mr-2 rounded-circle d-inline-flex align-center justify-center white--text"
 				:class="{ 'is-selected': isSelected(index) }"
-				class="pl-3 pr-3 pt-2 pb-2 mr-2 rounded-circle d-inline-block white--text"
 			>
-				<span>{{ index + 1 }}</span>
+				<farm-subtitle
+					color="white"
+					tag="span"
+					:type="2"
+					:color-variation="isSelected(index) ? 'base' : 'darken'"
+				>
+					{{ index + 1 }}
+				</farm-subtitle>
 			</div>
-			<span class="black--text text-capitalize">{{ tab.name }}</span>
-		</v-tab>
-	</v-tabs>
+			<farm-subtitle
+				tag="span"
+				:type="2"
+				:color="isSelected(index) ? 'primary' : 'gray'"
+				:color-variation="isSelected(index) ? 'base' : 'darken'"
+			>
+				{{ tab.name }}
+			</farm-subtitle>
+		</div>
+	</div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { VTabs, VTab } from 'vuetify/lib/components/VTabs';
 export default Vue.extend({
 	name: 'farm-tabs',
 	data: () => ({
@@ -59,13 +72,18 @@ export default Vue.extend({
 			return index === this.selected;
 		},
 		changeTab(_, index) {
+			if (!this.allowUserChange) return;
+			this.selected = index;
 			this.$emit('update', this.tabs[index]);
 		},
 		next() {
+			if (this.tabs.length - 1 > this.selected + 1)
+				return this.$emit('update', this.tabs[this.selected]);
 			this.selected = this.selected + 1;
 			this.$emit('update', this.tabs[this.selected]);
 		},
 		previous() {
+			if (this.selected - 1 < 0) return this.$emit('update', this.tabs[this.selected]);
 			this.selected = this.selected - 1;
 			this.$emit('update', this.tabs[this.selected]);
 		},
@@ -83,20 +101,8 @@ export default Vue.extend({
 	created() {
 		this.selected = this.initialSelect;
 	},
-	components: {
-		VTabs,
-		VTab,
-	},
 });
 </script>
 <style scoped lang="scss">
-div.rounded-circle {
-	background-color: var(--v-gray-lighten3);
-	&.is-selected {
-		background-color: var(--v-secondary-base);
-	}
-}
-.v-tab--active.v-tab--disabled {
-	opacity: 1;
-}
+@import './Tabs.scss';
 </style>

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

@@ -2,58 +2,58 @@ import { shallowMount } from '@vue/test-utils';
 import Tabs from '../Tabs';
 
 describe('Tabs component', () => {
-    let wrapper;
-
-    beforeEach(() => {
-        wrapper = shallowMount(Tabs);
-    });
-
-    test('Created hook', () => {
-        expect(wrapper).toBeDefined();
-    });
-
-    describe('methods', () => {
-        it('Should check isSelected', () => {
-            expect(wrapper.vm.isSelected(1)).toBeFalsy();
-        });
-
-        it('Should emit event when tab is changed', () => {
-            wrapper.vm.changeTab();
-            expect(wrapper.emitted().update).toBeTruthy();
-        });
-
-        it('Should emit event when next is triggered', () => {
-            wrapper.vm.next();
-            expect(wrapper.emitted().update).toBeTruthy();
-        });
-
-        it('Should emit event when previous is triggered', () => {
-            wrapper.vm.previous();
-            expect(wrapper.emitted().update).toBeTruthy();
-        });
-
-        it('Should emit event when toIndex is triggered', () => {
-            wrapper.vm.toIndex(1);
-            expect(wrapper.vm.selected).toEqual(1);
-            expect(wrapper.emitted().update).toBeTruthy();
-        });
-
-        it('Should updateTab in parent and route', () => {
-            const _component = {
-                currentTab: '',
-                $router: {
-                    history: {
-                        current: {
-                            path: 'some',
-                        },
-                    },
-                    push: () => {},
-                },
-            };
-            const spyObj = jest.spyOn(_component.$router, 'push');
-            wrapper.vm.updateTabRouting(_component, { path: 'desembolso' }, 'nextRoutePrefix');
-            expect(_component.currentTab).toEqual('desembolso');
-            expect(spyObj).toHaveBeenCalled();
-        });
-    });
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Tabs);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('methods', () => {
+		it('Should check isSelected', () => {
+			expect(wrapper.vm.isSelected(1)).toBeFalsy();
+		});
+
+		it('Should emit event when tab is changed', () => {
+			wrapper.vm.changeTab();
+			expect(wrapper.emitted().update).toBeTruthy();
+		});
+
+		it('Should emit event when next is triggeredx', () => {
+			wrapper.vm.next();
+			expect(wrapper.emitted().update).toBeTruthy();
+		});
+
+		it('Should emit event when previous is triggered', () => {
+			wrapper.vm.previous();
+			expect(wrapper.emitted().update).toBeTruthy();
+		});
+
+		it('Should emit event when toIndex is triggered', () => {
+			wrapper.vm.toIndex(1);
+			expect(wrapper.vm.selected).toEqual(1);
+			expect(wrapper.emitted().update).toBeTruthy();
+		});
+
+		it('Should updateTab in parent and route', () => {
+			const _component = {
+				currentTab: '',
+				$router: {
+					history: {
+						current: {
+							path: 'some',
+						},
+					},
+					push: () => {},
+				},
+			};
+			const spyObj = jest.spyOn(_component.$router, 'push');
+			wrapper.vm.updateTabRouting(_component, { path: 'desembolso' }, 'nextRoutePrefix');
+			expect(_component.currentTab).toEqual('desembolso');
+			expect(spyObj).toHaveBeenCalled();
+		});
+	});
 });

package/src/components/Tabs/index.ts

@@ -1,3 +1,4 @@
 import Tabs from './Tabs.vue';
 
+export { Tabs };
 export default Tabs;

package/src/main.ts

@@ -6,7 +6,6 @@ import MainFilter from './components/MainFilter';
 import Loader from './components/Loader';
 import FilePicker from './components/FilePicker';
 import MultipleFilePicker from './components/MultipleFilePicker';
-import Tabs from './components/Tabs';
 import DialogHeader from './components/DialogHeader';
 import DialogFooter from './components/DialogFooter';
 import RangeDatePicker from './components/RangeDatePicker';
@@ -32,7 +31,6 @@ export {
 	Loader,
 	FilePicker,
 	MultipleFilePicker,
-	Tabs,
 	DialogHeader,
 	DialogFooter,
 	RangeDatePicker,
@@ -85,6 +83,7 @@ export * from './components/RadioGroup';
 export * from './components/Select';
 export * from './components/Stepper';
 export * from './components/Switcher';
+export * from './components/Tabs';
 export * from './components/TextArea';
 export * from './components/TextField';
 export * from './components/TextFieldV2';

package/src/scss/Sticky-table.scss

@@ -2,7 +2,7 @@ $defaultLefts: 0, 4rem, 4rem;
 @mixin stickytable($selector, $columns: 1, $lefts: $defaultLefts) {
 	#{$selector} {
 		tbody {
-			font-size: 0.75rem;
+			font-size: 12px;
 		}
 		tbody tr:nth-of-type(odd) td {
 			background-color: var(--farm-neutral-lighten);
@@ -30,6 +30,11 @@ $defaultLefts: 0, 4rem, 4rem;
 			}
 		}
 
+		&.v-data-table > .v-data-table__wrapper > table > tbody > tr > td:first-child,
+		&.v-data-table > .v-data-table__wrapper > table > thead > tr > th:first-child {
+			padding-left: 24px;
+		}
+
 		@if $columns > 0 {
 			@for $i from 1 through $columns {
 				tr td:nth-child(#{$i}),
@@ -48,6 +53,10 @@ $defaultLefts: 0, 4rem, 4rem;
 			}
 		}
 
+		tr td:first-child, tr th:first-child  {
+			padding-left: 24px;
+		}
+
 		.v-chip {
 			font-size: 0.75rem;
 			padding: 0 1.5rem;
@@ -81,6 +90,7 @@ $defaultLefts: 0, 4rem, 4rem;
 
 		th[role='columnheader']:has(> .v-data-table__checkbox) {
 			max-width: 71px !important;
+			padding-left: 24px;
 		}
 
 		.v-data-table-header tr th {
@@ -95,8 +105,15 @@ $defaultLefts: 0, 4rem, 4rem;
 		}
 
 		.v-data-table__checkbox .mdi {
-			margin-left: 18px;
-			font-size: 24px;
+			margin-left: 0;
+			font-size: 20px;
+			margin-left: -2px;
+		}
+
+		.v-input--selection-controls__input {
+			width: 20px;
+			height: 20px;
+			margin-right: 0 !important;
 		}
 	}
 }