Merge pull request #10 from marcreichel/fix/#9-textarea-height

✨ Introduce padding modifier
marcreichel · Sep 15, 2022 · 1c1fa35 · 1c1fa35
2 parents 5fc1bfd + 29a7050
commit 1c1fa35
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -60,7 +60,16 @@ To let the `textarea` automatically resize, add the `x-data` and `x-autosize` di
 <textarea x-data x-autosize></textarea>
 ```
 
-That's it!
+### ⏬ Additional height
+
+To add additional height to the textarea - which might be necessary in some occasions - you can do so using the
+"padding" modifier like so (only `px` values are supported):
+
+```html
+<textarea x-data x-autosize.10px></textarea>
+```
+
+This adds additional 10px to the textarea height. You can provide any integer which best suits your needs.
 
 ## 📄 License
 

diff --git a/dist/alpine-autosize.js b/dist/alpine-autosize.js
diff --git a/dist/alpine-autosize.js.map b/dist/alpine-autosize.js.map
diff --git a/dist/alpine-autosize.min.js b/dist/alpine-autosize.min.js
diff --git a/dist/alpine-autosize.min.js.map b/dist/alpine-autosize.min.js.map
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Alpine Autosize Examples</title>
+
+    <script defer src="../dist/alpine-autosize.min.js"></script>
+    <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
+</head>
+<body x-data>
+<h1>Examples</h1>
+<h2>Default</h2>
+<textarea x-autosize aria-label=""></textarea>
+<h2>With padding</h2>
+<textarea x-autosize.50px aria-label=""></textarea>
+</body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,5 @@
 function Autosize(Alpine) {
-    Alpine.directive('autosize', (el, {}, { cleanup }) => {
-
+    Alpine.directive('autosize', (el, { modifiers }, { cleanup }) => {
         const attributes = Array.from(el.attributes);
 
         let hasWireModel = false;
@@ -20,15 +19,21 @@ function Autosize(Alpine) {
         el.style.resize = 'none';
 
         const previousMinHeight = el.style.minHeight;
-        el.style.minHeight = el.getBoundingClientRect().height + 'px';
+        el.style.minHeight = `${el.getBoundingClientRect().height}px`;
+
+        const paddingModifier = modifiers.filter(modifier => modifier.match(/px$/i))[0] || false;
+        let padding = 0;
+        if (paddingModifier !== false) {
+            padding = parseInt(paddingModifier);
+        }
 
         const handler = (event) => {
             const element = event.target;
             if (!element.scrollHeight) {
                 return;
             }
             element.style.height = '4px';
-            element.style.height = `${element.scrollHeight}px`;
+            element.style.height = `${element.scrollHeight + padding}px`;
         };
 
         handler({ target: el });