Inline editing (#24)

resources/views/components/button/wishlist.blade.php

@@ -1,7 +1,7 @@
 @props(['productId' => $product->entity_id ?? null])
 
 <toggler v-slot="{ isOpen, toggle, close }" v-cloak>
-    <wishlist v-slot="{ wishlists, toggleItem, findItem, addWishlist, isWishlisted }">
+    <wishlist v-slot="{ wishlists, toggleItem, findItem, addWishlist, isWishlisted, update }">
         <div v-on-click-away="close" {{ $attributes->class('w-full') }}>
             @include('rapidez-mw::partials.item.button')
             <div v-show="isOpen" v-cloak>

resources/views/partials/item/add.blade.php

@@ -1,4 +1,4 @@
-<div class="flex flex-col">
+<div class="flex flex-col overflow-hidden">
     @include('rapidez-mw::partials.item.title')
     @include('rapidez-mw::partials.item.view')
 </div>

resources/views/partials/item/title.blade.php

@@ -1,3 +1,28 @@
-<span class="text-base text-ct-primary truncate">
-    @{{ wishlist.title }}
-</span>
+<toggler :callback="(opened) => {
+    if (opened) {
+        $root.$nextTick(() => $root.$refs['editing_' + wishlist.id]?.[0]?.focus())
+    } else {
+        update(wishlist.id, wishlist)
+    }
+}">
+    <div class="flex items-center" slot-scope="{ toggle, close, isOpen }">
+        <template v-if="!isOpen">
+            <span class="text-base text-ct-primary truncate peer place-self-start -mt-0.5">
+                @{{ wishlist.title }}
+            </span>
+            <x-heroicon-s-pencil-square
+                class="pl-2 w-6 h-4 cursor-pointer shrink-0 opacity-0 hover:opacity-100 peer-hover:opacity-50 transition-opacity"
+                v-on:click="toggle"
+            />
+        </template>
+        <template v-else>
+            <input
+                v-bind:ref="'editing_' + wishlist.id"
+                class="!font-[inherit] text-base text-ct-primary -mt-0.5 w-full !outline-none"
+                v-model.lazy="wishlist.title"
+                v-on-click-away="close"
+                v-on:keyup.enter="close"
+            />
+        </template>
+    </div>
+</toggler>