Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/altynboy/ups-lil-ui-vue3
Lil ui components for vue3
https://github.com/altynboy/ups-lil-ui-vue3
Last synced: 27 days ago
JSON representation
Lil ui components for vue3
- Host: GitHub
- URL: https://github.com/altynboy/ups-lil-ui-vue3
- Owner: Altynboy
- Created: 2024-05-14T13:27:55.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-16T11:42:10.000Z (9 months ago)
- Last Synced: 2024-05-17T11:52:28.063Z (9 months ago)
- Language: Vue
- Size: 105 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ups-lil-ui-vue3
> Lil ui library with customazable inputs, icon loader and modal notification
- 💡Intuitive
- 🔧Customazible
- 🪶Lighweight
- ✨Beauty design
## Installation
### npm
```bash
# or yarn
npm install --save ups-lil-ui-vue3
```
### yarn
```bash
yarn add ups-lil-ui-vue3
```
## Usage
### Example of importing component and css file:
```js
import { InputIIN } from 'ups-lil-ui-vue3'
import 'ups-lil-ui-vue3/style.css'
```
## Components
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 (not tested in Vue3) |
### Inputs
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:
```js
```
### Custom Input
```js
import { FormInput } from "ups-lil-ui-vue3";
export default {
components: { FormInput },
emits: ['update:modelValue'],
props: {
modelValue: {
type: String
},
label: {
type: String,
default: ''
}
},
computed: {
inputVal: {
get() {
return this.modelValue
},
set(val) {
this.$emit('update:modelValue', val)
}
}
}
};
```
| 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. |
### Modal alert window:
```js
```
| 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 |
> Warning: Doesn't tested in vue3
if u want to use store to call `DefaultAlert` u need additional import:
```js
import Vue from 'vue'
import Vuex from 'vuex'
import appAlert from 'ups-lil-ui-vue3'
Vue.use(Vuex)
export const store = new Vuex.Store({
modules: {
alert: appAlert
}
})
```
Then u can use it like this:
```js
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")
}
}
```