├── .eslintrc.js
├── .github
    └── workflows
    │   ├── ci.yml
    │   └── npm-publish.yml
├── .gitignore
├── .npmignore
├── .vscode
    └── settings.json
├── LICENSE
├── README.md
├── babel.config.js
├── docs
    ├── .gitignore
    ├── LICENCE.md
    ├── README.md
    ├── content
    │   └── docs
    │   │   └── index.md
    ├── gridsome.config.js
    ├── gridsome.server.js
    ├── netlify.toml
    ├── package.json
    ├── src
    │   ├── assets
    │   │   └── favicon.png
    │   ├── components
    │   │   ├── LayoutHeader.vue
    │   │   ├── Logo.vue
    │   │   ├── NextPrevLinks.vue
    │   │   ├── OnThisPage.vue
    │   │   ├── Search.vue
    │   │   ├── Sidebar.vue
    │   │   └── ToggleDarkMode.vue
    │   ├── favicon.png
    │   ├── layouts
    │   │   └── Default.vue
    │   ├── main.js
    │   ├── pages
    │   │   ├── 404.vue
    │   │   └── Index.vue
    │   └── templates
    │   │   └── MarkdownPage.vue
    ├── static
    │   ├── README.md
    │   └── logo.jpg
    ├── tailwind.config.js
    └── yarn.lock
├── examples
    └── simple-modal
    │   ├── .gitignore
    │   ├── .vscode
    │       └── extensions.json
    │   ├── README.md
    │   ├── index.html
    │   ├── package.json
    │   ├── public
    │       └── favicon.ico
    │   ├── src
    │       ├── App.vue
    │       ├── env.d.ts
    │       └── main.ts
    │   ├── tsconfig.json
    │   ├── vite.config.ts
    │   └── yarn.lock
├── jest.config.js
├── package.json
├── prettier.config.js
├── rollup.config.js
├── src
    ├── Box
    │   ├── Box.spec.tsx
    │   ├── Box.ts
    │   └── index.ts
    ├── Button
    │   ├── Button.spec.tsx
    │   ├── Button.ts
    │   ├── README.md
    │   └── index.ts
    ├── Clickable
    │   ├── Clickable.spec.tsx
    │   ├── Clickable.ts
    │   └── index.ts
    ├── Dialog
    │   ├── Dialog.ts
    │   ├── DialogDisclosure.ts
    │   ├── DialogState.ts
    │   ├── __tests__
    │   │   ├── Dialog.spec.tsx
    │   │   ├── DialogDisclosure.spec.tsx
    │   │   └── index.spec.tsx
    │   └── index.ts
    ├── Disclosure
    │   ├── Disclosure.ts
    │   ├── DisclosureContent.ts
    │   ├── DisclosureState.ts
    │   ├── __tests__
    │   │   ├── Disclosure.spec.tsx
    │   │   ├── DisclosureContent.spec.tsx
    │   │   ├── DisclosureState.spec.tsx
    │   │   └── index.spec.tsx
    │   └── index.ts
    ├── Modal
    │   ├── Modal.ts
    │   ├── ModalBackdrop.ts
    │   ├── ModalDisclosure.ts
    │   ├── ModalState.ts
    │   ├── README.md
    │   ├── __tests__
    │   │   ├── Modal.spec.tsx
    │   │   ├── ModalBackdrop.spec.tsx
    │   │   ├── ModalDisclosure.spec.tsx
    │   │   └── index.spec.tsx
    │   └── index.ts
    ├── Popover
    │   ├── Popover.ts
    │   ├── PopoverDisclosure.ts
    │   ├── PopoverState.ts
    │   ├── README.md
    │   ├── __tests__
    │   │   ├── Popover.spec.tsx
    │   │   ├── PopoverDisclosure.spec.tsx
    │   │   └── index.spec.tsx
    │   └── index.ts
    ├── Portal
    │   ├── Portal.spec.tsx
    │   ├── Portal.ts
    │   └── index.ts
    ├── Tabbable
    │   ├── Tabbable.spec.tsx
    │   ├── Tabbable.ts
    │   └── index.ts
    └── utils
    │   ├── component.ts
    │   ├── element.ts
    │   ├── index.ts
    │   └── visibility.ts
├── test
    ├── setup.ts
    └── utils
    │   ├── events.ts
    │   ├── index.ts
    │   └── render.ts
├── tsconfig.json
└── yarn.lock


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true,
 4 |     es2020: true,
 5 |     node: true,
 6 |   },
 7 |   extends: [
 8 |     'eslint:recommended',
 9 |     'plugin:vue/vue3-recommended',
10 |     'plugin:@typescript-eslint/recommended',
11 |     'prettier',
12 |   ],
13 |   parser: 'vue-eslint-parser',
14 |   parserOptions: {
15 |     ecmaVersion: 11,
16 |     parser: '@typescript-eslint/parser',
17 |     sourceType: 'module',
18 |   },
19 |   plugins: ['vue', '@typescript-eslint'],
20 |   rules: {
21 |     '@typescript-eslint/no-var-requires': 'off',
22 |     '@typescript-eslint/explicit-module-boundary-types': 'off',
23 |     'vue/multi-word-component-names': 'off',
24 |   },
25 |   ignorePatterns: ['lib', 'docs', 'coverage'],
26 | }
27 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [master]
 6 |   pull_request:
 7 |     branches: [master]
 8 | 
 9 | jobs:
10 |   build:
11 |     runs-on: ubuntu-latest
12 | 
13 |     steps:
14 |       - name: Checkout repository
15 |         uses: actions/checkout@v2
16 | 
17 |       - name: Set up Node
18 |         uses: actions/setup-node@v1
19 |         with:
20 |           node-version: 12
21 | 
22 |       - name: Install dependencies
23 |         run: yarn --frozen-lockfile
24 | 
25 |       - name: Lint
26 |         run: yarn lint
27 | 
28 |       - name: Test
29 |         run: yarn test --coverage
30 | 
31 |       - name: Upload coverage to Codecov
32 |         env:
33 |           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
34 |         run: bash <(curl -s https://codecov.io/bash)
35 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | name: Node.js Package
 2 | 
 3 | on:
 4 |   release:
 5 |     types: [created]
 6 | 
 7 | jobs:
 8 |   build:
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - uses: actions/checkout@v2
12 |       - uses: actions/setup-node@v1
13 |         with:
14 |           node-version: 14
15 |       - name: Install dependencies
16 |         run: yarn --frozen-lockfile
17 | 
18 |       - name: Lint
19 |         run: yarn lint
20 | 
21 |       - name: Test
22 |         run: yarn test
23 | 
24 |       - name: Build
25 |         run: yarn build:publish
26 | 
27 |   publish-npm:
28 |     needs: build
29 |     runs-on: ubuntu-latest
30 |     steps:
31 |       - uses: actions/checkout@v2
32 |       - uses: actions/setup-node@v1
33 |         with:
34 |           node-version: 14
35 |           registry-url: https://registry.npmjs.org/
36 |       - run: yarn --frozen-lockfile
37 |       - run: yarn build:publish
38 |       - run: npm publish
39 |         env:
40 |           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
41 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | coverage
3 | .DS_Store
4 | dist
5 | *.local
6 | .eslintcache
7 | lib


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | coverage
3 | .DS_Store
4 | dist
5 | *.local
6 | .eslintcache
7 | examples
8 | .vscode
9 | .github


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "eslint.codeActionsOnSave.mode": "all",
 3 |   "eslint.validate": [
 4 |     "typescript",
 5 |     "typescriptreact",
 6 |     "javascript",
 7 |     "javascriptreact",
 8 |     "vue"
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Jörg Bayreuther
 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 | # Ari
  2 | 
  3 | [![CI](https://github.com/visualjerk/ari/workflows/CI/badge.svg)](https://github.com/visualjerk/ari/actions)
  4 | [![Test Coverage](https://codecov.io/gh/visualjerk/ari/branch/master/graph/badge.svg)](https://codecov.io/gh/visualjerk/ari)
  5 | 
  6 | Accessible unstyled Vue components inspired by Reakit.
  7 | 
  8 | Try it on [Stackblitz](https://stackblitz.com/edit/vue-grjxen?file=src/App.vue).
  9 | 
 10 | ## Installation
 11 | 
 12 | ```bash
 13 | npm i vue-ari
 14 | ```
 15 | 
 16 | or
 17 | 
 18 | ```bash
 19 | yarn add vue-ari
 20 | ```
 21 | 
 22 | ## Usage
 23 | 
 24 | ```vue
 25 | <template>
 26 |   <PopoverDisclosure v-bind="popover">
 27 |     Open Popover
 28 |   </PopoverDisclosure>
 29 |   <Popover v-bind="popover">
 30 |     Popover Content
 31 |   </Popover>
 32 | </template>
 33 | 
 34 | <script>
 35 | import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'
 36 | 
 37 | export default {
 38 |   components: {
 39 |     Popover,
 40 |     PopoverDisclosure,
 41 |   },
 42 |   setup() {
 43 |     const popover = usePopoverState()
 44 |     return {
 45 |       popover,
 46 |     }
 47 |   },
 48 | }
 49 | </script>
 50 | ```
 51 | 
 52 | ## Styling
 53 | 
 54 | Ari components don't include styling by default. This gives you the ability to add styles however you like.
 55 | 
 56 | ### Example Using Tailwind
 57 | 
 58 | ```vue
 59 | <template>
 60 |   <PopoverDisclosure
 61 |     v-bind="popover"
 62 |     class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
 63 |   >
 64 |     Open Popover
 65 |   </PopoverDisclosure>
 66 |   <Popover
 67 |     v-bind="popover"
 68 |     class="rounded shadow-lg border border-solid border-gray-300 py-3 px-5 bg-white"
 69 |   >
 70 |     Popover Content
 71 |   </Popover>
 72 | </template>
 73 | 
 74 | <script>
 75 | import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'
 76 | 
 77 | export default {
 78 |   components: {
 79 |     Popover,
 80 |     PopoverDisclosure,
 81 |   },
 82 |   setup() {
 83 |     const popover = usePopoverState()
 84 |     return {
 85 |       popover,
 86 |     }
 87 |   },
 88 | }
 89 | </script>
 90 | ```
 91 | 
 92 | ## Reusable Components
 93 | 
 94 | It would get pretty verbose to add the same styling classes wherever you like to use a `Popover`. So the recommended way is wrapping Ari components inside your own base components and use them inside your app.
 95 | 
 96 | ```vue
 97 | <template>
 98 |   <PopoverDisclosure
 99 |     v-bind="$props"
100 |     class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
101 |   >
102 |     <slot />
103 |   </PopoverDisclosure>
104 | </template>
105 | 
106 | <script>
107 | import { PopoverDisclosure, popoverDisclosureProps } from 'vue-ari'
108 | 
109 | export default {
110 |   name: 'AppPopoverDisclosure',
111 |   props: popoverDisclosureProps,
112 |   components: {
113 |     PopoverDisclosure,
114 |   },
115 | }
116 | </script>
117 | ```
118 | 
119 | ## Abstracting State
120 | 
121 | If you would rather not create a modal state each time, just create a provider component.
122 | 
123 | Provider component:
124 | 
125 | ```vue
126 | <template>
127 |   <slot />
128 | </template>
129 | 
130 | <script>
131 | import { provide } from 'vue'
132 | import { useModalState } from 'vue-ari'
133 | 
134 | export default {
135 |   name: 'AppModalProvider',
136 |   setup() {
137 |     provide('modalState', useModalState())
138 |   },
139 | }
140 | </script>
141 | ```
142 | 
143 | Base component for disclosure:
144 | 
145 | ```vue
146 | <template>
147 |   <ModalDisclosure
148 |     v-bind="modal"
149 |     class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
150 |   >
151 |     <slot />
152 |   </ModalDisclosure>
153 | </template>
154 | 
155 | <script>
156 | import { inject } from 'vue'
157 | import { ModalDisclosure } from 'vue-ari'
158 | 
159 | export default {
160 |   name: 'AppModalDisclosure',
161 |   components: {
162 |     ModalDisclosure,
163 |   },
164 |   setup() {
165 |     const modal = inject('modalState')
166 |     return {
167 |       modal,
168 |     }
169 |   },
170 | }
171 | </script>
172 | ```
173 | 
174 | Base component for modal:
175 | 
176 | ```vue
177 | <template>
178 |   <ModalBackdrop
179 |     v-bind="modal"
180 |     class="fixed inset-0 flex items-center justify-center bg-opacity-75 bg-black"
181 |   >
182 |     <Modal
183 |       v-bind="{ ...modal, ...$attrs }"
184 |       class="max-w-xs rounded shadow-lg border border-solid border-gray-300 py-3 px-5 bg-white"
185 |     >
186 |       <slot />
187 |     </Modal>
188 |   </ModalBackdrop>
189 | </template>
190 | 
191 | <script>
192 | import { inject } from 'vue'
193 | import { Modal, ModalBackdrop } from 'vue-ari'
194 | 
195 | export default {
196 |   name: 'AppModalDisclosure',
197 |   components: {
198 |     Modal,
199 |     ModalBackdrop,
200 |   },
201 |   inheritAttrs: false,
202 |   setup() {
203 |     const modal = inject('modalState')
204 |     return {
205 |       modal,
206 |     }
207 |   },
208 | }
209 | </script>
210 | ```
211 | 
212 | Inside your app:
213 | 
214 | ```vue
215 | <template>
216 |   <AppModalProvider>
217 |     <AppModalDisclosure>
218 |       Open Modal
219 |     </AppModalDisclosure>
220 |     <AppModal>
221 |       Modal Content
222 |     </AppModal>
223 |   </AppModalProvider>
224 | </template>
225 | 
226 | <script>
227 | import { AppModalProvider, AppModal, AppModalDisclosure } from './components'
228 | 
229 | export default {
230 |   components: {
231 |     AppModalProvider,
232 |     AppModal,
233 |     AppModalDisclosure,
234 |   },
235 | }
236 | </script>
237 | ```
238 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: ['@ant-design-vue/babel-plugin-jsx'],
 3 |   presets: [
 4 |     [
 5 |       '@babel/preset-env',
 6 |       {
 7 |         targets: {
 8 |           node: 'current',
 9 |         },
10 |       },
11 |     ],
12 |     ['@babel/preset-typescript'],
13 |   ],
14 | }
15 | 


--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
 1 | *.log
 2 | .cache
 3 | .DS_Store
 4 | src/.temp
 5 | node_modules
 6 | dist
 7 | !.env.example
 8 | .env
 9 | .env.*
10 | 


--------------------------------------------------------------------------------
/docs/LICENCE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Marco Reimann
 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.


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |     <img src="https://github.com/mrcrmn/docc/raw/master/static/logo.jpg" alt="Docc Logo" width="450">
 3 | </p>
 4 | 
 5 | A starter documentation theme for [Gridsome](https://gridsome.org/).
 6 | 
 7 | ## Installation
 8 | 
 9 | If you have the Gridsome CLI installed, simply run:
10 | 
11 | `gridsome create your-project https://github.com/mrcrmn/docc`
12 | 
13 | ## Documentation
14 | 
15 | Documentation can be found [here](https://docc-theme.netlify.com/).
16 | 


--------------------------------------------------------------------------------
/docs/content/docs/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | description: ''
 3 | sidebar: 'docs'
 4 | next: '/docs/button/'
 5 | ---
 6 | 
 7 | # Introduction
 8 | 
 9 | Ari offers accessible Vue 3 components without styling. It helps building a11y compliant components without having to overwrite default styles.
10 | 
11 | ## Installation
12 | 
13 | ```bash
14 | npm i vue-ari
15 | ```
16 | 
17 | or
18 | 
19 | ```bash
20 | yarn add vue-ari
21 | ```
22 | 
23 | ## Usage
24 | 
25 | ```html
26 | <template>
27 |   <PopoverDisclosure v-bind="popover">
28 |     Open Popover
29 |   </PopoverDisclosure>
30 |   <Popover v-bind="popover">
31 |     Popover Content
32 |   </Popover>
33 | </template>
34 | 
35 | <script>
36 |   import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'
37 | 
38 |   export default {
39 |     components: {
40 |       Popover,
41 |       PopoverDisclosure,
42 |     },
43 |     setup() {
44 |       const popover = usePopoverState()
45 |       return {
46 |         popover,
47 |       }
48 |     },
49 |   }
50 | </script>
51 | ```
52 | 


--------------------------------------------------------------------------------
/docs/gridsome.config.js:
--------------------------------------------------------------------------------
 1 | // This is where project configuration and plugin options are located.
 2 | // Learn more: https://gridsome.org/docs/config
 3 | 
 4 | // Changes here require a server restart.
 5 | // To restart press CTRL + C in terminal and run `gridsome develop`
 6 | 
 7 | module.exports = {
 8 |   siteName: 'ari',
 9 |   icon: {
10 |     favicon: './src/assets/favicon.png',
11 |     touchicon: './src/assets/favicon.png',
12 |   },
13 |   siteUrl: 'https://visualjerk.github.io',
14 |   pathPrefix: '/ari',
15 |   settings: {
16 |     web: process.env.URL_WEB || false,
17 |     twitter: process.env.URL_TWITTER || false,
18 |     github: process.env.URL_GITHUB || 'https://github.com/visualjerk/ari',
19 |     nav: {
20 |       links: [{ path: '/docs/', title: 'Docs' }],
21 |     },
22 |     sidebar: [
23 |       {
24 |         name: 'docs',
25 |         sections: [
26 |           {
27 |             title: 'Getting Started',
28 |             items: ['/docs/'],
29 |           },
30 |           {
31 |             title: 'Components',
32 |             items: ['/docs/button/', '/docs/modal/', '/docs/popover/'],
33 |           },
34 |         ],
35 |       },
36 |     ],
37 |   },
38 |   plugins: [
39 |     {
40 |       use: '@gridsome/source-filesystem',
41 |       options: {
42 |         baseDir: './content',
43 |         path: '**/*.md',
44 |         typeName: 'MarkdownPage',
45 |         remark: {
46 |           externalLinksTarget: '_blank',
47 |           externalLinksRel: ['noopener', 'noreferrer'],
48 |           plugins: ['@gridsome/remark-prismjs'],
49 |         },
50 |       },
51 |     },
52 |     {
53 |       use: '@gridsome/source-filesystem',
54 |       options: {
55 |         baseDir: '../src',
56 |         path: '**/*.md',
57 |         pathPrefix: '/docs',
58 |         index: ['README'],
59 |         typeName: 'MarkdownPage',
60 |         remark: {
61 |           externalLinksTarget: '_blank',
62 |           externalLinksRel: ['noopener', 'noreferrer'],
63 |           plugins: ['@gridsome/remark-prismjs'],
64 |         },
65 |       },
66 |     },
67 |     {
68 |       use: 'gridsome-plugin-tailwindcss',
69 |       options: {
70 |         tailwindConfig: './tailwind.config.js',
71 |         purgeConfig: {
72 |           // Prevent purging of prism classes.
73 |           whitelistPatternsChildren: [/token$/],
74 |         },
75 |       },
76 |     },
77 |     {
78 |       use: '@gridsome/plugin-sitemap',
79 |       options: {},
80 |     },
81 |   ],
82 | }
83 | 


--------------------------------------------------------------------------------
/docs/gridsome.server.js:
--------------------------------------------------------------------------------
 1 | // Server API makes it possible to hook into various parts of Gridsome
 2 | // on server-side and add custom data to the GraphQL data layer.
 3 | // Learn more: https://gridsome.org/docs/server-api/
 4 | 
 5 | // Changes here require a server restart.
 6 | // To restart press CTRL + C in terminal and run `gridsome develop`
 7 | 
 8 | module.exports = function (api) {
 9 |   api.loadSource(({ addCollection, addMetadata }) => {
10 |     // Use the Data Store API here: https://gridsome.org/docs/data-store-api/
11 |     addMetadata('settings', require('./gridsome.config').settings);
12 |   });
13 | 
14 |   api.createPages(({ createPage }) => {
15 |     // Use the Pages API here: https://gridsome.org/docs/pages-api/
16 |   });
17 | }
18 | 


--------------------------------------------------------------------------------
/docs/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command = "gridsome build"
3 |   publish = "dist/"


--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "docs",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "gridsome build",
 6 |     "dev": "gridsome develop",
 7 |     "explore": "gridsome explore",
 8 |     "predeploy": "npm run build",
 9 |     "deploy": "gh-pages -d dist"
10 |   },
11 |   "dependencies": {
12 |     "gridsome": "^0.7.0"
13 |   },
14 |   "devDependencies": {
15 |     "@gridsome/plugin-google-analytics": "^0.1.0",
16 |     "@gridsome/plugin-sitemap": "^0.2.3",
17 |     "@gridsome/remark-prismjs": "^0.3.0",
18 |     "@gridsome/source-filesystem": "^0.6.2",
19 |     "@gridsome/transformer-remark": "^0.5.0",
20 |     "fuse.js": "^3.4.6",
21 |     "gh-pages": "^3.1.0",
22 |     "gridsome-plugin-tailwindcss": "^2.2.36",
23 |     "node-sass": "^4.13.1",
24 |     "prism-themes": "^1.3.0",
25 |     "sass-loader": "^8.0.2",
26 |     "tailwindcss": "^1.2.0",
27 |     "vue-feather-icons": "^5.0.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/docs/src/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/visualjerk/ari/c0d5d2c720cd25250b892ff1217a8be98d7e4b09/docs/src/assets/favicon.png


--------------------------------------------------------------------------------
/docs/src/components/LayoutHeader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="py-2 border-t-2 border-ui-primary">
  3 |     <div class="container">
  4 |       <div class="flex items-center justify-between -mx-2 sm:-mx-4">
  5 |         <div class="flex flex-col items-center px-2 mr-auto sm:px-4 sm:flex-row">
  6 |           <g-link to="/" class="flex items-center text-ui-primary" title="Home">
  7 |             <Logo :width="40" />
  8 |             <span
  9 |               class="hidden ml-2 text-2xl font-black tracking-tight sm:block"
 10 |             >{{ meta.siteName }}</span>
 11 |           </g-link>
 12 | 
 13 |           <div v-if="settings.nav.links.length > 0" class="hidden ml-2 mr-5 sm:block sm:ml-8">
 14 |             <g-link
 15 |               v-for="link in settings.nav.links"
 16 |               :key="link.path"
 17 |               :to="link.path"
 18 |               class="block p-1 font-medium nav-link text-ui-typo hover:text-ui-primary"
 19 |             >{{ link.title }}</g-link>
 20 |           </div>
 21 |         </div>
 22 | 
 23 |         <div class="w-full px-2 sm:px-4 max-w-screen-xs">
 24 |           <ClientOnly>
 25 |             <Search />
 26 |           </ClientOnly>
 27 |         </div>
 28 | 
 29 |         <div class="flex items-center justify-end px-2 sm:px-4">
 30 |           <a
 31 |             v-if="settings.web"
 32 |             :href="settings.web"
 33 |             class="hidden ml-3 sm:block"
 34 |             target="_blank"
 35 |             rel="noopener noreferrer"
 36 |             title="Website"
 37 |             name="Website"
 38 |           >
 39 |             <GlobeIcon size="1.5x" />
 40 |           </a>
 41 | 
 42 |           <a
 43 |             v-if="settings.twitter"
 44 |             :href="settings.twitter"
 45 |             class="hidden ml-3 sm:block"
 46 |             target="_blank"
 47 |             rel="noopener noreferrer"
 48 |             title="Twitter"
 49 |             name="Twitter"
 50 |           >
 51 |             <TwitterIcon size="1.5x" />
 52 |           </a>
 53 | 
 54 |           <a
 55 |             v-if="settings.github"
 56 |             :href="settings.github"
 57 |             class="sm:ml-3"
 58 |             target="_blank"
 59 |             rel="noopener noreferrer"
 60 |             title="Github"
 61 |             name="Github"
 62 |           >
 63 |             <GithubIcon size="1.5x" />
 64 |           </a>
 65 | 
 66 |           <ToggleDarkMode class="ml-2 sm:ml-8">
 67 |             <template #default="{ dark }" >
 68 |               <MoonIcon v-if="dark" size="1.5x" />
 69 |               <SunIcon v-else size="1.5x" />
 70 |             </template>
 71 |           </ToggleDarkMode>
 72 |         </div>
 73 |       </div>
 74 |     </div>
 75 |   </div>
 76 | </template>
 77 | 
 78 | <static-query>
 79 | query {
 80 |   metadata {
 81 |     siteName
 82 |     settings {
 83 |       web
 84 |       github
 85 |       twitter
 86 |       nav {
 87 |         links {
 88 |           path
 89 |           title
 90 |         }
 91 |       }
 92 |     }
 93 |   }
 94 | }
 95 | </static-query>
 96 | 
 97 | <script>
 98 | import ToggleDarkMode from '@/components/ToggleDarkMode'
 99 | import Logo from '@/components/Logo'
100 | import {
101 |   SunIcon,
102 |   MoonIcon,
103 |   GlobeIcon,
104 |   GithubIcon,
105 |   TwitterIcon,
106 | } from 'vue-feather-icons'
107 | 
108 | const Search = () =>
109 |   import(
110 |     /* webpackChunkName: "search" */ '@/components/Search'
111 |   ).catch((error) => console.warn(error))
112 | 
113 | export default {
114 |   components: {
115 |     Logo,
116 |     Search,
117 |     ToggleDarkMode,
118 |     SunIcon,
119 |     MoonIcon,
120 |     GlobeIcon,
121 |     GithubIcon,
122 |     TwitterIcon,
123 |   },
124 | 
125 |   computed: {
126 |     meta() {
127 |       return this.$static.metadata
128 |     },
129 |     settings() {
130 |       return this.meta.settings
131 |     },
132 |   },
133 | }
134 | </script>
135 | 
136 | <style lang="scss">
137 | header {
138 |   svg:not(.feather-search) {
139 |     &:hover {
140 |       @apply text-ui-primary;
141 |     }
142 |   }
143 | }
144 | 
145 | .nav-link {
146 |   &.active {
147 |     @apply text-ui-primary font-bold border-ui-primary;
148 |   }
149 | }
150 | </style>
151 | 


--------------------------------------------------------------------------------
/docs/src/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     :width="getWidth"
 4 |     :height="getHeight"
 5 |     viewBox="0 0 120 120"
 6 |     fill="none"
 7 |     xmlns="http://www.w3.org/2000/svg"
 8 |   >
 9 |     <path
10 |       fill-rule="evenodd"
11 |       clip-rule="evenodd"
12 |       d="M104 104V60C104 35.6995 84.3005 16 60 16C35.6995 16 16 35.6995 16 60C16 84.3005 35.6995 104 60 104H104ZM120 110C120 115.523 115.523 120 110 120H60C26.8629 120 0 93.1371 0 60C0 26.8629 26.8629 0 60 0C93.1371 0 120 26.8629 120 60V110Z"
13 |       fill="currentColor"
14 |     />
15 |     <path
16 |       d="M66.0622 83.5C63.3679 88.1667 56.6321 88.1667 53.9378 83.5L36.6173 53.5C33.923 48.8333 37.2909 43 42.6795 43L77.3205 43C82.7091 43 86.077 48.8333 83.3827 53.5L66.0622 83.5Z"
17 |       fill="#F23E74"
18 |     />
19 |   </svg>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   props: {
25 |     width: {
26 |       type: Number,
27 |       default: 40,
28 |     },
29 |   },
30 | 
31 |   computed: {
32 |     getWidth() {
33 |       return this.width
34 |     },
35 | 
36 |     getHeight() {
37 |       return Math.ceil((this.getWidth / 120) * 120)
38 |     },
39 |   },
40 | }
41 | </script>
42 | 
43 | <style scoped>
44 | svg {
45 |   @apply text-ui-primary;
46 | }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/docs/src/components/NextPrevLinks.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="flex flex-col sm:flex-row justify-between items-center">
 4 |       <g-link
 5 |         v-if="prev"
 6 |         :to="prev.path"
 7 |         class="mb-4 sm:mb-0 flex items-center mr-auto text-ui-primary font-bold px-4 py-2 border border-ui-border rounded-lg hover:bg-ui-primary hover:text-white transition-colors"
 8 |       >
 9 |         <ArrowLeftIcon class="mr-2" size="1x" />
10 |         {{ prev.title }}
11 |       </g-link>
12 | 
13 |       <g-link
14 |         v-if="next"
15 |         :to="next.path"
16 |         class="flex items-center ml-auto text-ui-primary font-bold px-4 py-2 border border-ui-border rounded-lg hover:bg-ui-primary hover:text-white transition-colors"
17 |       >
18 |         {{ next.title }}
19 |         <ArrowRightIcon class="ml-2" size="1x" />
20 |       </g-link>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 | import { ArrowLeftIcon, ArrowRightIcon } from 'vue-feather-icons';
27 | 
28 | export default {
29 |   components: {
30 |     ArrowLeftIcon,
31 |     ArrowRightIcon
32 |   },
33 | 
34 |   computed: {
35 |     page() {
36 |       return this.$page.markdownPage;
37 |     },
38 |     pages() {
39 |       return this.$page.allMarkdownPage.edges.map(edge => edge.node);
40 |     },
41 |     next() {
42 |       if (this.pages && ! this.page.next) {
43 |         return false;
44 |       }
45 | 
46 |       return this.pages.find(page => page.path === this.page.next);
47 |     },
48 |     prev() {
49 |       if (this.pages && ! this.page.prev) {
50 |         return false;
51 |       }
52 | 
53 |       return this.pages.find(page => page.path === this.page.prev);
54 |     }
55 |   }
56 | };
57 | </script>
58 | 


--------------------------------------------------------------------------------
/docs/src/components/OnThisPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="mt-8 sm:pl-4 md:pl-6 md:pt-12 lg:pl-8 sm:pb-16 sm:border-l border-ui-border md:mt-0">
  3 |     <h3 class="pt-0 mt-0 text-sm tracking-wide uppercase border-none">On this page</h3>
  4 |     <div>
  5 |       <ul>
  6 |         <li
  7 |           v-for="(heading, index) in headings"
  8 |           :key="`${page.path}${heading.anchor}`"
  9 |           :class="{
 10 |             'border-t border-dashed border-ui-border pt-2 mt-2': index > 0 && heading.depth === 2,
 11 |             'font-semibold': heading.depth === 2,
 12 |             [`depth-${heading.depth}`]: true,
 13 |           }"
 14 |         >
 15 |           <g-link
 16 |             :to="`${page.path}${heading.anchor}`"
 17 |             class="relative flex items-center py-1 text-sm transition transform hover:translate-x-1"
 18 |             :class="{
 19 |               'pl-2': heading.depth === 3,
 20 |               'pl-3': heading.depth === 4,
 21 |               'pl-4': heading.depth === 5,
 22 |               'pl-5': heading.depth === 6,
 23 |               'font-bold text-ui-primary': activeAnchor === heading.anchor
 24 |             }"
 25 |           >
 26 |             <span
 27 |               class="absolute w-2 h-2 -ml-3 rounded-full opacity-0 bg-ui-primary transition transform scale-0 origin-center"
 28 |               :class="{
 29 |                 'opacity-100 scale-100': activeAnchor === heading.anchor
 30 |               }"
 31 |             ></span>
 32 |             {{ heading.value }}
 33 |           </g-link>
 34 |         </li>
 35 |       </ul>
 36 |     </div>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | export default {
 42 |   data() {
 43 |     return {
 44 |       activeAnchor: '',
 45 |       observer: null
 46 |     }
 47 |   },
 48 | 
 49 |   computed: {
 50 |     page() {
 51 |       return this.$page.markdownPage;
 52 |     },
 53 |     headings() {
 54 |       return this.page.headings.filter(h => h.depth > 1);
 55 |     }
 56 |   },
 57 | 
 58 |   watch: {
 59 |     $route: function() {
 60 |       if (process.isClient && window.location.hash) {
 61 |         this.activeAnchor = window.location.hash;
 62 |       }
 63 | 
 64 |       // Clear the current observer.
 65 |       this.observer.disconnect();
 66 | 
 67 |       // And create another one for the next page.
 68 |       this.$nextTick(this.initObserver);
 69 |     }
 70 |   },
 71 | 
 72 |   mounted() {
 73 |     if (process.isClient) {
 74 |       if (window.location.hash) {
 75 |         this.activeAnchor = window.location.hash;
 76 |       }
 77 |       this.$nextTick(this.initObserver);
 78 |     }
 79 |   },
 80 | 
 81 |   methods: {
 82 |     observerCallback(entries, observer) {
 83 |       // This early return fixes the jumping
 84 |       // of the bubble active state when we click on a link.
 85 |       // There should be only one intersecting element anyways.
 86 |       if (entries.length > 1) {
 87 |         return;
 88 |       }
 89 | 
 90 |       const id = entries[0].target.id;
 91 | 
 92 |       // We want to give the link of the intersecting
 93 |       // headline active and add the hash to the url.
 94 |       if (id) {
 95 |         this.activeAnchor = '#' + id;
 96 | 
 97 |         if (history.replaceState) {
 98 |           history.replaceState(null, null, '#' + id);
 99 |         }
100 |       }
101 |     },
102 | 
103 |     initObserver() {
104 |       this.observer = new IntersectionObserver(this.observerCallback, {
105 |         // This rootMargin should allow intersections at the top of the page.
106 |         rootMargin: '0px 0px 99999px',
107 |         threshold: 1
108 |       });
109 | 
110 |       const elements = document.querySelectorAll(
111 |         '.content h2, .content h3, .content h4, .content h5, .content h6'
112 |       );
113 | 
114 |       for (let i = 0; i < elements.length; i++) {
115 |         this.observer.observe(elements[i]);
116 |       }
117 |     },
118 |   }
119 | };
120 | </script>
121 | 


--------------------------------------------------------------------------------
/docs/src/components/Search.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="relative"
  4 |     @keydown.down="increment"
  5 |     @keydown.up="decrement"
  6 |     @keydown.enter="go"
  7 |   >
  8 |     <label class="relative block">
  9 |       <span class="sr-only">Search Documentation</span>
 10 |       <div class="absolute inset-y-0 left-0 flex items-center justify-center px-3 py-2 opacity-50">
 11 |         <SearchIcon size="1.25x" class="text-ui-typo" />
 12 |       </div>
 13 |       <input
 14 |         ref="input"
 15 |         type="search"
 16 |         :value="query"
 17 |         class="block w-full py-2 pl-10 pr-4 border-2 rounded-lg bg-ui-sidebar border-ui-sidebar focus:bg-ui-background"
 18 |         :class="{'rounded-b-none': showResult,}"
 19 |         placeholder="Search Documentation..."
 20 |         @focus="focused = true"
 21 |         @blur="focused = false"
 22 |         @input="focusIndex = -1; query = $event.target.value"
 23 |         @change="query = $event.target.value"
 24 |       />
 25 |     </label>
 26 |     <div 
 27 |       v-if="showResult"
 28 |       class="fixed inset-x-0 z-50 overflow-y-auto border-2 border-t-0 rounded-lg rounded-t-none shadow-lg results bg-ui-background bottom:0 sm:bottom-auto sm:absolute border-ui-sidebar"
 29 |       style="max-height: calc(100vh - 120px)"
 30 |     >
 31 |       <ul class="px-4 py-2 m-0">
 32 |         <li v-if="results.length === 0" class="px-2">
 33 |           No results for <span class="font-bold">{{ query }}</span>.
 34 |         </li>
 35 | 
 36 |         <li
 37 |           v-for="(result, index) in results"
 38 |           v-else
 39 |           :key="result.path + result.anchor"
 40 |           class="border-ui-sidebar"
 41 |           :class="{
 42 |             'border-b': index + 1 !== results.length
 43 |           }"
 44 |           @mouseenter="focusIndex = index"
 45 |           @mousedown="go"
 46 |         >
 47 |           <g-link
 48 |             :to="result.path + result.anchor"
 49 |             class="block p-2 -mx-2 text-base font-bold rounded-lg"
 50 |             :class="{
 51 |               'bg-ui-sidebar text-ui-primary': focusIndex === index,
 52 |             }"
 53 |           >
 54 | 
 55 |             <span v-if="result.value === result.title">
 56 |               {{ result.value }}
 57 |             </span>
 58 | 
 59 |             <span v-else class="flex items-center">
 60 |               {{ result.title }}
 61 |               <ChevronRightIcon size="1x" class="mx-1" />
 62 |               <span class="font-normal opacity-75">{{ result.value }}</span>
 63 |             </span>
 64 | 
 65 |           </g-link>
 66 |         </li>
 67 |       </ul>
 68 |     </div>
 69 |   </div>
 70 | </template>
 71 | 
 72 | <static-query>
 73 | query Search {
 74 |    allMarkdownPage{
 75 |     edges {
 76 |       node {
 77 |         id
 78 |         path
 79 |         title
 80 |         headings {
 81 |         	depth
 82 |           value
 83 |           anchor
 84 |       	}
 85 |       }
 86 |     }
 87 |   }
 88 | }
 89 | </static-query>
 90 | 
 91 | <script>
 92 | import Fuse from 'fuse.js';
 93 | import { ChevronRightIcon, SearchIcon } from 'vue-feather-icons';
 94 | 
 95 | export default {
 96 |   components: {
 97 |     ChevronRightIcon,
 98 |     SearchIcon
 99 |   },
100 | 
101 |   data() {
102 |     return {
103 |       query: '',
104 |       focusIndex: -1,
105 |       focused: false
106 |     };
107 |   },
108 |   computed: {
109 |     results() {
110 |       const fuse = new Fuse(this.headings, {
111 |         keys: ['value'],
112 |         threshold: .25
113 |       });
114 | 
115 |       return fuse.search(this.query).slice(0, 15);
116 |     },
117 |     headings() {
118 |       let result = [];
119 |       const allPages = this.$static.allMarkdownPage.edges.map(edge => edge.node);
120 | 
121 |       // Create the array of all headings of all pages.
122 |       allPages.forEach(page => {
123 |         page.headings.forEach(heading => {
124 |           result.push({
125 |             ...heading,
126 |             path: page.path,
127 |             title: page.title
128 |           });
129 |         });
130 |       });
131 | 
132 |       return result;
133 |     },
134 |     showResult() {
135 |       // Show results, if the input is focused and the query is not empty.
136 |       return this.focused && this.query.length > 0;
137 |     }
138 |   },
139 |   methods: {
140 |     increment() {
141 |       if (this.focusIndex < this.results.length - 1) {
142 |         this.focusIndex++;
143 |       }
144 |     },
145 |     decrement() {
146 |       if (this.focusIndex >= 0) {
147 |         this.focusIndex--;
148 |       }
149 |     },
150 |     go() {
151 |       // Do nothing if we don't have results.
152 |       if (this.results.length === 0) {
153 |         return;
154 |       }
155 | 
156 |       let result;
157 | 
158 |       // If we don't have focus on a result, just navigate to the first one.
159 |       if (this.focusIndex === -1) {
160 |         result = this.results[0];
161 |       } else {
162 |         result = this.results[this.focusIndex];
163 |       }
164 | 
165 |       this.$router.push(
166 |         result.path + result.anchor
167 |       );
168 | 
169 |       // Unfocus the input and reset the query.
170 |       this.$refs.input.blur();
171 |       this.query = '';
172 |     }
173 |   }
174 | 
175 | };
176 | </script>
177 | 
178 | <style>
179 | </style>
180 | 


--------------------------------------------------------------------------------
/docs/src/components/Sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     v-if="showSidebar"
 4 |     ref="sidebar"
 5 |     class="px-4 pt-8 lg:pt-12"
 6 |   >
 7 |     <div
 8 |       v-for="(section, index) in sidebar.sections"
 9 |       :key="section.title"
10 |       class="pb-4 mb-4 border-ui-border"
11 |       :class="{ 'border-b': index < sidebar.sections.length -1 }"
12 |     >
13 |       <h3 class="pt-0 mt-0 mb-1 text-sm tracking-tight uppercase border-none">
14 |         {{ section.title }}
15 |       </h3>
16 | 
17 |       <ul class="max-w-full pl-2 mb-0">
18 |         <li
19 |           v-for="page in findPages(section.items)"
20 |           :id="page.path"
21 |           :key="page.path"
22 |           :class="getClassesForAnchor(page)"
23 |           @mousedown="$emit('navigate')"
24 |         >
25 |           <g-link
26 |             :to="`${page.path}`"
27 |             class="flex items-center py-1 font-semibold"
28 |           >
29 |            <span
30 |               class="absolute w-2 h-2 -ml-3 rounded-full opacity-0 bg-ui-primary transition transform scale-0 origin-center"
31 |               :class="{
32 |                 'opacity-100 scale-100': currentPage.path === page.path
33 |               }"
34 |             ></span>
35 |             {{ page.title }}
36 |           </g-link>
37 |         </li>
38 |       </ul>
39 |     </div>
40 |   </div>
41 | </template>
42 | 
43 | <static-query>
44 | query Sidebar {
45 |   metadata {
46 |     settings {
47 |       sidebar {
48 |         name
49 |         sections {
50 |           title
51 |           items
52 |         }
53 |       }
54 |     }
55 |   }
56 | }
57 | </static-query>
58 | 
59 | <script>
60 | export default {
61 |   data() {
62 |     return {
63 |       expanded: []
64 |     };
65 |   },
66 |   computed: {
67 |     pages() {
68 |       return this.$page.allMarkdownPage.edges.map(edge => edge.node);
69 |     },
70 |     sidebar() {
71 |       return this.$static.metadata.settings.sidebar.find(
72 |         sidebar => sidebar.name === this.$page.markdownPage.sidebar
73 |       );
74 |     },
75 |     showSidebar() {
76 |       return this.$page.markdownPage.sidebar
77 |         && this.sidebar;
78 |     },
79 |     currentPage() {
80 |       return this.$page.markdownPage;
81 |     }
82 |   },
83 |   methods: {
84 |     getClassesForAnchor({ path }) {
85 |       return {
86 |         "text-ui-primary": this.currentPage.path === path,
87 |         "transition transform hover:translate-x-1 hover:text-ui-primary": ! this.currentPage.path === path
88 |       };
89 |     },
90 |     findPages(links) {
91 |       return links.map(link => this.pages.find(page => page.path === link));
92 |     }
93 |   },  
94 | };
95 | </script>
96 | 


--------------------------------------------------------------------------------
/docs/src/components/ToggleDarkMode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button aria-label="Toggle Darkmode" title="Toggle Darkmode" @click="handleClick">
 3 |     <slot :dark="isDarkMode" />
 4 |   </button>
 5 | </template>
 6 | 
 7 | <script>
 8 | export const LIGHTS_OUT = 'lights-out';
 9 | 
10 | export default {
11 |   data() {
12 |     return {
13 |       isDarkMode: false
14 |     }
15 |   },
16 | 
17 |   mounted() {
18 |     if (this.hasInStorage()) {
19 |       this.toggleDarkMode(
20 |         this.getFromStorage()
21 |       );
22 |     } else if (process.isClient && window.matchMedia) {
23 |       this.toggleDarkMode(
24 |         this.detectPrefered()
25 |       );
26 |     }
27 |   },
28 | 
29 |   methods: {
30 |     handleClick() {
31 |       const hasDarkMode = document.documentElement.hasAttribute(LIGHTS_OUT);
32 | 
33 |       // Toggle dark mode on click.
34 |       return this.toggleDarkMode(! hasDarkMode);
35 |     },
36 | 
37 |     toggleDarkMode(shouldBeDark) {
38 |       document.documentElement.toggleAttribute(LIGHTS_OUT, shouldBeDark);
39 | 
40 |       this.isDarkMode = shouldBeDark;
41 | 
42 |       this.writeToStorage(shouldBeDark);
43 | 
44 |       return shouldBeDark;
45 |     },
46 | 
47 |     detectPrefered() {
48 |       return window.matchMedia('(prefers-color-scheme: dark)').matches;
49 |     },
50 | 
51 |     hasInStorage() {
52 |       const check = localStorage.getItem(LIGHTS_OUT);
53 | 
54 |       return check !== null;
55 |     },
56 | 
57 |     writeToStorage(prefersDark) {
58 |       localStorage.setItem(LIGHTS_OUT, prefersDark ? 'true' : 'false');
59 |     },
60 | 
61 |     getFromStorage() {
62 |       return localStorage.getItem(LIGHTS_OUT) === 'true' ? true : false;
63 |     }
64 |   }
65 | };
66 | </script>
67 | 
68 | <style>
69 | </style>


--------------------------------------------------------------------------------
/docs/src/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/visualjerk/ari/c0d5d2c720cd25250b892ff1217a8be98d7e4b09/docs/src/favicon.png


--------------------------------------------------------------------------------
/docs/src/layouts/Default.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="font-sans antialiased text-ui-typo bg-ui-background">
  3 |     <div class="flex flex-col justify-start min-h-screen">
  4 |       <header
  5 |         ref="header"
  6 |         class="sticky top-0 z-10 w-full border-b bg-ui-background border-ui-border"
  7 |         @resize="setHeaderHeight"
  8 |       >
  9 |         <LayoutHeader />
 10 |       </header>
 11 | 
 12 |       <main class="container relative flex flex-wrap justify-start flex-1 w-full bg-ui-background">
 13 |         <aside
 14 |           v-if="hasSidebar"
 15 |           class="sidebar"
 16 |           :class="{ 'open': sidebarOpen }"
 17 |           :style="sidebarStyle"
 18 |         >
 19 |           <div class="w-full pb-16 bg-ui-background">
 20 |             <Sidebar @navigate="sidebarOpen = false" />
 21 |           </div>
 22 |         </aside>
 23 | 
 24 |         <div class="w-full pb-24" :class="{'pl-0 lg:pl-12 lg:w-3/4': hasSidebar}">
 25 |           <slot />
 26 |         </div>
 27 |       </main>
 28 |     </div>
 29 | 
 30 |     <div v-if="hasSidebar" class="fixed bottom-0 right-0 z-50 p-8 lg:hidden">
 31 |       <button
 32 |         class="p-3 text-white rounded-full shadow-lg bg-ui-primary hover:text-white"
 33 |         @click="sidebarOpen = ! sidebarOpen"
 34 |       >
 35 |         <XIcon v-if="sidebarOpen" />
 36 |         <MenuIcon v-else />
 37 |       </button>
 38 |     </div>
 39 |   </div>
 40 | </template>
 41 | 
 42 | <static-query>
 43 | query {
 44 |   metadata {
 45 |     siteName
 46 |   }
 47 | }
 48 | </static-query>
 49 | 
 50 | <script>
 51 | import Sidebar from '@/components/Sidebar'
 52 | import LayoutHeader from '@/components/LayoutHeader'
 53 | import { MenuIcon, XIcon } from 'vue-feather-icons'
 54 | 
 55 | export default {
 56 |   components: {
 57 |     Sidebar,
 58 |     LayoutHeader,
 59 |     MenuIcon,
 60 |     XIcon,
 61 |   },
 62 |   data() {
 63 |     return {
 64 |       headerHeight: 0,
 65 |       sidebarOpen: false,
 66 |     }
 67 |   },
 68 |   computed: {
 69 |     sidebarStyle() {
 70 |       return {
 71 |         top: this.headerHeight + 'px',
 72 |         height: `calc(100vh - ${this.headerHeight}px)`,
 73 |       }
 74 |     },
 75 |     hasSidebar() {
 76 |       return this.$page && this.headerHeight > 0
 77 |     },
 78 |   },
 79 |   watch: {
 80 |     sidebarOpen: function (isOpen) {
 81 |       document.body.classList.toggle('overflow-hidden', isOpen)
 82 |     },
 83 |   },
 84 |   mounted() {
 85 |     this.setHeaderHeight()
 86 |   },
 87 |   methods: {
 88 |     setHeaderHeight() {
 89 |       this.$nextTick(() => {
 90 |         this.headerHeight = this.$refs.header.offsetHeight
 91 |       })
 92 |     },
 93 |   },
 94 |   metaInfo() {
 95 |     return {
 96 |       meta: [
 97 |         {
 98 |           key: 'og:type',
 99 |           name: 'og:type',
100 |           content: 'website',
101 |         },
102 |         {
103 |           key: 'twitter:card',
104 |           name: 'twitter:card',
105 |           content: 'summary_large_image',
106 |         },
107 |         {
108 |           key: 'og:image',
109 |           name: 'og:image',
110 |           content: process.env.SITE_URL + '/logo.jpg',
111 |         },
112 |         {
113 |           key: 'twitter:image',
114 |           name: 'twitter:image',
115 |           content: process.env.SITE_URL + '/logo.jpg',
116 |         },
117 |       ],
118 |     }
119 |   },
120 | }
121 | </script>
122 | 
123 | <style lang="scss">
124 | :root {
125 |   --color-ui-background: theme('colors.white');
126 |   --color-ui-typo: theme('colors.gray.800');
127 |   --color-ui-sidebar: theme('colors.gray.200');
128 |   --color-ui-border: theme('colors.gray.300');
129 |   --color-ui-primary: theme('colors.blue.500');
130 |   --color-ui-highlight: theme('colors.pink.500');
131 | }
132 | 
133 | html[lights-out] {
134 |   --color-ui-background: theme('colors.gray.900');
135 |   --color-ui-typo: theme('colors.gray.100');
136 |   --color-ui-sidebar: theme('colors.gray.800');
137 |   --color-ui-border: theme('colors.gray.800');
138 |   --color-ui-primary: theme('colors.blue.400');
139 | 
140 |   pre[class*='language-'],
141 |   code[class*='language-'] {
142 |     @apply bg-ui-border;
143 |   }
144 | }
145 | 
146 | * {
147 |   transition-property: color, background-color, border-color;
148 |   transition-duration: 200ms;
149 |   transition-timing-function: ease-in-out;
150 | }
151 | 
152 | h1,
153 | h2,
154 | h3,
155 | h4 {
156 |   @apply leading-snug font-black mb-4 text-ui-typo;
157 | 
158 |   &:hover {
159 |     a::before {
160 |       @apply opacity-100;
161 |     }
162 |   }
163 | 
164 |   a {
165 |     &::before {
166 |       content: '#';
167 |       margin-left: -1em;
168 |       padding-right: 1em;
169 |       @apply text-ui-primary absolute opacity-0 float-left;
170 |     }
171 |   }
172 | }
173 | 
174 | h1 {
175 |   @apply text-4xl;
176 | }
177 | 
178 | h2 {
179 |   @apply text-2xl;
180 | }
181 | 
182 | h3 {
183 |   @apply text-xl;
184 | }
185 | 
186 | h4 {
187 |   @apply text-lg;
188 | }
189 | 
190 | a:not(.active):not(.text-ui-primary):not(.text-white) {
191 |   @apply text-ui-typo;
192 | }
193 | 
194 | p,
195 | ol,
196 | ul,
197 | pre,
198 | strong,
199 | blockquote {
200 |   @apply mb-4 text-base text-ui-typo;
201 | }
202 | 
203 | .content {
204 |   a {
205 |     @apply text-ui-primary underline;
206 |   }
207 | 
208 |   h1,
209 |   h2,
210 |   h3,
211 |   h4,
212 |   h5,
213 |   h6 {
214 |     @apply -mt-12 pt-20;
215 |   }
216 | 
217 |   h2 + h3,
218 |   h2 + h2,
219 |   h3 + h3 {
220 |     @apply border-none -mt-20;
221 |   }
222 | 
223 |   h2,
224 |   h3 {
225 |     @apply border-b border-ui-border pb-1 mb-3;
226 |   }
227 | 
228 |   ul {
229 |     @apply list-disc;
230 | 
231 |     ul {
232 |       list-style: circle;
233 |     }
234 |   }
235 | 
236 |   ol {
237 |     @apply list-decimal;
238 |   }
239 | 
240 |   ol,
241 |   ul {
242 |     @apply pl-5 py-1;
243 | 
244 |     li {
245 |       @apply mb-2;
246 | 
247 |       p {
248 |         @apply mb-0;
249 |       }
250 | 
251 |       &:last-child {
252 |         @apply mb-0;
253 |       }
254 |     }
255 |   }
256 | }
257 | 
258 | blockquote {
259 |   @apply border-l-4 border-ui-border py-2 pl-4;
260 | 
261 |   p:last-child {
262 |     @apply mb-0;
263 |   }
264 | }
265 | 
266 | code {
267 |   @apply px-1 py-1 text-ui-typo bg-ui-sidebar font-mono border-b border-r border-ui-border text-sm rounded;
268 | }
269 | 
270 | pre[class*='language-'] {
271 |   @apply max-w-full overflow-x-auto rounded;
272 | 
273 |   & + p {
274 |     @apply mt-4;
275 |   }
276 | 
277 |   & > code[class*='language-'] {
278 |     @apply border-none leading-relaxed;
279 |   }
280 | }
281 | 
282 | header {
283 |   background-color: rgba(255, 255, 255, 0.9);
284 |   backdrop-filter: blur(4px);
285 | }
286 | 
287 | table {
288 |   @apply text-left mb-6;
289 | 
290 |   td,
291 |   th {
292 |     @apply py-3 px-4;
293 |     &:first-child {
294 |       @apply pl-0;
295 |     }
296 |     &:last-child {
297 |       @apply pr-0;
298 |     }
299 |   }
300 | 
301 |   tr {
302 |     @apply border-b border-ui-border;
303 |     &:last-child {
304 |       @apply border-b-0;
305 |     }
306 |   }
307 | }
308 | 
309 | .sidebar {
310 |   @apply fixed bg-ui-background px-4 inset-x-0 bottom-0 w-full border-r border-ui-border overflow-y-auto transition-all z-40;
311 |   transform: translateX(-100%);
312 | 
313 |   &.open {
314 |     transform: translateX(0);
315 |   }
316 | 
317 |   @screen lg {
318 |     @apply w-1/4 px-0 bg-transparent top-0 bottom-auto inset-x-auto sticky z-0;
319 |     transform: translateX(0);
320 |   }
321 | }
322 | </style>
323 | 


--------------------------------------------------------------------------------
/docs/src/main.js:
--------------------------------------------------------------------------------
 1 | // This is the main.js file. Import global CSS and scripts here.
 2 | // The Client API can be used here. Learn more: gridsome.org/docs/client-api
 3 | import DefaultLayout from '~/layouts/Default.vue'
 4 | 
 5 | export default function (Vue, { router, head, isClient }) {
 6 |   // Set default layout as a global component
 7 |   Vue.component('Layout', DefaultLayout)
 8 | 
 9 |   router.beforeEach((to, _from, next) => {
10 |     head.meta.push({
11 |       key: 'og:url',
12 |       name: 'og:url',
13 |       content: process.env.GRIDSOME_BASE_PATH + to.path,
14 |     })
15 |     next()
16 |   })
17 | }
18 | 


--------------------------------------------------------------------------------
/docs/src/pages/404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <div class="pt-8 md:pt-16">
 4 |       <h1 class="text-center font-bold text-4xl text-ui-primary">Oh no! There is nothing here.</h1>
 5 |     </div>
 6 |     <div class="mb-10 flex items-center justify-center">
 7 |       <g-link to="/" class="font-bold border-b border-ui-primary text-xl">Go back</g-link>.
 8 |     </div>
 9 |   </Layout>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   metaInfo: {
15 |     title: '404 - Nothing here'
16 |   }
17 | }
18 | </script>


--------------------------------------------------------------------------------
/docs/src/pages/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <div class="pt-8 md:pt-16">
 4 |       <div class="flex flex-col items-center">
 5 |         <div class="flex flex-col items-center mb-2 text-ui-primary">
 6 |           <Logo :width="80" />
 7 |           <h2 class="text-3xl text-6xl font-black tracking-tight">ari</h2>
 8 |         </div>
 9 |         <h1 class="text-4xl text-center lg:text-5xl">Accessible unstyled Vue components</h1>
10 |         <p
11 |           class="text-xl font-medium text-center"
12 |         >Creating a11y compliant Vue components has never been easier.</p>
13 | 
14 |         <div class="py-4">
15 |           <code class="block px-4 py-1 select-all bg-ui-border text-ui-typo">yarn add vue-ari</code>
16 |         </div>
17 | 
18 |         <div class="flex justify-center mt-8">
19 |           <g-link
20 |             to="/docs/"
21 |             class="flex items-center px-6 py-4 ml-auto text-2xl font-bold leading-none text-white border rounded-lg shadow-lg bg-ui-primary border-ui-primary transition-all duration-200 ease-out transform hover:shadow-xl hover:-translate-y-1"
22 |           >
23 |             Get started
24 |             <ArrowRightCircleIcon class="ml-4" size="1x" />
25 |           </g-link>
26 |         </div>
27 | 
28 |         <p class="mt-8 text-center">Open Source. MIT License.</p>
29 |       </div>
30 |     </div>
31 |   </Layout>
32 | </template>
33 | 
34 | <script>
35 | import Logo from '@/components/Logo'
36 | import { ArrowRightCircleIcon } from 'vue-feather-icons'
37 | 
38 | export default {
39 |   components: {
40 |     Logo,
41 |     ArrowRightCircleIcon,
42 |   },
43 | 
44 |   metaInfo() {
45 |     const title = 'Accessible unstyled Vue components'
46 |     const description =
47 |       'Creating a11y compliant Vue components has never been easier.'
48 | 
49 |     return {
50 |       title: title,
51 |       meta: [
52 |         {
53 |           name: 'description',
54 |           content: description,
55 |         },
56 |         {
57 |           key: 'og:title',
58 |           name: 'og:title',
59 |           content: title,
60 |         },
61 |         {
62 |           key: 'twitter:title',
63 |           name: 'twitter:title',
64 |           content: title,
65 |         },
66 |         {
67 |           key: 'og:description',
68 |           name: 'og:description',
69 |           content: description,
70 |         },
71 |         {
72 |           key: 'twitter:description',
73 |           name: 'twitter:description',
74 |           content: description,
75 |         },
76 |       ],
77 |     }
78 |   },
79 | }
80 | </script>
81 | 
82 | <style>
83 | .home-links a {
84 |   margin-right: 1rem;
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/docs/src/templates/MarkdownPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <div class="flex flex-wrap items-start justify-start">
 4 |       <div class="order-2 w-full md:w-1/3 sm:pl-4 md:pl-6 lg:pl-8 sticky" style="top: 4rem">
 5 |         <OnThisPage />
 6 |       </div>
 7 | 
 8 |       <div class="order-1 w-full md:w-2/3">
 9 |         <div class="content" v-html="$page.markdownPage.content" />
10 | 
11 |         <div class="mt-8 pt-8 lg:mt-12 lg:pt-12 border-t border-ui-border">
12 |           <NextPrevLinks />
13 |         </div>
14 |       </div>
15 |     </div>
16 |   </Layout>
17 | </template>
18 | 
19 | <page-query>
20 | query ($id: ID!) {
21 |   markdownPage(id: $id) {
22 |     id
23 |     title
24 |     description
25 |     path
26 |     timeToRead
27 |     content
28 |     sidebar
29 |     next
30 |     prev
31 |     headings {
32 |       depth
33 |       value
34 |       anchor
35 |     }
36 |   }
37 |   allMarkdownPage{
38 |     edges {
39 |       node {
40 |         path
41 |         title
42 |       }
43 |     }
44 |   }
45 | }
46 | </page-query>
47 | 
48 | <script>
49 | import OnThisPage from '@/components/OnThisPage.vue'
50 | import NextPrevLinks from '@/components/NextPrevLinks.vue'
51 | 
52 | export default {
53 |   components: {
54 |     OnThisPage,
55 |     NextPrevLinks,
56 |   },
57 | 
58 |   metaInfo() {
59 |     const title = this.$page.markdownPage.title
60 |     const description =
61 |       this.$page.markdownPage.description || this.$page.markdownPage.excerpt
62 | 
63 |     return {
64 |       title: title,
65 |       meta: [
66 |         {
67 |           name: 'description',
68 |           content: description,
69 |         },
70 |         {
71 |           key: 'og:title',
72 |           name: 'og:title',
73 |           content: title,
74 |         },
75 |         {
76 |           key: 'twitter:title',
77 |           name: 'twitter:title',
78 |           content: title,
79 |         },
80 |         {
81 |           key: 'og:description',
82 |           name: 'og:description',
83 |           content: description,
84 |         },
85 |         {
86 |           key: 'twitter:description',
87 |           name: 'twitter:description',
88 |           content: description,
89 |         },
90 |       ],
91 |     }
92 |   },
93 | }
94 | </script>
95 | 
96 | <style>
97 | @import 'prism-themes/themes/prism-a11y-dark.css';
98 | </style>


--------------------------------------------------------------------------------
/docs/static/README.md:
--------------------------------------------------------------------------------
1 | Add static files here. Files in this directory will be copied directly to `dist` folder during build. For example, /static/robots.txt will be located at https://yoursite.com/robots.txt.
2 | 
3 | This file should be deleted.


--------------------------------------------------------------------------------
/docs/static/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/visualjerk/ari/c0d5d2c720cd25250b892ff1217a8be98d7e4b09/docs/static/logo.jpg


--------------------------------------------------------------------------------
/docs/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   theme: {
 3 |     extend: {
 4 |       colors: {
 5 |         blue: {
 6 |           400: '#0057FF',
 7 |           500: '#004DE2',
 8 |         },
 9 |         pink: {
10 |           500: '#F23E74',
11 |         },
12 |         ui: {
13 |           background: 'var(--color-ui-background)',
14 |           sidebar: 'var(--color-ui-sidebar)',
15 |           typo: 'var(--color-ui-typo)',
16 |           primary: 'var(--color-ui-primary)',
17 |           highlight: 'var(--color-ui-highlight)',
18 |           border: 'var(--color-ui-border)',
19 |         },
20 |       },
21 |       spacing: {
22 |         sm: '24rem',
23 |       },
24 |       screens: {
25 |         xxl: '1400px',
26 |       },
27 |     },
28 |     container: {
29 |       center: true,
30 |       padding: '1rem',
31 |     },
32 |   },
33 |   variants: {},
34 |   plugins: [],
35 | }
36 | 


--------------------------------------------------------------------------------
/examples/simple-modal/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 | 


--------------------------------------------------------------------------------
/examples/simple-modal/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["johnsoncodehk.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/simple-modal/README.md:
--------------------------------------------------------------------------------
 1 | # Vue 3 + Typescript + Vite
 2 | 
 3 | This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 4 | 
 5 | ## Recommended IDE Setup
 6 | 
 7 | - [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
 8 | 
 9 | ## Type Support For `.vue` Imports in TS
10 | 
11 | Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
12 | 


--------------------------------------------------------------------------------
/examples/simple-modal/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/examples/simple-modal/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "simple-modal",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vue-tsc --noEmit && vite build",
 7 |     "preview": "vite preview"
 8 |   },
 9 |   "dependencies": {
10 |     "vue": "^3.2.25",
11 |     "vue-ari": "link:../.."
12 |   },
13 |   "devDependencies": {
14 |     "@vitejs/plugin-vue": "^2.0.0",
15 |     "typescript": "^4.4.4",
16 |     "vite": "^2.7.2",
17 |     "vue-tsc": "^0.29.8"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/examples/simple-modal/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/visualjerk/ari/c0d5d2c720cd25250b892ff1217a8be98d7e4b09/examples/simple-modal/public/favicon.ico


--------------------------------------------------------------------------------
/examples/simple-modal/src/App.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | import { defineComponent, Transition } from 'vue'
  3 | import { Modal, ModalBackdrop, ModalDisclosure, useModalState } from 'vue-ari'
  4 | 
  5 | export default defineComponent({
  6 |   name: 'App',
  7 |   components: {
  8 |     Modal,
  9 |     ModalBackdrop,
 10 |     ModalDisclosure,
 11 |     Transition,
 12 |   },
 13 |   setup() {
 14 |     const modal = useModalState()
 15 | 
 16 |     return {
 17 |       modal,
 18 |     }
 19 |   },
 20 | })
 21 | </script>
 22 | 
 23 | <template>
 24 |   <ModalDisclosure v-bind="modal" class="button">Create Ticket</ModalDisclosure>
 25 |   <Transition name="fade">
 26 |     <ModalBackdrop v-bind="modal" class="modal-backdrop">
 27 |       <Transition name="fade">
 28 |         <Modal v-bind="modal" class="modal">
 29 |           <form class="stack">
 30 |             <h2>Create New Ticket</h2>
 31 |             <div class="form-item">
 32 |               <label for="name">Name</label>
 33 |               <input id="name" name="name" autocomplete="off" />
 34 |             </div>
 35 |             <div class="form-item">
 36 |               <label for="description">Description</label>
 37 |               <textarea id="description" name="description" rows="5"></textarea>
 38 |             </div>
 39 |             <div class="form-actions">
 40 |               <button class="button button--primary" type="submit">
 41 |                 Create Ticket
 42 |               </button>
 43 |               <button class="button" type="button" @click="modal.hide">
 44 |                 Cancel
 45 |               </button>
 46 |             </div>
 47 |           </form>
 48 |         </Modal>
 49 |       </Transition>
 50 |     </ModalBackdrop>
 51 |   </Transition>
 52 | </template>
 53 | 
 54 | <style>
 55 | :root {
 56 |   --space-0: 0.25rem;
 57 |   --space-1: 0.4rem;
 58 |   --space-2: 0.7rem;
 59 |   --space-3: 1rem;
 60 |   --space-4: 1.5rem;
 61 |   --space-5: 2rem;
 62 |   --space-6: 4rem;
 63 |   --space-7: 6rem;
 64 | 
 65 |   --font-size-sm: 0.85rem;
 66 | 
 67 |   --font-weight-md: 500;
 68 |   --font-weight-lg: 600;
 69 | 
 70 |   --letter-spacing-md: 0.03em;
 71 | 
 72 |   --radius-base: var(--space-1);
 73 | 
 74 |   --color-brand-h: 256;
 75 |   --color-brand-s: 57%;
 76 |   --color-brand-l: 46%;
 77 | 
 78 |   --color-brand: hsl(
 79 |     var(--color-brand-h),
 80 |     var(--color-brand-s),
 81 |     var(--color-brand-l)
 82 |   );
 83 | 
 84 |   --color-secondary-h: 195;
 85 |   --color-secondary-s: 40%;
 86 |   --color-secondary-l: 46%;
 87 | 
 88 |   --color-secondary: hsl(
 89 |     var(--color-secondary-h),
 90 |     var(--color-secondary-s),
 91 |     var(--color-secondary-l)
 92 |   );
 93 | 
 94 |   --color-brand-alt: hsl(var(--color-brand-h), var(--color-brand-s), 50%);
 95 |   --color-brand-inverse: hsl(var(--color-brand-h), var(--color-brand-s), 95%);
 96 |   --color-text: hsl(var(--color-brand-h), 12%, 14%);
 97 |   --color-border: hsl(var(--color-brand-h), 14%, 80%);
 98 |   --color-border-active: hsl(var(--color-brand-h), var(--color-brand-s), 60%);
 99 |   --color-border-focus: hsl(var(--color-brand-h), var(--color-brand-s), 78%);
100 |   --color-surface: hsl(var(--color-brand-h), 10%, 96%);
101 |   --color-surface-alt: hsl(var(--color-brand-h), 10%, 99%);
102 |   --color-surface-dark: hsl(var(--color-brand-h), 10%, 92%);
103 |   --color-surface-dark-alt: hsl(var(--color-brand-h), 10%, 89%);
104 |   --color-backdrop: hsla(var(--color-brand-h), 14%, 10%, 0.9);
105 | }
106 | 
107 | body {
108 |   padding: var(--space-4);
109 |   font-family: system-ui, sans-serif;
110 |   color: var(--color-text);
111 | }
112 | 
113 | *,
114 | *:before,
115 | *:after {
116 |   box-sizing: border-box;
117 |   margin: 0;
118 | }
119 | 
120 | h1,
121 | h2,
122 | h3,
123 | h4,
124 | h5,
125 | h6 {
126 |   font-weight: var(--font-weight-lg);
127 |   color: var(--color-brand);
128 | }
129 | 
130 | .button {
131 |   -webkit-appearance: none;
132 |   -moz-appearance: none;
133 |   border: 0;
134 |   padding: var(--space-2) var(--space-3);
135 |   border-radius: var(--radius-base);
136 |   font-size: 1rem;
137 |   text-transform: capitalize;
138 |   letter-spacing: var(--letter-spacing-md);
139 |   cursor: pointer;
140 |   background-color: var(--color-surface-dark);
141 |   color: var(--color-text);
142 | }
143 | 
144 | .button:hover {
145 |   background-color: var(--color-surface-dark-alt);
146 | }
147 | 
148 | .button:focus-visible {
149 |   outline: var(--color-border-focus) solid var(--space-0);
150 | }
151 | 
152 | .button--primary {
153 |   background-color: var(--color-brand);
154 |   color: var(--color-brand-inverse);
155 | }
156 | 
157 | .button--primary:hover {
158 |   background-color: var(--color-brand-alt);
159 | }
160 | 
161 | .modal-backdrop {
162 |   position: fixed;
163 |   top: 0;
164 |   left: 0;
165 |   right: 0;
166 |   bottom: 0;
167 |   display: flex;
168 |   align-items: flex-start;
169 |   justify-content: center;
170 |   padding: var(--space-4);
171 |   background-color: var(--color-backdrop);
172 |   backdrop-filter: blur(2px);
173 | }
174 | 
175 | .modal {
176 |   width: 100%;
177 |   max-width: 50ch;
178 |   max-height: 80vh;
179 |   overflow: auto;
180 |   padding: var(--space-5);
181 |   background-color: var(--color-surface);
182 |   border-radius: var(--radius-base);
183 |   border: 1px solid var(--color-surface-alt);
184 |   box-shadow: var(--color-backdrop) 0 1rem 2rem;
185 | }
186 | 
187 | .stack {
188 |   display: grid;
189 |   gap: var(--space-4);
190 | }
191 | 
192 | .form-item {
193 |   display: grid;
194 |   gap: var(--space-1);
195 | }
196 | 
197 | .form-actions {
198 |   display: grid;
199 |   grid-template-columns: 1fr 1fr;
200 |   gap: var(--space-2);
201 | }
202 | 
203 | label {
204 |   padding-left: var(--space-1);
205 |   font-size: var(--font-size-sm);
206 |   font-weight: var(--font-weight-md);
207 | }
208 | 
209 | input,
210 | textarea {
211 |   padding: var(--space-2);
212 |   border: 1px solid var(--color-border);
213 |   border-radius: var(--radius-base);
214 |   background-color: var(--color-surface);
215 |   transition: background-color 0.3s ease;
216 | }
217 | 
218 | input:focus,
219 | textarea:focus {
220 |   outline: var(--color-border-focus) solid var(--space-0);
221 |   border-color: var(--color-border-active);
222 |   background-color: var(--color-surface-alt);
223 | }
224 | 
225 | textarea {
226 |   resize: none;
227 | }
228 | 
229 | .fade-enter-active,
230 | .fade-leave-active {
231 |   transition: opacity 0.3s ease;
232 | }
233 | 
234 | .fade-enter-from,
235 | .fade-leave-to {
236 |   opacity: 0;
237 | }
238 | </style>
239 | 


--------------------------------------------------------------------------------
/examples/simple-modal/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | declare module '*.vue' {
4 |   import { DefineComponent } from 'vue'
5 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
6 |   const component: DefineComponent<{}, {}, any>
7 |   export default component
8 | }
9 | 


--------------------------------------------------------------------------------
/examples/simple-modal/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/examples/simple-modal/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "esnext",
 6 |     "moduleResolution": "node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "esModuleInterop": true,
12 |     "lib": ["esnext", "dom"]
13 |   },
14 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/simple-modal/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import vue from '@vitejs/plugin-vue'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [vue()]
7 | })
8 | 


--------------------------------------------------------------------------------
/examples/simple-modal/yarn.lock:
--------------------------------------------------------------------------------
  1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
  2 | # yarn lockfile v1
  3 | 
  4 | 
  5 | "@babel/helper-validator-identifier@^7.16.7":
  6 |   version "7.16.7"
  7 |   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
  8 |   integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
  9 | 
 10 | "@babel/parser@^7.16.4", "@babel/parser@^7.6.0", "@babel/parser@^7.9.6":
 11 |   version "7.16.10"
 12 |   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.10.tgz#aba1b1cb9696a24a19f59c41af9cf17d1c716a88"
 13 |   integrity sha512-Sm/S9Or6nN8uiFsQU1yodyDW3MWXQhFeqzMPM+t8MJjM+pLsnFVxFZzkpXKvUXh+Gz9cbMoYYs484+Jw/NTEFQ==
 14 | 
 15 | "@babel/types@^7.6.1", "@babel/types@^7.9.6":
 16 |   version "7.16.8"
 17 |   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.8.tgz#0ba5da91dd71e0a4e7781a30f22770831062e3c1"
 18 |   integrity sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==
 19 |   dependencies:
 20 |     "@babel/helper-validator-identifier" "^7.16.7"
 21 |     to-fast-properties "^2.0.0"
 22 | 
 23 | "@emmetio/abbreviation@^2.2.2":
 24 |   version "2.2.2"
 25 |   resolved "https://registry.yarnpkg.com/@emmetio/abbreviation/-/abbreviation-2.2.2.tgz#746762fd9e7a8c2ea604f580c62e3cfe250e6989"
 26 |   integrity sha512-TtE/dBnkTCct8+LntkqVrwqQao6EnPAs1YN3cUgxOxTaBlesBCY37ROUAVZrRlG64GNnVShdl/b70RfAI3w5lw==
 27 |   dependencies:
 28 |     "@emmetio/scanner" "^1.0.0"
 29 | 
 30 | "@emmetio/css-abbreviation@^2.1.4":
 31 |   version "2.1.4"
 32 |   resolved "https://registry.yarnpkg.com/@emmetio/css-abbreviation/-/css-abbreviation-2.1.4.tgz#90362e8a1122ce3b76f6c3157907d30182f53f54"
 33 |   integrity sha512-qk9L60Y+uRtM5CPbB0y+QNl/1XKE09mSO+AhhSauIfr2YOx/ta3NJw2d8RtCFxgzHeRqFRr8jgyzThbu+MZ4Uw==
 34 |   dependencies:
 35 |     "@emmetio/scanner" "^1.0.0"
 36 | 
 37 | "@emmetio/scanner@^1.0.0":
 38 |   version "1.0.0"
 39 |   resolved "https://registry.yarnpkg.com/@emmetio/scanner/-/scanner-1.0.0.tgz#065b2af6233fe7474d44823e3deb89724af42b5f"
 40 |   integrity sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==
 41 | 
 42 | "@popperjs/core@2.11.2":
 43 |   version "2.11.2"
 44 |   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9"
 45 |   integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==
 46 | 
 47 | "@vitejs/plugin-vue@^2.0.0":
 48 |   version "2.1.0"
 49 |   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-2.1.0.tgz#ddf5e0059f84f2ff649afc25ce5a59211e670542"
 50 |   integrity sha512-AZ78WxvFMYd8JmM/GBV6a6SGGTU0GgN/0/4T+FnMMsLzFEzTeAUwuraapy50ifHZsC+G5SvWs86bvaCPTneFlA==
 51 | 
 52 | "@volar/code-gen@0.29.8":
 53 |   version "0.29.8"
 54 |   resolved "https://registry.yarnpkg.com/@volar/code-gen/-/code-gen-0.29.8.tgz#db1a4bf29caeba131265bed9dbe96a1a0b66ea35"
 55 |   integrity sha512-eohLLUqPChHRPDFT5gXn4V6pr/CeTri7Ou5GI26lUvBRRAbP8p+oYfQRcbMPGeKmVkYjfVj0chsxQGx6T8PQ4Q==
 56 |   dependencies:
 57 |     "@volar/shared" "0.29.8"
 58 |     "@volar/source-map" "0.29.8"
 59 | 
 60 | "@volar/html2pug@0.29.8":
 61 |   version "0.29.8"
 62 |   resolved "https://registry.yarnpkg.com/@volar/html2pug/-/html2pug-0.29.8.tgz#2e97fa2968dcdfe0dbbc67b0cd2ab4c440018738"
 63 |   integrity sha512-bhSNXg8A2aD3w0B+CwmHjqCAaKtj5rORbE5C/q/UdGqptJbC6STCmi30KuRTdfPhR++Xb18Hauf3s/WCmtNAPA==
 64 |   dependencies:
 65 |     domelementtype "^2.2.0"
 66 |     domhandler "^4.2.2"
 67 |     htmlparser2 "^7.1.2"
 68 |     pug "^3.0.2"
 69 | 
 70 | "@volar/shared@0.29.8":
 71 |   version "0.29.8"
 72 |   resolved "https://registry.yarnpkg.com/@volar/shared/-/shared-0.29.8.tgz#e635ddf2cbcf307da932eb4b98e33c320d3d2991"
 73 |   integrity sha512-Y1NN6irkIukD+T0wf4p/dHWYL90sacN2e2lYoDXxRlvoYxwANnHgw0J0Rcp+yw58ElWRScdG7/YntEIuZWeJsw==
 74 |   dependencies:
 75 |     upath "^2.0.1"
 76 |     vscode-jsonrpc "^8.0.0-next.2"
 77 |     vscode-uri "^3.0.2"
 78 | 
 79 | "@volar/source-map@0.29.8":
 80 |   version "0.29.8"
 81 |   resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-0.29.8.tgz#3299a0ae86ae0b72b4db3e50499d8bb285d8e9b2"
 82 |   integrity sha512-7w+UoYtnc6UQu30CgMVvx0YN4dzDgP4TIsSmUaW62AGmxU9Lxwp3Kkn/4N8efi91z8ma5Z78v/HddyJPwAC3LA==
 83 |   dependencies:
 84 |     "@volar/shared" "0.29.8"
 85 | 
 86 | "@volar/transforms@0.29.8":
 87 |   version "0.29.8"
 88 |   resolved "https://registry.yarnpkg.com/@volar/transforms/-/transforms-0.29.8.tgz#ef807010ac90772a065e7cf50509b6433b53e355"
 89 |   integrity sha512-o2hRa8CoDwYTO1Mu5KA47+1elUnYUjDaVhCvbyKlRfd8qpHea2llotArq7B6OORSL2M9DVs1IRJ5NGURBFeZ3Q==
 90 |   dependencies:
 91 |     "@volar/shared" "0.29.8"
 92 |     vscode-languageserver "^8.0.0-next.2"
 93 | 
 94 | "@volar/vue-code-gen@0.29.8":
 95 |   version "0.29.8"
 96 |   resolved "https://registry.yarnpkg.com/@volar/vue-code-gen/-/vue-code-gen-0.29.8.tgz#32401d52e2570d775fcc6cbc83abefeef65c48cd"
 97 |   integrity sha512-E1e7P2oktNC/DzgDBditfla4s8+HlUlluZ+BtcLvEdbkl3QEjujkB0x1wxguWzXmpWgLIDPtrS3Jzll5cCOkTg==
 98 |   dependencies:
 99 |     "@volar/code-gen" "0.29.8"
100 |     "@volar/shared" "0.29.8"
101 |     "@volar/source-map" "0.29.8"
102 |     "@vue/compiler-core" "^3.2.21"
103 |     "@vue/compiler-dom" "^3.2.21"
104 |     "@vue/shared" "^3.2.21"
105 |     upath "^2.0.1"
106 | 
107 | "@vscode/emmet-helper@^2.8.0":
108 |   version "2.8.3"
109 |   resolved "https://registry.yarnpkg.com/@vscode/emmet-helper/-/emmet-helper-2.8.3.tgz#f7c2b4a4751d03bcf2b421f0fce5b521a0f64a18"
110 |   integrity sha512-dkTSL+BaBBS8gFgPm/GMOU+XfxaMyI+Fl1IUYxEi8Iv24RfHf9/q2eCpV2hs7sncLcoKWEbMYe5gv4Ppmp2Oxw==
111 |   dependencies:
112 |     emmet "^2.3.0"
113 |     jsonc-parser "^2.3.0"
114 |     vscode-languageserver-textdocument "^1.0.1"
115 |     vscode-languageserver-types "^3.15.1"
116 |     vscode-nls "^5.0.0"
117 |     vscode-uri "^2.1.2"
118 | 
119 | "@vue/compiler-core@3.2.28", "@vue/compiler-core@^3.2.21":
120 |   version "3.2.28"
121 |   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.28.tgz#7f6aa4b167f0ae0413f3c36e507c898db06e8fe8"
122 |   integrity sha512-mQpfEjmHVxmWKaup0HL6tLMv2HqjjJu7XT4/q0IoUXYXC4xKG8lIVn5YChJqxBTLPuQjzas7u7i9L4PAWJZRtA==
123 |   dependencies:
124 |     "@babel/parser" "^7.16.4"
125 |     "@vue/shared" "3.2.28"
126 |     estree-walker "^2.0.2"
127 |     source-map "^0.6.1"
128 | 
129 | "@vue/compiler-dom@3.2.28", "@vue/compiler-dom@^3.2.21":
130 |   version "3.2.28"
131 |   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.28.tgz#cc32a987fee50673f25430df35ea943f252c23e6"
132 |   integrity sha512-KA4yXceLteKC7VykvPnViUixemQw3A+oii+deSbZJOQKQKVh1HLosI10qxa8ImPCyun41+wG3uGR+tW7eu1W6Q==
133 |   dependencies:
134 |     "@vue/compiler-core" "3.2.28"
135 |     "@vue/shared" "3.2.28"
136 | 
137 | "@vue/compiler-sfc@3.2.28":
138 |   version "3.2.28"
139 |   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.28.tgz#0a576c09abc72d6a76b153133de6fd7599c182c3"
140 |   integrity sha512-zB0WznfEBb4CbGBHzhboHDKVO5nxbkbxxFo9iVlxObP7a9/qvA5kkZEuT7nXP52f3b3qEfmVTjIT23Lo1ndZdQ==
141 |   dependencies:
142 |     "@babel/parser" "^7.16.4"
143 |     "@vue/compiler-core" "3.2.28"
144 |     "@vue/compiler-dom" "3.2.28"
145 |     "@vue/compiler-ssr" "3.2.28"
146 |     "@vue/reactivity-transform" "3.2.28"
147 |     "@vue/shared" "3.2.28"
148 |     estree-walker "^2.0.2"
149 |     magic-string "^0.25.7"
150 |     postcss "^8.1.10"
151 |     source-map "^0.6.1"
152 | 
153 | "@vue/compiler-ssr@3.2.28":
154 |   version "3.2.28"
155 |   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.28.tgz#411e8b3bdc3183b2acd35e6551734b34366d64e5"
156 |   integrity sha512-z8rck1PDTu20iLyip9lAvIhaO40DUJrw3Zv0mS4Apfh3PlfWpF5dhsO5g0dgt213wgYsQIYVIlU9cfrYapqRgg==
157 |   dependencies:
158 |     "@vue/compiler-dom" "3.2.28"
159 |     "@vue/shared" "3.2.28"
160 | 
161 | "@vue/reactivity-transform@3.2.28":
162 |   version "3.2.28"
163 |   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.28.tgz#e0abf86694f4d182f974fbac934fc3e23e0a6d9b"
164 |   integrity sha512-zE8idNkOPnBDd2tKSIk84hOQZ+jXKvSy5FoIIVlcNEJHnCFnQ3maqeSJ9KoB2Rf6EXUhFTiTDNRlYlXmT2uHbQ==
165 |   dependencies:
166 |     "@babel/parser" "^7.16.4"
167 |     "@vue/compiler-core" "3.2.28"
168 |     "@vue/shared" "3.2.28"
169 |     estree-walker "^2.0.2"
170 |     magic-string "^0.25.7"
171 | 
172 | "@vue/reactivity@3.2.28", "@vue/reactivity@^3.2.21":
173 |   version "3.2.28"
174 |   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.28.tgz#1c3c7f434372edd867f937151897fca7efc4be18"
175 |   integrity sha512-WamM5LGv7JIarW+EYAzYFqYonZXjTnOjNW0sBO93jRE9I1ReAwfH8NvQXkPA3JZ3fuF6SGDdG8Y9/+dKjd/1Gw==
176 |   dependencies:
177 |     "@vue/shared" "3.2.28"
178 | 
179 | "@vue/runtime-core@3.2.28":
180 |   version "3.2.28"
181 |   resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.28.tgz#69d8eede42957a1660b964004aa002982ae36a41"
182 |   integrity sha512-sVbBMFUt42JatTlXbdH6tVcLPw1eEOrrVQWI+j6/nJVzR852RURaT6DhdR0azdYscxq4xmmBctE0VQmlibBOFw==
183 |   dependencies:
184 |     "@vue/reactivity" "3.2.28"
185 |     "@vue/shared" "3.2.28"
186 | 
187 | "@vue/runtime-dom@3.2.28":
188 |   version "3.2.28"
189 |   resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.28.tgz#b5a0cf38daed5534edbc95790f4eeac97dff2003"
190 |   integrity sha512-Jg7cxZanEXXGu1QnZILFLnDrM+MIFN8VAullmMZiJEZziHvhygRMpi0ahNy/8OqGwtTze1JNhLdHRBO+q2hbmg==
191 |   dependencies:
192 |     "@vue/runtime-core" "3.2.28"
193 |     "@vue/shared" "3.2.28"
194 |     csstype "^2.6.8"
195 | 
196 | "@vue/server-renderer@3.2.28":
197 |   version "3.2.28"
198 |   resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.28.tgz#235944dc4d969fadd387f62acc2eb8b8d50008a2"
199 |   integrity sha512-S+MhurgkPabRvhdDl8R6efKBmniJqBbbWIYTXADaJIKFLFLQCW4gcYUTbxuebzk6j3z485vpekhrHHymTF52Pg==
200 |   dependencies:
201 |     "@vue/compiler-ssr" "3.2.28"
202 |     "@vue/shared" "3.2.28"
203 | 
204 | "@vue/shared@3.2.28", "@vue/shared@^3.2.21":
205 |   version "3.2.28"
206 |   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.28.tgz#5b0b1840432031d0ea1adff633b356a503e87048"
207 |   integrity sha512-eMQ8s9j8FpbGHlgUAaj/coaG3Q8YtMsoWL/RIHTsE3Ex7PUTyr7V91vB5HqWB5Sn8m4RXTHGO22/skoTUYvp0A==
208 | 
209 | acorn@^7.1.1:
210 |   version "7.4.1"
211 |   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
212 |   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
213 | 
214 | asap@~2.0.3:
215 |   version "2.0.6"
216 |   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
217 |   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
218 | 
219 | assert-never@^1.2.1:
220 |   version "1.2.1"
221 |   resolved "https://registry.yarnpkg.com/assert-never/-/assert-never-1.2.1.tgz#11f0e363bf146205fb08193b5c7b90f4d1cf44fe"
222 |   integrity sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==
223 | 
224 | babel-walk@3.0.0-canary-5:
225 |   version "3.0.0-canary-5"
226 |   resolved "https://registry.yarnpkg.com/babel-walk/-/babel-walk-3.0.0-canary-5.tgz#f66ecd7298357aee44955f235a6ef54219104b11"
227 |   integrity sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==
228 |   dependencies:
229 |     "@babel/types" "^7.9.6"
230 | 
231 | body-scroll-lock@3.0.3:
232 |   version "3.0.3"
233 |   resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.0.3.tgz#221d87435bcfb50e27ab5d4508735f622aed11a2"
234 |   integrity sha512-EUryImgD6Gv87HOjJB/yB2WIGECiZMhmcUK+DrqVRFDDa64xR+FsK0LgvLPnBxZDTxIl+W80/KJ8i6gp2IwOHQ==
235 | 
236 | call-bind@^1.0.2:
237 |   version "1.0.2"
238 |   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
239 |   integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
240 |   dependencies:
241 |     function-bind "^1.1.1"
242 |     get-intrinsic "^1.0.2"
243 | 
244 | character-parser@^2.2.0:
245 |   version "2.2.0"
246 |   resolved "https://registry.yarnpkg.com/character-parser/-/character-parser-2.2.0.tgz#c7ce28f36d4bcd9744e5ffc2c5fcde1c73261fc0"
247 |   integrity sha1-x84o821LzZdE5f/CxfzeHHMmH8A=
248 |   dependencies:
249 |     is-regex "^1.0.3"
250 | 
251 | constantinople@^4.0.1:
252 |   version "4.0.1"
253 |   resolved "https://registry.yarnpkg.com/constantinople/-/constantinople-4.0.1.tgz#0def113fa0e4dc8de83331a5cf79c8b325213151"
254 |   integrity sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==
255 |   dependencies:
256 |     "@babel/parser" "^7.6.0"
257 |     "@babel/types" "^7.6.1"
258 | 
259 | csstype@^2.6.8:
260 |   version "2.6.19"
261 |   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
262 |   integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
263 | 
264 | doctypes@^1.1.0:
265 |   version "1.1.0"
266 |   resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9"
267 |   integrity sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=
268 | 
269 | dom-serializer@^1.0.1:
270 |   version "1.3.2"
271 |   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
272 |   integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
273 |   dependencies:
274 |     domelementtype "^2.0.1"
275 |     domhandler "^4.2.0"
276 |     entities "^2.0.0"
277 | 
278 | domelementtype@^2.0.1, domelementtype@^2.2.0:
279 |   version "2.2.0"
280 |   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
281 |   integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
282 | 
283 | domhandler@^4.2.0, domhandler@^4.2.2:
284 |   version "4.3.0"
285 |   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626"
286 |   integrity sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==
287 |   dependencies:
288 |     domelementtype "^2.2.0"
289 | 
290 | domutils@^2.8.0:
291 |   version "2.8.0"
292 |   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
293 |   integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
294 |   dependencies:
295 |     dom-serializer "^1.0.1"
296 |     domelementtype "^2.2.0"
297 |     domhandler "^4.2.0"
298 | 
299 | emmet@^2.3.0:
300 |   version "2.3.5"
301 |   resolved "https://registry.yarnpkg.com/emmet/-/emmet-2.3.5.tgz#7f80f9c3db6831d1ee2b458717b9c36a074b1a47"
302 |   integrity sha512-LcWfTamJnXIdMfLvJEC5Ld3hY5/KHXgv1L1bp6I7eEvB0ZhacHZ1kX0BYovJ8FroEsreLcq7n7kZhRMsf6jkXQ==
303 |   dependencies:
304 |     "@emmetio/abbreviation" "^2.2.2"
305 |     "@emmetio/css-abbreviation" "^2.1.4"
306 | 
307 | entities@^2.0.0:
308 |   version "2.2.0"
309 |   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
310 |   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
311 | 
312 | entities@^3.0.1:
313 |   version "3.0.1"
314 |   resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
315 |   integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
316 | 
317 | esbuild-android-arm64@0.13.15:
318 |   version "0.13.15"
319 |   resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz#3fc3ff0bab76fe35dd237476b5d2b32bb20a3d44"
320 |   integrity sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==
321 | 
322 | esbuild-darwin-64@0.13.15:
323 |   version "0.13.15"
324 |   resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz#8e9169c16baf444eacec60d09b24d11b255a8e72"
325 |   integrity sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ==
326 | 
327 | esbuild-darwin-arm64@0.13.15:
328 |   version "0.13.15"
329 |   resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz#1b07f893b632114f805e188ddfca41b2b778229a"
330 |   integrity sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==
331 | 
332 | esbuild-freebsd-64@0.13.15:
333 |   version "0.13.15"
334 |   resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz#0b8b7eca1690c8ec94c75680c38c07269c1f4a85"
335 |   integrity sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==
336 | 
337 | esbuild-freebsd-arm64@0.13.15:
338 |   version "0.13.15"
339 |   resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz#2e1a6c696bfdcd20a99578b76350b41db1934e52"
340 |   integrity sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==
341 | 
342 | esbuild-linux-32@0.13.15:
343 |   version "0.13.15"
344 |   resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz#6fd39f36fc66dd45b6b5f515728c7bbebc342a69"
345 |   integrity sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==
346 | 
347 | esbuild-linux-64@0.13.15:
348 |   version "0.13.15"
349 |   resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz#9cb8e4bcd7574e67946e4ee5f1f1e12386bb6dd3"
350 |   integrity sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==
351 | 
352 | esbuild-linux-arm64@0.13.15:
353 |   version "0.13.15"
354 |   resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz#3891aa3704ec579a1b92d2a586122e5b6a2bfba1"
355 |   integrity sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==
356 | 
357 | esbuild-linux-arm@0.13.15:
358 |   version "0.13.15"
359 |   resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz#8a00e99e6a0c6c9a6b7f334841364d8a2b4aecfe"
360 |   integrity sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==
361 | 
362 | esbuild-linux-mips64le@0.13.15:
363 |   version "0.13.15"
364 |   resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz#36b07cc47c3d21e48db3bb1f4d9ef8f46aead4f7"
365 |   integrity sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==
366 | 
367 | esbuild-linux-ppc64le@0.13.15:
368 |   version "0.13.15"
369 |   resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz#f7e6bba40b9a11eb9dcae5b01550ea04670edad2"
370 |   integrity sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==
371 | 
372 | esbuild-netbsd-64@0.13.15:
373 |   version "0.13.15"
374 |   resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz#a2fedc549c2b629d580a732d840712b08d440038"
375 |   integrity sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==
376 | 
377 | esbuild-openbsd-64@0.13.15:
378 |   version "0.13.15"
379 |   resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz#b22c0e5806d3a1fbf0325872037f885306b05cd7"
380 |   integrity sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==
381 | 
382 | esbuild-sunos-64@0.13.15:
383 |   version "0.13.15"
384 |   resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz#d0b6454a88375ee8d3964daeff55c85c91c7cef4"
385 |   integrity sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==
386 | 
387 | esbuild-windows-32@0.13.15:
388 |   version "0.13.15"
389 |   resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz#c96d0b9bbb52f3303322582ef8e4847c5ad375a7"
390 |   integrity sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==
391 | 
392 | esbuild-windows-64@0.13.15:
393 |   version "0.13.15"
394 |   resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz#1f79cb9b1e1bb02fb25cd414cb90d4ea2892c294"
395 |   integrity sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==
396 | 
397 | esbuild-windows-arm64@0.13.15:
398 |   version "0.13.15"
399 |   resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz#482173070810df22a752c686509c370c3be3b3c3"
400 |   integrity sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==
401 | 
402 | esbuild@^0.13.12:
403 |   version "0.13.15"
404 |   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.15.tgz#db56a88166ee373f87dbb2d8798ff449e0450cdf"
405 |   integrity sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw==
406 |   optionalDependencies:
407 |     esbuild-android-arm64 "0.13.15"
408 |     esbuild-darwin-64 "0.13.15"
409 |     esbuild-darwin-arm64 "0.13.15"
410 |     esbuild-freebsd-64 "0.13.15"
411 |     esbuild-freebsd-arm64 "0.13.15"
412 |     esbuild-linux-32 "0.13.15"
413 |     esbuild-linux-64 "0.13.15"
414 |     esbuild-linux-arm "0.13.15"
415 |     esbuild-linux-arm64 "0.13.15"
416 |     esbuild-linux-mips64le "0.13.15"
417 |     esbuild-linux-ppc64le "0.13.15"
418 |     esbuild-netbsd-64 "0.13.15"
419 |     esbuild-openbsd-64 "0.13.15"
420 |     esbuild-sunos-64 "0.13.15"
421 |     esbuild-windows-32 "0.13.15"
422 |     esbuild-windows-64 "0.13.15"
423 |     esbuild-windows-arm64 "0.13.15"
424 | 
425 | estree-walker@^2.0.2:
426 |   version "2.0.2"
427 |   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
428 |   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
429 | 
430 | fsevents@~2.3.2:
431 |   version "2.3.2"
432 |   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
433 |   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
434 | 
435 | function-bind@^1.1.1:
436 |   version "1.1.1"
437 |   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
438 |   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
439 | 
440 | get-intrinsic@^1.0.2:
441 |   version "1.1.1"
442 |   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
443 |   integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
444 |   dependencies:
445 |     function-bind "^1.1.1"
446 |     has "^1.0.3"
447 |     has-symbols "^1.0.1"
448 | 
449 | has-symbols@^1.0.1, has-symbols@^1.0.2:
450 |   version "1.0.2"
451 |   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
452 |   integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
453 | 
454 | has-tostringtag@^1.0.0:
455 |   version "1.0.0"
456 |   resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
457 |   integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
458 |   dependencies:
459 |     has-symbols "^1.0.2"
460 | 
461 | has@^1.0.3:
462 |   version "1.0.3"
463 |   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
464 |   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
465 |   dependencies:
466 |     function-bind "^1.1.1"
467 | 
468 | htmlparser2@^7.1.2:
469 |   version "7.2.0"
470 |   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-7.2.0.tgz#8817cdea38bbc324392a90b1990908e81a65f5a5"
471 |   integrity sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==
472 |   dependencies:
473 |     domelementtype "^2.0.1"
474 |     domhandler "^4.2.2"
475 |     domutils "^2.8.0"
476 |     entities "^3.0.1"
477 | 
478 | is-core-module@^2.8.0:
479 |   version "2.8.1"
480 |   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
481 |   integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
482 |   dependencies:
483 |     has "^1.0.3"
484 | 
485 | is-expression@^4.0.0:
486 |   version "4.0.0"
487 |   resolved "https://registry.yarnpkg.com/is-expression/-/is-expression-4.0.0.tgz#c33155962abf21d0afd2552514d67d2ec16fd2ab"
488 |   integrity sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==
489 |   dependencies:
490 |     acorn "^7.1.1"
491 |     object-assign "^4.1.1"
492 | 
493 | is-promise@^2.0.0:
494 |   version "2.2.2"
495 |   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
496 |   integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
497 | 
498 | is-regex@^1.0.3:
499 |   version "1.1.4"
500 |   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
501 |   integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
502 |   dependencies:
503 |     call-bind "^1.0.2"
504 |     has-tostringtag "^1.0.0"
505 | 
506 | js-stringify@^1.0.2:
507 |   version "1.0.2"
508 |   resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"
509 |   integrity sha1-Fzb939lyTyijaCrcYjCufk6Weds=
510 | 
511 | jsonc-parser@^2.3.0:
512 |   version "2.3.1"
513 |   resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-2.3.1.tgz#59549150b133f2efacca48fe9ce1ec0659af2342"
514 |   integrity sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==
515 | 
516 | jsonc-parser@^3.0.0:
517 |   version "3.0.0"
518 |   resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.0.0.tgz#abdd785701c7e7eaca8a9ec8cf070ca51a745a22"
519 |   integrity sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==
520 | 
521 | jstransformer@1.0.0:
522 |   version "1.0.0"
523 |   resolved "https://registry.yarnpkg.com/jstransformer/-/jstransformer-1.0.0.tgz#ed8bf0921e2f3f1ed4d5c1a44f68709ed24722c3"
524 |   integrity sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=
525 |   dependencies:
526 |     is-promise "^2.0.0"
527 |     promise "^7.0.1"
528 | 
529 | lru-cache@^6.0.0:
530 |   version "6.0.0"
531 |   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
532 |   integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
533 |   dependencies:
534 |     yallist "^4.0.0"
535 | 
536 | magic-string@^0.25.7:
537 |   version "0.25.7"
538 |   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
539 |   integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
540 |   dependencies:
541 |     sourcemap-codec "^1.4.4"
542 | 
543 | nanoid@^3.1.30:
544 |   version "3.2.0"
545 |   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
546 |   integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
547 | 
548 | object-assign@^4.1.1:
549 |   version "4.1.1"
550 |   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
551 |   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
552 | 
553 | path-parse@^1.0.7:
554 |   version "1.0.7"
555 |   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
556 |   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
557 | 
558 | picocolors@^1.0.0:
559 |   version "1.0.0"
560 |   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
561 |   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
562 | 
563 | postcss@^8.1.10, postcss@^8.4.5:
564 |   version "8.4.5"
565 |   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
566 |   integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
567 |   dependencies:
568 |     nanoid "^3.1.30"
569 |     picocolors "^1.0.0"
570 |     source-map-js "^1.0.1"
571 | 
572 | promise@^7.0.1:
573 |   version "7.3.1"
574 |   resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
575 |   integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
576 |   dependencies:
577 |     asap "~2.0.3"
578 | 
579 | pug-attrs@^3.0.0:
580 |   version "3.0.0"
581 |   resolved "https://registry.yarnpkg.com/pug-attrs/-/pug-attrs-3.0.0.tgz#b10451e0348165e31fad1cc23ebddd9dc7347c41"
582 |   integrity sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==
583 |   dependencies:
584 |     constantinople "^4.0.1"
585 |     js-stringify "^1.0.2"
586 |     pug-runtime "^3.0.0"
587 | 
588 | pug-code-gen@^3.0.2:
589 |   version "3.0.2"
590 |   resolved "https://registry.yarnpkg.com/pug-code-gen/-/pug-code-gen-3.0.2.tgz#ad190f4943133bf186b60b80de483100e132e2ce"
591 |   integrity sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==
592 |   dependencies:
593 |     constantinople "^4.0.1"
594 |     doctypes "^1.1.0"
595 |     js-stringify "^1.0.2"
596 |     pug-attrs "^3.0.0"
597 |     pug-error "^2.0.0"
598 |     pug-runtime "^3.0.0"
599 |     void-elements "^3.1.0"
600 |     with "^7.0.0"
601 | 
602 | pug-error@^2.0.0:
603 |   version "2.0.0"
604 |   resolved "https://registry.yarnpkg.com/pug-error/-/pug-error-2.0.0.tgz#5c62173cb09c34de2a2ce04f17b8adfec74d8ca5"
605 |   integrity sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==
606 | 
607 | pug-filters@^4.0.0:
608 |   version "4.0.0"
609 |   resolved "https://registry.yarnpkg.com/pug-filters/-/pug-filters-4.0.0.tgz#d3e49af5ba8472e9b7a66d980e707ce9d2cc9b5e"
610 |   integrity sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==
611 |   dependencies:
612 |     constantinople "^4.0.1"
613 |     jstransformer "1.0.0"
614 |     pug-error "^2.0.0"
615 |     pug-walk "^2.0.0"
616 |     resolve "^1.15.1"
617 | 
618 | pug-lexer@^5.0.1:
619 |   version "5.0.1"
620 |   resolved "https://registry.yarnpkg.com/pug-lexer/-/pug-lexer-5.0.1.tgz#ae44628c5bef9b190b665683b288ca9024b8b0d5"
621 |   integrity sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==
622 |   dependencies:
623 |     character-parser "^2.2.0"
624 |     is-expression "^4.0.0"
625 |     pug-error "^2.0.0"
626 | 
627 | pug-linker@^4.0.0:
628 |   version "4.0.0"
629 |   resolved "https://registry.yarnpkg.com/pug-linker/-/pug-linker-4.0.0.tgz#12cbc0594fc5a3e06b9fc59e6f93c146962a7708"
630 |   integrity sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==
631 |   dependencies:
632 |     pug-error "^2.0.0"
633 |     pug-walk "^2.0.0"
634 | 
635 | pug-load@^3.0.0:
636 |   version "3.0.0"
637 |   resolved "https://registry.yarnpkg.com/pug-load/-/pug-load-3.0.0.tgz#9fd9cda52202b08adb11d25681fb9f34bd41b662"
638 |   integrity sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==
639 |   dependencies:
640 |     object-assign "^4.1.1"
641 |     pug-walk "^2.0.0"
642 | 
643 | pug-parser@^6.0.0:
644 |   version "6.0.0"
645 |   resolved "https://registry.yarnpkg.com/pug-parser/-/pug-parser-6.0.0.tgz#a8fdc035863a95b2c1dc5ebf4ecf80b4e76a1260"
646 |   integrity sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==
647 |   dependencies:
648 |     pug-error "^2.0.0"
649 |     token-stream "1.0.0"
650 | 
651 | pug-runtime@^3.0.0, pug-runtime@^3.0.1:
652 |   version "3.0.1"
653 |   resolved "https://registry.yarnpkg.com/pug-runtime/-/pug-runtime-3.0.1.tgz#f636976204723f35a8c5f6fad6acda2a191b83d7"
654 |   integrity sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==
655 | 
656 | pug-strip-comments@^2.0.0:
657 |   version "2.0.0"
658 |   resolved "https://registry.yarnpkg.com/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz#f94b07fd6b495523330f490a7f554b4ff876303e"
659 |   integrity sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==
660 |   dependencies:
661 |     pug-error "^2.0.0"
662 | 
663 | pug-walk@^2.0.0:
664 |   version "2.0.0"
665 |   resolved "https://registry.yarnpkg.com/pug-walk/-/pug-walk-2.0.0.tgz#417aabc29232bb4499b5b5069a2b2d2a24d5f5fe"
666 |   integrity sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==
667 | 
668 | pug@^3.0.2:
669 |   version "3.0.2"
670 |   resolved "https://registry.yarnpkg.com/pug/-/pug-3.0.2.tgz#f35c7107343454e43bc27ae0ff76c731b78ea535"
671 |   integrity sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==
672 |   dependencies:
673 |     pug-code-gen "^3.0.2"
674 |     pug-filters "^4.0.0"
675 |     pug-lexer "^5.0.1"
676 |     pug-linker "^4.0.0"
677 |     pug-load "^3.0.0"
678 |     pug-parser "^6.0.0"
679 |     pug-runtime "^3.0.1"
680 |     pug-strip-comments "^2.0.0"
681 | 
682 | request-light@^0.5.4:
683 |   version "0.5.7"
684 |   resolved "https://registry.yarnpkg.com/request-light/-/request-light-0.5.7.tgz#1c448c22153b55d2cd278eb414df24a5ad6e6d5e"
685 |   integrity sha512-i/wKzvcx7Er8tZnvqSxWuNO5ZGggu2UgZAqj/RyZ0si7lBTXL7kZiI/dWxzxnQjaY7s5HEy1qK21Do4Ncr6cVw==
686 | 
687 | resolve@^1.15.1, resolve@^1.20.0:
688 |   version "1.21.1"
689 |   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.21.1.tgz#1a88c73f5ca8ab0aabc8b888c4170de26c92c4cc"
690 |   integrity sha512-lfEImVbnolPuaSZuLQ52cAxPBHeI77sPwCOWRdy12UG/CNa8an7oBHH1R+Fp1/mUqSJi4c8TIP6FOIPSZAUrEQ==
691 |   dependencies:
692 |     is-core-module "^2.8.0"
693 |     path-parse "^1.0.7"
694 |     supports-preserve-symlinks-flag "^1.0.0"
695 | 
696 | rollup@^2.59.0:
697 |   version "2.66.0"
698 |   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.66.0.tgz#ee529ea15a20485d579039637fec3050bad03bbb"
699 |   integrity sha512-L6mKOkdyP8HK5kKJXaiWG7KZDumPJjuo1P+cfyHOJPNNTK3Moe7zCH5+fy7v8pVmHXtlxorzaBjvkBMB23s98g==
700 |   optionalDependencies:
701 |     fsevents "~2.3.2"
702 | 
703 | semver@^7.3.5:
704 |   version "7.3.5"
705 |   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
706 |   integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
707 |   dependencies:
708 |     lru-cache "^6.0.0"
709 | 
710 | source-map-js@^1.0.1:
711 |   version "1.0.2"
712 |   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
713 |   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
714 | 
715 | source-map@^0.6.1:
716 |   version "0.6.1"
717 |   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
718 |   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
719 | 
720 | sourcemap-codec@^1.4.4:
721 |   version "1.4.8"
722 |   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
723 |   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
724 | 
725 | supports-preserve-symlinks-flag@^1.0.0:
726 |   version "1.0.0"
727 |   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
728 |   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
729 | 
730 | to-fast-properties@^2.0.0:
731 |   version "2.0.0"
732 |   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
733 |   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
734 | 
735 | token-stream@1.0.0:
736 |   version "1.0.0"
737 |   resolved "https://registry.yarnpkg.com/token-stream/-/token-stream-1.0.0.tgz#cc200eab2613f4166d27ff9afc7ca56d49df6eb4"
738 |   integrity sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=
739 | 
740 | typescript@^4.4.4:
741 |   version "4.5.5"
742 |   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
743 |   integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
744 | 
745 | upath@^2.0.1:
746 |   version "2.0.1"
747 |   resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"
748 |   integrity sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==
749 | 
750 | vite@^2.7.2:
751 |   version "2.7.13"
752 |   resolved "https://registry.yarnpkg.com/vite/-/vite-2.7.13.tgz#99b56e27dfb1e4399e407cf94648f5c7fb9d77f5"
753 |   integrity sha512-Mq8et7f3aK0SgSxjDNfOAimZGW9XryfHRa/uV0jseQSilg+KhYDSoNb9h1rknOy6SuMkvNDLKCYAYYUMCE+IgQ==
754 |   dependencies:
755 |     esbuild "^0.13.12"
756 |     postcss "^8.4.5"
757 |     resolve "^1.20.0"
758 |     rollup "^2.59.0"
759 |   optionalDependencies:
760 |     fsevents "~2.3.2"
761 | 
762 | void-elements@^3.1.0:
763 |   version "3.1.0"
764 |   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
765 |   integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=
766 | 
767 | vscode-css-languageservice@^5.1.7:
768 |   version "5.1.9"
769 |   resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-5.1.9.tgz#9d473e5c61fa6d4d62719d9b8715ff6c644bf14e"
770 |   integrity sha512-/tFOWeZBL3Oc9Zc+2MAi3rEwiXJTSZsvjB+M7nSjWLbGPUIjukUA7YzLgsBoUfR35sPJYnXWUkL56PdfIYM8GA==
771 |   dependencies:
772 |     vscode-languageserver-textdocument "^1.0.1"
773 |     vscode-languageserver-types "^3.16.0"
774 |     vscode-nls "^5.0.0"
775 |     vscode-uri "^3.0.2"
776 | 
777 | vscode-html-languageservice@^4.1.0:
778 |   version "4.2.1"
779 |   resolved "https://registry.yarnpkg.com/vscode-html-languageservice/-/vscode-html-languageservice-4.2.1.tgz#b95077cffd19bf187e53c7bf79e3e0dd7edbc7cf"
780 |   integrity sha512-PgaToZVXJ44nFWEBuSINdDgVV6EnpC3MnXBsysR3O5TKcAfywbYeRGRy+Y4dVR7YeUgDvtb+JkJoSkaYC0mxXQ==
781 |   dependencies:
782 |     vscode-languageserver-textdocument "^1.0.1"
783 |     vscode-languageserver-types "^3.16.0"
784 |     vscode-nls "^5.0.0"
785 |     vscode-uri "^3.0.2"
786 | 
787 | vscode-json-languageservice@^4.1.8:
788 |   version "4.1.10"
789 |   resolved "https://registry.yarnpkg.com/vscode-json-languageservice/-/vscode-json-languageservice-4.1.10.tgz#5d5729fc4f3e02f41599e0104523a1877c25f0fb"
790 |   integrity sha512-IHliMEEYSY0tJjJt0ECb8ESx/nRXpoy9kN42WVQXgaqGyizFAf3jibSiezDQTrrY7f3kywXggCU+kkJEM+OLZQ==
791 |   dependencies:
792 |     jsonc-parser "^3.0.0"
793 |     vscode-languageserver-textdocument "^1.0.1"
794 |     vscode-languageserver-types "^3.16.0"
795 |     vscode-nls "^5.0.0"
796 |     vscode-uri "^3.0.2"
797 | 
798 | vscode-jsonrpc@8.0.0-next.5, vscode-jsonrpc@^8.0.0-next.2:
799 |   version "8.0.0-next.5"
800 |   resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-8.0.0-next.5.tgz#44ac984fd8a849b8a351611d5867411226885988"
801 |   integrity sha512-owRllqcFTnz5rXxcbmHPFGmpFmLqj9Z1V3Dzrv+s8ejOHLIT62Pyb5Uqzyl2/in2VP22DmzErPgZwrxjLCIKiQ==
802 | 
803 | vscode-languageserver-protocol@3.17.0-next.12:
804 |   version "3.17.0-next.12"
805 |   resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.0-next.12.tgz#8304d9d1f9490b4f1dd9f46b35d22e87d675e704"
806 |   integrity sha512-VLRcWKOpCXcx9UrqrS+NSF6pNxV498VGYGW+eyp9a79/F9ElUq3wdG6acXYlEfpWHuIxpm6MXps8FU88wqIgTg==
807 |   dependencies:
808 |     vscode-jsonrpc "8.0.0-next.5"
809 |     vscode-languageserver-types "3.17.0-next.6"
810 | 
811 | vscode-languageserver-textdocument@^1.0.1:
812 |   version "1.0.3"
813 |   resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.3.tgz#879f2649bfa5a6e07bc8b392c23ede2dfbf43eff"
814 |   integrity sha512-ynEGytvgTb6HVSUwPJIAZgiHQmPCx8bZ8w5um5Lz+q5DjP0Zj8wTFhQpyg8xaMvefDytw2+HH5yzqS+FhsR28A==
815 | 
816 | vscode-languageserver-types@3.17.0-next.6:
817 |   version "3.17.0-next.6"
818 |   resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.0-next.6.tgz#a62465a6656295e257b33b903bd94ced58464022"
819 |   integrity sha512-rHYeCotiabJHgvIYzWjV8g0dHCxyOQtcryTv1Xa1horaQ4jx2V+rjLBstc6zMpCyrnZcjorwEcAvGBDCd6wudw==
820 | 
821 | vscode-languageserver-types@^3.15.1, vscode-languageserver-types@^3.16.0:
822 |   version "3.16.0"
823 |   resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz#ecf393fc121ec6974b2da3efb3155644c514e247"
824 |   integrity sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==
825 | 
826 | vscode-languageserver@^8.0.0-next.2:
827 |   version "8.0.0-next.6"
828 |   resolved "https://registry.yarnpkg.com/vscode-languageserver/-/vscode-languageserver-8.0.0-next.6.tgz#c349a1f6e56c7034613161c79818d36587b1bf5f"
829 |   integrity sha512-RgGRAsXUksdtCrhtxFUeMXzqE4C/7AHSR6loIQY3GFDNIqrlEIkkQZg2Kkouf/i+eE/Iummn2ZB85VKNTBQgsQ==
830 |   dependencies:
831 |     vscode-languageserver-protocol "3.17.0-next.12"
832 | 
833 | vscode-nls@^5.0.0:
834 |   version "5.0.0"
835 |   resolved "https://registry.yarnpkg.com/vscode-nls/-/vscode-nls-5.0.0.tgz#99f0da0bd9ea7cda44e565a74c54b1f2bc257840"
836 |   integrity sha512-u0Lw+IYlgbEJFF6/qAqG2d1jQmJl0eyAGJHoAJqr2HT4M2BNuQYSEiSE75f52pXHSJm8AlTjnLLbBFPrdz2hpA==
837 | 
838 | vscode-pug-languageservice@0.29.8:
839 |   version "0.29.8"
840 |   resolved "https://registry.yarnpkg.com/vscode-pug-languageservice/-/vscode-pug-languageservice-0.29.8.tgz#3d95f974bc273ddd8f5a8fb5d3ac8064b2dc63d1"
841 |   integrity sha512-QHYAzDSJLg7GOLxCZ12qsM0dAM0dPeMSS1t4kKfzLsfpErmZpFzkAIXbidVrNMdMffGZMtTuIlcpEyWHbx96Iw==
842 |   dependencies:
843 |     "@volar/code-gen" "0.29.8"
844 |     "@volar/shared" "0.29.8"
845 |     "@volar/source-map" "0.29.8"
846 |     "@volar/transforms" "0.29.8"
847 |     pug-lexer "^5.0.1"
848 |     pug-parser "^6.0.0"
849 |     vscode-languageserver "^8.0.0-next.2"
850 | 
851 | vscode-typescript-languageservice@0.29.8:
852 |   version "0.29.8"
853 |   resolved "https://registry.yarnpkg.com/vscode-typescript-languageservice/-/vscode-typescript-languageservice-0.29.8.tgz#370572e8c99c8b8190733a4bfc1b45c5f91aa044"
854 |   integrity sha512-eecDqHk4WjEvy6VHQ6teHczppQ9yJO2wExCy7yu7WiFj35qbw0h4G6Erv46MvP3ClL8FggFzD7s1qM6vdqJUfw==
855 |   dependencies:
856 |     "@volar/shared" "0.29.8"
857 |     semver "^7.3.5"
858 |     upath "^2.0.1"
859 |     vscode-languageserver "^8.0.0-next.2"
860 |     vscode-languageserver-textdocument "^1.0.1"
861 | 
862 | vscode-uri@^2.1.2:
863 |   version "2.1.2"
864 |   resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-2.1.2.tgz#c8d40de93eb57af31f3c715dd650e2ca2c096f1c"
865 |   integrity sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==
866 | 
867 | vscode-uri@^3.0.2:
868 |   version "3.0.3"
869 |   resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.3.tgz#a95c1ce2e6f41b7549f86279d19f47951e4f4d84"
870 |   integrity sha512-EcswR2S8bpR7fD0YPeS7r2xXExrScVMxg4MedACaWHEtx9ftCF/qHG1xGkolzTPcEmjTavCQgbVzHUIdTMzFGA==
871 | 
872 | vscode-vue-languageservice@0.29.8:
873 |   version "0.29.8"
874 |   resolved "https://registry.yarnpkg.com/vscode-vue-languageservice/-/vscode-vue-languageservice-0.29.8.tgz#6d59aab4fb94215b99b6f7d0e2ab73babd398d05"
875 |   integrity sha512-qSJdvW5ttyGUB/8uWDKgo8vnIoFnXYlBP4Z/cn54btsRn6ZMw7IJGJU1381e7p/yGvMTLeGbugD53SghbnSa6g==
876 |   dependencies:
877 |     "@volar/code-gen" "0.29.8"
878 |     "@volar/html2pug" "0.29.8"
879 |     "@volar/shared" "0.29.8"
880 |     "@volar/source-map" "0.29.8"
881 |     "@volar/transforms" "0.29.8"
882 |     "@volar/vue-code-gen" "0.29.8"
883 |     "@vscode/emmet-helper" "^2.8.0"
884 |     "@vue/reactivity" "^3.2.21"
885 |     "@vue/shared" "^3.2.21"
886 |     request-light "^0.5.4"
887 |     upath "^2.0.1"
888 |     vscode-css-languageservice "^5.1.7"
889 |     vscode-html-languageservice "^4.1.0"
890 |     vscode-json-languageservice "^4.1.8"
891 |     vscode-languageserver "^8.0.0-next.2"
892 |     vscode-languageserver-textdocument "^1.0.1"
893 |     vscode-pug-languageservice "0.29.8"
894 |     vscode-typescript-languageservice "0.29.8"
895 | 
896 | "vue-ari@link:../..":
897 |   version "0.0.0"
898 |   uid ""
899 | 
900 | vue-tsc@^0.29.8:
901 |   version "0.29.8"
902 |   resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-0.29.8.tgz#f4d8de5dd8756107c878489ccf9178d2d72fff47"
903 |   integrity sha512-pT0wLRjvRuSmB+J4WJT6uuV9mO0KtSSXEAtaVXZQzyk5+DJdbLIQTbRce/TXSkfqt1l1WogO78RjtOJFiMCgfQ==
904 |   dependencies:
905 |     "@volar/shared" "0.29.8"
906 |     vscode-vue-languageservice "0.29.8"
907 | 
908 | vue@^3.2.25:
909 |   version "3.2.28"
910 |   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.28.tgz#840d193bf9713f57a365ef115c4b1286d43e0e5d"
911 |   integrity sha512-U+jBwVh3RQ9AgceLFdT7i2FFujoC+kYuGrKo5y8aLluWKZWPS40WgA2pyYHaiSX9ydCbEGr3rc/JzdqskzD95g==
912 |   dependencies:
913 |     "@vue/compiler-dom" "3.2.28"
914 |     "@vue/compiler-sfc" "3.2.28"
915 |     "@vue/runtime-dom" "3.2.28"
916 |     "@vue/server-renderer" "3.2.28"
917 |     "@vue/shared" "3.2.28"
918 | 
919 | with@^7.0.0:
920 |   version "7.0.2"
921 |   resolved "https://registry.yarnpkg.com/with/-/with-7.0.2.tgz#ccee3ad542d25538a7a7a80aad212b9828495bac"
922 |   integrity sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==
923 |   dependencies:
924 |     "@babel/parser" "^7.9.6"
925 |     "@babel/types" "^7.9.6"
926 |     assert-never "^1.2.1"
927 |     babel-walk "3.0.0-canary-5"
928 | 
929 | yallist@^4.0.0:
930 |   version "4.0.0"
931 |   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
932 |   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
933 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
3 |   collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!**/node_modules/**'],
4 |   testEnvironment: 'jsdom',
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-ari",
 3 |   "version": "0.0.0-alpha.14",
 4 |   "license": "MIT",
 5 |   "repository": "https://github.com/visualjerk/ari",
 6 |   "main": "lib/index.js",
 7 |   "module": "lib/index.es.js",
 8 |   "types": "lib/index.d.ts",
 9 |   "author": {
10 |     "name": "Jörg Bayreuther",
11 |     "url": "https://github.com/visualjerk"
12 |   },
13 |   "scripts": {
14 |     "lint": "eslint . --ext js,ts,tsx,vue --fix",
15 |     "test": "jest",
16 |     "dev": "yarn build --watch",
17 |     "build": "rollup -c",
18 |     "build:publish": "BUILD_WITH_TYPES=true yarn build",
19 |     "docs:deploy": "cd docs && yarn deploy"
20 |   },
21 |   "dependencies": {
22 |     "@popperjs/core": "2.11.2",
23 |     "body-scroll-lock": "3.0.3"
24 |   },
25 |   "peerDependencies": {
26 |     "vue": "^3.2.26"
27 |   },
28 |   "devDependencies": {
29 |     "@ant-design-vue/babel-plugin-jsx": "1.0.0-rc.1",
30 |     "@babel/core": "7.16.10",
31 |     "@babel/preset-env": "7.16.11",
32 |     "@babel/preset-typescript": "7.16.7",
33 |     "@rollup/plugin-commonjs": "21.0.1",
34 |     "@rollup/plugin-multi-entry": "4.1.0",
35 |     "@rollup/plugin-node-resolve": "13.1.3",
36 |     "@rollup/plugin-typescript": "8.3.0",
37 |     "@testing-library/dom": "8.11.2",
38 |     "@testing-library/jest-dom": "5.16.1",
39 |     "@testing-library/user-event": "13.5.0",
40 |     "@types/jest": "27.4.0",
41 |     "@typescript-eslint/eslint-plugin": "5.10.0",
42 |     "@typescript-eslint/parser": "5.10.0",
43 |     "@vue/compiler-sfc": "3.2.26",
44 |     "@vue/test-utils": "2.0.0-rc.18",
45 |     "babel-jest": " 27.4.6",
46 |     "eslint": "8.7.0",
47 |     "eslint-config-prettier": "8.3.0",
48 |     "eslint-plugin-vue": "8.3.0",
49 |     "husky": "7.0.4",
50 |     "jest": "27.4.7",
51 |     "lint-staged": "12.2.2",
52 |     "prettier": "2.5.1",
53 |     "rollup": "2.66.0",
54 |     "rollup-plugin-delete": "2.0.0",
55 |     "rollup-plugin-dts": "4.1.0",
56 |     "tslib": "2.3.1",
57 |     "typescript": "4.5.5",
58 |     "vue": "3.2.26"
59 |   },
60 |   "husky": {
61 |     "hooks": {
62 |       "pre-commit": "lint-staged"
63 |     }
64 |   },
65 |   "lint-staged": {
66 |     "*.{js,ts,tsx,vue}": [
67 |       "eslint --cache --fix",
68 |       "jest"
69 |     ],
70 |     "*.{css,scss,md}": "prettier --write"
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   trailingComma: 'es5',
3 |   semi: false,
4 |   singleQuote: true,
5 | }
6 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import multi from '@rollup/plugin-multi-entry'
 2 | import typescript from '@rollup/plugin-typescript'
 3 | import { nodeResolve } from '@rollup/plugin-node-resolve'
 4 | import commonjs from '@rollup/plugin-commonjs'
 5 | import del from 'rollup-plugin-delete'
 6 | import dts from 'rollup-plugin-dts'
 7 | 
 8 | const config = [
 9 |   {
10 |     input: 'src/**/index.ts',
11 |     output: [
12 |       {
13 |         file: 'lib/index.js',
14 |         format: 'cjs',
15 |       },
16 |       {
17 |         file: 'lib/index.es.js',
18 |         format: 'es',
19 |       },
20 |     ],
21 |     plugins: [
22 |       del({ targets: 'lib/*' }),
23 |       multi(),
24 |       typescript({
25 |         tsconfig: './tsconfig.json',
26 |       }),
27 |       nodeResolve(),
28 |       commonjs({
29 |         include: /node_modules/,
30 |       }),
31 |     ],
32 |     external: ['vue'],
33 |   },
34 | ]
35 | 
36 | if (process.env.BUILD_WITH_TYPES) {
37 |   config.push({
38 |     input: './lib/dts/**/*.d.ts',
39 |     output: [{ file: 'lib/index.d.ts', format: 'es' }],
40 |     plugins: [multi(), dts(), del({ targets: 'lib/dts', hook: 'buildEnd' })],
41 |   })
42 | }
43 | 
44 | export default config
45 | 


--------------------------------------------------------------------------------
/src/Box/Box.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { Box } from '.'
 2 | import { renderJsx, getByText } from '../../test/utils'
 3 | 
 4 | describe('Box', () => {
 5 |   it('renders correctly', () => {
 6 |     renderJsx(<Box>foo</Box>)
 7 |     expect(getByText('foo')).toMatchInlineSnapshot(`
 8 |       <div>
 9 |         foo
10 |       </div>
11 |     `)
12 |   })
13 | 
14 |   it('renders passed attributes', () => {
15 |     renderJsx(
16 |       <Box tabIndex="0" class="bar" unicorn>
17 |         foo
18 |       </Box>
19 |     )
20 |     expect(getByText('foo')).toMatchInlineSnapshot(`
21 |       <div
22 |         class="bar"
23 |         tabindex="0"
24 |         unicorn="true"
25 |       >
26 |         foo
27 |       </div>
28 |     `)
29 |   })
30 | 
31 |   it('can render as other element types', () => {
32 |     renderJsx(<Box as="span">foo</Box>)
33 |     expect(getByText('foo')).toMatchInlineSnapshot(`
34 |       <span>
35 |         foo
36 |       </span>
37 |     `)
38 |   })
39 | })
40 | 


--------------------------------------------------------------------------------
/src/Box/Box.ts:
--------------------------------------------------------------------------------
 1 | import { defineComponent } from '../utils'
 2 | import { ComponentOptions, ComponentObjectPropsOptions, ref, Ref } from 'vue'
 3 | 
 4 | export type As = string | ComponentOptions
 5 | 
 6 | export interface BoxProps {
 7 |   as: As
 8 | }
 9 | 
10 | export const boxProps: ComponentObjectPropsOptions<BoxProps> = {
11 |   as: {
12 |     type: [String, Object],
13 |     default: 'div',
14 |   },
15 | }
16 | 
17 | export function useBox(): {
18 |   ref: Ref<HTMLElement>
19 | } {
20 |   return {
21 |     ref: ref(null),
22 |   }
23 | }
24 | 
25 | export const Box = defineComponent(boxProps, useBox)
26 | 


--------------------------------------------------------------------------------
/src/Box/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Box'
2 | 


--------------------------------------------------------------------------------
/src/Button/Button.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from '.'
 2 | import { renderJsx, getByText } from '../../test/utils'
 3 | 
 4 | describe('Button', () => {
 5 |   it('renders correctly', async () => {
 6 |     const { nextTick } = renderJsx(<Button>foo</Button>)
 7 |     await nextTick()
 8 |     expect(getByText('foo')).toMatchInlineSnapshot(`
 9 |       <button
10 |         type="button"
11 |       >
12 |         foo
13 |       </button>
14 |     `)
15 |   })
16 | 
17 |   it('can overwrite type', async () => {
18 |     const { nextTick } = renderJsx(<Button type="submit">foo</Button>)
19 |     await nextTick()
20 |     expect(getByText('foo')).toMatchInlineSnapshot(`
21 |       <button
22 |         type="submit"
23 |       >
24 |         foo
25 |       </button>
26 |     `)
27 |   })
28 | 
29 |   it('can render as div', async () => {
30 |     const { nextTick } = renderJsx(<Button as="div">foo</Button>)
31 |     await nextTick()
32 |     expect(getByText('foo')).toMatchInlineSnapshot(`
33 |       <div
34 |         role="button"
35 |         tabindex="0"
36 |       >
37 |         foo
38 |       </div>
39 |     `)
40 |   })
41 | 
42 |   it('can render as a tag', async () => {
43 |     const { nextTick } = renderJsx(<Button as="a">foo</Button>)
44 |     await nextTick()
45 |     // type="" seems to be a bug in Vue
46 |     // https://github.com/vuejs/vue-next/issues/1701
47 |     expect(getByText('foo')).toMatchInlineSnapshot(`
48 |       <a>
49 |         foo
50 |       </a>
51 |     `)
52 |   })
53 | })
54 | 


--------------------------------------------------------------------------------
/src/Button/Button.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentObjectPropsOptions, ref, computed } from 'vue'
 2 | import { defineComponent, useOnElement } from '../utils'
 3 | import { useClickable, clickableProps, ClickableProps } from '../Clickable'
 4 | 
 5 | export type ButtonProps = ClickableProps
 6 | 
 7 | export const buttonProps: ComponentObjectPropsOptions<ButtonProps> = {
 8 |   ...clickableProps,
 9 |   as: {
10 |     type: [String, Object],
11 |     default: 'button',
12 |   },
13 | }
14 | 
15 | export function useButton(props: ButtonProps) {
16 |   const clickable = useClickable(props)
17 | 
18 |   const isButton = ref(false)
19 |   useOnElement(clickable.ref, (element) => {
20 |     isButton.value = element.tagName === 'BUTTON'
21 |   })
22 |   const isLink = ref(false)
23 |   useOnElement(clickable.ref, (element) => {
24 |     isLink.value = element.tagName === 'A'
25 |   })
26 | 
27 |   return {
28 |     ...clickable,
29 |     type: computed(() => (isButton.value ? 'button' : null)),
30 |     role: computed(() => (isButton.value || isLink.value ? null : 'button')),
31 |   }
32 | }
33 | 
34 | export const Button = defineComponent(buttonProps, useButton)
35 | 


--------------------------------------------------------------------------------
/src/Button/README.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | description: ''
 3 | sidebar: 'docs'
 4 | prev: '/docs/'
 5 | next: '/docs/modal/'
 6 | ---
 7 | 
 8 | # Button
 9 | 
10 | Accessible `Button` component that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation. It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
11 | 
12 | ## Installation
13 | 
14 | ```bash
15 | npm i vue-ari
16 | ```
17 | 
18 | or
19 | 
20 | ```bash
21 | yarn add vue-ari
22 | ```
23 | 
24 | ## Usage
25 | 
26 | ```html
27 | <template>
28 |   <AButton v-bind="$props">
29 |     <slot />
30 |   </AButton>
31 | </template>
32 | 
33 | <script>
34 |   import { Button as AButton, buttonProps } from 'vue-ari'
35 | 
36 |   export default {
37 |     name: 'AppButton',
38 |     components: {
39 |       AButton,
40 |     },
41 |     props: buttonProps,
42 |   }
43 | </script>
44 | ```
45 | 
46 | ## Styling
47 | 
48 | Ari components don't include styling by default. This gives you the ability to add styles however you like.
49 | 
50 | ### Example Using Tailwind
51 | 
52 | ```html
53 | <template>
54 |   <AButton
55 |     v-bind="$props"
56 |     class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
57 |     :class="[
58 |       $props.disabled
59 |         ? 'bg-blue-200 cursor-not-allowed'
60 |         : 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800',
61 |     ]"
62 |   >
63 |     <slot />
64 |   </AButton>
65 | </template>
66 | 
67 | <script>
68 |   import { Button as AButton, buttonProps } from 'vue-ari'
69 | 
70 |   export default {
71 |     name: 'AppButton',
72 |     components: {
73 |       AButton,
74 |     },
75 |     props: buttonProps,
76 |   }
77 | </script>
78 | ```
79 | 


--------------------------------------------------------------------------------
/src/Button/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Button'
2 | 


--------------------------------------------------------------------------------
/src/Clickable/Clickable.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { Clickable } from '.'
 2 | import { renderJsx, getByText, pressSpace, pressEnter } from '../../test/utils'
 3 | 
 4 | describe('Clickable', () => {
 5 |   it('renders correctly', () => {
 6 |     renderJsx(<Clickable>foo</Clickable>)
 7 |     expect(getByText('foo')).toMatchInlineSnapshot(`
 8 |       <div
 9 |         tabindex="0"
10 |       >
11 |         foo
12 |       </div>
13 |     `)
14 |   })
15 | 
16 |   it('emits click event on press space', () => {
17 |     const clickHandler = jest.fn()
18 |     renderJsx(<Clickable onClick={clickHandler}>foo</Clickable>)
19 |     pressSpace(getByText('foo'))
20 |     expect(clickHandler).toBeCalledTimes(1)
21 |   })
22 | 
23 |   it('emits no click event on keydown space when disabled', () => {
24 |     const clickHandler = jest.fn()
25 |     renderJsx(
26 |       <Clickable onClick={clickHandler} disabled>
27 |         foo
28 |       </Clickable>
29 |     )
30 |     pressSpace(getByText('foo'))
31 |     expect(clickHandler).toBeCalledTimes(0)
32 |   })
33 | 
34 |   it('emits only one click event on press space as button', () => {
35 |     const clickHandler = jest.fn()
36 |     renderJsx(
37 |       <Clickable onClick={clickHandler} as="button">
38 |         foo
39 |       </Clickable>
40 |     )
41 |     pressSpace(getByText('foo'))
42 |     expect(clickHandler).toBeCalledTimes(1)
43 |   })
44 | 
45 |   it('emits click event on press enter', () => {
46 |     const clickHandler = jest.fn()
47 |     renderJsx(<Clickable onClick={clickHandler}>foo</Clickable>)
48 |     pressEnter(getByText('foo'))
49 |     expect(clickHandler).toBeCalledTimes(1)
50 |   })
51 | 
52 |   it('emits no click event on press enter when disabled', () => {
53 |     const clickHandler = jest.fn()
54 |     renderJsx(
55 |       <Clickable onClick={clickHandler} disabled>
56 |         foo
57 |       </Clickable>
58 |     )
59 |     pressEnter(getByText('foo'))
60 |     expect(clickHandler).toBeCalledTimes(0)
61 |   })
62 | 
63 |   it('emits only one click event on press enter as button', async () => {
64 |     const clickHandler = jest.fn()
65 |     renderJsx(
66 |       <Clickable onClick={clickHandler} as="button">
67 |         foo
68 |       </Clickable>
69 |     )
70 |     pressEnter(getByText('foo'))
71 |     expect(clickHandler).toBeCalledTimes(1)
72 |   })
73 | })
74 | 


--------------------------------------------------------------------------------
/src/Clickable/Clickable.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentObjectPropsOptions } from 'vue'
 2 | import { defineComponent } from '../utils'
 3 | import { useTabbable, tabbableProps, TabbableProps } from '../Tabbable'
 4 | 
 5 | export type ClickableProps = TabbableProps
 6 | 
 7 | export const clickableProps: ComponentObjectPropsOptions<ClickableProps> = {
 8 |   ...tabbableProps,
 9 | }
10 | 
11 | export function useClickable(props: ClickableProps) {
12 |   const tabbable = useTabbable(props)
13 | 
14 |   function handleKeydown(event: KeyboardEvent & { target: HTMLElement }) {
15 |     if (
16 |       event.target?.tagName !== 'BUTTON' &&
17 |       [' ', 'Enter'].includes(event.key)
18 |     ) {
19 |       tabbable.onClick(event)
20 |     }
21 |   }
22 | 
23 |   return {
24 |     ...tabbable,
25 |     onKeydown: handleKeydown,
26 |   }
27 | }
28 | 
29 | export const Clickable = defineComponent(clickableProps, useClickable)
30 | 


--------------------------------------------------------------------------------
/src/Clickable/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Clickable'
2 | 


--------------------------------------------------------------------------------
/src/Dialog/Dialog.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ComponentObjectPropsOptions,
  3 |   Ref,
  4 |   watch,
  5 |   onMounted,
  6 |   onBeforeUnmount,
  7 | } from 'vue'
  8 | import {
  9 |   getElementFromRef,
 10 |   getTabbableElements,
 11 |   getNextTabbable,
 12 |   elementIsWithin,
 13 |   focusIsWithin,
 14 |   defineComponent,
 15 |   focusFirstFocusable,
 16 |   forceFocus,
 17 | } from '../utils'
 18 | import {
 19 |   useDisclosureContent,
 20 |   disclosureContentProps,
 21 |   DisclosureContentProps,
 22 | } from '../Disclosure'
 23 | 
 24 | export type DialogProps = DisclosureContentProps
 25 | 
 26 | export const dialogProps: ComponentObjectPropsOptions<DialogProps> = {
 27 |   ...disclosureContentProps,
 28 | }
 29 | 
 30 | function useHideOnClickOutside(props: DialogProps, ref: Ref<HTMLElement>) {
 31 |   const { hide, baseId } = props
 32 | 
 33 |   function hideOnClickOutside(event: MouseEvent) {
 34 |     const disclosure: HTMLElement = document.querySelector(
 35 |       `[aria-controls="${baseId}"]`
 36 |     )
 37 |     if (
 38 |       props.visible.value &&
 39 |       !elementIsWithin(getElementFromRef(ref), event.target as HTMLElement) &&
 40 |       !elementIsWithin(disclosure, event.target as HTMLElement)
 41 |     ) {
 42 |       hide()
 43 |     }
 44 |   }
 45 | 
 46 |   watch(
 47 |     () => props.visible.value,
 48 |     (visible) => {
 49 |       if (visible) {
 50 |         document.addEventListener('click', hideOnClickOutside)
 51 |       } else {
 52 |         document.removeEventListener('click', hideOnClickOutside)
 53 |       }
 54 |     }
 55 |   )
 56 | 
 57 |   onBeforeUnmount(() => {
 58 |     document.removeEventListener('click', hideOnClickOutside)
 59 |   })
 60 | }
 61 | 
 62 | function useHideOnFocusOutside(props: DialogProps, ref: Ref<HTMLElement>) {
 63 |   const { hide, baseId } = props
 64 | 
 65 |   function hideOnFocusOutside(event: FocusEvent) {
 66 |     const target = event.target as HTMLElement
 67 |     const disclosure: HTMLElement = document.querySelector(
 68 |       `[aria-controls="${baseId}"]`
 69 |     )
 70 |     if (
 71 |       props.visible.value &&
 72 |       !elementIsWithin(getElementFromRef(ref), target) &&
 73 |       !elementIsWithin(disclosure, target)
 74 |     ) {
 75 |       hide()
 76 |     }
 77 |   }
 78 | 
 79 |   watch(
 80 |     () => props.visible.value,
 81 |     (visible) => {
 82 |       if (visible) {
 83 |         document.addEventListener('focusin', hideOnFocusOutside)
 84 |       } else {
 85 |         document.removeEventListener('focusin', hideOnFocusOutside)
 86 |       }
 87 |     }
 88 |   )
 89 | 
 90 |   onBeforeUnmount(() => {
 91 |     document.removeEventListener('focusin', hideOnFocusOutside)
 92 |   })
 93 | }
 94 | 
 95 | function useHandleToggleFocus(props: DialogProps, ref: Ref<HTMLElement>) {
 96 |   let lastFocusedElement: HTMLElement = null
 97 | 
 98 |   onMounted(() => {
 99 |     if (props.visible.value) {
100 |       lastFocusedElement = document.activeElement as HTMLElement
101 |     }
102 |   })
103 | 
104 |   watch(
105 |     () => props.visible.value,
106 |     (visible) => {
107 |       if (visible) {
108 |         lastFocusedElement = document.activeElement as HTMLElement
109 |         focusFirstFocusable(getElementFromRef(ref))
110 |       }
111 |     },
112 |     {
113 |       flush: 'post',
114 |     }
115 |   )
116 |   // Needs to be a 'sync' watcher, so we can check
117 |   // if focus was within the dialog before it is closed
118 |   watch(
119 |     () => props.visible.value,
120 |     (visible) => {
121 |       if (!visible && focusIsWithin(getElementFromRef(ref))) {
122 |         forceFocus(lastFocusedElement)
123 |       }
124 |     },
125 |     {
126 |       flush: 'sync',
127 |     }
128 |   )
129 | }
130 | 
131 | function handleTab(
132 |   event: KeyboardEvent,
133 |   props: DialogProps,
134 |   ref: Ref<HTMLElement>
135 | ) {
136 |   const disclosure: HTMLElement = document.querySelector(
137 |     `[aria-controls="${props.baseId}"]`
138 |   )
139 |   const dialog = getElementFromRef(ref)
140 |   const tabbableElements = getTabbableElements(dialog)
141 |   if (!event.shiftKey && reachedLastTabbable(tabbableElements)) {
142 |     const nextTabbable = getNextTabbable(disclosure)
143 |     if (nextTabbable && nextTabbable !== dialog) {
144 |       nextTabbable.focus()
145 |       event.preventDefault()
146 |     } else {
147 |       props.hide()
148 |     }
149 |   } else if (event.shiftKey && reachedFirstTabbable(tabbableElements)) {
150 |     disclosure.focus()
151 |     event.preventDefault()
152 |   }
153 | 
154 |   function reachedLastTabbable(tabbableElements) {
155 |     return (
156 |       !tabbableElements.length ||
157 |       tabbableElements[tabbableElements.length - 1] === document.activeElement
158 |     )
159 |   }
160 | 
161 |   function reachedFirstTabbable(tabbableElements) {
162 |     return (
163 |       !tabbableElements.length || tabbableElements[0] === document.activeElement
164 |     )
165 |   }
166 | }
167 | 
168 | export function useDialog(props: DialogProps) {
169 |   const disclosureContent = useDisclosureContent(props)
170 |   const { ref } = disclosureContent
171 |   useHideOnClickOutside(props, ref)
172 |   useHideOnFocusOutside(props, ref)
173 |   useHandleToggleFocus(props, ref)
174 | 
175 |   function handleKeydown(event: KeyboardEvent) {
176 |     if (event.key === 'Escape') {
177 |       props.hide()
178 |     }
179 |     if (event.key === 'Tab') {
180 |       handleTab(event, props, ref)
181 |     }
182 |   }
183 | 
184 |   return {
185 |     ...disclosureContent,
186 |     role: 'dialog',
187 |     tabindex: -1,
188 |     onKeydown: handleKeydown,
189 |     withPortal: true,
190 |   }
191 | }
192 | 
193 | export const Dialog = defineComponent(dialogProps, useDialog)
194 | 


--------------------------------------------------------------------------------
/src/Dialog/DialogDisclosure.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentObjectPropsOptions } from 'vue'
 2 | import { defineComponent, getTabbableElements } from '../utils'
 3 | import { useDisclosure, disclosureProps, DisclosureProps } from '../Disclosure'
 4 | 
 5 | export type DialogDisclosureProps = DisclosureProps
 6 | 
 7 | export const dialogDisclosureProps: ComponentObjectPropsOptions<DialogDisclosureProps> = {
 8 |   ...disclosureProps,
 9 | }
10 | 
11 | export function useDialogDisclosure(props: DialogDisclosureProps) {
12 |   const Disclosure = useDisclosure(props)
13 | 
14 |   function handleKeydown(event: KeyboardEvent) {
15 |     if (event.key === 'Tab' && !event.shiftKey && props.visible.value) {
16 |       const dialog = document.getElementById(props.baseId)
17 |       const tabbableElements = getTabbableElements(dialog)
18 |       if (tabbableElements.length) {
19 |         tabbableElements[0].focus()
20 |         event.preventDefault()
21 |       }
22 |     }
23 |   }
24 | 
25 |   return {
26 |     ...Disclosure,
27 |     'aria-haspopup': 'dialog',
28 |     onKeydown: handleKeydown,
29 |   }
30 | }
31 | 
32 | export const DialogDisclosure = defineComponent(
33 |   dialogDisclosureProps,
34 |   useDialogDisclosure
35 | )
36 | 


--------------------------------------------------------------------------------
/src/Dialog/DialogState.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentObjectPropsOptions } from 'vue'
 2 | import {
 3 |   DisclosureStateReturn,
 4 |   disclosureStateReturn,
 5 |   useDisclosureState,
 6 | } from '../Disclosure'
 7 | 
 8 | export type DialogStateReturn = DisclosureStateReturn
 9 | 
10 | export const dialogStateReturn: ComponentObjectPropsOptions<DialogStateReturn> = {
11 |   ...disclosureStateReturn,
12 | }
13 | 
14 | export function useDialogState(): DialogStateReturn {
15 |   const disclosure = useDisclosureState()
16 | 
17 |   return {
18 |     ...disclosure,
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/Dialog/__tests__/Dialog.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { ref } from 'vue'
 2 | import { Dialog } from '..'
 3 | import { renderJsx, getByText } from '../../../test/utils'
 4 | 
 5 | describe('Dialog', () => {
 6 |   it('renders correctly', async () => {
 7 |     const { nextTick } = renderJsx(
 8 |       <Dialog baseId="id" visible={ref(false)}>
 9 |         foo
10 |       </Dialog>
11 |     )
12 |     await nextTick()
13 |     expect(getByText('foo')).toMatchInlineSnapshot(`
14 |       <div
15 |         hidden=""
16 |         id="id"
17 |         role="dialog"
18 |         style="display: none;"
19 |         tabindex="-1"
20 |       >
21 |         foo
22 |       </div>
23 |     `)
24 |   })
25 | 
26 |   it('renders in portal', async () => {
27 |     const { nextTick } = renderJsx(
28 |       <div>
29 |         container
30 |         <Dialog baseId="id" visible={ref(false)}>
31 |           foo
32 |         </Dialog>
33 |       </div>
34 |     )
35 |     await nextTick()
36 |     expect(getByText('foo').parentElement).not.toBe(getByText('container'))
37 |   })
38 | 
39 |   it('renders native attributes', async () => {
40 |     const { nextTick } = renderJsx(
41 |       <Dialog baseId="id" visible={ref(false)} aria-label="bar">
42 |         foo
43 |       </Dialog>
44 |     )
45 |     await nextTick()
46 |     expect(getByText('foo')).toHaveAttribute('aria-label', 'bar')
47 |   })
48 | 
49 |   it('does not warn when receiving native attributes', async () => {
50 |     const warn = console.warn
51 |     console.warn = jest.fn()
52 |     renderJsx(
53 |       <Dialog baseId="id" visible={ref(false)} aria-label="bar">
54 |         foo
55 |       </Dialog>
56 |     )
57 |     expect(console.warn).toHaveBeenCalledTimes(0)
58 |     console.warn = warn
59 |   })
60 | 
61 |   it('can overwrite default tabindex', async () => {
62 |     const { nextTick } = renderJsx(
63 |       <Dialog baseId="id" visible={ref(false)} tabindex="0">
64 |         foo
65 |       </Dialog>
66 |     )
67 |     await nextTick()
68 |     expect(getByText('foo')).toHaveAttribute('tabindex', '0')
69 |   })
70 | })
71 | 


--------------------------------------------------------------------------------
/src/Dialog/__tests__/DialogDisclosure.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { ref } from 'vue'
 2 | import { DialogDisclosure } from '..'
 3 | import { renderJsx, getByText } from '../../../test/utils'
 4 | 
 5 | describe('DialogDisclosure', () => {
 6 |   it('renders correctly', async () => {
 7 |     const { nextTick } = renderJsx(
 8 |       <DialogDisclosure baseId="id" visible={ref(false)}>
 9 |         foo
10 |       </DialogDisclosure>
11 |     )
12 |     await nextTick()
13 |     expect(getByText('foo')).toMatchInlineSnapshot(`
14 |     <button
15 |       aria-controls="id"
16 |       aria-expanded="false"
17 |       aria-haspopup="dialog"
18 |       type="button"
19 |     >
20 |       foo
21 |     </button>
22 |     `)
23 |   })
24 | })
25 | 


--------------------------------------------------------------------------------
/src/Dialog/__tests__/index.spec.tsx:
--------------------------------------------------------------------------------
  1 | import { DialogDisclosure, Dialog, useDialogState } from '..'
  2 | import {
  3 |   render,
  4 |   getByText,
  5 |   click,
  6 |   pressEnter,
  7 |   pressSpace,
  8 |   pressEsc,
  9 |   tab,
 10 | } from '../../../test/utils'
 11 | 
 12 | function createTestSetup({
 13 |   template = `
 14 | <div>
 15 |   <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
 16 |   <Dialog v-bind="dialog">bar</Dialog>
 17 | </div>
 18 |   `,
 19 |   visible = false,
 20 | } = {}) {
 21 |   const { nextTick } = render({
 22 |     setup() {
 23 |       const dialog = useDialogState()
 24 |       if (visible) {
 25 |         dialog.show()
 26 |       }
 27 |       return {
 28 |         dialog,
 29 |       }
 30 |     },
 31 |     components: {
 32 |       Dialog,
 33 |       DialogDisclosure,
 34 |     },
 35 |     template,
 36 |   })
 37 | 
 38 |   return {
 39 |     nextTick,
 40 |     content: getByText('bar'),
 41 |     disclosure: getByText('foo'),
 42 |   }
 43 | }
 44 | 
 45 | describe('Dialog Composition', () => {
 46 |   it('content is hidden by default', () => {
 47 |     const { content } = createTestSetup()
 48 |     expect(content).not.toBeVisible()
 49 |   })
 50 | 
 51 |   it('disclosure opens content', async () => {
 52 |     const { content, disclosure, nextTick } = createTestSetup()
 53 |     expect(content).not.toBeVisible()
 54 |     click(disclosure)
 55 |     await nextTick()
 56 |     expect(content).toBeVisible()
 57 |   })
 58 | 
 59 |   it('disclosure closes content', async () => {
 60 |     const { content, disclosure, nextTick } = createTestSetup()
 61 |     click(disclosure)
 62 |     await nextTick()
 63 |     click(disclosure)
 64 |     await nextTick()
 65 |     expect(content).not.toBeVisible()
 66 |   })
 67 | 
 68 |   it('disclosure toggles content with enter', async () => {
 69 |     const { content, disclosure, nextTick } = createTestSetup()
 70 |     pressEnter(disclosure)
 71 |     await nextTick()
 72 |     expect(content).toBeVisible()
 73 |     pressEnter(disclosure)
 74 |     await nextTick()
 75 |     expect(content).not.toBeVisible()
 76 |   })
 77 | 
 78 |   it('disclosure toggles content with space', async () => {
 79 |     const { content, disclosure, nextTick } = createTestSetup()
 80 |     pressSpace(disclosure)
 81 |     await nextTick()
 82 |     expect(content).toBeVisible()
 83 |     pressSpace(disclosure)
 84 |     await nextTick()
 85 |     expect(content).not.toBeVisible()
 86 |   })
 87 | 
 88 |   it('show focuses dialog', async () => {
 89 |     const { content, disclosure, nextTick } = createTestSetup()
 90 |     click(disclosure)
 91 |     await nextTick()
 92 |     expect(content).toHaveFocus()
 93 |   })
 94 | 
 95 |   it('show focuses first focusable element', async () => {
 96 |     const { disclosure, nextTick } = createTestSetup({
 97 |       template: `
 98 |     <div>
 99 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
100 |       <Dialog v-bind="dialog">bar<button>first</button></Dialog>
101 |     </div>
102 |       `,
103 |     })
104 |     click(disclosure)
105 |     await nextTick()
106 |     expect(getByText('first')).toHaveFocus()
107 |   })
108 | 
109 |   it('show focuses dialog with tabindex 0', async () => {
110 |     const { content, disclosure, nextTick } = createTestSetup({
111 |       template: `
112 |     <div>
113 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
114 |       <Dialog v-bind="dialog" tabindex="0">bar<button>first</button></Dialog>
115 |     </div>
116 |       `,
117 |     })
118 |     click(disclosure)
119 |     await nextTick()
120 |     expect(content).toHaveFocus()
121 |   })
122 | 
123 |   it('esc hides dialog', async () => {
124 |     const { content, disclosure, nextTick } = createTestSetup()
125 |     click(disclosure)
126 |     await nextTick()
127 |     pressEsc(content)
128 |     await nextTick()
129 |     expect(content).not.toBeVisible()
130 |   })
131 | 
132 |   it('hide focuses disclosure', async () => {
133 |     const { content, disclosure, nextTick } = createTestSetup()
134 |     click(disclosure)
135 |     await nextTick()
136 |     pressEsc(content)
137 |     await nextTick()
138 |     expect(disclosure).toHaveFocus()
139 |   })
140 | 
141 |   it('hide focuses last active element without real disclosure', async () => {
142 |     const { disclosure: outsideButton, nextTick } = createTestSetup({
143 |       template: `
144 |     <div>
145 |       <button @click="dialog.show">foo</button>
146 |       <Dialog v-bind="dialog">
147 |         bar
148 |         <button @click="dialog.hide">hide</button>
149 |       </Dialog>
150 |     </div>
151 |       `,
152 |     })
153 | 
154 |     click(outsideButton)
155 |     await nextTick()
156 |     click(getByText('hide'))
157 |     await nextTick()
158 |     expect(outsideButton).toHaveFocus()
159 |   })
160 | 
161 |   it('hide focuses document body when visible initially', async () => {
162 |     const { nextTick } = createTestSetup({
163 |       template: `
164 |     <div>
165 |       <button>foo</button>
166 |       <Dialog v-bind="dialog">
167 |         bar
168 |         <button @click="dialog.hide">hide</button>
169 |       </Dialog>
170 |     </div>
171 |       `,
172 |       visible: true,
173 |     })
174 | 
175 |     click(getByText('hide'))
176 |     await nextTick()
177 |     expect(document.body).toHaveFocus()
178 |   })
179 | 
180 |   it('click outside hides dialog', async () => {
181 |     const { content, disclosure, nextTick } = createTestSetup({
182 |       template: `
183 |     <div>
184 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
185 |       <Dialog v-bind="dialog">bar</Dialog>
186 |       <button>outside</button>
187 |     </div>
188 |       `,
189 |     })
190 |     click(disclosure)
191 |     await nextTick()
192 |     click(getByText('outside'))
193 |     await nextTick()
194 |     expect(content).not.toBeVisible()
195 |   })
196 | 
197 |   it('click inside does not hide dialog', async () => {
198 |     const { content, disclosure, nextTick } = createTestSetup({
199 |       template: `
200 |     <div>
201 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
202 |       <Dialog v-bind="dialog">bar<button>inside</button></Dialog>
203 |     </div>
204 |       `,
205 |     })
206 |     click(disclosure)
207 |     await nextTick()
208 |     click(getByText('inside'))
209 |     await nextTick()
210 |     expect(content).toBeVisible()
211 |   })
212 | 
213 |   it('click on dialog does not hide dialog', async () => {
214 |     const { content, disclosure, nextTick } = createTestSetup()
215 |     click(disclosure)
216 |     await nextTick()
217 |     click(content)
218 |     await nextTick()
219 |     expect(content).toBeVisible()
220 |   })
221 | 
222 |   it('tab focuses element after disclosure', async () => {
223 |     const { disclosure, nextTick } = createTestSetup({
224 |       template: `
225 |     <div>
226 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
227 |       <button>next</button>
228 |       <Dialog v-bind="dialog">bar</Dialog>
229 |     </div>
230 |       `,
231 |     })
232 |     click(disclosure)
233 |     await nextTick()
234 |     tab()
235 |     await nextTick()
236 |     expect(getByText('next')).toHaveFocus()
237 |   })
238 | 
239 |   it('shift tab focuses disclosure', async () => {
240 |     const { disclosure, nextTick } = createTestSetup({
241 |       template: `
242 |     <div>
243 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
244 |       <button>next</button>
245 |       <Dialog v-bind="dialog">bar</Dialog>
246 |     </div>
247 |       `,
248 |     })
249 |     click(disclosure)
250 |     await nextTick()
251 |     tab({ shift: true })
252 |     await nextTick()
253 |     expect(disclosure).toHaveFocus()
254 |   })
255 | 
256 |   it('tab focuses inner tabbable elements', async () => {
257 |     const { disclosure, nextTick } = createTestSetup({
258 |       template: `
259 |     <div>
260 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
261 |       <button>next</button>
262 |       <Dialog v-bind="dialog">bar<button>inner</button><button>nextinner</button></Dialog>
263 |     </div>
264 |       `,
265 |     })
266 |     click(disclosure)
267 |     await nextTick()
268 |     tab()
269 |     await nextTick()
270 |     expect(getByText('nextinner')).toHaveFocus()
271 |   })
272 | 
273 |   it('shift tab focuses inner tabbable elements', async () => {
274 |     const { disclosure, nextTick } = createTestSetup({
275 |       template: `
276 |     <div>
277 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
278 |       <button>next</button>
279 |       <Dialog v-bind="dialog">bar<button>inner</button><button>nextinner</button></Dialog>
280 |     </div>
281 |       `,
282 |     })
283 |     click(disclosure)
284 |     await nextTick()
285 |     tab()
286 |     await nextTick()
287 |     tab({ shift: true })
288 |     await nextTick()
289 |     expect(getByText('inner')).toHaveFocus()
290 |   })
291 | 
292 |   it('tab on disclosure focuses first tabbable element', async () => {
293 |     const { disclosure, nextTick } = createTestSetup({
294 |       template: `
295 |     <div>
296 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
297 |       <button>next</button>
298 |       <Dialog v-bind="dialog">bar<button>inner</button></Dialog>
299 |     </div>
300 |       `,
301 |     })
302 |     click(disclosure)
303 |     await nextTick()
304 |     tab({ shift: true })
305 |     await nextTick()
306 |     tab()
307 |     await nextTick()
308 |     expect(getByText('inner')).toHaveFocus()
309 |   })
310 | 
311 |   it('tab on disclosure focuses dialog with tabindex 0', async () => {
312 |     const { content, disclosure, nextTick } = createTestSetup({
313 |       template: `
314 |     <div>
315 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
316 |       <button>next</button>
317 |       <Dialog v-bind="dialog" tabindex="0">bar</Dialog>
318 |     </div>
319 |       `,
320 |     })
321 |     click(disclosure)
322 |     await nextTick()
323 |     tab({ shift: true })
324 |     await nextTick()
325 |     tab()
326 |     await nextTick()
327 |     expect(content).toHaveFocus()
328 |   })
329 | 
330 |   it('tab on disclosure focuses next element when dialog is hidden', async () => {
331 |     const { disclosure, nextTick } = createTestSetup({
332 |       template: `
333 |     <div>
334 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
335 |       <button>next</button>
336 |       <Dialog v-bind="dialog">bar<button>inner</button></Dialog>
337 |     </div>
338 |       `,
339 |     })
340 |     disclosure.focus()
341 |     tab()
342 |     await nextTick()
343 |     expect(getByText('next')).toHaveFocus()
344 |   })
345 | 
346 |   it('focus out from disclosure hides dialog', async () => {
347 |     const { content, disclosure, nextTick } = createTestSetup({
348 |       template: `
349 |     <div>
350 |       <button>first</button>
351 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
352 |       <Dialog v-bind="dialog">bar</Dialog>
353 |     </div>
354 |       `,
355 |     })
356 |     click(disclosure)
357 |     await nextTick()
358 |     tab({ shift: true })
359 |     await nextTick()
360 |     tab({ shift: true })
361 |     await nextTick()
362 |     expect(content).not.toBeVisible()
363 |   })
364 | 
365 |   it('focus out from dialog hides dialog', async () => {
366 |     const { content, disclosure, nextTick } = createTestSetup({
367 |       template: `
368 |     <div>
369 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
370 |       <button>next</button>
371 |       <Dialog v-bind="dialog">bar</Dialog>
372 |     </div>
373 |       `,
374 |     })
375 |     click(disclosure)
376 |     await nextTick()
377 |     tab()
378 |     await nextTick()
379 |     expect(content).not.toBeVisible()
380 |   })
381 | 
382 |   it('tab without tabbable element after disclosure hides dialog', async () => {
383 |     const { content, disclosure, nextTick } = createTestSetup({
384 |       template: `
385 |     <div>
386 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
387 |       <Dialog v-bind="dialog">bar</Dialog>
388 |     </div>
389 |       `,
390 |     })
391 |     click(disclosure)
392 |     await nextTick()
393 |     tab()
394 |     await nextTick()
395 |     expect(content).not.toBeVisible()
396 |   })
397 | 
398 |   it('tab without tabbable element after disclosure and tabindex 0 on dialog hides dialog', async () => {
399 |     const { content, disclosure, nextTick } = createTestSetup({
400 |       template: `
401 |     <div>
402 |       <DialogDisclosure v-bind="dialog">foo</DialogDisclosure>
403 |       <Dialog v-bind="dialog" tabindex="0">bar</Dialog>
404 |     </div>
405 |       `,
406 |     })
407 |     click(disclosure)
408 |     await nextTick()
409 |     tab()
410 |     await nextTick()
411 |     expect(content).not.toBeVisible()
412 |   })
413 | })
414 | 


--------------------------------------------------------------------------------
/src/Dialog/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Dialog'
2 | export * from './DialogDisclosure'
3 | export * from './DialogState'
4 | 


--------------------------------------------------------------------------------
/src/Disclosure/Disclosure.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentObjectPropsOptions, computed } from 'vue'
 2 | import { defineComponent } from '../utils'
 3 | import { useButton, buttonProps, ButtonProps } from '../Button'
 4 | import { disclosureStateReturn, DisclosureStateReturn } from './DisclosureState'
 5 | 
 6 | export interface DisclosureProps extends ButtonProps, DisclosureStateReturn {}
 7 | 
 8 | export const disclosureProps: ComponentObjectPropsOptions<DisclosureProps> = {
 9 |   ...buttonProps,
10 |   ...disclosureStateReturn,
11 | }
12 | 
13 | export function useDisclosure(props: DisclosureProps) {
14 |   const button = useButton(props)
15 | 
16 |   return {
17 |     ...button,
18 |     'aria-expanded': computed(() => (props.visible.value ? 'true' : 'false')),
19 |     'aria-controls': props.baseId,
20 |     onClick: props.toggle,
21 |   }
22 | }
23 | 
24 | export const Disclosure = defineComponent(disclosureProps, useDisclosure)
25 | 


--------------------------------------------------------------------------------
/src/Disclosure/DisclosureContent.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentObjectPropsOptions } from 'vue'
 2 | import { defineComponent, useVisibilityTransition } from '../utils'
 3 | import { useBox, boxProps, BoxProps } from '../Box'
 4 | import { disclosureStateReturn, DisclosureStateReturn } from './DisclosureState'
 5 | 
 6 | export interface DisclosureContentProps
 7 |   extends BoxProps,
 8 |     DisclosureStateReturn {}
 9 | 
10 | export const disclosureContentProps: ComponentObjectPropsOptions<DisclosureContentProps> =
11 |   {
12 |     ...boxProps,
13 |     ...disclosureStateReturn,
14 |   }
15 | 
16 | export function useDisclosureContent(props: DisclosureContentProps) {
17 |   const box = useBox()
18 | 
19 |   useVisibilityTransition(props.visible, box.ref)
20 | 
21 |   return {
22 |     ...box,
23 |     id: props.baseId,
24 |   }
25 | }
26 | 
27 | export const DisclosureContent = defineComponent(
28 |   disclosureContentProps,
29 |   useDisclosureContent
30 | )
31 | 


--------------------------------------------------------------------------------
/src/Disclosure/DisclosureState.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentObjectPropsOptions, ref, Ref, PropType } from 'vue'
 2 | 
 3 | let currentIdCount = 0
 4 | 
 5 | export interface DisclosureStateReturn {
 6 |   baseId: string
 7 |   visible: Ref<boolean>
 8 |   show: () => void
 9 |   hide: () => void
10 |   toggle: () => void
11 | }
12 | 
13 | export const disclosureStateReturn: ComponentObjectPropsOptions<DisclosureStateReturn> = {
14 |   baseId: {
15 |     type: String,
16 |     required: true,
17 |   },
18 |   visible: {
19 |     required: true,
20 |   },
21 |   show: {
22 |     type: Function as PropType<() => void>,
23 |   },
24 |   hide: {
25 |     type: Function as PropType<() => void>,
26 |   },
27 |   toggle: {
28 |     type: Function as PropType<() => void>,
29 |   },
30 | }
31 | 
32 | export function useDisclosureState(): DisclosureStateReturn {
33 |   const baseId = `disclosure-${currentIdCount++}`
34 |   const visible = ref(false)
35 | 
36 |   function show() {
37 |     visible.value = true
38 |   }
39 | 
40 |   function hide() {
41 |     visible.value = false
42 |   }
43 | 
44 |   function toggle() {
45 |     visible.value = !visible.value
46 |   }
47 | 
48 |   return {
49 |     baseId,
50 |     visible,
51 |     show,
52 |     hide,
53 |     toggle,
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/Disclosure/__tests__/Disclosure.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { ref } from 'vue'
 2 | import { Disclosure } from '..'
 3 | import { renderJsx, getByText } from '../../../test/utils'
 4 | 
 5 | describe('Disclosure', () => {
 6 |   it('renders correctly', async () => {
 7 |     const { nextTick } = renderJsx(
 8 |       <Disclosure visible={ref(false)} baseId="id">
 9 |         foo
10 |       </Disclosure>
11 |     )
12 |     await nextTick()
13 |     expect(getByText('foo')).toMatchInlineSnapshot(`
14 |       <button
15 |         aria-controls="id"
16 |         aria-expanded="false"
17 |         type="button"
18 |       >
19 |         foo
20 |       </button>
21 |     `)
22 |   })
23 | 
24 |   it('renders visible state correctly', async () => {
25 |     const { nextTick } = renderJsx(
26 |       <Disclosure visible={ref(true)} baseId="id">
27 |         foo
28 |       </Disclosure>
29 |     )
30 |     await nextTick()
31 |     expect(getByText('foo')).toMatchInlineSnapshot(`
32 |       <button
33 |         aria-controls="id"
34 |         aria-expanded="true"
35 |         type="button"
36 |       >
37 |         foo
38 |       </button>
39 |     `)
40 |   })
41 | })
42 | 


--------------------------------------------------------------------------------
/src/Disclosure/__tests__/DisclosureContent.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { ref } from 'vue'
 2 | import { DisclosureContent } from '..'
 3 | import { renderJsx, getByText } from '../../../test/utils'
 4 | 
 5 | describe('DisclosureContent', () => {
 6 |   it('renders correctly', async () => {
 7 |     const { nextTick } = renderJsx(
 8 |       <DisclosureContent baseId="id" visible={ref(false)}>
 9 |         foo
10 |       </DisclosureContent>
11 |     )
12 |     await nextTick()
13 |     expect(getByText('foo')).toMatchInlineSnapshot(`
14 |       <div
15 |         hidden=""
16 |         id="id"
17 |         style="display: none;"
18 |       >
19 |         foo
20 |       </div>
21 |     `)
22 |   })
23 | 
24 |   it('renders visible state correctly', async () => {
25 |     const { nextTick } = renderJsx(
26 |       <DisclosureContent baseId="id" visible={ref(true)}>
27 |         foo
28 |       </DisclosureContent>
29 |     )
30 |     await nextTick()
31 |     expect(getByText('foo')).toMatchInlineSnapshot(`
32 |       <div
33 |         id="id"
34 |       >
35 |         foo
36 |       </div>
37 |     `)
38 |   })
39 | })
40 | 


--------------------------------------------------------------------------------
/src/Disclosure/__tests__/DisclosureState.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { useDisclosureState } from '..'
 2 | 
 3 | describe('DisclosureContent', () => {
 4 |   it('has correct base id', () => {
 5 |     const { baseId } = useDisclosureState()
 6 |     expect(baseId).toBe('disclosure-0')
 7 |   })
 8 | 
 9 |   it('is hidden by default', () => {
10 |     const { visible } = useDisclosureState()
11 |     expect(visible.value).toBe(false)
12 |   })
13 | 
14 |   it('has unique base ids', () => {
15 |     const { baseId } = useDisclosureState()
16 |     const { baseId: baseId2 } = useDisclosureState()
17 |     expect(baseId).not.toBe(baseId2)
18 |   })
19 | 
20 |   it('can show', () => {
21 |     const { visible, show } = useDisclosureState()
22 |     show()
23 |     expect(visible.value).toBe(true)
24 |   })
25 | 
26 |   it('can hide', () => {
27 |     const { visible, show, hide } = useDisclosureState()
28 |     show()
29 |     hide()
30 |     expect(visible.value).toBe(false)
31 |   })
32 | 
33 |   it('can toggle', () => {
34 |     const { visible, toggle } = useDisclosureState()
35 |     toggle()
36 |     expect(visible.value).toBe(true)
37 |     toggle()
38 |     expect(visible.value).toBe(false)
39 |   })
40 | })
41 | 


--------------------------------------------------------------------------------
/src/Disclosure/__tests__/index.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { Disclosure, DisclosureContent, useDisclosureState } from '..'
 2 | import {
 3 |   render,
 4 |   getByText,
 5 |   click,
 6 |   pressEnter,
 7 |   pressSpace,
 8 | } from '../../../test/utils'
 9 | 
10 | describe('Disclosure Composition', () => {
11 |   let disclosure, content, nextTick
12 | 
13 |   beforeEach(() => {
14 |     const renderResult = render({
15 |       setup() {
16 |         const disclosure = useDisclosureState()
17 |         return {
18 |           disclosure,
19 |         }
20 |       },
21 |       components: {
22 |         Disclosure,
23 |         DisclosureContent,
24 |       },
25 |       template: `
26 |     <div>
27 |       <Disclosure v-bind="disclosure">foo</Disclosure>
28 |       <DisclosureContent v-bind="disclosure">bar</DisclosureContent>
29 |     </div>
30 |       `,
31 |     })
32 | 
33 |     nextTick = renderResult.nextTick
34 |     content = getByText('bar')
35 |     disclosure = getByText('foo')
36 |   })
37 | 
38 |   it('content is hidden by default', () => {
39 |     expect(content).not.toBeVisible()
40 |   })
41 | 
42 |   it('disclosure opens content', async () => {
43 |     expect(content).not.toBeVisible()
44 |     click(disclosure)
45 |     await nextTick()
46 |     expect(content).toBeVisible()
47 |   })
48 | 
49 |   it('disclosure closes content', async () => {
50 |     click(disclosure)
51 |     await nextTick()
52 |     click(disclosure)
53 |     await nextTick()
54 |     expect(content).not.toBeVisible()
55 |   })
56 | 
57 |   it('disclosure toggles content with enter', async () => {
58 |     pressEnter(disclosure)
59 |     await nextTick()
60 |     expect(content).toBeVisible()
61 |     pressEnter(disclosure)
62 |     await nextTick()
63 |     expect(content).not.toBeVisible()
64 |   })
65 | 
66 |   it('disclosure toggles content with space', async () => {
67 |     pressSpace(disclosure)
68 |     await nextTick()
69 |     expect(content).toBeVisible()
70 |     pressSpace(disclosure)
71 |     await nextTick()
72 |     expect(content).not.toBeVisible()
73 |   })
74 | })
75 | 


--------------------------------------------------------------------------------
/src/Disclosure/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Disclosure'
2 | export * from './DisclosureContent'
3 | export * from './DisclosureState'
4 | 


--------------------------------------------------------------------------------
/src/Modal/Modal.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ComponentObjectPropsOptions,
  3 |   Ref,
  4 |   watch,
  5 |   onMounted,
  6 |   onBeforeUnmount,
  7 |   inject,
  8 | } from 'vue'
  9 | import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 10 | import {
 11 |   defineComponent,
 12 |   getElementFromRef,
 13 |   getTabbableElements,
 14 |   isFocused,
 15 |   focusFirstFocusable,
 16 | } from '../utils'
 17 | import { useDialog, dialogProps, DialogProps } from '../Dialog'
 18 | 
 19 | export type ModalProps = DialogProps
 20 | 
 21 | export const modalProps: ComponentObjectPropsOptions<ModalProps> = {
 22 |   ...dialogProps,
 23 | }
 24 | 
 25 | function useFocusTrap(elementRef: Ref) {
 26 |   function handleKeydownTab(event: KeyboardEvent) {
 27 |     if (event.key !== 'Tab') {
 28 |       return
 29 |     }
 30 |     const element = getElementFromRef(elementRef)
 31 |     const tabbableElements = getTabbableElements(element)
 32 |     const firstTabbableElement = tabbableElements[0]
 33 |     const lastTabbableElement = tabbableElements[tabbableElements.length - 1]
 34 | 
 35 |     if (
 36 |       !event.shiftKey &&
 37 |       (isFocused(lastTabbableElement) || isFocused(element))
 38 |     ) {
 39 |       firstTabbableElement?.focus()
 40 |       event.preventDefault()
 41 |     }
 42 | 
 43 |     if (
 44 |       event.shiftKey &&
 45 |       (isFocused(firstTabbableElement) || isFocused(element))
 46 |     ) {
 47 |       lastTabbableElement?.focus()
 48 |       event.preventDefault()
 49 |     }
 50 |   }
 51 |   return {
 52 |     handleKeydownTab,
 53 |   }
 54 | }
 55 | 
 56 | function useBodyScrollLock(elementRef: Ref, props: ModalProps) {
 57 |   watch(
 58 |     () => props.visible.value,
 59 |     (visible) => {
 60 |       const element = getElementFromRef(elementRef)
 61 |       if (visible) {
 62 |         disableBodyScroll(element)
 63 |       } else {
 64 |         enableBodyScroll(element)
 65 |       }
 66 |     }
 67 |   )
 68 |   onBeforeUnmount(() => {
 69 |     const element = getElementFromRef(elementRef)
 70 |     enableBodyScroll(element)
 71 |   })
 72 | }
 73 | 
 74 | function useHandleInitialFocus(elementRef: Ref, props: ModalProps) {
 75 |   onMounted(() => {
 76 |     if (props.visible.value) {
 77 |       focusFirstFocusable(getElementFromRef(elementRef))
 78 |     }
 79 |   })
 80 | }
 81 | 
 82 | export function useModal(props: ModalProps) {
 83 |   const dialog = useDialog(props)
 84 | 
 85 |   useBodyScrollLock(dialog.ref, props)
 86 |   useHandleInitialFocus(dialog.ref, props)
 87 |   const { handleKeydownTab } = useFocusTrap(dialog.ref)
 88 |   function onKeydown(event: KeyboardEvent) {
 89 |     handleKeydownTab(event)
 90 |     if (!event.defaultPrevented) {
 91 |       dialog.onKeydown(event)
 92 |     }
 93 |   }
 94 |   const hasBackdrop = inject('modalBackdrop', false)
 95 | 
 96 |   return {
 97 |     ...dialog,
 98 |     onKeydown,
 99 |     'aria-modal': true,
100 |     withPortal: !hasBackdrop,
101 |   }
102 | }
103 | 
104 | export const Modal = defineComponent(modalProps, useModal)
105 | 


--------------------------------------------------------------------------------
/src/Modal/ModalBackdrop.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentObjectPropsOptions, provide } from 'vue'
 2 | import { defineComponent, useVisibilityTransition } from '../utils'
 3 | import { modalStateReturn, ModalStateReturn } from './ModalState'
 4 | import { useBox, boxProps, BoxProps } from '../Box'
 5 | 
 6 | export type ModalBackdropProps = BoxProps & ModalStateReturn
 7 | 
 8 | export const modalBackdropProps: ComponentObjectPropsOptions<ModalBackdropProps> =
 9 |   {
10 |     ...boxProps,
11 |     ...modalStateReturn,
12 |   }
13 | 
14 | export function useModalBackdrop(props: ModalBackdropProps) {
15 |   const box = useBox()
16 |   provide('modalBackdrop', true)
17 |   useVisibilityTransition(props.visible, box.ref)
18 | 
19 |   return {
20 |     ...box,
21 |     withPortal: true,
22 |   }
23 | }
24 | 
25 | export const ModalBackdrop = defineComponent(
26 |   modalBackdropProps,
27 |   useModalBackdrop
28 | )
29 | 


--------------------------------------------------------------------------------
/src/Modal/ModalDisclosure.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentObjectPropsOptions } from 'vue'
 2 | import { defineComponent } from '../utils'
 3 | import {
 4 |   useDialogDisclosure,
 5 |   dialogDisclosureProps,
 6 |   DialogDisclosureProps,
 7 | } from '../Dialog'
 8 | 
 9 | export type ModalDisclosureProps = DialogDisclosureProps
10 | 
11 | export const modalDisclosureProps: ComponentObjectPropsOptions<ModalDisclosureProps> = {
12 |   ...dialogDisclosureProps,
13 | }
14 | 
15 | export function useModalDisclosure(props: ModalDisclosureProps) {
16 |   const disclosure = useDialogDisclosure(props)
17 | 
18 |   return {
19 |     ...disclosure,
20 |   }
21 | }
22 | 
23 | export const ModalDisclosure = defineComponent(
24 |   modalDisclosureProps,
25 |   useModalDisclosure
26 | )
27 | 


--------------------------------------------------------------------------------
/src/Modal/ModalState.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentObjectPropsOptions } from 'vue'
 2 | import { DialogStateReturn, dialogStateReturn, useDialogState } from '../Dialog'
 3 | 
 4 | export type ModalStateReturn = DialogStateReturn
 5 | 
 6 | export const modalStateReturn: ComponentObjectPropsOptions<ModalStateReturn> = {
 7 |   ...dialogStateReturn,
 8 | }
 9 | 
10 | export function useModalState(): ModalStateReturn {
11 |   const dialog = useDialogState()
12 | 
13 |   return {
14 |     ...dialog,
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/Modal/README.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | description: ''
  3 | sidebar: 'docs'
  4 | prev: '/docs/button/'
  5 | next: '/docs/popover/'
  6 | ---
  7 | 
  8 | # Modal
  9 | 
 10 | Accessible `Modal` component that follows the [WAI-ARIA Dialog (Modal) Pattern](https://www.w3.org/TR/wai-aria-practices/#dialog_modal). It is rendered within a Portal.
 11 | 
 12 | ## Installation
 13 | 
 14 | ```bash
 15 | npm i vue-ari
 16 | ```
 17 | 
 18 | or
 19 | 
 20 | ```bash
 21 | yarn add vue-ari
 22 | ```
 23 | 
 24 | ## Usage
 25 | 
 26 | ```html
 27 | <template>
 28 |   <ModalDisclosure v-bind="modal">
 29 |     Open Modal
 30 |   </ModalDisclosure>
 31 |   <ModalBackdrop v-bind="modal">
 32 |     <Modal v-bind="modal">
 33 |       Modal Content
 34 |     </Modal>
 35 |   </ModalBackdrop>
 36 | </template>
 37 | 
 38 | <script>
 39 |   import { Modal, ModalBackdrop, ModalDisclosure, useModalState } from 'vue-ari'
 40 | 
 41 |   export default {
 42 |     components: {
 43 |       Modal,
 44 |       ModalBackdrop,
 45 |       ModalDisclosure,
 46 |     },
 47 |     setup() {
 48 |       const modal = useModalState()
 49 |       return {
 50 |         modal,
 51 |       }
 52 |     },
 53 |   }
 54 | </script>
 55 | ```
 56 | 
 57 | ## Styling
 58 | 
 59 | Ari components don't include styling by default. This gives you the ability to add styles however you like.
 60 | 
 61 | ### Example Using Tailwind
 62 | 
 63 | ```html
 64 | <template>
 65 |   <ModalDisclosure
 66 |     v-bind="modal"
 67 |     class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
 68 |   >
 69 |     Open Modal
 70 |   </ModalDisclosure>
 71 |   <ModalBackdrop
 72 |     v-bind="modal"
 73 |     class="fixed inset-0 flex items-center justify-center bg-opacity-75 bg-black"
 74 |   >
 75 |     <Modal
 76 |       v-bind="modal"
 77 |       class="max-w-xs rounded shadow-lg border border-solid border-gray-300 py-3 px-5 bg-white"
 78 |     >
 79 |       Modal Content
 80 |     </Modal>
 81 |   </ModalBackdrop>
 82 | </template>
 83 | 
 84 | <script>
 85 |   import { Modal, ModalDisclosure, useModalState } from 'vue-ari'
 86 | 
 87 |   export default {
 88 |     components: {
 89 |       Modal,
 90 |       ModalDisclosure,
 91 |     },
 92 |     setup() {
 93 |       const modal = useModalState()
 94 |       return {
 95 |         modal,
 96 |       }
 97 |     },
 98 |   }
 99 | </script>
100 | ```
101 | 
102 | ## Reusable Components
103 | 
104 | It would get pretty verbose to add the same styling classes wherever you like to use a `Modal`. So the recommended way is wrapping Ari components inside your own base components and use them inside your app.
105 | 
106 | Base component for disclosure:
107 | 
108 | ```html
109 | <template>
110 |   <ModalDisclosure
111 |     v-bind="$props"
112 |     class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
113 |   >
114 |     <slot />
115 |   </ModalDisclosure>
116 | </template>
117 | 
118 | <script>
119 |   import { ModalDisclosure, modalDisclosureProps } from 'vue-ari'
120 | 
121 |   export default {
122 |     name: 'AppModalDisclosure',
123 |     props: modalDisclosureProps,
124 |     components: {
125 |       ModalDisclosure,
126 |     },
127 |   }
128 | </script>
129 | ```
130 | 
131 | Base component for modal:
132 | 
133 | ```html
134 | <template>
135 |   <ModalBackdrop
136 |     v-bind="$props"
137 |     class="fixed inset-0 flex items-center justify-center bg-opacity-75 bg-black"
138 |   >
139 |     <Modal
140 |       v-bind="{ ...$props, ...$attrs }"
141 |       class="max-w-xs rounded shadow-lg border border-solid border-gray-300 py-3 px-5 bg-white"
142 |     >
143 |       <slot />
144 |     </Modal>
145 |   </ModalBackdrop>
146 | </template>
147 | 
148 | <script>
149 |   import { Modal, ModalBackdrop, modalProps } from 'vue-ari'
150 | 
151 |   export default {
152 |     name: 'AppModal',
153 |     props: modalProps,
154 |     inheritAttrs: false,
155 |     components: {
156 |       Modal,
157 |       ModalBackdrop,
158 |     },
159 |   }
160 | </script>
161 | ```
162 | 
163 | Inside your app:
164 | 
165 | ```html
166 | <template>
167 |   <AppModalDisclosure v-bind="modal">
168 |     Open Modal
169 |   </AppModalDisclosure>
170 |   <AppModal v-bind="modal">
171 |     Modal Content
172 |   </AppModal>
173 | </template>
174 | 
175 | <script>
176 |   import { useModalState } from 'vue-ari'
177 |   import { AppModal, AppModalDisclosure } from './components'
178 | 
179 |   export default {
180 |     components: {
181 |       AppModal,
182 |       AppModalDisclosure,
183 |     },
184 |     setup() {
185 |       const modal = useModalState()
186 |       return {
187 |         modal,
188 |       }
189 |     },
190 |   }
191 | </script>
192 | ```
193 | 
194 | ## Abstracting State
195 | 
196 | If you would rather not create a modal state each time, just create a provider component.
197 | 
198 | Provider component:
199 | 
200 | ```html
201 | <template>
202 |   <slot />
203 | </template>
204 | 
205 | <script>
206 |   import { provide } from 'vue'
207 |   import { useModalState } from 'vue-ari'
208 | 
209 |   export default {
210 |     name: 'AppModalProvider',
211 |     setup() {
212 |       provide('modalState', useModalState())
213 |     },
214 |   }
215 | </script>
216 | ```
217 | 
218 | Base component for disclosure:
219 | 
220 | ```html
221 | <template>
222 |   <ModalDisclosure
223 |     v-bind="modal"
224 |     class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
225 |   >
226 |     <slot />
227 |   </ModalDisclosure>
228 | </template>
229 | 
230 | <script>
231 |   import { inject } from 'vue'
232 |   import { ModalDisclosure } from 'vue-ari'
233 | 
234 |   export default {
235 |     name: 'AppModalDisclosure',
236 |     components: {
237 |       ModalDisclosure,
238 |     },
239 |     setup() {
240 |       const modal = inject('modalState')
241 |       return {
242 |         modal,
243 |       }
244 |     },
245 |   }
246 | </script>
247 | ```
248 | 
249 | Base component for modal:
250 | 
251 | ```html
252 | <template>
253 |   <ModalBackdrop
254 |     v-bind="modal"
255 |     class="fixed inset-0 flex items-center justify-center bg-opacity-75 bg-black"
256 |   >
257 |     <Modal
258 |       v-bind="{ ...modal, ...$attrs }"
259 |       class="max-w-xs rounded shadow-lg border border-solid border-gray-300 py-3 px-5 bg-white"
260 |     >
261 |       <slot />
262 |     </Modal>
263 |   </ModalBackdrop>
264 | </template>
265 | 
266 | <script>
267 |   import { inject } from 'vue'
268 |   import { Modal, ModalBackdrop } from 'vue-ari'
269 | 
270 |   export default {
271 |     name: 'AppModalDisclosure',
272 |     components: {
273 |       Modal,
274 |       ModalBackdrop,
275 |     },
276 |     inheritAttrs: false,
277 |     setup() {
278 |       const modal = inject('modalState')
279 |       return {
280 |         modal,
281 |       }
282 |     },
283 |   }
284 | </script>
285 | ```
286 | 
287 | Inside your app:
288 | 
289 | ```html
290 | <template>
291 |   <AppModalProvider>
292 |     <AppModalDisclosure>
293 |       Open Modal
294 |     </AppModalDisclosure>
295 |     <AppModal>
296 |       Modal Content
297 |     </AppModal>
298 |   </AppModalProvider>
299 | </template>
300 | 
301 | <script>
302 |   import { AppModalProvider, AppModal, AppModalDisclosure } from './components'
303 | 
304 |   export default {
305 |     components: {
306 |       AppModalProvider,
307 |       AppModal,
308 |       AppModalDisclosure,
309 |     },
310 |   }
311 | </script>
312 | ```
313 | 


--------------------------------------------------------------------------------
/src/Modal/__tests__/Modal.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { ref } from 'vue'
 2 | import { Modal } from '..'
 3 | import { renderJsx, getByText } from '../../../test/utils'
 4 | 
 5 | describe('Modal', () => {
 6 |   it('renders correctly', async () => {
 7 |     const { nextTick } = renderJsx(
 8 |       <Modal baseId="id" visible={ref(false)}>
 9 |         foo
10 |       </Modal>
11 |     )
12 |     await nextTick()
13 |     expect(getByText('foo')).toMatchInlineSnapshot(`
14 |       <div
15 |         aria-modal="true"
16 |         hidden=""
17 |         id="id"
18 |         role="dialog"
19 |         style="display: none;"
20 |         tabindex="-1"
21 |       >
22 |         foo
23 |       </div>
24 |     `)
25 |   })
26 | 
27 |   it('renders in portal', async () => {
28 |     const { nextTick } = renderJsx(
29 |       <div>
30 |         container
31 |         <Modal baseId="id" visible={ref(false)}>
32 |           foo
33 |         </Modal>
34 |       </div>
35 |     )
36 |     await nextTick()
37 |     expect(getByText('foo').parentElement).not.toBe(getByText('container'))
38 |   })
39 | })
40 | 


--------------------------------------------------------------------------------
/src/Modal/__tests__/ModalBackdrop.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { ref } from 'vue'
 2 | import { ModalBackdrop } from '..'
 3 | import { renderJsx, getByText } from '../../../test/utils'
 4 | 
 5 | describe('ModalBackdrop', () => {
 6 |   it('renders correctly', async () => {
 7 |     const { nextTick } = renderJsx(
 8 |       <ModalBackdrop baseId="id" visible={ref(false)}>
 9 |         foo
10 |       </ModalBackdrop>
11 |     )
12 |     await nextTick()
13 |     expect(getByText('foo')).toMatchInlineSnapshot(`
14 |       <div
15 |         hidden=""
16 |         style="display: none;"
17 |       >
18 |         foo
19 |       </div>
20 |     `)
21 |   })
22 | 
23 |   it('renders correctly when visible', async () => {
24 |     const { nextTick } = renderJsx(
25 |       <ModalBackdrop baseId="id" visible={ref(true)}>
26 |         foo
27 |       </ModalBackdrop>
28 |     )
29 |     await nextTick()
30 |     expect(getByText('foo')).toMatchInlineSnapshot(`
31 |       <div>
32 |         foo
33 |       </div>
34 |     `)
35 |   })
36 | 
37 |   it('renders in portal', async () => {
38 |     const { nextTick } = renderJsx(
39 |       <div>
40 |         container
41 |         <ModalBackdrop baseId="id" visible={ref(false)}>
42 |           foo
43 |         </ModalBackdrop>
44 |       </div>
45 |     )
46 |     await nextTick()
47 |     expect(getByText('foo').parentElement).not.toBe(getByText('container'))
48 |   })
49 | })
50 | 


--------------------------------------------------------------------------------
/src/Modal/__tests__/ModalDisclosure.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { ref } from 'vue'
 2 | import { ModalDisclosure } from '..'
 3 | import { renderJsx, getByText } from '../../../test/utils'
 4 | 
 5 | describe('ModalDisclosure', () => {
 6 |   it('renders correctly', async () => {
 7 |     const { nextTick } = renderJsx(
 8 |       <ModalDisclosure baseId="id" visible={ref(false)}>
 9 |         foo
10 |       </ModalDisclosure>
11 |     )
12 |     await nextTick()
13 |     expect(getByText('foo')).toMatchInlineSnapshot(`
14 |     <button
15 |       aria-controls="id"
16 |       aria-expanded="false"
17 |       aria-haspopup="dialog"
18 |       type="button"
19 |     >
20 |       foo
21 |     </button>
22 |     `)
23 |   })
24 | })
25 | 


--------------------------------------------------------------------------------
/src/Modal/__tests__/index.spec.tsx:
--------------------------------------------------------------------------------
  1 | import { nextTick } from 'vue'
  2 | import { ModalDisclosure, Modal, ModalBackdrop, useModalState } from '..'
  3 | import { render, getByText, click, tab } from '../../../test/utils'
  4 | 
  5 | function createTestSetup({
  6 |   template = `
  7 | <div>
  8 |   <ModalDisclosure v-bind="modal">foo</ModalDisclosure>
  9 |   <Modal v-bind="modal">bar</Modal>
 10 | </div>
 11 |   `,
 12 |   visible = false,
 13 | } = {}) {
 14 |   render({
 15 |     setup() {
 16 |       const modal = useModalState()
 17 |       if (visible) {
 18 |         modal.show()
 19 |       }
 20 |       return {
 21 |         modal,
 22 |       }
 23 |     },
 24 |     components: {
 25 |       Modal,
 26 |       ModalBackdrop,
 27 |       ModalDisclosure,
 28 |     },
 29 |     template,
 30 |   })
 31 | 
 32 |   return {
 33 |     content: getByText('bar'),
 34 |     disclosure: getByText('foo'),
 35 |   }
 36 | }
 37 | 
 38 | describe('Modal Composition', () => {
 39 |   it('content is hidden by default', () => {
 40 |     const { content } = createTestSetup()
 41 |     expect(content).not.toBeVisible()
 42 |   })
 43 | 
 44 |   it('disclosure opens content', async () => {
 45 |     const { content, disclosure } = createTestSetup()
 46 |     expect(content).not.toBeVisible()
 47 |     click(disclosure)
 48 |     await nextTick()
 49 |     expect(content).toBeVisible()
 50 |   })
 51 | 
 52 |   it('backdrop is hidden by default', () => {
 53 |     createTestSetup({
 54 |       template: `
 55 |     <div>
 56 |       <ModalDisclosure v-bind="modal">foo</ModalDisclosure>
 57 |       <ModalBackdrop v-bind="modal">baz</ModalBackdrop>
 58 |       <Modal v-bind="modal">bar</Modal>
 59 |     </div>
 60 |       `,
 61 |     })
 62 |     expect(getByText('baz')).not.toBeVisible()
 63 |   })
 64 | 
 65 |   it('disclosure opens backdrop', async () => {
 66 |     const { disclosure } = createTestSetup({
 67 |       template: `
 68 |     <div>
 69 |       <ModalDisclosure v-bind="modal">foo</ModalDisclosure>
 70 |       <ModalBackdrop v-bind="modal">baz</ModalBackdrop>
 71 |       <Modal v-bind="modal">bar</Modal>
 72 |     </div>
 73 |       `,
 74 |     })
 75 |     const backdrop = getByText('baz')
 76 |     expect(backdrop).not.toBeVisible()
 77 |     click(disclosure)
 78 |     await nextTick()
 79 |     expect(backdrop).toBeVisible()
 80 |   })
 81 | 
 82 |   it('modal renders inside backdrop instead of portal', async () => {
 83 |     const { disclosure, content } = createTestSetup({
 84 |       template: `
 85 |     <div>
 86 |       <ModalDisclosure v-bind="modal">foo</ModalDisclosure>
 87 |       <ModalBackdrop v-bind="modal">
 88 |         baz
 89 |         <Modal v-bind="modal">bar</Modal>
 90 |       </ModalBackdrop>
 91 |     </div>
 92 |       `,
 93 |     })
 94 |     const backdrop = getByText('baz')
 95 |     click(disclosure)
 96 |     await nextTick()
 97 |     expect(content.parentElement).toBe(backdrop)
 98 |   })
 99 | 
100 |   it('focus is trapped inside modal', async () => {
101 |     const { disclosure, content } = createTestSetup({
102 |       template: `
103 |     <div>
104 |       <ModalDisclosure v-bind="modal">foo</ModalDisclosure>
105 |       <Modal v-bind="modal">bar</Modal>
106 |       <button>after</button>
107 |     </div>
108 |       `,
109 |     })
110 |     click(disclosure)
111 |     await nextTick()
112 |     tab()
113 |     await nextTick()
114 |     expect(content).toHaveFocus()
115 |   })
116 | 
117 |   it('tab focuses elements inside modal', async () => {
118 |     const { disclosure } = createTestSetup({
119 |       template: `
120 |     <div>
121 |       <ModalDisclosure v-bind="modal">foo</ModalDisclosure>
122 |       <Modal v-bind="modal">
123 |         bar
124 |         <button>one</button>
125 |         <button>two</button>
126 |       </Modal>
127 |     </div>
128 |       `,
129 |     })
130 |     click(disclosure)
131 |     await nextTick()
132 |     tab()
133 |     await nextTick()
134 |     expect(getByText('two')).toHaveFocus()
135 |   })
136 | 
137 |   it('tab on last tabbable element focuses first element', async () => {
138 |     const { disclosure } = createTestSetup({
139 |       template: `
140 |     <div>
141 |       <ModalDisclosure v-bind="modal">foo</ModalDisclosure>
142 |       <Modal v-bind="modal">
143 |         bar
144 |         <button>one</button>
145 |         <button>two</button>
146 |       </Modal>
147 |       <button>after</button>
148 |     </div>
149 |       `,
150 |     })
151 |     click(disclosure)
152 |     await nextTick()
153 |     tab()
154 |     await nextTick()
155 |     tab()
156 |     await nextTick()
157 |     expect(getByText('one')).toHaveFocus()
158 |   })
159 | 
160 |   it('shift tab on first tabbable element focuses last tabbable element', async () => {
161 |     const { disclosure } = createTestSetup({
162 |       template: `
163 |     <div>
164 |       <button>before</button>
165 |       <ModalDisclosure v-bind="modal">foo</ModalDisclosure>
166 |       <Modal v-bind="modal">
167 |         bar
168 |         <button>one</button>
169 |         <button>two</button>
170 |       </Modal>
171 |     </div>
172 |       `,
173 |     })
174 |     click(disclosure)
175 |     await nextTick()
176 |     tab({ shift: true })
177 |     await nextTick()
178 |     expect(getByText('two')).toHaveFocus()
179 |   })
180 | 
181 |   it('shift tab on last tabbable element focuses previous tabbable element', async () => {
182 |     const { disclosure } = createTestSetup({
183 |       template: `
184 |     <div>
185 |       <button>before</button>
186 |       <ModalDisclosure v-bind="modal">foo</ModalDisclosure>
187 |       <Modal v-bind="modal">
188 |         bar
189 |         <button>one</button>
190 |         <button>two</button>
191 |         <button>three</button>
192 |       </Modal>
193 |     </div>
194 |       `,
195 |     })
196 |     click(disclosure)
197 |     await nextTick()
198 |     tab()
199 |     await nextTick()
200 |     tab()
201 |     await nextTick()
202 |     tab({ shift: true })
203 |     await nextTick()
204 |     expect(getByText('two')).toHaveFocus()
205 |   })
206 | 
207 |   it('is focused initially when visible', async () => {
208 |     const { content } = createTestSetup({
209 |       visible: true,
210 |     })
211 |     expect(content).toHaveFocus()
212 |   })
213 | })
214 | 


--------------------------------------------------------------------------------
/src/Modal/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ModalDisclosure'
2 | export * from './Modal'
3 | export * from './ModalBackdrop'
4 | export * from './ModalState'
5 | 


--------------------------------------------------------------------------------
/src/Popover/Popover.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentObjectPropsOptions, watch } from 'vue'
 2 | import { createPopper } from '@popperjs/core'
 3 | import { defineComponent, getElementFromRef } from '../utils'
 4 | import { useDialog, dialogProps, DialogProps } from '../Dialog'
 5 | 
 6 | export type PopoverProps = DialogProps
 7 | 
 8 | export const popoverProps: ComponentObjectPropsOptions<PopoverProps> = {
 9 |   ...dialogProps,
10 | }
11 | 
12 | export function usePopover(props: PopoverProps) {
13 |   const dialog = useDialog(props)
14 |   const { baseId } = props
15 |   const { ref } = dialog
16 | 
17 |   let popper
18 |   watch(
19 |     () => props.visible.value,
20 |     (visible) => {
21 |       const disclosureElement = document.querySelector(
22 |         `[aria-controls="${baseId}"]`
23 |       )
24 |       const popoverElement = getElementFromRef(ref)
25 | 
26 |       if (visible) {
27 |         popper = createPopper(disclosureElement, popoverElement, {
28 |           modifiers: [
29 |             {
30 |               name: 'offset',
31 |               options: {
32 |                 offset: [0, 4],
33 |               },
34 |             },
35 |           ],
36 |         })
37 |       } else {
38 |         popper.destroy()
39 |       }
40 |     }
41 |   )
42 | 
43 |   return {
44 |     ...dialog,
45 |   }
46 | }
47 | 
48 | export const Popover = defineComponent(popoverProps, usePopover)
49 | 


--------------------------------------------------------------------------------
/src/Popover/PopoverDisclosure.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentObjectPropsOptions } from 'vue'
 2 | import { defineComponent } from '../utils'
 3 | import {
 4 |   useDialogDisclosure,
 5 |   dialogDisclosureProps,
 6 |   DialogDisclosureProps,
 7 | } from '../Dialog'
 8 | 
 9 | export type PopoverDisclosureProps = DialogDisclosureProps
10 | 
11 | export const popoverDisclosureProps: ComponentObjectPropsOptions<PopoverDisclosureProps> = {
12 |   ...dialogDisclosureProps,
13 | }
14 | 
15 | export function usePopoverDisclosure(props: PopoverDisclosureProps) {
16 |   const disclosure = useDialogDisclosure(props)
17 | 
18 |   return {
19 |     ...disclosure,
20 |   }
21 | }
22 | 
23 | export const PopoverDisclosure = defineComponent(
24 |   popoverDisclosureProps,
25 |   usePopoverDisclosure
26 | )
27 | 


--------------------------------------------------------------------------------
/src/Popover/PopoverState.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentObjectPropsOptions } from 'vue'
 2 | import { DialogStateReturn, dialogStateReturn, useDialogState } from '../Dialog'
 3 | 
 4 | export type PopoverStateReturn = DialogStateReturn
 5 | 
 6 | export const popoverStateReturn: ComponentObjectPropsOptions<PopoverStateReturn> = {
 7 |   ...dialogStateReturn,
 8 | }
 9 | 
10 | export function usePopoverState(): PopoverStateReturn {
11 |   const dialog = useDialogState()
12 | 
13 |   return {
14 |     ...dialog,
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/Popover/README.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | description: ''
  3 | sidebar: 'docs'
  4 | prev: '/docs/modal/'
  5 | ---
  6 | 
  7 | # Popover
  8 | 
  9 | `Popover` is a non-modal dialog that is positioned near its disclosure. It is commonly used for displaying additional related content.
 10 | 
 11 | ## Installation
 12 | 
 13 | ```bash
 14 | npm i vue-ari
 15 | ```
 16 | 
 17 | or
 18 | 
 19 | ```bash
 20 | yarn add vue-ari
 21 | ```
 22 | 
 23 | ## Usage
 24 | 
 25 | ```html
 26 | <template>
 27 |   <PopoverDisclosure v-bind="popover">
 28 |     Open Popover
 29 |   </PopoverDisclosure>
 30 |   <Popover v-bind="popover">
 31 |     Popover Content
 32 |   </Popover>
 33 | </template>
 34 | 
 35 | <script>
 36 |   import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'
 37 | 
 38 |   export default {
 39 |     components: {
 40 |       Popover,
 41 |       PopoverDisclosure,
 42 |     },
 43 |     setup() {
 44 |       const popover = usePopoverState()
 45 |       return {
 46 |         popover,
 47 |       }
 48 |     },
 49 |   }
 50 | </script>
 51 | ```
 52 | 
 53 | ## Styling
 54 | 
 55 | Ari components don't include styling by default. This gives you the ability to add styles however you like.
 56 | 
 57 | ### Example Using Tailwind
 58 | 
 59 | ```html
 60 | <template>
 61 |   <PopoverDisclosure
 62 |     v-bind="popover"
 63 |     class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
 64 |   >
 65 |     Open Popover
 66 |   </PopoverDisclosure>
 67 |   <Popover
 68 |     v-bind="popover"
 69 |     class="rounded shadow-lg border border-solid border-gray-300 py-3 px-5 bg-white"
 70 |   >
 71 |     Popover Content
 72 |   </Popover>
 73 | </template>
 74 | 
 75 | <script>
 76 |   import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'
 77 | 
 78 |   export default {
 79 |     components: {
 80 |       Popover,
 81 |       PopoverDisclosure,
 82 |     },
 83 |     setup() {
 84 |       const popover = usePopoverState()
 85 |       return {
 86 |         popover,
 87 |       }
 88 |     },
 89 |   }
 90 | </script>
 91 | ```
 92 | 
 93 | ## Reusable Components
 94 | 
 95 | It would get pretty verbose to add the same styling classes wherever you like to use a `Popover`. So the recommended way is wrapping Ari components inside your own base components and use them inside your app.
 96 | 
 97 | ```html
 98 | <template>
 99 |   <PopoverDisclosure
100 |     v-bind="$props"
101 |     class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
102 |   >
103 |     <slot />
104 |   </PopoverDisclosure>
105 | </template>
106 | 
107 | <script>
108 |   import { PopoverDisclosure, popoverDisclosureProps } from 'vue-ari'
109 | 
110 |   export default {
111 |     name: 'AppPopoverDisclosure',
112 |     props: popoverDisclosureProps,
113 |     components: {
114 |       PopoverDisclosure,
115 |     },
116 |   }
117 | </script>
118 | ```
119 | 


--------------------------------------------------------------------------------
/src/Popover/__tests__/Popover.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { ref } from 'vue'
 2 | import { Popover } from '..'
 3 | import { renderJsx, getByText } from '../../../test/utils'
 4 | 
 5 | describe('Popover', () => {
 6 |   it('renders correctly', async () => {
 7 |     const { nextTick } = renderJsx(
 8 |       <Popover baseId="id" visible={ref(false)}>
 9 |         foo
10 |       </Popover>
11 |     )
12 |     await nextTick()
13 |     expect(getByText('foo')).toMatchInlineSnapshot(`
14 |       <div
15 |         hidden=""
16 |         id="id"
17 |         role="dialog"
18 |         style="display: none;"
19 |         tabindex="-1"
20 |       >
21 |         foo
22 |       </div>
23 |     `)
24 |   })
25 | 
26 |   it('renders in portal', async () => {
27 |     const { nextTick } = renderJsx(
28 |       <div>
29 |         container
30 |         <Popover baseId="id" visible={ref(false)}>
31 |           foo
32 |         </Popover>
33 |       </div>
34 |     )
35 |     await nextTick()
36 |     expect(getByText('foo').parentElement).not.toBe(getByText('container'))
37 |   })
38 | })
39 | 


--------------------------------------------------------------------------------
/src/Popover/__tests__/PopoverDisclosure.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { ref } from 'vue'
 2 | import { PopoverDisclosure } from '..'
 3 | import { renderJsx, getByText } from '../../../test/utils'
 4 | 
 5 | describe('PopoverDisclosure', () => {
 6 |   it('renders correctly', async () => {
 7 |     const { nextTick } = renderJsx(
 8 |       <PopoverDisclosure baseId="id" visible={ref(false)}>
 9 |         foo
10 |       </PopoverDisclosure>
11 |     )
12 |     await nextTick()
13 |     expect(getByText('foo')).toMatchInlineSnapshot(`
14 |     <button
15 |       aria-controls="id"
16 |       aria-expanded="false"
17 |       aria-haspopup="dialog"
18 |       type="button"
19 |     >
20 |       foo
21 |     </button>
22 |     `)
23 |   })
24 | })
25 | 


--------------------------------------------------------------------------------
/src/Popover/__tests__/index.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { PopoverDisclosure, Popover, usePopoverState } from '..'
 2 | import { render, getByText, click } from '../../../test/utils'
 3 | 
 4 | function createTestSetup({
 5 |   template = `
 6 | <div>
 7 |   <PopoverDisclosure v-bind="popover">foo</PopoverDisclosure>
 8 |   <Popover v-bind="popover">bar</Popover>
 9 | </div>
10 |   `,
11 | } = {}) {
12 |   const { nextTick } = render({
13 |     setup() {
14 |       const popover = usePopoverState()
15 |       return {
16 |         popover,
17 |       }
18 |     },
19 |     components: {
20 |       Popover,
21 |       PopoverDisclosure,
22 |     },
23 |     template,
24 |   })
25 | 
26 |   return {
27 |     nextTick,
28 |     content: getByText('bar'),
29 |     disclosure: getByText('foo'),
30 |   }
31 | }
32 | 
33 | describe('Popover Composition', () => {
34 |   it('content is hidden by default', () => {
35 |     const { content } = createTestSetup()
36 |     expect(content).not.toBeVisible()
37 |   })
38 | 
39 |   it('disclosure opens content', async () => {
40 |     const { content, disclosure, nextTick } = createTestSetup()
41 |     expect(content).not.toBeVisible()
42 |     click(disclosure)
43 |     await nextTick()
44 |     expect(content).toBeVisible()
45 |   })
46 | 
47 |   it('is positioned with popper when visible', async () => {
48 |     const { disclosure, content, nextTick } = createTestSetup()
49 |     click(disclosure)
50 |     await nextTick()
51 |     await nextTick()
52 |     expect(content).toHaveStyle('position: absolute')
53 |     expect(content).toHaveAttribute('data-popper-placement')
54 |   })
55 | 
56 |   it('is not positioned with popper when hidden', async () => {
57 |     const { disclosure, content, nextTick } = createTestSetup()
58 |     click(disclosure)
59 |     await nextTick()
60 |     await nextTick()
61 |     click(disclosure)
62 |     await nextTick()
63 |     await nextTick()
64 |     expect(content).not.toHaveStyle('position: absolute')
65 |     expect(content).not.toHaveAttribute('data-popper-placement')
66 |   })
67 | })
68 | 


--------------------------------------------------------------------------------
/src/Popover/index.ts:
--------------------------------------------------------------------------------
1 | export * from './PopoverDisclosure'
2 | export * from './Popover'
3 | export * from './PopoverState'
4 | 


--------------------------------------------------------------------------------
/src/Portal/Portal.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { Portal } from '.'
 2 | import { renderJsx, getByText } from '../../test/utils'
 3 | 
 4 | describe('Portal', () => {
 5 |   it('portal content renders outside its container', async () => {
 6 |     const { nextTick } = renderJsx(
 7 |       <div>
 8 |         container
 9 |         <Portal>
10 |           <div>foo</div>
11 |         </Portal>
12 |       </div>
13 |     )
14 |     await nextTick()
15 |     expect(getByText('foo').parentElement).not.toBe(getByText('container'))
16 |   })
17 | })
18 | 


--------------------------------------------------------------------------------
/src/Portal/Portal.ts:
--------------------------------------------------------------------------------
 1 | import { h, Teleport, defineComponent } from 'vue'
 2 | 
 3 | let portalTarget
 4 | 
 5 | export const Portal = defineComponent({
 6 |   render() {
 7 |     if (!portalTarget) {
 8 |       portalTarget = document.createElement('div')
 9 |       document.body.append(portalTarget)
10 |     }
11 |     return h(Teleport, { to: portalTarget }, this.$slots.default())
12 |   },
13 | })
14 | 


--------------------------------------------------------------------------------
/src/Portal/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Portal'
2 | 


--------------------------------------------------------------------------------
/src/Tabbable/Tabbable.spec.tsx:
--------------------------------------------------------------------------------
  1 | import { Tabbable } from '.'
  2 | import { mount } from '@vue/test-utils'
  3 | import { markRaw, h } from 'vue'
  4 | import {
  5 |   render,
  6 |   renderJsx,
  7 |   getByText,
  8 |   click,
  9 |   mousedown,
 10 |   mouseover,
 11 | } from '../../test/utils'
 12 | 
 13 | describe('Tabbable', () => {
 14 |   it('renders correctly', () => {
 15 |     renderJsx(<Tabbable>foo</Tabbable>)
 16 |     expect(getByText('foo')).toMatchInlineSnapshot(`
 17 |       <div
 18 |         tabindex="0"
 19 |       >
 20 |         foo
 21 |       </div>
 22 |     `)
 23 |   })
 24 | 
 25 |   it('can render as other element', () => {
 26 |     renderJsx(<Tabbable as="span">foo</Tabbable>)
 27 |     expect(getByText('foo')).toMatchInlineSnapshot(`
 28 |       <span
 29 |         tabindex="0"
 30 |       >
 31 |         foo
 32 |       </span>
 33 |     `)
 34 |   })
 35 | 
 36 |   it('renders correctly when disabled', () => {
 37 |     renderJsx(<Tabbable disabled>foo</Tabbable>)
 38 |     expect(getByText('foo')).toMatchInlineSnapshot(`
 39 |       <div
 40 |         aria-disabled="true"
 41 |       >
 42 |         foo
 43 |       </div>
 44 |     `)
 45 |   })
 46 | 
 47 |   it('disabled is reactive', async () => {
 48 |     const wrapper = mount(Tabbable, {
 49 |       props: { disabled: false },
 50 |       slots: {
 51 |         default: 'foo',
 52 |       },
 53 |     })
 54 |     await wrapper.setProps({ disabled: true })
 55 |     expect(wrapper.attributes('aria-disabled')).toEqual('true')
 56 |   })
 57 | 
 58 |   it('renders native focusable elements correctly', async () => {
 59 |     const { nextTick } = renderJsx(<Tabbable as="button">foo</Tabbable>)
 60 |     await nextTick()
 61 |     expect(getByText('foo')).toMatchInlineSnapshot(`
 62 |       <button>
 63 |         foo
 64 |       </button>
 65 |     `)
 66 |   })
 67 | 
 68 |   it('renders disabled native focusable elements correctly', async () => {
 69 |     const { nextTick } = renderJsx(
 70 |       <Tabbable as="button" disabled>
 71 |         foo
 72 |       </Tabbable>
 73 |     )
 74 |     await nextTick()
 75 |     expect(getByText('foo')).toMatchInlineSnapshot(`
 76 |       <button
 77 |         aria-disabled="true"
 78 |         disabled=""
 79 |       >
 80 |         foo
 81 |       </button>
 82 |     `)
 83 |   })
 84 | 
 85 |   it('renders components with native focusable element correctly', async () => {
 86 |     const testComp = markRaw({
 87 |       template: '<button>foo</button>',
 88 |     })
 89 |     const { nextTick } = render(Tabbable, {
 90 |       props: {
 91 |         as: testComp,
 92 |       },
 93 |     })
 94 |     await nextTick()
 95 |     expect(getByText('foo')).toMatchInlineSnapshot(`
 96 |       <button>
 97 |         foo
 98 |       </button>
 99 |     `)
100 |   })
101 | 
102 |   it('renders components with native focusable element correctly (render function)', async () => {
103 |     const testComp = markRaw({
104 |       render() {
105 |         return h('button', 'foo')
106 |       },
107 |     })
108 |     const { nextTick } = render(Tabbable, {
109 |       props: {
110 |         as: testComp,
111 |       },
112 |     })
113 |     await nextTick()
114 |     expect(getByText('foo')).toMatchInlineSnapshot(`
115 |       <button>
116 |         foo
117 |       </button>
118 |     `)
119 |   })
120 | 
121 |   it('can be focused', () => {
122 |     renderJsx(<Tabbable>foo</Tabbable>)
123 |     const tabbable = getByText('foo')
124 |     tabbable.focus()
125 |     expect(tabbable).toEqual(document.activeElement)
126 |   })
127 | 
128 |   it('cannot be focused when disabled', () => {
129 |     renderJsx(<Tabbable disabled>foo</Tabbable>)
130 |     const tabbable = getByText('foo')
131 |     tabbable.focus()
132 |     expect(tabbable).not.toEqual(document.activeElement)
133 |   })
134 | 
135 |   it('can be focused when focusable', () => {
136 |     renderJsx(
137 |       <Tabbable disabled focusable>
138 |         foo
139 |       </Tabbable>
140 |     )
141 |     const tabbable = getByText('foo')
142 |     tabbable.focus()
143 |     expect(tabbable).toEqual(document.activeElement)
144 |   })
145 | 
146 |   it('button can be focused when focusable', () => {
147 |     renderJsx(
148 |       <Tabbable as="button" disabled focusable>
149 |         foo
150 |       </Tabbable>
151 |     )
152 |     const tabbable = getByText('foo')
153 |     tabbable.focus()
154 |     expect(tabbable).toEqual(document.activeElement)
155 |   })
156 | 
157 |   it('emits click event', () => {
158 |     const clickHandler = jest.fn()
159 |     renderJsx(<Tabbable onClick={clickHandler}>foo</Tabbable>)
160 |     click(getByText('foo'))
161 |     expect(clickHandler).toBeCalledTimes(1)
162 |   })
163 | 
164 |   it('emits no click event when disabled', () => {
165 |     const clickHandler = jest.fn()
166 |     renderJsx(
167 |       <Tabbable onClick={clickHandler} disabled>
168 |         foo
169 |       </Tabbable>
170 |     )
171 |     click(getByText('foo'))
172 |     expect(clickHandler).toBeCalledTimes(0)
173 |   })
174 | 
175 |   it('emits mousedown event', () => {
176 |     const mousedownHandler = jest.fn()
177 |     renderJsx(<Tabbable onMousedown={mousedownHandler}>foo</Tabbable>)
178 |     mousedown(getByText('foo'))
179 |     expect(mousedownHandler).toBeCalledTimes(1)
180 |   })
181 | 
182 |   it('emits no mousedown event when disabled', () => {
183 |     const mousedownHandler = jest.fn()
184 |     renderJsx(
185 |       <Tabbable onMousedown={mousedownHandler} disabled>
186 |         foo
187 |       </Tabbable>
188 |     )
189 |     mousedown(getByText('foo'))
190 |     expect(mousedownHandler).toBeCalledTimes(0)
191 |   })
192 | 
193 |   it('emits mouseover event', () => {
194 |     const mouseoverHandler = jest.fn()
195 |     renderJsx(<Tabbable onMouseover={mouseoverHandler}>foo</Tabbable>)
196 |     mouseover(getByText('foo'))
197 |     expect(mouseoverHandler).toBeCalledTimes(1)
198 |   })
199 | 
200 |   it('emits no mouseover event when disabled', () => {
201 |     const mouseoverHandler = jest.fn()
202 |     renderJsx(
203 |       <Tabbable onMouseover={mouseoverHandler} disabled>
204 |         foo
205 |       </Tabbable>
206 |     )
207 |     mouseover(getByText('foo'))
208 |     expect(mouseoverHandler).toBeCalledTimes(0)
209 |   })
210 | })
211 | 


--------------------------------------------------------------------------------
/src/Tabbable/Tabbable.ts:
--------------------------------------------------------------------------------
 1 | import { computed, ref, ComponentObjectPropsOptions, PropType } from 'vue'
 2 | import { defineComponent, useOnElement } from '../utils'
 3 | import { boxProps, BoxProps, useBox } from '../Box'
 4 | 
 5 | function getIsNativeTabbable(element: Element) {
 6 |   return /^(BUTTON|INPUT|SELECT|TEXTAREA|A|AUDIO|VIDEO)$/.test(element.tagName)
 7 | }
 8 | 
 9 | function useIsNativeTabbable(elementRef) {
10 |   const isNativeTabbable = ref(false)
11 |   useOnElement(elementRef, (element) => {
12 |     isNativeTabbable.value = getIsNativeTabbable(element)
13 |   })
14 |   return isNativeTabbable
15 | }
16 | 
17 | export interface TabbableProps extends BoxProps {
18 |   disabled: boolean
19 |   focusable: boolean
20 |   onClick: () => void
21 |   onMousedown: () => void
22 |   onMouseover: () => void
23 | }
24 | 
25 | export const tabbableProps: ComponentObjectPropsOptions<TabbableProps> = {
26 |   ...boxProps,
27 |   disabled: {
28 |     type: Boolean,
29 |     default: false,
30 |   },
31 |   focusable: {
32 |     type: Boolean,
33 |     default: false,
34 |   },
35 |   onClick: {
36 |     type: Function as PropType<() => void>,
37 |     default: null,
38 |   },
39 |   onMousedown: {
40 |     type: Function as PropType<() => void>,
41 |     default: null,
42 |   },
43 |   onMouseover: {
44 |     type: Function as PropType<() => void>,
45 |     default: null,
46 |   },
47 | }
48 | 
49 | export function useTabbable(props: TabbableProps) {
50 |   const box = useBox()
51 |   const isNativeTabbable = useIsNativeTabbable(box.ref)
52 |   const notFocusable = computed(() => props.disabled && !props.focusable)
53 | 
54 |   const handleNativeEvent = (eventName) => (event: Event) => {
55 |     if (props.disabled) {
56 |       event.preventDefault()
57 |       event.stopPropagation()
58 |       return
59 |     }
60 |     return typeof props[eventName] === 'function' && props[eventName](event)
61 |   }
62 | 
63 |   return {
64 |     ...box,
65 |     tabindex: computed(() =>
66 |       notFocusable.value || isNativeTabbable.value ? null : 0
67 |     ),
68 |     disabled: computed(() =>
69 |       notFocusable.value && isNativeTabbable.value ? true : null
70 |     ),
71 |     'aria-disabled': computed(() => (props.disabled ? true : null)),
72 |     onClick: handleNativeEvent('onClick'),
73 |     onMousedown: handleNativeEvent('onMousedown'),
74 |     onMouseover: handleNativeEvent('onMouseover'),
75 |   }
76 | }
77 | 
78 | export const Tabbable = defineComponent(tabbableProps, useTabbable)
79 | 


--------------------------------------------------------------------------------
/src/Tabbable/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Tabbable'
2 | 


--------------------------------------------------------------------------------
/src/utils/component.ts:
--------------------------------------------------------------------------------
 1 | import { h, unref, defineComponent as vueDefineComponent } from 'vue'
 2 | import { Portal } from '../Portal'
 3 | 
 4 | function addRefToAttributes(attributes, ref) {
 5 |   const [key, value] = ref
 6 | 
 7 |   // A template ref needs to be kept as is
 8 |   if (key === 'ref') {
 9 |     attributes[key] = value
10 |   } else {
11 |     attributes[key] = unref(value)
12 |   }
13 |   return attributes
14 | }
15 | 
16 | export function refsToAttributes(refs) {
17 |   return Object.entries(refs).reduce(addRefToAttributes, {})
18 | }
19 | 
20 | export function defineComponent(componentProps, useAttributeRefs) {
21 |   return vueDefineComponent({
22 |     props: componentProps,
23 |     inheritAttrs: false,
24 |     setup(props, { slots, attrs }) {
25 |       const attributeRefs = useAttributeRefs(props)
26 |       return () => {
27 |         const { withPortal, ...attributes } = refsToAttributes(attributeRefs)
28 |         const renderedComp = h(props.as, { ...attributes, ...attrs }, slots)
29 |         if (withPortal) {
30 |           return h(Portal, null, () => renderedComp)
31 |         }
32 |         return renderedComp
33 |       }
34 |     },
35 |   })
36 | }
37 | 


--------------------------------------------------------------------------------
/src/utils/element.ts:
--------------------------------------------------------------------------------
 1 | import { onMounted, Ref } from 'vue'
 2 | 
 3 | type UseOnElementCallback = (element: HTMLElement) => void
 4 | 
 5 | export function getElementFromRef(elementRef: Ref): HTMLElement {
 6 |   if (!elementRef.value) {
 7 |     return null
 8 |   }
 9 |   return elementRef.value.$el || elementRef.value
10 | }
11 | 
12 | export function useOnElement(elementRef: Ref, use: UseOnElementCallback) {
13 |   onMounted(() => {
14 |     if (!elementRef.value) {
15 |       return
16 |     }
17 |     const element: HTMLElement = getElementFromRef(elementRef)
18 |     use(element)
19 |   })
20 | }
21 | 
22 | const TABBABLE_SELECTOR =
23 |   'a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable], audio[controls], video[controls], summary, [tabindex^="0"], [tabindex^="1"], [tabindex^="2"], [tabindex^="3"], [tabindex^="4"], [tabindex^="5"], [tabindex^="6"], [tabindex^="7"], [tabindex^="8"], [tabindex^="9"]'
24 | 
25 | export function isTabbable(element: HTMLElement): boolean {
26 |   return element.matches(TABBABLE_SELECTOR)
27 | }
28 | 
29 | export function getTabbableElements(element: HTMLElement): HTMLElement[] {
30 |   const tabbableElements = Array.from(
31 |     element.querySelectorAll(TABBABLE_SELECTOR) as NodeListOf<HTMLElement>
32 |   )
33 |   if (isTabbable(element)) {
34 |     tabbableElements.unshift(element)
35 |   }
36 |   return tabbableElements
37 | }
38 | 
39 | export function getNextTabbable(element: HTMLElement): HTMLElement {
40 |   const tabbableElements = getTabbableElements(document.body)
41 |   const indexOfElement = tabbableElements.indexOf(element)
42 |   return tabbableElements[indexOfElement + 1]
43 | }
44 | 
45 | export function isFocused(element: HTMLElement): boolean {
46 |   return element === document.activeElement
47 | }
48 | 
49 | export function focusIsWithin(element: HTMLElement) {
50 |   return elementIsWithin(element, document.activeElement as HTMLElement)
51 | }
52 | 
53 | export function elementIsWithin(container: HTMLElement, element: HTMLElement) {
54 |   if (!container || !element) {
55 |     return false
56 |   }
57 |   return container.contains(element as HTMLElement)
58 | }
59 | 
60 | export function focusFirstFocusable(element: HTMLElement) {
61 |   const elementToFocus = getTabbableElements(element)[0] || element
62 |   elementToFocus.focus()
63 | }
64 | 
65 | export function forceFocus(element: HTMLElement) {
66 |   const tabIndex = element.getAttribute('tabindex')
67 |   if (tabIndex == null) {
68 |     element.setAttribute('tabindex', '-1')
69 |   }
70 |   element.focus()
71 |   if (tabIndex == null) {
72 |     element.removeAttribute('tabindex')
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './component'
2 | export * from './element'
3 | export * from './visibility'
4 | 


--------------------------------------------------------------------------------
/src/utils/visibility.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   unref,
 3 |   watch,
 4 |   onMounted,
 5 |   getCurrentInstance,
 6 |   Ref,
 7 |   RendererNode,
 8 | } from 'vue'
 9 | import { getElementFromRef } from './element'
10 | 
11 | export function useVisibilityTransition(
12 |   visibleRef: Ref<boolean>,
13 |   elementRef: Ref<HTMLElement>
14 | ) {
15 |   if (unref(visibleRef) == null) {
16 |     return
17 |   }
18 | 
19 |   const currentInstance = getCurrentInstance()
20 |   let initialDisplayValue
21 | 
22 |   function setDisplay(el: RendererNode, value: unknown): void {
23 |     el.style.display = value ? initialDisplayValue : 'none'
24 |     el.hidden = value ? null : true
25 |   }
26 | 
27 |   watch(visibleRef, (visible) => {
28 |     const { transition } = currentInstance.vnode
29 |     const el = getElementFromRef(elementRef)
30 |     if (!transition) {
31 |       setDisplay(el, visible)
32 |       return
33 |     }
34 | 
35 |     if (visible) {
36 |       transition.beforeEnter(el)
37 |       setDisplay(el, true)
38 |       transition.enter(el)
39 |       return
40 |     }
41 | 
42 |     transition.leave(el, () => {
43 |       setDisplay(el, false)
44 |     })
45 |   })
46 | 
47 |   onMounted(() => {
48 |     const visible = unref(visibleRef)
49 |     const { transition } = currentInstance.vnode
50 |     const el = getElementFromRef(elementRef)
51 |     initialDisplayValue = el.style.display === 'none' ? '' : el.style.display
52 |     if (transition && visible) {
53 |       transition.beforeEnter(el)
54 |       transition.enter(el)
55 |       return
56 |     }
57 |     setDisplay(el, visible)
58 |   })
59 | }
60 | 


--------------------------------------------------------------------------------
/test/setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom'
2 | 


--------------------------------------------------------------------------------
/test/utils/events.ts:
--------------------------------------------------------------------------------
 1 | import { getByText as _getByText, fireEvent } from '@testing-library/dom'
 2 | import userEvent from '@testing-library/user-event'
 3 | 
 4 | export const getByText = (text) => _getByText(document.body, text)
 5 | export const { click, dblClick, tab } = userEvent
 6 | 
 7 | type TypeOptions = {
 8 |   delay: number
 9 |   skipClick?: boolean
10 |   skipAutoClose?: boolean
11 |   initialSelectionStart?: number
12 |   initialSelectionEnd?: number
13 | }
14 | 
15 | export const type = (
16 |   element: Element,
17 |   text: string,
18 |   options: TypeOptions = {
19 |     delay: 0,
20 |     skipClick: true,
21 |   }
22 | ) => {
23 |   return userEvent.type(element, text, options)
24 | }
25 | 
26 | export const mousedown = (element: Element) =>
27 |   fireEvent(element, new MouseEvent('mousedown'))
28 | 
29 | export const mouseover = (element: Element) =>
30 |   fireEvent(element, new MouseEvent('mouseover'))
31 | 
32 | const createPress =
33 |   (key) => async (element: Element & { focus: () => void }) => {
34 |     element.focus()
35 |     await type(element, key)
36 |   }
37 | 
38 | export const pressSpace = createPress(' ')
39 | export const pressEnter = createPress('{enter}')
40 | export const pressEsc = createPress('{esc}')
41 | 


--------------------------------------------------------------------------------
/test/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './render'
2 | export * from './events'
3 | 


--------------------------------------------------------------------------------
/test/utils/render.ts:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils'
 2 | import { App } from 'vue'
 3 | 
 4 | const IGNORED_WARNINGS = ['Non-function value encountered for default slot.']
 5 | 
 6 | const mountedWrappers = new Set()
 7 | 
 8 | export const renderJsx = (template) => {
 9 |   const component = {
10 |     render() {
11 |       return template
12 |     },
13 |   }
14 |   return render(component)
15 | }
16 | 
17 | export const render = (component, options = {}) => {
18 |   const wrapper = mount(component, {
19 |     ...options,
20 |     attachTo: document.body,
21 |     global: {
22 |       plugins: [ignoreWarnings],
23 |     },
24 |   })
25 |   mountedWrappers.add(wrapper)
26 |   return {
27 |     nextTick: wrapper.vm.$nextTick,
28 |   }
29 | }
30 | 
31 | function cleanupWrapper(wrapper) {
32 |   if (
33 |     wrapper.element.parentNode &&
34 |     wrapper.element.parentNode.parentNode === document.body
35 |   ) {
36 |     document.body.removeChild(wrapper.element.parentNode)
37 |   }
38 | 
39 |   try {
40 |     wrapper.unmount()
41 |   } finally {
42 |     mountedWrappers.delete(wrapper)
43 |   }
44 | }
45 | 
46 | function cleanup() {
47 |   mountedWrappers.forEach(cleanupWrapper)
48 | }
49 | 
50 | function ignoreWarnings(app: App) {
51 |   app.config.warnHandler = function (msg, ...args) {
52 |     if (IGNORED_WARNINGS.some((warning) => msg.includes(warning))) {
53 |       return
54 |     }
55 |     console.warn(`[Vue warn]: ${msg}`, ...args)
56 |   }
57 | }
58 | 
59 | afterEach(() => {
60 |   cleanup()
61 | })
62 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "exclude": ["**/*.spec.tsx", "lib", "examples", "test"],
3 |   "compilerOptions": {
4 |     "outDir": "lib",
5 |     "declaration": true,
6 |     "declarationDir": "./dts",
7 |     "noEmitOnError": false
8 |   }
9 | }


--------------------------------------------------------------------------------