Skip to content

Commit

Permalink
because of some select issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlantz
mlantz committed Jan 29, 2024
1 parent 5a8817b commit 6fd8a97
Show file tree
Hide file tree
Showing 7 changed files with 55 additions and 18 deletions.
1 change: 1 addition & 0 deletions config/forms.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@

'group-class' => 'form-group mb-3',
'input-class' => 'form-control',
'select-class' => 'form-select',
'range-class' => 'form-range',
'label-class' => 'control-label',
'label-check-class' => 'form-check-label',
Expand Down
28 changes: 21 additions & 7 deletions src/Fields/Bootstrap/Select2.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,17 @@ public static function styles($id, $options)
{
return <<<CSS
@media (prefers-color-scheme: dark) {
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
color: #FFF;
}
.select2-container--bootstrap-5 .select2-selection {
background-color: var(--bs-tertiary-bg);
border: #111;
background-color: var(--app-input-bg, var(--bs-tertiary-bg));
border: 1px solid var(--bs-border-color);
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
background-color: var(--bs-tertiary-bg);
border: #111 1px solid;
background-color: var(--app-input-bg, var(--bs-tertiary-bg));
border: 1px solid var(--bs-border-color);
color: #FFF;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
Expand All @@ -61,11 +65,11 @@ public static function styles($id, $options)
color: #FFF;
}
.select2-container--bootstrap-5 .select2-dropdown {
background-color: var(--bs-tertiary-bg);
background-color: var(--app-input-bg, var(--bs-tertiary-bg));
color: #FFF;
}
.select2-container--bootstrap-5 .select2-dropdown {
border: 1px solid #111;
border: 1px solid var(--bs-border-color);
}
}
Expand All @@ -80,6 +84,7 @@ public static function styles($id, $options)
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
background-color: var(--bs-primary);
color: #FFF;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection {
box-shadow: none !important;
Expand All @@ -96,7 +101,7 @@ public static function onLoadJs($id, $options)
public static function onLoadJsData($id, $options)
{
return json_encode([

'searchable' => (isset($options['searchable']) && $options['searchable'] === true) ?? false,
]);
}

Expand All @@ -105,11 +110,20 @@ public static function js($id, $options)
return <<<JS
_formsjs_bootstrapSelect2Field = function (element) {
if (! element.getAttribute('data-formsjs-rendered')) {
let _config = JSON.parse(element.getAttribute('data-formsjs-onload-data'));
let _id = element.getAttribute('id');
$(element).select2({
minimumResultsForSearch: _config.searchable ? 3 : Infinity,
theme: "bootstrap-5",
});
$(element).on('select2:select', function (e) {
let _id = $(element).closest('form').attr('id');
let _event = new Event('change', { 'bubbles': true });
document.querySelector('#'+_id).dispatchEvent(_event);
});
}
}
JS;
Expand Down
2 changes: 2 additions & 0 deletions src/Services/FieldConfigProcessor.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -448,6 +448,8 @@ public function searchable()
'data-live-search' => 'true',
]);

$this->customOption('searchable', true);

return $this;
}

Expand Down
4 changes: 4 additions & 0 deletions src/Services/FieldMaker.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,10 @@ protected function parseOptions($name, $options)
$default['class'] = config('forms.form.range-class', 'form-range');
}

if (in_array($options['type'], ['select', 'relationship'])) {
$default['class'] = config('forms.form.select-class', 'form-select');
}

$options['attributes'] = array_merge($default, $options['attributes'] ?? []);

return $options;
Expand Down
10 changes: 5 additions & 5 deletions tests/Unit/FieldConfigProcessorTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ public function testNullValue()
'Ninja' => 3,
])->canSelectNone();

$this->assertEquals('<div class="form-group"><label class="control-label" for="Field">Field</label><select class="form-control" id="Field" name="field"><option value="" selected>None</option><option value="1">Superman</option><option value="2">Batman</option><option value="3">Ninja</option></select></div>', (string) $field);
$this->assertEquals('<div class="form-group"><label class="control-label" for="Field">Field</label><select class="form-select" id="Field" name="field"><option value="" selected>None</option><option value="1">Superman</option><option value="2">Batman</option><option value="3">Ninja</option></select></div>', (string) $field);
}

public function testSubmitOnChange()
Expand All @@ -208,7 +208,7 @@ public function testSubmitOnChange()
'Ninja' => 3,
])->canSelectNone()->submitOnChange();

$this->assertEquals('<div class="form-group"><label class="control-label" for="Field">Field</label><select class="form-control" id="Field" data-formsjs-onchange="FormsJS_submit" name="field"><option value="" selected>None</option><option value="1">Superman</option><option value="2">Batman</option><option value="3">Ninja</option></select></div>', (string) $field);
$this->assertEquals('<div class="form-group"><label class="control-label" for="Field">Field</label><select class="form-select" id="Field" data-formsjs-onchange="FormsJS_submit" name="field"><option value="" selected>None</option><option value="1">Superman</option><option value="2">Batman</option><option value="3">Ninja</option></select></div>', (string) $field);
}

public function testSubmitOnKeyUp()
Expand All @@ -219,7 +219,7 @@ public function testSubmitOnKeyUp()
'Ninja' => 3,
])->canSelectNone()->submitOnKeyUp();

$this->assertEquals('<div class="form-group"><label class="control-label" for="Field">Field</label><select class="form-control" id="Field" data-formsjs-onkeyup="FormsJS_submit" name="field"><option value="" selected>None</option><option value="1">Superman</option><option value="2">Batman</option><option value="3">Ninja</option></select></div>', (string) $field);
$this->assertEquals('<div class="form-group"><label class="control-label" for="Field">Field</label><select class="form-select" id="Field" data-formsjs-onkeyup="FormsJS_submit" name="field"><option value="" selected>None</option><option value="1">Superman</option><option value="2">Batman</option><option value="3">Ninja</option></select></div>', (string) $field);
}

public function testHiddenUnless()
Expand All @@ -230,7 +230,7 @@ public function testHiddenUnless()
'Ninja' => 3,
])->canSelectNone()->hiddenUnless('Previous_Field', 'visible');

$this->assertEquals('<div class="form-group"><label class="control-label" for="Field">Field</label><select class="form-control" id="Field" name="field"><option value="" selected>None</option><option value="1">Superman</option><option value="2">Batman</option><option value="3">Ninja</option></select></div>', (string) $field);
$this->assertEquals('<div class="form-group"><label class="control-label" for="Field">Field</label><select class="form-select" id="Field" name="field"><option value="" selected>None</option><option value="1">Superman</option><option value="2">Batman</option><option value="3">Ninja</option></select></div>', (string) $field);

$assets = app(FormAssets::class)->render();

Expand All @@ -245,7 +245,7 @@ public function testNullLabel()
'Ninja' => 3,
])->canSelectNone()->noneLabel('Nada');

$this->assertEquals('<div class="form-group"><label class="control-label" for="Field">Field</label><select class="form-control" id="Field" name="field"><option value="" selected>Nada</option><option value="1">Superman</option><option value="2">Batman</option><option value="3">Ninja</option></select></div>', (string) $field);
$this->assertEquals('<div class="form-group"><label class="control-label" for="Field">Field</label><select class="form-select" id="Field" name="field"><option value="" selected>Nada</option><option value="1">Superman</option><option value="2">Batman</option><option value="3">Ninja</option></select></div>', (string) $field);
}

public function testSortable()
Expand Down
12 changes: 6 additions & 6 deletions tests/Unit/FieldMakerTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ public function testCreateMultipleSelect()
$field = $this->fieldMaker->make('countries', $config, $object);

$this->assertTrue(is_string($field));
$this->assertEquals('<div class="form-group"><label class="control-label" for="Countries">Countries</label><select class="form-control" id="Countries" multiple name="countries[]"><option value="Canada">Canada</option><option value="America">America</option><option value="UK">UK</option><option value="Ireland">Ireland</option></select></div>', $field);
$this->assertEquals('<div class="form-group"><label class="control-label" for="Countries">Countries</label><select class="form-select" id="Countries" multiple name="countries[]"><option value="Canada">Canada</option><option value="America">America</option><option value="UK">UK</option><option value="Ireland">Ireland</option></select></div>', $field);
}

public function testCreateMultipleNestedString()
Expand Down Expand Up @@ -218,7 +218,7 @@ public function testCreateRelationshipWithoutObject()
$field = $this->fieldMaker->make('jobs', $config);

$this->assertTrue(is_string($field));
$this->assertEquals('<div class="form-group"><label class="control-label" for="Jobs">Jobs</label><select class="form-control" id="Jobs" multiple name="jobs[]"><option value="1">Worker</option><option value="2">BlackSmith</option><option value="3">Police</option><option value="4">Brogrammer</option></select></div>', $field);
$this->assertEquals('<div class="form-group"><label class="control-label" for="Jobs">Jobs</label><select class="form-select" id="Jobs" multiple name="jobs[]"><option value="1">Worker</option><option value="2">BlackSmith</option><option value="3">Police</option><option value="4">Brogrammer</option></select></div>', $field);
}

public function testCreateRelationshipWithoutObjectWithForcedOptions()
Expand Down Expand Up @@ -255,7 +255,7 @@ public function testCreateRelationshipWithoutObjectWithForcedOptions()
$field = $this->fieldMaker->make('jobs', $config);

$this->assertTrue(is_string($field));
$this->assertEquals('<div class="form-group"><label class="control-label" for="Jobs">Jobs</label><select class="form-control" id="Jobs" multiple name="jobs[]"><option value="1">Worker</option><option value="2">BlackSmith</option><option value="3">Police</option><option value="4">Brogrammer</option></select></div>', $field);
$this->assertEquals('<div class="form-group"><label class="control-label" for="Jobs">Jobs</label><select class="form-select" id="Jobs" multiple name="jobs[]"><option value="1">Worker</option><option value="2">BlackSmith</option><option value="3">Police</option><option value="4">Brogrammer</option></select></div>', $field);
}

public function testCreateRelationshipHasOne()
Expand Down Expand Up @@ -295,7 +295,7 @@ public function testCreateRelationshipHasOne()
$field = $this->fieldMaker->make('jobs', $config, $user);

$this->assertTrue(is_string($field));
$this->assertEquals('<div class="form-group"><label class="control-label" for="Jobs">Jobs</label><select class="form-control" id="Jobs" name="jobs"><option value="1">Worker</option><option value="2">BlackSmith</option><option value="3">Police</option><option value="4">Brogrammer</option></select></div>', $field);
$this->assertEquals('<div class="form-group"><label class="control-label" for="Jobs">Jobs</label><select class="form-select" id="Jobs" name="jobs"><option value="1">Worker</option><option value="2">BlackSmith</option><option value="3">Police</option><option value="4">Brogrammer</option></select></div>', $field);
}

public function testCreateRelationshipCustom()
Expand Down Expand Up @@ -339,7 +339,7 @@ public function testCreateRelationshipCustom()
$field = $this->fieldMaker->make('jobs', $config, $user);

$this->assertTrue(is_string($field));
$this->assertEquals('<div class="form-group"><label class="control-label" for="Jobs">Jobs</label><select class="form-control" id="Jobs" name="jobs"><option value="4">Brogrammer</option></select></div>', $field);
$this->assertEquals('<div class="form-group"><label class="control-label" for="Jobs">Jobs</label><select class="form-select" id="Jobs" name="jobs"><option value="4">Brogrammer</option></select></div>', $field);
}

public function testCreateRelationshipCustomMultiple()
Expand Down Expand Up @@ -377,7 +377,7 @@ public function testCreateRelationshipCustomMultiple()
$field = $this->fieldMaker->make('ideas', $config, $user);

$this->assertTrue(is_string($field));
$this->assertEquals('<div class="form-group"><label class="control-label" for="Ideas">Ideas</label><select class="form-control" id="Ideas" multiple name="ideas[]"><option value="1" selected>Thing</option><option value="2" selected>Foo</option><option value="3">Bar</option><option value="4">Drink</option></select></div>', $field);
$this->assertEquals('<div class="form-group"><label class="control-label" for="Ideas">Ideas</label><select class="form-select" id="Ideas" multiple name="ideas[]"><option value="1" selected>Thing</option><option value="2" selected>Foo</option><option value="3">Bar</option><option value="4">Drink</option></select></div>', $field);
}

public function testMakeTableWithObject()
Expand Down
16 changes: 16 additions & 0 deletions tests/Unit/FieldTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
use Illuminate\Support\Facades\Route;
use Grafite\Forms\Fields\DatetimeLocal;
use Grafite\Forms\Fields\CheckboxInline;
use Grafite\Forms\Fields\Bootstrap\Select2;
use Grafite\Forms\Fields\PasswordWithReveal;

class FieldTest extends TestCase
Expand Down Expand Up @@ -228,6 +229,21 @@ public function testSelect()
$this->assertEquals('joe', $field['options']['joe']);
}

public function testSelect2()
{
$field = Select2::make('field', [
'options' => [
'joe' => 'joe',
'john' => 'john',
'katie' => 'katie',
]
])->searchable()->toArray();

$this->assertStringContainsString('minimumResultsForSearch: _config.searchable ? 3 : Infinity,', $field['assets']['js']);
$this->assertEquals('select', $field['type']);
$this->assertEquals('joe', $field['options']['joe']);
}

public function testSelectWithOptionsMethod()
{
$field = Select::make('field')
Expand Down

0 comments on commit 6fd8a97

Please sign in to comment.