add doc for password input

ph7jack · ph7jack · commit 84801961260e · 2022-09-03T22:36:00.000-03:00
diff --git a/app/Http/Livewire/Documentation/PasswordInput.php b/app/Http/Livewire/Documentation/PasswordInput.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Livewire\Documentation;
+
+use App\View\Components\Layouts\Documentation;
+use Illuminate\Contracts\View\View;
+use Livewire\Component;
+
+class PasswordInput extends Component
+{
+    public string $passwordExample = <<<HTML
+    <x-inputs.password label="Secret 🙈" value="I love WireUI ❤️" />
+    HTML;
+
+    public function render(): View
+    {
+        return view('livewire.documentation.password-input')->layout(Documentation::class);
+    }
+}
diff --git a/app/View/Components/Layouts/Documentation.php b/app/View/Components/Layouts/Documentation.php
@@ -34,6 +34,10 @@ public function getSidebarMenu(): array
                 'label'  => 'Inputs',
                 'route'  => route('docs.inputs'),
             ],
+            [
+                'label' => 'Password Input',
+                'route' => route('docs.inputs.password'),
+            ],
             [
                 'label' => 'Textarea',
                 'route' => route('docs.textarea'),
diff --git a/resources/views/livewire/documentation/password-input.blade.php b/resources/views/livewire/documentation/password-input.blade.php
@@ -0,0 +1,44 @@
+<div class="space-y-10">
+    <x-slot name="summary">
+        <x-summary>
+            <x-summary.header href="#inputs" label="Password Inputs">
+                <x-summary.item href="#password-input" label="Password Input" />
+            </x-summary.header>
+
+            <x-summary.header href="#input-options" label="Inputs Options" />
+        </x-summary>
+    </x-slot>
+
+    <div>
+        <x-section.title id="inputs" title="Password Input" />
+
+        <div class="mt-5 prose text-gray-500 xl:max-w-4xl xl:mb-8 dark:text-gray-400">
+            This component will add an toggle button to see/hide the password value
+        </div>
+    </div>
+
+    <div class="space-y-4">
+        <x-code-preview
+            title="Password Input"
+            href="#password-input"
+            id="password-input"
+            language="blade"
+            :code="$passwordExample">
+            <div class="max-w-sm mx-auto">
+                <x-inputs.password label="Secret 🙈" value="I love WireUI ❤️" />
+            </div>
+        </x-code-preview>
+    </div>
+
+    <div id="input-options">
+        <x-section.title href="#input-options" title="Input Options" />
+
+        <div class="mt-5 prose xl:max-w-3xl xl:mb-8 text-gray-500">
+            <p>
+                The phone input accepts all
+                <a class="dark:text-secondary-500" href="{{ route('docs.inputs') }}#input-options">input</a>
+                options and slots
+            </p>
+        </div>
+    </div>
+</div>
diff --git a/routes/web.php b/routes/web.php
@@ -25,6 +25,7 @@
     Route::get('notifications', Documentation\Notifications::class)->name('notifications');
     Route::get('hooks', Documentation\Hooks::class)->name('hooks');
     Route::get('inputs', Documentation\Inputs::class)->name('inputs');
+    Route::get('inputs-password', Documentation\PasswordInput::class)->name('inputs.password');
     Route::get('errors', Documentation\Errors::class)->name('errors');
     Route::get('maskable-inputs', Documentation\MaskableInput::class)->name('maskable-inputs');
     Route::get('phone-input', Documentation\PhoneInput::class)->name('phone-input');
