- Up, interface d'administration des champs personnalisés

li {

  list-style: none;

}

////////////////////////////////// FORM

label {

  font-weight: bold;

  color: var(--bs-primary-grey);

  margin-top: .5em;

}

.form-switch label {

  font-weight: normal;

  margin-top: auto;

  color: var(--bs-body-color);

}

.form-help {

  background: rgba($primary-grey, .1);

  color: rgba($primary, 1);

  padding: .5em 1em;

  border-radius: .5em;

  line-height: 1.3em;

  &:before {

    font-family: fontello;

    color: $primary-flash;

    font-weight: normal;

    font-style: normal;

    content: '\e898';

    padding-right: .5em;

    font-size: 1.25em;

  }

}

 No newline at end of file

  <div class="overlay" v-if="edited">

    <div class="overlay-content">

      <h1>Champ personnalisé</h1>

      <section>

      <section class="mb-3">

        <label for="intitule" class="form-label">

          Intitulé

        </label>

        <input type="text" class="form-control" v-model="edited.label" id="intitule" placeholder="Nom affiché"/>

      </section>

      <section>

      <div>

          <label for="name" class="form-label">

          Intitulé

            Nom technique

          </label>

        <div class="row">

        <section class="col-md-9">

          <div class="input-group">

          <span class="input-group-addon">freefield_</span>

            <input type="text" class="form-control" v-model="edited.name" id="name" placeholder="Nom technique"/>

          </div>

        </section>

          <div class="col-md-3 form-help">

            Le <strong>nom technique</strong> sera utilisé pour l'API et les exportations. Il est préférable qu'il soit court, sans espaces ou caractères spéciaux

          </div>

        </div>

      </div>

      <section>

        <label for="type" class="form-label">

          Type

          Type de donnée

        </label>

        <select name="" id="type" class="form-control" v-model="edited.type">

          <option value="text">Texte</option>

          <!--

          <option value="date">Date</option>

          <option value="integer">Entier</option>

          <option value="float">Nombre</option>

          -->

          <option value="list">Liste simple</option>

        </select>

      </section>

      <section>

        <label for="contrainte">

      <div>

        <label class="form-label">

          Obligatoire

        </label>

        <input type="checkbox" class="form-checker" v-model="edited.required" id="contrainte"/>

        <div class="row">

          <section class="col-md-9">

            <div class="form-check form-switch">

              <input class="form-check-input" type="checkbox" role="switch" id="contrainte" v-model="edited.required" />

              <label class="form-check-label" for="contrainte">doit être renseigné</label>

            </div>

          </section>

          <div class="col-md-3 form-help">

            Les champs marqués comme <strong>obligatoire</strong> devront être renseignés

          </div>

        </div>

      </div>

      <section>

        <label for="editable">

        <label class="form-label">

          éditable

        </label>

        <input type="checkbox" class="form-checker" v-model="edited.editable" id="editable"/>

        <p>Note : Un champ editable sera disponible dans la formulaire d'édition/création. Les champs non-éditables sont

          généralement alimentés par une source tiers / une procédure spécifique</p>

        <div class="row">

          <section class="col-md-9">

            <div class="form-check form-switch">

              <input class="form-check-input" type="checkbox" role="switch" id="editable" v-model="edited.editable" />

              <label class="form-check-label" for="editable">ce champ sera éditable</label>

            </div>

          </section>

          <div class="col-md-3 form-help">

            Note : Un champ <strong>editable</strong> sera disponible dans la formulaire d'édition/création. Les champs non-éditables sont

            généralement alimentés par une source tiers / une procédure spécifique

          </div>

        </div>

      </section>

      <section>

  <div class="buttons btn-group">

    <span>Ajouter un champ : </span>

    <button class="btn btn-light" @click="handlerNewText">Texte</button>

    <!--

    <button class="btn btn-light" @click="handlerNewDate">Date</button>

    <button class="btn btn-light" @click="handlerNewNumber">Nombre</button>

    <button class="btn btn-light" @click="handlerNewBool">Booléen</button>

    <button class="btn btn-light" @click="handlerNewList">Liste</button>

    -->

    <button class="btn btn-light" @click="handlerNewList">Liste simple</button>

  </div>

  <section class="fields">

    <article class="card" v-for="field in fields">

        </div>

      </h3>

      {{ field.description }}

      <hr>

      {{ field }}

    </article>

  </section>

</template>