From 2baf72aa065fd0ed889da115650f34140b7398bd Mon Sep 17 00:00:00 2001 From: Sadiq Khoja Date: Wed, 12 Jun 2024 10:44:17 -0400 Subject: [PATCH] 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 --- .../xforms/select/1-static-selects.xml | 10 +- .../xforms/select/3-images-choice.xml | 57 +++ .../fixtures/xforms/select/4-appearances.xml | 392 ++++++++++++++++++ packages/web-forms/env.d.ts | 2 + packages/web-forms/icomoon.json | 156 ++++--- packages/web-forms/index.html | 2 +- packages/web-forms/src/assets/css/icomoon.css | 3 + .../web-forms/src/assets/fonts/icomoon.svg | 3 +- .../web-forms/src/assets/fonts/icomoon.ttf | Bin 3004 -> 3040 bytes .../web-forms/src/assets/fonts/icomoon.woff | Bin 3080 -> 3116 bytes .../web-forms/src/components/FormGroup.vue | 29 +- .../web-forms/src/components/FormPanel.vue | 10 +- .../web-forms/src/components/OdkWebForm.vue | 6 + .../appearances/ColumnarAppearance.vue | 44 ++ .../components/appearances/FieldListTable.vue | 113 +++++ .../components/controls/Select1Control.vue | 62 +++ .../src/components/controls/SelectControl.vue | 93 +---- .../components/controls/SelectNControl.vue | 59 +++ .../controls/UnsupportedAppearance.vue | 14 + .../src/components/widgets/CheckboxWidget.vue | 87 ++++ .../src/components/widgets/LikertWidget.vue | 86 ++++ .../widgets/MultiselectDropdown.vue | 87 ++++ .../src/components/widgets/RadioButton.vue | 93 +++++ .../components/widgets/SearchableDropdown.vue | 46 ++ .../web-forms/src/directives/FullWidth.ts | 22 + .../src/themes/2024-light/theme.scss | 1 + .../tests/components/SelectControl.test.ts | 21 +- packages/web-forms/tsconfig.vitest.json | 3 +- vendor-types/primevue/dropdown.d.ts | 6 + vendor-types/primevue/multiselect.d.ts | 6 + 30 files changed, 1339 insertions(+), 174 deletions(-) create mode 100644 packages/ui-solid/fixtures/xforms/select/3-images-choice.xml create mode 100644 packages/ui-solid/fixtures/xforms/select/4-appearances.xml create mode 100644 packages/web-forms/src/components/appearances/ColumnarAppearance.vue create mode 100644 packages/web-forms/src/components/appearances/FieldListTable.vue create mode 100644 packages/web-forms/src/components/controls/Select1Control.vue create mode 100644 packages/web-forms/src/components/controls/SelectNControl.vue create mode 100644 packages/web-forms/src/components/controls/UnsupportedAppearance.vue create mode 100644 packages/web-forms/src/components/widgets/CheckboxWidget.vue create mode 100644 packages/web-forms/src/components/widgets/LikertWidget.vue create mode 100644 packages/web-forms/src/components/widgets/MultiselectDropdown.vue create mode 100644 packages/web-forms/src/components/widgets/RadioButton.vue create mode 100644 packages/web-forms/src/components/widgets/SearchableDropdown.vue create mode 100644 packages/web-forms/src/directives/FullWidth.ts create mode 100644 vendor-types/primevue/dropdown.d.ts create mode 100644 vendor-types/primevue/multiselect.d.ts diff --git a/packages/ui-solid/fixtures/xforms/select/1-static-selects.xml b/packages/ui-solid/fixtures/xforms/select/1-static-selects.xml index 4512d911c..999265548 100644 --- a/packages/ui-solid/fixtures/xforms/select/1-static-selects.xml +++ b/packages/ui-solid/fixtures/xforms/select/1-static-selects.xml @@ -163,14 +163,14 @@ cherry - blackberry peach + blackberry peach - + - - + + @@ -267,4 +267,4 @@ - + \ No newline at end of file diff --git a/packages/ui-solid/fixtures/xforms/select/3-images-choice.xml b/packages/ui-solid/fixtures/xforms/select/3-images-choice.xml new file mode 100644 index 000000000..16341ec9e --- /dev/null +++ b/packages/ui-solid/fixtures/xforms/select/3-images-choice.xml @@ -0,0 +1,57 @@ + + + + images-choice + + + + + tiger + jr://images/tiger.jpg + + + camel + jr://images/camel.jpg + + + + + + + + + + + + + + + animals-0 + tiger + + + animals-1 + camel + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/ui-solid/fixtures/xforms/select/4-appearances.xml b/packages/ui-solid/fixtures/xforms/select/4-appearances.xml new file mode 100644 index 000000000..b4b545bad --- /dev/null +++ b/packages/ui-solid/fixtures/xforms/select/4-appearances.xml @@ -0,0 +1,392 @@ + + + + Appearances + + + + + + + + + + + + + + + + + + + + karachi + + + + toronto + + + + lahore + + + + islamabad + + + + vancouver + + + + + + + + yes + + + + no + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/web-forms/env.d.ts b/packages/web-forms/env.d.ts index 6137c63f9..0f1e8c36a 100644 --- a/packages/web-forms/env.d.ts +++ b/packages/web-forms/env.d.ts @@ -1,3 +1,5 @@ /// /// /// +/// +/// diff --git a/packages/web-forms/icomoon.json b/packages/web-forms/icomoon.json index 4ae4ef925..a2b196a1e 100644 --- a/packages/web-forms/icomoon.json +++ b/packages/web-forms/icomoon.json @@ -15,15 +15,15 @@ "attrs": [], "properties": { "ligatures": "add_circle", - "id": 148, + "id": 0, "order": 282, "prevSize": 48, "code": 59648, "name": "add_circle" }, "setIdx": 0, - "setId": 4, - "iconIdx": 148 + "setId": 0, + "iconIdx": 0 }, { "icon": { @@ -39,15 +39,15 @@ "attrs": [], "properties": { "ligatures": "clear, close", - "id": 153, + "id": 1, "order": 287, "prevSize": 48, "code": 59649, "name": "clear" }, "setIdx": 0, - "setId": 4, - "iconIdx": 153 + "setId": 0, + "iconIdx": 1 }, { "icon": { @@ -63,15 +63,15 @@ "attrs": [], "properties": { "ligatures": "create, mode_edit, edit", - "id": 157, + "id": 2, "order": 290, "prevSize": 48, "code": 59650, "name": "create" }, "setIdx": 0, - "setId": 4, - "iconIdx": 157 + "setId": 0, + "iconIdx": 2 }, { "icon": { @@ -87,15 +87,15 @@ "attrs": [], "properties": { "ligatures": "gps_fixed, my_location", - "id": 219, + "id": 3, "order": 286, "prevSize": 48, "code": 59651, "name": "gps_fixed" }, "setIdx": 0, - "setId": 4, - "iconIdx": 219 + "setId": 0, + "iconIdx": 3 }, { "icon": { @@ -111,15 +111,15 @@ "attrs": [], "properties": { "ligatures": "cloud_upload, backup", - "id": 325, + "id": 4, "order": 291, "prevSize": 48, "code": 59652, "name": "cloud_upload" }, "setIdx": 0, - "setId": 4, - "iconIdx": 325 + "setId": 0, + "iconIdx": 4 }, { "icon": { @@ -133,15 +133,15 @@ "attrs": [], "properties": { "ligatures": "file_download, get_app", - "id": 326, + "id": 5, "order": 289, "prevSize": 48, "code": 59653, "name": "file_download" }, "setIdx": 0, - "setId": 4, - "iconIdx": 326 + "setId": 0, + "iconIdx": 5 }, { "icon": { @@ -155,15 +155,15 @@ "attrs": [], "properties": { "ligatures": "file_upload", - "id": 327, + "id": 6, "order": 288, "prevSize": 48, "code": 59654, "name": "file_upload" }, "setIdx": 0, - "setId": 4, - "iconIdx": 327 + "setId": 0, + "iconIdx": 6 }, { "icon": { @@ -177,15 +177,15 @@ "attrs": [], "properties": { "ligatures": "keyboard_arrow_down", - "id": 342, + "id": 7, "order": 275, "prevSize": 48, "code": 59655, "name": "keyboard_arrow_down" }, "setIdx": 0, - "setId": 4, - "iconIdx": 342 + "setId": 0, + "iconIdx": 7 }, { "icon": { @@ -199,15 +199,15 @@ "attrs": [], "properties": { "ligatures": "keyboard_arrow_left", - "id": 343, + "id": 8, "order": 276, "prevSize": 48, "code": 59656, "name": "keyboard_arrow_left" }, "setIdx": 0, - "setId": 4, - "iconIdx": 343 + "setId": 0, + "iconIdx": 8 }, { "icon": { @@ -221,15 +221,15 @@ "attrs": [], "properties": { "ligatures": "keyboard_arrow_right", - "id": 344, + "id": 9, "order": 277, "prevSize": 48, "code": 59657, "name": "keyboard_arrow_right" }, "setIdx": 0, - "setId": 4, - "iconIdx": 344 + "setId": 0, + "iconIdx": 9 }, { "icon": { @@ -243,15 +243,15 @@ "attrs": [], "properties": { "ligatures": "keyboard_arrow_up", - "id": 345, + "id": 10, "order": 278, "prevSize": 48, "code": 59658, "name": "keyboard_arrow_up" }, "setIdx": 0, - "setId": 4, - "iconIdx": 345 + "setId": 0, + "iconIdx": 10 }, { "icon": { @@ -267,15 +267,15 @@ "attrs": [], "properties": { "ligatures": "local_printshop, print", - "id": 552, + "id": 11, "order": 274, "prevSize": 48, "code": 59659, "name": "local_printshop" }, "setIdx": 0, - "setId": 4, - "iconIdx": 552 + "setId": 0, + "iconIdx": 11 }, { "icon": { @@ -289,15 +289,15 @@ "attrs": [], "properties": { "ligatures": "arrow_drop_down", - "id": 590, + "id": 12, "order": 293, "prevSize": 48, "code": 59660, "name": "arrow_drop_down" }, "setIdx": 0, - "setId": 4, - "iconIdx": 590 + "setId": 0, + "iconIdx": 12 }, { "icon": { @@ -311,15 +311,15 @@ "attrs": [], "properties": { "ligatures": "arrow_drop_up", - "id": 592, + "id": 13, "order": 294, "prevSize": 48, "code": 59661, "name": "arrow_drop_up" }, "setIdx": 0, - "setId": 4, - "iconIdx": 592 + "setId": 0, + "iconIdx": 13 }, { "icon": { @@ -335,15 +335,15 @@ "attrs": [], "properties": { "ligatures": "more_vert", - "id": 602, + "id": 14, "order": 281, "prevSize": 48, "code": 59662, "name": "more_vert" }, "setIdx": 0, - "setId": 4, - "iconIdx": 602 + "setId": 0, + "iconIdx": 14 }, { "icon": { @@ -359,15 +359,15 @@ "attrs": [], "properties": { "ligatures": "delete", - "id": 737, + "id": 15, "order": 284, "prevSize": 48, "code": 59663, "name": "delete" }, "setIdx": 0, - "setId": 4, - "iconIdx": 737 + "setId": 0, + "iconIdx": 15 }, { "icon": { @@ -383,15 +383,15 @@ "attrs": [], "properties": { "ligatures": "info", - "id": 760, + "id": 16, "order": 292, "prevSize": 48, "code": 59664, "name": "info" }, "setIdx": 0, - "setId": 4, - "iconIdx": 760 + "setId": 0, + "iconIdx": 16 }, { "icon": { @@ -407,15 +407,15 @@ "attrs": [], "properties": { "ligatures": "language", - "id": 766, + "id": 17, "order": 283, "prevSize": 48, "code": 59665, "name": "language" }, "setIdx": 0, - "setId": 4, - "iconIdx": 766 + "setId": 0, + "iconIdx": 17 }, { "icon": { @@ -431,15 +431,15 @@ "attrs": [], "properties": { "ligatures": "search", - "id": 789, + "id": 18, "order": 285, "prevSize": 48, "code": 59666, "name": "search" }, "setIdx": 0, - "setId": 4, - "iconIdx": 789 + "setId": 0, + "iconIdx": 18 }, { "icon": { @@ -455,15 +455,15 @@ "attrs": [], "properties": { "ligatures": "calendar_today", - "id": 903, + "id": 19, "order": 279, "prevSize": 48, "code": 59667, "name": "calendar_today" }, "setIdx": 0, - "setId": 4, - "iconIdx": 903 + "setId": 0, + "iconIdx": 19 }, { "icon": { @@ -479,15 +479,15 @@ "attrs": [], "properties": { "ligatures": "repeat", - "id": 35, + "id": 20, "order": 297, "prevSize": 48, "code": 59668, "name": "repeat" }, "setIdx": 0, - "setId": 4, - "iconIdx": 35 + "setId": 0, + "iconIdx": 20 }, { "icon": { @@ -501,15 +501,37 @@ "attrs": [], "properties": { "ligatures": "menu", - "id": 600, + "id": 21, "order": 299, "prevSize": 48, - "code": 59670, + "code": 59669, "name": "menu" }, "setIdx": 0, - "setId": 4, - "iconIdx": 600 + "setId": 0, + "iconIdx": 21 + }, + { + "icon": { + "paths": ["M384 690l452-452 60 60-512 512-238-238 60-60z"], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": ["check"], + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "check", + "id": 22, + "order": 322, + "prevSize": 48, + "code": 59670, + "name": "check" + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 22 } ], "height": 1024, diff --git a/packages/web-forms/index.html b/packages/web-forms/index.html index 8508a31c7..937ed58ee 100644 --- a/packages/web-forms/index.html +++ b/packages/web-forms/index.html @@ -3,7 +3,7 @@ - ODK Web Forms + ✨ ODK Web Forms
diff --git a/packages/web-forms/src/assets/css/icomoon.css b/packages/web-forms/src/assets/css/icomoon.css index 9d81d985c..e8e05b48b 100644 --- a/packages/web-forms/src/assets/css/icomoon.css +++ b/packages/web-forms/src/assets/css/icomoon.css @@ -89,5 +89,8 @@ content: '\e914'; } .icon-menu:before { + content: '\e915'; +} +.icon-check:before { content: '\e916'; } diff --git a/packages/web-forms/src/assets/fonts/icomoon.svg b/packages/web-forms/src/assets/fonts/icomoon.svg index 70038be2c..3d14ae3d2 100644 --- a/packages/web-forms/src/assets/fonts/icomoon.svg +++ b/packages/web-forms/src/assets/fonts/icomoon.svg @@ -28,5 +28,6 @@ - + + \ No newline at end of file diff --git a/packages/web-forms/src/assets/fonts/icomoon.ttf b/packages/web-forms/src/assets/fonts/icomoon.ttf index 8bd0fdf6067b46e6824efb126d7f85dc3416a6b0..edc9087f84af75da4f74d66cb9b40ef0c0aa62af 100644 GIT binary patch delta 355 zcmdlZ{y@B*fsuiMft#U$ftkU;KUm+0Ux-Z`D6$8L6OwZi3&g`N&1GO%`$)j?1z}|0QmtxzDh=J zNktNn0pyneiJYALWXD9&Z{oXv0uO)!7P*NP1q^BoVGImhAOjTg5_3~$dU5^+@-2Xt zv=!tRmjE3K1l$Ke@(j$(uO}X;)&@#4a4~Q&FaaSWgThO(|9}7g2Z{leykr2g8UH^P zX8~$u+?>bQ$L{g}0CNNL0R~nE231CJMs;(>2F4>c{}|rc{DjgVy`Yc*V*Ygk%j5ZN wzA|vLfJ7M{EjU#UqbJL7nlnmI4<0T)@dPc@L)<2lEB6M(NGJI1e!b0OyfbvH$=8 delta 319 zcmaDLzDK;CfsuiMft#U$ftkU;KUm+0Ux-Z$D6$8L6OwZi3tk4jyv4x4C0wgkW@{=7CMZXEZ0t$dEG|Nq_C}2=!2m|uJ0Qm}eiMgpWy*Pg}FmQSR)};?(gQtz{mguJUR^AAe#FD1LNe6++q`TgzL4Fa}x^~7#K5v;vpa`9(HMN zdSWq1Y!8sn0mTC8IhAQZu_Fu&>bQvnD1odmQ(=64gmQ%Ae;mu@{@t;{J3<0Yzq(;{U*LEH?aa}F&D@{1u#})2+K>% zO$Caz04;9=;hA2XzYFq~8=*bzJ=8V#l7jR}wKETN`nS;wri1`9oqckvV Rxxng~fB`SOIhkuIBLD%_T}%J~ delta 363 zcmZ1@(IFvL?(gQtz{mguJRA(%Aews*1LI^t9(|>=huqAbd|^MrvXT0|TcEP>mS~Yv`p5W&j0&Vl_a% z3J9|wV!oY`TLRR>xd6xq*^?0mBy#eTf$IFYKo)>Ci+&S+m77=rw3y2QD5e0$stjRy ziMgpju>_#yZ6G|;i}QCuesKxVA1~nQn1L*2=2w$>7^{sPfNUP1!>jQ<~tvxqY@Fay;vY~IA!$F2ZkP2#RR8_#d^m4TZDtl?4nL@y8n gL{IMEG-s5We1J1!vJRIS$l*W@3{so3xDGJ_0G)470ssI2 diff --git a/packages/web-forms/src/components/FormGroup.vue b/packages/web-forms/src/components/FormGroup.vue index bf0b6595b..96a8b38bb 100644 --- a/packages/web-forms/src/components/FormGroup.vue +++ b/packages/web-forms/src/components/FormGroup.vue @@ -1,16 +1,39 @@ + + diff --git a/packages/web-forms/src/components/FormPanel.vue b/packages/web-forms/src/components/FormPanel.vue index 78c4764f6..48a32b9fb 100644 --- a/packages/web-forms/src/components/FormPanel.vue +++ b/packages/web-forms/src/components/FormPanel.vue @@ -9,7 +9,7 @@ interface PanelProps { title?: string; menuItems?: MenuItem[]; noUi?: boolean; - class?: string; + class?: string[] | string; labelIcon?: string; labelNumber?: number; } @@ -58,7 +58,7 @@ const toggleMenu = (event: Event) => { @@ -128,4 +128,10 @@ h2 { } } + +.content-wrapper { + display: flex; + flex-direction: column; + gap: 2rem; +} \ No newline at end of file diff --git a/packages/web-forms/src/components/OdkWebForm.vue b/packages/web-forms/src/components/OdkWebForm.vue index a4e59fcf8..477debef6 100644 --- a/packages/web-forms/src/components/OdkWebForm.vue +++ b/packages/web-forms/src/components/OdkWebForm.vue @@ -124,4 +124,10 @@ body { background: white; } } + +@media screen and (min-width: #{$md}) { + .full-width { + width: 100% !important; + } +} \ No newline at end of file diff --git a/packages/web-forms/src/components/appearances/ColumnarAppearance.vue b/packages/web-forms/src/components/appearances/ColumnarAppearance.vue new file mode 100644 index 000000000..9150e77a3 --- /dev/null +++ b/packages/web-forms/src/components/appearances/ColumnarAppearance.vue @@ -0,0 +1,44 @@ + + + + + \ No newline at end of file diff --git a/packages/web-forms/src/components/appearances/FieldListTable.vue b/packages/web-forms/src/components/appearances/FieldListTable.vue new file mode 100644 index 000000000..5a79f1f8c --- /dev/null +++ b/packages/web-forms/src/components/appearances/FieldListTable.vue @@ -0,0 +1,113 @@ + + + + + \ No newline at end of file diff --git a/packages/web-forms/src/components/controls/Select1Control.vue b/packages/web-forms/src/components/controls/Select1Control.vue new file mode 100644 index 000000000..d155ee0f6 --- /dev/null +++ b/packages/web-forms/src/components/controls/Select1Control.vue @@ -0,0 +1,62 @@ + + + + + \ No newline at end of file diff --git a/packages/web-forms/src/components/controls/SelectControl.vue b/packages/web-forms/src/components/controls/SelectControl.vue index 6d0cb224d..c87d04326 100644 --- a/packages/web-forms/src/components/controls/SelectControl.vue +++ b/packages/web-forms/src/components/controls/SelectControl.vue @@ -1,94 +1,13 @@ - - diff --git a/packages/web-forms/src/components/controls/SelectNControl.vue b/packages/web-forms/src/components/controls/SelectNControl.vue new file mode 100644 index 000000000..291013f7d --- /dev/null +++ b/packages/web-forms/src/components/controls/SelectNControl.vue @@ -0,0 +1,59 @@ + + + + + \ No newline at end of file diff --git a/packages/web-forms/src/components/controls/UnsupportedAppearance.vue b/packages/web-forms/src/components/controls/UnsupportedAppearance.vue new file mode 100644 index 000000000..418ba9993 --- /dev/null +++ b/packages/web-forms/src/components/controls/UnsupportedAppearance.vue @@ -0,0 +1,14 @@ + + + diff --git a/packages/web-forms/src/components/widgets/CheckboxWidget.vue b/packages/web-forms/src/components/widgets/CheckboxWidget.vue new file mode 100644 index 000000000..f0f172d9f --- /dev/null +++ b/packages/web-forms/src/components/widgets/CheckboxWidget.vue @@ -0,0 +1,87 @@ + + + + + \ No newline at end of file diff --git a/packages/web-forms/src/components/widgets/LikertWidget.vue b/packages/web-forms/src/components/widgets/LikertWidget.vue new file mode 100644 index 000000000..4a109b954 --- /dev/null +++ b/packages/web-forms/src/components/widgets/LikertWidget.vue @@ -0,0 +1,86 @@ + + + + + \ No newline at end of file diff --git a/packages/web-forms/src/components/widgets/MultiselectDropdown.vue b/packages/web-forms/src/components/widgets/MultiselectDropdown.vue new file mode 100644 index 000000000..6bf971a66 --- /dev/null +++ b/packages/web-forms/src/components/widgets/MultiselectDropdown.vue @@ -0,0 +1,87 @@ + + + + + + + + \ No newline at end of file diff --git a/packages/web-forms/src/components/widgets/RadioButton.vue b/packages/web-forms/src/components/widgets/RadioButton.vue new file mode 100644 index 000000000..22e0f6dc9 --- /dev/null +++ b/packages/web-forms/src/components/widgets/RadioButton.vue @@ -0,0 +1,93 @@ + + + + + \ No newline at end of file diff --git a/packages/web-forms/src/components/widgets/SearchableDropdown.vue b/packages/web-forms/src/components/widgets/SearchableDropdown.vue new file mode 100644 index 000000000..ec9691f60 --- /dev/null +++ b/packages/web-forms/src/components/widgets/SearchableDropdown.vue @@ -0,0 +1,46 @@ + + + + + \ No newline at end of file diff --git a/packages/web-forms/src/directives/FullWidth.ts b/packages/web-forms/src/directives/FullWidth.ts new file mode 100644 index 000000000..71a96884a --- /dev/null +++ b/packages/web-forms/src/directives/FullWidth.ts @@ -0,0 +1,22 @@ +interface FullWidthBinding { + value: boolean | undefined; +} + +const checkWidth = (el: HTMLElement, binding: FullWidthBinding) => { + if (binding.value === false) return; + + const items: Element[] = Array.from(el.children); + + if (items.find((item) => item.scrollWidth * 2 > el.parentElement!.offsetWidth)) { + el.classList.add('full-width'); + } else { + el.classList.remove('full-width'); + } +}; + +const FullWidth = { + mounted: checkWidth, + updated: checkWidth, +}; + +export { FullWidth }; diff --git a/packages/web-forms/src/themes/2024-light/theme.scss b/packages/web-forms/src/themes/2024-light/theme.scss index 45f70ef03..cdc22b875 100644 --- a/packages/web-forms/src/themes/2024-light/theme.scss +++ b/packages/web-forms/src/themes/2024-light/theme.scss @@ -24,4 +24,5 @@ $emphasis-high: $textColour; --primary-50: #{$primary50}; --text-color: #{$textColour}; --light-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); + --surface-300: #{$lightGray}; } diff --git a/packages/web-forms/tests/components/SelectControl.test.ts b/packages/web-forms/tests/components/SelectControl.test.ts index 9cb5ec252..8923277ee 100644 --- a/packages/web-forms/tests/components/SelectControl.test.ts +++ b/packages/web-forms/tests/components/SelectControl.test.ts @@ -7,19 +7,23 @@ import { getReactiveForm, globalMountOptions } from '../helpers'; const mountComponent = async (questionNumber: number) => { const xform = await getReactiveForm('select/1-static-selects.xml'); - return mount(SelectControl, { + const component = mount(SelectControl, { props: { question: xform.currentState.children[questionNumber] as SelectNode, }, global: globalMountOptions, }); + + return { xform, component }; }; describe('SelectControl', () => { it('shows radio buttons for select1', async () => { - const component = await mountComponent(0); - const cherry: DOMWrapper = component.find('input[value="cherry"]'); - const mango: DOMWrapper = component.find('input[value="mango"]'); + const { xform, component } = await mountComponent(0); + const nodeId = xform.currentState.children[0].nodeId; + + const cherry: DOMWrapper = component.find(`input[id="${nodeId}_cherry"]`); + const mango: DOMWrapper = component.find(`input[id="${nodeId}_mango"]`); expect(cherry.element.type).toEqual('radio'); expect(cherry.element.checked).toBe(true); @@ -31,10 +35,13 @@ describe('SelectControl', () => { }); it('shows checkboxes for select many', async () => { - const component = await mountComponent(1); + const { xform, component } = await mountComponent(1); + const nodeId = xform.currentState.children[1].nodeId; - const watermelon: DOMWrapper = component.find('input[value="watermelon"]'); - const peach: DOMWrapper = component.find('input[value="peach"]'); + const watermelon: DOMWrapper = component.find( + `input[id="${nodeId}_watermelon"]` + ); + const peach: DOMWrapper = component.find(`input[id="${nodeId}_peach"]`); expect(watermelon.element.type).toEqual('checkbox'); expect(watermelon.element.checked).toBe(false); diff --git a/packages/web-forms/tsconfig.vitest.json b/packages/web-forms/tsconfig.vitest.json index 5d91d39b9..19503a713 100644 --- a/packages/web-forms/tsconfig.vitest.json +++ b/packages/web-forms/tsconfig.vitest.json @@ -5,7 +5,8 @@ "src/components/__tests__", "tests", "tests-examples", - "src/components/**/*.vue" + "src/components/**/*.vue", + "src/directives/**/*.ts" ], "exclude": [], "compilerOptions": { diff --git a/vendor-types/primevue/dropdown.d.ts b/vendor-types/primevue/dropdown.d.ts new file mode 100644 index 000000000..66ec6c037 --- /dev/null +++ b/vendor-types/primevue/dropdown.d.ts @@ -0,0 +1,6 @@ +declare module 'primevue/dropdown' { + interface DropdownProps { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + options?: any[] | readonly any[]; + } +} diff --git a/vendor-types/primevue/multiselect.d.ts b/vendor-types/primevue/multiselect.d.ts new file mode 100644 index 000000000..052387ec3 --- /dev/null +++ b/vendor-types/primevue/multiselect.d.ts @@ -0,0 +1,6 @@ +declare module 'primevue/multiselect' { + interface MultiSelectProps { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + options?: any[] | readonly any[]; + } +}