@ark-ui/vue
Version:
A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.
95 lines (90 loc) • 3.62 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const vue = require('vue');
const environmentProvider_vue_vue_type_script_setup_true_lang = require('../../providers/environment/environment-provider.vue.cjs');
const frameContent_vue_vue_type_script_setup_true_lang = require('./frame-content.vue.cjs');
const _sfc_main = /* @__PURE__ */ vue.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 = vue.ref(null);
const mountNode = vue.ref(null);
__expose({ frameRef });
function getMountNode(frame) {
const doc = frame.contentWindow?.document;
if (!doc) return null;
return doc.body.querySelector(".frame-root") || doc.body;
}
vue.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);
});
vue.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 vue.openBlock(), vue.createBlock(vue.unref(environmentProvider_vue_vue_type_script_setup_true_lang.default), { value: env }, {
default: vue.withCtx(() => [
vue.createElementVNode("iframe", vue.mergeProps({
ref_key: "frameRef",
ref: frameRef
}, _ctx.$attrs), [
mountNode.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
key: 0,
to: mountNode.value
}, [
vue.createVNode(frameContent_vue_vue_type_script_setup_true_lang.default, {
onMount: _cache[0] || (_cache[0] = ($event) => emit("mount")),
onUnmount: _cache[1] || (_cache[1] = ($event) => emit("unmount"))
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
})
], 8, ["to"])) : vue.createCommentVNode("", true),
frameRef.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
key: 1,
to: frameRef.value.contentDocument.head
}, [
vue.renderSlot(_ctx.$slots, "head")
], 8, ["to"])) : vue.createCommentVNode("", true)
], 16)
]),
_: 3
});
};
}
});
exports.default = _sfc_main;