x4js 2.0.11 → 2.0.13

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 (109) hide show
  1. package/README.md +15 -15
  2. package/lib/README.txt +15 -15
  3. package/lib/cjs/x4.css +1 -1
  4. package/lib/cjs/x4.js +1 -1
  5. package/lib/esm/x4.css +1 -1
  6. package/lib/esm/x4.mjs +1 -1
  7. package/lib/src/components/base.scss +25 -26
  8. package/lib/src/components/boxes/boxes.module.scss +37 -37
  9. package/lib/src/components/boxes/boxes.ts +129 -125
  10. package/lib/src/components/breadcrumb/breadcrumb.scss +28 -0
  11. package/lib/src/components/breadcrumb/breadcrumb.ts +84 -0
  12. package/lib/src/components/breadcrumb/chevron-right.svg +1 -0
  13. package/lib/src/components/btngroup/btngroup.module.scss +28 -28
  14. package/lib/src/components/btngroup/btngroup.ts +119 -101
  15. package/lib/src/components/button/button.module.scss +154 -153
  16. package/lib/src/components/button/button.ts +117 -117
  17. package/lib/src/components/calendar/calendar.module.scss +162 -162
  18. package/lib/src/components/calendar/calendar.ts +326 -325
  19. package/lib/src/components/checkbox/check.svg +3 -3
  20. package/lib/src/components/checkbox/checkbox.module.scss +141 -141
  21. package/lib/src/components/checkbox/checkbox.ts +125 -124
  22. package/lib/src/components/colorinput/colorinput.module.scss +64 -64
  23. package/lib/src/components/colorinput/colorinput.ts +90 -87
  24. package/lib/src/components/colorpicker/colorpicker.module.scss +132 -132
  25. package/lib/src/components/colorpicker/colorpicker.ts +481 -476
  26. package/lib/src/components/combobox/combobox.module.scss +123 -120
  27. package/lib/src/components/combobox/combobox.ts +192 -190
  28. package/lib/src/components/combobox/updown.svg +3 -3
  29. package/lib/src/components/components.ts +34 -0
  30. package/lib/src/components/dialog/dialog.module.scss +71 -71
  31. package/lib/src/components/dialog/dialog.ts +94 -92
  32. package/lib/src/components/form/form.module.scss +34 -34
  33. package/lib/src/components/form/form.ts +41 -36
  34. package/lib/src/components/grid/datastore.ts +1298 -0
  35. package/lib/src/components/grid/gridview.ts +1108 -0
  36. package/lib/src/components/grid/memdb.ts +325 -0
  37. package/lib/src/components/header/header.module.scss +39 -39
  38. package/lib/src/components/header/header.ts +129 -123
  39. package/lib/src/components/icon/icon.module.scss +29 -29
  40. package/lib/src/components/icon/icon.ts +136 -134
  41. package/lib/src/components/image/image.module.scss +20 -20
  42. package/lib/src/components/image/image.ts +68 -66
  43. package/lib/src/components/input/input.module.scss +69 -69
  44. package/lib/src/components/input/input.ts +275 -274
  45. package/lib/src/components/label/label.module.scss +58 -52
  46. package/lib/src/components/label/label.ts +64 -55
  47. package/lib/src/components/link/link.ts +78 -0
  48. package/lib/src/components/listbox/listbox.module.scss +103 -103
  49. package/lib/src/components/listbox/listbox.ts +431 -427
  50. package/lib/src/components/menu/menu.module.scss +107 -107
  51. package/lib/src/components/menu/menu.ts +171 -168
  52. package/lib/src/components/messages/messages.module.scss +48 -47
  53. package/lib/src/components/messages/messages.ts +68 -63
  54. package/lib/src/components/normalize.scss +386 -386
  55. package/lib/src/components/notification/notification.module.scss +81 -81
  56. package/lib/src/components/notification/notification.ts +109 -108
  57. package/lib/src/components/panel/panel.module.scss +47 -47
  58. package/lib/src/components/panel/panel.ts +57 -56
  59. package/lib/src/components/popup/popup.module.scss +43 -43
  60. package/lib/src/components/popup/popup.ts +396 -395
  61. package/lib/src/components/progress/progress.module.scss +56 -56
  62. package/lib/src/components/progress/progress.ts +43 -42
  63. package/lib/src/components/rating/rating.module.scss +22 -22
  64. package/lib/src/components/rating/rating.ts +131 -125
  65. package/lib/src/components/shared.scss +90 -76
  66. package/lib/src/components/sizers/sizer.module.scss +89 -89
  67. package/lib/src/components/sizers/sizer.ts +123 -119
  68. package/lib/src/components/slider/slider.module.scss +70 -70
  69. package/lib/src/components/slider/slider.ts +147 -142
  70. package/lib/src/components/switch/switch.module.scss +126 -126
  71. package/lib/src/components/switch/switch.ts +61 -55
  72. package/lib/src/components/tabs/tabs.module.scss +46 -46
  73. package/lib/src/components/tabs/tabs.ts +168 -157
  74. package/lib/src/components/textarea/textarea.module.scss +59 -59
  75. package/lib/src/components/textarea/textarea.ts +60 -54
  76. package/lib/src/components/textedit/textedit.module.scss +113 -113
  77. package/lib/src/components/textedit/textedit.ts +83 -82
  78. package/lib/src/components/themes.scss +81 -77
  79. package/lib/src/components/tooltips/tooltips.scss +50 -50
  80. package/lib/src/components/tooltips/tooltips.ts +103 -102
  81. package/lib/src/components/treeview/treeview.module.scss +115 -115
  82. package/lib/src/components/treeview/treeview.ts +410 -403
  83. package/lib/src/components/viewport/viewport.module.scss +24 -24
  84. package/lib/src/components/viewport/viewport.ts +41 -38
  85. package/lib/src/core/component.ts +1002 -979
  86. package/lib/src/core/core_application.ts +44 -0
  87. package/lib/src/core/core_colors.ts +249 -249
  88. package/lib/src/core/core_dom.ts +471 -471
  89. package/lib/src/core/core_dragdrop.ts +200 -200
  90. package/lib/src/core/core_element.ts +97 -97
  91. package/lib/src/core/core_events.ts +149 -149
  92. package/lib/src/core/core_i18n.ts +377 -377
  93. package/lib/src/core/core_router.ts +221 -221
  94. package/lib/src/core/core_styles.ts +214 -214
  95. package/lib/src/core/core_svg.ts +550 -550
  96. package/lib/src/core/core_tools.ts +688 -673
  97. package/lib/src/demo/assets/radio.svg +3 -3
  98. package/lib/src/demo/index.html +11 -11
  99. package/lib/src/demo/main.scss +21 -21
  100. package/lib/src/demo/main.tsx +323 -323
  101. package/lib/src/types/scss.d.ts +4 -4
  102. package/lib/src/types/x4react.d.ts +8 -8
  103. package/lib/src/x4.scss +18 -18
  104. package/lib/src/x4.ts +31 -60
  105. package/lib/styles/x4.css +1 -1
  106. package/lib/types/x4js.d.ts +100 -49
  107. package/package.json +2 -3
  108. package/src/x4.ts +31 -60
  109. package/lib/output.d.ts +0 -1472
package/lib/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
  }