@expcat/tigercat-vue 2.0.0 → 2.0.4

package/dist/{chunk-KE6RGD4Y.mjs → chunk-26OI3TEA.mjs}

@@ -1,14 +1,10 @@
 import {
-  useVueClickOutside,
-  useVueEscapeKey,
-  useVueFloating
-} from "./chunk-BDTPFPSB.mjs";
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
 
 // src/utils/use-floating-popup.ts
-import { computed, ref, watch, onBeforeUnmount } from "vue";
+import { computed, ref, watch } from "vue";
 import {
-  getTransformOrigin,
-  FLOATING_OVERLAY_Z_INDEX,
   buildTriggerHandlerMap,
   restoreFocus
 } from "@expcat/tigercat-core";
@@ -47,57 +43,28 @@ function useFloatingPopup(options) {
     setVisible(false);
     restoreTriggerFocus();
   };
-  const {
-    x,
-    y,
-    placement: actualPlacement
-  } = useVueFloating({
-    referenceRef: triggerRef,
-    floatingRef,
-    enabled: currentVisible,
-    placement: props.placement ?? "top",
-    offset: props.offset ?? 8
-  });
-  let outsideClickCleanup;
-  let escapeKeyCleanup;
   const effectiveTrigger = computed(
     () => multiTrigger ? props.trigger ?? "click" : "click"
   );
-  watch(
-    [currentVisible, effectiveTrigger],
-    ([visible, trigger]) => {
-      outsideClickCleanup?.();
-      escapeKeyCleanup?.();
-      outsideClickCleanup = void 0;
-      escapeKeyCleanup = void 0;
-      if (visible && trigger === "click") {
-        outsideClickCleanup = useVueClickOutside({
-          enabled: currentVisible,
-          refs: [containerRef, floatingRef],
-          onOutsideClick: closeAndRestoreFocus,
-          defer: true
-        });
-      }
-      if (visible && trigger !== "manual") {
-        escapeKeyCleanup = useVueEscapeKey({
-          enabled: currentVisible,
-          onEscape: closeAndRestoreFocus
-        });
+  const overlay = useVueAnchoredOverlay({
+    enabled: currentVisible,
+    referenceRef: triggerRef,
+    floatingRef,
+    containerRef,
+    placement: props.placement ?? "top",
+    offset: props.offset ?? 8,
+    dismissOnOutside: computed(() => effectiveTrigger.value === "click"),
+    dismissOnEscape: computed(() => effectiveTrigger.value !== "manual"),
+    onDismiss: (reason) => {
+      if (reason === "escape") {
+        closeAndRestoreFocus();
+      } else {
+        setVisible(false);
       }
-    },
-    { immediate: true }
-  );
-  onBeforeUnmount(() => {
-    outsideClickCleanup?.();
-    escapeKeyCleanup?.();
+    }
   });
-  const floatingStyles = computed(() => ({
-    position: "absolute",
-    left: `${x.value}px`,
-    top: `${y.value}px`,
-    transformOrigin: getTransformOrigin(actualPlacement.value),
-    zIndex: FLOATING_OVERLAY_Z_INDEX
-  }));
+  const x = overlay.x;
+  const y = overlay.y;
   const handleToggle = () => {
     if (!props.disabled) setVisible(!currentVisible.value);
   };
@@ -125,8 +92,11 @@ function useFloatingPopup(options) {
     floatingRef,
     x,
     y,
-    actualPlacement,
-    floatingStyles,
+    actualPlacement: overlay.placement,
+    floatingStyles: overlay.floatingStyles,
+    floatingClasses: overlay.floatingClasses,
+    positioned: overlay.positioned,
+    overlayTarget: overlay.target,
     triggerHandlers,
     closeAndRestoreFocus
   };

package/dist/{chunk-A7QIMKWQ.mjs → chunk-2T2NEZRZ.mjs}

@@ -2,7 +2,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownMenu
-} from "./chunk-SK2QJ66E.mjs";
+} from "./chunk-KROVW4AW.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";

package/dist/chunk-4HUYX5WW.mjs

@@ -0,0 +1,239 @@
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
+
+// src/components/ColorPicker.ts
+import { defineComponent, h, ref, computed, watch } from "vue";
+import {
+  colorPickerBaseClasses,
+  getColorPickerTriggerClasses,
+  colorPickerPanelClasses,
+  colorPickerInputClasses,
+  colorPickerPresetClasses,
+  hexToRgb,
+  rgbToHex,
+  rgbToHsv,
+  hsvToRgb,
+  formatColorString,
+  parseColorInput,
+  classNames,
+  coerceClassValue
+} from "@expcat/tigercat-core";
+var ColorPicker = defineComponent({
+  name: "TigerColorPicker",
+  props: {
+    modelValue: { type: String, default: "#2563eb" },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    showAlpha: { type: Boolean, default: false },
+    format: { type: String, default: "hex" },
+    presets: { type: Array, default: void 0 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    const isOpen = ref(false);
+    const alpha = ref(1);
+    const containerRef = ref(null);
+    const triggerRef = ref(null);
+    const panelRef = ref(null);
+    const overlay = useVueAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: triggerRef,
+      floatingRef: panelRef,
+      containerRef,
+      placement: "bottom-start",
+      offset: 4,
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      onDismiss: closePanel
+    });
+    const rgb = computed(() => hexToRgb(props.modelValue));
+    const hsv = computed(() => rgbToHsv(rgb.value.r, rgb.value.g, rgb.value.b));
+    const displayValue = computed(
+      () => formatColorString(
+        rgb.value.r,
+        rgb.value.g,
+        rgb.value.b,
+        props.format,
+        props.showAlpha ? alpha.value : void 0
+      )
+    );
+    const swatchColor = computed(
+      () => props.showAlpha ? `rgba(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b}, ${alpha.value})` : props.modelValue
+    );
+    const inputValue = ref(displayValue.value);
+    watch(displayValue, (v) => {
+      inputValue.value = v;
+    });
+    function togglePanel() {
+      if (props.disabled) return;
+      isOpen.value = !isOpen.value;
+    }
+    function closePanel() {
+      isOpen.value = false;
+    }
+    function handleTriggerKeydown(e) {
+      if (props.disabled) return;
+      if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+        e.preventDefault();
+        isOpen.value = !isOpen.value;
+      } else if (e.key === "Escape" && isOpen.value) {
+        isOpen.value = false;
+      }
+    }
+    function handleAlphaChange(e) {
+      alpha.value = Number(e.target.value) / 100;
+    }
+    function handleHueChange(e) {
+      const hue = Number(e.target.value);
+      const { r, g, b } = hsvToRgb(hue, hsv.value.s, hsv.value.v);
+      const hex = rgbToHex(r, g, b);
+      emit("update:modelValue", hex);
+      emit("change", hex);
+    }
+    function handleInputChange(e) {
+      const val = e.target.value;
+      inputValue.value = val;
+      const hex = parseColorInput(val);
+      if (hex) {
+        emit("update:modelValue", hex);
+        emit("change", hex);
+      }
+    }
+    function handlePresetClick(color) {
+      emit("update:modelValue", color);
+      emit("change", color);
+    }
+    function handlePresetKeydown(e, color) {
+      if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+        e.preventDefault();
+        handlePresetClick(color);
+      }
+    }
+    return () => h(
+      "div",
+      {
+        ref: containerRef,
+        class: classNames(colorPickerBaseClasses, coerceClassValue(attrs.class))
+      },
+      [
+        // Color trigger swatch
+        h("div", {
+          ref: triggerRef,
+          class: getColorPickerTriggerClasses(props.size, props.disabled),
+          style: { backgroundColor: swatchColor.value },
+          role: "button",
+          "aria-label": "Pick color",
+          "aria-haspopup": "dialog",
+          "aria-expanded": isOpen.value,
+          "aria-disabled": props.disabled || void 0,
+          tabindex: props.disabled ? -1 : 0,
+          onClick: togglePanel,
+          onKeydown: handleTriggerKeydown
+        }),
+        // Panel
+        isOpen.value ? renderVueOverlayTeleport(
+          h(
+            "div",
+            {
+              ref: panelRef,
+              class: classNames(colorPickerPanelClasses, overlay.floatingClasses.value),
+              style: overlay.floatingStyles.value,
+              "data-positioned": overlay.positioned.value
+            },
+            [
+              // Hue slider
+              h("div", { class: "mb-2" }, [
+                h(
+                  "label",
+                  { class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
+                  "Hue"
+                ),
+                h("input", {
+                  type: "range",
+                  min: 0,
+                  max: 360,
+                  value: hsv.value.h,
+                  class: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
+                  "aria-label": "Hue",
+                  onInput: handleHueChange
+                })
+              ]),
+              // Alpha slider
+              props.showAlpha ? h("div", { class: "mb-2" }, [
+                h(
+                  "label",
+                  { class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
+                  "Alpha"
+                ),
+                h("input", {
+                  type: "range",
+                  min: 0,
+                  max: 100,
+                  value: Math.round(alpha.value * 100),
+                  class: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
+                  "aria-label": "Alpha",
+                  onInput: handleAlphaChange
+                })
+              ]) : null,
+              // Color value input (rendered in the selected format)
+              h("div", { class: "mb-2" }, [
+                h(
+                  "label",
+                  {
+                    class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1 uppercase"
+                  },
+                  props.format
+                ),
+                h("input", {
+                  type: "text",
+                  class: colorPickerInputClasses,
+                  value: inputValue.value,
+                  "aria-label": "Color value",
+                  onInput: handleInputChange
+                })
+              ]),
+              // Preview
+              h("div", { class: "flex items-center gap-2 mb-2" }, [
+                h("div", {
+                  class: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
+                  style: { backgroundColor: swatchColor.value },
+                  "aria-label": "Color preview"
+                }),
+                h(
+                  "span",
+                  { class: "text-xs font-mono text-[var(--tiger-text,#111827)]" },
+                  displayValue.value
+                )
+              ]),
+              // Presets
+              props.presets && props.presets.length > 0 ? h("div", { class: "flex flex-wrap gap-1" }, [
+                ...props.presets.map(
+                  (color) => h("div", {
+                    key: color,
+                    class: colorPickerPresetClasses,
+                    style: { backgroundColor: color },
+                    role: "button",
+                    tabindex: 0,
+                    "aria-label": `Select ${color}`,
+                    onClick: () => handlePresetClick(color),
+                    onKeydown: (e) => handlePresetKeydown(e, color)
+                  })
+                )
+              ]) : null
+            ]
+          ),
+          overlay.target.value
+        ) : null
+      ]
+    );
+  }
+});
+var ColorPicker_default = ColorPicker;
+
+export {
+  ColorPicker,
+  ColorPicker_default
+};

package/dist/{chunk-IDUEWMWN.mjs → chunk-7KCOF5US.mjs}

@@ -1,17 +1,13 @@
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";
 
 // src/components/AutoComplete.ts
-import {
-  defineComponent,
-  h,
-  ref,
-  computed,
-  watch,
-  onBeforeUnmount,
-  nextTick
-} from "vue";
+import { defineComponent, h, ref, computed, watch, nextTick } from "vue";
 import {
   resolveLocaleText,
   mergeTigerLocale,
@@ -119,6 +115,20 @@ var AutoComplete = defineComponent({
     const activeIndex = ref(-1);
     const containerRef = ref(null);
     const inputRef = ref(null);
+    const dropdownRef = ref(null);
+    const overlay = useVueAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: inputRef,
+      floatingRef: dropdownRef,
+      containerRef,
+      placement: "bottom-start",
+      offset: 4,
+      matchReferenceWidth: true,
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      onDismiss: closeDropdown
+    });
     const filteredOptions = computed(
       () => filterAutoCompleteOptions(props.options, inputValue.value, props.filterOption)
     );
@@ -234,21 +244,6 @@ var AutoComplete = defineComponent({
           break;
       }
     }
-    function handleClickOutside(e) {
-      if (containerRef.value && !containerRef.value.contains(e.target)) {
-        closeDropdown();
-      }
-    }
-    watch(isOpen, (val) => {
-      if (val) {
-        document.addEventListener("click", handleClickOutside);
-      } else {
-        document.removeEventListener("click", handleClickOutside);
-      }
-    });
-    onBeforeUnmount(() => {
-      document.removeEventListener("click", handleClickOutside);
-    });
     return () => {
       const containerClasses = classNames(autoCompleteBaseClasses, coerceClassValue(attrs.class));
       const options = filteredOptions.value;
@@ -290,45 +285,49 @@ var AutoComplete = defineComponent({
             [ClearIcon]
           ) : null,
           // Dropdown
-          isOpen.value && options.length > 0 ? h(
-            "div",
-            {
-              ...getPickerListboxAria({ id: listboxId }),
-              class: autoCompleteDropdownClasses
-            },
-            options.map(
-              (option, index) => h(
-                "div",
-                {
-                  id: getPickerOptionId(listboxId, index),
-                  ...getPickerOptionAria({
-                    selected: String(option.value) === String(props.modelValue),
-                    disabled: !!option.disabled
-                  }),
-                  class: getAutoCompleteOptionClasses(
-                    String(option.value) === String(props.modelValue),
-                    !!option.disabled,
-                    props.size
-                  ),
-                  onMousedown: (e) => e.preventDefault(),
-                  onClick: () => handleSelect(option),
-                  onMouseenter: () => {
-                    activeIndex.value = index;
-                  }
-                },
-                option.label
+          isOpen.value && (options.length > 0 || inputValue.value) ? renderVueOverlayTeleport(
+            h(
+              "div",
+              {
+                ref: dropdownRef,
+                ...options.length > 0 ? getPickerListboxAria({ id: listboxId }) : {},
+                class: classNames(
+                  autoCompleteDropdownClasses,
+                  options.length === 0 && autoCompleteEmptyStateClasses,
+                  overlay.floatingClasses.value
+                ),
+                style: overlay.floatingStyles.value,
+                "data-positioned": overlay.positioned.value
+              },
+              options.length > 0 ? options.map(
+                (option, index) => h(
+                  "div",
+                  {
+                    id: getPickerOptionId(listboxId, index),
+                    ...getPickerOptionAria({
+                      selected: String(option.value) === String(props.modelValue),
+                      disabled: !!option.disabled
+                    }),
+                    class: getAutoCompleteOptionClasses(
+                      String(option.value) === String(props.modelValue),
+                      !!option.disabled,
+                      props.size
+                    ),
+                    onMousedown: (e) => e.preventDefault(),
+                    onClick: () => handleSelect(option),
+                    onMouseenter: () => {
+                      activeIndex.value = index;
+                    }
+                  },
+                  option.label
+                )
+              ) : resolveLocaleText(
+                "No matches found",
+                props.emptyText,
+                mergedLocale.value?.common?.emptyText
               )
-            )
-          ) : isOpen.value && inputValue.value && options.length === 0 ? h(
-            "div",
-            {
-              class: classNames(autoCompleteDropdownClasses, autoCompleteEmptyStateClasses)
-            },
-            resolveLocaleText(
-              "No matches found",
-              props.emptyText,
-              mergedLocale.value?.common?.emptyText
-            )
+            ),
+            overlay.target.value
           ) : null
         ]
       );

package/dist/{chunk-RHV6DWY6.mjs → chunk-7VHXZX7Y.mjs}

@@ -1,7 +1,7 @@
 import {
-  renderVueBodyTeleport,
-  useVueFloating
-} from "./chunk-BDTPFPSB.mjs";
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
 
 // src/components/Menu.ts
 import {
@@ -26,8 +26,6 @@ import {
   getMenuItemIndent,
   getSubMenuTitleClasses,
   getSubMenuExpandIconClasses,
-  getSubmenuPopupZIndex,
-  getTransformOrigin,
   filterMenuItems,
   isKeySelected,
   isKeyOpen,
@@ -679,16 +677,18 @@ var SubMenu = defineComponent({
     const popupPlacement = computed(
       () => menuContext?.mode.value === "horizontal" && props.level === 0 ? "bottom-start" : "right-start"
     );
-    const {
-      x: popupX,
-      y: popupY,
-      placement: currentPopupPlacement
-    } = useVueFloating({
+    const overlay = useVueAnchoredOverlay({
       referenceRef: titleEl,
       floatingRef: popupEl,
-      enabled: computed(() => popupPortal.value && isExpanded.value),
+      enabled: computed(() => isPopup.value && isExpanded.value),
       placement: popupPlacement.value,
-      offset: 4
+      offset: 4,
+      portal: popupPortal,
+      dismissOnEscape: true,
+      onDismiss: () => {
+        isOpenByKeyboard.value = false;
+        isHovered.value = false;
+      }
     });
     const disposeHeightTransition = () => {
       heightTransitionController?.dispose();
@@ -748,7 +748,6 @@ var SubMenu = defineComponent({
       if (menuContext.mode.value === "inline") return submenuContentInlineClasses;
       return submenuContentVerticalClasses;
     });
-    const popupZIndex = computed(() => isPopup.value ? getSubmenuPopupZIndex(props.level) : {});
     const handleTitleClick = () => {
       if (!menuContext || props.disabled) return;
       if (menuContext.mode.value === "horizontal") return;
@@ -933,23 +932,16 @@ var SubMenu = defineComponent({
         titleChildren
       );
       const popupContentNode = () => {
-        const popupStyle = popupPortal.value ? {
-          display: isExpanded.value ? "block" : "none",
-          position: "absolute",
-          left: `${popupX.value}px`,
-          top: `${popupY.value}px`,
-          transformOrigin: getTransformOrigin(currentPopupPlacement.value),
-          ...popupZIndex.value
-        } : {
-          display: isExpanded.value ? "block" : "none",
-          ...popupZIndex.value
-        };
         const node = h(
           "ul",
           {
-            ref: popupPortal.value ? popupEl : void 0,
-            class: contentClasses.value,
-            style: popupStyle,
+            ref: popupEl,
+            class: classNames(contentClasses.value, overlay.floatingClasses.value),
+            style: {
+              ...overlay.floatingStyles.value,
+              display: isExpanded.value ? "block" : "none"
+            },
+            "data-positioned": overlay.positioned.value,
             role: "menu",
             "aria-hidden": isExpanded.value ? void 0 : "true",
             onMouseenter: popupPortal.value ? handleMouseEnter : void 0,
@@ -958,7 +950,7 @@ var SubMenu = defineComponent({
           },
           withChildLevel(slots.default?.())
         );
-        return popupPortal.value ? renderVueBodyTeleport(node) : node;
+        return renderVueOverlayTeleport(node, overlay.target.value, !popupPortal.value);
       };
       const contentNode = isPopup.value ? popupContentNode() : hasRenderedInline.value ? h(
         "div",

package/dist/{chunk-IZRQ7LB3.mjs → chunk-AU6IC6K7.mjs}

@@ -1,6 +1,6 @@
 import {
   Select
-} from "./chunk-N7LWKAYS.mjs";
+} from "./chunk-BZ6MVFV7.mjs";
 import {
   Radio
 } from "./chunk-6BDDX2R4.mjs";

package/dist/{chunk-O6BN5R6J.mjs → chunk-AUMTHL6N.mjs}

@@ -1,7 +1,7 @@
 import {
   renderVueBodyTeleport,
   useVueBodyScrollLock
-} from "./chunk-BDTPFPSB.mjs";
+} from "./chunk-Q7Y22OFX.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";

package/dist/{chunk-MNSVJBNH.mjs → chunk-B4MDHE3L.mjs}

@@ -3,7 +3,7 @@ import {
   useVueBodyScrollLock,
   useVueEscapeKey,
   useVueFocusTrap
-} from "./chunk-BDTPFPSB.mjs";
+} from "./chunk-Q7Y22OFX.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";
@@ -221,6 +221,7 @@ var Drawer = defineComponent({
     const hasBeenOpened = ref(false);
     const deferredRendered = ref(props.open);
     const dialogRef = ref(null);
+    const rootRef = ref(null);
     const closeButtonRef = ref(null);
     const previousActiveElement = ref(null);
     let touchStartPoint = null;
@@ -276,11 +277,12 @@ var Drawer = defineComponent({
     const escapeEnabled = computed(() => props.open);
     let cleanupEscape;
     useVueBodyScrollLock(escapeEnabled);
-    useVueFocusTrap({ enabled: escapeEnabled, containerRef: dialogRef });
+    useVueFocusTrap({ enabled: escapeEnabled, containerRef: rootRef });
     onMounted(() => {
       cleanupEscape = useVueEscapeKey({
         enabled: escapeEnabled,
-        onEscape: handleClose
+        onEscape: handleClose,
+        layerRef: rootRef
       });
     });
     onBeforeUnmount(() => {
@@ -324,6 +326,7 @@ var Drawer = defineComponent({
       );
       const ariaLabelledbyFromAttrs = typeof attrs["aria-labelledby"] === "string" ? attrs["aria-labelledby"] : void 0;
       const ariaLabelledby = ariaLabelledbyFromAttrs ?? (props.title || slots.header ? titleId.value : void 0);
+      const overlayHostId = `${instanceId.value}-overlay-host`;
       const containerClasses = classNames(
         getDrawerContainerClasses(),
         !props.open && "pointer-events-none"
@@ -409,6 +412,7 @@ var Drawer = defineComponent({
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": ariaLabelledby,
+          "aria-owns": overlayHostId,
           tabindex: -1,
           ref: dialogRef,
           onTouchstart: handleTouchStart,
@@ -423,12 +427,22 @@ var Drawer = defineComponent({
         "div",
         {
           class: containerClasses,
+          ref: rootRef,
           style: { zIndex: props.zIndex },
           hidden: !props.open && !(props.destroyOnClose && props.deferDestroyOnClose),
           "aria-hidden": !props.open ? "true" : void 0,
+          "data-tiger-overlay-layer": "",
           "data-tiger-drawer-root": ""
         },
-        [mask, panel]
+        [
+          mask,
+          panel,
+          h("div", {
+            id: overlayHostId,
+            class: "contents",
+            "data-tiger-overlay-host": ""
+          })
+        ]
       );
       return renderVueBodyTeleport([root]);
     };