Feature proposal - alt-posision prop can affect the arrow position

[iv-thomson]

Hello! I'd like to propose an improvement to the alt-position prop.

The issue

When using 'teleport' together with the alt-position prop and calculating the position of the datepicker, we have no way to change the position of an arrow (besides overwriting it's css)

This happens because the position of the arrow is determined by the following parameter:

vue-datepicker/src/VueDatePicker/composables/position.ts

Line 48 in efcecf3

const openOnTop = ref(false);

By default it's value is changed here in the calculateMenuPosition, however, when using alt-position, this property is set to default, which makes the arrow always point upwards.

vue-datepicker/src/VueDatePicker/composables/position.ts

Lines 113 to 129 in efcecf3

	const setMenuPosition = (recalculate = true): void => {
	if (!inline.value.enabled) {
	if (centered.value) return teleportCenter();
	if (props.altPosition !== null) return customAltPosition();
	if (recalculate) {
	const el = props.teleport ? menuRefInner.value?.$el : menuRef.value;
	if (el) {
	menuRect.value = el.getBoundingClientRect();
	}
	emit('recalculate-position');
	}
	return calculateMenuPosition();
	}
	};

Solution

My suggestion is to change the customAltPosition method to allow users to provide their own value of openOnTop parameter:

@@ -103,7 +103,12 @@ export const usePosition = ({
 
     const customAltPosition = () => {
         const el = unrefElement(inputRef as MaybeElementRef);
-        menuStyle.value = props.altPosition(el);
+        const { openOnTop, ...customPosition } = props.altPosition(el);
+        menuStyle.value = customPosition;
+
+        if (openOnTop !== undefined) {
+            openOnTop.value = openOnTop;
+        }
     };

Then, on the level of a project we'll just need to do the following:

<template>
  <VueDatePicker :alt-position="calculatePosition" />
</template>

<script setup lang="ts">
  const calculatePosition = (el: HTMLElement): { top: number; left: number, openOnTop: boolean } => {
    const { top, left, placement } = somePlacementFunction();
    return {
      top,
      left,
      openOnTop: placement === 'top'
    };
  }
</ script>

This change will allow more flexibility for setting up custom positions for the calendar content.

Workaround

The workaround I found is to overwrite the css of dp__arrow_top class for the arrow to point in the correct dirrection. This is not ideal, because I will have to do a side effect inside the function I'm passing to the alt-position prop.

Screenshot for more context