Init seed 🌱

.gitignore

@@ -0,0 +1 @@
+/vendor/

README.md

@@ -0,0 +1,53 @@
+<div style="text-align: center;">
+
+![Packagist Downloads](https://img.shields.io/packagist/dt/yemeni-open-source/blade-realtime-input?color=blue&label=Downloads&logo=packagist&logoColor=white)
+![Packagist Version](https://img.shields.io/packagist/v/yemeni-open-source/blade-realtime-input?color=green&label=Version&logo=laravel&logoColor=white)
+[![GitHub license](https://img.shields.io/github/license/yemeni-open-source/blade-realtime-input)](https://github.com/yemeni-open-source/blade-realtime-input/blob/main/LICENSE)
+</div>
+
+# Laravel Realtime input
+
+Enjoy realtime input validation by passing your rules in your input itself.
+
+## Requirments
+
+This package is tested with Laravel v8 and it should work on Laravel v7 and v9
+
+|||
+|-|-|
+|php| ^7.4&#124;^8.0|
+|Composer| ^2.3|
+|Laravel| ^8.0|
+
+## Installation
+
+Install the package by using composer:
+
+> ```composer require yemeni-open-source/blade-realtime-input```
+
+## Basic Usage
+
+
+
+```blade
+<x-realtime-input::forms.string-input name="username" rules="required|min:5" />
+```
+
+## Advance Usage
+
+You can add ```id```, ```class``` and ```type``` to your input like following
+
+```blade
+<x-realtime-input::forms.string-input name="username" rules="required|min:5" id="user" class="form-control" />
+```
+
+
+You can add array name like following
+
+```blade
+<x-realtime-input::forms.string-input name="username[]" rules="required|min:5" id="user" class="form-control" />
+```
+
+## License
+
+The MIT License (MIT). Please see [MIT license](LICENSE) File for more information.

composer.json

@@ -0,0 +1,29 @@
+{
+    "name": "yemeni-open-source/blade-realtime-input",
+    "description": "Enjoy realtime input validation by passing your rules in your input itself.",
+    "type": "library",
+    "license": "MIT",
+    "autoload": {
+        "psr-4": {
+            "YemeniOpenSource\\BladeRealtimeInput\\": "src/"
+        }
+    },
+    "authors": [
+        {
+            "name": "muathye",
+            "email": "[email protected]"
+        }
+    ],
+    "minimum-stability": "dev",
+    "require": {
+        "php": "^7.4|^8.0",
+        "illuminate/support": "^7.0|^8.0|^9.0"
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "YemeniOpenSource\\BladeRealtimeInput\\BladeRealtimeInputServiceProvider"
+            ]
+        }
+    }
+}

resources/views/components/forms/string-input.blade.php

@@ -0,0 +1,41 @@
+<div>
+    <input name="{{ $inputName }}" {{ !isset($type) ?'': "type=$type" }} {{ !isset($class) ?'': "class=$class" }} {{ !isset($id) ?'': "id=$id" }} {{ !isset($placeholder) ?'': "placeholder=$placeholder" }}
+        placeholder="" onchange="stringInputUpdated(this)" />
+
+    <script>
+        function stringInputUpdated(element) {
+            let inputIndex = "{{ str_replace('[]', '', $inputName) }}";
+            let inputRules = "{{ $inputRules }}"
+            let data = {
+                inputIndex: element.value,
+                rules: {
+                    inputIndex: inputRules
+                }
+            };
+            fetch(
+                "{{ route('realtime-input.validator') }}", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json"
+                    },
+                    body: JSON.stringify(data),
+                }
+            ).then(response => {
+                // ✅ parse the response
+                return response.json();
+            }).then(json => {
+                // ✅ remove old error response
+                element.nextElementSibling.remove();
+                // ✅ write the error response
+                var tag = document.createElement("span");
+                tag.style.color = 'red';
+                var text = document.createTextNode(json.inputIndex);
+                tag.appendChild(text);
+                element.parentNode.insertBefore(tag, element.nextSibling);
+            }).catch(error => {
+                // ❎ handle the error
+                console.log(error);
+            });
+        }
+    </script>
+</div>

src/BladeRealtimeInputServiceProvider.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace YemeniOpenSource\BladeRealtimeInput;
+
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\ServiceProvider;
+use YemeniOpenSource\BladeRealtimeInput\Components\Forms\StringInput;
+
+class BladeRealtimeInputServiceProvider extends ServiceProvider
+{
+    /**
+     * Perform post-registration booting of services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        // Blade::component('string-input', StringInput::class);
+        Blade::componentNamespace('YemeniOpenSource\\BladeRealtimeInput\\Components\\Forms', 'realtime-input');
+        $this->loadViewsFrom(__DIR__.'/../resources/views', 'realtime-input');
+        $this->loadRoutesFrom(__DIR__.'/routes.php');
+    }
+}

src/Components/Forms/StringInput.php

@@ -0,0 +1,49 @@
+<?php
+
+declare(strict_types=1);
+
+namespace YemeniOpenSource\BladeRealtimeInput\Components\Forms;
+
+use Closure;
+use Illuminate\View\Component;
+
+class StringInput extends Component
+{
+    public $name;
+    public $rules;
+    public $type = 'text';
+    public $id = '';
+    public $class = '';
+    public $placeholder = '';
+
+    /**
+     * Create the component instance.
+     *
+     * @param  string  $name
+     * @param  array|string  $rules
+     * @param  string  $id
+     * @param  string  $class
+     * @param  string  $placeholder
+     * @param  boolean  $is_repeated
+     * @return void
+     */
+    public function __construct($name, $rules, $type='text', $id = '', $class = '', $placeholder = '')
+    {
+        $this->name = $name;
+        $this->rules = $rules;
+        $this->type = $type;
+        $this->id = $id;
+        $this->class = $class;
+        $this->placeholder = $placeholder;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('realtime-input::components.forms.string-input');
+    }
+}

src/routes.php

@@ -0,0 +1,13 @@
+<?php
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Route;
+use Illuminate\Support\Facades\Validator;
+
+Route::post('validate', function (Request $request) {
+    $validator = Validator::make($request->all(), $request->rules);
+    if ($validator->fails()) {
+        return response()->json($validator->errors() );
+    }
+    return response()->json(['inputIndex' => '']);
+})->name('realtime-input.validator');