@jsenv/navi 0.10.2 → 0.11.0

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 +5 -7
  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/components/demos/4_select_demo.html DELETED
@@ -1,100 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" href="data:," />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Select demo</title>
8
- </head>
9
- <body>
10
- <div id="root" style="position: relative"></div>
11
-
12
- <script type="module" jsenv-type="module/jsx">
13
- import { render } from "preact";
14
- import { useState } from "preact/hooks";
15
- import {
16
- // eslint-disable-next-line no-unused-vars
17
- Select,
18
- // eslint-disable-next-line no-unused-vars
19
- Label,
20
- } from "@jsenv/navi";
21
-
22
- // eslint-disable-next-line no-unused-vars
23
- const App = () => {
24
- const [loading, setLoading] = useState(false);
25
-
26
- return (
27
- <div>
28
- <button>
29
- <span
30
- onClick={() => {
31
- setLoading(!loading);
32
- }}
33
- >
34
- {loading ? "Stop loading" : "Start loading"}
35
- </span>
36
- </button>
37
-
38
- <div style="display: flex; flex-direction: row; gap: 30px">
39
- <div>
40
- <p>
41
- <strong>Loading</strong>
42
- </p>
43
-
44
- <Label>
45
- Coucou
46
- <Select name="loading" loading={loading}>
47
- {[
48
- { label: "a", value: "a" },
49
- { label: "b", value: "b" },
50
- ]}
51
- </Select>
52
- </Label>
53
-
54
- <div>
55
- <label>
56
- <select name="loading_native">
57
- <option value="a">a</option>
58
- <option value="b">b</option>
59
- </select>
60
- Coucou
61
- </label>
62
- </div>
63
- </div>
64
-
65
- <div>
66
- <p>
67
- <strong>Readonly</strong>
68
- </p>
69
-
70
- <Label>
71
- Coucou
72
- <Select name="loading" loading={loading} value="b" readOnly>
73
- {[
74
- { label: "a", value: "a" },
75
- { label: "b", value: "b" },
76
- ]}
77
- </Select>
78
- </Label>
79
-
80
- <div>
81
- <label>
82
- <select name="loading_native" readonly>
83
- <option value="a">a</option>
84
- <option value="b" selected>
85
- b
86
- </option>
87
- </select>
88
- Coucou
89
- </label>
90
- </div>
91
- </div>
92
- </div>
93
- </div>
94
- );
95
- };
96
-
97
- render(<App />, document.querySelector("#root"));
98
- </script>
99
- </body>
100
- </html>
package/src/components/demos/5_list_scrollable_demo.html DELETED
@@ -1,153 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" href="data:," />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Scrollable List Demo</title>
8
- </head>
9
- <body>
10
- <div id="root" style="position: relative"></div>
11
-
12
- <script type="module" jsenv-type="module/jsx">
13
- import { render } from "preact";
14
- import { useState, useRef } from "preact/hooks";
15
-
16
- // eslint-disable-next-line no-unused-vars
17
- const App = () => {
18
- const [items, setItems] = useState(() =>
19
- Array.from({ length: 100 }, (_, i) => ({
20
- id: i,
21
- text: `Item ${i} - Lorem ipsum dolor sit amet consectetur adipisicing elit`,
22
- })),
23
- );
24
- const [renderKey, setRenderKey] = useState(0);
25
- const listRef = useRef();
26
-
27
- const addItem = () => {
28
- setItems((prev) => [
29
- ...prev,
30
- {
31
- id: Date.now(),
32
- text: `New Item ${Date.now()} - Added dynamically with some long text`,
33
- },
34
- ]);
35
- };
36
-
37
- const removeLastItem = () => {
38
- setItems((prev) => prev.slice(0, -1));
39
- };
40
-
41
- const forceReRender = () => {
42
- setRenderKey((prev) => prev + 1);
43
- // Force a re-render by updating items with new objects
44
- setItems((prev) => prev.map((item) => ({ ...item })));
45
- };
46
-
47
- const scrollToMiddleAndReRender = () => {
48
- if (listRef.current) {
49
- const scrollHeight = listRef.current.scrollHeight;
50
- const clientHeight = listRef.current.clientHeight;
51
- const scrollTop = (scrollHeight - clientHeight) / 2;
52
- listRef.current.scrollTop = scrollTop;
53
-
54
- // Force re-render after scrolling
55
- setTimeout(() => {
56
- setRenderKey((prev) => prev + 1);
57
- // Force a re-render by updating items with new objects
58
- setItems((prev) => prev.map((item) => ({ ...item })));
59
- }, 100);
60
- }
61
- };
62
-
63
- return (
64
- <div style="padding: 20px; font-family: Arial, sans-serif;">
65
- <h1>Scrollable List Re-render Test</h1>
66
-
67
- <div style="margin-bottom: 20px; display: flex; gap: 10px; flex-wrap: wrap;">
68
- <button onClick={addItem} style="padding: 8px 16px;">
69
- Add Item
70
- </button>
71
- <button onClick={removeLastItem} style="padding: 8px 16px;">
72
- Remove Last Item
73
- </button>
74
- <button
75
- onClick={forceReRender}
76
- style="padding: 8px 16px; background: orange; color: white;"
77
- >
78
- Force Re-render
79
- </button>
80
- <button
81
- onClick={scrollToMiddleAndReRender}
82
- style="padding: 8px 16px; background: purple; color: white;"
83
- >
84
- Scroll to Middle + Re-render
85
- </button>
86
- </div>
87
-
88
- <div style="margin-bottom: 10px;">
89
- <strong>Total items: {items.length}</strong> |
90
- <strong>Render key: {renderKey}</strong>
91
- </div>
92
-
93
- <ul
94
- ref={listRef}
95
- style="
96
- height: 400px;
97
- overflow-y: auto;
98
- border: 2px solid #ccc;
99
- margin: 0;
100
- padding: 0;
101
- list-style: none;
102
- background: #f9f9f9;
103
- "
104
- >
105
- {items.map((item, index) => (
106
- <li
107
- key={item.id}
108
- style="
109
- padding: 12px 16px;
110
- border-bottom: 1px solid #ddd;
111
- background: white;
112
- margin-bottom: 2px;
113
- "
114
- >
115
- <div style="font-weight: bold; color: #333;">
116
- #{index + 1} (ID: {item.id})
117
- </div>
118
- <div style="color: #666; margin-top: 4px;">{item.text}</div>
119
- </li>
120
- ))}
121
- </ul>
122
-
123
- <div style="margin-top: 20px; padding: 10px; background: #e8f4f8; border-radius: 4px;">
124
- <h3>Test Instructions:</h3>
125
- <ul>
126
- <li>
127
- <strong>Add/Remove Items:</strong> Test how list changes
128
- affect scroll position
129
- </li>
130
- <li>
131
- <strong>Force Re-render:</strong> Test pure re-rendering
132
- without data changes
133
- </li>
134
- <li>
135
- <strong>Scroll + Re-render:</strong> Test scroll position
136
- preservation during re-render
137
- </li>
138
- </ul>
139
- <p>
140
- <em>
141
- Watch the scroll position and see how it behaves during
142
- different operations.
143
- </em>
144
- </p>
145
- </div>
146
- </div>
147
- );
148
- };
149
-
150
- render(<App />, document.querySelector("#root"));
151
- </script>
152
- </body>
153
- </html>
package/src/components/demos/6_tablist_demo.html DELETED
@@ -1,77 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" href="data:," />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>TabList demo</title>
8
- <style>
9
- .tab_button {
10
- background: none;
11
- border: none;
12
- color: inherit;
13
- font: inherit;
14
- cursor: pointer;
15
- }
16
- </style>
17
- </head>
18
- <body>
19
- <div id="root" style="position: relative"></div>
20
-
21
- <script type="module" jsenv-type="module/jsx">
22
- import { render } from "preact";
23
- import { useState } from "preact/hooks";
24
- import {
25
- // eslint-disable-next-line no-unused-vars
26
- TabList,
27
- // eslint-disable-next-line no-unused-vars
28
- Tab,
29
- } from "../tablist/tablist.jsx";
30
-
31
- const tabs = [
32
- { id: "overview", label: "Overview" },
33
- { id: "code", label: "Code" },
34
- { id: "issues", label: "Issues" },
35
- { id: "pulls", label: "Pull requests" },
36
- { id: "actions", label: "Actions" },
37
- { id: "projects", label: "Projects" },
38
- { id: "wiki", label: "Wiki" },
39
- { id: "security", label: "Security" },
40
- { id: "insights", label: "Insights" },
41
- ];
42
-
43
- // eslint-disable-next-line no-unused-vars
44
- const App = () => {
45
- const [selectedTabId, setSelectedTabId] = useState("overview");
46
-
47
- return (
48
- <div>
49
- <p style="max-width: 800px; margin: 20px auto 0;">
50
- Click the tabs to toggle the active one. The underline marker is
51
- shown for the active tab.
52
- </p>
53
- <TabList aria-label="Demo tabs">
54
- {tabs.map((tab) => (
55
- <Tab key={tab.id} selected={selectedTabId === tab.id}>
56
- <button
57
- type="button"
58
- className="tab_button"
59
- onClick={() => setSelectedTabId(tab.id)}
60
- >
61
- {tab.label}
62
- </button>
63
- </Tab>
64
- ))}
65
- </TabList>
66
- <div style="max-width: 800px; margin: 16px auto; padding: 12px; border: 1px dashed #ccc; border-radius: 8px;">
67
- <strong>Selected tab:</strong>{" "}
68
- {tabs.find((t) => t.id === selectedTabId).label}
69
- </div>
70
- </div>
71
- );
72
- };
73
-
74
- render(<App />, document.querySelector("#root"));
75
- </script>
76
- </body>
77
- </html>
package/src/components/demos/7_table_selection_demo.html DELETED
@@ -1,176 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Table Cell Selection Demo - Preact</title>
7
- <style>
8
- body {
9
- font-family:
10
- system-ui,
11
- -apple-system,
12
- sans-serif;
13
- margin: 20px;
14
- background: #f5f5f5;
15
- }
16
-
17
- .demo-container {
18
- max-width: 800px;
19
- margin: 0 auto;
20
- background: white;
21
- padding: 20px;
22
- border-radius: 8px;
23
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
24
- }
25
-
26
- /* Status display */
27
- .status {
28
- margin-top: 20px;
29
- padding: 10px;
30
- background: #f0f8ff;
31
- border-radius: 4px;
32
- font-family: monospace;
33
- font-size: 14px;
34
- }
35
-
36
- .actions {
37
- margin-top: 15px;
38
- }
39
-
40
- button {
41
- background: #0078d4;
42
- color: white;
43
- border: none;
44
- padding: 8px 16px;
45
- border-radius: 4px;
46
- cursor: pointer;
47
- margin-right: 8px;
48
- }
49
-
50
- button:hover {
51
- background: #106ebe;
52
- }
53
-
54
- button:disabled {
55
- background: #ccc;
56
- cursor: not-allowed;
57
- }
58
- </style>
59
- </head>
60
- <body>
61
- <div id="root"></div>
62
-
63
- <script type="module" jsenv-type="module/jsx">
64
- import { render } from "preact";
65
- import { useRef, useState } from "preact/hooks";
66
- import {
67
- // eslint-disable-next-line no-unused-vars
68
- Table,
69
- } from "@jsenv/navi";
70
-
71
- // Sample data
72
- const data = [
73
- {
74
- id: "1",
75
- index: 1,
76
- name: "1A",
77
- email: "2A",
78
- status: "3A",
79
- },
80
- {
81
- id: "2",
82
- index: 2,
83
- name: "1B",
84
- email: "2B",
85
- status: "3B",
86
- },
87
- {
88
- id: "3",
89
- index: 3,
90
- name: "1C",
91
- email: "2C",
92
- status: "3C",
93
- },
94
- {
95
- id: "4",
96
- index: 4,
97
- name: "4A",
98
- email: "4B",
99
- status: "4C",
100
- },
101
- ];
102
-
103
- // Column definitions
104
- const columns = [
105
- { id: "name", accessorKey: "name", header: "Name" },
106
- { id: "email", accessorKey: "email", header: "Email" },
107
- { id: "status", accessorKey: "status", header: "Status" },
108
- ];
109
-
110
- // eslint-disable-next-line no-unused-vars
111
- const TableDemo = () => {
112
- const tableRef = useRef(null);
113
- const [selection, setSelection] = useState([]);
114
-
115
- return (
116
- <div className="demo-container">
117
- <h1>Table Cell Selection Demo - Preact</h1>
118
- <p>
119
- Click cells to select/deselect. Use Cmd/Ctrl+click for
120
- multi-select. Use Tab and arrow keys to navigate.
121
- <br />
122
- <strong>Click the # column to select entire rows.</strong>
123
- <br />
124
- <strong>Click column headers to select entire columns.</strong>
125
- </p>
126
-
127
- <Table
128
- ref={tableRef}
129
- data={data}
130
- columns={columns}
131
- selection={selection}
132
- onSelectionChange={(value) => {
133
- setSelection(value);
134
- }}
135
- />
136
-
137
- <div className="status">
138
- <div>
139
- Selection: <span>{JSON.stringify(selection)}</span>
140
- </div>
141
- <div>
142
- Total selection count: <span>{selection.length}</span>
143
- </div>
144
- </div>
145
-
146
- <div className="actions">
147
- <button
148
- onClick={() => {
149
- tableRef.current.clearSelection();
150
- }}
151
- >
152
- Clear Selection
153
- </button>
154
- <button
155
- onClick={() => {
156
- tableRef.current.selectAll();
157
- }}
158
- >
159
- Select All
160
- </button>
161
- </div>
162
- </div>
163
- );
164
- };
165
-
166
- // Render the app
167
- render(<TableDemo />, document.getElementById("root"));
168
-
169
- console.log("Preact Table selection demo loaded. Try:");
170
- console.log("- Click cells to select/deselect");
171
- console.log("- Use Cmd/Ctrl+click for multi-select");
172
- console.log("- Use Tab and arrow keys to navigate");
173
- console.log("- Press Space or Enter to toggle selection");
174
- </script>
175
- </body>
176
- </html>