Vimport NPM | npm.io

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

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.

vue accessible unstyled customizable tab

@everything-registry/sub-chunk-3056 @infinitebrahmanuniverse/nolb-vim

3 years ago

3 years ago

3 years ago

3 years ago