Fix default value for stars display (#12391)

Fixes #12387

app/src/displays/rating/rating.vue

@@ -13,8 +13,8 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, PropType } from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
 
 type InterfaceOptions = {
 	minValue: number;
@@ -22,35 +22,27 @@ type InterfaceOptions = {
 	stepInterval: number;
 };
 
-export default defineComponent({
-	props: {
-		value: {
-			type: [String, Number],
-			default: null,
-		},
-		simple: {
-			type: Boolean,
-			default: false,
-		},
-		interfaceOptions: {
-			type: Object as PropType<InterfaceOptions>,
-			default: null,
-		},
-	},
-	setup(props) {
-		const starCount = computed(() => {
-			if (props.interfaceOptions === null) return 5;
+interface Props {
+	value?: string | number | null;
+	simple?: boolean;
+	interfaceOptions?: InterfaceOptions | null;
+}
 
-			return Math.ceil(props.interfaceOptions.maxValue);
-		});
-
-		const ratingPercentage = computed(() => ({
-			width: (Number(props.value) / starCount.value) * 100 + '%',
-		}));
-
-		return { starCount, ratingPercentage };
-	},
+const props = withDefaults(defineProps<Props>(), {
+	value: undefined,
+	simple: false,
+	interfaceOptions: undefined,
 });
+
+const starCount = computed(() => {
+	if (props.interfaceOptions === null) return 5;
+
+	return Math.ceil(props.interfaceOptions.maxValue ?? 5);
+});
+
+const ratingPercentage = computed(() => ({
+	width: (Number(props.value) / starCount.value) * 100 + '%',
+}));
 </script>
 
 <style lang="scss" scoped>