ups-lil-ui-vue3 v1.0.19

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:

Inputs

List of all inputs components:

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>

Modal alert window:

<DefaultAlert
    text="This is an alert"
    alert-type="warning"
    :use-store="false"
    :is-clicked="isClicked"
    @update:is-clicked="isClicked = false">
</DefaultAlert>

Use event below to close modal window without store>

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