json-rules-filter 1.0.8 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-rules-filter",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "para crear reglas avanzadas de filtrado sobre datasets JSON de forma dinámica y visual.",
   "main": "src/jquery.jsonRulesFilter.js",
   "scripts": {

package/readme.md

@@ -58,7 +58,7 @@ Instalar via **cdn**:
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 
 <!-- jsonRulesFilter -->
-<script src="https://unpkg.com/json-rules-filter@1.0.5/src/jquery.jsonRulesFilter.js" class="script_" type="text/javascript"></script>
+<script src="https://unpkg.com/json-rules-filter@1.0.9/src/jquery.jsonRulesFilter.js" class="script_" type="text/javascript"></script>
 ```
 
 ---
@@ -96,10 +96,20 @@ $("#miFiltro").jsonRulesFilter(data,
 
 ## 🧠 Configuración
 
+### bsVersion
+
+Define la compatibilidad del plugin con la version de bootstrap , actualmente solo acepta dos valores , **4** para **bootstrap4** y **5** para **bootstrap5**
+```javascript
+bsVersion:5 //Bootstrap 5
+```
+---
+
 ### filters
 
 Define las columnas disponibles para filtrar.
-
+- name: (título del filtro)
+- type: tipo de filtrado. Las opciones disponibles son **number**,**string** y **select**
+- data: clave de referencia en el dataset de JSON, se usa tanto para filtrar como para generar las opciones únicas de los tipo **select**
 ```javascript
 filters: [
     {
@@ -121,15 +131,23 @@ Personaliza los operadores de filtrado.
 
 ```javascript
 language: {
-    string: {
-        sContain: "Contiene",
-        sEquals: "Igual a"
-    },
-    number: {
-        nEquals: "Igual a",
-        nGreatherThan: "Mayor que"
+        string: {
+            sContain: "Contiene",
+            sNotContain: "No contiene",
+            sEquals: "Igual a",
+            sDifference: "Diferente de",
+            sStartWith: "Empieza con",
+            sEndWith: "Termina con"
+        },
+        number: {
+            nEquals: "Igual a",
+            nDifference: "Diferente de",
+            nGreatherThan: "Mayor que",
+            nGreatherThanOrEquals: "Mayor o igual que",
+            nLowerThan: "Menor que",
+            nLowerThanOrEquals: "Menor o igual que"
+        }
     }
-}
 ```
 
 ---
@@ -162,7 +180,7 @@ buttons: {
 Título del componente.
 
 ```javascript
-title: "Reglas de filtrado"
+title: {text:"Reglas de filtrado",className:"fs-4"}
 ```
 
 ---
@@ -212,7 +230,7 @@ onApply: function (rules, filteredData) {
 ## 🛠️ Métodos públicos
 
 ### updateData
-
+El datasets de JSON se mantiene en memoria tras la inicialización , si tu datasets cambió , debes pasarle en todo momento los datos actualizados.
 ```javascript
 $("#miFiltro").jsonRulesFilter("updateData", nuevosDatos);
 ```
@@ -229,6 +247,7 @@ const empleados = [
 ];
 
 $("#container-rules").jsonRulesFilter(empleados, {
+    bsVersion:5,
     filters: [
         { name: "Nombre", type: "text", data: "name" },
         { name: "Total", type: "number", data: "total" },
@@ -238,10 +257,10 @@ $("#container-rules").jsonRulesFilter(empleados, {
     ],
     onApply: function (rules, results) { 
         $("#container-rules-collapse").empty();
-
+        //aquí podemos actualizar la tabla de datos con los datos ya filtrados
         //generamos indicador budge para contenedor de filtros
         $.each(reglas, function (index, element) {
-
+        
             let text = `${element.dataName} ${element.optionFilterText.join("").toLowerCase()} ${element.searchValue}`;
 
             if (element.typeFilter === 'select') {
@@ -282,7 +301,7 @@ $("#container-rules").jsonRulesFilter(empleados, {
 ---
 
 ## 📌 Notas
-
+- Compatibilidad con bootstrap 4 y 5
 - Soporta propiedades anidadas (ej: user.name)
 - Usa lógica AND entre reglas
 - Basado en Select2

package/src/jquery.jsonRulesFilter.js

@@ -20,6 +20,7 @@
 
         // --- DEFAULT CONFIGURATION ---
         const settings = $.extend(true, {
+            bsVersion:5,
             filters: [
                 { name: "Example", type: "number", data: "example", render: function(data){return data.text  /*Callback to render html in options type select*/}}
             ],
@@ -33,10 +34,10 @@
                     nGreatherThanOrEquals: "Mayor o igual que", nLowerThan: "Menor que", nLowerThanOrEquals: "Menor o igual que"
                 }
             },
-            title: "Reglas de filtrado",
+            title: {text:"Reglas de filtrado",className:"fs-6 fw-semibold"},
             buttons: {
                 reset: { text: "Resetear", className: "fw-semibold link-danger link-offset-2 link-underline link-underline-opacity-0" },
-                dropdown: { text: "Añadir regla", className: "btn btn-secondary" },
+                dropdown: { text: "Añadir regla", className: "btn btn-secondary"},
                 apply: { text: "Aplicar regla", className: "btn btn-primary" },
             },
             onApply: function (filtros, datosFiltrados) { }
@@ -51,6 +52,32 @@
                 settings: settings,
                 $contenedor: $contenedor,
 
+                // ---- Compatibility helper bs5/bs4 ------
+                bs: function(classes) {
+                    if (this.settings.bootstrapVersion === 5) return classes;
+
+                    const map = {
+                        'fs-6':'',
+                        'fw-semibold': 'font-weight-bold',
+                        'fw-bold': 'font-weight-bold',
+                        'link-danger': 'text-danger',
+                        'ms-': 'ml-', // Margin start -> Margin left
+                        'me-': 'mr-', // Margin end -> Margin right
+                        'ps-': 'pl-', // Padding start -> Padding left
+                        'pe-': 'pr-', // Padding end -> Padding right
+                        'g-': 'row-grid-',
+                        'link-offset-2': '',
+                        'link-underline': '',
+                        'link-underline-opacity-0': ''
+                    };
+
+                    let result = classes;
+                    Object.keys(map).forEach(key => {
+                        result = result.replace(new RegExp(key, 'g'), map[key]);
+                    });
+                    return result;
+                },
+
                 // Updates dataset from external source and refreshes the UI
                 updateData: function (newData) {
                     this.data = newData;
@@ -88,28 +115,36 @@
 
                 // Render main plugin skeleton
                 render: function () {
-                    let columnasHtml = '<div class="row g-2">';
+                    const self = this;
+                    // Atributo de toggle dinámico
+                    const toggleAttr = this.settings.bootstrapVersion === 4 ? 'data-toggle="dropdown"' : 'data-bs-toggle="dropdown"';
+
+                    // Ajuste de Gutters para BS4 (usamos form-row en lugar de row g-2 si es BS4)
+                    const rowClass = this.settings.bootstrapVersion === 4 ? 'form-row' : 'row g-2';
+                    const colClass = this.settings.bootstrapVersion === 4 ? 'col-6' : 'col-6';
+
+                    let columnasHtml = `<div class="${rowClass}">`;
                     this.settings.filters.forEach((col, index) => {
                         let icon = col.type === "number" ? "fa-solid fa-hashtag" : (col.type === "string" ? "fa-solid fa-language" : "fa-solid fa-circle-chevron-down");
                         columnasHtml += `
-                            <li class="col-6 list-unstyled">
+                            <li class="${colClass} list-unstyled">
                                 <a class="dropdown-item dropdown-rules-item" href="#" data-column-type="${col.type}" data-column-data="${col.data}" data-column-name="${col.name}">
                                     <i class="${icon}"></i> ${col.name}
                                 </a>
                             </li>`;
-                        if (index % 2 !== 0 && index !== 0) columnasHtml += '</div><div class="row g-2">';
+                        if (index % 2 !== 0 && index !== 0) columnasHtml += `</div><div class="${rowClass}">`;
                     });
                     columnasHtml += "</div>";
 
                     let template = `
                             <div class="d-flex justify-content-between">
-                                <b><h4>${this.settings.title}</h4></b>
-                                <p><a class="${this.settings.buttons.reset.className} remove-rules-containers" href="#">${this.settings.buttons.reset.text}</a></p>
+                                <p class="${this.bs(this.settings.title.className)}">${this.settings.title.text}</p>
+                                <p><a class="${this.bs(this.settings.buttons.reset.className)} remove-rules-containers" href="#">${this.settings.buttons.reset.text}</a></p>
                             </div>
                             <div class="py-2" id="container-rules-filters"></div>
                             <div class="mt-2">
                                 <div class="d-flex justify-content-start dropdown">
-                                    <button data-bs-popper-config='{"strategy":"fixed"}' class="${this.settings.buttons.dropdown.className} dropdown-toggle" type="button" data-bs-toggle="dropdown">
+                                    <button class="${this.bs(this.settings.buttons.dropdown.className)} dropdown-toggle" type="button" ${toggleAttr}>
                                         ${this.settings.buttons.dropdown.text}
                                     </button>
                                     <div class="dropdown-menu p-2 dropdown-rules-columns" style="min-width: 300px;">
@@ -117,7 +152,7 @@
                                     </div>
                                 </div>
                                 <div class="mt-2 d-flex justify-content-start">
-                                    <button type="button" id="apply-rules-btn" class="${this.settings.buttons.apply.className}">${this.settings.buttons.apply.text}</button>
+                                    <button type="button" id="apply-rules-btn" class="${this.bs(this.settings.buttons.apply.className)}">${this.settings.buttons.apply.text}</button>
                                 </div>
                             </div>`;
                     this.$contenedor.append(template);
@@ -156,40 +191,41 @@
                 addRuleRow: function (type, dataField, name) {
                     const self = this;
                     const $container = this.$contenedor.find("#container-rules-filters");
-                    let id_select = 0;
 
-                    // Generate unique ID for the new row based on the last element
+                     // Generate unique ID for the new row based on the last element
+                    let id_select = 0;
                     const last_container = $contenedor.find("select[name=select-rule-option]").last();
-                    if (last_container.length > 0) {
-                        id_select = last_container.data("id") + 1;
-                    }
+                    if (last_container.length > 0) { id_select = last_container.data("id") + 1; }
+
+                    // Usar 'form-group' y 'font-weight-bold' si es BS4
+                    const labelClass = this.settings.bootstrapVersion === 4 ? 'font-weight-bold' : 'form-label fw-bold';
+                    const rowClass = this.settings.bootstrapVersion === 4 ? 'form-row' : 'row';
 
                     // Define search input template (hidden for 'select' type)
                     const searchInput = `
                     <div class="col-7">
-                        <label class="form-label font-bold"><span class="text-danger">*</span>${type}</label>
+                        <label class="${labelClass}"><span class="text-danger">*</span>${type}</label>
                         <input type="text" class="form-control" name="input-rule-search" id="input-rule-search-${id_select}">
                     </div>`;
 
                     const row = `
                         <div id="select-rule-container-${id_select}" class="d-flex justify-content-between mt-2 pt-2 mb-4 ${$contenedor.find("[name=select-rule-option]").length > 0 ? ' border-top my-3' : ""}">
-                            <div class="row flex-grow-1">
+                            <div class="${rowClass} flex-grow-1">
                                 <div class="col-4">
-                                    <label class="form-label font-bold">${name}</label>
-                                    <select class="form-select" ${type === 'select' ? 'multiple' : ''} data-type="${type}" data-name="${name}" data-field="${dataField}" id="select-rule-option-${id_select}" data-id="${id_select}" name="select-rule-option"></select>
+                                    <label class="${labelClass}">${name}</label>
+                                    <select class="form-select form-control" ${type === 'select' ? 'multiple' : ''} data-type="${type}" data-name="${name}" data-field="${dataField}" id="select-rule-option-${id_select}" data-id="${id_select}" name="select-rule-option"></select>
                                 </div>
                                 ${type === 'select' ? '' : searchInput}
                             </div>
-                            <div class="">
-                                <a href="#" class="link-danger btn-remove-rule" data-target="select-rule-container-${id_select}">
+                            <div class="ml-2">
+                                <a href="#" class="link-danger text-danger btn-remove-rule" data-target="select-rule-container-${id_select}">
                                     <i class="fa-solid fa-trash-can"></i>
                                 </a>
                             </div>
                         </div>`;
 
                     $container.append(row);
-
-                    // Fetch custom render function from settings
+                      // Fetch custom render function from settings
                     const render = self.settings.filters.find((e) => e.data === dataField).render;
                     this.initSelect2(id_select, type, dataField, render);
                 },