Skip to content
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

Bootstrap 5 Further Progress #992

Merged
merged 36 commits into from
Jan 26, 2024
Merged

Bootstrap 5 Further Progress #992

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 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
6692f82
fix(plugins): bt-checkbox BS5 markup
Jan 9, 2024
4dd8672
fix(example): remove bt-selectpicker plugin use
Jan 12, 2024
ae3fb1a
Fix bt-checkbox
liamkeily Jan 17, 2024
61669d6
Fix checked squares
liamkeily Jan 17, 2024
17cd587
Merge remote-tracking branch 'upstream/dev' into dev-bootstrap-5-liam
liamkeily Jan 17, 2024
ab1ef49
Latest icons version
liamkeily Jan 17, 2024
aa70bc8
better icons
liamkeily Jan 17, 2024
2515379
Use local package instead of cdn for icons
liamkeily Jan 17, 2024
03b04ec
Fix offset for bootstrap 5
liamkeily Jan 17, 2024
56bd7c9
dark mode
liamkeily Jan 17, 2024
45066c2
tooltip
liamkeily Jan 17, 2024
8fd9d38
default theme
liamkeily Jan 17, 2024
78537db
float-end logo
liamkeily Jan 17, 2024
6166b29
new lock file
liamkeily Jan 17, 2024
3664b94
Use btn-sm instead of css hack
liamkeily Jan 17, 2024
0b04ebf
Re-enable bootbox
liamkeily Jan 17, 2024
db16673
Remove bi preifx
liamkeily Jan 17, 2024
c99f382
use chosen-selectpicker instead of bt-selectpicker
liamkeily Jan 17, 2024
86f8769
disable chosen picker for now
liamkeily Jan 17, 2024
7ec173d
Get rid of weird focus outline on checkboxes
liamkeily Jan 17, 2024
5cbf01c
Update index.html
liamkeily Jan 17, 2024
ee2b049
Remove unnecessary bootswatch
liamkeily Jan 17, 2024
54d3561
Remove inconsistent padding
liamkeily Jan 22, 2024
d6b2be5
Remove form-inline
liamkeily Jan 22, 2024
eb943dd
yarn
liamkeily Jan 22, 2024
1b0652e
Replace `hide` with `d-none`
liamkeily Jan 22, 2024
837039c
`form-control` is now `form-select`
liamkeily Jan 22, 2024
6289480
If bt-selectpicker did work, this would need to be form-select
liamkeily Jan 22, 2024
0d5d07a
Drop Support for Bootstrap Select as it doesn't retain selections pro…
liamkeily Jan 23, 2024
b009f7d
Unused
liamkeily Jan 23, 2024
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
122 changes: 57 additions & 65 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,26 @@
<!DOCTYPE html>
<html>
<html data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQuery QueryBuilder Example</title>

<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="/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="/node_modules/bootstrap-icons/font/bootstrap-icons.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">

<style>
.flag {
display: inline-block;
}
</style>
</head>

<body>

<div class="container">
<div class="col-md-12 col-lg-10 col-lg-offset-1">
<div class="col-md-12 col-lg-10 offset-lg-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/assets/GitHub-Mark-ea2971cee799.png" style="height:48px;">
</a>
<h1>jQuery QueryBuilder
Expand All @@ -40,47 +32,47 @@ <h1>jQuery QueryBuilder
<label>Theme:</label>
<div class="btn-group">
<button class="btn btn-primary btn-sm change-theme" data-qb="/dist/css/query-builder.default.css"
data-bt="/node_modules/bootstrap/dist/css/bootstrap.css">Default
data-bt="default">Default
</button>
<button class="btn btn-primary btn-sm change-theme" data-qb="/dist/css/query-builder.dark.css"
data-bt="/node_modules/bootswatch-dist/css/bootstrap.css">Dark
data-bt="dark">Dark
</button>
</div>

<label>Language:</label>
<select name="language" class="selectpicker show-tick show-menu-arrow" data-width="auto">
<option value="sq" data-icon="flag flag-al">Albanian</option>
<option value="ar" data-icon="flag flag-ar">Arabic</option>
<option value="az" data-icon="flag flag-az">Azerbaijani</option>
<option value="bg" data-icon="flag flag-bg">Bulgarian</option>
<option value="zh-CN" data-icon="flag flag-zh-CN">Simplified Chinese</option>
<option value="cs" data-icon="flag flag-cs">Czech</option>
<option value="de" data-icon="flag flag-de">German</option>
<option value="da" data-icon="flag flag-dk">Danish</option>
<option value="nl" data-icon="flag flag-nl">Dutch</option>
<option value="en" data-icon="flag flag-gb" selected>English</option>
<option value="fa-IR" data-icon="flag flag-ir">Farsi</option>
<option value="fr" data-icon="flag flag-fr">French</option>
<option value="el" data-icon="flag flag-el">Greek</option>
<option value="he" data-icon="flag flag-he">Hebrew</option>
<option value="it" data-icon="flag flag-it">Italian</option>
<option value="no" data-icon="flag flag-no">Norwegian</option>
<option value="pl" data-icon="flag flag-pl">Polish</option>
<option value="pt-PT" data-icon="flag flag-pt-PT">Portuguese</option>
<option value="pt-BR" data-icon="flag flag-pt-BR">Brazilian Portuguese</option>
<option value="ro" data-icon="flag flag-ro">Romanian</option>
<option value="ru" data-icon="flag flag-ru">Russian</option>
<option value="es" data-icon="flag flag-es">Spanish</option>
<option value="tr" data-icon="flag flag-tr">Turkish</option>
<option value="ua" data-icon="flag flag-ua">Ukrainian</option>
<select name="language" class="show-tick show-menu-arrow" data-width="auto">
<option value="sq">Albanian</option>
<option value="ar">Arabic</option>
<option value="az">Azerbaijani</option>
<option value="bg">Bulgarian</option>
<option value="zh-CN">Simplified Chinese</option>
<option value="cs">Czech</option>
<option value="de">German</option>
<option value="da">Danish</option>
<option value="nl">Dutch</option>
<option value="en" selected>English</option>
<option value="fa-IR">Farsi</option>
<option value="fr">French</option>
<option value="el">Greek</option>
<option value="he">Hebrew</option>
<option value="it">Italian</option>
<option value="no">Norwegian</option>
<option value="pl">Polish</option>
<option value="pt-PT">Portuguese</option>
<option value="pt-BR">Brazilian Portuguese</option>
<option value="ro">Romanian</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="tr">Turkish</option>
<option value="ua">Ukrainian</option>
</select>
</div>

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

<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 +98,23 @@ <h3>Output</h3>
</div>
</div>
</div>

<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 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 @@ -142,7 +135,6 @@ <h3>Output</h3>
'bt-tooltip-errors': { delay: 100 },
'sortable': null,
'filter-description': { mode: 'bootbox' },
'bt-selectpicker': null,
// 'chosen-selectpicker': null,
'unique-filter': null,
'bt-checkbox': { color: 'primary' },
Expand Down Expand Up @@ -185,7 +177,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 +194,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 +211,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 +224,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 +250,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 +299,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 +335,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 +351,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 +368,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 +392,7 @@ <h3>Output</h3>
{
id: 'id',
label: 'Identifier',
icon: 'glyphicon glyphicon-sunglasses',
icon: 'bi-sunglasses',
type: 'string',
optgroup: 'plugin',
placeholder: '____-____-____',
Expand All @@ -419,7 +411,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 @@ -489,7 +481,7 @@ <h3>Output</h3>
});

// change language
$('[name=language]').selectpicker().on('change', function() {
$('[name=language]').on('change', function() {
var lang = $(this).val();

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

// set rules
Expand Down Expand Up @@ -604,12 +596,12 @@ <h3>Output</h3>
// reset builder
$('.reset').on('click', function() {
$('#builder').queryBuilder('reset');
$('#result').addClass('hide').find('pre').empty();
$('#result').addClass('d-none').find('pre').empty();
});

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

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

$('.parse-mongo').on('click', function() {
$('#result').removeClass('hide')
$('#result').removeClass('d-none')
.find('pre').html(JSON.stringify(
$('#builder').queryBuilder('getMongo'),
undefined, 2
Expand All @@ -638,7 +630,7 @@ <h3>Output</h3>
// set filters
$('.set-filters').on('click', function() {
$(this).prop('disabled', true);
$(this).tooltip('hide');
bootstrap.Tooltip.getInstance($(this)).hide();

// add a new filter after 'state'
$('#builder').queryBuilder('addFilter',
Expand Down
10 changes: 5 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@
"src/"
],
"dependencies": {
"bootstrap": "^3.4.1",
"bootstrap": "^5.3.0",
"@popperjs/core": "^2.11.8",
"bootstrap-icons": "^1.11.3",
"jquery": "^3.5.1",
"jquery-extendext": "^1.0.0",
"moment": "^2.29.1",
Expand All @@ -22,10 +24,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-slider": "^10.0.0",
"bootswatch-dist": "git+https://github.com/dbtek/bootswatch-dist.git#slate",
"chosenjs": "^1.4.3",
"concurrently": "^8.2.0",
"deepmerge": "^2.1.0",
Expand All @@ -34,7 +34,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-lg',
remove_group: 'bi-x-lg',
remove_rule: 'bi-x-lg',
error: 'bi-exclamation-triangle'
}
};
2 changes: 1 addition & 1 deletion src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ var QueryBuilder = function($el, options) {
this.status.id = this.$el.attr('id');

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

this.filters = this.checkFilters(this.filters);
this.operators = this.checkOperators(this.operators);
Expand Down
Loading