From 4f15aba565627afa37c41f81f31ce3854d442404 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 14:00:23 +0300
Subject: [PATCH] Implemented Rating

---
 apps/labs/assets/data/menu.json           |  4 ++
 apps/labs/doc/rating/BasicDoc.vue         | 31 ++++++++++++++
 apps/labs/doc/rating/DisabledDoc.vue      | 31 ++++++++++++++
 apps/labs/doc/rating/ImportDoc.vue        | 16 +++++++
 apps/labs/doc/rating/NumberOfStarsDoc.vue | 31 ++++++++++++++
 apps/labs/doc/rating/ReadOnlyDoc.vue      | 31 ++++++++++++++
 apps/labs/doc/rating/TemplateDoc.vue      | 45 ++++++++++++++++++++
 apps/labs/pages/rating/index.vue          | 51 +++++++++++++++++++++++
 apps/labs/plex/rating/index.vue           | 19 +++++++++
 apps/labs/tailwind.config.js              |  3 ++
 packages/primevue/src/rating/Rating.vue   | 19 ++++++++-
 11 files changed, 279 insertions(+), 2 deletions(-)
 create mode 100644 apps/labs/doc/rating/BasicDoc.vue
 create mode 100644 apps/labs/doc/rating/DisabledDoc.vue
 create mode 100644 apps/labs/doc/rating/ImportDoc.vue
 create mode 100644 apps/labs/doc/rating/NumberOfStarsDoc.vue
 create mode 100644 apps/labs/doc/rating/ReadOnlyDoc.vue
 create mode 100644 apps/labs/doc/rating/TemplateDoc.vue
 create mode 100644 apps/labs/pages/rating/index.vue
 create mode 100644 apps/labs/plex/rating/index.vue

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index da40234a4..49dffbe85 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -38,6 +38,10 @@
                     "name": "RadioButton",
                     "to": "/radiobutton"
                 },
+                {
+                    "name": "Rating",
+                    "to": "/rating"
+                },
                 {
                     "name": "SelectButton",
                     "to": "/selectbutton"
diff --git a/apps/labs/doc/rating/BasicDoc.vue b/apps/labs/doc/rating/BasicDoc.vue
new file mode 100644
index 000000000..7919c9d65
--- /dev/null
+++ b/apps/labs/doc/rating/BasicDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Rating is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/rating/DisabledDoc.vue b/apps/labs/doc/rating/DisabledDoc.vue
new file mode 100644
index 000000000..dc267dcc8
--- /dev/null
+++ b/apps/labs/doc/rating/DisabledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, a visual hint is applied to indicate that the Knob cannot be interacted with.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(3);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" disabled />
+    </div>
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(3);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/rating/ImportDoc.vue b/apps/labs/doc/rating/ImportDoc.vue
new file mode 100644
index 000000000..c7526e53b
--- /dev/null
+++ b/apps/labs/doc/rating/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import Rating from '@/plex/rating';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/rating/NumberOfStarsDoc.vue b/apps/labs/doc/rating/NumberOfStarsDoc.vue
new file mode 100644
index 000000000..787a4e987
--- /dev/null
+++ b/apps/labs/doc/rating/NumberOfStarsDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Number of stars to display is defined with <i>stars</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value" :stars="10" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" :stars="10" />
+    </div>
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/rating/ReadOnlyDoc.vue b/apps/labs/doc/rating/ReadOnlyDoc.vue
new file mode 100644
index 000000000..8f6bdab12
--- /dev/null
+++ b/apps/labs/doc/rating/ReadOnlyDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>readOnly</i> present, value cannot be edited.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value" readonly />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(3);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" readonly />
+    </div>
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(3);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/rating/TemplateDoc.vue b/apps/labs/doc/rating/TemplateDoc.vue
new file mode 100644
index 000000000..95c324610
--- /dev/null
+++ b/apps/labs/doc/rating/TemplateDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom icons are used to override the default icons with <i>onicon</i>, <i>officon</i> and <i>cancelicon</i> slots.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value">
+            <template #onicon>
+                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24" />
+            </template>
+            <template #officon>
+                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24" />
+            </template>
+        </Rating>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value">
+            <template #onicon>
+                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24" />
+            </template>
+            <template #officon>
+                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24" />
+            </template>
+        </Rating>
+    </div>
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/rating/index.vue b/apps/labs/pages/rating/index.vue
new file mode 100644
index 000000000..e85b6ec66
--- /dev/null
+++ b/apps/labs/pages/rating/index.vue
@@ -0,0 +1,51 @@
+<template>
+    <DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" />
+</template>
+
+<script>
+import BasicDoc from '@/doc/rating/BasicDoc.vue';
+import DisabledDoc from '@/doc/rating/DisabledDoc.vue';
+import ImportDoc from '@/doc/rating/ImportDoc.vue';
+import NumberOfStarsDoc from '@/doc/rating/NumberOfStarsDoc.vue';
+import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
+import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'numberofstars',
+                    label: 'Number of Stars',
+                    component: NumberOfStarsDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'readonly',
+                    label: 'ReadOnly',
+                    component: ReadOnlyDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/plex/rating/index.vue b/apps/labs/plex/rating/index.vue
new file mode 100644
index 000000000..b5e2609f1
--- /dev/null
+++ b/apps/labs/plex/rating/index.vue
@@ -0,0 +1,19 @@
+<template>
+    <Rating unstyled :pt="theme">
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Rating>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `relative flex items-center gap-1 p-disabled:opacity-60 p-disabled:pointer-events-none p-readonly:pointer-events-none`,
+    option: `inline-flex items-center cursor-pointer rounded-full
+        p-focus-visible:outline p-focus-visible:outline-1 p-focus-visible:outline-offset-2 p-focus-visible:outline-primary`,
+    onIcon: `text-base w-4 h-4 transition-colors duration-200 text-primary`,
+    offIcon: `text-surface-500 dark:text-surface-400 text-base w-4 h-4 transition-colors duration-200`
+});
+</script>
diff --git a/apps/labs/tailwind.config.js b/apps/labs/tailwind.config.js
index a3a608cf7..8b86ade7e 100644
--- a/apps/labs/tailwind.config.js
+++ b/apps/labs/tailwind.config.js
@@ -23,6 +23,9 @@ export default {
             addVariant('p-top', '&[data-p~="top"]');
             addVariant('p-bottom', '&[data-p~="bottom"]');
             addVariant('p-alternate', '&[data-p~="alternate"]');
+            addVariant('p-active', '&[data-p~="active"]');
+            addVariant('p-focus-visible', '&[data-p~="focus-visible"]');
+            addVariant('p-readonly', '&[data-p~="readonly"]');
         })
     ],
     theme: {
diff --git a/packages/primevue/src/rating/Rating.vue b/packages/primevue/src/rating/Rating.vue
index 84c99954a..0bc048ea7 100755
--- a/packages/primevue/src/rating/Rating.vue
+++ b/packages/primevue/src/rating/Rating.vue
@@ -1,7 +1,7 @@
 <template>
-    <div :class="cx('root')" v-bind="ptmi('root')">
+    <div :class="cx('root')" v-bind="ptmi('root')" :data-p="dataP">
         <template v-for="value in stars" :key="value">
-            <div :class="cx('option', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions('option', value)" :data-p-active="value <= d_value" :data-p-focused="value === focusedOptionIndex">
+            <div :class="cx('option', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions('option', value)" :data-p-active="value <= d_value" :data-p-focused="value === focusedOptionIndex" :data-p="dataOption(value)">
                 <span class="p-hidden-accessible" v-bind="ptm('hiddenOptionInputContainer')" :data-p-hidden-accessible="true">
                     <input
                         type="radio"
@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { focus, getFirstFocusableElement } from '@primeuix/utils/dom';
 import BanIcon from '@primevue/icons/ban';
 import StarIcon from '@primevue/icons/star';
@@ -92,11 +93,25 @@ export default {
         },
         starAriaLabel(value) {
             return value === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, value);
+        },
+        dataOption(value) {
+            return cn({
+                readonly: this.readonly,
+                disabled: this.disabled,
+                active: value <= this.d_value,
+                'focus-visible': value === this.focusedOptionIndex && this.isFocusVisibleItem
+            });
         }
     },
     computed: {
         namex() {
             return this.name || `${this.$attrSelector}_name`;
+        },
+        dataP() {
+            return cn({
+                readonly: this.readonly,
+                disabled: this.disabled
+            });
         }
     },
     components: {