vue-simple-ui-components v0.4.6

vue-simple-ui-components

Library of components, written in Vue.js

Installation

npm install vue-simple-ui-components

Then import like this:

import { ComponentName } from "vue-simple-ui-components";

Also add the styles in App.vue or in other place to be used globally on the project:

import "vue-simple-ui-components/dist/style.css"; 

This library is meant to be used with Tailwindcss, so add also this style globally:

import "vue-simple-ui-components/dist/output.css";

Testing locally

After downloading the repository and running:

npm install

It is possible to modify the library in /src folder. The /sandbox folder is where you can import components and use them, by running:

npm run dev

The library uses Tailwindcss. So to compile it run:

npx tailwindcss -i ./src/assets/input.css -o ./dist/output.css --watch

Building

To release a new version of the library, you need first to build Vue:

npm run build

Secondly, run this command, to compile Tailwindcss styles:

npx tailwindcss -i ./src/assets/input.css -o ./dist/output.css

Components

1. GenericInput

Generic input component for basic inputs(text, numbers, date).

<generic-input
    type="text"
    placeholder="Aggiungi un placeholder"
    label="Lorem ipsum"	
    v-model="name"
/>

Props:

Slots:

1. "slot-prepend"

   <generic-input
       type="number"
       placeholder="Aggiungi prezzo"
       label="Prezzo"	
       max="100"	
       v-model="price"
   >
       <template v-slot:prepend>
           <div class="slot-price">€</div>
       </template>
   </generic-input>

2. CustomTextArea

<custom-text-area
    label="ratataaa"
    placeholder="Aldo un placeholdert"
    disabled			
/>

Props:

3. CustomCheckbox

Checkbox for single use.

<custom-checkbox
    label="select"
    v-model:checked="selected"	
    :disabled="true"
/>

Props:

4. CustomMultiCheckbox

Checkbox for multiple selection.

<custom-multi-checkbox
    :options="options"
    v-model:value="heroes"				
/>

options:

[
    { label: "Luther", id: 'Luther' },
    { label: "Diego", id: 2 },
    { label: "Allison", id: 3 },
    { label: "Klaus", id: 4 },
    { label: "Five", id: 5 },
    { label: "Ben", id: 'Ben' },
    { label: "Vanya", id: 'Vanya' },
]

heroes:

['Luther','Ben', 'Vanya']

Props:

Types:

1. MultiCheckboxOptions:

   {
       id : string | number;
       label : string;
   }

5. CustomRadioGroup

Radio group for multiple exlusive options.

<custom-radio-group
    :options="options"
    v-model:value="selectedRadioValue"
/>

options:

[
    {
        id: 'input_444',
        label: 'Radio 1',
        value: 'radio_1',
        name: 'radio_group',						
        disabled: true
    },
    {
        id: 'input_445',
        label: 'Radio 2',
        value: 'radio_2',
        name: 'radio_group',
    }
]

selectedRadioValue:

'radio_1'

Props:

Types:

1. RadioGroupOptions:

   ```
   {
       id: any;
       label : string;
       name : string;
       value : string | number;
       disabled? : boolean;
   }
   ```

    

6. CustomSelect

Classic Select.

<custom-select
    name="custom_select"
    label="Seleziona"
    :options="options"
    v-model:value="selected"
/>			

options:

[
    {
        value: 1,
        label: 'Giovanni'
    },
    {
        value: 2,
        label: 'Mario'
    },
    {
        value: 3,
        label: 'Andrea'
    },
]

selected:

1

Props:

Types:

1. SelectOptions:

   {
       value: string | number,
       label: string
   }

7. CustomMultiSelect

Multi Select.

<custom-multi-select
    label="Seleziona"
    placeholder="Seleziona opzione"
    :options="options"
    v-model:selectedOptions="selectedMultiSelectOptions"
/>					

options:

[
    {
        label: 'Opzione 1',
        value: 1
    },
    {
        label: 'Opzione 2',
        value: 2
    },
    {
        label: 'Opzione 3',
        value: 3
    },
]

selectedMultiSelectOptions:

[1, 2]

Props:

Types:

1. SelectOptions:

   {
       value: string | number,
       label: string
   }

8. CustomMultiSelectAsync

Multi Select with search feature.

<custom-multi-select-async
    label="Seleziona"
    placeholder="Seleziona opzione"
    v-model:selectedOptions="selectedMultiSelectAsyncOptions"
    optionsSearchRoute="http://localhost:8000/data"
/>							

selectedMultiSelectAsyncOptions:

[
    {
        label: 'Opzione 1',
        value: 1
    },
    {
        label: 'Opzione 2',
        value: 2
    },
    {
        label: 'Opzione 3',
        value: 3
    },
]

Props:

Types:

1. SelectOptions:

   ```
   {
       value: string | number,
       label: string
   }
   ```

    

9. CustomModal

Modal.

<custom-modal
    :isOpen="isModalOpen"
    modalTitle="Inserisci nuovo"
    @closeModal="openCloseModal"
>
    <template v-slot:modal-body>
        Lorem ipsuctetur adipisicing elit. Quia excepturi voluptatum corrupti libero officia sed a officiis, accusamus ullam sunt magnam recusandae, repudiandae reprehenderit accusantium, autem eum sint unde quasi?
    </template>

    <template v-slot:modal-footer>
        <div style="margin-right: 15px;">
            <custom-button
                label="Chiudi"
                styleType="secondary-outline"
                @onClick="openCloseModal"
            />
        </div>
        <custom-button
            label="Inserisci"
            styleType="primary"
            @onClick="test"
        />
    </template>
</custom-modal>						

Props:

Events:

1. @closeModal: emitted when click on "X"

Slots:

1. "modal-body"
2. "modal-footer"

10. CustomLoader

Spinner for loading.

<custom-loader
    :loading="loading"
    size="small"
/>			

Props:

11. CustomButton

Button.

<custom-button
    label="Apri modale"
    @onClick="openCloseModal"
/>					

Props:

Events:

1. @onClick: emitted when click

Slots:

1. "slot-left": on the left of button text
2. "slot-right": on the right of button text

12. ScrollToTop

scroll-to-top component.

<scroll-to-top />

13. CustomSearchInput

Search input custom.

<custom-search-input 
    @onSearch="handleUpdatePaginationWithSearch"
/>

Props:

Events:

1. @onSearch: emitted when click search or enter. Returns the string.

14. CustomTooltip

Tooltip that appears on hover of an element.

<custom-tooltip position="bottom" backroundColor="#000000">
    <template v-slot:target>
        <span>Tooltip</span>					
    </template>
    <template v-slot:content>
        <p class="text-black">Lorem ipsum dolor sit <a href="https:/google.com" class="underline" target="_blank">amet</a> consectetur adipisicing elit. Voluptates sed illum nisi rerum. Voluptatibus vitae libero dolor illum deserunt. Dicta itaque ratione ipsam quisquam vitae cum officia aperiam eveniet eius.</p>					
    </template>
</custom-tooltip>

Props:

Slots:

1. target: The element target.
2. content: The content of the tooltip.

15. CustomDatePicker

Date picker.

<custom-date-picker
    label="Data inizio"
    :range="true"
    type="datetime"
    v-model:value="dateRange"
    resultType="formatted"	
/>    

It is possible as well to use this fomat:

<custom-date-picker
    label="Data inizio"
    :range="true"
    type="datetime"
    resultType="original"
    @update="updateDateTime"
/>    

This component has different types of input & output data, depending on what type of result do you want to obtain.

Props:

16. Breadcrumbs

BreadCrumbs.

<div class="mb-2 ml-1 ">
    <breadcrumbs :path_breadcrumbs="path_breadcrumbs" />
</div>				

Props:

Types:

1. BreadcrumbInterface:

   {
       label : string,
       path : string,
   }

17. FormSeparator

Is an <hr /> tag styled to be in FormContainer component.

<form-separator />				

18. FormContainer

Container for the forms.

<form-container			
    title="Nuovo cliente"
    :path_breadcrumbs="[
        {
            label: 'Home',
            path: {
                name: 'home'
            }
        },
        {
            label: 'Anagrafiche',							
        },
        {
            label: 'Clienti',	
            path: {
                name: 'anagraphics.clients.index'
            }						
        },
        {
            label: 'Nuovo cliente',							
        }
    ]"
>
    <template v-slot:form-buttons-top>
        <div class="flex my-6 ml-1">
            <custom-button
                label="Salva"
                styleType="primary-outline"
                size="default"
            />

            <div class="ml-5">
                <custom-button
                    label="Chiudi"
                    styleType="primary-outline"
                    size="default"
                />
            </div>
        </div>						
    </template>	

    <template v-slot:form-content>
        <div class="grid grid-cols-12 gap-6">
            <div class="col-span-6">
                <generic-input
                    type="text"
                    placeholder="Inserisci codice cliente"
                    label="Codice Cliente"	
                    v-model="formData.customer_code"
                />
            </div>
            <div class="col-span-6">
                <generic-input
                    type="text"
                    placeholder="Inserisci codice fatturazione cliente"
                    label="Codice fatturazione cliente"	
                    v-model="formData.invoice_code"
                />
            </div>

            <div class="col-span-6">
                <generic-input
                    type="text"
                    placeholder="Inserisci codice cliente"
                    label="Codice Cliente"	
                    v-model="formData.customer_code"
                />
            </div>
            <div class="col-span-6">
                <generic-input
                    type="text"
                    placeholder="Inserisci codice fatturazione cliente"
                    label="Codice fatturazione cliente"	
                    v-model="formData.invoice_code"
                />
            </div>
        </div>
    </template>
</form-container>				

Props:

Types:

1. BreadcrumbInterface:

   {
       label : string,
       path : string,
   }

Slots:

1. "form-buttons-top": Above the form
2. "form-buttons-top": Below the form
3. "form-content": Inside the form

Events:

1. update: when update of the value, if the prop "resultType" is "original".

Composables

List of composables to use with components:

1. usePageMeta: composable that sets the title of the page. Use the function setPageTitle('example title') to set the title.