gaspari-ui

Library of components, written in Vue.js

Installation

npm install gaspari-ui

Then import like this:

import { ComponentName } from "gaspari-ui";

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

import "gaspari-ui/dist/style.css"; 

This library is meant to be used with Tailwindcss, but If you are NOT using it in the parent project, then add also this style globally:

import "gaspari-ui/dist/output.css";

Otherwise, you can skip this passage.

Testing locally

After downloading the repository and running:

npm install

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