UNPKG

xdesign-vue-next

Version:

XDesign Component for vue-next

1 lines 5.47 kB
{"version":3,"file":"calcTextareaHeight.mjs","sources":["../../src/textarea/calcTextareaHeight.ts"],"sourcesContent":["/**\n * Thanks to https://github.com/ElemeFE/element/blob/dev/packages/input/src/calcTextareaHeight.js\n */\n\nimport { CSSProperties } from 'vue';\n\ntype RowsType = number | null;\n\nlet hiddenTextarea: HTMLTextAreaElement;\n\nconst HIDDEN_TEXTAREA_STYLE = `\n min-height:0 !important;\n max-height:none !important;\n height:0 !important;\n visibility:hidden !important;\n overflow:hidden !important;\n position:absolute !important;\n z-index:-1000 !important;\n top:0 !important;\n right:0 !important\n`;\n\nconst SIZING_PROPS = [\n 'letter-spacing',\n 'line-height',\n 'padding-top',\n 'padding-bottom',\n 'font-family',\n 'font-weight',\n 'font-size',\n 'font-variant',\n 'text-rendering',\n 'text-transform',\n 'width',\n 'text-indent',\n 'padding-left',\n 'padding-right',\n 'border-width',\n 'box-sizing',\n];\n\nfunction calculateNodeStyling(targetElement: HTMLTextAreaElement) {\n if (typeof window === 'undefined') return;\n\n const style = window.getComputedStyle(targetElement);\n\n const boxSizing =\n style.getPropertyValue('box-sizing') ||\n style.getPropertyValue('-moz-box-sizing') ||\n style.getPropertyValue('-webkit-box-sizing');\n\n const paddingSize =\n parseFloat(style.getPropertyValue('padding-bottom')) + parseFloat(style.getPropertyValue('padding-top'));\n\n const borderSize =\n parseFloat(style.getPropertyValue('border-bottom-width')) + parseFloat(style.getPropertyValue('border-top-width'));\n\n const sizingStyle = SIZING_PROPS.map((name) => `${name}:${style.getPropertyValue(name)}`).join(';');\n\n return {\n sizingStyle,\n paddingSize,\n borderSize,\n boxSizing,\n };\n}\n\nexport default function calcTextareaHeight(\n targetElement: HTMLTextAreaElement,\n minRows: RowsType = 1,\n maxRows: RowsType = null,\n) {\n if (!hiddenTextarea) {\n hiddenTextarea = document.createElement('textarea');\n document.body.appendChild(hiddenTextarea);\n }\n\n const { paddingSize, borderSize, boxSizing, sizingStyle } = calculateNodeStyling(targetElement);\n\n hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);\n hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';\n\n let height = hiddenTextarea.scrollHeight;\n const result: CSSProperties = {};\n\n if (boxSizing === 'border-box') {\n height += borderSize;\n } else if (boxSizing === 'content-box') {\n height -= paddingSize;\n }\n\n hiddenTextarea.value = '';\n const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;\n\n if (minRows !== null) {\n let minHeight = singleRowHeight * minRows;\n if (boxSizing === 'border-box') {\n minHeight = minHeight + paddingSize + borderSize;\n }\n height = Math.max(minHeight, height);\n result.minHeight = `${minHeight}px`;\n }\n if (maxRows !== null) {\n let maxHeight = singleRowHeight * maxRows;\n if (boxSizing === 'border-box') {\n maxHeight = maxHeight + paddingSize + borderSize;\n }\n height = Math.min(maxHeight, height);\n }\n result.height = `${height}px`;\n hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea);\n hiddenTextarea = null;\n return result;\n}\n"],"names":["sizingStyle","paddingSize","borderSize","boxSizing","hiddenTextarea","document","height","minHeight","result","maxHeight"],"mappings":";;;;;;AAQA,sCAAA,IAAA,cAAA,CAAA;AAEA,IAAA,qBAAA,GAAA,gQAAA,CAAA;AAYA,IAAA,YAAA,GAAA,CAAA,gBAAA,EAAA,aAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,OAAA,EAAA,aAAA,EAAA,cAAA,EAAA,eAAA,EAAA,cAAA,EAAA,YAAA,CAAA,CAAA;AAmBA,SAAA,oBAAA,CAAA,aAAA,EAAA;AACE,EAAA,IAAA,OAAA,MAAA,KAAA,WAAA,EAAA,OAAA;AAEM,EAAA,IAAA,KAAA,GAAA,MAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,CAAA;;;;AAaN,EAAA,IAAA,WAAA,GAAA,YAAA,CAAA,GAAA,CAAA,UAAA,IAAA,EAAA;;AAAwF,GAAA,CAAA,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA;;AAGtFA,IAAAA,WAAAA,EAAAA,WAAAA;AACAC,IAAAA,WAAAA,EAAAA,WAAAA;AACAC,IAAAA,UAAAA,EAAAA,UAAAA;AACAC,IAAAA,SAAAA,EAAAA,SAAAA;;AAEJ,CAAA;AAEA,SAAA,kBAAA,CAAA,aAAA,EAAA;AAIE,EAAA,IAAA,OAAA,GAAA,SAAA,CAAA,MAAA,GAAA,CAAA,IAAA,SAAA,CAAA,CAAA,CAAA,KAAA,SAAA,GAAA,SAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA;AAFoB,EAAA,IAAA,OAAA,GAAA,SAAA,CAAA,MAAA,GAAA,CAAA,IAAA,SAAA,CAAA,CAAA,CAAA,KAAA,SAAA,GAAA,SAAA,CAAA,CAAA,CAAA,GAAA,IAAA,CAAA;;AAIDC,IAAAA,cAAAA,GAAAA,QAAAA,CAAAA,aAAAA,CAAAA,UAAAA,CAAAA,CAAAA;AACRC,IAAAA,QAAAA,CAAAA,IAAAA,CAAAA,WAAAA,CAAAA,cAAAA,CAAAA,CAAAA;AACX,GAAA;AAEA,EAAA,IAAA,qBAAA,GAAA,oBAAA,CAAA,aAAA,CAAA;;;;;AAEAD,EAAAA,cAAAA,CAAAA,YAAAA,CAAAA,OAAAA,EAAAA,EAAAA,CAAAA,MAAAA,CAAAA,WAAAA,EAAAA,GAAAA,CAAAA,CAAAA,MAAAA,CAAAA,qBAAAA,CAAAA,CAAAA,CAAAA;;AAGA,EAAA,IAAA,MAAA,GAAA,cAAA,CAAA,YAAA,CAAA;;;AAIYE,IAAAA,MAAAA,IAAAA,UAAAA,CAAAA;AACZ,GAAA,MAAA,IAAA,SAAA,KAAA,aAAA,EAAA;AACYA,IAAAA,MAAAA,IAAAA,WAAAA,CAAAA;AACZ,GAAA;;AAGM,EAAA,IAAA,eAAA,GAAA,cAAA,CAAA,YAAA,GAAA,WAAA,CAAA;;AAGJ,IAAA,IAAA,SAAA,GAAA,eAAA,GAAA,OAAA,CAAA;;AAEEC,MAAAA,SAAAA,GAAAA,SAAAA,GAAAA,WAAAA,GAAAA,UAAAA,CAAAA;AACF,KAAA;;AAEAC,IAAAA,MAAAA,CAAAA,SAAAA,GAAAA,EAAAA,CAAAA,MAAAA,CAAAA,SAAAA,EAAAA,IAAAA,CAAAA,CAAAA;AACF,GAAA;;AAEE,IAAA,IAAA,SAAA,GAAA,eAAA,GAAA,OAAA,CAAA;;AAEEC,MAAAA,SAAAA,GAAAA,SAAAA,GAAAA,WAAAA,GAAAA,UAAAA,CAAAA;AACF,KAAA;;AAEF,GAAA;AACAD,EAAAA,MAAAA,CAAAA,MAAAA,GAAAA,EAAAA,CAAAA,MAAAA,CAAAA,MAAAA,EAAAA,IAAAA,CAAAA,CAAAA;;AAEiBJ,EAAAA,cAAAA,GAAAA,IAAAA,CAAAA;AACV,EAAA,OAAA,MAAA,CAAA;AACT;;;;"}