Skip to content

Commit

Permalink
update primary classes and use flowbite icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@zoltanszogyenyi
zoltanszogyenyi committed Nov 7, 2023
1 parent e830e81 commit 7a9f619
Show file tree
Hide file tree
Showing 12 changed files with 53 additions and 48 deletions.
30 changes: 15 additions & 15 deletions dist/js/datepicker-full.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -433,10 +433,10 @@
maxNumberOfDates: 1,
maxView: 3,
minDate: null,
nextArrow: '<svg class="w-4 h-4 rtl:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>',
nextArrow: '<svg class="w-4 h-4 rtl:rotate-180 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/></svg>',
orientation: 'auto',
pickLevel: 0,
prevArrow: '<svg class="w-4 h-4 rtl:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>',
prevArrow: '<svg class="w-4 h-4 rtl:rotate-180 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/></svg>',
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
Expand Down Expand Up @@ -770,8 +770,8 @@
<div class="datepicker-main p-1"></div>
<div class="datepicker-footer">
<div class="datepicker-controls flex space-x-2 mt-2">
<button type="button" class="%buttonClass% today-btn text-white bg-blue-700 dark:bg-blue-600 hover:bg-blue-800 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
<button type="button" class="%buttonClass% clear-btn text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
<button type="button" class="%buttonClass% today-btn text-white bg-blue-700 !bg-primary-700 dark:bg-blue-600 dark:!bg-primary-600 hover:bg-blue-800 hover:!bg-primary-800 dark:hover:bg-blue-700 dark:hover:!bg-primary-700 focus:ring-4 focus:ring-blue-300 focus:!ring-primary-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
<button type="button" class="%buttonClass% clear-btn text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 focus:ring-4 focus:ring-blue-300 focus:!ring-primary-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
</div>
</div>
</div>
Expand Down Expand Up @@ -1023,7 +1023,7 @@
}
}
if (this.selected.includes(current)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');
classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'dark:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
}
if (current === this.focused) {
Expand All @@ -1042,7 +1042,7 @@
this.grid
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
.forEach((el) => {
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused');
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white', 'focused');
el.classList.add('text-gray-900', 'rounded-lg', 'dark:text-white');
});
Array.from(this.grid.children).forEach((el) => {
Expand All @@ -1062,7 +1062,7 @@
classList.remove('rounded-lg', 'rounded-l-lg');
}
if (this.selected.includes(current)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200', 'dark:bg-gray-600');
}
if (current === this.focused) {
Expand Down Expand Up @@ -1222,7 +1222,7 @@
}
}
if (selected.includes(index)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
}
if (index === this.focused) {
Expand All @@ -1242,7 +1242,7 @@
this.grid
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
.forEach((el) => {
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'dark:bg-blue-600', 'dark:text-white', 'text-white', 'focused');
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', '!bg-primary-700', 'dark:bg-blue-600', 'dark:!bg-primary-700', 'dark:text-white', 'text-white', 'focused');
el.classList.add('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
});
Array.from(this.grid.children).forEach((el, index) => {
Expand All @@ -1257,7 +1257,7 @@
classList.add('range-end');
}
if (selected.includes(index)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
}
if (index === this.focused) {
Expand Down Expand Up @@ -1388,7 +1388,7 @@
}
}
if (this.selected.includes(current)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
}
if (current === this.focused) {
Expand All @@ -1407,7 +1407,7 @@
this.grid
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
.forEach((el) => {
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused');
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark!bg-primary-600', 'dark:text-white', 'focused');
});
Array.from(this.grid.children).forEach((el) => {
const current = Number(el.textContent);
Expand All @@ -1422,7 +1422,7 @@
classList.add('range-end');
}
if (this.selected.includes(current)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
}
if (current === this.focused) {
Expand Down Expand Up @@ -2538,7 +2538,7 @@
return;
}
this.editMode = true;
this.inputField.classList.add('in-edit', 'border-blue-700');
this.inputField.classList.add('in-edit', 'border-blue-700', '!border-primary-700');
}

/**
Expand All @@ -2555,7 +2555,7 @@
}
const opts = Object.assign({update: false}, options);
delete this.editMode;
this.inputField.classList.remove('in-edit', 'border-blue-700');
this.inputField.classList.remove('in-edit', 'border-blue-700', '!border-primary-700');
if (opts.update) {
this.update(opts);
}
Expand Down
2 changes: 1 addition & 1 deletion dist/js/datepicker-full.min.js
View file

Large diffs are not rendered by default.

30 changes: 15 additions & 15 deletions dist/js/datepicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -433,10 +433,10 @@ var Datepicker = (function () {
maxNumberOfDates: 1,
maxView: 3,
minDate: null,
nextArrow: '<svg class="w-4 h-4 rtl:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>',
nextArrow: '<svg class="w-4 h-4 rtl:rotate-180 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/></svg>',
orientation: 'auto',
pickLevel: 0,
prevArrow: '<svg class="w-4 h-4 rtl:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>',
prevArrow: '<svg class="w-4 h-4 rtl:rotate-180 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/></svg>',
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
Expand Down Expand Up @@ -770,8 +770,8 @@ var Datepicker = (function () {
<div class="datepicker-main p-1"></div>
<div class="datepicker-footer">
<div class="datepicker-controls flex space-x-2 mt-2">
<button type="button" class="%buttonClass% today-btn text-white bg-blue-700 dark:bg-blue-600 hover:bg-blue-800 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
<button type="button" class="%buttonClass% clear-btn text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
<button type="button" class="%buttonClass% today-btn text-white bg-blue-700 !bg-primary-700 dark:bg-blue-600 dark:!bg-primary-600 hover:bg-blue-800 hover:!bg-primary-800 dark:hover:bg-blue-700 dark:hover:!bg-primary-700 focus:ring-4 focus:ring-blue-300 focus:!ring-primary-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
<button type="button" class="%buttonClass% clear-btn text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 focus:ring-4 focus:ring-blue-300 focus:!ring-primary-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
</div>
</div>
</div>
Expand Down Expand Up @@ -1023,7 +1023,7 @@ var Datepicker = (function () {
}
}
if (this.selected.includes(current)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');
classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'dark:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
}
if (current === this.focused) {
Expand All @@ -1042,7 +1042,7 @@ var Datepicker = (function () {
this.grid
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
.forEach((el) => {
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused');
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white', 'focused');
el.classList.add('text-gray-900', 'rounded-lg', 'dark:text-white');
});
Array.from(this.grid.children).forEach((el) => {
Expand All @@ -1062,7 +1062,7 @@ var Datepicker = (function () {
classList.remove('rounded-lg', 'rounded-l-lg');
}
if (this.selected.includes(current)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200', 'dark:bg-gray-600');
}
if (current === this.focused) {
Expand Down Expand Up @@ -1222,7 +1222,7 @@ var Datepicker = (function () {
}
}
if (selected.includes(index)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
}
if (index === this.focused) {
Expand All @@ -1242,7 +1242,7 @@ var Datepicker = (function () {
this.grid
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
.forEach((el) => {
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'dark:bg-blue-600', 'dark:text-white', 'text-white', 'focused');
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', '!bg-primary-700', 'dark:bg-blue-600', 'dark:!bg-primary-700', 'dark:text-white', 'text-white', 'focused');
el.classList.add('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
});
Array.from(this.grid.children).forEach((el, index) => {
Expand All @@ -1257,7 +1257,7 @@ var Datepicker = (function () {
classList.add('range-end');
}
if (selected.includes(index)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
}
if (index === this.focused) {
Expand Down Expand Up @@ -1388,7 +1388,7 @@ var Datepicker = (function () {
}
}
if (this.selected.includes(current)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
}
if (current === this.focused) {
Expand All @@ -1407,7 +1407,7 @@ var Datepicker = (function () {
this.grid
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
.forEach((el) => {
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused');
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark!bg-primary-600', 'dark:text-white', 'focused');
});
Array.from(this.grid.children).forEach((el) => {
const current = Number(el.textContent);
Expand All @@ -1422,7 +1422,7 @@ var Datepicker = (function () {
classList.add('range-end');
}
if (this.selected.includes(current)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
}
if (current === this.focused) {
Expand Down Expand Up @@ -2538,7 +2538,7 @@ var Datepicker = (function () {
return;
}
this.editMode = true;
this.inputField.classList.add('in-edit', 'border-blue-700');
this.inputField.classList.add('in-edit', 'border-blue-700', '!border-primary-700');
}

/**
Expand All @@ -2555,7 +2555,7 @@ var Datepicker = (function () {
}
const opts = Object.assign({update: false}, options);
delete this.editMode;
this.inputField.classList.remove('in-edit', 'border-blue-700');
this.inputField.classList.remove('in-edit', 'border-blue-700', '!border-primary-700');
if (opts.update) {
this.update(opts);
}
Expand Down
2 changes: 1 addition & 1 deletion dist/js/datepicker.min.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions js/Datepicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ export default class Datepicker {
return;
}
this.editMode = true;
this.inputField.classList.add('in-edit', 'border-blue-700');
this.inputField.classList.add('in-edit', 'border-blue-700', '!border-primary-700');
}

/**
Expand All @@ -479,7 +479,7 @@ export default class Datepicker {
}
const opts = Object.assign({update: false}, options);
delete this.editMode;
this.inputField.classList.remove('in-edit', 'border-blue-700');
this.inputField.classList.remove('in-edit', 'border-blue-700', '!border-primary-700');
if (opts.update) {
this.update(opts);
}
Expand Down
4 changes: 2 additions & 2 deletions js/options/defaultOptions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ const defaultOptions = {
maxNumberOfDates: 1,
maxView: 3,
minDate: null,
nextArrow: '<svg class="w-4 h-4 rtl:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>',
nextArrow: '<svg class="w-4 h-4 rtl:rotate-180 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/></svg>',
orientation: 'auto',
pickLevel: 0,
prevArrow: '<svg class="w-4 h-4 rtl:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>',
prevArrow: '<svg class="w-4 h-4 rtl:rotate-180 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/></svg>',
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
Expand Down
Loading

0 comments on commit 7a9f619

Please sign in to comment.