Skip to content

Bootstrap5 support #973

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
stephencmorton wants to merge 6 commits into from
Closed

Bootstrap5 support #973

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e882c76
Bootstrap 5 - package.json
stephencmorton May 21, 2023
11246d0
Bootstrap 5 - Classes updated for Bootstrap 3-5 differences
stephencmorton May 21, 2023
60e5e81
Bootstrap 5 - Popover library conversion
stephencmorton May 21, 2023
624cca7
Bootstrap 5 - Bootstrap Icons replace Glyphicons
stephencmorton May 21, 2023
a124bdd
Bootstrap 5 - Comment out bootbox until npm issues can be resolved
SRBuilds Sep 3, 2023
96755cc
Merge remote-tracking branch 'mistic100/dev' into dev-bootstrap-5
SRBuilds Sep 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion build/jsdoc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# <i class="glyphicon glyphicon-home"></i> [Main documentation](..)
# <i class="bi-house-fill"></i> [Main documentation](..)

# Entry point: [$.fn.QueryBuilder](external-_jQuery.fn_.html)

Expand Down
45 changes: 25 additions & 20 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@

<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css" id="bt-theme">
<link rel="stylesheet" href="/node_modules/bootstrap-select/dist/css/bootstrap-select.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link rel="stylesheet" href="/node_modules/chosenjs/chosen.css">
<link rel="stylesheet" href="/node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css">
<link rel="stylesheet" href="/node_modules/bootstrap-slider/dist/css/bootstrap-slider.css">
<link rel="stylesheet" href="/node_modules/selectize/dist/css/selectize.bootstrap3.css">
<link rel="stylesheet" href="/node_modules/@selectize/selectize/dist/css/selectize.bootstrap5.css">

<link rel="stylesheet" href="/dist/css/query-builder.default.css" id="qb-theme">
<link rel="stylesheet" href="http://mistic100.github.io/jQuery-QueryBuilder/assets/flags/flags.css">
Expand All @@ -28,7 +29,7 @@
<div class="container">
<div class="col-md-12 col-lg-10 col-lg-offset-1">
<div class="page-header">
<a class="pull-right" href="https://github.com/mistic100/jQuery-QueryBuilder">
<a class="float-end" href="https://github.com/mistic100/jQuery-QueryBuilder">
<img src="https://github.githubassets.com/images/modules/logos_page/Octocat.png" height=48px>
</a>
<h1>jQuery QueryBuilder
Expand Down Expand Up @@ -80,7 +81,7 @@ <h1>jQuery QueryBuilder

<div class="btn-group">
<button class="btn btn-danger reset">Reset</button>
<button class="btn btn-warning set-filters" data-toggle="tooltip" data-container="body" data-placement="bottom"
<button class="btn btn-warning set-filters" data-bs-toggle="tooltip" data-container="body" data-placement="bottom"
title="Adds a filter 'New filter' and removes 'Coordinates', 'State', 'BSON'">Set filters
</button>
</div>
Expand All @@ -106,22 +107,26 @@ <h3>Output</h3>
</div>
</div>
</div>

<script>var exports = {};</script>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/@popperjs/core/dist/umd/popper.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="/node_modules/bootstrap-select/dist/js/bootstrap-select.js"></script>
<script >$.fn.selectpicker.Constructor.BootstrapVersion = '4';</script>
<script src="/node_modules/chosenjs/chosen.jquery.js"></script>
<script src="/node_modules/bootbox/bootbox.js"></script>
<script src="/node_modules/bootstrap-slider/dist/bootstrap-slider.js"></script>
<script src="/node_modules/selectize/dist/js/standalone/selectize.js"></script>
<script src="/node_modules/@selectize/selectize/dist/js/selectize.js"></script>
<script src="/node_modules/jquery-extendext/jquery-extendext.js"></script>
<script src="/node_modules/sql-parser-mistic/browser/sql-parser.js"></script>
<script src="/node_modules/interactjs/dist/interact.js"></script>
<!-- <script src="/node_modules/bootbox/dist/bootbox.all.js"></script> -->

<script src="/dist/js/query-builder.js"></script>

<script>
$('[data-toggle="tooltip"]').tooltip();
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (element) {
new bootstrap.Tooltip(element);
});

var $b = $('#builder');

Expand All @@ -141,7 +146,7 @@ <h3>Output</h3>
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,
Expand Down Expand Up @@ -185,7 +190,7 @@ <h3>Output</h3>
en: 'Name',
fr: 'Nom'
},
icon: 'glyphicon glyphicon-user',
icon: 'bi-person-fill',
value_separator: ',',
type: 'string',
optgroup: 'core',
Expand All @@ -202,7 +207,7 @@ <h3>Output</h3>
{
id: 'age',
label: 'Age',
icon: 'glyphicon glyphicon-calendar',
icon: 'bi-calendar3',
type: 'integer',
input: 'text',
value_separator: '|',
Expand All @@ -219,7 +224,7 @@ <h3>Output</h3>
{
id: 'bson',
label: 'BSON',
icon: 'glyphicon glyphicon-qrcode',
icon: 'bi-qr-code',
type: 'string',
input: 'textarea',
operators: ['equal'],
Expand All @@ -232,7 +237,7 @@ <h3>Output</h3>
{
id: 'category',
label: 'Category',
icon: 'glyphicon glyphicon-th-list',
icon: 'bi-list-task',
type: 'integer',
input: 'checkbox',
optgroup: 'core',
Expand All @@ -258,7 +263,7 @@ <h3>Output</h3>
{
id: 'continent',
label: 'Continent',
icon: 'glyphicon glyphicon-globe',
icon: 'bi-globe-americas',
type: 'string',
input: 'select',
optgroup: 'core',
Expand Down Expand Up @@ -307,7 +312,7 @@ <h3>Output</h3>
{
id: 'state',
label: 'State',
icon: 'glyphicon glyphicon-globe',
icon: 'bi-globe-americas',
type: 'string',
input: 'select',
multiple: true,
Expand Down Expand Up @@ -343,7 +348,7 @@ <h3>Output</h3>
{
id: 'in_stock',
label: 'In stock',
icon: 'glyphicon glyphicon-log-in',
icon: 'bi-box-arrow-in-right',
type: 'integer',
input: 'radio',
optgroup: 'plugin',
Expand All @@ -359,7 +364,7 @@ <h3>Output</h3>
{
id: 'price',
label: 'Price',
icon: 'glyphicon glyphicon-usd',
icon: 'bi-currency-dollar',
type: 'double',
size: 5,
validation: {
Expand All @@ -376,7 +381,7 @@ <h3>Output</h3>
{
id: 'rate',
label: 'Rate',
icon: 'glyphicon glyphicon-flash',
icon: 'bi-box-arrow-lightning-charge-fill',
type: 'integer',
validation: {
min: 0,
Expand All @@ -400,7 +405,7 @@ <h3>Output</h3>
{
id: 'id',
label: 'Identifier',
icon: 'glyphicon glyphicon-sunglasses',
icon: 'bi-sunglasses',
type: 'string',
optgroup: 'plugin',
placeholder: '____-____-____',
Expand All @@ -419,7 +424,7 @@ <h3>Output</h3>
{
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:\
Expand Down Expand Up @@ -638,7 +643,7 @@ <h3>Output</h3>
// set filters
$('.set-filters').on('click', function() {
$(this).prop('disabled', true);
$(this).tooltip('hide');
// $(this).tooltip('hide');
Copy link
Collaborator

@liamkeily liamkeily Sep 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this still needed?

the following may work if you were looking to convert bootstrap.Tooltip.getInstance($(this)).hide();


// add a new filter after 'state'
$('#builder').queryBuilder('addFilter',
Expand Down
13 changes: 8 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
10 changes: 5 additions & 5 deletions src/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
};
6 changes: 1 addition & 5 deletions src/plugins/bt-checkbox/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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+= '\
<div' + style + ' class="' + filter.input + ' ' + filter.input + '-' + color + '"> \
<input type="' + filter.input + '" name="' + name + '" id="' + id + '" value="' + key + '"> \
<label for="' + id + '">' + val + '</label> \
</div>';
h.value += `<div ${style} class="${filter.input} ${filter.input}-${color}"> <input type="${filter.input}" name="${name}" id="${id}" value="${key}"> <label "btn btn-primary" for="${id}">${val}</label></div>`;
});
}
});
Expand Down
11 changes: 5 additions & 6 deletions src/plugins/bt-tooltip-errors/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,25 @@
* @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;

// 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');
});

// init/refresh tooltip when title changes
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();
}
});
}, {
Expand Down
20 changes: 9 additions & 11 deletions src/plugins/filter-description/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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('<button type="button" class="btn btn-xs btn-info filter-description" data-toggle="popover"><i class="' + options.icon + '"></i></button>'));
$b = $($.parseHTML('<button type="button" class="btn btn-xs btn-info filter-description" data-bs-toggle="popover"><i class="' + options.icon + '"></i></button>'));
$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');
Expand All @@ -89,7 +87,7 @@ QueryBuilder.define('filter-description', function(options) {
}
else {
if ($b.length === 0) {
$b = $($.parseHTML('<button type="button" class="btn btn-xs btn-info filter-description" data-toggle="bootbox"><i class="' + options.icon + '"></i></button>'));
$b = $($.parseHTML('<button type="button" class="btn btn-xs btn-info filter-description" data-bs-toggle="bootbox"><i class="' + options.icon + '"></i></button>'));
$b.prependTo(rule.$el.find(QueryBuilder.selectors.rule_actions));

$b.on('click', function() {
Expand All @@ -105,7 +103,7 @@ QueryBuilder.define('filter-description', function(options) {
});
}
}, {
icon: 'glyphicon glyphicon-info-sign',
icon: 'bi-info-circle-fill',
mode: 'popover'
});

Expand Down
4 changes: 2 additions & 2 deletions src/plugins/invert/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -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,
Expand Down
8 changes: 4 additions & 4 deletions src/plugins/not-group/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
});

Expand Down
Loading