https://github.com/devmor-j/vue_modal_component
Modal component
https://github.com/devmor-j/vue_modal_component
modal picocss vue
Last synced: over 1 year ago
JSON representation
Modal component
- Host: GitHub
- URL: https://github.com/devmor-j/vue_modal_component
- Owner: devmor-j
- Created: 2022-06-28T06:59:58.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-07T12:31:09.000Z (almost 4 years ago)
- Last Synced: 2025-01-11T03:19:16.519Z (over 1 year ago)
- Topics: modal, picocss, vue
- Language: Vue
- Homepage: https://devmor-vue-modal-component.netlify.app
- Size: 396 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Modal Component
Two modal component with transitions using Vue's teleport feature.
Created using [Vue 3](https://vuejs.org/) and [PicoCSS](https://picocss.com/) which is a CSS framework based on Semantic HTML5 with accessibility in mind.
## Features
- Both modal components can be closed by **clicking outside** of the modal-box
- Shows aria-busy loading indicator when clicking on `Show Modal` button
- In Firefox browsers, *backdrop* filter ~will not work until they implement this CSS property~ now works as of v103.0+
- It is accessible and has semantic tags
- Minimal styles and works without [PicoCSS](https://picocss.com/)
> Closing modal by pressing **escape** key is the next feature that I will add
## Benefits of Teleport (Vue 3 feature)
Teleport makes sure modal is the closed element in terms of depth because it is injected to just before the body end tag.
Compare *BaseModal* component with *TeleportModal*; when clicking on `Show Modal` button, **aria-busy loading** indicator is awefully visible on *BaseModal*. But on *TeleportModal* thanks to Vue's Teleport feature, `Show Modal` button loading will be rendered behind the `modal-wrapper` since it has a backdrop filter (blur) effect, so there is no unexpected behaviour.