@farm-investimentos/front-mfe-components 15.14.10 → 15.14.12

package/package.json

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

package/src/components/Tabs/Tabs.scss

@@ -1,11 +1,71 @@
 @import '../../configurations/theme-colors';
 
+.farm-tabs-wrapper {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+}
+
+.farm-tabs-nav {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	z-index: 1;
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	border: none;
+	background-color: white;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.3s ease;
+	padding: 0;
+
+	.farm-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&:hover {
+		background-color: var(--farm-primary-base);
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+
+		.farm-icon {
+			color: white !important;
+		}
+	}
+
+	&--left {
+		left: 8px;
+	}
+
+	&--right {
+		right: 8px;
+	}
+}
+
 .farm-tabs {
 	width: 100%;
+	overflow-x: auto;
+	overflow-y: hidden;
+	scroll-behavior: smooth;
+	
+	scrollbar-width: none; // Firefox
+	-ms-overflow-style: none; // IE/Edge
+	
+	&::-webkit-scrollbar {
+		display: none; // Chrome/Safari/Opera
+	}
 }
 .tabs {
 	display: flex;
 	margin-bottom: -1px;
+	min-width: min-content;
 
 	&__tab {
 		border-bottom: 1px solid var(--farm-primary-lighten);
@@ -14,6 +74,7 @@
 		padding: 18px 24px 14px;
 		height: 54px;
 		transition: all 0.5s ease;
+		white-space: nowrap;
 		&:hover {
 			background-color: transparentize(themeColor('primary', 'base'), 0.86);
 

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

@@ -66,3 +66,35 @@ export const Disabled = () => ({
 				<p class="mt-2">selected: {{v}}</p>
 			</div>`,
 });
+
+
+export const TabScroll = () => ({
+	data() {
+		return {
+			v: 'TESTE NOME GRANDE',
+			tabs: [
+				{name: 'TESTE NOME GRANDE', counter: 10, path: 'selecao'},
+				{name: 'Opções', counter: 5, path: 'opcoes'},
+				{name: 'Configurações', counter: 2, path: 'configuracoes'},
+				{name: 'Detalhes', counter: 8, path: 'detalhes'},
+				{name: 'Avançado', counter: 1, path: 'avancado'},
+				{name: 'Extras', counter: 0, path: 'extras'},
+				{name: 'Personalizado', counter: 4, path: 'personalizado'},
+				{name: 'Final', counter: 3, path: 'final'},
+				{name: 'Resumo', counter: 6, path: 'resumo'},
+			],
+		};
+	},
+	methods: {
+		updateValue(value) {
+			this.v = value.name;
+		},
+	},
+	template: `<div>
+				<farm-tabs :tabs="tabs" :showCounter="true" @update="updateValue" /> 
+				<div class="mt-4 pa-4" style="background-color: #f5f5f5; border-radius: 8px;">
+					<h3>Conteúdo da Tab: {{v}}</h3>
+					<p class="mt-2">Este é o conteúdo da tab selecionada.</p>
+				</div>
+			</div>`,
+});

package/src/components/Tabs/Tabs.vue

@@ -1,44 +1,66 @@
 <template>
-	<div class="farm-tabs">
-		<div class="tabs" :class="{ 'tabs--disabled': !allowUserChange }">
-			<div
-				v-for="(tab, index) in tabs"
-				class="tabs__tab"
-				:key="index"
-				:class="{ hideCounter: !showCounter, 'tabs__tab--selected': isSelected(index) }"
-				@click="changeTab(tab, index)"
-			>
+	<div class="farm-tabs-wrapper">
+		<button 
+			class="farm-tabs-nav farm-tabs-nav--left" 
+			@click="scrollLeft"
+			@mouseenter="hoverLeft = true"
+			@mouseleave="hoverLeft = false"
+			v-show="canScrollLeft || hoverLeft"
+		>
+			<farm-icon color="primary" size="24px">chevron-left</farm-icon>
+		</button>
+		
+		<div class="farm-tabs" ref="tabsContainer">
+			<div class="tabs" :class="{ 'tabs--disabled': !allowUserChange }">
 				<div
-					v-if="showCounter"
-					class="
-						mr-2
-						rounded-circle
-						d-inline-flex
-						align-center
-						justify-center
-						white--text
-					"
-					:class="{ 'is-selected': isSelected(index) }"
+					v-for="(tab, index) in tabs"
+					class="tabs__tab"
+					:key="index"
+					: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) }"
+					>
+						<farm-subtitle
+							color="white"
+							tag="span"
+							:type="2"
+							:color-variation="isSelected(index) ? 'base' : 'darken'"
+						>
+							{{ index + 1 }}
+						</farm-subtitle>
+					</div>
 					<farm-subtitle
-						color="white"
 						tag="span"
 						:type="2"
+						:color="isSelected(index) ? 'primary' : 'gray'"
 						:color-variation="isSelected(index) ? 'base' : 'darken'"
 					>
-						{{ index + 1 }}
+						{{ forceUppercase ? tab.name.toUpperCase() : tab.name }}
 					</farm-subtitle>
 				</div>
-				<farm-subtitle
-					tag="span"
-					:type="2"
-					:color="isSelected(index) ? 'primary' : 'gray'"
-					:color-variation="isSelected(index) ? 'base' : 'darken'"
-				>
-					{{ forceUppercase ? tab.name.toUpperCase() : tab.name }}
-				</farm-subtitle>
 			</div>
 		</div>
+		
+		<button 
+			class="farm-tabs-nav farm-tabs-nav--right" 
+			@click="scrollRight"
+			@mouseenter="hoverRight = true"
+			@mouseleave="hoverRight = false"
+			v-show="canScrollRight || hoverRight"
+		>
+			<farm-icon color="primary" size="24px">chevron-right</farm-icon>
+		</button>
 	</div>
 </template>
 
@@ -50,6 +72,10 @@ export default defineComponent({
 	data() {
 		return {
 			selected: 0,
+			canScrollLeft: false,
+			canScrollRight: false,
+			hoverLeft: false,
+			hoverRight: false,
 		};
 	},
 	props: {
@@ -98,6 +124,29 @@ export default defineComponent({
 			this.selected = index;
 			this.$emit('update', this.tabs[index]);
 		},
+		scrollLeft() {
+			const container = this.$refs.tabsContainer as HTMLElement;
+			if (container) {
+				container.scrollBy({ left: -200, behavior: 'smooth' });
+				setTimeout(() => this.updateScrollButtons(), 100);
+			}
+		},
+		scrollRight() {
+			const container = this.$refs.tabsContainer as HTMLElement;
+			if (container) {
+				container.scrollBy({ left: 200, behavior: 'smooth' });
+				setTimeout(() => this.updateScrollButtons(), 100);
+			}
+		},
+		updateScrollButtons() {
+			const container = this.$refs.tabsContainer as HTMLElement;
+			if (container) {
+				const { scrollLeft, scrollWidth, clientWidth } = container;
+				
+				this.canScrollLeft = scrollLeft > 0;
+				this.canScrollRight = scrollLeft < scrollWidth - clientWidth - 1;
+			}
+		},
 		next() {
 			if (this.tabs.length - 1 > this.selected + 1)
 				return this.$emit('update', this.tabs[this.selected]);
@@ -123,6 +172,23 @@ export default defineComponent({
 	created() {
 		this.selected = this.initialSelect;
 	},
+	mounted() {
+		this.updateScrollButtons();
+		window.addEventListener('resize', this.updateScrollButtons);
+		
+		const container = this.$refs.tabsContainer as HTMLElement;
+		if (container) {
+			container.addEventListener('scroll', this.updateScrollButtons);
+		}
+	},
+	beforeUnmount() {
+		window.removeEventListener('resize', this.updateScrollButtons);
+		
+		const container = this.$refs.tabsContainer as HTMLElement;
+		if (container) {
+			container.removeEventListener('scroll', this.updateScrollButtons);
+		}
+	},
 });
 </script>
 <style scoped lang="scss">