VvComponentDefaults Module

The VvComponentDefaults Module are the VueVentus Vue component prop defaults, but abstracted so they can be overridden by an app.vv.ts file.

app.vv.ts Use

You'll usually work with the VvComponentDefaults Module after it's already been merged into VueVentus VvConfig data. For brevity, the VvComponentDefaults Module is shortened to simply defaults when made a property of the VvConfig object.

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

// ./src/app.vv.ts

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

let appVv: ConfigVv = VvConfig

appVv.defaults.VvAnchor.color = 'success'
// the above line will make the default "color" prop "success"
// so <VvAnchor>Test</VvAnchor> would use the "success" color classes
// unless otherwise specified in a VvAnchor instance prop!

appVv.defaults.VvInput.color = 'error'
// now VvInput components use the "color" prop "error" by default
// which means you can specify the color "default" in all VvInput instances
// then simply toggle the default string as a reactive value of a VvInput instance's 
// color prop to manage 2 input validation state class sets while only keeping 
// track of 1 string to operate the toggle!

export default appVv

TIP

The VvConfig defaults for VueVentus components are very powerful tools when used in strategic conjunction with the dynamic approaches used when implementing those components.

Just be aware that you'll get the best results by taking a tiny bit of time to think out your dynamic moves along with the concept of Atomic CSS grouped classes - and especially along with palette and color class groups.

When used in harmony and with care and restraint, applications start to really become both solid and flexible at the same time... which is really cool and satisfying!

Import

However, if you need to import the compiled library version of the VvComponentDefaults Module, you can use:

import { VvComponentDefaults } from '@obewds/vueventus'

Module Code

// ./src/configs/VvComponentDefaults.ts

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

export default <ConfigDefaults>{
    "VvAnchor": {
        button: false,
        buttonBlock: false,
        buttonFab: false,
        buttonSize: 'md',
        color: 'default',
        debug: false,
        external: false,
        href: '#',
        palette: 'default',
        textSize: 'md',
    },
    "VvButton": {
        block: false,
        color: 'primary',
        debug: false,
        fab: false,
        palette: 'solid',
        size: 'md',
        type: 'button',
    },
    "VvCheckbox": {
        checked: false,
        color: 'default',
        darkCheckHex: '#242426',
        debug: false,
        lightCheckHex: '#e1e1e3',
        palette: 'default',
        size: 'md',
    },
    "VvColorModeButton": {
        color: 'default',
        debug: false,
        mode: 'light',
        palette: 'outline',
        size: 'xs',
        type: 'button',
    },
    "VvEl": {
        borderPalette: 'default',
        borderColor: '',
        debug: false,
        groundPalette: 'default',
        groundColor: 'default',
        size: 'md',
        tag: 'div',
        textPalette: 'default',
        textColor: 'default',
    },
    "VvFa": {
        debug: false,
        family: 'fas',
        icon: 'house',
        size: '1x',
    },
    "VvFormGroup": {
        debug: false,
        displayError: false,
        displayHelp: false,
        displaySuccess: false,
        errorClasses: '',
        errorText: '',
        errorTextColor: 'error',
        errorTextPalette: 'default',
        errorTextSize: 'sm',
        helpClasses: 'opacity-75',
        helpText: '',
        helpTextColor: 'default',
        helpTextPalette: 'default',
        helpTextSize: 'sm',
        labelClasses: 'capitalize',
        labelTextColor: 'default',
        labelTextPalette: 'default',
        labelTextSize: 'md',
        slotParentClasses: 'flex items-center gap-1',
        successClasses: '',
        successText: '',
        successTextColor: 'success',
        successTextPalette: 'default',
        successTextSize: 'sm',
        wrapperClasses: 'w-full flex flex-col space-y-1',
    },
    "VvInput": {
        color: 'default',
        debug: false,
        palette: 'default',
        size: 'md',
        type: 'text',
    },
    "VvList": {
        debug: false,
        listStyleTypeClass: 'list-disc',
        markerColor: 'primary',
        markerPalette: 'default',
        size: 'md',
        tag: 'ul',
    },
    "VvListbox": {
        data: [
            { 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 },
        ],
        debug: false,
        displayClasses: 'w-full px-2 py-1 text-left',
        displayDisabledClasses: 'opacity-50',
        iconDisabledClasses: 'mr-3 opacity-25',
        iconSelectedClasses: 'hidden ui-selected:block mr-3',
        iconsSizeClasses: 'w-5 h-5',
        label: '',
        labelClasses: 'block text-left pb-1',
        listboxButtonClasses: 'w-full flex justify-between items-center gap-3 p-2 mx-auto',
        listboxButtonColor: 'default',
        listboxButtonPalette: 'default',
        listboxOptionClasses: 'w-full flex items-center justify-start px-2 ui-active:hover:cursor-pointer ui-not-active:hover:cursor-not-allowed',
        listboxOptionColor: 'default',
        listboxOptionPalette: 'default',
        listboxOptionsClasses: 'w-full shadow-md',
        listboxOptionsWithLabelSpacing: 'pt-1',
        listboxOptionsWithoutLabelSpacing: 'pt-1',
        optionIconParentClasses: 'w-6',
        selectedDisplayClasses: 'block text-left',
        selectedIndex: 0,
        size: 'md',
    },
    "VvListItem": {
        color: 'neutral',
        debug: false,
        enableColoredSymbols: true,
        palette: 'default',
        symbolColor: 'primary',
        symbolPalette: 'default',
    },
    "VvNuxtRouterLink": {
        button: false,
        buttonBlock: false,
        buttonFab: false,
        buttonSize: 'md',
        color: 'default',
        debug: false,
        external: false,
        to: '/',
        palette: 'default',
        textSize: 'md',
    },
    "VvPrism": {
        debug: false,
        prismVars: true,
    },
    "VvPrismVars": {
        commentStyle: 'normal',
        debug: false,
        fontSize: '1rem',
        lineHeight: '1.3rem',
        lineHighlightOpacity: '0.25',
        textShadow: 'unset',
        urlDecoration: 'underline',
    },
    "VvQuadFormGroup": {
        bottomSlotClasses: '',
        bottomWrapperClasses: 'flex justify-between gap-3',
        debug: false,
        displayError: false,
        displayHelp: false,
        displaySuccess: false,
        errorClasses: '',
        errorText: '',
        errorTextColor: 'error',
        errorTextPalette: 'default',
        errorTextSize: 'sm',
        helpClasses: 'opacity-75',
        helpText: '',
        helpTextColor: 'default',
        helpTextPalette: 'default',
        helpTextSize: 'sm',
        labelClasses: 'capitalize',
        labelTextColor: 'default',
        labelTextPalette: 'default',
        labelTextSize: 'md',
        slotParentClasses: 'flex items-center gap-1',
        successClasses: '',
        successText: '',
        successTextColor: 'success',
        successTextPalette: 'default',
        successTextSize: 'sm',
        textParentClasses: 'flex justify-between gap-3',
        topSlotClasses: 'flex justify-between gap-3',
        topWrapperClasses: 'flex justify-between items-end gap-3',
        wrapperClasses: 'w-full flex flex-col space-y-1',
    },
    "VvRadio": {
        checked: false,
        color: 'default',
        darkRadioHex: '#242426',
        debug: false,
        lightRadioHex: '#e1e1e3',
        palette: 'default',
        size: 'md',
    },
    "VvRouterLink": {
        button: false,
        buttonBlock: false,
        buttonFab: false,
        buttonSize: 'md',
        color: 'default',
        debug: false,
        external: false,
        to: '/',
        palette: 'default',
        textSize: 'md',
    },
    "VvScrollUp": {
        buttonClasses: 'rounded-full',
        color: 'primary',
        debug: false,
        fab: true,
        isVisible: false,
        offsetMinimum: 100,
        palette: 'solid',
        size: 'xs',
        title: 'Scroll to Top',
    },
    "VvSelect": {
        color: 'default',
        debug: false,
        palette: 'default',
        size: 'md',
    },
    "VvTextarea": {
        color: 'default',
        debug: false,
        palette: 'default',
        size: 'md',
        rowSize: 'md',
    },
}

Current Version:

v0.61.7