json-rules-filter 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-rules-filter",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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

@@ -177,28 +177,12 @@ onApply: function (rules, filteredData) {
 
 ## 🛠️ Métodos públicos
 
-```javascript
-$("#miFiltro").jsonRulesFilter("nombreMetodo", parametros);
-```
-
 ### updateData
 
 ```javascript
 $("#miFiltro").jsonRulesFilter("updateData", nuevosDatos);
 ```
 
-### getAplicatedRules
-
-```javascript
-const reglas = $("#miFiltro").jsonRulesFilter("getAplicatedRules");
-```
-
-### reset
-
-```javascript
-$("#miFiltro").jsonRulesFilter("reset");
-```
-
 ---
 
 ## 🧪 Ejemplo completo
@@ -210,17 +194,56 @@ const empleados = [
     { name: "Pedro", total: 220, cargo: "Developer" }
 ];
 
-$("#filtros").jsonRulesFilter(empleados, {
+$("#container-rules").jsonRulesFilter(empleados, {
     filters: [
         { name: "Nombre", type: "text", data: "name" },
         { name: "Total", type: "number", data: "total" },
-        { name: "Cargo", type: "select", data: "cargo" }
+        { name: "Cargo", type: "select", data: "cargo",function(data){ 
+            return`<span class="badge text-bg-success">${data}</span>`;
+        }}
     ],
-    onApply: function (rules, results) {
-        console.log(results);
+    onApply: function (rules, results) { 
+        $("#container-rules-collapse").empty();
+
+        //generamos indicador budge para contenedor de filtros
+        $.each(reglas, function (index, element) {
+
+            let text = `${element.dataName} ${element.optionFilterText.toLowerCase()} ${element.searchValue}`;
+
+            if (element.typeFilter === 'select') {
+                text = `${element.dataName} en (${element.optionFilter.join(", ").toLowerCase()})`
+            }
+
+            const budge =`<span class="badge rounded-pill text-bg-primary ml-1">${text}</span>`;
+
+            $("#container-rules-collapse").append(budge);
+        });
+
+        $("#num-filters").html(reglas.length);
     }
 });
 ```
+```html
+<div class="max-w-8xl mx-auto sm:px-6 px-8">
+    <div class="mt-3 bg-white overflow-hidden shadow-sm border border-secondary rounded-xl px-3 py-2">
+        <div id="container-rules" class="collapse py-2 px-2">
+
+        </div>
+        <div class="d-flex justify-content-between py-2 pe-2">
+            <div class="pl-2 d-flex justify-content-start">
+                <span class="fw-semibold">Filtros activos:</span>
+                <div id="container-rules-collapse"></div>
+            </div>
+            <a class="link-dark position-relative" data-bs-toggle="collapse" href="#container-rules"
+                role="button">
+                <i class="fa-solid fa-filter"></i>
+                <span id="num-filters"
+                    class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">0</span>
+            </a>
+        </div>
+    </div>
+</div>
+```
 
 ---