VueVentus DocsVvInput Component
The VvInput Component provides a set of props and config module based settings to make a validation ready set of input elements for applications with an extremely DRY implementation of atomic classes.
Import
To import a VvInput Component installed by the vueventus CLI or vv-update CLI:
// ./src/components/SomeComponent.vue
import VvInput from './vv/inputs/VvInput.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 VvInput Component with:
import { VvInput } 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 VvInput Component emits a standard Vue key of update:modelValue upon input event changes of the component's generated input value attribute.
TIP
This means when using the VvInput 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 VvInput Component instance.
Example
<!-- ./src/components/AppInput.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import { VvInput } from '@obewds/vueventus'
const someValue = ref('')
</script>
<template>
<VvInput v-model="someValue"/>
</template>Prop: color
Type: String
Default: "default"
The VvInput Component color prop sets the component instance color based both on the color prop and the palette prop value.
Syntax
<VvInput color="default" class="mb-2"/>
<VvInput color="error" class="mb-2"/>
<VvInput color="success" class="mb-2"/>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: debug
Type: Boolean
Default: false
The VvInput 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-input- prefixed HTML attributes.
Syntax
<VvInput :debug="true"/>Result
Prop: palette
Type: String
Default: "default"
The VvInput Component palette prop sets the component instance palette based both on the color prop and the palette prop value.
Syntax
<VvInput palette="underlined" color="default" placeholder="default" class="mb-2"/>
<VvInput palette="underlined" color="error" placeholder="error" class="mb-2"/>
<VvInput palette="underlined" color="success" placeholder="success" class="mb-2"/>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: size
Type: String
Default: "md"
The VvInput Component size prop sets the component instance size-based classes which in the context of inputs typically involves padding and font size atomic classes.
Syntax
<VvInput size="lg" placeholder="Size: lg"/>Result
size prop input size examples
Typing for Downstream Component Instances
Coming Soon!
Prop: type
Type: String
Valid Values: ValidInputTypes Module
Default: "text"
The VvInput Component type prop sets the input HTML type attribute to a value that should be present in the ValidInputTypes Module to be a valid value for this component.
Syntax
<VvInput type="email" placeholder="Type: email"/>Result
Typing for Downstream Component Instances
Coming Soon!
Slot: None
NO SLOT AVAILABLE
The VvInput Component does not have Vue slot option, because an <input> element is a HTML Empty Element, which cannot have children or child nodes.