Forms

IntervalInput

Input per intervalli di tempo PostgreSQL (tipo interval). Mostra campi numerici per ogni unita di tempo (anni, mesi, giorni, ore, minuti, secondi) e serializza in formato PostgreSQL interval.

Import

import { IntervalInput } from '@pzeta/vue-components'

Esempio Base

<script setup lang="ts">
import { ref } from 'vue'
import { IntervalInput } from '@pzeta/vue-components'

const intervalValue = ref<string | null>(null)
</script>

<template>
  <IntervalInput v-model="intervalValue" label="Durata" />
  <p>Valore PostgreSQL: {{ intervalValue }}</p>
</template>

Per default mostra campi per Giorni, Ore e Minuti. Il valore emesso e una stringa nel formato PostgreSQL interval (es. "2 days 4 hours 30 minutes").

Formato Valore

Ingresso	Uscita
`null` o `undefined`	`null`
`'2 days 4 hours 30 minutes'`	stringa PostgreSQL interval
`{ days: 2, hours: 4, minutes: 30 }`	parse automatico → stringa PostgreSQL

La stringa emessa include solo le unita con valore > 0. Esempio: "1 years 6 months", "3 days 2 hours", "45 minutes".

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| IntervalValue \| null`	`null`	Valore corrente (v-model)
`label`	`string`	—	Label del componente
`units`	`IntervalUnit[]`	`['days', 'hours', 'minutes']`	Unita di tempo da mostrare
`showUnitSelector`	`boolean`	`false`	Mostra un select per cambiare l'unita in modalita `singleUnit`
`singleUnit`	`boolean`	`false`	Mostra un solo campo anziche uno per unita
`helperText`	`string`	—	Testo di aiuto
`error`	`string`	—	Messaggio di errore
`required`	`boolean`	`false`	Campo obbligatorio
`disabled`	`boolean`	`false`	Disabilita il componente
`loading`	`boolean`	`false`	Mostra stato di caricamento
`invalid`	`boolean`	`false`	Forza stato errore
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione degli InputNumber interni
`severity`	`Severity`	`'primary'`	Colore del tema
`class`	`string`	—	Classe CSS aggiuntiva

Tipo IntervalUnit

type IntervalUnit = 'years' | 'months' | 'days' | 'hours' | 'minutes' | 'seconds'

Tipo IntervalValue

interface IntervalValue {
  years?: number
  months?: number
  days?: number
  hours?: number
  minutes?: number
  seconds?: number
}

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string \| null`	Aggiornamento valore in formato PostgreSQL interval
`focus`	`FocusEvent`	Focus su uno degli input
`blur`	`FocusEvent`	Blur da uno degli input

Esempi

Tutte le unita

Solo ore e minuti

Modalita singola unita fissa

Con single-unit viene mostrato un solo campo. Se units ha un solo elemento, quella e l'unita fissa.

Modalita singola unita con selettore

Con show-unit-selector, l'utente puo scegliere l'unita tramite un select. L'ordine degli elementi in units determina l'ordine del select.

Con valore predefinito

Integrazione con PostgreSQL

<script setup lang="ts">
const slaValue = ref<string | null>(null)

async function saveSla() {
  // Il valore e gia in formato PostgreSQL interval
  await db.query(
    'UPDATE ticket SET sla_duration = $1::interval WHERE id = $2',
    [slaValue.value, ticketId.value]
  )
}
</script>

<template>
  <IntervalInput
    v-model="slaValue"
    label="SLA"
    :units="['days', 'hours', 'minutes']"
    helper-text="Tempo massimo per la risoluzione"
  />
</template>

Stati

Label Unita (Localizzate)

`IntervalUnit`	Label visualizzata
`years`	Anni
`months`	Mesi
`days`	Giorni
`hours`	Ore
`minutes`	Minuti
`seconds`	Secondi

TypeScript

import type { IntervalInputProps, IntervalValue, IntervalUnit } from '@pzeta/vue-components'

// Formato stringa PostgreSQL interval
const interval = ref<string | null>('2 days 4 hours 30 minutes')

// Oppure oggetto strutturato (accettato in ingresso)
const intervalObj: IntervalValue = {
  days: 2,
  hours: 4,
  minutes: 30,
}

// Unita specifiche
const units: IntervalUnit[] = ['hours', 'minutes']

Int4RangeInput

Input per range di interi PostgreSQL (tipo int4range). Emette e accetta il formato stringa PostgreSQL con notazione inclusiva/esclusiva dei bound (es. "[1,10)").

Listbox

Lista di selezione sempre visibile (non dropdown) con supporto a selezione singola e multipla, filtro, opzioni raggruppate e checkmark. Ideale per pannelli e form con spazio dedicato.