diff --git a/.gitignore b/.gitignore
index 3929e4b..67392d0 100755
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ docs
vendor
coverage
.idea
+/.phpunit.result.cache
diff --git a/README.md b/README.md
index a019a58..dc946d1 100755
--- a/README.md
+++ b/README.md
@@ -2,11 +2,11 @@
Livewire component for dependant and/or searchable select inputs
-# Preview
+### Preview
-## Installation
+### Installation
You can install the package via composer:
@@ -14,9 +14,193 @@ You can install the package via composer:
composer require asantibanez/livewire-select
```
-## Usage
+### Requirements
-// TODO 😅
+This package uses `livewire/livewire` (https://laravel-livewire.com/) under the hood.
+
+It also uses TailwindCSS (https://tailwindcss.com/) for base styling.
+
+Please make sure you include both of these dependencies before using this component.
+
+### Usage
+
+In order to use this component, you must create a new Livewire component that extends from
+`LivewireSelect`
+
+You can use `make:livewire` to create a new component. For example.
+``` bash
+php artisan make:livewire CarModelSelect
+```
+
+In the `CarModelSelect` class, instead of extending from the base Livewire `Component` class,
+extend from `LivewireSelect` class. Also, remove the `render` method.
+You'll have a class similar to this snippet.
+
+``` php
+class CarModelSelect extends LivewireSelect
+{
+ //
+}
+```
+
+In this class, you must override the following methods to provide options for your select input
+```php
+public function options($searchTerm = null) : Collection
+{
+ //
+}
+```
+
+`options()` must return a collection of keyed values array items that must have at least the following
+keys: `value` and `description`. For example:
+
+```php
+public function options($searchTerm = null) : Collection
+{
+ return collect([
+ [
+ 'value' => 'honda',
+ 'description' => 'Honda',
+ ],
+ [
+ 'value' => 'mazda',
+ 'description' => 'Mazda',
+ ],
+ [
+ 'value' => 'tesla',
+ 'description' => 'Tesla',
+ ],
+ ]);
+}
+```
+
+To render the component in a view, just use the Livewire tag or include syntax
+
+ ```blade
+
+ ```
+
+You'll see on screen a select input with some custom styles with your defined values
+
+
+
+Nothing fancy there. Now, let's make another select input depend on its value.
+
+Create another component following the same process above. In this case, we will create
+a `CarModelSelect` with the following `options()` method.
+
+```php
+// In CarModelSelect component
+public function options($searchTerm = null) : Collection
+{
+ $modelsByBrand = [
+ 'tesla' => [
+ ['value' => 'Model S', 'description' => 'Model S'],
+ ['value' => 'Model 3', 'description' => 'Model 3'],
+ ['value' => 'Model X', 'description' => 'Model X'],
+ ],
+ 'honda' => [
+ ['value' => 'CRV', 'description' => 'CRV'],
+ ['value' => 'Pilot', 'description' => 'Pilot'],
+ ],
+ 'mazda' => [
+ ['value' => 'CX-3', 'description' => 'CX-3'],
+ ['value' => 'CX-5', 'description' => 'CX-5'],
+ ['value' => 'CX-9', 'description' => 'CX-9'],
+ ],
+ ];
+
+ $carBrandId = $this->getDependingValue('car_brand_id');
+
+ if ($this->hasDependency('car_brand_id') && $carBrandId != null) {
+ return collect(data_get($modelsByBrand, $carBrandId, []));
+ }
+
+ return collect([
+ ['value' => 'Model S', 'description' => 'Tesla - Model S'],
+ ['value' => 'Model 3', 'description' => 'Tesla - Model 3'],
+ ['value' => 'Model X', 'description' => 'Tesla - Model X'],
+ ['value' => 'CRV', 'description' => 'Honda - CRV'],
+ ['value' => 'Pilot', 'description' => 'Honda - Pilot'],
+ ['value' => 'CX-3', 'description' => 'Mazda - CX-3'],
+ ['value' => 'CX-5', 'description' => 'Mazda - CX-5'],
+ ['value' => 'CX-9', 'description' => 'Mazda - CX-9'],
+ ]);
+}
+```
+
+and define it in the view like this
+
+```blade
+
+```
+
+With these two snippets we have defined a select input that `depends-on` another
+select input with name `car_brand_id`. With this definition, we tell our component
+to listen to any updates on our `car_brand_id` input and be notified on changes.
+
+
+
+Notice in the `options()` method the use of two other helper methods:
+`getDependingValue` and `hasDependency`.
+
+`getDependingValue('token')` will return the value of another field, in this case
+`car_brand_id`. If `car_brand_id` has no value, then it will return `null`.
+
+`hasDependency('token')` allows us to check if our component has been specified
+to depend on other component values. This allows us to reuse the component by checking
+if a dependency has been specified in our layouts.
+
+For example if we define the same component without the `:depends-on` attribute,
+we can use the component and return all car models.
+
+```blade
+
+```
+
+It should look something like this
+
+
+
+### Searchable inputs
+
+You can define the `searchable` attribute on the component to change the behavior of your
+inputs. With `:searchable="true"` your component will change its behavior to allow searching
+the options returned in the `options()` method.
+
+ ```blade
+
+```
+
+Your input will look something like this
+
+
+
+To filter the options in the dropdown, you can use the `$searchTerm` parameter in the
+`options()` method.
+
+### Customizing the UI
+
+// TODO 😬
+
+### Advanced behavior
+
+// TODO 😬
### Testing
diff --git a/basic.gif b/basic.gif
new file mode 100644
index 0000000..cad5c14
Binary files /dev/null and b/basic.gif differ
diff --git a/dependant.gif b/dependant.gif
new file mode 100644
index 0000000..e461ca6
Binary files /dev/null and b/dependant.gif differ
diff --git a/no-dependency.gif b/no-dependency.gif
new file mode 100644
index 0000000..3ce4326
Binary files /dev/null and b/no-dependency.gif differ
diff --git a/searchable.gif b/searchable.gif
new file mode 100644
index 0000000..3bf22b7
Binary files /dev/null and b/searchable.gif differ