Forms

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)").

Import

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

Esempio Base

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

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

<template>
  <Int4RangeInput v-model="rangeValue" label="Range numerico" />
  <p>Valore PostgreSQL: {{ rangeValue }}</p>
</template>

Il componente emette sempre il valore in formato stringa PostgreSQL int4range (es. "[1,10)"). Accetta in ingresso sia la stringa che un oggetto Int4Range.

Formato Valore

Formato	Esempio	Significato
`[min,max)`	`[1,10)`	min incluso, max escluso (default PostgreSQL)
`[min,max]`	`[1,10]`	entrambi inclusi
`(min,max)`	`(1,10)`	entrambi esclusi
`(min,max]`	`(1,10]`	min escluso, max incluso
`null`	`null`	nessun valore

I simboli [ e ] indicano il bound incluso (>=, <=). I simboli ( e ) indicano il bound escluso (>, <). L'utente puo cliccare sulle parentesi nell'UI per cambiarle.

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| Int4Range \| null`	`null`	Valore corrente (v-model)
`label`	`string`	—	Label del componente
`minPlaceholder`	`string`	`'Min'`	Placeholder del campo minimo
`maxPlaceholder`	`string`	`'Max'`	Placeholder del campo massimo
`minLabel`	`string`	`'Da'`	Label del campo minimo
`maxLabel`	`string`	`'A'`	Label del campo massimo
`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
`min`	`number`	—	Valore minimo consentito
`max`	`number`	—	Valore massimo consentito
`step`	`number`	—	Step per incremento/decremento
`minInclusiveTooltip`	`string`	`'Incluso'`	Tooltip parentesi minimo inclusivo
`minExclusiveTooltip`	`string`	`'Escluso'`	Tooltip parentesi minimo esclusivo
`maxInclusiveTooltip`	`string`	`'Incluso'`	Tooltip parentesi massimo inclusivo
`maxExclusiveTooltip`	`string`	`'Escluso'`	Tooltip parentesi massimo esclusivo
`class`	`string`	—	Classe CSS aggiuntiva

Emits

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

Tipo Int4Range

interface Int4Range {
  min: number | null
  max: number | null
  minInclusive?: boolean  // default: true  (parentesi '[')
  maxInclusive?: boolean  // default: false (parentesi ')')
}

Esempi

Con valore predefinito

Con limiti e step

Bounds inclusivi/esclusivi personalizzati

L'utente puo cliccare visivamente sulle parentesi nell'UI per cambiare la modalita inclusivo/esclusivo. Il valore emesso riflette immediatamente la modifica.

Integrazione con query PostgreSQL

<script setup lang="ts">
const ageRange = ref<string | null>('[18,65)')

async function search() {
  // Il valore e gia in formato PostgreSQL int4range
  const result = await db.query(
    'SELECT * FROM anagrafica WHERE eta <@ $1::int4range',
    [ageRange.value]
  )
}
</script>

<template>
  <Int4RangeInput v-model="ageRange" label="Fascia eta" />
  <button @click="search">Cerca</button>
</template>

Stati

Legenda Simboli PostgreSQL

Simbolo	Significato	Esempio SQL
`[`	bound minimo incluso	`x >= min`
`(`	bound minimo escluso	`x > min`
`]`	bound massimo incluso	`x <= max`
`)`	bound massimo escluso	`x < max`

TypeScript

import type { Int4RangeInputProps, Int4Range } from '@pzeta/vue-components'

// Formato stringa PostgreSQL
const range = ref<string | null>('[1,100)')

// Oppure oggetto strutturato
const rangeObj: Int4Range = {
  min: 1,
  max: 100,
  minInclusive: true,   // '['
  maxInclusive: false,  // ')'
}

InputText

Campo di testo generico con supporto per icone, clear button, contatore caratteri e varianti visive. Compatibile con v-model e tutti i tipi HTML5 standard.

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.