--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

app/View/Ui/Sprite.php

@@ -2,20 +2,27 @@
 
 namespace App\View\Ui;
 
+use Illuminate\Support\Facades\Cache;
 use Illuminate\View\Component;
 
 class Sprite extends Component
 {
 
+    public string $spritemapFile;
+
     public function __construct(
         public string $src = '',
     ) {
+        $this->spritemapFile = Cache::rememberForever('spritemap_file', function () {
+            $manifest = json_decode(file_get_contents(public_path('build/manifest.json')), true);
+            return asset('build/' . $manifest['spritemap.svg']['file']);
+        });
     }
 
     public function render()
     {
         return <<<'HTML'
-            <svg {{ $attributes->merge(['class' => 'fill-current']) }}"><use xlink:href="/sprite.svg#{{$src}}" /></svg>
+            <svg {{ $attributes->merge(['class' => 'fill-current']) }}><use xlink:href="{{$spritemapFile}}#sprite-{{$src}}" /></svg>
         HTML;
     }
 }

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

@@ -5,6 +5,7 @@ namespace Modules\Nami\Components;
 use App\Initialize\Actions\NamiLoginCheckAction;
 use App\Setting\NamiSettings;
 use Illuminate\Validation\ValidationException;
+use Livewire\Attributes\Validate;
 use Livewire\Component;
 use Zoomyboy\LaravelNami\LoginException;
 
@@ -12,18 +13,13 @@ class SettingView extends Component
 {
 
     public $settingClass = NamiSettings::class;
-    public string $password = '';
-    public string $mglnr = '';
-    public string $default_group_id = '';
 
-    public function rules(): array
+    #[Validate('required|string|min:4')]
-    {
+    public string $password = '';
-        return [
+    #[Validate('required|string')]
-            'password' => 'required|string',
+    public string $mglnr = '';
-            'default_group_id' => 'required',
+    #[Validate('required|string')]
-            'mglnr' => 'required',
+    public string $default_group_id = '';
-        ];
-    }
 
     public function mount(): void
     {
@@ -35,10 +31,7 @@ class SettingView extends Component
     {
         $validated = $this->validate();
         try {
-            NamiLoginCheckAction::run([
+            NamiLoginCheckAction::run($this->only(['mglnr', 'password']));
-                'mglnr' => $this->mglnr,
-                'password' => $this->password,
-            ]);
             app(NamiSettings::class)->fill($validated)->save();
             $this->dispatch('success', 'Einstellungen gespeichert.');
         } catch (LoginException $e) {

package-lock.json

@@ -11,6 +11,7 @@
                 "@editorjs/paragraph": "^2.11.3",
                 "@inertiajs/vue3": "^1.0.14",
                 "@ryangjchandler/alpine-tooltip": "^2.0.1",
+                "@spiriit/vite-plugin-svg-spritemap": "2.2.4",
                 "@tailwindcss/container-queries": "^0.1.1",
                 "@tailwindcss/forms": "^0.5.7",
                 "@tailwindcss/typography": "^0.5.10",
@@ -999,6 +1000,167 @@
                 "tippy.js": "^6.3.1"
             }
         },
+        "node_modules/@spiriit/vite-plugin-svg-spritemap": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/@spiriit/vite-plugin-svg-spritemap/-/vite-plugin-svg-spritemap-2.2.4.tgz",
+            "integrity": "sha512-0UQLolc8AaYM8I82Bkz+gS2p9SGEVUn430xEmSA1wf1YlOsSSbbLpuRsC5pEhvUFj80JNZtuiRE6xeAEipE0/g==",
+            "dependencies": {
+                "@xmldom/xmldom": "^0.8.10",
+                "fast-glob": "^3.3.2",
+                "hash-sum": "^2.0.0",
+                "mini-svg-data-uri": "^1.4.4",
+                "svgo": "^3.2.0"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "peerDependencies": {
+                "vite": "^4.0.0 || ^5.0.0",
+                "vue": "^3.0.0"
+            },
+            "peerDependenciesMeta": {
+                "vue": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@spiriit/vite-plugin-svg-spritemap/node_modules/css-select": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+            "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+            "dependencies": {
+                "boolbase": "^1.0.0",
+                "css-what": "^6.1.0",
+                "domhandler": "^5.0.2",
+                "domutils": "^3.0.1",
+                "nth-check": "^2.0.1"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/fb55"
+            }
+        },
+        "node_modules/@spiriit/vite-plugin-svg-spritemap/node_modules/css-tree": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+            "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+            "dependencies": {
+                "mdn-data": "2.0.30",
+                "source-map-js": "^1.0.1"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+            }
+        },
+        "node_modules/@spiriit/vite-plugin-svg-spritemap/node_modules/csso": {
+            "version": "5.0.5",
+            "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+            "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+            "dependencies": {
+                "css-tree": "~2.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+                "npm": ">=7.0.0"
+            }
+        },
+        "node_modules/@spiriit/vite-plugin-svg-spritemap/node_modules/csso/node_modules/css-tree": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+            "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+            "dependencies": {
+                "mdn-data": "2.0.28",
+                "source-map-js": "^1.0.1"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+                "npm": ">=7.0.0"
+            }
+        },
+        "node_modules/@spiriit/vite-plugin-svg-spritemap/node_modules/csso/node_modules/mdn-data": {
+            "version": "2.0.28",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+            "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
+        },
+        "node_modules/@spiriit/vite-plugin-svg-spritemap/node_modules/dom-serializer": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+            "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+            "dependencies": {
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.2",
+                "entities": "^4.2.0"
+            },
+            "funding": {
+                "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+            }
+        },
+        "node_modules/@spiriit/vite-plugin-svg-spritemap/node_modules/domhandler": {
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+            "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+            "dependencies": {
+                "domelementtype": "^2.3.0"
+            },
+            "engines": {
+                "node": ">= 4"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domhandler?sponsor=1"
+            }
+        },
+        "node_modules/@spiriit/vite-plugin-svg-spritemap/node_modules/domutils": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+            "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+            "dependencies": {
+                "dom-serializer": "^2.0.0",
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.3"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domutils?sponsor=1"
+            }
+        },
+        "node_modules/@spiriit/vite-plugin-svg-spritemap/node_modules/entities": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
+        "node_modules/@spiriit/vite-plugin-svg-spritemap/node_modules/mdn-data": {
+            "version": "2.0.30",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+            "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
+        },
+        "node_modules/@spiriit/vite-plugin-svg-spritemap/node_modules/svgo": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+            "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+            "dependencies": {
+                "@trysound/sax": "0.2.0",
+                "commander": "^7.2.0",
+                "css-select": "^5.1.0",
+                "css-tree": "^2.3.1",
+                "css-what": "^6.1.0",
+                "csso": "^5.0.5",
+                "picocolors": "^1.0.0"
+            },
+            "bin": {
+                "svgo": "bin/svgo"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/svgo"
+            }
+        },
         "node_modules/@tailwindcss/container-queries": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
@@ -2551,6 +2713,11 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/hash-sum": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
+            "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg=="
+        },
         "node_modules/hasown": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",

package.json

@@ -7,7 +7,6 @@
         "hot": "npx vite",
         "prod": "npx vite build",
         "production": "npm run prod",
-        "img": "cd resources/img/svg && npx svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.css.svg ../../../public/sprite.svg && rm -R sprite",
         "lint": "eslint \"resources/js/**/*.{js,vue}\"",
         "fix": "eslint \"resources/js/**/*.{js,vue}\" --fix"
     },
@@ -30,6 +29,7 @@
         "@editorjs/paragraph": "^2.11.3",
         "@inertiajs/vue3": "^1.0.14",
         "@ryangjchandler/alpine-tooltip": "^2.0.1",
+        "@spiriit/vite-plugin-svg-spritemap": "2.2.4",
         "@tailwindcss/container-queries": "^0.1.1",
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.10",
@@ -47,7 +47,6 @@
         "postcss-import": "^14.1.0",
         "prettier": "^2.8.8",
         "pusher-js": "^8.3.0",
-        "svg-sprite": "^2.0.2",
         "tippy.js": "^6.3.7",
         "toastify-js": "^1.12.0",
         "vite": "^4.5.2",

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/img/svg/lilie.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="687.866" height="704.496" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd" viewBox="0 0 182.004 186.404"><defs><style>.fil0{fill:#000}</style></defs><g id="Ebene_x0020_1"><path class="fil0" d="m72.601.2-.6.2-.8.4-1 .6-1 1-.6 1-.6 1.6 1.2 18-39.4.4L10.6 43.2l61.001 4.601 2.6 28-2.4-1.6a12.425 12.425 0 0 1-2.2-1.4c-.916-.523-2.05-1.05-2.8-1.8l-1.8-1.2-1.6-1-1.6-1-2-1.2-1.4-.8-1.6-1-4.2-2.4-1.8-1-3-1.4-2.8-1.4-1.6-.8-2.2-1-2.4-1-2.8-1-3.2-1-4.4-1-2.8-.4h-5.4l-1 .2-2 .4-1.6.4-1 .4-1.401.6-.6.4-1 .6-1.4 1-2 2c-.262.524-.672.745-1 1.2l-.6.8c-.1.138-.3.662-.4.8l-1.2 2-.8 1.6-.6 1.4-.8 2.6-.6 1.6-.4 1.8-.4 1.8-.4 2-.4 2.4-.4 3.4-.2 3.4v10.401l.2 3.4.4 3.8.4 2.6.2 1.6.4 2.2.6 3 .4 1.6.6 2.4.4 1.4.4 1.4.2.6.4 1.2c.292.585.353 1.203.6 1.8l.4 1.2.4 1 .2.601.4 1 .6 1.6.4.8.6 1.4.4.8.4.8.6 1.2.4.8.6 1.2.6 1.2 1 1.8.4.6.6 1 .4.6 1 1.6.8 1.2.8 1.2 1 1.4 1 1.4.8 1 1 1.2.6.8 1 1.2 3 3 1 .8 1 .6 1.2.6.8.4 1 .4 2.8.6H38l3.2-.6 1.2-.4 3-1.4 1.4-.8 1-.6 2.001-1.2 1.6-1.2 1.4-1 1.6-1.2 2.6-2.2 1-.8 2.4-2 2-1.8 2.2-2 2.2-1.8c.704-.703 1.89-1.955 2.2-2.2.1-.053.874-.82 1.4-1.2l1.2-1 .2-.2.2-.4v-.6l-.2-.2-5.8-.2-2.2-.4-1.8-.6-1-.6-1-.8-1-1-.8-1-1.2-2.2-1.2-3.4-.8-2.6-.6-3.2-.6-3.4-.6-2.6-.6-3.4-.6-3.2-.8-4v-2l.8-.8h2.6l2 .4 2.4.6c1.357.542 2.688.943 4 1.6l2.2 1 1.4.6.8.4c.807.58 2.086.885 2.8 1.6l2 1.2 2.2 1.6 2.4 2.4.8 1.6 1.4 13.6h23.401l1-10.4.6-2.6 1.2-2.2 2.4-2.4.8-.6c.69-.346 1.377-.933 2-1.4.81-.54 1.721-1.25 2.6-1.6 1.04-.52 1.991-1.096 3-1.6l1.8-.8c.757-.33 1.629-.718 2.4-1l1.8-.6 1-.4 2.4-.6 2-.4h2.601l.8.8v2c-.015.296-1.42 6.984-1.6 8l-.4 2.6-.4 2-.6 3.4-.4 1.8-.4 2-.6 2.2-.6 2-.8 1.8-.6 1.2-.6 1-.8 1-1 1-2 1.4-1.8.6-2.2.4-5.8.2-.2.2v.6l.2.4c.16.222 1.13.954 1.4 1.2l1 1 2 1.8 1 1 1.4 1.2 2.6 2.2 1.6 1.6 4.8 4 1.6 1.2 8.4 5.6s2.962 1.606 3.6 1.8l2 .6 2.4.4h5.6l2.8-.6c.245-.074 2.257-.918 2.4-1l2.2-1.6 3.6-3.6c1.182-1.18 2.016-2.615 3.2-3.8l1.4-2.2 3.4-5 2.4-4.2 1.4-2.6 1-2 1.2-2.8 1-2.4 1.4-3.8.801-2.4 1-3.4.8-3.6 1.2-5.6.2-1.6.4-2.6.2-2.2.4-5V85.201l-.2-3.4-.4-3.4-.4-2.4-.2-1.4-.4-1.8-.4-1.6-.2-.8-.4-1.2-.4-1.4c-.165-.484-.78-1.904-1-2.4l-1-2.2-1-1.8-1.2-1.8-2.2-2.4c-.22-.2-3.7-2.745-3.8-2.8l-2-.8-2-.6-3-.6h-5.4l-2.8.4-3.4.8-3 .8-3 1-2.397.978-2.404 1.021-3 1.4-4 2-4.8 2.6-1.4.8-7 4.2-1.8 1.2-3.2 2-4 2.6-3.2 2.2 2.6-28.8 61.6-4.6-19.2-19.6-40.019-.2 1.418-17.8-.6-1.8-.8-1.2-1.2-1.2-1.4-.8-.6-.2-1.4-.2h-33.6l-1.2.2z"/><path class="fil0" d="m51.201 175.604-.6 1v.6l.2.4.4.4.4.2.8.4.8.4 1.6.6 1 .4 2.4.6 1.8.2h1.6l1-.2.6-.4.8-.6 1.8-1.6c3.438-3.437 7.332-6.59 11-9.8l-.8 14v2.4l.2 1 .2.4.2.2.8.2h27.201l.8-.2.2-.2.2-.4.2-1v-2.4l-.8-14 12 10.6.8.8.8.6.6.4 1 .2h1.6l1.8-.2 1.601-.4 1.8-.6 1-.4.6-.2.8-.4.8-.4.4-.2.4-.4.2-.4v-.6c0 .3-29.401-43.8-29.4-43.8H80.001l-28.8 42.8z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="687.866" height="704.496" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd" viewBox="0 0 182.004 186.404"><defs></defs><g id="Ebene_x0020_1"><path d="m72.601.2-.6.2-.8.4-1 .6-1 1-.6 1-.6 1.6 1.2 18-39.4.4L10.6 43.2l61.001 4.601 2.6 28-2.4-1.6a12.425 12.425 0 0 1-2.2-1.4c-.916-.523-2.05-1.05-2.8-1.8l-1.8-1.2-1.6-1-1.6-1-2-1.2-1.4-.8-1.6-1-4.2-2.4-1.8-1-3-1.4-2.8-1.4-1.6-.8-2.2-1-2.4-1-2.8-1-3.2-1-4.4-1-2.8-.4h-5.4l-1 .2-2 .4-1.6.4-1 .4-1.401.6-.6.4-1 .6-1.4 1-2 2c-.262.524-.672.745-1 1.2l-.6.8c-.1.138-.3.662-.4.8l-1.2 2-.8 1.6-.6 1.4-.8 2.6-.6 1.6-.4 1.8-.4 1.8-.4 2-.4 2.4-.4 3.4-.2 3.4v10.401l.2 3.4.4 3.8.4 2.6.2 1.6.4 2.2.6 3 .4 1.6.6 2.4.4 1.4.4 1.4.2.6.4 1.2c.292.585.353 1.203.6 1.8l.4 1.2.4 1 .2.601.4 1 .6 1.6.4.8.6 1.4.4.8.4.8.6 1.2.4.8.6 1.2.6 1.2 1 1.8.4.6.6 1 .4.6 1 1.6.8 1.2.8 1.2 1 1.4 1 1.4.8 1 1 1.2.6.8 1 1.2 3 3 1 .8 1 .6 1.2.6.8.4 1 .4 2.8.6H38l3.2-.6 1.2-.4 3-1.4 1.4-.8 1-.6 2.001-1.2 1.6-1.2 1.4-1 1.6-1.2 2.6-2.2 1-.8 2.4-2 2-1.8 2.2-2 2.2-1.8c.704-.703 1.89-1.955 2.2-2.2.1-.053.874-.82 1.4-1.2l1.2-1 .2-.2.2-.4v-.6l-.2-.2-5.8-.2-2.2-.4-1.8-.6-1-.6-1-.8-1-1-.8-1-1.2-2.2-1.2-3.4-.8-2.6-.6-3.2-.6-3.4-.6-2.6-.6-3.4-.6-3.2-.8-4v-2l.8-.8h2.6l2 .4 2.4.6c1.357.542 2.688.943 4 1.6l2.2 1 1.4.6.8.4c.807.58 2.086.885 2.8 1.6l2 1.2 2.2 1.6 2.4 2.4.8 1.6 1.4 13.6h23.401l1-10.4.6-2.6 1.2-2.2 2.4-2.4.8-.6c.69-.346 1.377-.933 2-1.4.81-.54 1.721-1.25 2.6-1.6 1.04-.52 1.991-1.096 3-1.6l1.8-.8c.757-.33 1.629-.718 2.4-1l1.8-.6 1-.4 2.4-.6 2-.4h2.601l.8.8v2c-.015.296-1.42 6.984-1.6 8l-.4 2.6-.4 2-.6 3.4-.4 1.8-.4 2-.6 2.2-.6 2-.8 1.8-.6 1.2-.6 1-.8 1-1 1-2 1.4-1.8.6-2.2.4-5.8.2-.2.2v.6l.2.4c.16.222 1.13.954 1.4 1.2l1 1 2 1.8 1 1 1.4 1.2 2.6 2.2 1.6 1.6 4.8 4 1.6 1.2 8.4 5.6s2.962 1.606 3.6 1.8l2 .6 2.4.4h5.6l2.8-.6c.245-.074 2.257-.918 2.4-1l2.2-1.6 3.6-3.6c1.182-1.18 2.016-2.615 3.2-3.8l1.4-2.2 3.4-5 2.4-4.2 1.4-2.6 1-2 1.2-2.8 1-2.4 1.4-3.8.801-2.4 1-3.4.8-3.6 1.2-5.6.2-1.6.4-2.6.2-2.2.4-5V85.201l-.2-3.4-.4-3.4-.4-2.4-.2-1.4-.4-1.8-.4-1.6-.2-.8-.4-1.2-.4-1.4c-.165-.484-.78-1.904-1-2.4l-1-2.2-1-1.8-1.2-1.8-2.2-2.4c-.22-.2-3.7-2.745-3.8-2.8l-2-.8-2-.6-3-.6h-5.4l-2.8.4-3.4.8-3 .8-3 1-2.397.978-2.404 1.021-3 1.4-4 2-4.8 2.6-1.4.8-7 4.2-1.8 1.2-3.2 2-4 2.6-3.2 2.2 2.6-28.8 61.6-4.6-19.2-19.6-40.019-.2 1.418-17.8-.6-1.8-.8-1.2-1.2-1.2-1.4-.8-.6-.2-1.4-.2h-33.6l-1.2.2z"/><path d="m51.201 175.604-.6 1v.6l.2.4.4.4.4.2.8.4.8.4 1.6.6 1 .4 2.4.6 1.8.2h1.6l1-.2.6-.4.8-.6 1.8-1.6c3.438-3.437 7.332-6.59 11-9.8l-.8 14v2.4l.2 1 .2.4.2.2.8.2h27.201l.8-.2.2-.2.2-.4.2-1v-2.4l-.8-14 12 10.6.8.8.8.6.6.4 1 .2h1.6l1.8-.2 1.601-.4 1.8-.6 1-.4.6-.2.8-.4.8-.4.4-.2.4-.4.2-.4v-.6c0 .3-29.401-43.8-29.4-43.8H80.001l-28.8 42.8z"/></g></svg>

resources/js/components/ui/Sprite.vue

@@ -1,7 +0,0 @@
-<template>
-    <svg v-bind="$attrs" class="fill-current"><use :xlink:href="`/sprite.svg#${$attrs.src}`" /></svg>
-</template>
-
-<script>
-export default {};
-</script>

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(
+const defaultTippy = {
-    Tooltip.defaultProps({
+    theme: 'primary',
-        theme: 'primary',
+    animation: 'shift-toward',
-        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]);
 });

vite.config.js

@@ -2,6 +2,7 @@ import {defineConfig} from 'vite';
 import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
 import path from 'path';
+import VitePluginSvgSpritemap from '@spiriit/vite-plugin-svg-spritemap';
 
 export default defineConfig({
     plugins: [
@@ -27,6 +28,7 @@ export default defineConfig({
                 },
             },
         }),
+        VitePluginSvgSpritemap('./resources/img/svg/*.svg'),
     ],
     resolve: {
         alias: {