Checkbox

Description

Hierarchical checkbox managers for Enso UI.

Installation

Install the package:

yarn add @enso-ui/checkbox

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

Features

• exports CheckboxManager and CheckboxItems through the Bulma entrypoint
• supports recursive grouped selections with tri-state visual feedback
• mirrors the selected ids through the v-model contract
• exposes item and checkbox slots so parent pages can customize rendering

Usage

<script setup>
import { CheckboxManager } from '@enso-ui/checkbox/bulma';
import { ref } from 'vue';

const selected = ref([]);
const items = {
    Warehouses: { _items: [{ id: 1, label: 'Main' }] },
    _items: [{ id: 2, label: 'Unassigned' }],
};
</script>

<CheckboxManager
    v-model="selected"
    :items="items"
    title="Permissions"
/>

API

CheckboxManager

Recursive card-based manager for grouped checkbox trees.

Import: @enso-ui/checkbox/bulma

Props:

• collapsed: boolean = false initial collapsed state.
• items: object grouped item tree with _items leaves.
• modelValue: array selected ids.
• title: string group title.

Events:

• change
• update:modelValue

Slots:

• checkbox receives { updateBelow } for custom group checkbox rendering.
• item receives { item } for custom leaf rendering.

CheckboxItems

Leaf checkbox list used by CheckboxManager and reusable on its own.

Import: @enso-ui/checkbox/bulma

Props:

• items: array list of selectable { id, label } objects.
• modelValue: array selected ids.

Events:

• change
• update:modelValue

Slots:

• item receives { item } for custom item rendering.

Depends On

• @enso-ui/card ↗
• 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