Initial commit

LICENSE

+MIT License
+
+Copyright (c) 2020 Modulus / Services
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

+# Modulus Service Field
+
+A helper to generate HTML form fields in Bootstrap very easily
+
+## Required
+- Composer
+- PHP >= 7.2
+- Laravel >= 5.8
+
+## Installation
+
+Require this package with composer.
+
+```shell
+composer require goldenscarab/modulus-service-field
+```
+
+Laravel 5.8 uses Package Auto-Discovery, so doesn't require you to manually add the ServiceProvider.
+
+## Usage
+
+```php
+// Exemple sur une liste d'utilisateurs
+{!! Template::list3([
+        'table_id'     => null,
+        'table_class'  => 'table-sortable',
+        'route_prefix' => $route_prefix,
+        'can_prefix'   => $can_prefix,
+        'menu'         => [
+            'display'       => true,
+            'is_readable'   => true,
+            'is_editable'   => true,
+            'is_deletable'  => true,
+            'is_duplicable' => false,
+        ],
+        'source' => $items,
+        'columns' => array([
+	            'label'    => '#',
+	            'value'    => ['id'],
+	            'sortable' => 'id'
+	        ],[
+	            'label'    => 'Dossier',
+	            'value'    => ['folder_html'],
+	            'sortable' => 'ged_folders.title'
+	        ],[
+	            'label'    => 'Nom',
+	            'value'    => ['name'],
+	            'sortable' => 'name',
+	        ],[
+	            'label'    => 'Version',
+	            'value'    => ['template' => 'v%s', 'key' => 'version'],
+	            'sortable' => 'version',
+	            'class'    => 'text-center'
+	        ],[
+	            'label'    => 'Statut',
+	            'value'    => ['validation_html'],
+	            'class'    => 'text-center'
+	        ],[
+	            'label'    => 'Visibilité',
+	            'class'    => 'text-center',
+	            'value'    => ['key' => 'status', 'callback' => 'published_html'],
+	            'sortable' => 'status',
+	        ],[
+	            'label'    => 'Date',
+	            'value'    => ['updated_at->diffForHumans()'],
+	            'sortable' => 'updated_at'
+	        ]
+	    )
+    ]) !!}
+```
+
+Click [here](example.md) for more examples
+
+
+## Security
+
+If you discover any security related issues, please email contact@goldenscarab.fr instead of using the issue tracker.
+
+## Credits
+
+- [Sylvain CARRE](https://git.goldenscarab.fr/modulus)
+
+## License
+
+The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

composer.json

+{
+    "name": "goldenscarab/modulus-service-template",
+    "description": "An helper to create html list easily",
+    "require": {
+        "php": ">=7.1.3"
+    },
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Goldenscarab",
+            "email": "web@goldenscarab.fr"
+        }
+    ],
+    "autoload": {
+        "psr-4": {
+            "Goldenscarab\\Modulus\\Service\\Template\\": "src/"
+        },
+        "files": [
+
+        ]
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true,
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Goldenscarab\\Modulus\\Service\\Template\\TemplateServiceProvider"
+            ],
+            "aliases": {
+                "Template": "Goldenscarab\\Modulus\\Service\\Template\\Facades\\Template"
+            }
+        }
+    },
+    "require-dev": {
+        "laravel/framework": "5.8.x"
+    }
+}

example.md

+# Templates
+
+## Liste
+
+### Utilisation minimale
+```php
+// Exemple sur liste utilisateurs
+{!! Template::list3([
+        'table_id'     => null,
+        'table_class'  => 'table-sortable',
+        'route_prefix' => $route_prefix,
+        'can_prefix'   => $can_prefix,
+        'menu'         => [
+            'display'       => true,
+            'is_readable'   => true,
+            'is_editable'   => true,
+            'is_deletable'  => true,
+            'is_duplicable' => false,
+        ],
+        'source' => $items,
+        'columns' => array([
+	            'label'    => '#',
+	            'value'    => ['id'],
+	            'sortable' => 'id'
+	        ],[
+	            'label'    => 'Dossier',
+	            'value'    => ['folder_html'],
+	            'sortable' => 'ged_folders.title'
+	        ],[
+	            'label'    => 'Nom',
+	            'value'    => ['name'],
+	            'sortable' => 'name',
+	        ],[
+	            'label'    => 'Version',
+	            'value'    => ['template' => 'v%s', 'key' => 'version'],
+	            'sortable' => 'version',
+	            'class'    => 'text-center'
+	        ],[
+	            'label'    => 'Statut',
+	            'value'    => ['validation_html'],
+	            'class'    => 'text-center'
+	        ],[
+	            'label'    => 'Visibilité',
+	            'class'    => 'text-center',
+	            'value'    => ['key' => 'status', 'callback' => 'published_html'],
+	            'sortable' => 'status',
+	        ],[
+	            'label'    => 'Date',
+	            'value'    => ['updated_at->diffForHumans()'],
+	            'sortable' => 'updated_at'
+	        ]
+	    )
+    ]) !!}
+```
+
+### Utilisation avancée
+```php
+// Exemple sur liste utilisateurs
+{!! Template::list3([
+        'table_id'     => null,
+        'table_class'  => 'table-sortable',
+        'route_prefix' => $route_prefix,
+        'can_prefix'   => $can_prefix,
+        'menu'         => [
+            'display'       => true,
+            'is_readable'   => true,
+            'is_editable'   => true,
+            'is_deletable'  => true,
+            'is_duplicable' => false,
+            'tags' => array(
+                ['template' => '[module|ged|document|%s]', 'key' => 'id']
+            ),
+            'more' => array([
+	                'label'  => '<i class="fa fa-unlock mr-1"></i> RAZ validation',
+	                'href'   => [
+	                    'template' => url('backend/module/ged/file/status/%s/0?' . current_query_to_string()),
+	                    'key'      => 'files->sortBy()->last()->id'
+	                ],
+	            ]
+	        )
+        ],
+        'source' => $items,
+        'rows'   => array(
+            'class' => [
+                'value' => 'text-bold',
+                'condition' => [
+                    'key'      => 'file_current_version.status',
+                    'operator' => '==',
+                    'value'    => -1
+                ]
+            ],
+        ),
+        'columns' => array([
+	            'label'    => '',
+	            'id'    => 'mon-id',
+	            'class' => 'ma-class',
+	            'value' => [
+	                'template' => '<img class="thumb-list" src="%s" alt="image" width=50 />',
+	                'key'      => 'image_type_url']
+	        ],[
+	            'label'    => '#',
+	            'value'    => ['id'],
+	            'sortable' => 'id'
+	        ],[
+	            'label'    => 'Dossier',
+	            'value'    => ['key' => 'folder_html'],
+	            'sortable' => 'ged_folders.title'
+	        ],[
+	            'label'    => 'Nom',
+	            'value'    => ['name'],
+	            'sortable' => 'name',
+	        ],[
+	            'label'    => 'Version',
+	            'value'    => ['template' => 'v%s', 'key' => 'version'],
+	            'sortable' => 'version',
+	            'class'    => 'text-center'
+	        ],[
+	            'label'    => 'Statut',
+	            'value'    => ['validation_html'],
+	            'class'    => 'text-center'
+	        ],[
+	            'label'    => 'Visibilité',
+	            'class'    => 'text-center',
+	            'value'    => ['key' => 'status', 'callback' => 'published_html'],
+	            'sortable' => 'status',
+	        ],[
+	            'label'    => 'Date',
+	            'value'    => ['updated_at->diffForHumans()'],
+	            'sortable' => 'updated_at'
+	        ],[
+	            'value'    => ['download_file_html'],
+	        ]
+	    )
+    ]) !!}
+```

src/Facades/Template.php

+<?php
+
+namespace Goldenscarab\Modulus\Service\Template\Facades;
+
+use Illuminate\Support\Facades\Facade;
+
+class Template extends Facade
+{
+
+
+    protected static function getFacadeAccessor()
+    {
+    	return 'Template';
+    }
+
+}

src/Template.php

+<?php
+
+namespace Goldenscarab\Modulus\Service\Template;
+
+use Goldenscarab\Modulus\Service\Template\Compose\Template1Bt4;
+use Goldenscarab\Modulus\Service\Template\Compose\Template2Bt4;
+use Goldenscarab\Modulus\Service\Template\Compose\Template3Bt4;
+
+
+
+class Template
+{
+	public function list($attrs = []): string
+	{
+		$template = new Template1Bt4($attrs);
+		$render = $template->renderList();
+
+		return $template->renderHTML($render);
+    }
+
+    /**
+     * Modification sur les traitements d'un éléments complémentaire dans le menu
+     */
+    public function list2($attrs = []): string
+	{
+		$template = new Template2Bt4($attrs);
+		$render = $template->renderList();
+
+		return $template->renderHTML($render);
+	}
+
+	/**
+	 * Refonte complète des listes
+	 */
+	public function list3($attrs = []): string
+	{
+		$template = new Template3Bt4($attrs);
+		$render = $template->renderList();
+
+		return $template->renderHTML($render);
+	}
+}

src/TemplateServiceProvider.php

+<?php
+
+namespace Goldenscarab\Modulus\Service\Template;
+
+use Illuminate\Support\ServiceProvider;
+
+use Illuminate\Foundation\AliasLoader;
+
+class TemplateServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+
+    }
+
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        $this->app->bind('Template', function() {
+            return new \Goldenscarab\Modulus\Service\Template\Template;
+        });
+    }
+
+
+}

tests/html/fields/checkbox.html

+<div class="form-group row">
+    <label for="my-field-name-5" class="col-sm-2">Choix multiple</label>
+    <div class="col-sm-10">
+        <div class="form-check form-check-inline">
+            <input type="checkbox" id="my-field-name-1" class="form-check-input" name="my_field_name[]" value="1"/>
+            <label class="form-check-label" for="my-field-name-1">Option 1</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="checkbox" id="my-field-name-2" class="form-check-input" name="my_field_name[]" value="2" checked/>
+            <label class="form-check-label" for="my-field-name-2">Option 2</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="checkbox" id="my-field-name-3" class="form-check-input" name="my_field_name[]" value="3" checked/>
+            <label class="form-check-label" for="my-field-name-3">Option 3</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="checkbox" id="my-field-name-4" class="form-check-input" name="my_field_name[]" value="4"/>
+            <label class="form-check-label" for="my-field-name-4">Option 4</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="checkbox" id="my-field-name-5" class="form-check-input" name="my_field_name[]" value="5"/>
+            <label class="form-check-label" for="my-field-name-5">Option 5</label>
+        </div>
+    </div>
+</div>

tests/html/fields/checkbox_collect.html

+<div class="form-group">
+    <label for="mon-champs-value-4">Mon Champs</label>
+    <div class="form-check">
+        <input type="checkbox" id="mon-champs-value-1" class="form-check-input" name="mon-champs[]" value="VALUE-1" data-one="data-value1.1" data-tow="data-value1.2" />
+        <label class="form-check-label" for="mon-champs-value-1">1 - TITRE 1</label>
+    </div>
+    <div class="form-check">
+        <input type="checkbox" id="mon-champs-value-2" class="form-check-input" name="mon-champs[]" value="VALUE-2" data-one="data-value2.1" data-tow="data-value2.2" />
+        <label class="form-check-label" for="mon-champs-value-2">2 - TITRE 2</label>
+    </div>
+    <div class="form-check">
+        <input type="checkbox" id="mon-champs-value-3" class="form-check-input" name="mon-champs[]" value="VALUE-3" data-one="data-value3.1" data-tow="data-value3.2" />
+        <label class="form-check-label" for="mon-champs-value-3">3 - TITRE 3</label>
+    </div>
+    <div class="form-check">
+        <input type="checkbox" id="mon-champs-value-4" class="form-check-input" name="mon-champs[]" value="VALUE-4" data-one="data-value4.1" data-tow="data-value4.2" />
+        <label class="form-check-label" for="mon-champs-value-4">4 - TITRE 4</label>
+    </div>
+</div>

tests/html/fields/checkbox_indice.html

+<div class="form-group row">
+    <label for="my-field-name-12-5" class="col-sm-2">Choix multiple</label>
+    <div class="col-sm-10">
+        <div class="form-check form-check-inline">
+            <input type="checkbox" id="my-field-name-12-1" class="form-check-input" name="my_field_name[12][]" value="1"/>
+            <label class="form-check-label" for="my-field-name-12-1">Option 1</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="checkbox" id="my-field-name-12-2" class="form-check-input" name="my_field_name[12][]" value="2" checked/>
+            <label class="form-check-label" for="my-field-name-12-2">Option 2</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="checkbox" id="my-field-name-12-3" class="form-check-input" name="my_field_name[12][]" value="3" checked/>
+            <label class="form-check-label" for="my-field-name-12-3">Option 3</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="checkbox" id="my-field-name-12-4" class="form-check-input" name="my_field_name[12][]" value="4"/>
+            <label class="form-check-label" for="my-field-name-12-4">Option 4</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="checkbox" id="my-field-name-12-5" class="form-check-input" name="my_field_name[12][]" value="5"/>
+            <label class="form-check-label" for="my-field-name-12-5">Option 5</label>
+        </div>
+    </div>
+</div>

tests/html/fields/code.html

+<div class="form-group">
+    <label for="field-content" class="required">Contenu</label>
+<div id="editor-field-content" class="code-editor"style="min-height: 400px;" data-language="javascript" data-readonly="false" data-beautiful="false" data-target="#field-content">function foo(items) {
+    var x = &quot;All this is syntax highlighted&quot;;
+    return x;
+}</div>
+<textarea id="field-content" name="content" style="display: none;">function foo(items) {
+    var x = &quot;All this is syntax highlighted&quot;;
+    return x;
+}</textarea>
+</div>

tests/html/fields/file.html

+<div class="form-group">
+    <label for="field-csv">Uploader</label>
+    <div class="input-group">
+        <div class="input-group-prepend">
+            <div class="input-group-text">Fichier</div>
+        </div>
+        <div class="custom-file">
+            <input type="file" id="field-csv" class="custom-file-input" name="csv" value="" placeholder="Aucun fichier choisi" />
+            <label class="custom-file-label" for="field-csv">Aucun fichier choisi</label>
+            <script type="text/javascript">
+                document.getElementById('field-csv').addEventListener('change', function(e) {
+                    if (e.target.files[0]) {
+                        var fileName          = e.target.files[0].name;
+                        var nextSibling       = e.target.nextElementSibling;
+                        nextSibling.innerText = fileName
+                    }
+                });
+            </script>
+        </div>
+    </div>
+</div>

tests/html/fields/image.html

+<div class="form-group">
+    <label for="field-my-field-image" class="required">Champs image</label>
+    <div class="input-group">
+        <div class="input-group-prepend">
+            <div class="input-group-text text-danger">
+                <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
+            </div>
+        </div>
+        <input type="text" id="field-my-field-image" class="form-control" name="my_field_image" value="image.png" placeholder="ex: /upload/folder/image.png" required="required" />
+        <div class="input-group-append">
+            <button class="btn btn-outline-secondary popupfinder" type="button" id="btn-field-my-field-image" data-field="#field-my-field-image" data-mimes="application/pdf">
+                <i class="fa fa-file-image-o mr-2"></i> Choisir une image
+            </button>
+        </div>
+    </div>
+</div>

tests/html/fields/input.html

+<div class="form-group">
+    <label for="field-total">Total</label>
+    <input type="text" id="field-total" class="form-control" name="total" value="23,4" />
+</div>

tests/html/fields/input_advanced.html

+<div class="form-group row">
+    <label for="total-final-1" class="requiredcol-sm-2">Total</label>
+    <span class="text-info popup-help" data-toggle="popover" data-placement="right" title="Information" data-content="Le montant est calculé selon les éléments communiqué. Il peux néanmoins variée suivant d'autre facteurs non pris en compte">
+        <i class="fa fa-info-circle"></i>
+    </span>
+    <div class="col-sm-10">
+        <div class="input-group">
+            <div class="input-group-prepend">
+                <div class="input-group-text"><i class="fa fa-money"></i></div>
+            </div>
+            <input type="text" id="total-final-1" class="form-control text-danger" name="total[1]" value="23,4" placeholder="123,30" style="background-color: #c3c3c3;" autocomplete="autocomplete" autofocus="autofocus" disabled="disabled" required="required" readonly="readonly" onchange="console.log("change")" title="Mon-id ~ mon-label" data-type="column" data-reference="Mon-id|mon-code" />
+            <div class="input-group-append">
+                <div class="input-group-text">€</div>
+            </div>
+        </div>
+        <small class="form-text text-muted text-right mt-0">Taxe comprise</small>
+    </div>
+</div>

tests/html/fields/pdf.html

+<div class="form-group">
+    <label for="field-my-field-pdf" class="required">Champs pdf</label>
+    <div class="input-group">
+        <div class="input-group-prepend">
+            <div class="input-group-text text-danger">
+                <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
+            </div>
+        </div>
+        <input type="text" id="field-my-field-pdf" class="form-control" name="my_field_pdf" value="test.pdf" placeholder="ex: /upload/folder/file.pdf" required="required" />
+        <div class="input-group-append">
+            <button class="btn btn-outline-secondary popupfinder" type="button" id="btn-field-my-field-pdf" data-field="#field-my-field-pdf" data-mimes="application/pdf">
+                <i class="fa fa-file-pdf-o mr-2"></i> Choisir un PDF
+            </button>
+        </div>
+    </div>
+</div>

tests/html/fields/radio.html

+<div class="form-group row">
+    <label for="my-field-name-5" class="col-sm-2">Choix unique</label>
+    <div class="col-sm-10">
+        <div class="form-check form-check-inline">
+            <input type="radio" id="my-field-name-1" class="form-check-input" name="my_field_name" value="1"/>
+            <label class="form-check-label" for="my-field-name-1">Option 1</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="radio" id="my-field-name-2" class="form-check-input" name="my_field_name" value="2" checked/>
+            <label class="form-check-label" for="my-field-name-2">Option 2</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="radio" id="my-field-name-3" class="form-check-input" name="my_field_name" value="3"/>
+            <label class="form-check-label" for="my-field-name-3">Option 3</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="radio" id="my-field-name-4" class="form-check-input" name="my_field_name" value="4"/>
+            <label class="form-check-label" for="my-field-name-4">Option 4</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="radio" id="my-field-name-5" class="form-check-input" name="my_field_name" value="5"/>
+            <label class="form-check-label" for="my-field-name-5">Option 5</label>
+        </div>
+    </div>
+</div>

tests/html/fields/radio_collect.html

+<div class="form-group">
+    <label for="mon-champs-value-4">Mon Champs</label>
+    <div class="form-check">
+        <input type="radio" id="mon-champs-value-1" class="form-check-input" name="mon-champs" value="VALUE-1" data-one="data-value1.1" data-tow="data-value1.2" />
+        <label class="form-check-label" for="mon-champs-value-1">1 - TITRE 1</label>
+    </div>
+    <div class="form-check">
+        <input type="radio" id="mon-champs-value-2" class="form-check-input" name="mon-champs" value="VALUE-2" data-one="data-value2.1" data-tow="data-value2.2" />
+        <label class="form-check-label" for="mon-champs-value-2">2 - TITRE 2</label>
+    </div>
+    <div class="form-check">
+        <input type="radio" id="mon-champs-value-3" class="form-check-input" name="mon-champs" value="VALUE-3" data-one="data-value3.1" data-tow="data-value3.2" />
+        <label class="form-check-label" for="mon-champs-value-3">3 - TITRE 3</label>
+    </div>
+    <div class="form-check">
+        <input type="radio" id="mon-champs-value-4" class="form-check-input" name="mon-champs" value="VALUE-4" data-one="data-value4.1" data-tow="data-value4.2" />
+        <label class="form-check-label" for="mon-champs-value-4">4 - TITRE 4</label>
+    </div>
+</div>

tests/html/fields/radio_indice_true.html

+<div class="form-group row">
+    <label for="my-field-name-5" class="col-sm-2">Choix unique</label>
+    <div class="col-sm-10">
+        <div class="form-check form-check-inline">
+            <input type="radio" id="my-field-name-1" class="form-check-input" name="my_field_name[]" value="1"/>
+            <label class="form-check-label" for="my-field-name-1">Option 1</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="radio" id="my-field-name-2" class="form-check-input" name="my_field_name[]" value="2" checked/>
+            <label class="form-check-label" for="my-field-name-2">Option 2</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="radio" id="my-field-name-3" class="form-check-input" name="my_field_name[]" value="3"/>
+            <label class="form-check-label" for="my-field-name-3">Option 3</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="radio" id="my-field-name-4" class="form-check-input" name="my_field_name[]" value="4"/>
+            <label class="form-check-label" for="my-field-name-4">Option 4</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input type="radio" id="my-field-name-5" class="form-check-input" name="my_field_name[]" value="5"/>
+            <label class="form-check-label" for="my-field-name-5">Option 5</label>
+        </div>
+    </div>
+</div>

tests/html/fields/range.html

+<div class="form-group">
+    <label for="field-zoom">Zoom</label>
+    <input type="range" id="field-zoom" class="form-control" name="zoom" value="7" max="20" oninput="zoomShowValue(this.value)" />
+    <span id="field-zoom-value">7&nbsp;</span>
+    <script type="text/javascript">
+        function zoomShowValue(newValue) {
+            document.getElementById("field-zoom-value").innerHTML=newValue;
+        }
+    </script>
+</div>

tests/html/fields/select_data.html

+<div class="form-group">
+    <label for="field-city-id">Ville</label>
+    <select id="field-city-id" class="form-control" name="city_id">
+        <option value="" selected >Choisir...</option>
+        <option value="1" data-data1="data-value1.1" data-data2="data-value1.2">Titre 1 - value-1</option>
+        <option value="2" data-data1="data-value2.1" data-data2="data-value2.2" selected>Titre 2 - value-2</option>
+        <option value="3" data-data1="data-value3.1" data-data2="data-value3.2">Titre 3 - value-3</option>
+        <option value="4" data-data1="data-value4.1" data-data2="data-value4.2">Titre 4 - value-4</option>
+    </select>
+</div>

tests/html/fields/select_group.html

+<div class="form-group">
+    <label for="field-my-field-name" class="required">Menu déroulant</label>
+    <select id="field-my-field-name" class="form-control  form-control-sm" name="my_field_name" required="required">
+        <option value="" disabled hidden selected >Choisir ...</option>
+        <optgroup label="Groupe 1"><option value="23" selected>Élement 23</option>
+        <option value="24">Élement 24</option>
+        <option value="25">Élement 25</option>
+        </optgroup>
+        <optgroup label="Groupe 2"><option value="26">Élement 26</option>
+        <option value="27">Élement 27</option>
+        <option value="28">Élement 28</option>
+        </optgroup>
+    </select>
+</div>

tests/html/fields/select_multiple.html

+<div class="form-group">
+    <label for="field-collection-34" class="required">Collection</label>
+    <div class="input-group">
+        <div class="input-group-prepend">
+            <div class="input-group-text"><i class="fa fa-list"></i></div>
+        </div>
+        <select id="field-collection-34" class="form-control select2" name="collection[34][]" multiple="multiple" required="required">
+            <option value="1">TITRE 1 - VALUE-1</option>
+            <option value="2" selected>TITRE 2 - VALUE-2</option>
+            <option value="3">TITRE 3 - VALUE-3</option>
+            <option value="4" selected>TITRE 4 - VALUE-4</option>
+        </select>
+        <div class="input-group-append">
+            <div class="input-group-text"><i class="fa fa-hand-paper-o"></i></div>
+        </div>
+    </div>
+</div>

tests/html/fields/select_simple.html

+<div class="form-group">
+    <label for="field-collection-34" class="required">Collection</label>
+    <div class="input-group input-group-sm">
+        <div class="input-group-prepend">
+            <div class="input-group-text"><i class="fa fa-list"></i></div>
+        </div>
+        <select id="field-collection-34" class="form-control select2" name="collection[34]" required="required">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+            <option value="4" selected>Option 4</option>
+            <option value="5">Option 5</option>
+        </select>
+        <div class="input-group-append">
+            <div class="input-group-text"><i class="fa fa-hand-paper-o"></i></div>
+        </div>
+    </div>
+</div>

tests/html/fields/textarea.html

+<div class="form-group">
+    <label for="field-content">Contenu</label>
+    <span class="text-info popup-help" data-toggle="popover" data-placement="right" title="Le contenu" data-content="Le contenu est le coeur de l'article. Grâce à l'éditeur vous pouvez formater le rendu selon votre goût.">
+        <i class="fa fa-info-circle"></i>
+    </span>
+    <textarea id="field-content" class="form-control text-editor" name="content" rows="15">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, rem esse itaque inventore provident reiciendis quo, asperiores dolorem voluptate nostrum quisquam similique commodi quam consequatur ad eligendi iusto aperiam quos?</textarea>
+</div>

tests/html/fields/toggle.html

+<div class="form-group">
+    <label for="field-toggle">Toggle</label>
+    <div class="toogle">
+        <input type="checkbox" value="1" id="field-toggle" class="form-control" name="toggle" data-on="Actif" data-off="Inactif" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-width="75" data-size="xs" checked />
+    </div>
+</div>

tests/html/fields/video.html

+<div class="form-group">
+    <label for="field-my-field-video" class="required">Champs video</label>
+    <div class="input-group">
+        <div class="input-group-prepend">
+            <div class="input-group-text text-danger">
+                <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
+            </div>
+        </div>
+        <input type="text" id="field-my-field-video" class="form-control" name="my_field_video" value="my-video.mp4" placeholder="ex: /upload/folder/video.mp4" required="required" />
+        <div class="input-group-append">
+            <button class="btn btn-outline-secondary popupfinder" type="button" id="btn-field-my-field-video" data-field="#field-my-field-video" data-mimes="application/pdf">
+                <i class="fa fa-file-video-o mr-2"></i> Choisir une vidéo
+            </button>
+        </div>
+    </div>
+</div>