add input number doc

ph7jack · ph7jack · commit 26cc2567a273 · 2022-09-03T23:07:35.000-03:00
diff --git a/app/Http/Livewire/Documentation/NumberInput.php b/app/Http/Livewire/Documentation/NumberInput.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Livewire\Documentation;
+
+use App\View\Components\Layouts\Documentation;
+use Illuminate\Contracts\View\View;
+use Livewire\Component;
+
+class NumberInput extends Component
+{
+    public string $passwordExample = <<<HTML
+    <x-inputs.password label="Secret 🙈" value="I love WireUI ❤️" />
+    HTML;
+
+    public string $holdExample = <<<HTML
+    <div x-data="{ count: 0 }" class="flex items-center gap-x-3">
+        <x-button x-hold.click.repeat.200ms="count--" icon="minus" />
+
+        <span class="bg-teal-600 text-white px-5 py-1.5" x-text="count"></span>
+
+        <x-button x-hold.click.repeat.200ms="count++" icon="plus" />
+    </div>
+    HTML;
+
+    public function render(): View
+    {
+        return view('livewire.documentation.number-input')->layout(Documentation::class);
+    }
+}
diff --git a/app/View/Components/Layouts/Documentation.php b/app/View/Components/Layouts/Documentation.php
@@ -38,6 +38,10 @@ public function getSidebarMenu(): array
                 'label' => 'Password Input',
                 'route' => route('docs.inputs.password'),
             ],
+            [
+                'label' => 'Number Input',
+                'route' => route('docs.inputs.number'),
+            ],
             [
                 'label' => 'Textarea',
                 'route' => route('docs.textarea'),
diff --git a/resources/views/livewire/documentation/number-input.blade.php b/resources/views/livewire/documentation/number-input.blade.php
@@ -0,0 +1,59 @@
+<div class="space-y-10">
+    <x-slot name="summary">
+        <x-summary>
+            <x-summary.header href="#inputs" label="Number Input">
+                <x-summary.item href="#number-input" label="Number Input" />
+            </x-summary.header>
+
+            <x-summary.header href="#input-options" label="Inputs Options" />
+        </x-summary>
+    </x-slot>
+
+    <div>
+        <x-section.title id="inputs" title="Number 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 easy way to manipulate numbers, like ecommerce products quantity.
+        </div>
+    </div>
+
+    <div class="space-y-4">
+        <x-code-preview
+            title="Number Input"
+            href="#number-input"
+            id="number-input"
+            language="blade"
+            :code="$passwordExample">
+            <div class="max-w-sm mx-auto">
+                <x-inputs.number label="How many Burgers?" />
+            </div>
+        </x-code-preview>
+
+        <p>
+            See more about the <x-mark>x-hold</x-mark> directive
+            <a class="underline" href="https://www.npmjs.com/package/@wireui/alpinejs-hold-directive">here</a>
+        </p>
+
+        <div x-data="{ count: 0 }" class="flex items-center gap-x-3">
+            <x-button x-hold.click.repeat.200ms="count--" icon="minus" />
+
+            <span class="bg-teal-600 text-white px-5 py-1.5 rounded-lg" x-text="count"></span>
+
+            <x-button x-hold.click.repeat.200ms="count++" icon="plus" />
+        </div>
+
+        <x-code language="blade" :contents="$holdExample" />
+    </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
@@ -26,6 +26,7 @@
     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('inputs-number', Documentation\NumberInput::class)->name('inputs.number');
     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');
