CED-1822 EsRating follow-up TODOs

es-ds-components/components/es-rating.vue

@@ -1,79 +1,47 @@
 <script setup lang="ts">
 import Rating from 'primevue/rating';
 
-const props = defineProps({
-    /**
-     * Starting rating
-     * 0-5; Avg will show half icons rounded down in read only mode
-     */
-    rating: {
-        type: Number,
-        default: 0,
-        validator: (num: number) => num >= 0 && num <= 5,
-    },
-    /**
-     * Disable changing the rating
-     */
-    readOnly: {
-        type: Boolean,
-        default: true,
-    },
-    /**
-     * Icon width
-     */
-    width: {
-        type: String,
-        default: '20px',
-        required: false,
-    },
-    /**
-     * Icon height
-     */
-    height: {
-        type: String,
-        default: '20px',
-        required: false,
-    },
-    /**
-     * Round rating to nearest .5
-     */
-    rounded: {
-        type: Boolean,
-        default: true,
-        required: false,
-    },
+interface IProps {
+    rating?: number;
+    readOnly?: boolean;
+    width?: string;
+    height?: string;
+    rounded?: boolean;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+    rating: 0,
+    readOnly: true,
+    width: '20px',
+    height: '20px',
+    rounded: true, // Round rating to nearest .5
 });
 
-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;
-});
+// 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 update = (value: number) => {
-    localRating.value = value;
-};
+const showFocus = ref(false);
 </script>
 
 <template>
     <div
         v-if="readOnly"
-        :aria-label="`${roundedRating} out of 5 stars`"
+        :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" />
             </span>
-            <span v-else-if="i - 0.5 === roundedRating">
+            <span v-else-if="i - 0.5 === localRating">
                 <icon-star-half
                     :width="width"
                     :height="height" />
@@ -85,32 +53,42 @@ const update = (value: number) => {
             </span>
         </div>
     </div>
-    <rating
-        v-else
-        :model-value="roundedRating"
-        :cancel="false"
-        :readonly="readOnly"
-        v-bind="$attrs"
-        :pt="{
-            root: {
-                class: 'bg-transparent rounded-0 text-orange rating reactive',
-            },
-            item: {
-                class: 'reactiveStar',
-            },
-        }"
-        @update:model-value="update">
-        <template #officon>
-            <icon-star-empty
-                :width="width"
-                :height="height" />
-        </template>
-        <template #onicon>
-            <icon-star-full
-                :width="width"
-                :height="height" />
-        </template>
-    </rating>
+    <div v-else>
+        <rating
+            v-model="model"
+            :cancel="false"
+            :readonly="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="width"
+                    :height="height" />
+            </template>
+            <template #onicon>
+                <icon-star-full
+                    :width="width"
+                    :height="height" />
+            </template>
+        </rating>
+    </div>
 </template>
 
 <style lang="scss">
@@ -130,9 +108,23 @@ 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 {
+    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>

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,11 @@
         $prism.highlight();
     }
 });
+
+const rating1Val = ref(0);
+watch(rating1Val, () => {
+    alert(rating1Val.value);
+})
 </script>
 
 <template>
@@ -40,26 +39,30 @@
             </nuxt-link>
         </p>
         <div class="my-500">
-            <h2>Form Input</h2>
+            <h2>Form input</h2>
             <es-rating
-                :read-only="false"
-                @change="changeEvent" />
-            <h2 class="mt-500">Static Display</h2>
+                v-model="rating1Val"
+                :read-only="false" />
+            <h2 class="mt-500">Static display</h2>
             <div
                 v-for="i in 11"
                 :key="i">
                 <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>