VvListbox Component

The VvListbox 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 VvListbox Component installed by the vueventus CLI or vv-update CLI:

javascript

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

javascript

import { VvListbox } 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: Object

The VvListbox Component emits a standard Vue key of update:modelValue upon input event changes of the component's currently selected data.

TIP

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

Example

html

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

<script setup lang="ts">

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

    const someValue = ref('')

</script>

<template>

    <VvListbox v-model="someValue" label="Example Listbox:"/>

</template>

Prop: data

Type: Array as PropType<Array<VvListboxData>>
Default: "[ { "id": 0, "display": "Select an option", "value": "", "disabled": false }, { "id": 1, "display": "Default Option One", "value": "one", "disabled": false }, { "id": 2, "display": "Default Option Two", "value": "two", "disabled": false }, { "id": 3, "display": "Default Option Three", "value": "three", "disabled": false }, { "id": 4, "display": "Disabled Option Four Example", "value": "four", "disabled": true }, { "id": 5, "display": "Default Option Five", "value": "five", "disabled": false } ]"

The VvListbox Component data prop sets the component instance data that ultimately is displayed to the user for selection from a list of objects with a specific syntax and typing minimum requirements.

Syntax

html

<script setup lang="ts">

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

    const someValue = ref('')

</script>

<template>

    <VvListbox v-model="someValue" label="Example Listbox:"/>

    <div>User Selection:</div>

    <div>{{ someValue }}</div>

</template>

Result

Example Listbox:

User Selection:

With Data Syntax

html

<script setup lang="ts">

    import { ref } from 'vue'
    import { VvListbox } from '@obewds/vueventus'
    import type { VvListboxData } from '@obewds/vueventus'

    const someValueTwo = ref('')

    const listboxData: VvListboxData[] = [
        {
            "id": 0,
            "display": "Select an option",
            "value": "",
            "disabled": false
        },{
            "id": 1,
            "display": "Morning",
            "value": "am",
            "disabled": false
        },{
            "id": 2,
            "display": "Noon",
            "value": "noon",
            "disabled": true
        },{
            "id": 3,
            "display": "Evening",
            "value": "pm",
            "disabled": false
        },
    ]

</script>

<template>

    <VvListbox v-model="someValueTwo" :data="listboxData" label="Listbox Data Example:"/>

    <div>User Selection:</div>

    <div>{{ someValue }}</div>

</template>

With Data Result

Listbox Data Example:

User Selection:

Prop: debug

Type: Boolean
Default: false

The VvListbox 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-listbox- prefixed HTML attributes.

Syntax

html

<VvListbox :debug="true"/>