TextArea API Reference

Props

Prop	Type	Default	Description
rows	Number	3	Number of rows to display initially
noResize	Boolean	false	Disable manual resizing of the textarea
autoGrow	Boolean	false	Automatically grow the textarea to fit content
maxlength	Number	-	Maximum number of characters allowed
minRows	Number	1	Minimum number of rows to display
counter	Boolean	false	Show character counter

Additionally, the component inherits all props from the BasicInput component, including:

Inherited Prop	Type	Default	Description
label	String	-	Label for the textarea
placeholder	String	-	Placeholder text
clearable	Boolean	false	Allow clearing the textarea
disabled	Boolean	false	Disable the textarea
readonly	Boolean	false	Make the textarea read-only
modelValue	String	-	v-model binding value
rules	Array	[]	Validation rules

Events

The component emits a comprehensive set of events:

Event	Payload	Description
update:modelValue	String	Emitted when textarea value changes
prepend:click	Event	Emitted when prepend button is clicked
prependInner:click	Event	Emitted when inner prepend button is clicked
clear:click	Event	Emitted when clear button is clicked
append:click	Event	Emitted when append button is clicked
appendInner:click	Event	Emitted when inner append button is clicked
validate	Boolean, Value, Message	Emitted when validation occurs
focus, blur, input, change	Event	Standard form events
keydown, keyup, keypress	Event	Keyboard events
click, dblclick, mousedown, etc.	Event	Mouse events
copy, cut, paste	Event	Clipboard events
compositionstart, compositionupdate, compositionend	Event	Input composition events
dragenter, dragover, dragleave, drop	Event	Drag and drop events

Slots

The component forwards all slots from the BasicInput component:

Slot	Props	Description
prepend	{ click }	Content before the textarea
prependInner	{ click }	Content inside the textarea, at the beginning
appendInner	{ click }	Content inside the textarea, at the end
append	{ click }	Content after the textarea
details	{ errorMessage, hint }	Custom validation details

Methods

The component doesn't explicitly expose methods, but it inherits the following methods from BasicInput:

Method	Description
validate()	Manually trigger validation
setInternalValue(value)	Set the textarea value programmatically

Example Usage

<template>
  <OTextArea
    v-model="comments"
    label="Comments"
    placeholder="Enter your comments here"
    :rows="4"
    :autoGrow="true"
    :counter="true"
    :maxlength="500"
    :rules="[
      { rule: 'required', message: 'Please enter your comments' },
      { rule: 'min', value: 10, message: 'Comments must be at least 10 characters' }
    ]"
    @update:modelValue="handleInput"
    @focus="handleFocus"
  />
</template>

<script setup>
import { ref } from 'vue'
import { OTextArea } from 'your-component-library'

const comments = ref('')

const handleInput = (value) => {
  console.log('Input value:', value)
}

const handleFocus = (event) => {
  console.log('TextArea focused', event)
}
</script>

Auto-Growing Behavior

When autoGrow is set to true, the textarea will automatically adjust its height to fit the content as the user types. This is achieved by:

1. Setting the height to 'auto' to calculate the scrollHeight
2. Setting the height to the scrollHeight value

This ensures the textarea is always the right size for its content, eliminating the need for scrollbars in most cases.