@alexochihua/exos-library-components 0.1.80 → 0.1.81

package/README.md

@@ -1,29 +1,29 @@
-# exos-library-components
-
-## Project setup
-
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-
-```
-npm run build
-```
-
-### Lints and fixes files
-
-```
-npm run lint
-```
-
-### Customize configuration
-
-See [Configuration Reference](https://cli.vuejs.org/config/).
+# exos-library-components
+
+## Project setup
+
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+
+```
+npm run build
+```
+
+### Lints and fixes files
+
+```
+npm run lint
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://cli.vuejs.org/config/).

package/dist/exos-library-components.common.js

@@ -12387,15 +12387,15 @@ function EIconvue_type_template_id_d7748676_render(_ctx, _cache, $props, $setup,
 /* harmony default export */ var EIconvue_type_script_lang_js = ({
   name: "EIcon",
   props: {
-    /**
-     * El nombre del icono, si este inicia con ebind: se tomara un icon local, de lo contrario tomara un icon de la libreria Material Icons.
+    /**
+     * El nombre del icono, si este inicia con ebind: se tomara un icon local, de lo contrario tomara un icon de la libreria Material Icons.
      */
     name: {
       type: String,
       default: ""
     },
-    /**
-     * Tamaño del icono. Puede ser 'xs', 'sm', 'md', 'lg', o 'xl'.
+    /**
+     * Tamaño del icono. Puede ser 'xs', 'sm', 'md', 'lg', o 'xl'.
      */
     size: {
       type: String,
@@ -12415,20 +12415,20 @@ function EIconvue_type_template_id_d7748676_render(_ctx, _cache, $props, $setup,
     };
   },
   computed: {
-    /**
-     * Indica si el icono es local o no.
+    /**
+     * Indica si el icono es local o no.
      */
     isLocalIcon() {
       return this.name.includes("ebind");
     },
-    /**
-     * Indica si el tamaño del icono está predefinido.
+    /**
+     * Indica si el tamaño del icono está predefinido.
      */
     isPreSize() {
       return !!this.sizes[this.size];
     },
-    /**
-     * Clase CSS del icono.
+    /**
+     * Clase CSS del icono.
      */
     iconClass() {
       return this.isLocalIcon ? `icon-${this.name.split(":")[1]} ${this.$attrs.class ?? ""}` : `material-icons  ${this.$attrs.class ?? ""}`;
@@ -22986,87 +22986,87 @@ const VERSION = "3.4.4";
     }
   },
   props: {
-    /**
-     * Valor que se le asignará al componente calendario.
+    /**
+     * Valor que se le asignará al componente calendario.
      */
     modelValue: {
       default: null,
       description: "Valor que se le asignará al componente"
     },
-    /**
-     * Etiqueta que indicará el valor solicitado para el componente.
+    /**
+     * Etiqueta que indicará el valor solicitado para el componente.
      */
     label: {
       type: String,
       default: "Fecha inicio",
       description: "Etiqueta que indicará el valor solicitado para el componene"
     },
-    /**
-     * Color del texto que tendrá la etiqueta que solicita el valor del componente en modo light.
+    /**
+     * Color del texto que tendrá la etiqueta que solicita el valor del componente en modo light.
      */
     labelColor: {
       type: String,
       default: null,
       description: "Color del texto que tendrá el texto que solicitará el valor del componente en modo light"
     },
-    /**
-     * Color del texto que tendrá la etiqueta que solicita el valor del componente en modo dark.
+    /**
+     * Color del texto que tendrá la etiqueta que solicita el valor del componente en modo dark.
      */
     labelDarkColor: {
       type: String,
       default: null,
       description: "Color del texto que tendrá el texto que solicitará el valor del componente en modo dark"
     },
-    /* weekdays: {
-      type: Array,
-      default: () => ["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"],
+    /* weekdays: {
+      type: Array,
+      default: () => ["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"],
     }, */
-    /**
-     * Establece el formato a la fecha con el que se guardará en el v-model.
+    /**
+     * Establece el formato a la fecha con el que se guardará en el v-model.
      */
     formatDate: {
       type: String,
       default: "dd-MM-yyyy",
       description: "Formato a la fecha con el que se guardará en el v-model"
     },
-    /**
-     * Establece el formato a la fecha que se verá en la interfaz, es decir, aquella que el usuario verá en el componente.
+    /**
+     * Establece el formato a la fecha que se verá en la interfaz, es decir, aquella que el usuario verá en el componente.
      */
     formatDateInput: {
       type: String,
       default: "dd-MM-yyyy",
       description: "Formato a establecer en las fechas"
     },
-    /**
-     * Establece el formato con el que irá la propiedad llamada 'dateToStart' (dateToStart es la que indica a partir de que día el usuario puede seleccionar una fecha).
+    /**
+     * Establece el formato con el que irá la propiedad llamada 'dateToStart' (dateToStart es la que indica a partir de que día el usuario puede seleccionar una fecha).
      */
     formatDateStart: {
       type: String,
       default: "dd-MM-yyyy",
       description: "Formato a establecer en las fechas de la fecha inicial proporcionada"
     },
-    /* messageRule: {
-      type: String,
-      default: "Error, no es una fecha valida",
+    /* messageRule: {
+      type: String,
+      default: "Error, no es una fecha valida",
     }, */
-    /**
-     * Oculta los días posteriores al día actual.
+    /**
+     * Oculta los días posteriores al día actual.
      */
     beforeTomorrow: {
       type: Boolean,
       default: false,
       description: "Oculta los días posteriores al día actual"
     },
-    /**
-     * Rango máximo de días a partir de la primer fecha seleccionable (dateToStart).
+    /**
+     * Rango máximo de días a partir de la primer fecha seleccionable (dateToStart).
      */
     range: {
       type: Number,
       default: null,
       description: "Rango máximo de días a partir de la primer fecha"
     },
-    /**
-     * Arreglo que contiene las reglas a considerar para el valor del componente.
+    /**
+     * Arreglo que contiene las reglas a considerar para el valor del componente.
      */
     rules: {
       type: Array,
@@ -23075,176 +23075,176 @@ const VERSION = "3.4.4";
       },
       description: "Prop para recibir las reglas definidas para validar el correcto llenado de una fecha"
     },
-    /**
-     * Indica si el valor del componente es obligatorio o no.
+    /**
+     * Indica si el valor del componente es obligatorio o no.
      */
     required: {
       type: Boolean,
       default: false,
       description: "Define si el componente es requerido."
     },
-    /**
-     * Indica si el componente está deshabilitado.
+    /**
+     * Indica si el componente está deshabilitado.
      */
     disabled: {
       type: Boolean,
       default: false,
       description: "Si el calendario es deshabilitado"
     },
-    /**
-     * Rango de días después de la fecha seleccionada y antes de la fecha actual.
+    /**
+     * Rango de días después de la fecha seleccionada y antes de la fecha actual.
      */
     daysLater: {
       type: Number,
       default: null,
       description: "Rango de días después de la fecha seleccionada y antes de la fecha actual"
     },
-    /**
-     * Fecha en la cual empiezan las fechas disponibles a seleccionar.
+    /**
+     * Fecha en la cual empiezan las fechas disponibles a seleccionar.
      */
     dateToStart: {
       type: String,
       default: null,
       description: "Fecha en la cual empiezan las fechas seleccionables."
     },
-    /**
-     * Idioma en que se muestran las fechas.
+    /**
+     * Idioma en que se muestran las fechas.
      */
     language: {
       type: String,
       default: "es",
       description: "Idioma de las fechas."
     },
-    /**
-     * Color de fondo del componente en modo light.
+    /**
+     * Color de fondo del componente en modo light.
      */
     color: {
       type: String,
       default: null,
       description: "Color bg del componente en modo light."
     },
-    /**
-     * Color de fondo del componente en modo dark.
+    /**
+     * Color de fondo del componente en modo dark.
      */
     darkColor: {
       type: String,
       default: null,
       description: "Color bg del componente en modo dark."
     },
-    /**
-     * Color de fondo de la sección popup del componente en modo light.
+    /**
+     * Color de fondo de la sección popup del componente en modo light.
      */
     bgColorPopUp: {
       type: String,
       default: null,
       description: "Color de fondo de la sección popup del componente en modo light."
     },
-    /**
-     * Color de fondo de la sección popup del componente en modo dark.
+    /**
+     * Color de fondo de la sección popup del componente en modo dark.
      */
     bgColorPopUpDark: {
       type: String,
       default: null,
       description: "Color de fondo de la sección popup del componente en modo dark."
     },
-    /**
-     * Color del texto mostrado en la sección popup del componente en modo light.
+    /**
+     * Color del texto mostrado en la sección popup del componente en modo light.
      */
     textColorPopUp: {
       type: String,
       default: null,
       description: "Color del texto mostrado en la sección popup del componente en modo light."
     },
-    /**
-     * Color del texto mostrado en la sección popup del componente en modo dark.
+    /**
+     * Color del texto mostrado en la sección popup del componente en modo dark.
      */
     textColorPopUpDark: {
       type: String,
       default: null,
       description: "Color del texto mostrado en la sección popup del componente en modo dark."
     },
-    /**
-     * Color del valor ingresado por el usuario en modo light.
+    /**
+     * Color del valor ingresado por el usuario en modo light.
      */
     textColor: {
       type: String,
       default: null,
       description: "Color del texto que ingresa el usuario al componente en modo light."
     },
-    /**
-     * Color del valor ingresado por el usuario en modo dark.
+    /**
+     * Color del valor ingresado por el usuario en modo dark.
      */
     darkTextColor: {
       type: String,
       default: null,
       description: "Color del texto que ingresa el usuario al componente en modo dark."
     },
-    /**
-     * Color del valor ingresado cuando existe un escenario de error.
+    /**
+     * Color del valor ingresado cuando existe un escenario de error.
      */
     textColorError: {
       type: String,
       default: null,
       description: "Color del texto del componente cuando existe un escenario de error."
     },
-    /**
-     * Bandera para indicar si se colocará un borde al componente en caso de ser true, de lo contrario no se colocará dicho borde.
+    /**
+     * Bandera para indicar si se colocará un borde al componente en caso de ser true, de lo contrario no se colocará dicho borde.
      */
     outline: {
       type: Boolean,
       default: true,
       description: "Bandera para mostrar o no una línea que rodee al componente."
     },
-    /**
-     * Color del borde del componente en caso de que la prop 'outline' sea true en modo light.
+    /**
+     * Color del borde del componente en caso de que la prop 'outline' sea true en modo light.
      */
     outlineColor: {
       type: String,
       default: null,
       description: "Color de la línea que rodeará al componente en modo light en caso de que la bandera 'outline' sea true."
     },
-    /**
-     * Color del borde del componente en caso de que la prop 'outline' sea true en modo dark.
+    /**
+     * Color del borde del componente en caso de que la prop 'outline' sea true en modo dark.
      */
     outlineDarkColor: {
       type: String,
       default: null,
       description: "Color de la línea que rodeará al componente en modo dark en caso de que la bandera 'outline' sea true."
     },
-    /**
-     * Bandera para indicar si se colocará un borde al componente en caso de ser true para cuando exista un escenario de error, de lo contrario no se colocará dicho borde.
+    /**
+     * Bandera para indicar si se colocará un borde al componente en caso de ser true para cuando exista un escenario de error, de lo contrario no se colocará dicho borde.
      */
     outlineError: {
       type: Boolean,
       default: true,
       description: "Bandera para asignar clases relacionadas con el borde del componente en caso de que exista un escenario de error."
     },
-    /**
-     * Color del borde del componente en caso de que exista un escenario de error.
+    /**
+     * Color del borde del componente en caso de que exista un escenario de error.
      */
     outlineErrorColor: {
       type: String,
       default: null,
       description: "Color de la línea que rodeará al componente cuandoexista un escenario de error, en caso de que la bandera 'outline' sea true."
     },
-    /**
-     * Color del texto placeholder del componente en modo light.
+    /**
+     * Color del texto placeholder del componente en modo light.
      */
     placeholderColor: {
       type: String,
       default: null,
       description: "Color del texto placeholder del componente en modo light."
     },
-    /**
-     * Color del texto placeholder del componente en modo dark.
+    /**
+     * Color del texto placeholder del componente en modo dark.
      */
     darkPlaceholderColor: {
       type: String,
       default: null,
       description: "Color del texto placeholder del componente en modo dark."
     },
-    /**
-     * Color del texto placeholder del componente en caso de ocurrir un escenario de error.
+    /**
+     * Color del texto placeholder del componente en caso de ocurrir un escenario de error.
      */
     placeholderErrorColor: {
       type: String,
@@ -23526,45 +23526,45 @@ const VERSION = "3.4.4";
       }
       return false;
     },
-    /**
-     * Se llama cuando el usuario selecciona la opción 'Hoy' como fecha del calendario desde el popup.
-     *
-     * @param {String} date Día seleccionado
-     * @public Éste es un evento público
+    /**
+     * Se llama cuando el usuario selecciona la opción 'Hoy' como fecha del calendario desde el popup.
+     *
+     * @param {String} date Día seleccionado
+     * @public Éste es un evento público
      */
     onTodaySelection(date) {
       let selectedDate = DateTime.fromFormat(date, this.formatDate);
       this.selectedDate = selectedDate.toFormat(this.formatDate);
       this.currentDate = selectedDate;
       this.isValidDate(this.selectedDate);
-      /**
-       * Emite la fecha correspondiente a la opción seleccionada 'Hoy'.
-       * @type {Event}
-       * @event update:modelValue
-       * @param {String} selectedDate Fecha seleccionada.
+      /**
+       * Emite la fecha correspondiente a la opción seleccionada 'Hoy'.
+       * @type {Event}
+       * @event update:modelValue
+       * @param {String} selectedDate Fecha seleccionada.
        */
       this.$emit("update:modelValue", this.selectedDate);
       this.toggleDatePicker();
     },
-    /**
-     * Se llama cuando el usuario selecciona la opción para limpiar la fecha seleccionada.
-     * @public Éste es un evento público
+    /**
+     * Se llama cuando el usuario selecciona la opción para limpiar la fecha seleccionada.
+     * @public Éste es un evento público
      */
     async clearDate() {
-      /**
-       * Se emite para limpiar el contenido del componente.
-       *
-       * @event clean
-       * @type {Event}
+      /**
+       * Se emite para limpiar el contenido del componente.
+       *
+       * @event clean
+       * @type {Event}
        */
       this.$emit("clean");
       this.validate();
     },
-    /**
-     * Se llama cuando el usuario selecciona la fecha del calendario desde el popup.
-     *
-     * @param {String} day Día seleccionado
-     * @public Éste es un evento público
+    /**
+     * Se llama cuando el usuario selecciona la fecha del calendario desde el popup.
+     *
+     * @param {String} day Día seleccionado
+     * @public Éste es un evento público
      */
     async setDay(day) {
       if (day !== null) {
@@ -23573,12 +23573,12 @@ const VERSION = "3.4.4";
         });
         this.selectedDate = selectedDate.toFormat(this.formatDate);
         this.isValidDate(this.selectedDate);
-        /**
-         * Emite el valor actual del componente correspondiente a la fecha seleccionada.
-         *
-         * @type {Event}
-         * @event update:modelValue
-         * @param {String} selectedDate Fecha seleccionada.
+        /**
+         * Emite el valor actual del componente correspondiente a la fecha seleccionada.
+         *
+         * @type {Event}
+         * @event update:modelValue
+         * @param {String} selectedDate Fecha seleccionada.
          */
         await this.$emit("update:modelValue", this.selectedDate);
         this.showDatePicker = false;
@@ -23616,22 +23616,22 @@ const VERSION = "3.4.4";
       });
       this.yearSelector = false;
     },
-    /*  handleDateInput(event) {
-      let inputValue = event.target.value;
-      inputValue = inputValue.replace(/\D/g, "");
-       if (inputValue.length > 8) {
-        inputValue = inputValue.slice(0, 8);
-      }
-       if (inputValue.length >= 4 && inputValue.length < 7) {
-        inputValue = inputValue.replace(/(\d{4})(\d{0,2})/, "$1/$2");
-      } else if (inputValue.length >= 7) {
-        inputValue = inputValue.replace(/(\d{4})(\d{2})(\d{0,2})/, "$1/$2/$3");
-      }
-      if (inputValue === "" || inputValue === "/" || inputValue === "//") {
-        inputValue = "";
-      }
-      event.target.value = inputValue;
-      this.selectedDate = inputValue;
+    /*  handleDateInput(event) {
+      let inputValue = event.target.value;
+      inputValue = inputValue.replace(/\D/g, "");
+        if (inputValue.length > 8) {
+        inputValue = inputValue.slice(0, 8);
+      }
+        if (inputValue.length >= 4 && inputValue.length < 7) {
+        inputValue = inputValue.replace(/(\d{4})(\d{0,2})/, "$1/$2");
+      } else if (inputValue.length >= 7) {
+        inputValue = inputValue.replace(/(\d{4})(\d{2})(\d{0,2})/, "$1/$2/$3");
+      }
+      if (inputValue === "" || inputValue === "/" || inputValue === "//") {
+        inputValue = "";
+      }
+      event.target.value = inputValue;
+      this.selectedDate = inputValue;
     }, */
     handleDateInput(event) {
       let inputValue = event.target.value;
@@ -23644,24 +23644,24 @@ const VERSION = "3.4.4";
       event.target.value = inputValue;
       this.selectedDate = inputValue;
     },
-    /* handleDateInput(event) {
-      let inputValue = event.target.value;
-      let numericValue = inputValue.replace(/\D/g, "");
-       let formattedValue = "";
-      let numericIndex = 0;
-       for (let i = 0; i < this.formatDate.length; i++) {
-        let currentChar = this.formatDate[i];
-         if (/\W/.test(currentChar)) {
-          formattedValue += currentChar;
-        } else {
-          if (numericIndex < numericValue.length) {
-            formattedValue += numericValue[numericIndex];
-            numericIndex++;
-          }
-        }
-      }
-       event.target.value = formattedValue;
-      this.selectedDate = formattedValue;
+    /* handleDateInput(event) {
+      let inputValue = event.target.value;
+      let numericValue = inputValue.replace(/\D/g, "");
+        let formattedValue = "";
+      let numericIndex = 0;
+        for (let i = 0; i < this.formatDate.length; i++) {
+        let currentChar = this.formatDate[i];
+          if (/\W/.test(currentChar)) {
+          formattedValue += currentChar;
+        } else {
+          if (numericIndex < numericValue.length) {
+            formattedValue += numericValue[numericIndex];
+            numericIndex++;
+          }
+        }
+      }
+        event.target.value = formattedValue;
+      this.selectedDate = formattedValue;
     }, */
     capitalizeFirstLetter(str) {
       return str.charAt(0).toUpperCase() + str.slice(1);
@@ -23705,9 +23705,9 @@ const VERSION = "3.4.4";
         }
       }
     },
-    /**
-     * Se llama para validar que la fecha ingresada cumpla con las reglas definidas (si es que existen).
-     * @public Éste es un evento público
+    /**
+     * Se llama para validar que la fecha ingresada cumpla con las reglas definidas (si es que existen).
+     * @public Éste es un evento público
      */
     validate() {
       let rules = this.finalRules;
@@ -23732,9 +23732,9 @@ const VERSION = "3.4.4";
         return true;
       }
     },
-    /**
-     * Se llama para resetear las banderas de error y mensaje de error.
-     * @public Éste es un evento público
+    /**
+     * Se llama para resetear las banderas de error y mensaje de error.
+     * @public Éste es un evento público
      */
     reset() {
       this.messageRule = false;