@vertz/ui-primitives 0.2.23 → 0.2.25

package/dist/shared/chunk-3jack97k.js

@@ -0,0 +1,509 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/calendar/calendar-composed.tsx
+import { computed, signal } from "@vertz/ui";
+import { __append, __attr, __child, __conditional, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __list, __on, __prop, __pushMountFrame } from "@vertz/ui/internals";
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DAY_NAMES = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var MONTH_OPTIONS = MONTH_NAMES.map((name, index) => ({ name, index }));
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function addDays(date, days) {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+}
+function addMonths(date, months) {
+  const result = new Date(date);
+  result.setMonth(result.getMonth() + months);
+  return result;
+}
+function formatDate(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function isSelectedDate(date, val) {
+  if (val === null)
+    return false;
+  if (val instanceof Date)
+    return isSameDay(val, date);
+  if (Array.isArray(val))
+    return val.some((d) => isSameDay(d, date));
+  if ("from" in val && "to" in val) {
+    return isSameDay(val.from, date) || isSameDay(val.to, date);
+  }
+  return false;
+}
+function isInRangeDate(date, val) {
+  if (val === null || !("from" in val))
+    return false;
+  const range = val;
+  return date > range.from && date < range.to;
+}
+function isDateDisabledCheck(date, minDate, maxDate, disabled) {
+  if (disabled?.(date))
+    return true;
+  if (minDate && date < minDate && !isSameDay(date, minDate))
+    return true;
+  if (maxDate && date > maxDate && !isSameDay(date, maxDate))
+    return true;
+  return false;
+}
+function computeYearRange(now, minDate, maxDate) {
+  const minYear = minDate ? minDate.getFullYear() : now.getFullYear() - 100;
+  const maxYear = maxDate ? maxDate.getFullYear() : now.getFullYear() + 10;
+  const years = [];
+  for (let y = minYear;y <= maxYear; y++) {
+    years.push(y);
+  }
+  return years;
+}
+function isMonthDisabled(month, year, minDate, maxDate) {
+  if (minDate && year === minDate.getFullYear() && month < minDate.getMonth())
+    return true;
+  if (maxDate && year === maxDate.getFullYear() && month > maxDate.getMonth())
+    return true;
+  return false;
+}
+function computeGridRows(display, weekStartsOn) {
+  const year = display.getFullYear();
+  const month = display.getMonth();
+  const daysInMonth = getDaysInMonth(year, month);
+  const firstDay = new Date(year, month, 1);
+  const firstDayOfWeek = firstDay.getDay();
+  const offset = (firstDayOfWeek - weekStartsOn + 7) % 7;
+  const startDate = addDays(firstDay, -offset);
+  const totalCells = offset + daysInMonth;
+  const totalRows = Math.ceil(totalCells / 7);
+  const rows = [];
+  let current = startDate;
+  for (let row = 0;row < totalRows; row++) {
+    const rowDates = [];
+    for (let col = 0;col < 7; col++) {
+      rowDates.push(new Date(current));
+      current = addDays(current, 1);
+    }
+    rows.push(rowDates);
+  }
+  return rows;
+}
+function DayCell(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const dateStr = computed(() => formatDate(__props.cellDate));
+    const isOutside = computed(() => __props.cellDate.getMonth() !== __props.displayMonth.getMonth());
+    const isToday = computed(() => isSameDay(__props.cellDate, __props.now));
+    const isDisabled = computed(() => isDateDisabledCheck(__props.cellDate, __props.minDate, __props.maxDate, __props.disabled));
+    const selected = computed(() => isSelectedDate(__props.cellDate, __props.value));
+    const rangeVal = computed(() => __props.value);
+    const isRangeStart = computed(() => __props.mode === "range" && rangeVal.value && ("from" in rangeVal.value) && isSameDay(__props.cellDate, rangeVal.value.from));
+    const isRangeEnd = computed(() => __props.mode === "range" && rangeVal.value && ("to" in rangeVal.value) && isSameDay(__props.cellDate, rangeVal.value.to));
+    const inRange = computed(() => __props.mode === "range" && isInRangeDate(__props.cellDate, __props.value));
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __attr(__el0, "class", () => cn(__props.classes?.dayButton));
+      __attr(__el0, "data-date", () => dateStr.value);
+      __attr(__el0, "data-outside-month", () => isOutside.value ? "true" : undefined);
+      __attr(__el0, "data-today", () => isToday.value ? "true" : undefined);
+      __attr(__el0, "aria-disabled", () => isDisabled.value ? "true" : undefined);
+      __attr(__el0, "aria-selected", () => selected.value ? "true" : undefined);
+      __attr(__el0, "data-range-start", () => isRangeStart.value ? "true" : undefined);
+      __attr(__el0, "data-range-end", () => isRangeEnd.value ? "true" : undefined);
+      __attr(__el0, "data-in-range", () => inRange.value ? "true" : undefined);
+      __on(__el0, "click", () => __props.onSelect(__props.cellDate));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.cellDate.getDate()));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedCalendarRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let selectDate = function(date) {
+      if (isDateDisabledCheck(date, __props.minDate, __props.maxDate, __props.disabled))
+        return;
+      if (mode.value === "single") {
+        value.value = date;
+      } else if (mode.value === "multiple") {
+        const current = value.value ?? [];
+        const existing = current.findIndex((d) => isSameDay(d, date));
+        if (existing >= 0) {
+          const next = [...current];
+          next.splice(existing, 1);
+          value.value = next;
+        } else {
+          value.value = [...current, date];
+        }
+      } else if (mode.value === "range") {
+        const current = value.value;
+        if (!current || "to" in current && current.to) {
+          value.value = { from: date, to: date };
+        } else {
+          if (date < current.from) {
+            value.value = { from: date, to: current.from };
+          } else {
+            value.value = { from: current.from, to: date };
+          }
+        }
+      }
+      __props.onValueChange?.(value.value);
+    }, navigateMonth = function(delta) {
+      displayMonth.value = addMonths(displayMonth.value, delta);
+      __props.onMonthChange?.(displayMonth.value);
+    }, handleGridKeydown = function(event) {
+      const gridEl = event.currentTarget;
+      const active = document.activeElement;
+      if (!active || active.tagName !== "BUTTON")
+        return;
+      const dateStr = active.getAttribute("data-date");
+      if (!dateStr)
+        return;
+      const focused = new Date(`${dateStr}T00:00:00`);
+      let next = null;
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        next = addDays(focused, -1);
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        next = addDays(focused, 1);
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        next = addDays(focused, -7);
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        next = addDays(focused, 7);
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        const dayOfWeek = (focused.getDay() - (__props.weekStartsOn ?? 0) + 7) % 7;
+        next = addDays(focused, -dayOfWeek);
+      } else if (event.key === "End") {
+        event.preventDefault();
+        const dayOfWeek = (focused.getDay() - (__props.weekStartsOn ?? 0) + 7) % 7;
+        next = addDays(focused, 6 - dayOfWeek);
+      } else if (event.key === "PageUp") {
+        event.preventDefault();
+        next = event.shiftKey ? addMonths(focused, -12) : addMonths(focused, -1);
+      } else if (event.key === "PageDown") {
+        event.preventDefault();
+        next = event.shiftKey ? addMonths(focused, 12) : addMonths(focused, 1);
+      } else if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        selectDate(focused);
+        return;
+      }
+      if (next) {
+        if (showDropdowns.value) {
+          const minYear = yearRange.value[0] ?? now.getFullYear();
+          const maxYear = yearRange.value[yearRange.value.length - 1] ?? now.getFullYear();
+          const minMo = __props.minDate && next.getFullYear() === __props.minDate.getFullYear() ? __props.minDate.getMonth() : 0;
+          const maxMo = __props.maxDate && next.getFullYear() === __props.maxDate.getFullYear() ? __props.maxDate.getMonth() : 11;
+          if (next.getFullYear() < minYear || next.getFullYear() > maxYear || next.getFullYear() === minYear && next.getMonth() < minMo || next.getFullYear() === maxYear && next.getMonth() > maxMo) {
+            return;
+          }
+        }
+        const needsMonthChange = next.getMonth() !== displayMonth.value.getMonth() || next.getFullYear() !== displayMonth.value.getFullYear();
+        if (needsMonthChange) {
+          displayMonth.value = new Date(next.getFullYear(), next.getMonth(), 1);
+          __props.onMonthChange?.(displayMonth.value);
+        }
+        const dateKey = formatDate(next);
+        const focusBtn = () => {
+          const btn = gridEl.querySelector(`button[data-date="${dateKey}"]`);
+          btn?.focus();
+        };
+        if (needsMonthChange) {
+          queueMicrotask(focusBtn);
+        } else {
+          focusBtn();
+        }
+      }
+    }, handleMonthSelect = function(event) {
+      const target = event.target;
+      const newMonth = Number(target.value);
+      if (isMonthDisabled(newMonth, displayMonth.value.getFullYear(), __props.minDate, __props.maxDate))
+        return;
+      displayMonth.value = new Date(displayMonth.value.getFullYear(), newMonth, 1);
+      __props.onMonthChange?.(displayMonth.value);
+    }, handleYearSelect = function(event) {
+      const target = event.target;
+      const newYear = Number(target.value);
+      let month = displayMonth.value.getMonth();
+      if (isMonthDisabled(month, newYear, __props.minDate, __props.maxDate)) {
+        if (__props.minDate && newYear === __props.minDate.getFullYear())
+          month = __props.minDate.getMonth();
+        else if (__props.maxDate && newYear === __props.maxDate.getFullYear())
+          month = __props.maxDate.getMonth();
+      }
+      displayMonth.value = new Date(newYear, month, 1);
+      __props.onMonthChange?.(displayMonth.value);
+    };
+    const now = new Date;
+    const mode = computed(() => __props.mode ?? "single");
+    const displayMonth = signal(__props.defaultMonth ?? now, "displayMonth");
+    const value = signal(__props.defaultValue ?? null, "value");
+    const dayHeaders = computed(() => Array.from({ length: 7 }, (_, i) => DAY_NAMES[((__props.weekStartsOn ?? 0) + i) % 7] ?? ""));
+    const titleText = computed(() => `${MONTH_NAMES[displayMonth.value.getMonth()]} ${displayMonth.value.getFullYear()}`);
+    const showDropdowns = computed(() => (__props.captionLayout ?? "buttons") === "dropdown" || (__props.captionLayout ?? "buttons") === "dropdown-buttons");
+    const showButtons = computed(() => (__props.captionLayout ?? "buttons") === "buttons" || (__props.captionLayout ?? "buttons") === "dropdown-buttons");
+    const yearRange = computed(() => showDropdowns.value ? computeYearRange(now, __props.minDate, __props.maxDate) : []);
+    const effectiveMinYear = computed(() => showDropdowns.value ? yearRange.value[0] ?? now.getFullYear() : 0);
+    const effectiveMaxYear = computed(() => showDropdowns.value ? yearRange.value[yearRange.value.length - 1] ?? now.getFullYear() : 9999);
+    const effectiveMinMonth = computed(() => __props.minDate && effectiveMinYear.value === __props.minDate.getFullYear() ? __props.minDate.getMonth() : 0);
+    const effectiveMaxMonth = computed(() => __props.maxDate && effectiveMaxYear.value === __props.maxDate.getFullYear() ? __props.maxDate.getMonth() : 11);
+    const isAtMinBoundary = computed(() => showDropdowns.value && displayMonth.value.getFullYear() === effectiveMinYear.value && displayMonth.value.getMonth() === effectiveMinMonth.value);
+    const isAtMaxBoundary = computed(() => showDropdowns.value && displayMonth.value.getFullYear() === effectiveMaxYear.value && displayMonth.value.getMonth() === effectiveMaxMonth.value);
+    const rows = computed(() => computeGridRows(displayMonth.value, __props.weekStartsOn ?? 0));
+    const prevChevron = (() => {
+      const __el0 = __element("svg");
+      __el0.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+      __el0.setAttribute("width", "16");
+      __el0.setAttribute("height", "16");
+      __el0.setAttribute("viewBox", "0 0 24 24");
+      __el0.setAttribute("fill", "none");
+      __el0.setAttribute("stroke", "currentColor");
+      __el0.setAttribute("stroke-width", "2");
+      __el0.setAttribute("stroke-linecap", "round");
+      __el0.setAttribute("stroke-linejoin", "round");
+      __el0.setAttribute("aria-hidden", "true");
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("path");
+        __el1.setAttribute("d", "m15 18-6-6 6-6");
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })();
+    const nextChevron = (() => {
+      const __el2 = __element("svg");
+      __el2.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+      __el2.setAttribute("width", "16");
+      __el2.setAttribute("height", "16");
+      __el2.setAttribute("viewBox", "0 0 24 24");
+      __el2.setAttribute("fill", "none");
+      __el2.setAttribute("stroke", "currentColor");
+      __el2.setAttribute("stroke-width", "2");
+      __el2.setAttribute("stroke-linecap", "round");
+      __el2.setAttribute("stroke-linejoin", "round");
+      __el2.setAttribute("aria-hidden", "true");
+      __enterChildren(__el2);
+      __append(__el2, (() => {
+        const __el3 = __element("path");
+        __el3.setAttribute("d", "m9 18 6-6-6-6");
+        return __el3;
+      })());
+      __exitChildren();
+      return __el2;
+    })();
+    const __mfResult0 = (() => {
+      const __el4 = __element("div");
+      __el4.setAttribute("data-v-id", "ComposedCalendarRoot");
+      __attr(__el4, "class", () => cn(__props.classes?.root));
+      __enterChildren(__el4);
+      __append(__el4, (() => {
+        const __el5 = __element("div");
+        __attr(__el5, "class", () => cn(__props.classes?.header));
+        __attr(__el5, "data-caption-layout", () => __props.captionLayout ?? "buttons");
+        __enterChildren(__el5);
+        __append(__el5, __conditional(() => showButtons.value, () => (() => {
+          const __el6 = __element("button");
+          __el6.setAttribute("type", "button");
+          __attr(__el6, "class", () => cn(__props.classes?.navButton));
+          __el6.setAttribute("aria-label", "Previous month");
+          __attr(__el6, "aria-disabled", () => isAtMinBoundary.value ? "true" : undefined);
+          __on(__el6, "click", () => {
+            if (!isAtMinBoundary.value)
+              navigateMonth(-1);
+          });
+          __enterChildren(__el6);
+          __insert(__el6, prevChevron);
+          __exitChildren();
+          return __el6;
+        })(), () => null));
+        __append(__el5, __conditional(() => showDropdowns.value, () => (() => {
+          const __el7 = document.createDocumentFragment();
+          __append(__el7, (() => {
+            const __el8 = __element("select");
+            __el8.setAttribute("aria-label", "Select month");
+            __attr(__el8, "class", () => cn(__props.classes?.monthSelect));
+            __on(__el8, "change", handleMonthSelect);
+            __enterChildren(__el8);
+            __list(__el8, () => MONTH_OPTIONS, null, (mo) => (() => {
+              const __el9 = __element("option");
+              {
+                const __v = String(mo.index);
+                if (__v != null && __v !== false)
+                  __el9.setAttribute("value", __v === true ? "" : __v);
+              }
+              __attr(__el9, "disabled", () => isMonthDisabled(mo.index, displayMonth.value.getFullYear(), __props.minDate, __props.maxDate));
+              __enterChildren(__el9);
+              __insert(__el9, mo.name);
+              __exitChildren();
+              return __el9;
+            })());
+            __exitChildren();
+            __prop(__el8, "value", () => String(displayMonth.value.getMonth()));
+            return __el8;
+          })());
+          __append(__el7, (() => {
+            const __el10 = __element("select");
+            __el10.setAttribute("aria-label", "Select year");
+            __attr(__el10, "class", () => cn(__props.classes?.yearSelect));
+            __on(__el10, "change", handleYearSelect);
+            __enterChildren(__el10);
+            __list(__el10, () => yearRange.value, null, (yr) => (() => {
+              const __el11 = __element("option");
+              {
+                const __v = String(yr);
+                if (__v != null && __v !== false)
+                  __el11.setAttribute("value", __v === true ? "" : __v);
+              }
+              __enterChildren(__el11);
+              __insert(__el11, yr);
+              __exitChildren();
+              return __el11;
+            })());
+            __exitChildren();
+            __prop(__el10, "value", () => String(displayMonth.value.getFullYear()));
+            return __el10;
+          })());
+          return __el7;
+        })(), () => (() => {
+          const __el12 = __element("div");
+          __attr(__el12, "class", () => cn(__props.classes?.title));
+          __enterChildren(__el12);
+          __append(__el12, __child(() => titleText.value));
+          __exitChildren();
+          return __el12;
+        })()));
+        __append(__el5, __conditional(() => showButtons.value, () => (() => {
+          const __el13 = __element("button");
+          __el13.setAttribute("type", "button");
+          __attr(__el13, "class", () => cn(__props.classes?.navButton));
+          __el13.setAttribute("aria-label", "Next month");
+          __attr(__el13, "aria-disabled", () => isAtMaxBoundary.value ? "true" : undefined);
+          __on(__el13, "click", () => {
+            if (!isAtMaxBoundary.value)
+              navigateMonth(1);
+          });
+          __enterChildren(__el13);
+          __insert(__el13, nextChevron);
+          __exitChildren();
+          return __el13;
+        })(), () => null));
+        __exitChildren();
+        return __el5;
+      })());
+      __append(__el4, (() => {
+        const __el14 = __element("table");
+        __el14.setAttribute("role", "grid");
+        __attr(__el14, "class", () => cn(__props.classes?.grid));
+        __on(__el14, "keydown", handleGridKeydown);
+        __enterChildren(__el14);
+        __append(__el14, (() => {
+          const __el15 = __element("thead");
+          __enterChildren(__el15);
+          __append(__el15, (() => {
+            const __el16 = __element("tr");
+            __enterChildren(__el16);
+            __list(__el16, () => dayHeaders.value, null, (day) => (() => {
+              const __el17 = __element("th");
+              __el17.setAttribute("scope", "col");
+              __attr(__el17, "class", () => cn(__props.classes?.headCell));
+              __enterChildren(__el17);
+              __insert(__el17, day);
+              __exitChildren();
+              return __el17;
+            })());
+            __exitChildren();
+            return __el16;
+          })());
+          __exitChildren();
+          return __el15;
+        })());
+        __append(__el14, (() => {
+          const __el18 = __element("tbody");
+          __enterChildren(__el18);
+          __list(__el18, () => rows.value, null, (rowDates) => (() => {
+            const __el19 = __element("tr");
+            __enterChildren(__el19);
+            __list(__el19, () => rowDates, null, (cellDate) => (() => {
+              const __el20 = __element("td");
+              __el20.setAttribute("role", "gridcell");
+              __attr(__el20, "class", () => cn(__props.classes?.cell));
+              __enterChildren(__el20);
+              __append(__el20, DayCell({ get cellDate() {
+                return cellDate;
+              }, get displayMonth() {
+                return displayMonth.value;
+              }, get now() {
+                return now;
+              }, get mode() {
+                return mode.value;
+              }, get value() {
+                return value.value;
+              }, get minDate() {
+                return __props.minDate;
+              }, get maxDate() {
+                return __props.maxDate;
+              }, get disabled() {
+                return __props.disabled;
+              }, get classes() {
+                return __props.classes;
+              }, get onSelect() {
+                return selectDate;
+              } }));
+              __exitChildren();
+              return __el20;
+            })());
+            __exitChildren();
+            return __el19;
+          })());
+          __exitChildren();
+          return __el18;
+        })());
+        __exitChildren();
+        return __el14;
+      })());
+      __exitChildren();
+      return __el4;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedCalendar = ComposedCalendarRoot;
+
+export { ComposedCalendar };

package/dist/shared/{chunk-xs6gp369.js → chunk-455p0jbk.js}

@@ -54,7 +54,7 @@ function CommandRoot(options = {}) {
       setHidden(empty, visibleCount > 0);
       state.activeIndex.value = 0;
       updateActiveItem();
-    }, createItem = function(value, label, keywords, parent) {
+    }, createItem = function(value, label, keywords) {
       const item = (() => {
         const __el4 = __element("div");
         __el4.setAttribute("role", "option");
@@ -78,7 +78,6 @@ function CommandRoot(options = {}) {
         return __el4;
       })();
       allItems.push(item);
-      (parent ?? list).appendChild(item);
       updateActiveItem();
       return item;
     }, Item = function(value, label, keywords) {
@@ -112,23 +111,20 @@ function CommandRoot(options = {}) {
       })();
       const groupItems = [];
       groups.set(el, { heading, items: groupItems });
-      list.appendChild(el);
       return {
         el,
         Item: (value, itemLabel, keywords) => {
-          const item = createItem(value, itemLabel, keywords, el);
+          const item = createItem(value, itemLabel, keywords);
           groupItems.push(item);
           return item;
         }
       };
     }, Separator = function() {
-      const hr = (() => {
+      return (() => {
         const __el7 = __element("hr");
         __el7.setAttribute("role", "separator");
         return __el7;
       })();
-      list.appendChild(hr);
-      return hr;
     };
     const { filter: customFilter, onSelect, onInputChange, placeholder, ...attrs } = options;
     const listId = uniqueId("command-list");