Implemented Rating

apps/labs/assets/data/menu.json

@@ -38,6 +38,10 @@
                     "name": "RadioButton",
                     "to": "/radiobutton"
                 },
+                {
+                    "name": "Rating",
+                    "to": "/rating"
+                },
                 {
                     "name": "SelectButton",
                     "to": "/selectbutton"

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>

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>

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>

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>

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>

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>

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>

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>

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: {

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: {