[7.x] Bootstrap 5 + PHP 8 + vanilla javascript (contributte#1021)

* Bootstrap 5 * Bootstrap 5 (docs) * Bootstrap 5 * form-control -> form-select * Bump bootstrap-select for Bootstrap 5 support * Removed `input-sm` from Bootstrap 3 See https://getbootstrap.com/docs/4.0/migration/#forms-1 * Bootstrap 5: When selectpicker, replace form-select classes with form-control and refresh it * Hide `underline` also for `dropdown-item`. And merged into one CSS rule. * Update the filterMultiSelect initialization * Text-align: left -> start Co-authored-by: Radim Vaculík <[email protected]> Co-authored-by: Jaroslav Líbal <[email protected]>
RYUcze · Jul 10, 2023 · 9226378 · 9226378
1 parent 62dc9b4
commit 9226378
Show file tree

Hide file tree

Showing 19 changed files with 90 additions and 84 deletions.
diff --git a/.docs/assets.md b/.docs/assets.md
@@ -10,7 +10,7 @@ DataGrid needs for its precise functionality some third party scripts and styles
 
 **CSS (external)**
 
-- bootstrap
+- bootstrap 5
 - bootstrap datepicker
 - bootstrap select
 
@@ -60,15 +60,15 @@ package.json:
 {
 	"dependencies": {
 		"bootstrap-datepicker": "^1.9",
-		"bootstrap-select": "^1.13",
-		"bootstrap": "^4.4.1",
+		"bootstrap-select": "^1.14-beta2",
+		"bootstrap": "^5.0.0",
 		"happy-inputs": "^2.0",
 		"jquery": "^3.4.1",
 		"jquery-ui-sortable": "^1.0",
 		"nette-forms": "^3.0",
 		"nette.ajax.js": "^2.3",
 		"popper.js": "^1.14.7",
-		"ublaboo-datagrid": "^6.2"
+		"ublaboo-datagrid": "^6.9"
 	}
 }
 ```
@@ -79,16 +79,16 @@ package.json:
 <!DOCTYPE html>
 <html>
 <head>
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.css">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0/dist/css/bootstrap.css">
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/src/happy.css">
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-datepicker.css">
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid.css">
 
 	<!-- Use this css for ajax spinners -->
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid-spinners.css">
 
-	<!-- Include this css when using FilterMultiSelect (silviomoreto.github.io/bootstrap-select) -->
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.15/dist/css/bootstrap-select.css">
+	<!-- Include this css when using FilterMultiSelect (https://developer.snapappointments.com/bootstrap-select/) -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/css/bootstrap-select.css">
 
 	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
 </head>
@@ -101,21 +101,21 @@ package.json:
 		happy.init();
 	</script>
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js"></script>
-	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0/dist/js/bootstrap.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-datepicker.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-ui.min.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/nette.ajax.js"></script>
-	<script src="https://cdn.jsdelivr.net/npm/[email protected].1/assets/datagrid.js"></script>
-	<script src="https://cdn.jsdelivr.net/npm/[email protected].4/src/assets/netteForms.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/assets/netteForms.min.js"></script>
 
 	<!-- It is recommended to include this JS file with just a few bits. It refreshes URL on non ajax request -->
-	<script src="https://cdn.jsdelivr.net/npm/[email protected].1/assets/datagrid-instant-url-refresh.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid-instant-url-refresh.js"></script>
 
 	<!-- Use this little extension for ajax spinners -->
-	<script src="https://cdn.jsdelivr.net/npm/[email protected].1/assets/datagrid-spinners.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid-spinners.js"></script>
 
-	<!-- Include bootstrap-select.js when using FilterMultiSelect (silviomoreto.github.io/bootstrap-select) -->
-	<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.15/dist/js/bootstrap-select.js"></script>
+	<!-- Include bootstrap-select.js when using FilterMultiSelect (https://developer.snapappointments.com/bootstrap-select/) -->
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/js/bootstrap-select.js"></script>
 </body>
 </html>
 ```
diff --git a/.docs/filters.md b/.docs/filters.md
@@ -111,7 +111,7 @@ There is how the default FilterText template looks like:
 <div class="row">
 	{label $input class =>; 'col-sm-3 control-label' /}
 	<div class="col-sm-9">
-		{input $input, class => 'form-control input-sm', data-autosubmit => true}
+		{input $input, class => 'form-control form-control-sm', data-autosubmit => true}
 	</div>
 </div>
 

diff --git a/.docs/localization.md b/.docs/localization.md
@@ -15,7 +15,7 @@ public function createComponentLocalizationGrid($name): Ublaboo\DataGrid\DataGri
 	$grid->setDataSource($this->ndb->table('ublaboo_example'));
 
 	$grid->addColumnNumber('id', 'Id')
-		->setAlign('left')
+		->setAlign('start')
 		->setSortable();
 
 	$grid->addColumnText('name', 'Name')

diff --git a/assets/datagrid.css b/assets/datagrid.css
@@ -26,6 +26,14 @@
 	box-sizing: border-box
 }
 
+.datagrid a {
+	text-decoration: none;
+}
+
+.datagrid a:not(.btn):not(.dropdown-item):hover {
+	text-decoration: underline;
+}
+
 .datagrid .datagrid-input-group-full-width {
 	width: 100%
 }
@@ -217,6 +225,10 @@
 	opacity: 1
 }
 
+.datagrid .table > :not(:first-child) {
+	border-top: 0;
+}
+
 .datagrid table tbody td {
 	vertical-align: middle
 }
@@ -481,8 +493,7 @@
 }
 
 .datagrid select {
-	padding: 0;
-	text-transform: none
+	text-transform: none;
 }
 
 .datagrid .row-grid-bottom {
@@ -515,7 +526,8 @@
 	display: inline-block
 }
 
-.datagrid .row-grid-bottom .col-per-page .form-control {
+.datagrid .row-grid-bottom .col-per-page .form-control,
+.datagrid .row-grid-bottom .col-per-page .form-select {
 	width: auto;
 	display: inline-block
 }
@@ -562,7 +574,7 @@
 	float: right
 }
 
-@media (min-width:768px) {
+@media (min-width: 768px) {
 	.datagrid .ublaboo-datagrid-th-form-inline .form-group {
 		display: inline-block;
 		margin-bottom: 0;
@@ -576,7 +588,7 @@
 	}
 
 	.datagrid .ublaboo-datagrid-th-form-inline .form-control[hidden] {
-		display:none;
+		display: none;
 	}
 
 	.ublaboo-datagrid-th-form-inline .form-control[hidden] {

diff --git a/assets/datagrid.js b/assets/datagrid.js
@@ -112,7 +112,7 @@ if (typeof naja !== "undefined") {
 }
 
 
-var datagridFitlerMultiSelect, datagridGroupActionMultiSelect, datagridShiftGroupSelection, datagridSortable, datagridSortableTree, getEventDomPath,
+var datagridFilterMultiSelect, datagridGroupActionMultiSelect, datagridShiftGroupSelection, datagridSortable, datagridSortableTree, getEventDomPath,
 	indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 
 $(document).on('click', '[data-datagrid-confirm]:not(.ajax)', function(e) {
@@ -808,20 +808,30 @@ dataGridRegisterExtension('datagrid-toggle-inline-add', {
 	}
 });
 
-datagridFitlerMultiSelect = function() {
+datagridFilterMultiSelect = function() {
 	var select = $('.selectpicker').first();
 
 	if ($.fn.selectpicker) {
-		return $.fn.selectpicker.defaults = {
+		let defaults = $.fn.selectpicker.defaults = {
 			countSelectedText: select.data('i18n-selected'),
 			iconBase: '',
 			tickIcon: select.data('selected-icon-check')
 		};
+
+		$('.selectpicker')
+			.removeClass('form-select form-select-sm')
+			.addClass('form-control form-control-sm')
+			.selectpicker('destroy')
+			.selectpicker({
+				iconBase: 'fa'
+			});
+
+		return defaults;
 	}
 };
 
 $(function() {
-	return datagridFitlerMultiSelect();
+	return datagridFilterMultiSelect();
 });
 
 datagridGroupActionMultiSelect = function() {
@@ -855,12 +865,7 @@ $(function() {
 
 dataGridRegisterExtension('datagrid.fitlerMultiSelect', {
 	success: function() {
-		datagridFitlerMultiSelect();
-		if ($.fn.selectpicker) {
-			return $('.selectpicker').selectpicker({
-				iconBase: 'fa'
-			});
-		}
+		datagridFilterMultiSelect();
 	}
 });
 

diff --git a/src/Column/Column.php b/src/Column/Column.php
@@ -331,7 +331,7 @@ public function hasAlign(): bool
 	 */
 	public function getAlign(): string
 	{
-		return $this->align ?? 'left';
+		return $this->align ?? 'start';
 	}
 
 	/**

diff --git a/src/Column/ColumnDateTime.php b/src/Column/ColumnDateTime.php
@@ -10,7 +10,7 @@
 class ColumnDateTime extends Column
 {
 
-	protected ?string $align = 'right';
+	protected ?string $align = 'end';
 
 	protected string $format = 'j. n. Y';
 

diff --git a/src/Column/ColumnNumber.php b/src/Column/ColumnNumber.php
@@ -7,7 +7,7 @@
 class ColumnNumber extends Column
 {
 
-	protected ?string $align = 'right';
+	protected ?string $align = 'end';
 
 	/** @var array */
 	protected array $numberFormat = [

diff --git a/src/Filter/Filter.php b/src/Filter/Filter.php
@@ -23,9 +23,8 @@ abstract class Filter
 
 	protected ?string $type = null;
 
-	/** @var array */
 	protected array $attributes = [
-		'class' => ['form-control', 'input-sm', 'form-control-sm'],
+		'class' => ['form-control', 'form-control-sm'],
 	];
 
 	private ?string $placeholder = null;

diff --git a/src/Filter/FilterMultiSelect.php b/src/Filter/FilterMultiSelect.php
@@ -13,9 +13,8 @@ class FilterMultiSelect extends FilterSelect
 
 	protected ?string $type = 'multi-select';
 
-	/** @var array */
 	protected array $attributes = [
-		'class' => ['form-control', 'input-sm', 'selectpicker', 'form-control-sm'],
+		'class' => ['form-select', 'selectpicker', 'form-select-sm'],
 		'data-selected-text-format' => ['count'],
 	];
 

diff --git a/src/Filter/FilterSelect.php b/src/Filter/FilterSelect.php
@@ -13,6 +13,10 @@ class FilterSelect extends OneColumnFilter
 
 	protected bool $translateOptions = false;
 
+	protected array $attributes = [
+		'class' => ['form-select', 'form-select-sm'],
+	];
+
 	protected ?string $template = 'datagrid_filter_select.latte';
 
 	protected ?string $type = 'select';

diff --git a/src/GroupAction/GroupAction.php b/src/GroupAction/GroupAction.php
@@ -17,7 +17,6 @@ abstract class GroupAction
 
 	protected string $class = 'form-control input-sm form-control-sm';
 
-	/** @var array */
 	protected array $attributes = [];
 
 	public function __construct(protected string $title)

diff --git a/src/GroupAction/GroupMultiSelectAction.php b/src/GroupAction/GroupMultiSelectAction.php
@@ -8,6 +8,6 @@
 class GroupMultiSelectAction extends GroupSelectAction
 {
 
-	protected string $class = 'form-control input-sm form-control-sm selectpicker';
+	protected string $class = 'form-select form-select-sm selectpicker';
 
 }
diff --git a/src/InlineEdit/InlineEdit.php b/src/InlineEdit/InlineEdit.php
@@ -176,7 +176,7 @@ public function addControlsClasses(Container $container): void
 
 				default:
 					if ($control->getControl()->getAttribute('class') === null) {
-						$control->setAttribute('class', 'form-control input-sm form-control-sm');
+						$control->setAttribute('class', 'form-control form-control-sm');
 					}
 
 					break;

diff --git a/src/templates/column_status.latte b/src/templates/column_status.latte
@@ -8,7 +8,7 @@
 <div class="dropdown">
 	{if $activeOption}
 		{if $status->shouldBeRendered($row)}
-			<button class="dropdown-toggle {$activeOption->getClass()} {$activeOption->getClassSecondary()}" type="button" data-toggle="dropdown">
+			<button class="dropdown-toggle {$activeOption->getClass()} {$activeOption->getClassSecondary()}" type="button" data-bs-toggle="dropdown">
 				{if $activeOption->getIcon()}<i class="{$iconPrefix}{$activeOption->getIcon()}"></i> {/if}
 				{$activeOption->getText()|translate} <i n:if="$status->hasCaret()" class="caret"></i>
 			</button>

diff --git a/src/templates/datagrid.latte b/src/templates/datagrid.latte
@@ -20,9 +20,9 @@
 		{form filter, class => 'ajax'}
 			{if $control->hasOuterFilterRendering()}
 				{block outer-filters}
-					<div class="row text-right datagrid-collapse-filters-button-row" n:if="$control->hasCollapsibleOuterFilters()">
+					<div class="row text-end datagrid-collapse-filters-button-row" n:if="$control->hasCollapsibleOuterFilters()">
 						<div class="col-sm-12">
-							<button class="btn btn-xs btn-primary" type="button" data-toggle="collapse" data-target="#datagrid-{$control->getFullName()}-row-filters">
+							<button class="btn btn-xs btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#datagrid-{$control->getFullName()}-row-filters">
 								<i n:block="icon-filter" class="{$iconPrefix}filter"></i> {='ublaboo_datagrid.show_filter'|translate}
 							</button>
 						</div>
@@ -58,7 +58,7 @@
 								{var $i = $i+1}
 							</div>
 							<div class="col-sm-12" n:if="!$control->hasAutoSubmit()">
-								<div class="text-right datagrid-manual-submit">
+								<div class="text-end datagrid-manual-submit">
 									{input $filter['filter']['submit']}
 								</div>
 							</div>
@@ -81,7 +81,7 @@
 										{elseif $form_control instanceof \Nette\Forms\Controls\SubmitButton}
 											{input $form_control, disabled => TRUE}
 										{elseif $form_control->getName() == 'group_action'}
-											{input $form_control, class => 'form-control input-sm form-control-sm', disabled => TRUE}
+											{input $form_control, class => 'form-control form-control-sm', disabled => TRUE}
 										{else}
 											{input $form_control}
 										{/if}
@@ -109,7 +109,7 @@
 									{/if}
 
 									<div class="btn-group">
-										<button type="button" class="btn btn-xs {$btnSecondaryClass} dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" n:if="$control->canHideColumns()">
+										<button type="button" class="btn btn-xs {$btnSecondaryClass} dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" n:if="$control->canHideColumns()">
 											<i n:block="icon-gear" class="{$iconPrefix}cog"></i>
 										</button>
 										<ul class="dropdown-menu dropdown-menu-right dropdown-menu--grid">
@@ -175,7 +175,7 @@
 
 								<div class="datagrid-column-header-additions">
 									<div class="btn-group column-settings-menu" n:if="$control->canHideColumns()">
-										<a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="">
+										<a class="dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="">
 											<i n:block="icon-caret-down" class="{$iconPrefix}caret-down"></i>
 										</a>
 										<ul class="dropdown-menu dropdown-menu--grid">
@@ -394,10 +394,10 @@
 									<div class="col-pagination text-center">
 										{control paginator}
 									</div>
-									<div class="col-per-page text-right">
+									<div class="col-per-page text-end">
 										<a n:if="$filter_active" n:href="resetFilter!" class="ajax btn btn-danger btn-sm reset-filter">{='ublaboo_datagrid.reset_filter'|translate}</a>
 										{if $control->isPaginated()}
-											{input $filter['perPage'], data-autosubmit-per-page => TRUE, class => 'form-control input-sm form-control-sm'}
+											{input $filter['perPage'], data-autosubmit-per-page => TRUE, class => 'form-select form-select-sm'}
 											{input $filter['perPage_submit'], class => 'datagrid-per-page-submit'}
 										{/if}
 									</div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -331,7 +331,7 @@ public function hasAlign(): bool @@
     	 */
     	public function getAlign(): string
     	{
-    		return $this->align ?? 'left';
+    		return $this->align ?? 'start';
     	}
     	/**
@@ Expand Down @@