VvConfig Module

The VvConfig Module is the backbone of VueVentus in an architectural sense, and it's used in conjunction with your app's ./src/app.vv.ts file to define your app's global design states.

TIP

The VvConfig file basically works as a blueprint to work from, so you can define your app's global visual styling classes and color palettes at a global level as you override the VvConfig defaults in your app's app.vv.ts file!

app.vv.ts Use

You'll usually work with the VvConfig Module as the starting point for your app.vv.ts file.

Here's what that generally looks like in practice in a real world app context:

javascript

// ./src/app.vv.ts

import { VvConfig } from '@obewds/vueventus'
import type { ConfigVv } from '@obewds/vueventus'

let appVv: ConfigVv = VvConfig

// ...

export default appVv

Module Code

// ./src/configs/VvConfig.ts

import Anchors from './Anchors.js'
import Buttons from './Buttons.js'
import Checkboxes from './Checkboxes.js'
import ColorModes from './ColorModes.js'
import Inputs from './Inputs.js'
import Listboxes from './Listboxes.js'
import Lists from './Lists.js'
import Radios from './Radios.js'
import Selects from './Selects.js'
import Text from './Text.js'
import Textareas from './Textareas.js'
import Transitions from './Transitions.js'

import AnchorDefault from './palettes/AnchorDefault.js'
import BorderDefault from './palettes/BorderDefault.js'
import ButtonOutline from './palettes/ButtonOutline.js'
import ButtonSolid from './palettes/ButtonSolid.js'
import CheckboxDefault from './palettes/CheckboxDefault.js'
import FillDefault from './palettes/FillDefault.js'
import GroundConsole from './palettes/GroundConsole.js'
import GroundDefault from './palettes/GroundDefault.js'
import GroundMonochromatic from './palettes/GroundMonochromatic.js'
import GroundPastel from './palettes/GroundPastel.js'
import InputDefault from './palettes/InputDefault.js'
import InputUnderlined from './palettes/InputUnderlined.js'
import ListboxButtonDefault from './palettes/ListboxButtonDefault.js'
import ListboxButtonUnderlined from './palettes/ListboxButtonUnderlined.js'
import ListboxOptionDefault from './palettes/ListboxOptionDefault.js'
import ListboxOptionUnderlined from './palettes/ListboxOptionUnderlined.js'
import ListDefault from './palettes/ListDefault.js'
import RadioDefault from './palettes/RadioDefault.js'
import ScrollbarDefault from './palettes/ScrollbarDefault.js'
import TextDefault from './palettes/TextDefault.js'

import VvComponentDefaults from './VvComponentDefaults.js'

import type { ConfigVv } from '../types/ConfigVv'

export default <ConfigVv>{
    //
    // Design System Defaults
    //
    anchors: {
        ...Anchors,
        palettes: {
            default: AnchorDefault,
        },
    },
    borders: {
        palettes: {
            default: BorderDefault,
        },
    },
    buttons: {
        ...Buttons,
        palettes: {
            outline: ButtonOutline,
            solid: ButtonSolid,
        },
    },
    checkboxes: {
        ...Checkboxes,
        palettes: {
            default: CheckboxDefault,
        },
    },
    fills: {
        palettes: {
            default: FillDefault,
        },
    },
    inputs: {
        ...Inputs,
        palettes: {
            default: InputDefault,
            underlined: InputUnderlined,
        },
    },
    colorModes: {
        ...ColorModes,
    },
    grounds: {
        palettes: {
            console: GroundConsole,
            default: GroundDefault,
            monochromatic: GroundMonochromatic,
            pastel: GroundPastel,
        },
    },
    listboxes: {
        ...Listboxes,
        buttonPalettes: {
            default: ListboxButtonDefault,
            underlined: ListboxButtonUnderlined,
        },
        optionPalettes: {
            default: ListboxOptionDefault,
            underlined: ListboxOptionUnderlined,
        },
    },
    lists: {
        ...Lists,
        palettes: {
            default: ListDefault,
        },
    },
    radios: {
        ...Radios,
        palettes: {
            default: RadioDefault,
        },
    },
    scrollbars: {
        palettes: {
            default: ScrollbarDefault,
        },
    },
    selects: {
        ...Selects,
        palettes: {
            default: InputDefault,
            underlined: InputUnderlined,
        },
    },
    text: {
        ...Text,
        palettes: {
            default: TextDefault,
        },
    },
    textareas: {
        ...Textareas,
        palettes: {
            default: InputDefault,
            underlined: InputUnderlined,
        },
    },
    transitions: {
        ...Transitions,
    },
    //
    // Component Prop Defaults
    //
    defaults: VvComponentDefaults,
}

VvConfig Module ​

app.vv.ts Use ​

Module Code ​

VvConfig Module

app.vv.ts Use

Module Code