VvSelect Component

The VvSelect Component provides a set of props and config module based settings to make a validation ready set of select elements for applications with an extremely DRY implementation of atomic classes.

Import

To import a VvSelect Component installed by the vueventus CLI or vv-update CLI:

// ./src/components/SomeComponent.vue
import VvSelect from './vv/selects/VvSelect.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 VvSelect Component with:

import { VvSelect } 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 VvSelect Component emits a standard Vue key of update:modelValue upon input event changes of the component's currently selected child option's value attribute.

TIP

This means when using the VvSelect 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 VvSelect Component instance.

Example

<!-- ./src/components/AppInput.vue -->

<script setup lang="ts">

    import { ref } from 'vue'
    import { VvSelect } from '@obewds/vueventus'

    const someValue = ref('')

</script>

<template>

    <VvSelect v-model="someValue"/>

</template>

Prop: color

Type: String
Default: "default"

The VvSelect Component color prop sets the component instance color based both on the color prop and the palette prop value.

Syntax

<VvSelect color="default" class="mb-2">
    <option value="">Select an Option</option>
    <option value="one">Default Color Option 1</option>
    <option value="two">Default Color Option 2</option>
</VvSelect>

<VvSelect color="error" class="mb-2">
    <option value="">Select an Option</option>
    <option value="one">Error Color Option 1</option>
    <option value="two">Error Color Option 2</option>
</VvSelect>

<VvSelect color="success" class="mb-2">
    <option value="">Select an Option</option>
    <option value="one">Success Color Option 1</option>
    <option value="two">Success Color Option 2</option>
</VvSelect>

Result

Select an OptionDefault Color Option 1Default Color Option 2Select an OptionError Color Option 1Error Color Option 2Select an OptionSuccess Color Option 1Success Color Option 2

Typing for Downstream Component Instances

Coming Soon!

Prop: debug

Type: Boolean
Default: false

The VvSelect 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-select- prefixed HTML attributes.

Syntax

<VvSelect :debug="true">
    <option value="">Select Option</option>
    <option value="one">Option 1</option>
</VvSelect>

Result

Select OptionOption 1

Prop: palette

Type: String
Default: "default"

The VvSelect Component palette prop sets the component instance palette based both on the color prop and the palette prop value.

Syntax

<VvSelect palette="underlined" color="default" class="mb-2">
    <option value="">Select an Option</option>
    <option value="one">Default Color Option 1</option>
    <option value="two">Default Color Option 2</option>
</VvSelect>

<VvSelect palette="underlined" color="error" class="mb-2">
    <option value="">Select an Option</option>
    <option value="one">Error Color Option 1</option>
    <option value="two">Error Color Option 2</option>
</VvSelect>

<VvSelect palette="underlined" color="success" class="mb-2">
    <option value="">Select an Option</option>
    <option value="one">Success Color Option 1</option>
    <option value="two">Success Color Option 2</option>
</VvSelect>

Result

Select an OptionDefault Color Option 1Default Color Option 2Select an OptionError Color Option 1Error Color Option 2Select an OptionSuccess Color Option 1Success Color Option 2

Typing for Downstream Component Instances

Coming Soon!

Prop: size

Type: String
Default: "md"

The VvSelect 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

<VvSelect size="lg" class="mb-2">
    <option value="">Select an Option</option>
    <option value="one">"lg" Size Option 1</option>
    <option value="one">"lg" Size Option 2</option>
</VvSelect>

Result

Select an Option"lg" Size Option 1"lg" Size Option 2

size prop input size examples

Select an Option"xs" Size Option 1"xs" Size Option 2Select an Option"sm" Size Option 1"sm" Size Option 2Select an Option"md" Size Option 1"md" Size Option 2Select an Option"lg" Size Option 1"lg" Size Option 2Select an Option"xl" Size Option 1"xl" Size Option 2Select an Option"2xl" Size Option 1"2xl" Size Option 2

Typing for Downstream Component Instances

Coming Soon!

Slot: #default

The VvSelect Component has a standard #default Vue slot to insert child elements/nodes into the component.

Syntax

<VvSelect>
    <option value="">Select an Option</option>
    <option value="one">Slot Example Option 1</option>
</VvSelect>

Result

Select an OptionSlot Example Option 1

Current Version:

v0.61.7