Textareas Config Module

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

app.vv.ts Use

You'll usually work with the Textareas 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.textareas.someProperty = 'some-value'

// ...

export default appVv

Import

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

javascript

import { Textareas } from '@obewds/vueventus'

Textareas.border

Type: String
Default: "border"

The Textareas.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.textareas.border = '...'

Textareas.display

Type: String
Default: "block w-full"

The Textareas.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.textareas.display = '...'

Textareas.outline

Type: String
Default: ""

The Textareas.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.textareas.outline = '...'

Textareas.placeholder

Type: String
Default: "placeholder:opacity-50"

The Textareas.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.textareas.placeholder = '...'

Textareas.ring

Type: String
Default: ""

The Textareas.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.textareas.ring = '...'

Textareas.rounding

Type: String
Default: ""

The Textareas.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.textareas.rounding = '...'

Textareas.rowSizes

Type: Object

Textareas.rowSizes Properties	Textareas.rowSizes Prop Values
`"xs"`	`1`
`"sm"`	`2`
`"md"`	`3`
`"lg"`	`4`
`"xl"`	`6`
`"2xl"`	`8`

Examples

javascript

// ./src/app.vv.ts
appVv.textareas.rowSizes = {
     'xs': 1,
     'sm': 2,
     'md': 3,
     'lg': 4,
     'xl': 6,
    '2xl': 8,
}

javascript

// ./src/app.vv.ts
appVv.textareas.rowSizes['xs']  = 1
appVv.textareas.rowSizes['sm']  = 2
appVv.textareas.rowSizes['md']  = 3
appVv.textareas.rowSizes['lg']  = 4
appVv.textareas.rowSizes['xl']  = 6
appVv.textareas.rowSizes['2xl'] = 8

Textareas.shadow

Type: String
Default: ""

The Textareas.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.textareas.shadow = '...'

Textareas.sizes

Type: Object

Textareas.sizes Properties	Textareas.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.textareas.sizes = {
     'xs': '',
     'sm': '',
     'md': '',
     'lg': '',
     'xl': '',
    '2xl': '',
}

javascript

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

Textareas.text

Type: String
Default: ""

The Textareas.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.textareas.text = '...'

Textareas.transition

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

The Textareas.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.textareas.transition = '...'

Textareas.base()

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

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

Example

html

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

<script setup lang="ts">

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

<template>

    <textarea :class="appVv.textareas.base()"/>

</template>

Textareas.classes()

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

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

However, the Textareas.classes() method also returns Textareas.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 an Textareas.sizes object

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

    <textarea placeholder="Regular size" :class="appVv.textareas.classes()"/>

    <textarea placeholder="Large size" :class="appVv.textareas.classes('lg')"/>

</template>

Textareas.getSizeClasses()

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

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

Arguments

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

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

    <textarea placeholder="Regular size" :class="appVv.textareas.getSizeClasses()"/>

    <textarea placeholder="Small size" :class="appVv.textareas.getSizeClasses('sm')"/>

</template>

Textareas.getRowSize()

Returns: String
Default: "3"

The Textareas.getRowSize() method returns rows HTML attribute number based on the optional argument value passed into the method. The number itself comes from the Textareas.rowSizes object property names/keys and values (of atomic classes).

Arguments

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

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

Examples

html

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

<script setup lang="ts">

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

<template>

    <textarea placeholder="Regular Row Size" :class="appVv.textareas.getRowSize()"/>

    <textarea placeholder="Small Row Size" :class="appVv.textareas.getRowSize('sm')"/>

</template>

Module Code

// ./src/configs/Textareas.ts

import type { ConfigTextareas } from '../types/ConfigTextareas'
import Inputs from './Inputs.js'
import Transitions from './Transitions.js'

export default <ConfigTextareas>{
    border: 'border',
    display: 'block w-full',
    outline: '',
    placeholder: 'placeholder:opacity-50',
    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: Inputs.sizes,
    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()
    },
    rowSizes: {
        'xs': 1,
        'sm': 2,
        'md': 3,
        'lg': 4,
        'xl': 6,
        '2xl': 8,
    },
    getRowSize: function (sizesKey) {
        const key = sizesKey && this.rowSizes[sizesKey] ? sizesKey : 'md'
        return this.rowSizes[key]
    },
}

Textareas Config Module ​

app.vv.ts Use ​

Import ​

Textareas.border ​

Example ​

Textareas.display ​

Example ​

Textareas.outline ​

Example ​

Textareas.placeholder ​

Example ​

Textareas.ring ​

Example ​

Textareas.rounding ​

Example ​

Textareas.rowSizes ​

Examples ​

Textareas.shadow ​

Example ​

Textareas.sizes ​

Examples ​

Textareas.text ​

Example ​

Textareas.transition ​

Example ​

Textareas.base() ​

Example ​

Textareas.classes() ​

Arguments ​

Examples ​

Textareas.getSizeClasses() ​

Arguments ​

Examples ​

Textareas.getRowSize() ​

Arguments ​

Examples ​

Module Code ​

Textareas Config Module

app.vv.ts Use

Import

Textareas.border

Example

Textareas.display

Example

Textareas.outline

Example

Textareas.placeholder

Example

Textareas.ring

Example

Textareas.rounding

Example

Textareas.rowSizes

Examples

Textareas.shadow

Example

Textareas.sizes

Examples

Textareas.text

Example

Textareas.transition

Example

Textareas.base()

Example

Textareas.classes()

Arguments

Examples

Textareas.getSizeClasses()

Arguments

Examples

Textareas.getRowSize()

Arguments

Examples

Module Code