Codifyo Docs

Thème

Système de Grille et Colonnes Dynamique ​

La librairie @codifyo/form-vue permet de gérer dynamiquement la taille des champs (colonnes) depuis votre backend Symfony, et de transformer cette configuration en classes CSS spécifiques à votre framework UI (Bootstrap, Tailwind, etc.).

Sommaire ​

1. Côté Backend (Symfony) ​

Pour éviter de coupler votre code PHP à des classes CSS codées "en dur" (ex: 'class' => 'col-md-6'), nous vous recommandons d'utiliser une option abstraite 'cols'.

a) Création de l'Extension de Formulaire ​

Créez une extension Symfony pour ajouter l'option cols à tous les champs :

php
<?php
// src/Form/Extension/GridColumnExtension.php

namespace App\Form\Extension;

use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\Extension\Core\Type\FormType;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\OptionsResolver\OptionsResolver;

class GridColumnExtension extends AbstractTypeExtension
{
    public static function getExtendedTypes(): iterable
    {
        return [FormType::class];
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([ 'cols' => null ]);
        $resolver->setAllowedTypes('cols', ['null', 'int', 'array']);
    }

    public function buildView(FormView $view, FormInterface $form, array $options): void
    {
        if (null !== $options['cols']) {
            $view->vars['cols'] = $options['cols'];
        }
    }
}

b) Utilisation ​

Vous pouvez maintenant définir la taille de vos champs simplement :

php
$builder
    ->add('prenom', TextType::class, [ 'cols' => 6 ]) // 6 colonnes
    ->add('description', TextareaType::class, [
        'cols' => ['default' => 12, 'md' => 8] // Responsive
    ]);

2. Côté Frontend (Vue.js) ​

La librairie @codifyo/form-vue lira la variable vars.cols et la transformera en classes CSS via la fonction gridClasses définie dans votre configuration de thème.

Le comportement par défaut (Bootstrap) ​

Par défaut, le thème rétro-compatible Bootstrap générera automatiquement :

  • cols: 6 ➡️ col-6
  • cols: { default: 12, md: 8 } ➡️ col-12 col-md-8

Définir votre propre logique (ex: Tailwind) ​

Si vous utilisez un autre framework (ex: Tailwind CSS), vous pouvez surcharger cette fonction lors de l'initialisation du plugin dans main.ts :

typescript
import { createApp } from 'vue';
import App from './App.vue';
import SymfonyFormPlugin from '@codifyo/form-vue';

const tailwindTheme = {
  // ... vos classes ...
  
  gridClasses: (cols) => {
    if (typeof cols === 'number') {
        return `col-span-${cols}`;
    }
    if (typeof cols === 'object' && cols !== null) {
        return Object.entries(cols)
            .map(([bp, size]) => bp === 'default' ? `col-span-${size}` : `${bp}:col-span-${size}`)
            .join(' ');
    }
    return '';
  }
};

const app = createApp(App);

app.use(SymfonyFormPlugin, {
  themes: {
    tailwind: tailwindTheme
  }
});
app.mount('#app');

Avec cet exemple, { default: 12, md: 8 } sera transformé en col-span-12 md:col-span-8 !