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.
- package/build.sh +5 -0
- package/lib/application.d.ts +15 -11
- package/lib/application.js +15 -11
- package/lib/base64.d.ts +15 -11
- package/lib/base64.js +15 -11
- package/lib/base_component.d.ts +18 -1
- package/lib/base_component.js +18 -1
- package/lib/button.d.ts +15 -11
- package/lib/button.js +15 -11
- package/lib/calendar.d.ts +15 -11
- package/lib/calendar.js +29 -22
- package/lib/canvas.d.ts +15 -11
- package/lib/canvas.js +15 -11
- package/lib/cardview.d.ts +15 -11
- package/lib/cardview.js +15 -11
- package/lib/checkbox.d.ts +17 -12
- package/lib/checkbox.js +18 -11
- package/lib/color.d.ts +15 -11
- package/lib/color.js +15 -11
- package/lib/colorpicker.d.ts +18 -11
- package/lib/colorpicker.js +18 -11
- package/lib/combobox.d.ts +15 -11
- package/lib/combobox.js +16 -12
- package/lib/component.d.ts +19 -15
- package/lib/component.js +19 -15
- package/lib/datastore.d.ts +15 -11
- package/lib/datastore.js +16 -12
- package/lib/dialog.d.ts +15 -11
- package/lib/dialog.js +19 -14
- package/lib/dom_events.d.ts +17 -1
- package/lib/dom_events.js +17 -1
- package/lib/drag_manager.d.ts +28 -0
- package/lib/drawtext.d.ts +15 -11
- package/lib/drawtext.js +15 -11
- package/lib/fileupload.d.ts +15 -11
- package/lib/fileupload.js +15 -11
- package/lib/form.d.ts +15 -11
- package/lib/form.js +15 -11
- package/lib/formatters.d.ts +15 -11
- package/lib/formatters.js +16 -11
- package/lib/gridview.d.ts +15 -11
- package/lib/gridview.js +59 -29
- package/lib/i18n.d.ts +15 -11
- package/lib/i18n.js +15 -11
- package/lib/icon.d.ts +20 -12
- package/lib/icon.js +107 -25
- package/lib/image.d.ts +15 -11
- package/lib/image.js +15 -11
- package/lib/index.d.ts +28 -0
- package/lib/index.js +28 -0
- package/lib/input.d.ts +15 -11
- package/lib/input.js +15 -11
- package/lib/label.d.ts +15 -11
- package/lib/label.js +15 -11
- package/lib/layout.d.ts +27 -17
- package/lib/layout.js +61 -18
- package/lib/link.d.ts +15 -11
- package/lib/link.js +15 -11
- package/lib/listview.d.ts +18 -14
- package/lib/listview.js +16 -23
- package/lib/md5.d.ts +16 -11
- package/lib/md5.js +16 -10
- package/lib/menu.d.ts +15 -11
- package/lib/menu.js +19 -12
- package/lib/messagebox.d.ts +15 -11
- package/lib/messagebox.js +17 -13
- package/lib/panel.d.ts +15 -11
- package/lib/panel.js +15 -11
- package/lib/popup.d.ts +15 -11
- package/lib/popup.js +20 -18
- package/lib/property_editor.d.ts +15 -11
- package/lib/property_editor.js +15 -11
- package/lib/radiobtn.d.ts +15 -11
- package/lib/radiobtn.js +15 -11
- package/lib/rating.d.ts +15 -11
- package/lib/rating.js +15 -11
- package/lib/request.d.ts +15 -11
- package/lib/request.js +16 -12
- package/lib/router.d.ts +28 -0
- package/lib/router.js +28 -0
- package/lib/settings.d.ts +15 -11
- package/lib/settings.js +15 -11
- package/lib/sidebarview.d.ts +15 -11
- package/lib/sidebarview.js +15 -11
- package/lib/smartedit.d.ts +15 -11
- package/lib/smartedit.js +15 -11
- package/lib/spreadsheet.d.ts +15 -11
- package/lib/spreadsheet.js +15 -11
- package/lib/styles.d.ts +16 -12
- package/lib/styles.js +21 -14
- package/lib/svgcomponent.d.ts +15 -11
- package/lib/svgcomponent.js +15 -11
- package/lib/tabbar.d.ts +17 -2
- package/lib/tabbar.js +17 -2
- package/lib/tabview.d.ts +15 -11
- package/lib/tabview.js +15 -11
- package/lib/textarea.d.ts +15 -11
- package/lib/textarea.js +15 -11
- package/lib/textedit.d.ts +15 -11
- package/lib/textedit.js +16 -12
- package/lib/texthiliter.d.ts +15 -11
- package/lib/texthiliter.js +15 -11
- package/lib/toaster.d.ts +15 -11
- package/lib/toaster.js +15 -11
- package/lib/tools.d.ts +15 -11
- package/lib/tools.js +17 -12
- package/lib/tooltips.d.ts +15 -11
- package/lib/tooltips.js +16 -12
- package/lib/treeview.d.ts +15 -11
- package/lib/treeview.js +15 -11
- package/{x4.css → lib/x4.css} +269 -106
- package/lib/x4_events.d.ts +17 -12
- package/lib/x4_events.js +24 -14
- package/package.json +5 -1
- package/src/MIT-license.md +14 -0
- package/src/application.ts +15 -11
- package/src/base64.ts +15 -11
- package/src/base_component.ts +18 -1
- package/src/button.ts +15 -11
- package/src/calendar.ts +30 -22
- package/src/canvas.ts +22 -18
- package/src/cardview.ts +15 -11
- package/src/checkbox.ts +21 -12
- package/src/color.ts +15 -11
- package/src/colorpicker.ts +19 -11
- package/src/combobox.ts +16 -12
- package/src/component.ts +21 -16
- package/src/datastore.ts +16 -12
- package/src/dialog.ts +19 -14
- package/src/dom_events.ts +17 -1
- package/src/drag_manager.ts +28 -0
- package/src/drawtext.ts +15 -11
- package/src/fileupload.ts +15 -11
- package/src/form.ts +15 -11
- package/src/formatters.ts +19 -12
- package/src/gridview.ts +76 -30
- package/src/i18n.ts +15 -11
- package/src/icon.ts +125 -33
- package/src/image.ts +15 -11
- package/src/index.ts +29 -0
- package/src/input.ts +15 -11
- package/src/label.ts +15 -11
- package/src/layout.ts +75 -20
- package/src/link.ts +15 -11
- package/src/listview.ts +18 -14
- package/src/md5.ts +16 -10
- package/src/menu.ts +19 -12
- package/src/messagebox.ts +17 -13
- package/src/panel.ts +15 -11
- package/src/popup.ts +20 -19
- package/src/property_editor.ts +15 -11
- package/src/radiobtn.ts +15 -11
- package/src/rating.ts +15 -11
- package/src/request.ts +16 -12
- package/src/router.ts +28 -0
- package/src/settings.ts +15 -11
- package/src/sidebarview.ts +15 -11
- package/src/smartedit.ts +15 -11
- package/src/spreadsheet.ts +15 -11
- package/src/styles.ts +23 -14
- package/src/svgcomponent.ts +15 -11
- package/src/tabbar.ts +17 -2
- package/src/tabview.ts +15 -11
- package/src/textarea.ts +15 -11
- package/src/textedit.ts +17 -13
- package/src/texthiliter.ts +15 -11
- package/src/toaster.ts +15 -11
- package/src/tools.ts +18 -12
- package/src/tooltips.ts +16 -12
- package/src/treeview.ts +15 -11
- package/src/x4.less +289 -120
- package/src/x4_events.ts +27 -16
- 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
|
-
*
|
|
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
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
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
|
-
*
|
|
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
|
-
|
|
79
|
-
|
|
80
|
-
|
|
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
|
-
|
|
106
|
-
|
|
107
|
-
|
|
127
|
+
constructor( props: IconProps | string ) {
|
|
128
|
+
|
|
129
|
+
if( isString(props) ) {
|
|
130
|
+
super( { icon: props } );
|
|
131
|
+
}
|
|
132
|
+
else {
|
|
133
|
+
super( props );
|
|
134
|
+
}
|
|
108
135
|
|
|
109
|
-
|
|
110
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
*
|
|
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
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
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
|
-
*
|
|
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
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
-
|
|
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(
|
|
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
|
-
*
|
|
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
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
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
|
-
*
|
|
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,
|
|
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
|
|
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
|
|
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
|