VueVentus DocsVvTextarea Component
The VvTextarea Component provides a set of props and config module based settings to make a validation ready set of textarea elements for applications with an extremely DRY implementation of atomic classes.
Import
To import a VvTextarea Component installed by the vueventus CLI or vv-update CLI:
// ./src/components/SomeComponent.vue
import VvTextarea from './vv/textareas/VvTextarea.vue'TIP
CLI installed components pass through VueVentus defaults via component props. Each prop default value can be customized globally by overriding VvConfig defaults in your app ./src/app.vv.ts file or singularly in a component instance.
Alternatively, you can install the raw library VvTextarea Component with:
import { VvTextarea } from '@obewds/vueventus'TIP
Importing raw VueVentus library components will still apply your ./src/app.vv.ts settings automatically through the Vue provide() and inject() pattern. All raw VueVentus library components automatically check for a provided "vv" keyed object with a ConfigVv type interface.
CLI or Raw?
The main difference between raw library components and CLI installed components, is that you have no control over component defaults with raw library components. This is less flexible than using CLI installed components, because control of component defaults can greatly reduce the number of props a dev has to type for component instances, which reduces app code.
Meanwhile, the control CLI installed components provide through customizable defaults, opens up to a global level (styling management system) control for default component state characteristic values (particularly powerful with color and proportional size characteristics).
Emits: update:modelValue
Emits: update:modelValue
Emit Value Type: String
The VvTextarea Component emits a standard Vue key of update:modelValue upon input event changes of the component's generated textarea value attribute.
TIP
This means when using the VvTextarea Component downstream in an end application, you can safely use Vue's v-model binding to two-way bind a reactive value through your downstream component and into (and back from) the VvTextarea Component instance.
Example
<!-- ./src/components/AppTextarea.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import { VvTextarea } from '@obewds/vueventus'
const someValue = ref('')
</script>
<template>
<VvTextarea v-model="someValue"/>
</template>Prop: color
Type: String
Default: "default"
The VvTextarea Component color prop sets the component instance color based both on the color prop and the palette prop value.
Syntax
<VvTextarea color="default" class="mb-2"/>
<VvTextarea color="error" class="mb-2"/>
<VvTextarea color="success" class="mb-2"/>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: debug
Type: Boolean
Default: false
The VvTextarea Component debug prop toggles the debugging state of a component instance. When in debugging mode, each component instance prop value can be viewed through data-vv-textarea- prefixed HTML attributes.
Syntax
<VvTextarea :debug="true"/>Result
Prop: palette
Type: String
Default: "default"
The VvTextarea Component palette prop sets the component instance palette based both on the color prop and the palette prop value.
Syntax
<VvTextarea palette="default" color="default" class="mb-2"/>
<VvTextarea palette="default" color="error" class="mb-2"/>
<VvTextarea palette="default" color="success" class="mb-2"/>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: size
Type: String
Default: "md"
The VvTextarea Component size prop sets the component instance size-based classes which in the context of textarea typically involves padding and font size atomic classes.
Syntax
<VvTextarea size="lg" placeholder="Size: lg"/>Result
size prop textarea size examples
Typing for Downstream Component Instances
Coming Soon!
Prop: rowSize
Type: String
Default: "md"
The VvTextarea Component rowSize prop sets the component instance <textarea row=""> number value for the rendered Textarea element, which controls the vertical height of the element.
Syntax
<VvTextarea row-size="lg" placeholder="Size: lg"/>Result
size prop textarea size examples
Slot: None
NO SLOT AVAILABLE
The VvTextarea Component does not have Vue slot option, because it's expected to use this <textarea> based component with reactive values that are bound to this component (like v-bind-"" etc.)