7-17 · Drawer：容器变体

// packages/components/component-manifest.json L503-510
{
  "name": "drawer",
  "docsGroup": "feedback",
  "docsText": "Drawer 抽屉",
  "installExports": ["XyDrawer"],
  "installChecks": [{ "kind": "component", "name": "xy-drawer" }],
  "styleImports": ["drawer"]
}

// packages/components/drawer/src/drawer.ts L1-23
import type { TransitionProps } from "vue";
import type Drawer from "./drawer.vue";

export const drawerPlacements = ["left", "right", "top", "bottom"] as const;
export const drawerDirections = ["ltr", "rtl", "ttb", "btt"] as const;

export type DrawerPlacement = (typeof drawerPlacements)[number];
export type DrawerDirection = (typeof drawerDirections)[number];
export type DrawerTransition = string | TransitionProps;
export type DrawerCloseReason = "close" | "backdrop" | "escape" | "programmatic";
export type DrawerModelValueChangeHandler = (value: boolean) => void;
export type DrawerResizeHandler = (event: MouseEvent, size: number) => void;

export interface DrawerHeaderSlotProps {
  close: () => void;
  titleId: string;
  titleClass: string;
}

export interface DrawerTitleSlotProps {
  titleId: string;
  titleClass: string;
}

// packages/components/drawer/src/drawer.vue L27-57
const props = withDefaults(defineProps<DrawerProps>(), {
  modelValue: false,
  title: "",
  size: 420,
  placement: "right",
  closeOnOverlay: true,
  closeOnClickModal: true,
  closeOnEsc: true,
  destroyOnClose: false,
  showClose: true,
  lockScroll: true,
  withHeader: true,
  appendToBody: true,
  appendTo: "body",
  modal: true,
  modalClass: "",
  modalPenetrable: false,
  openDelay: 0,
  closeDelay: 0,
  resizable: false,
  customClass: "",
  headerClass: "",
  bodyClass: "",
  footerClass: "",
  zIndex: undefined,
  headerAriaLevel: 2,
  modalFade: true,
  closeIcon: "mdi:close",
  fullscreen: false,
  transition: undefined
})

// packages/components/drawer/src/drawer.vue L1-26
<script setup lang="ts">
import { computed, getCurrentInstance, nextTick, ref, useAttrs, watch } from "vue"
import type { StyleValue } from "vue"
import {
  useDismissibleLayer,
  useFocusTrap,
  useNamespace,
  useOverlayDialog
} from "xiaoye-primitives"
import { warnOnce } from "xiaoye-primitives"
import { XyIcon } from "../../icon"
import { useResizable } from "./use-resizable"
import type {
  DrawerCloseReason,
  DrawerDirection,
  DrawerHeaderSlotProps,
  DrawerPlacement,
  DrawerProps,
  DrawerTitleSlotProps,
  DrawerTransition
} from "./drawer"

defineOptions({
  inheritAttrs: false
})

// packages/components/drawer/src/drawer.vue L58-91

const emit = defineEmits<{
  "update:modelValue": [value: boolean]
  open: []
  opened: []
  close: []
  closed: []
  "open-auto-focus": []
  "close-auto-focus": []
  "resize-start": [evt: MouseEvent, size: number]
  resize: [evt: MouseEvent, size: number]
  "resize-end": [evt: MouseEvent, size: number]
}>()

const slots = defineSlots<{
  header?: (props: DrawerHeaderSlotProps) => unknown
  title?: (props: DrawerTitleSlotProps) => unknown
  default?: () => unknown
  footer?: () => unknown
}>()

const attrs = useAttrs()
const instance = getCurrentInstance()
const ns = useNamespace("drawer")
const panelRef = ref<HTMLElement | null>(null)
const titleId = `xy-drawer-title-${Math.random().toString(36).slice(2, 10)}`
const bodyId = `xy-drawer-body-${Math.random().toString(36).slice(2, 10)}`
const titleClass = `${ns.base.value}__title`
const headerTitlePresent = ref(false)
const downOnOverlay = ref(false)
const closing = ref(false)
const closeRequested = ref(false)
let isClosingByBeforeClose = false

// packages/xiaoye-primitives/src/composables/use-overlay-dialog.ts L87-93
  const contentRendered = computed(() => {
    if (callbacks.destroyStrategy === "content" && toValue(options.destroyOnClose)) {
      return visible.value;
    }

    return rendered.value;
  });

// packages/xiaoye-primitives/src/composables/use-overlay-dialog.ts L127-159
  const shouldLockBodyScroll = computed(() => {
    return Boolean(toValue(options.lockScroll)) && visible.value;
  });

  // 配对标记：只有本实例真正加过锁才允许解锁。
  // unlockBodyScroll 是无条件递减，若 watch immediate 在初始 false 时也调 unlock，
  // 混合配置（A lockScroll=true 开着、B lockScroll=false 挂载）会把 A 的锁减掉。
  let bodyScrollLocked = false;

  watch(
    shouldLockBodyScroll,
    (locked) => {
      if (locked && !bodyScrollLocked) {
        lockBodyScroll();
        bodyScrollLocked = true;
        return;
      }
      if (!locked && bodyScrollLocked) {
        unlockBodyScroll();
        bodyScrollLocked = false;
      }
    },
    { immediate: true }
  );

  // 兜底：组件卸载时 watcher 停止但不再触发回调，
  // 打开状态下直接卸载会导致计数泄漏，这里只偿还本实例的锁。
  onBeforeUnmount(() => {
    if (bodyScrollLocked) {
      unlockBodyScroll();
      bodyScrollLocked = false;
    }
  });

// packages/components/drawer/src/drawer.vue L177-245
const {
  appendTo,
  contentRendered,
  handleAfterEnter,
  handleAfterLeave,
  isTopMost,
  rendered,
  showModal,
  teleportDisabled,
  visible,
  zIndex
} = useOverlayDialog({
  modelValue: () => props.modelValue,
  destroyOnClose: () => props.destroyOnClose,
  lockScroll: () => props.lockScroll,
  openDelay: () => props.openDelay,
  closeDelay: () => props.closeDelay,
  appendToBody: () => props.appendToBody,
  appendTo: () => props.appendTo,
  modal: () => props.modal,
  zIndex: () => props.zIndex
}, {
  destroyStrategy: "content",
  onOpen: () => {
    closing.value = false
    closeRequested.value = false
    emit("open")
    void nextTick(() => {
      if (!panelRef.value) {
        return
      }

      panelRef.value.scrollTop = 0
      panelRef.value.scrollLeft = 0
      panelRef.value.scrollTo?.({
        top: 0,
        left: 0
      })
    })
  },
  onClose: () => {
    closing.value = true
    emit("close")
  },
  onOpened: () => {
    closing.value = false
    emit("opened")
  },
  onClosed: () => {
    closing.value = false
    closeRequested.value = false
    emit("closed")
  }
})

const isPenetrable = computed(() => Boolean(props.modalPenetrable) && !showModal.value)
const allowOverlayClose = computed(() =>
  showModal.value &&
  (closeOnClickModalPassed.value ? props.closeOnClickModal : props.closeOnOverlay)
)
const drawerRootStyle = computed(() => ({
  zIndex: `${zIndex.value}`
}))
const transitionConfig = computed(() =>
  mergeTransitionHooks(props.transition, "xy-drawer-fade", {
    onAfterEnter: handleAfterEnter,
    onAfterLeave: handleAfterLeave
  })
)

// packages/components/dialog/src/use-dialog.ts L169-209
  const overlay = useOverlayDialog(
    {
      modelValue: () => props.modelValue,
      destroyOnClose: () => props.destroyOnClose,
      lockScroll: resolvedLockScroll,
      openDelay: () => props.openDelay,
      closeDelay: () => props.closeDelay,
      appendToBody: () => props.appendToBody,
      appendTo: () => props.appendTo,
      modal: () => props.modal,
      zIndex: () => props.zIndex
    },
    {
      destroyStrategy: "wrapper",
      onOpen: () => {
        closing.value = false;
        options.emitOpen();
        void nextTick(() => {
          options.overlayRef.value?.scrollTo?.({
            top: 0,
            left: 0
          });
          dialogElement.value?.scrollTo?.({
            top: 0,
            left: 0
          });
        });
      },
      onClose: () => {
        closing.value = true;
        options.emitClose();
      },
      onOpened: () => {
        options.emitOpened();
      },
      onClosed: () => {
        options.emitClosed();
        options.emitUpdateModelValue(false);
      }
    }
  );

// packages/components/drawer/src/drawer.vue L312-368

function emitClose() {
  closeRequested.value = true
  emit("update:modelValue", false)
  void nextTick(() => {
    if (!props.modelValue && !closing.value) {
      return
    }

    if (visible.value && !closing.value) {
      closeRequested.value = false
    }
  })
}

function handleClose(reason: DrawerCloseReason = "programmatic") {
  if (isClosingByBeforeClose || closing.value || closeRequested.value) {
    return
  }

  if (!props.beforeClose) {
    emitClose()
    return
  }

  isClosingByBeforeClose = true
  let doneCalled = false
  const done = (cancel?: boolean) => {
    if (doneCalled) {
      return
    }

    doneCalled = true
    isClosingByBeforeClose = false

    if (cancel) {
      closeRequested.value = false
      return
    }

    emitClose()
  }

  try {
    const result = props.beforeClose(done, reason)
    if (result && typeof (result as Promise<void>).catch === "function") {
      void (result as Promise<void>).catch(() => {
        isClosingByBeforeClose = false
        closeRequested.value = false
      })
    }
  } catch {
    isClosingByBeforeClose = false
    closeRequested.value = false
  }
}

// packages/components/drawer/__tests__/drawer.spec.ts L311-341
  it("beforeClose 进行中时会忽略重复关闭请求", async () => {
    const beforeClose = vi.fn();
    mountDrawer({
      beforeClose
    });

    await waitForTransition();

    const closeButton = document.body.querySelector(".xy-drawer__close") as HTMLButtonElement | null;
    closeButton?.click();
    closeButton?.click();
    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
    await nextTick();

    expect(beforeClose).toHaveBeenCalledTimes(1);
  });

  it("外部未立即同步 modelValue 时不会锁死后续关闭请求", async () => {
    const wrapper = mountDrawer();

    await waitForTransition();

    const closeButton = document.body.querySelector(".xy-drawer__close") as HTMLButtonElement | null;
    closeButton?.click();
    await nextTick();

    closeButton?.click();
    await nextTick();

    expect(wrapper.emitted("update:modelValue")).toHaveLength(2);
  });

// packages/components/drawer/src/drawer.vue L145-176

const directionMap: Record<DrawerDirection, DrawerPlacement> = {
  ltr: "left",
  rtl: "right",
  ttb: "top",
  btt: "bottom"
}
const placementMap: Record<DrawerPlacement, DrawerDirection> = {
  left: "ltr",
  right: "rtl",
  top: "ttb",
  bottom: "btt"
}

const resolvedDirection = computed(() => props.direction ?? placementMap[props.placement])
const resolvedPlacement = computed(() => directionMap[resolvedDirection.value])
const closeOnClickModalPassed = computed(() => {
  const vnodeProps = instance?.vnode.props ?? {}
  return "closeOnClickModal" in vnodeProps || "close-on-click-modal" in vnodeProps
})
const closeOnPressEscapePassed = computed(() => {
  const vnodeProps = instance?.vnode.props ?? {}
  return "closeOnPressEscape" in vnodeProps || "close-on-press-escape" in vnodeProps
})
const customClassPassed = computed(() => {
  const vnodeProps = instance?.vnode.props ?? {}
  return "customClass" in vnodeProps || "custom-class" in vnodeProps
})
const allowEscClose = computed(() =>
  closeOnPressEscapePassed.value ? props.closeOnPressEscape : props.closeOnEsc
)

/* packages/theme/src/components/drawer.css L34-81 */
.xy-drawer__panel {
  --xy-drawer-panel-bg: var(
    --xy-drawer-bg,
    var(
      --xy-dialog-bg,
      var(
        --xy-bg-raised,
        color-mix(in srgb, var(--xy-bg-floating) 96%, var(--xy-bg-subtle))
      )
    )
  );
  --xy-drawer-panel-border: color-mix(
    in srgb,
    var(--xy-border-subtle) 84%,
    var(--xy-border)
  );
  --xy-drawer-section-bg: var(
    --xy-drawer-section-background,
    color-mix(in srgb, var(--xy-drawer-panel-bg) 98%, var(--xy-bg-subtle))
  );
  --xy-drawer-body-color: var(--xy-drawer-text-color, var(--xy-text-secondary));
  --xy-drawer-header-padding-y: 10px;
  --xy-drawer-header-padding-x: 16px;
  --xy-drawer-body-padding-y: 10px;
  --xy-drawer-body-padding-x: 16px;
  --xy-drawer-footer-padding-y: 10px;
  --xy-drawer-footer-padding-x: 16px;
  --xy-drawer-panel-shadow:
    0 0 0 1px color-mix(in srgb, var(--xy-bg-floating) 6%, transparent),
    0 12px 32px color-mix(in srgb, var(--xy-text-heading) 7%, transparent);
  --xy-drawer-header-bg: var(--xy-drawer-section-bg);
  --xy-drawer-body-bg: var(--xy-drawer-panel-bg);
  --xy-drawer-footer-bg: var(--xy-drawer-section-bg);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  pointer-events: auto;
  width: min(100%, 420px);
  height: 100%;
  border: 1px solid var(--xy-drawer-panel-border);
  background: var(--xy-drawer-panel-bg);
  box-shadow: var(--xy-drawer-panel-shadow);
  outline: none;
  transition: transform var(--xy-transition-duration-fast) var(--xy-transition-timing);
  isolation: isolate;
}

/* packages/theme/src/components/drawer.css L280-319 */
.xy-drawer-fade-enter-active,
.xy-drawer-fade-leave-active {
  overflow: hidden;
}

.xy-drawer-fade-enter-active .xy-drawer__overlay,
.xy-drawer-fade-leave-active .xy-drawer__overlay {
  transition: opacity var(--xy-transition-duration-fast) var(--xy-transition-timing);
}

.xy-drawer.is-no-modal-fade .xy-drawer__overlay,
.xy-drawer-fade-enter-active.is-no-modal-fade .xy-drawer__overlay,
.xy-drawer-fade-leave-active.is-no-modal-fade .xy-drawer__overlay {
  transition: none;
}

.xy-drawer-fade-enter-from .xy-drawer__overlay,
.xy-drawer-fade-leave-to .xy-drawer__overlay {
  opacity: 0;
}

.xy-drawer-fade-enter-from.xy-drawer--left .xy-drawer__panel,
.xy-drawer-fade-leave-to.xy-drawer--left .xy-drawer__panel {
  transform: translateX(-100%);
}

.xy-drawer-fade-enter-from.xy-drawer--right .xy-drawer__panel,
.xy-drawer-fade-leave-to.xy-drawer--right .xy-drawer__panel {
  transform: translateX(100%);
}

.xy-drawer-fade-enter-from.xy-drawer--top .xy-drawer__panel,
.xy-drawer-fade-leave-to.xy-drawer--top .xy-drawer__panel {
  transform: translateY(-100%);
}

.xy-drawer-fade-enter-from.xy-drawer--bottom .xy-drawer__panel,
.xy-drawer-fade-leave-to.xy-drawer--bottom .xy-drawer__panel {
  transform: translateY(100%);
}

/* packages/theme/src/components/dialog.css L282-303 */
.xy-dialog-fade-enter-active,
.xy-dialog-fade-leave-active {
  transition: opacity var(--xy-transition-duration-fast) var(--xy-transition-timing);
}

.xy-dialog-fade-enter-active .xy-dialog__panel,
.xy-dialog-fade-leave-active .xy-dialog__panel {
  transition:
    transform var(--xy-transition-duration-fast) var(--xy-transition-timing),
    opacity var(--xy-transition-duration-fast) var(--xy-transition-timing);
}

.xy-dialog-fade-enter-from,
.xy-dialog-fade-leave-to {
  opacity: 0;
}

.xy-dialog-fade-enter-from .xy-dialog__panel,
.xy-dialog-fade-leave-to .xy-dialog__panel {
  transform: translateY(-10px) scale(0.985);
  opacity: 0;
}

// packages/components/drawer/src/drawer.vue L92-144
function mergeTransitionHooks(
  transition: DrawerTransition | undefined,
  defaultName: string,
  hooks: {
    onAfterEnter: () => void
    onAfterLeave: () => void
  }
) {
  const callHook = (
    hook: ((element: Element) => void) | Array<(element: Element) => void> | undefined,
    element: Element
  ) => {
    if (!hook) {
      return
    }

    if (Array.isArray(hook)) {
      hook.forEach((entry) => {
        entry(element)
      })
      return
    }

    hook(element)
  }

  if (!transition) {
    return {
      name: defaultName,
      ...hooks
    }
  }

  if (typeof transition === "string") {
    return {
      name: transition,
      ...hooks
    }
  }

  return {
    ...transition,
    name: transition.name ?? defaultName,
    onAfterEnter: (element: Element) => {
      callHook(transition.onAfterEnter, element)
      hooks.onAfterEnter()
    },
    onAfterLeave: (element: Element) => {
      callHook(transition.onAfterLeave, element)
      hooks.onAfterLeave()
    }
  }
}

// packages/components/drawer/src/drawer.vue L246-283

const { isResizing, resolvedSize, handleDragStart } = useResizable(
  panelRef,
  () => resolvedDirection.value,
  () => props.size,
  () => props.resizable && !props.fullscreen,
  (event, evt, size) => {
    if (event === "resize-start") {
      emit("resize-start", evt, size)
      return
    }

    if (event === "resize-end") {
      emit("resize-end", evt, size)
      return
    }

    emit("resize", evt, size)
  }
)

const panelSizeStyle = computed(() => {
  if (props.fullscreen) {
    return {
      width: "100%",
      height: "100%"
    }
  }

  const isVertical = resolvedPlacement.value === "left" || resolvedPlacement.value === "right"
  const dimension = resolvedSize.value ?? (typeof props.size === "number" ? `${props.size}px` : props.size)

  return {
    width: isVertical ? dimension : "100%",
    height: isVertical ? "100%" : dimension
  }
})

// packages/components/drawer/src/use-resizable.ts L32-68
  const customSize = ref<number | null>(null);
  const isResizing = ref(false);
  const isHorizontal = computed(() => {
    const value = toValue(direction);
    return value === "ltr" || value === "rtl";
  });
  const resolvedDirection = computed(() => toValue(direction));
  let startPointer = 0;
  let startSize = 0;

  function getViewportSize() {
    return isHorizontal.value ? window.innerWidth : window.innerHeight;
  }

  function getPanelSize() {
    const panel = panelRef.value;

    if (!panel) {
      return 0;
    }

    return isHorizontal.value ? panel.offsetWidth : panel.offsetHeight;
  }

  function getPointer(event: MouseEvent) {
    return isHorizontal.value ? event.pageX : event.pageY;
  }

  function getDirectionSign() {
    const value = resolvedDirection.value;
    return value === "ltr" || value === "ttb" ? 1 : -1;
  }

  function getNextSize(pointer: number) {
    const nextSize = startSize + getDirectionSign() * (pointer - startPointer);
    return clamp(nextSize, 4, getViewportSize());
  }

// packages/components/drawer/src/use-resizable.ts L98-120
  function handleDragStart(event: MouseEvent) {
    if (!toValue(enabled) || event.button !== 0) {
      return;
    }

    event.preventDefault();
    startPointer = getPointer(event);
    startSize = customSize.value ?? getPanelSize();
    isResizing.value = true;
    cleanupListeners();
    window.addEventListener("mousemove", handlePointerMove);
    window.addEventListener("mouseup", handlePointerUp);
    emit("resize-start", event, startSize);
  }

  watch(
    () => [toValue(size), resolvedDirection.value],
    () => {
      customSize.value = null;
      isResizing.value = false;
      cleanupListeners();
    }
  );

// packages/components/drawer/__tests__/drawer.spec.ts L712-741
  it("resizable 模式支持拖拽调整尺寸并发出事件", async () => {
    const wrapper = mountDrawer({
      resizable: true,
      size: 300,
      direction: "rtl"
    });

    await nextTick();

    const panel = document.body.querySelector(".xy-drawer__panel") as HTMLElement | null;
    const dragger = document.body.querySelector(".xy-drawer__dragger") as HTMLElement | null;

    Object.defineProperty(panel, "offsetWidth", {
      configurable: true,
      get: () => 300
    });

    dragger?.dispatchEvent(createMouseEvent("mousedown", 300));
    window.dispatchEvent(createMouseEvent("mousemove", 260));
    await nextTick();

    expect(panel?.style.width).toBe("340px");
    expect(wrapper.emitted("resize-start")?.[0]?.[1]).toBe(300);
    expect(wrapper.emitted("resize")?.[0]?.[1]).toBe(340);

    window.dispatchEvent(createMouseEvent("mouseup", 260));
    await nextTick();

    expect(wrapper.emitted("resize-end")?.[0]?.[1]).toBe(340);
  });

// packages/components/drawer/src/drawer.vue L369-394
const focusTrap = useFocusTrap(panelRef, {
  active: () => visible.value,
  autoFocus: "first",
  restoreFocus: true,
  onAutoFocus: () => {
    emit("open-auto-focus")
  },
  onRestoreFocus: () => {
    emit("close-auto-focus")
  },
  onReleaseRequested: (event) => {
    if (!allowEscClose.value || !visible.value || !isTopMost()) {
      return
    }

    event.preventDefault()
    event.stopPropagation()
    handleClose("escape")
  },
  onFocusoutPrevented: (event) => {
    if (event.detail.focusReason === "pointer") {
      event.preventDefault()
    }
  }
})

// packages/components/drawer/src/drawer.vue L395-428
function handleOverlayMouseDown(event: MouseEvent) {
  downOnOverlay.value = showModal.value && event.target === event.currentTarget
}

function handleOverlayMouseUp(event: MouseEvent) {
  downOnOverlay.value = downOnOverlay.value && event.target === event.currentTarget
}

function handleOverlayClick(event: MouseEvent) {
  const canClose =
    showModal.value &&
    allowOverlayClose.value &&
    isTopMost() &&
    downOnOverlay.value &&
    event.target === event.currentTarget

  downOnOverlay.value = false

  if (canClose) {
    handleClose("backdrop")
  }
}

useDismissibleLayer({
  enabled: () => visible.value,
  refs: [panelRef],
  closeOnEscape: () => allowEscClose.value,
  closeOnOutside: false,
  isTopMost: () => isTopMost(),
  onDismiss: () => {
    handleClose("escape")
  }
})

// packages/components/drawer/src/drawer.vue L284-311
const panelAttrs = computed(() => {
  const { class: _class, style: _style, ...rest } = attrs
  return rest
})

const panelClasses = computed(() => [
  `${ns.base.value}__panel`,
  resolvedDirection.value,
  ns.is("fullscreen", props.fullscreen),
  props.customClass,
  attrs.class,
  ns.is("dragging", isResizing.value)
])

const panelStyle = computed<StyleValue>(() => [panelSizeStyle.value, attrs.style as StyleValue])
const overlayClasses = computed(() => [`${ns.base.value}__overlay`, props.modalClass])
const headerClasses = computed(() => [`${ns.base.value}__header`, props.headerClass])
const bodyClasses = computed(() => [
  `${ns.base.value}__body`,
  props.bodyClass,
  props.withHeader ? "" : "is-without-header"
])
const footerClasses = computed(() => [`${ns.base.value}__footer`, props.footerClass])

const ariaLabelledby = computed(() =>
  props.withHeader && (Boolean(props.title) || headerTitlePresent.value) ? titleId : undefined
)
const ariaLabel = computed(() => ariaLabelledby.value ? undefined : props.title || undefined)

// packages/components/drawer/src/drawer.vue L429-473
watch(
  () => props.modelValue,
  (value) => {
    if (value) {
      closeRequested.value = false
      return
    }

    downOnOverlay.value = false
  },
  {
    immediate: true
  }
)

watch(
  [visible, () => props.withHeader, () => props.title, () => Boolean(slots.header), () => Boolean(slots.title)],
  async () => {
    await nextTick()
    headerTitlePresent.value = Boolean(
      props.withHeader &&
      panelRef.value &&
      panelRef.value.querySelector(`#${titleId}`)
    )
  },
  {
    immediate: true,
    flush: "post"
  }
)

if (slots.title) {
  warnOnce("XyDrawer", "`title` 插槽已进入兼容模式，请优先改用 `header` 插槽。")
}

if (customClassPassed.value) {
  warnOnce("XyDrawer", "`custom-class` 已废弃，请改用组件原生 `class`。")
}

defineExpose({
  handleClose,
  afterEnter: handleAfterEnter,
  afterLeave: handleAfterLeave
})
</script>

// packages/components/drawer/__tests__/drawer.spec.ts L642-710
  it("焦点意外离开抽屉时会重新回到抽屉内部", async () => {
    document.body.innerHTML = `<button id="outside">outside</button>`;

    mountDrawer(
      {},
      {
        default: () => h("button", { class: "inside-button" }, "inside")
      }
    );

    await waitForTransition();

    const panel = document.body.querySelector(".xy-drawer__panel") as HTMLElement | null;
    const insideButton = document.body.querySelector(".inside-button") as HTMLButtonElement | null;
    const outsideButton = document.getElementById("outside") as HTMLButtonElement | null;

    insideButton?.focus();
    outsideButton?.focus();
    await waitForMacrotask();

    expect(document.activeElement).not.toBe(outsideButton);
    expect(panel?.contains(document.activeElement as Node)).toBe(true);
  });

  it("panel 自身聚焦时 Shift+Tab 会回到最后一个可聚焦元素", async () => {
    mountDrawer(
      {},
      {
        default: () => h("button", { class: "inside-last" }, "last")
      }
    );

    await waitForTransition();

    const panel = document.body.querySelector(".xy-drawer__panel") as HTMLElement | null;
    const lastButton = document.body.querySelector(".inside-last") as HTMLButtonElement | null;

    panel?.focus();
    panel?.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", shiftKey: true, bubbles: true }));
    await nextTick();

    expect(document.activeElement).toBe(lastButton);
  });

  it("无遮罩穿透模式下指针切换焦点不会被抽屉重新抢回", async () => {
    document.body.innerHTML = `<button id="outside">outside</button>`;

    mountDrawer(
      {
        modal: false,
        modalPenetrable: true
      },
      {
        default: () => h("button", { class: "inside-button" }, "inside")
      }
    );

    await waitForTransition();

    const insideButton = document.body.querySelector(".inside-button") as HTMLButtonElement | null;
    const outsideButton = document.getElementById("outside") as HTMLButtonElement | null;

    insideButton?.focus();
    outsideButton?.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
    outsideButton?.focus();
    await waitForMacrotask();

    expect(document.activeElement).toBe(outsideButton);
  });

// tests/types/fixtures/drawer.ts L15-57
const drawerProps: DrawerProps = {
  modelValue: true,
  title: "成员编辑面板",
  placement,
  direction,
  size: "45%",
  appendToBody: true,
  appendTo: "body",
  modal: true,
  modalClass: "drawer-mask",
  modalPenetrable: false,
  closeOnOverlay: true,
  closeOnClickModal: true,
  closeOnEsc: true,
  closeOnPressEscape: true,
  openDelay: 120,
  closeDelay: 80,
  destroyOnClose: false,
  showClose: true,
  lockScroll: true,
  withHeader: true,
  resizable: true,
  customClass: "legacy-drawer-panel",
  headerClass: "drawer-header",
  bodyClass: "drawer-body",
  footerClass: "drawer-footer",
  zIndex: 3100,
  headerAriaLevel: 3,
  modalFade: false,
  closeIcon: "mdi:close-circle-outline",
  fullscreen: false,
  transition: "xy-drawer-fade",
  beforeClose(done, reason) {
    const closeReason: DrawerCloseReason | undefined = reason;
    void closeReason;
    done();
  }
};

void drawerProps;

const drawerRef = ref<DrawerInstance>();
drawerRef.value?.handleClose("programmatic");

<!-- apps/docs/examples/drawer/resizable.vue（全文） -->
<script setup lang="ts">
import { ref } from "vue";
import type { DrawerDirection } from "xiaoye-components";

const open = ref(false);
const direction = ref<DrawerDirection>("rtl");
const currentSize = ref<number | null>(null);

function handleResize(_: MouseEvent, size: number) {
  currentSize.value = size;
}
</script>

<template>
  <div class="xy-doc-stack">
    <xy-space wrap>
      <xy-button type="primary" @click="open = true">打开可拖拽抽屉</xy-button>
      <xy-button plain @click="direction = 'rtl'">右侧</xy-button>
      <xy-button plain @click="direction = 'ltr'">左侧</xy-button>
      <xy-button plain @click="direction = 'ttb'">顶部</xy-button>
      <xy-button plain @click="direction = 'btt'">底部</xy-button>
    </xy-space>

    <xy-space wrap>
      <xy-tag status="primary">direction={{ direction }}</xy-tag>
      <xy-tag status="neutral">最近一次尺寸：{{ currentSize ?? "未拖拽" }}</xy-tag>
    </xy-space>

    <xy-drawer
      v-model="open"
      title="可拖拽面板"
      :direction="direction"
      :size="direction === 'ttb' || direction === 'btt' ? 280 : 360"
      resizable
      @resize-start="handleResize"
      @resize="handleResize"
      @resize-end="handleResize"
    >
      <div class="xy-doc-stack">
        <p>拖动抽屉边缘可以实时调整尺寸，关闭后会保留本次拖拽结果。</p>
        <p>当你重新传入 `size` 或切换方向时，会回到新的受控尺寸。</p>
      </div>
    </xy-drawer>
  </div>
</template>

<!-- packages/components/drawer/src/drawer.vue L474-526 -->

<template>
  <teleport :to="appendTo" :disabled="teleportDisabled">
    <transition v-bind="transitionConfig">
      <div
v-if="rendered" v-show="visible" :class="[
        ns.base.value,
        `${ns.base.value}--${resolvedPlacement}`,
        ns.is('fullscreen', props.fullscreen),
        !showModal ? 'is-without-mask' : '',
        isPenetrable ? 'is-penetrable' : '',
        !props.modalFade ? 'is-no-modal-fade' : ''
      ]" :style="drawerRootStyle">
        <div
v-if="showModal" :class="overlayClasses" @click="handleOverlayClick" @mousedown="handleOverlayMouseDown"
          @mouseup="handleOverlayMouseUp" />
        <aside
ref="panelRef" v-bind="panelAttrs" :class="panelClasses" :style="panelStyle" role="dialog"
          :aria-modal="showModal ? 'true' : 'false'" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
          :aria-describedby="bodyId" tabindex="-1" @click.stop @keydown.capture="focusTrap.handleKeydown">
          <header v-if="props.withHeader" :class="headerClasses">
            <template v-if="!slots.title">
              <slot name="header" :close="handleClose" :title-id="titleId" :title-class="titleClass">
                <span
v-if="props.title" :id="titleId" :class="titleClass" role="heading"
                  :aria-level="String(props.headerAriaLevel)">
                  {{ props.title }}
                </span>
              </slot>
            </template>
            <template v-else>
              <slot name="title" :title-id="titleId" :title-class="titleClass" />
            </template>
            <button
v-if="props.showClose" type="button" class="xy-drawer__close" aria-label="close"
              @click="handleClose('close')">
              <XyIcon :icon="props.closeIcon" :size="18" />
            </button>
          </header>
          <template v-if="contentRendered">
            <div :id="bodyId" :class="bodyClasses">
              <slot />
            </div>
            <footer v-if="slots.footer" :class="footerClasses">
              <slot name="footer" />
            </footer>
          </template>
          <div v-if="props.resizable && !props.fullscreen" class="xy-drawer__dragger" @mousedown="handleDragStart" />
        </aside>
      </div>
    </transition>
  </teleport>
</template>