desy-html 13.0.2 → 14.0.0

package/docs/_include.template-header.njk

@@ -358,6 +358,11 @@
     href: "examples-tree.html",
     text: "Tree",
     id: "page-examples-tree"
+  },
+  {
+    href: "examples-treegrid.html",
+    text: "Treegrid",
+    id: "page-examples-treegrid"
   }],
   attributes: {
     "id": "navegacion-ejemplos-offcanvas",

package/docs/_macro.example-render.njk

@@ -108,6 +108,8 @@ import componentToggle %}
 import componentTooltip %}
 {% from "components/tree/_macro.tree.njk"
 import componentTree %}
+{% from "components/treegrid/_macro.treegrid.njk"
+import componentTreegrid %}
 
 
 {% macro exampleRender(data) %}
@@ -296,6 +298,9 @@ import componentTree %}
           {{ componentTooltip(example.data) }}
           {% elseif exampleComponent == "tree" %}
           {{ componentTree(example.data) }}
+          {% elseif exampleComponent == "treegrid" %}
+          {{ componentTreegrid(example.data) }}
+          {% else %}
 
           {% endif %}
         </div>

package/docs/componentes.html

@@ -176,6 +176,9 @@
     <div>
       <p class="c-paragraph-base"><a href="examples-tree.html" class="c-link">Tree</a></p>
     </div>
+    <div>
+      <p class="c-paragraph-base"><a href="examples-treegrid.html" class="c-link">Treegrid</a></p>
+    </div>
   </div>
   <div class="pb-2xl"></div>
 {% endblock %}

package/docs/examples-treegrid.html

@@ -0,0 +1,8 @@
+{% set title = "Treegrid. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+
+{% set activePage = "page-componentes" %}
+{% set activeComponent = "Treegrid" %}
+{% extends "_template.examples.njk" %}
+{% block contentBlock %}
+  {% import "components/treegrid/_examples.treegrid.njk" as exampleData %}
+{% endblock %}

package/docs/index.html

@@ -39,6 +39,10 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.14.0.0</h3>
+  <ul class="text-sm">
+    <li>Added Treegrid component. Better gulp compilation with errors.</li>
+  </ul>
   <h3>v.13.0.2</h3>
   <ul class="text-sm">
     <li>Accesibility fixes in most of the component examples.</li>

package/gulpfile.js

@@ -5,6 +5,7 @@ import gulp from 'gulp';
 import sourcemaps from 'gulp-sourcemaps';
 import clean from 'gulp-clean';
 import nunjucksRender from 'gulp-nunjucks-render';
+import plumber from 'gulp-plumber';
 import browserSyncPackage from 'browser-sync';
 import postcss from 'gulp-postcss';
 import atimport from 'postcss-import';
@@ -75,7 +76,12 @@ function css() {
         tailwindcssNesting(),
         tailwindcss(TAILWIND_CONFIG),
         autoprefixer()
-      ])
+      ]).on('error', function(err) {
+        console.log('\x1b[31m%s\x1b[0m', '=== POSTCSS ERROR ===');
+        console.log('\x1b[31m%s\x1b[0m', err.message);
+        console.log('\x1b[31m%s\x1b[0m', '===================');
+        process.exit(1);
+      })
     )
     .pipe(stripCssComments({preserve: false}))
     .pipe(footer('\n'))
@@ -89,6 +95,14 @@ function html() {
 
 function nunjucks() {
   return gulp.src(SOURCE_NUNJUCKS_DIR)
+    .pipe(plumber({
+      errorHandler: function(err) {
+        console.log('\x1b[31m%s\x1b[0m', '=== NUNJUCKS ERROR ===');
+        console.log('\x1b[31m%s\x1b[0m', 'Error: ' + err.message);
+        console.log('\x1b[31m%s\x1b[0m', '=====================');
+        process.exit(1);
+      }
+    }))
     .pipe(nunjucksRender({
         envOptions: {
           autoescape: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "13.0.2",
+  "version": "14.0.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "type": "module",
   "author": {
@@ -52,6 +52,7 @@
     "gulp-clean-css": "^4.3.0",
     "gulp-footer": "^2.1.0",
     "gulp-nunjucks-render": "^2.2.3",
+    "gulp-plumber": "^1.2.1",
     "gulp-postcss": "^9.0.1",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-strip-css-comments": "^2.0.0",

package/src/css/styles.css

@@ -43,6 +43,7 @@
 @import "../templates/components/toggle/_styles.toggle.css";
 @import "../templates/components/tooltip/_styles.tooltip.css";
 @import "../templates/components/tree/_styles.tree.css";
+@import "../templates/components/treegrid/_styles.treegrid.css";
 @import "./component.form-group.css";
 @import "./component.tippy-box.css";
 @import "./component.headroom.css";

package/src/js/aria/tree.js

@@ -20,57 +20,290 @@ export function Tree(aria) {
 *       An element with the role=tree attribute
   */
   aria.Tree = function (node) {
-  // Check whether node is a DOM element
-  if (typeof node !== 'object') {
-    return;
-  }
+    // Check whether node is a DOM element
+    if (typeof node !== 'object') {
+      return;
+    }
 
-  this.domNode = node;
+    this.domNode = node;
 
-  this.treeitems = [];
-  this.firstChars = [];
+    this.treeitems = [];
+    this.firstChars = [];
 
-  this.firstTreeitem = null;
-  this.lastTreeitem = null;
+    this.firstTreeitem = null;
+    this.lastTreeitem = null;
 
-};
+    this.lazyRendering = false;
+    this.treeData = null;
+    this.params = null;
+  };
 
   aria.Tree.prototype.init = function () {
 
-    function findTreeitems (node, tree, group) {
+    // Only if lazyRendering
+    const treeDataRaw = this.domNode.getAttribute('data-tree');
+    if (treeDataRaw) {
+      this.treeData = JSON.parse(treeDataRaw);
+      this.lazyRendering = true;
+      const paramsRaw = this.domNode.getAttribute('data-params');
+      if (paramsRaw) {
+        this.params = JSON.parse(paramsRaw);
+        this.describedBy = this.params.describedBy ?? "";
+        if (this.params.fieldset.describedBy)
+          this.describedBy = this.params.fieldset.describedBy;
+        this.hasFieldset = this.params.fieldset ?? false;
+      }
+    }
+
+    // initialize pop up menus
+    if (!this.domNode.getAttribute('role')) {
+      this.domNode.setAttribute('role', 'tree');
+    }
+
+    this.findTreeitems(this.domNode, this, false);
+
+    this.updateVisibleTreeitems();
+
+    this.firstTreeitem.domNode.tabIndex = 0;
+
+  };
 
-      var elem = node.firstElementChild;
-      var ti = group;
 
-      while (elem) {
+  aria.Tree.prototype.findTreeitems = function (node, tree, group) {
+    var elem = node.firstElementChild;
+    var ti = group;
 
-        if (elem.tagName.toLowerCase() === 'li') {
+    while (elem) {
+      if (elem.tagName.toLowerCase() === 'li') {
+        if (elem.dataset.treeProcessed !== 'true' || !this.lazyRendering) {
           ti = new aria.Treeitem(elem, tree, group);
           ti.init();
           tree.treeitems.push(ti);
           tree.firstChars.push(ti.label.substring(0, 1).toLowerCase());
+          if (this.lazyRendering) {
+            elem.dataset.treeProcessed = 'true';
+            elem.addEventListener('click', (event) => event.stopPropagation());
+          }
         }
+      }
 
-        if (elem.firstElementChild) {
-          findTreeitems(elem, tree, ti);
-        }
+      if (elem.firstElementChild) {
+        this.findTreeitems(elem, tree, ti);
+      }
+
+      elem = elem.nextElementSibling;
+    }
+  };
 
-        elem = elem.nextElementSibling;
+  function checkboxItem(item, id, name, type, params, describedBy, hasFieldset) {
+    name = name || item.name || '';
+    var hasHint = item.hint && (item.hint.text || item.hint.html);
+    var itemHintId = hasHint ? id + '-item-hint' : '';
+    var itemDescribed = (!hasFieldset ? describedBy : '') + (itemHintId ? ' ' + itemHintId : '');
+    itemDescribed = itemDescribed.trim();
+
+    // Wrapper
+    var html = '<div' +
+      ((params.hasDividers ? ' class="border-t border-b border-neutral-base -mb-px' : '') +
+        (item.classes ? ' ' + item.classes : '') + '"').replace('""', '') +
+      '>' +
+      '<div class="relative flex items-start py-xs">';
+
+    // Checkbox / Radio branch
+    if (type === 'checkbox' || type === 'radio' || typeof type === 'undefined') {
+      html += '<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' +
+        ((item.isIndeterminate && item.indeterminateChecked)
+          ? ' c-checkboxes__indeterminate-active'
+          : '') + '"' +
+        ' id="' + id + '-input"' +
+        ' name="' + name + '"' +
+        (type === 'checkbox' ? ' type="checkbox" role="checkbox"' : ' type="radio"') +
+        ' value="' + (item.value || '') + '"' +
+        (item.checked ? ' checked' : '') +
+        (item.disabled ? ' disabled' : '') +
+        (itemDescribed ? ' aria-describedby="' + itemDescribed + '"' : '') +
+        (params.errorMessage ? ' aria-invalid="true"' : '');
+
+      if (item.isIndeterminate || item.indeterminateChecked) {
+        html += ' onclick="' +
+          "if (this.readOnly) this.checked=this.readOnly=false; " +
+          "else if (!this.checked) this.readOnly=this.indeterminate=true;" +
+          '"';
       }
+      html += '>' +
+        '</div>' +            // cierre flex items-center
+        '<div class="flex-1 pt-0.5 leading-5">';
+
+      // Label
+      var lblCls = (item.label && item.label.classes)
+        ? item.label.classes
+        : 'block relative -top-xs -left-8 pl-8 py-xs';
+      html += '<label for="' + id + '-input" class="' + lblCls + '">';
+      html += item.html ? item.html : (item.text || '');
+      html += '</label>';
+
+      // Hint
+      if (hasHint) {
+        html += '<div id="' + itemHintId + '"' +
+          (item.hint.classes ? ' class="' + item.hint.classes + '"' : '') +
+          '>';
+        html += item.hint.html || item.hint.text;
+        html += '</div>';
+      }
+      html += '</div>';  // cierre flex-1
     }
 
-    // initialize pop up menus
-    if (!this.domNode.getAttribute('role')) {
-      this.domNode.setAttribute('role', 'tree');
+    // Navigation branch
+    if (type === 'navigation') {
+      if (item.href) {
+        html += '<a' +
+          (id ? ' id="' + id + '-link"' : '') +
+          ' href="' + item.href + '"' +
+          ' class="block px-xs focus:bg-warning-base focus:outline-none ' +
+          'focus:shadow-outline-focus focus:text-black' +
+          (item.classes ? ' ' + item.classes : '') +
+          (!item.disabled ? ' hover:text-primary-base hover:underline'
+            : ' no-underline pointer-events-none') + '"' +
+          (item.title ? ' title="' + item.title + '"' : '') +
+          (item.active ? ' aria-current="page"' : '') +
+          (item.disabled ? ' aria-disabled="true" tabindex="-1"' : '') +
+          (item.target ? ' target="' + item.target + '"' : '') +
+          '>';
+        html += item.active
+          ? '<strong class="font-bold">' +
+          (item.html || item.text) +
+          '</strong>'
+          : (item.html || item.text);
+        html += '</a>';
+      } else {
+        html += '<span' +
+          (id ? ' id="' + id + '-link"' : '') +
+          ' class="block px-xs' +
+          (item.classes ? ' ' + item.classes : '') + '"' +
+          (item.title ? ' title="' + item.title + '"' : '') +
+          '>';
+        html += item.active
+          ? '<strong class="font-bold">' +
+          (item.html || item.text) +
+          '</strong>'
+          : (item.html || item.text);
+        html += '</span>';
+      }
     }
 
-    findTreeitems(this.domNode, this, false);
+    html += '</div></div>';
+    return html;
+  }
 
-    this.updateVisibleTreeitems();
+  aria.Tree.prototype.childrenTree = function (itemNode, id, name, type, lazyRendering, onlySub, params, describedBy, hasFieldset) {
+    var html = '';
+
+    if (!onlySub) {
+      if (itemNode.sub) {
+        html += '<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' +
+          (itemNode.classes ? ' ' + itemNode.classes : '') + '"';
+        for (var a in itemNode.attributes || {}) {
+          html += ' ' + a + '="' + itemNode.attributes[a] + '"';
+        }
+        html += '>' +
+          '<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, params, describedBy, hasFieldset) +
+          '</div>' +
+          '</div>';
+      } else {
+        html += checkboxItem(itemNode, id, name, type, params, describedBy, hasFieldset);
+      }
+    }
 
-    this.firstTreeitem.domNode.tabIndex = 0;
+    if (itemNode.sub && itemNode.sub.items) {
+      html += '<ul role="group" class="c-tree__itemgroup' +
+        (itemNode.sub.classes ? ' ' + itemNode.sub.classes : '') + '"';
+      for (var b in itemNode.sub.attributes || {}) {
+        html += ' ' + b + '="' + itemNode.sub.attributes[b] + '"';
+      }
+      html += '>';
+
+      if (!lazyRendering || onlySub) {
+        var subLevel = 'sub-';
+        itemNode.sub.items.forEach((subitem, idx) => {
+          if (!subitem) return;
+          var subId = subitem.id
+            ? subitem.id
+            : subLevel + id + '-' + idx;
+          var clsBase = (type === 'navigation')
+            ? 'c-tree__item ml-5 my-sm origin-top-left focus:outline-none'
+            : 'c-tree__item ml-8 origin-top-left focus:outline-none';
+          var expanded = subitem.sub
+            ? ' aria-expanded="' + (subitem.expanded ? 'true' : 'false') + '"'
+            : '';
+
+          html += '<li class="' + clsBase + '" ' +
+            'id="' + subId + '" ' +
+            'role="treeitem" ' +
+            'data-module="c-tree__item"' +
+            expanded +
+            '>';
+
+          if (subitem.sub) {
+            html += this.childrenTree(
+              subitem,
+              subId,
+              name,
+              type,
+              lazyRendering,
+              false,
+              params,
+              describedBy,
+              hasFieldset
+            );
+          } else {
+            html += '<div class="block' +
+              (subitem.classes ? ' ' + subitem.classes : '') +
+              (subitem.active ? ' font-bold' : '') +
+              '"' +
+              (subitem.title ? ' title="' + subitem.title + '"' : '') +
+              (subitem.active ? ' aria-current="page"' : '') +
+              '>';
+            if (subitem.active) {
+              html += '<div class="font-bold">' +
+                checkboxItem(subitem, subId, name, type, params, describedBy, hasFieldset) +
+                '</div>';
+            } else {
+              html += checkboxItem(subitem, subId, name, type, params, describedBy, hasFieldset);
+            }
+            html += '</div>';
+          }
+
+          html += '</li>';
+        });
+      }
 
-  };
+      html += '</ul>';
+    }
+
+    return html;
+  }
 
   aria.Tree.prototype.setFocusToItem = function (treeitem) {
 
@@ -80,8 +313,12 @@ export function Tree(aria) {
       if (ti === treeitem) {
         ti.domNode.tabIndex = 0;
         ti.domNode.focus();
-      }
-      else {
+
+        var input = ti.domNode.querySelector('input');
+        if (input) {
+          ti.domNode.setAttribute('aria-checked', input.checked ? 'true' : 'false');
+        }
+      } else {
         ti.domNode.tabIndex = -1;
       }
     }
@@ -145,7 +382,58 @@ export function Tree(aria) {
   aria.Tree.prototype.expandTreeitem = function (currentItem) {
 
     if (currentItem.isExpandable) {
-      currentItem.domNode.setAttribute('aria-expanded', true);
+      var node = currentItem.domNode;
+      node.setAttribute('aria-expanded', 'true');
+
+      if (this.lazyRendering && !node.dataset.childrenInjected) {
+
+        function findNodeById(data, targetId, parentId = '') {
+          for (let i = 0; i < data.length; i++) {
+            const item = data[i];
+
+            const currentId = item.id || (parentId ? 'sub-' + parentId + '-' + i : i);
+
+            if (currentId === targetId) {
+              return item;
+            }
+
+            if (item.sub?.items?.length) {
+              const result = findNodeById(item.sub.items, targetId, currentId);
+              if (result) return result;
+            }
+          }
+
+          return null;
+        }
+
+        var itemNode = findNodeById(this.treeData || [], node.id);
+
+        if (itemNode && itemNode.sub && itemNode.sub.items && itemNode.sub.items.length) {
+          var group = node.querySelector('ul[role="group"]');
+
+          var html = this.childrenTree(
+            itemNode,
+            node.id,
+            this.params.name,
+            this.params.type,
+            this.lazyRendering,
+            true,
+            this.params,
+            this.describedBy,
+            this.hasFieldset
+          );
+          var listItems = html
+            .replace(/^<ul[^>]*>/, '')
+            .replace(/<\/ul>$/, '');
+          group.insertAdjacentHTML('beforeend', listItems);
+          node.dataset.childrenInjected = 'true';
+        }
+        this.findTreeitems(this.domNode, this, currentItem);
+        // To sort because when add children dinnamically, the order is not guaranteed as should be.
+        this.treeitems.sort((a, b) => a.domNode.compareDocumentPosition(b.domNode) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+        this.firstChars = this.treeitems.map(ti => ti.label.substring(0, 1).toLowerCase());
+      }
+
       this.updateVisibleTreeitems();
     }
 
@@ -171,9 +459,10 @@ export function Tree(aria) {
     } else {
       groupTreeitem = currentItem.groupTreeitem;
     }
-
     if (groupTreeitem) {
-      groupTreeitem.domNode.setAttribute('aria-expanded', false);
+      var node = groupTreeitem.domNode;
+      node.setAttribute('aria-expanded', false);
+
       this.updateVisibleTreeitems();
       this.setFocusToItem(groupTreeitem);
     }