Merge pull request #170 from uvarov-frontend/fix/hover_days

Fix hover effect on days

package/classes.ts

@@ -46,7 +46,9 @@ const classes = {
 	timeRanges: 'vanilla-calendar-time__ranges',
 	timeRange: 'vanilla-calendar-time__range',
 	day: 'vanilla-calendar-day',
-	daySelected: 'vanilla-calendar-day_selected',
+	dayHoverFirst: 'vanilla-calendar-day_hover-first',
+	dayHoverLast: 'vanilla-calendar-day_hover-last',
+	dayHoverIntermediate: 'vanilla-calendar-day_hover-intermediate',
 	daySelectedFirst: 'vanilla-calendar-day_selected-first',
 	daySelectedLast: 'vanilla-calendar-day_selected-last',
 	daySelectedIntermediate: 'vanilla-calendar-day_selected-intermediate',
@@ -56,9 +58,6 @@ const classes = {
 	dayBtnNext: 'vanilla-calendar-day__btn_next',
 	dayBtnToday: 'vanilla-calendar-day__btn_today',
 	dayBtnSelected: 'vanilla-calendar-day__btn_selected',
-	dayBtnSelectedFirst: 'vanilla-calendar-day__btn_selected_first',
-	dayBtnSelectedLast: 'vanilla-calendar-day__btn_selected_last',
-	dayBtnSelectedIntermediate: 'vanilla-calendar-day__btn_selected_intermediate',
 	dayBtnHover: 'vanilla-calendar-day__btn_hover',
 	dayBtnDisabled: 'vanilla-calendar-day__btn_disabled',
 	dayBtnWeekend: 'vanilla-calendar-day__btn_weekend',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vanilla-calendar-pro",
-	"version": "2.9.1",
+	"version": "2.9.2",
 	"description": "Vanilla Calendar is a versatile JavaScript date and time picker with TypeScript support, making it compatible with any JavaScript framework or library. It is designed to be lightweight, simple to use, and feature-rich without relying on external dependencies.",
 	"homepage": "https://vanilla-calendar.pro",
 	"keywords": [

package/src/scripts/destroy.ts

@@ -5,7 +5,7 @@ const destroy = (self: VanillaCalendar) => {
 	if (!self.isInit) throw new Error(messages.notInit);
 
 	if (self.input) {
-		self.HTMLElement?.parentNode?.removeChild(self.HTMLElement);
+		self.HTMLElement?.parentElement?.removeChild(self.HTMLElement);
 		self.HTMLInputElement?.replaceWith(self.HTMLOriginalElement);
 		self.HTMLInputElement = undefined;
 	} else {

package/src/scripts/handles/handleDayRangedSelection.ts

@@ -16,34 +16,59 @@ const current: {
 };
 
 const removeHoverEffect = () => {
-	const dayEls = current.self?.HTMLElement?.querySelectorAll(`.${current.self.CSSClasses.dayBtnHover}`);
-	dayEls?.forEach((d) => d.classList.remove((current.self as VanillaCalendar).CSSClasses.dayBtnHover));
+	if (!current.self?.HTMLElement) return;
+	const { CSSClasses } = current.self as VanillaCalendar;
+
+	const dayEls: NodeListOf<HTMLDivElement> = current.self.HTMLElement.querySelectorAll(`.${current.self.CSSClasses.dayBtnHover}`);
+	dayEls.forEach((d) => {
+		d.classList.remove((current.self as VanillaCalendar).CSSClasses.dayBtnHover);
+		d.parentElement?.classList.remove(CSSClasses.dayHoverIntermediate, CSSClasses.dayHoverFirst, CSSClasses.dayHoverLast);
+	});
 };
 
-const addHoverEffect = (day: Date) => {
+const addHoverEffect = (day: Date, firstBtnDayEls: NodeListOf<HTMLDivElement>, lastBtnDayEls: NodeListOf<HTMLDivElement>) => {
 	if (!current.self?.selectedDates) return;
+
 	const formattedDate = getDateString(day);
+	const { CSSClasses } = current.self as VanillaCalendar;
 
 	if (current.self.rangeDisabled?.includes(formattedDate)) return;
 
-	const dayEls: NodeListOf<HTMLElement> | undefined = current.self.HTMLElement?.querySelectorAll(`[data-calendar-day="${formattedDate}"]`);
-	dayEls?.forEach((d) => d.classList.add((current.self as VanillaCalendar).CSSClasses.dayBtnHover));
+	const dayEls: NodeListOf<HTMLDivElement> = current.self.HTMLElement?.querySelectorAll(`[data-calendar-day="${formattedDate}"]`);
+	dayEls?.forEach((d) => {
+		d.classList.add(CSSClasses.dayBtnHover);
+		d.parentElement?.classList.add(CSSClasses.dayHoverIntermediate);
+	});
+
+	firstBtnDayEls?.forEach((d) => d.parentElement?.classList.add(CSSClasses.dayHoverFirst));
+	lastBtnDayEls?.forEach((d) => d.parentElement?.classList.add(CSSClasses.dayHoverLast));
 };
 
 const handleHoverDaysEvent = (e: MouseEvent) => {
 	if (!e.target || !current.self?.selectedDates) return;
-	removeHoverEffect();
 
-	const dayEl: HTMLElement | null = (e.target as HTMLElement).closest('[data-calendar-day]');
-	if (!dayEl) return;
+	const days: HTMLDivElement | null = (e.target as HTMLElement).closest(`.${current.self.CSSClasses.days}`);
+
+	if (!days) {
+		removeHoverEffect();
+		return;
+	}
+
+	const btnDayEl: HTMLButtonElement | null = (e.target as HTMLElement).closest('[data-calendar-day]');
+	if (!btnDayEl) return;
 
-	const formattedDate = dayEl.dataset.calendarDay as FormatDateString;
+	const lastDateString = btnDayEl.dataset.calendarDay as FormatDateString;
 	const startDate = getDate(current.self.selectedDates[0]);
-	const endDate = getDate(formattedDate);
+	const endDate = getDate(lastDateString);
+	const firstBtnDayEls: NodeListOf<HTMLDivElement> = current.self.HTMLElement.querySelectorAll(`[data-calendar-day="${current.self.selectedDates[0]}"]`);
+	const lastBtnDayEls: NodeListOf<HTMLDivElement> = current.self.HTMLElement.querySelectorAll(`[data-calendar-day="${lastDateString}"]`);
+	const [firstBtnDayElsCorrect, lastBtnDayElsCorrect] = startDate < endDate ? [firstBtnDayEls, lastBtnDayEls] : [lastBtnDayEls, firstBtnDayEls];
 	const [start, end] = startDate < endDate ? [startDate, endDate] : [endDate, startDate];
 
+	removeHoverEffect();
+
 	for (let i = new Date(start); i <= end; i.setDate(i.getDate() + 1)) {
-		addHoverEffect(i);
+		addHoverEffect(i, firstBtnDayElsCorrect, lastBtnDayElsCorrect);
 	}
 };
 

package/src/scripts/methods/createDays.ts

@@ -52,21 +52,16 @@ const setDayModifier = (
 
 	// if selected day
 	if (self.selectedDates?.includes(date)) {
-		dayEl.classList.add(self.CSSClasses.daySelected);
 		dayBtnEl.classList.add(self.CSSClasses.dayBtnSelected);
-
 		if (self.selectedDates.length > 1 && self.settings.selection.day === 'multiple-ranged') {
 			if (self.selectedDates[0] === date) {
 				dayEl.classList.add(self.CSSClasses.daySelectedFirst);
-				dayBtnEl.classList.add(self.CSSClasses.daySelectedFirst);
 			}
 			if (self.selectedDates[self.selectedDates.length - 1] === date) {
 				dayEl.classList.add(self.CSSClasses.daySelectedLast);
-				dayBtnEl.classList.add(self.CSSClasses.dayBtnSelectedLast);
 			}
 			if (self.selectedDates[0] !== date && self.selectedDates[self.selectedDates.length - 1] !== date) {
 				dayEl.classList.add(self.CSSClasses.daySelectedIntermediate);
-				dayBtnEl.classList.add(self.CSSClasses.dayBtnSelectedIntermediate);
 			}
 		}
 	}

package/src/scripts/methods/createPopup.ts

@@ -5,7 +5,7 @@ const handleDay = (date: string, dayInfo: IPopup, daysEl: HTMLElement, CSSClasse
 	const dayBtnEl: HTMLElement | null = daysEl.querySelector(`[data-calendar-day="${date}"]`);
 	if (!dayBtnEl) return;
 	if (dayInfo?.modifier) dayBtnEl.classList.add(...dayInfo.modifier.trim().split(' '));
-	if (dayInfo?.html) (dayBtnEl.parentNode as HTMLElement).innerHTML += `<div class="${CSSClasses}">${dayInfo.html}</div>`;
+	if (dayInfo?.html) (dayBtnEl.parentElement as HTMLElement).innerHTML += `<div class="${CSSClasses}">${dayInfo.html}</div>`;
 };
 
 const createPopup = (self: VanillaCalendar, daysEl: HTMLElement) => {

package/src/styles/themes/dark.css

@@ -1,5 +1,5 @@
 [data-calendar-theme="dark"].vanilla-calendar {
-	@apply bg-slate-900
+	@apply bg-slate-900 text-white
 }
 
 [data-calendar-theme="dark"].vanilla-calendar button:focus-visible {
@@ -68,6 +68,27 @@
 	@apply text-rose-500
 }
 
+[data-calendar-theme="dark"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_selected,
+[data-calendar-theme="dark"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_selected {
+	@apply bg-rose-500 bg-opacity-80 text-white hover:bg-rose-500 hover:bg-opacity-80 hover:text-white
+}
+
+[data-calendar-theme="dark"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected,
+[data-calendar-theme="dark"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected,
+[data-calendar-theme="dark"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected,
+[data-calendar-theme="dark"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected {
+	@apply bg-slate-800 text-slate-300 hover:bg-slate-800 hover:text-slate-300
+}
+
+[data-calendar-theme="dark"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected {
+	@apply bg-cyan-500 bg-opacity-80 text-white hover:bg-cyan-500 hover:bg-opacity-80 hover:text-white
+}
+
+[data-calendar-theme="dark"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_prev,
+[data-calendar-theme="dark"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_next {
+	@apply bg-slate-800 text-slate-300 hover:bg-slate-800 hover:text-slate-300
+}
+
 [data-calendar-theme="dark"] .vanilla-calendar-day__btn {
 	@apply text-slate-400 bg-slate-900 hover:bg-slate-800 hover:text-slate-200
 }
@@ -152,43 +173,22 @@
 	@apply bg-rose-500 text-white hover:bg-rose-500 hover:text-white
 }
 
-[data-calendar-theme="dark"] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_selected_intermediate,
-[data-calendar-theme="dark"] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_selected_intermediate {
-	@apply bg-rose-500 bg-opacity-80 text-white hover:bg-rose-500 hover:bg-opacity-80 hover:text-white
-}
-
 [data-calendar-theme="dark"] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected,
 [data-calendar-theme="dark"] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected,
 [data-calendar-theme="dark"] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected,
 [data-calendar-theme="dark"] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected {
 	@apply bg-slate-700 text-slate-300 hover:bg-slate-700 hover:text-slate-300
 }
 
-[data-calendar-theme="dark"] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_selected_intermediate,
-[data-calendar-theme="dark"] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_selected_intermediate,
-[data-calendar-theme="dark"] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_selected_intermediate,
-[data-calendar-theme="dark"] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_selected_intermediate {
-	@apply bg-slate-800 text-slate-300 hover:bg-slate-800 hover:text-slate-300
-}
-
 [data-calendar-theme="dark"] .vanilla-calendar-day__btn_selected {
 	@apply bg-cyan-500 text-white hover:bg-cyan-500 hover:text-white
 }
 
-[data-calendar-theme="dark"] .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_selected_intermediate {
-	@apply bg-cyan-500 bg-opacity-80 text-white hover:bg-cyan-500 hover:bg-opacity-80 hover:text-white
-}
-
 [data-calendar-theme="dark"] .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_prev,
 [data-calendar-theme="dark"] .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_next {
 	@apply bg-slate-700 text-slate-300 hover:bg-slate-700 hover:text-slate-300
 }
 
-[data-calendar-theme="dark"] .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected_intermediate,
-[data-calendar-theme="dark"] .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected_intermediate {
-	@apply bg-slate-800 text-slate-300 hover:bg-slate-800 hover:text-slate-300
-}
-
 [data-calendar-theme="dark"] .vanilla-calendar-day__popup {
 	@apply text-white
 }

package/src/styles/themes/light.css

@@ -1,5 +1,5 @@
 [data-calendar-theme="light"].vanilla-calendar {
-	@apply bg-white
+	@apply bg-white text-slate-900
 }
 
 [data-calendar-theme="light"].vanilla-calendar button:focus-visible {
@@ -77,6 +77,27 @@
 	@apply text-rose-500
 }
 
+[data-calendar-theme="light"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_selected,
+[data-calendar-theme="light"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_selected {
+	@apply bg-rose-500 bg-opacity-70 text-white hover:bg-rose-500 hover:bg-opacity-70 hover:text-white
+}
+
+[data-calendar-theme="light"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected,
+[data-calendar-theme="light"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected,
+[data-calendar-theme="light"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected,
+[data-calendar-theme="light"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected {
+	@apply bg-slate-200 text-slate-500 hover:bg-slate-200 hover:text-slate-500
+}
+
+[data-calendar-theme="light"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected {
+	@apply bg-cyan-500 bg-opacity-70 text-white hover:bg-cyan-500 hover:bg-opacity-70 hover:text-white
+}
+
+[data-calendar-theme="light"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_prev,
+[data-calendar-theme="light"] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_next {
+	@apply bg-slate-200 text-slate-500 hover:bg-slate-200 hover:text-slate-500
+}
+
 [data-calendar-theme="light"] .vanilla-calendar-day__btn {
 	@apply text-slate-900 bg-white hover:bg-slate-100
 }
@@ -161,43 +182,22 @@
 	@apply bg-rose-500 text-white hover:bg-rose-500 hover:text-white
 }
 
-[data-calendar-theme="light"] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_selected_intermediate,
-[data-calendar-theme="light"] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_selected_intermediate {
-	@apply bg-rose-500 bg-opacity-70 text-white hover:bg-rose-500 hover:bg-opacity-70 hover:text-white
-}
-
 [data-calendar-theme="light"] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected,
 [data-calendar-theme="light"] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected,
 [data-calendar-theme="light"] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected,
 [data-calendar-theme="light"] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected {
 	@apply bg-slate-300 text-slate-500 hover:bg-slate-300 hover:text-slate-500
 }
 
-[data-calendar-theme="light"] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_selected_intermediate,
-[data-calendar-theme="light"] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_selected_intermediate,
-[data-calendar-theme="light"] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_selected_intermediate,
-[data-calendar-theme="light"] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_selected_intermediate {
-	@apply bg-slate-200 text-slate-500 hover:bg-slate-200 hover:text-slate-500
-}
-
 [data-calendar-theme="light"] .vanilla-calendar-day__btn_selected {
 	@apply bg-cyan-500 text-white hover:bg-cyan-500 hover:text-white
 }
 
-[data-calendar-theme="light"] .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_selected_intermediate {
-	@apply bg-cyan-500 bg-opacity-70 text-white hover:bg-cyan-500 hover:bg-opacity-70 hover:text-white
-}
-
 [data-calendar-theme="light"] .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_prev,
 [data-calendar-theme="light"] .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_next {
 	@apply bg-slate-300 text-slate-500 hover:bg-slate-300 hover:text-slate-500
 }
 
-[data-calendar-theme="light"] .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected_intermediate,
-[data-calendar-theme="light"] .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected_intermediate {
-	@apply bg-slate-200 text-slate-500 hover:bg-slate-200 hover:text-slate-500
-}
-
 [data-calendar-theme="light"] .vanilla-calendar-day__popup {
 	@apply text-slate-900
 }

package/src/styles/vanilla-calendar.layout.css

@@ -138,7 +138,7 @@
 }
 
 .vanilla-calendar-days_selecting .vanilla-calendar-day__btn {
-	@apply cursor-pointer
+	@apply cursor-pointer transition-all duration-75
 }
 
 .vanilla-calendar-days_selecting .vanilla-calendar-day__btn_disabled {
@@ -149,6 +149,22 @@
 	@apply relative w-full h-full flex items-center justify-center
 }
 
+.vanilla-calendar-day_hover-intermediate .vanilla-calendar-day__btn {
+	@apply rounded-none
+}
+
+.vanilla-calendar-day_hover-first .vanilla-calendar-day__btn {
+	@apply rounded-tr-none rounded-br-none rounded-tl-lg rounded-bl-lg
+}
+
+.vanilla-calendar-day_hover-last .vanilla-calendar-day__btn {
+	@apply rounded-tl-none rounded-bl-none rounded-tr-lg rounded-br-lg
+}
+
+.vanilla-calendar-day_hover-first.vanilla-calendar-day_hover-last .vanilla-calendar-day__btn {
+	@apply rounded-lg
+}
+
 .vanilla-calendar-day:focus-visible .vanilla-calendar-day__popup,
 .vanilla-calendar-day:hover .vanilla-calendar-day__popup {
 	@apply opacity-100 pointer-events-auto
@@ -166,7 +182,7 @@
 	@apply rounded-tl-lg rounded-bl-lg rounded-tr-lg rounded-br-lg
 }
 
-.vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected_intermediate {
+.vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected {
 	@apply rounded-none
 }