ups-lil-ui-vue3

1.0.19 • Public • Published

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

Package Sidebar

Install

npm i ups-lil-ui-vue3

Weekly Downloads

11

Version

1.0.19

License

MIT

Unpacked Size

135 kB

Total Files

6

Last publish

Collaborators

  • altyn-org