https://github.com/linusborg/varia
Vuejs 3 baseline components and composables fo building WAI-ARIA compatible UI components
https://github.com/linusborg/varia
Last synced: about 1 year ago
JSON representation
Vuejs 3 baseline components and composables fo building WAI-ARIA compatible UI components
- Host: GitHub
- URL: https://github.com/linusborg/varia
- Owner: LinusBorg
- License: other
- Created: 2019-12-14T15:46:33.000Z (over 6 years ago)
- Default Branch: develop
- Last Pushed: 2021-08-05T00:23:10.000Z (almost 5 years ago)
- Last Synced: 2025-03-17T03:21:19.187Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 8.85 MB
- Stars: 33
- Watchers: 3
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-aria
> WAI-ARIA compliant components that come without any styles, plus lower-level utility composables.
> Meant as a base for building your own component collection while ensuring solid A11y from the get-go.
## WARNING: EXPERIMENTAL
This project is currently at an exploratory/experimental stage in its development.
We are still in the process of figuring out the patterns and designed APIs suited for those patterns.
- APIs will change frequently and without notice.
- Many things don't work, and if they do, might break easily.
- Even more things are still completely missing.
So:
- If you want to contribute to the project, please see [the "For Developers" Notes](#for-developers).
- If you want to use this already: don't.
## Documentation
- Source: see `./packages/docs`
- Live: _TBD_
## Installation
```javascript
import { createApp } from 'vue'
// import the plugin
import { install as plugin } from '@varia/widgets'
import App from './App.vue'
createApp(App)
.use(plugin) // add the plugin to your app
.mount('#app')
```
## State of Development
Click here to the the state of development
### Basics
#### ``
- [x] Implementation
- ~~Examples~~
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
#### ``
- [x] Implementation
- ~~Examples~~
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
#### ``
- [x] Implementation
- [x] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
#### ``
- [ ] Implementation
- [ ] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
#### ``
- [ ] Implementation
- [ ] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
### Showing and Hiding Stuff
#### ``
- [x] Implementation
- [x] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
#### ``
- [ ] Implementation
- [ ] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
#### ``
- [x] Implementation
- [x] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
#### ``
- [x] Implementation
- [x] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
#### ``
- [x] Implementation
- [x] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
### Structured Data
#### ``
- [x] Implementation
- [x] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
#### ``
- [ ] Implementation
- [ ] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
#### ``
- [ ] Implementation
- [ ] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
#### ``
- [ ] Implementation
- [ ] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
#### ``
- [ ] Implementation
- [ ] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
### Special-Purpose
#### ``
- [x] Implementation
- [x] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
#### ``
- [x] Implementation
- [ ] Examples
- [ ] Documentation
- [ ] Unit Tests
- [ ] E2e Tests
## Usage
### Tabs Component
```html
Basic
Tab A
Tab B
Tab C
Panel A
Panel B
Panel C
import { defineComponent } from 'vue'
import { Tab, TabList, TabPanel, useTabs } from '@varia/widgets'
export default defineComponent({
components: {
Tab,
TabList,
TabPanel,
},
data() {
return {
selectedTab: 'A',
}
},
})
```
This gives you:
- a fully functional Tabs UI.
- which is completely unstyled.
- yet fully accessible (WAI-ARIA 1.2 spec-compliant)
- commuication between `useTabs()`, `` and `` abstracted away through `provide/inject`
### Customizing through composition
- _TBD_
### Using a lower-level composable
- _TBD_
## Aknowledgements
I've studied other projects that share the same or or a similar close in my endavour, some more closely than others. If I took anything specific from them you'll find mentions in the source.
Projects:
- Vuetensils
- Reach-UI
- Reakit
## For Developers
This project is set up as a monorepo using lerna and yarn workspaces. For this reason, yarn is required to contribute to this project, all found in the `./packages` directory.
- `@varia/composables`: a suppor package providing lower-level composables, upon which the components in `aria-widgets` are built. Can be used standalone as well.
- `@varia/widgets`: the main package, exporting all of the components.
- `docs`: the project's documentation, built with [Vuepress](vuepress.vuejs.org)
- `examples`: a Vue CLI app containing examples for all of the components from `aria-widgets`. used for e2e tests
For more information on how to contribute, please see [the contribution guide](./github/CONTRIBUTING.md)