VvQuadFormGroup Component
The VvQuadFormGroup component generates a complex form <input/>, <textarea/>, <select/> ready set of application elements, and comes with aesthetically flexible Vue props to globally control your instances and defaults via your application's app.vv.ts file.
VvQuadFormGroup Defaults
Contributor:@oberocks
<!-- ./src/components/SomeComponent.vue -->
<script setup lang="ts">
import VvEl from './vv/forms/VvEl.vue'
import VvInput from './vv/forms/VvInput.vue'
import VvQuadFormGroup from './vv/forms/VvQuadFormGroup.vue'
</script>
<template>
<div class="flex flex-col gap-6">
<VvQuadFormGroup
label="Default State Example:"
label-for="default-state-input"
>
<template v-slot:top>
<VvEl>Top Slot</VvEl>
</template>
<VvInput id="default-state-input"/>
<template v-slot:bottom>
<VvEl>Bottom Slot</VvEl>
</template>
</VvQuadFormGroup>
<VvQuadFormGroup
label="Help State Example:"
label-for="help-state-input"
:display-help="true"
help-text="Example help state text"
>
<template v-slot:top>
<VvEl>Top Slot</VvEl>
</template>
<VvInput id="help-state-input"/>
<template v-slot:bottom>
<VvEl>Bottom Slot</VvEl>
</template>
</VvQuadFormGroup>
<VvQuadFormGroup
label="Error State Label:"
label-for="error-state-input"
label-text-color="error"
:display-error="true"
error-text="Example error state text"
>
<template v-slot:top>
<VvEl> text-color="error">Top Slot</VvEl>
</template>
<VvInput id="error-state-input" color="error"/>
<template v-slot:bottom>
<VvEl> text-color="error">Bottom Slot</VvEl>
</template>
</VvQuadFormGroup>
<VvQuadFormGroup
label="Success State Label:"
label-for="success-state-input"
label-text-color="success"
:display-success="true"
success-text="Example success state text"
>
<template v-slot:top>
<VvEl> text-color="success">Top Slot</VvEl>
</template>
<VvInput id="success-state-input" color="success"/>
<template v-slot:bottom>
<VvEl> text-color="success">Bottom Slot</VvEl>
</template>
</VvQuadFormGroup>
</div>
</template>
The Result:
Top Slot
Bottom Slot
Top Slot
Example help state text
Bottom Slot
Top Slot
Example error state text
Bottom Slot
Top Slot
Example success state text
Bottom Slot