Styles des composants

Chaque champ ou élément statique sélectionné expose maintenant une section Styles commune dans le panneau de propriétés. Cette section complète les options propres au composant sans les dupliquer dans chaque panneau QInput, QSelect, QBtn, contenu statique ou structure.

Options disponibles

• surface : aucune, douce, contour, élevée ou verre ;
• teinte Quasar : primaire, secondaire, accent, positive, avertissement, négative ou information ;
• variante Quasar : héritée, filled, outlined, standout ou borderless ;
• densité : héritée, confortable ou compacte ;
• espacements externes et internes Quasar de xs à xl ;
• rayon, ombre et alignement du texte ;
• pleine largeur ;
• petite liste d'utilitaires UnoCSS sûrs.

Le panneau est rendu avec le preset UnoCSS Attributify en mode préfixé un-. Les styles du formulaire restent toutefois enregistrés dans un objet JSON contrôlé, et non sous forme de CSS libre.

Panneau de propriétés auto-fit

Le panneau droit ajuste sa largeur à la capacité réelle du constructeur au lieu d'imposer une largeur fixe. En mode persistant, il reste compris entre 280 et 480 px, avec une largeur préférée de 360 px. Le canvas conserve au moins 480 px lorsque les deux panneaux sont ouverts. Sous le seuil persistant de 980 px, le panneau devient un overlay borné à la largeur du conteneur moins 16 px.

Le contenu du panneau est lui aussi fluide :

• les boutons de surface et les sélecteurs utilisent une grille auto-fit ;
• les libellés peuvent revenir à la ligne sans agrandir la colonne ;
• l'alignement passe de quatre à deux colonnes lorsque le panneau se resserre ;
• les sélecteurs basculent sur une seule colonne aux très petites largeurs ;
• les chips d'utilitaires restent bornées et se replient dans le contrôle ;
• seul le défilement vertical du QScrollArea est autorisé.

Le test navigateur dédié vérifie le panneau à 1600 px, 1024 px et 375 px et vérifie que la vue coupe tout débordement horizontal et qu’aucun contrôle ne sort du panneau. La largeur attendue provient du conteneur réel du builder, puis data-qform-drawer-width reflète la largeur réellement rendue par Quasar après layout afin d’éviter les écarts transitoires entre largeur demandée et largeur appliquée.

Surface contour sur les champs Quasar

Pour les contrôles Quasar qui possèdent déjà leur propre cadre (QInput, QSelect, QFile, dates, heures, couleur), la surface Contour n’ajoute pas une seconde bordure autour du champ. Elle active le rendu outlined du contrôle et garde le wrapper transparent. Les structures comme les sections, fieldsets ou colonnes conservent, elles, leur bordure de wrapper.

Cette règle évite l’effet de double contour visible lorsque l’on applique Contour à un champ comme Adresse e-mail.

Schéma sérialisé

{
  $formkit: 'q-input',
  name: 'email',
  label: 'Adresse e-mail',
  qformStyle: {
    surface: 'soft',
    tone: 'primary',
    variant: 'outlined',
    density: 'compact',
    padding: 'sm',
    radius: 'md',
    shadow: 'sm',
    fullWidth: true,
    utilities: ['transition-all', 'motion-reduce:transition-none'],
  },
}

qformStyle est conservé lors de l'export, de l'import, des modèles et des migrations. Avant le rendu FormKit, cette métadonnée est retirée du schéma runtime puis transformée en classes de wrapper et en propriétés Quasar compatibles.

Sécurité

Le builder n'accepte pas de chaîne CSS libre, de classe arbitraire, de style inline ni d'attribut événementiel dans ce panneau. Chaque valeur est normalisée par liste blanche. Une valeur inconnue importée est remplacée par sa valeur par défaut et les utilitaires non autorisés sont supprimés.

Cette approche permet de bénéficier d'UnoCSS et de Quasar sans créer un canal d'injection de code ou de CSS non maîtrisé.

Consentement de confidentialité

Le composant Consentement de confidentialité est disponible dans Éléments → Statiques. Il génère le champ canonique suivant :

{
  $formkit: 'q-checkbox',
  name: 'privacy_consent',
  validation: 'accepted',
  value: false,
  qformStyle: {
    surface: 'soft',
    tone: 'primary',
    padding: 'sm',
    radius: 'md',
  },
}

Le modèle prédéfini Contact simple réutilise exactement la même fabrique de schéma. Le composant du catalogue et celui du modèle ne peuvent donc plus diverger silencieusement.

Contrôles

bun run field-styles:check
bun run catalog:check
bun run typecheck
bun run e2e:styles

Note Windows : en mode mobile, le test ne fige pas la largeur à 359 px. Il compare le panneau rendu à data-qform-drawer-width, car le builder embarqué peut être plus étroit que le viewport navigateur.

Note Windows 11 : le marqueur data-qform-drawer-width mesure explicitement .q-drawer__content[data-qform-settings-drawer]. Il ne doit pas observer le conteneur racine Quasar, qui peut occuper toute la largeur du shell.