VvSelect Component

The VvSelect component generates <select/> (select HTML tag) application elements, and comes with aesthetically flexible Vue props to globally control your instances and defaults via your application's app.vv.ts file.

VvSelect Defaults

Contributor:@oberocks 
                    
                        <!-- ./src/components/SomeComponent.vue -->

                        <script setup lang="ts">

                            import VvSelect from './vv/selects/VvSelect.vue'

                            const undeclaredColorSelections = [
                                { name: 'Undeclared Color Example 1', value: 'undeclared-1' },
                                { name: 'Undeclared Color Example 2', value: 'undeclared-2' },
                            ]

                            const undeclaredColorSelection = ref('')

                        </script>

                        <template>
                        
                            <div>

                                <VvSelect
                                    v-model="undeclaredColorSelection"
                                    color="''"
                                    class="text-black"
                                >

                                    <option disabled value="">Select an Option</option>

                                    <option
                                        v-for="selection in undeclaredColorSelections"
                                        :value="selection.value"
                                    >
                                        {{ selection.name }}
                                    </option>

                                </VvSelect>

                                <div class="pt-2">
                                    Undeclared Selection: {{ undeclaredColorSelection  || 'Nothing Selected'}}
                                </div>

                            </div>
                        
                        </template>
The Result:
Undeclared Selection: Nothing Selected
                    
                        <!-- ./src/components/SomeComponent.vue -->

                        <script setup lang="ts">

                            import VvSelect from './vv/selects/VvSelect.vue'

                            const defaultColorSelections = [
                                { name: 'Default Color Example 1', value: 'default-1' },
                                { name: 'Default Color Example 2', value: 'default-2' },
                            ]

                            const defaultColorSelection = ref('')

                        </script>

                        <template>
                        
                            <div>

                                <VvSelect
                                    v-model="defaultColorSelection"
                                    color="default"
                                >

                                    <option disabled value="">Select an Option</option>

                                    <option
                                        v-for="selection in defaultColorSelections"
                                        :value="selection.value"
                                    >
                                        {{ selection.name }}
                                    </option>

                                </VvSelect>

                                <div class="pt-2">
                                    Default Selection: {{ defaultColorSelection || 'Nothing Selected' }}
                                </div>

                            </div>
                        
                        </template>
The Result:
Default Selection: Nothing Selected
                    
                        <!-- ./src/components/SomeComponent.vue -->

                        <script setup lang="ts">

                            import VvSelect from './vv/selects/VvSelect.vue'

                            const successColorSelections = [
                                { name: 'Default Color Example 1', value: 'default-1' },
                                { name: 'Default Color Example 2', value: 'default-2' },
                            ]

                            const successColorSelection = ref('')

                        </script>

                        <template>
                        
                            <div>

                                <VvSelect
                                    v-model="successColorSelection"
                                    color="success"
                                >

                                    <option disabled value="">Select an Option</option>

                                    <option
                                        v-for="selection in successColorSelections"
                                        :value="selection.value"
                                    >
                                        {{ selection.name }}
                                    </option>

                                </VvSelect>

                                <div class="pt-2">
                                    Success Selection: {{ successColorSelection || 'Nothing Selected' }}
                                </div>

                            </div>
                        
                        </template>
The Result:
Success Selection: Nothing Selected
                    
                        <!-- ./src/components/SomeComponent.vue -->

                        <script setup lang="ts">

                            import VvSelect from './vv/selects/VvSelect.vue'

                            const errorColorSelections = [
                                { name: 'Error Color Example 1', value: 'error-1' },
                                { name: 'Error Color Example 2', value: 'error-2' },
                            ]

                            const errorColorSelection = ref('')

                        </script>

                        <template>
                        
                            <div>

                                <VvSelect
                                    v-model="errorColorSelection"
                                    color="error"
                                >

                                    <option disabled value="">Select an Option</option>

                                    <option
                                        v-for="selection in errorColorSelections"
                                        :value="selection.value"
                                    >
                                        {{ selection.name }}
                                    </option>

                                </VvSelect>

                                <div class="pt-2">
                                    Error Selection: {{ errorColorSelection || 'Nothing Selected' }}
                                </div>

                            </div>
                        
                        </template>
The Result:
Error Selection: Nothing Selected