universal-datetime-picker 2.0.0 → 2.0.1

package/README.md

@@ -2,7 +2,7 @@
 [![npm downloads](https://img.shields.io/npm/dm/universal-datetime-picker.svg)](https://www.npmjs.com/package/universal-datetime-picker)
 [![types](https://img.shields.io/npm/types/universal-datetime-picker.svg)](https://www.npmjs.com/package/universal-datetime-picker)
 [![CI](https://github.com/Bhardwaj-Raghav/universal-datetime-picker/actions/workflows/ci.yml/badge.svg)](https://github.com/Bhardwaj-Raghav/universal-datetime-picker/actions/workflows/ci.yml)
-[![license](https://img.shields.io/npm/l/universal-datetime-picker.svg)](https://github.com/Bhardwaj-Raghav/universal-datetime-picker/blob/main/LICENSE)
+[![license](https://img.shields.io/github/license/Bhardwaj-Raghav/universal-datetime-picker)](https://github.com/Bhardwaj-Raghav/universal-datetime-picker/blob/main/LICENSE)
 
 # universal-datetime-picker
 
@@ -114,7 +114,7 @@ const handle = createDateTimePicker(root, {
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/universal-datetime-picker/style.css"
+  href="https://cdn.jsdelivr.net/npm/universal-datetime-picker/dist/style.css"
 />
 <script src="https://cdn.jsdelivr.net/npm/universal-datetime-picker"></script>
 

package/dist/angular/index.d.mts

@@ -1,6 +1,6 @@
 export { defineCustomElements } from '../wc/index.mjs';
-import '../rangeRenderer-AVv6PJbW.mjs';
-import '../rangeController-Bq35aBwe.mjs';
+import '../rangeRenderer-CE99Ji3Q.mjs';
+import '../rangeController-BBZcdM0Z.mjs';
 import 'dayjs';
 
 /**

package/dist/angular/index.d.ts

@@ -1,6 +1,6 @@
 export { defineCustomElements } from '../wc/index.js';
-import '../rangeRenderer-a3hFk-kK.js';
-import '../rangeController-Bq35aBwe.js';
+import '../rangeRenderer-CeLuwT6V.js';
+import '../rangeController-BBZcdM0Z.js';
 import 'dayjs';
 
 /**

package/dist/angular/index.js

@@ -397,23 +397,28 @@ var PickerController = class {
     this.draft = this.draft.year(day.year()).month(day.month()).date(day.date());
     this.focusedDay = day;
     this.emit();
+    this.maybeCommitInline();
   }
   setHour(hourValue) {
     this.draft = this.draft.hour(hourValue);
     this.emit();
+    this.maybeCommitInline();
   }
   setMinute(minute) {
     this.draft = this.draft.minute(minute);
     this.emit();
+    this.maybeCommitInline();
   }
   setSecond(second) {
     this.draft = this.draft.second(second);
     this.emit();
+    this.maybeCommitInline();
   }
   setAmPm(isAm) {
     const { hour } = to12Hour(this.draft.hour());
     this.draft = this.draft.hour(to24Hour(hour, isAm));
     this.emit();
+    this.maybeCommitInline();
   }
   toggleHours() {
     this.showHours = !this.showHours;
@@ -459,22 +464,26 @@ var PickerController = class {
     }
     this.showHours = false;
     this.emit();
+    this.maybeCommitInline();
   }
   selectMinuteOption(opt) {
     this.draft = this.draft.minute(Number(opt));
     this.showMinutes = false;
     this.emit();
+    this.maybeCommitInline();
   }
   selectSecondOption(opt) {
     this.draft = this.draft.second(Number(opt));
     this.showSecondsOpen = false;
     this.emit();
+    this.maybeCommitInline();
   }
   selectAmPmOption(opt) {
     const { hour } = to12Hour(this.draft.hour());
     this.draft = this.draft.hour(to24Hour(hour, opt === "AM"));
     this.showAmPm = false;
     this.emit();
+    this.maybeCommitInline();
   }
   handleGridKeyDown(key) {
     const snap = this.snapshot;
@@ -524,23 +533,30 @@ var PickerController = class {
     this.emit();
     return true;
   }
-  confirm() {
+  buildPayload() {
     const snap = this.snapshot;
-    let payload;
     if (snap.asString === false) {
       if (snap.mode === "time") {
-        payload = buildTimeValue(this.draft, snap.resolvedFormat);
-      } else if (snap.mode === "date") {
-        payload = this.draft.startOf("day").toDate();
-      } else {
-        payload = this.draft.toDate();
+        return buildTimeValue(this.draft, snap.resolvedFormat);
       }
-    } else {
-      if (snap.asString === void 0) {
-        warnAsStringDeprecation();
+      if (snap.mode === "date") {
+        return this.draft.startOf("day").toDate();
       }
-      payload = formatValue(this.draft, snap.resolvedFormat);
+      return this.draft.toDate();
     }
+    if (snap.asString === void 0) {
+      warnAsStringDeprecation();
+    }
+    return formatValue(this.draft, snap.resolvedFormat);
+  }
+  maybeCommitInline() {
+    if (!this.options.inline) {
+      return;
+    }
+    this.options.onChange?.(this.buildPayload());
+  }
+  confirm() {
+    const payload = this.buildPayload();
     this.options.onChange?.(payload);
     this.close();
     return payload;
@@ -1132,13 +1148,15 @@ function renderPicker(controller, snap, titleId, position, options) {
       })
     );
   }
-  footerChildren.push(
-    el("button", {
-      type: "button",
-      onClick: () => controller.confirm(),
-      textContent: snap.labels.ok
-    })
-  );
+  if (!snap.inline) {
+    footerChildren.push(
+      el("button", {
+        type: "button",
+        onClick: () => controller.confirm(),
+        textContent: snap.labels.ok
+      })
+    );
+  }
   picker.append(el("div", { className: "ctp-footer" }, footerChildren));
   return picker;
 }
@@ -1272,6 +1290,15 @@ var RangeController = class {
       end: parseValue(range?.end ?? null, format)
     };
   }
+  sameDay(a, b) {
+    if (a === null && b === null) {
+      return true;
+    }
+    if (a === null || b === null) {
+      return false;
+    }
+    return a.isSame(b, "day");
+  }
   setOptions(partial) {
     this.options = { ...this.options, ...partial };
     if (partial.open !== void 0) {
@@ -1285,11 +1312,14 @@ var RangeController = class {
       } else if (partial.value !== void 0) {
         const format = this.options.format ?? DATE_FORMAT;
         const parsed = this.parseRange(partial.value, format);
-        this.start = parsed.start;
-        this.end = parsed.end;
-        if (parsed.start) {
-          this.viewMonth = parsed.start.startOf("month");
-          this.focusedDay = parsed.start;
+        const unchanged = this.sameDay(parsed.start, this.start) && this.sameDay(parsed.end, this.end);
+        if (!unchanged) {
+          this.start = parsed.start;
+          this.end = parsed.end;
+          if (parsed.start) {
+            this.viewMonth = parsed.start.startOf("month");
+            this.focusedDay = parsed.start;
+          }
         }
       }
     }
@@ -1421,6 +1451,11 @@ var RangeController = class {
       this.focusedDay = day;
     }
     this.emit();
+    if (this.options.asString === false) {
+      this.emitRange(this.start, this.end);
+    } else if (this.options.inline && this.start && this.end) {
+      this.emitRange(this.start, this.end);
+    }
   }
   setHoverEnd(day) {
     if (this.start && !this.end) {
@@ -1540,12 +1575,51 @@ function applyStyle2(node, style) {
   }
   Object.assign(node.style, style);
 }
+function sameDay(a, b) {
+  if (a === null && b === null) {
+    return true;
+  }
+  if (a === null || b === null) {
+    return false;
+  }
+  return a.isSame(b, "day");
+}
+function dayDateClassName(dayData) {
+  return cx(
+    "ctp-box",
+    "ctp-box-date",
+    !dayData.isCurrentMonth && "not-current-month",
+    dayData.isDisabled && "disabled-date",
+    dayData.isWeekend && "weekend-day",
+    dayData.isCurrentDate && "ctp-today",
+    dayData.isInRange && "ctp-in-range",
+    dayData.isRangeStart && "ctp-range-start",
+    dayData.isRangeEnd && "ctp-range-end"
+  );
+}
+function syncDayButton(btn, dayData, snap) {
+  const focused = dayData.date.isSame(snap.focusedDay, "day");
+  const disabled = !dayData.isCurrentMonth || dayData.isDisabled;
+  btn.className = dayDateClassName(dayData);
+  btn.tabIndex = focused ? 0 : -1;
+  btn.disabled = disabled;
+  btn.setAttribute(
+    "aria-selected",
+    String(Boolean(dayData.isRangeStart || dayData.isRangeEnd))
+  );
+  btn.setAttribute("aria-disabled", String(disabled));
+}
+function canPatchHoverOnly(prev, next) {
+  return prev.calPanel === "day" && next.calPanel === "day" && prev.viewMonth.isSame(next.viewMonth, "month") && sameDay(prev.start, next.start) && sameDay(prev.end, next.end) && prev.focusedDay.isSame(next.focusedDay, "day") && prev.open === next.open && prev.inline === next.inline;
+}
 function createDateTimeRangePicker(target, options = {}) {
   const controller = new RangeController(options);
   const titleId = `ctp-range-${Math.random().toString(36).slice(2, 9)}`;
   let cleanups = [];
   let host = null;
   let portalRoot = null;
+  let lastSnap = null;
+  let dayButtons = null;
   const teardown = () => {
     cleanups.forEach((c) => c());
     cleanups = [];
@@ -1553,13 +1627,29 @@ function createDateTimeRangePicker(target, options = {}) {
     portalRoot = null;
     host?.remove();
     host = null;
+    lastSnap = null;
+    dayButtons = null;
   };
   const paint = () => {
-    teardown();
     const snap = controller.getSnapshot();
     if (!snap.open && !snap.inline) {
+      teardown();
+      return;
+    }
+    if (lastSnap && dayButtons && host && canPatchHoverOnly(lastSnap, snap)) {
+      for (const week of snap.weeks) {
+        for (const dayData of week) {
+          const key = dayData.date.format("YYYY-MM-DD");
+          const btn = dayButtons.get(key);
+          if (btn) {
+            syncDayButton(btn, dayData, snap);
+          }
+        }
+      }
+      lastSnap = snap;
       return;
     }
+    teardown();
     const now = dayjs__default.default();
     const year = snap.viewMonth.year();
     const windowStart = Math.floor(year / 12) * 12;
@@ -1608,6 +1698,7 @@ function createDateTimeRangePicker(target, options = {}) {
       ])
     ]);
     if (snap.calPanel === "day") {
+      const buttons = /* @__PURE__ */ new Map();
       const grid = el2("div", {
         className: "ctp-main-calendar",
         role: "grid",
@@ -1618,7 +1709,8 @@ function createDateTimeRangePicker(target, options = {}) {
           if (controller.handleGridKeyDown(ke.key)) {
             ke.preventDefault();
           }
-        }
+        },
+        onMouseleave: () => controller.setHoverEnd(null)
       });
       for (const label of snap.weekdayLabels) {
         grid.append(
@@ -1633,47 +1725,38 @@ function createDateTimeRangePicker(target, options = {}) {
         for (const dayData of week) {
           const focused = dayData.date.isSame(snap.focusedDay, "day");
           const disabled = !dayData.isCurrentMonth || dayData.isDisabled;
-          grid.append(
-            el2("button", {
-              type: "button",
-              role: "gridcell",
-              tabIndex: focused ? 0 : -1,
-              ariaSelected: Boolean(
-                dayData.isRangeStart || dayData.isRangeEnd
-              ),
-              ariaDisabled: disabled,
-              disabled,
-              ariaLabel: formatLocalized(
-                dayData.date,
-                "dddd, MMMM D, YYYY",
-                snap.locale
-              ),
-              className: cx(
-                "ctp-box",
-                "ctp-box-date",
-                !dayData.isCurrentMonth && "not-current-month",
-                dayData.isDisabled && "disabled-date",
-                dayData.isWeekend && "weekend-day",
-                dayData.isCurrentDate && "ctp-today",
-                dayData.isInRange && "ctp-in-range",
-                dayData.isRangeStart && "ctp-range-start",
-                dayData.isRangeEnd && "ctp-range-end"
-              ),
-              onClick: () => {
-                if (!disabled) {
-                  controller.pickDay(dayData.date);
-                }
-              },
-              onMouseenter: () => {
-                if (!disabled && snap.start && !snap.end) {
-                  controller.setHoverEnd(dayData.date);
-                }
-              },
-              textContent: dayData.date.format("D")
-            })
-          );
+          const btn = el2("button", {
+            type: "button",
+            role: "gridcell",
+            tabIndex: focused ? 0 : -1,
+            ariaSelected: Boolean(
+              dayData.isRangeStart || dayData.isRangeEnd
+            ),
+            ariaDisabled: disabled,
+            disabled,
+            ariaLabel: formatLocalized(
+              dayData.date,
+              "dddd, MMMM D, YYYY",
+              snap.locale
+            ),
+            className: dayDateClassName(dayData),
+            onClick: () => {
+              if (!disabled) {
+                controller.pickDay(dayData.date);
+              }
+            },
+            onMouseenter: () => {
+              if (!disabled && snap.start && !snap.end) {
+                controller.setHoverEnd(dayData.date);
+              }
+            },
+            textContent: dayData.date.format("D")
+          });
+          buttons.set(dayData.date.format("YYYY-MM-DD"), btn);
+          grid.append(btn);
         }
       }
+      dayButtons = buttons;
       body.append(grid);
     } else if (snap.calPanel === "month") {
       const grid = el2("div", {
@@ -1743,14 +1826,16 @@ function createDateTimeRangePicker(target, options = {}) {
         })
       );
     }
-    footerChildren.push(
-      el2("button", {
-        type: "button",
-        disabled: !snap.start || !snap.end,
-        onClick: () => controller.confirm(),
-        textContent: snap.labels.ok
-      })
-    );
+    if (!snap.inline) {
+      footerChildren.push(
+        el2("button", {
+          type: "button",
+          disabled: !snap.start || !snap.end,
+          onClick: () => controller.confirm(),
+          textContent: snap.labels.ok
+        })
+      );
+    }
     const picker = el2(
       "div",
       {
@@ -1775,6 +1860,7 @@ function createDateTimeRangePicker(target, options = {}) {
     if (snap.inline) {
       host = picker;
       target.append(picker);
+      lastSnap = snap;
       return;
     }
     const backdrop = el2("div", {
@@ -1792,6 +1878,7 @@ function createDateTimeRangePicker(target, options = {}) {
       attachFocusTrap(picker),
       attachEscape(() => controller.close())
     );
+    lastSnap = snap;
   };
   const unsub = controller.subscribe(paint);
   paint();