From 64247bedd7a88f105ca5f5791c02a5aeda43ce18 Mon Sep 17 00:00:00 2001 From: maki <makiniqa@sutty.nl> Date: Mon, 14 Oct 2024 15:02:55 -0300 Subject: [PATCH] feat: checkbox component #12 --- _data/components.yml | 1 + _includes/attributes/form_dependency.html | 16 +++++++++ _includes/form/checkbox.html | 40 +++++++++++++++++++++++ _includes/theme/checkbox.html | 2 ++ 4 files changed, 59 insertions(+) create mode 100644 _includes/attributes/form_dependency.html create mode 100644 _includes/form/checkbox.html create mode 100644 _includes/theme/checkbox.html diff --git a/_data/components.yml b/_data/components.yml index 7ee0d47..f107ec9 100644 --- a/_data/components.yml +++ b/_data/components.yml @@ -8,3 +8,4 @@ - "button_with_link" - "button_with_copy" - "buttons" +- "checkbox" diff --git a/_includes/attributes/form_dependency.html b/_includes/attributes/form_dependency.html new file mode 100644 index 0000000..db9554b --- /dev/null +++ b/_includes/attributes/form_dependency.html @@ -0,0 +1,16 @@ +{%- comment -%} + Estable relaciones de dependencia entre campos + + @param :depends [String] Atributo name del campo del que depende + @param :condition [String] Condición (every, some) + @param :values [Array] Valores que cumplen la condición +{%- endcomment -%} + +data-form-dependency-target="dependency" data-action="form-dependency#update" data-label=" +{{- include.label | escape_once -}} +" +{% if include.depends %} + data-depends="{{ include.depends }}" data-condition="{{ include.condition }}" data-values=" + {{- include.values | jsonify | escape -}} + " +{% endif %} diff --git a/_includes/form/checkbox.html b/_includes/form/checkbox.html new file mode 100644 index 0000000..3d2b674 --- /dev/null +++ b/_includes/form/checkbox.html @@ -0,0 +1,40 @@ +{%- comment -%} + componente de checkbox + + @param :field [String] + @param :label [String] + @param :value [String] + @param :id [String] + @param :class [String] Las clases del componente + @param :checked [Boolean] + @param :depends [String] Atributo name del campo del que depende + @param :condition [String] Condición (every, some) + @param :values [Array] Valores que cumplen la condición +{%- endcomment -%} + +<div class="{{ include.class }} d-flex flex-row align-items-center"> + <div class="custom-control custom-checkbox"> + <input + {% + include attributes/form_dependency.html + depends=include.depends + condition=include.condition + values=include.values + label=include.label + %} + type="checkbox" + class="custom-control-input" + id="{{ include.id }}" + name="{{ include.field }}" + value="{{ include.value | escape_once }}" + {{ include.checked | present | value_if: 'checked' }} + > + + <label + class="custom-control-label pl-1" + for="{{ include.id }}" + > + {{ include.label | default: include.value }} + </label> + </div> +</div> \ No newline at end of file diff --git a/_includes/theme/checkbox.html b/_includes/theme/checkbox.html new file mode 100644 index 0000000..c169f06 --- /dev/null +++ b/_includes/theme/checkbox.html @@ -0,0 +1,2 @@ +{% include form/checkbox.html label="Acepto" id="tyc" field="tyc" value="algo" %} +{% include form/checkbox.html label="Quiero mails" id="mails" field="tyc" value="otra cosa" %} \ No newline at end of file -- GitLab