Support for <select> and <select1> value types, partial support for <range>

eslint.config.js

@@ -380,7 +380,13 @@ export default tseslint.config(
 			'prettier-vue/prettier': 'error',
 			'vue/html-indent': ['error', 'tab'],
 			'vue/html-comment-indent': ['error', 'tab'],
-			'vue/script-indent': ['error', 'tab'],
+			'vue/script-indent': [
+				'error',
+				'tab',
+				{
+					switchCase: 1,
+				},
+			],
 			// should be based on the printWidth
 			'vue/max-attributes-per-line': 'off',
 			'vue/no-undef-components': 'error',

packages/common/src/fixtures/controls/range-controls.xml

@@ -0,0 +1,44 @@
+<h:html xmlns="http://www.w3.org/2002/xforms"
+  xmlns:h="http://www.w3.org/1999/xhtml">
+
+  <h:head>
+    <h:title>Range controls</h:title>
+    <model>
+      <instance>
+        <root id="range-controls">
+          <range-decimal>1.0</range-decimal>
+          <range-int>2</range-int>
+
+          <vertical>
+            <v-decimal>1.25</v-decimal>
+            <v-int>1</v-int>
+          </vertical>
+        </root>
+      </instance>
+      <bind nodeset="/root/range-decimal" type="xsd:decimal" />
+      <bind nodeset="/root/range-int" type="int" />
+      <bind nodeset="/root/vertical/v-decimal" type="decimal" />
+      <bind nodeset="/root/vertical/v-int" type="xsd:int" />
+    </model>
+  </h:head>
+
+  <h:body>
+    <range ref="/root/range-decimal" start="-2.0" end="2.0" step="0.5">
+      <label>Range control (decimal)</label>
+    </range>
+    <range ref="/root/range-int" start="-6" end="4" step="2">
+      <label>Range control (int)</label>
+    </range>
+
+    <group ref="/root/vertical">
+      <range ref="/root/vertical/v-decimal" start="-5.0" end="7.0" step="0.5"
+        appearance="vertical">
+        <label>Range control (decimal)</label>
+      </range>
+      <range ref="/root/vertical/v-int" start="-3" end="4" step="3" appearance="vertical no-ticks">
+        <label>Range control (int)</label>
+      </range>
+    </group>
+  </h:body>
+
+</h:html>

packages/common/src/fixtures/notes/2-all-possible-notes.xml

@@ -18,6 +18,7 @@
             <note_w_ex_appearance />
             <read_only_int />
             <read_only_int_value>3</read_only_int_value>
+            <note_calc_decimal_from_int />
           </group>
           <meta>
             <instanceID />
@@ -34,6 +35,8 @@
       <bind nodeset="/data/group/note_w_ex_appearance" readonly="true()" type="string" />
       <bind nodeset="/data/group/read_only_int" type="int" readonly="true()" />
       <bind nodeset="/data/group/read_only_int_value" type="int" readonly="true()" />
+      <bind nodeset="/data/group/note_calc_decimal_from_int" type="decimal"
+        calculate="/data/group/read_only_int_value + 1.5" readonly="true()" />
       <bind nodeset="/data/meta/instanceID" type="string" readonly="true()" jr:preload="uid" />
     </model>
   </h:head>
@@ -70,6 +73,9 @@
       <input ref="/data/group/read_only_int_value">
         <label>A readonly integer with value</label>
       </input>
+      <input ref="/data/group/note_calc_decimal_from_int">
+        <label>A note with decimal type calculated from int</label>
+      </input>
     </group>
   </h:body>
 </h:html>

packages/scenario/src/answer/NoteNodeAnswer.ts

@@ -1,8 +1,8 @@
-import type { NoteNode } from '@getodk/xforms-engine';
+import type { AnyNoteNode } from '@getodk/xforms-engine';
 import { ValueNodeAnswer } from './ValueNodeAnswer.ts';
 
-export class NoteNodeAnswer extends ValueNodeAnswer<NoteNode> {
+export class NoteNodeAnswer extends ValueNodeAnswer<AnyNoteNode> {
 	get stringValue(): string {
-		return this.node.currentState.value ?? '';
+		return this.node.currentState.instanceValue;
 	}
 }

packages/scenario/src/answer/RangeNodeAnswer.ts

@@ -0,0 +1,17 @@
+import type { RangeNode, RangeValue, RangeValueType } from '@getodk/xforms-engine';
+import { ValueNodeAnswer } from './ValueNodeAnswer.ts';
+
+export class RangeNodeAnswer<V extends RangeValueType = RangeValueType> extends ValueNodeAnswer<
+	RangeNode<V>
+> {
+	readonly valueType: V;
+	readonly stringValue: string;
+	readonly value: RangeValue<V>;
+
+	constructor(node: RangeNode<V>) {
+		super(node);
+		this.valueType = node.valueType;
+		this.stringValue = this.node.currentState.instanceValue;
+		this.value = this.node.currentState.value;
+	}
+}

packages/scenario/src/answer/ValueNodeAnswer.ts

@@ -1,7 +1,7 @@
-import type { AnyLeafNode, InputNode, ModelValueNode } from '@getodk/xforms-engine';
+import type { AnyLeafNode, InputNode, ModelValueNode, RangeNode } from '@getodk/xforms-engine';
 import { ComparableAnswer } from './ComparableAnswer.ts';
 
-export type ValueNode = AnyLeafNode | InputNode | ModelValueNode;
+export type ValueNode = AnyLeafNode | InputNode | ModelValueNode | RangeNode;
 
 export abstract class ValueNodeAnswer<Node extends ValueNode = ValueNode> extends ComparableAnswer {
 	constructor(readonly node: Node) {

packages/scenario/src/jr/event/PositionalEvent.ts

@@ -1,9 +1,10 @@
 import { assertInstanceType } from '@getodk/common/lib/runtime-types/instance-predicates.ts';
 import type {
 	AnyInputNode,
+	AnyNoteNode,
+	AnyRangeNode,
 	AnyUnsupportedControlNode,
 	GroupNode,
-	NoteNode,
 	RepeatInstanceNode,
 	RepeatRangeUncontrolledNode,
 	RootNode,
@@ -15,9 +16,10 @@ import type { Scenario } from '../Scenario.ts';
 // prettier-ignore
 export type QuestionPositionalEventNode =
 	// eslint-disable-next-line @typescript-eslint/sort-type-constituents
-	| NoteNode
+	| AnyNoteNode
 	| SelectNode
 	| AnyInputNode
+	| AnyRangeNode
 	| TriggerNode
 	| AnyUnsupportedControlNode;
 
@@ -69,7 +71,7 @@ const singletons = new Map<AnyEventNode, UnknownPositionalEvent>();
 export abstract class PositionalEvent<Type extends PositionalEventType> {
 	static from<Type extends PositionalEventType, Inst extends PositionalEvent<Type>>(
 		this: PositionalEventConstructor<Type, Inst>,
-		node: PositionalEventNode<Type>
+		node: PositionalEventConstructorNode<Type, Inst>
 	): Inst {
 		let singleton = singletons.get(node);
 
@@ -96,3 +98,13 @@ type PositionalEventConstructor<
 	Type extends PositionalEventType,
 	Inst extends PositionalEvent<Type>,
 > = new (node: Inst['node']) => Inst;
+
+// prettier-ignore
+type PositionalEventConstructorNode<
+	Type extends PositionalEventType,
+	Inst extends PositionalEvent<Type>
+> =
+	PositionalEventConstructor<Type, Inst> extends
+	(new (node: infer T) => Inst)
+		? T
+		: never;

packages/scenario/src/jr/event/RangeQuestionEvent.ts

@@ -0,0 +1,55 @@
+import type { AnyRangeNode, DecimalRangeNode, IntRangeNode } from '@getodk/xforms-engine';
+import { RangeNodeAnswer } from '../../answer/RangeNodeAnswer.ts';
+import { UntypedAnswer } from '../../answer/UntypedAnswer.ts';
+import type { ValueNodeAnswer } from '../../answer/ValueNodeAnswer.ts';
+import { QuestionEvent } from './QuestionEvent.ts';
+
+export class RangeQuestionEvent extends QuestionEvent<'range'> {
+	getAnswer(): RangeNodeAnswer {
+		return new RangeNodeAnswer(this.node);
+	}
+
+	private answerDefault(node: AnyRangeNode, answerValue: unknown): ValueNodeAnswer {
+		const { stringValue } = new UntypedAnswer(answerValue);
+
+		node.setValue(stringValue);
+
+		return new RangeNodeAnswer(node);
+	}
+
+	private answerNumericQuestionNode(
+		node: DecimalRangeNode | IntRangeNode,
+		answerValue: unknown
+	): ValueNodeAnswer {
+		if (answerValue === null) {
+			node.setValue(answerValue);
+
+			return new RangeNodeAnswer(node);
+		}
+
+		switch (typeof answerValue) {
+			case 'bigint':
+			case 'number':
+			case 'string':
+				node.setValue(answerValue);
+
+				return new RangeNodeAnswer(node);
+
+			default:
+				return this.answerDefault(node, answerValue);
+		}
+	}
+
+	answerQuestion(answerValue: unknown): ValueNodeAnswer {
+		const { node } = this;
+
+		switch (node.valueType) {
+			case 'int':
+			case 'decimal':
+				return this.answerNumericQuestionNode(node, answerValue);
+
+			default:
+				return this.answerDefault(node, answerValue);
+		}
+	}
+}

packages/scenario/src/jr/event/getPositionalEvents.ts

@@ -7,6 +7,7 @@ import { GroupEvent } from './GroupEvent.ts';
 import { InputQuestionEvent } from './InputQuestionEvent.ts';
 import { NoteQuestionEvent } from './NoteQuestionEvent.ts';
 import { PromptNewRepeatEvent } from './PromptNewRepeatEvent.ts';
+import { RangeQuestionEvent } from './RangeQuestionEvent.ts';
 import { RepeatInstanceEvent } from './RepeatInstanceEvent.ts';
 import { SelectQuestionEvent } from './SelectQuestionEvent.ts';
 import { TriggerQuestionEvent } from './TriggerQuestionEvent.ts';
@@ -16,6 +17,7 @@ import { UnsupportedControlQuestionEvent } from './UnsupportedControlQuestionEve
 export type AnyQuestionEvent =
 	| InputQuestionEvent
 	| NoteQuestionEvent
+	| RangeQuestionEvent
 	| SelectQuestionEvent
 	| TriggerQuestionEvent
 	| UnsupportedControlQuestionEvent;
@@ -87,6 +89,8 @@ export const getPositionalEvents = (instanceRoot: RootNode): PositionalEvents =>
 					return TriggerQuestionEvent.from(node);
 
 				case 'range':
+					return RangeQuestionEvent.from(node);
+
 				case 'rank':
 				case 'upload':
 					return UnsupportedControlQuestionEvent.from(node);

packages/web-forms/src/components/FormQuestion.vue

@@ -2,13 +2,14 @@
 import type {
 	AnyControlNode,
 	AnyInputNode,
+	AnyNoteNode,
 	AnyUnsupportedControlNode,
-	NoteNode,
 	SelectNode,
 } from '@getodk/xforms-engine';
 import { inject } from 'vue';
 import InputControl from './controls/Input/InputControl.vue';
 import NoteControl from './controls/NoteControl.vue';
+import RangeControl from './controls/Range/RangeControl.vue';
 import SelectControl from './controls/SelectControl.vue';
 import TriggerControl from './controls/TriggerControl.vue';
 import UnsupportedControl from './controls/UnsupportedControl.vue';
@@ -17,9 +18,10 @@ type ControlNode = AnyControlNode | AnyUnsupportedControlNode;
 
 defineProps<{ question: ControlNode }>();
 
-const isInputNode = (n: ControlNode): n is AnyInputNode => n.nodeType === 'input';
-const isSelectNode = (n: ControlNode): n is SelectNode => n.nodeType === 'select';
-const isNoteNode = (n: ControlNode): n is NoteNode => n.nodeType === 'note';
+const isInputNode = (node: ControlNode): node is AnyInputNode => node.nodeType === 'input';
+const isSelectNode = (node: ControlNode): node is SelectNode => node.nodeType === 'select';
+const isNoteNode = (node: ControlNode): node is AnyNoteNode => node.nodeType === 'note';
+const isRangeNode = (node: ControlNode) => node.nodeType === 'range';
 const isTriggerNode = (node: ControlNode) => node.nodeType === 'trigger';
 
 const submitPressed = inject('submitPressed');
@@ -39,6 +41,8 @@ const submitPressed = inject('submitPressed');
 
 		<NoteControl v-else-if="isNoteNode(question)" :question="question" />
 
+		<RangeControl v-else-if="isRangeNode(question)" :node="question" />
+
 		<TriggerControl v-else-if="isTriggerNode(question)" :question="question" />
 
 		<UnsupportedControl v-else :question="question" />

packages/web-forms/src/components/controls/NoteControl.vue

@@ -1,16 +1,74 @@
 <script setup lang="ts">
-import type { NoteNode } from '@getodk/xforms-engine';
+import { UnreachableError } from '@getodk/common/lib/error/UnreachableError.ts';
+import type { AnyNoteNode } from '@getodk/xforms-engine';
+import { computed } from 'vue';
 import ControlText from '../ControlText.vue';
 
-defineProps<{ question: NoteNode }>();
+const props = defineProps<{ question: AnyNoteNode }>();
+
+// prettier-ignore
+type TextRenderableValue =
+	| bigint
+	| boolean
+	| number
+	| string
+	| null
+	| undefined;
+
+type AssertTextRenderableValue = (value: unknown) => asserts value is TextRenderableValue;
+
+const assertTextRenderableValue: AssertTextRenderableValue = (value) => {
+	if (value == null) {
+		return;
+	}
+
+	switch (typeof value) {
+		case 'string':
+		case 'number':
+		case 'bigint':
+		case 'boolean':
+			return;
+
+		default:
+			throw new Error(`Expected text-renderable value type. Got: ${typeof value}`);
+	}
+};
+
+const value = computed((): TextRenderableValue => {
+	const { question } = props;
+
+	switch (question.valueType) {
+		case 'string':
+		case 'int':
+		case 'decimal':
+			return question.currentState.value;
+
+		case 'boolean':
+		case 'date':
+		case 'time':
+		case 'dateTime':
+		case 'geopoint':
+		case 'geotrace':
+		case 'geoshape':
+		case 'binary':
+		case 'barcode':
+		case 'intent':
+			assertTextRenderableValue(question.currentState.value);
+
+			return question.currentState.value;
+
+		default:
+			throw new UnreachableError(question);
+	}
+});
 </script>
 
 <template>
 	<div class="note-control">
 		<ControlText :question="question" />
 
-		<div v-if="question.currentState.value" class="note-value">
-			{{ question.currentState.value }}
+		<div v-if="value != null" class="note-value">
+			{{ value }}
 		</div>
 	</div>
 </template>