VL-11_Add-auto-position-for-datepicers-calendar_Dmytro-Holdobin

src/composable.adjustElementPosition/index.js

@@ -0,0 +1,98 @@
+import { ref, computed, toValue } from "vue";
+
+export const POSITION = {
+  left: "left",
+  right: "right",
+  top: "top",
+  bottom: "bottom",
+  auto: "auto",
+};
+
+export function useAdjustElementPosition(
+  anchorElement,
+  targetElement,
+  position,
+  preferredPosition,
+) {
+  const preferredOpenDirectionY = ref(preferredPosition?.y || POSITION.bottom);
+  const preferredOpenDirectionX = ref(preferredPosition?.x || POSITION.left);
+
+  const localAnchorElement = computed(() => toValue(anchorElement));
+  const localTargetElement = computed(() => toValue(targetElement));
+  const localPosition = computed(() => toValue(position));
+  const localPreferredPosition = computed(() => toValue(preferredPosition));
+
+  const isTop = computed(() => {
+    if (localPosition.value.y !== POSITION.auto) {
+      return localPosition.value.y === POSITION.top;
+    }
+
+    return preferredOpenDirectionY.value === POSITION.top;
+  });
+
+  const isLeft = computed(() => {
+    if (localPosition.value.x !== POSITION.auto) {
+      return localPosition.value.x === POSITION.left;
+    }
+
+    return preferredOpenDirectionX.value === POSITION.right;
+  });
+
+  const isBottom = computed(() => {
+    if (localPosition.value.y !== POSITION.auto) {
+      return localPosition.value.y === POSITION.bottom;
+    }
+
+    return preferredOpenDirectionY.value === POSITION.bottom;
+  });
+
+  const isRight = computed(() => {
+    if (localPosition.value.x !== POSITION.auto) {
+      return localPosition.value.y === POSITION.right;
+    }
+
+    return preferredOpenDirectionX.value === POSITION.right;
+  });
+
+  function adjustPositionY() {
+    if (typeof window === "undefined") return;
+
+    const spaceAbove = localAnchorElement.value.getBoundingClientRect().top;
+    const spaceBelow = window.innerHeight - localAnchorElement.value.getBoundingClientRect().bottom;
+    const hasEnoughSpaceBelow =
+      spaceBelow > localTargetElement.value.getBoundingClientRect().height;
+    const hasEnoughSpaceAbove =
+      spaceAbove > localTargetElement.value.getBoundingClientRect().height;
+
+    if (localPreferredPosition.value.y === POSITION.top) {
+      preferredOpenDirectionY.value =
+        hasEnoughSpaceBelow || spaceBelow > spaceAbove ? POSITION.bottom : POSITION.top;
+    }
+
+    if (localPreferredPosition.value.y === POSITION.bottom) {
+      preferredOpenDirectionY.value =
+        hasEnoughSpaceAbove || spaceAbove > spaceBelow ? POSITION.top : POSITION.bottom;
+    }
+  }
+
+  function adjustPositionX() {
+    if (typeof window === "undefined") return;
+
+    const spaceRight = localAnchorElement.value.getBoundingClientRect().right;
+    const spaceLeft = window.innerWidth - localAnchorElement.value.getBoundingClientRect().left;
+    const hasEnoughSpaceLeft = spaceLeft > localTargetElement.value.getBoundingClientRect().width;
+    const hasEnoughSpaceRight = spaceRight > localTargetElement.value.getBoundingClientRect().width;
+
+    if (localPreferredPosition.value.x === POSITION.left) {
+      preferredOpenDirectionX.value =
+        hasEnoughSpaceRight || spaceRight > spaceLeft ? POSITION.right : POSITION.left;
+    }
+
+    if (localPreferredPosition.value.x === POSITION.right) {
+      preferredOpenDirectionX.value =
+        hasEnoughSpaceLeft || spaceLeft > spaceRight ? POSITION.left : POSITION.right;
+    }
+  }
+
+  return { isTop, isRight, isBottom, isLeft, adjustPositionY, adjustPositionX };
+}

src/ui.form-date-picker-range/composables/attrs.composable.js

@@ -4,18 +4,24 @@ import { cx, cva } from "../../service.ui";
 import { computed, watchEffect } from "vue";
 
 import defaultConfig from "../configs/default.config";
+import { POSITION } from "../../composable.adjustElementPosition";
 
-export default function useAttrs(props, { isShownMenu }) {
+export default function useAttrs(props, { isShownMenu, isTop, isRight }) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
   const { menu } = config.value;
 
+  const openDirectionY = computed(() => (isTop.value ? POSITION.top : POSITION.bottom));
+  const openDirectionX = computed(() => (isRight.value ? POSITION.right : POSITION.left));
+
   const cvaMenu = cva({
     base: menu.base,
     variants: menu.variants,
     compoundVariants: menu.compoundVariants,
   });
 
-  const menuClasses = computed(() => cvaMenu({ openDirection: props.openDirection }));
+  const menuClasses = computed(() =>
+    cvaMenu({ openDirectionY: openDirectionY.value, openDirectionX: openDirectionX.value }),
+  );
 
   const wrapperAttrs = getAttrs("wrapper");
   const buttonWrapperAttrsRaw = getAttrs("buttonWrapper");

src/ui.form-date-picker-range/configs/default.config.js

@@ -20,12 +20,15 @@ export default /*tw*/ {
     disabled:cursor-not-allowed last:rounded-l-none last:rounded-r-lg first:rounded-l-lg first:rounded-r-none
   `,
   menu: {
-    base: "absolute z-40 mt-2 w-80 overflow-hidden rounded-lg border border-brand-300 bg-white p-2 shadow focus:outline-none",
+    base: "absolute z-40 my-2 w-80 overflow-hidden rounded-lg border border-brand-300 bg-white p-2 shadow focus:outline-none",
     variants: {
-      openDirection: {
+      openDirectionX: {
         left: "left-0",
         right: "right-0",
       },
+      openDirectionY: {
+        top: "bottom-full mt-0",
+      },
     },
   },
   menuTransition: {
@@ -193,7 +196,8 @@ export default /*tw*/ {
   defaultVariants: {
     size: "md",
     variant: "button",
-    openDirection: "left",
+    openDirectionX: "auto",
+    openDirectionY: "auto",
     timepicker: false,
     disabled: false,
     dateFormat: "d.m.Y",

src/ui.form-date-picker-range/index.stories.js

@@ -91,11 +91,29 @@ const OpenDirectionTemplate = (args, { argTypes } = {}) => ({
     <URow class="!flex-col">
       <UDatePickerRange
         class="w-full"
-        v-for="(direction, index) in directions"
-        :open-direction="direction"
+        open-direction-y="top"
+        v-bind="args"
+        v-model="args.value"
+      />
+      <UDatePickerRange
+        class="w-full"
+        open-direction-y="bottom"
+        open-direction-x="right"
+        v-bind="args"
+        v-model="args.value"
+      />
+      <UDatePickerRange
+        class="w-full"
+        open-direction-y="bottom"
+        v-bind="args"
+        v-model="args.value"
+      />
+      <UDatePickerRange
+        class="w-full"
+        open-direction-y="bottom"
+        open-direction-x="left"
         v-bind="args"
         v-model="args.value"
-        :key="index"
       />
     </URow>
   `,

src/ui.form-date-picker-range/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="wrapperAttrs">
+  <div v-bind="wrapperAttrs" ref="wrapperRef">
     <UInput
       v-if="isVariant.input"
       :id="id"
@@ -235,6 +235,7 @@ import { wrongDateFormat, wrongMonthNumber, wrongDayNumber } from "./services/va
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
 import useBreakpoint from "../composable.breakpoint";
+import { useAdjustElementPosition } from "../composable.adjustElementPosition";
 
 import defaultConfig from "./configs/default.config";
 import {
@@ -273,12 +274,21 @@ const props = defineProps({
   },
 
   /**
-   * Datepicker open direction.
-   * @values left, right
+   * Datepicker open direction on x-axis.
+   * @values auto, left, right
    */
-  openDirection: {
+  openDirectionX: {
     type: String,
-    default: UIService.get(defaultConfig, UDatePickerRange).default.openDirection,
+    default: UIService.get(defaultConfig, UDatePickerRange).default.openDirectionX,
+  },
+
+  /**
+   * Datepicker open direction on y-axis.
+   * @values auto, top, bottom
+   */
+  openDirectionY: {
+    type: String,
+    default: UIService.get(defaultConfig, UDatePickerRange).default.openDirectionY,
   },
 
   /**
@@ -392,6 +402,23 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue"]);
 
 const isShownMenu = ref(false);
+const wrapperRef = ref(null);
+const menuRef = ref(null);
+const rangeInputStartRef = ref(null);
+const rangeInputEndRef = ref(null);
+
+const { isTop, isRight, adjustPositionY, adjustPositionX } = useAdjustElementPosition(
+  wrapperRef,
+  menuRef,
+  {
+    x: props.openDirectionX,
+    y: props.openDirectionY,
+  },
+  {
+    x: "left",
+    y: "bottom",
+  },
+);
 
 const {
   config,
@@ -414,24 +441,23 @@ const {
   rangeInputAttrs,
   rangeInputWrapperAttrs,
   inputRangeErrorAttrs,
-} = useAttrs(props, { isShownMenu });
+} = useAttrs(props, { isShownMenu, isTop, isRight });
 const { tm } = useLocale();
 
 const calendarValue = ref(props.modelValue);
 const activeDate = ref(
   props.modelValue.from !== null ? getDateFromUnixTimestamp(props.modelValue.from) : new Date(),
 );
 const period = ref(PERIOD.ownRange);
-const periodDateList = ref(null);
 const rangeStart = ref("");
 const rangeEnd = ref("");
 const inputRangeStartError = ref("");
 const inputRangeEndError = ref("");
 const isHoverEvent = ref(false);
+const periodDateList = ref(null);
 
-const menuRef = ref(null);
-const rangeInputStartRef = ref(null);
-const rangeInputEndRef = ref(null);
+const { isMobileBreakpoint } = useBreakpoint();
+const i18nGlobal = tm(UDatePickerRange);
 
 const localValue = computed({
   get: () => props.modelValue,
@@ -444,9 +470,6 @@ const localValue = computed({
   },
 });
 
-const { isMobileBreakpoint } = useBreakpoint();
-const i18nGlobal = tm(UDatePickerRange);
-
 const rangeInputName = computed(() => `rangeInput-${props.id}`);
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
@@ -602,7 +625,7 @@ const userFormatDate = computed(() => {
     const endMonth = String(to?.getMonth())?.padStart(2, "0");
 
     const fromTitle = `${startDay}.${startMonth}`;
-    const toTitle = to ? `${endDay}.${endMonth} / ${to.getFullYear}` : "";
+    const toTitle = to ? `${endDay}.${endMonth} / ${to.getFullYear()}` : "";
 
     title = `${fromTitle} – ${toTitle}`;
   }
@@ -791,7 +814,12 @@ function getPeriodDateListClasses() {
 function activate() {
   isShownMenu.value = true;
 
-  nextTick(() => menuRef.value.focus());
+  nextTick(() => {
+    adjustPositionY();
+    adjustPositionX();
+
+    menuRef.value.focus();
+  });
 }
 
 function deactivate() {

src/ui.form-date-picker/composables/attrs.composable.js

@@ -1,21 +1,28 @@
 import useUI from "../../composable.ui";
 import { cva } from "../../service.ui";
+import { computed, watchEffect } from "vue";
 
 import defaultConfig from "../configs/default.config";
-import { computed, watchEffect } from "vue";
+import { POSITION } from "../../composable.adjustElementPosition";
 
-export default function useAttrs(props, { isShownCalendar }) {
+export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
   const { calendar } = config.value;
 
+  const openDirectionY = computed(() => (isTop.value ? POSITION.top : POSITION.bottom));
+  const openDirectionX = computed(() => (isRight.value ? POSITION.right : POSITION.left));
+
   const cvaCalendarWrapper = cva({
     base: calendar.wrapper.base,
     variants: calendar.wrapper.variants,
     compoundVariants: calendar.wrapper.compoundVariants,
   });
 
   const calendarWrapperClasses = computed(() =>
-    cvaCalendarWrapper({ openDirection: props.openDirection }),
+    cvaCalendarWrapper({
+      openDirectionY: openDirectionY.value,
+      openDirectionX: openDirectionX.value,
+    }),
   );
 
   const calendarAttrs = getAttrs("calendar", {

src/ui.form-date-picker/configs/default.config.js

@@ -8,12 +8,15 @@ export default /*tw*/ {
   },
   calendar: {
     wrapper: {
-      base: "absolute z-40 mt-2",
+      base: "absolute z-40 my-2",
       variants: {
-        openDirection: {
+        openDirectionX: {
           left: "left-0",
           right: "right-0",
         },
+        openDirectionY: {
+          top: "bottom-full mt-0",
+        },
       },
     },
   },
@@ -109,7 +112,8 @@ export default /*tw*/ {
     dateFormat: "Y-m-d",
     userFormat: "F j, Y",
     size: "md",
-    openDirection: "left",
+    openDirectionX: "auto",
+    openDirectionY: "auto",
     timepicker: false,
     disabled: false,
     maxDate: undefined,