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