Panneaux redimensionnables

Le constructeur utilise deux séparateurs QSplitter pour ajuster la largeur du catalogue à gauche et du panneau de propriétés à droite. Le canvas central conserve une largeur minimale afin que l’édition reste utilisable dans une application embarquée.

Utilisation

Placez le pointeur sur la poignée verticale située entre un panneau et le canvas, puis faites-la glisser. Les poignées sont aussi utilisables au clavier :

• Flèche gauche et Flèche droite modifient la largeur par pas de 12 px ;
• Maj augmente le pas à 32 px ;
• Origine applique la largeur minimale ;
• Fin applique la largeur maximale disponible.

Les limites par défaut sont de 220 à 520 px à gauche et de 280 à 680 px à droite. Le résolveur responsive réduit les panneaux si nécessaire et bascule vers des panneaux superposés lorsque le conteneur ne peut plus protéger le canvas.

Persistance

Les largeurs sont enregistrées par défaut avec l’API objet LocalStorage de Quasar, dans le stockage navigateur localStorage, avec la clé :

qform-builder:<builderId>:panel-widths

La persistance peut être désactivée ou isolée :

<FormBuilder
  :panel-widths-autosave="false"
  panel-widths-storage-key="dsi:forms:panel-widths"
/>

Contrôle depuis l’application hôte

<FormBuilder
  v-model:left-panel-width="leftWidth"
  v-model:right-panel-width="rightWidth"
  @panel-resize="saveUserLayout"
/>

L’API exposée permet aussi de lire, modifier ou réinitialiser la disposition :

builder.value?.getPanelWidths()
builder.value?.setPanelWidths({ left: 360, right: 480 })
builder.value?.resetPanelWidths()

Les splitters ne sont pas interactifs en mode readonly ou disabled. Sur les petits conteneurs, les panneaux restent accessibles en overlay et aucune largeur persistée ne force un débordement horizontal.