desy-html 13.0.1 → 14.0.0

package/src/templates/components/tree/_template.tree.njk

@@ -6,80 +6,80 @@
 
 {#- If an id 'prefix' is not passed, fall back to using the name attribute
    instead. We need this for error messages and hints as well -#}
-{% set idPrefix = params.idPrefix if params.idPrefix else params.name %}
+{% set idPrefix = params.idPrefix if params.idPrefix else
+  params.name %}
 
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
-{% set describedBy = params.describedBy if params.describedBy else "" %}
+{% set describedBy = params.describedBy if params.describedBy else
+  "" %}
 {% if params.fieldset.describedBy %}
-   {% set describedBy = params.fieldset.describedBy %}
+  {% set describedBy = params.fieldset.describedBy %}
 {% endif %}
 
 {% set subLevel = "" %}
 
 {#- fieldset is false by default -#}
-{% set hasFieldset = true if params.fieldset else false %}
+{% set hasFieldset = true if params.fieldset else
+  false %}
 
 {#- fieldset is false by default -#}
-{% set hasUnderline = true if params.hasUnderline else false %}
-
-
-
-{% set ariaLabel = params.ariaLabel if params.ariaLabel %}
-
+{% set hasUnderline = true if params.hasUnderline else
+  false %}
 
 {#- macro to generate checkboxes -#}
 {% macro checkboxItem(item, id, name, type) %}
   {% set hasHint = true if item.hint.text or item.hint.html %}
   {% set itemHintId = id + "-item-hint" if hasHint else "" %}
-  {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
+  {% set itemDescribedBy = describedBy if not hasFieldset else
+    "" %}
   {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
   <div {%- if params.hasDividers or item.classes %} class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}"{% endif %}>
     <div class="relative flex items-start py-xs">
       {% if type == 'checkbox' or type == 'radio' or type == undefined %}
-      <div class="flex items-center mx-sm">
-        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base {%- if item.isIndeterminate and item.indeterminateChecked %} c-checkboxes__indeterminate-active {% endif %}" id="{{ id }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox"{% else %} type="radio"{% endif %} value="{{ item.value }}"
+        <div class="flex items-center mx-sm">
+          <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base {%- if item.isIndeterminate and item.indeterminateChecked %} c-checkboxes__indeterminate-active {% endif %}" id="{{ id }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox" {% else %} type="radio"{% endif %} value="{{ item.value }}"
         {{-" checked" if item.checked }}
         {{-" disabled" if item.disabled }}
         {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
         {%- if params.errorMessage %} aria-invalid="true"{% endif -%}
         {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
         {%- if item.isIndeterminate or item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
-      </div>
-      <div class="flex-1 pt-0.5 leading-5">
-        {{ componentLabel({
+        </div>
+        <div class="flex-1 pt-0.5 leading-5">
+          {{ componentLabel({
           html: item.html,
           text: item.text,
           classes: item.label.classes if item.label.classes else 'block relative -top-xs -left-8 pl-8 py-xs',
           attributes: item.label.attributes,
           for: id + '-input'
         }) | indent(8) | trim }}
-        {% if hasHint %}
-        {{ componentHint({
+          {% if hasHint %}
+            {{ componentHint({
           id: itemHintId,
           classes: (item.hint.classes if item.hint.classes),
           attributes: item.hint.attributes,
           html: item.hint.html,
           text: item.hint.text
         }) | indent(8) | trim }}
-        {% endif %}
-      </div>
+          {% endif %}
+        </div>
       {% endif %}
       {% if type == 'navigation' %}
         {% if item.href %}
           <a {%- if id %} id="{{ id }}-link"{% endif %} href="{{ item.href }}" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if hasUnderline %} underline{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if not item.disabled %} hover:text-primary-base hover:underline{% endif %} {%- if item.disabled %} no-underline pointer-events-none{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
             {% if item.active %}
-            <strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
+              <strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
             {% else %}
-            {{ item.html | filterquotes | safe if item.html else item.text }}
+              {{ item.html | filterquotes | safe if item.html else item.text }}
             {% endif %}
           </a>
         {% else %}
           <span {%- if id %} id="{{ id }}-link"{% endif %} class="block px-xs {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
             {% if item.active %}
-            <strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
+              <strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
             {% else %}
-            {{ item.html | filterquotes | safe if item.html else item.text }}
+              {{ item.html | filterquotes | safe if item.html else item.text }}
             {% endif %}
           </span>
         {% endif %}
@@ -89,24 +89,25 @@
 {% endmacro %}
 
 {#- macro to generate children -#}
-{% macro childrenTree(itemNode, id, name, type) %}
-    {% if itemNode.sub %}
-      <div class="w-full h-full">
-        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left {%- if itemNode.classes %} {{ itemNode.classes }}{% endif %}"
+{% macro childrenTree(itemNode, id, name, type, lazyRendering) %}
+  {% if itemNode.sub %}
+    <div class="w-full h-full">
+      <div class="flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left {%- if itemNode.classes %} {{ itemNode.classes }}{% endif %}"
         {%- for attribute, value in itemNode.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
-          </span>
-          {{ checkboxItem(itemNode, id, name, type) | trim | indent(8) }}
-        </div>
+        <span class="c-tree__icon absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
+        </span>
+        {{ checkboxItem(itemNode, id, name, type) | trim | indent(8) }}
       </div>
-    {% else %}
-      {{ checkboxItem(itemNode, id, name, type) | trim | indent(4)}}
-    {% endif %}
-    {% if itemNode.sub.items %}
-      {% set subLevel = subLevel + "sub-" %}
-      <ul role="group" class='c-tree__itemgroup {%- if itemNode.sub.classes %} {{ itemNode.sub.classes }}{% endif %}' {%- for attribute, value in itemNode.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+    </div>
+  {% else %}
+    {{ checkboxItem(itemNode, id, name, type) | trim | indent(4)}}
+  {% endif %}
+  {% if itemNode.sub.items %}
+    {% set subLevel = subLevel + "sub-" %}
+    <ul role="group" class='c-tree__itemgroup {%- if itemNode.sub.classes %} {{ itemNode.sub.classes }}{% endif %}' {%- for attribute, value in itemNode.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      {% if lazyRendering != true %}
         {% for subitem in itemNode.sub.items %}
           {% if subitem %}
             {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -115,37 +116,39 @@
             {%- else -%}
               {%- set subId = subLevel + id + "-" + loop.index0 -%}
             {%- endif %}
-        {% if type == 'navigation' %}
-        <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="{{ subId }}" role="treeitem" data-module="c-tree__item" {%- if subitem.sub%}{% if subitem.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
-        {% else %}
-        <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="{{ subId }}" role="treeitem" data-module="c-tree__item" {%- if subitem.sub%}{% if subitem.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
-        {%- endif %}
+            {% if type == 'navigation' %}
+              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="{{ subId }}" role="treeitem" data-module="c-tree__item" {%- if subitem.sub%}{% if subitem.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
+              {% else %}
+                <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="{{ subId }}" role="treeitem" data-module="c-tree__item" {%- if subitem.sub%}{% if subitem.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
+                {%- endif %}
 
-        {% if subitem.sub %}
-          {{ childrenTree(subitem, subId, name, type) | trim | indent(12) }}
-        {% else %}
-          <div class="block {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-          {% if subitem.active %}
-            <div class="font-bold">
-              {{ checkboxItem(subitem, subId, name, type) | trim | indent(10) }}
-            </div>
-          {% else %}
-            {{ checkboxItem(subitem, subId, name, type) | trim | indent(10) }}
-          {% endif %}
-          </div>
+                {% if subitem.sub %}
+                  {{ childrenTree(subitem, subId, name, type, lazyRendering) | trim | indent(12) }}
+                {% else %}
+                  <div class="block {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+                    {% if subitem.active %}
+                      <div class="font-bold">
+                        {{ checkboxItem(subitem, subId, name, type) | trim | indent(10) }}
+                      </div>
+                    {% else %}
+                      {{ checkboxItem(subitem, subId, name, type) | trim | indent(10) }}
+                    {% endif %}
+                  </div>
+                {% endif %}
+              </li>
+            {% endif %}
+          {% endfor %}
         {% endif %}
-        </li>
-       {% endif %}
-       {% endfor %}
-     </ul>
-  {% endif %}
-{% endmacro %}
+      </ul>
+    {% endif %}
+  {% endmacro %}
 
-{#- Capture the HTML so we can optionally nest it in a fieldset -#}
-{% set innerHtml %}
+  {#- Capture the HTML so we can optionally nest it in a fieldset -#}
+  {% set innerHtml %}
   {% if params.hint %}
     {% set hintId = idPrefix + '-hint' %}
-    {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+    {% set describedBy = describedBy + ' ' + hintId if describedBy else
+      hintId %}
     {{ componentHint({
       id: hintId,
       classes: params.hint.classes,
@@ -156,7 +159,8 @@
   {% endif %}
   {% if params.errorMessage %}
     {% set errorId = idPrefix + '-error' %}
-    {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+    {% set describedBy = describedBy + ' ' + errorId if describedBy else
+      errorId %}
     {{ componentErrorMessage({
       id: errorId,
       classes: params.errorMessage.classes,
@@ -169,7 +173,12 @@
   {% if params.searchbar %}
     {{ componentSearchbar(params.searchbar)  }}
   {% endif %}
-  <ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" id="{% if params.id %}{{ params.id }}{% else %}{{ idPrefix }}{% endif %}" role="tree" {%- if params.type=='navigation' %} data-tree-navigation{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree">
+  <ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" id="{% if params.id %}{{ params.id }}{% else %}{{ idPrefix }}{% endif %}" role="tree" {%- if params.type=='navigation' %} data-tree-navigation="true"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree"
+  {% if params.lazyRendering %}
+    data-tree='{{ params.items | dump | safe }}'
+    data-params='{{ params | dump | safe }}'
+  {% endif %}
+  >
     {% for item in params.items %}
       {% if item %}
         {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -179,44 +188,46 @@
           {%- set id = idPrefix + "-" + loop.index0 -%}
         {%- endif -%}
         {% set subId = "sub-" + id %}
-        {% set name = item.name if item.name else params.name %}
+        {% set name = item.name if item.name else
+          params.name %}
         {% set hasHint = true if item.hint.text or item.hint.html %}
         {% set itemHintId = id + "-item-hint" if hasHint else "" %}
-        {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
+        {% set itemDescribedBy = describedBy if not hasFieldset else
+          "" %}
         {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-    <li id="{{ id }}" class="c-tree__item ml-4 {%- if params.type=='navigation' %} my-sm {% endif %} focus:outline-none {%- if item.active %} font-bold{% endif %}" role="treeitem" data-module="c-tree__item" {%- if item.sub%}{% if item.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
-      {{ childrenTree(item, id, name, params.type) | trim }}
-    </li>
+        <li id="{{ id }}" class="c-tree__item ml-4 {%- if params.type=='navigation' %} my-sm {% endif %} focus:outline-none {%- if item.active %} font-bold{% endif %}" role="treeitem" data-module="c-tree__item" {%- if item.sub%}{% if item.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
+          {{ childrenTree(item, id, name, params.type, params.lazyRendering) | trim }}
+        </li>
       {% endif %}
     {% endfor %}
   </ul>
-{% endset -%}
+  {% endset -%}
 
-{% set treeContent %}
-{% if params.type == 'navigation' %}
-<nav {%- if params.ariaLabel%} aria-label= "{{params.ariaLabel}}" {% else %} aria-label= "Árbol de navegación" {% endif -%} >
-  {{ innerHtml | safe }}
-</nav>
-{% elseif params.type == 'checkbox' or params.type == 'radio' or params.type == undefined %}
-{% if params.fieldset %}
-{% call componentFieldset({
-  describedBy: describedBy,
-  errorId: errorId,
-  classes: params.fieldset.classes,
-  attributes: params.fieldset.attributes,
-  legend: params.fieldset.legend,
-  headingLevel: params.fieldset.headingLevel
-}) %}
-{{ innerHtml | safe }}
-{% endcall %}
-{% else %}
-{{ innerHtml | safe }}
-{% endif %}
-{% endif %}
-{% endset %}
+  {% set treeContent %}
+  {% if params.type == 'navigation' %}
+    <nav {%- if params.ariaLabel%} aria-label= "{{params.ariaLabel}}" {% else %} aria-label= "Árbol de navegación" {% endif -%} >
+      {{ innerHtml | safe }}
+    </nav>
+  {% elseif params.type == 'checkbox' or params.type == 'radio' or params.type == undefined %}
+    {% if params.fieldset %}
+      {% call componentFieldset({
+        describedBy: describedBy,
+        errorId: errorId,
+        classes: params.fieldset.classes,
+        attributes: params.fieldset.attributes,
+        legend: params.fieldset.legend,
+        headingLevel: params.fieldset.headingLevel
+      }) %}
+      {{ innerHtml | safe }}
+      {% endcall %}
+    {% else %}
+      {{ innerHtml | safe }}
+    {% endif %}
+  {% endif %}
+  {% endset %}
 
-<!-- tree -->
-<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-  {{ treeContent | indent(2) | safe }}
-</div>
-<!-- /tree -->
+  <!-- tree -->
+  <div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+    {{ treeContent | indent(2) | safe }}
+  </div>
+  <!-- /tree -->

package/src/templates/components/tree/params.tree.yaml

@@ -7,6 +7,10 @@ params:
   type: component
   required: false
   description: A searchbar component to filter the items. Inherits all the searchbar component params.
+- name: lazyRendering
+  type: boolean
+  required: false
+  description: If true, the tree enables lazy rendering mode (doesn't paint children nodes until the user unfolds a parent). Defaults to false.
 - name: ariaLabel
   type: text
   required: false