apostrophe/lib/modules/apostrophe-ui/views/components/fields.html

The Apostrophe Content Management System.

{% macro string(name, placeholder, value, readOnly, options) -%}
  <input id="{{ options.id }}" name="{{ name }}" placeholder="{{__ns('apostrophe', placeholder | d(''))}}" class="apos-field-input apos-field-input-text{% if options.fieldClasses %} {{ options.fieldClasses }}{% endif %}" type="text" value="{{__ns('apostrophe', value | d(''))}}"{% if readOnly %} disabled{% endif %}{% if options.fieldAttributes %} {{ options.fieldAttributes }}{% endif %}>
{%- endmacro %}

{% macro textarea(name, placeholder, readOnly, options) -%}
  <textarea id="{{ options.id }}" name="{{ name }}" placeholder="{{__ns('apostrophe', placeholder | d(''))}}" class="apos-field-input apos-field-input-textarea{% if options.fieldClasses %} {{ options.fieldClasses }}{% endif %}"{% if readOnly %} disabled{% endif %}{% if options.fieldAttributes %} {{ options.fieldAttributes }}{% endif %}></textarea>
{%- endmacro %}

{% macro checkbox(name, placeholder, readOnly) -%}
  <label>
    <input name="{{ name }}" placeholder="{{__ns('apostrophe', placeholder | d(''))}}" class="apos-field-input apos-field-input-checkbox{% if options.fieldClasses %} {{ options.fieldClasses }}{% endif %}" type="checkbox"{% if readOnly %} disabled{% endif %}{% if options.fieldAttributes %} {{ options.fieldAttributes }}{% endif %}>
    <span class="apos-field-input-checkbox-indicator"></span>
  </label>
{%- endmacro %}

{# Output a select element with the given name and options. options is in the usual array #}
{# format: objects with value and label properties. If "selected" is present, the option with #}
{# the matching value receives a "selected" attribute. (In most cases this is handled through #}
{# front-end JavaScript, however for filters in the "manage" view we do push it in server-side.) #}

{% macro select(name, options, selected, readOnly) -%}
  <div class="apos-field-input-select-wrapper">
    <select name="{{ name }}" class="apos-field-input apos-field-input-select{% if options.fieldClasses %} {{ options.fieldClasses }}{% endif %}"{% if readOnly %} disabled{% endif %}{% if options.fieldAttributes %} {{ options.fieldAttributes }}{% endif %}>
      {%- for option in options -%}
        <option {{ "selected" if option.value == selected }} value="{{ option.value }}">{{ __ns('apostrophe', option.label | d('')) }}</option>
      {%- endfor -%}
    </select>
  </div>
{%- endmacro %}

{% macro color(name, placeholder, value, readOnly, options) -%}
  <label>
    <div class="apos-field-input-color-preview" data-apos-color-preview></div>
    <input id="{{ options.id }}" name="{{ name }}" data-apos-color-empty-label="{{ __ns('apostrophe', "None selected") }}" class="apos-field-input apos-field-input-color{% if options.fieldClasses %} {{ options.fieldClasses }}{% endif %}" data-apos-color type="text" value="{{__ns('apostrophe', value | d(''))}}"{% if readOnly %} disabled{% endif %}{% if options.fieldAttributes %} {{ options.fieldAttributes }}{% endif %}>
    <span class="apos-field-input-colorpicker-value" data-apos-color-value></span>
  </label>
{%- endmacro %}

{% macro range(name, min, max, step, placeholder, value, readOnly, options) -%}
  <label>
    <span class="apos-field-input-range-value" data-apos-range-value></span>
    <input id="{{ options.id }}" name="{{ name }}" min="{{ min }}" max="{{ max }}" step="{{ step or 'any' }}" class="apos-field-input apos-field-input-range{% if options.fieldClasses %} {{ options.fieldClasses }}{% endif %}" type="range" value="{{__ns('apostrophe', value | d(''))}}"{% if readOnly %} disabled{% endif %}{% if options.fieldAttributes %} {{ options.fieldAttributes }}{% endif %}>
  </label>
{%- endmacro %}