From ffafd81e1ed25074430668c792e5e1c6afc22bd0 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 1 Apr 2025 12:44:50 +0200
Subject: [PATCH] feat(Textarea): add `resize-none` class with `autoresize`
 prop

---
 src/runtime/components/Textarea.vue                     | 1 +
 src/theme/textarea.ts                                   | 5 +++++
 test/components/Textarea.spec.ts                        | 1 +
 test/components/__snapshots__/Textarea-vue.spec.ts.snap | 7 +++++++
 test/components/__snapshots__/Textarea.spec.ts.snap     | 7 +++++++
 5 files changed, 21 insertions(+)

diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue
index 9bc30e61..f8750b53 100644
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -92,6 +92,7 @@ const ui = computed(() => textarea({
   size: size?.value,
   loading: props.loading,
   highlight: highlight.value,
+  autoresize: props.autoresize,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing
 }))
diff --git a/src/theme/textarea.ts b/src/theme/textarea.ts
index 71cbbcee..d30ab6d4 100644
--- a/src/theme/textarea.ts
+++ b/src/theme/textarea.ts
@@ -9,6 +9,11 @@ export default (options: Required<ModuleOptions>) => {
       trailing: 'absolute end-0 flex items-start'
     },
     variants: {
+      autoresize: {
+        true: {
+          base: 'resize-none'
+        }
+      },
       size: {
         xs: {
           leading: 'ps-2 inset-y-1',
diff --git a/test/components/Textarea.spec.ts b/test/components/Textarea.spec.ts
index 0561abb3..5f3800a7 100644
--- a/test/components/Textarea.spec.ts
+++ b/test/components/Textarea.spec.ts
@@ -18,6 +18,7 @@ describe('Textarea', () => {
     ['with required', { props: { required: true } }],
     ['with disabled', { props: { disabled: true } }],
     ['with rows', { props: { rows: 5 } }],
+    ['with autoresize', { props: { autoresize: true } }],
     ['with icon', { props: { icon: 'i-lucide-search' } }],
     ['with leading and icon', { props: { leading: true, icon: 'i-lucide-arrow-left' } }],
     ['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
diff --git a/test/components/__snapshots__/Textarea-vue.spec.ts.snap b/test/components/__snapshots__/Textarea-vue.spec.ts.snap
index 6696a1fb..453f4d87 100644
--- a/test/components/__snapshots__/Textarea-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Textarea-vue.spec.ts.snap
@@ -14,6 +14,13 @@ exports[`Textarea > renders with as correctly 1`] = `
 </section>"
 `;
 
+exports[`Textarea > renders with autoresize correctly 1`] = `
+"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) resize-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)"></textarea>
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Textarea > renders with avatar and leadingIcon correctly 1`] = `
 "<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
   <!--v-if-->
diff --git a/test/components/__snapshots__/Textarea.spec.ts.snap b/test/components/__snapshots__/Textarea.spec.ts.snap
index f94da71f..c8811693 100644
--- a/test/components/__snapshots__/Textarea.spec.ts.snap
+++ b/test/components/__snapshots__/Textarea.spec.ts.snap
@@ -14,6 +14,13 @@ exports[`Textarea > renders with as correctly 1`] = `
 </section>"
 `;
 
+exports[`Textarea > renders with autoresize correctly 1`] = `
+"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) resize-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)"></textarea>
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Textarea > renders with avatar and leadingIcon correctly 1`] = `
 "<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-left shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span>
   <!--v-if-->