Image Field
Il componente g-image-field mostra un campo di input di tipo immagine.
<g-image-field
v-model="image_id"
v-model:loading="isLoading"
v-model:image="image"
:images="images"
@delete-multiple-images="deleteMultipleImages"
@delete-single-image="deleteSingleImage"
@image-created="imageCreated"
@image-updated="imageUpdated"
/> <g-image-field
v-model="image_id"
v-model:loading="isLoading"
v-model:image="image"
:images="images"
@delete-multiple-images="deleteMultipleImages"
@delete-single-image="deleteSingleImage"
@image-created="imageCreated"
@image-updated="imageUpdated"
/>Props
| Nome | Tipo | Required | Default | Descrizione |
|---|---|---|---|---|
| modelValue | number, null | no | null | L'id dell'immagine selezionata |
| image | GBaseImage, null | no | null | L'oggetto che rappresente l'immagine selezionata |
| images | GBaseImage[] | si | L'array di immagini che verranno mostrate in galleria | |
| fieldLabel | String | no | "" | La label del campo che contiene l'immagine |
| fieldHint | String | no | "" | L'hint del campo che contiene l'immagine |
| imageMaxSize | Number | no | null | Il numero massimo di byte che l'immagine caricata deve pesare |
| maxSizeError | String | no | "Maxim number of bytes exceeded" | Il messaggio di errore che viene mostrato se si supera il limite massimo di byte impostato |
| imageAspectRatio | Number | no | false | L'aspect Ratio che l'immagine caricata deve avere |
| aspectRatioError | String | no | "It must be a square image" | Il messaggio di errore che viene mostrato se si carica un immagine con un aspect ratio diverso da quello impostato |
| errorMessages | String[] | no | [] | Array contentente tutti i vari messaggi di errore che si vogliono mostrare |
| editLabel | String | no | "Edit" | La label dei pulsanti di modifica di un'immagine |
| removeLabel | String | no | "Remove" | La label dei pulsanti di rimozione di un'immagine |
| uploadLabel | String | no | "Upload" | La label dei pulsanti di caricamento di un'immagine |
| closeLabel | String | no | "Close" | La label dei pulsanti di chiusura dei dialog |
| galleryTitle | String | no | "Gallery | Il titolo che verrà mostrato nella galleria immagini |
| cardHeight | String | no | "100px" | L'altezza della card dell'immagine in galleria |
| cardWidth | String | no | "100px" | La larghezza della card dell'immagine in galleria |
| searchLabel | String | no | "Name" | La label del campo di ricerca di un'immagine all'interno della galleria. Di default avviene in base al nome |
| deleteLabel | String | no | "Delete" | La label dei pulsanti di eliminazione di un'immagine |
| deleteImageDialogTitle | String | no | "Confirm action" | Il titolo del dialog di conferma quando si vuole eliminare una o più immagini |
| deleteImageDialogContent | String | no | "Are you sure you want to do this?" | Il contenuto del dialog di conferma quando si vuole eliminare una o più immagini |
| confirmLabel | String | no | "Confirm" | La label dei pulsanti di conferma di una determinata azione |
| cancelLabel | String | no | "Cancel | La label dei pulsanti di annullamento di una determinata azione |
| loading | Boolean | no | false | Variabile che controlla il caricamento del v-skeleton-loader in galleria qual'ora sia stata fatta un'azione |
| formTitle | String | no | "Image" | Il titolo del dialog della form di aggiunta di una nuova immagine in galleria |
| textFieldLabel | String | no | "Name" | La label del campo della form dove inserisci il nome dell'immagein |
| fileInputLabel | String | no | "File" | La label del campo della form dove carichi il file dell'immagine |
| requiredMessage | String | no | "Field is required" | Il messaggio di errore qual'ora non si rispetti la regola che il campo è obbligatorio |
| saveLabel | String | no | "Save" | La label dei pulsanti di salvataggio di un'azione |
Eventi
| Nome | Parametri | Tipo | Descrizione |
|---|---|---|---|
| update:modelValue | (value: number, null) | void | Evento che aggiorna l'id dell'immagine selezionata |
| update:image | (value: GImageForm, null) | void | Evento che aggiorna l'oggetto che rappresenta l'immagine selezionata |
| update:loading | (value: boolean) | void | Evento che aggiorna il valore della variabile di caricamento quando si compie un'azione |
| deleteSingleImage | (imageId: number, null) | void | Evento che si scatena quando si vuole eliminare una singola immagine dalla galleria. Ha come parametri l'Id dell'immagine che si vuole eliminare |
| deleteMultipleImages | (imageIds: number[], null) | void | Evento che si scatena quando si vogliono eliminare una o più immagini tramite la selezione multipla. Ha come prametri l'array composto dagli Id delle immagini che si vogliono eliminare |
| imageCreated | (form: GImageForm) | void | Evento che si scatena quando si vuole aggiungere una nuova immagine alla galleria. Ha come parametri l'oggetto composto dai campi di input da inserire quando si crea un'immagine |
| imageUpdated | (image: GBaseImage, form: GImageForm) | void | Evento che si scatena quando si vuole modificare un'immagine già presente in galleria. Ha come parametri l'oggetto dell'immagine che si desidera modificare e l'oggetto composto dai campi di input modificabili |