README
vimport
About the Project
vimport is a set of accessible, unstyled and WAI-ARIA spec-compliant components for Vue 3. You may style your components by writing your own CSS classes or using a framework like Tailwind CSS.
Roadmap
Currently, vimport contains only one component, the tab. However, new components will be added gradually.
The next component we will publish is the tree .
Prerequisites
Before installing our package, you need to complete Vue 3 installation.
Installation
The package can be installed via npm or yarn.
npm
npm i vimport
yarn
yarn add vimport
Usage
Global Registration
The plugin can be used to register all components globally. Your code may look like as follows:
import { createApp } from 'vue';
import Vimport from 'vimport';
import App from './App.vue';
createApp(App).use(Vimport).mount('#app');
Also, you may register the components you will use one by one.
import { createApp } from 'vue';
import { VpTabs, VpTablist, VpTab, VpTabpanels, VpTabpanel } from 'vimport';
import App from './App.vue';
createApp(App)
.component('VpTabs', VpTabs)
.component('VpTablist', VpTablist)
.component('VpTab', VpTab)
.component('VpTabpanels', VpTabpanels)
.component('VpTabpanel', VpTabpanel)
.mount('#app');
Local Registration
Another option is registering the components locally,
import { VpTabs, VpTablist, VpTab, VpTabpanels, VpTabpanel } from 'vimport';
export default {
components: {
VpTabs,
VpTablist,
VpTab,
VpTabpanels,
VpTabpanel,
},
// ...
};
Components
Currently, the only component we have implemented is the tab.
Tab
The tab is implemented according to here. All aria-*
attributes are managed automatically. We handle following keyboard interactions:
- `ArrowLeft` key moves the focus to the previous tab.
- `ArrowRight` key moves the focus to the next tab.
- If the orientation is vertical `ArrowUp` and `ArrowDown` keys perform those operations.
- `Home` key moves the focus to the first tab.
- `End` key moves the focus to the last tab.
- `Space` and `Enter` keys select the focused tab.
- `Delete` key deletes the focused tab if it is deletable.
In addition, you can use Vue's keep-alive.
You may construct your tab view using the following 5 "sub-component". Nested tabs are supported.
VpTabs
It is the root of the other 4 tab components. Nested VpTabs
components are supported.
Props
Prop | Type | Default | Description |
---|---|---|---|
as |
String | div |
The name of the HTML tag or Vue component the element is rendered as. |
modelValue |
String | required | The name of the selected tab. v-model uses it. |
Emits
Emit | Type | Description |
---|---|---|
update:modelValue |
String | Triggered when a tab is selected. v-model uses it. The name of the newly selected tab is passed to the listener. |
delete |
String | Triggered when the user tries to delete a deletable tab. The name of the tab is passed to the listener. |
VpTablist
It is the container for VpTab
components.
Props
Prop | Type | Default | Description |
---|---|---|---|
as |
String | div |
The name of the HTML tag or Vue component the element is rendered as. |
label |
String | required | The label which is used by screen readers. |
vertical |
Boolean | false |
Whether the orientation of the tablist is vertical or not. |
manual |
Boolean | false |
Whether the newly focused tabs should be activated manually (pressing space or enter key) or not. |
VpTab
All VpTab
components must be inside VpTablist
component.
Props
Prop | Type | Default | Description |
---|---|---|---|
as |
String | button |
The name of the HTML tag or Vue component the element is rendered as |
name |
String | required | Unique name for the tab. |
disabled |
Boolean | false |
Whether the tab is disabled or not. |
deletable |
Boolean | false |
Whether the tab is deletable or not. If it is deletable and delete key is pressed, the root VpTabs emits delete event. |
Slot props
Prop | Type | Description |
---|---|---|
selected |
Boolean | Whether the tab is selected or not. |
disabled |
Boolean | Whether the tab is disabled or not. |
focused |
Boolean | Whether the tab is focused or not. |
VpTabpanels
This must be inside VpTabs
component. You may also use Vue's keep-alive
.
Props
Prop | Type | Default | Description |
---|---|---|---|
keepAlive |
Boolean | false |
Whether the Vue's keep-alive should be used or not. |
keepAliveInclude |
String, Regex, Array | include parameter of the Vue's keep-alive . |
|
keepAliveExclude |
String, Regex, Array | exclude parameter of the Vue's keep-alive . |
|
keepAliveMax |
Number | max parameter of the Vue's keep-alive . |
VpTabpanel
All VpTabpanel
components must be inside VpTabpanels
component.
Props
Prop | Type | Default | Description |
---|---|---|---|
as |
String | div |
The name of the HTML tag or Vue component the element is rendered as. |
name |
String | required | Unique name for the tabpanel. If the modelValue of the root VpTabs matches with the name , the VpTabpanel is rendered. |