@zeyos/zx 4.2.0 → 4.3.4

package/dist/zx-zeyos.esm.js

@@ -870,21 +870,26 @@ var Component = class extends EventTarget {
    * Dispatches a component event and a bubbling, composed `zx-*` DOM event.
    * @param {string} type Lowercase event name.
    * @param {Record<string, unknown>} [detail={}] Single event detail object.
+   * @param {{honorDomCancellation?:boolean}} [options={}] Mirrored DOM-event behavior. Components
+   * with a cancelable mutation boundary may opt into treating `preventDefault()` on the bubbling
+   * `zx-*` event exactly like cancellation of the component event.
    * @returns {Event & {detail: Record<string, unknown>}}
    * @fires Component#event
    */
-  emit(type, detail = {}) {
+  emit(type, detail = {}, options = {}) {
     if (detail === null || typeof detail !== "object" || Array.isArray(detail)) {
       throw new TypeError("Event detail must be an object");
     }
     const componentEvent = createCustomEvent(type, detail, { cancelable: true });
     this.dispatchEvent(componentEvent);
     if (this.el) {
-      this.el.dispatchEvent(createCustomEvent(`zx-${type}`, detail, {
+      const domEvent = createCustomEvent(`zx-${type}`, detail, {
         bubbles: true,
         composed: true,
         cancelable: true
-      }));
+      });
+      this.el.dispatchEvent(domEvent);
+      if (options.honorDomCancellation && domEvent.defaultPrevented) componentEvent.preventDefault();
     }
     return componentEvent;
   }
@@ -9563,6 +9568,15 @@ function currencyCode(value) {
   return /^[A-Z]{3}$/.test(code) ? code : null;
 }
 
+// src/core/overlay-host.js
+var SCOPE_SELECTOR = ".zx-scope, [data-zx-theme], [data-zx-density], [data-zx-preset]";
+function overlayHost(source = null) {
+  const context = source == null ? document.activeElement instanceof Element ? document.activeElement : null : resolveElement(source);
+  const scope2 = context?.closest?.(SCOPE_SELECTOR) ?? null;
+  if (!scope2 || scope2 === document.documentElement || scope2 === document.body) return document.body;
+  return scope2;
+}
+
 // src/components/table/sort.js
 function compareStrings(left, right) {
   return String(left).localeCompare(String(right));
@@ -12056,7 +12070,8 @@ var Launcher = class extends Component {
     emptyText: "No results",
     loadingText: "Searching\u2026",
     shortcut: "mod+k",
-    hints: { move: "Move", open: "Open", close: "Close" }
+    hints: { move: "Move", open: "Open", close: "Close" },
+    scope: null
   };
   /**
    * Creates an owned launcher dialog or enhances an existing `<dialog>` target.
@@ -12147,7 +12162,7 @@ var Launcher = class extends Component {
       )
     );
     dialog.dataset.state = "closed";
-    if (this._createdRoot) document.body.append(dialog);
+    if (this._createdRoot) overlayHost(this.options.scope).append(dialog);
     this.listen(input, "input", () => {
       this._query = /** @type {HTMLInputElement} */
       input.value;
@@ -12198,6 +12213,10 @@ var Launcher = class extends Component {
   /** Opens the launcher and focuses/selects its query. @returns {this} @fires Launcher#open */
   open() {
     if (this.isOpen() || this._destroyed) return this;
+    if (this._createdRoot) {
+      const host = overlayHost(this.options.scope);
+      if (this.el.parentElement !== host) host.append(this.el);
+    }
     this.el.showModal();
     this.el.dataset.state = "open";
     this.refs.input.setAttribute("aria-expanded", "true");
@@ -12753,8 +12772,8 @@ var Message = class _Message extends Component {
     closable: true,
     maxVisible: 5
   };
-  /** @type {Message|null} */
-  static #floating = null;
+  /** @type {WeakMap<Element, Message>} */
+  static #floating = /* @__PURE__ */ new WeakMap();
   /** @returns {HTMLElement} */
   render() {
     const created = !this.el;
@@ -12833,15 +12852,16 @@ var Message = class _Message extends Component {
    * @returns {MessageHandle}
    */
   static show(msg, options = {}) {
-    return this.#floatingRegion().show(msg, options);
+    return this.#floatingRegion(options.scope).show(msg, options);
   }
   /**
    * Shows a floating progress status.
    * @param {string} text Initial status text.
+   * @param {{scope?: Element|string|null}} [options={}] Floating-region scope.
    * @returns {ProgressHandle}
    */
-  static progress(text3) {
-    return this.#floatingRegion()._progress(text3);
+  static progress(text3, options = {}) {
+    return this.#floatingRegion(options.scope)._progress(text3);
   }
   /** @returns {void} */
   destroy() {
@@ -13019,19 +13039,22 @@ var Message = class _Message extends Component {
     this._entries.delete(entry);
     this._queue.remove(entry);
   }
-  /** @returns {Message} */
-  static #floatingRegion() {
-    if (this.#floating) return this.#floating;
+  /** @param {Element|string|null|undefined} scope @returns {Message} */
+  static #floatingRegion(scope2) {
+    const host = overlayHost(scope2 ?? null);
+    const existing = this.#floating.get(host);
+    if (existing) return existing;
     const region = h("div", {
       class: "zx-message-region",
       popover: "manual",
       role: "status",
       ariaLive: "polite"
     });
-    document.body.append(region);
-    this.#floating = new _Message(region);
+    host.append(region);
+    const floating = new _Message(region);
+    this.#floating.set(host, floating);
     if (typeof region.showPopover === "function") region.showPopover();
-    return this.#floating;
+    return floating;
   }
 };
 function normalizeKind(value) {
@@ -13114,6 +13137,29 @@ function calendarRange(view, anchor, options = {}) {
   }
   return { start, end };
 }
+function calendarPageDate(view, anchor, direction, options = {}) {
+  const date = validDate5(anchor, "Calendar date");
+  const step = integer(direction, "direction");
+  if (view === "day") date.setDate(date.getDate() + step);
+  else if (view === "agenda") {
+    date.setDate(date.getDate() + step * positiveInteger(options.agendaDays ?? 14, "agendaDays"));
+  } else if (view === "week") date.setDate(date.getDate() + step * 7);
+  else if (view === "month") return addCalendarMonths(date, step);
+  else if (view === "year") return addCalendarMonths(date, step * 12);
+  else throw new RangeError(`Unknown calendar view: ${view}`);
+  return date;
+}
+function addCalendarMonths(value, months) {
+  const date = validDate5(value, "Calendar date");
+  const day = date.getDate();
+  date.setDate(1);
+  date.setMonth(date.getMonth() + integer(months, "month amount"));
+  date.setDate(Math.min(day, daysInCalendarMonth(date.getFullYear(), date.getMonth())));
+  return date;
+}
+function daysInCalendarMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
 function normalizeCalendarEvents(records, options = {}) {
   if (!Array.isArray(records)) throw new TypeError("Calendar events must be an array");
   const readers = {
@@ -13557,7 +13603,7 @@ var Calendar = class extends Component {
       durationEditable: Object.prototype.hasOwnProperty.call(changes, "durationEditable") ? changes.durationEditable : current.durationEditable,
       data: changes.data ?? current.data
     };
-    const [next] = normalizeCalendarEvents([source]);
+    const [next] = normalizeCalendarEvents([source], { dateUnit: this.options.dateUnit });
     next.data = source.data;
     this._events = this._events.map((event, eventIndex) => eventIndex === index ? next : event);
     this._mutationVersions.delete(String(id));
@@ -13708,7 +13754,11 @@ var Calendar = class extends Component {
       }).sort(compareEvents);
       const row = h(
         "section",
-        { class: "zx-calendar__agenda-day", role: "row" },
+        {
+          class: "zx-calendar__agenda-day",
+          role: "row",
+          dataset: { date: calendarDayKey(day) }
+        },
         h("button", {
           type: "button",
           class: "zx-calendar__agenda-heading",
@@ -13718,11 +13768,13 @@ var Calendar = class extends Component {
           disabled: this.options.disabled
         }, this._format(day, { weekday: "long", day: "numeric", month: "long" }))
       );
+      const entries = h("div", { class: "zx-calendar__agenda-events", role: "gridcell" });
       if (!events.length) {
-        row.append(h("p", { class: "zx-calendar__agenda-empty", role: "gridcell" }, this.msg("noEvents")));
+        entries.append(h("p", { class: "zx-calendar__agenda-empty" }, this.msg("noEvents")));
       } else {
-        for (const event of events) row.append(this._eventElement(event, { variant: "agenda", day }));
+        for (const event of events) entries.append(this._eventElement(event, { variant: "agenda", day }));
       }
+      row.append(entries);
       grid.append(row);
     }
     return grid;
@@ -13992,6 +14044,7 @@ var Calendar = class extends Component {
       dataset: {
         eventId: key,
         variant: context.variant,
+        allDay: event.allDay ? "true" : null,
         draggable: this._canMove(event) ? "true" : null
       },
       style: event.color ? { "--zx-calendar-event-color": event.color } : null
@@ -14258,7 +14311,9 @@ var Calendar = class extends Component {
       const item = this._eventById(control.dataset.eventId);
       const action = control.dataset.eventAction === "resize" ? "resize" : "move";
       if (!item || (action === "move" ? !this._canMove(item) : !this._canResize(item))) return;
-      control.setPointerCapture?.(event.pointerId);
+      event.preventDefault();
+      this._capturePointer(event.pointerId);
+      const offset = action === "move" ? this._dragOffsetForEvent(item, event.clientX, event.clientY) : null;
       this._pointer = {
         type: "event",
         pointerId: event.pointerId,
@@ -14268,6 +14323,8 @@ var Calendar = class extends Component {
         event: cloneCalendarEvent(item),
         action,
         control,
+        timeOffsetMinutes: offset?.minutes ?? 0,
+        dayOffset: offset?.days ?? 0,
         moved: false
       };
       return;
@@ -14276,7 +14333,8 @@ var Calendar = class extends Component {
     if (!slot || !this.options.selectable) return;
     const date = this._dateFromTarget(slot);
     if (!date) return;
-    slot.setPointerCapture?.(event.pointerId);
+    event.preventDefault();
+    this._capturePointer(event.pointerId);
     this._pointer = {
       type: "selection",
       pointerId: event.pointerId,
@@ -14309,7 +14367,13 @@ var Calendar = class extends Component {
     const wrapper = pointer.control.closest(".zx-calendar__event");
     if (wrapper) {
       wrapper.dataset.state = "dragging";
-      wrapper.style.transform = `translate(${event.clientX - pointer.startX}px, ${event.clientY - pointer.startY}px)`;
+      if (pointer.action === "resize") {
+        wrapper.style.transform = "";
+        const height = this._timedPreviewHeight(proposed);
+        if (height) wrapper.style.blockSize = height;
+      } else {
+        wrapper.style.transform = `translate(${event.clientX - pointer.startX}px, ${event.clientY - pointer.startY}px)`;
+      }
       wrapper.dataset.preview = this._eventTime(proposed, proposed.start);
     }
     this._announce(this.msg(
@@ -14324,6 +14388,7 @@ var Calendar = class extends Component {
     const pointer = this._pointer;
     if (!pointer || pointer.pointerId !== event.pointerId) return;
     this._pointer = null;
+    this._releasePointerCapture(pointer.pointerId);
     this._clearSelectionPreview();
     if (!pointer.moved) return;
     event.preventDefault();
@@ -14341,6 +14406,7 @@ var Calendar = class extends Component {
   _cancelPointer(event) {
     if (!this._pointer || this._pointer.pointerId !== event.pointerId) return;
     const control = this._pointer.control;
+    this._releasePointerCapture(this._pointer.pointerId);
     this._pointer = null;
     this._clearSelectionPreview();
     control.closest?.(".zx-calendar__event")?.removeAttribute("data-state");
@@ -14348,13 +14414,14 @@ var Calendar = class extends Component {
   }
   /** @param {CalendarEvent} event @param {'move'|'resize'} action @param {number} x @param {number} y @returns {CalendarEvent|null} */
   _proposalAtPoint(event, action, x, y) {
-    const timed = this._timeAtPoint(x, y);
+    const resizeTimed = action === "resize" && !calendarEventSpansDays(event);
+    const timed = this._timeAtPoint(x, y, resizeTimed ? event.start : null);
     if (timed && !calendarEventSpansDays(event)) {
       if (action === "move") {
         const duration = event.end.getTime() - event.start.getTime();
         const next3 = cloneCalendarEvent(event);
-        next3.start = timed;
-        next3.end = new Date(timed.getTime() + duration);
+        next3.start = addMinutes(timed, -Number(this._pointer?.timeOffsetMinutes ?? 0));
+        next3.end = new Date(next3.start.getTime() + duration);
         return next3;
       }
       const next2 = cloneCalendarEvent(event);
@@ -14363,33 +14430,36 @@ var Calendar = class extends Component {
     }
     const day = this._dayAtPoint(x, y);
     if (!day) return null;
-    const difference = calendarDayDifference(startOfCalendarDay(event.start), day);
+    const targetDay = addCalendarDays(day, -Number(this._pointer?.dayOffset ?? 0));
+    const difference = calendarDayDifference(startOfCalendarDay(event.start), targetDay);
     if (action === "move") return shiftCalendarEvent(event, { days: difference, minutes: 0 });
     const next = cloneCalendarEvent(event);
     const endDay = addCalendarDays(day, 1);
     next.end = new Date(endDay.getTime());
     return next.end > next.start ? next : null;
   }
-  /** @param {number} x @param {number} y @returns {Date|null} */
-  _timeAtPoint(x, y) {
+  /** @param {number} x @param {number} y @param {Date|null} [fixedDay=null] @returns {Date|null} */
+  _timeAtPoint(x, y, fixedDay = null) {
     const slots = this.refs.body.querySelector(".zx-calendar__slots");
     if (!slots) return null;
     const rect = slots.getBoundingClientRect();
-    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom || rect.width <= 0 || rect.height <= 0) return null;
+    const scroller = slots.closest(".zx-calendar__time-scroller");
+    const viewport = scroller?.getBoundingClientRect();
+    const left = viewport ? Math.max(rect.left, viewport.left) : rect.left;
+    const right = viewport ? Math.min(rect.right, viewport.right) : rect.right;
+    const top = viewport ? Math.max(rect.top, viewport.top) : rect.top;
+    const bottom = viewport ? Math.min(rect.bottom, viewport.bottom) : rect.bottom;
+    if (x < left || x > right || y < top || y > bottom || rect.width <= 0 || rect.height <= 0) return null;
     const columns = Number(slots.closest('[role="grid"]')?.getAttribute("aria-colcount")) || 1;
     const rows = Number(slots.closest('[role="grid"]')?.getAttribute("aria-rowcount")) || 1;
-    const column = Math.max(0, Math.min(columns - 1, Math.floor((x - rect.left) / rect.width * columns)));
+    const fixedColumn = fixedDay ? this._timeGridDayIndex(fixedDay) : -1;
+    const column = fixedColumn >= 0 ? fixedColumn : Math.max(0, Math.min(columns - 1, Math.floor((x - rect.left) / rect.width * columns)));
     const row = Math.max(0, Math.min(rows - 1, Math.floor((y - rect.top) / rect.height * rows)));
     const target = slots.querySelector(`[data-row-index="${row}"][data-day-index="${column}"]`);
     return target ? this._dateFromTarget(target) : null;
   }
   /** @param {number} x @param {number} y @returns {Date|null} */
   _dayAtPoint(x, y) {
-    const elements = typeof document.elementsFromPoint === "function" ? document.elementsFromPoint(x, y) : [];
-    for (const element of elements) {
-      const date = element instanceof HTMLElement ? element.dataset.date : null;
-      if (date) return parseDayKey(date);
-    }
     const allDay = this.refs.body.querySelector(".zx-calendar__all-day-grid");
     if (allDay) {
       const rect = allDay.getBoundingClientRect();
@@ -14399,8 +14469,72 @@ var Calendar = class extends Component {
         return parseDayKey(cells[index]?.dataset.date);
       }
     }
+    for (const monthEvents of this.refs.body.querySelectorAll(".zx-calendar__month-events")) {
+      const rect = monthEvents.getBoundingClientRect();
+      if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom || rect.width <= 0) continue;
+      const start = parseDayKey(monthEvents.closest(".zx-calendar__month-week")?.dataset.weekStart);
+      if (!start) continue;
+      const index = Math.max(0, Math.min(6, Math.floor((x - rect.left) / rect.width * 7)));
+      return addCalendarDays(start, index);
+    }
+    for (const agendaDay of this.refs.body.querySelectorAll(".zx-calendar__agenda-day")) {
+      const rect = agendaDay.getBoundingClientRect();
+      if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) continue;
+      return parseDayKey(agendaDay.dataset.date);
+    }
+    const elements = typeof document.elementsFromPoint === "function" ? document.elementsFromPoint(x, y) : [];
+    for (const element of elements) {
+      const dateTarget = element instanceof HTMLElement ? element.closest("[data-date]") : null;
+      const date = dateTarget instanceof HTMLElement ? dateTarget.dataset.date : null;
+      if (date) return parseDayKey(date);
+    }
     return null;
   }
+  /** @param {CalendarEvent} event @param {number} x @param {number} y @returns {{minutes: number, days: number}} */
+  _dragOffsetForEvent(event, x, y) {
+    if (!calendarEventSpansDays(event)) {
+      const timed = this._timeAtPoint(x, y);
+      if (timed) {
+        const slot = normalizeSlot(this.options.slotDuration);
+        const duration = Math.max(0, Math.round((event.end.getTime() - event.start.getTime()) / 6e4));
+        const maxOffset = Math.max(0, duration - slot);
+        const minutes = Math.round((timed.getTime() - event.start.getTime()) / 6e4);
+        return { minutes: Math.max(0, Math.min(maxOffset, minutes)), days: 0 };
+      }
+    }
+    const day = this._dayAtPoint(x, y);
+    const days = day ? calendarDayDifference(startOfCalendarDay(event.start), day) : 0;
+    return { minutes: 0, days: Math.max(0, days) };
+  }
+  /** @param {Date} day @returns {number} */
+  _timeGridDayIndex(day) {
+    const key = calendarDayKey(day);
+    const headings = [...this.refs.body.querySelectorAll(".zx-calendar__day-heading")];
+    return headings.findIndex((heading) => heading.dataset.date === key);
+  }
+  /** @param {CalendarEvent} event @returns {string|null} */
+  _timedPreviewHeight(event) {
+    const grid = this.refs.body.querySelector(".zx-calendar__time-grid");
+    if (!grid || calendarEventSpansDays(event)) return null;
+    const min = normalizeMinute(this.options.slotMinTime, 0);
+    const max = normalizeMinute(this.options.slotMaxTime, 1440, true);
+    const slot = normalizeSlot(this.options.slotDuration);
+    const start = event.start.getHours() * 60 + event.start.getMinutes();
+    const end = event.end.getHours() * 60 + event.end.getMinutes();
+    const minutes = Math.max(slot, Math.min(max, end) - Math.max(min, start));
+    return `${minutes / (max - min) * 100}%`;
+  }
+  /** @param {number} pointerId @returns {void} */
+  _capturePointer(pointerId) {
+    try {
+      this.el.setPointerCapture?.(pointerId);
+    } catch {
+    }
+  }
+  /** @param {number} pointerId @returns {void} */
+  _releasePointerCapture(pointerId) {
+    if (this.el.hasPointerCapture?.(pointerId)) this.el.releasePointerCapture?.(pointerId);
+  }
   /** @param {Date} start @param {Date} end @returns {void} */
   _previewSelection(start, end) {
     const low = Math.min(start.getTime(), end.getTime());
@@ -14495,13 +14629,9 @@ var Calendar = class extends Component {
   }
   /** @param {number} direction @returns {this} */
   _page(direction) {
-    const date = new Date(this._date.getTime());
-    if (this._view === "day") date.setDate(date.getDate() + direction);
-    else if (this._view === "agenda") date.setDate(date.getDate() + direction * this.options.agendaDays);
-    else if (this._view === "week") date.setDate(date.getDate() + direction * 7);
-    else if (this._view === "month") date.setMonth(date.getMonth() + direction);
-    else date.setFullYear(date.getFullYear() + direction);
-    return this.setDate(date);
+    return this.setDate(calendarPageDate(this._view, this._date, direction, {
+      agendaDays: this.options.agendaDays
+    }));
   }
   /** @param {{start: Date, end: Date}} range @returns {string} */
   _rangeTitle(range) {