'use strict';

var vue = require('vue');
var index = require('../use-resize-observer/index.cjs');
var index$1 = require('../unref-element/index.cjs');

function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
  const { box = "content-box" } = options;
  const width = vue.shallowRef(initialSize.width);
  const height = vue.shallowRef(initialSize.height);
  index.useResizeObserver(
    target,
    ([entry]) => {
      const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
      if (boxSize) {
        width.value = boxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
        height.value = boxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
      } else {
        width.value = entry.contentRect.width;
        height.value = entry.contentRect.height;
      }
    },
    options
  );
  vue.watch(
    () => index$1.unrefElement(target),
    (ele) => {
      width.value = ele ? initialSize.width : 0;
      height.value = ele ? initialSize.height : 0;
    }
  );
  return {
    width,
    height
  };
}

exports.useElementSize = useElementSize;
//# sourceMappingURL=index.cjs.map
