x4js 2.0.34 → 2.1.0-manual
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 -1315
- 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 -107
- package/src/components/sizers/sizer.ts +131 -134
- 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 -1297
- 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/types/scss.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare module '*.scss' {
|
|
2
|
-
const content: { [className: string]: string };
|
|
3
|
-
export default content;
|
|
4
|
-
}
|
|
1
|
+
declare module '*.scss' {
|
|
2
|
+
const content: { [className: string]: string };
|
|
3
|
+
export default content;
|
|
4
|
+
}
|
package/src/types/x4react.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export {};
|
|
2
|
-
|
|
3
|
-
declare global {
|
|
4
|
-
// namespace JSX {
|
|
5
|
-
// interface IntrinsicElements {
|
|
6
|
-
// [elemName: string]: any;
|
|
7
|
-
// }
|
|
8
|
-
// }
|
|
1
|
+
export {};
|
|
2
|
+
|
|
3
|
+
declare global {
|
|
4
|
+
// namespace JSX {
|
|
5
|
+
// interface IntrinsicElements {
|
|
6
|
+
// [elemName: string]: any;
|
|
7
|
+
// }
|
|
8
|
+
// }
|
|
9
9
|
}
|
package/src/x4.scss
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ___ ___ __
|
|
3
|
-
* \ \/ / / _
|
|
4
|
-
* \ / /_| |_
|
|
5
|
-
* / \____ _|
|
|
6
|
-
* /__/\__\ |_|
|
|
7
|
-
*
|
|
8
|
-
* @file x4.scss
|
|
9
|
-
* @author Etienne Cochard
|
|
10
|
-
*
|
|
11
|
-
* @copyright (c) 2024 R-libre ingenierie
|
|
12
|
-
*
|
|
13
|
-
* Use of this source code is governed by an MIT-style license
|
|
14
|
-
* that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
|
|
15
|
-
**/
|
|
16
|
-
|
|
17
|
-
@
|
|
18
|
-
@
|
|
19
|
-
@
|
|
1
|
+
/**
|
|
2
|
+
* ___ ___ __
|
|
3
|
+
* \ \/ / / _
|
|
4
|
+
* \ / /_| |_
|
|
5
|
+
* / \____ _|
|
|
6
|
+
* /__/\__\ |_|
|
|
7
|
+
*
|
|
8
|
+
* @file x4.scss
|
|
9
|
+
* @author Etienne Cochard
|
|
10
|
+
*
|
|
11
|
+
* @copyright (c) 2024 R-libre ingenierie
|
|
12
|
+
*
|
|
13
|
+
* Use of this source code is governed by an MIT-style license
|
|
14
|
+
* that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
|
|
15
|
+
**/
|
|
16
|
+
|
|
17
|
+
@use "./components/normalize.scss";
|
|
18
|
+
@use "./components/themes.scss";
|
|
19
|
+
@use "./components/base.scss"
|
package/src/x4.ts
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ___ ___ __
|
|
3
|
-
* \ \/ / / _
|
|
4
|
-
* \ / /_| |_
|
|
5
|
-
* / \____ _|
|
|
6
|
-
* /__/\__\ |_|
|
|
7
|
-
*
|
|
8
|
-
* @file x4.ts
|
|
9
|
-
* @author Etienne Cochard
|
|
10
|
-
*
|
|
11
|
-
* @copyright (c) 2024 R-libre ingenierie
|
|
12
|
-
*
|
|
13
|
-
* Use of this source code is governed by an MIT-style license
|
|
14
|
-
* that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
|
|
15
|
-
**/
|
|
16
|
-
|
|
17
|
-
export * from "./core/component"
|
|
18
|
-
export * from "./core/core_application"
|
|
19
|
-
export * from "./core/core_colors"
|
|
20
|
-
export * from "./core/core_data"
|
|
21
|
-
export * from "./core/core_dom"
|
|
22
|
-
export * from "./core/core_dragdrop"
|
|
23
|
-
export * from "./core/core_element"
|
|
24
|
-
export * from "./core/core_events"
|
|
25
|
-
export * from "./core/core_i18n"
|
|
26
|
-
export * from "./core/core_pdf"
|
|
27
|
-
export * from "./core/core_react"
|
|
28
|
-
export * from "./core/core_router"
|
|
29
|
-
export * from "./core/core_state"
|
|
30
|
-
export * from "./core/core_styles"
|
|
31
|
-
export * from "./core/core_svg"
|
|
32
|
-
export * from "./core/core_tools"
|
|
33
|
-
|
|
34
|
-
export * from "./components/components"
|
|
35
|
-
|
|
36
|
-
import "./x4.scss"
|
|
1
|
+
/**
|
|
2
|
+
* ___ ___ __
|
|
3
|
+
* \ \/ / / _
|
|
4
|
+
* \ / /_| |_
|
|
5
|
+
* / \____ _|
|
|
6
|
+
* /__/\__\ |_|
|
|
7
|
+
*
|
|
8
|
+
* @file x4.ts
|
|
9
|
+
* @author Etienne Cochard
|
|
10
|
+
*
|
|
11
|
+
* @copyright (c) 2024 R-libre ingenierie
|
|
12
|
+
*
|
|
13
|
+
* Use of this source code is governed by an MIT-style license
|
|
14
|
+
* that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
|
|
15
|
+
**/
|
|
16
|
+
|
|
17
|
+
export * from "./core/component"
|
|
18
|
+
export * from "./core/core_application"
|
|
19
|
+
export * from "./core/core_colors"
|
|
20
|
+
export * from "./core/core_data"
|
|
21
|
+
export * from "./core/core_dom"
|
|
22
|
+
export * from "./core/core_dragdrop"
|
|
23
|
+
export * from "./core/core_element"
|
|
24
|
+
export * from "./core/core_events"
|
|
25
|
+
export * from "./core/core_i18n"
|
|
26
|
+
export * from "./core/core_pdf"
|
|
27
|
+
export * from "./core/core_react"
|
|
28
|
+
export * from "./core/core_router"
|
|
29
|
+
export * from "./core/core_state"
|
|
30
|
+
export * from "./core/core_styles"
|
|
31
|
+
export * from "./core/core_svg"
|
|
32
|
+
export * from "./core/core_tools"
|
|
33
|
+
|
|
34
|
+
export * from "./components/components"
|
|
35
|
+
|
|
36
|
+
import "./x4.scss"
|
package/src/x4tsx.d.ts
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ___ ___ __
|
|
3
|
-
* \ \/ / / _
|
|
4
|
-
* \ / /_| |_
|
|
5
|
-
* / \____ _|
|
|
6
|
-
* /__/\__\ |_|.2
|
|
7
|
-
*
|
|
8
|
-
* @file tsx.d.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
|
-
|
|
17
|
-
export { }
|
|
18
|
-
|
|
19
|
-
declare global {
|
|
20
|
-
namespace JSX {
|
|
21
|
-
interface IntrinsicElements {
|
|
22
|
-
[ name: string ]: any;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
1
|
+
/**
|
|
2
|
+
* ___ ___ __
|
|
3
|
+
* \ \/ / / _
|
|
4
|
+
* \ / /_| |_
|
|
5
|
+
* / \____ _|
|
|
6
|
+
* /__/\__\ |_|.2
|
|
7
|
+
*
|
|
8
|
+
* @file tsx.d.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
|
+
|
|
17
|
+
export { }
|
|
18
|
+
|
|
19
|
+
declare global {
|
|
20
|
+
namespace JSX {
|
|
21
|
+
interface IntrinsicElements {
|
|
22
|
+
[ name: string ]: any;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
package/.vscode/launch.json
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
// Use IntelliSense to learn about possible attributes.
|
|
3
|
-
// Hover to view descriptions of existing attributes.
|
|
4
|
-
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
|
5
|
-
"version": "0.2.0",
|
|
6
|
-
"configurations": [
|
|
7
|
-
{
|
|
8
|
-
"type": "node",
|
|
9
|
-
"request": "launch",
|
|
10
|
-
"name": "debug prepack",
|
|
11
|
-
"program": "${workspaceFolder}/scripts/prepack.mjs",
|
|
12
|
-
}
|
|
13
|
-
]
|
|
14
|
-
}
|
package/.vscode/settings.json
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M298.6 4c-6-5.3-15.1-5.3-21.2 0L5.4 244c-6.6 5.8-7.3 16-1.4 22.6s16 7.3 22.6 1.4L64 235l0 197c0 44.2 35.8 80 80 80l288 0c44.2 0 80-35.8 80-80l0-197 37.4 33c6.6 5.8 16.7 5.2 22.6-1.4s5.2-16.7-1.4-22.6L298.6 4zM96 432l0-225.3L288 37.3 480 206.7 480 432c0 26.5-21.5 48-48 48l-64 0 0-160c0-17.7-14.3-32-32-32l-96 0c-17.7 0-32 14.3-32 32l0 160-64 0c-26.5 0-48-21.5-48-48zm144 48l0-160 96 0 0 160-96 0z"/></svg>
|
package/demo/assets/radio.svg
DELETED
package/demo/index.html
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<link rel="stylesheet" href="./main.css">
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<noscript>JavaScript required</noscript>
|
|
10
|
-
<script src="./main.js"></script>
|
|
11
|
-
</body>
|
|
12
|
-
</html>
|
package/demo/main.scss
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ___ ___ __
|
|
3
|
-
* \ \/ / / _
|
|
4
|
-
* \ / /_| |_
|
|
5
|
-
* / \____ _|
|
|
6
|
-
* /__/\__\ |_|
|
|
7
|
-
*
|
|
8
|
-
* @file main.scss
|
|
9
|
-
* @author Etienne Cochard
|
|
10
|
-
*
|
|
11
|
-
* @copyright (c) 2024 R-libre ingenierie
|
|
12
|
-
*
|
|
13
|
-
* Use of this source code is governed by an MIT-style license
|
|
14
|
-
* that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
|
|
15
|
-
**/
|
|
16
|
-
|
|
17
|
-
@use "./node_modules/x4js/src/x4.scss" ;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
body {
|
|
22
|
-
padding: 16px;
|
|
23
|
-
}
|
package/demo/main.ts
DELETED
|
@@ -1,324 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ___ ___ __
|
|
3
|
-
* \ \/ / / _
|
|
4
|
-
* \ / /_| |_
|
|
5
|
-
* / \____ _|
|
|
6
|
-
* /__/\__\ |_|
|
|
7
|
-
*
|
|
8
|
-
* DEMO FILE
|
|
9
|
-
*
|
|
10
|
-
**/
|
|
11
|
-
|
|
12
|
-
import { wrapDOM, Component } from "../src/core/component";
|
|
13
|
-
import { unsafeHtml } from '../src/core/core_tools'
|
|
14
|
-
import { SvgBuilder, SvgComponent } from '../src/core/core_svg'
|
|
15
|
-
|
|
16
|
-
import { Button } from "../src/components/button/button.js"
|
|
17
|
-
import { Label } from "../src/components/label/label.js"
|
|
18
|
-
import { Checkbox } from "../src/components/checkbox/checkbox.js"
|
|
19
|
-
import { HBox, VBox } from "../src/components/boxes/boxes.js"
|
|
20
|
-
|
|
21
|
-
import { Listbox, ListItem } from '../src/components/listbox/listbox'
|
|
22
|
-
import { Panel } from '../src/components/panel/panel'
|
|
23
|
-
import { TextEdit } from '../src/components/textedit/textedit'
|
|
24
|
-
import { TextArea } from '../src/components/textarea/textarea'
|
|
25
|
-
import { Switch } from '../src/components/switch/switch'
|
|
26
|
-
import { Combobox } from '../src/components/combobox/combobox'
|
|
27
|
-
import { Slider } from '../src/components/slider/slider'
|
|
28
|
-
import { Progress } from '../src/components/progress/progress'
|
|
29
|
-
import { BtnGroup } from '../src/components/btngroup/btngroup'
|
|
30
|
-
import { Image } from '../src/components/image/image'
|
|
31
|
-
import { ColorInput } from '../src/components/colorinput/colorinput'
|
|
32
|
-
import { ColorPicker } from '../src/components/colorpicker/colorpicker'
|
|
33
|
-
import { Menu } from '../src/components/menu/menu'
|
|
34
|
-
import { initTooltips } from '../src/components/tooltips/tooltips'
|
|
35
|
-
import { Treeview, TreeItem } from '../src/components/treeview/treeview'
|
|
36
|
-
import { Dialog } from '../src/components/dialog/dialog'
|
|
37
|
-
import { Form } from '../src/components/form/form'
|
|
38
|
-
import { MessageBox } from '../src/components/messages/messages'
|
|
39
|
-
import { Calendar } from '../src/components/calendar/calendar'
|
|
40
|
-
import { Notification } from '../src/components/notification/notification'
|
|
41
|
-
import { Header } from '../src/components/header/header'
|
|
42
|
-
import { Tabs } from '../src/components/tabs/tabs'
|
|
43
|
-
import { Rating } from '../src/components/rating/rating'
|
|
44
|
-
|
|
45
|
-
import "@fontsource/montserrat"
|
|
46
|
-
import "./main.scss"
|
|
47
|
-
|
|
48
|
-
import def_icon from "./assets/house-light.svg";
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
function main( ) {
|
|
52
|
-
|
|
53
|
-
initTooltips( );
|
|
54
|
-
|
|
55
|
-
const testMenu = ( ev: MouseEvent ) => {
|
|
56
|
-
const sub = new Menu( { items: [
|
|
57
|
-
"Sub menu 1",
|
|
58
|
-
{ text: "sub 1-1" }
|
|
59
|
-
]
|
|
60
|
-
})
|
|
61
|
-
|
|
62
|
-
const sub3 = new Menu( { items: [
|
|
63
|
-
"Sub menu 3",
|
|
64
|
-
{ text: "sub 3-1" }
|
|
65
|
-
]
|
|
66
|
-
})
|
|
67
|
-
|
|
68
|
-
const sub2 = new Menu( { items: [
|
|
69
|
-
"Sub menu 2",
|
|
70
|
-
{ text: "sub 2-1" },
|
|
71
|
-
{ text: "menu e", menu: sub3 }
|
|
72
|
-
]
|
|
73
|
-
})
|
|
74
|
-
|
|
75
|
-
const pop = new Menu( {items: [
|
|
76
|
-
"Title",
|
|
77
|
-
{ text: "menu a", click: null, icon: def_icon },
|
|
78
|
-
"-",
|
|
79
|
-
{ text: "menu b", click: null },
|
|
80
|
-
{ text: "menu c", click: null, disabled: true },
|
|
81
|
-
"-",
|
|
82
|
-
{ text: "menu d", menu: sub },
|
|
83
|
-
{ text: "menu e", menu: sub2 },
|
|
84
|
-
]
|
|
85
|
-
});
|
|
86
|
-
|
|
87
|
-
pop.displayAt( ev.pageX, ev.pageY );
|
|
88
|
-
ev.stopPropagation( );
|
|
89
|
-
ev.preventDefault( );
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
const items: ListItem[] = [
|
|
93
|
-
{ id: 1, text: "Item 1" },
|
|
94
|
-
{ id: 2, text: "Item 2" },
|
|
95
|
-
{ id: 3, text: "Item 3" },
|
|
96
|
-
{ id: 4, text: "Item 4" },
|
|
97
|
-
{ id: 5, text: "Item 5" },
|
|
98
|
-
{ id: 6, text: "Item 6" },
|
|
99
|
-
];
|
|
100
|
-
|
|
101
|
-
const tree_items: TreeItem[] = [
|
|
102
|
-
{ id: 1, text: "root", open: true, children: [
|
|
103
|
-
{ id: 2, text: "folder 1", children: [
|
|
104
|
-
{ id: 3, text: "folder 1.1", children: [
|
|
105
|
-
{ id: 4, text: "value 1.1" },
|
|
106
|
-
{ id: 5, text: "value 1.2", iconId: def_icon },
|
|
107
|
-
{ id: 6, text: "value 1.3" }
|
|
108
|
-
] }
|
|
109
|
-
]},
|
|
110
|
-
{ id: 10, text: "folder 2", open: true, children: [
|
|
111
|
-
{ id: 11, text: "folder 2.1", open: true, children: [
|
|
112
|
-
{ id: 12, text: "value 2.1" },
|
|
113
|
-
{ id: 13, text: "value 2.2" },
|
|
114
|
-
{ id: 14, text: "value 2.3" }
|
|
115
|
-
] }
|
|
116
|
-
]}
|
|
117
|
-
]}
|
|
118
|
-
]
|
|
119
|
-
|
|
120
|
-
const dialog = new Dialog( {
|
|
121
|
-
title: "Dialog",
|
|
122
|
-
modal: true,
|
|
123
|
-
movable: true,
|
|
124
|
-
sizable: true,
|
|
125
|
-
closable: true,
|
|
126
|
-
buttons: ['ok','cancel'],
|
|
127
|
-
form: new Form( {
|
|
128
|
-
content: [
|
|
129
|
-
new Label( { cls: "x4flex", text: unsafeHtml("<h1>Example dialog</h1><p>This dialog is <i>resizable</i>...") } ),
|
|
130
|
-
new TextEdit( { label: "title", value: "" } ),
|
|
131
|
-
]
|
|
132
|
-
}),
|
|
133
|
-
});
|
|
134
|
-
|
|
135
|
-
const svg_builder = new SvgBuilder( );
|
|
136
|
-
|
|
137
|
-
svg_builder
|
|
138
|
-
.ellipse( 45, 45, 40 )
|
|
139
|
-
.stroke( "#ccc", 5 )
|
|
140
|
-
.fill( "transparent" );
|
|
141
|
-
|
|
142
|
-
svg_builder.path( )
|
|
143
|
-
.arc( 45, 45, 40, 0, 30*360/100 )
|
|
144
|
-
.stroke( "var( --accent-background )", 5 )
|
|
145
|
-
.fill( "none" )
|
|
146
|
-
.setAttr("tooltip","test")
|
|
147
|
-
.strokeCap( "round" )
|
|
148
|
-
.addDOMEvent( "mouseenter", ( ev ) => {
|
|
149
|
-
console.log( ev.target );
|
|
150
|
-
(ev.target as SVGElement).setAttribute( "stroke-width", "10px" );
|
|
151
|
-
})
|
|
152
|
-
.addDOMEvent( "mouseleave", ( ev ) => {
|
|
153
|
-
console.log( ev.target );
|
|
154
|
-
(ev.target as SVGElement).setAttribute( "stroke-width", "5px" );
|
|
155
|
-
});
|
|
156
|
-
|
|
157
|
-
svg_builder.text( 45, 42, "30%" )
|
|
158
|
-
.textAlign( "center" )
|
|
159
|
-
.verticalAlign( "baseline" )
|
|
160
|
-
.fontSize( "150%" )
|
|
161
|
-
.fontWeight( "bold" );
|
|
162
|
-
|
|
163
|
-
svg_builder.text( 45, 80, "custom control" )
|
|
164
|
-
.fontSize( "10px" )
|
|
165
|
-
.textAlign( "center" )
|
|
166
|
-
|
|
167
|
-
const t = new HBox( {
|
|
168
|
-
style: {
|
|
169
|
-
alignItems: "start",
|
|
170
|
-
gap: "8px",
|
|
171
|
-
flexWrap: "wrap",
|
|
172
|
-
},
|
|
173
|
-
content: [
|
|
174
|
-
new Panel( {
|
|
175
|
-
title: "Panel",
|
|
176
|
-
icon: def_icon,
|
|
177
|
-
width: 510,
|
|
178
|
-
content: [
|
|
179
|
-
new Label( { text: "label", icon: def_icon } ),
|
|
180
|
-
new HBox( { content: [
|
|
181
|
-
new Button( { label:'OK', icon:def_icon } ),
|
|
182
|
-
new Button( { label:'OK', icon:def_icon, disabled: true } ),
|
|
183
|
-
new Button( { cls: "outline", label:'OK', icon:def_icon } ),
|
|
184
|
-
]}),
|
|
185
|
-
new VBox({ content: [
|
|
186
|
-
new HBox({ content: [
|
|
187
|
-
new Checkbox( { label: 'Unchecked', checked: false } ),
|
|
188
|
-
new Checkbox( { label: 'Checked', checked: true } ),
|
|
189
|
-
new Checkbox( { label: 'Disabled', disabled: true, checked: true } ),
|
|
190
|
-
]}),
|
|
191
|
-
new HBox({ content: [
|
|
192
|
-
new Switch( { label: 'Unchecked', checked: false } ),
|
|
193
|
-
new Switch( { label: 'Checked', checked: true } ),
|
|
194
|
-
new Switch( { label: 'Disabled', checked: true, disabled: true } ),
|
|
195
|
-
]}),
|
|
196
|
-
]}),
|
|
197
|
-
new HBox( {content: [
|
|
198
|
-
new Listbox( {
|
|
199
|
-
width: 250,
|
|
200
|
-
height: 150,
|
|
201
|
-
items
|
|
202
|
-
}),
|
|
203
|
-
new Listbox( {
|
|
204
|
-
width: 250,
|
|
205
|
-
height: 150,
|
|
206
|
-
items,
|
|
207
|
-
disabled: true,
|
|
208
|
-
})
|
|
209
|
-
]}),
|
|
210
|
-
new Treeview( {
|
|
211
|
-
items: tree_items,
|
|
212
|
-
height: 150,
|
|
213
|
-
}),
|
|
214
|
-
new Header( {
|
|
215
|
-
items: [
|
|
216
|
-
{ title: "Column ", name: "a1" },
|
|
217
|
-
{ title: "Column 66%", name: "a2", width: -2 },
|
|
218
|
-
{ title: "Column 33%", name: "a3", width: -1 },
|
|
219
|
-
]
|
|
220
|
-
} ),
|
|
221
|
-
]}),
|
|
222
|
-
new Panel( {
|
|
223
|
-
title: "Panel",
|
|
224
|
-
icon: def_icon,
|
|
225
|
-
width: 510,
|
|
226
|
-
content: [
|
|
227
|
-
new TextEdit( { labelWidth: 90, label: "Login", value: "hello", required: true, disabled: true } ),
|
|
228
|
-
new TextEdit( { labelWidth: 90, label: "Password", value: "world", type: "password", inputGadgets: [
|
|
229
|
-
new Button( { icon: def_icon })
|
|
230
|
-
] } ),
|
|
231
|
-
new TextEdit( { labelWidth: 90, label: "Email", value: "", type: "email", placeholder: "select your email contact" } ),
|
|
232
|
-
new TextArea( { label: "Demo", height: 140, tooltip: "This is a small tooltip" } ),
|
|
233
|
-
new Combobox( { label: 'ComboBox', items }),
|
|
234
|
-
new Combobox( { label: 'Readonly', items, readonly: true }),
|
|
235
|
-
new Combobox( { label: 'Disabled', items, disabled: true })
|
|
236
|
-
]
|
|
237
|
-
}),
|
|
238
|
-
new Panel( {
|
|
239
|
-
title: "Another panel",
|
|
240
|
-
width: 610,
|
|
241
|
-
content: [
|
|
242
|
-
new Slider( {min: 0, max: 100, step: 10, value: 50 } ),
|
|
243
|
-
new Progress( { min: 0, max: 100, value: 45, cls: "indeterm" } ),
|
|
244
|
-
new BtnGroup( { cls: "x4flex", items: [ new Label({text:"group"} ), "ok","cancel","yes","no","-","retry","abort",new Button({cls:"danger",label:"custom"})]}),
|
|
245
|
-
new HBox( { content: [
|
|
246
|
-
new Image( { src:"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png", lazy: true, width: 250, height: "100%", fit: "contain", position: "50% 50%", alt: "an image" } ),
|
|
247
|
-
new ColorPicker( { color: "red", } ),
|
|
248
|
-
]}),
|
|
249
|
-
new ColorInput( { color: "red", } ),
|
|
250
|
-
new Rating( { value: 3 } ),
|
|
251
|
-
new SvgComponent( { svg: svg_builder, id: "", viewbox: "0 0 90 90", width: 90, height: 90, style: { margin: '16px'} } ),
|
|
252
|
-
|
|
253
|
-
new HBox( { content: [
|
|
254
|
-
new Button( { label:'Dialog...', click: ( ) => dialog.show() } ),
|
|
255
|
-
new Button( { label:'Message...', click: ( ) => {MessageBox.show( unsafeHtml( '<b>Care</b><br/>You will delete <i>all data</i>.' ) ) } } ),
|
|
256
|
-
new Button( { label:'Notification...', click: ( ) => { new Notification( { mode: "success", text: "Modification saved", title: "Backup" } ).display( 5 ) } } ),
|
|
257
|
-
]}),
|
|
258
|
-
]
|
|
259
|
-
}),
|
|
260
|
-
new Panel( {
|
|
261
|
-
title: "Another panel",
|
|
262
|
-
width: 410,
|
|
263
|
-
content: [
|
|
264
|
-
new Calendar( { } ),
|
|
265
|
-
]
|
|
266
|
-
}),
|
|
267
|
-
new Tabs( {
|
|
268
|
-
|
|
269
|
-
width: 500,
|
|
270
|
-
height: 200,
|
|
271
|
-
|
|
272
|
-
default: "page1",
|
|
273
|
-
items: [
|
|
274
|
-
{ name: "page1", title: "Tab 1", icon: def_icon, content: new Label( { text: unsafeHtml(`<h4>tab 1 content</h4><p>lorem ipsum</p>`)}) },
|
|
275
|
-
{ name: "page2", title: "Tab 2", icon: def_icon, content: new Label( { text: unsafeHtml(`<h4>tab 2 content</h4><p>ipsum lorem</p>` )}) },
|
|
276
|
-
{ name: "page3", title: "Tab 3", content: new Label( { text: unsafeHtml(`<h4>tab 3 content</h4><p>ipsum ++</p>` )}) },
|
|
277
|
-
]
|
|
278
|
-
})
|
|
279
|
-
]
|
|
280
|
-
} );
|
|
281
|
-
|
|
282
|
-
const body = wrapDOM( document.body );
|
|
283
|
-
body.appendContent( t );
|
|
284
|
-
body.addClass( "fit" );
|
|
285
|
-
body.addDOMEvent( "contextmenu", ( ev ) => { testMenu(ev) } );
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
function waitFontLoading(name: string) {
|
|
289
|
-
|
|
290
|
-
// tip for waiting font loading:
|
|
291
|
-
// by default, body is created invisible ((opacity = 0)
|
|
292
|
-
// we create a div inside with the font we need to wait the loading
|
|
293
|
-
// as soon as the font is loaded, it's size will change, the browser end font loading
|
|
294
|
-
// we can remove the div.
|
|
295
|
-
// pitfall: if the font is already loaded, ne never end.
|
|
296
|
-
// @review that
|
|
297
|
-
|
|
298
|
-
let ct = document.createElement('div');
|
|
299
|
-
|
|
300
|
-
ct.style.position = 'absolute';
|
|
301
|
-
ct.style.visibility = 'hidden';
|
|
302
|
-
ct.innerText = 'X';
|
|
303
|
-
|
|
304
|
-
document.body.appendChild(ct);
|
|
305
|
-
|
|
306
|
-
return new Promise<void>((resolve) => {
|
|
307
|
-
|
|
308
|
-
//let irc = ct.getBoundingClientRect();
|
|
309
|
-
const initialWidth = ct.offsetWidth;
|
|
310
|
-
|
|
311
|
-
let tm = setInterval(() => {
|
|
312
|
-
|
|
313
|
-
const newWidth = ct.offsetWidth;
|
|
314
|
-
if (newWidth!=initialWidth ) {
|
|
315
|
-
clearInterval(tm);
|
|
316
|
-
document.body.removeChild(ct);
|
|
317
|
-
resolve();
|
|
318
|
-
}
|
|
319
|
-
}, 0);
|
|
320
|
-
});
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
waitFontLoading( "montserrat" ).then( main );
|
|
324
|
-
//main( );
|
package/demo/package.json
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "x4js_demo_app",
|
|
3
|
-
"version": "2.0.11",
|
|
4
|
-
"description": "X4 framework",
|
|
5
|
-
"author": "etienne cochard",
|
|
6
|
-
"main": "main.ts",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"build": "node ../scripts/build.mjs --watch --hmr --serve",
|
|
9
|
-
"build-release": "node ../scripts/build.mjs --release"
|
|
10
|
-
},
|
|
11
|
-
"devDependencies": {
|
|
12
|
-
"x4js": "^2.0"
|
|
13
|
-
},
|
|
14
|
-
"x4build": {
|
|
15
|
-
"outdir": "build",
|
|
16
|
-
"copy": [
|
|
17
|
-
{
|
|
18
|
-
"from": "index.html",
|
|
19
|
-
"to": "index.html"
|
|
20
|
-
}
|
|
21
|
-
]
|
|
22
|
-
},
|
|
23
|
-
"dependencies": {
|
|
24
|
-
"@fontsource/montserrat": "^5.1.0"
|
|
25
|
-
}
|
|
26
|
-
}
|
package/demo/scss.d.ts
DELETED
package/demo/svg.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
declare module '*.svg';
|
package/demo/tsconfig.json
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"strict": true,
|
|
4
|
-
"moduleResolution": "nodenext",
|
|
5
|
-
"module": "NodeNext",
|
|
6
|
-
"strictNullChecks": false,
|
|
7
|
-
"target": "ES2021",
|
|
8
|
-
"lib": [ "es2022", "DOM" ],
|
|
9
|
-
"paths": {
|
|
10
|
-
"@core/*": ["./src/core"],
|
|
11
|
-
"@comp/*": ["./src/components"]
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path opacity=".4" d="M32 96l0 200.6 21.7-54.3C65.9 211.9 95.3 192 128 192l320 0 0-32c0-17.7-14.3-32-32-32l-117.5 0c-25.5 0-49.9-10.1-67.9-28.1L204.1 73.4c-6-6-14.1-9.4-22.6-9.4L64 64C46.3 64 32 78.3 32 96zM49.1 426.1c-2 4.9-1.4 10.5 1.6 14.9s7.9 7 13.2 7l320 0 80 0c6.5 0 12.4-4 14.9-10.1l64-160c2-4.9 1.4-10.5-1.6-14.9s-7.9-7-13.2-7l-400 0c-6.5 0-12.4 4-14.9 10.1l-64 160z"/><path d="M448 160l0 32 32 0 0-32c0-35.3-28.7-64-64-64L298.5 96c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0 80 0c19.6 0 37.3-11.9 44.6-30.2l64-160c5.9-14.8 4.1-31.5-4.8-44.7S543.9 224 528 224l-400 0c-19.6 0-37.3 11.9-44.6 30.2L32 382.8 32 96c0-17.7 14.3-32 32-32l117.5 0c8.5 0 16.6 3.4 22.6 9.4l22.6-22.6L204.1 73.4l26.5 26.5c18 18 42.4 28.1 67.9 28.1L416 128c17.7 0 32 14.3 32 32zM384 448L64 448c-5.3 0-10.3-2.6-13.2-7s-3.6-10-1.6-14.9l64-160c2.4-6.1 8.3-10.1 14.9-10.1l400 0c5.3 0 10.3 2.6 13.2 7s3.6 10 1.6 14.9l-64 160C476.4 444 470.5 448 464 448l-80 0z"/></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M352 96C352 78.3 337.7 64 320 64C302.3 64 288 78.3 288 96C288 113.7 302.3 128 320 128C337.7 128 352 113.7 352 96zM352 544C352 526.3 337.7 512 320 512C302.3 512 288 526.3 288 544C288 561.7 302.3 576 320 576C337.7 576 352 561.7 352 544zM512 320C512 337.7 526.3 352 544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288C526.3 288 512 302.3 512 320zM96 352C113.7 352 128 337.7 128 320C128 302.3 113.7 288 96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352zM139 501C146.9 509.8 159 513.4 170.5 510.6C181.9 507.7 190.9 498.7 193.8 487.3C196.6 475.8 193 463.7 184.2 455.8C176.3 447 164.2 443.4 152.7 446.2C141.3 449.1 132.3 458.1 129.4 469.5C126.6 481 130.2 493.1 139 501zM455.8 501C463.7 509.8 475.8 513.4 487.3 510.6C498.7 507.7 507.7 498.7 510.6 487.3C513.4 475.8 509.8 463.7 501 455.8C493.1 447 481 443.4 469.5 446.2C458.1 449.1 449.1 458.1 446.2 469.5C443.4 481 447 493.1 455.8 501zM139 139C130.2 146.9 126.6 159 129.4 170.5C132.3 181.9 141.3 190.9 152.7 193.8C164.2 196.6 176.3 193 184.2 184.2C193 176.3 196.6 164.2 193.8 152.7C190.9 141.3 181.9 132.3 170.5 129.4C159 126.6 146.9 130.2 139 139z"/></svg>
|
package/src/x4.d.ts
DELETED