ezfw-core 1.0.84 → 1.0.86

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 (37) hide show
  1. package/components/EzBaseComponent.ts +29 -2
  2. package/components/avatar/EzAvatar.module.scss +118 -117
  3. package/components/badge/EzBadge.module.scss +161 -154
  4. package/components/button/EzButton.module.scss +295 -300
  5. package/components/card/EzCard.module.scss +45 -40
  6. package/components/checkbox/EzCheckbox.module.scss +7 -7
  7. package/components/dataview/EzDataView.module.scss +192 -177
  8. package/components/datepicker/EzDatePicker.module.scss +253 -186
  9. package/components/datepicker/EzDatePicker.ts +304 -11
  10. package/components/dialog/EzDialog.module.scss +143 -119
  11. package/components/dropdown/EzDropdown.module.scss +112 -81
  12. package/components/input/EzInput.module.scss +140 -155
  13. package/components/panel/EzPanel.module.scss +120 -103
  14. package/components/radio/EzRadio.module.scss +7 -7
  15. package/components/select/EzSelect.module.scss +201 -195
  16. package/components/select/EzSelect.ts +159 -11
  17. package/components/switch/EzSwitch.module.scss +8 -8
  18. package/components/tabs/EzTabPanel.module.scss +284 -290
  19. package/components/textarea/EzTextarea.module.scss +133 -109
  20. package/components/timepicker/EzTimePicker.module.scss +196 -157
  21. package/components/timepicker/EzTimePicker.ts +222 -5
  22. package/components/tooltip/EzTooltip.module.scss +121 -102
  23. package/components/tree/EzTree.module.scss +189 -165
  24. package/core/STYLES_IMPLEMENTATION.md +194 -0
  25. package/core/ez.ts +21 -1
  26. package/core/loader.ts +34 -0
  27. package/core/renderer.ts +11 -0
  28. package/core/styles.ts +603 -0
  29. package/islands/StaticHtmlRenderer.js +23 -9
  30. package/islands/StaticHtmlRenderer.ts +23 -4
  31. package/islands/ViteIslandsPlugin.js +2 -0
  32. package/islands/ViteIslandsPlugin.ts +28 -5
  33. package/islands/runtime.ts +5 -4
  34. package/islands/ssrShim.js +69 -0
  35. package/package.json +1 -1
  36. package/template/ez.styles.config.js +315 -0
  37. package/themes/ez-theme-slate.scss +2 -2
package/components/EzBaseComponent.ts CHANGED
@@ -598,7 +598,7 @@ export class EzBaseComponent {
598
598
  case '==': result = left == right; break;
599
599
  }
600
600
 
601
- el.style.display = result ? '' : 'none';
601
+ this._setVisibility(el, result);
602
602
  });
603
603
  this._effects!.push(stop);
604
604
  } else {
@@ -624,12 +624,39 @@ export class EzBaseComponent {
624
624
 
625
625
  const stop = effect(() => {
626
626
  const result = !!ez.getDeepValue(ez._controllers[activeCtrl!]?.state, props);
627
- el.style.display = result ? '' : 'none';
627
+ this._setVisibility(el, result);
628
628
  });
629
629
  this._effects!.push(stop);
630
630
  }
631
631
  }
632
632
 
633
+ /**
634
+ * Set element visibility while preserving inline display style.
635
+ * Stores original display in data attribute when hiding.
636
+ */
637
+ private _setVisibility(el: HTMLElement, visible: boolean): void {
638
+ if (visible) {
639
+ // Restore original display or clear the property
640
+ const originalDisplay = el.dataset.ezOriginalDisplay;
641
+ if (originalDisplay) {
642
+ el.style.display = originalDisplay;
643
+ delete el.dataset.ezOriginalDisplay;
644
+ } else {
645
+ // Only clear if currently hidden
646
+ if (el.style.display === 'none') {
647
+ el.style.display = '';
648
+ }
649
+ }
650
+ } else {
651
+ // Store current display before hiding (if not already 'none')
652
+ const currentDisplay = el.style.display;
653
+ if (currentDisplay && currentDisplay !== 'none') {
654
+ el.dataset.ezOriginalDisplay = currentDisplay;
655
+ }
656
+ el.style.display = 'none';
657
+ }
658
+ }
659
+
633
660
  private _applyClsBind(el: HTMLElement, bind: BindConfig, ctrl: string | undefined): void {
634
661
  if (!bind.cls) return;
635
662
 
package/components/avatar/EzAvatar.module.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  // ==========================================================
2
2
  // EzAvatar - CSS Module
3
+ // All variants nested inside .avatar for specificity
3
4
  // ==========================================================
4
5
 
5
6
  .avatar {
@@ -22,150 +23,150 @@
22
23
  font-size: 14px;
23
24
  text-transform: uppercase;
24
25
  user-select: none;
25
- }
26
-
27
- // ----------------------------------------------------------
28
- // Image
29
- // ----------------------------------------------------------
30
- .avatarImg {
31
- width: 100%;
32
- height: 100%;
33
- object-fit: cover;
34
- }
35
26
 
36
- // ----------------------------------------------------------
37
- // Initials (fallback)
38
- // ----------------------------------------------------------
39
- .avatarInitials {
40
- line-height: 1;
41
- }
27
+ // ----------------------------------------------------------
28
+ // Image
29
+ // ----------------------------------------------------------
30
+ .avatarImg {
31
+ width: 100%;
32
+ height: 100%;
33
+ object-fit: cover;
34
+ }
42
35
 
43
- // ----------------------------------------------------------
44
- // Status indicator
45
- // ----------------------------------------------------------
46
- .avatarStatus {
47
- position: absolute;
48
- bottom: 0;
49
- right: 0;
50
- width: 12px;
51
- height: 12px;
52
- border-radius: 50%;
53
- border: 2px solid var(--ez-surface-secondary, #ffffff);
54
- }
36
+ // ----------------------------------------------------------
37
+ // Initials (fallback)
38
+ // ----------------------------------------------------------
39
+ .avatarInitials {
40
+ line-height: 1;
41
+ }
55
42
 
56
- .statusOnline {
57
- background-color: var(--ez-success, #22c55e);
58
- }
43
+ // ----------------------------------------------------------
44
+ // Status indicator
45
+ // ----------------------------------------------------------
46
+ .avatarStatus {
47
+ position: absolute;
48
+ bottom: 0;
49
+ right: 0;
50
+ width: 12px;
51
+ height: 12px;
52
+ border-radius: 50%;
53
+ border: 2px solid var(--ez-surface-secondary, #ffffff);
54
+ }
59
55
 
60
- .statusOffline {
61
- background-color: var(--ez-text-tertiary, #94a3b8);
62
- }
56
+ .statusOnline {
57
+ background-color: var(--ez-success, #22c55e);
58
+ }
63
59
 
64
- .statusBusy {
65
- background-color: var(--ez-danger, #ef4444);
66
- }
60
+ .statusOffline {
61
+ background-color: var(--ez-text-tertiary, #94a3b8);
62
+ }
67
63
 
68
- .statusAway {
69
- background-color: var(--ez-warning, #f59e0b);
70
- }
64
+ .statusBusy {
65
+ background-color: var(--ez-danger, #ef4444);
66
+ }
71
67
 
72
- // ----------------------------------------------------------
73
- // Sizes
74
- // ----------------------------------------------------------
75
- .xs {
76
- width: 24px;
77
- height: 24px;
78
- font-size: 10px;
68
+ .statusAway {
69
+ background-color: var(--ez-warning, #f59e0b);
70
+ }
79
71
 
80
- .avatarStatus {
81
- width: 8px;
82
- height: 8px;
83
- border-width: 1.5px;
72
+ // ----------------------------------------------------------
73
+ // Sizes
74
+ // ----------------------------------------------------------
75
+ &.xs {
76
+ width: 24px;
77
+ height: 24px;
78
+ font-size: 10px;
79
+
80
+ .avatarStatus {
81
+ width: 8px;
82
+ height: 8px;
83
+ border-width: 1.5px;
84
+ }
84
85
  }
85
- }
86
86
 
87
- .sm {
88
- width: 32px;
89
- height: 32px;
90
- font-size: 12px;
87
+ &.sm {
88
+ width: 32px;
89
+ height: 32px;
90
+ font-size: 12px;
91
91
 
92
- .avatarStatus {
93
- width: 10px;
94
- height: 10px;
95
- border-width: 2px;
92
+ .avatarStatus {
93
+ width: 10px;
94
+ height: 10px;
95
+ border-width: 2px;
96
+ }
96
97
  }
97
- }
98
98
 
99
- .lg {
100
- width: 48px;
101
- height: 48px;
102
- font-size: 18px;
99
+ &.lg {
100
+ width: 48px;
101
+ height: 48px;
102
+ font-size: 18px;
103
103
 
104
- .avatarStatus {
105
- width: 14px;
106
- height: 14px;
104
+ .avatarStatus {
105
+ width: 14px;
106
+ height: 14px;
107
+ }
107
108
  }
108
- }
109
109
 
110
- .xl {
111
- width: 64px;
112
- height: 64px;
113
- font-size: 24px;
110
+ &.xl {
111
+ width: 64px;
112
+ height: 64px;
113
+ font-size: 24px;
114
114
 
115
- .avatarStatus {
116
- width: 16px;
117
- height: 16px;
115
+ .avatarStatus {
116
+ width: 16px;
117
+ height: 16px;
118
+ }
118
119
  }
119
- }
120
120
 
121
- // ----------------------------------------------------------
122
- // Variants
123
- // ----------------------------------------------------------
124
- .square {
125
- border-radius: var(--ez-radius-lg, 8px);
126
- }
121
+ // ----------------------------------------------------------
122
+ // Shape variants
123
+ // ----------------------------------------------------------
124
+ &.square {
125
+ border-radius: var(--ez-radius-lg, 8px);
126
+ }
127
127
 
128
- .rounded {
129
- border-radius: var(--ez-radius-xl, 12px);
130
- }
128
+ &.rounded {
129
+ border-radius: var(--ez-radius-xl, 12px);
130
+ }
131
131
 
132
- // ----------------------------------------------------------
133
- // Color variants (for initials)
134
- // ----------------------------------------------------------
135
- .primary {
136
- background-color: var(--ez-primary-light, #dbeafe);
137
- color: var(--ez-primary, #2563eb);
138
- }
132
+ // ----------------------------------------------------------
133
+ // Color variants (for initials)
134
+ // ----------------------------------------------------------
135
+ &.primary {
136
+ background-color: var(--ez-primary-light, #dbeafe);
137
+ color: var(--ez-primary, #2563eb);
138
+ }
139
139
 
140
- .success {
141
- background-color: var(--ez-success-light, #dcfce7);
142
- color: var(--ez-success, #16a34a);
143
- }
140
+ &.success {
141
+ background-color: var(--ez-success-light, #dcfce7);
142
+ color: var(--ez-success, #16a34a);
143
+ }
144
144
 
145
- .warning {
146
- background-color: var(--ez-warning-light, #fef3c7);
147
- color: var(--ez-warning, #d97706);
148
- }
145
+ &.warning {
146
+ background-color: var(--ez-warning-light, #fef3c7);
147
+ color: var(--ez-warning, #d97706);
148
+ }
149
149
 
150
- .danger {
151
- background-color: var(--ez-danger-light, #fee2e2);
152
- color: var(--ez-danger, #dc2626);
153
- }
150
+ &.danger {
151
+ background-color: var(--ez-danger-light, #fee2e2);
152
+ color: var(--ez-danger, #dc2626);
153
+ }
154
154
 
155
- // ----------------------------------------------------------
156
- // Clickable
157
- // ----------------------------------------------------------
158
- .clickable {
159
- cursor: pointer;
160
- transition: transform 0.15s ease, box-shadow 0.15s ease;
155
+ // ----------------------------------------------------------
156
+ // Clickable
157
+ // ----------------------------------------------------------
158
+ &.clickable {
159
+ cursor: pointer;
160
+ transition: transform 0.15s ease, box-shadow 0.15s ease;
161
161
 
162
- &:hover {
163
- transform: scale(1.05);
164
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
165
- }
162
+ &:hover {
163
+ transform: scale(1.05);
164
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
165
+ }
166
166
 
167
- &:active {
168
- transform: scale(0.98);
167
+ &:active {
168
+ transform: scale(0.98);
169
+ }
169
170
  }
170
171
  }
171
172
 
package/components/badge/EzBadge.module.scss CHANGED
@@ -1,202 +1,209 @@
1
+ // ==========================================================
2
+ // EzBadge - CSS Module
3
+ // All properties use CSS variables for full customization
4
+ // All variants nested inside .badge for specificity
5
+ // ==========================================================
6
+
1
7
  .badge {
2
8
  display: inline-flex;
3
9
  align-items: center;
4
- gap: 4px;
10
+ gap: var(--ez-badge-gap, 4px);
5
11
 
6
- padding: 5px 10px;
12
+ height: var(--ez-badge-height, auto);
13
+ padding: var(--ez-badge-padding, 5px 10px);
7
14
 
8
- font-size: 12px;
9
- font-weight: 500;
15
+ font-size: var(--ez-badge-font-size, 12px);
16
+ font-weight: var(--ez-badge-font-weight, 500);
10
17
  line-height: 1.4;
11
18
  white-space: nowrap;
12
19
 
13
- border-radius: var(--ez-radius-sm, 4px);
14
- transition: all 0.15s ease;
15
- }
16
-
17
- .pill {
18
- border-radius: 999px;
19
- }
20
-
21
- .icon {
22
- font-size: 10px;
23
- }
24
-
25
- .text {
26
- // empty for now
27
- }
28
-
29
- .close {
30
- display: flex;
31
- align-items: center;
32
- justify-content: center;
33
-
34
- width: 14px;
35
- height: 14px;
36
- margin-left: 2px;
37
- margin-right: -4px;
38
- padding: 0;
20
+ color: var(--ez-badge-color, var(--ez-text-secondary, #64748b));
21
+ background: var(--ez-badge-bg, var(--ez-surface-primary, #f1f5f9));
22
+ border: var(--ez-badge-border-width, 0) solid var(--ez-badge-border-color, transparent);
23
+ border-radius: var(--ez-badge-radius, var(--ez-radius-sm, 4px));
39
24
 
40
- font-size: 8px;
41
-
42
- background: transparent;
43
- border: none;
44
- border-radius: 50%;
45
- opacity: 0.7;
46
- cursor: pointer;
47
- transition: opacity 0.15s ease;
48
-
49
- &:hover {
50
- opacity: 1;
51
- }
52
- }
25
+ transition: all 0.15s ease;
53
26
 
54
- .clickable {
55
- cursor: pointer;
27
+ // ----------------------------------------------------------
28
+ // Child elements
29
+ // ----------------------------------------------------------
56
30
 
57
- &:hover {
58
- filter: brightness(0.95);
31
+ .icon {
32
+ font-size: var(--ez-badge-icon-size, 10px);
59
33
  }
60
- }
61
-
62
- // Dot variant (just a small circle)
63
- .dot {
64
- width: 8px;
65
- height: 8px;
66
- padding: 0;
67
- border-radius: 50%;
68
- }
69
34
 
70
- // Default variant
71
- .default {
72
- background: var(--ez-surface-primary, #f1f5f9);
73
- color: var(--ez-text-secondary, #64748b);
35
+ .text {}
74
36
 
75
37
  .close {
76
- color: var(--ez-text-secondary, #64748b);
77
- }
78
- }
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: center;
79
41
 
80
- // Primary
81
- .primary {
82
- background: var(--ez-primary, #2563eb);
83
- color: #ffffff;
42
+ width: 14px;
43
+ height: 14px;
44
+ margin-left: 2px;
45
+ margin-right: -4px;
46
+ padding: 0;
84
47
 
85
- .close {
86
- color: #ffffff;
87
- }
88
- }
48
+ font-size: 8px;
49
+ color: currentColor;
89
50
 
90
- // Success
91
- .success {
92
- background: var(--ez-success, #10b981);
93
- color: #ffffff;
51
+ background: transparent;
52
+ border: none;
53
+ border-radius: 50%;
54
+ opacity: 0.7;
55
+ cursor: pointer;
56
+ transition: opacity 0.15s ease;
94
57
 
95
- .close {
96
- color: #ffffff;
58
+ &:hover {
59
+ opacity: 1;
60
+ }
97
61
  }
98
- }
99
62
 
100
- // Warning
101
- .warning {
102
- background: var(--ez-warning, #f59e0b);
103
- color: #ffffff;
63
+ // ----------------------------------------------------------
64
+ // Shape variants
65
+ // ----------------------------------------------------------
104
66
 
105
- .close {
106
- color: #ffffff;
67
+ &.pill {
68
+ border-radius: 999px;
107
69
  }
108
- }
109
70
 
110
- // Danger
111
- .danger {
112
- background: var(--ez-danger, #ef4444);
113
- color: #ffffff;
114
-
115
- .close {
116
- color: #ffffff;
71
+ &.dot {
72
+ width: 8px;
73
+ height: 8px;
74
+ padding: 0;
75
+ border-radius: 50%;
117
76
  }
118
- }
119
77
 
120
- // Info
121
- .info {
122
- background: var(--ez-info, #0ea5e9);
123
- color: #ffffff;
78
+ // ----------------------------------------------------------
79
+ // Clickable state
80
+ // ----------------------------------------------------------
124
81
 
125
- .close {
126
- color: #ffffff;
82
+ &.clickable {
83
+ cursor: pointer;
84
+
85
+ &:hover {
86
+ filter: brightness(0.95);
87
+ }
127
88
  }
128
- }
129
89
 
130
- // Outline variants
131
- .outline {
132
- background: transparent;
133
- border: 1px solid currentColor;
90
+ // ----------------------------------------------------------
91
+ // Color variants
92
+ // ----------------------------------------------------------
134
93
 
135
94
  &.default {
136
- color: var(--ez-text-secondary, #64748b);
137
- border-color: var(--ez-border, #e2e8f0);
95
+ background: var(--ez-badge-bg, var(--ez-surface-primary, #f1f5f9));
96
+ color: var(--ez-badge-color, var(--ez-text-secondary, #64748b));
138
97
  }
139
98
 
140
99
  &.primary {
141
- color: var(--ez-primary, #2563eb);
100
+ background: var(--ez-badge-bg, var(--ez-primary, #2563eb));
101
+ color: var(--ez-badge-color, #ffffff);
142
102
  }
143
103
 
144
104
  &.success {
145
- color: var(--ez-success, #10b981);
105
+ background: var(--ez-badge-bg, var(--ez-success, #10b981));
106
+ color: var(--ez-badge-color, #ffffff);
146
107
  }
147
108
 
148
109
  &.warning {
149
- color: var(--ez-warning, #f59e0b);
110
+ background: var(--ez-badge-bg, var(--ez-warning, #f59e0b));
111
+ color: var(--ez-badge-color, #ffffff);
150
112
  }
151
113
 
152
114
  &.danger {
153
- color: var(--ez-danger, #ef4444);
115
+ background: var(--ez-badge-bg, var(--ez-danger, #ef4444));
116
+ color: var(--ez-badge-color, #ffffff);
154
117
  }
155
118
 
156
119
  &.info {
157
- color: var(--ez-info, #0ea5e9);
158
- }
159
- }
160
-
161
- // Sizes
162
- .sm {
163
- padding: 1px 6px;
164
- font-size: 10px;
165
- gap: 3px;
166
-
167
- .icon {
168
- font-size: 8px;
169
- }
170
-
171
- .close {
172
- width: 12px;
173
- height: 12px;
174
- font-size: 7px;
175
- }
176
-
177
- &.dot {
178
- width: 6px;
179
- height: 6px;
180
- }
181
- }
182
-
183
- .lg {
184
- padding: 4px 12px;
185
- font-size: 14px;
186
- gap: 6px;
187
-
188
- .icon {
189
- font-size: 12px;
190
- }
191
-
192
- .close {
193
- width: 18px;
194
- height: 18px;
195
- font-size: 10px;
196
- }
197
-
198
- &.dot {
199
- width: 10px;
200
- height: 10px;
120
+ background: var(--ez-badge-bg, var(--ez-info, #0ea5e9));
121
+ color: var(--ez-badge-color, #ffffff);
122
+ }
123
+
124
+ // ----------------------------------------------------------
125
+ // Outline variants
126
+ // ----------------------------------------------------------
127
+
128
+ &.outline {
129
+ background: transparent;
130
+ border-width: 1px;
131
+ border-color: currentColor;
132
+
133
+ &.default {
134
+ color: var(--ez-badge-color, var(--ez-text-secondary, #64748b));
135
+ border-color: var(--ez-badge-border-color, var(--ez-border, #e2e8f0));
136
+ }
137
+
138
+ &.primary {
139
+ color: var(--ez-badge-color, var(--ez-primary, #2563eb));
140
+ background: transparent;
141
+ }
142
+
143
+ &.success {
144
+ color: var(--ez-badge-color, var(--ez-success, #10b981));
145
+ background: transparent;
146
+ }
147
+
148
+ &.warning {
149
+ color: var(--ez-badge-color, var(--ez-warning, #f59e0b));
150
+ background: transparent;
151
+ }
152
+
153
+ &.danger {
154
+ color: var(--ez-badge-color, var(--ez-danger, #ef4444));
155
+ background: transparent;
156
+ }
157
+
158
+ &.info {
159
+ color: var(--ez-badge-color, var(--ez-info, #0ea5e9));
160
+ background: transparent;
161
+ }
162
+ }
163
+
164
+ // ----------------------------------------------------------
165
+ // Sizes
166
+ // ----------------------------------------------------------
167
+
168
+ &.sm {
169
+ padding: var(--ez-badge-padding, 1px 6px);
170
+ font-size: var(--ez-badge-font-size, 10px);
171
+ gap: var(--ez-badge-gap, 3px);
172
+
173
+ .icon {
174
+ font-size: var(--ez-badge-icon-size, 8px);
175
+ }
176
+
177
+ .close {
178
+ width: 12px;
179
+ height: 12px;
180
+ font-size: 7px;
181
+ }
182
+
183
+ &.dot {
184
+ width: 6px;
185
+ height: 6px;
186
+ }
187
+ }
188
+
189
+ &.lg {
190
+ padding: var(--ez-badge-padding, 4px 12px);
191
+ font-size: var(--ez-badge-font-size, 14px);
192
+ gap: var(--ez-badge-gap, 6px);
193
+
194
+ .icon {
195
+ font-size: var(--ez-badge-icon-size, 12px);
196
+ }
197
+
198
+ .close {
199
+ width: 18px;
200
+ height: 18px;
201
+ font-size: 10px;
202
+ }
203
+
204
+ &.dot {
205
+ width: 10px;
206
+ height: 10px;
207
+ }
201
208
  }
202
209
  }