field.html.twig 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. {% set originalValue = originalValue is defined ? originalValue : value %}
  2. {% set value = (value is null ? field.default : value) %}
  3. {% set vertical = field.style == 'vertical' %}
  4. {% if field.yaml and value is iterable %}
  5. {% set value = value|toYaml %}
  6. {% endif %}
  7. {% block field %}
  8. <div class="form-field grid{% if vertical %} vertical{% endif %}">
  9. {% block contents %}
  10. <div class="form-label{% if not vertical %} block size-1-3{% endif %}">
  11. {% if field.toggleable %}
  12. <span class="checkboxes toggleable" data-grav-field="toggleable" data-grav-field-name="{{ field.name|fieldName }}">
  13. <input type="checkbox"
  14. id="toggleable_{{ field.name }}"
  15. {% if originalValue is not null and originalValue is not empty %}value="1"{% endif %}
  16. name="toggleable_{{ (scope ~ field.name)|fieldName }}"
  17. {% if originalValue is not null and originalValue is not empty %}checked="checked"{% endif %}
  18. >
  19. <label for="toggleable_{{ field.name }}"></label>
  20. </span>
  21. {% endif %}
  22. <label class="{{ field.toggleable ? 'toggleable' : '' }}">
  23. {% block label %}
  24. {% if field.help %}
  25. <span class="hint--bottom" data-hint="{{ field.help|e|tu }}">{{ field.label|tu }}</span>
  26. {% else %}
  27. {{ field.label|tu }}
  28. {% endif %}
  29. {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
  30. {% endblock %}
  31. </label>
  32. </div>
  33. <div class="form-data{% if not vertical %} block size-2-3{% endif %}"
  34. {% block global_attributes %}
  35. data-grav-field="{{ field.type }}"
  36. data-grav-disabled="{{ originalValue is null ? 'true' : 'false' }}"
  37. data-grav-default="{{ field.default|json_encode()|e('html_attr') }}"
  38. {% endblock %}
  39. >
  40. {% block group %}
  41. {% block input %}
  42. <div class="form-input-wrapper {{ field.size }}">
  43. <input
  44. {# required attribute structures #}
  45. name="{{ (scope ~ field.name)|fieldName }}"
  46. value="{{ value|e('html_attr')|join(', ') }}"
  47. {# input attribute structures #}
  48. {% block input_attributes %}
  49. {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
  50. {% if field.id is defined %}id="{{ field.id|e }}" {% endif %}
  51. {% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
  52. {% if field.disabled %}disabled="disabled"{% endif %}
  53. {% if field.placeholder %}placeholder="{{ field.placeholder|tu }}"{% endif %}
  54. {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
  55. {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
  56. {% if field.readonly in ['on', 'true', 1] %}readonly="readonly"{% endif %}
  57. {% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
  58. {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
  59. {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
  60. {% if field.validate.message %}title="{{ field.validate.message|e|tu }}"
  61. {% elseif field.title is defined %}title="{{ field.title|e|tu }}" {% endif %}
  62. {% endblock %}
  63. />
  64. </div>
  65. {% endblock %}
  66. {% endblock %}
  67. </div>
  68. {% endblock %}
  69. </div>
  70. {% endblock %}