ups-lil-ui-components-vue2 v1.0.3

ups-lil-ui-components-vue2

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

yarn

yarn add ups-lil-ui-components-vue2

Usage

Example of importing component and css file:

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

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-components-vue2/dist/ups-lil-ui-components.common";

export default {
  components: {
    FormInput,
  },
  data() {
    return {
      inputValue: "",
    };
  },
};
</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

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