capibara 1.2.0 → 1.3.3

package/package.json

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

package/src/lib/capibara.js

@@ -564,6 +564,10 @@ export class Capibara{
 
     switch (inputConfig.type) {
 
+      case 'custom':
+        value = inputConfig.getValue ? inputConfig.getValue({elem, props: inputConfig}) : null;
+      break;
+
       case 'time':
         let hhElement= elem.querySelector(".hour");
         let mmElement= elem.querySelector(".minutes");
@@ -640,10 +644,23 @@ export class Capibara{
         });
         break;
       case 'data-list':	
-      //TODO implementar
-      break;
+        inputsElement = elem.querySelectorAll(".mini-input-section");
+        value = [];
+        inputsElement.forEach(i => {
+          let v = i.getAttribute("data-value")
+          if(v){
+            v = parseFloat(v);
+          }
+          value.push({
+            id    : i.getAttribute("data-id"),
+            key   : i.getAttribute("data-key"),
+            value : v || null,
+          })
+        });
+        break;
       case 'title':
         //no es realmente un input, es solo un texto
+        //no es necesario obtener valores de aqui
         break;
 
       case 'text':

package/src/scss/base/_utils.scss

@@ -19,7 +19,6 @@
     display: none !important;
   }
 
-  //fonts
   .text-title{
     font-size: 1.25em;
     font-weight: bold;
@@ -33,6 +32,13 @@
     flex: 0 0 auto;
   }
 
+  .text-hint{
+    font-size: 0.75em;
+    margin: 0.3em;
+    text-align: left;
+    align-self: flex-start;
+  }
+
   .text-subtitle-2{
     font-size: 0.75em;
     margin: 0.5em 0.3em;
@@ -46,5 +52,10 @@
   .d-block{
     display:block;
   }
+   .d-flex{
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+   }
 
 }

package/src/scss/components/_buttons.scss

@@ -2,6 +2,7 @@
 
   button{
     outline: none;
+    cursor: pointer;
     &.cap-rotate{
       svg,
       .mdi:before{
@@ -22,31 +23,35 @@
     }
   }
 
-  .cap-btn-sm{
+  button.cap-btn-sm{
     font-size: 0.75em;
-    margin: 4px !important;
-    padding: 4px 8px !important;
+    margin: 4px;
+    padding: 4px 8px;
   }
 
-  .cap-btn-raised{
+  .cap-btn-outline{
+    background: transparent;
     cursor: pointer;
+    color: grey;
+    border: 2px solid grey;
     padding: 8px 16px;
     margin: 0px 8px;
     border-radius: 6px;
-    background: grey;
-    border: 2px solid grey;
-    color: white;
     font-weight: bold;
+    &.selected{
+      background: grey;
+      color: white;
+    }
   }
 
-  .cap-btn-outline{
-    background: transparent;
+  .cap-btn-raised{
     cursor: pointer;
-    color: grey;
-    border: 2px solid grey;
     padding: 8px 16px;
     margin: 0px 8px;
     border-radius: 6px;
+    background: grey;
+    border: 2px solid grey;
+    color: white;
     font-weight: bold;
   }
 
@@ -274,6 +279,10 @@
       background: mapGet($theme,button,outline, background);
       border:2px solid mapGet($theme,button,outline, border);
       color: mapGet($theme,button,outline, color);
+      &.selected{
+        background: mapGet($theme,button,raised, background);
+        color: mapGet($theme,button,raised, color);
+      }
     }
 
     .cap-btn-shape{

package/src/scss/components/_floatbox.scss

@@ -73,6 +73,7 @@
 
       .dot-container-top {
         top: 1px;
+
         .dot {
           border-radius: 0px 0px 50% 50%;
         }
@@ -84,6 +85,7 @@
 
       .dot-container-bottom {
         bottom: 5px;
+
         .dot {
           border-radius: 0px 0px 50% 50%;
         }
@@ -100,14 +102,28 @@
         border-style: solid;
         border-color: var(--local-color, rgba(255, 255, 255, 0.8));
         background: var(--local-color, rgba(100, 100, 100, 0.5));
-        backdrop-filter: blur(2px);
+        //backdrop-filter: blur(2px);
+
         &.diamond {
           border-radius: 0;
           transform: rotate(45deg) skew(10deg, 10deg);
         }
+
         &.outlined {
           background-color: transparent;
         }
+
+        &.triangle {
+          width: 0;
+          height: 0;
+          border-style: solid;
+          border-width: 5px;
+          transform: rotate(45deg) skew(10deg, 10deg) translate(1px, 1px);
+          border-color: var(--local-color, rgba(100, 100, 100, 0.8)) transparent
+            transparent var(--local-color, rgba(100, 100, 100, 0.8));
+          border-radius: 0;
+          background-color: transparent;
+        }
       }
 
       span.data {
@@ -132,6 +148,7 @@
 
         &.shape-outlined {
           background-color: transparent !important;
+
           &:before {
             content: "";
             opacity: 0.3;
@@ -154,7 +171,8 @@
           color: transparent;
           border-radius: 1px;
           margin: 0px 3px;
-          &:first-child {
+
+          &:first-of-type {
             margin-top: 3px;
           }
         }
@@ -167,7 +185,8 @@
           border-radius: 1px;
           margin: 0px 3px;
           background-color: transparent !important;
-          &:first-child {
+
+          &:first-of-type {
             margin-top: 3px;
           }
 
@@ -193,7 +212,8 @@
           border-radius: 1px;
           margin: 0px 3px;
           background-color: transparent !important;
-          &:first-child {
+
+          &:first-of-type {
             margin-top: 3px;
           }
 
@@ -231,7 +251,7 @@
         margin: 1px;
         border-color: var(--local-color, rgba(0, 0, 0, 0.2));
 
-        &:first-child {
+        &:first-of-type {
           margin-top: 3px;
         }
 
@@ -266,6 +286,44 @@
           }
         }
       }
+
+      .plot-floatbox-container {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+
+        .plot-floatbox {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          background-color: var(--local-color, rgba(0, 0, 0, 0.4));
+
+          &.stripe {
+            background: repeating-linear-gradient(
+              53deg,
+              var(--local-color, rgba(0, 0, 0, 0.4)),
+              var(--local-color, rgba(0, 0, 0, 0.4)) 5px,
+              transparent 5px,
+              transparent 12px
+            );
+          }
+
+          &.stripe-inverse {
+            background: repeating-linear-gradient(
+              127deg,
+              var(--local-color, rgba(0, 0, 0, 0.4)),
+              var(--local-color, rgba(0, 0, 0, 0.4)) 5px,
+              transparent 5px,
+              transparent 12px
+            );
+          }
+        }
+      }
     }
 
     .float-box-ext {
@@ -284,11 +342,16 @@
         flex-direction: column;
         justify-content: start;
         align-items: start;
+
         .long-bar {
           //width: var(--local-width, 0px);
-          width: calc(var(--day-width, 0) * var(--long, 0));
+          width: calc(
+            var(--day-width, 0) * var(--long, 0) - (var(--day-width, 0) * 0.5)
+          );
           //min-width: var(--local-width, calc(var(--day-width) *3) );
-          min-width: calc(var(--day-width, 0) * var(--long, 0));
+          min-width: calc(
+            var(--day-width, 0) * var(--long, 0) - (var(--day-width, 0) * 0.5)
+          );
           height: calc(var(--item-height) / 4 - 3.5px);
           line-height: 0;
           color: transparent;
@@ -299,20 +362,22 @@
           margin-top: 1px;
           margin-bottom: 1px;
           border-width: 2px 2px 2px 0;
-          opacity: var(--local-opacity, 0.4);
+          opacity: var(--local-opacity, 0);
           border-style: solid;
-          border-color: rgba(0,0,0, 0.2);
+          border-color: rgba(0, 0, 0, 0.2);
           transition: 0.3s opacity ease;
-          &:hover{
+
+          &:hover {
             z-index: 10;
           }
-          &.solid{
+
+          &.solid {
             opacity: 1;
           }
-          &:first-child {
+
+          &:first-of-type {
             margin-top: 4px;
           }
-
         }
       }
     }
@@ -324,21 +389,22 @@
         .float-box {
           &:hover {
             box-shadow: 0px 0px 2px 7px mapGet($theme, floatBox, shadow);
+
             & + .float-box-ext {
-              .long-bar{
-                z-index: 2;
+              .long-bar {
+                z-index: 6;
                 box-shadow: 0px 0px 2px 4px mapGet($theme, floatBox, shadow);
-                opacity: 1;
+                opacity: 0.6;
               }
             }
           }
+
           span.data {
             &.shape-bar {
               border-color: mapGet($theme, floatBox, shapeBar, border);
             }
           }
         }
-
       }
     }
   }

package/src/scss/components/_input_nav.scss

@@ -67,6 +67,23 @@
     }
   }
 
+  .buttons-group{
+    display: flex;
+    flex-direction: row;
+    button.cap-btn-outline{
+      border-radius: 0;
+      margin: 0px -2px 0px 0px;
+      &:first-of-type{
+        border-radius: 6px 0 0 6px;
+        margin-left: 4px;
+      }
+      &:last-of-type{
+        border-radius: 0 6px 6px 0;
+        margin-right: 4px;
+      }
+    }
+  }
+
   .input-box-tab-container {
     display: flex;
     width: 100%;
@@ -128,6 +145,8 @@
         right: 1em;
         top: 0.4em;
         color: rgba(100, 100, 100, 0.6);
+        background-color: transparent;
+        border-style: none;
       }
     }
 
@@ -366,8 +385,10 @@
     input.nav-input {
       border: 2px solid transparentize(grey, 0.3);
       border-radius: 6px;
-      width: 70%;
+      //width: 70%;
+      width: 100%;
       min-width: 130px;
+      max-width: 170px;
       font-size: 2em;
       text-align: center;
       padding: 3px 6px;

package/src/scss/layout/_detail_day.scss

@@ -150,6 +150,16 @@
               &.outlined{
                 background: transparent;
               }
+              &.triangle{
+                border-radius: 0;
+                transform: rotate(45deg) skew(10deg, 10deg) translate(3px, 3px);
+                width: 0px;
+                height: 0px;
+                border-width: 5px;
+                border-style: solid;
+                background-color: transparent;
+                //border-color: grey transparent transparent grey;
+              }
             }
 
             .name {
@@ -285,6 +295,10 @@
               border: 1px solid var(--local-color, inherit);
               box-shadow: inset 0px 0px 0px 1px var(--local-color, inherit);
             }
+            &.triangle{
+              background: transparent;
+              border-color: var(--local-color, inherit) transparent transparent var(--local-color, inherit);
+            }
           }
         }
       }

package/src/scss/themes/_color_themes.scss

@@ -145,6 +145,9 @@
       .cap-btn-outline{
         border-color: $color;
         color: $color;
+        &.selected{
+          background: transparentize($color,0.2);
+        }
       }
 
       .select-container{

package/src/util/dateUtils.js

@@ -1,12 +1,10 @@
-import utils     from '../util/utils';
-
-export default{
+import utils from "../util/utils";
 
+export default {
   /**
    * Dia en milisegundos
    */
-  dayInMilliseconds : 24*60*60*1000,
-
+  dayInMilliseconds: 24 * 60 * 60 * 1000,
 
   /**
    * Obtiene Array de fechas con formato arbol en objetos
@@ -18,24 +16,24 @@ export default{
    * @param {Date} dateEnd - fecha termino
    * @return {Object} objeto con formato fechas con formato de arbol
    */
-  getDateTreeRange(dateIni, dateEnd){
+  getDateTreeRange(dateIni, dateEnd) {
     let obj = {};
     let arr = this.getDateRange(dateIni, dateEnd);
     let today = new Date();
-    arr.forEach(a => {
-      obj[a.getUTCFullYear()]                                  = obj[a.getUTCFullYear()] || {};
-      obj[a.getUTCFullYear()][a.getUTCMonth()]                 = obj[a.getUTCFullYear()][a.getUTCMonth()] || {};
+    arr.forEach((a) => {
+      obj[a.getUTCFullYear()] = obj[a.getUTCFullYear()] || {};
+      obj[a.getUTCFullYear()][a.getUTCMonth()] =
+        obj[a.getUTCFullYear()][a.getUTCMonth()] || {};
       obj[a.getUTCFullYear()][a.getUTCMonth()][a.getUTCDate()] = {
-        label     : a.getUTCDate(),
-        Date      : a,
-        isWeekend : [5, 6].indexOf(a.getDate) > -1,
-        isToday   : today.toDateString() == a.toDateString(),
-        isFuture  : today.getTime() <  a.getTime(),
-      }
-    })
-   return obj;
- },
-
+        label: a.getUTCDate(),
+        Date: a,
+        isWeekend: [5, 6].indexOf(a.getDate) > -1,
+        isToday: today.toDateString() == a.toDateString(),
+        isFuture: today.getTime() < a.getTime()
+      };
+    });
+    return obj;
+  },
 
   /**
    * Obtiene Array de Dates, con las fechas entre 2 rangos
@@ -48,16 +46,28 @@ export default{
    * @return {Date[]} array de Dates
    */
 
-  getDateRange(dateIni, dateEnd){
+  getDateRange(dateIni, dateEnd) {
     let arr = [];
-    let dateIniCorrected = new Date(dateIni.getUTCFullYear(), dateIni.getUTCMonth(), dateIni.getUTCDate());
-    let dateEndCorrected = new Date(dateEnd.getUTCFullYear(),dateEnd.getUTCMonth(),dateEnd.getUTCDate(), 4);
-    for(let dt = new Date(dateIniCorrected); dt <= dateEndCorrected; dt.setDate(dt.getDate() + 1)){
+    let dateIniCorrected = new Date(
+      dateIni.getUTCFullYear(),
+      dateIni.getUTCMonth(),
+      dateIni.getUTCDate()
+    );
+    let dateEndCorrected = new Date(
+      dateEnd.getUTCFullYear(),
+      dateEnd.getUTCMonth(),
+      dateEnd.getUTCDate(),
+      4
+    );
+    for (
+      let dt = new Date(dateIniCorrected);
+      dt <= dateEndCorrected;
+      dt.setDate(dt.getDate() + 1)
+    ) {
       arr.push(new Date(dt));
     }
-   return arr;
- },
-
+    return arr;
+  },
 
   /**
    * Compara 2 fechas, sin considerar las horas
@@ -69,13 +79,11 @@ export default{
   isSameDate(date1, date2) {
     return (
       date1.getFullYear() === date2.getFullYear() &&
-      date1.getMonth()    === date2.getMonth() &&
-      date1.getDate()     === date2.getDate()
+      date1.getMonth() === date2.getMonth() &&
+      date1.getDate() === date2.getDate()
     );
   },
 
-
-
   /**
    * Verifica si la fecha enviadas es futura, sin considerar las horas
    * la compara con un new Date()
@@ -83,11 +91,10 @@ export default{
    * @param {Date} date - fecha a analizar
    * @return {Boolean} true si la fecha es futura
    */
-  isFuture(date){
-    return date.setHours(0,0,0,0) > new Date().setHours(0,0,0,0)
+  isFuture(date) {
+    return date.setHours(0, 0, 0, 0) > new Date().setHours(0, 0, 0, 0);
   },
 
-
   /**
    * Verifica si la fecha enviadas es hoy
    * la compara con un new Date()
@@ -95,14 +102,10 @@ export default{
    * @param {Date} date - fecha a analizar
    * @return {Boolean} true si la fecha es hoy
    */
-  isToday(date){
+  isToday(date) {
     return this.isSameDate(date, new Date());
   },
 
-
-
-
-
   /**
    * Verifica si es una fecha valida
    *
@@ -113,35 +116,35 @@ export default{
     return date instanceof Date && !isNaN(date);
   },
 
-
-
   /**
    * Obtiene la diferencia en dias entre 2 fechas
    *
    * Si la fecha de termino no se envia, se considera el dia actual
    *
-   * Basado en 
+   * Basado en
    * https://www.geeksforgeeks.org/how-to-calculate-the-number-of-days-between-two-dates-in-javascript/
    *
    * @param {Date} ini - Fecha inicio
    * @param {Date} [end = new Date() ] - Fecha Termino
    * @return {Integer} Cantidad de dias de diferencia
    */
-  diffDays(ini, end){
+  diffDays(ini, end) {
     let iniDate = new Date(ini);
     let endDate = end ? new Date(end) : new Date();
-    if(this.isValidDate(iniDate) && this.isValidDate(endDate)){
-      let iniDate_utc = new Date(iniDate.getTime() + iniDate.getTimezoneOffset() * 60000);
-      let endDate_utc = new Date(endDate.getTime() + endDate.getTimezoneOffset() * 60000);
-      let time        = endDate_utc.getTime() - iniDate_utc.getTime();
-      let days        = utils.round(time / (1000 * 3600 * 24), 0);
+    if (this.isValidDate(iniDate) && this.isValidDate(endDate)) {
+      let iniDate_utc = new Date(
+        iniDate.getTime() + iniDate.getTimezoneOffset() * 60000
+      );
+      let endDate_utc = new Date(
+        endDate.getTime() + endDate.getTimezoneOffset() * 60000
+      );
+      let time = endDate_utc.getTime() - iniDate_utc.getTime();
+      let days = utils.round(time / (1000 * 3600 * 24), 0);
       return days;
     }
     return 0;
   },
 
-
-
   /**
    * Suma dias a una fecha (preferentemente String)
    * devuelve la fecha formateada como String "YYYY-MM-DD"
@@ -151,57 +154,50 @@ export default{
    * @return {String} Devuelve fecha formateada ya sumada
    */
   addDaysString(date, days) {
-      let d = new Date(date);
-      let date_utc = new Date(d.getTime() + d.getTimezoneOffset() * 60000);
-      date_utc.setDate(date_utc.getDate() + days);
-      let dateFormated = this.formatDate(date_utc);
-      return dateFormated;
+    let d = new Date(date);
+    let date_utc = new Date(d.getTime() + d.getTimezoneOffset() * 60000);
+    date_utc.setDate(date_utc.getDate() + days);
+    let dateFormated = this.formatDate(date_utc);
+    return dateFormated;
   },
 
-
-
   /**
    * Formatea fecha Date a string con formato YYYY-MM-DD
    *
    * @param {Date} date - Fecha a formatear
    * @return {String} Fecha formateada
    */
-  formatDate(date){
-    let month = '' + (date.getMonth() + 1),
-        day   = '' +date.getDate(),
-        year  = date.getFullYear();
+  formatDate(date) {
+    let month = "" + (date.getMonth() + 1),
+      day = "" + date.getDate(),
+      year = date.getFullYear();
 
-    if (month.length < 2) month = '0' + month;
-    if (day.length < 2)   day = '0' + day;
+    if (month.length < 2) month = "0" + month;
+    if (day.length < 2) day = "0" + day;
 
-    return [year, month, day].join('-');
+    return [year, month, day].join("-");
   },
 
-
   /**
-   * Formatea fecha Date a string con formato YYYY-MM-DD
+   * Formatea fecha Date a string con formato 01 de Enero, 2023
    *
    * @param {Date} date - Fecha a formatear
    * @return {String} Fecha formateada
    */
-  formatDateReadeable(dateParam){
+  formatDateReadeable(dateParam) {
     let date = dateParam;
-    
-    if(typeof dateParam == "string" ){
-      date = new Date(dateParam+"T12:00:00-00:00");
-    }
 
-    //let month = '' + (date.getMonth() + 1),
-    let day   = date.getDate();
-    let year  = date.getFullYear();
+    if (typeof dateParam == "string") {
+      date = new Date(dateParam + "T12:00:00-00:00");
+    }
 
-    let monthReadeable = utils.toCapitalize(date.toLocaleString('default', { month: 'long' }));
+    let day = date.getDate();
+    let year = date.getFullYear();
 
-    //if (month.length < 2) month = '0' + month;
-    //if (day.length < 2)   day = '0' + day;
+    let monthReadeable = utils.toCapitalize(
+      date.toLocaleString("default", { month: "long" })
+    );
 
-    //return [year, month, day].join('-');
     return `${day} de  ${monthReadeable} , ${year}`;
-  },
-
-}
+  }
+};