x4js 2.0.15 → 2.0.17
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/lib/cjs/x4.css +1 -1
- package/lib/cjs/x4.js +2 -2
- package/lib/esm/x4.css +1 -1
- package/lib/esm/x4.mjs +2 -2
- package/lib/src/components/components.ts +2 -1
- package/lib/src/core/component.ts +0 -9
- package/lib/src/x4.ts +4 -0
- package/lib/styles/x4.css +1 -1
- package/lib/types/x4js.d.ts +294 -193
- package/package.json +18 -28
- package/src/components/canvas/canvas.ts +1 -1
- package/src/components/components.ts +2 -1
- package/src/core/component.ts +0 -9
- package/src/x4.ts +4 -0
- package/.vscode/launch.json +0 -14
- 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/scripts/build.mjs +0 -378
- package/scripts/prepack.mjs +0 -346
- package/tsconfig.json +0 -14
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.ts";
|
|
13
|
-
import { unsafeHtml } from '../src/core/core_tools.js'
|
|
14
|
-
import { SvgBuilder, SvgComponent } from '../src/core/core_svg.js'
|
|
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.js'
|
|
22
|
-
import { Panel } from '../src/components/panel/panel.js'
|
|
23
|
-
import { TextEdit } from '../src/components/textedit/textedit.js'
|
|
24
|
-
import { TextArea } from '../src/components/textarea/textarea.js'
|
|
25
|
-
import { Switch } from '../src/components/switch/switch.js'
|
|
26
|
-
import { Combobox } from '../src/components/combobox/combobox.js'
|
|
27
|
-
import { Slider } from '../src/components/slider/slider.js'
|
|
28
|
-
import { Progress } from '../src/components/progress/progress.js'
|
|
29
|
-
import { BtnGroup } from '../src/components/btngroup/btngroup.js'
|
|
30
|
-
import { Image } from '../src/components/image/image.js'
|
|
31
|
-
import { ColorInput } from '../src/components/colorinput/colorinput.js'
|
|
32
|
-
import { ColorPicker } from '../src/components/colorpicker/colorpicker.js'
|
|
33
|
-
import { Menu } from '../src/components/menu/menu.js'
|
|
34
|
-
import { initTooltips } from '../src/components/tooltips/tooltips.js'
|
|
35
|
-
import { Treeview, TreeItem } from '../src/components/treeview/treeview.js'
|
|
36
|
-
import { Dialog } from '../src/components/dialog/dialog.js'
|
|
37
|
-
import { Form } from '../src/components/form/form.js'
|
|
38
|
-
import { MessageBox } from '../src/components/messages/messages.js'
|
|
39
|
-
import { Calendar } from '../src/components/calendar/calendar.js'
|
|
40
|
-
import { Notification } from '../src/components/notification/notification.js'
|
|
41
|
-
import { Header } from '../src/components/header/header.js'
|
|
42
|
-
import { Tabs } from '../src/components/tabs/tabs.js'
|
|
43
|
-
import { Rating } from '../src/components/rating/rating.js'
|
|
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
|
-
}
|