Select appearances (#142)

* Feature #141: Appearances for select node types

* Implemented minimal, autocomplete, no-buttons, likert, list, list-nolabel, label, columns, column-pack, column-n for Select1
* Implemented minimal, autocomplete, no-buttons, list, list-nolabel, label, columns, column-pack, column-n for SelectN
* Implementation of map and image-map appearances will be handled separately
* Dynamic width of select options is achieved using javascript, we need to find a way to do it using css if possible
* Original SelectControl.vue has been decomposed into Select1Control and SelectNControl.
* Widgets directory contains low level components, mostly combination of a label and a primevue component
* Appearance directory contains wrapper components to acheive desire UI layout

Incorporated PR Feedback:
* Few enhancements in LikertWidget:
** Hover state for the likert option
** Small gap between the options.
* Also added class to span of RadioButton and CheckboxWidget
* remove duplicate style
* remove v-full-width

* Create lemon-pandas-matter.md (changeset)

.changeset/lemon-pandas-matter.md

@@ -0,0 +1,17 @@
+---
+"@getodk/web-forms": minor
+---
+
+Added support for following `select_one` and `select_multiple` appearances (#141):
+ - minimal
+ - search
+ - columns-pack
+ - columns
+ - columns-n
+ - no-buttons
+ - likert (`select_one` only)
+ - label
+ - list-nolabel
+ - list
+
+Added support for `field-list` appearance for `group`.

packages/ui-solid/fixtures/xforms/select/3-images-choice.xml

@@ -0,0 +1,57 @@
+<?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>images-choice</h:title>
+    <model odk:xforms-version="1.0.0">
+      <itext>
+        <translation lang="default" default="true()">
+          <text id="animals-0">
+            <value>tiger</value>
+            <value form="image">jr://images/tiger.jpg</value>
+          </text>
+          <text id="animals-1">
+            <value>camel</value>
+            <value form="image">jr://images/camel.jpg</value>
+          </text>
+        </translation>
+      </itext>
+      <instance>
+        <data id="images-choice" version="20240611120218">
+          <animal/>
+          <meta>
+            <instanceID/>
+          </meta>
+        </data>
+      </instance>
+      <instance id="animals">
+        <root>
+          <item>
+            <itextId>animals-0</itextId>
+            <name>tiger</name>
+          </item>
+          <item>
+            <itextId>animals-1</itextId>
+            <name>camel</name>
+          </item>
+        </root>
+      </instance>
+      <bind nodeset="/data/animal" type="string"/>
+      <bind nodeset="/data/meta/instanceID" type="string" readonly="true()" jr:preload="uid"/>
+    </model>
+  </h:head>
+  <h:body>
+    <select1 ref="/data/animal">
+      <label>Animal</label>
+      <itemset nodeset="instance('animals')/root/item">
+        <value ref="name"/>
+        <label ref="jr:itext(itextId)"/>
+      </itemset>
+    </select1>
+  </h:body>
+</h:html>