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.
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 -1315
  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 -107
  77. package/src/components/sizers/sizer.ts +131 -134
  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 -1297
  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
package/src/components/treeview/treeview.module.scss CHANGED
@@ -1,193 +1,193 @@
1
- /**
2
- * ___ ___ __
3
- * \ \/ / / _
4
- * \ / /_| |_
5
- * / \____ _|
6
- * /__/\__\ |_|
7
- *
8
- * @file treeview.module.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
- @use "../shared.scss";
17
-
18
- :root {
19
-
20
- --treeview-background: white;
21
-
22
- --treeitem-backgound-hover: var( --background-secondary );
23
- --treeitem-color-hover: var( );
24
-
25
- --treeitem-background-sel: var( --accent-background );
26
- --treeitem-color-sel: var( --accent-color );
27
-
28
- --treeview-item-color-sel-disabled: var( --disabled-background );
29
- --treeview-item-color-disabled: var( --disabled-color-dark );
30
-
31
-
32
- --treeitem-backgound-active: var( --accent-background-active);
33
- --treeitem-color-active: var( --accent-color-active );
34
- }
35
-
36
- .x4treeview {
37
- @extend %vbox;
38
-
39
- overflow-y: auto;
40
- height: 100%;
41
- margin: 5px;
42
-
43
- outline: none;
44
-
45
- border: 1px solid var( --border );
46
- background: var( --treeview-background );
47
-
48
- &:focus {
49
- border: 1px solid var( --border-focus );
50
- }
51
-
52
- &>.body {
53
- width: 100%;
54
- flex-basis: 0;
55
- overflow-y: auto;
56
- overflow-x: auto;
57
- outline: none;
58
- position: relative;
59
-
60
- &> .x4viewport {
61
- // child + subitems
62
- .x4ctreeviewitem {
63
- &>.label {
64
- gap: 4px;
65
-
66
- .x4label, .x4icon {
67
- color: inherit;
68
- }
69
-
70
- .x4icon {
71
- width: 16px;
72
- }
73
-
74
- padding: 4px;
75
-
76
- &:hover {
77
- background-color: var( --treeitem-backgound-hover );
78
- }
79
-
80
- &.selected {
81
- background-color: var( --treeitem-background-sel );
82
- color: var( --treeitem-color-sel );
83
- }
84
-
85
- &:active{
86
- background-color: var( --accent-background-active );
87
- color: var( --accent-color-active );
88
- }
89
- }
90
-
91
- &>.body:not(:first-child) {
92
- padding-left: 24px;
93
- }
94
-
95
- &>.body {
96
- transition: opacity 0.5s ease;
97
- }
98
-
99
- &.folder {
100
- &> .label {
101
- display: flex;
102
- flex-direction: row;
103
- align-items: center;
104
-
105
- &>.x-icon {
106
- transform: rotate( 0deg );
107
- transition: transform 0.2s ease;
108
-
109
- width: 16px;
110
- height: 16px;
111
-
112
- cursor: pointer;
113
- }
114
- }
115
-
116
- &>.body {
117
- overflow: hidden;
118
- }
119
-
120
- &:not(.open) {
121
- &>.body {
122
- //display: none;
123
- height: 0;
124
- opacity: 0;
125
- }
126
-
127
- &>.label>.x4icon {
128
- transform: rotate( -90deg );
129
- }
130
- }
131
- }
132
- }
133
- }
134
- }
135
-
136
- &> #footer {
137
- border-top: 1px solid var(--border);
138
- margin: 0;
139
-
140
- &.x4btngroup {
141
- gap: 0px;
142
-
143
- .x4button {
144
- background-color: var( --ol-button-background );
145
- color: var( --ol-button-color );
146
- margin: 0;
147
-
148
- .x4icon {
149
- height: 1.5em;
150
- width: 1.5em;
151
- }
152
-
153
- &:hover{
154
- background-color: var( --ol-button-background-hover );
155
- color: var( --ol-button-color-hover );
156
- }
157
-
158
- &:active{
159
- background-color: var( --ol-button-background-active );
160
- color: var( --ol-button-color-active );
161
- #icon {
162
- color: var( --button-icon-color );
163
- }
164
- }
165
-
166
- &:focus {
167
- background-color: var( --ol-button-background-hover );
168
- }
169
-
170
- &:disabled {
171
- color: var( --disabled-color-dark );
172
- }
173
- }
174
- }
175
- }
176
-
177
- &[disabled] {
178
- cursor: not-allowed;
179
- border-color: var( --border );
180
- color: var( --treeview-item-color-disabled );
181
-
182
- &>.body {
183
- .x4viewport {
184
- pointer-events: none;
185
- .x4item {
186
- &.selected {
187
- background-color: var( --treeview-item-color-sel-disabled );
188
- }
189
- }
190
- }
191
- }
192
- }
1
+ /**
2
+ * ___ ___ __
3
+ * \ \/ / / _
4
+ * \ / /_| |_
5
+ * / \____ _|
6
+ * /__/\__\ |_|
7
+ *
8
+ * @file treeview.module.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
+ @use "../shared.scss";
17
+
18
+ :root {
19
+
20
+ --treeview-background: white;
21
+
22
+ --treeitem-backgound-hover: var( --background-secondary );
23
+ --treeitem-color-hover: var( );
24
+
25
+ --treeitem-background-sel: var( --accent-background );
26
+ --treeitem-color-sel: var( --accent-color );
27
+
28
+ --treeview-item-color-sel-disabled: var( --disabled-background );
29
+ --treeview-item-color-disabled: var( --disabled-color-dark );
30
+
31
+
32
+ --treeitem-backgound-active: var( --accent-background-active);
33
+ --treeitem-color-active: var( --accent-color-active );
34
+ }
35
+
36
+ .x4treeview {
37
+ @extend .vbox;
38
+
39
+ overflow-y: auto;
40
+ height: 100%;
41
+ margin: 5px;
42
+
43
+ outline: none;
44
+
45
+ border: 1px solid var( --border );
46
+ background: var( --treeview-background );
47
+
48
+ &:focus {
49
+ border: 1px solid var( --border-focus );
50
+ }
51
+
52
+ &>.body {
53
+ width: 100%;
54
+ flex-basis: 0;
55
+ overflow-y: auto;
56
+ overflow-x: auto;
57
+ outline: none;
58
+ position: relative;
59
+
60
+ &> .x4viewport {
61
+ // child + subitems
62
+ .x4ctreeviewitem {
63
+ &>.label {
64
+ gap: 4px;
65
+
66
+ .x4label, .x4icon {
67
+ color: inherit;
68
+ }
69
+
70
+ .x4icon {
71
+ width: 16px;
72
+ }
73
+
74
+ padding: 4px;
75
+
76
+ &:hover {
77
+ background-color: var( --treeitem-backgound-hover );
78
+ }
79
+
80
+ &.selected {
81
+ background-color: var( --treeitem-background-sel );
82
+ color: var( --treeitem-color-sel );
83
+ }
84
+
85
+ &:active{
86
+ background-color: var( --accent-background-active );
87
+ color: var( --accent-color-active );
88
+ }
89
+ }
90
+
91
+ &>.body:not(:first-child) {
92
+ padding-left: 24px;
93
+ }
94
+
95
+ &>.body {
96
+ transition: opacity 0.5s ease;
97
+ }
98
+
99
+ &.folder {
100
+ &> .label {
101
+ display: flex;
102
+ flex-direction: row;
103
+ align-items: center;
104
+
105
+ &>.x-icon {
106
+ transform: rotate( 0deg );
107
+ transition: transform 0.2s ease;
108
+
109
+ width: 16px;
110
+ height: 16px;
111
+
112
+ cursor: pointer;
113
+ }
114
+ }
115
+
116
+ &>.body {
117
+ overflow: hidden;
118
+ }
119
+
120
+ &:not(.open) {
121
+ &>.body {
122
+ //display: none;
123
+ height: 0;
124
+ opacity: 0;
125
+ }
126
+
127
+ &>.label>.x4icon {
128
+ transform: rotate( -90deg );
129
+ }
130
+ }
131
+ }
132
+ }
133
+ }
134
+ }
135
+
136
+ &> #footer {
137
+ border-top: 1px solid var(--border);
138
+ margin: 0;
139
+
140
+ &.x4btngroup {
141
+ gap: 0px;
142
+
143
+ .x4button {
144
+ background-color: var( --ol-button-background );
145
+ color: var( --ol-button-color );
146
+ margin: 0;
147
+
148
+ .x4icon {
149
+ height: 1.5em;
150
+ width: 1.5em;
151
+ }
152
+
153
+ &:hover{
154
+ background-color: var( --ol-button-background-hover );
155
+ color: var( --ol-button-color-hover );
156
+ }
157
+
158
+ &:active{
159
+ background-color: var( --ol-button-background-active );
160
+ color: var( --ol-button-color-active );
161
+ #icon {
162
+ color: var( --button-icon-color );
163
+ }
164
+ }
165
+
166
+ &:focus {
167
+ background-color: var( --ol-button-background-hover );
168
+ }
169
+
170
+ &:disabled {
171
+ color: var( --disabled-color-dark );
172
+ }
173
+ }
174
+ }
175
+ }
176
+
177
+ &[disabled] {
178
+ cursor: not-allowed;
179
+ border-color: var( --border );
180
+ color: var( --treeview-item-color-disabled );
181
+
182
+ &>.body {
183
+ .x4viewport {
184
+ pointer-events: none;
185
+ .x4item {
186
+ &.selected {
187
+ background-color: var( --treeview-item-color-sel-disabled );
188
+ }
189
+ }
190
+ }
191
+ }
192
+ }
193
193
  }