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