refactor(datepicker): fix range selector button

themesberg · Jun 11, 2024 · 5f781d2 · 5f781d2
1 parent 802fe4c
commit 5f781d2
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 9 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="">
+<html class="dark">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

diff --git a/dist/js/datepicker-full.js b/dist/js/datepicker-full.js
@@ -1057,11 +1057,11 @@
         }
         if (current === rangeStart) {
           classList.add('range-start', 'bg-gray-200', 'dark:bg-gray-600', 'rounded-l-lg');
-          classList.remove('rounded-lg', 'rounded-r-lg');
+          classList.remove('rounded-lg',);
         }
         if (current === rangeEnd) {
           classList.add('range-end', 'bg-gray-200', 'dark:bg-gray-600', 'rounded-r-lg');
-          classList.remove('rounded-lg', 'rounded-l-lg');
+          classList.remove('rounded-lg',);
         }
         if (this.selected.includes(current)) {
           classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');

diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js
@@ -1057,11 +1057,11 @@ var Datepicker = (function () {
         }
         if (current === rangeStart) {
           classList.add('range-start', 'bg-gray-200', 'dark:bg-gray-600', 'rounded-l-lg');
-          classList.remove('rounded-lg', 'rounded-r-lg');
+          classList.remove('rounded-lg',);
         }
         if (current === rangeEnd) {
           classList.add('range-end', 'bg-gray-200', 'dark:bg-gray-600', 'rounded-r-lg');
-          classList.remove('rounded-lg', 'rounded-l-lg');
+          classList.remove('rounded-lg',);
         }
         if (this.selected.includes(current)) {
           classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');

diff --git a/js/picker/views/DaysView.js b/js/picker/views/DaysView.js
@@ -223,11 +223,11 @@ export default class DaysView extends View {
       }
       if (current === rangeStart) {
         classList.add('range-start', 'bg-gray-200', 'dark:bg-gray-600', 'rounded-l-lg');
-        classList.remove('rounded-lg', 'rounded-r-lg');
+        classList.remove('rounded-lg',);
       }
       if (current === rangeEnd) {
         classList.add('range-end', 'bg-gray-200', 'dark:bg-gray-600', 'rounded-r-lg');
-        classList.remove('rounded-lg', 'rounded-l-lg');
+        classList.remove('rounded-lg',);
       }
       if (this.selected.includes(current)) {
         classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');

diff --git a/tailwind.css b/tailwind.css
@@ -997,8 +997,8 @@ input[type="range"]::-ms-fill-lower {
   top: 0px;
 }
 
-.z-20 {
-  z-index: 20;
+.z-50 {
+  z-index: 50;
 }
 
 .mb-1 {
@@ -1234,6 +1234,11 @@ input[type="range"]::-ms-fill-lower {
   line-height: 2.25rem;
 }
 
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -1324,6 +1329,10 @@ input[type="range"]::-ms-fill-lower {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+:is([dir="rtl"] .rtl\:space-x-reverse) > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 1;
+}
+
 :is(.dark .dark\:border-gray-600) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
@@ -1354,6 +1363,11 @@ input[type="range"]::-ms-fill-lower {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+:is(.dark .dark\:text-gray-500) {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 :is(.dark .dark\:text-white) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));