x4js 2.0.35 → 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.
Files changed (134) hide show
  1. package/README.md +21 -21
  2. package/package.json +39 -26
  3. package/src/components/base.scss +25 -89
  4. package/src/components/boxes/boxes.module.scss +54 -54
  5. package/src/components/boxes/boxes.ts +513 -513
  6. package/src/components/breadcrumb/breadcrumb.scss +56 -56
  7. package/src/components/breadcrumb/breadcrumb.ts +93 -93
  8. package/src/components/btngroup/btngroup.module.scss +40 -40
  9. package/src/components/btngroup/btngroup.ts +152 -152
  10. package/src/components/button/button.module.scss +172 -172
  11. package/src/components/button/button.ts +232 -232
  12. package/src/components/calendar/calendar.module.scss +162 -162
  13. package/src/components/calendar/calendar.ts +326 -326
  14. package/src/components/canvas/canvas.module.scss +24 -24
  15. package/src/components/canvas/canvas.ts +195 -195
  16. package/src/components/canvas/canvas_ex.ts +275 -275
  17. package/src/components/checkbox/check.svg +3 -3
  18. package/src/components/checkbox/checkbox.module.scss +141 -141
  19. package/src/components/checkbox/checkbox.ts +139 -139
  20. package/src/components/colorinput/colorinput.module.scss +64 -64
  21. package/src/components/colorinput/colorinput.ts +90 -90
  22. package/src/components/colorpicker/colorpicker.module.scss +132 -132
  23. package/src/components/colorpicker/colorpicker.ts +481 -481
  24. package/src/components/combobox/combobox.module.scss +145 -145
  25. package/src/components/combobox/combobox.ts +282 -282
  26. package/src/components/combobox/updown.svg +3 -3
  27. package/src/components/components.ts +45 -44
  28. package/src/components/dialog/dialog.module.scss +103 -105
  29. package/src/components/dialog/dialog.ts +233 -233
  30. package/src/components/filedrop/filedrop.module.scss +69 -69
  31. package/src/components/filedrop/filedrop.ts +130 -130
  32. package/src/components/form/form.module.scss +38 -38
  33. package/src/components/form/form.ts +172 -172
  34. package/src/components/gridview/gridview.module.scss +323 -337
  35. package/src/components/gridview/gridview.ts +1276 -1316
  36. package/src/components/header/header.module.scss +40 -40
  37. package/src/components/header/header.ts +141 -141
  38. package/src/components/icon/icon.module.scss +32 -32
  39. package/src/components/icon/icon.ts +165 -165
  40. package/src/components/image/image.module.scss +27 -27
  41. package/src/components/image/image.ts +168 -168
  42. package/src/components/input/input.module.scss +74 -74
  43. package/src/components/input/input.ts +537 -537
  44. package/src/components/keyboard/keyboard.module.scss +136 -136
  45. package/src/components/keyboard/keyboard.ts +549 -549
  46. package/src/components/label/label.module.scss +90 -91
  47. package/src/components/label/label.ts +101 -101
  48. package/src/components/link/link.module.scss +44 -44
  49. package/src/components/link/link.ts +87 -87
  50. package/src/components/listbox/listbox.module.scss +179 -179
  51. package/src/components/listbox/listbox.ts +596 -596
  52. package/src/components/menu/menu.module.scss +128 -128
  53. package/src/components/menu/menu.ts +174 -174
  54. package/src/components/messages/messages.module.scss +92 -146
  55. package/src/components/messages/messages.ts +237 -303
  56. package/src/components/normalize.scss +391 -391
  57. package/src/components/notification/notification.module.scss +83 -83
  58. package/src/components/notification/notification.ts +107 -107
  59. package/src/components/panel/panel.module.scss +66 -71
  60. package/src/components/panel/panel.ts +57 -57
  61. package/src/components/popup/popup.module.scss +51 -51
  62. package/src/components/popup/popup.ts +457 -457
  63. package/src/components/progress/progress.module.scss +56 -56
  64. package/src/components/progress/progress.ts +43 -43
  65. package/src/components/propgrid/progrid.module.scss +111 -111
  66. package/src/components/propgrid/propgrid.ts +300 -300
  67. package/src/components/propgrid/updown.svg +3 -3
  68. package/src/components/radio/radio.module.scss +163 -163
  69. package/src/components/radio/radio.svg +3 -3
  70. package/src/components/radio/radio.ts +141 -141
  71. package/src/components/rating/rating.module.scss +22 -22
  72. package/src/components/rating/rating.ts +131 -131
  73. package/src/components/select/select.module.scss +8 -8
  74. package/src/components/select/select.ts +134 -134
  75. package/src/components/shared.scss +141 -71
  76. package/src/components/sizers/sizer.module.scss +90 -112
  77. package/src/components/sizers/sizer.ts +131 -155
  78. package/src/components/slider/slider.module.scss +117 -117
  79. package/src/components/slider/slider.ts +197 -197
  80. package/src/components/spreadsheet/spreadsheet.module.scss +307 -307
  81. package/src/components/spreadsheet/spreadsheet.ts +1223 -1223
  82. package/src/components/switch/switch.module.scss +126 -126
  83. package/src/components/switch/switch.ts +61 -61
  84. package/src/components/tabs/tabs.module.scss +46 -67
  85. package/src/components/tabs/tabs.ts +229 -234
  86. package/src/components/textarea/textarea.module.scss +63 -63
  87. package/src/components/textarea/textarea.ts +131 -131
  88. package/src/components/textedit/textedit.module.scss +115 -115
  89. package/src/components/textedit/textedit.ts +122 -122
  90. package/src/components/themes.scss +90 -90
  91. package/src/components/tickline/tickline.module.scss +25 -25
  92. package/src/components/tickline/tickline.ts +81 -81
  93. package/src/components/tooltips/tooltips.scss +71 -71
  94. package/src/components/tooltips/tooltips.ts +120 -120
  95. package/src/components/treeview/treeview.module.scss +192 -192
  96. package/src/components/treeview/treeview.ts +484 -484
  97. package/src/components/viewport/viewport.module.scss +31 -31
  98. package/src/components/viewport/viewport.ts +41 -41
  99. package/src/core/component.ts +1299 -1299
  100. package/src/core/core_application.ts +361 -361
  101. package/src/core/core_colors.ts +512 -512
  102. package/src/core/core_data.ts +1297 -1310
  103. package/src/core/core_dom.ts +481 -481
  104. package/src/core/core_dragdrop.ts +225 -225
  105. package/src/core/core_element.ts +221 -221
  106. package/src/core/core_events.ts +214 -214
  107. package/src/core/core_i18n.ts +395 -395
  108. package/src/core/core_pdf.ts +454 -454
  109. package/src/core/core_react.ts +78 -78
  110. package/src/core/core_router.ts +296 -296
  111. package/src/core/core_state.ts +62 -62
  112. package/src/core/core_styles.ts +213 -213
  113. package/src/core/core_svg.ts +1042 -1042
  114. package/src/core/core_tools.ts +996 -996
  115. package/src/types/scss.d.ts +4 -4
  116. package/src/types/x4react.d.ts +8 -8
  117. package/src/x4.scss +19 -19
  118. package/src/x4.ts +36 -36
  119. package/src/x4tsx.d.ts +26 -26
  120. package/.vscode/launch.json +0 -14
  121. package/.vscode/settings.json +0 -2
  122. package/demo/assets/house-light.svg +0 -1
  123. package/demo/assets/radio.svg +0 -4
  124. package/demo/index.html +0 -12
  125. package/demo/main.scss +0 -23
  126. package/demo/main.ts +0 -324
  127. package/demo/package.json +0 -26
  128. package/demo/scss.d.ts +0 -4
  129. package/demo/svg.d.ts +0 -1
  130. package/demo/tsconfig.json +0 -14
  131. package/src/components/gridview/folder-open.svg +0 -1
  132. package/src/components/messages/spinner.svg +0 -1
  133. package/src/x4.d.ts +0 -10
  134. package/tsconfig.json +0 -11
@@ -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
+ }
@@ -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
- @import "./components/normalize.scss";
18
- @import "./components/themes.scss";
19
- @import "./components/base.scss";
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
+
@@ -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
- }
@@ -1,2 +0,0 @@
1
- {
2
- }
@@ -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>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 5 5" aria-hidden="true">
2
- <circle cx="2.5" cy="2.5" r="2.5" fill="currentColor"></circle>
3
- <circle cx="2.5" cy="2.5" r="1.25" fill="white"></circle>
4
- </svg>
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
@@ -1,4 +0,0 @@
1
- declare module '*.scss' {
2
- const content: { [className: string]: string };
3
- export default content;
4
- }
package/demo/svg.d.ts DELETED
@@ -1 +0,0 @@
1
- declare module '*.svg';
@@ -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
@@ -1,10 +0,0 @@
1
- /**
2
- * @file x4.d.ts
3
- * @author Etienne Cochard
4
- * @copyright (c) 2026 R-libre ingenierie, all rights reserved.
5
- **/
6
-
7
- declare module "*.svg" {
8
- const content: string;
9
- export default content;
10
- }
package/tsconfig.json DELETED
@@ -1,11 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "strict": true,
4
- "moduleResolution": "bundler",
5
- "module": "es2022",
6
- "strictNullChecks": false,
7
- "target": "ES2022",
8
- "experimentalDecorators": true,
9
- "lib": [ "es2022", "DOM" ]
10
- }
11
- }