An accessibility-first renderless (headless) dialog component made for Vue https://renatodeleao.github.io/a11y-vue-dialog/
MIT License
vue@2
and vue@3
🚧Detailed documentation and additional info is available at documentation site
npm i a11y-vue-dialog
# or
yarn add a11y-dialog
A renderless/headless component provides all the functionality required to build a proper Dialog
, but gives zero f*cks about your styles. As such you have full control over it and have to DYI. Here's a basic example on how to do it:
<!-- AppBaseDialog.vue -->
<template>
<a11y-dialog
v-bind="$attrs"
v-on="$listeners"
v-slot:default="{ rootRef, dialogRef, titleRef, closeRef }"
>
<div v-bind="rootRef.prop">
<!-- Bindings do the accessibility attributes for you -->
<div v-bind="dialogRef.props" v-on="dialogRef.listeners">
<h1 v-bind="titleRef.props">{{ title }}</h1>
<button v-bind="closeRef.props" v-on="closeRef.listeners">
</div>
</div>
...
<slot />
</a11y-dialog>
</template>
<script>
import { A11yDialog } from 'a11y-dialog'
export default {
name: 'AppBaseDialog',
components: { A11yDialog },
props: {
title: {
type: String,
required: true
}
}
}
</script>
<!-- At any View.vue, after import AppBaseDialog -->
<template>
<div id="page">
<button @click="isDialogOpen = true">
<app-base-dialog
title="Hello world"
:open="isDialogOpen"
@close="openMyModal = false"
@confirm="handSubmit"
>
My markup, my rules.
</app-base-dialog>
</div>
</template>
Voilá, checkout a working example on CodeSandbox.
Detailed documentation and additional info is available at documentation site
A playground is used to test the component locally. It uses vue/cli
instant prototyping feature, so the downside is that you have to install it globally.
yarn install
yarn play
Thanks to all this packages for inspiration and guidance.
portal-vue|vue-simple-portal
from @LinusBorg which makes escaping overflow traps easy peasya11y-dialog
(vanilla) from @KittyGiraudel
to lead the path that ended herevue-a11y-dialog
(wrapper around ^) from @morkro
for the motivation to build a pure vue alternative to it.MIT © Renato de Leão