Package Exports

vimport

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vimport) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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