Adds minimum code to register and display the component in Web Forms

packages/common/src/fixtures/rank/1-rank.xml

@@ -1 +1 @@
-<?xml version="1.0"?><h:html xmlns="http://www.w3.org/2002/xforms" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:jr="http://openrosa.org/javarosa" xmlns:orx="http://openrosa.org/xforms" xmlns:odk="http://www.opendatakit.org/xforms"><h:head><h:title>Rank</h:title><model odk:xforms-version="1.0.0"><itext><translation lang="English (en)"><text id="decision_making-0"><value>Health</value></text><text id="decision_making-1"><value>Family and Friends</value></text><text id="decision_making-2"><value>Career Growth and Learning Opportunities</value></text><text id="decision_making-3"><value>Financial Stability</value></text><text id="decision_making-4"><value>Pursuit of Hobbies and Passions</value></text><text id="decision_making-5"><value>Environmental Sustainability</value></text><text id="decision_making-6"><value>Time Management and Work-Life Balance</value></text><text id="decision_making-7"><value>Building a Supportive Community</value></text><text id="decision_making-8"><value>Personal Development and Mindfulness</value></text><text id="decision_making-9"><value>Creativity and Innovation</value></text><text id="/data/priorities:label"><value>What values guide your decision-making?</value></text></translation><translation lang="French (fr)"><text id="decision_making-0"><value>Santé</value></text><text id="decision_making-1"><value>Famille et amis</value></text><text id="decision_making-2"><value>Croissance professionnelle et opportunités d'apprentissage</value></text><text id="decision_making-3"><value>Stabilité financière</value></text><text id="decision_making-4"><value>Poursuite de loisirs et passions</value></text><text id="decision_making-5"><value>Durabilité environnementale</value></text><text id="decision_making-6"><value>Gestion du temps et équilibre vie professionnelle/vie personnelle</value></text><text id="decision_making-7"><value>Construire une communauté solidaire</value></text><text id="decision_making-8"><value>Développement personnel et pleine conscience</value></text><text id="decision_making-9"><value>Créativité et innovation</value></text><text id="/data/priorities:label"><value>Quelles valeurs guident votre prise de décision?</value></text></translation></itext><instance><data id="1_rank" version="2025011401"><priorities/><meta><instanceID/></meta></data></instance><instance id="decision_making"><root><item><itextId>decision_making-0</itextId><name>health</name></item><item><itextId>decision_making-1</itextId><name>family_and_friends</name></item><item><itextId>decision_making-2</itextId><name>career_growth_and_learning_opportunities</name></item><item><itextId>decision_making-3</itextId><name>financial_stability</name></item><item><itextId>decision_making-4</itextId><name>pursuit_of_hobbies_and_passions</name></item><item><itextId>decision_making-5</itextId><name>environmental_sustainability</name></item><item><itextId>decision_making-6</itextId><name>time_management_and_work_life_balance</name></item><item><itextId>decision_making-7</itextId><name>building_a_supportive_community</name></item><item><itextId>decision_making-8</itextId><name>personal_development_and_mindfulness</name></item><item><itextId>decision_making-9</itextId><name>creativity_and_innovation</name></item></root></instance><bind nodeset="/data/priorities" type="odk:rank"/><bind nodeset="/data/meta/instanceID" type="string" readonly="true()" jr:preload="uid"/></model></h:head><h:body><odk:rank ref="/data/priorities"><label ref="jr:itext('/data/priorities:label')"/><itemset nodeset="randomize(instance('decision_making')/root/item)"><value ref="name"/><label ref="jr:itext(itextId)"/></itemset></odk:rank></h:body></h:html>
+<?xml version="1.0"?><h:html xmlns="http://www.w3.org/2002/xforms" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:jr="http://openrosa.org/javarosa" xmlns:orx="http://openrosa.org/xforms" xmlns:odk="http://www.opendatakit.org/xforms"><h:head><h:title>Rank</h:title><model odk:xforms-version="1.0.0"><itext><translation lang="English (en)"><text id="decision_making-0"><value>Health</value></text><text id="decision_making-1"><value>Family and Friends</value></text><text id="decision_making-2"><value>Career Growth and Learning Opportunities</value></text><text id="decision_making-3"><value>Financial Stability</value></text><text id="decision_making-4"><value>Pursuit of Hobbies and Passions</value></text><text id="decision_making-5"><value>Environmental Sustainability</value></text><text id="decision_making-6"><value>Time Management and Work-Life Balance</value></text><text id="decision_making-7"><value>Building a Supportive Community</value></text><text id="decision_making-8"><value>Personal Development and Mindfulness</value></text><text id="decision_making-9"><value>Creativity and Innovation</value></text><text id="/data/priorities:label"><value>What values guide your decision-making?</value></text></translation><translation lang="French (fr)"><text id="decision_making-0"><value>Santé</value></text><text id="decision_making-1"><value>Famille et amis</value></text><text id="decision_making-2"><value>Croissance professionnelle et opportunités d'apprentissage</value></text><text id="decision_making-3"><value>Stabilité financière</value></text><text id="decision_making-4"><value>Poursuite de loisirs et passions</value></text><text id="decision_making-5"><value>Durabilité environnementale</value></text><text id="decision_making-6"><value>Gestion du temps et équilibre vie professionnelle/vie personnelle</value></text><text id="decision_making-7"><value>Construire une communauté solidaire</value></text><text id="decision_making-8"><value>Développement personnel et pleine conscience</value></text><text id="decision_making-9"><value>Créativité et innovation</value></text><text id="/data/priorities:label"><value>Quelles valeurs guident votre prise de décision?</value></text></translation></itext><instance><data id="1_rank" version="2025011401"><priorities/><meta><instanceID/></meta></data></instance><instance id="decision_making"><root><item><itextId>decision_making-0</itextId><name>health</name></item><item><itextId>decision_making-1</itextId><name>family_and_friends</name></item><item><itextId>decision_making-2</itextId><name>career_growth_and_learning_opportunities</name></item><item><itextId>decision_making-3</itextId><name>financial_stability</name></item><item><itextId>decision_making-4</itextId><name>pursuit_of_hobbies_and_passions</name></item><item><itextId>decision_making-5</itextId><name>environmental_sustainability</name></item><item><itextId>decision_making-6</itextId><name>time_management_and_work_life_balance</name></item><item><itextId>decision_making-7</itextId><name>building_a_supportive_community</name></item><item><itextId>decision_making-8</itextId><name>personal_development_and_mindfulness</name></item><item><itextId>decision_making-9</itextId><name>creativity_and_innovation</name></item></root></instance><bind nodeset="/data/priorities" type="odk:rank"/><bind nodeset="/data/meta/instanceID" type="string" readonly="true()" jr:preload="uid"/></model></h:head><h:body><odk:rank ref="/data/priorities"><label ref="jr:itext('/data/priorities:label')"/><itemset nodeset="randomize(instance('decision_making')/root/item)"><value ref="name"/><label ref="jr:itext(itextId)"/></itemset></odk:rank></h:body></h:html>

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

@@ -4,6 +4,7 @@ import type {
 	AnyInputNode,
 	AnyUnsupportedControlNode,
 	NoteNode,
+	RankNode,
 	SelectNode,
 } from '@getodk/xforms-engine';
 import { inject } from 'vue';
@@ -12,13 +13,15 @@ import NoteControl from './controls/NoteControl.vue';
 import SelectControl from './controls/SelectControl.vue';
 import TriggerControl from './controls/TriggerControl.vue';
 import UnsupportedControl from './controls/UnsupportedControl.vue';
+import RankControl from '@/components/controls/RankControl.vue';
 
 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 isRankNode = (n: ControlNode): n is RankNode => n.nodeType === 'rank';
 const isNoteNode = (n: ControlNode): n is NoteNode => n.nodeType === 'note';
 const isTriggerNode = (node: ControlNode) => node.nodeType === 'trigger';
 
@@ -37,6 +40,8 @@ const submitPressed = inject('submitPressed');
 
 		<SelectControl v-else-if="isSelectNode(question)" :question="question" />
 
+		<RankControl v-else-if="isRankNode(question)" :question="question" />
+
 		<NoteControl v-else-if="isNoteNode(question)" :question="question" />
 
 		<TriggerControl v-else-if="isTriggerNode(question)" :question="question" />

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AnyRankNode } from '@getodk/xforms-engine';
+import ControlText from '@/components/ControlText.vue';
+
+interface RankControlProps {
+	readonly question: AnyRankNode;
+}
+
+// ToDo: remove eslint-disable-next-line comment
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = defineProps<RankControlProps>();
+</script>
+
+<template>
+	<ControlText :question="question" />
+	<p>{{ "Hi rank!" }}</p>
+</template>
+
+<style scoped lang="scss">
+
+</style>

packages/xforms-engine/src/client/RankNode.ts

@@ -0,0 +1,20 @@
+import type { InputValue } from './InputNode.ts';
+import type { ValueType } from './ValueType.ts';
+import type { LeafNodeDefinition } from '../parse/model/LeafNodeDefinition.ts';
+import { RankControlDefinition } from '../parse/body/control/RankControlDefinition.ts';
+import type { BaseValueNode } from './BaseValueNode.ts';
+
+export type RankItemValue<V extends ValueType> = NonNullable<RuntimeValue<V>>;
+
+export type RankValues<V extends ValueType> = ReadonlyArray<RankItemValue<V>>;
+
+export interface RankDefinition<V extends ValueType = ValueType> extends LeafNodeDefinition<V> {
+	readonly bodyElement: RankControlDefinition;
+}
+
+export interface RankNode<V extends ValueType = ValueType> extends BaseValueNode<V, InputValue<V>> {
+	readonly nodeType: 'rank';
+}
+
+// prettier-ignore
+export type AnyRankNode = RankNode;

packages/xforms-engine/src/client/unsupported/UnsupportedControlNode.ts

@@ -1,6 +1,5 @@
 import type { UnknownAppearanceDefinition } from '../../parse/body/appearance/unknownAppearanceParser.ts';
 import type { RangeControlDefinition } from '../../parse/body/control/RangeControlDefinition.ts';
-import type { RankControlDefinition } from '../../parse/body/control/RankControlDefinition.ts';
 import type { UploadControlDefinition } from '../../parse/body/control/UploadControlDefinition.ts';
 import type { LeafNodeDefinition } from '../../parse/model/LeafNodeDefinition.ts';
 import type { BaseNode, BaseNodeState } from '../BaseNode.ts';
@@ -17,7 +16,6 @@ export interface UnsupportedControlNodeState extends BaseNodeState {
 
 export type UnsupportedControlElementDefinition =
 	| RangeControlDefinition
-	| RankControlDefinition
 	| UploadControlDefinition;
 
 export interface UnsupportedControlDefinition extends LeafNodeDefinition {

packages/xforms-engine/src/index.ts

@@ -24,6 +24,7 @@ export type * from './client/InputNode.ts';
 export type * from './client/ModelValueNode.ts';
 export type * from './client/NoteNode.ts';
 export type * from './client/OpaqueReactiveObjectFactory.ts';
+export type * from './client/RankNode.ts';
 export type * from './client/repeat/RepeatInstanceNode.ts';
 export type * from './client/repeat/RepeatRangeControlledNode.ts';
 export type * from './client/repeat/RepeatRangeUncontrolledNode.ts';
@@ -40,7 +41,6 @@ export type * from './client/SubtreeNode.ts';
 export type * from './client/TextRange.ts';
 export type * from './client/TriggerNode.ts';
 export type * from './client/unsupported/RangeNode.ts';
-export type * from './client/unsupported/RankNode.ts';
 export type * from './client/unsupported/UploadNode.ts';
 export type * from './client/validation.ts';
 export type * from './client/ValueType.ts';

packages/xforms-engine/src/instance/RankControl.ts

@@ -0,0 +1,26 @@
+import type { ValueType } from '../client/ValueType.ts';
+import { ValueNode } from './abstract/ValueNode.ts';
+import type { XFormsXPathElement } from '../integration/xpath/adapter/XFormsXPathNode.ts';
+import type { ValidationContext } from './internal-api/ValidationContext.ts';
+import type {
+	ClientReactiveSubmittableValueNode,
+} from './internal-api/submission/ClientReactiveSubmittableValueNode.ts';
+import type {
+	RankDefinition,
+	RankValues,
+	RankNode,
+} from '../client/RankNode.ts';
+
+export class RankControl<V extends ValueType = ValueType>
+	extends ValueNode<V, RankDefinition<V>, RankValues<V>, RankValues<V>>
+	implements
+		RankNode<V>,
+		XFormsXPathElement,
+		EvaluationContext,
+		ValidationContext,
+		ClientReactiveSubmittableValueNode
+{
+
+}
+
+export type AnyRankControl = RankControl<string>;