Anchors Config Module

The Anchors Config Module holds your application's default/prototypal Tailwind CSS classes for Anchor 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 Anchors 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:

// ./src/app.vv.ts

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

let appVv: ConfigVv = VvConfig

appVv.anchors.someProperty = 'some-value'

// ...

export default appVv

Import

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

import { Anchors } from '@obewds/vueventus'

Anchors.cursor

Type: String
Default: "cursor-pointer"

The Anchors.cursor parameter is meant to isolate the CSS cursor focused characteristics and requirements for an application's anchor 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

// ./src/app.vv.ts
appVv.anchors.cursor = '...'

Anchors.display

Type: String
Default: ""

The Anchors.display parameter is meant to isolate the CSS display/block level characteristics and requirements for an application's anchor 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

// ./src/app.vv.ts
appVv.anchors.display = '...'

Anchors.focus

Type: String
Default: ""

The Anchors.focus parameter is meant to isolate the CSS focus orientated characteristics and requirements for an application's anchor 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

// ./src/app.vv.ts
appVv.anchors.focus = '...'

Anchors.sizes

The Anchors.sizes parameter object for the Anchors Config Module is inherited directly from the Text Config Module.

Anchors.text

Type: String
Default: "underline underline-offset-2"

The Anchors.text parameter is meant to isolate the text specific atomic classes that don't pertain to already represented characteristics in VueVentus like color, size, etc. Instead, the Anchors.text parameter is meant for classes that would make anchor text unique from other text for more design/accessibility reasons.

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

// ./src/app.vv.ts
appVv.anchors.text = '...'

Anchors.transition

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

The Anchors.transition parameter is meant to isolate the transition/animation specific atomic classes an application's anchor elements.

Example

// ./src/app.vv.ts
appVv.anchors.transition = '...'

Anchors.base()

Returns: String
Default: "cursor-pointer underline underline-offset-2 transition-colors ease-in-out duration-300"

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

Example

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

<script setup lang="ts">

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

<template>

    <a href="#" :class="[appVv.anchors.base(), String(appVv.anchors.palettes.default.success)]">
        Base anchor + default success color classes
    </a>

</template>

Anchors.classes()

Returns: String
Default: "cursor-pointer underline underline-offset-2 transition-colors ease-in-out duration-300 text-base"

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

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

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

Example

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

<script setup lang="ts">

    import appVv from '../app.vv'

    const appLinkColor = appVv.anchors.palettes.default.success
    
</script>

<template>

    <a href="#" :class="[appVv.anchors.classes(), appLinkColor]">
        Regular Success Anchor
    </a>

    <a href="#" :class="[appVv.anchors.classes('lg'), appLinkColor]">
        Large Success Anchor
    </a>

</template>

Anchors.getSizeClasses()

Returns: String
Default: "text-base"

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

Arguments

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

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

Example

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

<script setup lang="ts">

    import appVv from '../app.vv'

    const color = appVv.anchors.palettes.default.success
    const transition = appVv.anchors.transition
    
</script>

<template>

    <a href="#" :class="[appVv.anchors.getSizeClasses(), color, transition]">
        Regular Success Anchor
    </a>

    <a href="#" :class="[appVv.anchors.getSizeClasses('lg'), color, transition]">
        Large Success Anchor
    </a>

</template>

Module Code

// ./src/configs/Anchors.ts

import type { ConfigAnchors } from '../types/ConfigAnchors'
import Text from './Text.js'
import Transitions from './Transitions.js'

export default <ConfigAnchors>{
    cursor: 'cursor-pointer',
    display: '',
    focus: '',
    text: 'underline underline-offset-2',
    transition: Transitions.classes('colors', 'inOut', '300'),
    base: function () {
        return [
            this.cursor,
            this.display,
            this.focus,
            this.text,
            this.transition,
        ].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()
    },
}

Current Version:

v0.61.7