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

package/dist/{chunk-AQMPCLX7.mjs → chunk-NMAJD353.mjs}

@@ -1,21 +1,16 @@
 import {
   createFilledIcon
 } from "./chunk-2TNZ4JNT.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";
 
 // src/components/TimePicker.ts
-import {
-  defineComponent,
-  computed,
-  ref,
-  h,
-  nextTick,
-  watch,
-  onMounted,
-  onBeforeUnmount
-} from "vue";
+import { defineComponent, computed, ref, h, nextTick, watch } from "vue";
 import {
   classNames,
   coerceClassValue,
@@ -234,6 +229,17 @@ var TimePicker = defineComponent({
     const panelRef = ref(null);
     const inputWrapperRef = ref(null);
     const inputRef = 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: closePanel
+    });
     const isRangeMode = computed(() => props.range === true);
     const activePart = ref("start");
     const normalizeRangeValue = (value) => {
@@ -506,17 +512,11 @@ var TimePicker = defineComponent({
         second
       );
     }
-    function handleClickOutside(event) {
-      if (panelRef.value && inputWrapperRef.value && !panelRef.value.contains(event.target) && !inputWrapperRef.value.contains(event.target)) {
-        closePanel();
-      }
-    }
     function handleInputClick() {
       togglePanel();
     }
     watch(isOpen, async (newValue) => {
       if (newValue) {
-        document.addEventListener("click", handleClickOutside);
         await nextTick();
         const panel = panelRef.value;
         if (!panel) return;
@@ -531,18 +531,8 @@ var TimePicker = defineComponent({
           'button[data-tiger-timepicker-unit="hour"]:not([disabled])'
         );
         firstHour?.focus();
-      } else {
-        document.removeEventListener("click", handleClickOutside);
       }
     });
-    onMounted(() => {
-      if (isOpen.value) {
-        document.addEventListener("click", handleClickOutside);
-      }
-    });
-    onBeforeUnmount(() => {
-      document.removeEventListener("click", handleClickOutside);
-    });
     return () => {
       const inputClasses = getTimePickerInputClasses(
         props.size,
@@ -600,249 +590,254 @@ var TimePicker = defineComponent({
           ]
         ),
         // Time picker panel
-        isOpen.value && h(
-          "div",
-          {
-            ref: panelRef,
-            class: timePickerPanelClasses,
-            role: "dialog",
-            "aria-label": labels.value.dialog,
-            onKeydown: handlePanelKeydown
-          },
-          [
-            // Range header
-            isRangeMode.value && h("div", { class: timePickerRangeHeaderClasses }, [
-              h(
-                "button",
-                {
-                  type: "button",
-                  class: getTimePickerRangeTabButtonClasses(activePart.value === "start"),
-                  onClick: () => activePart.value = "start",
-                  "aria-label": labels.value.start,
-                  "aria-selected": activePart.value === "start"
-                },
-                labels.value.start
-              ),
-              h(
-                "button",
-                {
-                  type: "button",
-                  class: getTimePickerRangeTabButtonClasses(activePart.value === "end"),
-                  onClick: () => activePart.value = "end",
-                  "aria-label": labels.value.end,
-                  "aria-selected": activePart.value === "end"
-                },
-                labels.value.end
-              )
-            ]),
-            // Columns container
-            h("div", { class: timePickerMobileWheelClasses }, [
-              h(
-                "select",
-                {
-                  class: timePickerMobileWheelSelectClasses,
-                  value: props.format === "12" ? to12HourFormat(selectedHours.value).hours : selectedHours.value,
-                  "aria-label": labels.value.hour,
-                  onChange: (event) => selectHour(Number(event.target.value))
-                },
-                hoursList.value.map(
-                  (hour) => h("option", { value: hour, disabled: isHourDisabled(hour) }, padTwo(hour))
+        isOpen.value && renderVueOverlayTeleport(
+          h(
+            "div",
+            {
+              ref: panelRef,
+              class: classNames(timePickerPanelClasses, overlay.floatingClasses.value),
+              style: overlay.floatingStyles.value,
+              "data-positioned": overlay.positioned.value,
+              role: "dialog",
+              "aria-label": labels.value.dialog,
+              onKeydown: handlePanelKeydown
+            },
+            [
+              // Range header
+              isRangeMode.value && h("div", { class: timePickerRangeHeaderClasses }, [
+                h(
+                  "button",
+                  {
+                    type: "button",
+                    class: getTimePickerRangeTabButtonClasses(activePart.value === "start"),
+                    onClick: () => activePart.value = "start",
+                    "aria-label": labels.value.start,
+                    "aria-selected": activePart.value === "start"
+                  },
+                  labels.value.start
+                ),
+                h(
+                  "button",
+                  {
+                    type: "button",
+                    class: getTimePickerRangeTabButtonClasses(activePart.value === "end"),
+                    onClick: () => activePart.value = "end",
+                    "aria-label": labels.value.end,
+                    "aria-selected": activePart.value === "end"
+                  },
+                  labels.value.end
                 )
-              ),
-              h(
-                "select",
-                {
-                  class: timePickerMobileWheelSelectClasses,
-                  value: selectedMinutes.value,
-                  "aria-label": labels.value.minute,
-                  onChange: (event) => selectMinute(Number(event.target.value))
-                },
-                minutesList.value.map(
-                  (minute) => h(
-                    "option",
-                    { value: minute, disabled: isMinuteDisabled(minute) },
-                    padTwo(minute)
+              ]),
+              // Columns container
+              h("div", { class: timePickerMobileWheelClasses }, [
+                h(
+                  "select",
+                  {
+                    class: timePickerMobileWheelSelectClasses,
+                    value: props.format === "12" ? to12HourFormat(selectedHours.value).hours : selectedHours.value,
+                    "aria-label": labels.value.hour,
+                    onChange: (event) => selectHour(Number(event.target.value))
+                  },
+                  hoursList.value.map(
+                    (hour) => h("option", { value: hour, disabled: isHourDisabled(hour) }, padTwo(hour))
                   )
-                )
-              ),
-              props.showSeconds && h(
-                "select",
-                {
-                  class: timePickerMobileWheelSelectClasses,
-                  value: selectedSeconds.value,
-                  "aria-label": labels.value.second,
-                  onChange: (event) => selectSecond(Number(event.target.value))
-                },
-                secondsList.value.map(
-                  (second) => h(
-                    "option",
-                    { value: second, disabled: isSecondDisabled(second) },
-                    padTwo(second)
+                ),
+                h(
+                  "select",
+                  {
+                    class: timePickerMobileWheelSelectClasses,
+                    value: selectedMinutes.value,
+                    "aria-label": labels.value.minute,
+                    onChange: (event) => selectMinute(Number(event.target.value))
+                  },
+                  minutesList.value.map(
+                    (minute) => h(
+                      "option",
+                      { value: minute, disabled: isMinuteDisabled(minute) },
+                      padTwo(minute)
+                    )
+                  )
+                ),
+                props.showSeconds && h(
+                  "select",
+                  {
+                    class: timePickerMobileWheelSelectClasses,
+                    value: selectedSeconds.value,
+                    "aria-label": labels.value.second,
+                    onChange: (event) => selectSecond(Number(event.target.value))
+                  },
+                  secondsList.value.map(
+                    (second) => h(
+                      "option",
+                      { value: second, disabled: isSecondDisabled(second) },
+                      padTwo(second)
+                    )
                   )
+                ),
+                props.format === "12" && h(
+                  "select",
+                  {
+                    class: timePickerMobileWheelSelectClasses,
+                    value: selectedPeriod.value,
+                    "aria-label": "Period",
+                    onChange: (event) => selectPeriod(event.target.value)
+                  },
+                  [
+                    h("option", { value: "AM" }, periodLabels.value.am),
+                    h("option", { value: "PM" }, periodLabels.value.pm)
+                  ]
                 )
-              ),
-              props.format === "12" && h(
-                "select",
-                {
-                  class: timePickerMobileWheelSelectClasses,
-                  value: selectedPeriod.value,
-                  "aria-label": "Period",
-                  onChange: (event) => selectPeriod(event.target.value)
-                },
-                [
-                  h("option", { value: "AM" }, periodLabels.value.am),
-                  h("option", { value: "PM" }, periodLabels.value.pm)
-                ]
-              )
-            ]),
-            h("div", { class: timePickerDesktopPanelContentClasses }, [
-              // Hours column
-              h("div", { class: timePickerColumnClasses }, [
-                h("div", { class: timePickerColumnHeaderClasses }, labels.value.hour),
-                h(
-                  "div",
-                  { class: timePickerColumnListClasses },
-                  hoursList.value.map((hour) => {
-                    const hours24 = props.format === "12" ? to24HourFormat(hour, selectedPeriod.value) : hour;
-                    const isSelected = selectedHours.value === hours24;
-                    const isDisabled = isHourDisabled(hour);
-                    return h(
+              ]),
+              h("div", { class: timePickerDesktopPanelContentClasses }, [
+                // Hours column
+                h("div", { class: timePickerColumnClasses }, [
+                  h("div", { class: timePickerColumnHeaderClasses }, labels.value.hour),
+                  h(
+                    "div",
+                    { class: timePickerColumnListClasses },
+                    hoursList.value.map((hour) => {
+                      const hours24 = props.format === "12" ? to24HourFormat(hour, selectedPeriod.value) : hour;
+                      const isSelected = selectedHours.value === hours24;
+                      const isDisabled = isHourDisabled(hour);
+                      return h(
+                        "button",
+                        {
+                          key: hour,
+                          type: "button",
+                          class: getTimePickerItemClasses(isSelected, isDisabled),
+                          disabled: isDisabled,
+                          onClick: () => selectHour(hour),
+                          "data-tiger-timepicker-unit": "hour",
+                          "aria-label": getTimePickerOptionAriaLabel(
+                            hour,
+                            "hour",
+                            mergedLocale.value,
+                            props.labels
+                          ),
+                          "aria-selected": isSelected
+                        },
+                        padTwo(hour)
+                      );
+                    })
+                  )
+                ]),
+                // Minutes column
+                h("div", { class: timePickerColumnClasses }, [
+                  h("div", { class: timePickerColumnHeaderClasses }, labels.value.minute),
+                  h(
+                    "div",
+                    { class: timePickerColumnListClasses },
+                    minutesList.value.map((minute) => {
+                      const isSelected = selectedMinutes.value === minute;
+                      const isDisabled = isMinuteDisabled(minute);
+                      return h(
+                        "button",
+                        {
+                          key: minute,
+                          type: "button",
+                          class: getTimePickerItemClasses(isSelected, isDisabled),
+                          disabled: isDisabled,
+                          onClick: () => selectMinute(minute),
+                          "data-tiger-timepicker-unit": "minute",
+                          "aria-label": getTimePickerOptionAriaLabel(
+                            minute,
+                            "minute",
+                            mergedLocale.value,
+                            props.labels
+                          ),
+                          "aria-selected": isSelected
+                        },
+                        padTwo(minute)
+                      );
+                    })
+                  )
+                ]),
+                // Seconds column (if enabled)
+                props.showSeconds && h("div", { class: timePickerColumnClasses }, [
+                  h("div", { class: timePickerColumnHeaderClasses }, labels.value.second),
+                  h(
+                    "div",
+                    { class: timePickerColumnListClasses },
+                    secondsList.value.map((second) => {
+                      const isSelected = selectedSeconds.value === second;
+                      const isDisabled = isSecondDisabled(second);
+                      return h(
+                        "button",
+                        {
+                          key: second,
+                          type: "button",
+                          class: getTimePickerItemClasses(isSelected, isDisabled),
+                          disabled: isDisabled,
+                          onClick: () => selectSecond(second),
+                          "data-tiger-timepicker-unit": "second",
+                          "aria-label": getTimePickerOptionAriaLabel(
+                            second,
+                            "second",
+                            mergedLocale.value,
+                            props.labels
+                          ),
+                          "aria-selected": isSelected
+                        },
+                        padTwo(second)
+                      );
+                    })
+                  )
+                ]),
+                // AM/PM column (if 12-hour format)
+                props.format === "12" && h("div", { class: timePickerColumnClasses }, [
+                  h("div", { class: timePickerColumnHeaderClasses }, " "),
+                  h("div", { class: "flex flex-col" }, [
+                    h(
                       "button",
                       {
-                        key: hour,
                         type: "button",
-                        class: getTimePickerItemClasses(isSelected, isDisabled),
-                        disabled: isDisabled,
-                        onClick: () => selectHour(hour),
-                        "data-tiger-timepicker-unit": "hour",
-                        "aria-label": getTimePickerOptionAriaLabel(
-                          hour,
-                          "hour",
-                          mergedLocale.value,
-                          props.labels
-                        ),
-                        "aria-selected": isSelected
+                        class: getTimePickerPeriodButtonClasses(selectedPeriod.value === "AM"),
+                        onClick: () => selectPeriod("AM"),
+                        "data-tiger-timepicker-unit": "period",
+                        "aria-label": periodLabels.value.am,
+                        "aria-selected": selectedPeriod.value === "AM"
                       },
-                      padTwo(hour)
-                    );
-                  })
-                )
-              ]),
-              // Minutes column
-              h("div", { class: timePickerColumnClasses }, [
-                h("div", { class: timePickerColumnHeaderClasses }, labels.value.minute),
-                h(
-                  "div",
-                  { class: timePickerColumnListClasses },
-                  minutesList.value.map((minute) => {
-                    const isSelected = selectedMinutes.value === minute;
-                    const isDisabled = isMinuteDisabled(minute);
-                    return h(
+                      periodLabels.value.am
+                    ),
+                    h(
                       "button",
                       {
-                        key: minute,
                         type: "button",
-                        class: getTimePickerItemClasses(isSelected, isDisabled),
-                        disabled: isDisabled,
-                        onClick: () => selectMinute(minute),
-                        "data-tiger-timepicker-unit": "minute",
-                        "aria-label": getTimePickerOptionAriaLabel(
-                          minute,
-                          "minute",
-                          mergedLocale.value,
-                          props.labels
-                        ),
-                        "aria-selected": isSelected
+                        class: getTimePickerPeriodButtonClasses(selectedPeriod.value === "PM"),
+                        onClick: () => selectPeriod("PM"),
+                        "data-tiger-timepicker-unit": "period",
+                        "aria-label": periodLabels.value.pm,
+                        "aria-selected": selectedPeriod.value === "PM"
                       },
-                      padTwo(minute)
-                    );
-                  })
-                )
+                      periodLabels.value.pm
+                    )
+                  ])
+                ])
               ]),
-              // Seconds column (if enabled)
-              props.showSeconds && h("div", { class: timePickerColumnClasses }, [
-                h("div", { class: timePickerColumnHeaderClasses }, labels.value.second),
+              // Footer
+              h("div", { class: timePickerFooterClasses }, [
                 h(
-                  "div",
-                  { class: timePickerColumnListClasses },
-                  secondsList.value.map((second) => {
-                    const isSelected = selectedSeconds.value === second;
-                    const isDisabled = isSecondDisabled(second);
-                    return h(
-                      "button",
-                      {
-                        key: second,
-                        type: "button",
-                        class: getTimePickerItemClasses(isSelected, isDisabled),
-                        disabled: isDisabled,
-                        onClick: () => selectSecond(second),
-                        "data-tiger-timepicker-unit": "second",
-                        "aria-label": getTimePickerOptionAriaLabel(
-                          second,
-                          "second",
-                          mergedLocale.value,
-                          props.labels
-                        ),
-                        "aria-selected": isSelected
-                      },
-                      padTwo(second)
-                    );
-                  })
+                  "button",
+                  {
+                    type: "button",
+                    class: timePickerFooterButtonClasses,
+                    onClick: setNow
+                  },
+                  labels.value.now
+                ),
+                h(
+                  "button",
+                  {
+                    type: "button",
+                    class: timePickerFooterButtonClasses,
+                    onClick: closePanel
+                  },
+                  labels.value.ok
                 )
-              ]),
-              // AM/PM column (if 12-hour format)
-              props.format === "12" && h("div", { class: timePickerColumnClasses }, [
-                h("div", { class: timePickerColumnHeaderClasses }, " "),
-                h("div", { class: "flex flex-col" }, [
-                  h(
-                    "button",
-                    {
-                      type: "button",
-                      class: getTimePickerPeriodButtonClasses(selectedPeriod.value === "AM"),
-                      onClick: () => selectPeriod("AM"),
-                      "data-tiger-timepicker-unit": "period",
-                      "aria-label": periodLabels.value.am,
-                      "aria-selected": selectedPeriod.value === "AM"
-                    },
-                    periodLabels.value.am
-                  ),
-                  h(
-                    "button",
-                    {
-                      type: "button",
-                      class: getTimePickerPeriodButtonClasses(selectedPeriod.value === "PM"),
-                      onClick: () => selectPeriod("PM"),
-                      "data-tiger-timepicker-unit": "period",
-                      "aria-label": periodLabels.value.pm,
-                      "aria-selected": selectedPeriod.value === "PM"
-                    },
-                    periodLabels.value.pm
-                  )
-                ])
               ])
-            ]),
-            // Footer
-            h("div", { class: timePickerFooterClasses }, [
-              h(
-                "button",
-                {
-                  type: "button",
-                  class: timePickerFooterButtonClasses,
-                  onClick: setNow
-                },
-                labels.value.now
-              ),
-              h(
-                "button",
-                {
-                  type: "button",
-                  class: timePickerFooterButtonClasses,
-                  onClick: closePanel
-                },
-                labels.value.ok
-              )
-            ])
-          ]
+            ]
+          ),
+          overlay.target.value
         )
       ]);
     };

package/dist/{chunk-4BO6JNA6.mjs → chunk-OAPIT53X.mjs}

@@ -1,12 +1,12 @@
+import {
+  createStatusIcon
+} from "./chunk-2TNZ4JNT.mjs";
 import {
   renderVueBodyTeleport,
   useVueBodyScrollLock,
   useVueEscapeKey,
   useVueFocusTrap
-} from "./chunk-BDTPFPSB.mjs";
-import {
-  createStatusIcon
-} from "./chunk-2TNZ4JNT.mjs";
+} from "./chunk-Q7Y22OFX.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";