@jsenv/navi 0.10.2 → 0.11.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.
Files changed (207) hide show
  1. package/dist/jsenv_navi.js +13838 -23291
  2. package/dist/jsenv_navi.js.map +1281 -0
  3. package/package.json +6 -8
  4. package/index.js +0 -122
  5. package/src/action_private_properties.js +0 -11
  6. package/src/action_proxy_test.html +0 -353
  7. package/src/action_run_states.js +0 -5
  8. package/src/actions.js +0 -1401
  9. package/src/browser_integration/browser_integration.js +0 -216
  10. package/src/browser_integration/document_back_and_forward.js +0 -17
  11. package/src/browser_integration/document_loading_signal.js +0 -100
  12. package/src/browser_integration/document_state_signal.js +0 -9
  13. package/src/browser_integration/document_url_signal.js +0 -9
  14. package/src/browser_integration/use_is_visited.js +0 -19
  15. package/src/browser_integration/via_history.js +0 -232
  16. package/src/browser_integration/via_navigation.js +0 -168
  17. package/src/components/action_execution/form_context.js +0 -5
  18. package/src/components/action_execution/render_actionable_component.jsx +0 -29
  19. package/src/components/action_execution/use_action.js +0 -99
  20. package/src/components/action_execution/use_execute_action.js +0 -193
  21. package/src/components/action_execution/use_run_on_mount.js +0 -9
  22. package/src/components/action_renderer.jsx +0 -125
  23. package/src/components/callout/callout.js +0 -990
  24. package/src/components/callout/callout_demo.html +0 -201
  25. package/src/components/callout/test_dynamic_positioning.html +0 -161
  26. package/src/components/callout/test_html_document_iframe.html +0 -182
  27. package/src/components/demos/0_button_demo.html +0 -707
  28. package/src/components/demos/10_column_reordering_debug.html +0 -277
  29. package/src/components/demos/11_table_selection_debug.html +0 -432
  30. package/src/components/demos/1_checkbox_demo.html +0 -754
  31. package/src/components/demos/2_input_textual_demo.html +0 -286
  32. package/src/components/demos/3_radio_demo.html +0 -874
  33. package/src/components/demos/4_select_demo.html +0 -100
  34. package/src/components/demos/5_list_scrollable_demo.html +0 -153
  35. package/src/components/demos/6_tablist_demo.html +0 -77
  36. package/src/components/demos/7_table_selection_demo.html +0 -176
  37. package/src/components/demos/8_table_fixed_headers_demo.html +0 -584
  38. package/src/components/demos/9_table_column_drag_demo.html +0 -325
  39. package/src/components/demos/action/0_button_demo.html +0 -204
  40. package/src/components/demos/action/10_shortcuts_demo.html +0 -189
  41. package/src/components/demos/action/11_nested_shortcuts_demo.xhtml +0 -401
  42. package/src/components/demos/action/1_input_text_demo.html +0 -876
  43. package/src/components/demos/action/2_form_multiple.html +0 -303
  44. package/src/components/demos/action/3_details_demo.html +0 -203
  45. package/src/components/demos/action/4_input_checkbox_demo.html +0 -731
  46. package/src/components/demos/action/5_input_checkbox_state_demo.html +0 -270
  47. package/src/components/demos/action/6_checkbox_list_demo.html +0 -341
  48. package/src/components/demos/action/7_radio_list_demo.html +0 -357
  49. package/src/components/demos/action/8_editable_demo.html +0 -431
  50. package/src/components/demos/action/9_link_demo.html +0 -194
  51. package/src/components/demos/demo.md +0 -0
  52. package/src/components/demos/route/basic/basic.html +0 -14
  53. package/src/components/demos/route/basic/basic_route_demo.jsx +0 -224
  54. package/src/components/demos/route/multi/multi.html +0 -14
  55. package/src/components/demos/route/multi/multi_route_demo.jsx +0 -277
  56. package/src/components/demos/ui_transition/0_action_renderer_ui_transition_demo.html +0 -695
  57. package/src/components/demos/ui_transition/1_nested_ui_transition_demo.html +0 -429
  58. package/src/components/demos/ui_transition/2_height_transition_test.html +0 -295
  59. package/src/components/details/details.jsx +0 -245
  60. package/src/components/details/summary_marker.jsx +0 -141
  61. package/src/components/edition/editable.jsx +0 -186
  62. package/src/components/error_boundary_context.js +0 -9
  63. package/src/components/field/README.md +0 -247
  64. package/src/components/field/button.jsx +0 -429
  65. package/src/components/field/checkbox_list.jsx +0 -185
  66. package/src/components/field/collect_form_element_values.js +0 -82
  67. package/src/components/field/custom_field.js +0 -106
  68. package/src/components/field/form.jsx +0 -209
  69. package/src/components/field/input.jsx +0 -16
  70. package/src/components/field/input_checkbox.jsx +0 -434
  71. package/src/components/field/input_radio.jsx +0 -432
  72. package/src/components/field/input_textual.jsx +0 -389
  73. package/src/components/field/label.jsx +0 -46
  74. package/src/components/field/radio_list.jsx +0 -183
  75. package/src/components/field/select.jsx +0 -256
  76. package/src/components/field/use_action_events.js +0 -132
  77. package/src/components/field/use_form_events.js +0 -59
  78. package/src/components/field/use_ui_state_controller.js +0 -506
  79. package/src/components/item_tracker/README.md +0 -461
  80. package/src/components/item_tracker/use_isolated_item_tracker.jsx +0 -209
  81. package/src/components/item_tracker/use_isolated_item_tracker_demo.html +0 -148
  82. package/src/components/item_tracker/use_isolated_item_tracker_demo.jsx +0 -460
  83. package/src/components/item_tracker/use_item_tracker.jsx +0 -143
  84. package/src/components/item_tracker/use_item_tracker_demo.html +0 -207
  85. package/src/components/item_tracker/use_item_tracker_demo.jsx +0 -216
  86. package/src/components/keyboard_shortcuts/active_keyboard_shortcuts.jsx +0 -87
  87. package/src/components/keyboard_shortcuts/aria_key_shortcuts.js +0 -61
  88. package/src/components/keyboard_shortcuts/keyboard_key_meta.js +0 -17
  89. package/src/components/keyboard_shortcuts/keyboard_shortcuts.js +0 -371
  90. package/src/components/keyboard_shortcuts/os.js +0 -9
  91. package/src/components/layout/demos/demo_flex.html +0 -638
  92. package/src/components/layout/demos/demo_layout_style_buttons.html +0 -351
  93. package/src/components/layout/demos/demo_layout_style_input.html +0 -226
  94. package/src/components/layout/demos/demo_layout_style_text.html +0 -514
  95. package/src/components/layout/flex.jsx +0 -109
  96. package/src/components/layout/layout_context.jsx +0 -3
  97. package/src/components/layout/spacing.jsx +0 -20
  98. package/src/components/layout/use_layout_style.js +0 -249
  99. package/src/components/link/link.jsx +0 -267
  100. package/src/components/link/link_with_icon.jsx +0 -52
  101. package/src/components/loader/loader_background.jsx +0 -372
  102. package/src/components/loader/loading_spinner.jsx +0 -68
  103. package/src/components/loader/network_speed.js +0 -83
  104. package/src/components/loader/rectangle_loading.jsx +0 -244
  105. package/src/components/props_composition/demos/demo_with_props_style.html +0 -81
  106. package/src/components/props_composition/with_props_class_name.js +0 -37
  107. package/src/components/props_composition/with_props_style.js +0 -26
  108. package/src/components/route.jsx +0 -19
  109. package/src/components/selection/selection.jsx +0 -1583
  110. package/src/components/svg/font_sized_svg.jsx +0 -59
  111. package/src/components/svg/icon_and_text.jsx +0 -21
  112. package/src/components/svg/svg_mask_overlay.jsx +0 -105
  113. package/src/components/table/drag/table_drag.jsx +0 -506
  114. package/src/components/table/resize/table_resize.jsx +0 -650
  115. package/src/components/table/resize/table_size.js +0 -43
  116. package/src/components/table/selection/table_selection.js +0 -106
  117. package/src/components/table/selection/table_selection.jsx +0 -203
  118. package/src/components/table/sticky/sticky_group.js +0 -354
  119. package/src/components/table/sticky/table_sticky.js +0 -25
  120. package/src/components/table/sticky/table_sticky.jsx +0 -501
  121. package/src/components/table/table.jsx +0 -721
  122. package/src/components/table/table_css.js +0 -211
  123. package/src/components/table/table_ui.jsx +0 -49
  124. package/src/components/table/use_cells_and_columns.js +0 -90
  125. package/src/components/table/use_object_array_to_cells.js +0 -46
  126. package/src/components/table/z_indexes.js +0 -23
  127. package/src/components/tablist/tablist.jsx +0 -99
  128. package/src/components/text/demos/demo_text_and_icon.html +0 -421
  129. package/src/components/text/overflow.jsx +0 -15
  130. package/src/components/text/text.jsx +0 -83
  131. package/src/components/text/text_and_count.jsx +0 -28
  132. package/src/components/ui_transition.jsx +0 -128
  133. package/src/components/use_auto_focus.js +0 -94
  134. package/src/components/use_batch_during_render.js +0 -33
  135. package/src/components/use_debounce_true.js +0 -31
  136. package/src/components/use_dependencies_diff.js +0 -35
  137. package/src/components/use_focus_group.js +0 -20
  138. package/src/components/use_initial_value.js +0 -78
  139. package/src/components/use_is_visited.js +0 -19
  140. package/src/components/use_ref_array.js +0 -38
  141. package/src/components/use_signal_sync.js +0 -50
  142. package/src/components/use_stable_callback.js +0 -68
  143. package/src/components/use_state_array.js +0 -47
  144. package/src/docs/actions.md +0 -250
  145. package/src/docs/demos/resource/action_status.jsx +0 -42
  146. package/src/docs/demos/resource/demo.md +0 -1
  147. package/src/docs/demos/resource/resource_demo_0.html +0 -84
  148. package/src/docs/demos/resource/resource_demo_10_post_gc.html +0 -364
  149. package/src/docs/demos/resource/resource_demo_11_describe_many.html +0 -362
  150. package/src/docs/demos/resource/resource_demo_2.html +0 -173
  151. package/src/docs/demos/resource/resource_demo_3_filtered_users.html +0 -415
  152. package/src/docs/demos/resource/resource_demo_4_details.html +0 -284
  153. package/src/docs/demos/resource/resource_demo_5_renderer_lazy.html +0 -115
  154. package/src/docs/demos/resource/resource_demo_6_gc.html +0 -217
  155. package/src/docs/demos/resource/resource_demo_7_child_gc.html +0 -240
  156. package/src/docs/demos/resource/resource_demo_8_proxy_gc.html +0 -319
  157. package/src/docs/demos/resource/resource_demo_9_describe_one.html +0 -472
  158. package/src/docs/demos/resource/tata.jsx +0 -3
  159. package/src/docs/demos/resource/toto.jsx +0 -3
  160. package/src/docs/demos/user_nav/user_nav.html +0 -12
  161. package/src/docs/demos/user_nav/user_nav.jsx +0 -330
  162. package/src/docs/resource_dependencies.md +0 -103
  163. package/src/docs/resource_with_params.md +0 -80
  164. package/src/navi_css_vars.js +0 -14
  165. package/src/notes.md +0 -34
  166. package/src/route/route.js +0 -596
  167. package/src/route/route.xtest.html +0 -228
  168. package/src/store/array_signal_store.js +0 -537
  169. package/src/store/local_storage_signal.js +0 -17
  170. package/src/store/resource_graph.js +0 -1304
  171. package/src/store/tests/resource_graph_autoreload_demo.html +0 -12
  172. package/src/store/tests/resource_graph_autoreload_demo.jsx +0 -964
  173. package/src/store/tests/resource_graph_dependencies.test_manual.js +0 -95
  174. package/src/store/value_in_local_storage.js +0 -187
  175. package/src/symbol_object_signal.js +0 -1
  176. package/src/use_action_data.js +0 -10
  177. package/src/use_action_status.js +0 -47
  178. package/src/utils/add_many_event_listeners.js +0 -15
  179. package/src/utils/array_add_remove.js +0 -61
  180. package/src/utils/array_signal.js +0 -15
  181. package/src/utils/compare_two_js_values.js +0 -172
  182. package/src/utils/execute_with_cleanup.js +0 -21
  183. package/src/utils/get_caller_info.js +0 -85
  184. package/src/utils/is_signal.js +0 -20
  185. package/src/utils/js_value_weak_map.js +0 -162
  186. package/src/utils/js_value_weak_map_demo.html +0 -690
  187. package/src/utils/merge_two_js_values.js +0 -53
  188. package/src/utils/stringify_for_display.js +0 -131
  189. package/src/utils/weak_effect.js +0 -48
  190. package/src/validation/constraints/confirm_constraint.js +0 -14
  191. package/src/validation/constraints/create_unique_value_constraint.js +0 -27
  192. package/src/validation/constraints/native_constraints.js +0 -338
  193. package/src/validation/constraints/readonly_constraint.js +0 -41
  194. package/src/validation/constraints/same_as_constraint.js +0 -42
  195. package/src/validation/constraints/single_space_constraint.js +0 -13
  196. package/src/validation/custom_constraint_validation.js +0 -793
  197. package/src/validation/custom_message.js +0 -18
  198. package/src/validation/demos/browser_style.png +0 -0
  199. package/src/validation/demos/demo_same_as_constraint.html +0 -259
  200. package/src/validation/demos/form_validation_demo.html +0 -142
  201. package/src/validation/demos/form_validation_demo_preact.html +0 -87
  202. package/src/validation/demos/form_validation_native_popover_demo.html +0 -168
  203. package/src/validation/demos/form_validation_vs_native_demo.html +0 -172
  204. package/src/validation/hooks/use_constraints.js +0 -23
  205. package/src/validation/hooks/use_custom_validation_ref.js +0 -73
  206. package/src/validation/hooks/use_validation_message.js +0 -19
  207. package/src/validation/input_change_effect.js +0 -106
package/src/validation/custom_message.js DELETED
@@ -1,18 +0,0 @@
1
- import { installCustomConstraintValidation } from "./custom_constraint_validation.js";
2
-
3
- export const addCustomMessage = (element, key, message, options) => {
4
- const customConstraintValidation =
5
- element.__validationInterface__ ||
6
- (element.__validationInterface__ =
7
- installCustomConstraintValidation(element));
8
-
9
- return customConstraintValidation.addCustomMessage(key, message, options);
10
- };
11
-
12
- export const removeCustomMessage = (element, key) => {
13
- const customConstraintValidation = element.__validationInterface__;
14
- if (!customConstraintValidation) {
15
- return;
16
- }
17
- customConstraintValidation.removeCustomMessage(key);
18
- };
package/src/validation/demos/demo_same_as_constraint.html DELETED
@@ -1,259 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <title>Same As Constraint Demo - Password Confirmation</title>
6
- <style>
7
- .demo-container {
8
- max-width: 500px;
9
- margin-bottom: 30px;
10
- padding: 20px;
11
- background: #f8f9fa;
12
- border-radius: 8px;
13
- }
14
-
15
- .form-group {
16
- margin-bottom: 20px;
17
- }
18
-
19
- label {
20
- display: block;
21
- margin-bottom: 5px;
22
- color: #333;
23
- font-weight: bold;
24
- }
25
-
26
- input[type="password"] {
27
- box-sizing: border-box;
28
- width: 100%;
29
- padding: 10px;
30
- font-size: 14px;
31
- border: 1px solid #ddd;
32
- border-radius: 4px;
33
- }
34
-
35
- input[type="password"]:focus {
36
- border-color: #007bff;
37
- outline: none;
38
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
39
- }
40
-
41
- input[type="password"]:invalid {
42
- border-color: #dc3545;
43
- }
44
-
45
- .demo-container button {
46
- padding: 10px 20px;
47
- color: white;
48
- font-size: 14px;
49
- background: #007bff;
50
- border: none;
51
- border-radius: 4px;
52
- cursor: pointer;
53
- }
54
-
55
- .demo-container button:hover {
56
- background: #0056b3;
57
- }
58
-
59
- .demo-container button:disabled {
60
- background: #6c757d;
61
- cursor: not-allowed;
62
- }
63
-
64
- .validation-info {
65
- margin-top: 20px;
66
- padding: 15px;
67
- font-size: 14px;
68
- background: #e9ecef;
69
- border-radius: 4px;
70
- }
71
-
72
- .success-message {
73
- margin-top: 15px;
74
- padding: 10px;
75
- color: #155724;
76
- background: #d4edda;
77
- border: 1px solid #c3e6cb;
78
- border-radius: 4px;
79
- }
80
-
81
- .form-container {
82
- padding: 20px;
83
- background: white;
84
- border: 1px solid #ddd;
85
- border-radius: 8px;
86
- }
87
-
88
- h3 {
89
- margin-top: 0;
90
- color: #495057;
91
- }
92
- </style>
93
- </head>
94
- <body>
95
- <div style="padding: 20px; font-family: system-ui, sans-serif">
96
- <h1>Same As Constraint Demo - Password Confirmation</h1>
97
- <p>
98
- This demo shows how the <code>data-same-as</code> attribute validates
99
- that two password fields contain identical values when submitting a
100
- form.
101
- </p>
102
-
103
- <div class="demo-container">
104
- <h3>Password Confirmation Form</h3>
105
- <div class="form-container">
106
- <form id="passwordForm">
107
- <input
108
- name="username"
109
- value="demo_user"
110
- autocomplete="username"
111
- style="display: none"
112
- />
113
-
114
- <div class="form-group">
115
- <label for="password">Password:</label>
116
- <input
117
- type="password"
118
- id="password"
119
- name="password"
120
- required
121
- minlength="6"
122
- placeholder="Enter your password"
123
- autocomplete="new-password"
124
- />
125
- </div>
126
-
127
- <div class="form-group">
128
- <label for="confirmPassword">Confirm Password:</label>
129
- <input
130
- type="password"
131
- id="confirmPassword"
132
- name="confirmPassword"
133
- required
134
- data-same-as="#password"
135
- placeholder="Confirm your password"
136
- autocomplete="new-password"
137
- />
138
- </div>
139
-
140
- <button>Create Account</button>
141
- </form>
142
-
143
- <div
144
- id="successMessage"
145
- class="success-message"
146
- style="display: none"
147
- >
148
- ✅ Form submitted successfully! Passwords match.
149
- </div>
150
- </div>
151
-
152
- <div class="validation-info">
153
- <h4>How it works:</h4>
154
- <ul>
155
- <li>
156
- <strong>data-same-as="#password"</strong> - Links the confirm
157
- password field to the original password field
158
- </li>
159
- <li>Validation triggers when you try to submit the form</li>
160
- <li>If passwords don't match, a validation message appears</li>
161
- <li>
162
- The default message for password fields is: "Ce mot de passe doit
163
- être identique au précédent."
164
- </li>
165
- <li>Form submission is prevented until passwords match</li>
166
- </ul>
167
- </div>
168
- </div>
169
-
170
- <div class="demo-container">
171
- <h3>Test Scenarios</h3>
172
- <div class="validation-info">
173
- <h4>Try these test cases:</h4>
174
- <ol>
175
- <li>
176
- <strong>Empty fields</strong>: Click submit with empty passwords
177
- (required validation triggers first)
178
- </li>
179
- <li>
180
- <strong>Short password</strong>: Enter less than 6 characters
181
- (minlength validation)
182
- </li>
183
- <li>
184
- <strong>Mismatched passwords</strong>: Enter different passwords
185
- and click submit
186
- </li>
187
- <li>
188
- <strong>Matching passwords</strong>: Enter identical passwords to
189
- see successful submission
190
- </li>
191
- <li>
192
- <strong>Real-time feedback</strong>: Type in one field, then the
193
- other, then submit
194
- </li>
195
- </ol>
196
- </div>
197
- </div>
198
- </div>
199
-
200
- <script type="module">
201
- import {
202
- installCustomConstraintValidation,
203
- forwardActionRequested,
204
- } from "@jsenv/navi";
205
-
206
- // Install validation on the form and its inputs
207
- const form = document.getElementById("passwordForm");
208
- const passwordInput = document.getElementById("password");
209
- const confirmPasswordInput = document.getElementById("confirmPassword");
210
- const successMessage = document.getElementById("successMessage");
211
- const submitButton = form.querySelector("button");
212
-
213
- // Install custom constraint validation on the form
214
- installCustomConstraintValidation(form);
215
- installCustomConstraintValidation(passwordInput);
216
- installCustomConstraintValidation(confirmPasswordInput);
217
- installCustomConstraintValidation(submitButton);
218
-
219
- form.addEventListener("actionrequested", (e) => {
220
- forwardActionRequested(e, () => {
221
- // noop
222
- console.log("execute form action");
223
- });
224
- });
225
-
226
- // Handle form submission
227
- form.addEventListener("action", (event) => {
228
- console.log("Form action event triggered:", event.detail);
229
-
230
- // Simulate successful form submission
231
- successMessage.style.display = "block";
232
- form.reset();
233
-
234
- // Hide success message after 3 seconds
235
- setTimeout(() => {
236
- successMessage.style.display = "none";
237
- }, 3000);
238
- });
239
-
240
- // Handle validation prevention
241
- form.addEventListener("actionprevented", (event) => {
242
- console.log(
243
- "Form submission prevented due to validation:",
244
- event.detail,
245
- );
246
- successMessage.style.display = "none";
247
- });
248
-
249
- // Add some debugging
250
- passwordInput.addEventListener("input", () => {
251
- console.log("Password value:", passwordInput.value);
252
- });
253
-
254
- confirmPasswordInput.addEventListener("input", () => {
255
- console.log("Confirm password value:", confirmPasswordInput.value);
256
- });
257
- </script>
258
- </body>
259
- </html>
package/src/validation/demos/form_validation_demo.html DELETED
@@ -1,142 +0,0 @@
1
- <!--
2
-
3
- TOFIX:
4
-
5
- resize observer pas content lorsqu'on a un contenu vachement large
6
-
7
- lorsqu'on zoom le comportement semble étrange
8
-
9
-
10
- -->
11
-
12
- <!doctype html>
13
- <html>
14
- <head>
15
- <title>From validation demo</title>
16
- <meta name="viewport" content="width=device-width, initial-scale=1" />
17
- <meta charset="utf-8" />
18
- <link rel="icon" href="data:," />
19
- <style>
20
- body {
21
- background: yellow;
22
- }
23
-
24
- input {
25
- border-width: 5px;
26
- }
27
- </style>
28
- </head>
29
- <body>
30
- <div id="app">
31
- <div style="display: flex; gap: 30px">
32
- <div>
33
- <h3>Required</h3>
34
- <div style="border: 1px solid black">
35
- <form action="javascript:void(0)">
36
- <input
37
- type="text"
38
- required
39
- value=""
40
- title="Coucou"
41
- oninput="this.reportValidity()"
42
- />
43
- <button>button</button>
44
- <button type="submit">button type submit</button>
45
- <input preserve type="submit" value="submit" />
46
-
47
- <a onclick="this.parentNode.requestSubmit()"
48
- >form.requestSubmit()</a
49
- >
50
- </form>
51
- </div>
52
- </div>
53
-
54
- <div>
55
- <h3>Native email</h3>
56
- <div style="border: 1px solid black">
57
- <form action="javascript:void(0)">
58
- <input
59
- type="email"
60
- preserve
61
- value=""
62
- oninput="this.reportValidity()"
63
- />
64
- <button>button</button>
65
- <button type="submit">button type submit</button>
66
- <input preserve type="submit" value="submit" />
67
- </form>
68
- </div>
69
- </div>
70
-
71
- <div>
72
- <h3>Pattern</h3>
73
- <div style="border: 1px solid black">
74
- <form action="javascript:void(0)">
75
- <input
76
- type="text"
77
- pattern="^[a-z]{4,8}$"
78
- title="4 to 8 lowercase letters"
79
- value="10"
80
- oninput="this.reportValidity()"
81
- />
82
- </form>
83
- </div>
84
- </div>
85
- </div>
86
-
87
- <div>
88
- <h3>No "a" constraint</h3>
89
- <div style="border: 1px solid black">
90
- <form action="javascript:void(0)">
91
- <input
92
- id="no_a_constraint"
93
- type="text"
94
- value="10"
95
- oninput="this.reportValidity()"
96
- />
97
- </form>
98
-
99
- <button id="add_custom">Add custom message</button>
100
- <button id="remove_custom">Remove custom message</button>
101
- </div>
102
- </div>
103
- </div>
104
- <script type="module">
105
- // eslint-disable-next-line import-x/no-unresolved
106
- import { installInputValidation } from "./input_validity.js";
107
-
108
- const noAConstraint = {
109
- check: (input) => {
110
- const value = input.value;
111
- if (value.includes("a")) {
112
- return `Ce champ ne doit pas contenir la lettre "a".`;
113
- }
114
- return null;
115
- },
116
- };
117
- for (const input of document.querySelectorAll("input")) {
118
- if (input.hasAttribute("preserve")) {
119
- continue;
120
- }
121
-
122
- installInputValidation(input, {
123
- customConstraints:
124
- input.id === "no_a_constraint" ? [noAConstraint] : [],
125
- });
126
- }
127
-
128
- const addCustomButton = document.querySelector("#add_custom");
129
- document.querySelector("#add_custom").addEventListener("click", () => {
130
- const input = addCustomButton.parentNode.querySelector("input");
131
- input.validationInterface.addCustomMessage("test", "Hey oh", {
132
- level: "error",
133
- });
134
- });
135
- const removeCustomButton = document.querySelector("#remove_custom");
136
- removeCustomButton.addEventListener("click", () => {
137
- const input = removeCustomButton.parentNode.querySelector("input");
138
- input.validationInterface.removeCustomMessage("test");
139
- });
140
- </script>
141
- </body>
142
- </html>
package/src/validation/demos/form_validation_demo_preact.html DELETED
@@ -1,87 +0,0 @@
1
- <!--
2
-
3
- TOFIX:
4
-
5
- resize observer pas content lorsqu'on a un contenu vachement large
6
-
7
- lorsqu'on zoom le comportement semble étrange
8
-
9
-
10
- -->
11
-
12
- <!doctype html>
13
- <html>
14
- <head>
15
- <title>From validation demo</title>
16
- <meta name="viewport" content="width=device-width, initial-scale=1" />
17
- <meta charset="utf-8" />
18
- <link rel="icon" href="data:," />
19
- <style>
20
- body {
21
- background: yellow;
22
- }
23
-
24
- input {
25
- border-width: 5px;
26
- }
27
- </style>
28
- </head>
29
- <body>
30
- <div id="app"></div>
31
- <script type="module" jsenv-type="module/jsx">
32
- import { render } from "preact";
33
- import { useRef } from "preact/hooks";
34
- import { useConstraints } from "../hooks/use_constraints.js";
35
- import { useValidationMessage } from "../hooks/use_validation_message.js";
36
-
37
- // eslint-disable-next-line no-unused-vars
38
- const App = () => {
39
- const inputRef = useRef();
40
-
41
- useConstraints(inputRef, (input) => {
42
- const value = input.value;
43
- if (value.includes("a")) {
44
- return `Ce champ ne doit pas contenir la lettre "a".`;
45
- }
46
- return null;
47
- });
48
-
49
- const [addInputError, removeInputError] = useValidationMessage(
50
- inputRef,
51
- "error",
52
- );
53
-
54
- return (
55
- <div>
56
- <input
57
- required
58
- ref={inputRef}
59
- type="text"
60
- placeholder="Type something"
61
- onCancel={() => {
62
- console.log("cancel");
63
- }}
64
- />
65
-
66
- <button
67
- onClick={() => {
68
- addInputError("hey");
69
- }}
70
- >
71
- Set error
72
- </button>
73
- <button
74
- onClick={() => {
75
- removeInputError();
76
- }}
77
- >
78
- Reset error
79
- </button>
80
- </div>
81
- );
82
- };
83
-
84
- render(<App />, document.querySelector("#app"));
85
- </script>
86
- </body>
87
- </html>
package/src/validation/demos/form_validation_native_popover_demo.html DELETED
@@ -1,168 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <title>Form validation native popover</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <meta charset="utf-8" />
7
- <link rel="icon" href="data:," />
8
- <style>
9
- body {
10
- background: yellow;
11
- }
12
- </style>
13
- </head>
14
- <body>
15
- <div id="app">
16
- <h1>Form validation popover</h1>
17
-
18
- <div>
19
- <p>This demo shows how native popover behaves on form validation</p>
20
- </div>
21
-
22
- <div style="display: flex; gap: 30px">
23
- <div style="border: 1px solid black">
24
- <h3>Basic</h3>
25
- <form action="javascript:void(0)">
26
- <input
27
- type="text"
28
- pattern="^[a-z]{4,8}$"
29
- title="4 to 8 lowercase letters"
30
- autocomplete="off"
31
- value="10"
32
- oninput="this.reportValidity()"
33
- />
34
- </form>
35
- </div>
36
-
37
- <div style="border: 1px solid black; overflow: auto; height: 150px">
38
- <h3>Top of scrollable content</h3>
39
- <form action="javascript:void(0)">
40
- <input
41
- type="text"
42
- pattern="^[a-z]{4,8}$"
43
- title="4 to 8 lowercase letters"
44
- autocomplete="off"
45
- value="10"
46
- oninput="this.reportValidity()"
47
- />
48
- </form>
49
- <div style="height: 300px; background: blue"></div>
50
- </div>
51
-
52
- <div style="border: 1px solid black; overflow: auto; height: 150px">
53
- <h3>Bottom of scrollable content</h3>
54
- <div style="height: 300px; background: blue"></div>
55
- <form action="javascript:void(0)">
56
- <input
57
- type="text"
58
- pattern="^[a-z]{4,8}$"
59
- title="4 to 8 lowercase letters"
60
- autocomplete="off"
61
- value="10"
62
- oninput="this.reportValidity()"
63
- />
64
- </form>
65
- </div>
66
- </div>
67
-
68
- <br />
69
-
70
- <div style="display: flex; gap: 30px">
71
- <div style="border: 1px solid black; overflow: auto; height: 150px">
72
- <h3>minLength</h3>
73
- <form action="javascript:void(0)">
74
- <input type="text" minlength="5" oninput="this.reportValidity()" />
75
- </form>
76
- </div>
77
-
78
- <div style="border: 1px solid black; overflow: auto; height: 150px">
79
- <h3>maxLength</h3>
80
- <form action="javascript:void(0)">
81
- <input
82
- type="text"
83
- id="max_length"
84
- maxlength="5"
85
- oninput="this.reportValidity()"
86
- />
87
- </form>
88
- </div>
89
-
90
- <div style="border: 1px solid black; overflow: auto; height: 150px">
91
- <h3>min on number</h3>
92
- <form action="javascript:void(0)">
93
- <input
94
- type="number"
95
- min="5"
96
- value="4"
97
- oninput="this.reportValidity()"
98
- />
99
- </form>
100
- </div>
101
-
102
- <div style="border: 1px solid black; overflow: auto; height: 150px">
103
- <h3>min on range</h3>
104
- <form action="javascript:void(0)">
105
- <input
106
- type="range"
107
- id="min_range"
108
- min="10"
109
- max="100"
110
- value="5"
111
- oninput="this.reportValidity()"
112
- onchange="this.reportValidity()"
113
- />
114
- </form>
115
- </div>
116
- </div>
117
-
118
- <br />
119
-
120
- <div style="display: flex; gap: 30px">
121
- <div style="border: 1px solid black; overflow: auto; height: 150px">
122
- <h3>min on week</h3>
123
- <form action="javascript:void(0)">
124
- <input
125
- type="week"
126
- min="2017-W3"
127
- max="2017-W8"
128
- value="2017-W5"
129
- oninput="this.reportValidity()"
130
- onchange="this.reportValidity()"
131
- />
132
- </form>
133
- </div>
134
-
135
- <div style="border: 1px solid black; overflow: auto; height: 150px">
136
- <h3>min on date</h3>
137
- <form action="javascript:void(0)">
138
- <input
139
- type="date"
140
- id="date_min"
141
- min="2018-01-01"
142
- max="2018-05-05"
143
- value="2019-12-31"
144
- oninput="this.reportValidity()"
145
- />
146
- </form>
147
- </div>
148
-
149
- <div style="border: 1px solid black; overflow: auto; height: 150px">
150
- <h3>min on time</h3>
151
- <form action="javascript:void(0)">
152
- <input
153
- type="time"
154
- id="time_min"
155
- min="09:10"
156
- max="18:00"
157
- value="06:00"
158
- oninput="this.reportValidity()"
159
- />
160
- </form>
161
- </div>
162
- </div>
163
-
164
- <!-- <div style="background: blue; height: 400px"></div> -->
165
- </div>
166
- <script type="module"></script>
167
- </body>
168
- </html>