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

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-36TZA5BH.mjs → chunk-A5QYJSHK.mjs}

@@ -41,7 +41,6 @@ var InfiniteScroll = defineComponent({
     const containerRef = ref(null);
     const sentinelRef = ref(null);
     let cleanupObserver = null;
-    let _usingFallback = false;
     const containerClasses = computed(
       () => classNames(
         getInfiniteScrollContainerClasses(props.direction, props.className),
@@ -63,7 +62,6 @@ var InfiniteScroll = defineComponent({
     function setupObserver() {
       cleanupObserver?.();
       cleanupObserver = null;
-      _usingFallback = false;
       if (props.disabled || !props.hasMore) return;
       const sentinel = sentinelRef.value;
       if (!sentinel) return;
@@ -77,7 +75,6 @@ var InfiniteScroll = defineComponent({
       if (teardown) {
         cleanupObserver = teardown;
       } else {
-        _usingFallback = true;
         containerRef.value?.addEventListener("scroll", checkScroll, { passive: true });
         cleanupObserver = () => {
           containerRef.value?.removeEventListener("scroll", checkScroll);

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]);
     };

package/dist/{chunk-7JT5ZIHC.mjs → chunk-BCU7GYF6.mjs}

@@ -31,6 +31,7 @@ import {
   getImageEditorLabels,
   mergeTigerLocale
 } from "@expcat/tigercat-core";
+var isPositiveFinite = (value) => Number.isFinite(value) && value > 0;
 var ImageCropper = defineComponent({
   name: "TigerImageCropper",
   inheritAttrs: false,
@@ -73,20 +74,27 @@ var ImageCropper = defineComponent({
     const dragStartPos = ref({ x: 0, y: 0 });
     const dragStartRect = ref({ x: 0, y: 0, width: 0, height: 0 });
     const loadImage = () => {
+      imageRef.value = null;
       const img = new window.Image();
       img.crossOrigin = "anonymous";
       img.onload = () => {
-        imageRef.value = img;
+        const naturalWidth = img.naturalWidth;
+        const naturalHeight = img.naturalHeight;
+        if (!isPositiveFinite(naturalWidth) || !isPositiveFinite(naturalHeight)) return;
         if (containerRef.value) {
-          const containerW = containerRef.value.clientWidth;
-          const containerH = containerRef.value.clientHeight || 400;
-          const ratio = Math.min(containerW / img.naturalWidth, containerH / img.naturalHeight, 1);
-          displayWidth.value = img.naturalWidth * ratio;
-          displayHeight.value = img.naturalHeight * ratio;
+          const measuredWidth = containerRef.value.clientWidth;
+          const measuredHeight = containerRef.value.clientHeight;
+          const containerW = isPositiveFinite(measuredWidth) ? measuredWidth : naturalWidth;
+          const containerH = isPositiveFinite(measuredHeight) ? measuredHeight : 400;
+          const ratio = Math.min(containerW / naturalWidth, containerH / naturalHeight, 1);
+          displayWidth.value = naturalWidth * ratio;
+          displayHeight.value = naturalHeight * ratio;
         } else {
-          displayWidth.value = img.naturalWidth;
-          displayHeight.value = img.naturalHeight;
+          displayWidth.value = naturalWidth;
+          displayHeight.value = naturalHeight;
         }
+        if (!isPositiveFinite(displayWidth.value) || !isPositiveFinite(displayHeight.value)) return;
+        imageRef.value = img;
         cropRect.value = getInitialCropRect(
           displayWidth.value,
           displayHeight.value,

package/dist/{chunk-7CPMXNLK.mjs → chunk-BNYA5IUB.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-UOJOJBEU.mjs";
 
 // src/components/Upload.ts
-import { defineComponent, ref, computed, watch, h } from "vue";
+import { defineComponent, ref, computed, watch, h, onBeforeUnmount } from "vue";
 import {
   classNames,
   coerceClassValue,
@@ -216,6 +216,23 @@ var Upload = defineComponent({
       }
       return internalFileList.value;
     });
+    const objectUrls = /* @__PURE__ */ new Map();
+    const revokeUnusedObjectUrls = (files) => {
+      const activeFiles = new Set(
+        files.flatMap((file) => file.file && !file.url ? [file.file] : [])
+      );
+      objectUrls.forEach((url, file) => {
+        if (!activeFiles.has(file)) {
+          URL.revokeObjectURL(url);
+          objectUrls.delete(file);
+        }
+      });
+    };
+    watch(fileListValue, revokeUnusedObjectUrls, { deep: true });
+    onBeforeUnmount(() => {
+      objectUrls.forEach((url) => URL.revokeObjectURL(url));
+      objectUrls.clear();
+    });
     const setFileList = (value) => {
       if (!isControlled.value) {
         internalFileList.value = value;
@@ -597,7 +614,14 @@ var Upload = defineComponent({
       );
     };
     const renderPictureCard = (file) => {
-      const imageUrl = file.url || (file.file ? URL.createObjectURL(file.file) : "");
+      let imageUrl = file.url ?? "";
+      if (!imageUrl && file.file && typeof URL !== "undefined" && typeof URL.createObjectURL === "function") {
+        imageUrl = objectUrls.get(file.file) ?? "";
+        if (!imageUrl) {
+          imageUrl = URL.createObjectURL(file.file);
+          objectUrls.set(file.file, imageUrl);
+        }
+      }
       return h(
         "div",
         {