x4js 2.0.7 → 2.0.9

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 (150) hide show
  1. package/lib/cjs/x4.js +1 -1
  2. package/lib/esm/x4.mjs +1 -1
  3. package/lib/output.d.ts +1472 -0
  4. package/lib/src/components/boxes/boxes.ts +1 -1
  5. package/lib/src/components/btngroup/btngroup.ts +7 -11
  6. package/lib/src/components/button/button.ts +3 -3
  7. package/lib/src/components/calendar/calendar.ts +6 -6
  8. package/lib/src/components/checkbox/checkbox.ts +3 -3
  9. package/lib/src/components/colorinput/colorinput.ts +3 -3
  10. package/lib/src/components/colorpicker/colorpicker.ts +3 -3
  11. package/lib/src/components/combobox/combobox.ts +1 -1
  12. package/lib/src/components/dialog/dialog.ts +3 -2
  13. package/lib/src/components/header/header.ts +1 -1
  14. package/lib/src/components/icon/icon.ts +1 -1
  15. package/lib/src/components/image/image.ts +1 -1
  16. package/lib/src/components/input/input.ts +2 -2
  17. package/lib/src/components/label/label.ts +2 -2
  18. package/lib/src/components/listbox/listbox.ts +1 -1
  19. package/lib/src/components/menu/menu.ts +3 -3
  20. package/lib/src/components/messages/messages.ts +2 -2
  21. package/lib/src/components/notification/notification.ts +2 -2
  22. package/lib/src/components/panel/panel.ts +2 -2
  23. package/lib/src/components/popup/popup.ts +2 -2
  24. package/lib/src/components/progress/progress.ts +1 -1
  25. package/lib/src/components/rating/rating.ts +2 -2
  26. package/lib/src/components/sizers/sizer.ts +2 -2
  27. package/lib/src/components/slider/slider.ts +2 -2
  28. package/lib/src/components/switch/switch.ts +1 -1
  29. package/lib/src/components/tabs/tabs.ts +2 -2
  30. package/lib/src/components/textarea/textarea.ts +1 -1
  31. package/lib/src/components/textedit/textedit.ts +2 -2
  32. package/lib/src/components/tooltips/tooltips.ts +2 -2
  33. package/lib/src/components/treeview/treeview.ts +1 -1
  34. package/lib/src/components/viewport/viewport.ts +1 -1
  35. package/lib/src/core/component.ts +1 -1
  36. package/lib/src/core/core_styles.ts +0 -1
  37. package/lib/src/types/svg.d.ts +1 -0
  38. package/lib/src/types/x4react.d.ts +9 -0
  39. package/lib/types/x4.d.ts +6144 -178
  40. package/package.json +6 -1
  41. package/build/x4.css +0 -1
  42. package/build/x4.js +0 -1
  43. package/scripts/build.mjs +0 -362
  44. package/scripts/prepack.mjs +0 -51
  45. package/src/components/base.scss +0 -26
  46. package/src/components/boxes/boxes.module.scss +0 -37
  47. package/src/components/boxes/boxes.ts +0 -125
  48. package/src/components/btngroup/btngroup.module.scss +0 -29
  49. package/src/components/btngroup/btngroup.ts +0 -106
  50. package/src/components/button/button.module.scss +0 -154
  51. package/src/components/button/button.ts +0 -117
  52. package/src/components/calendar/calendar-check-sharp-light.svg +0 -1
  53. package/src/components/calendar/calendar.module.scss +0 -163
  54. package/src/components/calendar/calendar.ts +0 -326
  55. package/src/components/calendar/chevron-left-sharp-light.svg +0 -1
  56. package/src/components/calendar/chevron-right-sharp-light.svg +0 -1
  57. package/src/components/checkbox/check.svg +0 -4
  58. package/src/components/checkbox/checkbox.module.scss +0 -142
  59. package/src/components/checkbox/checkbox.ts +0 -125
  60. package/src/components/colorinput/colorinput.module.scss +0 -65
  61. package/src/components/colorinput/colorinput.ts +0 -88
  62. package/src/components/colorinput/crosshairs-simple-sharp-light.svg +0 -1
  63. package/src/components/colorpicker/colorpicker.module.scss +0 -133
  64. package/src/components/colorpicker/colorpicker.ts +0 -477
  65. package/src/components/combobox/combobox.module.scss +0 -121
  66. package/src/components/combobox/combobox.ts +0 -190
  67. package/src/components/combobox/updown.svg +0 -4
  68. package/src/components/dialog/dialog.module.scss +0 -71
  69. package/src/components/dialog/dialog.ts +0 -91
  70. package/src/components/dialog/xmark-sharp-light.svg +0 -1
  71. package/src/components/form/form.module.scss +0 -34
  72. package/src/components/form/form.ts +0 -36
  73. package/src/components/header/header.module.scss +0 -40
  74. package/src/components/header/header.ts +0 -124
  75. package/src/components/icon/icon.module.scss +0 -30
  76. package/src/components/icon/icon.ts +0 -134
  77. package/src/components/image/image.module.scss +0 -21
  78. package/src/components/image/image.ts +0 -67
  79. package/src/components/input/input.module.scss +0 -69
  80. package/src/components/input/input.ts +0 -274
  81. package/src/components/label/label.module.scss +0 -52
  82. package/src/components/label/label.ts +0 -55
  83. package/src/components/listbox/listbox.module.scss +0 -103
  84. package/src/components/listbox/listbox.ts +0 -427
  85. package/src/components/menu/caret-right-solid.svg +0 -1
  86. package/src/components/menu/menu.module.scss +0 -108
  87. package/src/components/menu/menu.ts +0 -168
  88. package/src/components/messages/circle-exclamation.svg +0 -1
  89. package/src/components/messages/messages.module.scss +0 -47
  90. package/src/components/messages/messages.ts +0 -64
  91. package/src/components/normalize.scss +0 -386
  92. package/src/components/notification/circle-check-solid.svg +0 -1
  93. package/src/components/notification/circle-exclamation-solid.svg +0 -1
  94. package/src/components/notification/circle-notch-light.svg +0 -1
  95. package/src/components/notification/notification.module.scss +0 -82
  96. package/src/components/notification/notification.ts +0 -108
  97. package/src/components/notification/xmark-sharp-light.svg +0 -1
  98. package/src/components/panel/panel.module.scss +0 -48
  99. package/src/components/panel/panel.ts +0 -57
  100. package/src/components/popup/popup.module.scss +0 -43
  101. package/src/components/popup/popup.ts +0 -395
  102. package/src/components/progress/progress.module.scss +0 -57
  103. package/src/components/progress/progress.ts +0 -43
  104. package/src/components/rating/rating.module.scss +0 -23
  105. package/src/components/rating/rating.ts +0 -125
  106. package/src/components/rating/star-sharp-light.svg +0 -1
  107. package/src/components/rating/star-sharp-solid.svg +0 -1
  108. package/src/components/shared.scss +0 -76
  109. package/src/components/sizers/sizer.module.scss +0 -90
  110. package/src/components/sizers/sizer.ts +0 -120
  111. package/src/components/slider/slider.module.scss +0 -71
  112. package/src/components/slider/slider.ts +0 -143
  113. package/src/components/switch/switch.module.scss +0 -127
  114. package/src/components/switch/switch.ts +0 -56
  115. package/src/components/tabs/tabs.module.scss +0 -46
  116. package/src/components/tabs/tabs.ts +0 -157
  117. package/src/components/textarea/textarea.module.scss +0 -59
  118. package/src/components/textarea/textarea.ts +0 -54
  119. package/src/components/textedit/textedit.module.scss +0 -114
  120. package/src/components/textedit/textedit.ts +0 -82
  121. package/src/components/themes.scss +0 -77
  122. package/src/components/tooltips/circle-info-sharp-light.svg +0 -1
  123. package/src/components/tooltips/tooltips.scss +0 -51
  124. package/src/components/tooltips/tooltips.ts +0 -103
  125. package/src/components/treeview/chevron-down-light.svg +0 -1
  126. package/src/components/treeview/treeview.module.scss +0 -116
  127. package/src/components/treeview/treeview.ts +0 -403
  128. package/src/components/viewport/viewport.module.scss +0 -25
  129. package/src/components/viewport/viewport.ts +0 -38
  130. package/src/core/component.ts +0 -979
  131. package/src/core/core_colors.ts +0 -250
  132. package/src/core/core_dom.ts +0 -471
  133. package/src/core/core_dragdrop.ts +0 -201
  134. package/src/core/core_element.ts +0 -98
  135. package/src/core/core_events.ts +0 -149
  136. package/src/core/core_i18n.ts +0 -377
  137. package/src/core/core_router.ts +0 -221
  138. package/src/core/core_styles.ts +0 -215
  139. package/src/core/core_svg.ts +0 -550
  140. package/src/core/core_tools.ts +0 -673
  141. package/src/demo/assets/house-light.svg +0 -1
  142. package/src/demo/assets/radio.svg +0 -4
  143. package/src/demo/index.html +0 -12
  144. package/src/demo/main.scss +0 -21
  145. package/src/demo/main.tsx +0 -323
  146. package/src/x4.scss +0 -19
  147. package/tsconfig.json +0 -14
  148. package/types/svg.d.ts +0 -4
  149. package/types/x4react.d.ts +0 -9
  150. /package/{types → lib/src/types}/scss.d.ts +0 -0
@@ -1,201 +0,0 @@
1
- /**
2
- * ___ ___ __
3
- * \ \/ / / _
4
- * \ / /_| |_
5
- * / \____ _|
6
- * /__/\__\ |_|
7
- *
8
- * @file core_dragdrop.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
- import { Component } from './component';
18
- import { Point } from './core_tools';
19
-
20
- const x_drag_cb = Symbol( 'x-drag-cb' );
21
-
22
- interface DropInfo {
23
- pt: Point;
24
- data: DataTransfer;
25
- }
26
-
27
- type DropCallback = ( command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, infos: DropInfo ) => void;
28
- type FilterCallback = ( el: Component ) => boolean;
29
-
30
- /**
31
- *
32
- */
33
-
34
-
35
- class DragManager {
36
-
37
- dragSource: Component;
38
- dragGhost: HTMLElement;
39
- dropTarget: Component;
40
-
41
- notified: Component;
42
-
43
- timer: any; // pb with name of settimeout return
44
-
45
- /**
46
- *
47
- */
48
-
49
- registerDraggableElement(el: Component) {
50
-
51
- el.addDOMEvent('dragstart', (ev: DragEvent) => {
52
-
53
- this.dragSource = el;
54
- this.dragGhost = el.dom.cloneNode(true) as HTMLElement;
55
-
56
- this.dragGhost.classList.add('dragged');
57
- document.body.appendChild(this.dragGhost);
58
-
59
- el.addClass( 'dragging' );
60
-
61
- ev.dataTransfer.setData('text/string', '1');
62
- ev.dataTransfer.setDragImage(new Image(), 0, 0);
63
-
64
- ev.stopPropagation( );
65
- });
66
-
67
- el.addDOMEvent('drag', (ev: DragEvent) => {
68
- this.dragGhost.style.left = ev.pageX + "px";
69
- this.dragGhost.style.top = ev.pageY + "px";
70
- });
71
-
72
- el.addDOMEvent('dragend', (ev: DragEvent) => {
73
- el.removeClass( 'dragging' );
74
- this.dragGhost.remove();
75
- });
76
-
77
- el.setAttribute('draggable', "true");
78
- }
79
-
80
- /**
81
- *
82
- */
83
-
84
- registerDropTarget(el: Component, cb: DropCallback, filterCB?: FilterCallback ) {
85
-
86
- const dragEnter = (ev: DragEvent) => {
87
- if( filterCB && !filterCB(this.dragSource) ) {
88
- console.log( 'reject ', el );
89
- ev.dataTransfer.dropEffect = 'none';
90
- return;
91
- }
92
-
93
- console.log( 'accepted ', el );
94
- ev.preventDefault();
95
- ev.dataTransfer.dropEffect = 'copy';
96
- };
97
-
98
- const dragOver = (ev: DragEvent) => {
99
- //console.log( "dragover", ev.target );
100
-
101
- if( filterCB && !filterCB(this.dragSource) ) {
102
- console.log( 'reject ', el );
103
- ev.dataTransfer.dropEffect = 'none';
104
- return;
105
- }
106
-
107
- ev.preventDefault();
108
-
109
- if (this.dropTarget != el) {
110
- this.dropTarget = el;
111
- this._startCheck();
112
- }
113
-
114
- if( this.dropTarget ) {
115
- const infos = {
116
- pt: { x: ev.pageX, y: ev.pageY },
117
- data: ev.dataTransfer,
118
- }
119
-
120
- cb( 'drag', this.dragSource, infos );
121
- }
122
-
123
- ev.dataTransfer.dropEffect = 'copy';
124
- };
125
-
126
- const dragLeave = (ev: DragEvent) => {
127
- //console.log( "dragleave", ev.target );
128
- this.dropTarget = null;
129
- ev.preventDefault();
130
- };
131
-
132
- const drop = (ev: DragEvent) => {
133
- const infos = {
134
- pt: { x: ev.pageX, y: ev.pageY },
135
- data: ev.dataTransfer,
136
- }
137
-
138
- cb('drop', this.dragSource, infos );
139
-
140
- this.dropTarget = null;
141
- el.removeClass('drop-over');
142
-
143
- ev.preventDefault();
144
- }
145
-
146
- el.addDOMEvent('dragenter', dragEnter);
147
- el.addDOMEvent('dragover', dragOver);
148
- el.addDOMEvent('dragleave', dragLeave);
149
- el.addDOMEvent('drop', drop);
150
-
151
- el.setInternalData( x_drag_cb, cb );
152
- }
153
-
154
- _startCheck() {
155
-
156
- if (this.timer) {
157
- clearInterval(this.timer);
158
- this._check( );
159
- }
160
-
161
- this.timer = setInterval( () => this._check(), 300 );
162
- }
163
-
164
- _check( ) {
165
-
166
- const leaving = ( x: Component ) => {
167
- x.removeClass('drop-over');
168
-
169
- const cb = x.getInternalData( x_drag_cb );
170
- cb( 'leave', this.dragSource );
171
- }
172
-
173
- const entering = ( x: Component ) => {
174
- x.addClass('drop-over');
175
- const cb = x.getInternalData( x_drag_cb );
176
- cb( 'enter', this.dragSource );
177
- }
178
-
179
- if (this.dropTarget) {
180
- if (!this.notified || this.notified != this.dropTarget) {
181
-
182
- if( this.notified ) {
183
- leaving( this.notified );
184
- }
185
-
186
- this.notified = this.dropTarget;
187
- entering( this.notified );
188
- }
189
- }
190
- else {
191
- if (this.notified) {
192
- leaving( this.notified );
193
- this.notified = null;
194
-
195
- clearInterval(this.timer);
196
- }
197
- }
198
- }
199
- }
200
-
201
- export const dragManager = new DragManager();
@@ -1,98 +0,0 @@
1
- /**
2
- * ___ ___ __
3
- * \ \/ / / _
4
- * \ / /_| |_
5
- * / \____ _|
6
- * /__/\__\ |_|
7
- *
8
- * @file core_element.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
- import { EventMap, EventSource } from './core_events.js';
18
-
19
- /**
20
- *
21
- */
22
-
23
- export class CoreElement<E extends EventMap = EventMap> {
24
-
25
- #events: EventSource<E>;
26
- #timers: Map<string, Function>;
27
-
28
- private __startTimer( name: string, ms: number, repeat: boolean, callback: ( ) => void ) {
29
- if (!this.#timers) {
30
- this.#timers = new Map();
31
- }
32
- else {
33
- this.__stopTimer(name);
34
- }
35
-
36
- const id = (repeat ? setInterval : setTimeout)( callback, ms );
37
-
38
- this.#timers.set(name, () => {
39
- (repeat ? clearInterval : clearTimeout)(id);
40
- this.#timers.delete(name)
41
- });
42
- }
43
-
44
- private __stopTimer( name: string ) {
45
- const clear = this.#timers.get(name);
46
- if (clear) { clear(); }
47
- }
48
-
49
- setTimeout( name: string, ms: number, callback: () => void ) {
50
- this.__startTimer( name, ms, false, callback );
51
- }
52
-
53
- clearTimeout( name: string ) {
54
- this.__stopTimer( name );
55
- }
56
-
57
- setInterval( name: string, ms: number, callback: ( ) => void ) {
58
- this.__startTimer( name, ms, true, callback );
59
- }
60
-
61
- clearInterval( name: string ) {
62
- this.__stopTimer( name );
63
- }
64
-
65
- clearTimeouts( ) {
66
- for( const [id,val] of this.#timers ) {
67
- val( );
68
- }
69
-
70
- this.#timers.clear( );
71
- }
72
-
73
- // :: EVENTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
74
-
75
- /**
76
- * attach to an event
77
- */
78
-
79
- on<K extends keyof E>( name: K, listener: ( ev: E[K] ) => void ) {
80
- console.assert( listener!==undefined && listener!==null );
81
-
82
- if( !this.#events ) {
83
- this.#events = new EventSource( this );
84
- }
85
-
86
- this.#events.addListener( name, listener );
87
- }
88
-
89
- /**
90
- *
91
- */
92
-
93
- fire<K extends keyof E>( name: K, ev: E[K] ) {
94
- if( this.#events ) {
95
- this.#events.fire( name, ev );
96
- }
97
- }
98
- }
@@ -1,149 +0,0 @@
1
- /**
2
- * ___ ___ __
3
- * \ \/ / / _
4
- * \ / /_| |_
5
- * / \____ _|
6
- * /__/\__\ |_|
7
- *
8
- * @file core_events.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
- import { CoreElement } from './core_element';
18
-
19
- /**
20
- *
21
- */
22
-
23
- export interface CoreEvent {
24
- readonly type?: string; // type of the event 'click', 'change', ...
25
- readonly source?: CoreElement; // object that fires the event
26
- readonly context?: any; // contextual data, left to the user
27
-
28
- propagationStopped?: boolean; // if true, do not propagate the event
29
- defaultPrevented?: boolean; // if true, do not call default handler (if any)
30
-
31
- stopPropagation?(): void; // stop the propagation
32
- preventDefault?(): void; // prevent the default handler
33
- }
34
-
35
- // default stopPropagation implementation for Events
36
- const stopPropagation = function ( this: CoreEvent ) {
37
- this.propagationStopped = true;
38
- }
39
-
40
- // default preventDefault implementation for Events
41
- const preventDefault = function ( this: CoreEvent ) {
42
- this.defaultPrevented = true;
43
- }
44
-
45
-
46
- /**
47
- *
48
- */
49
-
50
- export interface EventMap {
51
- }
52
-
53
- /**
54
- *
55
- */
56
-
57
- export type EventCallback<T extends CoreEvent = CoreEvent> = (event: T) => any;
58
-
59
- /**
60
- *
61
- */
62
-
63
- export class EventSource<E extends EventMap = EventMap > {
64
-
65
- private _source: unknown;
66
- private _registry: Map<string,EventCallback[]>;
67
-
68
- constructor(source: unknown = null) {
69
- this._source = source ?? this;
70
- }
71
-
72
- addListener<K extends keyof E>( name: K, callback: ( ev: E[K] ) => void, capturing = false ) {
73
-
74
- if (!this._registry) {
75
- this._registry = new Map();
76
- }
77
-
78
- let listeners = this._registry.get(name as string);
79
- if (!listeners) {
80
- listeners = [];
81
- this._registry.set(name as string, listeners);
82
- }
83
-
84
- const cb = callback as EventCallback;
85
-
86
- if (listeners.indexOf(cb) == -1) {
87
- if (capturing) {
88
- listeners.unshift(cb);
89
- }
90
- else {
91
- listeners.push(cb);
92
- }
93
- }
94
- }
95
-
96
- fire<K extends keyof E>(name: K, evx: E[K]) {
97
-
98
- let listeners = this._registry?.get(name as string);
99
- //const defaultHandler = this.m_defaultHandlers?.get(eventName);
100
-
101
- if (listeners && listeners.length) {
102
- let ev = evx as CoreEvent;
103
- if (!ev) {
104
- ev = {};
105
- }
106
-
107
- if (!ev.source) {
108
- // readonly
109
- (ev as any).source = this._source;
110
- }
111
-
112
- if (!ev.type) {
113
- // readonly
114
- (ev as any).type = name;
115
- }
116
-
117
-
118
- if (!ev.preventDefault) {
119
- ev.preventDefault = preventDefault;
120
- }
121
-
122
- if (!ev.stopPropagation) {
123
- ev.stopPropagation = stopPropagation;
124
- }
125
-
126
- // small optimisation
127
- if (listeners.length == 1) {
128
- listeners[0](ev);
129
- }
130
- else {
131
- const temp = listeners.slice();
132
- for (let i = 0, n = temp.length; i < n; i++) {
133
- temp[i](ev);
134
- if (ev.propagationStopped) {
135
- break;
136
- }
137
- }
138
- }
139
- }
140
-
141
- //if (defaultHandler && defaultHandler.length && !e.defaultPrevented) {
142
- // return defaultHandler[0](e);
143
- //}
144
- }
145
- }
146
-
147
-
148
-
149
-