json-rules-filter 1.0.15 → 1.0.17

package/package.json

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

package/src/jquery.jsonRulesFilter.js

@@ -20,9 +20,9 @@
 
         // --- DEFAULT CONFIGURATION ---
         const settings = $.extend(true, {
-            bsVersion:5,
+            bsVersion: 5,
             filters: [
-                { name: "Example", type: "number", data: "example", render: function(data){return data.text  /*Callback to render html in options type select*/}}
+                { name: "Example", type: "number", data: "example", render: function (data) { return data.text  /*Callback to render html in options type select*/ } }
             ],
             language: {
                 string: {
@@ -34,10 +34,10 @@
                     nGreatherThanOrEquals: "Mayor o igual que", nLowerThan: "Menor que", nLowerThanOrEquals: "Menor o igual que"
                 }
             },
-            title: {text:"Reglas de filtrado",className:"fs-6 fw-semibold"},
+            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) { }
@@ -53,11 +53,11 @@
                 $contenedor: $contenedor,
 
                 // ---- Compatibility helper bs5/bs4 ------
-                bs: function(classes) {
+                bs: function (classes) {
                     if (this.settings.bsVersion === 5) return classes;
 
                     const map = {
-                        'fs-6':'',
+                        'fs-6': '',
                         'fw-semibold': 'font-weight-bold',
                         'fw-bold': 'font-weight-bold',
                         'link-danger': 'text-danger',
@@ -100,7 +100,7 @@
                             dataField: $el.data("field"), // JSON key path
                             dataName: $el.data("name"), // Display name
                             // Text of the selected option for labels/summary
-                            optionFilterText: $el.find("option:selected").map(function(){ return $(this).text(); }).get()
+                            optionFilterText: $el.find("option:selected").map(function () { return $(this).text(); }).get()
                         });
                     })
                     return rulesAplicated;
@@ -144,7 +144,7 @@
                             <div class="py-2" id="container-rules-filters"></div>
                             <div class="mt-2">
                                 <div class="d-flex justify-content-start dropdown">
-                                    <button ${this.settings.bsVersion === 5?`data-bs-popper-config='{"strategy":"fixed"}'` :''} class="${this.bs(this.settings.buttons.dropdown.className)} dropdown-toggle" type="button" ${toggleAttr}>
+                                    <button ${this.settings.bsVersion === 5 ? `data-bs-popper-config='{"strategy":"fixed"}'` : ''} 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;">
@@ -156,26 +156,42 @@
                                 </div>
                             </div>`;
                     this.$contenedor.append(template);
+                },
+
+                // Event delegation and listeners
+                bindEvents: function () {
+                    const self = this;
+
+                    //Dropdown events
                     const $dropdown = this.$contenedor.find('.dropdown-toggle');
 
                     if (this.settings.bsVersion === 4) {
                         //BS4
                         $dropdown.dropdown({
+                            display: 'static',
                             popperConfig: {
-                                positionFixed: true
+                                positionFixed: true,
+                                modifiers: {
+                                    preventOverflow: {
+                                        boundariesElement: 'window'
+                                    }
+                                }
                             }
                         });
-                    }
-                },
 
-                // Event delegation and listeners
-                bindEvents: function () {
-                    const self = this;
+                        //Dropdown
+                        $dropdown.on('click', function (e) {
+                            e.stopPropagation();
+                            const $conatiner_dropdown = $(this).parent().find('.dropdown-rules-columns');
+                            $(this).dropdown($conatiner_dropdown.hasClass('show') ? "hide" : "show");
+                        });
+                    }
 
                     // Add new rule row
                     this.$contenedor.find(".dropdown-rules-item").on("click", function (e) {
                         e.preventDefault();
                         self.addRuleRow($(this).data("column-type"), $(this).data("column-data"), $(this).data("column-name"));
+                        $dropdown.dropdown("hide");
                     });
 
                     // Clear all rules
@@ -202,7 +218,7 @@
                     const self = this;
                     const $container = this.$contenedor.find("#container-rules-filters");
 
-                     // 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; }
@@ -235,7 +251,7 @@
                         </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);
                 },
@@ -247,6 +263,7 @@
 
                     $select.select2({
                         width: '100%',
+                        dropdownParent: this.$contenedor, // Parent render
                         escapeMarkup: function (markup) { return markup; }, // Allow HTML rendering in badges
                         templateSelection: render,
                         templateResult: render,
@@ -302,7 +319,7 @@
                             if (valorOriginal === undefined || valorOriginal === null) return false;
 
                             // Special logic for Multiple Select filters
-                            if(regla.typeFilter === 'select'){
+                            if (regla.typeFilter === 'select') {
                                 const selectedValues = regla.optionFilter; // Array from Select2 multiple
                                 return selectedValues.includes(valorOriginal.toString());
                             }