xdesign-vue-next/lib/input/useInputWidth.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

import isUndefined from 'lodash/isUndefined';
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';

function useInputWidth(props, inputRef, innerValue) {
  var inputPreRef = ref(null);
  var composing = ref(false);
  var updateInputWidth = function updateInputWidth() {
    if (!inputPreRef.value || !inputRef.value) return;
    var _inputPreRef$value$ge = inputPreRef.value.getBoundingClientRect(),
      width = _inputPreRef$value$ge.width;
    inputRef.value.style.width = "".concat(width || 0, "px");
  };
  var addListeners = function addListeners() {
    watch(function () {
      return innerValue.value + props.placeholder;
    }, function () {
      if (!props.autoWidth) return;
      nextTick(function () {
        updateInputWidth();
      });
    }, {
      immediate: true
    });
  };
  onMounted(function () {
    composing.value = false;
    if (props.autoWidth) {
      addListeners();
    }
  });
  var resizeObserver = ref(null);
  var addTableResizeObserver = function addTableResizeObserver(element) {
    if (typeof window === "undefined") return;
    if (isUndefined(window.ResizeObserver) || !element) return;
    resizeObserver.value = new window.ResizeObserver(function () {
      updateInputWidth();
    });
    resizeObserver.value.observe(element);
  };
  onMounted(function () {
    addTableResizeObserver(inputPreRef.value);
  });
  onBeforeUnmount(function () {
    var _resizeObserver$value, _resizeObserver$value2;
    (_resizeObserver$value = resizeObserver.value) === null || _resizeObserver$value === void 0 ? void 0 : _resizeObserver$value.unobserve(inputPreRef.value);
    (_resizeObserver$value2 = resizeObserver.value) === null || _resizeObserver$value2 === void 0 ? void 0 : _resizeObserver$value2.disconnect();
  });
  return {
    inputPreRef: inputPreRef
  };
}

export { useInputWidth as default };
//# sourceMappingURL=useInputWidth.js.map