capibara 1.3.21 → 1.3.22

package/package.json

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

package/src/lib/capibara.js

@@ -949,7 +949,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 +967,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 +1040,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 +1054,13 @@ export class Capibara{
     }
   };
 
+  deselectAll(redraw = false){
+    this.selected = [];
+    if(redraw){
+      this.redrawSelection();
+    }
+  };
+
 
 
 
@@ -1464,8 +1472,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);
@@ -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>
                 `;
-
-
               });
             }
 
@@ -2819,7 +2829,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 +2887,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 +2904,7 @@ export default {
       case "time":
         r = this.createInputTime(props, dataDay);
         break;
-      case "text":
+      case "input-text":
       default:
         r = this.createInputText(props, dataDay);
     }
@@ -2993,8 +3015,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 +3365,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 +3434,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 +3496,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 +3535,7 @@ export default {
             daySelected,
             selected,
             $element: $el,
+            tabSelected,
           })
         );
       }
@@ -3521,6 +3548,7 @@ export default {
             daySelected,
             selected,
             $element: $el,
+            tabSelected,
           });
         });
       });