DynamicFormDialog

<DynamicFormDialog v-model:visible="show" :schema="schema" :is-edit="true">
  <template #header="{ resolvedHeader, isEdit, submitting }">
    <div class="flex items-center justify-between w-full pr-6">
      <div class="flex items-center gap-3">
        <i class="pi pi-pencil text-blue-500 text-2xl" />
        <div>
          <h3 class="text-lg font-semibold">{{ resolvedHeader }}</h3>
          <span class="text-xs text-gray-500">ID #{{ recordCorrente.id }}</span>
        </div>
      </div>
      <ProgressSpinner v-if="submitting" style="width:24px; height:24px" />
    </div>
  </template>
</DynamicFormDialog>

<DynamicFormDialog v-model:visible="show" :schema="schema">
  <template #footer="{ submit, cancel, valid, submitting }">
    <div class="flex justify-between w-full">
      <Button label="Anteprima" icon="pi pi-eye" text @click="showPreview = true" />
      <div class="flex gap-2">
        <Button label="Annulla" severity="secondary" :disabled="submitting" @click="cancel" />
        <Button label="Salva e nuovo" :disabled="!valid || submitting" @click="onSaveAndNew" />
        <Button label="Salva" :disabled="!valid || submitting" :loading="submitting" @click="submit" />
      </div>
    </div>
  </template>
</DynamicFormDialog>

<DynamicFormDialog
  v-model:visible="show"
  :schema="schema"
  :is-edit="isEdit"
  :submitting="submitting"
  @save="onSave"
>
  <!-- Storico audit log dopo la prima sezione, solo in modifica -->
  <template #section-after-0="{ values, isEdit, submitting }">
    <Button
      v-if="isEdit"
      label="Storico modifiche"
      icon="pi pi-history"
      text
      :disabled="submitting"
      @click="showAuditLog(values.id)"
    />
  </template>

  <!-- Avviso prima della sezione fatturazione, basato su altri campi del form -->
  <template #section-before-1="{ values }">
    <div
      v-if="values.tipoCliente === 'estero' && !values.partitaIva"
      class="bg-blue-50 border border-blue-200 p-3 rounded mb-3 text-sm"
    >
      <i class="pi pi-info-circle text-blue-600 mr-2" />
      I clienti esteri possono inserire la P.IVA o lasciare il campo vuoto.
    </div>
  </template>
</DynamicFormDialog>

interface ActionDefinition {
  label: string                                    // testo del pulsante
  icon?: string                                    // PrimeIcons (es. 'pi pi-check')
  severity?: ActionSeverity                        // 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'help' | 'danger' | 'contrast' (default: 'secondary')
  position?: ActionPosition                        // 'before-cancel' (default) | 'after-cancel' | 'before-save'
  visible?: ActionPredicate                        // true (default) | false | (values, valid, dirty) => boolean
  disabled?: ActionPredicate                       // false (default) | true | (values, valid, dirty) => boolean
  loading?: boolean                                // mostra spinner sul pulsante
  text?: boolean                                   // stile "text" senza background
  handler: (values: Record<string, unknown>) => void | Promise<void>
}

[before-cancel] [footer-extra slot] [Cancel] [after-cancel] [before-save] [Save]

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

const extraActions: ActionDefinition[] = [
  {
    label: 'Segna come fatto',
    icon: 'pi pi-check',
    severity: 'success',
    position: 'before-cancel',
    // Visibile solo se è una creazione (no edit)
    visible: (values, valid, dirty) => valid && !!values.idtipo,
    // Disabilitata durante validazione di altri campi
    disabled: (values, valid) => !valid,
    handler: async (values) => {
      await api.completaSubito(values)
    },
  },
]
</script>

<template>
  <DynamicFormDialog
    v-model:visible="show"
    :schema="schema"
    :extra-actions="extraActions"
    @save="handleSave"
  />
</template>

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

const show = ref(false)
const submitting = ref(false)
const toast = useToast()

async function handleSave(values: Record<string, unknown>) {
  submitting.value = true
  try {
    await api.create(values)
    toast.add({ severity: 'success', summary: 'Salvato' })
    show.value = false  // chiudo solo a successo
  } catch (e) {
    toast.add({ severity: 'error', summary: 'Errore', detail: e.message })
    // dialog rimane aperto, l'utente può correggere e riprovare
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <DynamicFormDialog
    v-model:visible="show"
    :schema="schema"
    :submitting="submitting"
    @save="handleSave"
  />
</template>

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

const dialogRef = ref<InstanceType<typeof DynamicFormDialog> | null>(null)

function tryAutoSubmit() {
  // Forza validazione + save (rispetta il pattern submitting)
  const submitted = dialogRef.value?.submit()
  if (!submitted) {
    console.log('Validazione fallita, dialog rimane aperto')
  }
}

function checkValid() {
  return dialogRef.value?.validate() ?? false
}
</script>

<template>
  <DynamicFormDialog ref="dialogRef" v-model:visible="show" :schema="schema" @save="onSave" />
  <button @click="tryAutoSubmit">Save automatico</button>
</template>