├── .editorconfig ├── .eslintrc.js ├── .github └── workflows │ └── ci.yml ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── cypress.json ├── cypress ├── fixtures │ └── example.json ├── plugins │ └── index.js └── support │ └── index.js ├── dist ├── vue-a11y-dialog.esm.js └── vue-a11y-dialog.umd.js ├── index.html ├── package-lock.json ├── package.json ├── src ├── A11yDialog.vue ├── Demo.spec.ct.js ├── Demo.vue ├── demo.css ├── demo.js └── index.js └── vite.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | node: true, 6 | 'cypress/globals': true, 7 | }, 8 | parser: 'vue-eslint-parser', 9 | parserOptions: { 10 | ecmaVersion: 2020, 11 | }, 12 | plugins: ['vue', 'cypress'], 13 | extends: ['eslint:recommended', 'plugin:vue/vue3-essential'], 14 | rules: { 15 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 16 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 17 | 'vue/script-indent': 'off', 18 | 'vue/html-indent': 'off', 19 | 'vue/no-unused-vars': 'error', 20 | 'vue/require-default-prop': 'off', 21 | indent: 'off', 22 | semi: [2, 'never'], 23 | quotes: [2, 'single'], 24 | 'cypress/no-assigning-return-values': 'error', 25 | 'cypress/no-unnecessary-waiting': 'error', 26 | 'cypress/assertion-before-screenshot': 'warn', 27 | 'cypress/no-force': 'warn', 28 | 'cypress/no-async-tests': 'error', 29 | 'cypress/no-pause': 'error', 30 | }, 31 | } 32 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Lint and tests 2 | on: 3 | push: 4 | branches: 5 | - main 6 | pull_request: 7 | branches: 8 | - main 9 | jobs: 10 | run-lint-and-tests: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Checkout 14 | uses: actions/checkout@v2 15 | 16 | - name: Install npm dependencies 17 | run: npm ci 18 | 19 | - name: Run lint 20 | run: npm run lint 21 | 22 | - name: Run tests 23 | run: npm run test:ci 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | coverage 3 | .DS_Store 4 | *.log 5 | .vscode 6 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## Unreleased 9 | 10 | - tbd 11 | 12 | ## [1.1.2] 2022-04-02 13 | 14 | ### Changed 15 | 16 | - Updates `alertdialog` to be conditionally applied [#39](https://github.com/morkro/vue-a11y-dialog/pull/39) (Thanks to [@roblevintennis](https://github.com/roblevintennis)) 17 | 18 | ## [1.1.1] 2022-01-24 19 | 20 | ### Removed 21 | 22 | - Remove obsolete concept of app root [#37](https://github.com/morkro/vue-a11y-dialog/pull/37) (Thanks to [@KittyGiraudel](https://github.com/KittyGiraudel)) 23 | 24 | ## [1.1.0] 2022-01-24 25 | 26 | ### Added 27 | 28 | - Build setup now done with Vite [#31](https://github.com/morkro/vue-a11y-dialog/pull/31) (Thanks to [@roblevintennis](https://github.com/roblevintennis)) 29 | - Demo configuration to run locally 30 | - Added ESM build output 31 | 32 | ### Changed 33 | 34 | - Updated `a11y-dialog` to latest version [#31](https://github.com/morkro/vue-a11y-dialog/pull/31) (Thanks to [@roblevintennis](https://github.com/roblevintennis)) 35 | - Updated development dependencies 36 | 37 | ## [1.1.0] 2022-01-24 38 | 39 | ### Added 40 | 41 | - Build setup now done with Vite [#31](https://github.com/morkro/vue-a11y-dialog/pull/31) (Thanks to [@roblevintennis](https://github.com/roblevintennis)) 42 | - Demo configuration to run locally 43 | - Added ESM build output 44 | 45 | ### Changed 46 | 47 | - Updated `a11y-dialog` to latest version [#31](https://github.com/morkro/vue-a11y-dialog/pull/31) (Thanks to [@roblevintennis](https://github.com/roblevintennis)) 48 | - Updated development dependencies 49 | - Tests now done with Cypress [#31](https://github.com/morkro/vue-a11y-dialog/pull/31) (Thanks to [@roblevintennis](https://github.com/roblevintennis)) 50 | - More updates to Vue 3 setup (e.g. `emits`) (Note to [#30](https://github.com/morkro/vue-a11y-dialog/pull/30)) 51 | 52 | ### Removed 53 | 54 | - Jest 55 | - Rollup (now under-the-hood configuration via Vite) 56 | 57 | ## [1.0.0] - 2021-02-21 58 | 59 | This is the first major release that introduces breaking changes. From `1.0.0` onwards the API will support Vue 3. 60 | 61 | ### Changed 62 | 63 | - Updated API to support Vue 3 syntax [#25](https://github.com/morkro/vue-a11y-dialog/pull/25) (Thanks to [@marcus-herrmann](https://github.com/marcus-herrmann)) 64 | 65 | ### Removed 66 | 67 | - Removed dependency to `portal-vue` 68 | 69 | ## [0.5.2] - 2020-04-14 70 | 71 | ### Changed 72 | 73 | - Updated `a11y-dialog` to latest version 74 | 75 | ### Fixed 76 | 77 | - Fixes mistakenly used `titleId` in `aria-labelledby` with `fullTitleId` ([#23](https://github.com/morkro/vue-a11y-dialog/pull/23)) 78 | 79 | ## [0.5.1] - 2020-02-12 80 | 81 | ### Changed 82 | 83 | - Changed three minor occurences of arrow functions with normal functions to allow support for IE11. 84 | - Updated a few dependencies, including latest `portal-vue` release 85 | 86 | ### Security 87 | 88 | - Ran `npm audit` and fixed a couple vulneribility warnings. 89 | 90 | ## [0.5.0] - 2019-04-16 91 | 92 | ### Changed 93 | 94 | - Upgraded to `portal-vue@2.1.0` which required refactoring parts of the implementation. 95 | - Upgraded development dependencies. 96 | 97 | ## [0.4.2] - 2019-02-21 98 | 99 | ### Fixed 100 | 101 | - Vue.js library from being included to the bundle. 102 | 103 | ## [0.4.1] - 2019-02-20 104 | 105 | ### Added 106 | 107 | - This CHANGELOG. 108 | - Some basic component tests. 109 | 110 | ### Changed 111 | 112 | - Upgraded dependencies which resulted in a new bundle. 113 | - Updated README to use new `v-slot` syntax. 114 | 115 | ### Fixed 116 | 117 | - Mistake in API documentation of `title` slot. 118 | 119 | ## [0.4.0] - 2018-12-14 120 | 121 | ## Added 122 | 123 | - [PortalVue](https://github.com/LinusBorg/portal-vue) to render the dialog outside of the application container, addressing [#5](https://github.com/morkro/vue-a11y-dialog/issues/5). 124 | 125 | ## [0.3.1] - 2018-06-03 126 | 127 | ### Security 128 | 129 | - Removes full component file path from development environment in bundled output. 130 | 131 | ## [0.3.0] - 2018-06-03 132 | 133 | ### Added 134 | 135 | - Adds possibility to use `alertdialog` role. 136 | 137 | ## [0.2.0] - 2018-06-16 138 | 139 | ### Added 140 | 141 | - New API to disable the native `` element. 142 | 143 | ### Changed 144 | 145 | - Upgrades to `a11y-dialog@5.1.0`. 146 | 147 | ## [0.1.0] - 2018-06-13 148 | 149 | ### Added 150 | 151 | - Everything. 152 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Moritz Kröger 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue A11yDialog [![Build Status](https://travis-ci.org/morkro/vue-a11y-dialog.svg?branch=master)](https://travis-ci.org/morkro/vue-a11y-dialog) 2 | 3 | This is a Vue.js wrapper component for [`a11y-dialog@7.3.0`](https://github.com/KittyGiraudel/a11y-dialog) ([**Demo on CodeSandbox**](https://codesandbox.io/s/rj20wr1kpp)). 4 | 5 | - [Installation](#installation) 6 | - [Usage](#usage) 7 | - [Multiple dialogs](#multiple-dialogs) 8 | - [API](#api) 9 | - [Events](#events) 10 | - [Slots](#slots) 11 | - [Server-side Rendering](#server-side-rendering) 12 | 13 | ## Installation 14 | 15 | This library supports both Vue 3 and Vue 2. However, active maintenance is focused on Vue 3. If you still need to support Vue 2, you can stay on version [`0.5.2`](https://github.com/morkro/vue-a11y-dialog/tree/0.5.2). 16 | 17 | **Vue 3** 18 | 19 | ```bash 20 | npm install vue-a11y-dialog 21 | ``` 22 | 23 | **Vue 2** 24 | 25 | ```bash 26 | npm install vue-a11y-dialog@0.5.2 27 | ``` 28 | 29 | ## Usage 30 | 31 | In your `main.js` application file, install the component: 32 | 33 | ```js 34 | import { createApp } from 'vue' 35 | import A11yDialog from 'vue-a11y-dialog' 36 | import App from './App.vue' 37 | 38 | createApp(App).use(A11yDialog).mount('#app') 39 | ``` 40 | 41 | Then use it as follows: 42 | 43 | ```html 44 | 64 | ``` 65 | 66 | ```js 67 | export default { 68 | name: 'YourComponent', 69 | 70 | data: () => ({ 71 | dialog: null 72 | }), 73 | 74 | methods: { 75 | openDialog() { 76 | if (this.dialog) { 77 | this.dialog.show() 78 | } 79 | }, 80 | 81 | assignDialogRef(dialog) { 82 | this.dialog = dialog 83 | } 84 | } 85 | } 86 | ``` 87 | 88 | It's important to assign the direct reference to the dialog instance via `@dialog-ref`, otherwise there is no way to call its methods. 89 | 90 | Alternatively, you can also import the component directly into your file without installing it first: 91 | 92 | ```js 93 | import { A11yDialog } from 'vue-a11y-dialog' 94 | export default { 95 | name: 'YourComponent', 96 | 97 | components: { 98 | 'a11y-dialog': A11yDialog 99 | }, 100 | 101 | methods: { 102 | // ... 103 | } 104 | } 105 | ``` 106 | 107 | ### Multiple dialogs 108 | 109 | It's possible to use multiple dialogs in the same component, just make sure to assign the different `dialog` instances separately. 110 | 111 | In your `