@farm-investimentos/front-mfe-components-vue3 1.2.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farm-investimentos/front-mfe-components-vue3",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "private": false,
   "repository": {
     "type": "git",
@@ -42,8 +42,8 @@
     "webpack": "5.94.0"
   },
   "devDependencies": {
-    "@babel/core": "7.17.9",
-    "@babel/generator": "7.17.9",
+    "@babel/core": "^7.22.0",
+    "@babel/generator": "^7.22.0",
     "@farm-investimentos/front-mfe-libs-ts": "3.0.5",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-interactions": "^8.2.9",

package/src/components/DatePicker/DatePicker.scss

@@ -15,5 +15,21 @@
 	width: 100%;
 }
 
+.dp__main dp__theme_light {
+	width: 200px;
+}
+
+.picker__actions {
+	padding: 24px;
+	border-top: 1px solid var(--farm-stroke-base);
+	margin-bottom: 16px;
+	margin-top: 24px;
+}
+
+:deep(.dp__month_year_row){
+	margin: 24px 0;
+	margin-top: 20px
+}
+
 @import './customDatePicker.scss';
 

package/src/components/DatePicker/DatePicker.vue

@@ -24,19 +24,20 @@
 		:fixedCentered="position === 'fixed-centered'"
 	>
 		<VueDatePicker
-			calendar-class-name="dp-custom-calendar"
-			inline
-			auto-apply
-			model-type="yyyy-MM-dd"
-			locale="pt-BR"
 			v-model="dateField"
-			:min-date="minDate"
-			:max-date="maxDate"
+			calendar-class-name="dp-custom-calendar"
+			:day-names="['S', 'T', 'Q', 'Q', 'S', 'S', 'D']"
 			:allowed-dates="allowedDates"
 			:disabled-dates="disabledDates"
-			:day-names="['S', 'T', 'Q', 'Q', 'S', 'S', 'D']"
 			:start-date="internalPickerDate"
+			:min-date="minDate"
+			:max-date="maxDate"
 			:multi-dates="multiple"
+			month-name-format="long"
+			inline
+			auto-apply
+			locale="pt"
+			model-type="yyyy-MM-dd"
 		/>
 		<div class="picker__actions">
 			<farm-btn

package/src/components/DatePicker/customDatePicker.scss

@@ -16,7 +16,7 @@
     }
 
     :deep(.dp__cell_inner) {
-        font-size: 12px;
+        font-size: 14px;
         font-weight: 500;
         font-family: 'Manrope', sans-serif !important;
         color: var(--farm-neutral-darken);
@@ -82,9 +82,11 @@
 }
 
 .picker__actions {
-    padding: 16px 8px 0;
+    padding: 24px;
     border-top: 1px solid var(--farm-stroke-base);
     margin-bottom: 16px;
-    margin-left: -4px;
-    margin-right: -4px;
+}
+
+.dp__menu_inner {
+    padding: 0 !important;
 }

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -63,6 +63,7 @@
 import { formatDatePickerHeader } from '../../helpers';
 import { defaultFormat as dateDefaultFormatter } from '../../helpers/date';
 
+
 /**
  * Componente de input com datepicker para range de data
  */

package/src/components/Tooltip/Tooltip.scss

@@ -1,41 +1,214 @@
-@import '../../configurations/theme-colors';
-@import '../../configurations/variables';
+/* 
+ * CSS simplificado para Tooltip - Abordagem simples e direta
+ * SEMPRE usa position: fixed via JavaScript
+ */
 
+/* Container principal */
+.tooltip-container {
+	display: inline-block;
+	position: relative;
+}
+
+/* Activator */
+.tooltip-activator {
+	display: inline-block;
+}
+
+/* 
+ * COMPATIBILIDADE: Classes antigas mantidas para outros componentes
+ * que fazem @extend .farm-tooltip__popup
+ */
 .farm-tooltip {
 	display: inline-block;
 	position: relative;
+}
 
-	&__activator {
-		display: inline-block;
-	}
+.farm-tooltip__activator {
+	display: inline-block;
 }
 
 .farm-tooltip__popup {
-	background-color: rgba(themeColor('primary'), 0.95);
-	@each $color in $theme-colors-list {
-		&.farm-tooltip--#{$color} {
-			background-color: rgba(themeColor($color), 0.95);
-		}
+	/* Estilos base mantidos para compatibilidade */
+	background-color: #333333;
+	color: #f5f5f5;
+	border-radius: 5px;
+	font-family: 'Manrope', sans-serif;
+	font-size: 12px;
+	font-weight: 500;
+	padding: 16px;
+	position: fixed;
+	z-index: 10001;
+	transform: translateZ(0);
+	pointer-events: auto;
+
+	/* Estados */
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.3s linear, visibility 0.3s linear;
+
+	/* Variantes */
+	&--visible {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	&--fluid {
+		width: auto;
+		max-width: 300px;
+	}
+
+	/* Header */
+	.farm-tooltip__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 8px;
+	}
+
+	.farm-tooltip__title {
+		font-weight: 600;
+		font-size: 13px;
+		margin-right: 16px;
+	}
+
+	.farm-tooltip__content {
+		font-weight: 500;
+	}
+
+	.farm-tooltip__close {
+		width: 16px;
+		height: 16px;
+		line-height: 16px;
+		text-align: center;
+		cursor: pointer;
+		font-size: 16px;
+		color: #f5f5f5;
 	}
 }
 
-.farm-tooltip__popup {
-	visibility: hidden;
-	opacity: 0;
-	transition: visibility 0.3s linear, opacity 0.3s linear;
-	position: absolute;
-	width: 160px;
-	contain: content;
-	color: white;
+/* Estilos globais para tooltip criado dinamicamente */
+.tooltip-popup {
+	background-color: #333333;
+	color: #f5f5f5;
 	border-radius: 5px;
-	font-family: 'Manrope', sans-serif !important;
+	font-family: 'Manrope', sans-serif;
 	font-size: 12px;
-	font-weight: 500px;
-	padding: 8px 12px;
-	display: block;
+	font-weight: 500;
+	padding: 16px;
+	position: fixed;
+	z-index: 10001;
+	transform: translateZ(0);
+	pointer-events: auto;
+
+	/* Estados */
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.3s linear, visibility 0.3s linear;
 
 	&--visible {
 		opacity: 1;
 		visibility: visible;
 	}
+
+	/* Variantes */
+	&--dark {
+		background-color: #333333;
+		color: #f5f5f5;
+
+		.tooltip-arrow {
+			border-color: #333333 transparent transparent transparent !important;
+		}
+
+		&.tooltip-popup--bottom-left,
+		&.tooltip-popup--bottom-center,
+		&.tooltip-popup--bottom-right {
+			.tooltip-arrow {
+				border-color: transparent transparent #333333 transparent !important;
+			}
+		}
+	}
+
+	&--light {
+		background-color: #ffffff;
+		color: #333333;
+		border: 1px solid #e0e0e0;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+		.tooltip-arrow {
+			border-color: #ffffff transparent transparent transparent !important;
+		}
+
+		&.tooltip-popup--bottom-left,
+		&.tooltip-popup--bottom-center,
+		&.tooltip-popup--bottom-right {
+			.tooltip-arrow {
+				border-color: transparent transparent #ffffff transparent !important;
+			}
+		}
+	}
+
+	/* Tamanhos */
+	&--sm {
+		font-size: 11px;
+		padding: 12px;
+	}
+
+	&--md {
+		font-size: 12px;
+		padding: 16px;
+	}
+
+	&--lg {
+		font-size: 14px;
+		padding: 20px;
+	}
+
+	/* Header */
+	.tooltip-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 8px;
+	}
+
+	.tooltip-title {
+		font-weight: 600;
+		font-size: 13px;
+		margin-right: 16px;
+	}
+
+	.tooltip-content {
+		font-weight: 500;
+	}
+
+	.tooltip-close {
+		width: 16px;
+		height: 16px;
+		line-height: 16px;
+		text-align: center;
+		cursor: pointer;
+		font-size: 16px;
+		color: inherit;
+		transition: opacity 0.2s ease;
+
+		&:hover {
+			opacity: 0.7;
+		}
+	}
+
+	.tooltip-arrow {
+		position: absolute;
+		width: 0;
+		height: 0;
+		border-style: solid;
+		z-index: inherit;
+		pointer-events: none;
+	}
+
+	/* Posicionamento específico */
+	&--has-title {
+		.tooltip-content {
+			margin-top: 4px;
+		}
+	}
 }