Vue3-UI is a package that implements some default UI elements for Bootstrap 5.
## Installation
Using npm:
```bash
$ npm install @101media/vue3-ui
```
Using bower:
```bash
$ bower install @101media/vue3-ui
```
Using yarn:
```bash
$ yarn add @101media/vue3-ui
```
## Configuration
```javascript
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
```js
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.
```js
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
```vue
```
### 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
```vue
```
### MultiSelect
Show a multiselect component.
This component is a wrapper around [VueForm/Multiselect](https://github.com/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.
```vue
This is a multiselect with three options
```
### 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`
```vue
This is a multiselect with three options
```
`String headerClass`
The header class
`String headerTitleClass`
The header title class
## Credits
Vue3-UI is inspired by [Buefy](https://github.com/buefy/buefy).
## License
Code released under MIT license.
---
_Source: https://npm.io/package/@101media/vue3-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
