Skip to content

Commit af9e133

Browse files
liamkeilystephencmortonSRBuildsDavid Ethell
authored
Bootstrap 5 Further Progress (mistic100#992)
* Bootstrap 5 - package.json * Bootstrap 5 - Classes updated for Bootstrap 3-5 differences * Bootstrap 5 - Popover library conversion * Bootstrap 5 - Bootstrap Icons replace Glyphicons * Bootstrap 5 - Comment out bootbox until npm issues can be resolved Something to do with the way JS packages are installed. I'm not sure if it's the right solution or not, but the error goes away if I do this. - } else if (typeof exports === 'object') { + } else if (typeof module === 'object') { // Node, CommonJS-like module.exports = factory(require('jquery')); * fix(plugins): bt-checkbox BS5 markup * fix(example): remove bt-selectpicker plugin use * Fix bt-checkbox * Fix checked squares * Latest icons version * better icons * Use local package instead of cdn for icons * Fix offset for bootstrap 5 * dark mode * tooltip * default theme * float-end logo * new lock file * Use btn-sm instead of css hack * Re-enable bootbox * Remove bi preifx * use chosen-selectpicker instead of bt-selectpicker * disable chosen picker for now * Get rid of weird focus outline on checkboxes * Update index.html * Remove unnecessary bootswatch * Remove inconsistent padding * Remove form-inline * yarn * Replace `hide` with `d-none` * `form-control` is now `form-select` * If bt-selectpicker did work, this would need to be form-select * Drop Support for Bootstrap Select as it doesn't retain selections properly when enabled * Unused --------- Co-authored-by: Stephen Morton <[email protected]> Co-authored-by: smorton <[email protected]> Co-authored-by: David Ethell <[email protected]>
1 parent b377be6 commit af9e133

File tree

20 files changed

+708
-800
lines changed

20 files changed

+708
-800
lines changed

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ $ npm install jQuery-QueryBuilder
3434
jQuery-QueryBuilder is available on [jsDelivr](https://www.jsdelivr.com/package/npm/jQuery-QueryBuilder).
3535
### Dependencies
3636
* [jQuery 3](https://jquery.com)
37-
* [Bootstrap 3](https://getbootstrap.com/docs/3.3) (CSS only)
37+
* [Bootstrap 5](https://getbootstrap.com/docs/5.3/) CSS and bundle.js which includes `Popper` for tooltips and popovers
38+
* [Bootstrap Icons](https://icons.getbootstrap.com/)
3839
* [jQuery.extendext](https://github.com/mistic100/jQuery.extendext)
3940
* [doT.js](https://olado.github.io/doT)
4041
* [MomentJS](https://momentjs.com) (optional, for Date/Time validation)

‎build/jsdoc.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# <i class="glyphicon glyphicon-home"></i> [Main documentation](..)
1+
# <i class="bi-house-fill"></i> [Main documentation](..)
22

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

‎examples/index.html

+57-65
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,26 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html data-bs-theme="light">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66

77
<title>jQuery QueryBuilder Example</title>
88

99
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css" id="bt-theme">
10-
<link rel="stylesheet" href="/node_modules/bootstrap-select/dist/css/bootstrap-select.css">
1110
<link rel="stylesheet" href="/node_modules/chosenjs/chosen.css">
1211
<link rel="stylesheet" href="/node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css">
1312
<link rel="stylesheet" href="/node_modules/bootstrap-slider/dist/css/bootstrap-slider.css">
14-
<link rel="stylesheet" href="/node_modules/selectize/dist/css/selectize.bootstrap3.css">
15-
13+
<link rel="stylesheet" href="/node_modules/@selectize/selectize/dist/css/selectize.bootstrap5.css">
14+
<link rel="stylesheet" href="/node_modules/bootstrap-icons/font/bootstrap-icons.css">
1615
<link rel="stylesheet" href="/dist/css/query-builder.default.css" id="qb-theme">
17-
<link rel="stylesheet" href="http://mistic100.github.io/jQuery-QueryBuilder/assets/flags/flags.css">
18-
19-
<style>
20-
.flag {
21-
display: inline-block;
22-
}
23-
</style>
2416
</head>
2517

2618
<body>
2719

2820
<div class="container">
29-
<div class="col-md-12 col-lg-10 col-lg-offset-1">
21+
<div class="col-md-12 col-lg-10 offset-lg-1">
3022
<div class="page-header">
31-
<a class="pull-right" href="https://github.com/mistic100/jQuery-QueryBuilder">
23+
<a class="float-end" href="https://github.com/mistic100/jQuery-QueryBuilder">
3224
<img src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" style="height:48px;">
3325
</a>
3426
<h1>jQuery QueryBuilder
@@ -40,47 +32,47 @@ <h1>jQuery QueryBuilder
4032
<label>Theme:</label>
4133
<div class="btn-group">
4234
<button class="btn btn-primary btn-sm change-theme" data-qb="/dist/css/query-builder.default.css"
43-
data-bt="/node_modules/bootstrap/dist/css/bootstrap.css">Default
35+
data-bt="default">Default
4436
</button>
4537
<button class="btn btn-primary btn-sm change-theme" data-qb="/dist/css/query-builder.dark.css"
46-
data-bt="/node_modules/bootswatch-dist/css/bootstrap.css">Dark
38+
data-bt="dark">Dark
4739
</button>
4840
</div>
4941

5042
<label>Language:</label>
51-
<select name="language" class="selectpicker show-tick show-menu-arrow" data-width="auto">
52-
<option value="sq" data-icon="flag flag-al">Albanian</option>
53-
<option value="ar" data-icon="flag flag-ar">Arabic</option>
54-
<option value="az" data-icon="flag flag-az">Azerbaijani</option>
55-
<option value="bg" data-icon="flag flag-bg">Bulgarian</option>
56-
<option value="zh-CN" data-icon="flag flag-zh-CN">Simplified Chinese</option>
57-
<option value="cs" data-icon="flag flag-cs">Czech</option>
58-
<option value="de" data-icon="flag flag-de">German</option>
59-
<option value="da" data-icon="flag flag-dk">Danish</option>
60-
<option value="nl" data-icon="flag flag-nl">Dutch</option>
61-
<option value="en" data-icon="flag flag-gb" selected>English</option>
62-
<option value="fa-IR" data-icon="flag flag-ir">Farsi</option>
63-
<option value="fr" data-icon="flag flag-fr">French</option>
64-
<option value="el" data-icon="flag flag-el">Greek</option>
65-
<option value="he" data-icon="flag flag-he">Hebrew</option>
66-
<option value="it" data-icon="flag flag-it">Italian</option>
67-
<option value="no" data-icon="flag flag-no">Norwegian</option>
68-
<option value="pl" data-icon="flag flag-pl">Polish</option>
69-
<option value="pt-PT" data-icon="flag flag-pt-PT">Portuguese</option>
70-
<option value="pt-BR" data-icon="flag flag-pt-BR">Brazilian Portuguese</option>
71-
<option value="ro" data-icon="flag flag-ro">Romanian</option>
72-
<option value="ru" data-icon="flag flag-ru">Russian</option>
73-
<option value="es" data-icon="flag flag-es">Spanish</option>
74-
<option value="tr" data-icon="flag flag-tr">Turkish</option>
75-
<option value="ua" data-icon="flag flag-ua">Ukrainian</option>
43+
<select name="language" class="show-tick show-menu-arrow" data-width="auto">
44+
<option value="sq">Albanian</option>
45+
<option value="ar">Arabic</option>
46+
<option value="az">Azerbaijani</option>
47+
<option value="bg">Bulgarian</option>
48+
<option value="zh-CN">Simplified Chinese</option>
49+
<option value="cs">Czech</option>
50+
<option value="de">German</option>
51+
<option value="da">Danish</option>
52+
<option value="nl">Dutch</option>
53+
<option value="en" selected>English</option>
54+
<option value="fa-IR">Farsi</option>
55+
<option value="fr">French</option>
56+
<option value="el">Greek</option>
57+
<option value="he">Hebrew</option>
58+
<option value="it">Italian</option>
59+
<option value="no">Norwegian</option>
60+
<option value="pl">Polish</option>
61+
<option value="pt-PT">Portuguese</option>
62+
<option value="pt-BR">Brazilian Portuguese</option>
63+
<option value="ro">Romanian</option>
64+
<option value="ru">Russian</option>
65+
<option value="es">Spanish</option>
66+
<option value="tr">Turkish</option>
67+
<option value="ua">Ukrainian</option>
7668
</select>
7769
</div>
7870

7971
<div id="builder"></div>
8072

8173
<div class="btn-group">
8274
<button class="btn btn-danger reset">Reset</button>
83-
<button class="btn btn-warning set-filters" data-toggle="tooltip" data-container="body" data-placement="bottom"
75+
<button class="btn btn-warning set-filters" data-bs-toggle="tooltip" data-container="body" data-placement="bottom"
8476
title="Adds a filter 'New filter' and removes 'Coordinates', 'State', 'BSON'">Set filters
8577
</button>
8678
</div>
@@ -106,22 +98,23 @@ <h3>Output</h3>
10698
</div>
10799
</div>
108100
</div>
109-
110101
<script src="/node_modules/jquery/dist/jquery.js"></script>
102+
<script src="/node_modules/@popperjs/core/dist/umd/popper.js"></script>
111103
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
112-
<script src="/node_modules/bootstrap-select/dist/js/bootstrap-select.js"></script>
113104
<script src="/node_modules/chosenjs/chosen.jquery.js"></script>
114-
<script src="/node_modules/bootbox/bootbox.js"></script>
115105
<script src="/node_modules/bootstrap-slider/dist/bootstrap-slider.js"></script>
116-
<script src="/node_modules/selectize/dist/js/standalone/selectize.js"></script>
106+
<script src="/node_modules/@selectize/selectize/dist/js/selectize.js"></script>
117107
<script src="/node_modules/jquery-extendext/jquery-extendext.js"></script>
118108
<script src="/node_modules/sql-parser-mistic/browser/sql-parser.js"></script>
119109
<script src="/node_modules/interactjs/dist/interact.js"></script>
110+
<script src="/node_modules/bootbox/dist/bootbox.all.js"></script>
120111

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

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

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

@@ -142,7 +135,6 @@ <h3>Output</h3>
142135
'bt-tooltip-errors': { delay: 100 },
143136
'sortable': null,
144137
'filter-description': { mode: 'bootbox' },
145-
'bt-selectpicker': null,
146138
// 'chosen-selectpicker': null,
147139
'unique-filter': null,
148140
'bt-checkbox': { color: 'primary' },
@@ -185,7 +177,7 @@ <h3>Output</h3>
185177
en: 'Name',
186178
fr: 'Nom'
187179
},
188-
icon: 'glyphicon glyphicon-user',
180+
icon: 'bi-person-fill',
189181
value_separator: ',',
190182
type: 'string',
191183
optgroup: 'core',
@@ -202,7 +194,7 @@ <h3>Output</h3>
202194
{
203195
id: 'age',
204196
label: 'Age',
205-
icon: 'glyphicon glyphicon-calendar',
197+
icon: 'bi-calendar3',
206198
type: 'integer',
207199
input: 'text',
208200
value_separator: '|',
@@ -219,7 +211,7 @@ <h3>Output</h3>
219211
{
220212
id: 'bson',
221213
label: 'BSON',
222-
icon: 'glyphicon glyphicon-qrcode',
214+
icon: 'bi-qr-code',
223215
type: 'string',
224216
input: 'textarea',
225217
operators: ['equal'],
@@ -232,7 +224,7 @@ <h3>Output</h3>
232224
{
233225
id: 'category',
234226
label: 'Category',
235-
icon: 'glyphicon glyphicon-th-list',
227+
icon: 'bi-list-task',
236228
type: 'integer',
237229
input: 'checkbox',
238230
optgroup: 'core',
@@ -258,7 +250,7 @@ <h3>Output</h3>
258250
{
259251
id: 'continent',
260252
label: 'Continent',
261-
icon: 'glyphicon glyphicon-globe',
253+
icon: 'bi-globe-americas',
262254
type: 'string',
263255
input: 'select',
264256
optgroup: 'core',
@@ -307,7 +299,7 @@ <h3>Output</h3>
307299
{
308300
id: 'state',
309301
label: 'State',
310-
icon: 'glyphicon glyphicon-globe',
302+
icon: 'bi-globe-americas',
311303
type: 'string',
312304
input: 'select',
313305
multiple: true,
@@ -343,7 +335,7 @@ <h3>Output</h3>
343335
{
344336
id: 'in_stock',
345337
label: 'In stock',
346-
icon: 'glyphicon glyphicon-log-in',
338+
icon: 'bi-box-arrow-in-right',
347339
type: 'integer',
348340
input: 'radio',
349341
optgroup: 'plugin',
@@ -359,7 +351,7 @@ <h3>Output</h3>
359351
{
360352
id: 'price',
361353
label: 'Price',
362-
icon: 'glyphicon glyphicon-usd',
354+
icon: 'bi-currency-dollar',
363355
type: 'double',
364356
size: 5,
365357
validation: {
@@ -376,7 +368,7 @@ <h3>Output</h3>
376368
{
377369
id: 'rate',
378370
label: 'Rate',
379-
icon: 'glyphicon glyphicon-flash',
371+
icon: 'bi-box-arrow-lightning-charge-fill',
380372
type: 'integer',
381373
validation: {
382374
min: 0,
@@ -400,7 +392,7 @@ <h3>Output</h3>
400392
{
401393
id: 'id',
402394
label: 'Identifier',
403-
icon: 'glyphicon glyphicon-sunglasses',
395+
icon: 'bi-sunglasses',
404396
type: 'string',
405397
optgroup: 'plugin',
406398
placeholder: '____-____-____',
@@ -419,7 +411,7 @@ <h3>Output</h3>
419411
{
420412
id: 'coord',
421413
label: 'Coordinates',
422-
icon: 'glyphicon glyphicon-star-empty',
414+
icon: 'bi-star',
423415
type: 'string',
424416
default_value: 'C.5',
425417
description: 'The letter is the cadran identifier:\
@@ -489,7 +481,7 @@ <h3>Output</h3>
489481
});
490482

491483
// change language
492-
$('[name=language]').selectpicker().on('change', function() {
484+
$('[name=language]').on('change', function() {
493485
var lang = $(this).val();
494486

495487
var done = function() {
@@ -516,7 +508,7 @@ <h3>Output</h3>
516508
// change theme
517509
$('.change-theme').on('click', function() {
518510
$('#qb-theme').replaceWith('<link rel="stylesheet" href="' + $(this).data('qb') + '" id="qb-theme">');
519-
$('#bt-theme').replaceWith('<link rel="stylesheet" href="' + $(this).data('bt') + '" id="bt-theme">');
511+
$('[data-bs-theme]').attr('data-bs-theme', $(this).data('bt'));
520512
});
521513

522514
// set rules
@@ -604,12 +596,12 @@ <h3>Output</h3>
604596
// reset builder
605597
$('.reset').on('click', function() {
606598
$('#builder').queryBuilder('reset');
607-
$('#result').addClass('hide').find('pre').empty();
599+
$('#result').addClass('d-none').find('pre').empty();
608600
});
609601

610602
// get rules
611603
$('.parse-json').on('click', function() {
612-
$('#result').removeClass('hide')
604+
$('#result').removeClass('d-none')
613605
.find('pre').html(JSON.stringify(
614606
$('#builder').queryBuilder('getRules', {
615607
get_flags: true,
@@ -621,14 +613,14 @@ <h3>Output</h3>
621613

622614
$('.parse-sql').on('click', function() {
623615
var res = $('#builder').queryBuilder('getSQL', $(this).data('stmt'), false);
624-
$('#result').removeClass('hide')
616+
$('#result').removeClass('d-none')
625617
.find('pre').html(
626618
res.sql + (res.params ? '\n\n' + JSON.stringify(res.params, undefined, 2) : '')
627619
);
628620
});
629621

630622
$('.parse-mongo').on('click', function() {
631-
$('#result').removeClass('hide')
623+
$('#result').removeClass('d-none')
632624
.find('pre').html(JSON.stringify(
633625
$('#builder').queryBuilder('getMongo'),
634626
undefined, 2
@@ -638,7 +630,7 @@ <h3>Output</h3>
638630
// set filters
639631
$('.set-filters').on('click', function() {
640632
$(this).prop('disabled', true);
641-
$(this).tooltip('hide');
633+
bootstrap.Tooltip.getInstance($(this)).hide();
642634

643635
// add a new filter after 'state'
644636
$('#builder').queryBuilder('addFilter',

‎package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@
1313
"src/"
1414
],
1515
"dependencies": {
16-
"bootstrap": "^3.4.1",
16+
"bootstrap": "^5.3.0",
17+
"@popperjs/core": "^2.11.8",
18+
"bootstrap-icons": "^1.11.3",
1719
"jquery": "^3.5.1",
1820
"jquery-extendext": "^1.0.0",
1921
"moment": "^2.29.1",
@@ -22,10 +24,8 @@
2224
"devDependencies": {
2325
"alive-server": "^1.3.0",
2426
"awesome-bootstrap-checkbox": "^0.3.7",
25-
"bootbox": "^4.4.0",
26-
"bootstrap-select": "^1.12.4",
27+
"bootbox": "^6.0.0",
2728
"bootstrap-slider": "^10.0.0",
28-
"bootswatch-dist": "git+https://github.com/dbtek/bootswatch-dist.git#slate",
2929
"chosenjs": "^1.4.3",
3030
"concurrently": "^8.2.0",
3131
"deepmerge": "^2.1.0",
@@ -34,7 +34,7 @@
3434
"interactjs": "^1.3.3",
3535
"nodemon": "^2.0.22",
3636
"sass": "^1.63.6",
37-
"selectize": "^0.12.4"
37+
"@selectize/selectize": "^0.15.2"
3838
},
3939
"keywords": [
4040
"jquery",

‎src/defaults.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -187,10 +187,10 @@ QueryBuilder.DEFAULTS = {
187187
],
188188

189189
icons: {
190-
add_group: 'glyphicon glyphicon-plus-sign',
191-
add_rule: 'glyphicon glyphicon-plus',
192-
remove_group: 'glyphicon glyphicon-remove',
193-
remove_rule: 'glyphicon glyphicon-remove',
194-
error: 'glyphicon glyphicon-warning-sign'
190+
add_group: 'bi-plus-circle-fill',
191+
add_rule: 'bi-plus-lg',
192+
remove_group: 'bi-x-lg',
193+
remove_rule: 'bi-x-lg',
194+
error: 'bi-exclamation-triangle'
195195
}
196196
};

‎src/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ var QueryBuilder = function($el, options) {
134134
this.status.id = this.$el.attr('id');
135135

136136
// INIT
137-
this.$el.addClass('query-builder form-inline');
137+
this.$el.addClass('query-builder');
138138

139139
this.filters = this.checkFilters(this.filters);
140140
this.operators = this.checkOperators(this.operators);

0 commit comments

Comments
 (0)