A renderless/headless, accessibility-first modal dialog component for Vue apps.
How to use it:
1. Import and register the A11yDialog.
import { A11yDialog } from 'a11y-dialog'
export default { // ... components: { A11yDialog }, // ... }
2. Add your content to the modal dialog.
<template> <a11y-dialog v-bind="$attrs" v-on="$listeners" v-slot:default="{ titleRef, closeRef }" > <h1 v-bind="titleRef.props">{{ title }}</h1> <button v-bind="closeRef.props" v-on="closeRef.listeners"> ... <slot /> </a11y-dialog> </template>
export default { name: 'AppBaseDialog', components: { A11yDialog }, props: { title: { type: String, required: true } } }
3. Enable a button to toggle the modal dialog.
<button @click="isOpen = true">Open dialog</button> <DialogConfirm :open="isOpen" @close="isOpen = false" @confirm="handleSubmit"> <template v-slot:title> Your markup, <strong>your rules</strong> </template> <template v-slot:default >Are you sure you want to be overriding CSS or pass a thousand props again?</template> </DialogConfirm>
4. Available component props.
/** * @desc control's dialog visibility */ open: { type: Boolean, default: false }, /** * @desc accessibilty attribute: possible usage as modal. If "alertdialog" * will not close on backdrop click. * @see https://github.com/edenspiekermann/a11y-dialog#usage-as-a-modal */ role: { type: String, default: "dialog", validator: (role) => VALID_ROLES.indexOf(role) > -1 }, /** * @desc accessibilty attribute: hide content from screen readers * when dialog is open. if null, defaults to siblings of portal-target element */ contentRoot: { type: [String, null], default: null }, /** * @desc focus-trap package configuration object * @see {@link https://github.com/focus-trap/focus-trap#usage} */ focusTrapCreateOptions: { type: Object, default: () => ({}) }
Preview:
Changelog:
v0.11.1 (08/08/2023)
- Update
v0.9.0beta (03/07/2023)
- Update
v0.8.0beta (08/08/2022)
- fix: explicit compatConfig for overriding potential consumer custom one
07/30/2022
- fix: make it work when paired with @vue3 + @vue/compat
Download Details:
Author: renatodeleao
Live Demo: https://renatodeleao.github.io/a11y-vue-dialog/guide/advanced-usage.html
Download Link: https://github.com/renatodeleao/a11y-vue-dialog/archive/refs/heads/master.zip
Official Website: https://github.com/renatodeleao/a11y-vue-dialog
Install & Download:
# Yarn
$ yarn add a11y-dialog
# NPM
$ npm i a11y-dialog