x4js 2.0.35 → 2.1.0-manual.2

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
package/src/components/button/button.module.scss CHANGED
@@ -1,173 +1,173 @@
1
- /**
2
- * ___ ___ __
3
- * \ \/ / / _
4
- * \ / /_| |_
5
- * / \____ _|
6
- * /__/\__\ |_|
7
- *
8
- * @file button.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
-
17
- @use "../shared.scss";
18
-
19
- :root {
20
- --button-background: var( --accent-background );
21
- --button-color: var( --accent-color );
22
-
23
- --button-background-hover: var( --accent-background-hover );
24
- --button-color-hover: var( --accent-color-hover );
25
-
26
- --button-background-active: var( --accent-background-active );
27
- --button-color-active: var( --accent-color-active );
28
-
29
- --button-background-focus: var( --accent-background-focus );
30
- --button-color-focus: var( --accent-color-focus );
31
-
32
- --button-background-disabled: var( --disabled-background );
33
- --button-color-disabled: var( --disabled-color );
34
-
35
- --button-icon-color: rgb(255 255 255 / 64%);
36
-
37
- // outline
38
- --ol-button-background: var( --background-primary );
39
- --ol-button-background-active: #ccc;
40
- --ol-button-color-active: var( --text-primary );
41
- --ol-button-background-hover: #eee;
42
- --ol-button-color-hover: var( --text-primary );
43
- --ol-button-color-disabled: #ccc;
44
-
45
- --ol-button-color: var( --text-primary );
46
- --ol-button-border: var( --border );
47
- --ol-button-icon-color: var( --text-primary );
48
-
49
- --ol-button-border-focus: var( --accent-background-focus );
50
- --ol-button-color-focus: var( --accent-background );
51
- }
52
-
53
- .x4button {
54
- @extend %hbox;
55
-
56
- margin: 5px;
57
- gap: 4px;
58
-
59
- font-size: inherit;
60
- font-family: inherit;
61
-
62
- padding: 8px;
63
- margin: 2px;
64
- transition: background-color 0.3s, color 0.3s;
65
-
66
- border: none;
67
- outline: none;
68
- cursor: pointer;
69
-
70
- background-color: var( --button-background );
71
- color: var( --button-color );
72
-
73
- gap: 0.4em;
74
-
75
- &> #icon {
76
- transition: color 0.3s, fill 0.3s;
77
- fill: var( --button-color );
78
-
79
- width: 1em;
80
- height: 1em;
81
- //color: var( --button-icon-color );
82
-
83
- &.empty {
84
- display: none;
85
- }
86
- }
87
-
88
- &> #label {
89
- flex-grow: 1;
90
-
91
- padding: 0;
92
- color: inherit;
93
-
94
- &.empty {
95
- display: none;
96
- }
97
- }
98
-
99
- &:focus {
100
- background-color: var( --button-background-focus );
101
- color: var( --button-color-focus );
102
- #icon {
103
- color: var( --button-color-focus );
104
- }
105
-
106
- #label {
107
- text-decoration: underline;
108
- }
109
- }
110
-
111
- &:hover {
112
- background-color: var( --button-background-hover );
113
- color: var( --button-color-hover );
114
- }
115
-
116
- &:active{
117
- background-color: var( --button-background-active );
118
- color: var( --button-color-active );
119
- }
120
-
121
- &[disabled] {
122
- cursor: not-allowed;
123
- background-color: var( --button-background-disabled );
124
- color: var( --button-color-disabled );
125
- }
126
- }
127
-
128
- .x4button.outline {
129
- background-color: var( --ol-button-background );
130
- border: 1px solid var( --ol-button-border );
131
- color: var( --ol-button-color );
132
-
133
- #icon {
134
- color: var( --ol-button-icon-color );
135
- fill: var(--ol-button-icon-color);
136
- }
137
-
138
- &:focus{
139
- border-color: var( --ol-button-border-focus );
140
- color: var( --ol-button-color-focus );
141
- fill: var( --ol-button-color-focus );
142
- #icon {
143
- color: var( --ol-button-color-focus );
144
- fill: var( --ol-button-color-focus );
145
- }
146
- }
147
-
148
- &:hover{
149
- background-color: var( --ol-button-background-hover );
150
- color: var( --ol-button-color-hover );
151
- fill: var( --ol-button-color-hover );
152
- }
153
-
154
- &:active{
155
- background-color: var( --ol-button-background-active );
156
- color: var( --ol-button-color-active );
157
- fill: var( --ol-button-color-active );
158
-
159
- #icon {
160
- color: var( --button-icon-color );
161
- fill: var( --button-icon-color );
162
- }
163
- }
164
- }
165
-
166
- .x4button.danger:not([disabled]) {
167
- background-color: var( --alert-background );
168
- color: var( --alert-color );
169
-
170
- &:active {
171
- background-color: var( --alert-background-active );
172
- }
1
+ /**
2
+ * ___ ___ __
3
+ * \ \/ / / _
4
+ * \ / /_| |_
5
+ * / \____ _|
6
+ * /__/\__\ |_|
7
+ *
8
+ * @file button.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
+
17
+ @use "../shared.scss";
18
+
19
+ :root {
20
+ --button-background: var( --accent-background );
21
+ --button-color: var( --accent-color );
22
+
23
+ --button-background-hover: var( --accent-background-hover );
24
+ --button-color-hover: var( --accent-color-hover );
25
+
26
+ --button-background-active: var( --accent-background-active );
27
+ --button-color-active: var( --accent-color-active );
28
+
29
+ --button-background-focus: var( --accent-background-focus );
30
+ --button-color-focus: var( --accent-color-focus );
31
+
32
+ --button-background-disabled: var( --disabled-background );
33
+ --button-color-disabled: var( --disabled-color );
34
+
35
+ --button-icon-color: rgb(255 255 255 / 64%);
36
+
37
+ // outline
38
+ --ol-button-background: var( --background-primary );
39
+ --ol-button-background-active: #ccc;
40
+ --ol-button-color-active: var( --text-primary );
41
+ --ol-button-background-hover: #eee;
42
+ --ol-button-color-hover: var( --text-primary );
43
+ --ol-button-color-disabled: #ccc;
44
+
45
+ --ol-button-color: var( --text-primary );
46
+ --ol-button-border: var( --border );
47
+ --ol-button-icon-color: var( --text-primary );
48
+
49
+ --ol-button-border-focus: var( --accent-background-focus );
50
+ --ol-button-color-focus: var( --accent-background );
51
+ }
52
+
53
+ .x4button {
54
+ @extend .hbox;
55
+
56
+ margin: 5px;
57
+ gap: 4px;
58
+
59
+ font-size: inherit;
60
+ font-family: inherit;
61
+
62
+ padding: 8px;
63
+ margin: 2px;
64
+ transition: background-color 0.3s, color 0.3s;
65
+
66
+ border: none;
67
+ outline: none;
68
+ cursor: pointer;
69
+
70
+ background-color: var( --button-background );
71
+ color: var( --button-color );
72
+
73
+ gap: 0.4em;
74
+
75
+ &> #icon {
76
+ transition: color 0.3s, fill 0.3s;
77
+ fill: var( --button-color );
78
+
79
+ width: 1em;
80
+ height: 1em;
81
+ //color: var( --button-icon-color );
82
+
83
+ &.empty {
84
+ display: none;
85
+ }
86
+ }
87
+
88
+ &> #label {
89
+ flex-grow: 1;
90
+
91
+ padding: 0;
92
+ color: inherit;
93
+
94
+ &.empty {
95
+ display: none;
96
+ }
97
+ }
98
+
99
+ &:focus {
100
+ background-color: var( --button-background-focus );
101
+ color: var( --button-color-focus );
102
+ #icon {
103
+ color: var( --button-color-focus );
104
+ }
105
+
106
+ #label {
107
+ text-decoration: underline;
108
+ }
109
+ }
110
+
111
+ &:hover {
112
+ background-color: var( --button-background-hover );
113
+ color: var( --button-color-hover );
114
+ }
115
+
116
+ &:active{
117
+ background-color: var( --button-background-active );
118
+ color: var( --button-color-active );
119
+ }
120
+
121
+ &[disabled] {
122
+ cursor: not-allowed;
123
+ background-color: var( --button-background-disabled );
124
+ color: var( --button-color-disabled );
125
+ }
126
+ }
127
+
128
+ .x4button.outline {
129
+ background-color: var( --ol-button-background );
130
+ border: 1px solid var( --ol-button-border );
131
+ color: var( --ol-button-color );
132
+
133
+ #icon {
134
+ color: var( --ol-button-icon-color );
135
+ fill: var(--ol-button-icon-color);
136
+ }
137
+
138
+ &:focus{
139
+ border-color: var( --ol-button-border-focus );
140
+ color: var( --ol-button-color-focus );
141
+ fill: var( --ol-button-color-focus );
142
+ #icon {
143
+ color: var( --ol-button-color-focus );
144
+ fill: var( --ol-button-color-focus );
145
+ }
146
+ }
147
+
148
+ &:hover{
149
+ background-color: var( --ol-button-background-hover );
150
+ color: var( --ol-button-color-hover );
151
+ fill: var( --ol-button-color-hover );
152
+ }
153
+
154
+ &:active{
155
+ background-color: var( --ol-button-background-active );
156
+ color: var( --ol-button-color-active );
157
+ fill: var( --ol-button-color-active );
158
+
159
+ #icon {
160
+ color: var( --button-icon-color );
161
+ fill: var( --button-icon-color );
162
+ }
163
+ }
164
+ }
165
+
166
+ .x4button.danger:not([disabled]) {
167
+ background-color: var( --alert-background );
168
+ color: var( --alert-color );
169
+
170
+ &:active {
171
+ background-color: var( --alert-background-active );
172
+ }
173
173
  }