field.html.twig 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. {% if not field.validate.ignore %}
  2. {% if not blueprints or (blueprints.schema.type(field.type)['input@'] ?? true) is same as(true) %}
  3. {% set originalValue = originalValue is defined ? originalValue : value %}
  4. {% set toggleableChecked = field.toggleable and originalValue is not null %}
  5. {% set isDisabledToggleable = field.toggleable and not toggleableChecked %}
  6. {% set value = value ?? field.default %}
  7. {% if (field.yaml or field.validate.type == 'yaml') and value is iterable%}
  8. {% set value = value|toYaml %}
  9. {% endif %}
  10. {% endif %}
  11. {% set vertical = field.style == 'vertical' %}
  12. {% set field_name = (scope ~ field.name)|fieldName %}
  13. {% block field %}
  14. <div class="form-field grid{% if vertical %} vertical{% endif %}{% if field.toggleable %} form-field-toggleable{% endif %} {{ field.outerclasses }} {{ field.field_classes }}">
  15. {% block contents %}
  16. <div class="form-label{% if not vertical %} block size-1-3{% endif %}">
  17. {% if field.toggleable %}
  18. <span class="checkboxes toggleable" data-grav-field="toggleable" data-grav-field-name="{{ field_name }}">
  19. <input type="checkbox"
  20. id="toggleable_{{ field.name }}"
  21. {% if toggleableChecked %}value="1"{% endif %}
  22. name="toggleable_{{ field_name }}"
  23. {% if toggleableChecked %}checked="checked"{% endif %}
  24. >
  25. <label for="toggleable_{{ field.name }}"></label>
  26. </span>
  27. {% endif %}
  28. <label{{ (field.toggleable ? ' class="toggleable" for="toggleable_' ~ field.name ~ '"')|raw }}>
  29. {% block label %}
  30. {% if field.help %}
  31. {% if field.markdown %}
  32. <span class="hint--bottom" data-hint="{{ field.help|tu|markdown(false)|e('html') }}">{{ field.label|tu|markdown(false)|raw }}</span>
  33. {% else %}
  34. <span class="hint--bottom" data-hint="{{ field.help|tu|e('html') }}">{{ field.label|tu|raw }}</span>
  35. {% endif %}
  36. {% else %}
  37. {% if field.markdown %}
  38. {{ field.label|tu|markdown(false)|raw }}
  39. {% else %}
  40. {{ field.label|tu|raw }}
  41. {% endif %}
  42. {% endif %}
  43. {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
  44. {% endblock %}
  45. </label>
  46. {% if field.sublabel %}
  47. <div class="form-sublabel">
  48. {% if field.markdown %}
  49. {{ field.sublabel|tu|markdown(false)|raw }}
  50. {% else %}
  51. {{ field.sublabel|tu|raw }}
  52. {% endif %}
  53. </div>
  54. {% endif %}
  55. </div>
  56. <div class="form-data{% if not vertical %} block size-2-3{% endif %}"
  57. {% block global_attributes %}
  58. data-grav-field="{{ field.type }}"
  59. data-grav-disabled="{{ toggleableChecked }}"
  60. data-grav-default="{{ field.default|json_encode|e('html_attr') }}"
  61. {% endblock %}
  62. >
  63. {% block group %}
  64. {% block input %}
  65. <div class="form-input-wrapper {{ field.size }} {{ field.wrapper_classes }}">
  66. {% block prepend %}{% endblock prepend %}
  67. <input
  68. {# required attribute structures #}
  69. name="{{ field_name }}"
  70. value="{{ value|join(',') }}"
  71. {% if field.key %}
  72. data-key-observe="{{ (scope ~ field_name)|fieldName }}"
  73. {% endif %}
  74. {# input attribute structures #}
  75. {% block input_attributes %}
  76. {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
  77. {% if field.id is defined %}id="{{ field.id|e }}" {% endif %}
  78. {% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
  79. {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
  80. {% if field.placeholder %}placeholder="{{ field.placeholder|tu }}"{% endif %}
  81. {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
  82. {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
  83. {% if field.readonly in ['on', 'true', 1] %}readonly="readonly"{% endif %}
  84. {% if field.autocomplete is defined %}autocomplete="{{ field.autocomplete }}"{% endif %}
  85. {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
  86. {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
  87. {% if field.validate.message %}title="{{ field.validate.message|e|tu }}"
  88. {% elseif field.title is defined %}title="{{ field.title|e|tu }}" {% endif %}
  89. {% endblock %}
  90. />
  91. {% block append %}{% endblock append %}
  92. </div>
  93. {% endblock %}
  94. {% endblock %}
  95. {% if field.description %}
  96. <div class="form-extra-wrapper {{ field.wrapper_classes }}">
  97. <span class="form-description">
  98. {% if field.markdown %}
  99. {{ field.description|tu|markdown(false)|raw }}
  100. {% else %}
  101. {{ field.description|tu|raw }}
  102. {% endif %}
  103. </span>
  104. </div>
  105. {% endif %}
  106. </div>
  107. {% endblock %}
  108. </div>
  109. {% endblock %}
  110. {% endif %}