@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-IPGPLFUZ.mjs → chunk-BLTPZIJN.mjs}

@@ -1,15 +1,16 @@
 import {
   Button
-} from "./chunk-YZBQ6IR7.mjs";
+} from "./chunk-4KIZXFFG.mjs";
 import {
-  renderVueBodyTeleport,
+  renderVueOverlayTeleport,
   useVueBodyScrollLock,
   useVueEscapeKey,
-  useVueFocusTrap
-} from "./chunk-Q7Y22OFX.mjs";
+  useVueFocusTrap,
+  useVueOverlayPortalTarget
+} from "./chunk-Y63TRXZO.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/Modal.ts
 import {
@@ -20,10 +21,9 @@ import {
   watch,
   onMounted,
   onBeforeUnmount,
-  nextTick
+  useId
 } from "vue";
 import {
-  ANIMATION_DURATION_MS,
   classNames,
   coerceClassValue,
   mergeStyleValues,
@@ -43,13 +43,20 @@ import {
   modalCloseButtonClasses,
   modalBodyClasses,
   modalFooterClasses,
-  resolveLocaleText,
+  getModalLabels,
   mergeTigerLocale,
   shouldCloseOnMaskClick,
-  resolveSwipeGesture
+  resolveSwipeGesture,
+  shouldRenderOverlay,
+  isOverlayVisuallyHidden,
+  scheduleOverlayLeave,
+  canStartOverlaySwipeClose,
+  isOverlayDragHandleEvent,
+  clampOverlayDragOffset,
+  OVERLAY_SWIPE_HANDLE_ATTR,
+  createDocumentDragSession,
+  OVERLAY_Z_INDEX
 } from "@expcat/tigercat-core";
-var modalIdCounter = 0;
-var createModalId = () => `tiger-modal-${++modalIdCounter}`;
 var Modal = defineComponent({
   name: "TigerModal",
   inheritAttrs: false,
@@ -108,6 +115,14 @@ var Modal = defineComponent({
       type: Boolean,
       default: true
     },
+    /**
+     * Whether Escape closes the modal
+     * @default true
+     */
+    keyboard: {
+      type: Boolean,
+      default: true
+    },
     /**
      * Whether the modal should be centered vertically
      * @default false
@@ -138,7 +153,7 @@ var Modal = defineComponent({
      */
     zIndex: {
       type: Number,
-      default: 1e3
+      default: OVERLAY_Z_INDEX.modal
     },
     /**
      * Custom class name
@@ -155,24 +170,21 @@ var Modal = defineComponent({
       default: void 0
     },
     /**
-     * Close button aria-label
-     * @default 'Close'
+     * Close button aria-label. Defaults to locale.modal.closeAriaLabel (en-US Close).
      */
     closeAriaLabel: {
       type: String,
       default: void 0
     },
     /**
-     * Default OK button text (used in default footer)
-     * @default '确定'
+     * Default OK button text. Defaults to locale.modal.okText (en-US OK).
      */
     okText: {
       type: String,
       default: void 0
     },
     /**
-     * Default Cancel button text (used in default footer)
-     * @default '取消'
+     * Default Cancel button text. Defaults to locale.modal.cancelText (en-US Cancel).
      */
     cancelText: {
       type: String,
@@ -213,38 +225,74 @@ var Modal = defineComponent({
   setup(props, { slots, emit, attrs }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const instanceId = ref(createModalId());
-    const hasBeenOpened = ref(props.open);
+    const modalLabels = computed(
+      () => getModalLabels(mergedLocale.value, {
+        ...props.labels,
+        ...props.closeAriaLabel ? { closeAriaLabel: props.closeAriaLabel } : {},
+        ...props.okText ? { okText: props.okText } : {},
+        ...props.cancelText ? { cancelText: props.cancelText } : {}
+      })
+    );
+    const instanceId = ref(`tiger-modal-${useId()}`);
+    const hasOpened = ref(props.open);
+    const leaving = ref(false);
+    const { anchorRef, target: portalTarget } = useVueOverlayPortalTarget();
     const dialogRef = ref(null);
     const rootRef = ref(null);
     const closeButtonRef = ref(null);
-    const previousActiveElement = ref(null);
+    const bodyRef = ref(null);
     let touchStartPoint = null;
     let touchCurrentPoint = null;
+    let swipeAllowed = false;
     const dragOffset = ref({ x: 0, y: 0 });
-    const isDragging = ref(false);
-    const dragStart = ref({ x: 0, y: 0 });
-    const handleDragMouseDown = (e) => {
-      if (!props.draggable) return;
-      isDragging.value = true;
-      dragStart.value = { x: e.clientX - dragOffset.value.x, y: e.clientY - dragOffset.value.y };
-      const onMouseMove = (ev) => {
-        dragOffset.value = { x: ev.clientX - dragStart.value.x, y: ev.clientY - dragStart.value.y };
-      };
-      const onMouseUp = () => {
-        isDragging.value = false;
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp);
+    const dragging = ref(false);
+    let dragSession = null;
+    const cleanupDragSession = () => {
+      dragSession?.dispose();
+      dragSession = null;
+    };
+    const handleDragPointerDown = (e) => {
+      if (!props.draggable || e.button !== 0 || !isOverlayDragHandleEvent(e)) return;
+      e.preventDefault();
+      const originX = dragOffset.value.x;
+      const originY = dragOffset.value.y;
+      const startRect = (dialogRef.value ?? e.currentTarget).getBoundingClientRect();
+      const view = e.currentTarget?.ownerDocument.defaultView;
+      const viewport = {
+        width: view?.innerWidth ?? startRect.width,
+        height: view?.innerHeight ?? startRect.height
       };
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
+      cleanupDragSession();
+      dragging.value = true;
+      dragSession = createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget?.ownerDocument,
+        pointerId: e.pointerId,
+        pointerTarget: e.currentTarget instanceof Element ? e.currentTarget : null,
+        onMove: ({ deltaX, deltaY }) => {
+          dragOffset.value = clampOverlayDragOffset(
+            { x: originX, y: originY },
+            { x: deltaX, y: deltaY },
+            startRect,
+            viewport
+          );
+        },
+        onEnd: () => {
+          dragSession = null;
+          dragging.value = false;
+        }
+      });
     };
     const titleId = computed(() => `${instanceId.value}-title`);
-    const shouldRender = computed(() => {
-      if (props.open) return true;
-      if (props.destroyOnClose) return false;
-      return hasBeenOpened.value;
-    });
+    const shouldRender = computed(
+      () => shouldRenderOverlay({
+        open: props.open,
+        hasOpened: hasOpened.value,
+        leaving: leaving.value,
+        destroyOnClose: props.destroyOnClose
+      })
+    );
     const handleClose = () => {
       emit("update:open", false);
       emit("cancel");
@@ -260,17 +308,29 @@ var Modal = defineComponent({
         handleClose();
       }
     };
+    const callAttrHandler = (name, event) => {
+      const handler = attrs[name];
+      if (typeof handler === "function") handler(event);
+    };
     const resetTouchGesture = () => {
       touchStartPoint = null;
       touchCurrentPoint = null;
+      swipeAllowed = false;
     };
     const handleTouchStart = (event) => {
+      callAttrHandler("onTouchstart", event);
       if (!props.open || !props.mobileSheet) return;
+      swipeAllowed = canStartOverlaySwipeClose({
+        target: event.target,
+        scrollContainer: bodyRef.value,
+        closeDirection: "down"
+      });
       const point = getGestureTouchPoint(event.touches);
       touchStartPoint = point;
       touchCurrentPoint = point;
     };
     const handleTouchMove = (event) => {
+      callAttrHandler("onTouchmove", event);
       if (!touchStartPoint) return;
       const point = getGestureTouchPoint(event.touches);
       if (point) {
@@ -278,48 +338,58 @@ var Modal = defineComponent({
       }
     };
     const handleTouchEnd = (event) => {
+      callAttrHandler("onTouchend", event);
       const gesture = resolveSwipeGesture(
         touchStartPoint,
         getGestureTouchPoint(event.changedTouches) ?? touchCurrentPoint,
         { minDistance: 48, minVelocity: 0.15 }
       );
+      const allowed = swipeAllowed;
       resetTouchGesture();
-      if (props.mobileSheet && isModalSheetSwipeCloseGesture(gesture)) {
+      if (allowed && props.mobileSheet && isModalSheetSwipeCloseGesture(gesture)) {
         handleClose();
       }
     };
+    const handleTouchCancel = (event) => {
+      callAttrHandler("onTouchcancel", event);
+      resetTouchGesture();
+    };
     const overlayOpen = computed(() => props.open);
+    const escapeEnabled = computed(() => props.open && props.keyboard);
     let cleanupEscape;
     useVueBodyScrollLock(overlayOpen);
-    useVueFocusTrap({ enabled: overlayOpen, containerRef: rootRef });
+    useVueFocusTrap({ enabled: overlayOpen, containerRef: rootRef, inert: true, autoFocus: true });
     onMounted(() => {
       cleanupEscape = useVueEscapeKey({
-        enabled: overlayOpen,
+        enabled: escapeEnabled,
         onEscape: handleClose,
         layerRef: rootRef
       });
     });
     onBeforeUnmount(() => {
       cleanupEscape?.();
+      cleanupDragSession();
     });
     watch(
       () => props.open,
-      async (nextVisible, previousVisible, onCleanup) => {
+      (nextVisible, previousVisible, onCleanup) => {
         if (nextVisible) {
-          hasBeenOpened.value = true;
-          const active = document.activeElement;
-          previousActiveElement.value = active instanceof HTMLElement ? active : null;
-          await nextTick();
-          const el = closeButtonRef.value ?? dialogRef.value;
-          el?.focus?.();
-        } else {
-          previousActiveElement.value?.focus?.();
-          dragOffset.value = { x: 0, y: 0 };
-          if (previousVisible) {
-            const timer = window.setTimeout(() => emit("after-close"), ANIMATION_DURATION_MS);
-            onCleanup(() => window.clearTimeout(timer));
-          }
+          hasOpened.value = true;
+          leaving.value = false;
+          return;
         }
+        cleanupDragSession();
+        dragOffset.value = { x: 0, y: 0 };
+        if (!previousVisible) return;
+        leaving.value = true;
+        onCleanup(
+          scheduleOverlayLeave({
+            onFinish: () => {
+              leaving.value = false;
+              emit("after-close");
+            }
+          })
+        );
       }
     );
     const contentClasses = computed(() => {
@@ -335,7 +405,9 @@ var Modal = defineComponent({
         xmlns: "http://www.w3.org/2000/svg",
         fill: "none",
         viewBox: closeIconViewBox,
-        stroke: "currentColor"
+        stroke: "currentColor",
+        "aria-hidden": "true",
+        focusable: "false"
       },
       [
         h("path", {
@@ -347,14 +419,19 @@ var Modal = defineComponent({
       ]
     );
     return () => {
+      const anchor = h("span", { ref: anchorRef, hidden: true });
       if (!shouldRender.value) {
-        return null;
+        return anchor;
       }
       const forwardedAttrs = Object.fromEntries(
         Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
       );
       const ariaLabelledbyFromAttrs = typeof attrs["aria-labelledby"] === "string" ? attrs["aria-labelledby"] : void 0;
-      const ariaLabelledby = ariaLabelledbyFromAttrs ?? (props.title || slots.title ? titleId.value : void 0);
+      const hasTitle = Boolean(props.title || slots.title);
+      const ariaLabelledby = ariaLabelledbyFromAttrs ?? (hasTitle ? titleId.value : void 0);
+      const ariaLabelFromAttrs = typeof attrs["aria-label"] === "string" ? attrs["aria-label"] : void 0;
+      const ariaLabel = ariaLabelFromAttrs ?? (hasTitle ? void 0 : modalLabels.value.dialogAriaLabel);
+      const bodyId = `${instanceId.value}-body`;
       const overlayHostId = `${instanceId.value}-overlay-host`;
       const mergedClass = classNames(contentClasses.value, coerceClassValue(attrs.class));
       const widthStyle = props.width ? {
@@ -368,8 +445,9 @@ var Modal = defineComponent({
         "div",
         {
           class: modalHeaderClasses,
-          onMousedown: props.draggable ? handleDragMouseDown : void 0,
-          style: props.draggable ? "cursor: grab; user-select: none" : void 0
+          [OVERLAY_SWIPE_HANDLE_ATTR]: "",
+          onPointerdown: props.draggable ? handleDragPointerDown : void 0,
+          style: props.draggable ? `cursor: ${dragging.value ? "grabbing" : "grab"}; user-select: none; touch-action: none` : void 0
         },
         [
           props.title || slots.title ? h(
@@ -386,20 +464,23 @@ var Modal = defineComponent({
               type: "button",
               class: modalCloseButtonClasses,
               onClick: handleClose,
-              "aria-label": resolveLocaleText(
-                "Close",
-                props.closeAriaLabel,
-                props.labels?.closeAriaLabel,
-                mergedLocale.value?.modal?.closeAriaLabel,
-                mergedLocale.value?.common?.closeText
-              ),
+              "aria-label": modalLabels.value.closeAriaLabel,
               ref: closeButtonRef
             },
             CloseIcon
           ) : null
         ]
       ) : null;
-      const body = slots.default ? h("div", { class: modalBodyClasses }, slots.default()) : null;
+      const body = slots.default ? h(
+        "div",
+        {
+          class: modalBodyClasses,
+          ref: bodyRef,
+          id: bodyId,
+          "data-tiger-modal-body": ""
+        },
+        slots.default()
+      ) : null;
       const footer = slots.footer ? h(
         "div",
         { class: modalFooterClasses, "data-tiger-modal-footer": "" },
@@ -409,26 +490,14 @@ var Modal = defineComponent({
           Button,
           { variant: "secondary", onClick: handleClose },
           {
-            default: () => resolveLocaleText(
-              "\u53D6\u6D88",
-              props.cancelText,
-              props.labels?.cancelText,
-              mergedLocale.value?.modal?.cancelText,
-              mergedLocale.value?.common?.cancelText
-            )
+            default: () => modalLabels.value.cancelText
           }
         ),
         h(
           Button,
           { onClick: handleOk },
           {
-            default: () => resolveLocaleText(
-              "\u786E\u5B9A",
-              props.okText,
-              props.labels?.okText,
-              mergedLocale.value?.modal?.okText,
-              mergedLocale.value?.common?.okText
-            )
+            default: () => modalLabels.value.okText
           }
         )
       ]) : null;
@@ -438,22 +507,22 @@ var Modal = defineComponent({
           class: modalWrapperClasses,
           ref: rootRef,
           style: { zIndex: props.zIndex },
-          hidden: !props.open,
+          hidden: isOverlayVisuallyHidden(props.open, leaving.value),
           "aria-hidden": !props.open ? "true" : void 0,
           "data-tiger-overlay-layer": "",
           "data-tiger-modal-root": ""
         },
         [
           props.mask && h("div", {
-            class: modalMaskClasses,
+            class: classNames(modalMaskClasses, props.open ? "opacity-100" : "opacity-0"),
             "aria-hidden": "true",
-            "data-tiger-modal-mask": ""
+            "data-tiger-modal-mask": "",
+            onClick: handleMaskClick
           }),
           h(
             "div",
             {
-              class: containerClasses.value,
-              onClick: handleMaskClick
+              class: containerClasses.value
             },
             [
               h(
@@ -465,13 +534,15 @@ var Modal = defineComponent({
                   role: "dialog",
                   "aria-modal": "true",
                   "aria-labelledby": ariaLabelledby,
+                  "aria-label": ariaLabel,
+                  "aria-describedby": slots.default ? bodyId : void 0,
                   "aria-owns": overlayHostId,
                   tabindex: -1,
                   ref: dialogRef,
                   onTouchstart: handleTouchStart,
                   onTouchmove: handleTouchMove,
                   onTouchend: handleTouchEnd,
-                  onTouchcancel: resetTouchGesture,
+                  onTouchcancel: handleTouchCancel,
                   "data-tiger-modal": ""
                 },
                 [header, body, footer]
@@ -485,7 +556,7 @@ var Modal = defineComponent({
           })
         ]
       );
-      return renderVueBodyTeleport([renderedWrapper]);
+      return [anchor, renderVueOverlayTeleport([renderedWrapper], portalTarget.value)];
     };
   }
 });