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

tdesign-mobile-vue

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

'use strict';

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

var Vue = require('vue');
var hooks_useResizeObserver = require('./useResizeObserver.js');
require('@babel/runtime/helpers/typeof');

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,
    enableResizeObserver = _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 updateElement = function updateElement() {
    var elementValue = Vue.unref(element);
    var el = resolveElement(elementValue);
    elementRef.value = el;
    if (el) {
      rect.value = getElementRect(el);
    }
  };
  var _useResizeObserver = hooks_useResizeObserver.useResizeObserver(elementRef, function () {
      if (elementRef.value) {
        rect.value = getElementRect(elementRef.value);
      }
    }, {
      immediate: false,
      onResize: true,
      onVisibilityChange: false
    }),
    stopResizeObserver = _useResizeObserver.stop,
    startResizeObserver = _useResizeObserver.start;
  Vue.watch(function () {
    return Vue.unref(element);
  }, function () {
    stopResizeObserver();
    updateElement();
    if (enableResizeObserver) {
      startResizeObserver();
    }
  }, {
    flush: "post"
  });
  Vue.onMounted(function () {
    if (immediate) {
      updateElement();
      if (enableResizeObserver) {
        startResizeObserver();
      }
    }
  });
  Vue.onUnmounted(function () {
    stopResizeObserver();
  });
  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