⚡ Release

.gitignore

@@ -0,0 +1,23 @@
+/vendor/
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# Laravel 4 specific
+bootstrap/compiled.php
+app/storage/
+
+# Laravel 5 & Lumen specific
+public/storage
+public/hot
+
+# Laravel 5 & Lumen specific with changed public path
+public_html/storage
+public_html/hot
+
+storage/*.key
+.env
+Homestead.yaml
+Homestead.json
+/.vagrant
+.phpunit.result.cache

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Amro Khaled
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,66 @@
+# Select2 countries list <!-- omit in toc -->
+
+Laravel package to select countries single or multiple using [select2](https://select2.org/).
+
+- [Installation](#installation)
+- [How to use](#how-to-use)
+- [Events](#events)
+  - [example](#example)
+
+## Installation
+
+`composer require akhaled/select-country`
+
+Then add `Akhaled\SelectCountry\ServiceProvider::class` to `config/app.php` providers
+
+## How to use
+
+### 1. Add the component to your view <!-- omit in toc -->
+
+```blade
+{{-- Single selection --}}
+<div>
+    <x-select-country name="selected_country"></x-select-country>
+</div>
+
+{{-- Multiple selection --}}
+<div>
+    <x-select-country name="countries[]" multiple="multiple"></x-select-country>
+</div>
+```
+
+### 2. Add scripts <!-- omit in toc -->
+
+```blade
+{{-- link-to-jquery --}
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
+@selectCountryScripts
+```
+
+### 3. Add select2 style <!-- omit in toc -->
+
+```blade
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
+```
+
+## Events
+
+You can use [select2 event](https://select2.org/programmatic-control/events) by listening to element class `.akhaled-select-country`
+
+### example
+
+```blade
+<div>
+    <x-select-country name="selected_country"></x-select-country>
+    <div id="country-code"></div>
+</div>
+
+<script>
+    $(document).delegate($('.akhaled-select-country'), 'select2:select', function(e) {
+        let country = $(e.params.data.element).data('country')
+        $('#country-code').text(`+${country.calling_code}`);
+    });
+</script>
+```
+
+> The option is linked with data-country attribute that's contain more information about the country. [See more](https://github.com/rinvex/countries)

composer.json

@@ -0,0 +1,29 @@
+{
+	"name": "akhaled/select-country",
+	"description": "Select country with Select2",
+	"type": "library",
+	"require": {
+		"rinvex/countries": "^6.1"
+	},
+	"license": "MIT",
+	"authors": [
+		{
+			"name": "Amro Khaled",
+			"email": "[email protected]",
+			"homepage": "http://akhaled.com",
+			"role": "Developer"
+		}
+	],
+	"autoload": {
+		"psr-4": {
+			"Akhaled\\SelectCountry\\": "src"
+		}
+	},
+	"extra": {
+		"laravel": {
+			"providers": [
+				"Akhaled\\SelectCountry\\ServiceProvider"
+			]
+		}
+	}
+}

src/Components/Select.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace Akhaled\SelectCountry\Components;
+
+use Illuminate\View\Component;
+
+class Select extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|string
+     */
+    public function render()
+    {
+        return view('select-country::select');
+    }
+}

src/ServiceProvider.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Akhaled\SelectCountry;
+
+use Akhaled\SelectCountry\Components\Select;
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\ServiceProvider as LaravelServiceProvider;
+
+class ServiceProvider extends LaravelServiceProvider
+{
+    /**
+     * Register services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        // load views
+        $this->loadViewsFrom(__DIR__ . '/views', 'select-country');
+
+        // inject required javascript
+        Blade::include('select-country::js', 'selectCountryScripts');
+
+        // register blade component
+        Blade::component('select-country', Select::class);
+
+        // publish config
+        $this->publishes([__DIR__ . '/config/select-country.php' => config_path('select-country.php')], 'select-country');
+    }
+
+    /**
+     * Bootstrap services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        // merge configurations
+        $this->mergeConfigFrom(__DIR__ . '/config/select-country.php', 'select-country');
+    }
+}

src/config/select-country.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+    //
+];

src/views/js.blade.php

@@ -0,0 +1,28 @@
+<script>
+    $(document).ready(function() {
+        const selector = '.akhaled-select-country';
+
+        $(selector).select2()
+        // $(document).delegate(selector, 'select2:select', whenOptionSelected)
+    });
+
+    function whenOptionSelected(e) {
+        if (!e || !e.params || !e.params.data || !e.params.data.element) return console.error(
+            'Cannot find option element');
+
+        // event.country = $(e.params.data.element).data('country');
+
+        if ('createEvent' in document) {
+            var event = new CustomEvent('country:change', {
+                    country: $(e.params.data.element).data('country')
+                })
+
+            this.addEventListener('country:change', function (e) {
+                console.log(e)
+            }, false);
+
+            this.dispatchEvent(event);
+        }
+    }
+
+</script>

src/views/select.blade.php

@@ -0,0 +1,9 @@
+<div>
+    <select {{ $attributes->merge([
+        'class' => 'akhaled-select-country',
+    ]) }}>
+        @foreach (countries() as $country_code => $country)
+            <option value="{{ $country_code }}" data-country='@json($country)'>{{ $country['name'] }}</option>
+        @endforeach
+    </select>
+</div>