Checkboxes Config Module

The Checkboxes Config Module holds your application's default/prototypal Tailwind CSS classes for Checkbox 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 Checkboxes 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.checkboxes.someProperty = 'some-value'

// ...

export default appVv

Import

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

javascript

import { Checkboxes } from '@obewds/vueventus'

Checkboxes.baseColors

Type: String
Default: "bg-gray-100 border-gray-400 dark:border-black ring-offset-white dark:ring-offset-gray-800"

The Checkboxes.baseColors parameter is meant to isolate any base color classes that would apply in addition to all palette colors.

Example

javascript

// ./src/app.vv.ts
appVv.checkboxes.baseColors = '...'

Checkboxes.border

Type: String
Default: ""

The Checkboxes.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.checkboxes.border = '...'

Checkboxes.outline

Type: String
Default: ""

The Checkboxes.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.checkboxes.outline = '...'

Checkboxes.ring

Type: String
Default: "focus:ring-offset-2 focus:ring-2"

The Checkboxes.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.checkboxes.ring = '...'

Checkboxes.rounding

Type: String
Default: "rounded"

The Checkboxes.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.checkboxes.rounding = '...'

Checkboxes.shadow

Type: String
Default: ""

The Checkboxes.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.checkboxes.shadow = '...'

Checkboxes.sizes

Type: Object

Checkboxes.sizes Properties	Checkboxes.sizes Prop Values
`"xs"`	`"h-3 w-3"`
`"sm"`	`"h-4 w-4"`
`"md"`	`"h-5 w-5"`
`"lg"`	`"h-6 w-6"`
`"xl"`	`"h-7 w-7"`
`"2xl"`	`"h-8 w-8"`

Examples

javascript

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

javascript

// ./src/app.vv.ts
appVv.checkboxes.sizes['xs']  = ''
appVv.checkboxes.sizes['sm']  = ''
appVv.checkboxes.sizes['md']  = ''
appVv.checkboxes.sizes['lg']  = ''
appVv.checkboxes.sizes['xl']  = ''
appVv.checkboxes.sizes['2xl'] = ''

Checkboxes.transition

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

The Checkboxes.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.checkboxes.transition = '...'

Checkboxes.base()

Returns: String
Default: "bg-gray-100 border-gray-400 dark:border-black ring-offset-white dark:ring-offset-gray-800 focus:ring-offset-2 focus:ring-2 rounded transition-colors ease-in-out duration-300"

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

Example

html

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

<script setup lang="ts">

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

<template>

    <input type="checkbox" :class="appVv.checkboxes.base()"/>

</template>

Checkboxes.classes()

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

However, the Checkboxes.classes() method also returns Checkboxes.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

Args	Type	Status	Description
sizesKey	`String`	Optional	Property name/key of a Checkboxes.sizes object

The applicable values for the sizesKey argument are set via the Checkboxes.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>

    <!-- Regular Sized Checkbox -->
    <input :class="appVv.checkboxes.classes()"/>

    <!-- Large Sized Checkbox -->
    <input :class="appVv.checkboxes.classes('lg')"/>

</template>

Checkboxes.getSizeClasses()

Returns: String
Default: "h-5 w-5"

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

Arguments

Args	Type	Status	Description
sizesKey	`String`	Optional	Property name/key of an Checkboxes.sizes object

The applicable values for the sizesKey argument are set via the Checkboxes.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>

    <!-- Regular Sized Checkbox -->
    <input :class="appVv.checkboxes.getSizeClasses()"/>

    <!-- Large Sized Checkbox -->
    <input :class="appVv.checkboxes.getSizeClasses('lg')"/>

</template>

Module Code

// ./src/configs/Checkboxes.ts

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

export default <ConfigCheckboxes>{
    baseColors: 'bg-gray-100 border-gray-400 dark:border-black ring-offset-white dark:ring-offset-gray-800',
    border: '',
    outline: '',
    ring: 'focus:ring-offset-2 focus:ring-2',
    rounding: 'rounded',
    shadow: '',
    transition: Transitions.classes('colors', 'inOut', '300'),
    base: function () {
        return [
            this.baseColors,
            this.border,
            this.outline,
            this.ring,
            this.rounding,
            this.shadow,
            this.transition,
        ].join(' ').replace(/\s+/g,' ').trim()
    },
    sizes: {
        'xs': 'h-3 w-3',
        'sm': 'h-4 w-4',
        'md': 'h-5 w-5',
        'lg': 'h-6 w-6',
        'xl': 'h-7 w-7',
        '2xl': 'h-8 w-8',
    },
    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()
    },
}

Checkboxes Config Module ​

app.vv.ts Use ​

Import ​

Checkboxes.baseColors ​

Example ​

Checkboxes.border ​

Example ​

Checkboxes.outline ​

Example ​

Checkboxes.ring ​

Example ​

Checkboxes.rounding ​

Example ​

Checkboxes.shadow ​

Example ​

Checkboxes.sizes ​

Examples ​

Checkboxes.transition ​

Example ​

Checkboxes.base() ​

Example ​

Checkboxes.classes() ​

Arguments ​

Examples ​

Checkboxes.getSizeClasses() ​

Arguments ​

Examples ​

Module Code ​

Checkboxes Config Module

app.vv.ts Use

Import

Checkboxes.baseColors

Example

Checkboxes.border

Example

Checkboxes.outline

Example

Checkboxes.ring

Example

Checkboxes.rounding

Example

Checkboxes.shadow

Example

Checkboxes.sizes

Examples

Checkboxes.transition

Example

Checkboxes.base()

Example

Checkboxes.classes()

Arguments

Examples

Checkboxes.getSizeClasses()

Arguments

Examples

Module Code