Accessories

Description

Accessory tabs wrapper with translated labels and per-tab counters for Enso UI.

Installation

Install the package:

yarn add @enso-ui/accessories

This package is also available through the full enso-ui workspace bundle.

Features

• wraps @enso-ui/tabs/bulma and replaces the default tab-label renderer
• switches between translated text labels and Font Awesome icons through the icons prop
• exposes a mutable count map to the default slot so tab panes can publish badges
• renders dark Bulma counter tags next to any tab that sets a positive count

Usage

<script setup>
import Accessories from '@enso-ui/accessories/bulma';
import { Tab } from '@enso-ui/tabs/bulma';
</script>

<Accessories v-slot="{ count }">
    <tab id="Comments">
        <CommentsCard @update="count.Comments = 6" />
    </tab>
    <tab id="Documents">
        <DocumentsCard @update="count.Documents = 2" />
    </tab>
</Accessories>

API

Accessories

Default export that wraps EnsoTabs and customizes the label slot.

Import: @enso-ui/accessories/bulma

Props:

• icons: boolean = false toggles icon-based labels instead of translated text labels.

Events:

• No public emits.

Slots:

• default receives { count }, a mutable object keyed by tab id.

Depends On

• @enso-ui/tabs ↗
• @fortawesome/vue-fontawesome
• Bulma

Contributions

are welcome. Pull requests are great, but issues are good too.

Thank you to all the people who already contributed to Enso!

License

MIT