From db9182eae83f87a84e83465715101eefe262cd9a Mon Sep 17 00:00:00 2001
From: Jimmy Hoenderdaal <jimmy@justbetter.nl>
Date: Fri, 20 Dec 2024 08:56:17 +0100
Subject: [PATCH 1/6] Changed review stars to blade

---
 README.md                                  |  5 ++-
 resources/js/components.js                 |  4 --
 resources/js/components/StarInput.vue      | 31 ----------------
 resources/js/components/Stars.vue          | 43 ----------------------
 resources/js/package.js                    |  1 -
 resources/views/components/stars.blade.php | 32 ++++++++++++++++
 resources/views/form.blade.php             | 42 ++++++++++++---------
 resources/views/reviews.blade.php          |  4 +-
 8 files changed, 62 insertions(+), 100 deletions(-)
 delete mode 100644 resources/js/components.js
 delete mode 100644 resources/js/components/StarInput.vue
 delete mode 100644 resources/js/components/Stars.vue
 delete mode 100644 resources/js/package.js
 create mode 100644 resources/views/components/stars.blade.php

diff --git a/README.md b/README.md
index 97264d7..6e57324 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ If you'd like to show product reviews on out-of-stock product pages you need to
 Add the stars where you'd like in `resources/views/vendor/rapidez/product/overview.blade.php`:
 ```blade
 @if($product->reviews_score)
-    <stars :score="{{ $product->reviews_score }}" :count="{{ $product->reviews_count }}"></stars>
+    <x-rapidez-reviews::stars :score="$product->reviews_score" :count="$product->reviews_count" />
 @endif
 ```
 
@@ -54,7 +54,8 @@ And the form to add a review:
 
 Add somewhere in `resources/views/category/partials/listing/item.blade.php`:
 ```blade
-<stars v-if="item.reviews_score" :score="item.reviews_score" :count="item.reviews_count"></stars>
+<x-rapidez-reviews::stars v-if="item.reviews_count" v-bind:count="item.reviews_count" v-bind:score="item.reviews_score"/>
+
 ```
 
 ## Views
diff --git a/resources/js/components.js b/resources/js/components.js
deleted file mode 100644
index 3cca1fe..0000000
--- a/resources/js/components.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import 'Vendor/rapidez/core/resources/js/vue'
-
-Vue.component('star-input', () => import('./components/StarInput.vue'))
-Vue.component('stars', () => import('./components/Stars.vue'))
\ No newline at end of file
diff --git a/resources/js/components/StarInput.vue b/resources/js/components/StarInput.vue
deleted file mode 100644
index 31f19cf..0000000
--- a/resources/js/components/StarInput.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-    export default {
-        props: {
-            rating: {
-                type: Object,
-                required: true,
-            },
-            value: {
-                type: Object,
-                required: false
-            },
-        },
-        render() {
-            return this.$scopedSlots.default(this)
-        },
-
-        watch: {
-            value() {
-                this.$emit('input', this.value);
-            }
-        },
-
-        methods: {
-            isActive(ratingValue) {
-                return this.value && ratingValue.value <= this.rating.values.find(
-                    (ratingValue) => ratingValue.value_id == this.value.value_id
-                ).value
-            }
-        }
-    }
-</script>
diff --git a/resources/js/components/Stars.vue b/resources/js/components/Stars.vue
deleted file mode 100644
index bf7cd66..0000000
--- a/resources/js/components/Stars.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <div v-if="stars" class="flex items-start">
-        <div class="flex items-center">
-            <svg v-for="star in stars" :class="classStar" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
-            <svg v-for="star in 5 - stars" :class="classStarInactive" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
-            <span :class="classCount" v-if="this.count">({{ this.count }})</span>
-        </div>
-    </div>
-</template>
-<script>
-    export default {
-        props: {
-            score: {
-                type: Number,
-                required: true
-            },
-            count: {
-                type: Number,
-                required: false
-            },
-            classStar: {
-                type: String,
-                required: false,
-                default: 'size-4 fill-current text'
-            },
-            classStarInactive: {
-                type: String,
-                required: false,
-                default: 'size-4 fill-current text-muted'
-            },
-            classCount: {
-                type: String,
-                required: false,
-                default: 'text-muted text-sm'
-            }
-        },
-        computed: {
-            stars() {
-                return Math.round(this.score / 100 * 5)
-            }
-        }
-    }
-</script>
diff --git a/resources/js/package.js b/resources/js/package.js
deleted file mode 100644
index ebb2fb0..0000000
--- a/resources/js/package.js
+++ /dev/null
@@ -1 +0,0 @@
-import './components'
\ No newline at end of file
diff --git a/resources/views/components/stars.blade.php b/resources/views/components/stars.blade.php
new file mode 100644
index 0000000..6206266
--- /dev/null
+++ b/resources/views/components/stars.blade.php
@@ -0,0 +1,32 @@
+@props(['score' => 0, 'count' => null])
+
+<div {{ $attributes->twMerge('flex items-center gap-1') }}>
+    <div class="relative">
+        <div class="flex gap-0.5">
+            @for ($star = 0; $star < 5; $star++)
+                <x-heroicon-s-star class="size-5 text-muted/70" />
+            @endfor
+        </div>
+        <div
+            style="width: {{ $score }}%"
+            @if ($attributes->has('v-bind:score'))
+                v-bind:style="{ width: ({{ $attributes['v-bind:score'] }} || 0) + '%'}"
+            @endif
+            class="absolute inset-0 flex gap-0.5 overflow-hidden"
+        >
+            @for ($star = 0; $star < 5; $star++)
+                <x-heroicon-s-star class="size-5 shrink-0 text-conversion" />
+            @endfor
+        </div>
+    </div>
+    <span
+        class="text-sm"
+        @if ($attributes->has('v-bind:count'))
+            v-text="'(' + ({{ $attributes['v-bind:count'] }} || 0) + ')'"
+        @endif
+    >
+        @if ($count)
+            ({{ $count }})
+        @endif
+    </span>
+</div>
diff --git a/resources/views/form.blade.php b/resources/views/form.blade.php
index e0626df..df88307 100644
--- a/resources/views/form.blade.php
+++ b/resources/views/form.blade.php
@@ -13,26 +13,34 @@
                     <div class="flex flex-wrap w-full">
                         <div class="w-full">
                             <graphql query='@include('rapidez-reviews::queries.ratingsMetadata')'>
-                                <div v-cloak v-if="data" slot-scope="{ data }">
-                                    <div class="mb-2" v-for="(rating, index) in data.productReviewRatingsMetadata.items">
+                                <div v-if="data" v-cloak slot-scope="{ data }">
+                                    <div v-for="(rating, index) in data.productReviewRatingsMetadata.items" class="mb-2">
                                         <x-rapidez::label>@{{ rating.name }}</x-rapidez::label>
-                                        <star-input v-model="variables.ratings[index]" :rating="rating">
-                                            <fieldset class="flex items-center" slot-scope="{ rating, isActive, _renderProxy: starInput }">
-                                                <label v-for="ratingValue in rating.values">
-                                                    <x-heroicon-s-star class="size-5 cursor-pointer" v-bind:class="isActive(ratingValue) ? 'text' : 'text-muted'"/>
-                                                    <input class="sr-only" type="radio" v-model="starInput.value" :name="'stars' + rating.id" :value="{ id: rating.id, value_id: ratingValue.value_id }" required />
-                                                </label>
-                                            </fieldset>
-                                        </star-input>
+                                        <div class="flex items-center gap-0.5">
+                                            <label
+                                                v-for="ratingValue in rating.values"
+                                                class="cursor-pointer text-muted/70 hover:text-conversion [&:has(~label:hover)]:text-conversion"
+                                                v-bind:class="{
+                                                    '!text-conversion': ratingValue.value <= rating.values.find((ratingValue) => ratingValue.value_id == variables.ratings[index]?.value_id)?.value,
+                                                }"
+                                                v-bind:title="ratingValue.label"
+                                            >
+                                                <input
+                                                    v-model="variables.ratings[index]"
+                                                    type="radio"
+                                                    class="sr-only"
+                                                    v-bind:name="'rating-' + rating.id"
+                                                    v-bind:value="{ id: rating.id, value_id: ratingValue.value_id }"
+                                                    required
+                                                />
+                                                <x-heroicon-s-star class="size-5 shrink-0 transition" />
+                                            </label>
+                                        </div>
                                     </div>
                                 </div>
-                                <div v-else class="blur animate-pulse mb-2">
-                                    <x-rapidez::label>@lang('Rating')</x-rapidez::label>
-                                    <div class="flex">
-                                        @for ($i = 0; $i < 5; $i++)
-                                            <x-heroicon-s-star class="size-5 cursor-pointer text-muted" />
-                                        @endfor
-                                    </div>
+                                <div v-else class="mb-2">
+                                    <x-rapidez::label>@lang('Rating') *</x-rapidez::label>
+                                    <x-rapidez-reviews::stars score="0" />
                                 </div>
                             </graphql>
                             <div class="space-y-2">
diff --git a/resources/views/reviews.blade.php b/resources/views/reviews.blade.php
index 7b16b80..c3d78f6 100644
--- a/resources/views/reviews.blade.php
+++ b/resources/views/reviews.blade.php
@@ -15,7 +15,7 @@
                     <div itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope>
                         <meta itemprop="ratingValue" v-bind:content="review.average_rating" />
                         <meta itemprop="bestRating" content="100" />
-                        <stars class="mt-1" v-bind:score="review.average_rating"></stars>
+                        <x-rapidez-reviews::stars v-bind:score="review.average_rating" />
                     </div>
                     <strong class="block mt-3" itemprop="name">@{{ review.summary }}</strong>
                     <p class="mt-1 text-sm" itemprop="reviewBody">@{{ review.text }}</p>
@@ -31,7 +31,7 @@
                 @{{ new Date(Date.now()).toLocaleDateString() }}
             </span>
         </div>
-        <stars class="mt-1" :score="100"></stars>
+        <x-rapidez-reviews::stars />
         <strong class="block mt-3">
             @lang('Be the first to write a review')
         </strong>

From 29d036627161a9aad9fd2560540d2a1418ddb470 Mon Sep 17 00:00:00 2001
From: Jimmy Hoenderdaal <jimmy@justbetter.nl>
Date: Fri, 20 Dec 2024 09:32:20 +0100
Subject: [PATCH 2/6] Update colors

---
 resources/views/components/stars.blade.php | 22 +++++++++++-----------
 resources/views/form.blade.php             |  4 ++--
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/resources/views/components/stars.blade.php b/resources/views/components/stars.blade.php
index 6206266..090bef8 100644
--- a/resources/views/components/stars.blade.php
+++ b/resources/views/components/stars.blade.php
@@ -4,7 +4,7 @@
     <div class="relative">
         <div class="flex gap-0.5">
             @for ($star = 0; $star < 5; $star++)
-                <x-heroicon-s-star class="size-5 text-muted/70" />
+                <x-heroicon-s-star class="size-5 text-muted/50" />
             @endfor
         </div>
         <div
@@ -15,18 +15,18 @@
             class="absolute inset-0 flex gap-0.5 overflow-hidden"
         >
             @for ($star = 0; $star < 5; $star++)
-                <x-heroicon-s-star class="size-5 shrink-0 text-conversion" />
+                <x-heroicon-s-star class="size-5 shrink-0 text-yellow-400" />
             @endfor
         </div>
     </div>
-    <span
-        class="text-sm"
-        @if ($attributes->has('v-bind:count'))
-            v-text="'(' + ({{ $attributes['v-bind:count'] }} || 0) + ')'"
-        @endif
-    >
-        @if ($count)
+    @if ($count || $attributes->has('v-bind:count'))
+        <span
+            class="text-sm"
+            @if ($attributes->has('v-bind:count'))
+                v-text="'(' + ({{ $attributes['v-bind:count'] }} || 0) + ')'"
+            @endif
+        >
             ({{ $count }})
-        @endif
-    </span>
+        </span>
+    @endif
 </div>
diff --git a/resources/views/form.blade.php b/resources/views/form.blade.php
index df88307..fa21ab3 100644
--- a/resources/views/form.blade.php
+++ b/resources/views/form.blade.php
@@ -19,9 +19,9 @@
                                         <div class="flex items-center gap-0.5">
                                             <label
                                                 v-for="ratingValue in rating.values"
-                                                class="cursor-pointer text-muted/70 hover:text-conversion [&:has(~label:hover)]:text-conversion"
+                                                class="cursor-pointer text-muted/50 hover:text-yellow-400 [&:has(~label:hover)]:text-yellow-400"
                                                 v-bind:class="{
-                                                    '!text-conversion': ratingValue.value <= rating.values.find((ratingValue) => ratingValue.value_id == variables.ratings[index]?.value_id)?.value,
+                                                    '!text-yellow-400': ratingValue.value <= rating.values.find((ratingValue) => ratingValue.value_id == variables.ratings[index]?.value_id)?.value,
                                                 }"
                                                 v-bind:title="ratingValue.label"
                                             >

From 534d14ca901016dba5ed46b878f66ff647000a71 Mon Sep 17 00:00:00 2001
From: Jimmy <101801301+JimmyHoenderdaal@users.noreply.github.com>
Date: Wed, 15 Jan 2025 10:41:53 +0100
Subject: [PATCH 3/6] Change variable width on review stars

Co-authored-by: Roy Duineveld <royduineveld@gmail.com>
---
 resources/views/components/stars.blade.php | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/resources/views/components/stars.blade.php b/resources/views/components/stars.blade.php
index 090bef8..6eaa492 100644
--- a/resources/views/components/stars.blade.php
+++ b/resources/views/components/stars.blade.php
@@ -8,10 +8,8 @@
             @endfor
         </div>
         <div
-            style="width: {{ $score }}%"
-            @if ($attributes->has('v-bind:score'))
-                v-bind:style="{ width: ({{ $attributes['v-bind:score'] }} || 0) + '%'}"
-            @endif
+            style="width: {{ (int)$score }}%"
+            v-bind:style="{ width: ({{ $score }} || 0) + '%'}"
             class="absolute inset-0 flex gap-0.5 overflow-hidden"
         >
             @for ($star = 0; $star < 5; $star++)

From c77de638a394b6b7110036ffa776b22c3140705b Mon Sep 17 00:00:00 2001
From: Jimmy Hoenderdaal <jimmy@justbetter.nl>
Date: Wed, 15 Jan 2025 14:55:19 +0100
Subject: [PATCH 4/6] Simplify score and count binding

---
 resources/views/components/stars.blade.php | 13 ++++---------
 resources/views/reviews.blade.php          |  2 +-
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/resources/views/components/stars.blade.php b/resources/views/components/stars.blade.php
index 6eaa492..b83656f 100644
--- a/resources/views/components/stars.blade.php
+++ b/resources/views/components/stars.blade.php
@@ -4,12 +4,12 @@
     <div class="relative">
         <div class="flex gap-0.5">
             @for ($star = 0; $star < 5; $star++)
-                <x-heroicon-s-star class="size-5 text-muted/50" />
+                <x-heroicon-s-star class="text-muted/50 size-5" />
             @endfor
         </div>
         <div
-            style="width: {{ (int)$score }}%"
             v-bind:style="{ width: ({{ $score }} || 0) + '%'}"
+            style="width: {{ $score }}%"
             class="absolute inset-0 flex gap-0.5 overflow-hidden"
         >
             @for ($star = 0; $star < 5; $star++)
@@ -17,13 +17,8 @@ class="absolute inset-0 flex gap-0.5 overflow-hidden"
             @endfor
         </div>
     </div>
-    @if ($count || $attributes->has('v-bind:count'))
-        <span
-            class="text-sm"
-            @if ($attributes->has('v-bind:count'))
-                v-text="'(' + ({{ $attributes['v-bind:count'] }} || 0) + ')'"
-            @endif
-        >
+    @if ($count)
+        <span class="text-sm" v-text="'(' + ({{ $count }} || 0) + ')'">
             ({{ $count }})
         </span>
     @endif
diff --git a/resources/views/reviews.blade.php b/resources/views/reviews.blade.php
index c3d78f6..7197b41 100644
--- a/resources/views/reviews.blade.php
+++ b/resources/views/reviews.blade.php
@@ -15,7 +15,7 @@
                     <div itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope>
                         <meta itemprop="ratingValue" v-bind:content="review.average_rating" />
                         <meta itemprop="bestRating" content="100" />
-                        <x-rapidez-reviews::stars v-bind:score="review.average_rating" />
+                        <x-rapidez-reviews::stars score="review.average_rating" />
                     </div>
                     <strong class="block mt-3" itemprop="name">@{{ review.summary }}</strong>
                     <p class="mt-1 text-sm" itemprop="reviewBody">@{{ review.text }}</p>

From 83461c5cf5c6db0e0bf9ce661839e90e7d964d0c Mon Sep 17 00:00:00 2001
From: Jimmy Hoenderdaal <jimmy@justbetter.nl>
Date: Wed, 15 Jan 2025 15:40:05 +0100
Subject: [PATCH 5/6] Cast $score and $count to int

---
 resources/views/components/stars.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/stars.blade.php b/resources/views/components/stars.blade.php
index b83656f..3a8636c 100644
--- a/resources/views/components/stars.blade.php
+++ b/resources/views/components/stars.blade.php
@@ -9,7 +9,7 @@
         </div>
         <div
             v-bind:style="{ width: ({{ $score }} || 0) + '%'}"
-            style="width: {{ $score }}%"
+            style="width: {{ (int)$score }}%"
             class="absolute inset-0 flex gap-0.5 overflow-hidden"
         >
             @for ($star = 0; $star < 5; $star++)
@@ -19,7 +19,7 @@ class="absolute inset-0 flex gap-0.5 overflow-hidden"
     </div>
     @if ($count)
         <span class="text-sm" v-text="'(' + ({{ $count }} || 0) + ')'">
-            ({{ $count }})
+            ({{ (int)$count }})
         </span>
     @endif
 </div>

From afb75a45436ce1554d6d41e368021af58fd2b98f Mon Sep 17 00:00:00 2001
From: Jimmy Hoenderdaal <jimmy@justbetter.nl>
Date: Wed, 15 Jan 2025 15:49:02 +0100
Subject: [PATCH 6/6] Update readme and change v-cloak position

---
 README.md                      | 2 +-
 resources/views/form.blade.php | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6e57324..2c423f4 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,7 @@ And the form to add a review:
 
 Add somewhere in `resources/views/category/partials/listing/item.blade.php`:
 ```blade
-<x-rapidez-reviews::stars v-if="item.reviews_count" v-bind:count="item.reviews_count" v-bind:score="item.reviews_score"/>
+<x-rapidez-reviews::stars v-if="item.reviews_count" count="item.reviews_count" score="item.reviews_score"/>
 
 ```
 
diff --git a/resources/views/form.blade.php b/resources/views/form.blade.php
index fa21ab3..e8cd599 100644
--- a/resources/views/form.blade.php
+++ b/resources/views/form.blade.php
@@ -62,7 +62,7 @@ class="sr-only"
                             <x-rapidez::button.secondary type="submit">
                                 @lang('Submit Review')
                             </x-rapidez::button.secondary>
-                            <span v-if="mutated" v-cloak class="ml-3 text-green-500">
+                            <span v-if="mutated" class="ml-3 text-green-500" v-cloak>
                                 @lang('You submitted your review for moderation.')
                             </span>
                         </div>