Personnalisation des onglets dans les formulaires

Cette page concerne le composant Vue FormLayout du paquet @framework/ui, utilisé par les applications Vue (pages en Vue, boîtes de dialogue). Elle ne concerne pas les formulaires classiques du bureau (frappe.ui.form).

Dans le schéma passé à FormLayout, chaque onglet accepte une propriété override. Elle masque ou renomme l'onglet à chaque rendu. Le composant annonce aussi l'onglet affiché avec l'événement update:activeTab.

La propriété override

interface TabOverride {
  hidden?: boolean;
  label?: string;
}

FormLayout applique override après les conditions dependsOn de l'onglet. Un override a donc le dernier mot : hidden: false affiche un onglet que son dependsOn masquerait.

Identité d'un onglet

Le composant repère chaque onglet par une identité stable, pas par sa position :

1. le name de l'onglet, s'il existe ;
2. sinon, le libellé en minuscules, avec des tirets (Comptabilité devient comptabilit, car les caractères accentués sont remplacés) ;
3. sinon, tab-<position>.

Si deux onglets ont la même identité, le composant ajoute -2, -3… Donnez un name à vos onglets : l'identité ne change pas si vous renommez l'onglet avec override.label.

Un onglet sans libellé s'affiche « Details » quand le formulaire a plusieurs onglets.

Exemple

Exemple fictif : un formulaire Vue de client masque l'onglet « Comptabilité » pour un particulier et renomme l'onglet principal.

<script setup lang="ts">
import { computed, ref } from "vue";
import { FormLayout } from "@framework/ui/FormLayout";

const doc = ref({ customer_type: "Individual", customer_name: "Claire Martin" });
const activeTab = ref("");

const layout = computed(() => [
  {
    name: "details",
    label: "Détails",
    override: { label: "Informations principales" },
    sections: [/* … */],
  },
  {
    name: "accounting",
    label: "Comptabilité",
    override: { hidden: doc.value.customer_type === "Individual" },
    sections: [/* … */],
  },
]);
</script>

<template>
  <FormLayout v-model:doc="doc" :layout="layout" @update:activeTab="activeTab = $event" />
</template>

Onglet choisi et onglet affiché

FormLayout a deux canaux :

Si l'onglet choisi disparaît (masqué par dependsOn ou override), le composant affiche le premier onglet visible. Quand l'onglet revient, le composant y retourne.