Vue 3 Dialog

This is a component which builds a barebones modal using the HTML5 <dialog> element. The dialog element has only the necessary inline styling to make sure the elements are coherent with the expected behaviour. Any extra styling should be provided via the *-class props.

Installation (ES Module)

npm i @ludwig801/vue3-dialog

Exports

• LMDialog: a barebones <dialog> with only the backdrop and the content slot.

LMDialog

Properties

| Property | Types | Required | Default | Description | | ---------------- | --------------------- | :----------------: | :--------------------- | - | | v-model:open | boolean | :white_check_mark: | false | Opens/closes the dialog window. | | width | string | | "24rem" | A CSS string determining the base width of the content element. | | max-width | string | | "calc(100vw - 4rem)" | A CSS string determining the max width of the content element. | | animation-time | number | | 150 | The duration, in ms, of the open/close animation. (0 disables the animation). | | backdrop-class | stringobject | | undefined | The class or classes to the apply to the backdrop element. | | content-class | stringobject | | undefined | The class or classes to the apply to the content-wrapping element. |

Events

| Event | Arguments | Trigger | | --------------- | --------------------------------------- | - | | update:open | open: boolean - the new state | The dialog's open state is changed via user interaction | | open:begin | | The dialog has started the opening animation Called even when animationTime is 0. | | open:end | | The dialog has finished the opening animation Called even when animationTime is 0. | | close:begin | | The dialog has started the closing animation Called even when animationTime is 0. | | close:end | | The dialog has finished the closing animation Called even when animationTime is 0. |

Slots

| Slot | Bindings | Description | | --------------- | --------------------------------------- | - | | default | | The dialog's default slot, where the content will be placed. | | backdrop | | Used to customize the appearance of the backdrop, if backdrop-class is not enough. |

Example usage

<template>
  <div>
    <button type="button" @click="isOpen = true">Open the dialog</button>
    <LMDialog
      v-model:open="isOpen"
      width="200px"
      max-width="100vw"
      backdrop-class="bg-slate-900"
      content-class="bg-slate-100 text-slate-900"
      @open:begin="isOpening"
      @open:end="hasOpened"
      @close:begin="isClosing"
      @close:end="hasClosed"
    >
      This is the dialog's content
    </LMDialog>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { LMDialog } from "@ludwig801/vue3-dialog"

const isOpen = ref(false)

function isOpening() { ... }
function hasOpened() { ... }

function isClosing() { ... }
function hasClosed() { ... }
</script>