x4js 1.4.8 → 1.4.11

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 (173) hide show
  1. package/build.sh +5 -0
  2. package/lib/application.d.ts +15 -11
  3. package/lib/application.js +15 -11
  4. package/lib/base64.d.ts +15 -11
  5. package/lib/base64.js +15 -11
  6. package/lib/base_component.d.ts +18 -1
  7. package/lib/base_component.js +18 -1
  8. package/lib/button.d.ts +15 -11
  9. package/lib/button.js +15 -11
  10. package/lib/calendar.d.ts +15 -11
  11. package/lib/calendar.js +29 -22
  12. package/lib/canvas.d.ts +15 -11
  13. package/lib/canvas.js +15 -11
  14. package/lib/cardview.d.ts +15 -11
  15. package/lib/cardview.js +15 -11
  16. package/lib/checkbox.d.ts +17 -12
  17. package/lib/checkbox.js +18 -11
  18. package/lib/color.d.ts +15 -11
  19. package/lib/color.js +15 -11
  20. package/lib/colorpicker.d.ts +18 -11
  21. package/lib/colorpicker.js +18 -11
  22. package/lib/combobox.d.ts +15 -11
  23. package/lib/combobox.js +16 -12
  24. package/lib/component.d.ts +19 -15
  25. package/lib/component.js +19 -15
  26. package/lib/datastore.d.ts +15 -11
  27. package/lib/datastore.js +16 -12
  28. package/lib/dialog.d.ts +15 -11
  29. package/lib/dialog.js +19 -14
  30. package/lib/dom_events.d.ts +17 -1
  31. package/lib/dom_events.js +17 -1
  32. package/lib/drag_manager.d.ts +28 -0
  33. package/lib/drawtext.d.ts +15 -11
  34. package/lib/drawtext.js +15 -11
  35. package/lib/fileupload.d.ts +15 -11
  36. package/lib/fileupload.js +15 -11
  37. package/lib/form.d.ts +15 -11
  38. package/lib/form.js +15 -11
  39. package/lib/formatters.d.ts +15 -11
  40. package/lib/formatters.js +16 -11
  41. package/lib/gridview.d.ts +15 -11
  42. package/lib/gridview.js +59 -29
  43. package/lib/i18n.d.ts +15 -11
  44. package/lib/i18n.js +15 -11
  45. package/lib/icon.d.ts +20 -12
  46. package/lib/icon.js +107 -25
  47. package/lib/image.d.ts +15 -11
  48. package/lib/image.js +15 -11
  49. package/lib/index.d.ts +28 -0
  50. package/lib/index.js +28 -0
  51. package/lib/input.d.ts +15 -11
  52. package/lib/input.js +15 -11
  53. package/lib/label.d.ts +15 -11
  54. package/lib/label.js +15 -11
  55. package/lib/layout.d.ts +27 -17
  56. package/lib/layout.js +61 -18
  57. package/lib/link.d.ts +15 -11
  58. package/lib/link.js +15 -11
  59. package/lib/listview.d.ts +18 -14
  60. package/lib/listview.js +16 -23
  61. package/lib/md5.d.ts +16 -11
  62. package/lib/md5.js +16 -10
  63. package/lib/menu.d.ts +15 -11
  64. package/lib/menu.js +19 -12
  65. package/lib/messagebox.d.ts +15 -11
  66. package/lib/messagebox.js +17 -13
  67. package/lib/panel.d.ts +15 -11
  68. package/lib/panel.js +15 -11
  69. package/lib/popup.d.ts +15 -11
  70. package/lib/popup.js +20 -18
  71. package/lib/property_editor.d.ts +15 -11
  72. package/lib/property_editor.js +15 -11
  73. package/lib/radiobtn.d.ts +15 -11
  74. package/lib/radiobtn.js +15 -11
  75. package/lib/rating.d.ts +15 -11
  76. package/lib/rating.js +15 -11
  77. package/lib/request.d.ts +15 -11
  78. package/lib/request.js +16 -12
  79. package/lib/router.d.ts +28 -0
  80. package/lib/router.js +28 -0
  81. package/lib/settings.d.ts +15 -11
  82. package/lib/settings.js +15 -11
  83. package/lib/sidebarview.d.ts +15 -11
  84. package/lib/sidebarview.js +15 -11
  85. package/lib/smartedit.d.ts +15 -11
  86. package/lib/smartedit.js +15 -11
  87. package/lib/spreadsheet.d.ts +15 -11
  88. package/lib/spreadsheet.js +15 -11
  89. package/lib/styles.d.ts +16 -12
  90. package/lib/styles.js +21 -14
  91. package/lib/svgcomponent.d.ts +15 -11
  92. package/lib/svgcomponent.js +15 -11
  93. package/lib/tabbar.d.ts +17 -2
  94. package/lib/tabbar.js +17 -2
  95. package/lib/tabview.d.ts +15 -11
  96. package/lib/tabview.js +15 -11
  97. package/lib/textarea.d.ts +15 -11
  98. package/lib/textarea.js +15 -11
  99. package/lib/textedit.d.ts +15 -11
  100. package/lib/textedit.js +16 -12
  101. package/lib/texthiliter.d.ts +15 -11
  102. package/lib/texthiliter.js +15 -11
  103. package/lib/toaster.d.ts +15 -11
  104. package/lib/toaster.js +15 -11
  105. package/lib/tools.d.ts +15 -11
  106. package/lib/tools.js +17 -12
  107. package/lib/tooltips.d.ts +15 -11
  108. package/lib/tooltips.js +16 -12
  109. package/lib/treeview.d.ts +15 -11
  110. package/lib/treeview.js +15 -11
  111. package/{x4.css → lib/x4.css} +269 -106
  112. package/lib/x4_events.d.ts +17 -12
  113. package/lib/x4_events.js +24 -14
  114. package/package.json +5 -1
  115. package/src/MIT-license.md +14 -0
  116. package/src/application.ts +15 -11
  117. package/src/base64.ts +15 -11
  118. package/src/base_component.ts +18 -1
  119. package/src/button.ts +15 -11
  120. package/src/calendar.ts +30 -22
  121. package/src/canvas.ts +22 -18
  122. package/src/cardview.ts +15 -11
  123. package/src/checkbox.ts +21 -12
  124. package/src/color.ts +15 -11
  125. package/src/colorpicker.ts +19 -11
  126. package/src/combobox.ts +16 -12
  127. package/src/component.ts +21 -16
  128. package/src/datastore.ts +16 -12
  129. package/src/dialog.ts +19 -14
  130. package/src/dom_events.ts +17 -1
  131. package/src/drag_manager.ts +28 -0
  132. package/src/drawtext.ts +15 -11
  133. package/src/fileupload.ts +15 -11
  134. package/src/form.ts +15 -11
  135. package/src/formatters.ts +19 -12
  136. package/src/gridview.ts +76 -30
  137. package/src/i18n.ts +15 -11
  138. package/src/icon.ts +125 -33
  139. package/src/image.ts +15 -11
  140. package/src/index.ts +29 -0
  141. package/src/input.ts +15 -11
  142. package/src/label.ts +15 -11
  143. package/src/layout.ts +75 -20
  144. package/src/link.ts +15 -11
  145. package/src/listview.ts +18 -14
  146. package/src/md5.ts +16 -10
  147. package/src/menu.ts +19 -12
  148. package/src/messagebox.ts +17 -13
  149. package/src/panel.ts +15 -11
  150. package/src/popup.ts +20 -19
  151. package/src/property_editor.ts +15 -11
  152. package/src/radiobtn.ts +15 -11
  153. package/src/rating.ts +15 -11
  154. package/src/request.ts +16 -12
  155. package/src/router.ts +28 -0
  156. package/src/settings.ts +15 -11
  157. package/src/sidebarview.ts +15 -11
  158. package/src/smartedit.ts +15 -11
  159. package/src/spreadsheet.ts +15 -11
  160. package/src/styles.ts +23 -14
  161. package/src/svgcomponent.ts +15 -11
  162. package/src/tabbar.ts +17 -2
  163. package/src/tabview.ts +15 -11
  164. package/src/textarea.ts +15 -11
  165. package/src/textedit.ts +17 -13
  166. package/src/texthiliter.ts +15 -11
  167. package/src/toaster.ts +15 -11
  168. package/src/tools.ts +18 -12
  169. package/src/tooltips.ts +16 -12
  170. package/src/treeview.ts +15 -11
  171. package/src/x4.less +289 -120
  172. package/src/x4_events.ts +27 -16
  173. package/tsconfig.json +1 -1
package/src/i18n.ts CHANGED
@@ -7,20 +7,24 @@
7
7
  *
8
8
  * @file i18n.ts
9
9
  * @author Etienne Cochard
10
- * @license
11
- * Copyright (c) 2019-2021 R-libre ingenierie
12
10
  *
13
- * This program is free software; you can redistribute it and/or modify
14
- * it under the terms of the GNU General Public License as published by
15
- * the Free Software Foundation; either version 3 of the License, or
16
- * (at your option) any later version.
11
+ * Copyright (c) 2019-2022 R-libre ingenierie
17
12
  *
18
- * This program is distributed in the hope that it will be useful,
19
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
20
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
21
- * GNU General Public License for more details.
13
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
14
+ * of this software and associated documentation files (the "Software"), to deal
15
+ * in the Software without restriction, including without limitation the rights
16
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
17
+ * of the Software, and to permit persons to whom the Software is furnished to do so,
18
+ * subject to the following conditions:
19
+ * The above copyright notice and this permission notice shall be included in all copies
20
+ * or substantial portions of the Software.
22
21
  *
23
- * You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
22
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
23
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
24
+ * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
25
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
26
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
27
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
24
28
  **/
25
29
 
26
30
 
package/src/icon.ts CHANGED
@@ -7,25 +7,29 @@
7
7
  *
8
8
  * @file icon.ts
9
9
  * @author Etienne Cochard
10
- * @license
11
- * Copyright (c) 2019-2021 R-libre ingenierie
12
10
  *
13
- * This program is free software; you can redistribute it and/or modify
14
- * it under the terms of the GNU General Public License as published by
15
- * the Free Software Foundation; either version 3 of the License, or
16
- * (at your option) any later version.
11
+ * Copyright (c) 2019-2022 R-libre ingenierie
17
12
  *
18
- * This program is distributed in the hope that it will be useful,
19
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
20
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
21
- * GNU General Public License for more details.
13
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
14
+ * of this software and associated documentation files (the "Software"), to deal
15
+ * in the Software without restriction, including without limitation the rights
16
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
17
+ * of the Software, and to permit persons to whom the Software is furnished to do so,
18
+ * subject to the following conditions:
19
+ * The above copyright notice and this permission notice shall be included in all copies
20
+ * or substantial portions of the Software.
22
21
  *
23
- * You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
22
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
23
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
24
+ * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
25
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
26
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
27
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
24
28
  **/
25
29
 
26
30
  import { Component, CProps } from './component'
27
31
  import { Stylesheet } from './styles'
28
- import { HtmlString } from './tools';
32
+ import { HtmlString, isString } from './tools';
29
33
  import { BasicEvent, EvChange, EventMap, EventSource } from './x4_events';
30
34
 
31
35
  // ============================================================================
@@ -39,7 +43,6 @@ export interface IconProps extends CProps {
39
43
  size?: number;
40
44
  }
41
45
 
42
-
43
46
  export interface EvLoaded extends BasicEvent {
44
47
  url: string;
45
48
  svg: string;
@@ -53,6 +56,17 @@ interface LoadingEventMap extends EventMap {
53
56
  loaded: EvLoaded;
54
57
  }
55
58
 
59
+ function trimQuotes( str:string ): string {
60
+ const l = str.length;
61
+ if( str[0]=='"' && str[l-1]=='"' ) {
62
+ str = str.substring( 1, l-1 )
63
+ str = str.replaceAll( '\\"', "'" );
64
+ return str;
65
+ }
66
+
67
+ return str;
68
+ }
69
+
56
70
  class Loader extends EventSource<LoadingEventMap> {
57
71
  svgs: Map<string,string>;
58
72
 
@@ -75,14 +89,23 @@ class Loader extends EventSource<LoadingEventMap> {
75
89
 
76
90
  // then start loading
77
91
  const _load = async ( url ) => {
78
- const r = await fetch( url );
79
- if( r.ok ) {
80
- const svg = await r.text();
92
+
93
+ // shortcut
94
+ if( url.substring(0,24)=="data:image/svg+xml;utf8,") {
95
+ const svg = url.substring(24);
81
96
  this.svgs.set( url, svg );
82
-
83
- //console.log( 'signal=', url );
84
97
  this.signal( 'loaded', EvLoaded(url,svg) );
85
98
  }
99
+ else {
100
+ const r = await fetch( url );
101
+ if( r.ok ) {
102
+ const svg = await r.text();
103
+ this.svgs.set( url, svg );
104
+
105
+ //console.log( 'signal=', url );
106
+ this.signal( 'loaded', EvLoaded(url,svg) );
107
+ }
108
+ }
86
109
  }
87
110
 
88
111
  _load( url );
@@ -101,43 +124,95 @@ export class Icon extends Component<IconProps>
101
124
  private m_icon: string;
102
125
  private m_iconName: IconID;
103
126
 
104
- constructor( props: IconProps ) {
105
- super( props );
106
-
107
- this._setIcon( props.icon, false );
127
+ constructor( props: IconProps | string ) {
128
+
129
+ if( isString(props) ) {
130
+ super( { icon: props } );
131
+ }
132
+ else {
133
+ super( props );
134
+ }
108
135
 
109
- if( props.size ) {
110
- this.setStyleValue( 'fontSize', props.size );
136
+ this._setIcon( this.m_props.icon, false );
137
+ if( this.m_props.size ) {
138
+ this.setStyleValue( 'fontSize', this.m_props.size );
111
139
  }
112
140
  }
113
141
 
114
142
  private _setIcon(icon: IconID, remove_old: boolean) {
115
143
 
116
- const reUrl = /\s*url\s*\(\s*(.+)\s*\)\s*/gi;
117
- const reSvg = /\s*svg\s*\(\s*(.+)\s*\)\s*/gi;
118
- const reSvg2 = /(.*\.svg)$/gi;
119
- const reCls = /\s*cls\s*\(\s*(.+)\s*\)\s*/gi;
120
-
121
144
  if( !icon ) {
122
145
  this.m_iconName = '';
123
146
  return;
124
147
  }
125
148
 
126
149
  this.removeClass( '@svg' );
127
-
128
- let name, url;
150
+
151
+ // todo: deprecated
152
+ let name, url: string;
129
153
  if (typeof (icon) === 'number') {
130
154
  icon = icon.toString(16);
131
155
  name = icon;
132
156
  }
133
157
  else {
158
+ // var( <var-name> )
159
+ //
160
+ // in the .css
161
+ // --------------------------
162
+ // :root {
163
+ // --chevron-up: svgpath( "M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96z" );
164
+ // }
165
+ //
166
+ // var( "--chevron-up" )
167
+ const reVar = /\s*var\s*\(\s*(.+)\s*\)\s*/gi;
168
+ let match_var = reVar.exec( icon );
169
+ while( match_var ) {
170
+ const varname = match_var[1].trim( );
171
+ icon = (Stylesheet.getVar(varname) as string).trim( );
172
+ if (icon == '' || icon === undefined) {
173
+ console.error( `icon: unable to find variable named '${varname}'` );
174
+ return;
175
+ }
176
+ else {
177
+ icon = trimQuotes( icon );
178
+ }
179
+
180
+ match_var = reVar.exec( icon );
181
+ }
182
+
183
+ // svg( <svg-filename> ) -> svg( "mysvgfile.svg" )
184
+ // <svg-filename>.svg -> "mysvgfile.svg"
185
+
186
+ const reSvg = /\s*svg\s*\(\s*(.+)\s*\)\s*/gi;
187
+ const reSvg2 = /(.*\.svg)$/gi;
188
+
134
189
  let match_svg = reSvg.exec( icon ) || reSvg2.exec(icon);
135
190
  if( match_svg ) {
136
191
  const url = match_svg[1].trim( );
137
192
  this._setSVG( url );
138
193
  return;
139
194
  }
195
+
196
+ // svgpath( <svg-path> )
197
+ // svgpath( "M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96z" )
198
+ const reSvg3 = /\s*svgpath\s*\(\s*(.+)\s*\)\s*/gi;
199
+ let match_pth = reSvg3.exec( icon );
200
+ if( match_pth ) {
201
+ const pth = this._setSVGPath( match_pth[1].trim( ) );
202
+ return;
203
+ }
204
+
205
+ // data( <direct> )
206
+ // data( "data:image/svg+xml;utf8,<svg...></svg>" )
207
+
208
+ const reSvg4 = /^\s*(data\:image\/.+)\s*$/gi;
209
+ let match_dta = reSvg4.exec( icon );
210
+ if( match_dta ) {
211
+ this._setSVG( match_dta[1] );
212
+ return;
213
+ }
140
214
 
215
+ const reCls = /\s*cls\s*\(\s*(.+)\s*\)\s*/gi;
141
216
  let match_cls = reCls.exec( icon );
142
217
  if( match_cls ) {
143
218
  const classes = match_cls[1].trim( );
@@ -145,12 +220,20 @@ export class Icon extends Component<IconProps>
145
220
  return;
146
221
  }
147
222
 
223
+ const reUrl = /\s*url\s*\(\s*(.+)\s*\)\s*/gi;
148
224
  let match_url = reUrl.exec( icon );
149
225
  if( match_url ) {
150
- url = match_url[1].trim( );
151
- name = url.replace( /[/\\\.\* ]/g, '_' );
226
+ url = trimQuotes( match_url[1].trim( ) );
227
+ if( url.substring(0,5)=='data:' ) {
228
+ this._setSVG( url );
229
+ return;
230
+ }
231
+ else {
232
+ name = url.replace( /[/\\\.\* ]/g, '_' );
233
+ }
152
234
  }
153
235
  else {
236
+ // todo: deprecated
154
237
  name = icon;
155
238
  icon = Stylesheet.getVar( 'icon-'+icon ) as string;
156
239
 
@@ -203,6 +286,7 @@ export class Icon extends Component<IconProps>
203
286
  * change the icon
204
287
  * @param icon - new icon
205
288
  */
289
+
206
290
  public set icon( icon: IconID ) {
207
291
  this._setIcon( icon, true );
208
292
  }
@@ -227,6 +311,14 @@ export class Icon extends Component<IconProps>
227
311
  svgLoader.load( url );
228
312
  }
229
313
 
314
+ /**
315
+ * todo: try to extract viewbox
316
+ */
317
+
318
+ private _setSVGPath( pth: string ) {
319
+ this.addClass( '@svg-icon' );
320
+ this.setContent( HtmlString.from(`<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="${pth}/></svg>`), false );
321
+ }
230
322
 
231
323
  /**
232
324
  *
package/src/image.ts CHANGED
@@ -7,20 +7,24 @@
7
7
  *
8
8
  * @file image.ts
9
9
  * @author Etienne Cochard
10
- * @license
11
- * Copyright (c) 2019-2021 R-libre ingenierie
12
10
  *
13
- * This program is free software; you can redistribute it and/or modify
14
- * it under the terms of the GNU General Public License as published by
15
- * the Free Software Foundation; either version 3 of the License, or
16
- * (at your option) any later version.
11
+ * Copyright (c) 2019-2022 R-libre ingenierie
17
12
  *
18
- * This program is distributed in the hope that it will be useful,
19
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
20
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
21
- * GNU General Public License for more details.
13
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
14
+ * of this software and associated documentation files (the "Software"), to deal
15
+ * in the Software without restriction, including without limitation the rights
16
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
17
+ * of the Software, and to permit persons to whom the Software is furnished to do so,
18
+ * subject to the following conditions:
19
+ * The above copyright notice and this permission notice shall be included in all copies
20
+ * or substantial portions of the Software.
22
21
  *
23
- * You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
22
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
23
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
24
+ * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
25
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
26
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
27
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
24
28
  **/
25
29
 
26
30
  import { Component, CProps, html } from './component'
package/src/index.ts CHANGED
@@ -1,3 +1,32 @@
1
+ /**
2
+ * ___ ___ __
3
+ * \ \_/ / / _
4
+ * \ / /_| |_
5
+ * / _ \____ _|
6
+ * /__/ \__\ |_|
7
+ *
8
+ * @file index.ts
9
+ * @author Etienne Cochard
10
+ *
11
+ * Copyright (c) 2019-2022 R-libre ingenierie
12
+ *
13
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
14
+ * of this software and associated documentation files (the "Software"), to deal
15
+ * in the Software without restriction, including without limitation the rights
16
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
17
+ * of the Software, and to permit persons to whom the Software is furnished to do so,
18
+ * subject to the following conditions:
19
+ * The above copyright notice and this permission notice shall be included in all copies
20
+ * or substantial portions of the Software.
21
+ *
22
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
23
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
24
+ * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
25
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
26
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
27
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
28
+ **/
29
+
1
30
  export * from "./application"
2
31
  export * from "./base_component"
3
32
  export * from "./base64"
package/src/input.ts CHANGED
@@ -7,20 +7,24 @@
7
7
  *
8
8
  * @file input.ts
9
9
  * @author Etienne Cochard
10
- * @license
11
- * Copyright (c) 2019-2021 R-libre ingenierie
12
10
  *
13
- * This program is free software; you can redistribute it and/or modify
14
- * it under the terms of the GNU General Public License as published by
15
- * the Free Software Foundation; either version 3 of the License, or
16
- * (at your option) any later version.
11
+ * Copyright (c) 2019-2022 R-libre ingenierie
17
12
  *
18
- * This program is distributed in the hope that it will be useful,
19
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
20
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
21
- * GNU General Public License for more details.
13
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
14
+ * of this software and associated documentation files (the "Software"), to deal
15
+ * in the Software without restriction, including without limitation the rights
16
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
17
+ * of the Software, and to permit persons to whom the Software is furnished to do so,
18
+ * subject to the following conditions:
19
+ * The above copyright notice and this permission notice shall be included in all copies
20
+ * or substantial portions of the Software.
22
21
  *
23
- * You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
22
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
23
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
24
+ * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
25
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
26
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
27
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
24
28
  **/
25
29
 
26
30
  import { Component, CProps, CEventMap, EvFocus } from './component'
package/src/label.ts CHANGED
@@ -7,20 +7,24 @@
7
7
  *
8
8
  * @file label.ts
9
9
  * @author Etienne Cochard
10
- * @license
11
- * Copyright (c) 2019-2021 R-libre ingenierie
12
10
  *
13
- * This program is free software; you can redistribute it and/or modify
14
- * it under the terms of the GNU General Public License as published by
15
- * the Free Software Foundation; either version 3 of the License, or
16
- * (at your option) any later version.
11
+ * Copyright (c) 2019-2022 R-libre ingenierie
17
12
  *
18
- * This program is distributed in the hope that it will be useful,
19
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
20
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
21
- * GNU General Public License for more details.
13
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
14
+ * of this software and associated documentation files (the "Software"), to deal
15
+ * in the Software without restriction, including without limitation the rights
16
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
17
+ * of the Software, and to permit persons to whom the Software is furnished to do so,
18
+ * subject to the following conditions:
19
+ * The above copyright notice and this permission notice shall be included in all copies
20
+ * or substantial portions of the Software.
22
21
  *
23
- * You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
22
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
23
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
24
+ * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
25
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
26
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
27
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
24
28
  **/
25
29
 
26
30
  import { Component, CProps } from './component'
package/src/layout.ts CHANGED
@@ -5,23 +5,27 @@
5
5
  * / \____ _|
6
6
  * /__/\__\ |_|
7
7
  *
8
- * @file layout.ts
9
- * @author Etienne Cochard
10
- * @license
11
- * Copyright (c) 2019-2021 R-libre ingenierie
12
- *
13
- * This program is free software; you can redistribute it and/or modify
14
- * it under the terms of the GNU General Public License as published by
15
- * the Free Software Foundation; either version 3 of the License, or
16
- * (at your option) any later version.
17
- *
18
- * This program is distributed in the hope that it will be useful,
19
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
20
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
21
- * GNU General Public License for more details.
22
- *
23
- * You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>..
24
- */
8
+ * @file layout.ts
9
+ * @author Etienne Cochard
10
+ *
11
+ * Copyright (c) 2019-2022 R-libre ingenierie
12
+ *
13
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
14
+ * of this software and associated documentation files (the "Software"), to deal
15
+ * in the Software without restriction, including without limitation the rights
16
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
17
+ * of the Software, and to permit persons to whom the Software is furnished to do so,
18
+ * subject to the following conditions:
19
+ * The above copyright notice and this permission notice shall be included in all copies
20
+ * or substantial portions of the Software.
21
+ *
22
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
23
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
24
+ * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
25
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
26
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
27
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
28
+ */
25
29
 
26
30
  import { Component, CProps, ComponentContent, Container, ContainerProps, ContainerEventMap } from './component'
27
31
  import { } from './x4_events'
@@ -112,7 +116,7 @@ export class GridLayout<P extends GridLayoutProps = GridLayoutProps> extends Con
112
116
  constructor(props: GridLayoutProps) {
113
117
  /// @ts-ignore
114
118
  // Argument of type 'GridLayoutProps' is not assignable to parameter of type 'P'.
115
- // 'GridLayoutProps' is assignable to the constraint of type 'P', but 'P' could be instantiated with a different subtype of constraint 'GridLayoutProps'.
119
+ // 'GridLayoutProps' is assignable to the constraint of type 'P', but 'P' could be instantiated with a different subtype of constraint 'GridLayoutProps'.
116
120
  super(props);
117
121
  }
118
122
 
@@ -130,8 +134,8 @@ export class GridLayout<P extends GridLayoutProps = GridLayoutProps> extends Con
130
134
  this.setStyleValue('grid-gap', this.m_props.colGap);
131
135
  }
132
136
 
133
- if( this.m_props.template ) {
134
- this.setStyleValue('grid-template-areas', this.m_props.template.join('\n') );
137
+ if (this.m_props.template) {
138
+ this.setStyleValue('grid-template-areas', this.m_props.template.join('\n'));
135
139
  }
136
140
  }
137
141
  }
@@ -364,3 +368,54 @@ export class ScrollView extends Component<ScrollViewProps> {
364
368
  }
365
369
  }
366
370
  }
371
+
372
+
373
+ // :: MASONERY ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
374
+
375
+ // from a nice article of Andy Barefoot
376
+ // https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
377
+
378
+ export class Masonry extends Container {
379
+
380
+ constructor(props) {
381
+ super(props);
382
+
383
+ this.setDomEvent('sizechange', () => {
384
+ this.resizeAllItems( );
385
+ });
386
+ }
387
+
388
+ resizeItem(item: Component) {
389
+
390
+ const style = this.getComputedStyle();
391
+
392
+ const rowHeight = style.parse('grid-auto-rows');
393
+ const rowGap = style.parse('grid-row-gap');
394
+
395
+ let content = item.queryItem('.content');
396
+ if( !content ) {
397
+ content = item;
398
+ }
399
+
400
+ if (content && (rowHeight + rowGap)) {
401
+ const rc = content.getBoundingRect();
402
+ const rowSpan = Math.ceil( (rc.height + rowGap) / (rowHeight + rowGap) );
403
+ item.setStyleValue('gridRowEnd', "span " + rowSpan);
404
+ }
405
+ }
406
+
407
+ resizeAllItems( ) {
408
+ this.queryAll( ".item", ( itm ) => {;
409
+ this.resizeItem( itm );
410
+ } );
411
+ }
412
+
413
+ addItem( itm: Component ) {
414
+ itm.addClass( 'content' );
415
+ this.appendChild( new Container( {
416
+ cls: 'item',
417
+ content: itm
418
+ }));
419
+ }
420
+ }
421
+
package/src/link.ts CHANGED
@@ -7,20 +7,24 @@
7
7
  *
8
8
  * @file link.ts
9
9
  * @author Etienne Cochard
10
- * @license
11
- * Copyright (c) 2019-2021 R-libre ingenierie
12
10
  *
13
- * This program is free software; you can redistribute it and/or modify
14
- * it under the terms of the GNU General Public License as published by
15
- * the Free Software Foundation; either version 3 of the License, or
16
- * (at your option) any later version.
11
+ * Copyright (c) 2019-2022 R-libre ingenierie
17
12
  *
18
- * This program is distributed in the hope that it will be useful,
19
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
20
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
21
- * GNU General Public License for more details.
13
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
14
+ * of this software and associated documentation files (the "Software"), to deal
15
+ * in the Software without restriction, including without limitation the rights
16
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
17
+ * of the Software, and to permit persons to whom the Software is furnished to do so,
18
+ * subject to the following conditions:
19
+ * The above copyright notice and this permission notice shall be included in all copies
20
+ * or substantial portions of the Software.
22
21
  *
23
- * You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
22
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
23
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
24
+ * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
25
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
26
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
27
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
24
28
  **/
25
29
 
26
30
  import { Component, CProps, CEventMap, isHtmlString, HtmlString, html } from './component'
package/src/listview.ts CHANGED
@@ -7,23 +7,27 @@
7
7
  *
8
8
  * @file listview.ts
9
9
  * @author Etienne Cochard
10
- * @license
11
- * Copyright (c) 2019-2021 R-libre ingenierie
12
10
  *
13
- * This program is free software; you can redistribute it and/or modify
14
- * it under the terms of the GNU General Public License as published by
15
- * the Free Software Foundation; either version 3 of the License, or
16
- * (at your option) any later version.
11
+ * Copyright (c) 2019-2022 R-libre ingenierie
17
12
  *
18
- * This program is distributed in the hope that it will be useful,
19
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
20
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
21
- * GNU General Public License for more details.
13
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
14
+ * of this software and associated documentation files (the "Software"), to deal
15
+ * in the Software without restriction, including without limitation the rights
16
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
17
+ * of the Software, and to permit persons to whom the Software is furnished to do so,
18
+ * subject to the following conditions:
19
+ * The above copyright notice and this permission notice shall be included in all copies
20
+ * or substantial portions of the Software.
22
21
  *
23
- * You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
22
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
23
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
24
+ * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
25
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
26
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
27
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
24
28
  **/
25
29
 
26
- import { Container, Component, CProps, ContainerEventMap, EvDblClick } from './component'
30
+ import { Container, Component, ContainerProps, ContainerEventMap, EvDblClick } from './component'
27
31
  import { IconID } from './icon';
28
32
  import { HLayout, VLayout } from './layout'
29
33
  import { Popup, PopupEventMap, PopupProps } from './popup';
@@ -36,7 +40,7 @@ import { EvContextMenu, EvSelectionChange, EvClick, EventCallback, BasicEvent, E
36
40
  * item definition
37
41
  */
38
42
 
39
- export class ListViewItem {
43
+ export interface ListViewItem {
40
44
  id: any;
41
45
  text?: string | HtmlString; // if you need pure text
42
46
  html?: boolean; // if text is html
@@ -75,7 +79,7 @@ export interface ListViewEventMap extends ContainerEventMap {
75
79
  /**
76
80
  * listview properties
77
81
  */
78
- export interface ListViewProps<E extends ListViewEventMap = ListViewEventMap> extends CProps<E> {
82
+ export interface ListViewProps<E extends ListViewEventMap = ListViewEventMap> extends ContainerProps<E> {
79
83
  items?: ListViewItem[];
80
84
  populate?: PopulateItems;
81
85
  gadgets?: Component[]; // gadgets to instert at bottom