@ark-ui/vue
Version:
A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.
91 lines (88 loc) • 3.36 kB
JavaScript
import { defineComponent, ref, watch, createBlock, openBlock, unref, withCtx, createElementVNode, mergeProps, createCommentVNode, Teleport, createVNode, renderSlot } from 'vue';
import _sfc_main$1 from '../../providers/environment/environment-provider.vue.js';
import _sfc_main$2 from './frame-content.vue.js';
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "frame",
props: {
head: {},
srcDoc: { default: '<html><head><style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style></head><body><div class="frame-root"></div></body></html>' }
},
emits: ["mount", "unmount"],
setup(__props, { expose: __expose, emit: __emit }) {
const emit = __emit;
const props = __props;
const frameRef = ref(null);
const mountNode = ref(null);
__expose({ frameRef });
function getMountNode(frame) {
const doc = frame.contentWindow?.document;
if (!doc) return null;
return doc.body.querySelector(".frame-root") || doc.body;
}
watch(frameRef, (node) => {
if (!node) return;
const doc = node.contentWindow?.document;
if (!doc) return;
doc.open();
doc.write(props.srcDoc);
doc.close();
mountNode.value = getMountNode(node);
});
watch(
() => [frameRef.value, mountNode.value],
([frameNode, mountNode2], _oldValue, onCleanup) => {
if (!frameNode || !frameNode.contentDocument) return;
const win = frameNode.contentWindow;
if (!win) return;
const exec = () => {
const rootEl = frameNode.contentDocument?.documentElement;
if (!rootEl || !mountNode2) return;
frameNode.style.setProperty("--width", `${mountNode2.scrollWidth}px`);
frameNode.style.setProperty("--height", `${mountNode2.scrollHeight}px`);
};
const resizeObserver = new win.ResizeObserver(exec);
exec();
if (mountNode2) {
resizeObserver.observe(mountNode2);
}
onCleanup(() => {
resizeObserver.disconnect();
});
}
);
const env = () => frameRef.value?.contentDocument ?? document;
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(_sfc_main$1), { value: env }, {
default: withCtx(() => [
createElementVNode("iframe", mergeProps({
ref_key: "frameRef",
ref: frameRef
}, _ctx.$attrs), [
mountNode.value ? (openBlock(), createBlock(Teleport, {
key: 0,
to: mountNode.value
}, [
createVNode(_sfc_main$2, {
onMount: _cache[0] || (_cache[0] = ($event) => emit("mount")),
onUnmount: _cache[1] || (_cache[1] = ($event) => emit("unmount"))
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
})
], 8, ["to"])) : createCommentVNode("", true),
frameRef.value ? (openBlock(), createBlock(Teleport, {
key: 1,
to: frameRef.value.contentDocument.head
}, [
renderSlot(_ctx.$slots, "head")
], 8, ["to"])) : createCommentVNode("", true)
], 16)
]),
_: 3
});
};
}
});
export { _sfc_main as default };