x4js 2.0.35 → 2.1.0-manual.2
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/README.md +21 -21
- package/package.json +39 -26
- package/src/components/base.scss +25 -89
- package/src/components/boxes/boxes.module.scss +54 -54
- package/src/components/boxes/boxes.ts +513 -513
- package/src/components/breadcrumb/breadcrumb.scss +56 -56
- package/src/components/breadcrumb/breadcrumb.ts +93 -93
- package/src/components/btngroup/btngroup.module.scss +40 -40
- package/src/components/btngroup/btngroup.ts +152 -152
- package/src/components/button/button.module.scss +172 -172
- package/src/components/button/button.ts +232 -232
- package/src/components/calendar/calendar.module.scss +162 -162
- package/src/components/calendar/calendar.ts +326 -326
- package/src/components/canvas/canvas.module.scss +24 -24
- package/src/components/canvas/canvas.ts +195 -195
- package/src/components/canvas/canvas_ex.ts +275 -275
- package/src/components/checkbox/check.svg +3 -3
- package/src/components/checkbox/checkbox.module.scss +141 -141
- package/src/components/checkbox/checkbox.ts +139 -139
- package/src/components/colorinput/colorinput.module.scss +64 -64
- package/src/components/colorinput/colorinput.ts +90 -90
- package/src/components/colorpicker/colorpicker.module.scss +132 -132
- package/src/components/colorpicker/colorpicker.ts +481 -481
- package/src/components/combobox/combobox.module.scss +145 -145
- package/src/components/combobox/combobox.ts +282 -282
- package/src/components/combobox/updown.svg +3 -3
- package/src/components/components.ts +45 -44
- package/src/components/dialog/dialog.module.scss +103 -105
- package/src/components/dialog/dialog.ts +233 -233
- package/src/components/filedrop/filedrop.module.scss +69 -69
- package/src/components/filedrop/filedrop.ts +130 -130
- package/src/components/form/form.module.scss +38 -38
- package/src/components/form/form.ts +172 -172
- package/src/components/gridview/gridview.module.scss +323 -337
- package/src/components/gridview/gridview.ts +1276 -1316
- package/src/components/header/header.module.scss +40 -40
- package/src/components/header/header.ts +141 -141
- package/src/components/icon/icon.module.scss +32 -32
- package/src/components/icon/icon.ts +165 -165
- package/src/components/image/image.module.scss +27 -27
- package/src/components/image/image.ts +168 -168
- package/src/components/input/input.module.scss +74 -74
- package/src/components/input/input.ts +537 -537
- package/src/components/keyboard/keyboard.module.scss +136 -136
- package/src/components/keyboard/keyboard.ts +549 -549
- package/src/components/label/label.module.scss +90 -91
- package/src/components/label/label.ts +101 -101
- package/src/components/link/link.module.scss +44 -44
- package/src/components/link/link.ts +87 -87
- package/src/components/listbox/listbox.module.scss +179 -179
- package/src/components/listbox/listbox.ts +596 -596
- package/src/components/menu/menu.module.scss +128 -128
- package/src/components/menu/menu.ts +174 -174
- package/src/components/messages/messages.module.scss +92 -146
- package/src/components/messages/messages.ts +237 -303
- package/src/components/normalize.scss +391 -391
- package/src/components/notification/notification.module.scss +83 -83
- package/src/components/notification/notification.ts +107 -107
- package/src/components/panel/panel.module.scss +66 -71
- package/src/components/panel/panel.ts +57 -57
- package/src/components/popup/popup.module.scss +51 -51
- package/src/components/popup/popup.ts +457 -457
- package/src/components/progress/progress.module.scss +56 -56
- package/src/components/progress/progress.ts +43 -43
- package/src/components/propgrid/progrid.module.scss +111 -111
- package/src/components/propgrid/propgrid.ts +300 -300
- package/src/components/propgrid/updown.svg +3 -3
- package/src/components/radio/radio.module.scss +163 -163
- package/src/components/radio/radio.svg +3 -3
- package/src/components/radio/radio.ts +141 -141
- package/src/components/rating/rating.module.scss +22 -22
- package/src/components/rating/rating.ts +131 -131
- package/src/components/select/select.module.scss +8 -8
- package/src/components/select/select.ts +134 -134
- package/src/components/shared.scss +141 -71
- package/src/components/sizers/sizer.module.scss +90 -112
- package/src/components/sizers/sizer.ts +131 -155
- package/src/components/slider/slider.module.scss +117 -117
- package/src/components/slider/slider.ts +197 -197
- package/src/components/spreadsheet/spreadsheet.module.scss +307 -307
- package/src/components/spreadsheet/spreadsheet.ts +1223 -1223
- package/src/components/switch/switch.module.scss +126 -126
- package/src/components/switch/switch.ts +61 -61
- package/src/components/tabs/tabs.module.scss +46 -67
- package/src/components/tabs/tabs.ts +229 -234
- package/src/components/textarea/textarea.module.scss +63 -63
- package/src/components/textarea/textarea.ts +131 -131
- package/src/components/textedit/textedit.module.scss +115 -115
- package/src/components/textedit/textedit.ts +122 -122
- package/src/components/themes.scss +90 -90
- package/src/components/tickline/tickline.module.scss +25 -25
- package/src/components/tickline/tickline.ts +81 -81
- package/src/components/tooltips/tooltips.scss +71 -71
- package/src/components/tooltips/tooltips.ts +120 -120
- package/src/components/treeview/treeview.module.scss +192 -192
- package/src/components/treeview/treeview.ts +484 -484
- package/src/components/viewport/viewport.module.scss +31 -31
- package/src/components/viewport/viewport.ts +41 -41
- package/src/core/component.ts +1299 -1299
- package/src/core/core_application.ts +361 -361
- package/src/core/core_colors.ts +512 -512
- package/src/core/core_data.ts +1297 -1310
- package/src/core/core_dom.ts +481 -481
- package/src/core/core_dragdrop.ts +225 -225
- package/src/core/core_element.ts +221 -221
- package/src/core/core_events.ts +214 -214
- package/src/core/core_i18n.ts +395 -395
- package/src/core/core_pdf.ts +454 -454
- package/src/core/core_react.ts +78 -78
- package/src/core/core_router.ts +296 -296
- package/src/core/core_state.ts +62 -62
- package/src/core/core_styles.ts +213 -213
- package/src/core/core_svg.ts +1042 -1042
- package/src/core/core_tools.ts +996 -996
- package/src/types/scss.d.ts +4 -4
- package/src/types/x4react.d.ts +8 -8
- package/src/x4.scss +19 -19
- package/src/x4.ts +36 -36
- package/src/x4tsx.d.ts +26 -26
- package/.vscode/launch.json +0 -14
- package/.vscode/settings.json +0 -2
- package/demo/assets/house-light.svg +0 -1
- package/demo/assets/radio.svg +0 -4
- package/demo/index.html +0 -12
- package/demo/main.scss +0 -23
- package/demo/main.ts +0 -324
- package/demo/package.json +0 -26
- package/demo/scss.d.ts +0 -4
- package/demo/svg.d.ts +0 -1
- package/demo/tsconfig.json +0 -14
- package/src/components/gridview/folder-open.svg +0 -1
- package/src/components/messages/spinner.svg +0 -1
- package/src/x4.d.ts +0 -10
- package/tsconfig.json +0 -11
package/src/core/core_react.ts
CHANGED
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ___ ___ __
|
|
3
|
-
* \ \/ / / _
|
|
4
|
-
* \ / /_| |_
|
|
5
|
-
* / \____ _|
|
|
6
|
-
* /__/\__\ |_|.2
|
|
7
|
-
*
|
|
8
|
-
* @file core_react.ts
|
|
9
|
-
* @author Etienne Cochard
|
|
10
|
-
*
|
|
11
|
-
* @copyright (c) 2025 R-libre ingenierie
|
|
12
|
-
*
|
|
13
|
-
* Use of this source code is governed by an MIT-style license
|
|
14
|
-
* that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
|
|
15
|
-
*
|
|
16
|
-
* to use you must:
|
|
17
|
-
*
|
|
18
|
-
* 1. add this to your tsconfig.json
|
|
19
|
-
* "compilerOptions": {
|
|
20
|
-
* ...
|
|
21
|
-
* "jsx": "preserve",
|
|
22
|
-
* ...
|
|
23
|
-
* }
|
|
24
|
-
*
|
|
25
|
-
* 2. be sure that esbuild has this:
|
|
26
|
-
* jsxFactory: "x4create_element",
|
|
27
|
-
* loader: { ".ts": "tsx" }
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
* after that, all things like that will be ok
|
|
31
|
-
*
|
|
32
|
-
* import { x4_create_element } from "x4react"
|
|
33
|
-
* const xx = <h1>This is a title</h1>
|
|
34
|
-
*
|
|
35
|
-
*/
|
|
36
|
-
|
|
37
|
-
import { Component } from './component';
|
|
38
|
-
import { Constructor, isString } from './core_tools';
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
* x4 is reactive ?
|
|
43
|
-
* hard jsx :)
|
|
44
|
-
*/
|
|
45
|
-
|
|
46
|
-
export class x4_react {
|
|
47
|
-
|
|
48
|
-
static create_element( tag: string, props: any, ...content: any[] ): Component;
|
|
49
|
-
static create_element<X extends Component>( tag: string | Constructor<X>, props: X["props"], ...content: any[] ) {
|
|
50
|
-
|
|
51
|
-
props = props || {};
|
|
52
|
-
|
|
53
|
-
let el: Component;
|
|
54
|
-
|
|
55
|
-
// --- simple div ------------------------
|
|
56
|
-
if( isString(tag) ) {
|
|
57
|
-
el = new Component( { tag } );
|
|
58
|
-
Object.entries( props )
|
|
59
|
-
.forEach(([name, value]) => {
|
|
60
|
-
if (name.startsWith('on') && name.toLowerCase() in window) {
|
|
61
|
-
el.dom.addEventListener(name.toLowerCase().substring(2), value)
|
|
62
|
-
}
|
|
63
|
-
else {
|
|
64
|
-
el.setAttribute(name, value )
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
}
|
|
68
|
-
// --- Component ------------------------
|
|
69
|
-
else {
|
|
70
|
-
el = new tag( props );
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
if( content && content.length ) {
|
|
74
|
-
el.appendContent( content );
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
return el;
|
|
78
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* ___ ___ __
|
|
3
|
+
* \ \/ / / _
|
|
4
|
+
* \ / /_| |_
|
|
5
|
+
* / \____ _|
|
|
6
|
+
* /__/\__\ |_|.2
|
|
7
|
+
*
|
|
8
|
+
* @file core_react.ts
|
|
9
|
+
* @author Etienne Cochard
|
|
10
|
+
*
|
|
11
|
+
* @copyright (c) 2025 R-libre ingenierie
|
|
12
|
+
*
|
|
13
|
+
* Use of this source code is governed by an MIT-style license
|
|
14
|
+
* that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
|
|
15
|
+
*
|
|
16
|
+
* to use you must:
|
|
17
|
+
*
|
|
18
|
+
* 1. add this to your tsconfig.json
|
|
19
|
+
* "compilerOptions": {
|
|
20
|
+
* ...
|
|
21
|
+
* "jsx": "preserve",
|
|
22
|
+
* ...
|
|
23
|
+
* }
|
|
24
|
+
*
|
|
25
|
+
* 2. be sure that esbuild has this:
|
|
26
|
+
* jsxFactory: "x4create_element",
|
|
27
|
+
* loader: { ".ts": "tsx" }
|
|
28
|
+
*
|
|
29
|
+
*
|
|
30
|
+
* after that, all things like that will be ok
|
|
31
|
+
*
|
|
32
|
+
* import { x4_create_element } from "x4react"
|
|
33
|
+
* const xx = <h1>This is a title</h1>
|
|
34
|
+
*
|
|
35
|
+
*/
|
|
36
|
+
|
|
37
|
+
import { Component } from './component';
|
|
38
|
+
import { Constructor, isString } from './core_tools';
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* x4 is reactive ?
|
|
43
|
+
* hard jsx :)
|
|
44
|
+
*/
|
|
45
|
+
|
|
46
|
+
export class x4_react {
|
|
47
|
+
|
|
48
|
+
static create_element( tag: string, props: any, ...content: any[] ): Component;
|
|
49
|
+
static create_element<X extends Component>( tag: string | Constructor<X>, props: X["props"], ...content: any[] ) {
|
|
50
|
+
|
|
51
|
+
props = props || {};
|
|
52
|
+
|
|
53
|
+
let el: Component;
|
|
54
|
+
|
|
55
|
+
// --- simple div ------------------------
|
|
56
|
+
if( isString(tag) ) {
|
|
57
|
+
el = new Component( { tag } );
|
|
58
|
+
Object.entries( props )
|
|
59
|
+
.forEach(([name, value]) => {
|
|
60
|
+
if (name.startsWith('on') && name.toLowerCase() in window) {
|
|
61
|
+
el.dom.addEventListener(name.toLowerCase().substring(2), value)
|
|
62
|
+
}
|
|
63
|
+
else {
|
|
64
|
+
el.setAttribute(name, value )
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
// --- Component ------------------------
|
|
69
|
+
else {
|
|
70
|
+
el = new tag( props );
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
if( content && content.length ) {
|
|
74
|
+
el.appendContent( content );
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
return el;
|
|
78
|
+
}
|
|
79
79
|
}
|