@farm-investimentos/front-mfe-components 15.3.4 → 15.3.6

package/package.json

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

package/src/components/ContextMenu/ContextMenu.vue

@@ -17,7 +17,7 @@
 	</div>
 </template>
 <script lang="ts">
-import { ref, watch, reactive, onBeforeUnmount, toRefs, defineComponent } from 'vue';
+import { ref, watch, reactive, onBeforeUnmount, toRefs, defineComponent, nextTick } from 'vue';
 import { calculateMainZindex, isChildOfFixedElement } from '../../helpers';
 
 export default defineComponent({
@@ -38,6 +38,13 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Aligns the component towards the top
+		 */
+		top: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * Max height
 		 */
@@ -64,7 +71,7 @@ export default defineComponent({
 		const parent = ref(null);
 		const popup = ref(null);
 		const activator = ref(null);
-		const { bottom, maxHeight, stayOpen } = toRefs(props);
+		const { top, bottom, maxHeight, stayOpen } = toRefs(props);
 
 		const styles = reactive({
 			minWidth: 0,
@@ -74,7 +81,7 @@ export default defineComponent({
 		} as any);
 
 		const inputValue = ref(props.value);
-		
+
 		let hasBeenBoostrapped = false;
 
 		const outClick = event => {
@@ -114,8 +121,17 @@ export default defineComponent({
 						hasBeenBoostrapped = true;
 					}
 					window.addEventListener('click', outClick);
-					window.addEventListener('resize', resizeWindowHandler);
+					window.addEventListener('resize', resizeWindowHandler, {
+						passive: true,
+					});
 					calculatePosition();
+
+					if (top.value) {
+						nextTick(() => {
+							const offsetTop = calculateOffsetTop();
+							styles.top = `${offsetTop}px`;
+						});
+					}
 				} else {
 					styles.top = '-10000px';
 					styles.left = '-10000px';
@@ -125,20 +141,36 @@ export default defineComponent({
 			}
 		);
 
+		const getElementClientRects = () => ({
+			parentBoundingClientRect: parent.value.getBoundingClientRect(),
+			activatorBoundingClientRect: activator.value.children[0].getBoundingClientRect(),
+			popupClientRect: popup.value.getBoundingClientRect(), // Only has height when popup is showing on screen
+		});
+
+		const calculateOffsetTop = () => {
+			const { parentBoundingClientRect, activatorBoundingClientRect, popupClientRect } =
+				getElementClientRects();
+
+			let offsetTop =
+				window.scrollY +
+				parentBoundingClientRect.top +
+				(!bottom.value ? 0 : activatorBoundingClientRect.height);
+
+			offsetTop = top.value ? offsetTop - popupClientRect.height - 12 : offsetTop;
+
+			return offsetTop;
+		};
+
 		const calculatePosition = () => {
 			if (!parent.value || !activator.value.children[0]) {
 				return;
 			}
 			const activatorChildOfFixedElement = isChildOfFixedElement(activator.value);
 
-			const parentBoundingClientRect = parent.value.getBoundingClientRect();
-			const activatorBoundingClientRect = activator.value.children[0].getBoundingClientRect();
-			const popupClientRect = popup.value.getBoundingClientRect();
+			const { parentBoundingClientRect, activatorBoundingClientRect, popupClientRect } =
+				getElementClientRects();
 
-			let offsetTop =
-				parentBoundingClientRect.top +
-				window.scrollY +
-				(!bottom.value ? 0 : activatorBoundingClientRect.height);
+			let offsetTop = calculateOffsetTop();
 
 			let offsetLeft = activatorBoundingClientRect.left;
 

package/src/components/DatePicker/DatePicker.stories.js

@@ -73,6 +73,38 @@ export const IsNull = () => ({
 		};
 	},
 	template: `<div style='max-width: 320px'>
-        <farm-input-datepicker inputId="input-custom-id-8" v-model="date" :required="true" />
+		<farm-input-datepicker inputId="input-custom-id-8" v-model="date" :required="true" />
+    </div>`,
+});
+
+export const BottomFalse = () => ({
+	data() {
+		return {
+			date: '2023-08-01',
+		};
+	},
+	template: `<div style='max-width: 320px'><farm-input-datepicker position="bottom" inputId="input-custom-id-1" v-model="date" /></div>`,
+});
+export const TopPositioned = () => ({
+	data() {
+		return {
+			date: '',
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-0" v-model="date" position="top" />
+		{{ date }}
+    </div>`,
+});
+
+export const CenterPositioned = () => ({
+	data() {
+		return {
+			date: '',
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-0" v-model="date" position="center" />
+		{{ date }}
     </div>`,
 });

package/src/components/DatePicker/DatePicker.vue

@@ -4,7 +4,8 @@
 		v-model="menuField"
 		ref="contextmenu"
 		maxHeight="auto"
-		bottom
+		:bottom="position === 'bottom'"
+		:top="position === 'top'"
 		popup-width="320"
 	>
 		<v-date-picker
@@ -51,9 +52,13 @@
 	</farm-contextmenu>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
-import { defaultFormat as dateDefaultFormatter, convertDate, checkDateValid } from '../../helpers/date';
+import {
+	defaultFormat as dateDefaultFormatter,
+	convertDate,
+	checkDateValid,
+} from '../../helpers/date';
 import { formatDatePickerHeader } from '../../helpers';
 /**
  * Componente de input com datepicker para data
@@ -92,6 +97,13 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		/**
+		 * Min date (ISO format)
+		 */
+		position: {
+			type: String as PropType<'top' | 'bottom' | 'center'>,
+			default: 'bottom',
+		},
 		/**
 		 * Required field (inside form)
 		 */
@@ -111,9 +123,9 @@ export default defineComponent({
 			dateField: this.value,
 			fieldRange: s,
 			checkDateValid: value => {
-				if(value.length > 0) {
+				if (value.length > 0) {
 					const isValid = checkDateValid(value);
-					return  isValid ? true : 'Data inválida';
+					return isValid ? true : 'Data inválida';
 				}
 				return true;
 			},
@@ -121,7 +133,7 @@ export default defineComponent({
 				return this.required ? !!value || value != '' || 'Campo obrigatório' : true;
 			},
 			checkMax: value => {
-				if(!this.required && value.length === 0) {
+				if (!this.required && value.length === 0) {
 					return true;
 				}
 				return this.max && new Date(convertDate(value)) > new Date(this.max)
@@ -129,13 +141,13 @@ export default defineComponent({
 					: true;
 			},
 			checkMin: value => {
-				if(!this.required && value.length === 0) {
+				if (!this.required && value.length === 0) {
 					return true;
 				}
-				if(this.min) {
+				if (this.min) {
 					const dateSelected = new Date(convertDate(value));
 					const dateMin = new Date(convertDate(this.min));
-					if(dateSelected.getTime() >= dateMin.getTime()){
+					if (dateSelected.getTime() >= dateMin.getTime()) {
 						return true;
 					}
 					return 'A data está fora do período permitido';