@expcat/tigercat-vue 2.0.0-rc.2 → 2.0.4

package/dist/{chunk-4ZZYQITT.mjs → chunk-FWO7RNGI.mjs}

@@ -1,12 +1,16 @@
 import {
   createFilledIcon
 } from "./chunk-2TNZ4JNT.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";
 
 // src/components/DatePicker.ts
-import { defineComponent, computed, ref, nextTick, h, watch, onBeforeUnmount } from "vue";
+import { defineComponent, computed, ref, nextTick, h, watch } from "vue";
 import {
   classNames,
   coerceClassValue,
@@ -238,6 +242,18 @@ var DatePicker = defineComponent({
     const mobileCalendarRef = ref(null);
     const inputWrapperRef = ref(null);
     const inputRef = ref(null);
+    const panelRef = ref(null);
+    const overlay = useVueAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: inputWrapperRef,
+      floatingRef: panelRef,
+      placement: "bottom-start",
+      offset: 4,
+      layout: "bottom-sheet-sm",
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      onDismiss: closeCalendar
+    });
     const activeDateIso = ref(null);
     const activeRangePart = ref("start");
     const pendingFocusIso = ref(null);
@@ -522,17 +538,11 @@ var DatePicker = defineComponent({
       if (!date) return false;
       return date.getMonth() === viewingMonth.value;
     }
-    function handleClickOutside(event) {
-      if (inputWrapperRef.value && !calendarRef.value?.contains(event.target) && !mobileCalendarRef.value?.contains(event.target) && !inputWrapperRef.value.contains(event.target)) {
-        closeCalendar();
-      }
-    }
     function handleInputClick() {
       toggleCalendar();
     }
     watch(isOpen, (newValue) => {
       if (newValue) {
-        document.addEventListener("click", handleClickOutside);
         const preferred = pendingFocusIso.value ?? getPreferredFocusIso();
         pendingFocusIso.value = null;
         nextTick().then(() => {
@@ -541,15 +551,11 @@ var DatePicker = defineComponent({
           if (fallback) focusDateButtonByIso(fallback);
         });
       } else {
-        document.removeEventListener("click", handleClickOutside);
         nextTick().then(() => {
           restoreFocus();
         });
       }
     });
-    onBeforeUnmount(() => {
-      document.removeEventListener("click", handleClickOutside);
-    });
     const rootClass = computed(
       () => classNames(datePickerBaseClasses, props.className, coerceClassValue(attrs.class))
     );
@@ -623,232 +629,255 @@ var DatePicker = defineComponent({
             ]
           ),
           // Calendar dropdown
-          isOpen.value && h(
-            "div",
-            {
-              ref: mobileCalendarRef,
-              class: datePickerMobileWheelClasses,
-              role: "group",
-              "aria-label": labels.value.calendar
-            },
-            [
-              isRangeMode.value ? h("div", { class: "mb-3 flex items-center gap-2" }, [
-                h(
-                  "button",
-                  {
-                    type: "button",
-                    class: datePickerFooterButtonClasses,
-                    "aria-selected": activeRangePart.value === "start",
-                    onClick: () => activeRangePart.value = "start"
-                  },
-                  "Start"
-                ),
-                h(
-                  "button",
-                  {
-                    type: "button",
-                    class: datePickerFooterButtonClasses,
-                    "aria-selected": activeRangePart.value === "end",
-                    onClick: () => activeRangePart.value = "end"
-                  },
-                  "End"
-                )
-              ]) : null,
-              h("div", { class: datePickerMobileWheelGridClasses }, [
-                h(
-                  "select",
-                  {
-                    class: datePickerMobileWheelSelectClasses,
-                    value: mobileDate.value.getFullYear(),
-                    "aria-label": labels.value.year,
-                    onChange: (event) => updateMobileDate("year", Number(event.target.value))
-                  },
-                  mobileYears.value.map((year) => h("option", { value: year }, year))
-                ),
-                h(
-                  "select",
-                  {
-                    class: datePickerMobileWheelSelectClasses,
-                    value: mobileDate.value.getMonth(),
-                    "aria-label": labels.value.month,
-                    onChange: (event) => updateMobileDate("month", Number(event.target.value))
-                  },
-                  Array.from(
-                    { length: 12 },
-                    (_, month) => h("option", { value: month }, month + 1)
-                  )
-                ),
-                h(
-                  "select",
-                  {
-                    class: datePickerMobileWheelSelectClasses,
-                    value: mobileDate.value.getDate(),
-                    "aria-label": labels.value.day,
-                    onChange: (event) => updateMobileDate("day", Number(event.target.value))
-                  },
-                  mobileDays.value.map((day) => h("option", { value: day }, day))
-                )
-              ]),
-              h("div", { class: "mt-4 flex justify-end gap-2" }, [
-                h(
-                  "button",
-                  {
-                    type: "button",
-                    class: datePickerFooterButtonClasses,
-                    "aria-label": `Mobile ${labels.value.ok}`,
-                    onClick: closeCalendar
-                  },
-                  labels.value.ok
-                )
-              ])
-            ]
-          ),
-          isOpen.value && h(
-            "div",
-            {
-              ref: calendarRef,
-              class: datePickerCalendarClasses,
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-label": labels.value.calendar,
-              onKeydown: handleCalendarKeyDown
-            },
-            [
-              // Calendar header
-              h("div", { class: datePickerCalendarHeaderClasses }, [
+          isOpen.value && renderVueOverlayTeleport(
+            h(
+              "div",
+              {
+                ref: panelRef,
+                class: overlay.floatingClasses.value,
+                style: overlay.floatingStyles.value,
+                "data-positioned": overlay.positioned.value
+              },
+              [
                 h(
-                  "button",
+                  "div",
                   {
-                    type: "button",
-                    class: datePickerNavButtonClasses,
-                    onClick: previousMonth,
-                    "aria-label": labels.value.previousMonth
+                    ref: mobileCalendarRef,
+                    class: datePickerMobileWheelClasses,
+                    role: "group",
+                    "aria-label": labels.value.calendar
                   },
-                  previousMonthIcon.value
-                ),
-                h(
-                  "div",
-                  { class: datePickerMonthYearClasses },
-                  formatMonthYear(viewingYear.value, viewingMonth.value, localeCode.value)
+                  [
+                    isRangeMode.value ? h("div", { class: "mb-3 flex items-center gap-2" }, [
+                      h(
+                        "button",
+                        {
+                          type: "button",
+                          class: datePickerFooterButtonClasses,
+                          "aria-selected": activeRangePart.value === "start",
+                          onClick: () => activeRangePart.value = "start"
+                        },
+                        "Start"
+                      ),
+                      h(
+                        "button",
+                        {
+                          type: "button",
+                          class: datePickerFooterButtonClasses,
+                          "aria-selected": activeRangePart.value === "end",
+                          onClick: () => activeRangePart.value = "end"
+                        },
+                        "End"
+                      )
+                    ]) : null,
+                    h("div", { class: datePickerMobileWheelGridClasses }, [
+                      h(
+                        "select",
+                        {
+                          class: datePickerMobileWheelSelectClasses,
+                          value: mobileDate.value.getFullYear(),
+                          "aria-label": labels.value.year,
+                          onChange: (event) => updateMobileDate(
+                            "year",
+                            Number(event.target.value)
+                          )
+                        },
+                        mobileYears.value.map((year) => h("option", { value: year }, year))
+                      ),
+                      h(
+                        "select",
+                        {
+                          class: datePickerMobileWheelSelectClasses,
+                          value: mobileDate.value.getMonth(),
+                          "aria-label": labels.value.month,
+                          onChange: (event) => updateMobileDate(
+                            "month",
+                            Number(event.target.value)
+                          )
+                        },
+                        Array.from(
+                          { length: 12 },
+                          (_, month) => h("option", { value: month }, month + 1)
+                        )
+                      ),
+                      h(
+                        "select",
+                        {
+                          class: datePickerMobileWheelSelectClasses,
+                          value: mobileDate.value.getDate(),
+                          "aria-label": labels.value.day,
+                          onChange: (event) => updateMobileDate(
+                            "day",
+                            Number(event.target.value)
+                          )
+                        },
+                        mobileDays.value.map((day) => h("option", { value: day }, day))
+                      )
+                    ]),
+                    h("div", { class: "mt-4 flex justify-end gap-2" }, [
+                      h(
+                        "button",
+                        {
+                          type: "button",
+                          class: datePickerFooterButtonClasses,
+                          "aria-label": `Mobile ${labels.value.ok}`,
+                          onClick: closeCalendar
+                        },
+                        labels.value.ok
+                      )
+                    ])
+                  ]
                 ),
                 h(
-                  "button",
-                  {
-                    type: "button",
-                    class: datePickerNavButtonClasses,
-                    onClick: nextMonth,
-                    "aria-label": labels.value.nextMonth
-                  },
-                  nextMonthIcon.value
-                )
-              ]),
-              // Day names header
-              h("div", { class: datePickerCalendarGridClasses, role: "row" }, [
-                ...dayNames.value.map(
-                  (day) => h(
-                    "div",
-                    {
-                      class: datePickerDayNameClasses,
-                      key: day,
-                      role: "columnheader"
-                    },
-                    day
-                  )
-                )
-              ]),
-              // Calendar grid
-              (() => {
-                return h(
                   "div",
                   {
-                    class: datePickerCalendarGridClasses,
-                    role: "grid",
-                    "aria-rowcount": 6,
-                    "aria-colcount": 7
+                    ref: calendarRef,
+                    class: datePickerCalendarClasses,
+                    role: "dialog",
+                    "aria-modal": "true",
+                    "aria-label": labels.value.calendar,
+                    onKeydown: handleCalendarKeyDown
                   },
                   [
-                    ...calendarDays.value.map((date, index) => {
-                      if (!date) return null;
-                      const cell = getDatePickerCalendarCellState({
-                        date,
-                        selectedDate: selectedDate.value,
-                        selectedRange: selectedRange.value,
-                        isRangeMode: isRangeMode.value,
-                        isCurrentMonth,
-                        isDateDisabled
-                      });
-                      return h(
+                    // Calendar header
+                    h("div", { class: datePickerCalendarHeaderClasses }, [
+                      h(
+                        "button",
+                        {
+                          type: "button",
+                          class: datePickerNavButtonClasses,
+                          onClick: previousMonth,
+                          "aria-label": labels.value.previousMonth
+                        },
+                        previousMonthIcon.value
+                      ),
+                      h(
+                        "div",
+                        { class: datePickerMonthYearClasses },
+                        formatMonthYear(viewingYear.value, viewingMonth.value, localeCode.value)
+                      ),
+                      h(
                         "button",
                         {
-                          key: index,
                           type: "button",
-                          class: getDatePickerDayCellClasses(
-                            cell.isCurrentMonthDay,
-                            cell.isSelected,
-                            cell.isTodayDay,
-                            cell.isDisabled,
-                            cell.isInRange,
-                            cell.isRangeStart,
-                            cell.isRangeEnd
-                          ),
-                          disabled: cell.isDisabled,
-                          onClick: () => selectDate(date),
-                          role: "gridcell",
-                          "data-date": cell.iso,
-                          onFocus: () => {
-                            activeDateIso.value = cell.iso;
+                          class: datePickerNavButtonClasses,
+                          onClick: nextMonth,
+                          "aria-label": labels.value.nextMonth
+                        },
+                        nextMonthIcon.value
+                      )
+                    ]),
+                    // Day names header
+                    h("div", { class: datePickerCalendarGridClasses, role: "row" }, [
+                      ...dayNames.value.map(
+                        (day) => h(
+                          "div",
+                          {
+                            class: datePickerDayNameClasses,
+                            key: day,
+                            role: "columnheader"
                           },
-                          tabindex: activeDateIso.value === cell.iso && !cell.isDisabled ? 0 : -1,
-                          "aria-label": cell.iso,
-                          "aria-selected": cell.isSelected,
-                          "aria-current": cell.isTodayDay ? "date" : void 0
+                          day
+                        )
+                      )
+                    ]),
+                    // Calendar grid
+                    (() => {
+                      return h(
+                        "div",
+                        {
+                          class: datePickerCalendarGridClasses,
+                          role: "grid",
+                          "aria-rowcount": 6,
+                          "aria-colcount": 7
                         },
-                        date.getDate()
+                        [
+                          ...calendarDays.value.map((date, index) => {
+                            if (!date) return null;
+                            const cell = getDatePickerCalendarCellState({
+                              date,
+                              selectedDate: selectedDate.value,
+                              selectedRange: selectedRange.value,
+                              isRangeMode: isRangeMode.value,
+                              isCurrentMonth,
+                              isDateDisabled
+                            });
+                            return h(
+                              "button",
+                              {
+                                key: index,
+                                type: "button",
+                                class: getDatePickerDayCellClasses(
+                                  cell.isCurrentMonthDay,
+                                  cell.isSelected,
+                                  cell.isTodayDay,
+                                  cell.isDisabled,
+                                  cell.isInRange,
+                                  cell.isRangeStart,
+                                  cell.isRangeEnd
+                                ),
+                                disabled: cell.isDisabled,
+                                onClick: () => selectDate(date),
+                                role: "gridcell",
+                                "data-date": cell.iso,
+                                onFocus: () => {
+                                  activeDateIso.value = cell.iso;
+                                },
+                                tabindex: activeDateIso.value === cell.iso && !cell.isDisabled ? 0 : -1,
+                                "aria-label": cell.iso,
+                                "aria-selected": cell.isSelected,
+                                "aria-current": cell.isTodayDay ? "date" : void 0
+                              },
+                              date.getDate()
+                            );
+                          })
+                        ]
                       );
-                    })
+                    })(),
+                    // Shortcuts panel
+                    props.shortcuts?.length ? h(
+                      "div",
+                      {
+                        class: "flex flex-wrap gap-1 px-3 py-2 border-t border-[var(--tiger-border,#e5e7eb)]"
+                      },
+                      props.shortcuts.map(
+                        (sc) => h(
+                          "button",
+                          {
+                            type: "button",
+                            class: datePickerFooterButtonClasses,
+                            onClick: () => handleShortcut(sc)
+                          },
+                          sc.label
+                        )
+                      )
+                    ) : null,
+                    // Footer (range mode only)
+                    isRangeMode.value ? h("div", { class: datePickerFooterClasses }, [
+                      h(
+                        "button",
+                        {
+                          type: "button",
+                          class: datePickerFooterButtonClasses,
+                          onClick: setToday
+                        },
+                        labels.value.today
+                      ),
+                      h(
+                        "button",
+                        {
+                          type: "button",
+                          class: datePickerFooterButtonClasses,
+                          onClick: closeCalendar
+                        },
+                        labels.value.ok
+                      )
+                    ]) : null
                   ]
-                );
-              })(),
-              // Shortcuts panel
-              props.shortcuts?.length ? h(
-                "div",
-                {
-                  class: "flex flex-wrap gap-1 px-3 py-2 border-t border-[var(--tiger-border,#e5e7eb)]"
-                },
-                props.shortcuts.map(
-                  (sc) => h(
-                    "button",
-                    {
-                      type: "button",
-                      class: datePickerFooterButtonClasses,
-                      onClick: () => handleShortcut(sc)
-                    },
-                    sc.label
-                  )
-                )
-              ) : null,
-              // Footer (range mode only)
-              isRangeMode.value ? h("div", { class: datePickerFooterClasses }, [
-                h(
-                  "button",
-                  {
-                    type: "button",
-                    class: datePickerFooterButtonClasses,
-                    onClick: setToday
-                  },
-                  labels.value.today
-                ),
-                h(
-                  "button",
-                  {
-                    type: "button",
-                    class: datePickerFooterButtonClasses,
-                    onClick: closeCalendar
-                  },
-                  labels.value.ok
                 )
-              ]) : null
-            ]
+              ]
+            ),
+            overlay.target.value
           )
         ]
       );