@mantine-vue/dates 1.1.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.
package/package.json ADDED
@@ -0,0 +1,48 @@
1
+ {
2
+ "name": "@mantine-vue/dates",
3
+ "version": "1.1.2",
4
+ "description": "Vue date and time picker components equivalent to @mantine/dates",
5
+ "license": "MIT",
6
+ "files": [
7
+ "cjs",
8
+ "esm",
9
+ "lib",
10
+ "styles.css",
11
+ "styles.layer.css",
12
+ "styles"
13
+ ],
14
+ "sideEffects": [
15
+ "*.css"
16
+ ],
17
+ "main": "./cjs/index.cjs",
18
+ "module": "./esm/index.mjs",
19
+ "types": "./lib/index.d.ts",
20
+ "exports": {
21
+ ".": {
22
+ "import": {
23
+ "types": "./lib/index.d.mts",
24
+ "default": "./esm/index.mjs"
25
+ },
26
+ "require": {
27
+ "types": "./lib/index.d.ts",
28
+ "default": "./cjs/index.cjs"
29
+ }
30
+ },
31
+ "./styles.css": "./styles.css",
32
+ "./styles.layer.css": "./styles.layer.css"
33
+ },
34
+ "devDependencies": {
35
+ "@mantine-vue/core": "workspace:*",
36
+ "@mantine-vue/hooks": "workspace:*",
37
+ "@vue/compiler-dom": "^3.5.0",
38
+ "@vue/test-utils": "^2.4.6",
39
+ "dayjs": "^1.11.21",
40
+ "vue": "^3.5.0"
41
+ },
42
+ "peerDependencies": {
43
+ "@mantine-vue/core": "1.1.1",
44
+ "@mantine-vue/hooks": "1.1.2",
45
+ "dayjs": ">=1.0.0",
46
+ "vue": "^3.5.0"
47
+ }
48
+ }
package/styles.css ADDED
@@ -0,0 +1,518 @@
1
+ ._calendar_5kwje_1 {
2
+ display: flex;
3
+ gap: var(--mantine-spacing-md);
4
+ width: max-content;
5
+ }
6
+
7
+ ._calendar_5kwje_1[data-full-width] {
8
+ width: 100%;
9
+ }
10
+
11
+ ._calendar_5kwje_1[data-full-width] > * {
12
+ flex: 1;
13
+ }
14
+
15
+ ._calendarLevel_5kwje_15 {
16
+ min-width: 16.25rem;
17
+ }
18
+
19
+ ._calendarHeader_5kwje_19 {
20
+ --dch-control-size: 2.25rem;
21
+
22
+ display: flex;
23
+ max-width: calc(var(--dch-control-size) * 8 + 0.4375rem);
24
+ margin-bottom: var(--mantine-spacing-xs);
25
+ }
26
+
27
+ ._calendarHeader_5kwje_19[data-full-width] {
28
+ max-width: none;
29
+ width: 100%;
30
+ }
31
+
32
+ ._calendarHeaderLevel_5kwje_32,
33
+ ._calendarHeaderControl_5kwje_33 {
34
+ height: var(--dch-control-size);
35
+ border-radius: var(--mantine-radius-default);
36
+ display: flex;
37
+ justify-content: center;
38
+ align-items: center;
39
+ user-select: none;
40
+ opacity: 1;
41
+ cursor: pointer;
42
+ color: var(--mantine-color-text);
43
+ }
44
+
45
+ ._calendarHeaderLevel_5kwje_32[data-static],
46
+ ._calendarHeaderControl_5kwje_33[data-static] {
47
+ cursor: default;
48
+ }
49
+
50
+ ._calendarHeaderLevel_5kwje_32:not(:disabled):not([data-disabled]):not([data-static]):hover,
51
+ ._calendarHeaderControl_5kwje_33:not(:disabled):not([data-disabled]):not([data-static]):hover {
52
+ background-color: var(--mantine-color-gray-light-hover);
53
+ }
54
+
55
+ ._calendarHeaderLevel_5kwje_32:disabled,
56
+ ._calendarHeaderLevel_5kwje_32[data-disabled],
57
+ ._calendarHeaderControl_5kwje_33:disabled,
58
+ ._calendarHeaderControl_5kwje_33[data-disabled] {
59
+ opacity: 0.2;
60
+ cursor: not-allowed;
61
+ }
62
+
63
+ ._calendarHeaderControl_5kwje_33 {
64
+ width: var(--dch-control-size);
65
+ }
66
+
67
+ ._calendarHeaderLevel_5kwje_32 {
68
+ flex: 1;
69
+ font-size: var(--mantine-font-size-sm);
70
+ font-weight: 500;
71
+ text-transform: capitalize;
72
+ }
73
+
74
+ ._calendarHeaderControlIcon_5kwje_74 {
75
+ width: 45%;
76
+ height: 45%;
77
+ }
78
+
79
+ ._calendarHeaderControlIcon_5kwje_74[data-direction='next'] {
80
+ transform: rotate(270deg);
81
+ }
82
+
83
+ ._calendarHeaderControlIcon_5kwje_74[data-direction='previous'] {
84
+ transform: rotate(90deg);
85
+ }
86
+
87
+ ._month_5kwje_87 {
88
+ table-layout: fixed;
89
+ border-collapse: separate;
90
+ border-spacing: 0;
91
+ }
92
+
93
+ ._month_5kwje_87[data-full-width] {
94
+ width: 100%;
95
+ }
96
+
97
+ ._monthRow_5kwje_97 {
98
+ border: 0;
99
+ }
100
+
101
+ ._monthCell_5kwje_101 {
102
+ padding: 0;
103
+ text-align: center;
104
+ }
105
+
106
+ ._monthCell_5kwje_101[data-with-spacing] {
107
+ padding: 0.125rem;
108
+ }
109
+
110
+ ._weekday_5kwje_110 {
111
+ height: 1.75rem;
112
+ color: var(--mantine-color-dimmed);
113
+ font-size: var(--mantine-font-size-xs);
114
+ font-weight: 500;
115
+ text-align: center;
116
+ }
117
+
118
+ ._weekday_5kwje_110[data-weekend] {
119
+ color: var(--mantine-color-red-filled);
120
+ }
121
+
122
+ ._weekNumber_5kwje_122 {
123
+ color: var(--mantine-color-dimmed);
124
+ font-size: var(--mantine-font-size-xs);
125
+ text-align: center;
126
+ }
127
+
128
+ ._day_5kwje_128 {
129
+ --day-size: 2.25rem;
130
+ position: relative;
131
+ display: inline-flex;
132
+ align-items: center;
133
+ justify-content: center;
134
+ width: var(--day-size);
135
+ height: var(--day-size);
136
+ border-radius: var(--mantine-radius-sm);
137
+ color: var(--mantine-color-text);
138
+ font-size: var(--mantine-font-size-sm);
139
+ line-height: 1;
140
+ user-select: none;
141
+ }
142
+
143
+ ._day_5kwje_128[data-full-width] {
144
+ width: 100%;
145
+ height: auto;
146
+ min-height: var(--day-size);
147
+ aspect-ratio: 1;
148
+ }
149
+
150
+ ._day_5kwje_128:not(:disabled):not([data-static]):not([data-selected]):not([data-in-range]):hover {
151
+ background-color: var(--mantine-color-gray-light-hover);
152
+ }
153
+
154
+ ._day_5kwje_128[data-outside] {
155
+ color: var(--mantine-color-dimmed);
156
+ opacity: 0.65;
157
+ }
158
+
159
+ ._day_5kwje_128[data-weekend] {
160
+ color: var(--mantine-color-red-filled);
161
+ }
162
+
163
+ ._day_5kwje_128[data-today][data-highlight-today] {
164
+ border: 1px solid var(--mantine-primary-color-filled);
165
+ }
166
+
167
+ ._day_5kwje_128[data-in-range] {
168
+ background-color: var(--mantine-primary-color-light);
169
+ color: var(--mantine-primary-color-light-color);
170
+ border-radius: 0;
171
+ }
172
+
173
+ ._day_5kwje_128[data-in-range]:not(:disabled):not([data-static]):hover {
174
+ background-color: var(--mantine-primary-color-light);
175
+ }
176
+
177
+ ._day_5kwje_128[data-selected],
178
+ ._day_5kwje_128[data-first-in-range],
179
+ ._day_5kwje_128[data-last-in-range] {
180
+ background-color: var(--mantine-primary-color-filled);
181
+ color: var(--mantine-color-white);
182
+ }
183
+
184
+ ._day_5kwje_128[data-selected]:not(:disabled):not([data-static]):hover {
185
+ background-color: var(--mantine-primary-color-filled-hover);
186
+ }
187
+
188
+ ._day_5kwje_128:disabled,
189
+ ._pickerControl_5kwje_189:disabled {
190
+ cursor: not-allowed;
191
+ color: var(--mantine-color-dimmed);
192
+ opacity: 0.55;
193
+ }
194
+
195
+ ._controlsGrid_5kwje_195[data-full-width] {
196
+ width: 100%;
197
+ }
198
+
199
+ ._pickerControl_5kwje_189 {
200
+ height: 2.25rem;
201
+ width: calc(2.25rem * 7 / 3 + 0.09375rem);
202
+ display: flex;
203
+ justify-content: center;
204
+ align-items: center;
205
+ padding-inline: var(--mantine-spacing-xs);
206
+ border-radius: var(--mantine-radius-sm);
207
+ color: var(--mantine-color-text);
208
+ font-size: var(--mantine-font-size-sm);
209
+ user-select: none;
210
+ background-color: transparent;
211
+ }
212
+
213
+ ._pickerControl_5kwje_189[data-full-width] {
214
+ width: 100%;
215
+ }
216
+
217
+ ._pickerControl_5kwje_189:not(:disabled):not([data-selected]):not([data-in-range]):hover {
218
+ background-color: var(--mantine-color-gray-light-hover);
219
+ }
220
+
221
+ ._pickerControl_5kwje_189[data-selected] {
222
+ background-color: var(--mantine-primary-color-filled);
223
+ color: var(--mantine-color-white);
224
+ }
225
+
226
+ ._pickerControl_5kwje_189[data-selected]:hover {
227
+ background-color: var(--mantine-primary-color-filled-hover);
228
+ }
229
+
230
+ ._pickerControl_5kwje_189[data-in-range] {
231
+ background-color: var(--mantine-primary-color-light-hover);
232
+ color: var(--mantine-primary-color-light-color);
233
+ }
234
+
235
+ ._pickerControl_5kwje_189[data-in-range]:hover {
236
+ background-color: var(--mantine-primary-color-light);
237
+ }
238
+
239
+ ._pickerControl_5kwje_189[data-first-in-range] {
240
+ border-radius: 0;
241
+ border-start-start-radius: var(--mantine-radius-default);
242
+ border-end-start-radius: var(--mantine-radius-default);
243
+ }
244
+
245
+ ._pickerControl_5kwje_189[data-last-in-range] {
246
+ border-radius: 0;
247
+ border-end-end-radius: var(--mantine-radius-default);
248
+ border-start-end-radius: var(--mantine-radius-default);
249
+ }
250
+
251
+ ._pickerControl_5kwje_189[data-first-in-range][data-last-in-range] {
252
+ border-radius: var(--mantine-radius-default);
253
+ }
254
+
255
+ ._timePicker_5kwje_255,
256
+ ._dateTimePicker_5kwje_256 {
257
+ width: max-content;
258
+ }
259
+
260
+ ._datePickerRoot_5kwje_260 {
261
+ display: flex;
262
+ font-size: var(--mantine-font-size-sm);
263
+ }
264
+
265
+ ._dateTimePicker_5kwje_256 {
266
+ display: grid;
267
+ gap: var(--mantine-spacing-sm);
268
+ }
269
+
270
+ ._timeWrapper_5kwje_270 {
271
+ display: flex;
272
+ align-items: stretch;
273
+ margin-top: var(--mantine-spacing-md);
274
+ }
275
+
276
+ ._timeInput_5kwje_276 {
277
+ flex: 1;
278
+ margin-inline-end: var(--mantine-spacing-md);
279
+ }
280
+
281
+ ._presetsList_5kwje_281 {
282
+ display: flex;
283
+ flex-direction: column;
284
+ border-inline-end: 1px solid var(--mantine-color-default-border);
285
+ padding-inline-end: 0.5em;
286
+ margin-inline-end: 0.5em;
287
+ }
288
+
289
+ ._presetButton_5kwje_289 {
290
+ padding: 0.52em 0.8em;
291
+ border-radius: var(--mantine-radius-default);
292
+ font-size: inherit;
293
+ white-space: nowrap;
294
+ }
295
+
296
+ ._presetButton_5kwje_289:hover {
297
+ background-color: var(--mantine-color-gray-light-hover);
298
+ }
299
+
300
+ ._timePickerPresetsGroup_5kwje_300 {
301
+ margin-bottom: var(--mantine-spacing-xs);
302
+ }
303
+
304
+ ._dropdown_5kwje_304 {
305
+ padding: var(--mantine-spacing-xs);
306
+ }
307
+
308
+ ._placeholder_5kwje_308 {
309
+ color: var(--mantine-color-placeholder);
310
+ }
311
+
312
+ ._timeGridControl_5kwje_312 {
313
+ text-align: center;
314
+ padding-inline: 1em;
315
+ padding-block: 0.25em;
316
+ border: 1px solid var(--mantine-color-default-border);
317
+ background-color: var(--mantine-color-default);
318
+ color: var(--mantine-color-default-color);
319
+ border-radius: var(--mantine-radius-default);
320
+ font-size: var(--mantine-font-size-sm);
321
+ }
322
+
323
+ ._timeGridControl_5kwje_312:not(:disabled):not([data-disabled]):not([data-active]):hover {
324
+ background-color: var(--mantine-color-default-hover);
325
+ }
326
+
327
+ ._timeGridControl_5kwje_312[data-active] {
328
+ background-color: var(--mantine-primary-color-filled);
329
+ color: var(--mantine-color-white);
330
+ border-color: transparent;
331
+ }
332
+
333
+ ._timeGridControl_5kwje_312[data-active]:not(:disabled):not([data-disabled]):hover {
334
+ background-color: var(--mantine-primary-color-filled-hover);
335
+ }
336
+
337
+ ._timeGridControl_5kwje_312:disabled,
338
+ ._timeGridControl_5kwje_312[data-disabled] {
339
+ opacity: 0.5;
340
+ cursor: not-allowed;
341
+ }
342
+
343
+ ._timePickerFieldsRoot_5kwje_343 {
344
+ display: flex;
345
+ align-items: center;
346
+ height: 100%;
347
+ overflow: hidden;
348
+ }
349
+
350
+ ._timePickerFieldsGroup_5kwje_350 {
351
+ display: flex;
352
+ align-items: center;
353
+ height: calc(var(--input-height) - 15px);
354
+ }
355
+
356
+ ._timePickerField_5kwje_343 {
357
+ width: calc(2ch + 0.3em);
358
+ caret-color: transparent;
359
+ font-variant-numeric: tabular-nums;
360
+ position: relative;
361
+ height: 100%;
362
+ line-height: 1;
363
+ padding-inline: 0.15em;
364
+ border: 0;
365
+ text-align: center;
366
+ text-align-last: center;
367
+ background-color: transparent;
368
+ color: var(--input-color);
369
+ border-radius: calc(0.125rem * var(--mantine-scale));
370
+ appearance: none;
371
+ }
372
+
373
+ ._timePickerField_5kwje_343[data-am-pm] {
374
+ width: auto;
375
+ }
376
+
377
+ ._timePickerField_5kwje_343:disabled {
378
+ cursor: not-allowed;
379
+ }
380
+
381
+ ._timePickerField_5kwje_343::selection {
382
+ background-color: transparent;
383
+ }
384
+
385
+ ._timePickerField_5kwje_343::placeholder {
386
+ opacity: 1;
387
+ color: inherit;
388
+ }
389
+
390
+ ._timePickerField_5kwje_343:focus {
391
+ background-color: var(--mantine-primary-color-filled);
392
+ color: var(--mantine-color-white);
393
+ outline: 0;
394
+ }
395
+
396
+ ._timePickerField_5kwje_343:focus::placeholder {
397
+ color: var(--mantine-color-white);
398
+ }
399
+
400
+ ._timePickerDropdown_5kwje_400 {
401
+ padding: calc(0.25rem * var(--mantine-scale));
402
+ }
403
+
404
+ ._timePickerControlsListGroup_5kwje_404 {
405
+ display: flex;
406
+ gap: calc(0.25rem * var(--mantine-scale));
407
+ }
408
+
409
+ ._timePickerControlsList_5kwje_404 {
410
+ display: flex;
411
+ flex-direction: column;
412
+ }
413
+
414
+ ._timePickerControl_5kwje_404 {
415
+ text-align: center;
416
+ min-width: 2.5em;
417
+ width: max-content;
418
+ height: 2em;
419
+ border-radius: var(--mantine-radius-default);
420
+ font-size: var(--mantine-font-size-sm);
421
+ }
422
+
423
+ ._timePickerControl_5kwje_404[data-active] {
424
+ background-color: var(--mantine-primary-color-filled);
425
+ color: var(--mantine-color-white);
426
+ }
427
+
428
+ ._timePickerControl_5kwje_404:not([data-active]):hover {
429
+ color: var(--mantine-color-bright);
430
+ background-color: var(--mantine-color-gray-light-hover);
431
+ }
432
+
433
+ ._miniCalendarRoot_5kwje_433 {
434
+ width: fit-content;
435
+ display: flex;
436
+ align-items: center;
437
+ font-size: var(--mantine-font-size-sm);
438
+ }
439
+
440
+ ._miniCalendarDays_5kwje_440 {
441
+ display: flex;
442
+ font-size: inherit;
443
+ }
444
+
445
+ ._miniCalendarDay_5kwje_440 {
446
+ display: flex;
447
+ min-width: 3em;
448
+ gap: 0.5em;
449
+ font-size: inherit;
450
+ flex-direction: column;
451
+ align-items: center;
452
+ line-height: 1;
453
+ padding: 0.75em;
454
+ border-radius: var(--mantine-radius-default);
455
+ }
456
+
457
+ ._miniCalendarDay_5kwje_440[data-selected] {
458
+ color: var(--mantine-primary-color-contrast);
459
+ background-color: var(--mantine-primary-color-filled);
460
+ }
461
+
462
+ ._miniCalendarDay_5kwje_440[data-selected]:not([data-disabled]):hover {
463
+ background-color: var(--mantine-primary-color-filled-hover);
464
+ }
465
+
466
+ ._miniCalendarDay_5kwje_440[data-disabled] {
467
+ opacity: 0.3;
468
+ cursor: not-allowed;
469
+ }
470
+
471
+ ._miniCalendarDay_5kwje_440:not([data-disabled]):not([data-selected]):hover {
472
+ background-color: var(--mantine-color-gray-light-hover);
473
+ }
474
+
475
+ ._miniCalendarDayMonth_5kwje_475 {
476
+ font-size: 0.75em;
477
+ font-weight: var(--mantine-font-weight-medium);
478
+ opacity: 0.65;
479
+ }
480
+
481
+ ._miniCalendarDayNumber_5kwje_481 {
482
+ font-size: 0.9em;
483
+ font-weight: var(--mantine-font-weight-medium);
484
+ }
485
+
486
+ ._miniCalendarControl_5kwje_486 {
487
+ align-self: stretch;
488
+ font-size: inherit;
489
+ width: 2em;
490
+ border-radius: var(--mantine-radius-default);
491
+ display: flex;
492
+ align-items: center;
493
+ justify-content: center;
494
+ color: var(--mantine-color-bright);
495
+ }
496
+
497
+ ._miniCalendarControl_5kwje_486[data-disabled] {
498
+ opacity: 0.3;
499
+ cursor: not-allowed;
500
+ }
501
+
502
+ ._miniCalendarControl_5kwje_486:not([data-disabled]):hover {
503
+ background-color: var(--mantine-color-gray-light-hover);
504
+ }
505
+
506
+ ._miniCalendarControl_5kwje_486 [data-chevron] {
507
+ font-size: inherit;
508
+ width: 60%;
509
+ }
510
+
511
+ ._miniCalendarControl_5kwje_486[data-direction='previous'] [data-chevron] {
512
+ transform: rotate(90deg);
513
+ }
514
+
515
+ ._miniCalendarControl_5kwje_486[data-direction='next'] [data-chevron] {
516
+ transform: rotate(-90deg);
517
+ }
518
+ /*$vite$:1*/