0.2.1 • Published 12 months ago
vuersatile-components v0.2.1
Vuersatile Components
Installation
We can install Vuersatile Components
with NPM:
npm install --save vuersatile-components
Usage
First, we need to configure our library. Vuersatile Components
comes with vue-i18n
pre-bundled, so we have to pass its options as param to our library configurator. Here us one example of app configuration:
import '../node_modules/vuersatile-components/dist/style.css' // Vite fix
import '../node_modules/vuersatile-components/dist/style.scss'
import { VuersatileInit } from 'vuersatile-components'
import messages from './messages.json';
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
VuersatileInit(app, {
locale: 'en', // set locale
messages: {
en: messages // set locale messages
}
});
app.use(createPinia())
app.use(router)
app.mount('#app')
Now we can use our components wherever we want:
import {
Card,
Tooltip,
LockedIcon,
TooltipInfo,
Form,
InputText,
InputNumber,
InputPassword,
ToggleSwitch,
SegmentedControl,
Checkbox,
InputTextarea,
RadioButtonGroup,
InputSelect,
InputMultiSelect
} from 'vuersatile-components';
i18n default messages
{
"FORM": {
"ERROR": {
"EMAIL": "Invalid email",
"MAX_VALUE": "You must enter a number least than indicated",
"MIN_CURRENT_DATE": "You must enter a date greater than today",
"MIN_VALUE": "You must enter a number greater than indicated",
"NOT_DATE": "Field must be valid date",
"NOT_EMPTY": "Field can't be empty",
"NOT_EMPTY_NUMBER": "You must enter a number",
"NOT_EQUAL": "This information does not match",
"NOT_INT": "Field must be integer",
"NOT_NUMBER": "Field must be number",
"NOT_VALID_TIME": "Field is not a valid time",
"PHONE": "Invalid phone number",
"MANDATORY_LONG": "Field is mandatory",
"NOT_MAX_LENGTH": "Invalid max length",
"NOT_MIN_LENGTH": "Invalid min length"
}
},
"GENERIC": {
"ADD": "Add",
"CLEAR": "Clear",
"CONTINUE": "Continue",
"FROM": "From",
"NO_RESULTS": "No results",
"NO": "No",
"SEARCH": "Search",
"TO": "To",
"YES": "Yes"
}
}
0.2.1
12 months ago
0.2.0
1 year ago
0.1.26
1 year ago
0.1.25
1 year ago
0.1.24
1 year ago
0.1.23
1 year ago
0.1.22
1 year ago
0.1.21
1 year ago
0.1.20
1 year ago
0.1.19
1 year ago
0.1.18
1 year ago
0.1.17
1 year ago
0.1.16
1 year ago
0.1.15
1 year ago
0.1.14
1 year ago
0.1.13
1 year ago
0.1.12
1 year ago
0.1.11
1 year ago
0.1.10
1 year ago
0.1.9
1 year ago
0.1.8
1 year ago
0.1.7
1 year ago
0.1.6
1 year ago
0.1.5
1 year ago
0.1.4
1 year ago
0.1.3
1 year ago
0.1.2
1 year ago
0.1.1
1 year ago
0.1.0
1 year ago