capibara 1.3.39 → 1.3.40

package/dist/minimal.html

@@ -14,6 +14,6 @@
     <script src="config_minimal.js"></script>
     <script src="data_minimal.js"></script>
     <script src="app_minimal.js"></script>
-<script type="text/javascript" src="./index.js"></script></body>
+<script type="text/javascript" src="/index.js"></script></body>
 
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "capibara",
-  "version": "1.3.39",
+  "version": "1.3.40",
   "main": "dist/index.js",
   "repository": {
     "type": "git",

package/src/scss/layout/_nav.scss

@@ -323,7 +323,16 @@
 
             &.full-width {
               flex: 1 0 auto;
-              display: inline-block;
+              display: flex;
+              z-index: 2;
+              min-width: calc(
+                var(--nav-width) + var(--ex-nav-width) +
+                  var(--initial-nav-width) + var(--btn-nav-width) - 40px
+              );
+              width: calc(
+                var(--nav-width) + var(--ex-nav-width) +
+                  var(--initial-nav-width) + var(--btn-nav-width) - 40px
+              );
             }
 
             &.clickeable {
@@ -339,12 +348,39 @@
                 background: rgba(100, 100, 100, 0.2) !important;
               }
             }
+
+            .item-title-content {
+              flex: 1 1 auto;
+            }
+
+            .detail-btn-container {
+              flex: 0 0 auto;
+              width: auto;
+              text-align: right;
+            }
+
+            .detail-btn {
+              margin-left: 2rem;
+              height: 24px;
+              line-height: 1rem;
+              background: transparent;
+              border: 1px solid currentColor;
+              color: currentColor;
+              font-size: 0.875em;
+              padding: 4px 8px;
+              border-radius: 3px;
+              cursor: pointer;
+              z-index: 10;
+              &:hover {
+                background: rgba(100, 100, 100, 0.2) !important;
+              }
+            }
           }
         }
       }
     }
 
-    .multibuttons-btn{
+    .multibuttons-btn {
       background: transparent;
       border: none;
       color: rgb(153, 153, 153);
@@ -356,11 +392,10 @@
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      &:hover{
+      &:hover {
         background: rgba(100, 100, 100, 0.2);
       }
-    } 
-
+    }
   }
 
   /*

package/src/util/tableElements.js

@@ -1009,6 +1009,15 @@ export default {
     config.data.forEach((d) => {
       if (d.isHidden) return;
 
+      const hasBtn = !!d.onClickDetailButton;
+      const detailBtn = hasBtn
+        ? `<button class="detail-btn" item-id="${d.id || -1}" type-node="${
+            d.type || ""
+          }" >
+        ${d.labelDetailButton}
+                       </button>`
+        : "";
+
       navList += `
        <div class="nav-item">
 
@@ -1030,7 +1039,12 @@ export default {
                       ${d.navOver ? "hoverable" : ""} " item-id="${
                         d.id || -1
                       }" type-node="${d.type || ""}" >
-            ${d.label}
+            <div class="item-title-content">
+              ${d.label}
+            </div>
+            <div class="detail-btn-container">
+              ${detailBtn}
+            </div>
           </div>
         </div>`;
 
@@ -1685,6 +1699,24 @@ export default {
       });
     });
 
+    $elem.querySelectorAll("button.detail-btn").forEach((i) => {
+      i.addEventListener("click", (e) => {
+        let itemId = i.getAttribute("item-id");
+        let typeNode = i.getAttribute("type-node");
+        let item = utils.getItemById(config, itemId, "parent");
+
+        if (item && item.onClickDetailButton) {
+          item.onClickDetailButton({
+            itemId: itemId,
+            type: typeNode,
+            item: item,
+            event: e,
+            button: i,
+          });
+        }
+      });
+    });
+
     $elem.querySelectorAll("button.tree-icon").forEach((i) => {
       i.addEventListener("click", (e) => {
         let itemId = i.getAttribute("item-id");
@@ -2518,7 +2550,7 @@ export default {
 
     //CAPSULES
     let visibleItemsCount = 0; // Contador de elementos visibles
-    
+
     if (dataDay) {
       config.timeline.detailDay.capsules.forEach((cap) => {
         //para comprobar si tiene datos, se obtiene el primer valor
@@ -2657,8 +2689,11 @@ export default {
     }
 
     // Agregar clase single-item si solo hay un elemento visible
-    const columnClass = visibleItemsCount === 1 ? 'list column-flex single-item' : 'list column-flex';
-    str = str.replace('list column-flex', columnClass);
+    const columnClass =
+      visibleItemsCount === 1
+        ? "list column-flex single-item"
+        : "list column-flex";
+    str = str.replace("list column-flex", columnClass);
 
     str += `
         </div>`; // list-detail