Upgrade primevue from v3 to v4

.gitignore

@@ -18,6 +18,7 @@ node_modules/
 
 # Build artifacts
 dist/
+dist-demo/
 examples/**/dist
 packages/**/dist
 

.vscode/settings.json

@@ -21,7 +21,7 @@
  "editor.formatOnSave": true
  },
  "[typescript]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": true
  },
  "[vue]": {

packages/web-forms/README.md

@@ -63,4 +63,12 @@ To update the icons using the [IcoMoon website](https://icomoon.io/app/):
 
 By following the steps above, you should minimize the diff. However, in the JSON file, you may still see changes for properties like `id`, `iconIdx`, `setId`, and `setIdx`.
 
-Material Icons are available under the Apache License Version 2.0. Copy of the license can be found at [`./src/assets/fonts/LICENSE-2.0.txt`](./src/assets/fonts/LICENSE-2.0.txt)
+Material Icons are available under the Apache License Version 2.0. Copy of the license can be found at [`./src/assets/fonts/icomoon/LICENSE-2.0.txt`](./src/assets/fonts/LICENSE-2.0.txt)
+
+
+================
+
+To download fonts from Google Fonts API:
+
+curl "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36' \
+ | grep src | cut -d\( -f2 | cut -d\) -f1 | xargs -I {} wget {}

packages/web-forms/package.json

@@ -28,8 +28,9 @@
  },
  "scripts": {
  "build": "npm-run-all -nl build:*",
- "build:clean": "rimraf dist/",
+ "build:clean": "rimraf dist/ dist-demo/",
  "build:js": "vite build",
+ "build:demo": "vite build --mode demo --outDir dist-demo",
  "build-preview": "yarn build && yarn vite serve build-preview --port 5174",
  "dev": "vite",
  "test": "npm-run-all -nl test:*",
@@ -51,14 +52,14 @@
  "@faker-js/faker": "^8.4.1",
  "@getodk/xforms-engine": "0.2.0",
  "@playwright/test": "^1.45.1",
+ "@primevue/themes": "^4.0.4",
  "@types/ramda": "^0.30.1",
  "@vitejs/plugin-vue": "^5.0.5",
  "@vitejs/plugin-vue-jsx": "^4.0.0",
  "@vue/test-utils": "^2.4.6",
  "jsdom": "^24.1.0",
  "primeflex": "^3.3.1",
- "primevue": "^3.53.0",
- "primevue-sass-theme": "https://github.com/primefaces/primevue-sass-theme.git#3.52.0",
+ "primevue": "^4.0.4",
  "ramda": "^0.30.1",
  "sass": "^1.77.2",
  "vite": "^5.3.3",

packages/web-forms/src/OdkWebFormDemo.vue

@@ -54,9 +54,9 @@ if(location.pathname != '/'){
 }
 </script>
 
-<template> 
+<template>
  <div v-if="!selectForm">
- <h1>Demo Forms</h1>
+ <h1>Demo Forms </h1>
  <ul class="form-list">
  <li v-for="form in demoForms" :key="form[0]" @click="showForm(form)">
  {{ form[0] }}

packages/web-forms/src/WebFormsPlugin.ts

@@ -1,8 +1,30 @@
+import { definePreset, palette } from '@primevue/themes';
+import Aura from '@primevue/themes/aura';
 import PrimeVue from 'primevue/config';
 import { type App } from 'vue';
 
+const odkBlue = '#3e9fcc';
+
+const odkPrimaryPalette = palette(odkBlue);
+
+const OdkPreset:unknown = definePreset(Aura, {
+ semantic: {
+ primary: odkPrimaryPalette
+ }
+});
+
 export const webFormsPlugin = {
  install(app: App) {
- app.use(PrimeVue, { ripple: false }); // Collect has no ripple
+ app.use(PrimeVue, {
+ ripple: false,
+ theme: {
+ preset: OdkPreset,
+ options: {
+ darkModeSelector: '.dark-mode',
+ prefix: ''
+ }
+ }
+ }); 
  },
 };
+

packages/web-forms/src/assets/css/icomoon.css

@@ -1,9 +1,9 @@
 @font-face {
  font-family: 'owf-icomoon';
  src:
- url('/fonts/icomoon.ttf?d2anc2') format('truetype'),
- url('/fonts/icomoon.woff?d2anc2') format('woff'),
- url('/fonts/icomoon.svg?d2anc2#icomoon') format('svg');
+ url('/fonts/icomoon/icomoon.ttf?d2anc2') format('truetype'),
+ url('/fonts/icomoon/icomoon.woff?d2anc2') format('woff'),
+ url('/fonts/icomoon/icomoon.svg?d2anc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;

packages/web-forms/src/assets/css/roboto.css

@@ -0,0 +1,189 @@
+/* cyrillic-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2') format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2') format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2') format('woff2');
+ unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2') format('woff2');
+ unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+/* vietnamese */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2') format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2') format('woff2');
+ unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2') format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2') format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2') format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2') format('woff2');
+ unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2') format('woff2');
+ unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+/* vietnamese */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2') format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2') format('woff2');
+ unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2') format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2') format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2') format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2') format('woff2');
+ unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2') format('woff2');
+ unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+/* vietnamese */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2') format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2') format('woff2');
+ unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url('/fonts/roboto/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2') format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}