import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
import { Transition, createBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, onBeforeMount, onBeforeUnmount, openBlock, ref, renderSlot, unref, useId, vShow, watch, withCtx, withDirectives } from "vue";
import { ScalarTeleportRoot, addScalarClassesToHeadless } from "@scalar/components";
import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
//#region src/v2/components/modals/ModalClientContainer.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "scalar scalar-app z-overlay relative" };
var _hoisted_2 = { class: "scalar-container" };
var _hoisted_3 = ["id"];
//#endregion
//#region src/v2/components/modals/ModalClientContainer.vue
var ModalClientContainer_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
	__name: "ModalClientContainer",
	props: { modalState: {} },
	emits: ["open", "close"],
	setup(__props, { emit: __emit }) {
		const props = __props;
		const emit = __emit;
		const client = ref(null);
		const id = useId();
		const { activate: activateFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap(client, {
			allowOutsideClick: true,
			fallbackFocus: `#${id}`
		});
		onBeforeMount(() => addScalarClassesToHeadless());
		watch(() => props.modalState.open, async (open) => {
			if (open) {
				await nextTick();
				activateFocusTrap();
				emit("open");
			} else {
				deactivateFocusTrap();
				emit("close");
			}
		}, { immediate: false });
		onBeforeUnmount(() => {
			deactivateFocusTrap();
		});
		return (_ctx, _cache) => {
			return openBlock(), createBlock(Transition, { name: "scalar-client-fade" }, {
				default: withCtx(() => [withDirectives(createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", mergeProps({
					id: unref(id),
					ref_key: "client",
					ref: client,
					"aria-label": "API Client",
					"aria-modal": "true"
				}, _ctx.$attrs, {
					class: "scalar-app-layout scalar-client",
					role: "dialog",
					tabindex: "-1"
				}), [createVNode(unref(ScalarTeleportRoot), null, {
					default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
					_: 3
				})], 16, _hoisted_3), createElementVNode("div", {
					class: "scalar-app-exit",
					onClick: _cache[0] || (_cache[0] = ($event) => __props.modalState.hide())
				})])], 512), [[vShow, __props.modalState.open]])]),
				_: 3
			});
		};
	}
}), [["__scopeId", "data-v-6118685a"]]);
//#endregion
export { ModalClientContainer_default as t };

//# sourceMappingURL=ModalClientContainer-qHsZi4wQ.js.map