import { defineComponent , onMounted , onUnmounted , ref , ComponentPublicInstance , computed , cloneVNode , watch , } from 'vue' ; import ResizeObserver from 'resize-observer-polyfill' ; import { getFirstComponent } from '../_utils/vue-utils' ; import { isComponentInstance } from '../_utils/is' ; export default defineComponent ( { name : 'ResizeObserver' , emits : [ 'resize' , ] , setup ( props , { emit , slots } ) { let resizeObserver ; const componentRef = ref < HTMLElement | ComponentPublicInstance > ( ) ; const element = computed < HTMLElement > ( ( ) => isComponentInstance ( componentRef . value ) ? componentRef . value . $el : componentRef . value ) ; const createResizeObserver = ( target ) => { if ( ! target ) return ; resizeObserver = new ResizeObserver ( ( entries ) => { const entry = entries [ 0 ] ; emit ( 'resize' , entry ) ; } ) ; resizeObserver . observe ( target ) ; } ; const destroyResizeObserver = ( ) => { if ( resizeObserver ) { resizeObserver . disconnect ( ) ; resizeObserver = null ; } } ; watch ( element , ( _element ) => { if ( resizeObserver ) destroyResizeObserver ( ) ; if ( _element ) createResizeObserver ( _element ) ; } ) ; onMounted ( ( ) => { if ( element . value ) { createResizeObserver ( element . value ) ; } } ) ; onUnmounted ( ( ) => { destroyResizeObserver ( ) ; } ) ; return ( ) => { const firstChild = getFirstComponent ( slots . default ?. ( ) ?? [ ] ) ; if ( firstChild ) { return cloneVNode ( firstChild , { ref : componentRef } , true ) ; } return null ; } ; } } ) ;