Data
Inplace
Editing inline sul posto — mostra un testo/contenuto cliccabile che, al click, si trasforma in un campo di input o contenuto arbitrario, con pulsante di chiusura opzionale.
Import
import { Inplace } from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
active | boolean | false | Stato attivo v-model: se true mostra il content invece del display |
closable | boolean | true | Se true, mostra il pulsante di chiusura e permette di tornare alla modalità display |
disabled | boolean | false | Disabilita il componente, impedendo l'apertura |
displayText | string | 'Click to edit' | Testo di fallback mostrato nel display quando lo slot #display non è usato |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
update:active | boolean | Emesso quando cambia lo stato attivo, per usare v-model:active |
open | Event | Emesso quando il componente viene aperto (click sul display) |
close | Event | Emesso quando il componente viene chiuso (click sul pulsante di chiusura) |
Slot
| Slot | Scope | Descrizione |
|---|---|---|
display | — | Contenuto mostrato in modalità inattiva (cliccabile per aprire) |
content | { closeCallback: () => void } | Contenuto mostrato in modalità attiva; closeCallback chiude l'inplace |
closeicon | — | Personalizza l'icona/pulsante di chiusura |
Esempi
Con input e pulsante conferma
Non chiudibile (contenuto permanente)
Controllo v-model:active
Accessibilità
- Il display è renderizzato con
role="button"etabindex="0", navigabile da tastiera. - Apertura con
EnteroSpace, chiusura con il pulsante close (aria-label localizzato). - Lo stato
disabledimpedisce l'interazione e rimuove la classe attiva.
TypeScript
import type { InplaceProps } from '@pzeta/vue-components'
Interfacce correlate:
interface InplaceContentSlotProps {
closeCallback: () => void
}