templates/component/form/input.html.twig line 1

Open in your IDE?
  1. {#
  2.     component: input
  4. #}
  7. {% set props = {
  8.     type: 'text',
  9.     label: null,
  10.     placeholder: null,
  11.     pattern:null,
  12.     name: null,
  13.     id: null,
  14.     ref:null,
  15.     autocomplete: null,
  16.     min: null,
  17.     max: null,
  18.     value: null,
  19.     checked: false,
  20.     required: false,
  21.         selected:null,
  22.     max_chars:null
  23. }|merge(props|default({})) %}
  25. {# Add * after label if required #}
  26. {% set label = props.label %}
  27. {% if props.required and props.label %}
  28.     {% set label = label ~ '*' %}
  29. {% endif %}
  31. {#  #}
  32. {# Construct attributes #}
  33. {#  #}
  34. {% set attributes = 'ref=input name='~props.name %}
  36. {# Placeholder attribute #}
  37.     {% if props.placeholder %}
  38. {% set attributes = attributes ~ ' placeholder="' ~ props.placeholder ~ '"' %}
  39. {% endif %}
  41. {# required attribute #}
  42.     {% if props.required %}
  43. {% set attributes = attributes ~ ' required' %}
  44. {% endif %}
  46. {# checked attribute #}
  47.     {% if props.checked %}
  48. {% set attributes = attributes ~ ' checked' %}
  49. {% endif %}
  52. {# value attribute #}
  53.     {% if props.value %}
  54. {% set attributes = attributes ~ ' value="' ~ props.value ~ '"' %}
  55. {% endif %}
  57. {# ref attribute #}
  58.     {% if props.pattern %}
  59. {% set attributes = attributes ~ ' pattern="' ~ props.pattern ~ '"' %}
  60. {% endif %}
  62. {# autocomplete attribute #}
  63.     {% if props.autocomplete %}
  64. {% set attributes = attributes ~ ' autocomplete="' ~ props.autocomplete ~ '"' %}
  65. {% endif %}
  67. {# min attribute #}
  68.     {% if props.min %}
  69. {% set attributes = attributes ~ ' min="' ~ props.min ~ '"' %}
  70. {% endif %}
  72. {# max attribute #}
  73.     {% if props.max %}
  74. {% set attributes = attributes ~ ' max="' ~ props.max ~ '"' %}
  75. {% endif %}
  77. {# tel pattern #}
  80. {# Construct classes #}
  81. {% set classes = ['type' ~ props.type] %}
  83. {# Required #}
  84.     {% if props.required %}
  85. {% set classes = classes|merge(['is-required']) %}
  86. {% endif %}
  88.     <div
  89.     data-component="input" data-type="{{ props.type }}" class="Input-component {{ classes|join(' ') }}"> {# Label #}
  90.     <label class="Input-label" for="{{ props.id }}" ref="label">{{ label|raw }}</label>
  92.     {# Textarea #}
  93.     {% if props.type == 'textarea' %}
  95.         <textarea {{ attributes | raw }} id="{{ props.id }}" class="InputForm Input-textarea">{{ props.value }}</textarea>
  96.         {% if  props.max_chars %}
  97.             <p class="Input-textarea-limit">
  98.                 <span ref="counter">0</span>
  99.                 /
  100.                 <span ref="limit">
  101.                     {{ props.max_chars }}</span>
  102.             </p>
  103.         {% endif %}
  104.         {# Commons inputs #}
  105.     {% elseif props.type == 'text' or props.type == 'email' or props.type == 'tel' or props.type == "number" or props.type == "password" %}
  107.         <input {{ attributes | raw }} id="{{ props.id }}" type="{{ props.type }}" class="InputForm Input-input">
  109.         {% if props.type == 'password' %}
  110.             <div class="Input-passwordSee" ref="seeBtn">
  111.                 {% include "component/svg.html.twig" with {
  112.           props: {
  113.             name: 'view'
  114.           }
  115.         } %}
  116.             </div>
  117.             <div class="Input-passwordHide" ref="hideBtn">
  118.                 {% include "component/svg.html.twig" with {
  119.           props: {
  120.             name: 'edit'
  121.           }
  122.         } %}
  123.             </div>
  124.         {% endif %}
  126.         {# Date input #}
  127.     {% elseif props.type == 'date' %}
  129.         <div class="BaseInput-date">
  130.             <datepicker {{ attributes|raw }} :language="datePickerLang" data-lang="fr"></datepicker>
  131.         </div>
  132.         <span class="DateIcon">
  133.             {% include "component/svg.html.twig" with {
  134.           props: {
  135.             name: 'calendar'
  136.           }
  137.         } %}
  138.         </span>
  140.         {# checkbox #}
  141.     {% elseif props.type == 'checkbox' %}
  142.         <div class="BaseInput-checkbox">
  143.             <div class="BaseInput-checkboxCheck"></div>
  144.             <input {{ attributes|raw }} id="{{ props.id }}" type="checkbox">
  145.         </div>
  147.         {# Radio #}
  148.     {% elseif props.type == 'radio' %}
  149.         <div class="BaseInput-radio">
  150.             <div class="BaseInput-radioCheck"></div>
  151.             <input {{ attributes|raw }} id="{{ props.id }}" type="radio">
  152.         </div>
  154.         {# Select #}
  155.     {% elseif props.type == 'select' %}
  157.         <div class="BaseInput-select">
  158.             <v-select ref="input" id="{{ props.id }}" data-selected="{{ props.selected|json_encode() }}" :options="options" data-options="{{ props.options|json_encode() }}" v-model="selected" :searchable="false" :clearable="false" @input="onChange">
  159.                 {% verbatim %}
  160.                     <template #selected-option="{ label }">
  161.                         <span class="vs__selected-optionsLabel" v-html="label"/>
  162.                     </template>
  163.                     <template #search="{attributes, events}">
  164.                         <input class="vs__search" :required="!selected" v-bind="attributes" v-on="events"/>
  165.                     </template>
  166.                 {% endverbatim %}
  167.             </v-select>
  169.             <input name='{{props.name}}' type="hidden">
  170.         </div>
  172.         <span class="SelectIcon">
  173.             {% include "component/svg.html.twig" with {
  174.           props: {
  175.             name: 'arrow-down'
  176.           }
  177.         } %}
  178.         </span>
  181.         {# File #}
  182.     {% elseif props.type == 'file' %}
  183.         <div class="BaseInput-file u-alignVerticalCenter">
  184.             <input {{ attributes|raw }} id="input_file" type="file" accept=".doc,.docx,.jpg,.jpeg,.png,.pdf">
  185.             {% include 'component/base_icon.html.twig' with {
  186.                 props: {
  187.                     name: 'upload'
  188.                 }
  189.             } %}
  191.             <div class="BaseInput-fileValue u-alignVerticalCenter u-cDark" ref="labelValue"></div>
  192.             <div class="BaseInput-placeholder u-alignVerticalCenter" ref="labelPlaceholder">
  193.                 <div class="BaseInput-fileLabel">Choisissez votre fichier</div>
  194.                 <div class="BaseInput-fileSpec">DOC, PDF, JPG . Taille max : 2mo</div>
  195.                 <span></span>
  196.             </div>
  197.             <label for="input_file" class="BaseInput-fileFakeLabel"/>
  198.         </div>
  201.     {% endif %}
  203. </div>