diff --git a/README.md b/README.md
index 9e32b24d..af82fa55 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,8 @@ $ npm install jQuery-QueryBuilder
jQuery-QueryBuilder is available on [jsDelivr](https://www.jsdelivr.com/package/npm/jQuery-QueryBuilder).
### Dependencies
* [jQuery 3](https://jquery.com)
- * [Bootstrap 3](https://getbootstrap.com/docs/3.3) (CSS only)
+ * [Bootstrap 5](https://getbootstrap.com/docs/5.3/) CSS and bundle.js which includes `Popper` for tooltips and popovers
+ * [Bootstrap Icons](https://icons.getbootstrap.com/)
* [jQuery.extendext](https://github.com/mistic100/jQuery.extendext)
* [doT.js](https://olado.github.io/doT)
* [MomentJS](https://momentjs.com) (optional, for Date/Time validation)
diff --git a/build/jsdoc.md b/build/jsdoc.md
index 029fecb1..e329af92 100644
--- a/build/jsdoc.md
+++ b/build/jsdoc.md
@@ -1,4 +1,4 @@
-# [Main documentation](..)
+# [Main documentation](..)
# Entry point: [$.fn.QueryBuilder](external-_jQuery.fn_.html)
diff --git a/examples/index.html b/examples/index.html
index 0b697b7d..939d7168 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -8,10 +8,11 @@
+
-
+
@@ -28,7 +29,7 @@
-
+
+
+
-
-
+
+
- $('[data-toggle="tooltip"]').tooltip();
+ document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (element) {
+ new bootstrap.Tooltip(element);
+ });
var $b = $('#builder');
@@ -141,7 +146,7 @@ Output
plugins: {
'bt-tooltip-errors': { delay: 100 },
'sortable': null,
- 'filter-description': { mode: 'bootbox' },
+ // 'filter-description': { mode: 'bootbox' },
'bt-selectpicker': null,
// 'chosen-selectpicker': null,
'unique-filter': null,
@@ -185,7 +190,7 @@ Output
en: 'Name',
fr: 'Nom'
},
- icon: 'glyphicon glyphicon-user',
+ icon: 'bi-person-fill',
value_separator: ',',
type: 'string',
optgroup: 'core',
@@ -202,7 +207,7 @@ Output
{
id: 'age',
label: 'Age',
- icon: 'glyphicon glyphicon-calendar',
+ icon: 'bi-calendar3',
type: 'integer',
input: 'text',
value_separator: '|',
@@ -219,7 +224,7 @@ Output
{
id: 'bson',
label: 'BSON',
- icon: 'glyphicon glyphicon-qrcode',
+ icon: 'bi-qr-code',
type: 'string',
input: 'textarea',
operators: ['equal'],
@@ -232,7 +237,7 @@ Output
{
id: 'category',
label: 'Category',
- icon: 'glyphicon glyphicon-th-list',
+ icon: 'bi-list-task',
type: 'integer',
input: 'checkbox',
optgroup: 'core',
@@ -258,7 +263,7 @@ Output
{
id: 'continent',
label: 'Continent',
- icon: 'glyphicon glyphicon-globe',
+ icon: 'bi-globe-americas',
type: 'string',
input: 'select',
optgroup: 'core',
@@ -307,7 +312,7 @@ Output
{
id: 'state',
label: 'State',
- icon: 'glyphicon glyphicon-globe',
+ icon: 'bi-globe-americas',
type: 'string',
input: 'select',
multiple: true,
@@ -343,7 +348,7 @@ Output
{
id: 'in_stock',
label: 'In stock',
- icon: 'glyphicon glyphicon-log-in',
+ icon: 'bi-box-arrow-in-right',
type: 'integer',
input: 'radio',
optgroup: 'plugin',
@@ -359,7 +364,7 @@ Output
{
id: 'price',
label: 'Price',
- icon: 'glyphicon glyphicon-usd',
+ icon: 'bi-currency-dollar',
type: 'double',
size: 5,
validation: {
@@ -376,7 +381,7 @@ Output
{
id: 'rate',
label: 'Rate',
- icon: 'glyphicon glyphicon-flash',
+ icon: 'bi-box-arrow-lightning-charge-fill',
type: 'integer',
validation: {
min: 0,
@@ -400,7 +405,7 @@ Output
{
id: 'id',
label: 'Identifier',
- icon: 'glyphicon glyphicon-sunglasses',
+ icon: 'bi-sunglasses',
type: 'string',
optgroup: 'plugin',
placeholder: '____-____-____',
@@ -419,7 +424,7 @@ Output
{
id: 'coord',
label: 'Coordinates',
- icon: 'glyphicon glyphicon-star-empty',
+ icon: 'bi-star',
type: 'string',
default_value: 'C.5',
description: 'The letter is the cadran identifier:\
@@ -638,7 +643,7 @@ Output
// set filters
$('.set-filters').on('click', function() {
$(this).prop('disabled', true);
- $(this).tooltip('hide');
+ // $(this).tooltip('hide');
// add a new filter after 'state'
$('#builder').queryBuilder('addFilter',
diff --git a/package.json b/package.json
index af9906cf..ae218070 100644
--- a/package.json
+++ b/package.json
@@ -13,17 +13,20 @@
"src/"
],
"dependencies": {
- "bootstrap": "^3.4.1",
+ "bootstrap": "^5.3.0",
+ "@popperjs/core": "^2.11.8",
+ "bootstrap-icons": "^1.10.5",
"jquery": "^3.5.1",
"jquery-extendext": "^1.0.0",
"moment": "^2.29.1",
- "sql-parser-mistic": "^1.2.3"
+ "sql-parser-mistic": "^1.2.3",
+ "common-js": "^0.3.8"
},
"devDependencies": {
"alive-server": "^1.3.0",
"awesome-bootstrap-checkbox": "^0.3.7",
- "bootbox": "^4.4.0",
- "bootstrap-select": "^1.12.4",
+ "bootbox": "^6.0.0",
+ "bootstrap-select": "^1.14.0-beta3",
"bootstrap-slider": "^10.0.0",
"bootswatch-dist": "git+https://github.com/dbtek/bootswatch-dist.git#slate",
"chosenjs": "^1.4.3",
@@ -34,7 +37,7 @@
"interactjs": "^1.3.3",
"nodemon": "^2.0.22",
"sass": "^1.63.6",
- "selectize": "^0.12.4"
+ "@selectize/selectize": "^0.15.2"
},
"keywords": [
"jquery",
diff --git a/src/defaults.js b/src/defaults.js
index b6c5a5eb..293cd536 100644
--- a/src/defaults.js
+++ b/src/defaults.js
@@ -187,10 +187,10 @@ QueryBuilder.DEFAULTS = {
],
icons: {
- add_group: 'glyphicon glyphicon-plus-sign',
- add_rule: 'glyphicon glyphicon-plus',
- remove_group: 'glyphicon glyphicon-remove',
- remove_rule: 'glyphicon glyphicon-remove',
- error: 'glyphicon glyphicon-warning-sign'
+ add_group: 'bi-plus-circle-fill',
+ add_rule: 'bi-plus',
+ remove_group: 'bi-x',
+ remove_rule: 'bi-x',
+ error: 'bi-exclamation-triangle'
}
};
diff --git a/src/plugins/bt-checkbox/plugin.js b/src/plugins/bt-checkbox/plugin.js
index 7a7311c2..7f811bf9 100644
--- a/src/plugins/bt-checkbox/plugin.js
+++ b/src/plugins/bt-checkbox/plugin.js
@@ -31,11 +31,7 @@ QueryBuilder.define('bt-checkbox', function(options) {
var color = filter.colors[key] || filter.colors._def_ || options.color;
var id = name + '_' + (i++);
- h.value+= '\
- \
- \
- \
-
';
+ h.value += `
`;
});
}
});
diff --git a/src/plugins/bt-tooltip-errors/plugin.js b/src/plugins/bt-tooltip-errors/plugin.js
index 68423252..52f4830d 100644
--- a/src/plugins/bt-tooltip-errors/plugin.js
+++ b/src/plugins/bt-tooltip-errors/plugin.js
@@ -7,8 +7,9 @@
* @throws MissingLibraryError
*/
QueryBuilder.define('bt-tooltip-errors', function(options) {
- if (!$.fn.tooltip || !$.fn.tooltip.Constructor || !$.fn.tooltip.Constructor.prototype.fixTitle) {
- Utils.error('MissingLibrary', 'Bootstrap Tooltip is required to use "bt-tooltip-errors" plugin. Get it here: http://getbootstrap.com');
+ if (! typeof bootstrap.Tooltip === "function") {
+ alert(typeof bootstrap.Tooltip );
+ Utils.error('MissingLibrary', 'Bootstrap Popper is required to use "bt-tooltip-errors" plugin. Get it here: http://getbootstrap.com');
}
var self = this;
@@ -16,7 +17,7 @@ QueryBuilder.define('bt-tooltip-errors', function(options) {
// add BT Tooltip data
this.on('getRuleTemplate.filter getGroupTemplate.filter', function(h) {
var $h = $($.parseHTML(h.value));
- $h.find(QueryBuilder.selectors.error_container).attr('data-toggle', 'tooltip');
+ $h.find(QueryBuilder.selectors.error_container).attr('data-bs-toggle', 'tooltip');
h.value = $h.prop('outerHTML');
});
@@ -24,9 +25,7 @@ QueryBuilder.define('bt-tooltip-errors', function(options) {
this.model.on('update', function(e, node, field) {
if (field == 'error' && self.settings.display_errors) {
node.$el.find(QueryBuilder.selectors.error_container).eq(0)
- .tooltip(options)
- .tooltip('hide')
- .tooltip('fixTitle');
+ .attr('data-bs-original-title',options).attr('data-bs-title',options).tooltip();
}
});
}, {
diff --git a/src/plugins/filter-description/plugin.js b/src/plugins/filter-description/plugin.js
index 472dd328..066d1956 100644
--- a/src/plugins/filter-description/plugin.js
+++ b/src/plugins/filter-description/plugin.js
@@ -3,7 +3,7 @@
* @memberof module:plugins
* @description Provides three ways to display a description about a filter: inline, Bootsrap Popover or Bootbox.
* @param {object} [options]
- * @param {string} [options.icon='glyphicon glyphicon-info-sign']
+ * @param {string} [options.icon='bi-info-circle-fill']
* @param {string} [options.mode='popover'] - inline, popover or bootbox
* @throws ConfigError
*/
@@ -43,30 +43,28 @@ QueryBuilder.define('filter-description', function(options) {
if (!description) {
$b.hide();
- if ($b.data('bs.popover')) {
+ if ($b.data('bs-popover')) {
$b.popover('hide');
}
}
else {
if ($b.length === 0) {
- $b = $($.parseHTML(''));
+ $b = $($.parseHTML(''));
$b.prependTo(rule.$el.find(QueryBuilder.selectors.rule_actions));
-
- $b.popover({
+ const popover = new bootstrap.Popover($b.get(0), {
placement: 'left',
container: 'body',
html: true
- });
-
+ })
$b.on('mouseout', function() {
- $b.popover('hide');
+ popover('hide');
});
}
else {
$b.css('display', '');
}
- $b.data('bs.popover').options.content = description;
+ $b.data('bs-popover').options.content = description;
if ($b.attr('aria-describedby')) {
$b.popover('show');
@@ -89,7 +87,7 @@ QueryBuilder.define('filter-description', function(options) {
}
else {
if ($b.length === 0) {
- $b = $($.parseHTML(''));
+ $b = $($.parseHTML(''));
$b.prependTo(rule.$el.find(QueryBuilder.selectors.rule_actions));
$b.on('click', function() {
@@ -105,7 +103,7 @@ QueryBuilder.define('filter-description', function(options) {
});
}
}, {
- icon: 'glyphicon glyphicon-info-sign',
+ icon: 'bi-info-circle-fill',
mode: 'popover'
});
diff --git a/src/plugins/invert/plugin.js b/src/plugins/invert/plugin.js
index c0294e84..34da6ca0 100644
--- a/src/plugins/invert/plugin.js
+++ b/src/plugins/invert/plugin.js
@@ -3,7 +3,7 @@
* @memberof module:plugins
* @description Allows to invert a rule operator, a group condition or the entire builder.
* @param {object} [options]
- * @param {string} [options.icon='glyphicon glyphicon-random']
+ * @param {string} [options.icon='bi-shuffle']
* @param {boolean} [options.recursive=true]
* @param {boolean} [options.invert_rules=true]
* @param {boolean} [options.display_rules_button=false]
@@ -53,7 +53,7 @@ QueryBuilder.define('invert', function(options) {
}
}
}, {
- icon: 'glyphicon glyphicon-random',
+ icon: 'bi-shuffle',
recursive: true,
invert_rules: true,
display_rules_button: false,
diff --git a/src/plugins/not-group/plugin.js b/src/plugins/not-group/plugin.js
index 9c015149..9a2b5262 100644
--- a/src/plugins/not-group/plugin.js
+++ b/src/plugins/not-group/plugin.js
@@ -3,8 +3,8 @@
* @memberof module:plugins
* @description Adds a "Not" checkbox in front of group conditions.
* @param {object} [options]
- * @param {string} [options.icon_checked='glyphicon glyphicon-checked']
- * @param {string} [options.icon_unchecked='glyphicon glyphicon-unchecked']
+ * @param {string} [options.icon_checked='bi-square2']
+ * @param {string} [options.icon_unchecked='bi-square']
*/
QueryBuilder.define('not-group', function(options) {
var self = this;
@@ -112,8 +112,8 @@ QueryBuilder.define('not-group', function(options) {
e.value.not = !!data.not;
});
}, {
- icon_unchecked: 'glyphicon glyphicon-unchecked',
- icon_checked: 'glyphicon glyphicon-check',
+ icon_unchecked: 'bi-square',
+ icon_checked: 'bi-square2',
disable_template: false
});
diff --git a/src/plugins/sortable/plugin.js b/src/plugins/sortable/plugin.js
index 1eeb9dab..84b29e1f 100644
--- a/src/plugins/sortable/plugin.js
+++ b/src/plugins/sortable/plugin.js
@@ -5,7 +5,7 @@
* @param {object} [options]
* @param {boolean} [options.inherit_no_drop=true]
* @param {boolean} [options.inherit_no_sortable=true]
- * @param {string} [options.icon='glyphicon glyphicon-sort']
+ * @param {string} [options.icon='bi-sort-down']
* @throws MissingLibraryError, ConfigError
*/
QueryBuilder.define('sortable', function(options) {
@@ -177,7 +177,7 @@ QueryBuilder.define('sortable', function(options) {
}, {
inherit_no_sortable: true,
inherit_no_drop: true,
- icon: 'glyphicon glyphicon-sort',
+ icon: 'bi-sort-down',
disable_template: false
});
diff --git a/src/scss/default.scss b/src/scss/default.scss
index bc0a4524..4507586a 100644
--- a/src/scss/default.scss
+++ b/src/scss/default.scss
@@ -45,6 +45,15 @@ $ticks-position: 5px, 10px !default;
vertical-align: middle;
}
+// Bootstrap >3 lacks button-xs
+.btn-xs,
+.btn-group-xs > .btn {
+ padding: 1px 5px;
+ font-size: 12px;
+ line-height: 1.5;
+ border-radius: 3px;
+}
+
.query-builder {
// GROUPS
diff --git a/src/template.js b/src/template.js
index 036d4e94..e463b933 100644
--- a/src/template.js
+++ b/src/template.js
@@ -2,7 +2,7 @@ QueryBuilder.templates.group = ({ group_id, level, conditions, icons, settings,
return `