utils.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. require('../../../utils/index.js');
  4. var core = require('@vueuse/core');
  5. let hiddenTextarea = void 0;
  6. const HIDDEN_STYLE = `
  7. height:0 !important;
  8. visibility:hidden !important;
  9. overflow:hidden !important;
  10. position:absolute !important;
  11. z-index:-1000 !important;
  12. top:0 !important;
  13. right:0 !important;
  14. `;
  15. const CONTEXT_STYLE = [
  16. "letter-spacing",
  17. "line-height",
  18. "padding-top",
  19. "padding-bottom",
  20. "font-family",
  21. "font-weight",
  22. "font-size",
  23. "text-rendering",
  24. "text-transform",
  25. "width",
  26. "text-indent",
  27. "padding-left",
  28. "padding-right",
  29. "border-width",
  30. "box-sizing"
  31. ];
  32. function calculateNodeStyling(targetElement) {
  33. const style = window.getComputedStyle(targetElement);
  34. const boxSizing = style.getPropertyValue("box-sizing");
  35. const paddingSize = Number.parseFloat(style.getPropertyValue("padding-bottom")) + Number.parseFloat(style.getPropertyValue("padding-top"));
  36. const borderSize = Number.parseFloat(style.getPropertyValue("border-bottom-width")) + Number.parseFloat(style.getPropertyValue("border-top-width"));
  37. const contextStyle = CONTEXT_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(";");
  38. return { contextStyle, paddingSize, borderSize, boxSizing };
  39. }
  40. function calcTextareaHeight(targetElement, minRows = 1, maxRows) {
  41. var _a;
  42. if (!hiddenTextarea) {
  43. hiddenTextarea = document.createElement("textarea");
  44. document.body.appendChild(hiddenTextarea);
  45. }
  46. const { paddingSize, borderSize, boxSizing, contextStyle } = calculateNodeStyling(targetElement);
  47. hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
  48. hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
  49. let height = hiddenTextarea.scrollHeight;
  50. const result = {};
  51. if (boxSizing === "border-box") {
  52. height = height + borderSize;
  53. } else if (boxSizing === "content-box") {
  54. height = height - paddingSize;
  55. }
  56. hiddenTextarea.value = "";
  57. const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
  58. if (core.isNumber(minRows)) {
  59. let minHeight = singleRowHeight * minRows;
  60. if (boxSizing === "border-box") {
  61. minHeight = minHeight + paddingSize + borderSize;
  62. }
  63. height = Math.max(minHeight, height);
  64. result.minHeight = `${minHeight}px`;
  65. }
  66. if (core.isNumber(maxRows)) {
  67. let maxHeight = singleRowHeight * maxRows;
  68. if (boxSizing === "border-box") {
  69. maxHeight = maxHeight + paddingSize + borderSize;
  70. }
  71. height = Math.min(maxHeight, height);
  72. }
  73. result.height = `${height}px`;
  74. (_a = hiddenTextarea.parentNode) == null ? void 0 : _a.removeChild(hiddenTextarea);
  75. hiddenTextarea = void 0;
  76. return result;
  77. }
  78. exports.calcTextareaHeight = calcTextareaHeight;
  79. //# sourceMappingURL=utils.js.map