Merge branch 'release/v0.25.6'

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,

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" />

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>

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;
+    }
+  }
 }

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>

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",
@@ -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",