Grid Element

class GridElementForm extends VueFormBuilder
{
    protected function buildForm()
    {
        return Vueform::build()
            ->schema([
                StaticElement::h1('Grid Element Form row with various column layouts')
                    ->addClass('mb-4'),
                StaticElement::p('This form demonstrates the use of GridElement to create structured multi-column layouts. You can arrange form fields into rows with configurable column counts (1, 2, 3, 4, or 6 columns). Each row can contain different input types such as text, select, date, and slider elements, enabling clean and organized form designs. Ideal for forms that require responsive and visually structured data entry.')
                    ->addClass('mb-4'),
                StaticElement::hr(),
                StaticElement::h3('Row with 1 Column')->addClass('mb-2'),
                GridElement::rowWith1Columns([
                    ['type' => 'text', 'name' => 'a', 'placeholder' => 'A'],
                    ['type' => 'select', 'items' => [1, 2, 3], 'name' => 'b', 'placeholder' => 'B'],
                    ['type' => 'date', 'name' => 'c', 'placeholder' => 'C'],
                    ['type' => 'slider', 'name' => 'd']
                ]),
                StaticElement::hr(),
                StaticElement::h3('Row with 2 Columns')->addClass('mb-2'),
                GridElement::rowWith2Columns([
                    ['type' => 'text', 'name' => 'e', 'placeholder' => 'E'],
                    ['type' => 'select', 'items' => [1, 2, 3], 'name' => 'f', 'placeholder' => 'F'],
                    ['type' => 'date', 'name' => 'g', 'placeholder' => 'G'],
                    ['type' => 'slider', 'name' => 'h']
                ]),
                StaticElement::hr(),
                StaticElement::h3('Row with 3 Columns')->addClass('mb-2'),
                GridElement::rowWith3Columns([
                    ['type' => 'text', 'name' => 'e', 'placeholder' => 'E'],
                    ['type' => 'select', 'items' => [1, 2, 3], 'name' => 'f', 'placeholder' => 'F'],
                    ['type' => 'date', 'name' => 'g', 'placeholder' => 'G'],
                    ['type' => 'slider', 'name' => 'h']
                ]),
                StaticElement::hr(),
                StaticElement::h3('Row with 4 Columns')->addClass('mb-2'),
                GridElement::rowWith4Columns([
                    ['type' => 'text', 'name' => 'e', 'placeholder' => 'E'],
                    ['type' => 'select', 'items' => [1, 2, 3], 'name' => 'f', 'placeholder' => 'F'],
                    ['type' => 'date', 'name' => 'g', 'placeholder' => 'G'],
                    ['type' => 'slider', 'name' => 'h']
                ]),
                StaticElement::hr(),

                ButtonElement::submitButton()
            ]);
    }

    public static function formData($request)
    {
        $request->validate([
            'e' => 'required'
        ]);

        return response()->json([
            'status' => 'success'
        ]);
    }
}