From 4147bd6609a6435148dd372d66f42a9ad0d3defc Mon Sep 17 00:00:00 2001
From: Dirk Holtwick <dirk.holtwick@gmail.com>
Date: Thu, 2 Jan 2025 16:24:16 +0100
Subject: [PATCH 1/2] feat: oui-textarea autosize

---
 lib/basic/oui-button.demo.vue    |  3 ++-
 lib/basic/oui-form-item.demo.vue |  1 +
 lib/basic/oui-form-item.vue      |  1 -
 lib/basic/oui-form.styl          | 11 +++++++++++
 lib/basic/oui-textarea.vue       | 11 +++++++++--
 package.json                     |  6 +++---
 6 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/lib/basic/oui-button.demo.vue b/lib/basic/oui-button.demo.vue
index 5b6f915..6ed949b 100644
--- a/lib/basic/oui-button.demo.vue
+++ b/lib/basic/oui-button.demo.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { OuiButton, OuiCheckbox, OuiClose, OuiDemo } from '@/lib'
 import { reactive } from 'vue'
-import image from '../../public/apple-touch-icon-180x180.png?url'
+
+const image = '/apple-touch-icon-180x180.png'
 
 const state = reactive({
   disabled: false,
diff --git a/lib/basic/oui-form-item.demo.vue b/lib/basic/oui-form-item.demo.vue
index b73f87a..67baf58 100644
--- a/lib/basic/oui-form-item.demo.vue
+++ b/lib/basic/oui-form-item.demo.vue
@@ -24,6 +24,7 @@ const state = reactive({
     <OuiInput v-model="state.value2" title="Value with label" description="Some description" required />
     <OuiInputNumber v-model="state.number" title="Number" />
     <OuiTextarea v-model="state.text" title="Text" />
+    <OuiTextarea v-model="state.text" title="Text (autosize)" autosize />
     <OuiPassword v-model="state.password" title="Password" />
     <OuiSelect v-model="state.select" title="Select" :options="['One', 'Two', 'Three']" />
     <OuiDate v-model="state.date" title="Date" />
diff --git a/lib/basic/oui-form-item.vue b/lib/basic/oui-form-item.vue
index 47dc00d..de0482e 100644
--- a/lib/basic/oui-form-item.vue
+++ b/lib/basic/oui-form-item.vue
@@ -22,7 +22,6 @@ defineProps<{
         </div>
         <template v-if="$slots.description || description">
           <div class="oui-form-item-description">
-
             <slot name="description">
               {{ description }}
             </slot>
diff --git a/lib/basic/oui-form.styl b/lib/basic/oui-form.styl
index 87cb4ce..6914c4d 100644
--- a/lib/basic/oui-form.styl
+++ b/lib/basic/oui-form.styl
@@ -25,4 +25,15 @@
       size: 1em;
     }
   }
+
+  /* https://vueuse.org/core/useTextareaAutosize/ */
+  &-textarea._autosize {
+    resize: none;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 }
diff --git a/lib/basic/oui-textarea.vue b/lib/basic/oui-textarea.vue
index 758f361..e9a05ba 100644
--- a/lib/basic/oui-textarea.vue
+++ b/lib/basic/oui-textarea.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useFileDialog, useTextareaAutosize, watchThrottled } from '@vueuse/core'
 import OuiFormItem from './oui-form-item.vue'
 
 import './oui-form.styl'
@@ -7,15 +8,19 @@ defineOptions({
   inheritAttrs: false,
 })
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   title?: string
   description?: string
   required?: boolean
   id?: string
+  autosize?: boolean
 }>(), {
+  autosize: false,
 })
 
 const model = defineModel<string>({ required: true })
+
+const { textarea } = props.autosize === true ? useTextareaAutosize({ input: model }) : {}
 </script>
 
 <template>
@@ -27,9 +32,11 @@ const model = defineModel<string>({ required: true })
   >
     <textarea
       :id="id"
+      v-bind="$attrs"
+      ref="textarea"
       v-model="model"
       class="oui-textarea"
-      v-bind="$attrs"
+      :class="{ _autosize: props.autosize }"
       rows="6"
     />
   </OuiFormItem>
diff --git a/package.json b/package.json
index 7aa1fb7..8c511ce 100644
--- a/package.json
+++ b/package.json
@@ -74,14 +74,14 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.5",
-    "@vueuse/core": "^12.2.0",
+    "@vueuse/core": "^12.3.0",
     "vue": "^3.5.13",
-    "zeed": "^0.26.4"
+    "zeed": "^0.27.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.12.1",
     "@antfu/ni": "^0.23.2",
-    "@shikijs/markdown-it": "^1.24.4",
+    "@shikijs/markdown-it": "^1.25.1",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/browser": "^2.1.8",
     "eslint": "^9.17.0",

From 0ac19ee914408a0969d5e1dcdcd65a51926228e3 Mon Sep 17 00:00:00 2001
From: Dirk Holtwick <dirk.holtwick@gmail.com>
Date: Thu, 2 Jan 2025 16:24:19 +0100
Subject: [PATCH 2/2] 0.25.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8c511ce..a74ef06 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "oui-kit",
   "type": "module",
-  "version": "0.25.5",
+  "version": "0.25.6",
   "author": {
     "email": "dirk.holtwick@gmail.com",
     "name": "Dirk Holtwick",