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:

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. |