--wip-- [skip ci]

app/View/Form/Text.php

@@ -32,6 +32,13 @@ class Text extends Component
                 @endif
                 <div class="relative flex-none flex">
                     <input
+                        @error($name) x-init="tippy($el, {
+                            content: () => '@error($name){{$message}}@enderror',
+                            showOnCreate: true,
+                            theme: 'danger',
+                            placement: 'top-end',
+                            delay: [0, 3000],
+                        })" @enderror
                         id="{{$id}}"
                         type="{{$type}}"
                         @if ($type === 'password') autocomplete="off" @endif

config/app.php

@@ -233,6 +233,7 @@ return [
         'URL' => Illuminate\Support\Facades\URL::class,
         'Validator' => Illuminate\Support\Facades\Validator::class,
         'View' => Illuminate\Support\Facades\View::class,
+        'Vite' => Illuminate\Support\Facades\Vite::class,
         'Inertia' => \Inertia\Inertia::class,
     ],
 ];

modules/Nami/Components/SettingView.php

@@ -14,7 +14,7 @@ class SettingView extends Component
 
     public $settingClass = NamiSettings::class;
 
-    #[Validate('required|string')]
+    #[Validate('required|string|min:4')]
     public string $password = '';
     #[Validate('required|string')]
     public string $mglnr = '';

resources/css/tooltip.css

@@ -19,3 +19,25 @@
 .tippy-box[data-theme~='primary'] > .tippy-svg-arrow {
     fill: theme('colors.primary.800');
 }
+
+.tippy-box[data-theme~='danger'] {
+    @apply bg-red-800 text-red-100 shadow-lg;
+}
+.tippy-box[data-theme~='danger'][data-placement^='top'] > .tippy-arrow:before {
+    border-top-color: theme('colors.red.800');
+}
+.tippy-box[data-theme~='danger'][data-placement^='bottom'] > .tippy-arrow:before {
+    border-bottom-color: theme('colors.red.800');
+}
+.tippy-box[data-theme~='danger'][data-placement^='left'] > .tippy-arrow:before {
+    border-left-color: theme('colors.red.800');
+}
+.tippy-box[data-theme~='danger'][data-placement^='right'] > .tippy-arrow:before {
+    border-right-color: theme('colors.red.800');
+}
+.tippy-box[data-theme~='danger'] > .tippy-backdrop {
+    background-color: theme('colors.red.800');
+}
+.tippy-box[data-placement='top-end'] > .tippy-arrow {
+    @apply !transform-none !left-auto right-4;
+}

resources/livewire-js/app.js

@@ -6,14 +6,34 @@ import 'tippy.js/dist/tippy.css';
 import 'tippy.js/animations/shift-toward.css';
 import '../css/tooltip.css';
 import {error, success} from './toastify.js';
+import tippy from 'tippy.js';
 
-Alpine.plugin(
-    Tooltip.defaultProps({
-        theme: 'primary',
-        animation: 'shift-toward',
-    })
-);
+const defaultTippy = {
+    theme: 'primary',
+    animation: 'shift-toward',
+};
+
+Alpine.plugin(Tooltip.defaultProps(defaultTippy));
 
 window.addEventListener('success', (event) => success(event.detail[0]));
 
+document.addEventListener('alpine:init', () => {
+    Alpine.directive('error', function (el, {value, modifiers, expression}, {Alpine, effect, cleanup, evaluateLater}) {
+        let getThingToLog = evaluateLater(expression);
+
+        // el._x_custom_tippy = new tippy(el, {
+        //     ...defaultTippy,
+        //     content: '',
+        // });
+
+        effect(() => {
+            getThingToLog((thingToLog) => {
+                console.log(thingToLog);
+            });
+        });
+    });
+});
+
+window.tippy = tippy;
+
 Livewire.start();

routes/web.php

@@ -76,6 +76,7 @@ use App\Membership\Actions\MembershipStoreAction;
 use App\Membership\Actions\MembershipUpdateAction;
 use App\Payment\SubscriptionController;
 
+Route::get('/lala', fn () => auth()->login(\App\User::first()));
 Route::group(['namespace' => 'App\\Http\\Controllers'], function (): void {
     Auth::routes(['register' => false]);
 });