Lil ui library with customazable inputs, icon loader and modal notification
- 💡Intuitive
- 🔧Customazible
- 🪶Lighweight
- ✨Beauty design
# or yarn
npm install --save ups-lil-ui-components-vue2
yarn add ups-lil-ui-components-vue2
import { InputIIN } from "ups-lil-ui-components-vue2/dist/ups-lil-ui-components.common";
import "ups-lil-ui-components-vue2/dist/ups-lil-ui-components.css";
List of all components:
Component | Description |
---|---|
FormInput | Customizable input component |
VueTooltip | Tooltip component |
IconBase | Base component to load icons |
CodeInput | Verification code input component |
BaseTransition | Transition using css opacity
|
SlideTransition | Transition using css opacity and translateY
|
UserDivider | Component for user divider |
DefaultAlert | Modal alert window component |
appAlert | Store object for DefaultAlert component |
List of all inputs components:
Component | Description |
---|---|
InputAcc | Account input component |
InputBik | Bank Identification Code (BIK) input component |
InputBin | Business Identification Number (BIN) input component |
InputEmail | Email input component |
InputFIO | Full name input component |
InputIIN | Individual Identification Number (IIN) input component |
InputKbe | Bank Entity Code (KBE) input component |
InputPhone | Phone number input component |
InputPhoneLogin | Phone number login input component |
InputTariff | Tariff input component |
Usage:
<InputIIN v-model="iin"></InputIIN>
<template>
<FormInput
v-model="inputValue"
title="Input Title"
:max="30"
:min="1"
warningMsg="Warning Message"
tooltipMsg="Tooltip Message"
rule="^[0-9А-Яа-я\\-\\s]+$"
warningFlag="true"
sintax="^[0-9А-Яа-я\\-\\s]$"
:capitalize="true"
:column="false"
:decimal="false"
placeholder="Placeholder Text"
:mobile="false"
/>
</template>
<script>
import { FormInput } from "ups-lil-ui-components-vue2/dist/ups-lil-ui-components.common";
export default {
components: {
FormInput,
},
data() {
return {
inputValue: "",
};
},
};
</script>
Prop | Type | Default Value | Description |
---|---|---|---|
value | String | The value of the input field (v-model) | |
title | String | Title for the input field | |
max | Number | 30 | Maximum character limit for the input field |
min | Number | 1 | Minimum character limit for the input field |
warningMsg | String | Warning message to display when input is invalid | |
tooltipMsg | String | Tooltip message to display | |
rule | String | "^[0-9А-Яа-я\-\s]+$" | Regular expression rule for input validation |
warningFlag | Boolean | false | Flag to enable warning message display |
sintax | String | "^[0-9А-Яа-я\-\s]$" | Regular expression for character validation |
capitalize | Boolean | false | Flag to capitalize input text |
column | Boolean | false | Flag to enable column layout |
decimal | Boolean | false | Flag to allow decimal input |
placeholder | String | Placeholder text for the input field | |
mobile | Boolean | false | Flag to enable mobile-specific input features |
Event Name | Data Type | Description |
---|---|---|
input | String | Emits the updated input value whenever the input changes. |
valid | Boolean | Emits a boolean indicating whether the input is valid or not. |
<DefaultAlert
text="This is an alert"
alert-type="warning"
:use-store="false"
:is-clicked="isClicked"
@update:is-clicked="isClicked = false">
</DefaultAlert>
Prop | Type | Default Value | Description |
---|---|---|---|
alert-type | String | "info" | Type of the alert (info, warning, error, success) |
useStore | Boolean | true | Indicates whether to use store |
color-info | String | "#2585EE" | Color for info alerts |
color-warning | String | "#FFCF40" | Color for warning alerts |
color-error | String | "#F2363B" | Color for error alerts |
color-success | String | "#22C993" | Color for success alerts |
isClicked | Boolean | false | Indicates if the alert has been clicked |
alert-text | String | "This is an alert" | Text content of the alert |
wide | Boolean | false | Indicates if the alert should be wide |
Use event below to close modal window without store
Event Name | Data Type | Description |
---|---|---|
update:is-clicked | Boolean | Emits an event to update is-clicked prop |
if u want to use store to call DefaultAlert
u need additional import:
import Vue from "vue";
import Vuex from "vuex";
import appAlert from "ups-lil-ui-components-vue2/dist/ups-lil-ui-components.common";
Vue.use(Vuex);
export const store = new Vuex.Store({
modules: {
alert: appAlert,
},
});
Then u can use it like this:
methods: {
callAlert(text, type) {
var alert = {
text: "",
type: null,
};
alert.text = text;
alert.type = type;
this.$store.commit("clickAlertWide", true);
this.$store.commit("setMessage", alert);
},
onBtnClick() {
this.callAlert("Buttn clicked!", "info")
}
}