Lists Config Module

The Lists Config Module holds your application's default/prototypal Tailwind CSS classes for VueVentus list components.

app.vv.ts Use

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

// ...

export default appVv

Import

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

javascript

import { Lists } from '@obewds/vueventus'

Lists.align

Type: String
Default: "text-left"

The Lists.align parameter is meant to isolate CSS text alignment characteristics and requirements for an application's list 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.lists.align = '...'

Lists.decoration

Type: String
Default: ""

The Lists.decoration parameter is meant to isolate CSS text decoration characteristics and requirements for an application's list 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.lists.decoration = '...'

Lists.family

Type: String
Default: ""

The Lists.family parameter is meant to isolate CSS text family characteristics and requirements for an application's list 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.lists.family = '...'

Lists.lineHeight

Type: String
Default: ""

The Lists.lineHeight parameter is meant to isolate CSS text line height characteristics and requirements for an application's list 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.lists.lineHeight = '...'

Lists.padding

Type: String
Default: "pl-4"

The Lists.padding parameter is meant to isolate CSS list element padding characteristics and requirements for an application's list 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.lists.padding = '...'

Lists.sizes

Type: Object

Text.sizes Properties	Text.sizes Prop Values
`"5xs"`	`"text-5xs"`
`"4xs"`	`"text-4xs"`
`"3xs"`	`"text-3xs"`
`"2xs"`	`"text-2xs"`
`"xs"`	`"text-xs"`
`"sm"`	`"text-sm"`
`"md"`	`"text-base"`
`"lg"`	`"text-lg"`
`"xl"`	`"text-xl"`
`"2xl"`	`"text-2xl"`
`"2xl"`	`"text-3xl"`
`"4xl"`	`"text-4xl"`
`"5xl"`	`"text-5xl"`
`"6xl"`	`"text-6xl"`
`"7xl"`	`"text-7xl"`
`"8xl"`	`"text-8xl"`
`"9xl"`	`"text-9xl"`
`"10xl"`	`"text-10xl"`
`"11xl"`	`"text-11xl"`
`"12xl"`	`"text-12xl"`

Examples

javascript

// ./src/app.vv.ts
appVv.lists.sizes = {
     '5xs': '',
     '4xs': '',
     '3xs': '',
     '2xs': '',
      'xs': '',
      'sm': '',
      'md': '',
      'lg': '',
      'xl': '',
     '2xl': '',
     '3xl': '',
     '4xl': '',
     '5xl': '',
     '6xl': '',
     '7xl': '',
     '8xl': '',
     '9xl': '',
    '10xl': '',
    '11xl': '',
    '12xl': '',
}

javascript

// ./src/app.vv.ts
appVv.lists.sizes['5xs']  = ''
appVv.lists.sizes['4xs']  = ''
appVv.lists.sizes['3xs']  = ''
appVv.lists.sizes['2xs']  = ''
appVv.lists.sizes['xs']   = ''
appVv.lists.sizes['sm']   = ''
appVv.lists.sizes['md']   = ''
appVv.lists.sizes['lg']   = ''
appVv.lists.sizes['xl']   = ''
appVv.lists.sizes['2xl']  = ''
appVv.lists.sizes['3xl']  = ''
appVv.lists.sizes['4xl']  = ''
appVv.lists.sizes['5xl']  = ''
appVv.lists.sizes['6xl']  = ''
appVv.lists.sizes['7xl']  = ''
appVv.lists.sizes['8xl']  = ''
appVv.lists.sizes['9xl']  = ''
appVv.lists.sizes['10xl'] = ''
appVv.lists.sizes['11xl'] = ''
appVv.lists.sizes['12xl'] = ''

Lists.spacing

Type: String
Default: ""

The Lists.spacing parameter is meant to isolate CSS text spacing characteristics and requirements for an application's list elements.

Example

javascript

// ./src/app.vv.ts
appVv.lists.spacing = '...'

Lists.weight

Type: String
Default: ""

The Lists.weight parameter is meant to isolate CSS text weight characteristics and requirements for an application's list elements.

Example

javascript

// ./src/app.vv.ts
appVv.lists.weight = '...'

Lists.wordBreak

Type: String
Default: ""

The Lists.wordBreak parameter is meant to isolate CSS text flow word line break characteristics and requirements for an application's list elements.

Example

javascript

// ./src/app.vv.ts
appVv.lists.wordBreak = '...'

Lists.base()

Returns: String
Default: "text-left pl-4 subpixel-antialiased"

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

Example

html

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

<script setup lang="ts">

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

<template>

    <ul :class="appVv.text.base()">
        <li>Base styled text</li>
    </ul>

</template>

Lists.classes()

Returns: String
Default: "text-left pl-4 subpixel-antialiased text-base"

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

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

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

    <ul :class="appVv.text.classes()">
        <li>Regular sized text</li>
    </ul>

    <ul :class="appVv.text.classes('lg')">
        <li>Large sized text</li>
    </ul>

</template>

Lists.getSizeClasses()

Returns: String
Default: "text-base"

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

Arguments

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

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

    <ul :class="appVv.text.getSizeClasses()">
        <li>Regular sized text</li>
    </ul>

    <ul :class="appVv.text.getSizeClasses('sm')">
        <li>Small sized text</li>
    </ul>

</template>

Module Code

// ./src/configs/Text.ts

import Text from './Text.js'
import type { ConfigLists } from '../types/ConfigLists'

export default <ConfigLists>{
    align: 'text-left',
    decoration: '',
    family: '',
    lineHeight: '',
    padding: 'pl-4',
    smoothing: 'subpixel-antialiased',
    spacing: '',
    weight: '',
    wordBreak: '',
    base: function () {
        return [
            this.align,
            this.decoration,
            this.family,
            this.lineHeight,
            this.padding,
            this.smoothing,
            this.spacing,
            this.weight,
            this.wordBreak,
        ].join(' ').replace(/\s+/g,' ').trim()
    },
    sizes: Text.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()
    },
}

Lists Config Module ​

app.vv.ts Use ​

Import ​

Lists.align ​

Example ​

Lists.decoration ​

Example ​

Lists.family ​

Example ​

Lists.lineHeight ​

Example ​

Lists.padding ​

Example ​

Lists.sizes ​

Examples ​

Lists.spacing ​

Example ​

Lists.weight ​

Example ​

Lists.wordBreak ​

Example ​

Lists.base() ​

Example ​

Lists.classes() ​

Arguments ​

Examples ​

Lists.getSizeClasses() ​

Arguments ​

Examples ​

Module Code ​

Lists Config Module

app.vv.ts Use

Import

Lists.align

Example

Lists.decoration

Example

Lists.family

Example

Lists.lineHeight

Example

Lists.padding

Example

Lists.sizes

Examples

Lists.spacing

Example

Lists.weight

Example

Lists.wordBreak

Example

Lists.base()

Example

Lists.classes()

Arguments

Examples

Lists.getSizeClasses()

Arguments

Examples

Module Code