ensis-ui 0.0.0-stage → 3.0.0

package/dist/components/drawer/src/RsDrawer.impl.js

@@ -0,0 +1,715 @@
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import RsButton_default from "../../button/src/RsButton.js";
+import { RS_DRAWER_MAX_VIEWPORT_RATIO, acquireRsDrawerPointerTracking, acquireRsDrawerScrollLock, clampRsDrawerSize, isRsDrawerDismissExempt, isTopRsDrawer, listRsDrawerFocusables, pushRsDrawerLayer, resolveDrawerOverlayStyle, resolveRsDrawerDimensionCss, resolveRsDrawerSizeCss, resolveRsDrawerSizePx, rsDrawerMotionOutMs, rsDrawerPointersDown, runRsDrawerBeforeClose } from "./drawer-utils.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, useId, useModel, watch } from "vue";
+//#region src/components/drawer/src/RsDrawer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-state",
+	"data-rs-theme",
+	"dir",
+	"lang"
+];
+var _hoisted_2 = [
+	"id",
+	"aria-modal",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-hidden",
+	"inert",
+	"data-state",
+	"data-rs-theme",
+	"dir",
+	"lang"
+];
+var _hoisted_3 = {
+	key: 0,
+	class: "rs-drawer__header"
+};
+var _hoisted_4 = { class: "rs-drawer__heading" };
+var _hoisted_5 = ["id"];
+var _hoisted_6 = ["id"];
+var _hoisted_7 = {
+	key: 0,
+	class: "rs-drawer__tools"
+};
+var _hoisted_8 = {
+	key: 0,
+	class: "rs-drawer__extra"
+};
+var _hoisted_9 = ["id"];
+var _hoisted_10 = ["id"];
+var _hoisted_11 = { class: "rs-drawer__body" };
+var _hoisted_12 = {
+	key: 3,
+	class: "rs-drawer__footer"
+};
+var _hoisted_13 = [
+	"aria-label",
+	"aria-orientation",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-controls"
+];
+var RsDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsDrawer",
+	inheritAttrs: false,
+	__name: "RsDrawer",
+	props: /*@__PURE__*/ mergeModels({
+		title: { default: "" },
+		description: {},
+		side: { default: "right" },
+		size: { default: "md" },
+		width: {},
+		height: {},
+		resizable: {
+			type: Boolean,
+			default: true
+		},
+		minSize: {},
+		maxSize: {},
+		modal: { type: Boolean },
+		showOverlay: {
+			type: Boolean,
+			default: true
+		},
+		overlayOpacity: {},
+		overlayBlur: {},
+		showClose: {
+			type: Boolean,
+			default: true
+		},
+		closeOnOverlayClick: {
+			type: Boolean,
+			default: true
+		},
+		closeOnEsc: {
+			type: Boolean,
+			default: true
+		},
+		teleportTo: { type: [String, Boolean] },
+		beforeClose: {},
+		destroyOnClose: {
+			type: Boolean,
+			default: true
+		},
+		forceRender: {
+			type: Boolean,
+			default: false
+		},
+		lockScroll: { type: Boolean },
+		zIndex: {},
+		ariaLabel: {},
+		id: {}
+	}, {
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"openChange",
+		"afterOpen",
+		"afterClose",
+		"resize",
+		"update:width",
+		"update:height"
+	], ["update:open"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const open = useModel(__props, "open");
+		const props = __props;
+		const emit = __emit;
+		const { t } = useRsI18n();
+		const instance = getCurrentInstance();
+		const autoId = useId();
+		const layerId = autoId;
+		const titleId = computed(() => `${props.id || autoId}-title`);
+		const descId = computed(() => `${props.id || autoId}-desc`);
+		/** 可选布尔未传时会被收成 false。看这次 vnode 上有没有该字段，才能区分「没传」。 */
+		function propWasPassed(name) {
+			const raw = instance?.vnode.props;
+			if (!raw) return false;
+			const kebab = name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+			return Object.hasOwn(raw, name) || Object.hasOwn(raw, kebab);
+		}
+		/** 挂到自定义容器或就地渲染时按 contained 模式定位，避免盖住布局顶栏 */
+		const contained = computed(() => propWasPassed("teleportTo"));
+		/** 未显式传 modal 时：有遮罩=模态，无遮罩=可点背后 */
+		const isModal = computed(() => propWasPassed("modal") ? Boolean(props.modal) : props.showOverlay);
+		const teleportDisabled = computed(() => propWasPassed("teleportTo") && props.teleportTo === false);
+		const teleportTarget = computed(() => {
+			if (typeof props.teleportTo === "string") return props.teleportTo;
+			if (typeof HTMLElement !== "undefined" && props.teleportTo instanceof HTMLElement) return props.teleportTo;
+			return "body";
+		});
+		const shouldLockScroll = computed(() => {
+			if (propWasPassed("lockScroll")) return Boolean(props.lockScroll);
+			return isModal.value && !contained.value;
+		});
+		const overlayStyle = computed(() => resolveDrawerOverlayStyle({
+			overlayOpacity: props.overlayOpacity,
+			overlayBlur: props.overlayBlur
+		}));
+		const zStyle = computed(() => {
+			if (props.zIndex == null || !Number.isFinite(props.zIndex)) return void 0;
+			return { "--rs-drawer-z": String(Math.round(props.zIndex)) };
+		});
+		const isHorizontal = computed(() => props.side === "left" || props.side === "right");
+		const enableResizable = computed(() => props.resizable && props.size !== "full");
+		/** 本次打开后拖拽得到的像素尺寸；关闭时清空，回到 size/width/height */
+		const liveSizePx = ref(void 0);
+		const resizing = ref(false);
+		const anchorRef = ref(null);
+		const contentRef = ref(null);
+		const panelTheme = ref();
+		const panelDir = ref();
+		const panelLang = ref();
+		const present = ref(open.value || props.forceRender);
+		const motion = ref(open.value ? "open" : "closed");
+		const dormant = ref(!open.value);
+		const animating = ref(false);
+		const boundMin = ref(256);
+		const boundMax = ref(Math.round(960 * RS_DRAWER_MAX_VIEWPORT_RATIO));
+		/** 仅 width / height 或拖拽结果算自定义尺寸；sm / md / lg 预设不算。 */
+		const customDimensionCss = computed(() => {
+			if (liveSizePx.value != null) return `${liveSizePx.value}px`;
+			return isHorizontal.value ? resolveRsDrawerDimensionCss(props.width) : resolveRsDrawerDimensionCss(props.height);
+		});
+		const panelSizeCss = computed(() => {
+			if (props.size === "full") return void 0;
+			return customDimensionCss.value ?? resolveRsDrawerSizeCss(props.size);
+		});
+		const contentStyle = computed(() => {
+			const style = {};
+			const size = panelSizeCss.value;
+			if (size && props.size !== "full") style["--rs-drawer-panel-size"] = size;
+			if (liveSizePx.value != null && props.size !== "full") if (isHorizontal.value) style.width = `${liveSizePx.value}px`;
+			else style.height = `${liveSizePx.value}px`;
+			return Object.keys(style).length ? style : void 0;
+		});
+		const contentClass = computed(() => [
+			`rs-drawer__content--${props.side}`,
+			`rs-drawer__content--${props.size}`,
+			{
+				"rs-drawer__content--contained": contained.value,
+				"rs-drawer__content--custom-size": props.size !== "full" && customDimensionCss.value != null,
+				"rs-drawer__content--resizable": enableResizable.value,
+				"rs-drawer__content--resizing": resizing.value,
+				"rs-drawer__content--animate": animating.value,
+				"rs-drawer__content--dormant": dormant.value
+			}
+		]);
+		const labelledBy = computed(() => titleId.value);
+		const describedBy = computed(() => props.description ? descId.value : void 0);
+		const closing = ref(false);
+		let afterOpenTimer = 0;
+		let exitTimer = 0;
+		let animTimer = 0;
+		let releasePointer = null;
+		let releaseLayer = null;
+		let releaseLock = null;
+		let layerBound = false;
+		let restoreEl = null;
+		/** 打开若发生在 pointer 按下期间，抑制外部关闭，直到指针抬起再过一个宏任务。 */
+		const suppressOutsideUntilGestureEnd = ref(false);
+		let gestureReleaseBound = false;
+		function releaseOutsideSuppress() {
+			suppressOutsideUntilGestureEnd.value = false;
+			if (!gestureReleaseBound || typeof window === "undefined") {
+				gestureReleaseBound = false;
+				return;
+			}
+			gestureReleaseBound = false;
+			window.removeEventListener("pointerup", onGesturePointerRelease, true);
+			window.removeEventListener("pointercancel", onGesturePointerRelease, true);
+		}
+		function onGesturePointerRelease() {
+			if (rsDrawerPointersDown() > 0) return;
+			if (gestureReleaseBound && typeof window !== "undefined") {
+				gestureReleaseBound = false;
+				window.removeEventListener("pointerup", onGesturePointerRelease, true);
+				window.removeEventListener("pointercancel", onGesturePointerRelease, true);
+			}
+			queueMicrotask(() => {
+				suppressOutsideUntilGestureEnd.value = false;
+			});
+		}
+		function armOutsideSuppressForOpenGesture() {
+			if (typeof window === "undefined") return;
+			releaseOutsideSuppress();
+			suppressOutsideUntilGestureEnd.value = true;
+			if (rsDrawerPointersDown() > 0) {
+				gestureReleaseBound = true;
+				window.addEventListener("pointerup", onGesturePointerRelease, true);
+				window.addEventListener("pointercancel", onGesturePointerRelease, true);
+				return;
+			}
+			queueMicrotask(() => {
+				suppressOutsideUntilGestureEnd.value = false;
+			});
+		}
+		function clearAfterOpenTimer() {
+			if (!afterOpenTimer || typeof window === "undefined") {
+				afterOpenTimer = 0;
+				return;
+			}
+			window.clearTimeout(afterOpenTimer);
+			afterOpenTimer = 0;
+		}
+		function clearExitTimer() {
+			if (!exitTimer || typeof window === "undefined") {
+				exitTimer = 0;
+				return;
+			}
+			window.clearTimeout(exitTimer);
+			exitTimer = 0;
+		}
+		function clearAnimTimer() {
+			if (!animTimer || typeof window === "undefined") {
+				animTimer = 0;
+				return;
+			}
+			window.clearTimeout(animTimer);
+			animTimer = 0;
+		}
+		function queueAfterOpen() {
+			clearAfterOpenTimer();
+			if (typeof window === "undefined") return;
+			afterOpenTimer = window.setTimeout(() => {
+				afterOpenTimer = 0;
+				if (open.value) emit("afterOpen");
+			}, 280);
+		}
+		function markAnimating() {
+			clearAnimTimer();
+			if (rsDrawerMotionOutMs() === 0) {
+				animating.value = false;
+				return;
+			}
+			animating.value = true;
+			if (typeof window === "undefined") return;
+			const ms = motion.value === "closed" ? rsDrawerMotionOutMs() : 240;
+			animTimer = window.setTimeout(() => {
+				animTimer = 0;
+				animating.value = false;
+			}, ms + 40);
+		}
+		function finishExit() {
+			clearExitTimer();
+			animating.value = false;
+			if (open.value) return;
+			liveSizePx.value = void 0;
+			if (props.destroyOnClose && !props.forceRender) {
+				present.value = false;
+				return;
+			}
+			dormant.value = true;
+		}
+		function scheduleExit() {
+			clearExitTimer();
+			if (typeof window === "undefined") return;
+			const ms = rsDrawerMotionOutMs();
+			if (ms === 0) {
+				finishExit();
+				return;
+			}
+			exitTimer = window.setTimeout(() => {
+				exitTimer = 0;
+				finishExit();
+			}, ms);
+		}
+		function syncChrome() {
+			const el = anchorRef.value;
+			if (!el) {
+				panelTheme.value = void 0;
+				panelDir.value = void 0;
+				panelLang.value = void 0;
+				return;
+			}
+			const themed = el.closest("[data-rs-theme]");
+			const directed = el.closest("[dir]");
+			const langed = el.closest("[lang]");
+			panelTheme.value = themed instanceof HTMLElement ? themed.dataset.rsTheme : void 0;
+			panelDir.value = directed?.getAttribute("dir") || void 0;
+			panelLang.value = langed?.getAttribute("lang") || void 0;
+		}
+		function resolveContentEl() {
+			const el = contentRef.value;
+			return el instanceof HTMLElement ? el : null;
+		}
+		function focusPanel(force) {
+			const content = resolveContentEl();
+			if (!content || typeof document === "undefined") return;
+			if (!force && !isModal.value) return;
+			const active = document.activeElement;
+			if (active instanceof HTMLElement && active !== document.body && active !== document.documentElement && !content.contains(active)) restoreEl = active;
+			if (!force && active instanceof HTMLElement && content.contains(active)) return;
+			content.focus({ preventScroll: true });
+		}
+		function restoreFocus() {
+			const el = restoreEl;
+			restoreEl = null;
+			if (!el?.isConnected) return;
+			const content = resolveContentEl();
+			if (content && (el === content || content.contains(el))) return;
+			el.focus({ preventScroll: true });
+		}
+		function bindLayer() {
+			if (layerBound || typeof window === "undefined") return;
+			layerBound = true;
+			releaseLayer = pushRsDrawerLayer(layerId);
+			if (shouldLockScroll.value) releaseLock = acquireRsDrawerScrollLock();
+			window.addEventListener("pointerdown", onWindowPointerDown);
+			window.addEventListener("keydown", onWindowKeydown);
+			refreshBounds();
+		}
+		function unbindLayer() {
+			if (!layerBound) return;
+			layerBound = false;
+			if (typeof window !== "undefined") {
+				window.removeEventListener("pointerdown", onWindowPointerDown);
+				window.removeEventListener("keydown", onWindowKeydown);
+			}
+			releaseLayer?.();
+			releaseLayer = null;
+			releaseLock?.();
+			releaseLock = null;
+		}
+		function shouldBlockOutsideDismiss() {
+			return !props.closeOnOverlayClick || suppressOutsideUntilGestureEnd.value || resizing.value;
+		}
+		function onWindowPointerDown(event) {
+			if (!open.value || !isTopRsDrawer(layerId)) return;
+			if (shouldBlockOutsideDismiss()) return;
+			if (isRsDrawerDismissExempt(event.target, resolveContentEl())) return;
+			requestClose("overlay");
+		}
+		function onWindowKeydown(event) {
+			if (event.key !== "Escape" || event.defaultPrevented) return;
+			if (!open.value || !isTopRsDrawer(layerId)) return;
+			if (!props.closeOnEsc) {
+				event.preventDefault();
+				return;
+			}
+			event.preventDefault();
+			requestClose("escape");
+		}
+		function onContentKeydown(event) {
+			if (event.key !== "Tab" || !isModal.value || !open.value || !isTopRsDrawer(layerId)) return;
+			const content = resolveContentEl();
+			if (!content) return;
+			const items = listRsDrawerFocusables(content);
+			if (!items.length) {
+				event.preventDefault();
+				content.focus({ preventScroll: true });
+				return;
+			}
+			const first = items[0];
+			const last = items[items.length - 1];
+			const active = document.activeElement;
+			if (event.shiftKey && (active === first || active === content)) {
+				event.preventDefault();
+				last?.focus();
+				return;
+			}
+			if (!event.shiftKey && active === last) {
+				event.preventDefault();
+				first?.focus();
+			}
+		}
+		watch(open, (isOpen, wasOpen) => {
+			if (isOpen && !wasOpen) {
+				clearExitTimer();
+				syncChrome();
+				present.value = true;
+				dormant.value = false;
+				motion.value = "open";
+				markAnimating();
+				armOutsideSuppressForOpenGesture();
+				bindLayer();
+				emit("openChange", true);
+				queueAfterOpen();
+				nextTick(() => focusPanel(false));
+				return;
+			}
+			if (!isOpen && wasOpen) {
+				motion.value = "closed";
+				markAnimating();
+				stopResize();
+				releaseOutsideSuppress();
+				clearAfterOpenTimer();
+				unbindLayer();
+				restoreFocus();
+				scheduleExit();
+				emit("openChange", false);
+				if (!closing.value) emit("afterClose", "programmatic");
+			}
+		});
+		onMounted(() => {
+			releasePointer = acquireRsDrawerPointerTracking();
+			syncChrome();
+			if (!open.value) return;
+			armOutsideSuppressForOpenGesture();
+			bindLayer();
+			nextTick(() => focusPanel(false));
+		});
+		onBeforeUnmount(() => {
+			stopResize();
+			releaseOutsideSuppress();
+			clearAfterOpenTimer();
+			clearExitTimer();
+			clearAnimTimer();
+			if (open.value) restoreFocus();
+			unbindLayer();
+			releasePointer?.();
+			releasePointer = null;
+		});
+		async function requestClose(reason) {
+			if (!open.value || closing.value) return false;
+			closing.value = true;
+			try {
+				if (!await runRsDrawerBeforeClose(props.beforeClose, reason)) return false;
+				open.value = false;
+				await nextTick();
+				emit("afterClose", reason);
+				return true;
+			} finally {
+				closing.value = false;
+			}
+		}
+		async function onHeaderCloseClick() {
+			await requestClose("close");
+		}
+		function rootFontPx() {
+			if (typeof document === "undefined") return 16;
+			const raw = getComputedStyle(document.documentElement).fontSize;
+			const n = Number.parseFloat(raw);
+			return Number.isFinite(n) && n > 0 ? n : 16;
+		}
+		function viewportPx() {
+			if (typeof window === "undefined") return 0;
+			return isHorizontal.value ? window.innerWidth : window.innerHeight;
+		}
+		function sizeBounds() {
+			const vp = viewportPx();
+			const root = rootFontPx();
+			return {
+				min: resolveRsDrawerSizePx(props.minSize, 256, root, vp),
+				max: resolveRsDrawerSizePx(props.maxSize, Math.round(vp * RS_DRAWER_MAX_VIEWPORT_RATIO), root, vp)
+			};
+		}
+		function refreshBounds() {
+			const next = sizeBounds();
+			boundMin.value = next.min;
+			boundMax.value = next.max;
+		}
+		function applyLiveSize(px) {
+			const { min, max } = sizeBounds();
+			const next = clampRsDrawerSize(px, min, max);
+			const el = resolveContentEl();
+			if (el) {
+				el.style.setProperty("--rs-drawer-panel-size", `${next}px`);
+				if (isHorizontal.value) el.style.width = `${next}px`;
+				else el.style.height = `${next}px`;
+			}
+			return next;
+		}
+		let resizePointerId = null;
+		let resizeStartClient = 0;
+		let resizeStartSize = 0;
+		function stopResize() {
+			if (resizePointerId != null && typeof window !== "undefined") {
+				window.removeEventListener("pointermove", onResizePointerMove);
+				window.removeEventListener("pointerup", onResizePointerUp);
+				window.removeEventListener("pointercancel", onResizePointerUp);
+				resizePointerId = null;
+			}
+			resizing.value = false;
+			if (typeof document !== "undefined" && document.body) {
+				document.body.style.removeProperty("cursor");
+				document.body.style.removeProperty("user-select");
+			}
+		}
+		function currentPanelPx() {
+			const el = resolveContentEl();
+			if (!el) return 256;
+			const rect = el.getBoundingClientRect();
+			return isHorizontal.value ? rect.width : rect.height;
+		}
+		function onResizePointerDown(event) {
+			if (!enableResizable.value || event.button !== 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			resizeStartClient = isHorizontal.value ? event.clientX : event.clientY;
+			resizeStartSize = currentPanelPx();
+			resizePointerId = event.pointerId;
+			resizing.value = true;
+			refreshBounds();
+			if (typeof document !== "undefined") {
+				document.body.style.cursor = isHorizontal.value ? "ew-resize" : "ns-resize";
+				document.body.style.userSelect = "none";
+			}
+			window.addEventListener("pointermove", onResizePointerMove);
+			window.addEventListener("pointerup", onResizePointerUp);
+			window.addEventListener("pointercancel", onResizePointerUp);
+		}
+		function deltaForPointer(event) {
+			const raw = (isHorizontal.value ? event.clientX : event.clientY) - resizeStartClient;
+			if (props.side === "right" || props.side === "bottom") return -raw;
+			return raw;
+		}
+		function onResizePointerMove(event) {
+			if (resizePointerId == null || event.pointerId !== resizePointerId) return;
+			const next = applyLiveSize(resizeStartSize + deltaForPointer(event));
+			emit("resize", next);
+		}
+		function commitResize(next) {
+			liveSizePx.value = next;
+			emit("resize", next);
+			if (isHorizontal.value) emit("update:width", next);
+			else emit("update:height", next);
+		}
+		function onResizePointerUp(event) {
+			if (resizePointerId == null || event.pointerId !== resizePointerId) return;
+			const next = applyLiveSize(resizeStartSize + deltaForPointer(event));
+			stopResize();
+			commitResize(next);
+		}
+		function onResizeKeydown(event) {
+			if (!enableResizable.value) return;
+			refreshBounds();
+			if (event.key === "Home") {
+				event.preventDefault();
+				commitResize(applyLiveSize(sizeBounds().min));
+				return;
+			}
+			if (event.key === "End") {
+				event.preventDefault();
+				commitResize(applyLiveSize(sizeBounds().max));
+				return;
+			}
+			const step = event.shiftKey ? 48 : 16;
+			let delta = 0;
+			if (props.side === "right") {
+				if (event.key === "ArrowLeft") delta = step;
+				else if (event.key === "ArrowRight") delta = -step;
+			} else if (props.side === "left") {
+				if (event.key === "ArrowRight") delta = step;
+				else if (event.key === "ArrowLeft") delta = -step;
+			} else if (props.side === "top") {
+				if (event.key === "ArrowDown") delta = step;
+				else if (event.key === "ArrowUp") delta = -step;
+			} else if (props.side === "bottom") {
+				if (event.key === "ArrowUp") delta = step;
+				else if (event.key === "ArrowDown") delta = -step;
+			}
+			if (!delta) return;
+			event.preventDefault();
+			commitResize(applyLiveSize(currentPanelPx() + delta));
+		}
+		function onContentAnimationEnd(event) {
+			if (event.target !== resolveContentEl()) return;
+			animating.value = false;
+			if (!open.value && motion.value === "closed") finishExit();
+		}
+		__expose({
+			close: (reason = "programmatic") => requestClose(reason),
+			openDrawer: () => {
+				open.value = true;
+			},
+			focus: () => focusPanel(true)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
+				ref_key: "anchorRef",
+				ref: anchorRef,
+				class: "rs-drawer__anchor",
+				hidden: "",
+				"aria-hidden": "true"
+			}, null, 512), (openBlock(), createBlock(Teleport, {
+				disabled: teleportDisabled.value,
+				to: teleportTarget.value
+			}, [__props.showOverlay && present.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(["rs-drawer__overlay rs-motion-reduce", {
+					"rs-drawer__overlay--contained": contained.value,
+					"rs-drawer__overlay--dormant": dormant.value
+				}]),
+				style: normalizeStyle([overlayStyle.value, zStyle.value]),
+				"data-state": motion.value,
+				"data-rs-theme": panelTheme.value,
+				dir: panelDir.value,
+				lang: panelLang.value,
+				"aria-hidden": "true"
+			}, null, 14, _hoisted_1)) : createCommentVNode("", true), present.value ? (openBlock(), createElementBlock("div", mergeProps({
+				key: 1,
+				id: __props.id,
+				ref_key: "contentRef",
+				ref: contentRef
+			}, _ctx.$attrs, {
+				class: ["rs-drawer rs-drawer__content rs-motion-reduce", contentClass.value],
+				style: [contentStyle.value, zStyle.value],
+				role: "dialog",
+				"aria-modal": isModal.value && motion.value === "open" ? "true" : "false",
+				"aria-labelledby": labelledBy.value,
+				"aria-describedby": describedBy.value,
+				"aria-hidden": motion.value === "open" ? void 0 : "true",
+				inert: motion.value === "open" ? void 0 : true,
+				"data-state": motion.value,
+				"data-rs-theme": panelTheme.value,
+				dir: panelDir.value,
+				lang: panelLang.value,
+				tabindex: "-1",
+				onKeydown: onContentKeydown,
+				onAnimationend: onContentAnimationEnd
+			}), [
+				__props.title || __props.description || __props.showClose || _ctx.$slots.header || _ctx.$slots.extra ? (openBlock(), createElementBlock("header", _hoisted_3, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", _hoisted_4, [__props.title ? (openBlock(), createElementBlock("h2", {
+					key: 0,
+					id: titleId.value,
+					class: "rs-drawer__title"
+				}, toDisplayString(__props.title), 9, _hoisted_5)) : createCommentVNode("", true), __props.description ? (openBlock(), createElementBlock("p", {
+					key: 1,
+					id: descId.value,
+					class: "rs-drawer__description"
+				}, toDisplayString(__props.description), 9, _hoisted_6)) : createCommentVNode("", true)])]), _ctx.$slots.extra || __props.showClose ? (openBlock(), createElementBlock("div", _hoisted_7, [_ctx.$slots.extra ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "extra")])) : createCommentVNode("", true), __props.showClose ? (openBlock(), createBlock(RsButton_default, {
+					key: 1,
+					class: "rs-drawer__close",
+					variant: "ghost",
+					size: "sm",
+					icon: "x",
+					tooltip: unref(t)("drawer.close"),
+					onClick: onHeaderCloseClick
+				}, null, 8, ["tooltip"])) : createCommentVNode("", true)])) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				_ctx.$slots.header || !__props.title ? (openBlock(), createElementBlock("h2", {
+					key: 1,
+					id: titleId.value,
+					class: "rs-drawer__title rs-drawer__title--sr-only"
+				}, toDisplayString(__props.title || __props.ariaLabel || unref(t)("drawer.label")), 9, _hoisted_9)) : createCommentVNode("", true),
+				__props.description && _ctx.$slots.header ? (openBlock(), createElementBlock("p", {
+					key: 2,
+					id: descId.value,
+					class: "rs-drawer__description rs-drawer__description--sr-only"
+				}, toDisplayString(__props.description), 9, _hoisted_10)) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_11, [renderSlot(_ctx.$slots, "default")]),
+				_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_12, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true),
+				enableResizable.value ? (openBlock(), createElementBlock("div", {
+					key: 4,
+					class: "rs-drawer__resize",
+					role: "separator",
+					tabindex: "0",
+					"aria-label": unref(t)("drawer.resize"),
+					"aria-orientation": isHorizontal.value ? "vertical" : "horizontal",
+					"aria-valuemin": boundMin.value,
+					"aria-valuemax": boundMax.value,
+					"aria-valuenow": liveSizePx.value != null ? Math.round(liveSizePx.value) : void 0,
+					"aria-controls": __props.id || void 0,
+					onPointerdown: onResizePointerDown,
+					onKeydown: onResizeKeydown
+				}, null, 40, _hoisted_13)) : createCommentVNode("", true)
+			], 16, _hoisted_2)) : createCommentVNode("", true)], 8, ["disabled", "to"]))], 64);
+		};
+	}
+});
+//#endregion
+export { RsDrawer_vue_vue_type_script_setup_true_lang_default as default };