diff --git a/.travis.yml b/.travis.yml index 24c2d6c..93c1e53 100755 --- a/.travis.yml +++ b/.travis.yml @@ -4,6 +4,7 @@ php: - 7.1 - 7.2 - 7.3 + - 8.0 env: matrix: diff --git a/README.md b/README.md index edcb0cc..b8726bb 100755 --- a/README.md +++ b/README.md @@ -6,7 +6,9 @@ Livewire component for dependant and/or searchable select inputs ![preview](https://github.com/asantibanez/livewire-select/raw/master/preview.gif) -### Installation +### Installation & Basic Usage + +#### Installing Livewire Select You can install the package via composer: @@ -14,6 +16,37 @@ You can install the package via composer: composer require asantibanez/livewire-select ``` +#### Including assets + +Add the following Blade directives in the head tag, and before the end body tag in your template + +```blade +... + @livewireSelectStyles + + + ... + + @livewireSelectScripts + + +``` + +Livewire Select includes a set up using different parts of the TALL stack assets like the [Laravel livewire](https://laravel-livewire.com/), [Alpine.js](https://alpinejs.dev/) and [Tailwindcss](https://tailwindcss.com/) styles and scripts. +After adding these directives you may need to clear the view cache. + +```bash +php artisan view:clear +``` + +These directives are fine for a dev environment, however, if you want to use your own livewire, Tailwindcss or Alpine.js setup, you can disable these assets from being loaded with the Laravel views directive. + +You can define which assets are included by setting the option parameter in the directive: + +```blade +@livewireSelectScripts(livewire-select, livewire-select-multiple) +``` + ### Requirements This package uses `livewire/livewire` (https://laravel-livewire.com/) under the hood. @@ -179,7 +212,7 @@ You can define the `searchable` attribute on the component to change the behavio inputs. With `:searchable="true"` your component will change its behavior to allow searching the options returned in the `options()` method. - ```blade +```blade +``` + To filter the options in the dropdown, you can use the `$searchTerm` parameter in the `options()` method. diff --git a/resources/views/multiple.blade.php b/resources/views/multiple.blade.php new file mode 100644 index 0000000..8196909 --- /dev/null +++ b/resources/views/multiple.blade.php @@ -0,0 +1,90 @@ +
+ +
+
+
+
+
+ +
+ +
+
+
+ + +
+
+
+
+
+
+ +
+
+
+
+
+
diff --git a/resources/views/select.blade.php b/resources/views/select.blade.php index 18adc57..02624b9 100644 --- a/resources/views/select.blade.php +++ b/resources/views/select.blade.php @@ -2,12 +2,21 @@
@if(!$searchable && $shouldShow) - @include($defaultView, [ - 'name' => $name, - 'options' => $options, - 'placeholder' => $placeholder, - 'styles' => $styles, - ]) + @if(!$multiple) + @include($defaultView, [ + 'name' => $name, + 'options' => $options, + 'placeholder' => $placeholder, + 'styles' => $styles, + ]) + @else + @include($multipleView, [ + 'name' => $name, + 'options' => $options, + 'placeholder' => $placeholder, + 'styles' => $styles, + ]) + @endif @endif
diff --git a/src/LivewireSelect.php b/src/LivewireSelect.php index 084556f..19d9b4a 100755 --- a/src/LivewireSelect.php +++ b/src/LivewireSelect.php @@ -4,6 +4,7 @@ use Illuminate\Support\Collection; use Livewire\Component; +use Livewire\Livewire; /** * Class LivewireSelect @@ -37,6 +38,8 @@ class LivewireSelect extends Component public $searchable; public $searchTerm; + public $multiple; + public $dependsOn; public $dependsOnValues; @@ -46,6 +49,7 @@ class LivewireSelect extends Component public $selectView; public $defaultView; + public $multipleView; public $searchView; public $searchInputView; public $searchOptionsContainer; @@ -57,12 +61,14 @@ public function mount($name, $value = null, $placeholder = 'Select an option', $searchable = false, + $multiple = false, $dependsOn = [], $dependsOnValues = [], $waitForDependenciesToShow = false, $noResultsMessage = 'No options found', $selectView = 'livewire-select::select', $defaultView = 'livewire-select::default', + $multipleView = 'livewire-select::multiple', $searchView = 'livewire-select::search', $searchInputView = 'livewire-select::search-input', $searchOptionsContainer = 'livewire-select::search-options-container', @@ -79,6 +85,8 @@ public function mount($name, $this->searchable = $searchable; $this->searchTerm = ''; + $this->multiple = !!$multiple; + $this->dependsOn = $dependsOn; $this->dependsOnValues = collect($this->dependsOn) @@ -97,6 +105,7 @@ public function mount($name, $this->selectView = $selectView; $this->defaultView = $defaultView; + $this->multipleView = $multipleView; $this->searchView = $searchView; $this->searchInputView = $searchInputView; $this->searchOptionsContainer = $searchOptionsContainer; @@ -155,7 +164,7 @@ public function getListeners() return collect($this->dependsOn) ->mapWithKeys(function ($key) { return ["{$key}Updated" => 'updateDependingValue']; - }) + })->merge($this->listeners) ->toArray(); } @@ -206,6 +215,124 @@ public function styles() return config('livewire-select')['styles']; } + public function css($options = null) { + $assets = [ + 'livewire' => Livewire::styles(), + 'tailwindcss' => '', + ]; + + return $this->renderAssets('css', $assets, $options); + } + + public function js($options = null) { + $assets = [ + 'livewire' => Livewire::scripts(), + 'alpine' => '', + 'livewire-select' => '', + 'livewire-select-multiple' => '' + ]; + + return $this->renderAssets('js', $assets, $options); + } + public function render() { if ($this->searchable) { @@ -238,4 +365,45 @@ public function render() 'styles' => $styles, ]); } + + /** + * Generate a string of required assets + * + * @param array $assets + * @param array $options + * + * @return string + */ + private function renderAssets($assetType = 'js', $assets = [], $options = null) { + if ($options) { + $options = explode(',', $options); + $options = array_map('trim', $options); + + // include mandatory assets + switch ($assetType) { + case 'js': + if (!in_array('livewire-select', $options)) { + $options[] = 'livewire-select'; + } + break; + default: + break; + } + + $assetArray = []; + + foreach ($assets as $asset => $link) { + if (in_array($asset, $options)) { + $assetArray[] = $link; + } + } + } else { + $assetArray = $assets; + } + + $assetStr = implode(PHP_EOL, $assetArray); + return << config_path('livewire-select.php'), ], 'livewire-select-config'); - Blade::directive('livewireSelectScripts', function () { - return <<<'HTML' - -HTML; + $livewireSelect = new LivewireSelect; + Blade::directive('livewireSelectScripts', function ($options) use ($livewireSelect) { + return $livewireSelect->js($options); + }); + Blade::directive('livewireSelectStyles', function ($options) use ($livewireSelect) { + return $livewireSelect->css($options); }); }