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
• VpTablist
• VpTab
• VpTabpanels
• VpTabpanel

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.