Quick View

Description

Slide-out quick-view panel for Enso UI.

Installation

Install the package:

yarn add @enso-ui/quick-view

Features

• exports QuickView as its public surface
• renders the panel through Teleport directly under body, avoiding parent stacking contexts and overflow clipping
• keeps the slide transition active while using a teleported panel
• supports Bulma column responsiveness through classes passed on the component
• aligns responsive panels to the right edge by default
• exposes the close() method through template refs and the default slot scope
• closes when the user presses Escape

Usage

<script setup>
import QuickView from '@enso-ui/quick-view/bulma';
</script>

<template>
    <QuickView class="is-one-third-desktop is-half-tablet is-full-mobile"
        @close="quickView = false"
        v-if="quickView">
        <template #default="{ close }">
            <button class="button"
                type="button"
                @click="close">
                Close
            </button>
        </template>
    </QuickView>
</template>

API

QuickView

Public export available from @enso-ui/quick-view/bulma.

Attributes:

• classes passed to QuickView are applied to the internal Bulma .column, so standard column sizing helpers can control panel width responsively
• non-class attributes are not applied to the wrapper panel

Events:

• close is emitted after the panel is closed by Escape, by the exposed close() method, or after the leave transition completes

Exposed:

• close() starts the leave transition and emits close after the animation completes

Slots:

• default slot receives { close }, the same method exposed on the component instance

Depends On

• @enso-ui/transitions
• @enso-ui/ui
• bulma
• pinia

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