x4js 1.5.18 → 1.5.20

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 (242) hide show
  1. package/lib/{README.md → README.txt} +0 -0
  2. package/lib/cjs/index.js +39 -103
  3. package/lib/cjs/index.js.map +7 -0
  4. package/lib/esm/index.mjs +39 -87
  5. package/lib/esm/index.mjs.map +7 -0
  6. package/lib/{license.md → licence.md} +0 -0
  7. package/lib/src/MIT-license.md +14 -0
  8. package/lib/{types/action.d.ts → src/action.ts} +64 -33
  9. package/lib/src/alpha.jpg +0 -0
  10. package/lib/src/app_sockets.ts +81 -0
  11. package/lib/src/application.ts +251 -0
  12. package/lib/src/autocomplete.ts +197 -0
  13. package/lib/src/base64.ts +166 -0
  14. package/lib/src/base_component.ts +152 -0
  15. package/lib/src/button.ts +355 -0
  16. package/lib/src/calendar.ts +328 -0
  17. package/lib/src/canvas.ts +505 -0
  18. package/lib/src/cardview.ts +227 -0
  19. package/lib/src/checkbox.ts +188 -0
  20. package/lib/src/color.ts +752 -0
  21. package/lib/src/colorpicker.ts +1639 -0
  22. package/lib/src/combobox.ts +465 -0
  23. package/lib/src/component.ts +2329 -0
  24. package/lib/{esm/dom_events.js → src/copyright.txt} +27 -29
  25. package/lib/src/datastore.ts +1322 -0
  26. package/lib/src/dialog.ts +656 -0
  27. package/lib/src/dom_events.ts +315 -0
  28. package/lib/src/drag_manager.ts +199 -0
  29. package/lib/src/drawtext.ts +355 -0
  30. package/lib/src/fileupload.ts +213 -0
  31. package/lib/src/form.ts +375 -0
  32. package/lib/src/formatters.ts +105 -0
  33. package/lib/src/gridview.ts +1185 -0
  34. package/lib/src/i18n.ts +346 -0
  35. package/lib/src/icon.ts +335 -0
  36. package/lib/src/image.ts +204 -0
  37. package/lib/src/index.ts +89 -0
  38. package/lib/src/input.ts +249 -0
  39. package/lib/src/label.ts +128 -0
  40. package/lib/src/layout.ts +430 -0
  41. package/lib/src/link.ts +86 -0
  42. package/lib/src/listview.ts +765 -0
  43. package/lib/{esm/md5.js → src/md5.ts} +438 -403
  44. package/lib/src/menu.ts +425 -0
  45. package/lib/src/messagebox.ts +224 -0
  46. package/lib/src/panel.ts +86 -0
  47. package/lib/src/popup.ts +494 -0
  48. package/lib/src/property_editor.ts +337 -0
  49. package/lib/src/radiobtn.ts +197 -0
  50. package/lib/src/rating.ts +135 -0
  51. package/lib/src/request.ts +300 -0
  52. package/lib/src/router.ts +185 -0
  53. package/lib/src/settings.ts +77 -0
  54. package/lib/src/sidebarview.ts +103 -0
  55. package/lib/src/spreadsheet.ts +1449 -0
  56. package/lib/src/styles.ts +343 -0
  57. package/lib/src/svgcomponent.ts +577 -0
  58. package/lib/src/tabbar.ts +151 -0
  59. package/lib/src/tabview.ts +110 -0
  60. package/lib/src/textarea.ts +235 -0
  61. package/lib/src/textedit.ts +544 -0
  62. package/lib/src/toaster.ts +80 -0
  63. package/lib/src/tools.ts +1473 -0
  64. package/lib/src/tooltips.ts +191 -0
  65. package/lib/src/treeview.ts +716 -0
  66. package/lib/{esm/version.js → src/version.ts} +30 -29
  67. package/lib/{styles → src}/x4.less +0 -0
  68. package/lib/src/x4dom.ts +57 -0
  69. package/lib/src/x4events.ts +585 -0
  70. package/lib/src/x4react.ts +90 -0
  71. package/package.json +52 -46
  72. package/lib/cjs/action.js +0 -58
  73. package/lib/cjs/app_sockets.js +0 -74
  74. package/lib/cjs/application.js +0 -182
  75. package/lib/cjs/autocomplete.js +0 -155
  76. package/lib/cjs/base_component.js +0 -124
  77. package/lib/cjs/button.js +0 -263
  78. package/lib/cjs/calendar.js +0 -254
  79. package/lib/cjs/canvas.js +0 -361
  80. package/lib/cjs/cardview.js +0 -161
  81. package/lib/cjs/checkbox.js +0 -139
  82. package/lib/cjs/color.js +0 -591
  83. package/lib/cjs/colorpicker.js +0 -1468
  84. package/lib/cjs/combobox.js +0 -349
  85. package/lib/cjs/component.js +0 -1719
  86. package/lib/cjs/datastore.js +0 -985
  87. package/lib/cjs/dialog.js +0 -478
  88. package/lib/cjs/dom_events.js +0 -30
  89. package/lib/cjs/drag_manager.js +0 -145
  90. package/lib/cjs/drawtext.js +0 -276
  91. package/lib/cjs/fileupload.js +0 -167
  92. package/lib/cjs/form.js +0 -304
  93. package/lib/cjs/formatters.js +0 -90
  94. package/lib/cjs/gridview.js +0 -881
  95. package/lib/cjs/i18n.js +0 -266
  96. package/lib/cjs/icon.js +0 -272
  97. package/lib/cjs/image.js +0 -157
  98. package/lib/cjs/input.js +0 -174
  99. package/lib/cjs/label.js +0 -95
  100. package/lib/cjs/layout.js +0 -322
  101. package/lib/cjs/link.js +0 -64
  102. package/lib/cjs/listview.js +0 -546
  103. package/lib/cjs/md5.js +0 -403
  104. package/lib/cjs/menu.js +0 -301
  105. package/lib/cjs/messagebox.js +0 -177
  106. package/lib/cjs/panel.js +0 -68
  107. package/lib/cjs/popup.js +0 -383
  108. package/lib/cjs/property_editor.js +0 -252
  109. package/lib/cjs/radiobtn.js +0 -140
  110. package/lib/cjs/rating.js +0 -102
  111. package/lib/cjs/request.js +0 -246
  112. package/lib/cjs/router.js +0 -139
  113. package/lib/cjs/settings.js +0 -69
  114. package/lib/cjs/sidebarview.js +0 -82
  115. package/lib/cjs/spreadsheet.js +0 -1084
  116. package/lib/cjs/styles.js +0 -275
  117. package/lib/cjs/svgcomponent.js +0 -447
  118. package/lib/cjs/tabbar.js +0 -111
  119. package/lib/cjs/tabview.js +0 -85
  120. package/lib/cjs/textarea.js +0 -165
  121. package/lib/cjs/textedit.js +0 -415
  122. package/lib/cjs/toaster.js +0 -64
  123. package/lib/cjs/tools.js +0 -1197
  124. package/lib/cjs/tooltips.js +0 -157
  125. package/lib/cjs/treeview.js +0 -535
  126. package/lib/cjs/version.js +0 -32
  127. package/lib/cjs/x4dom.js +0 -32
  128. package/lib/cjs/x4events.js +0 -384
  129. package/lib/cjs/x4react.js +0 -72
  130. package/lib/esm/action.js +0 -53
  131. package/lib/esm/app_sockets.js +0 -70
  132. package/lib/esm/application.js +0 -184
  133. package/lib/esm/autocomplete.js +0 -155
  134. package/lib/esm/base_component.js +0 -107
  135. package/lib/esm/button.js +0 -257
  136. package/lib/esm/calendar.js +0 -249
  137. package/lib/esm/canvas.js +0 -358
  138. package/lib/esm/cardview.js +0 -159
  139. package/lib/esm/checkbox.js +0 -134
  140. package/lib/esm/color.js +0 -588
  141. package/lib/esm/colorpicker.js +0 -1475
  142. package/lib/esm/combobox.js +0 -351
  143. package/lib/esm/component.js +0 -1711
  144. package/lib/esm/datastore.js +0 -990
  145. package/lib/esm/dialog.js +0 -490
  146. package/lib/esm/drag_manager.js +0 -147
  147. package/lib/esm/drawtext.js +0 -271
  148. package/lib/esm/fileupload.js +0 -163
  149. package/lib/esm/form.js +0 -304
  150. package/lib/esm/formatters.js +0 -81
  151. package/lib/esm/gridview.js +0 -889
  152. package/lib/esm/i18n.js +0 -257
  153. package/lib/esm/icon.js +0 -261
  154. package/lib/esm/image.js +0 -154
  155. package/lib/esm/input.js +0 -182
  156. package/lib/esm/label.js +0 -90
  157. package/lib/esm/layout.js +0 -310
  158. package/lib/esm/link.js +0 -59
  159. package/lib/esm/listview.js +0 -534
  160. package/lib/esm/menu.js +0 -300
  161. package/lib/esm/messagebox.js +0 -161
  162. package/lib/esm/panel.js +0 -65
  163. package/lib/esm/popup.js +0 -379
  164. package/lib/esm/property_editor.js +0 -251
  165. package/lib/esm/radiobtn.js +0 -136
  166. package/lib/esm/rating.js +0 -97
  167. package/lib/esm/request.js +0 -224
  168. package/lib/esm/router.js +0 -136
  169. package/lib/esm/settings.js +0 -66
  170. package/lib/esm/sidebarview.js +0 -79
  171. package/lib/esm/spreadsheet.js +0 -1097
  172. package/lib/esm/styles.js +0 -270
  173. package/lib/esm/svgcomponent.js +0 -450
  174. package/lib/esm/tabbar.js +0 -107
  175. package/lib/esm/tabview.js +0 -83
  176. package/lib/esm/textarea.js +0 -160
  177. package/lib/esm/textedit.js +0 -412
  178. package/lib/esm/toaster.js +0 -62
  179. package/lib/esm/tools.js +0 -1158
  180. package/lib/esm/tooltips.js +0 -153
  181. package/lib/esm/treeview.js +0 -527
  182. package/lib/esm/x4dom.js +0 -29
  183. package/lib/esm/x4events.js +0 -376
  184. package/lib/esm/x4react.js +0 -71
  185. package/lib/types/app_sockets.d.ts +0 -29
  186. package/lib/types/application.d.ts +0 -104
  187. package/lib/types/autocomplete.d.ts +0 -58
  188. package/lib/types/base_component.d.ts +0 -88
  189. package/lib/types/button.d.ts +0 -151
  190. package/lib/types/calendar.d.ts +0 -82
  191. package/lib/types/canvas.d.ts +0 -92
  192. package/lib/types/cardview.d.ts +0 -87
  193. package/lib/types/checkbox.d.ts +0 -77
  194. package/lib/types/color.d.ts +0 -148
  195. package/lib/types/colorpicker.d.ts +0 -107
  196. package/lib/types/combobox.d.ts +0 -107
  197. package/lib/types/component.d.ts +0 -601
  198. package/lib/types/datastore.d.ts +0 -396
  199. package/lib/types/dialog.d.ts +0 -175
  200. package/lib/types/dom_events.d.ts +0 -302
  201. package/lib/types/drag_manager.d.ts +0 -54
  202. package/lib/types/drawtext.d.ts +0 -48
  203. package/lib/types/fileupload.d.ts +0 -64
  204. package/lib/types/form.d.ts +0 -133
  205. package/lib/types/formatters.d.ts +0 -35
  206. package/lib/types/gridview.d.ts +0 -175
  207. package/lib/types/i18n.d.ts +0 -73
  208. package/lib/types/icon.d.ts +0 -64
  209. package/lib/types/image.d.ts +0 -55
  210. package/lib/types/index.d.ts +0 -84
  211. package/lib/types/input.d.ts +0 -91
  212. package/lib/types/label.d.ts +0 -58
  213. package/lib/types/layout.d.ts +0 -87
  214. package/lib/types/link.d.ts +0 -50
  215. package/lib/types/listview.d.ts +0 -178
  216. package/lib/types/md5.d.ts +0 -61
  217. package/lib/types/menu.d.ts +0 -130
  218. package/lib/types/messagebox.d.ts +0 -69
  219. package/lib/types/panel.d.ts +0 -47
  220. package/lib/types/popup.d.ts +0 -75
  221. package/lib/types/property_editor.d.ts +0 -71
  222. package/lib/types/radiobtn.d.ts +0 -73
  223. package/lib/types/rating.d.ts +0 -53
  224. package/lib/types/request.d.ts +0 -52
  225. package/lib/types/router.d.ts +0 -42
  226. package/lib/types/settings.d.ts +0 -37
  227. package/lib/types/sidebarview.d.ts +0 -49
  228. package/lib/types/spreadsheet.d.ts +0 -222
  229. package/lib/types/styles.d.ts +0 -85
  230. package/lib/types/svgcomponent.d.ts +0 -215
  231. package/lib/types/tabbar.d.ts +0 -58
  232. package/lib/types/tabview.d.ts +0 -49
  233. package/lib/types/textarea.d.ts +0 -77
  234. package/lib/types/textedit.d.ts +0 -123
  235. package/lib/types/toaster.d.ts +0 -42
  236. package/lib/types/tools.d.ts +0 -394
  237. package/lib/types/tooltips.d.ts +0 -46
  238. package/lib/types/treeview.d.ts +0 -144
  239. package/lib/types/version.d.ts +0 -29
  240. package/lib/types/x4dom.d.ts +0 -49
  241. package/lib/types/x4events.d.ts +0 -269
  242. package/lib/types/x4react.d.ts +0 -41
@@ -1,881 +0,0 @@
1
- "use strict";
2
- /**
3
- * ___ ___ __
4
- * \ \/ / / _
5
- * \ / /_| |_
6
- * / \____ _|
7
- * /__/\__\ |_|
8
- *
9
- * @file gridview.ts
10
- * @author Etienne Cochard
11
- *
12
- * Copyright (c) 2019-2022 R-libre ingenierie
13
- *
14
- * Permission is hereby granted, free of charge, to any person obtaining a copy
15
- * of this software and associated documentation files (the "Software"), to deal
16
- * in the Software without restriction, including without limitation the rights
17
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
18
- * of the Software, and to permit persons to whom the Software is furnished to do so,
19
- * subject to the following conditions:
20
- * The above copyright notice and this permission notice shall be included in all copies
21
- * or substantial portions of the Software.
22
- *
23
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
24
- * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
25
- * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
26
- * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
27
- * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
28
- * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
29
- **/
30
- Object.defineProperty(exports, "__esModule", { value: true });
31
- exports.GridView = exports.EvGridCheck = void 0;
32
- const T_UPDATE = Symbol('update');
33
- /**
34
- * todo: sizable column
35
- * todo: button in a column
36
- */
37
- const x4dom_1 = require("./x4dom");
38
- const layout_1 = require("./layout");
39
- const component_1 = require("./component");
40
- const label_1 = require("./label");
41
- const i18n_1 = require("./i18n");
42
- const tools_1 = require("./tools");
43
- const datastore_1 = require("./datastore");
44
- const x4events_1 = require("./x4events");
45
- const icon_js_1 = require("./icon.js");
46
- function EvGridCheck(rec, chk) {
47
- return (0, x4events_1.BasicEvent)({ rec, chk });
48
- }
49
- exports.EvGridCheck = EvGridCheck;
50
- class ColHeader extends component_1.Component {
51
- constructor(props, title) {
52
- super(props);
53
- this.m_sorted = false;
54
- this.m_sens = 'dn';
55
- this.setContent([
56
- new component_1.Component({
57
- tag: 'span',
58
- content: title
59
- }),
60
- new icon_js_1.Icon({
61
- ref: 'sorter',
62
- cls: '@hidden sort',
63
- icon: 'var( --x4-icon-arrow-down )'
64
- })
65
- ]);
66
- }
67
- get sorted() {
68
- return this.m_sorted;
69
- }
70
- //set sorted( v ) {
71
- // this.m_sorted = v;
72
- // this.m_sens = 'dn';
73
- // this.itemWithRef<Icon>( 'sorter' ).show( v );
74
- //}
75
- sort(v, sens) {
76
- this.m_sorted = v;
77
- this.m_sens = sens;
78
- const ic = this.itemWithRef('sorter');
79
- ic.icon = this.m_sens == 'up' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
80
- ic.show(v);
81
- }
82
- get sens() {
83
- return this.m_sens;
84
- }
85
- toggleSens() {
86
- this.m_sens = this.m_sens == 'up' ? 'dn' : 'up';
87
- this.itemWithRef('sorter').icon = this.m_sens == 'up' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
88
- }
89
- }
90
- /**
91
- * gridview class
92
- */
93
- class GridView extends layout_1.VLayout {
94
- constructor(props) {
95
- var _a, _b;
96
- super(props);
97
- this.m_columns = props.columns;
98
- this.m_hasMarks = (_a = props.hasMarks) !== null && _a !== void 0 ? _a : false;
99
- this.m_marks = new Set();
100
- // prepend the checkable column
101
- if (this.m_hasMarks) {
102
- this.m_columns.unshift({
103
- id: 'id',
104
- title: '',
105
- width: 30,
106
- renderer: (e) => this._renderCheck(e)
107
- });
108
- }
109
- this.setAttribute('tabindex', 0);
110
- this.m_topIndex = 0;
111
- this.m_itemHeight = 0;
112
- this.m_recycler = [];
113
- this.m_rowClassifier = props.calcRowClass;
114
- this.m_empty_text = (_b = props.empty_text) !== null && _b !== void 0 ? _b : i18n_1._tr.global.empty_list;
115
- //this.setDomEvent('create', this._handleCreate, this);
116
- this.setDomEvent('click', (e) => this._itemClick(e));
117
- this.setDomEvent('dblclick', (e) => this._itemDblClick(e));
118
- this.setDomEvent('contextmenu', (e) => this._itemMenu(e));
119
- this.setDomEvent('keydown', (e) => this._handleKey(e));
120
- this.setStore(props.store);
121
- }
122
- componentCreated() {
123
- this._updateScroll(true);
124
- }
125
- /**
126
- *
127
- */
128
- _moveSel(sens, select = true) {
129
- let sel = this.m_selection;
130
- let scrolltype = null;
131
- if (sel === undefined) {
132
- sel = this.m_dataview.getByIndex(0).getID();
133
- }
134
- else {
135
- let index = this.m_dataview.indexOfId(this.m_selection);
136
- if (sens == 1) {
137
- index++;
138
- }
139
- else if (sens == -1) {
140
- index--;
141
- }
142
- else if (sens == 2) {
143
- index += this.m_visible_rows.length - 1;
144
- }
145
- else if (sens == -2) {
146
- index -= this.m_visible_rows.length - 1;
147
- }
148
- if (sens < 0) {
149
- scrolltype = 'start';
150
- }
151
- else {
152
- scrolltype = 'end';
153
- }
154
- if (index < 0) {
155
- index = 0;
156
- }
157
- else if (index >= this.m_dataview.count) {
158
- index = this.m_dataview.count - 1;
159
- }
160
- sel = this.m_dataview.getByIndex(index).getID();
161
- }
162
- if (this.m_selection != sel && select) {
163
- this._selectItem(sel, null, scrolltype);
164
- }
165
- return sel;
166
- }
167
- /**
168
- *
169
- */
170
- _handleKey(event) {
171
- if (!this.m_dataview || this.m_dataview.count == 0) {
172
- return;
173
- }
174
- switch (event.key) {
175
- case 'ArrowDown':
176
- case 'Down': {
177
- this._moveSel(1);
178
- break;
179
- }
180
- case 'ArrowUp':
181
- case 'Up': {
182
- this._moveSel(-1);
183
- break;
184
- }
185
- case 'PageUp': {
186
- this._moveSel(-2);
187
- break;
188
- }
189
- case 'PageDown': {
190
- this._moveSel(2);
191
- break;
192
- }
193
- }
194
- }
195
- /**
196
- *
197
- */
198
- getNextSel(sens) {
199
- return this._moveSel(sens, false);
200
- }
201
- _scrollIntoView(id, sens) {
202
- let itm = this._findItem(id);
203
- if (itm) {
204
- itm.scrollIntoView({
205
- block: 'center' //<ScrollLogicalPosition>sens ?? 'nearest'
206
- });
207
- }
208
- else {
209
- this.m_topIndex = this.m_dataview.indexOfId(id);
210
- this.m_view_el.dom.scrollTop = this.m_topIndex * this.m_itemHeight;
211
- this._buildItems();
212
- this._scrollIntoView(id);
213
- }
214
- }
215
- /**
216
- * change the list of item displayed
217
- * @param items - new array of items
218
- */
219
- setStore(store) {
220
- this.m_selection = undefined;
221
- if (store instanceof datastore_1.DataStore) {
222
- this.m_dataview = store.createView();
223
- }
224
- else {
225
- this.m_dataview = store;
226
- }
227
- if (this.m_hasMarks) {
228
- this.clearMarks();
229
- }
230
- // unlink previous observer
231
- if (this.m_data_cx) {
232
- this.m_data_cx.dispose();
233
- }
234
- if (this.m_dataview) {
235
- this.m_data_cx = this.m_dataview.on('view_change', (ev) => {
236
- if (ev.action == 'change') {
237
- this.m_selection = undefined;
238
- }
239
- this._updateScroll(true);
240
- });
241
- //this.update( );
242
- this._updateScroll(true);
243
- }
244
- }
245
- getView() {
246
- return this.m_dataview;
247
- }
248
- /**
249
- * return the current selection (row id) or null
250
- */
251
- getSelection() {
252
- return this.m_selection;
253
- }
254
- getSelRec() {
255
- if (this.m_selection) {
256
- return this.m_dataview.getById(this.m_selection);
257
- }
258
- return null;
259
- }
260
- setSelection(recId) {
261
- this._selectItem(recId, null, 'center');
262
- }
263
- /** @ignore */
264
- render() {
265
- this.m_recycler = [];
266
- this.m_container = new component_1.Component({
267
- cls: 'content',
268
- });
269
- this.m_empty_msg = new label_1.Label({
270
- cls: 'empty-msg',
271
- text: ''
272
- });
273
- this.m_view_el = new component_1.Component({
274
- cls: '@scroll-view',
275
- flex: 1,
276
- dom_events: {
277
- sizechange: () => this._updateScroll(true),
278
- scroll: () => this._updateScroll(false)
279
- },
280
- content: this.m_container
281
- });
282
- let flex = false;
283
- let cols = this.m_columns.map((col, index) => {
284
- let cls = '@cell';
285
- if (col.cls) {
286
- cls += ' ' + col.cls;
287
- }
288
- let comp = new ColHeader({
289
- cls,
290
- flex: col.flex,
291
- sizable: 'right',
292
- style: {
293
- width: col.width
294
- },
295
- dom_events: {
296
- click: (ev) => {
297
- let t = (0, component_1.flyWrap)(ev.target);
298
- if (!t.hasClass('@sizer-overlay')) { // avoid sizer click
299
- this._sortCol(col);
300
- ev.preventDefault();
301
- }
302
- }
303
- }
304
- }, col.title);
305
- const resizeCol = (ev) => {
306
- this._on_col_resize(index, ev.size.width);
307
- if (this.m_footer) {
308
- let col = component_1.Component.getElement(this.m_footer.dom.childNodes[index]);
309
- if (col) {
310
- col.setStyleValue('width', ev.size.width);
311
- }
312
- }
313
- };
314
- new component_1.SizerOverlay({
315
- target: comp,
316
- sens: 'right',
317
- events: { resize: (e) => resizeCol(e) }
318
- });
319
- if (col.flex) {
320
- flex = true;
321
- }
322
- col.$hdr = comp;
323
- return comp;
324
- });
325
- cols.push(new component_1.Flex({
326
- ref: 'flex',
327
- cls: flex ? '@hidden' : ''
328
- }));
329
- // compute full width
330
- let full_width = 0;
331
- this.m_columns.forEach((col) => {
332
- var _a;
333
- full_width += (_a = col.width) !== null && _a !== void 0 ? _a : 0;
334
- });
335
- this.m_header = new layout_1.HLayout({
336
- cls: '@header',
337
- content: cols,
338
- style: {
339
- minWidth: full_width
340
- }
341
- });
342
- if (this.m_props.hasFooter) {
343
- let foots = this.m_columns.map((col, index) => {
344
- let cls = '@cell';
345
- if (col.align) {
346
- cls += ' ' + col.align;
347
- }
348
- if (col.cls) {
349
- cls += ' ' + col.cls;
350
- }
351
- let comp = new component_1.Component({
352
- cls,
353
- data: { col: index },
354
- flex: col.flex,
355
- style: {
356
- width: col.width
357
- }
358
- });
359
- col.$ftr = comp;
360
- return comp;
361
- });
362
- foots.push(new component_1.Flex({
363
- ref: 'flex',
364
- cls: flex ? '@hidden' : ''
365
- }));
366
- this.m_footer = new layout_1.HLayout({
367
- cls: '@footer',
368
- content: foots,
369
- style: {
370
- minWidth: full_width
371
- }
372
- });
373
- }
374
- else {
375
- this.m_footer = null;
376
- }
377
- this.setContent([
378
- this.m_header,
379
- this.m_view_el,
380
- this.m_footer,
381
- this.m_empty_msg,
382
- ]);
383
- }
384
- _on_col_resize(col, width) {
385
- var _a, _b, _c, _d;
386
- const _col = this.m_columns[col];
387
- let updateFlex = false;
388
- if (width >= 0) {
389
- _col.width = width;
390
- if (_col.flex) {
391
- _col.$hdr.removeClass('@flex');
392
- (_a = _col.$ftr) === null || _a === void 0 ? void 0 : _a.removeClass('@flex');
393
- _col.flex = undefined;
394
- updateFlex = true;
395
- }
396
- }
397
- else if (width < 0 && !_col.flex) {
398
- _col.$hdr.addClass('@flex');
399
- (_b = _col.$ftr) === null || _b === void 0 ? void 0 : _b.addClass('@flex');
400
- _col.flex = 1;
401
- updateFlex = true;
402
- }
403
- if (updateFlex) {
404
- let flex = false;
405
- this.m_columns.forEach(c => {
406
- if (c.flex) {
407
- flex = true;
408
- }
409
- });
410
- (_c = this.m_header.itemWithRef('flex')) === null || _c === void 0 ? void 0 : _c.show(flex ? false : true);
411
- if (this.m_footer) {
412
- (_d = this.m_footer.itemWithRef('flex')) === null || _d === void 0 ? void 0 : _d.show(flex ? false : true);
413
- }
414
- }
415
- this._updateScroll(true);
416
- }
417
- /**
418
- *
419
- */
420
- sortCol(name, asc = true) {
421
- const col = this.m_columns.find(c => c.id == name);
422
- if (col === undefined) {
423
- console.assert(false, "unknown field " + name + " in grid.sortCol");
424
- return;
425
- }
426
- this._sortCol(col, asc ? "dn" : "up");
427
- }
428
- /**
429
- *
430
- */
431
- _sortCol(col, sens = "up") {
432
- if (col.sortable === false) {
433
- return;
434
- }
435
- this.m_columns.forEach((c) => {
436
- if (c !== col) {
437
- c.$hdr.sort(false, "dn");
438
- }
439
- });
440
- const $hdr = col.$hdr;
441
- if ($hdr.sorted) {
442
- $hdr.toggleSens();
443
- }
444
- else {
445
- $hdr.sort(true, sens);
446
- }
447
- if (this.m_dataview) {
448
- this.m_dataview.sort([
449
- { field: col.id, ascending: $hdr.sens == 'dn' ? false : true }
450
- ]);
451
- }
452
- }
453
- /**
454
- *
455
- */
456
- _computeItemHeight() {
457
- let gr = x4dom_1.x4document.createElement('div');
458
- gr.classList.add('x-row');
459
- let gv = x4dom_1.x4document.createElement('div');
460
- gv.classList.add('x-grid-view');
461
- gv.style.position = 'absolute';
462
- gv.style.top = '-1000px';
463
- gv.appendChild(gr);
464
- this.dom.appendChild(gv);
465
- let rc = gr.getBoundingClientRect();
466
- this.dom.removeChild(gv);
467
- this.m_itemHeight = rc.height;
468
- }
469
- _createRow(props) {
470
- let row;
471
- if (this.m_recycler.length) {
472
- row = this.m_recycler.pop();
473
- row.clearClasses();
474
- row.addClass(props.cls);
475
- row.setContent(props.content);
476
- row.setStyle(props.style);
477
- for (let n in props.data) {
478
- row.setData(n, props.data[n]);
479
- }
480
- }
481
- else {
482
- row = new layout_1.HLayout(props);
483
- }
484
- if (!row.dom) {
485
- this.m_container.appendChild(row);
486
- }
487
- return row;
488
- }
489
- _buildItems(canOpt = true) {
490
- var _a, _b, _c, _d;
491
- let rc = this.getBoundingRect();
492
- let rh = this.m_header.getBoundingRect();
493
- let height = rc.height - rh.height + this.m_itemHeight;
494
- if (this.m_itemHeight == 0) {
495
- this._computeItemHeight();
496
- }
497
- let top = this.m_topIndex * this.m_itemHeight;
498
- let y = 0;
499
- let cidx = 0;
500
- let index = this.m_topIndex;
501
- let count = this.m_dataview ? this.m_dataview.count : 0;
502
- let full_width = 0; // todo: +4 pixel of left border
503
- let even = this.m_topIndex & 1 ? true : false;
504
- // compute full width
505
- this.m_columns.forEach((col) => {
506
- var _a;
507
- full_width += (_a = col.width) !== null && _a !== void 0 ? _a : 0;
508
- });
509
- // if items height make scroll visible, update header width
510
- if (((count + 1) * this.m_itemHeight) >= height) {
511
- let w = component_1.Component.getScrollbarSize();
512
- this.m_header.setStyleValue("paddingRight", w);
513
- (_a = this.m_footer) === null || _a === void 0 ? void 0 : _a.setStyleValue("paddingRight", w);
514
- }
515
- else {
516
- this.m_header.setStyleValue("paddingRight", 0);
517
- (_b = this.m_footer) === null || _b === void 0 ? void 0 : _b.setStyleValue("paddingRight", 0);
518
- }
519
- // passe 0 - all created cells are moved to the recycler
520
- if (this.m_visible_rows) {
521
- this.m_visible_rows.forEach((c) => {
522
- this.m_recycler.push(c);
523
- });
524
- }
525
- this.m_visible_rows = [];
526
- let limit = 100;
527
- while (y < height && index < count && --limit > 0) {
528
- let rec = this.m_dataview.getByIndex(index);
529
- let rowid = rec.getID();
530
- let crow = canOpt ? this.m_recycler.findIndex((r) => r.getData('row-id') == rowid) : -1;
531
- if (crow >= 0) {
532
- let rrow = this.m_recycler.splice(crow, 1)[0];
533
- rrow.setStyle({
534
- top: y + top,
535
- minWidth: full_width,
536
- });
537
- if (this.m_hasMarks) {
538
- rrow.setClass('@marked', this.m_marks.has(rowid));
539
- }
540
- rrow.removeClass('@hidden');
541
- rrow.setClass('@selected', this.m_selection === rowid);
542
- this.m_visible_rows[cidx] = rrow;
543
- }
544
- else {
545
- let cols = this.m_columns.map(col => {
546
- let cls = '@cell';
547
- if (col.align) {
548
- cls += ' ' + col.align;
549
- }
550
- if (col.cls) {
551
- cls += ' ' + col.cls;
552
- }
553
- let cell;
554
- if (col.renderer) {
555
- cell = col.renderer(rec);
556
- if (cell) {
557
- cell.addClass(cls);
558
- cell.setStyleValue('width', col.width);
559
- if (col.flex !== undefined) {
560
- cell.addClass('@flex');
561
- cell.setStyleValue('flex', col.flex);
562
- }
563
- }
564
- }
565
- else {
566
- let fmt = col.formatter;
567
- let text;
568
- if (fmt && fmt instanceof Function) {
569
- text = fmt(rec.getRaw(col.id), rec);
570
- }
571
- else {
572
- text = rec.getField(col.id);
573
- }
574
- cell = new component_1.Component({
575
- cls,
576
- width: col.width,
577
- content: (0, component_1.html) `<span>${text}</span>`,
578
- flex: col.flex
579
- });
580
- }
581
- return cell;
582
- });
583
- let cls = '@row @hlayout center';
584
- if (this.m_hasMarks) {
585
- if (this.m_marks.has(rowid)) {
586
- cls += ' @marked';
587
- }
588
- }
589
- if (this.m_selection === rowid) {
590
- cls += ' @selected';
591
- }
592
- let row = this.m_visible_rows[cidx] = this._createRow({
593
- cls,
594
- content: cols,
595
- style: {
596
- top: y + top,
597
- minWidth: full_width,
598
- },
599
- data: {
600
- 'row-id': rowid,
601
- 'row-idx': index
602
- }
603
- });
604
- row.addClass(even ? 'even' : 'odd');
605
- even = !even;
606
- if (this.m_rowClassifier) {
607
- this.m_rowClassifier(rec, row);
608
- }
609
- }
610
- y += this.m_itemHeight;
611
- index++;
612
- cidx++;
613
- }
614
- // if some cells are still in cache, hide them
615
- this.m_recycler.forEach((c) => {
616
- c.addClass('@hidden');
617
- });
618
- //this.m_container.setContent(<ComponentContent>this.m_visible_rows);
619
- let show = !count;
620
- let msg = (this.m_empty_text instanceof Function) ? this.m_empty_text() : this.m_empty_text;
621
- this.m_empty_msg.text = msg;
622
- if (show && msg.length == 0) {
623
- show = false;
624
- }
625
- this.m_empty_msg.show(show);
626
- if (full_width < rc.width) {
627
- this.m_header.setStyleValue('width', null);
628
- (_c = this.m_footer) === null || _c === void 0 ? void 0 : _c.setStyleValue('width', null);
629
- this.m_container.setStyle({
630
- height: count * this.m_itemHeight,
631
- width: null
632
- });
633
- }
634
- else {
635
- this.m_header.setStyleValue('width', full_width + 1000);
636
- (_d = this.m_footer) === null || _d === void 0 ? void 0 : _d.setStyleValue('width', full_width + 1000);
637
- this.m_container.setStyle({
638
- height: count * this.m_itemHeight,
639
- width: full_width
640
- });
641
- }
642
- }
643
- /**
644
- *
645
- */
646
- _updateScroll(forceUpdate) {
647
- if (!this.m_view_el || !this.m_view_el.dom) {
648
- return;
649
- }
650
- const update = () => {
651
- var _a;
652
- // element destroyed between updateScroll and now
653
- if (!this.dom) {
654
- return;
655
- }
656
- let newTop = Math.floor(this.m_view_el.dom.scrollTop / (this.m_itemHeight || 1));
657
- if (newTop != this.m_topIndex || forceUpdate) {
658
- this.m_topIndex = newTop;
659
- this._buildItems(!forceUpdate);
660
- }
661
- let newLeft = this.m_view_el.dom.scrollLeft;
662
- this.m_header.setStyleValue('left', -newLeft);
663
- (_a = this.m_footer) === null || _a === void 0 ? void 0 : _a.setStyleValue('left', -newLeft);
664
- };
665
- if (forceUpdate) {
666
- this.singleShot(update, 10);
667
- }
668
- else {
669
- update();
670
- }
671
- }
672
- /** @ignore */
673
- _rowFromTarget(dom) {
674
- let self = this.dom;
675
- while (dom && dom != self) {
676
- let itm = component_1.Component.getElement(dom);
677
- if (itm) {
678
- let id = itm.getData('row-id');
679
- if (id !== undefined) {
680
- return { id, itm };
681
- }
682
- }
683
- dom = dom.parentElement;
684
- }
685
- return undefined;
686
- }
687
- _itemClick(e) {
688
- let hit = this._rowFromTarget(e.target);
689
- if (hit) {
690
- this._selectItem(hit.id, hit.itm);
691
- }
692
- else {
693
- this._selectItem(undefined, undefined);
694
- }
695
- }
696
- _itemDblClick(e) {
697
- let hit = this._rowFromTarget(e.target);
698
- if (hit) {
699
- this._selectItem(hit.id, hit.itm);
700
- let rec = this.m_dataview.getById(hit.id);
701
- this.emit('dblClick', (0, component_1.EvDblClick)(rec));
702
- if (this.m_hasMarks) {
703
- this._toggleMark(rec);
704
- }
705
- }
706
- }
707
- /** @ignore */
708
- _itemMenu(e) {
709
- let dom = e.target, self = this.dom;
710
- while (dom && dom != self) {
711
- let itm = component_1.Component.getElement(dom), id = itm === null || itm === void 0 ? void 0 : itm.getData('row-id');
712
- if (id !== undefined) {
713
- this._selectItem(id, itm);
714
- let idx = itm.getData('row-idx');
715
- let rec = this.m_dataview.getByIndex(idx);
716
- this._showItemContextMenu(e, rec);
717
- e.preventDefault();
718
- return;
719
- }
720
- dom = dom.parentElement;
721
- }
722
- }
723
- /**
724
- *
725
- */
726
- _findItem(id) {
727
- for (let i = 0; i < this.m_visible_rows.length; i++) {
728
- let itm = this.m_visible_rows[i];
729
- if (itm.getData('row-id') === id) {
730
- return itm;
731
- }
732
- }
733
- return null;
734
- }
735
- /**
736
- * @ignore
737
- * called when an item is selected by mouse
738
- */
739
- _selectItem(item, dom_item, scrollIntoView) {
740
- if (this.m_selection !== undefined) {
741
- let old = this._findItem(this.m_selection);
742
- if (old) {
743
- old.removeClass('@selected');
744
- }
745
- }
746
- this.m_selection = item;
747
- if (item) {
748
- if (scrollIntoView) {
749
- this._scrollIntoView(item, scrollIntoView);
750
- }
751
- if (!dom_item) {
752
- dom_item = this._findItem(item);
753
- }
754
- if (dom_item) {
755
- dom_item.addClass('@selected');
756
- }
757
- let rec = this.m_dataview.getById(item);
758
- this.emit('selectionChange', (0, x4events_1.EvSelectionChange)(rec));
759
- }
760
- else {
761
- this.emit('selectionChange', (0, x4events_1.EvSelectionChange)(null));
762
- }
763
- }
764
- /**
765
- *
766
- */
767
- _showItemContextMenu(event, item) {
768
- this.emit('contextMenu', (0, x4events_1.EvContextMenu)(event, item));
769
- }
770
- /**
771
- *
772
- */
773
- clearSelection() {
774
- this._selectItem(null, null);
775
- }
776
- /**
777
- * todo: moveto datastore
778
- */
779
- exportData(filename) {
780
- let data = '';
781
- const fsep = '\t';
782
- const lsep = '\r\n';
783
- let rec = '';
784
- this.m_columns.map((col) => {
785
- if (rec.length) {
786
- rec += fsep;
787
- }
788
- rec += col.title;
789
- });
790
- data += rec + lsep;
791
- let count = this.m_dataview.count;
792
- for (let i = 0; i < count; i++) {
793
- let record = this.m_dataview.getByIndex(i);
794
- rec = '';
795
- let cols = this.m_columns.map((col) => {
796
- let text = record.getField(col.id);
797
- let fmt = col.formatter;
798
- if (fmt && fmt instanceof Function) {
799
- text = fmt(text, record);
800
- }
801
- if (rec.length > 0) {
802
- rec += fsep;
803
- }
804
- rec += text;
805
- });
806
- data += rec + lsep;
807
- }
808
- //todo: review that
809
- data = data.replace(/[àâä]/gm, 'a');
810
- data = data.replace(/[éèê]/gm, 'e');
811
- data = data.replace(/[îï]/gm, 'i');
812
- data = data.replace(/[ûüù]/gm, 'u');
813
- data = data.replace(/ /gm, ' '); // non breaking space
814
- (0, tools_1.downloadData)(data, 'text/csv', filename);
815
- }
816
- set empty_text(text) {
817
- this.m_empty_msg.text = text;
818
- }
819
- _renderCheck(rec) {
820
- let icon = '--x4-icon-square';
821
- if (this.m_marks.has(rec.getID())) {
822
- icon = '--x4-icon-square-check';
823
- }
824
- return new icon_js_1.Icon({ icon: `var(${icon})` });
825
- }
826
- _toggleMark(rec) {
827
- let id = rec.getID();
828
- let chk = false;
829
- if (this.m_marks.has(id)) {
830
- this.m_marks.delete(id);
831
- }
832
- else {
833
- this.m_marks.add(id);
834
- chk = true;
835
- }
836
- this.emit('gridCheck', EvGridCheck(rec, chk));
837
- this._buildItems(false);
838
- }
839
- getMarks() {
840
- let ids = [];
841
- for (const v of this.m_marks.values()) {
842
- ids.push(v);
843
- }
844
- return ids;
845
- }
846
- clearMarks() {
847
- if (this.m_marks.size) {
848
- this.m_marks = new Set();
849
- this._buildItems(false);
850
- }
851
- }
852
- setFooterData(rec) {
853
- if (!this.m_footer) {
854
- return;
855
- }
856
- this.m_footer.enumChilds((c) => {
857
- let cid = c.getData('col');
858
- if (cid) {
859
- let col = this.m_columns[cid];
860
- let value = rec[col.id];
861
- if (value !== undefined) {
862
- if ((0, tools_1.isFunction)(value)) { // FooterRenderer
863
- value(c);
864
- }
865
- else {
866
- let text;
867
- const fmt = col.formatter;
868
- if (fmt && fmt instanceof Function) {
869
- text = fmt(value, rec);
870
- }
871
- else {
872
- text = value;
873
- }
874
- c.setContent(text, false);
875
- }
876
- }
877
- }
878
- });
879
- }
880
- }
881
- exports.GridView = GridView;