ups-lil-ui-vue3

Lil ui library with customazable inputs, icon loader and modal notification

• 💡Intuitive
• 🔧Customazible
• 🪶Lighweight
• ✨Beauty design

Installation

npm

# or yarn
npm install --save ups-lil-ui-vue3

yarn

yarn add ups-lil-ui-vue3

Usage

Example of importing component and css file:

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:

<InputIIN v-model="iin"></InputIIN>

Custom Input

<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-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)
      }
    }
  }
};
</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. |

Modal alert window:

<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 |

Warning: Doesn't tested in vue3

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-vue3'

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")
    }
}