From 2e3fff73f932078c1548a7cbfe50036452977c9f Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Wed, 18 Sep 2024 11:31:10 -0400
Subject: [PATCH 1/2] fix: double events

---
 es-ds-components/components/es-rating.vue | 61 ++++++++++-------------
 es-ds-docs/pages/molecules/rating.vue     | 34 ++++++-------
 2 files changed, 44 insertions(+), 51 deletions(-)

diff --git a/es-ds-components/components/es-rating.vue b/es-ds-components/components/es-rating.vue
index 857a43e59..69dad97de 100644
--- a/es-ds-components/components/es-rating.vue
+++ b/es-ds-components/components/es-rating.vue
@@ -44,52 +44,45 @@ const props = defineProps({
     },
 });
 
-const localRating = ref(props.rating);
+const model = defineModel<number>()
+model.value = props.rating;
 
-const roundedRating = computed(() => {
-    if (!props.rounded) {
-        return localRating.value;
-    }
-    // Rounds to nearest .5
-    return Math.round(localRating.value * 2) / 2;
-});
-
-const update = (value: number) => {
-    localRating.value = value;
-};
+// Rounds to nearest .5
+const round = (value: number) => value ? Math.round(value * 2) / 2 : 0;
+const localRating = computed(() => props.rounded ? round(model.value as number) : model.value || 0);
 </script>
 
 <template>
     <div
-        v-if="readOnly"
-        :aria-label="`${roundedRating} out of 5 stars`"
+        v-if="props.readOnly"
+        :aria-label="`${localRating} out of 5 stars`"
         class="bg-transparent rounded-0 text-orange rating">
         <div
             v-for="i in 5"
             :key="i"
             aria-hidden="true">
-            <span v-if="i <= roundedRating">
+            <span v-if="i <= localRating">
                 <icon-star-full
-                    :width="width"
-                    :height="height" />
+                    :width="props.width"
+                    :height="props.height" />
             </span>
-            <span v-else-if="i - 0.5 === roundedRating">
+            <span v-else-if="i - 0.5 === localRating">
                 <icon-star-half
-                    :width="width"
-                    :height="height" />
+                    :width="props.width"
+                    :height="props.height" />
             </span>
             <span v-else>
                 <icon-star-empty
-                    :width="width"
-                    :height="height" />
+                    :width="props.width"
+                    :height="props.height" />
             </span>
         </div>
     </div>
     <rating
         v-else
-        :model-value="roundedRating"
+        v-model="model"
         :cancel="false"
-        :readonly="readOnly"
+        :readonly="props.readOnly"
         v-bind="$attrs"
         :pt="{
             root: {
@@ -98,17 +91,16 @@ const update = (value: number) => {
             item: {
                 class: 'reactiveStar',
             },
-        }"
-        @update:model-value="update">
+        }">
         <template #officon>
             <icon-star-empty
-                :width="width"
-                :height="height" />
+                :width="props.width"
+                :height="props.height" />
         </template>
         <template #onicon>
             <icon-star-full
-                :width="width"
-                :height="height" />
+                :width="props.width"
+                :height="props.height" />
         </template>
     </rating>
 </template>
@@ -130,9 +122,10 @@ const update = (value: number) => {
     cursor: pointer !important;
 }
 
-// TODO: Star should go back to normal size after click
-.reactiveStar:hover,
-.reactiveStar[data-p-focused='true'] {
-    transform: scale(1.5);
+.reactiveStar {
+    &:hover,
+    &[data-p-focused='true'] {
+        transform: scale(1.5);
+    }
 }
 </style>
diff --git a/es-ds-docs/pages/molecules/rating.vue b/es-ds-docs/pages/molecules/rating.vue
index 4abd053a5..db0033d6b 100644
--- a/es-ds-docs/pages/molecules/rating.vue
+++ b/es-ds-docs/pages/molecules/rating.vue
@@ -1,10 +1,4 @@
 <script setup lang="ts">
-// Event will trigger twice when using keyboard to focus due to PrimeVue bug
-const changeEvent = ($event) => {
-    // eslint-disable-next-line no-alert
-    alert($event.value);
-};
-
 const propTableRows = [
     ['rating', 'Number', '0', 'Starting rating value 0-5, with .5 values available in read only mode'],
     ['rounded', 'Boolean', 'true', 'Round rating to nearest .5'],
@@ -26,6 +20,8 @@ onMounted(async () => {
         $prism.highlight();
     }
 });
+
+const rating1Val = ref(0);
 </script>
 
 <template>
@@ -42,8 +38,8 @@ onMounted(async () => {
         <div class="my-500">
             <h2>Form Input</h2>
             <es-rating
-                :read-only="false"
-                @change="changeEvent" />
+                v-model="rating1Val"
+                :read-only="false" />
             <h2 class="mt-500">Static Display</h2>
             <div
                 v-for="i in 11"
@@ -51,15 +47,19 @@ onMounted(async () => {
                 <es-rating :rating="(i - 1) / 2" />
             </div>
         </div>
-        <div class="d-flex flex-column flex-md-row">
-            <div class="bg-gray-50 justify-content-center d-flex p-200 mb-200 mb-md-0 mr-md-200">
-                <es-rating :rating="4.5" />
-            </div>
-            <div class="bg-blue-50 justify-content-center d-flex p-200 mb-200 mb-md-0 mr-md-200">
-                <es-rating :rating="4.5" />
-            </div>
-            <div class="bg-blue-900 justify-content-center d-flex p-200 mb-200 mb-md-0 mr-md-200">
-                <es-rating :rating="4.5" />
+
+        <div class="my-500">
+            <h2>Background Variations</h2>
+            <div class="d-flex flex-column flex-md-row">
+                <div class="bg-gray-50 justify-content-center d-flex p-200 mb-200 mb-md-0 mr-md-200">
+                    <es-rating :rating="4.5" />
+                </div>
+                <div class="bg-blue-50 justify-content-center d-flex p-200 mb-200 mb-md-0 mr-md-200">
+                    <es-rating :rating="4.5" />
+                </div>
+                <div class="bg-blue-900 justify-content-center d-flex p-200 mb-200 mb-md-0 mr-md-200">
+                    <es-rating :rating="4.5" />
+                </div>
             </div>
         </div>
 

From c8e5d868b62e4817c726ed5a34b1597d93968d73 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Thu, 19 Sep 2024 09:28:54 -0400
Subject: [PATCH 2/2] feat: add local focus variable

---
 es-ds-components/components/es-rating.vue | 80 +++++++++++++++--------
 1 file changed, 53 insertions(+), 27 deletions(-)

diff --git a/es-ds-components/components/es-rating.vue b/es-ds-components/components/es-rating.vue
index 69dad97de..b3b12a7de 100644
--- a/es-ds-components/components/es-rating.vue
+++ b/es-ds-components/components/es-rating.vue
@@ -50,6 +50,8 @@ model.value = props.rating;
 // Rounds to nearest .5
 const round = (value: number) => value ? Math.round(value * 2) / 2 : 0;
 const localRating = computed(() => props.rounded ? round(model.value as number) : model.value || 0);
+
+const showFocus = ref(false);
 </script>
 
 <template>
@@ -78,31 +80,41 @@ const localRating = computed(() => props.rounded ? round(model.value as number)
             </span>
         </div>
     </div>
-    <rating
-        v-else
-        v-model="model"
-        :cancel="false"
-        :readonly="props.readOnly"
-        v-bind="$attrs"
-        :pt="{
-            root: {
-                class: 'bg-transparent rounded-0 text-orange rating reactive',
-            },
-            item: {
-                class: 'reactiveStar',
-            },
-        }">
-        <template #officon>
-            <icon-star-empty
-                :width="props.width"
-                :height="props.height" />
-        </template>
-        <template #onicon>
-            <icon-star-full
-                :width="props.width"
-                :height="props.height" />
-        </template>
-    </rating>
+    <div v-else>
+        <rating
+            v-model="model"
+            :cancel="false"
+            :readonly="props.readOnly"
+            v-bind="$attrs"
+            :pt="{
+                root: {
+                    class: 'bg-transparent rounded-0 text-orange rating reactive',
+                },
+                item: (options) => {
+                    return {
+                        class: [{
+                            'reactiveStar': true,
+                            'focused': options.context.focused,
+                            'fade-focus': options.context.active && options.context.focused,
+                        }]
+                    }
+                },
+            }"
+            @focus="showFocus = true"
+            @blur="showFocus = false">
+            <template #officon>
+                <icon-star-empty
+                    :width="props.width"
+                    :height="props.height" />
+            </template>
+            <template #onicon>
+                <icon-star-full
+                    :width="props.width"
+                    :height="props.height" />
+            </template>
+        </rating>
+        showFocus: {{ showFocus }}
+    </div>
 </template>
 
 <style lang="scss">
@@ -123,9 +135,23 @@ const localRating = computed(() => props.rounded ? round(model.value as number)
 }
 
 .reactiveStar {
-    &:hover,
-    &[data-p-focused='true'] {
+    transition: all 0.15s ease-in-out;
+
+    &:hover {
+        transform: scale(1.5);
+
+    }
+    &.focused {
         transform: scale(1.5);
     }
 }
+
+.rating {
+    .reactiveStar.focused,
+    .reactiveStar:hover {
+        .reactiveStar {
+            transform: scale(1.5);
+        }
+    }
+}
 </style>