From 877cef22b4aea6df3d6599772c507725a22951b3 Mon Sep 17 00:00:00 2001
From: Yury Uvarov <uvarov.frontend@gmail.com>
Date: Mon, 16 Dec 2024 12:58:56 +0300
Subject: [PATCH] fix button creation

---
 package/src/scripts/creators/createWeek.ts |  4 ++--
 package/src/styles/layout.css              |  6 +++++-
 package/src/styles/themes/dark.css         | 12 ++++++++++--
 package/src/styles/themes/light.css        | 12 ++++++++++--
 package/src/styles/themes/slate-light.css  | 12 ++++++++++--
 5 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/package/src/scripts/creators/createWeek.ts b/package/src/scripts/creators/createWeek.ts
index 0fb631cc..aa2717bb 100644
--- a/package/src/scripts/creators/createWeek.ts
+++ b/package/src/scripts/creators/createWeek.ts
@@ -22,8 +22,8 @@ const createWeek = (self: Calendar) => {
   const weekdays = [...weekdaysData.slice(self.firstWeekday), ...weekdaysData.slice(0, self.firstWeekday)];
 
   self.context.mainElement.querySelectorAll<HTMLElement>('[data-vc="week"]').forEach((weekEl) => {
-    const templateWeekDayEl = document.createElement('button');
-    templateWeekDayEl.type = 'button';
+    const templateWeekDayEl = !!self.onClickWeekDay ? document.createElement('button') : document.createElement('b');
+    if (!!self.onClickWeekDay) (templateWeekDayEl as HTMLButtonElement).type = 'button';
     weekdays.forEach((weekday) => {
       const weekDayEl = templateWeekDayEl.cloneNode(true) as HTMLElement;
       weekDayEl.innerText = weekday.titleShort;
diff --git a/package/src/styles/layout.css b/package/src/styles/layout.css
index a410da00..e52505e4 100644
--- a/package/src/styles/layout.css
+++ b/package/src/styles/layout.css
@@ -117,7 +117,11 @@
 }
 
 [data-vc-week-day] {
-  @apply text-xs font-bold w-full min-w-[1.875rem] flex items-center justify-center cursor-pointer bg-transparent border-none p-0 m-0;
+  @apply text-xs font-bold w-full min-w-[1.875rem] flex items-center justify-center bg-transparent border-none p-0 m-0;
+}
+
+button[data-vc-week-day] {
+  @apply cursor-pointer;
 }
 
 [data-vc='dates'] {
diff --git a/package/src/styles/themes/dark.css b/package/src/styles/themes/dark.css
index 3477c5a2..587cd52e 100644
--- a/package/src/styles/themes/dark.css
+++ b/package/src/styles/themes/dark.css
@@ -44,11 +44,19 @@
 }
 
 [data-vc-theme='dark'] .vc-week__day {
-  @apply text-white surehover:hover:text-slate-300;
+  @apply text-white;
+}
+
+[data-vc-theme='dark'] button.vc-week__day {
+  @apply  surehover:hover:text-slate-300;
 }
 
 [data-vc-theme='dark'] .vc-week__day[data-vc-week-day-off] {
-  @apply text-rose-500 surehover:hover:text-rose-600;
+  @apply text-rose-500;
+}
+
+[data-vc-theme='dark'] button.vc-week__day[data-vc-week-day-off] {
+  @apply surehover:hover:text-rose-600;
 }
 
 [data-vc-theme='dark'] .vc-date[data-vc-date-selected='middle'][data-vc-date-weekend][data-vc-date-selected] .vc-date__btn,
diff --git a/package/src/styles/themes/light.css b/package/src/styles/themes/light.css
index 7b0e46a5..5e0660b0 100644
--- a/package/src/styles/themes/light.css
+++ b/package/src/styles/themes/light.css
@@ -44,11 +44,19 @@
 }
 
 [data-vc-theme='light'] .vc-week__day {
-  @apply text-slate-500 surehover:hover:text-slate-600;
+  @apply text-slate-500;
+}
+
+[data-vc-theme='light'] button.vc-week__day {
+  @apply surehover:hover:text-slate-600;
 }
 
 [data-vc-theme='light'] .vc-week__day[data-vc-week-day-off] {
-  @apply text-rose-500 surehover:hover:text-rose-600;
+  @apply text-rose-500;
+}
+
+[data-vc-theme='light'] button.vc-week__day[data-vc-week-day-off] {
+  @apply surehover:hover:text-rose-600;
 }
 
 [data-vc-theme='light'] .vc-date[data-vc-date-selected='middle'][data-vc-date-weekend][data-vc-date-selected] .vc-date__btn,
diff --git a/package/src/styles/themes/slate-light.css b/package/src/styles/themes/slate-light.css
index a5670a16..7863ea0a 100644
--- a/package/src/styles/themes/slate-light.css
+++ b/package/src/styles/themes/slate-light.css
@@ -44,11 +44,19 @@
 }
 
 [data-vc-theme='slate-light'] .vc-week__day {
-  @apply text-gray-600 surehover:hover:text-gray-800;
+  @apply text-gray-600;
+}
+
+[data-vc-theme='slate-light'] button.vc-week__day {
+  @apply surehover:hover:text-gray-800;
 }
 
 [data-vc-theme='slate-light'] .vc-week__day[data-vc-week-day-off] {
-  @apply text-red-500 surehover:hover:text-red-600;
+  @apply text-red-500;
+}
+
+[data-vc-theme='slate-light'] button.vc-week__day[data-vc-week-day-off] {
+  @apply surehover:hover:text-red-600;
 }
 
 [data-vc-theme='slate-light'] .vc-date[data-vc-date-selected='middle'][data-vc-date-weekend][data-vc-date-selected] .vc-date__btn,