nomilo/templates/components/form/input.html
2026-07-01 01:12:30 +02:00

93 lines
2.9 KiB
HTML

{%- component form.input(
id: string,
name: string,
value = none,
type: string = "text",
description: string = none,
options: map = {},
errors: map = {},
errors_keys: array = [],
error_msg_id: string = none,
extra_errors: string = none,
label: string,
label_attributes: map = {},
delete_button_msg: string = none,
delete_button_msg_template: string = none,
attributes: map = {},
lang: string,
) -%}
{%- set filtered_errors = [ errors | get(key=error_key) for error_key in errors_keys if error_key in errors ] -%}
<div>
<label
for="{{ id }}"
{%- for attr_name, attr_value in label_attributes %}
{{ attr_name }}="{{ attr_value }}"
{%- endfor %}
>
{{ label }}
</label>
{% if delete_button_msg %}
<button type="button" class="primary icon" data-delete-item>
{{ <icon.trash /> }}
<span class="visually-hidden" data-new-item-template-content="{{ delete_button_msg_template }}">
{{ delete_button_msg }}
</span>
</button>
{% endif %}
</div>
<div>
{%- if type == "textarea" -%}
<textarea
{%- elif type == "select" -%}
<select
{%- else -%}
<input
{%- endif -%}
{%- if type != "textarea" -%}
{%- if type == "number" %} type="text" inputmode="numeric"
{%- else %} type="{{ type }}"
{%- endif -%}
{%- endif %}
name="{{ name }}"
id="{{ id }}"
{%- for attr_name, attr_value in attributes %}
{{ attr_name }}="{{ attr_value }}"
{%- endfor %}
aria-describedby="{% for error in filtered_errors %} {{ id }}-error-{{ loop.index0 }}{% endfor %}{% if description %} {{ id }}-description{% endif %} {{ extra_errors }}"
{% if filtered_errors or extra_errors %}aria-invalid="true"{% endif %}
{% if type != "textarea" and type != "select" %}value="{{ value | default(value="") }}"{% endif %}
>
{%- if type == "textarea" -%}
{{- value | default(value="") -}}
</textarea>
{%- elif type == "select" -%}
{%- for option_value, label in options -%}
<option
value="{{ option_value }}"
{% if option_value == value %}selected{% endif %}
>
{{ label }}
</option>
{%- endfor -%}
</select>
{%- endif -%}
{%- for error in filtered_errors -%}
<p class="error" id="{{ id }}-error-{{ loop.index0 }}" data-new-item-skip>
{{ tr(
msg=error_msg_id,
attr="error-" ~ error.code | replace(from=":", to="-"),
extra_args=error | get(key="details", default="")) }}
</p>
{%- endfor -%}
{%- if description -%}
<p class="help" id="{{ id }}-description">
{{ description }}
</p>
{%- endif -%}
</div>
{%- endcomponent form.input %}