Merge pull request #123 from kontenta/feature/placeholder-option

Placeholder option and disabled options

README.md

@@ -270,11 +270,44 @@ If no `$idPrefix` is set, this conveniently corresponds to the keys in Laravel's
 It's best to set it as high up as possible in the view, before any forms are included.
 You could even set in the controller and pass it along to the view.
 
+### Common parameters
+
+All inputs need at least the `$name` parameter
+and optional `$placeholder` and `$ariaDescribedById` parameters.
+
+All form views take a `$controlAttributes` `array` that can be used to set any additional html attributes
+on the form control element.
+This can be useful for setting `required`, `disabled`, `readonly`, `autocomplete`, and other attributes specific to the
+[different input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_<input>_types).
+
+```php
+<form ...>
+@include('kontour::forms.input', [
+  'name' => 'country_code',
+  'controlAttributes' => ['required', 'autocomplete' => 'country', 'size' => '2']
+]])
+</form>
+```
+
+The corresponding parameter to put extra attributes on the label tag is `$labelAttributes`.
+
+### Available input templates
+
+- `textarea` - Pass `$value` to set input contents.
+- `input` - Same API as `textarea`, but you can pass `$type` to set the input type (defaults to `text`).
+- `select` - Pass `$options` as an `array` of key-values and an optional `$selected` `string` and `$disabledOptions` `array`.
+- `radiobuttons` - Same API as `select` for printing radiobuttons instead.
+- `multiselect` - Same API as `select` but optional `$selected` `array` instead of `string`.
+- `checkboxes` - Same API as `multiselect` for printing checkboxes instead.
+- `checkbox` - Pass optional `$checked` as `boolean` and `$value` for a `value` attribute other than
+  default `1` (or `$checkboxDefaultValue`).
+
 ### Button templates
 
 [The button views](https://github.com/kontenta/kontour/tree/master/resources/views/buttons)
 generate buttom elements for common actions like "create", "update", and "destroy",
 as well as a "generic" button, and a "link"-like button.
+The button views take a `$buttonAttributes` array of html attributes to set on the button element.
 
 ```php
 @component('kontour::buttons.generic', ['type' => 'reset'])

resources/views/forms/elements/checkbox.blade.php

@@ -2,6 +2,6 @@
   @if(old($name, $checked ?? $model[$name] ?? false))
     checked
   @endif
-  value="{{ $value ?? $checkbox_default_value ?? '1' }}"
+  value="{{ $value ?? $checkboxDefaultValue ?? '1' }}"
   @include('kontour::forms.partials.inputAttributes')
 >

resources/views/forms/groups/select.blade.php

@@ -12,7 +12,11 @@
         'errorsId' => $errorsId = $controlId . ($errorsSuffix ?? 'Errors'),
       ])
     >
-      @include('kontour::forms.partials.options')
+      @include('kontour::forms.partials.options', [
+        'options' => (empty($placeholder) or collect($options)->flatten()->has('')) ?
+        $options :
+        array_merge(['' => $placeholder], $options)
+      ])
     </select>
     {{ $afterControl ?? '' }}
     @include('kontour::forms.partials.errors')

resources/views/forms/partials/checkableOption.blade.php

@@ -9,6 +9,9 @@
       @if(is_array($selected) ? in_array(strval($option_value), $selected) : $selected == strval($option_value))
         checked
       @endif
+      @if(!empty($disabledOptions) and is_array($disabledOptions) and in_array(strval($option_value), $disabledOptions))
+        disabled
+      @endif
       @include('kontour::forms.partials.inputAttributes', [
         'name' => is_array($selected) ? $name . '[]' : $name,
         'autofocusControlId' => empty($autofocusControlId) ? null : ($autofocusControlId == $groupId ? $autofocusControlId . '.0' : $autofocusControlId),

resources/views/forms/partials/inputAttributes.blade.php

@@ -9,6 +9,9 @@
 @if(!empty($autofocusControlId) and $autofocusControlId == $controlId)
   autofocus
 @endif
+@if(!empty($placeholder))
+  placeholder="{{ $placeholder }}"
+@endif
 @if(isset($controlAttributes) and is_iterable($controlAttributes))
   @foreach($controlAttributes as $attributeName => $attributeValue)
     @include('kontour::partials.attribute')

resources/views/forms/partials/options.blade.php

@@ -8,6 +8,9 @@
     @if(is_array($selected) ? in_array(strval($option_value), $selected) : $selected == strval($option_value))
       selected
     @endif
+    @if(!empty($disabledOptions) and is_array($disabledOptions) and in_array(strval($option_value), $disabledOptions))
+      disabled
+    @endif
   >{{ $option_display }}</option>
   @endforeach
   @if($optgroup)

tests/Feature/FormViewTests/CheckboxTest.php

@@ -79,7 +79,7 @@ public function test_default_value_can_be_set()
         $output = View::make('kontour::forms.checkbox', [
             'name' => 'test',
             'errors' => new MessageBag,
-            'checkbox_default_value' => 2,
+            'checkboxDefaultValue' => 2,
         ])->render();
 
         $this->assertRegExp('/<input[\S\s]*value="2"[\S\s]*>/', $output);

tests/Feature/FormViewTests/CheckboxesTest.php

@@ -210,4 +210,17 @@ public function test_autofocus_on_specific_option()
         $this->assertNotRegExp('/<input[\S\s]*id="test\.0"[\S\s]*autofocus[\S\s]*>[\S\s]*<input/', $output);
         $this->assertRegExp('/<input[\S\s]*id="test\.1"[\S\s]*autofocus[\S\s]*>/', $output);
     }
+
+    public function test_checkboxes_can_be_disabled()
+    {
+        $output = View::make('kontour::forms.checkboxes', [
+            'name' => 'test',
+            'options' => ['a' => 'A', 'b' => 'B'],
+            'errors' => new MessageBag,
+            'disabledOptions' => ['b'],
+        ])->render();
+
+        $this->assertNotRegExp('/<input[^>]*value="a"[^>]*disabled[^>]*>/', $output);
+        $this->assertRegExp('/<input[^>]*value="b"[^>]*disabled[^>]*>/', $output);
+    }
 }

tests/Feature/FormViewTests/InputAttributesTest.php

@@ -156,4 +156,16 @@ public function test_other_element_can_have_autofocus()
 
         $this->assertNotRegExp('/autofocus/', $output);
     }
+
+    public function test_can_have_placeholder()
+    {
+        $output = View::make('kontour::forms.partials.inputAttributes', [
+            'name' => 'testName',
+            'controlId' => 'testId',
+            'errors' => new MessageBag,
+            'placeholder' => 'Placeholder text',
+        ])->render();
+
+        $this->assertRegExp('/placeholder="Placeholder text"/', $output);
+    }
 }

tests/Feature/FormViewTests/MultiselectTest.php

@@ -205,4 +205,17 @@ public function test_autofocus()
 
         $this->assertRegExp('/<select[\S\s]*autofocus[\S\s]*>/', $output);
     }
+
+    public function test_options_can_be_disabled()
+    {
+        $output = View::make('kontour::forms.multiselect', [
+            'name' => 'test',
+            'options' => ['a' => 'A', 'b' => 'B'],
+            'errors' => new MessageBag,
+            'disabledOptions' => ['b'],
+        ])->render();
+
+        $this->assertNotRegExp('/<option[^>]*value="a"[^>]*disabled[^>]*>/', $output);
+        $this->assertRegExp('/<option[^>]*value="b"[^>]*disabled[^>]*>/', $output);
+    }
 }

tests/Feature/FormViewTests/RadiobuttonsTest.php

@@ -157,4 +157,17 @@ public function test_autofocus_on_specific_option()
         $this->assertNotRegExp('/<input[\S\s]*id="test\.0"[\S\s]*autofocus[\S\s]*>[\S\s]*<input/', $output);
         $this->assertRegExp('/<input[\S\s]*id="test\.1"[\S\s]*autofocus[\S\s]*>/', $output);
     }
+
+    public function test_radiobuttons_can_be_disabled()
+    {
+        $output = View::make('kontour::forms.radiobuttons', [
+            'name' => 'test',
+            'options' => ['a' => 'A', 'b' => 'B'],
+            'errors' => new MessageBag,
+            'disabledOptions' => ['b'],
+        ])->render();
+
+        $this->assertNotRegExp('/<input[^>]*value="a"[^>]*disabled[^>]*>/', $output);
+        $this->assertRegExp('/<input[^>]*value="b"[^>]*disabled[^>]*>/', $output);
+    }
 }

tests/Feature/FormViewTests/SelectTest.php

@@ -157,4 +157,41 @@ public function test_autofocus()
 
         $this->assertRegExp('/<select[\S\s]*autofocus[\S\s]*>/', $output);
     }
+
+    public function test_placeholder_becomes_first_option()
+    {
+        $output = View::make('kontour::forms.select', [
+            'name' => 'test',
+            'options' => ['a' => 'A', 'b' => 'B'],
+            'errors' => new MessageBag,
+            'placeholder' => 'Select one',
+        ])->render();
+
+        $this->assertRegExp('/<select[\S\s]*>\s*<option[\S\s]*value=""[\S\s]*>Select one<\/option>/', $output);
+    }
+
+    public function test_placeholder_does_not_replace_existing_blank_option()
+    {
+        $output = View::make('kontour::forms.select', [
+            'name' => 'test',
+            'options' => ['' => 'Existing placeholder', 'a' => 'A', 'b' => 'B'],
+            'errors' => new MessageBag,
+            'placeholder' => 'Select one',
+        ])->render();
+
+        $this->assertNotRegExp('/<option[\S\s]*value=""[\S\s]*>Select one<\/option>/', $output);
+    }
+
+    public function test_options_can_be_disabled()
+    {
+        $output = View::make('kontour::forms.select', [
+            'name' => 'test',
+            'options' => ['a' => 'A', 'b' => 'B'],
+            'errors' => new MessageBag,
+            'disabledOptions' => ['b'],
+        ])->render();
+
+        $this->assertNotRegExp('/<option[^>]*value="a"[^>]*disabled[^>]*>/', $output);
+        $this->assertRegExp('/<option[^>]*value="b"[^>]*disabled[^>]*>/', $output);
+    }
 }