@getodk/web-forms 0.12.0 → 0.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -1
- package/dist/index.js +882 -900
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -67,6 +67,30 @@ Individual test environments, and their corresponding watch modes, also have sep
|
|
|
67
67
|
|
|
68
68
|
Upload XLSForm and XForm functionality in [`demo`](./src/demo/) app and in dev mode depends on [XLSForm-online](https://github.com/getodk/xlsform-online). Run the xlsform-online locally. By default it runs on port 8000, if you are running it on another port then you should update the [`config`](./src/demo/config.json) file.
|
|
69
69
|
|
|
70
|
+
### Project Structure
|
|
71
|
+
|
|
72
|
+
```
|
|
73
|
+
web-forms/
|
|
74
|
+
├── public/ # Static assets (e.g., favicon.ico)
|
|
75
|
+
├── src/
|
|
76
|
+
│ ├── assets/
|
|
77
|
+
│ │ ├── images/ # Web Forms and Demo page images
|
|
78
|
+
│ │ ├── styles/ # Web Forms and Demo page styles
|
|
79
|
+
│ ├── components/ # UI components
|
|
80
|
+
│ │ ├── form-elements/ # Form elements or controllers (question types, hints, labels, inputs)
|
|
81
|
+
│ │ ├── form-layout/ # Form layout and rendering (e.g., form panel, groups, repeats, form error classes)
|
|
82
|
+
│ │ ├── common/ # Reusable smaller components (e.g., icon, image, checkbox components)
|
|
83
|
+
│ ├── demo/ # Demo page
|
|
84
|
+
│ ├── lib/ # Utilities
|
|
85
|
+
│ ├── index.ts
|
|
86
|
+
│ ├── web-forms-plugin.ts # Vue plugin
|
|
87
|
+
├── tests/ # Unit tests
|
|
88
|
+
├── e2e/ # E2e tests
|
|
89
|
+
├── package.json
|
|
90
|
+
├── vite.config.ts
|
|
91
|
+
├── playwright.config.ts
|
|
92
|
+
```
|
|
93
|
+
|
|
70
94
|
### Styling Overview
|
|
71
95
|
|
|
72
96
|
This project uses a combination of [PrimeFlex](https://primeflex.org/) and [PrimeVue](https://primevue.org/) for consistent styling, alongside specific font rules for the ODK Website's Web Forms Preview.
|
|
@@ -83,7 +107,7 @@ We use CSS variables for theming with two prefixes:
|
|
|
83
107
|
|
|
84
108
|
#### Z-Index Layering System
|
|
85
109
|
|
|
86
|
-
This package uses a centralized `z-index` layering system to manage UI stacking order, defined in `src/assets/
|
|
110
|
+
This package uses a centralized `z-index` layering system to manage UI stacking order, defined in `src/assets/styles/style.scss`. The ODK variables (e.g., `--odk-z-index-error-banner`) ensure elements like floating error messages, form controls, and overlays stack correctly without overlap.
|
|
87
111
|
|
|
88
112
|
- **Key layers**:
|
|
89
113
|
|