utils.mjs 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. import { isFirefox } from "../../../utils/browser.mjs";
  2. import { isNumber } from "../../../utils/types.mjs";
  3. //#region ../../packages/components/input/src/utils.ts
  4. let hiddenTextarea = void 0;
  5. const HIDDEN_STYLE = {
  6. height: "0",
  7. visibility: "hidden",
  8. overflow: isFirefox() ? "" : "hidden",
  9. position: "absolute",
  10. "z-index": "-1000",
  11. top: "0",
  12. right: "0"
  13. };
  14. const CONTEXT_STYLE = [
  15. "letter-spacing",
  16. "line-height",
  17. "padding-top",
  18. "padding-bottom",
  19. "font-family",
  20. "font-weight",
  21. "font-size",
  22. "text-rendering",
  23. "text-transform",
  24. "width",
  25. "text-indent",
  26. "padding-left",
  27. "padding-right",
  28. "border-width",
  29. "box-sizing",
  30. "word-break"
  31. ];
  32. const looseToNumber = (val) => {
  33. const n = Number.parseFloat(val);
  34. return Number.isNaN(n) ? val : n;
  35. };
  36. function calculateNodeStyling(targetElement) {
  37. const style = window.getComputedStyle(targetElement);
  38. const boxSizing = style.getPropertyValue("box-sizing");
  39. const paddingSize = Number.parseFloat(style.getPropertyValue("padding-bottom")) + Number.parseFloat(style.getPropertyValue("padding-top"));
  40. const borderSize = Number.parseFloat(style.getPropertyValue("border-bottom-width")) + Number.parseFloat(style.getPropertyValue("border-top-width"));
  41. return {
  42. contextStyle: CONTEXT_STYLE.map((name) => [name, style.getPropertyValue(name)]),
  43. paddingSize,
  44. borderSize,
  45. boxSizing
  46. };
  47. }
  48. function calcTextareaHeight(targetElement, minRows = 1, maxRows) {
  49. if (!hiddenTextarea) {
  50. hiddenTextarea = document.createElement("textarea");
  51. let hostNode = document.body;
  52. if (!isFirefox() && targetElement.parentNode) hostNode = targetElement.parentNode;
  53. hostNode.appendChild(hiddenTextarea);
  54. }
  55. const { paddingSize, borderSize, boxSizing, contextStyle } = calculateNodeStyling(targetElement);
  56. contextStyle.forEach(([key, value]) => hiddenTextarea?.style.setProperty(key, value));
  57. Object.entries(HIDDEN_STYLE).forEach(([key, value]) => hiddenTextarea?.style.setProperty(key, value, "important"));
  58. hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
  59. let height = hiddenTextarea.scrollHeight;
  60. const result = {};
  61. if (boxSizing === "border-box") height = height + borderSize;
  62. else if (boxSizing === "content-box") height = height - paddingSize;
  63. hiddenTextarea.value = "";
  64. const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
  65. if (isNumber(minRows)) {
  66. let minHeight = singleRowHeight * minRows;
  67. if (boxSizing === "border-box") minHeight = minHeight + paddingSize + borderSize;
  68. height = Math.max(minHeight, height);
  69. result.minHeight = `${minHeight}px`;
  70. }
  71. if (isNumber(maxRows)) {
  72. let maxHeight = singleRowHeight * maxRows;
  73. if (boxSizing === "border-box") maxHeight = maxHeight + paddingSize + borderSize;
  74. height = Math.min(maxHeight, height);
  75. }
  76. result.height = `${height}px`;
  77. hiddenTextarea.parentNode?.removeChild(hiddenTextarea);
  78. hiddenTextarea = void 0;
  79. return result;
  80. }
  81. //#endregion
  82. export { calcTextareaHeight, looseToNumber };
  83. //# sourceMappingURL=utils.mjs.map