refactor: Code cleanup

Author: Jasenkoo

src/VueDatePicker/components/DatePicker/DpCalendar.vue

@@ -2,14 +2,14 @@
     <div :class="calendarParentClass">
         <div ref="calendarWrapRef" :class="calendarWrapClass" role="grid">
             <div class="dp__calendar_header" role="row">
-                <div v-if="weekNumbers" class="dp__calendar_header_item" role="columnheader">
+                <div v-if="weekNumbers" class="dp__calendar_header_item" role="gridcell">
                     {{ weekNumName }}
                 </div>
                 <div
                     v-for="(dayVal, i) in weekDays"
                     :key="i"
                     class="dp__calendar_header_item"
-                    role="columnheader"
+                    role="gridcell"
                     data-test="calendar-header"
                     :aria-label="defaultedAriaLabels?.weekDay?.(i)"
                 >
@@ -23,7 +23,7 @@
             <transition :name="transitionName" :css="!!transitions">
                 <div v-if="showCalendar" class="dp__calendar" role="rowgroup" @mouseleave="isMouseDown = false">
                     <div v-for="(week, weekInd) in calendarWeeks" :key="weekInd" class="dp__calendar_row" role="row">
-                        <div v-if="weekNumbers" class="dp__calendar_item dp__week_num" role="cell">
+                        <div v-if="weekNumbers" class="dp__calendar_item dp__week_num" role="gridcell">
                             <div class="dp__cell_inner">
                                 {{ getWeekNum(week.days) }}
                             </div>
@@ -258,38 +258,42 @@
 
     const showDay = computed(() => (day: ICalendarDay) => (props.hideOffsetDates ? day.current : true));
 
+    const positionTooltip = async (el: HTMLElement, day: ICalendarDay) => {
+        const { width, height } = el.getBoundingClientRect();
+        showMakerTooltip.value = day.value;
+        let defaultPosition: { left?: string; right?: string } = { left: `${width / 2}px` };
+        let transform = -50;
+        await nextTick();
+
+        if (activeTooltip.value[0]) {
+            const { left, width: tpWidth } = activeTooltip.value[0].getBoundingClientRect();
+            if (left < 0) {
+                defaultPosition = { left: `0` };
+                transform = 0;
+                tpArrowStyle.value.left = `${width / 2}px`;
+            }
+
+            if (window.innerWidth < left + tpWidth) {
+                defaultPosition = { right: `0` };
+                transform = 0;
+                tpArrowStyle.value.left = `${tpWidth - width / 2}px`;
+            }
+        }
+
+        markerTooltipStyle.value = {
+            bottom: `${height}px`,
+            ...defaultPosition,
+            transform: `translateX(${transform}%)`,
+        };
+    };
+
     const handleTooltip = async (day: UnwrapRef<ICalendarDay>, weekInd: number, dayInd: number) => {
         const el = unrefElement(dayRefs.value[weekInd][dayInd]);
         if (el) {
             if (day.marker?.customPosition && day.marker?.tooltip?.length) {
                 markerTooltipStyle.value = day.marker.customPosition(el);
             } else {
-                const { width, height } = el.getBoundingClientRect();
-                showMakerTooltip.value = day.value;
-                let defaultPosition: { left?: string; right?: string } = { left: `${width / 2}px` };
-                let transform = -50;
-                await nextTick();
-
-                if (activeTooltip.value[0]) {
-                    const { left, width: tpWidth } = activeTooltip.value[0].getBoundingClientRect();
-                    if (left < 0) {
-                        defaultPosition = { left: `0` };
-                        transform = 0;
-                        tpArrowStyle.value.left = `${width / 2}px`;
-                    }
-
-                    if (window.innerWidth < left + tpWidth) {
-                        defaultPosition = { right: `0` };
-                        transform = 0;
-                        tpArrowStyle.value.left = `${tpWidth - width / 2}px`;
-                    }
-                }
-
-                markerTooltipStyle.value = {
-                    bottom: `${height}px`,
-                    ...defaultPosition,
-                    transform: `translateX(${transform}%)`,
-                };
+                await positionTooltip(el, day);
             }
 
             emit('tooltip-open', day.marker);

tests/unit/behaviour.spec.ts

@@ -20,7 +20,15 @@ import {
 
 import { resetDateTime } from '@/utils/date-utils';
 
-import { clickCalendarDate, clickSelectBtn, getMonthName, hoverCalendarDate, openMenu, reOpenMenu } from '../utils';
+import {
+    clickCalendarDate,
+    clickSelectBtn,
+    getMonthName,
+    hoverCalendarDate,
+    openMenu,
+    padZero,
+    reOpenMenu,
+} from '../utils';
 import { FlowStep } from '@/constants';
 import type { IMarker, TimeModel, TimeType } from '@/interfaces';
 import { type VueWrapper } from '@vue/test-utils';
@@ -108,7 +116,7 @@ describe('It should validate various picker scenarios', () => {
         const hours = getHours(today);
         const minutes = getMinutes(today);
 
-        const singleTime = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}`;
+        const singleTime = `${padZero(hours)}:${padZero(minutes)}`;
 
         const input = dp.find('input');
         await input.setValue(singleTime);
@@ -146,7 +154,6 @@ describe('It should validate various picker scenarios', () => {
 
         const hours = dp.find(`[data-test="hours-toggle-overlay-btn-0"]`);
         const minutes = dp.find(`[data-test="minutes-toggle-overlay-btn-0"]`);
-        const padZero = (val: number) => (val < 10 ? `0${val}` : val);
 
         expect(hours.text()).toEqual(`${padZero(modelValue.hours)}`);
         expect(minutes.text()).toEqual(`${padZero(modelValue.minutes)}`);

tests/utils.ts

@@ -41,3 +41,5 @@ export const hoverCalendarDate = async (dp: VueWrapper<any>, date: Date) => {
 export const clickSelectBtn = async (dp: VueWrapper<any>) => {
     await dp.find(`[data-test="select-button"]`).trigger('click');
 };
+
+export const padZero = (val: number) => (val < 10 ? `0${val}` : val);