feat(#711): adds rating appearance for range

Author: garethbowen

.changeset/wise-hoops-obey.md

@@ -0,0 +1,5 @@
+---
+'@getodk/web-forms': minor
+---
+
+Added support for 'rating' appearance to range question types

README.md

@@ -83,7 +83,7 @@ This section is auto generated. Please update `feature-matrix.json` and then run
   <summary>
 
 <!-- prettier-ignore -->
-  ##### Appearances<br/>🟩🟩🟩🟩🟩🟩⬜⬜⬜⬜⬜⬜⬜⬜⬜ 41\%
+  ##### Appearances<br/>🟩🟩🟩🟩🟩🟩⬜⬜⬜⬜⬜⬜⬜⬜⬜ 43\%
 
   </summary>
   <br/>
@@ -99,7 +99,7 @@ This section is auto generated. Please update `feature-matrix.json` and then run
 | [vertical](https://github.com/getodk/web-forms/issues/271)      |          |
 | [no-ticks](https://github.com/getodk/web-forms/issues/271)      |          |
 | picker                                                          |          |
-| rating                                                          |          |
+| [rating](https://github.com/getodk/web-forms/issues/711)        |    ✅    |
 | new                                                             |          |
 | new-front                                                       |          |
 | draw                                                            |          |

feature-matrix.json

@@ -45,7 +45,7 @@
     "[vertical](https://github.com/getodk/web-forms/issues/271)": "",
     "[no-ticks](https://github.com/getodk/web-forms/issues/271)": "",
     "picker": "",
-    "rating": "",
+    "[rating](https://github.com/getodk/web-forms/issues/711)": "✅",
     "new": "",
     "new-front": "",
     "draw": "",

packages/web-forms/src/components/form-elements/range/RangeControl.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { AnyRangeNode } from '@getodk/xforms-engine';
+import Rating from 'primevue/rating';
 import { computed } from 'vue';
 import ControlText from '../ControlText.vue';
 import RangeSlider from './RangeSlider.vue';
@@ -43,24 +44,36 @@ const orientation = props.node.appearances.vertical ? 'vertical' : 'horizontal';
 <template>
 	<ControlText :question="node" />
 
-	<div :class="['range-control-container', orientation]">
-		<div class="range-bound range-min">
-			{{ min }}
-		</div>
-		<RangeSlider
+	<template v-if="props.node.appearances.rating">
+		<Rating
 			:id="node.nodeId"
 			:disabled="node.currentState.readonly"
-			:min="min"
-			:max="max"
-			:step="step"
-			:orientation="orientation"
 			:model-value="numberValue"
+			:stars="max"
 			@update:model-value="setValue"
 		/>
-		<div class="range-bound range-max">
-			{{ max }}
+	</template>
+
+	<template v-else>
+		<div :class="['range-control-container', orientation]">
+			<div class="range-bound range-min">
+				{{ min }}
+			</div>
+			<RangeSlider
+				:id="node.nodeId"
+				:disabled="node.currentState.readonly"
+				:min="min"
+				:max="max"
+				:step="step"
+				:orientation="orientation"
+				:model-value="numberValue"
+				@update:model-value="setValue"
+			/>
+			<div class="range-bound range-max">
+				{{ max }}
+			</div>
 		</div>
-	</div>
+	</template>
 </template>
 
 <style scoped lang="scss">
@@ -197,4 +210,8 @@ const orientation = props.node.appearances.vertical ? 'vertical' : 'horizontal';
 		z-index: var(--odk-z-index-form-content);
 	}
 }
+
+.p-rating {
+	--p-rating-icon-size: 28px;
+}
 </style>