Fixes lint in web forms

getodk · Jan 28, 2025 · 303c7bb · 303c7bb
1 parent 04b2f93
commit 303c7bb
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/packages/web-forms/src/components/controls/RankControl.vue b/packages/web-forms/src/components/controls/RankControl.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, ref, watch } from 'vue';
+import { inject, type Ref, ref, watch } from 'vue';
 import { VueDraggable } from 'vue-draggable-plus';
 import type { RankNode, RankNodeState } from '@getodk/xforms-engine';
 import ControlText from '@/components/ControlText.vue';
@@ -11,15 +11,20 @@ interface RankControlProps {
 
 interface RankDraggableOption {
 	value: string;
-	label: string;
+	label: string | null;
+}
+
+interface HighlightOption {
+	index: Ref<null | number>;
+	timeoutID: null | NodeJS.Timeout;
 }
 
 const props = defineProps<RankControlProps>();
 const HOLD_DELAY = 200; // Delay in ms to hold an item before dragging, avoids accidental reordering on swipe.
 const options = ref<RankDraggableOption[]>([]);
 const touched = ref(false);
 const submitPressed = inject<boolean>('submitPressed');
-const highlight = {
+const highlight: HighlightOption = {
 	index: ref(null),
 	timeoutID: null,
 };
@@ -33,7 +38,7 @@ const transformOptions = (currentState: RankNodeState) => {
 	if (orderedValues.length) {
 		options.value = orderedValues.map((item): RankDraggableOption => {
 			return {
-				label: props.question.getValueLabel(item)?.asString,
+				label: props.question.getValueLabel(item)?.asString ?? null,
 				value: item,
 			};
 		});
@@ -43,7 +48,7 @@ const transformOptions = (currentState: RankNodeState) => {
 
 	options.value = currentState.valueOptions.map((item) => {
 		return {
-			label: props.question.getValueLabel(item.value)?.asString,
+			label: props.question.getValueLabel(item.value)?.asString ?? null,
 			value: item.value,
 		};
 	});
@@ -56,7 +61,7 @@ const setValues = () => {
 	props.question.setValues(options.value.map((option) => option.value));
 };
 
-const setHighlight = (index: number) => {
+const setHighlight = (index: number | null) => {
 	highlight.index.value = index;
 
 	if (highlight.timeoutID) {

diff --git a/packages/web-forms/tests/components/RankControl.test.ts b/packages/web-forms/tests/components/RankControl.test.ts
@@ -3,7 +3,7 @@ import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
 import { getReactiveForm, globalMountOptions } from '../helpers';
 import FormQuestion from '@/components/FormQuestion.vue';
 import RankControl from '@/components/controls/RankControl.vue';
-import { RankNode } from '@getodk/xforms-engine';
+import type { RankNode } from '@getodk/xforms-engine';
 
 describe('RankControl', () => {
 	const getAllOptions = (rankControl: VueWrapper): string[] => {