tdesign-mobile-vue/cjs/hooks/useElementRect.js

tdesign-mobile-vue

/**
 * tdesign v1.13.2
 * (c) 2026 TDesign Group
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var Vue = require('vue');

function resolveElement(element) {
  if (!element) return null;
  if (typeof element === "string") {
    return document.querySelector(element);
  }
  if (element instanceof HTMLElement) {
    return element;
  }
  return null;
}
function getElementRect(element) {
  var rect = element.getBoundingClientRect();
  return {
    top: rect.top,
    bottom: rect.bottom,
    left: rect.left,
    right: rect.right,
    width: rect.width,
    height: rect.height
  };
}
function useElementRect(element) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var _options$immediate = options.immediate,
    immediate = _options$immediate === void 0 ? true : _options$immediate,
    _options$resizeObserv = options.resizeObserver,
    resizeObserver = _options$resizeObserv === void 0 ? false : _options$resizeObserv;
  var elementRef = Vue.shallowRef(null);
  var rect = Vue.ref({
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    width: 0,
    height: 0
  });
  var resizeObserverInstance = null;
  var updateElement = function updateElement() {
    var elementValue = Vue.unref(element);
    var el = resolveElement(elementValue);
    elementRef.value = el;
    if (el) {
      rect.value = getElementRect(el);
    }
  };
  var setupResizeObserver = function setupResizeObserver() {
    if (!resizeObserver) return;
    if (elementRef.value && window.ResizeObserver) {
      resizeObserverInstance = new ResizeObserver(function () {
        rect.value = getElementRect(elementRef.value);
      });
      resizeObserverInstance.observe(elementRef.value);
    }
  };
  var cleanupResizeObserver = function cleanupResizeObserver() {
    if (resizeObserverInstance) {
      resizeObserverInstance.disconnect();
      resizeObserverInstance = null;
    }
  };
  Vue.watch(function () {
    return Vue.unref(element);
  }, function () {
    cleanupResizeObserver();
    updateElement();
    setupResizeObserver();
  }, {
    flush: "post"
  });
  Vue.onMounted(function () {
    if (immediate) {
      updateElement();
      setupResizeObserver();
    }
  });
  Vue.onUnmounted(function () {
    cleanupResizeObserver();
  });
  return {
    element: elementRef,
    rect: rect,
    updateElement: updateElement
  };
}
function useElementHeight(target) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var _useElementRect = useElementRect(target, options),
    rect = _useElementRect.rect;
  return {
    height: Vue.ref(function () {
      return rect.value.height;
    }),
    calculateHeight: function calculateHeight() {}
  };
}

exports["default"] = useElementRect;
exports.getElementRect = getElementRect;
exports.resolveElement = resolveElement;
exports.useElementHeight = useElementHeight;
//# sourceMappingURL=useElementRect.js.map