Vue3-UI

Vue3-UI is a package that implements some default UI elements for Bootstrap 5.

Installation

Using npm:

$ npm install @101media/vue3-ui

Using bower:

$ bower install @101media/vue3-ui

Using yarn:

$ yarn add @101media/vue3-ui

Configuration

import Ui from "@101media/vue3-ui"

const UiConfig = {
    UInput:       {
// groupClass: "mb-3",
// class :'',
// label: '',
// error : '',
// group: '',
// type : '',
// required: false,
    },
    UCheckbox:    {
// id:        "",
// switches:  false,
// error:     "",
// checked:   false,
// value:     "",
// formClass: "",
    },
    UDragDrop:    {
// groupClass : '',
// class: '',
// accept: '',
// error : '',
    },
    UMultiSelect: {
// group: false,
// groupClass: '',
// class: '',
// accept: '',
// error: '',
    },
    URadio:       {
// class: '',
// value: '',
// label: '',
// error : '',
// button : false,
// groupClass: '',
// formClass: '',
    },
    UTextArea:    {
// autosize: true,
// minHeight: null,
// maxHeight: null,
// error : '',
// classList : '',
    },
}

app.use(UI, UiConfig)

Usage

import {createApp} from 'vue';
import Ui from "@101media/vue3-ui";


const app = createApp({
    //
});

app.use(Ui)
...

Configuration

Default configuration can be set when initializing plugin.

import {createApp} from 'vue';
import Ui from "@101media/vue3-ui";

const UiConfig = {
    //
}

const app = createApp({
    //
});

app.use(Ui, UiConfig)

Components

All components support default HTML attributes.

Button

Show a button.

String type The button type

String class The button class

Boolean block Whether the button should be displayed as block.

Callable @click On button click event

<Button type="button" class="btn-secondary" :block="true" @click="test"></Button>

Checkbox

Show a checkbox.

String type Define the input type.

Boolean switches Whether the checkbox should be a switch

Array|Boolean checked whether the checkbox is checked

Any value The checkbox value

String formClass The class of the form group

Input

Show an input.

String id The component ID

String error The error message

Boolean group Whether the input should be grouped

String groupClass The class for the form group

String type The input type

<Input placeholder="Example input" v-model="text" id="TextInput1"></Input>

MultiSelect

Show a multiselect component.

This component is a wrapper around VueForm/Multiselect.

String error The error message

Boolean group Whether the input should be grouped

String mode The type of input, options are single, multiple, tags

Array|Object options An array or object of the selectable options.

<MultiSelect v-model="form.multiselect" :options="{1: 'first', 2:'second', 3: 'third' }">
This is a multiselect with three options
</MultiSelect>

Textarea

Show a auto resize textarea component.

String error The error message

String classList The class

Number minHeight The minimum height of the textarea

Number maxHeight The maximum height of the textarea

String mode The type of input, options are single, multiple, tags

<MultiSelect v-model="form.multiselect" :options="{1: 'first', 2:'second', 3: 'third' }">
This is a multiselect with three options
</MultiSelect>

String headerClass The header class

String headerTitleClass The header title class

Credits

Vue3-UI is inspired by Buefy.

License

Code released under MIT license.