{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-resize-observer/index.ts"],"sourcesContent":["import type { ConfigurableWindow } from '../_configurable';\nimport type { MaybeComputedElementRef } from '../unref-element';\nimport { watch } from 'vue';\nimport { defaultWindow } from '../_configurable';\nimport { tryOnScopeDispose } from '../try-on-scope-dispose';\nimport { unrefElement } from '../unref-element';\nimport { useSupported } from '../use-supported';\n\nexport interface ResizeObserverSize {\n  readonly inlineSize: number;\n  readonly blockSize: number;\n}\n\nexport interface ResizeObserverEntry {\n  readonly target: Element;\n  readonly contentRect: DOMRectReadOnly;\n  readonly borderBoxSize?: readonly ResizeObserverSize[];\n  readonly contentBoxSize?: readonly ResizeObserverSize[];\n  readonly devicePixelContentBoxSize?: readonly ResizeObserverSize[];\n}\n\nexport type ResizeObserverCallback = (\n  entries: readonly ResizeObserverEntry[],\n  observer: ResizeObserver,\n) => void;\n\nexport interface UseResizeObserverOptions extends ConfigurableWindow {\n  /**\n   * Sets which box model the observer will observe changes to. Possible values\n   * are `content-box` (the default), `border-box` and `device-pixel-content-box`.\n   *\n   * @default 'content-box'\n   */\n  box?: ResizeObserverBoxOptions;\n}\n\ndeclare class ResizeObserver {\n  constructor(callback: ResizeObserverCallback);\n  disconnect(): void;\n  observe(target: Element, options?: UseResizeObserverOptions): void;\n  unobserve(target: Element): void;\n}\n\n/**\n * Reports changes to the dimensions of an Element's content or the border-box\n *\n * @see https://vueuse.org/useResizeObserver\n * @param target\n * @param callback\n * @param options\n */\nexport function useResizeObserver(\n  target: MaybeComputedElementRef,\n  callback: ResizeObserverCallback,\n  options: UseResizeObserverOptions = {},\n) {\n  const { window = defaultWindow, ...observerOptions } = options;\n  let observer: ResizeObserver | undefined;\n  const isSupported = useSupported(() => window && 'ResizeObserver' in window);\n\n  const cleanup = () => {\n    if (observer) {\n      observer.disconnect();\n      observer = undefined;\n    }\n  };\n\n  const stopWatch = watch(\n    () => unrefElement(target),\n    (el) => {\n      cleanup();\n\n      if (isSupported.value && window && el) {\n        observer = new ResizeObserver(callback);\n        observer!.observe(el, observerOptions);\n      }\n    },\n    { immediate: true, flush: 'post' },\n  );\n\n  const stop = () => {\n    cleanup();\n    stopWatch();\n  };\n\n  tryOnScopeDispose(stop);\n\n  return {\n    isSupported,\n    stop,\n  };\n}\n\nexport type UseResizeObserverReturn = ReturnType<typeof useResizeObserver>;\n"],"names":[],"mappings":";;;;;;AAmDO,SAAS,iBACd,CAAA,MAAA,EACA,QACA,EAAA,OAAA,GAAoC,EACpC,EAAA;AACA,EAAA,MAAM,EAAE,MAAA,GAAS,aAAe,EAAA,GAAG,iBAAoB,GAAA,OAAA,CAAA;AACvD,EAAI,IAAA,QAAA,CAAA;AACJ,EAAA,MAAM,WAAc,GAAA,YAAA,CAAa,MAAM,MAAA,IAAU,oBAAoB,MAAM,CAAA,CAAA;AAE3E,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AACpB,MAAW,QAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KACb;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,SAAY,GAAA,KAAA;AAAA,IAChB,MAAM,aAAa,MAAM,CAAA;AAAA,IACzB,CAAC,EAAO,KAAA;AACN,MAAQ,OAAA,EAAA,CAAA;AAER,MAAI,IAAA,WAAA,CAAY,KAAS,IAAA,MAAA,IAAU,EAAI,EAAA;AACrC,QAAW,QAAA,GAAA,IAAI,eAAe,QAAQ,CAAA,CAAA;AACtC,QAAU,QAAA,CAAA,OAAA,CAAQ,IAAI,eAAe,CAAA,CAAA;AAAA,OACvC;AAAA,KACF;AAAA,IACA,EAAE,SAAA,EAAW,IAAM,EAAA,KAAA,EAAO,MAAO,EAAA;AAAA,GACnC,CAAA;AAEA,EAAA,MAAM,OAAO,MAAM;AACjB,IAAQ,OAAA,EAAA,CAAA;AACR,IAAU,SAAA,EAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,iBAAA,CAAkB,IAAI,CAAA,CAAA;AAEtB,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,IAAA;AAAA,GACF,CAAA;AACF;;;;"}