Merge pull request #11 from tallstackui/1.2.0

1.2.0

app/Enums/Example.php

@@ -7,6 +7,7 @@
 use App\Enums\Examples\DarkTheme;
 use App\Enums\Examples\Form\Checkbox;
 use App\Enums\Examples\Form\Input;
+use App\Enums\Examples\Form\Number;
 use App\Enums\Examples\Form\Password;
 use App\Enums\Examples\Form\Radio;
 use App\Enums\Examples\Form\Textarea;
@@ -26,6 +27,7 @@
 use App\Enums\Examples\Ui\Dropdown;
 use App\Enums\Examples\Ui\Error;
 use App\Enums\Examples\Ui\Icon;
+use App\Enums\Examples\Ui\Loading;
 use App\Enums\Examples\Ui\Modal;
 use App\Enums\Examples\Ui\Select;
 use App\Enums\Examples\Ui\Slide;
@@ -55,6 +57,7 @@ enum Example: string
     case Error = Error::class;
     case Icon = Icon::class;
     case Input = Input::class;
+    case Number = Number::class;
     case Installation = Installation::class;
     case Password = Password::class;
     case Radio = Radio::class;
@@ -68,6 +71,7 @@ enum Example: string
     case Toggle = Toggle::class;
     case Tooltip = Tooltip::class;
     case Modal = Modal::class;
+    case Loading = Loading::class;
     case Welcome = Welcome::class;
 
     public function variables(): array

app/Enums/Examples/Configuration.php

@@ -31,6 +31,10 @@ class Configuration
             /* Alloweds: sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl */
             'size' => '2xl',
         ],
+        'loading' => [
+            'blur' => false,
+            'opacity' => true,
+        ],
         'slide' => [
             'z-index' => 'z-50',
             'blur' => false,
@@ -46,10 +50,6 @@ class Configuration
             /* Alloweds: top-right, top-left, bottom-right, bottom-left */
             'position' => 'top-right',
         ],
-        'tooltip' => [
-            /* Enable theme variation between light/dark theme */
-            'thematic' => false,
-        ],
     ],
 
     // ...

app/Enums/Examples/Form/Number.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Enums\Examples\Form;
+
+class Number
+{
+    public const BASIC = <<<'HTML'
+    <x-number wire:model.live="quantity" />
+    HTML;
+
+    public const LABEL_HINT = <<<'HTML'
+    <x-number label="Quantity"
+              hint="Press the plus button to increase one by one"
+              wire:model.live="quantity" />
+    HTML;
+
+    public const MIN_MAX = <<<'HTML'
+    <x-number min="1" max="10" wire:model.live="quantity" />
+    HTML;
+
+    public const DELAY = <<<'HTML'
+    <x-number delay="1" min="1" max="10" wire:model.live="quantity" />
+    HTML;
+
+    public const ICON = <<<'HTML'
+    <x-number wire:model.live="quantity" chevron />
+    HTML;
+
+    public const PERSONALIZATION = <<<'HTML'
+    TallStackUi::personalize()
+        ->form('number')
+        ->block('block', 'classes');
+    HTML;
+}

app/Enums/Examples/Personalization/SoftPersonalization.php

@@ -189,22 +189,10 @@ public function boot(): void
            TallStackUi::personalize()
                ->form('input')
                ->block('input.class.base')
-               ->replace('rounded-md', 'rounded-full'); // string or array [tl! highlight]
-
-           TallStackUi::personalize()
-               ->form('input')
-               ->block('input.class.base')
-               ->remove('rounded-md'); // string or array [tl! highlight]
-
-           TallStackUi::personalize()
-               ->form('input')
-               ->block('input.class.base')
-               ->append('px-4'); // string only [tl! highlight]
-
-           TallStackUi::personalize()
-               ->form('input')
-               ->block('input.class.base')
-               ->prepend('py-4'); // string only [tl! highlight]
+               ->replace('rounded-md', 'rounded-full') // string or array
+               ->remove('rounded-md') // string or array
+               ->append('px-4') // string only
+               ->prepend('py-4'); // string only
         }
     }
     HTML;

app/Enums/Examples/Ui/Loading.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Enums\Examples\Ui;
+
+class Loading
+{
+    public const INTERACTION = <<<'HTML'
+    <x-loading wire:loading.delay.longest wire:target="save" /> {{-- [tl! remove] --}}
+
+    <x-loading delay="longest" loading="save" /> {{-- [tl! add] --}}
+    HTML;
+
+    public const USAGE = <<<'HTML'
+    <!-- resources/views/livewire/post.blade.php -->
+
+    <div>
+        <x-loading /> {{-- [tl! add] --}}
+
+        <form wire:submit="save">
+            <input type="text" wire:model="title">
+
+            <input type="text" wire:model="content">
+
+            <button type="submit">Save</button>
+        </form>
+    </div>
+    HTML;
+
+    public const BASIC = <<<'HTML'
+    <x-loading />
+    HTML;
+
+    public const TEXT = <<<'HTML'
+    <x-loading>
+        <div class="flex items-center text-primary-500 dark:text-white">
+            <x-icon name="arrow-path" class="mr-2 h-10 w-10 animate-spin" />
+            Loading ...
+        </div>
+    </x-loading>
+    HTML;
+
+    public const TARGET_DELAY = <<<'HTML'
+    <!-- You can specify the target of the delay (method or property) -->
+
+    <!-- You can use all the Livewire delay options: shortest, shorter, short, long, longer, longest -->
+
+    <x-loading loading="save" delay="longest" />
+    HTML;
+
+    public const PERSONALIZATION = <<<'HTML'
+    TallStackUi::personalize()
+        ->loading()
+        ->block('block', 'classes');
+    HTML;
+}

app/Enums/Examples/Ui/Tooltip.php

@@ -5,6 +5,28 @@
 class Tooltip
 {
     public const BASIC = <<<'HTML'
+    <x-tooltip text="TallStackUI" />
+    HTML;
+
+    public const POSITIONS = <<<'HTML'
+    <!-- Available Positions:
+         bottom,
+         bottom-start,
+         bottom-end,
+         top,
+         top-start,
+         top-end,
+         left,
+         left-start,
+         left-end,
+         right,
+         right-start,
+         right-end,
+         auto
+         auto-start
+         auto-end
+     -->
+
     <x-tooltip text="Top" position="top" />
     <x-tooltip text="Bottom" position="bottom" />
     <x-tooltip text="Left" position="left" />

app/Http/Controllers/Documentation/Form/Number.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Http\Controllers\Documentation\Form;
+
+use App\Enums\Example;
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class Number extends Controller
+{
+    public function __invoke(Request $request)
+    {
+        return view('documentation.form.number', Example::Number->variables());
+    }
+}

app/Http/Controllers/Documentation/Ui/Dialog.php → app/Http/Controllers/Documentation/Interactions/Dialog.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Http\Controllers\Documentation\Ui;
+namespace App\Http\Controllers\Documentation\Interactions;
 
 use App\Enums\Example;
 use App\Http\Controllers\Controller;
@@ -10,6 +10,6 @@ class Dialog extends Controller
 {
     public function __invoke(): View
     {
-        return view('documentation.ui.dialog', Example::Dialog->variables());
+        return view('documentation.interactions.dialog', Example::Dialog->variables());
     }
 }

app/Http/Controllers/Documentation/Ui/Toast.php → app/Http/Controllers/Documentation/Interactions/Toast.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Http\Controllers\Documentation\Ui;
+namespace App\Http\Controllers\Documentation\Interactions;
 
 use App\Enums\Example;
 use App\Http\Controllers\Controller;
@@ -10,6 +10,6 @@ class Toast extends Controller
 {
     public function __invoke(): View
     {
-        return view('documentation.ui.toast', Example::Toast->variables());
+        return view('documentation.interactions.toast', Example::Toast->variables());
     }
 }

app/Http/Controllers/Documentation/Loading.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers\Documentation;
+
+use App\Enums\Example;
+use App\Http\Controllers\Controller;
+
+class Loading extends Controller
+{
+    public function __invoke()
+    {
+        return view('documentation.ui.loading', Example::Loading->variables());
+    }
+}

app/View/Components/OnThisPage.php

@@ -7,7 +7,7 @@
 
 class OnThisPage extends Component
 {
-    public function __construct(public ?array $contents = [])
+    public function __construct(public ?array $contents = [], public ?bool $mobile = false)
     {
         $this->contents();
     }