@farm-investimentos/front-mfe-components-vue3 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.3.2",
+	"version": "0.3.4",
 	"private": false,
 	"repository": {
 		"type": "git",

package/src/components/ContextMenu/ContextMenu.vue

@@ -1,6 +1,12 @@
 <template>
-	<div class="farm-contextmenu" ref="parent">
-		<span ref="activator" @click="click">
+	<div
+		class="farm-contextmenu"
+		ref="parent"
+	>
+		<span
+			ref="activator"
+			@click="click"
+		>
 			<slot name="activator"></slot>
 		</span>
 
@@ -78,7 +84,7 @@ export default {
 			minWidth: 0,
 			top: 0,
 			zIndex: 1,
-			maxHeight: parseInt((maxHeight as any).modelValue as string) + 'px',
+			maxHeight: parseInt(maxHeight.value as any) + 'px',
 		} as any);
 
 		const inputValue = ref(props.modelValue);

package/src/components/DatePicker/DatePicker.scss

@@ -1,3 +1,4 @@
+
 .datepicker :deep(.v-btn--active) {
 	background: var(--farm-primary-base);
 }

package/src/components/DatePicker/customDatePicker.scss

@@ -1,18 +1,24 @@
 .dp__main {
-    font-family: inherit;
+    font-family: 'Manrope', sans-serif !important;
     justify-content: center;
 
     :deep(.dp__calendar_row,) {
         width: calc( 35px * 7);
     }
 
+    :deep(.dp__month_year_row){
+        font-family: 'Manrope', sans-serif !important;
+    }
+
     :deep(.dp__calendar_header) {
         width: calc( 35px * 7);
+        
     }
 
     :deep(.dp__cell_inner) {
         font-size: 12px;
         font-weight: 500;
+        font-family: 'Manrope', sans-serif !important;
         color: var(--farm-neutral-darken);
         padding: 0;
         width: 35px;
@@ -60,6 +66,7 @@
     :deep(.dp__calendar_header) {
         color: var(--farm-neutral-darken);
         font-size: 16px;
+        font-family: 'Manrope', sans-serif !important;
         font-weight: 700;
         margin-top: 16px;
     }

package/src/components/SelectAutoComplete/SelectAutoComplete.stories.js

@@ -14,6 +14,23 @@ export const Primary = () => ({
 				{ value: 1, text: 'value 1' },
 				{ value: 2, text: 'value 2' },
 				{ value: 3, text: 'value 3' },
+				{ value: 4, text: 'value 4' },
+				{ value: 5, text: 'value 5' },
+				{ value: 6, text: 'value 6' },
+				{ value: 7, text: 'value 7' },
+				{ value: 8, text: 'value 8' },
+				{ value: 9, text: 'value 9' },
+				{ value: 10, text: 'value 10' },
+				{ value: 11, text: 'value 11' },
+				{ value: 12, text: 'value 12' },
+				{ value: 13, text: 'value 13' },
+				{ value: 14, text: 'value 14' },
+				{ value: 15, text: 'value 15' },
+				{ value: 16, text: 'value 16' },
+				{ value: 17, text: 'value 17' },
+				{ value: 18, text: 'value 18' },
+				{ value: 19, text: 'value 19' },
+				{ value: 20, text: 'value 20' },
 			],
 		};
 	},

package/src/examples/Colors.stories.js

@@ -76,7 +76,7 @@ export const CssVariables = () => ({
 			bwThemeColorsKeys: Object.keys(bwThemeColors),
 			bwThemeColors: { ...bwThemeColors },
 			backgroundThemeColorsKeys: Object.keys(backgroundThemeColors),
-			backgroundThemeColors: { ...backgroundThemeColors },
+			backgroundThemeColors: { ...backgroundThemeColors },	
 		};
 	},
 	template: `<div class="palette-container">
@@ -84,36 +84,36 @@ export const CssVariables = () => ({
             v-for="key in keys"
             :key="key"
         >
-		<farm-heading :type="5">{{ key }}</farm-heading>
+			<farm-heading :type="5">{{ key }}</farm-heading>
 			<span :style="{ backgroundColor: baseThemeColors[key] }">Base <span>--farm-{{ key }}-base</span></span>
 			<span :style="{ backgroundColor: variationThemeColors[key + '-lighten'] }">Lighten<span>--farm-{{ key }}-lighten</span></span>
 			<span :style="{ backgroundColor: variationThemeColors[key + '-darken'], color: 'white' }">Darken: <span>--farm-{{ key }}-darken</span></span>
 		</div>
 
 		<div>
-		<farm-heading :type="5">Text</farm-heading>
-			<span :style="{ color: textThemeColors['text-primary'] }">Primary <span>--farm-text-primary</span></span></span>
+			<farm-heading :type="5">Text</farm-heading>
+			<span :style="{ color: textThemeColors['text-primary'] }">Primary <span>--farm-text-primary</span></span>
 			<span :style="{ color: textThemeColors['text-secondary'] }">Secondary <span>--farm-text-secondary</span></span>
 			<span :style="{ color: textThemeColors['text-disabled'] }">Disabled <span>--farm-text-disabled</span></span>
-		</div>
+        </div>
 
 		<div>
 			<farm-heading :type="5">Stroke</farm-heading>
-			<span :style="{ color: strokeThemeColors['stroke-base'] }">Base <span>--farm-stroke-base</span></span></span>
+			<span :style="{ color: strokeThemeColors['stroke-base'] }">Base <span>--farm-stroke-base</span></span>
 			<span :style="{ color: strokeThemeColors['stroke-disabled'] }">Disabled <span>--farm-stroke-disabled</span></span>
 			<span :style="{ color: strokeThemeColors['stroke-divider'] }">Divider <span>--farm-stroke-divider</span></span>
-        </div>
-
+		</div>
+		
 		<div>
 			<farm-heading :type="5">Black & White</farm-heading>
-			<span v-for="bw in bwThemeColorsKeys" :key="'bw_var_' + bw" :style="{ color: bw !== 'white' ? bwThemeColors[bw] : 'black' }">
+			<span v-for="bw in bwThemeColorsKeys" :key="'bw_var1_' + bw" :style="{ color: bw !== 'white' ? bwThemeColors[bw] : 'black' }">
 				{{ bw }} <span>--farm-bw-{{ bw }}</span>
 			</span>
 		</div>
 
 		<div>
 			<farm-heading :type="5">Background</farm-heading>
-			<span v-for="bw in backgroundThemeColorsKeys" :key="'bw_var_' + bw" :style="{ backgroundColor: backgroundThemeColors[bw], }">
+			<span v-for="bw in backgroundThemeColorsKeys" :key="'bw_var2_' + bw" :style="{ backgroundColor: backgroundThemeColors[bw] }">
 				{{ bw }} <span>--farm-background-{{ bw }}</span>
 			</span>
 		</div>