50 lines
2.0 KiB
JavaScript
50 lines
2.0 KiB
JavaScript
import { renderSlotFragments } from "../shared/renderSlotFragments.js";
|
|
import { usePresence } from "./usePresence.js";
|
|
import { defineComponent, getCurrentInstance, h, ref, toRefs } from "vue";
|
|
import { unrefElement } from "@vueuse/core";
|
|
|
|
//#region src/Presence/Presence.ts
|
|
var Presence_default = defineComponent({
|
|
name: "Presence",
|
|
props: {
|
|
present: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
forceMount: { type: Boolean }
|
|
},
|
|
slots: {},
|
|
setup(props, { slots, expose }) {
|
|
const { present, forceMount } = toRefs(props);
|
|
const node = ref();
|
|
const { isPresent } = usePresence(present, node);
|
|
expose({ present: isPresent });
|
|
let children = slots.default({ present: isPresent.value });
|
|
children = renderSlotFragments(children || []);
|
|
const instance = getCurrentInstance();
|
|
if (children && children?.length > 1) {
|
|
const componentName = instance?.parent?.type.name ? `<${instance.parent.type.name} />` : "component";
|
|
throw new Error([
|
|
`Detected an invalid children for \`${componentName}\` for \`Presence\` component.`,
|
|
"",
|
|
"Note: Presence works similarly to `v-if` directly, but it waits for animation/transition to finished before unmounting. So it expect only one direct child of valid VNode type.",
|
|
"You can apply a few solutions:",
|
|
["Provide a single child element so that `presence` directive attach correctly.", "Ensure the first child is an actual element instead of a raw text node or comment node."].map((line) => ` - ${line}`).join("\n")
|
|
].join("\n"));
|
|
}
|
|
return () => {
|
|
if (forceMount.value || present.value || isPresent.value) return h(slots.default({ present: isPresent.value })[0], { ref: (v) => {
|
|
const el = unrefElement(v);
|
|
if (typeof el?.hasAttribute === "undefined") return el;
|
|
if (el?.hasAttribute("data-reka-popper-content-wrapper")) node.value = el.firstElementChild;
|
|
else node.value = el;
|
|
return el;
|
|
} });
|
|
else return null;
|
|
};
|
|
}
|
|
});
|
|
|
|
//#endregion
|
|
export { Presence_default };
|
|
//# sourceMappingURL=Presence.js.map
|