Vx-vue NPM | npm.io

vxVue

Introduction

VxVue provides a handful of reusable Vue components styled with Tailwind CSS. All components are geared towards simplicity leaving room for customizations, extensions or adaptations. At some point a more verbose documentation than this brief readme might emerge.

Requirements

Vue.js 3.4+
Tailwind CSS 3.4+

The official Tailwind CSS forms plugin is used to provide basic styling of the form components using the class strategy which allows the styling of non-form elements consistently. An easy to configure color theming is applied. vxvue and vxvue-alt are used as the two colors scales. Since Tailwind won't observe classes in imported components tailwind.config.js should also list the node package in the content array.

module.exports = {
    content: [
        './node_modules/vx-vue/**/*.js',
        ...
    ],
    theme: {
        extend: {
            colors: {
                'vxvue': {
                    DEFAULT: ...,
                    '50': ...,
                    ...
                    '900': ...
                },
                'vxvue-alt': {
                    ...                
                }
            }
        }
    }
}

To use the few scoped styles along with your CSS add

import 'vx-vue/vx-vue.css'

to your main.js or index.js file.

The components use an extra color palette.

Provided components

So far the following components have been implemented:

Accordion

An Accordion; requires AccordionPanels as child components. Key navigation with tab, cursor up, cursor down is provided. If activeIndex is an array multiple panels can be open at the same time; if it is a number only one panel at a time can be open.

props	events	slots
`activeIndex [Number, Array]`	`update:active-index`

AccordionPanel

Only useful as child component of an Accordion component.

props	events	slots
`show [Boolean]disabled [Boolean]`	`keyupkeydownselect`	`headerdefault`

Autocomplete

A component which provides suggestions with each keystroke.

props	events	slots
`modelValue [String]search [Function]baseClass [String]resultListClass [String]resultItemClass [String]inputClass [String]autoSelect [Boolean]getResultValue [Function]`	`update:modelValueblursubmit`	`result`

Confirm

A promise-based component which can either take one ("confirm") or two buttons ("confirm", "cancel"). Clicking "confirm" resolves, "cancel" rejects the promise.

props	events	slots
none	none	`titleiconmessage`

DateInput

An input element for guided date inputs, which also serves as child component of the datepicker component.

props	events	slots
`modelValue [Date]outputFormat [String]inputFormat [String]showButton [Boolean]locale [String]`	`update:modelValuetoggle-datepicker`	`default`

Datepicker

A not-too-fancy datepicker.

props	events	slots
`modelValue [Date]validFrom [Date]validUntil [Date]dayNames [Array]locale [String]startOfWeekIndex [Number]hasInput [Boolean]`	`update:modelValuemonth-changeyear-change`	`default`

FormFileButton

A thinly wrapped type-file input that allows proper styling and integration.

props	events	slots
`modelValue [Array]accept [String]multiple [Boolean]name [String]id [String]`	`update:modelValueform-data`	none

FormSelect

A select element adapted for Vue.js integration.

props	events	slots
`modelValue [String, Number]options [Array]disabledLabel [String]`	`update:modelValue`	none

FormSwitch

Nothing more than a fancy checkbox.

props	events	slots
`modelValue [Mixed]`	`update:modelValue`	`default`

MessageToast

Displays a notification message which can either be dismissed by the user and/or by itself after a configurable timeout.

props	events	slots
`title [String]message [String, Array]timeout [Number]active [Boolean]`	`timeoutclose`	`icontitledefault`

Modal

A modal overlay which provides slots.

props	events	slots
`show [Boolean]containerClass [String]headerClass [String]contentClass [String]`	`clicked-outside`	`titledefault`

Pagination

A pagination component for an arbitrary list of items; rather opinionated in its responsive layout.

props	events	slots
`page [Number]total [Number]perPage [Number]showNavButtons [Boolean]prevText [String]nextText [String]showAllPages [Boolean]markerPosition ['above', 'below']`	`update:page`	none

PasswordInput

A simple input element paired with a toggle button which toggles the input element between between type='password' and type='text'

props	events	slots
`modelValue [String]`	`update:modelValue`	`default`

SimpleTree

A collapsible tree component which is implemented by a single recursive component.

props	events	slots
`branch [Object]`	`branch-selectedexpand`	none

Slider

A slider replacing and enhancing an input type="range".

The component can have one or more thumbs: modelValue can either be a number or an array of numbers and the length of the array determines the number of thumbs.

props	events	slots
`modelValue [Number]min [Number]max [Number]vertical [Boolean]disabled [Boolean]`	`update:modelValue`	none

Sortable

A sortable table; the columns prop specifies the columns and their sorting options.

props	events	slots
`columns [Array]rows [Array]offset [Number]count [Number]sortProp [String]sortDirection ['asc', 'desc']keyProperty [String]`	`before-sortafter-sort`	`{ column: prop }-header{ column: prop }`

Spinner

Well, an animated circular spinner; colorized with currentColor.

props	events	slots
`radius [Number]strokeWidth [Number]`

SubmitButton

A button which will be disabled when busy is true and display a spinner to its right. Apart from a default theme a success and error theme are provided with matching spinner. In any case the spinner can be styled by a separate class string.

props	events	slots
`busy [Boolean]theme [String]spinnerClass [String]`	`submit`	`default`

Tabs

A responsive tabs component. The items array holds objects with a required name [String] and optional badge [String], icon [Component] and disabled [Boolean] properties.