examples: updated bootstrap examples

examples/bootstrap4-rendering.php

@@ -23,20 +23,20 @@ function makeBootstrap4(Form $form): void
 	$renderer = $form->getRenderer();
 	$renderer->wrappers['controls']['container'] = null;
 	$renderer->wrappers['pair']['container'] = 'div class="form-group row"';
-	$renderer->wrappers['pair']['.error'] = 'has-danger';
-	$renderer->wrappers['control']['container'] = 'div class=col-sm-9';
 	$renderer->wrappers['label']['container'] = 'div class="col-sm-3 col-form-label"';
+	$renderer->wrappers['control']['container'] = 'div class=col-sm-9';
 	$renderer->wrappers['control']['description'] = 'span class=form-text';
-	$renderer->wrappers['control']['errorcontainer'] = 'span class=form-control-feedback';
+	$renderer->wrappers['control']['errorcontainer'] = 'span class=invalid-feedback';
 	$renderer->wrappers['control']['.error'] = 'is-invalid';
+	$renderer->wrappers['error']['container'] = 'div class="alert alert-danger"';
 
 	foreach ($form->getControls() as $control) {
 		$type = $control->getOption('type');
 		if ($type === 'button') {
 			$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-secondary');
 			$usedPrimary = true;
 
-		} elseif (in_array($type, ['text', 'textarea', 'select'], true)) {
+		} elseif (in_array($type, ['text', 'textarea', 'select', 'datetime'], true)) {
 			$control->getControlPrototype()->addClass('form-control');
 
 		} elseif ($type === 'file') {
@@ -49,7 +49,7 @@ function makeBootstrap4(Form $form): void
 				$control->getItemLabelPrototype()->addClass('form-check-label');
 			}
 			$control->getControlPrototype()->addClass('form-check-input');
-			$control->getSeparatorPrototype()->setName('div')->addClass('form-check');
+			$control->getContainerPrototype()->setName('div')->addClass('form-check');
 		}
 	}
 }
@@ -98,7 +98,7 @@ function makeBootstrap4(Form $form): void
 <meta charset="utf-8">
 <title>Nette Forms & Bootstrap v4 rendering example</title>
 
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
 
 <div class="container">
 	<h1>Nette Forms & Bootstrap v4 rendering example</h1>

examples/bootstrap3-rendering.php → examples/bootstrap5-rendering.php

@@ -1,7 +1,7 @@
 <?php
 
 /**
- * Nette Forms & Bootstap v3 rendering example.
+ * Nette Forms & Bootstap v5 rendering example.
  */
 
 declare(strict_types=1);
@@ -18,40 +18,52 @@
 Debugger::enable();
 
 
-function makeBootstrap3(Form $form): void
+function makeBootstrap5(Form $form): void
 {
 	$renderer = $form->getRenderer();
 	$renderer->wrappers['controls']['container'] = null;
-	$renderer->wrappers['pair']['container'] = 'div class=form-group';
-	$renderer->wrappers['pair']['.error'] = 'has-error';
+	$renderer->wrappers['pair']['container'] = 'div class="mb-3 row"';
+	$renderer->wrappers['label']['container'] = 'div class="col-sm-3 col-form-label"';
 	$renderer->wrappers['control']['container'] = 'div class=col-sm-9';
-	$renderer->wrappers['label']['container'] = 'div class="col-sm-3 control-label"';
-	$renderer->wrappers['control']['description'] = 'span class=help-block';
-	$renderer->wrappers['control']['errorcontainer'] = 'span class=help-block';
-	$form->getElementPrototype()->class('form-horizontal');
+	$renderer->wrappers['control']['description'] = 'span class=form-text';
+	$renderer->wrappers['control']['errorcontainer'] = 'span class=invalid-feedback';
+	$renderer->wrappers['control']['.error'] = 'is-invalid';
+	$renderer->wrappers['error']['container'] = 'div class="alert alert-danger"';
 
 	foreach ($form->getControls() as $control) {
 		$type = $control->getOption('type');
 		if ($type === 'button') {
-			$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-default');
+			$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-secondary');
 			$usedPrimary = true;
 
-		} elseif (in_array($type, ['text', 'textarea', 'select'], true)) {
+		} elseif (in_array($type, ['text', 'textarea', 'select', 'datetime', 'file'], true)) {
 			$control->getControlPrototype()->addClass('form-control');
 
 		} elseif (in_array($type, ['checkbox', 'radio'], true)) {
-			$control->getSeparatorPrototype()->setName('div')->addClass($type);
+			if ($control instanceof Nette\Forms\Controls\Checkbox) {
+				$control->getLabelPrototype()->addClass('form-check-label');
+			} else {
+				$control->getItemLabelPrototype()->addClass('form-check-label');
+			}
+			$control->getControlPrototype()->addClass('form-check-input');
+			$control->getContainerPrototype()->setName('div')->addClass('form-check');
+
+		} elseif ($type === 'color') {
+			$control->getControlPrototype()->addClass('form-control form-control-color');
 		}
 	}
 }
 
 
 $form = new Form;
-$form->onRender[] = 'makeBootstrap3';
+$form->onRender[] = 'makeBootstrap5';
 
 $form->addGroup('Personal data');
 $form->addText('name', 'Your name')
-	->setRequired('Enter your name');
+	->setRequired('Enter your name')
+	->setOption('description', 'Name and surname');
+
+$form->addDate('birth', 'Date of birth');
 
 $form->addRadioList('gender', 'Your gender', [
 	'male', 'female',
@@ -67,6 +79,8 @@ function makeBootstrap3(Form $form): void
 
 $form->addCheckbox('send', 'Ship to address');
 
+$form->addColor('color', 'Favourite colour');
+
 $form->addGroup('Your account');
 $form->addPassword('password', 'Choose password');
 $form->addUpload('avatar', 'Picture');
@@ -87,14 +101,12 @@ function makeBootstrap3(Form $form): void
 ?>
 <!DOCTYPE html>
 <meta charset="utf-8">
-<title>Nette Forms & Bootstrap v3 rendering example</title>
+<title>Nette Forms & Bootstrap v5 rendering example</title>
 
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
 
 <div class="container">
-	<div class="page-header">
-		<h1>Nette Forms & Bootstrap v3 rendering example</h1>
-	</div>
+	<h1>Nette Forms & Bootstrap v5 rendering example</h1>
 
 	<?php $form->render() ?>
 </div>

examples/latte.php

@@ -19,18 +19,36 @@
 
 
 $form = new Form;
-$form->addText('name', 'Your name:')
-	->setRequired('Enter your name');
+$form->addText('name', 'Your name')
+	->setRequired('Enter your name')
+	->setOption('description', 'Name and surname');
 
-$form->addPassword('password', 'Choose password:')
-	->setRequired('Choose your password')
-	->addRule($form::MinLength, 'The password is too short: it must be at least %d characters', 3);
+$form->addDate('birth', 'Date of birth');
 
-$form->addPassword('password2', 'Reenter password:')
-	->setRequired('Reenter your password')
-	->addRule($form::Equal, 'Passwords do not match', $form['password']);
+$form->addRadioList('gender', 'Your gender', [
+	'male', 'female',
+]);
+
+$form->addCheckboxList('colors', 'Favorite colors', [
+	'red', 'green', 'blue',
+]);
+
+$form->addSelect('country', 'Country', [
+	'Buranda', 'Qumran', 'Saint Georges Island',
+]);
+
+$form->addCheckbox('send', 'Ship to address');
+
+$form->addColor('color', 'Favourite colour');
+
+$form->addPassword('password', 'Choose password');
+$form->addUpload('avatar', 'Picture');
+$form->addTextArea('note', 'Comment');
 
 $form->addSubmit('submit', 'Send');
+$form->addSubmit('cancel', 'Cancel');
+
+
 
 if ($form->isSuccess()) {
 	echo '<h2>Form was submitted and successfully validated</h2>';

examples/latte/form-bootstrap5.latte

@@ -0,0 +1,48 @@
+{* Generic form template for Bootstrap v5 *}
+
+{parameters $name}
+<form n:name=$name>
+	{* List for form-level error messages *}
+	<ul class="alert alert-danger" n:ifcontent>
+		<li n:foreach="$form->ownErrors as $error">{$error}</li>
+	</ul>
+
+	{* Loop over form controls and render each one *}
+	<div n:foreach="$form->controls as $name => $input"
+		n:if="!$input->getOption(rendered) && $input->getOption(type) !== hidden"
+		n:class="mb-3, row, $input->required ? required, $input->error ? is-invalid">
+
+		{* Label for the input *}
+		<div class="col-sm-3 col-form-label">{label $input /}</div>
+
+		<div class="col-sm-9">
+			{* Conditionally render inputs based on their type with appropriate Bootstrap classes *}
+			{if $input->getOption(type) in [text, select, textarea, datetime, file]}
+				{input $input class => form-control}
+
+			{elseif $input->getOption(type) === button}
+				{input $input class => "btn btn-primary"}
+				{while $iterator->nextValue?->getOption(type) === button}
+					{input $iterator->nextValue class => "btn btn-secondary"}
+					{do $iterator->next()}
+				{/while}
+
+			{elseif $input->getOption(type) in [checkbox, radio]}
+				{var $items = $input instanceof Nette\Forms\Controls\Checkbox ? [''] : $input->getItems()}
+				<div class="form-check" n:foreach="$items as $k => $v">
+					{input $input:$k class => form-check-input}{label $input:$k class => form-check-label /}
+				</div>
+
+			{elseif $input->getOption(type) === color}
+				{input $input class => "form-control form-control-color"}
+
+			{else}
+				{input $input}
+			{/if}
+
+			{* Display input-level errors or descriptions, if present *}
+			<span class=invalid-feedback n:ifcontent>{$input->error}</span>
+			<span class=form-text n:ifcontent>{$input->getOption(description)}</span>
+		</div>
+	</div>
+</form>

examples/latte/form.latte

@@ -1,15 +1,26 @@
-<form n:name=$form>
+{* Generic form template *}
+
+{parameters $name}
+<form n:name=$name>
+	{* List for form-level error messages *}
 	<ul class=error n:ifcontent>
 		<li n:foreach="$form->ownErrors as $error">{$error}</li>
 	</ul>
 
 	<table>
+	{* Loop over form controls and render each one *}
 	<tr n:foreach="$form->controls as $input"
 		n:if="!$input->getOption(rendered) && $input->getOption(type) !== hidden"
 		n:class="$input->required ? required">
 
 		<th>{label $input /}</th>
-		<td>{input $input} <span class=error n:ifcontent>{$input->error}</span></td>
+
+		<td>
+			{input $input}
+
+			<span class=info n:ifcontent>{$input->getOption(description)}</span>
+			<span class=error n:ifcontent>{$input->error}</span>
+		</td>
 	</tr>
 	</table>
 </form>