@iliasnolsson/adaptive-dialog

Overview

adaptive-dialog is a flexible and feature-rich dialog component for Vue.js applications. It provides a dynamic dialog presentation which adapts to its surrounding environment and provides several utilities to make the positioning and presentation of your dialogs intuitive and visually appealing.

Installation

npm install @iliasnolsson/adaptive-dialog

Components

1. AdaptiveDialog

Main dialog component which adapts its position and presentation based on various properties.

Properties:

• isOpen: Boolean to control the visibility of the dialog. Can be used with v-model:is-open for two-way binding.

• areaIdentifier: Identifier of the area which encloses this dialog. The dialog will ensure it is contained within this area.

• anchorIdentifier: Identifier of the element which this dialog anchors to when presented.

• anchorExactLocation: Use to specify an exact location to anchor the dialog.

• presentationDirection: Direction in which the dialog should present itself.

• backgroundClickToClose: If true, clicking the background will close the dialog.

• backgroundInteractive: If true, background elements remain interactive when the dialog is open.

• styling: Object to specify custom styles for the dialog.

• backdropStyling: Object to specify custom styles for the dialog backdrop.

• waitUntilLoaded: If true, waits until content within the dialog is loaded before presenting the dialog.

Usage:

<AdaptiveDialog v-model:is-open="dialogOpen" area-identifier="test-area" ...>
  <!-- Dialog content goes here -->
</AdaptiveDialog>

2. AdaptiveDialogDirection

Enum which provides multiple positioning directions for the dialog.

• MidXMinY: Top Center
• MidXMaxY: Bottom Center
• MinXMidY: Left Center
• MaxXMidY: Right Center
• MinXMinY: Top Left
• MaxXMinY: Top Right
• MinXMaxY: Bottom Left
• MaxXMaxY: Bottom Right
• Auto: Automatically chooses the best direction to fit within the enclosure area or document window.

3. AdaptiveDialogArea

A helper component to define an area for the dialog.

Properties:

• identifier: Unique identifier for this area.

• inset: Minimum spacing between the dialog and the area edges.

Usage:

<AdaptiveDialogArea identifier="test-area" :inset="10">
  <!-- Area content goes here -->
</AdaptiveDialogArea>

4. AdaptiveDialogAnchor

A helper component to define an anchor for the dialog.

Properties:

• identifier: Unique identifier for this anchor.

• minimumSpacing: Minimum spacing between the dialog and the anchor.

Usage:

<AdaptiveDialogAnchor identifier="my-anchor" :minimumSpacing="5">
  <!-- Anchor content goes here -->
</AdaptiveDialogAnchor>

Example

<AdaptiveDialogArea identifier="test-area" :inset="10">
  <div class="test-area">
    <!-- Some content inside the area -->
  </div>
</AdaptiveDialogArea>

<AdaptiveDialog area-identifier="test-area" ...>
  <!-- Dialog content -->
</AdaptiveDialog>

Note: The AdaptiveDialog does not need to be defined within the AdaptiveDialogArea element. It can be defined anywhere in your Vue component or template.

Contribution

Feel free to submit issues and enhancement requests. Contributions are welcome!

License

MIT