@empathyco/x-components
Version:
Empathy X Components
45 lines (42 loc) • 1.6 kB
JavaScript
import { defineComponent, onMounted, getCurrentInstance, onUnmounted } from 'vue';
import { useEmitDisplayEvent } from '../composables/use-on-display.js';
/** A component that emits a display event when it first appears in the viewport. */
var _sfc_main = defineComponent({
name: 'DisplayEmitter',
props: {
/** The payload for the display event emit. */
payload: {
type: Object,
required: true,
},
/** Optional event metadata. */
eventMetadata: {
type: Object,
},
},
setup(props, { slots }) {
let unwatchDisplay;
onMounted(() => {
const element = getCurrentInstance()?.proxy?.$el;
if (element) {
unwatchDisplay = useEmitDisplayEvent({
element,
taggingRequest: props.payload,
...(props.eventMetadata && { eventMetadata: props.eventMetadata }),
}).unwatchDisplay;
}
});
onUnmounted(() => {
unwatchDisplay?.();
});
/*
* Obtains the vNodes array of the default slot and renders only the first one.
* It avoids to render a `Fragment` with the vNodes in Vue3 and the same behaviour in Vue2
* because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to
* retrieve the HTML element in both versions.
*/
return () => slots.default?.()[0] ?? '';
},
});
export { _sfc_main as default };
//# sourceMappingURL=display-emitter.vue.js.map