ERD

Description

ERD is a renderless ResizeObserver wrapper that exposes the current element width and height to slot content.

Installation

Install the package:

yarn add @enso-ui/erd

The component can be used inside or outside the Enso ecosystem.

Features

• exports a single renderless Erd component through the package root
• observes the rendered element with ResizeObserver and debounces updates
• passes reactive width and height values to the default slot
• works well for responsive charts, virtualized layouts, and adaptive cards

Usage

<script setup>
import Erd from '@enso-ui/erd';
</script>

<Erd :debounce="50" v-slot="{ width, height }">
    <div>{{ width }} × {{ height }}</div>
</Erd>

API

Erd

Renderless component that observes its own element box and forwards the current size through the default slot.

Import: @enso-ui/erd

Props:

• debounce: number = 1 debounce window, in milliseconds, used before width and height updates are applied.

Events:

• none.

Slots:

• default receives { width, height } with the latest observed content-box dimensions.

Depends On

• lodash for the internal debounce helper.
• vue as the component runtime.

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