VueVentus Docs

Appearance

Selects Config Module ​

The Selects Config Module holds your application's default/prototypal Tailwind CSS classes for Input elements in your application, excluding color palette classes (see Palette Config Modules for more info about palette modules).

app.vv.ts Use ​

You'll usually work with the Selects Config Module after it's already been merged into VueVentus VvConfig data.

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

appVv.selects.someProperty = 'some-value'

// ...

export default appVv

Import ​

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

javascript
import { Selects } from '@obewds/vueventus'

Selects.border ​

Type: String
Default: "border"

The Selects.border parameter is meant to isolate the border specific atomic classes that don't pertain to already represented characteristics in VueVentus like color, size, etc.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example ​

javascript
// ./src/app.vv.ts
appVv.selects.border = '...'

Selects.display ​

Type: String
Default: "block w-full"

The Selects.display parameter is meant to isolate the CSS display/block level characteristics and requirements for an application's input elements.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example ​

javascript
// ./src/app.vv.ts
appVv.selects.display = '...'

Selects.outline ​

Type: String
Default: ""

The Selects.outline parameter is meant to isolate the outline specific atomic classes that don't pertain to already represented characteristics in VueVentus like color, size, etc.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example ​

javascript
// ./src/app.vv.ts
appVv.selects.outline = '...'

Selects.placeholder ​

Type: String
Default: ""

The Selects.placeholder parameter is meant to isolate the placeholder specific atomic classes that don't pertain to already represented characteristics in VueVentus like color, size, etc.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example ​

javascript
// ./src/app.vv.ts
appVv.selects.placeholder = '...'

Selects.ring ​

Type: String
Default: ""

The Selects.ring parameter is meant to isolate the Tailwind CSS ring visualization interaction characteristics and requirements for an application's input elements. Tailwind CSS ring classes for example, are typically used in conjunction with the focus: modifier for user focus interactions.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example ​

javascript
// ./src/app.vv.ts
appVv.selects.ring = '...'

Selects.rounding ​

Type: String
Default: ""

The Selects.rounding parameter is meant to isolate the Tailwind CSS border rounding characteristics and requirements for an application's input elements.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example ​

javascript
// ./src/app.vv.ts
appVv.selects.rounding = '...'

Selects.shadow ​

Type: String
Default: ""

The Selects.shadow parameter is meant to isolate the Tailwind CSS border shadow characteristics and requirements for an application's input elements.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example ​

javascript
// ./src/app.vv.ts
appVv.selects.shadow = '...'

Selects.sizes ​

Type: Object

Selects.sizes PropertiesSelects.sizes Prop Values
"xs""px-2 py-1.5 text-sm"
"sm""px-3 py-2 text-base"
"md""px-3 py-2 text-lg"
"lg""px-4 py-3 text-xl"
"xl""px-4 py-3 text-2xl"
"2xl""px-5 py-4 text-3xl"

Examples ​

javascript
// ./src/app.vv.ts
appVv.selects.sizes = {
     'xs': '',
     'sm': '',
     'md': '',
     'lg': '',
     'xl': '',
    '2xl': '',
}
javascript
// ./src/app.vv.ts
appVv.selects.sizes['xs']  = ''
appVv.selects.sizes['sm']  = ''
appVv.selects.sizes['md']  = ''
appVv.selects.sizes['lg']  = ''
appVv.selects.sizes['xl']  = ''
appVv.selects.sizes['2xl'] = ''

Selects.text ​

Type: String
Default: ""

The Selects.text parameter is meant to isolate the text orientated characteristics and requirements that don't pertain to already represented characteristics in VueVentus like color, size, etc.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example ​

javascript
// ./src/app.vv.ts
appVv.selects.text = '...'

Selects.transition ​

Type: String
Default: "transition-colors ease-in-out duration-300"

The Selects.transition parameter is meant to isolate the transition/animation characteristics and requirements for an application's input elements.

Example ​

javascript
// ./src/app.vv.ts
appVv.selects.transition = '...'

Selects.base() ​

Returns: String
Default: "border block w-full transition-colors ease-in-out duration-300"

The Selects.base() method returns a joined String of the atomic classes within the various base properties of the Selects Config Module object.

Example ​

html
<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <input :class="appVv.selects.base()"/>

</template>

Selects.classes() ​

Returns: String
Default: "border block w-full transition-colors ease-in-out duration-300 px-3 py-2 text-lg"

The Selects.classes() method returns a joined String of the atomic classes within the various base properties of the Selects Config Module object using the Selects.base() method under the hood.

However, the Selects.classes() method also returns Selects.getSizeClasses() method classes in addition to the base property classes/values, which augments the returned value based on the optional argument value passed into the method.

Arguments ​

ArgsTypeStatusDescription
sizesKeyStringOptionalProperty name/key of an Selects.sizes object

The applicable values for the sizesKey argument are set via the Selects.sizes property names/keys and atomic class values.

Examples ​

html
<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <input placeholder="Regular Sized Input" :class="appVv.selects.classes()"/>

    <input placeholder="Large Sized Input" :class="appVv.selects.classes('lg')"/>

</template>

Selects.getSizeClasses() ​

Returns: String
Default: "px-3 py-2 text-lg"

The Selects.getSizeClasses() method returns text size related classes based on the optional argument value passed into the method. These size related classes come from the Selects.sizes object property names/keys and values (of atomic classes).

Arguments ​

ArgsTypeStatusDescription
sizesKeyStringOptionalProperty name/key of an Selects.sizes object

The applicable values for the sizesKey argument are set via the Selects.sizes property names/keys and atomic class values.

Examples ​

html
<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <input placeholder="Regular Sized Input" :class="appVv.selects.getSizeClasses()"/>

    <input placeholder="Large Sized Input" :class="appVv.selects.getSizeClasses('lg')"/>

</template>

Module Code ​

ts
// ./src/configs/Selects.ts

import type { ConfigSelects } from '../types/ConfigSelects'
import Transitions from './Transitions.js'

export default <ConfigSelects>{
    border: 'border',
    display: 'block w-full',
    outline: '',
    ring: '',
    rounding: '',
    shadow: '',
    text: '',
    transition: Transitions.classes('colors', 'inOut', '300'),
    base: function () {
        return [
            this.border,
            this.display,
            this.outline,
            this.placeholder,
            this.ring,
            this.rounding,
            this.shadow,
            this.text,
            this.transition,
        ].join(' ').replace(/\s+/g,' ').trim()
    },
    sizes: {
        'xs': 'px-2 py-1.5 text-sm',
        'sm': 'px-3 py-2 text-base',
        'md': 'px-3 py-2 text-lg',
        'lg': 'px-4 py-3 text-xl',
        'xl': 'px-4 py-3 text-2xl',
        '2xl': 'px-5 py-4 text-3xl',
    },
    getSizeClasses: function (sizesKey) {
        const key = sizesKey && this.sizes[sizesKey] ? sizesKey : 'md'
        return this.sizes[key]
    },
    classes: function (sizesKey) {
        const sizes = sizesKey ? sizesKey : ''
        return [
            this.base(),
            this.getSizeClasses(sizes),
        ].join(' ').replace(/\s+/g,' ').trim()
    },
}

Released under the MIT License

Copyright © 2022 Matt McT LLC