@keenmate/web-daterangepicker 1.1.0 → 1.3.0
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.
- package/README.md +51 -0
- package/dist/style.css +1 -1
- package/dist/web-daterangepicker.js +2181 -1808
- package/dist/web-daterangepicker.umd.js +19 -10
- package/package.json +1 -1
- package/src/scss/_badges.scss +6 -6
- package/src/scss/_base.scss +201 -4
- package/src/scss/_calendar-grid.scss +20 -20
- package/src/scss/_header-navigation.scss +203 -17
- package/src/scss/_summary-actions.scss +15 -15
|
@@ -15,6 +15,19 @@
|
|
|
15
15
|
justify-content: space-between;
|
|
16
16
|
margin-bottom: var(--drp-spacing-md);
|
|
17
17
|
gap: var(--drp-spacing-sm);
|
|
18
|
+
|
|
19
|
+
// Static header (used in unified navigation mode)
|
|
20
|
+
&--static {
|
|
21
|
+
justify-content: center;
|
|
22
|
+
|
|
23
|
+
.drp-date-picker__month-year {
|
|
24
|
+
cursor: default;
|
|
25
|
+
|
|
26
|
+
&:hover {
|
|
27
|
+
background-color: transparent;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
18
31
|
}
|
|
19
32
|
|
|
20
33
|
// ==============================================================================
|
|
@@ -26,17 +39,17 @@
|
|
|
26
39
|
text-align: center;
|
|
27
40
|
font-weight: var(--drp-font-weight-semibold);
|
|
28
41
|
font-size: var(--drp-font-size-base);
|
|
29
|
-
color: var(--drp-text-
|
|
42
|
+
color: var(--drp-header-text-color);
|
|
30
43
|
padding: var(--drp-spacing-sm) var(--drp-spacing-md);
|
|
31
44
|
border-radius: var(--drp-border-radius);
|
|
32
45
|
cursor: pointer;
|
|
33
46
|
|
|
34
47
|
&:hover {
|
|
35
|
-
background-color: var(--drp-
|
|
48
|
+
background-color: var(--drp-header-bg-hover);
|
|
36
49
|
}
|
|
37
50
|
|
|
38
51
|
&:active {
|
|
39
|
-
background-color: var(--drp-
|
|
52
|
+
background-color: var(--drp-header-bg-active);
|
|
40
53
|
}
|
|
41
54
|
}
|
|
42
55
|
|
|
@@ -51,20 +64,20 @@
|
|
|
51
64
|
display: flex;
|
|
52
65
|
align-items: center;
|
|
53
66
|
justify-content: center;
|
|
54
|
-
border: var(--drp-border-width-base) solid var(--drp-border-color);
|
|
67
|
+
border: var(--drp-border-width-base) solid var(--drp-nav-border-color);
|
|
55
68
|
border-radius: var(--drp-border-radius);
|
|
56
69
|
background: transparent;
|
|
57
70
|
cursor: pointer;
|
|
58
71
|
font-size: var(--drp-font-size-lg);
|
|
59
|
-
color: var(--drp-text-
|
|
72
|
+
color: var(--drp-nav-text-color);
|
|
60
73
|
|
|
61
74
|
&:hover {
|
|
62
|
-
background-color: var(--drp-
|
|
63
|
-
border-color: var(--drp-
|
|
75
|
+
background-color: var(--drp-nav-bg-hover);
|
|
76
|
+
border-color: var(--drp-nav-border-hover);
|
|
64
77
|
}
|
|
65
78
|
|
|
66
79
|
&:active {
|
|
67
|
-
background-color: var(--drp-
|
|
80
|
+
background-color: var(--drp-nav-bg-active);
|
|
68
81
|
}
|
|
69
82
|
|
|
70
83
|
// Disabled state
|
|
@@ -76,7 +89,7 @@
|
|
|
76
89
|
|
|
77
90
|
&:hover {
|
|
78
91
|
background-color: transparent;
|
|
79
|
-
border-color: var(--drp-border-color);
|
|
92
|
+
border-color: var(--drp-nav-border-color);
|
|
80
93
|
}
|
|
81
94
|
}
|
|
82
95
|
|
|
@@ -118,7 +131,7 @@
|
|
|
118
131
|
min-width: 0; // Allow flex child to shrink below content size (enables ellipsis on items)
|
|
119
132
|
height: 100%; // Fill parent height
|
|
120
133
|
overflow-y: auto;
|
|
121
|
-
border: var(--drp-border-width-base) solid var(--drp-border-color);
|
|
134
|
+
border: var(--drp-border-width-base) solid var(--drp-rolling-border-color);
|
|
122
135
|
border-radius: var(--drp-border-radius);
|
|
123
136
|
|
|
124
137
|
// Flex layout to control child item sizing
|
|
@@ -134,15 +147,15 @@
|
|
|
134
147
|
}
|
|
135
148
|
|
|
136
149
|
&::-webkit-scrollbar-track {
|
|
137
|
-
background: var(--drp-
|
|
150
|
+
background: var(--drp-rolling-bg);
|
|
138
151
|
}
|
|
139
152
|
|
|
140
153
|
&::-webkit-scrollbar-thumb {
|
|
141
|
-
background: var(--drp-
|
|
154
|
+
background: var(--drp-rolling-scrollbar-thumb);
|
|
142
155
|
border-radius: 3px;
|
|
143
156
|
|
|
144
157
|
&:hover {
|
|
145
|
-
background: var(--drp-
|
|
158
|
+
background: var(--drp-rolling-scrollbar-thumb-hover);
|
|
146
159
|
}
|
|
147
160
|
}
|
|
148
161
|
}
|
|
@@ -162,16 +175,16 @@
|
|
|
162
175
|
justify-content: var(--drp-rolling-item-justify-content, #{$drp-rolling-item-justify-content});
|
|
163
176
|
|
|
164
177
|
&:hover {
|
|
165
|
-
background-color:
|
|
178
|
+
background-color: var(--drp-rolling-item-bg-hover);
|
|
166
179
|
}
|
|
167
180
|
|
|
168
181
|
&--selected {
|
|
169
|
-
background-color:
|
|
170
|
-
color:
|
|
182
|
+
background-color: var(--drp-rolling-item-bg-selected);
|
|
183
|
+
color: var(--drp-rolling-item-color-selected);
|
|
171
184
|
font-weight: $drp-rolling-item-font-weight-selected;
|
|
172
185
|
|
|
173
186
|
&:hover {
|
|
174
|
-
background-color: var(--drp-
|
|
187
|
+
background-color: var(--drp-rolling-item-bg-selected-hover);
|
|
175
188
|
}
|
|
176
189
|
}
|
|
177
190
|
}
|
|
@@ -185,3 +198,176 @@
|
|
|
185
198
|
width: 100%;
|
|
186
199
|
min-width: 0; // Allow flex child to shrink below content size
|
|
187
200
|
}
|
|
201
|
+
|
|
202
|
+
// ==============================================================================
|
|
203
|
+
// UNIFIED NAVIGATION (MULTI-MONTH CALENDARS)
|
|
204
|
+
// ==============================================================================
|
|
205
|
+
|
|
206
|
+
// Unified header - appears above all months
|
|
207
|
+
.drp-date-picker__unified-header {
|
|
208
|
+
display: flex;
|
|
209
|
+
align-items: center;
|
|
210
|
+
justify-content: space-between;
|
|
211
|
+
margin-bottom: var(--drp-spacing-lg);
|
|
212
|
+
gap: var(--drp-spacing-sm);
|
|
213
|
+
padding: 0 var(--drp-spacing-sm);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
// Date range display in unified header (e.g., "Jan 2025 - Jun 2025")
|
|
217
|
+
.drp-date-picker__unified-range {
|
|
218
|
+
flex: 1;
|
|
219
|
+
text-align: center;
|
|
220
|
+
font-weight: var(--drp-font-weight-semibold);
|
|
221
|
+
font-size: var(--drp-font-size-lg);
|
|
222
|
+
color: var(--drp-unified-range-text-color);
|
|
223
|
+
padding: var(--drp-spacing-sm) var(--drp-spacing-md);
|
|
224
|
+
border-radius: var(--drp-border-radius);
|
|
225
|
+
cursor: pointer;
|
|
226
|
+
|
|
227
|
+
&:hover {
|
|
228
|
+
background-color: var(--drp-unified-range-bg-hover);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
&:active {
|
|
232
|
+
background-color: var(--drp-unified-range-bg-active);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
// Non-interactive state (when unifiedHeaderInteractive is false)
|
|
236
|
+
&--static {
|
|
237
|
+
cursor: default !important;
|
|
238
|
+
|
|
239
|
+
&:hover {
|
|
240
|
+
background-color: transparent;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
&:active {
|
|
244
|
+
background-color: transparent;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
// Unified rolling selector - overlay for all months
|
|
250
|
+
.drp-date-picker__unified-rolling-selector {
|
|
251
|
+
position: absolute;
|
|
252
|
+
// Position below unified header
|
|
253
|
+
top: calc(var(--drp-spacing-lg) + var(--drp-spacing-lg) * 2);
|
|
254
|
+
// Center horizontally
|
|
255
|
+
left: 50%;
|
|
256
|
+
transform: translateX(-50%);
|
|
257
|
+
|
|
258
|
+
// Size constraints (responsive but limited)
|
|
259
|
+
width: min(90%, 450px); // 90% of calendar width or 450px, whichever is smaller
|
|
260
|
+
height: 350px;
|
|
261
|
+
max-height: 350px;
|
|
262
|
+
|
|
263
|
+
display: none;
|
|
264
|
+
z-index: 100; // Above everything
|
|
265
|
+
background: var(--drp-card-bg); // White background to cover calendar below
|
|
266
|
+
gap: var(--drp-spacing-xs); // Match normal rolling selector gap
|
|
267
|
+
|
|
268
|
+
&--visible {
|
|
269
|
+
display: flex;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
// Apply rolling list styles to child lists
|
|
273
|
+
.drp-date-picker__rolling-list {
|
|
274
|
+
flex: 1;
|
|
275
|
+
min-width: 0;
|
|
276
|
+
height: 100%;
|
|
277
|
+
overflow-y: auto;
|
|
278
|
+
border: var(--drp-border-width-base) solid var(--drp-rolling-border-color);
|
|
279
|
+
border-radius: var(--drp-border-radius);
|
|
280
|
+
display: flex;
|
|
281
|
+
flex-direction: column;
|
|
282
|
+
scroll-behavior: smooth;
|
|
283
|
+
|
|
284
|
+
// Custom scrollbar
|
|
285
|
+
&::-webkit-scrollbar {
|
|
286
|
+
width: $drp-rolling-scrollbar-width;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
&::-webkit-scrollbar-track {
|
|
290
|
+
background: var(--drp-rolling-bg);
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
&::-webkit-scrollbar-thumb {
|
|
294
|
+
background: var(--drp-rolling-scrollbar-thumb);
|
|
295
|
+
border-radius: 3px;
|
|
296
|
+
|
|
297
|
+
&:hover {
|
|
298
|
+
background: var(--drp-rolling-scrollbar-thumb-hover);
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
// Apply rolling item styles to child items
|
|
304
|
+
.drp-date-picker__rolling-item {
|
|
305
|
+
padding: #{$drp-rolling-item-padding-v} #{$drp-rolling-item-padding-h};
|
|
306
|
+
cursor: pointer;
|
|
307
|
+
font-size: #{$drp-rolling-item-font-size};
|
|
308
|
+
min-height: calc(#{$drp-rolling-item-min-height} * var(--drp-cell-scale));
|
|
309
|
+
flex-shrink: 0;
|
|
310
|
+
display: flex;
|
|
311
|
+
align-items: center;
|
|
312
|
+
justify-content: var(--drp-rolling-item-justify-content, #{$drp-rolling-item-justify-content});
|
|
313
|
+
|
|
314
|
+
&:hover {
|
|
315
|
+
background-color: var(--drp-rolling-item-bg-hover);
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
&--selected {
|
|
319
|
+
background-color: var(--drp-rolling-item-bg-selected);
|
|
320
|
+
color: var(--drp-rolling-item-color-selected);
|
|
321
|
+
font-weight: $drp-rolling-item-font-weight-selected;
|
|
322
|
+
|
|
323
|
+
&:hover {
|
|
324
|
+
background-color: var(--drp-rolling-item-bg-selected-hover);
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
&--disabled {
|
|
329
|
+
color: var(--drp-unified-rolling-disabled-color);
|
|
330
|
+
opacity: 0.4;
|
|
331
|
+
cursor: not-allowed;
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
// Text wrapper for ellipsis support
|
|
336
|
+
.drp-date-picker__rolling-item-text {
|
|
337
|
+
overflow: hidden;
|
|
338
|
+
text-overflow: ellipsis;
|
|
339
|
+
white-space: nowrap;
|
|
340
|
+
width: 100%;
|
|
341
|
+
min-width: 0;
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
// When unified navigation is enabled, hide individual month headers nav buttons
|
|
346
|
+
// but keep the month/year text visible (it becomes static display, not clickable)
|
|
347
|
+
.drp-date-picker--unified-nav {
|
|
348
|
+
.drp-date-picker__month {
|
|
349
|
+
.drp-date-picker__header {
|
|
350
|
+
// Hide nav buttons in individual month headers
|
|
351
|
+
.drp-date-picker__nav {
|
|
352
|
+
display: none;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
// Make month/year display static (not clickable)
|
|
356
|
+
.drp-date-picker__month-year {
|
|
357
|
+
cursor: default;
|
|
358
|
+
font-size: var(--drp-font-size-base);
|
|
359
|
+
font-weight: var(--drp-font-weight-normal);
|
|
360
|
+
color: var(--drp-unified-month-color);
|
|
361
|
+
|
|
362
|
+
&:hover {
|
|
363
|
+
background-color: transparent;
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
// Hide individual month rolling selectors
|
|
369
|
+
.drp-date-picker__rolling-selector {
|
|
370
|
+
display: none !important;
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
}
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
.drp-date-picker__summary {
|
|
13
13
|
text-align: center;
|
|
14
14
|
padding: var(--drp-spacing-md);
|
|
15
|
-
border-top: var(--drp-border-width-base) solid var(--drp-border-color);
|
|
15
|
+
border-top: var(--drp-border-width-base) solid var(--drp-summary-border-color);
|
|
16
16
|
font-size: var(--drp-font-size-sm);
|
|
17
|
-
color: var(--drp-text-
|
|
17
|
+
color: var(--drp-summary-text-color);
|
|
18
18
|
|
|
19
19
|
&--visible {
|
|
20
20
|
display: block;
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
|
|
28
28
|
.drp-date-picker__summary-count {
|
|
29
29
|
font-weight: var(--drp-font-weight-semibold);
|
|
30
|
-
color: var(--drp-
|
|
30
|
+
color: var(--drp-summary-count-color);
|
|
31
31
|
font-size: var(--drp-font-size-base);
|
|
32
32
|
}
|
|
33
33
|
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
gap: var(--drp-spacing-sm);
|
|
41
41
|
justify-content: space-between;
|
|
42
42
|
padding-top: var(--drp-spacing-sm);
|
|
43
|
-
border-top: var(--drp-border-width-base) solid var(--drp-border-color);
|
|
43
|
+
border-top: var(--drp-border-width-base) solid var(--drp-summary-border-color);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
.drp-date-picker__button {
|
|
47
47
|
flex: 1;
|
|
48
48
|
padding: var(--drp-spacing-sm) var(--drp-spacing-md);
|
|
49
|
-
border: var(--drp-border-width-base) solid var(--drp-border-color);
|
|
49
|
+
border: var(--drp-border-width-base) solid var(--drp-button-border-color);
|
|
50
50
|
border-radius: var(--drp-border-radius);
|
|
51
51
|
background: transparent;
|
|
52
52
|
cursor: pointer;
|
|
@@ -54,8 +54,8 @@
|
|
|
54
54
|
font-weight: var(--drp-font-weight-medium);
|
|
55
55
|
|
|
56
56
|
&:hover {
|
|
57
|
-
background-color: var(--drp-
|
|
58
|
-
border-color: var(--drp-
|
|
57
|
+
background-color: var(--drp-button-bg-hover);
|
|
58
|
+
border-color: var(--drp-button-border-hover);
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
// Disabled state
|
|
@@ -67,33 +67,33 @@
|
|
|
67
67
|
|
|
68
68
|
&:hover {
|
|
69
69
|
background-color: transparent;
|
|
70
|
-
border-color: var(--drp-border-color);
|
|
70
|
+
border-color: var(--drp-button-border-color);
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
// Today Button
|
|
75
75
|
&--today {
|
|
76
|
-
color: var(--drp-
|
|
76
|
+
color: var(--drp-button-today-color);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
// Clear Button
|
|
80
80
|
&--clear {
|
|
81
|
-
color: var(--drp-
|
|
81
|
+
color: var(--drp-button-clear-color);
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
// Apply Button (primary action)
|
|
85
85
|
&--apply {
|
|
86
|
-
background-color: var(--drp-
|
|
87
|
-
color: var(--drp-button-
|
|
88
|
-
border-color: var(--drp-
|
|
86
|
+
background-color: var(--drp-button-apply-bg);
|
|
87
|
+
color: var(--drp-button-apply-color);
|
|
88
|
+
border-color: var(--drp-button-apply-border);
|
|
89
89
|
|
|
90
90
|
&:hover {
|
|
91
|
-
background-color: var(--drp-
|
|
91
|
+
background-color: var(--drp-button-apply-bg-hover);
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
// Cancel Button
|
|
96
96
|
&--cancel {
|
|
97
|
-
color: var(--drp-
|
|
97
|
+
color: var(--drp-button-cancel-color);
|
|
98
98
|
}
|
|
99
99
|
}
|