capibara 1.3.21 → 1.3.23

package/package.json

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

package/src/lib/capibara.js

@@ -831,7 +831,7 @@ export class Capibara{
     let pos   = utils.eventToPosition(this.config, evt, this.$elements.$table);
     let item  = utils.getItemByEvent(this.config, evt, this.$elements.$table);
 
-    if(item == null) return; // cuano se selecciona un espacio no seleccionable
+    //if(item == null) return; // cuano se selecciona un espacio no seleccionable
 
     //si es mobile, no selecciona, solo muestra detalles
     let dataByDate = _.find(item.data, {date});
@@ -847,7 +847,8 @@ export class Capibara{
         cancelable: false,
         detail:{
           selected    : this.selected,
-          tabSelected : this.tabSelected
+          tabSelected : this.tabSelected,
+          lastSelection : {date, item, pos},
         }
       }));
       return; // cuando se selecciona un espacio no seleccionable
@@ -903,6 +904,10 @@ export class Capibara{
       return false;
     }
 
+    if(item.selectable === false){
+      return false;
+    }
+
     if(this.config.timeline.noFutureSelectable){
       let d = new Date(date);
       let today = new Date();
@@ -949,7 +954,7 @@ export class Capibara{
 
 
 
-  select(date, item, pos, redraw = true){
+  select(date, item, pos, redraw = true, refreshForm = true){
     if(!this.isSelected(date, item)){
 
       this.selected.push({
@@ -967,9 +972,10 @@ export class Capibara{
       }
 
       // si es el primer item seleccionado, se autorrellena el formulario de navRight
-      if(this.selected.length == 1){
-
-        this.$elements.$cornerRight = tableElements.redrawCornerRight(this.$elements.$cornerRight, this.config, this.tabSelected);
+      if(this.selected.length == 1 && refreshForm){
+        this.redraw({
+          cornerRight: true,
+        });
         let {inputs, element, inputsWithReload, saveCancelBtns} = tableElements.redrawNavRight(this.config, this.$elements.$navRight, this.selected, this.tabSelected, dataDay, this.selected[0]);
         this.$elements.$navRight = element;
         this.$inputsNavRight = inputs;
@@ -1039,10 +1045,10 @@ export class Capibara{
     });
   };
 
-  selectByItemDate(date, item, redraw = true){
+  selectByItemDate(date, item, redraw = true, refreshForm = true){
     if(!this.isSelected(date, item)){
       let pos = utils.getPositionByItemDate(this.config, item, date);
-      this.select(date, item, pos, redraw);
+      this.select(date, item, pos, redraw, refreshForm);
     }
   };
 
@@ -1053,6 +1059,13 @@ export class Capibara{
     }
   };
 
+  deselectAll(redraw = false){
+    this.selected = [];
+    if(redraw){
+      this.redrawSelection();
+    }
+  };
+
 
 
 
@@ -1464,8 +1477,12 @@ export class Capibara{
       tableElements.redrawCorner(this.$elements.$corner, this.config, this.tabSelected);
     }
 
+    if(options.cornerRight){
+      this.$elements.$cornerRight = tableElements.redrawCornerRight(this.$elements.$cornerRight, this.config, this.tabSelected);
+    }
+
     if(options.navRight){
-        let {inputs, element, inputsWithReload, saveCancelBtns}    = tableElements.redrawNavRight(this.config, this.$elements.$navRight, this.selected , this.tabSelected);
+        let {inputs, element, inputsWithReload, saveCancelBtns} = tableElements.redrawNavRight(this.config, this.$elements.$navRight, this.selected , this.tabSelected);
         this.$elements.$navRight = element;
         this.$inputsNavRight     = inputs;
         this.$inputsWithReload = inputsWithReload;

package/src/scss/components/_input_nav.scss

@@ -327,6 +327,10 @@
     &.to-right {
       align-items: end;
     }
+    
+    &.to-left {
+      align-items: start;
+    }
 
     .small-close {
       position: absolute;
@@ -345,8 +349,8 @@
     }
 
     .text-subtitle {
-      text-align: center;
-      align-self: center;
+      // text-align: center;
+      // align-self: center;
     }
 
     .input-section-title {

package/src/util/tableElements.js

@@ -1805,7 +1805,13 @@ export default {
       tabSelected.inputs.forEach((i) => {
         if (i.disabled) return;
 
-        let $input = this.createInput(i, dataDay, daySelected, selected);
+        let $input = this.createInput(
+          i,
+          dataDay,
+          daySelected,
+          selected,
+          tabSelected
+        );
         if ($input) {
           $divContainer.appendChild($input);
           $inputs.push($input);
@@ -1866,7 +1872,7 @@ export default {
       });
     }
 
-    let saveCancelBtns = this.createNavRightbuttons();
+    let saveCancelBtns = this.createNavRightbuttons(config);
     $divContainer.appendChild(saveCancelBtns);
     $navRight.innerHTML = "";
     $navRight.appendChild($divContainer);
@@ -2114,13 +2120,16 @@ export default {
                 let viewBox = "0 0 24 24";
                 let icon = iconConfig.icon || null;
 
-                if(iconConfig.varName){
-                  let iconVar = utils.getVarByPath(data.values, iconConfig.varName);
-                  if(iconVar){
+                if (iconConfig.varName) {
+                  let iconVar = utils.getVarByPath(
+                    data.values,
+                    iconConfig.varName
+                  );
+                  if (iconVar) {
                     icon = iconVar;
                   }
                 }
-                
+
                 if (iconConfig.className) {
                   className = iconConfig.className;
                 }
@@ -2133,9 +2142,12 @@ export default {
                   }
                 }
 
-                if(iconConfig.colorVarName){
-                  let colorVar = utils.getVarByPath(data.values, iconConfig.colorVarName);
-                  if(colorVar){
+                if (iconConfig.colorVarName) {
+                  let colorVar = utils.getVarByPath(
+                    data.values,
+                    iconConfig.colorVarName
+                  );
+                  if (colorVar) {
                     if (utils.isHexColor(colorVar)) {
                       colorStyle = `--local-color: ${colorVar};`;
                     } else {
@@ -2153,8 +2165,6 @@ export default {
                   </svg>
                 </div>
                 `;
-
-
               });
             }
 
@@ -2774,38 +2784,52 @@ export default {
    *
    * @return {Object} Elemento Dom del botones creados
    */
-  createNavRightbuttons() {
-    let saveBtn = this.createButton({
-      label: "Guardar",
-      className: "cap-btn-raised",
-    });
-    let cancelBtn = this.createButton({
-      label: "Cancelar",
-      className: "cap-btn-outline",
-    });
+  createNavRightbuttons(config) {
     let btnSection = dom.createElementFromHTML(
       `<div class="button-section"></div>`
     );
-    btnSection.appendChild(saveBtn);
-    btnSection.appendChild(cancelBtn);
+    if (
+      config.timeline.nav.right &&
+      config.timeline.nav.right.hideSaveButton != true
+    ) {
+      let saveBtn = this.createButton({
+        label: "Guardar",
+        className: "cap-btn-raised",
+      });
 
-    saveBtn.addEventListener("click", (e) => {
-      saveBtn.dispatchEvent(
-        new CustomEvent("saveMultiInput", {
-          bubbles: true,
-          cancelable: false,
-        })
-      );
-    });
+      btnSection.appendChild(saveBtn);
+      saveBtn.addEventListener("click", (e) => {
+        saveBtn.dispatchEvent(
+          new CustomEvent("saveMultiInput", {
+            bubbles: true,
+            cancelable: false,
+          })
+        );
+      });
+    }
 
-    cancelBtn.addEventListener("click", (e) => {
-      cancelBtn.dispatchEvent(
-        new CustomEvent("cancelMultiInput", {
-          bubbles: true,
-          cancelable: false,
-        })
-      );
-    });
+    if (
+      config.timeline.nav.right &&
+      config.timeline.nav.right.hideCancelButton != true
+    ) {
+      const cancelLabelButton =
+        config.timeline.nav.right.cancelLabelButton || "Cancelar";
+      let cancelBtn = this.createButton({
+        label: cancelLabelButton,
+        className: "cap-btn-outline",
+      });
+
+      btnSection.appendChild(cancelBtn);
+
+      cancelBtn.addEventListener("click", (e) => {
+        cancelBtn.dispatchEvent(
+          new CustomEvent("cancelMultiInput", {
+            bubbles: true,
+            cancelable: false,
+          })
+        );
+      });
+    }
 
     return btnSection;
   },
@@ -2819,7 +2843,13 @@ export default {
    * @param {Object[]} [selected = []] - array de objetos, de dias seleccionados
    * @return {Object} Elemento Dom del input creado
    */
-  createInput(props, dataDay = null, daySelected = null, selected = []) {
+  createInput(
+    props,
+    dataDay = null,
+    daySelected = null,
+    selected = [],
+    tabSelected
+  ) {
     let r = null;
 
     if (props.ignoreRender == true) return r;
@@ -2871,7 +2901,13 @@ export default {
         r = this.createList(props, dataDay);
         break;
       case "data-list":
-        r = this.createDataList(props, dataDay, daySelected, selected);
+        r = this.createDataList(
+          props,
+          dataDay,
+          daySelected,
+          selected,
+          tabSelected
+        );
         break;
       case "button":
         r = this.createInputButton(props, dataDay);
@@ -2882,7 +2918,7 @@ export default {
       case "time":
         r = this.createInputTime(props, dataDay);
         break;
-      case "text":
+      case "input-text":
       default:
         r = this.createInputText(props, dataDay);
     }
@@ -2993,8 +3029,8 @@ export default {
       label = props.formatter({ selected });
     }
     let $elem = dom.createElementFromHTML(`
-          <div class="input-section ${
-            props.isHidden ? "hide" : ""
+          <div class="input-section ${props.isHidden ? "hide " : ""} ${
+            props.toLeft ? "to-left " : ""
           } " input-key="${props.key || ""}">
             <span class="${props.classNames || ""}">
             ${label}
@@ -3343,7 +3379,7 @@ export default {
   createInputMessage(props, dataDay) {
     let value = dataDay ? utils.getVarByPath(dataDay, props.varName) : null;
     let elem = dom.createElementFromHTML(`
-          <div class="input-section msj-input-container ${
+          <div class="input-section to-left msj-input-container ${
             props.isHidden ? "hide" : ""
           } "
               input-key="${props.key || ""}">
@@ -3412,13 +3448,15 @@ export default {
     return elem;
   },
 
-  createDataList(props, dataDay, daySelected, selected) {
+  createDataList(props, dataDay, daySelected, selected, tabSelected) {
     let list = [];
     if (dataDay && dataDay.values) {
       list = utils.getVarByPath(dataDay, props.varName) || [];
     }
 
-    let searchInput = ` <div class="search-input-container">
+    let searchInput = props.hideSearch
+      ? ""
+      : ` <div class="search-input-container">
                           <input id="" type="text" name="" class="search-input" placeholder="buscar">
                           <button class="search-input-clear">
                           ${icons.closeIcon}
@@ -3472,31 +3510,33 @@ export default {
       $inputBox.appendChild($elItem);
     });
 
-    $searchInputClear.addEventListener("click", (e) => {
-      $searchInput.value = "";
-      $searchInput.dispatchEvent(new Event("input", { bubbles: true }));
-    });
-
-    $searchInput.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") {
+    if ($searchInput) {
+      $searchInputClear.addEventListener("click", (e) => {
         $searchInput.value = "";
         $searchInput.dispatchEvent(new Event("input", { bubbles: true }));
-      }
-    });
+      });
 
-    $searchInput.addEventListener("input", (e) => {
-      let $inputs = [];
-      $inputs = $el.querySelectorAll(".mini-input-section") || [];
-      $inputs.forEach(($i) => {
-        let label = $i.getAttribute("label");
-        let search = $searchInput.value;
-        if (label.toLowerCase().includes(search.toLowerCase())) {
-          $i.classList.remove("hide");
-        } else {
-          $i.classList.add("hide");
+      $searchInput.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+          $searchInput.value = "";
+          $searchInput.dispatchEvent(new Event("input", { bubbles: true }));
         }
       });
-    });
+
+      $searchInput.addEventListener("input", (e) => {
+        let $inputs = [];
+        $inputs = $el.querySelectorAll(".mini-input-section") || [];
+        $inputs.forEach(($i) => {
+          let label = $i.getAttribute("label");
+          let search = $searchInput.value;
+          if (label.toLowerCase().includes(search.toLowerCase())) {
+            $i.classList.remove("hide");
+          } else {
+            $i.classList.add("hide");
+          }
+        });
+      });
+    }
 
     if (props.editButton.onClick) {
       let button = $el.querySelector("button.edit-btn");
@@ -3509,6 +3549,7 @@ export default {
             daySelected,
             selected,
             $element: $el,
+            tabSelected,
           })
         );
       }
@@ -3521,6 +3562,7 @@ export default {
             daySelected,
             selected,
             $element: $el,
+            tabSelected,
           });
         });
       });
@@ -4099,7 +4141,7 @@ export default {
     return $container;
   },
 
-  createInputButton(props) {
+  createInputButton(props, dataDay) {
     let r = dom.createElementFromHTML(`
       <div class="input-section ${props.isHidden ? "hide" : ""} " input-key="${
         props.key || ""
@@ -4113,7 +4155,9 @@ export default {
       </div>`);
 
     let button = r.querySelector("button");
-    button.addEventListener("click", (e) => props.onClick({ props, event: e }));
+    button.addEventListener("click", (e) =>
+      props.onClick({ props, event: e, dataDay })
+    );
 
     return r;
   },

package/src/util/utils.js

@@ -153,14 +153,14 @@ export default {
     let position = pos.y;
     config.data.forEach(d => {
       if (d.isHidden) return;
-      if (actualPosition == position && d.selectable !== false) {
+      if (actualPosition == position ) {
         item = d;
       }
       actualPosition++;
       if (!d.isClosed) {
         d.children.forEach(c => {
           if (c.isHidden) return;
-          if (actualPosition == position && c.selectable !== false) {
+          if (actualPosition == position ) {
             item = c;
           }
           actualPosition++;