x4js 2.0.26 → 2.0.30

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 (73) hide show
  1. package/.vscode/launch.json +14 -0
  2. package/.vscode/settings.json +2 -0
  3. package/ai-comments.txt +97 -0
  4. package/demo/assets/house-light.svg +1 -0
  5. package/demo/assets/radio.svg +4 -0
  6. package/demo/index.html +12 -0
  7. package/demo/main.scss +23 -0
  8. package/demo/main.ts +324 -0
  9. package/demo/package.json +26 -0
  10. package/demo/scss.d.ts +4 -0
  11. package/demo/svg.d.ts +1 -0
  12. package/demo/tsconfig.json +14 -0
  13. package/lib/types/x4js.d.ts +0 -2374
  14. package/package.json +23 -47
  15. package/prepack.mjs +3 -0
  16. package/scripts/prepack.mjs +342 -0
  17. package/src/colors.scss +246 -0
  18. package/src/components/boxes/boxes.module.scss +1 -1
  19. package/src/components/boxes/boxes.ts +139 -28
  20. package/src/components/button/button.ts +80 -33
  21. package/src/components/combobox/combobox.ts +1 -1
  22. package/src/components/dialog/dialog.ts +4 -0
  23. package/src/components/gauge/gauge.module.scss +3 -0
  24. package/src/components/gauge/gauge.ts +1 -1
  25. package/src/components/gridview/gridview.ts +106 -8
  26. package/src/components/icon/icon.ts +42 -14
  27. package/src/components/input/input.ts +155 -76
  28. package/src/components/keyboard/keyboard.module.scss +1 -1
  29. package/src/components/keyboard/keyboard.ts +31 -9
  30. package/src/components/label/label.module.scss +9 -0
  31. package/src/components/label/label.ts +10 -6
  32. package/src/components/link/link.module.scss +44 -0
  33. package/src/components/link/link.ts +7 -1
  34. package/src/components/listbox/listbox.module.scss +18 -4
  35. package/src/components/listbox/listbox.ts +34 -15
  36. package/src/components/menu/menu.module.scss +14 -2
  37. package/src/components/menu/menu.ts +1 -1
  38. package/src/components/messages/messages.ts +13 -5
  39. package/src/components/panel/panel.module.scss +7 -0
  40. package/src/components/popup/popup.ts +14 -10
  41. package/src/components/propgrid/propgrid.ts +13 -3
  42. package/src/components/shared.scss +4 -0
  43. package/src/components/spreadsheet/spreadsheet.module.scss +308 -0
  44. package/src/components/spreadsheet/spreadsheet.ts +1223 -0
  45. package/src/components/tabs/tabs.module.scss +1 -0
  46. package/src/components/textarea/textarea.ts +8 -2
  47. package/src/components/textedit/textedit.ts +7 -0
  48. package/src/components/themes.scss +2 -0
  49. package/src/components/tooltips/tooltips.ts +15 -3
  50. package/src/core/component.ts +358 -162
  51. package/src/core/core_application.ts +129 -32
  52. package/src/core/core_colors.ts +382 -119
  53. package/src/core/core_data.ts +73 -86
  54. package/src/core/core_dom.ts +10 -0
  55. package/src/core/core_dragdrop.ts +32 -7
  56. package/src/core/core_element.ts +111 -4
  57. package/src/core/core_events.ts +48 -11
  58. package/src/core/core_i18n.ts +2 -0
  59. package/src/core/core_pdf.ts +454 -0
  60. package/src/core/core_router.ts +64 -5
  61. package/src/core/core_state.ts +1 -0
  62. package/src/core/core_styles.ts +11 -12
  63. package/src/core/core_svg.ts +348 -51
  64. package/src/core/core_tools.ts +105 -17
  65. package/src/x4.ts +1 -0
  66. package/src/x4tsx.d.ts +2 -1
  67. package/tsconfig.json +11 -0
  68. package/lib/README.txt +0 -20
  69. package/lib/cjs/x4.css +0 -1
  70. package/lib/cjs/x4.js +0 -2
  71. package/lib/esm/x4.css +0 -1
  72. package/lib/esm/x4.mjs +0 -2
  73. package/lib/styles/x4.css +0 -1
package/src/components/spreadsheet/spreadsheet.module.scss ADDED
@@ -0,0 +1,308 @@
1
+ /**
2
+ * ___ ___ __
3
+ * \ \/ / / _
4
+ * \ / /_| |_
5
+ * / \____ _|
6
+ * /__/\__\ |_|
7
+ *
8
+ * @file spreadsheet.module.scss
9
+ * @author Etienne Cochard
10
+ *
11
+ * @copyright (c) 2024 R-libre ingenierie
12
+ *
13
+ * Use of this source code is governed by an MIT-style license
14
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
15
+ **/
16
+
17
+
18
+ :root {
19
+ --spreadsheet-background: white;
20
+ --spreadsheet-border: var( --border );
21
+
22
+ --spreadsheet-header-cell-background: white;
23
+ --spreadsheet-header-cell-color: black;
24
+ --spreadsheet-header-cell-vline: #f0f0f0;
25
+ --spreadsheet-header-cell-border: #cccccc;
26
+
27
+ --spreadsheet-check-background: var( --accent-background );
28
+ --spreadsheet-check-color: white;
29
+ --spreadsheet-check-background-hover: white;
30
+ --spreadsheet-check-color-hover: var( --accent-background );
31
+
32
+ --spreadsheet-perc-background: var( --accent-background );
33
+ --spreadsheet-perc-color: white;
34
+ --spreadsheet-perc-background-hover: white;
35
+ --spreadsheet-perc-color-hover: var( --accent-background );
36
+
37
+ --spreadsheet-cell-color: black;
38
+ --spreadsheet-cell-color-sel: white;
39
+ --spreadsheet-cell-vline: var( --border );
40
+
41
+ --spreadsheet-row-background: white;
42
+ --spreadsheet-row-odd-background: white;
43
+ --spreadsheet-row-border: var( --border );
44
+
45
+ --spreadsheet-row-background-hover: var( --background-secondary );
46
+ --spreadsheet-row-background-hover-sel: var(--color-primary-a50);
47
+ --spreadsheet-row-background-sel: var( --accent-background );
48
+ --spreadsheet-row-color-sel: var( --accent-color );
49
+
50
+ --spreadsheet-fix-border: var( --accent-background );
51
+ }
52
+
53
+
54
+
55
+ .x4spreadsheet {
56
+
57
+ --left: 0px;
58
+ --top: 0px;
59
+
60
+ --fixed-width: 0;
61
+ --fixed-height: 30px;
62
+ --footer-height: 24px;
63
+
64
+ --row-height: 30px;
65
+
66
+ position: relative;
67
+ overflow: hidden;
68
+ margin: 5px;
69
+ outline: none;
70
+
71
+ background-color: var( --spreadsheet-background );
72
+ border: 1px solid var( --spreadsheet-border );
73
+
74
+ .cell {
75
+ padding: 4px;
76
+ display: flex;
77
+ align-items: center;
78
+ transition: border-bottom-color 0.3s ease, background-color 0.3s ease;
79
+ min-width: 16px;
80
+
81
+ .cell-check {
82
+ width: 16px;
83
+ height: 16px;
84
+ background-color: var( --spreadsheet-check-background );
85
+ color: var( --spreadsheet-check-color );
86
+ padding: 4px;
87
+ border-radius: 8px;
88
+ margin: 0 auto;
89
+ }
90
+
91
+ justify-content: start;
92
+
93
+ &.align-center {
94
+ justify-content: center;
95
+ }
96
+
97
+ &.align-right {
98
+ justify-content: end;
99
+ }
100
+ }
101
+
102
+ .x4viewport {
103
+ position: absolute;
104
+ overflow: auto;
105
+ right: 0;
106
+ bottom: var( --footer-height );
107
+ left: var( --fixed-width );
108
+ top: var( --fixed-height );
109
+ width: unset;
110
+ }
111
+
112
+ .body {
113
+ position: absolute;
114
+ overflow: hidden;
115
+
116
+ right: var( --scrollbar-size );
117
+ bottom: var( --scrollbar-size );
118
+ left: 0;
119
+ top: 0;
120
+ }
121
+
122
+ .row {
123
+ position: absolute;
124
+ left: 0;
125
+ top: 0;
126
+ display: flex;
127
+
128
+ overflow: hidden;
129
+ height: var( --row-height );
130
+ border-bottom: 1px solid var( --spreadsheet-row-border );
131
+
132
+ .cell {
133
+ height: 100%;
134
+ overflow: hidden;
135
+ white-space: nowrap;
136
+
137
+ border-right: 1px solid var( --spreadsheet-cell-vline );
138
+
139
+ &> .x4icon:not(.cell-check) {
140
+ height: 100%;
141
+ }
142
+
143
+ &> .x4image {
144
+ width: 100%;
145
+ height: 100%;
146
+ }
147
+
148
+ .percent {
149
+ width: 100%;
150
+ border: 1px solid var( --border );
151
+ height: 8px;
152
+ background-color: white;
153
+ overflow: hidden;
154
+
155
+ div {
156
+ background-color: var(--spreadsheet-perc-background);
157
+ height: 100%;
158
+ }
159
+ }
160
+
161
+
162
+ }
163
+ }
164
+
165
+ .cell.selected {
166
+ background-color: var( --spreadsheet-row-background-sel );
167
+ color: var( --spreadsheet-cell-color-sel );
168
+
169
+ .cell-check {
170
+ background-color: var( --spreadsheet-check-background-hover );
171
+ color: var( --spreadsheet-check-color-hover );
172
+ }
173
+ }
174
+
175
+ .cell:hover:not(.selected) {
176
+ background-color: var( --spreadsheet-row-background-hover );
177
+ .cell-check {
178
+ background-color: var( --spreadsheet-check-background-hover );
179
+ color: var( --spreadsheet-check-color-hover );
180
+ }
181
+ }
182
+
183
+ .cell:hover.selected {
184
+ background-color: var( --spreadsheet-row-background-hover-sel );
185
+ // color: var( --spreadsheet-cell-color );
186
+ }
187
+
188
+ .col-header,
189
+ .col-footer {
190
+ position: absolute;
191
+ background-color: var( --spreadsheet-header-cell-background );
192
+ touch-action: none;
193
+
194
+
195
+ left: calc( var( --fixed-width ) + var( --left ) );
196
+ &.fixed {
197
+ left: 0;
198
+ z-index: 2;
199
+ }
200
+
201
+ z-index: 1;
202
+
203
+ display: inline-flex;
204
+ align-items: center;
205
+
206
+ color: black;
207
+ font-weight: 500;
208
+ justify-content: center;
209
+
210
+ .cell {
211
+ position: relative;
212
+ height: 100%;
213
+ display: flex;
214
+
215
+ justify-content: center;
216
+ border-right: 1px solid var( --spreadsheet-header-cell-vline );
217
+
218
+ &> .x4simpletext {
219
+ flex-grow: 1;
220
+ text-overflow: ellipsis;
221
+ overflow: hidden;
222
+ }
223
+
224
+ .x-c-sizer:hover {
225
+ width: 8px;
226
+ }
227
+ }
228
+
229
+ &.fixed .cell:last-child {
230
+ border-right-color: var( --spreadsheet-fix-border );
231
+ }
232
+
233
+ &:hover .cell {
234
+ border-right-color: var( --border-hover );
235
+ }
236
+ }
237
+
238
+ .col-header {
239
+ top: 0;
240
+ height: var( --fixed-height );
241
+
242
+ border-bottom: 1px solid var( --spreadsheet-header-cell-border );
243
+
244
+ .cell {
245
+ overflow: hidden;
246
+ border-bottom: 1px solid transparent;
247
+
248
+ &:hover {
249
+ //background-color: var( --color-10 );
250
+ border-bottom-color: var( --spreadsheet-row-background-hover );
251
+ }
252
+ }
253
+ }
254
+
255
+ .col-footer {
256
+ border-top: 1px solid var( --spreadsheet-header-cell-border );
257
+ height: var( --footer-height );
258
+
259
+ bottom: 0;
260
+
261
+ .cell {
262
+ border-top: 1px solid transparent;
263
+
264
+ &:hover {
265
+ //background-color: var( --color-10 );
266
+ //border-top-color: var( --spreadsheet-row-background-hover );
267
+ background-color: var( --spreadsheet-row-background-hover );
268
+ }
269
+ }
270
+ }
271
+
272
+ .row-header {
273
+ position: absolute;
274
+ left: 0;
275
+ top: calc( var( --fixed-height ) + var( --top ) );
276
+ width: var( --fixed-width );
277
+ bottom: 0;
278
+
279
+ background-color: white;
280
+ z-index: 1;
281
+
282
+ .row {
283
+ position: absolute;
284
+ display: inline-flex;
285
+ }
286
+
287
+ .cell {
288
+ border-right: 1px solid var( --spreadsheet-cell-vline );
289
+ border-bottom: 1px solid var(--spreadsheet-row-border );
290
+ height: var( --row-height );
291
+
292
+ &> .x4simpletext {
293
+ margin: 0 auto;
294
+ }
295
+
296
+ &:last-child {
297
+ border-right: 1px solid var( --spreadsheet-fix-border );
298
+ }
299
+ }
300
+
301
+ .cell-out {
302
+ position: absolute;
303
+ background-color: var( --color-gray-0 );
304
+ width: 100%;
305
+ height: var( --row-height );
306
+ }
307
+ }
308
+ }