second commit

node_modules/flowbite-datepicker/js/events/functions.js

@@ -0,0 +1,48 @@
+import {limitToRange} from '../lib/utils.js';
+import {addMonths, addYears} from '../lib/date.js';
+
+export function triggerDatepickerEvent(datepicker, type) {
+  const detail = {
+    date: datepicker.getDate(),
+    viewDate: new Date(datepicker.picker.viewDate),
+    viewId: datepicker.picker.currentView.id,
+    datepicker,
+  };
+  datepicker.element.dispatchEvent(new CustomEvent(type, {detail}));
+}
+
+// direction: -1 (to previous), 1 (to next)
+export function goToPrevOrNext(datepicker, direction) {
+  const {minDate, maxDate} = datepicker.config;
+  const {currentView, viewDate} = datepicker.picker;
+  let newViewDate;
+  switch (currentView.id) {
+    case 0:
+      newViewDate = addMonths(viewDate, direction);
+      break;
+    case 1:
+      newViewDate = addYears(viewDate, direction);
+      break;
+    default:
+      newViewDate = addYears(viewDate, direction * currentView.navStep);
+  }
+  newViewDate = limitToRange(newViewDate, minDate, maxDate);
+  datepicker.picker.changeFocus(newViewDate).render();
+}
+
+export function switchView(datepicker) {
+  const viewId = datepicker.picker.currentView.id;
+  if (viewId === datepicker.config.maxView) {
+    return;
+  }
+  datepicker.picker.changeView(viewId + 1).render();
+}
+
+export function unfocus(datepicker) {
+  if (datepicker.config.updateOnBlur) {
+    datepicker.update({autohide: true});
+  } else {
+    datepicker.refresh('input');
+    datepicker.hide();
+  }
+}

node_modules/flowbite-datepicker/js/events/inputFieldListeners.js

@@ -0,0 +1,206 @@
+import {isInRange} from '../lib/utils.js';
+import {addDays, addMonths, addYears, startOfYearPeriod} from '../lib/date.js';
+import {goToPrevOrNext, switchView, unfocus} from './functions.js';
+
+// Find the closest date that doesn't meet the condition for unavailable date
+// Returns undefined if no available date is found
+// addFn: function to calculate the next date
+//   - args: time value, amount
+// increase: amount to pass to addFn
+// testFn: function to test the unavailablity of the date
+//   - args: time value; retun: true if unavailable
+function findNextAvailableOne(date, addFn, increase, testFn, min, max) {
+  if (!isInRange(date, min, max)) {
+    return;
+  }
+  if (testFn(date)) {
+    const newDate = addFn(date, increase);
+    return findNextAvailableOne(newDate, addFn, increase, testFn, min, max);
+  }
+  return date;
+}
+
+// direction: -1 (left/up), 1 (right/down)
+// vertical: true for up/down, false for left/right
+function moveByArrowKey(datepicker, ev, direction, vertical) {
+  const picker = datepicker.picker;
+  const currentView = picker.currentView;
+  const step = currentView.step || 1;
+  let viewDate = picker.viewDate;
+  let addFn;
+  let testFn;
+  switch (currentView.id) {
+    case 0:
+      if (vertical) {
+        viewDate = addDays(viewDate, direction * 7);
+      } else if (ev.ctrlKey || ev.metaKey) {
+        viewDate = addYears(viewDate, direction);
+      } else {
+        viewDate = addDays(viewDate, direction);
+      }
+      addFn = addDays;
+      testFn = (date) => currentView.disabled.includes(date);
+      break;
+    case 1:
+      viewDate = addMonths(viewDate, vertical ? direction * 4 : direction);
+      addFn = addMonths;
+      testFn = (date) => {
+        const dt = new Date(date);
+        const {year, disabled} = currentView;
+        return dt.getFullYear() === year && disabled.includes(dt.getMonth());
+      };
+      break;
+    default:
+      viewDate = addYears(viewDate, direction * (vertical ? 4 : 1) * step);
+      addFn = addYears;
+      testFn = date => currentView.disabled.includes(startOfYearPeriod(date, step));
+  }
+  viewDate = findNextAvailableOne(
+    viewDate,
+    addFn,
+    direction < 0 ? -step : step,
+    testFn,
+    currentView.minDate,
+    currentView.maxDate
+  );
+  if (viewDate !== undefined) {
+    picker.changeFocus(viewDate).render();
+  }
+}
+
+export function onKeydown(datepicker, ev) {
+  if (ev.key === 'Tab') {
+    unfocus(datepicker);
+    return;
+  }
+
+  const picker = datepicker.picker;
+  const {id, isMinView} = picker.currentView;
+  if (!picker.active) {
+    switch (ev.key) {
+      case 'ArrowDown':
+      case 'Escape':
+        picker.show();
+        break;
+      case 'Enter':
+        datepicker.update();
+        break;
+      default:
+        return;
+    }
+  } else if (datepicker.editMode) {
+    switch (ev.key) {
+      case 'Escape':
+        picker.hide();
+        break;
+      case 'Enter':
+        datepicker.exitEditMode({update: true, autohide: datepicker.config.autohide});
+        break;
+      default:
+        return;
+    }
+  } else {
+    switch (ev.key) {
+      case 'Escape':
+        picker.hide();
+        break;
+      case 'ArrowLeft':
+        if (ev.ctrlKey || ev.metaKey) {
+          goToPrevOrNext(datepicker, -1);
+        } else if (ev.shiftKey) {
+          datepicker.enterEditMode();
+          return;
+        } else {
+          moveByArrowKey(datepicker, ev, -1, false);
+        }
+        break;
+      case 'ArrowRight':
+        if (ev.ctrlKey || ev.metaKey) {
+          goToPrevOrNext(datepicker, 1);
+        } else if (ev.shiftKey) {
+          datepicker.enterEditMode();
+          return;
+        } else {
+          moveByArrowKey(datepicker, ev, 1, false);
+        }
+        break;
+      case 'ArrowUp':
+        if (ev.ctrlKey || ev.metaKey) {
+          switchView(datepicker);
+        } else if (ev.shiftKey) {
+          datepicker.enterEditMode();
+          return;
+        } else {
+          moveByArrowKey(datepicker, ev, -1, true);
+        }
+        break;
+      case 'ArrowDown':
+        if (ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
+          datepicker.enterEditMode();
+          return;
+        }
+        moveByArrowKey(datepicker, ev, 1, true);
+        break;
+      case 'Enter':
+        if (isMinView) {
+          datepicker.setDate(picker.viewDate);
+        } else {
+          picker.changeView(id - 1).render();
+        }
+        break;
+      case 'Backspace':
+      case 'Delete':
+        datepicker.enterEditMode();
+        return;
+      default:
+        if (ev.key.length === 1 && !ev.ctrlKey && !ev.metaKey) {
+          datepicker.enterEditMode();
+        }
+        return;
+    }
+  }
+  ev.preventDefault();
+  ev.stopPropagation();
+}
+
+export function onFocus(datepicker) {
+  if (datepicker.config.showOnFocus && !datepicker._showing) {
+    datepicker.show();
+  }
+}
+
+// for the prevention for entering edit mode while getting focus on click
+export function onMousedown(datepicker, ev) {
+  const el = ev.target;
+  if (datepicker.picker.active || datepicker.config.showOnClick) {
+    el._active = el === document.activeElement;
+    el._clicking = setTimeout(() => {
+      delete el._active;
+      delete el._clicking;
+    }, 2000);
+  }
+}
+
+export function onClickInput(datepicker, ev) {
+  const el = ev.target;
+  if (!el._clicking) {
+    return;
+  }
+  clearTimeout(el._clicking);
+  delete el._clicking;
+
+  if (el._active) {
+    datepicker.enterEditMode();
+  }
+  delete el._active;
+
+  if (datepicker.config.showOnClick) {
+    datepicker.show();
+  }
+}
+
+export function onPaste(datepicker, ev) {
+  if (ev.clipboardData.types.includes('text/plain')) {
+    datepicker.enterEditMode();
+  }
+}

node_modules/flowbite-datepicker/js/events/otherListeners.js

@@ -0,0 +1,15 @@
+import {findElementInEventPath} from '../lib/event.js';
+import {unfocus} from './functions.js';
+
+// for the `document` to delegate the events from outside the picker/input field
+export function onClickOutside(datepicker, ev) {
+  const element = datepicker.element;
+  if (element !== document.activeElement) {
+    return;
+  }
+  const pickerElem = datepicker.picker.element;
+  if (findElementInEventPath(ev, el => el === element || el === pickerElem)) {
+    return;
+  }
+  unfocus(datepicker);
+}

node_modules/flowbite-datepicker/js/events/pickerListeners.js

@@ -0,0 +1,70 @@
+import {today, addMonths, addYears} from '../lib/date.js';
+import {findElementInEventPath} from '../lib/event.js';
+import {goToPrevOrNext, switchView} from './functions.js';
+
+function goToSelectedMonthOrYear(datepicker, selection) {
+  const picker = datepicker.picker;
+  const viewDate = new Date(picker.viewDate);
+  const viewId = picker.currentView.id;
+  const newDate = viewId === 1
+    ? addMonths(viewDate, selection - viewDate.getMonth())
+    : addYears(viewDate, selection - viewDate.getFullYear());
+
+  picker.changeFocus(newDate).changeView(viewId - 1).render();
+}
+
+export function onClickTodayBtn(datepicker) {
+  const picker = datepicker.picker;
+  const currentDate = today();
+  if (datepicker.config.todayBtnMode === 1) {
+    if (datepicker.config.autohide) {
+      datepicker.setDate(currentDate);
+      return;
+    }
+    datepicker.setDate(currentDate, {render: false});
+    picker.update();
+  }
+  if (picker.viewDate !== currentDate) {
+    picker.changeFocus(currentDate);
+  }
+  picker.changeView(0).render();
+}
+
+export function onClickClearBtn(datepicker) {
+  datepicker.setDate({clear: true});
+}
+
+export function onClickViewSwitch(datepicker) {
+  switchView(datepicker);
+}
+
+export function onClickPrevBtn(datepicker) {
+  goToPrevOrNext(datepicker, -1);
+}
+
+export function onClickNextBtn(datepicker) {
+  goToPrevOrNext(datepicker, 1);
+}
+
+// For the picker's main block to delegete the events from `datepicker-cell`s
+export function onClickView(datepicker, ev) {
+  const target = findElementInEventPath(ev, '.datepicker-cell');
+  if (!target || target.classList.contains('disabled')) {
+    return;
+  }
+
+  const {id, isMinView} = datepicker.picker.currentView;
+  if (isMinView) {
+    datepicker.setDate(Number(target.dataset.date));
+  } else if (id === 1) {
+    goToSelectedMonthOrYear(datepicker, Number(target.dataset.month));
+  } else {
+    goToSelectedMonthOrYear(datepicker, Number(target.dataset.year));
+  }
+}
+
+export function onClickPicker(datepicker) {
+  if (!datepicker.inline && !datepicker.config.disableTouchKeyboard) {
+    datepicker.inputField.focus();
+  }
+}