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
package/src/components/calendar/calendar.module.scss CHANGED
@@ -1,163 +1,163 @@
1
- /**
2
- * ___ ___ __
3
- * \ \/ / / _
4
- * \ / /_| |_
5
- * / \____ _|
6
- * /__/\__\ |_|
7
- *
8
- * @file calendar.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
- --calendar-btn-background: inherit;
21
- --calendar-btn-color: var( --text-secondary );
22
- --calendar-btn-color-hover: var( --text-primary );
23
-
24
- --calendar-week-color: var( --accent-background );
25
- --calendar-week-color-hover: var( --accent-background-hover );
26
-
27
- --calendard-day-background-hover: var( --accent-background-hover );
28
- --calendard-day-color-hover: var( --accent-color-hover );
29
-
30
- --calendar-sel-background: var( --accent-background );
31
- --calendar-sel-color: var( --accent-color );
32
-
33
- --calendar-today-background: var( --alert-background );
34
- --calendar-today-color: var( --alert-color );
35
- --calendar-today-border: var( --accent-background );
36
-
37
- --calendar-header-color: var( --text-primary );
38
- --calendar-out-color: var( --disabled-color-dark );
39
- }
40
-
41
- .x4calendar {
42
- border: 1px solid var( --border );
43
- padding: 4px;
44
-
45
- .month-sel {
46
- height: 2em;
47
- align-items: center;
48
- padding-left: 2em;
49
-
50
- .month {
51
- padding-right: 4px;
52
- }
53
-
54
- .year {
55
- cursor: pointer;
56
- }
57
-
58
- .month,
59
- .year {
60
- cursor: pointer;
61
- &:hover {
62
- text-decoration: underline;
63
- }
64
- }
65
-
66
- .x4label {
67
- font-weight: bold;
68
- }
69
-
70
- .x4button {
71
- height: auto;
72
- background-color: var( --calendar-btn-background );
73
- color: var( --calendar-btn-color );
74
-
75
- &:hover {
76
- color: var( --calendar-btn-color-hover );
77
- }
78
- }
79
-
80
- margin-bottom: 8px;
81
- }
82
-
83
- .week {
84
- @extend %flex;
85
- align-items: center;
86
- padding: 2px;
87
-
88
- .cell {
89
- @extend %flex;
90
- min-width: 28px;
91
- min-height: 28px;
92
-
93
- color: var( --gray-900 );
94
- text-align: center;
95
-
96
- .text {
97
- @extend %hbox;
98
-
99
- transition: background-color 0.3s, color 0.3s;
100
- justify-content: center;
101
- border: 1px solid transparent;
102
- margin: auto;
103
- border-radius: 14px;
104
- width: 28px;
105
- height: 28px;
106
- }
107
- }
108
-
109
- .today {
110
- .text {
111
- font-weight: bold;
112
- background-color: var( --calendar-today-background );
113
- color: var( --calendar-today-color );
114
- //border-color: var( --calendar-today-border );
115
- }
116
- }
117
-
118
- .selection {
119
- .text {
120
- background-color: var( --calendar-sel-background );
121
- color: var( --calendar-sel-color );
122
- }
123
- }
124
-
125
- .weeknum {
126
- width: 2em;
127
- color: var( --calendar-week-color );
128
- font-size: 70%;
129
- }
130
-
131
- &:hover .weeknum {
132
- font-weight: bold;
133
- }
134
-
135
- .day {
136
- cursor: pointer;
137
- }
138
-
139
- .out {
140
- color: var( --calendar-out-color );
141
- font-size: 80%;
142
- }
143
-
144
- .day:hover {
145
- .text {
146
- background-color: var( --calendard-day-background-hover );
147
- color: var( --calendard-day-color-hover );
148
- }
149
- }
150
- }
151
-
152
- .header {
153
- .cell {
154
- color: var( --calendar-header-color );
155
- height: 1.5em;
156
- justify-content: center;
157
- }
158
-
159
- &:hover {
160
- background-color: inherit;
161
- }
162
- }
1
+ /**
2
+ * ___ ___ __
3
+ * \ \/ / / _
4
+ * \ / /_| |_
5
+ * / \____ _|
6
+ * /__/\__\ |_|
7
+ *
8
+ * @file calendar.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
+ --calendar-btn-background: inherit;
21
+ --calendar-btn-color: var( --text-secondary );
22
+ --calendar-btn-color-hover: var( --text-primary );
23
+
24
+ --calendar-week-color: var( --accent-background );
25
+ --calendar-week-color-hover: var( --accent-background-hover );
26
+
27
+ --calendard-day-background-hover: var( --accent-background-hover );
28
+ --calendard-day-color-hover: var( --accent-color-hover );
29
+
30
+ --calendar-sel-background: var( --accent-background );
31
+ --calendar-sel-color: var( --accent-color );
32
+
33
+ --calendar-today-background: var( --alert-background );
34
+ --calendar-today-color: var( --alert-color );
35
+ --calendar-today-border: var( --accent-background );
36
+
37
+ --calendar-header-color: var( --text-primary );
38
+ --calendar-out-color: var( --disabled-color-dark );
39
+ }
40
+
41
+ .x4calendar {
42
+ border: 1px solid var( --border );
43
+ padding: 4px;
44
+
45
+ .month-sel {
46
+ height: 2em;
47
+ align-items: center;
48
+ padding-left: 2em;
49
+
50
+ .month {
51
+ padding-right: 4px;
52
+ }
53
+
54
+ .year {
55
+ cursor: pointer;
56
+ }
57
+
58
+ .month,
59
+ .year {
60
+ cursor: pointer;
61
+ &:hover {
62
+ text-decoration: underline;
63
+ }
64
+ }
65
+
66
+ .x4label {
67
+ font-weight: bold;
68
+ }
69
+
70
+ .x4button {
71
+ height: auto;
72
+ background-color: var( --calendar-btn-background );
73
+ color: var( --calendar-btn-color );
74
+
75
+ &:hover {
76
+ color: var( --calendar-btn-color-hover );
77
+ }
78
+ }
79
+
80
+ margin-bottom: 8px;
81
+ }
82
+
83
+ .week {
84
+ @extend .flex;
85
+ align-items: center;
86
+ padding: 2px;
87
+
88
+ .cell {
89
+ @extend .flex;
90
+ min-width: 28px;
91
+ min-height: 28px;
92
+
93
+ color: var( --gray-900 );
94
+ text-align: center;
95
+
96
+ .text {
97
+ @extend .hbox;
98
+
99
+ transition: background-color 0.3s, color 0.3s;
100
+ justify-content: center;
101
+ border: 1px solid transparent;
102
+ margin: auto;
103
+ border-radius: 14px;
104
+ width: 28px;
105
+ height: 28px;
106
+ }
107
+ }
108
+
109
+ .today {
110
+ .text {
111
+ font-weight: bold;
112
+ background-color: var( --calendar-today-background );
113
+ color: var( --calendar-today-color );
114
+ //border-color: var( --calendar-today-border );
115
+ }
116
+ }
117
+
118
+ .selection {
119
+ .text {
120
+ background-color: var( --calendar-sel-background );
121
+ color: var( --calendar-sel-color );
122
+ }
123
+ }
124
+
125
+ .weeknum {
126
+ width: 2em;
127
+ color: var( --calendar-week-color );
128
+ font-size: 70%;
129
+ }
130
+
131
+ &:hover .weeknum {
132
+ font-weight: bold;
133
+ }
134
+
135
+ .day {
136
+ cursor: pointer;
137
+ }
138
+
139
+ .out {
140
+ color: var( --calendar-out-color );
141
+ font-size: 80%;
142
+ }
143
+
144
+ .day:hover {
145
+ .text {
146
+ background-color: var( --calendard-day-background-hover );
147
+ color: var( --calendard-day-color-hover );
148
+ }
149
+ }
150
+ }
151
+
152
+ .header {
153
+ .cell {
154
+ color: var( --calendar-header-color );
155
+ height: 1.5em;
156
+ justify-content: center;
157
+ }
158
+
159
+ &:hover {
160
+ background-color: inherit;
161
+ }
162
+ }
163
163
  }