DynamicFormLayouts

interface FormSchema {
  sections: SectionDefinition[]
}

interface SectionDefinition {
  title?: string
  subtitle?: string
  icon?: string                          // PrimeIcons class (es. 'pi pi-user')
  rows?: RowDefinition[]
  layout?: 'vertical' | 'horizontal' | 'grid'  // disposizione interna
  columns?: number                       // numero colonne griglia
  collapsible?: boolean                  // sezione comprimibile
  collapsed?: boolean                    // stato iniziale collassato
  visible?: boolean | FieldCondition     // visibilità (booleano o condizione)
  class?: string                         // classi CSS aggiuntive
}

interface RowDefinition {
  fields: FieldDefinition[]
  class?: string
}

interface FieldDefinition {
  name: string                           // chiave nel formData
  type: InputType                        // 'text' | 'select' | 'date' | ...
  label?: string
  placeholder?: string
  // Help: stringa statica oppure funzione reattiva
  help?: string | ((value: unknown, formData: Record<string, unknown>) => string)
  validation?: string                    // 'required|email|min:5'
  required?: boolean                     // shortcut per validation 'required'
  disabled?: FieldVisibility             // boolean | FieldCondition | predicate
  readonly?: boolean
  visible?: FieldVisibility              // boolean | FieldCondition | predicate
  exclude?: boolean                      // escludi dal submit
  defaultValue?: unknown
  props?: Record<string, unknown>        // props inoltrate al componente input
  span?: number                          // 1-12 (griglia 12 colonne)
  class?: string
  inplace?: boolean                      // editing inplace
  // Bridge UI <-> formData per campi computed/virtuali
  transform?: {
    read: (formData: Record<string, unknown>) => unknown
    write: (uiValue: unknown, formData: Record<string, unknown>) =>
      Partial<Record<string, unknown>>
  }
  // Hook reattivo post-commit per derivare altri valori del formData
  onChange?: (
    value: unknown,
    formData: Record<string, unknown>,
    patch: (fields: Record<string, unknown>) => void,
  ) => void
}

// Condizione dichiarativa
interface FieldCondition {
  field: string                          // nome campo da valutare
  operator: '==' | '!=' | '>' | '<' | '>=' | '<=' | 'contains' | 'empty' | 'notEmpty'
  value?: unknown
}

// Funzione di predicato (per logica complessa)
type FieldPredicate = (formData: Record<string, unknown>) => boolean

// Tipo accettato da `disabled` / `visible` (sia su field che su section)
type FieldVisibility = boolean | FieldCondition | FieldPredicate

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

const formRef = ref<InstanceType<typeof DynamicFormLayouts> | null>(null)
const formData = ref({})
const currentStep = ref('0')
const schema = { /* ... */ }

function onSubmit() {
  if (!formRef.value?.validate()) return
  // Submit reale verso l'API
}
</script>

<template>
  <DynamicFormLayouts
    ref="formRef"
    v-model="formData"
    v-model:active-step="currentStep"
    :schema="schema"
    display-mode="wizard"
    :wizard-linear="true"
  />

  <div class="flex justify-end gap-2 mt-4">
    <Button
      label="Indietro"
      severity="secondary"
      :disabled="formRef?.wizardIsFirstStep?.value"
      @click="formRef?.wizardGoPrev()"
    />
    <Button
      v-if="!formRef?.wizardIsLastStep?.value"
      label="Avanti"
      :disabled="!formRef?.wizardCanAdvance?.value"
      @click="formRef?.wizardGoNext()"
    />
    <Button
      v-else
      label="Salva"
      severity="primary"
      :disabled="!formRef?.wizardCanAdvance?.value"
      @click="onSubmit"
    />
  </div>
</template>

<!-- Codice reale con API -->
<script setup lang="ts">
import { ref } from 'vue'
import { DynamicFormLayouts } from '@pzeta/vue-form'

const initialData = { nome: 'Mario', cognome: 'Rossi', email: 'mario@test.it' }
const formData = ref({ ...initialData })
const dirtyValues = ref({})

async function handleSave() {
  // Invia solo i campi modificati
  await fetch('/api/utenti/1', {
    method: 'PATCH',
    body: JSON.stringify(dirtyValues.value)
  })
}
</script>

<template>
  <DynamicFormLayouts
    v-model="formData"
    v-model:dirty-values="dirtyValues"
    :initial-data="initialData"
    :schema="schema"
  />
  <button @click="handleSave">Salva modifiche</button>
</template>

interface CrossFieldValidationRule {
  type: 'match' | 'different' | 'requiredIf' | string  // built-in + custom
  fields: string[]    // campi coinvolti nella validazione
  message?: string    // messaggio errore (override default i18n)
  value?: unknown     // valore di confronto per 'requiredIf'
}

{
  type: 'match',
  fields: ['password', 'confermaPassword'],
  message: 'Le password non corrispondono',
}

{
  type: 'different',
  fields: ['emailPrincipale', 'emailSecondario'],
  message: 'Le due email devono essere diverse',
}

// Note obbligatorie se tipo === 'altro'
{
  type: 'requiredIf',
  fields: ['note', 'tipo'],
  value: 'altro',
}

// IBAN obbligatorio se preferenzaPagamento è truthy (qualsiasi valore non falsy)
{
  type: 'requiredIf',
  fields: ['iban', 'preferenzaPagamento'],
}

<DynamicFormLayouts
  v-model="formData"
  :schema="schema"
  v-model:valid="isValid"
  :validation-rules="[
    { type: 'match', fields: ['password', 'confermaPassword'], message: 'Le password non corrispondono' },
    { type: 'requiredIf', fields: ['note', 'tipo'], value: 'altro' },
  ]"
/>

// Codice reale — schema con FieldCondition
const schema = {
  sections: [
    {
      title: 'Cliente',
      rows: [
        { fields: [
          {
            name: 'tipoCliente',
            type: 'select',
            label: 'Tipo',
            props: { options: [
              { label: 'Privato', value: 'privato' },
              { label: 'Azienda', value: 'azienda' }
            ]}
          }
        ]},
        { fields: [
          {
            name: 'partitaIva',
            type: 'text',
            label: 'Partita IVA',
            // visibile solo se tipoCliente == 'azienda'
            visible: { field: 'tipoCliente', operator: '==', value: 'azienda' },
            validation: 'required|partitaiva'
          },
          {
            name: 'codiceFiscale',
            type: 'text',
            label: 'Codice Fiscale',
            // visibile solo se tipoCliente == 'privato'
            visible: { field: 'tipoCliente', operator: '==', value: 'privato' },
            validation: 'required|codicefiscale'
          }
        ]}
      ]
    }
  ]
}

{
  name: 'partitaIva',
  type: 'text',
  label: 'Partita IVA',
  // Visibile solo se cliente è azienda E non è marcato come "anonimo"
  visible: (data) => data.tipoCliente === 'azienda' && !data.anonimo,
  validation: 'required|partitaiva',
}

{ name: 'preview', type: 'tiptap', label: 'Anteprima', exclude: true }

interface FieldDefinition {
  // ...
  onChange?: (
    value: unknown,                                              // nuovo valore (post transform.read)
    formData: Record<string, unknown>,                           // snapshot post-commit
    patch: (fields: Record<string, unknown>) => void,            // setter merge-superficiale
  ) => void
}

const tipi = ref<TipoAttivita[]>([])

const schema = {
  sections: [{
    rows: [{
      fields: [
        {
          name: 'idtipoattivita',
          type: 'select',
          label: 'Tipo attività',
          props: { options: tipi.value, optionLabel: 'nome', optionValue: 'idtipoattivita' },
          onChange: (newId, _data, patch) => {
            if (!newId) return
            const tipo = tipi.value.find(t => t.idtipoattivita === newId)
            if (!tipo) return
            patch({
              riepilogo: tipo.riepilogopredefinito,
              nota: tipo.notapredefinita,
              assegnatari: tipo.idutentepredefinito ? [tipo.idutentepredefinito] : [],
            })
          },
        },
        { name: 'riepilogo', type: 'text', label: 'Riepilogo', validation: 'required|max:125' },
        { name: 'nota', type: 'textarea', label: 'Nota' },
        // ...
      ],
    }],
  }],
}

input UI emette nuovo valore
   │
   ▼
[se field.transform.write] → produce patch atomica
                              ↓
                              emit fieldCommit(k, v) per ogni chiave della patch
[else]                     → emit fieldCommit(field.name, value)
   │
   ▼
field.onChange(value, formData, patch)   ← invocato qui
   │
   ▼
emit fieldChange(field.name, value, formData)

// OK — un solo onChange su A che deriva B + C
{
  name: 'idtipo',
  type: 'select',
  onChange: (newId, _data, patch) => {
    const tipo = tipi.value.find(t => t.id === newId)
    if (!tipo) return
    patch({
      riepilogo: tipo.riepilogo,          // B
      assegnatari: tipo.assegnatari,      // C derivato dallo stesso tipo
      durataMinuti: tipo.durataDefault,   // anche D, se serve
    })
  },
}

// NON funziona — cambiare B via patch NON innesca l'onChange di B
{
  name: 'riepilogo',
  type: 'text',
  onChange: (value, _data, patch) => {
    // questo NON parte quando idtipo prefilla riepilogo via patch
    patch({ slug: slugify(String(value)) })
  },
}

{
  name: 'descrizione',
  type: 'textarea',
  label: 'Descrizione',
  validation: 'max:125',
  // Contatore caratteri reattivo
  help: (value) => `${String(value ?? '').length}/125 caratteri`,
}

{
  name: 'sconto',
  type: 'number',
  label: 'Sconto %',
  // Riepilogo calcolato su altri campi
  help: (value, data) => {
    const totale = Number(data.importoTotale ?? 0)
    const percentuale = Number(value ?? 0)
    const scontato = totale * (1 - percentuale / 100)
    return `Importo finale: € ${scontato.toFixed(2)}`
  },
}

interface FieldDefinition {
  // ...
  transform?: {
    /** Calcola il valore UI dai dati del form */
    read: (formData: Record<string, unknown>) => unknown
    /** Calcola la patch del formData a partire dal nuovo valore UI */
    write: (uiValue: unknown, formData: Record<string, unknown>) =>
      Partial<Record<string, unknown>>
  }
}

{
  name: '_datetimeinizio',         // nome "virtuale" (sottolineato per convenzione)
  type: 'date',
  label: 'Data e ora inizio',
  exclude: true,                    // non includere il campo virtuale nel submit
  props: { showTime: true },
  transform: {
    read: (data) => {
      if (!data.datascadenza || !data.orarioinizio) return null
      return `${data.datascadenza}T${data.orarioinizio}`
    },
    write: (val) => {
      if (!val) return { datascadenza: null, orarioinizio: null }
      const [date, time] = String(val).split('T')
      return { datascadenza: date, orarioinizio: time }
    },
  },
}

{
  name: '_totale',
  type: 'number',
  label: 'Totale calcolato',
  readonly: true,
  exclude: true,
  transform: {
    read: (data) => Number(data.imponibile ?? 0) + Number(data.iva ?? 0),
    write: () => ({}),  // read-only: nessuna scrittura
  },
}

<!-- Codice reale con API -->
<script setup lang="ts">
const formData = ref({})

async function handleSubmit(values) {
  await api.create(values)
}
</script>

<template>
  <DynamicFormLayouts
    v-model="formData"
    :schema="schema"
    with-submit
    @submit="handleSubmit"
  />
</template>

<DynamicFormLayouts
  v-model="formData"
  :schema="schema"
  :disabled="isSaving"
  :readonly="!canEdit"
/>

<script setup lang="ts">
import { inject, type ComputedRef } from 'vue'

const dynamicFormDisabled = inject<ComputedRef<boolean>>('dynamicFormDisabled')
const dynamicFormReadonly = inject<ComputedRef<boolean>>('dynamicFormReadonly')

// Usa i valori per disabilitare/render diverso
const isDisabled = computed(() =>
  props.disabled || dynamicFormDisabled?.value || false
)
</script>

<DynamicFormLayouts v-model="formData" :schema="schema">
  <!-- Espone lo slot `option` del Select del campo `tipoId` -->
  <template #field-tipoId-option="{ option }">
    <span class="flex items-center gap-2">
      <i :class="option.icona" :style="{ color: option.colore }" />
      {{ option.nome }}
    </span>
  </template>

  <!-- Espone lo slot `value` del MultiSelect del campo `tags` -->
  <template #field-tags-value="{ value }">
    <Chip v-for="tag in value" :key="tag" :label="tag" />
  </template>
</DynamicFormLayouts>

<DynamicFormLayouts v-model="formData" :schema="schema">
  <!-- Avviso prima della prima sezione, basato sui dati correnti -->
  <template #section-before-0="{ values, valid }">
    <div v-if="!valid" class="bg-amber-50 border border-amber-200 p-3 rounded mb-4">
      <i class="pi pi-exclamation-triangle text-amber-600" />
      Compila tutti i campi obbligatori per procedere
    </div>
  </template>

  <!-- Riepilogo dopo la seconda sezione (indice 1) -->
  <template #section-after-1="{ values, isEdit, submitting }">
    <div class="text-sm text-gray-500 mt-2">
      <span v-if="isEdit">Stai modificando il record #{{ values.id }}</span>
      <Button
        v-if="!isEdit"
        label="Anteprima"
        icon="pi pi-eye"
        text
        :disabled="submitting"
        @click="showPreview = true"
      />
    </div>
  </template>
</DynamicFormLayouts>

<DynamicFormLayouts
  v-model="formData"
  :schema="schema"
  with-submit
  @submit="onSubmit"
>
  <template #actions="{ validate, reset, values }">
    <div class="flex gap-2 justify-end mt-4">
      <Button label="Reset" severity="secondary" @click="reset" />
      <Button type="submit" label="Salva" />
    </div>
  </template>
</DynamicFormLayouts>

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

const formRef = ref<InstanceType<typeof DynamicFormLayouts> | null>(null)

async function handleSave() {
  // Forza la validazione completa di tutti i campi
  const isValid = formRef.value?.validate()
  if (!isValid) return

  // Accedi ai valori correnti (incluso campi exclude)
  await api.save(formRef.value?.values)
}

function handleReset() {
  formRef.value?.reset()
}
</script>

<template>
  <DynamicFormLayouts ref="formRef" v-model="formData" :schema="schema" />
  <button @click="handleSave">Salva</button>
  <button @click="handleReset">Reset</button>
</template>