lizaui 9.0.24 → 9.0.25
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/dist/calendar/index.cjs.js +118 -25
- package/dist/calendar/index.cjs.js.map +1 -1
- package/dist/calendar/index.es.js +118 -25
- package/dist/calendar/index.es.js.map +1 -1
- package/dist/components/calendar/date-picker/date-picker.d.ts.map +1 -1
- package/dist/components/calendar/date-picker/date-picker.style.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -275,7 +275,7 @@ const CalendarStyle = dt.div`
|
|
|
275
275
|
|
|
276
276
|
.react-date-picker__wrapper,
|
|
277
277
|
.react-daterange-picker__wrapper {
|
|
278
|
-
|
|
278
|
+
min-height: var(--input-default);
|
|
279
279
|
padding-right: 8px;
|
|
280
280
|
padding-left: 8px;
|
|
281
281
|
border: 1px solid var(--input);
|
|
@@ -391,31 +391,50 @@ const CalendarStyle = dt.div`
|
|
|
391
391
|
|
|
392
392
|
/* =========================== estilos para react-calendar ================== */
|
|
393
393
|
.react-calendar {
|
|
394
|
-
${({ showdoubleview
|
|
394
|
+
${({ showdoubleview }) => {
|
|
395
395
|
if (showdoubleview === "true") {
|
|
396
396
|
return lt``;
|
|
397
397
|
} else {
|
|
398
398
|
return lt`
|
|
399
|
-
|
|
400
|
-
|
|
399
|
+
/* Forzamos un layout compacto de 256px para vista simple */
|
|
400
|
+
width: 256px;
|
|
401
|
+
min-width: 256px;
|
|
402
|
+
`;
|
|
401
403
|
}
|
|
402
404
|
}}
|
|
403
405
|
border: none;
|
|
404
|
-
padding:
|
|
406
|
+
padding: 8px; /* Compactar padding sin cambiar colores ni fuentes */
|
|
405
407
|
font-family: var(--font-family-base);
|
|
406
|
-
min-width: 300px;
|
|
407
408
|
border-radius: calc(var(--radius) - 2px);
|
|
408
409
|
background-color: var(--color-content1-default);
|
|
410
|
+
/* Variable para tamaño de celda compacto */
|
|
411
|
+
--cal-cell-size: 32px;
|
|
409
412
|
}
|
|
410
413
|
|
|
411
414
|
/* .react-calendar--doubleView {
|
|
412
415
|
width: ${({ widthcalendar }) => `${widthcalendar}px`};
|
|
413
416
|
} */
|
|
414
417
|
|
|
418
|
+
.react-calendar--doubleView{
|
|
419
|
+
--cal-cell-size: 34px !important;
|
|
420
|
+
width: 512px !important;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.react-calendar--doubleView .react-calendar__month-view__weekdays{
|
|
424
|
+
gap: 0px;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.react-calendar--doubleView .react-calendar__month-view__days {
|
|
428
|
+
gap: 0px;
|
|
429
|
+
}
|
|
430
|
+
|
|
415
431
|
.react-calendar__navigation {
|
|
416
|
-
height:
|
|
417
|
-
margin-bottom:
|
|
418
|
-
gap:
|
|
432
|
+
height: 40px; /* Más compacto */
|
|
433
|
+
margin-bottom: 4px;
|
|
434
|
+
gap: 4px;
|
|
435
|
+
/* Alinear y centrar */
|
|
436
|
+
display: flex;
|
|
437
|
+
align-items: center;
|
|
419
438
|
}
|
|
420
439
|
.react-calendar__navigation__prev2-button,
|
|
421
440
|
.react-calendar__navigation__next2-button {
|
|
@@ -424,18 +443,34 @@ const CalendarStyle = dt.div`
|
|
|
424
443
|
|
|
425
444
|
.react-calendar__navigation__next-button,
|
|
426
445
|
.react-calendar__navigation__prev-button {
|
|
427
|
-
font-size: 22px;
|
|
446
|
+
font-size: 22px; /* Conserva tamaño del icono */
|
|
428
447
|
color: var(--color-default-900);
|
|
448
|
+
width: var(--cal-cell-size);
|
|
449
|
+
height: var(--cal-cell-size);
|
|
450
|
+
padding: 0;
|
|
451
|
+
display: flex;
|
|
452
|
+
align-items: center;
|
|
453
|
+
justify-content: center;
|
|
454
|
+
border-radius: 8px;
|
|
429
455
|
}
|
|
430
456
|
|
|
431
457
|
.react-calendar__navigation__label {
|
|
432
|
-
border-radius:
|
|
458
|
+
border-radius: 8px;
|
|
459
|
+
flex: 1;
|
|
460
|
+
height: var(--cal-cell-size);
|
|
461
|
+
display: flex;
|
|
462
|
+
align-items: center;
|
|
463
|
+
justify-content: center;
|
|
464
|
+
padding: 0 4px;
|
|
465
|
+
font-size: 14px;
|
|
466
|
+
font-weight: 600;
|
|
467
|
+
color: var(--color-default-900);
|
|
433
468
|
}
|
|
434
469
|
|
|
435
470
|
.react-calendar__navigation__label span {
|
|
436
471
|
text-transform: capitalize;
|
|
437
|
-
color: var(--color-default-
|
|
438
|
-
font-weight:
|
|
472
|
+
color: var(--color-default-500);
|
|
473
|
+
font-weight: 500;
|
|
439
474
|
font-size: 14px;
|
|
440
475
|
}
|
|
441
476
|
|
|
@@ -451,7 +486,12 @@ const CalendarStyle = dt.div`
|
|
|
451
486
|
.react-calendar__month-view__weekdays__weekday {
|
|
452
487
|
text-transform: capitalize;
|
|
453
488
|
font-weight: 500;
|
|
454
|
-
color: var(--color-
|
|
489
|
+
color: var(--color-default-400);
|
|
490
|
+
display: flex;
|
|
491
|
+
align-items: center;
|
|
492
|
+
justify-content: center;
|
|
493
|
+
height: var(--cal-cell-size);
|
|
494
|
+
width: var(--cal-cell-size);
|
|
455
495
|
}
|
|
456
496
|
.react-calendar__month-view__weekdays__weekday abbr {
|
|
457
497
|
text-decoration: none;
|
|
@@ -465,7 +505,7 @@ const CalendarStyle = dt.div`
|
|
|
465
505
|
font-weight: bold;
|
|
466
506
|
}
|
|
467
507
|
.react-calendar__month-view__days__day--weekend {
|
|
468
|
-
color: var(--color-
|
|
508
|
+
color: var(--color-danger-default);
|
|
469
509
|
}
|
|
470
510
|
.react-calendar__month-view__days__day--neighboringMonth {
|
|
471
511
|
color: var(--color-gray-300);
|
|
@@ -476,11 +516,52 @@ const CalendarStyle = dt.div`
|
|
|
476
516
|
padding: 2em 0.5em;
|
|
477
517
|
}
|
|
478
518
|
.react-calendar__tile {
|
|
479
|
-
font-size: 14px;
|
|
480
|
-
line-height:
|
|
519
|
+
font-size: 14px; /* No cambiamos tipografía */
|
|
520
|
+
line-height: 1; /* Permite centrar vertical con flex */
|
|
481
521
|
font-weight: 500;
|
|
522
|
+
width: var(--cal-cell-size);
|
|
523
|
+
height: var(--cal-cell-size);
|
|
524
|
+
padding: 0;
|
|
525
|
+
display: flex;
|
|
526
|
+
align-items: center;
|
|
527
|
+
justify-content: center;
|
|
528
|
+
border-radius: 6px; /* Moderno sin afectar colores */
|
|
529
|
+
flex: 0 0 auto; /* Evitar stretching */
|
|
530
|
+
/* Transición suave para cambios de fondo, color y radio */
|
|
531
|
+
transition: background-color 0.18s ease, color 0.18s ease, border-radius 0.25s ease, transform 0.18s ease;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
/* Suavizar botones navegación (heredan selector button) */
|
|
535
|
+
.react-calendar__navigation button {
|
|
536
|
+
transition: background-color 0.18s ease, color 0.18s ease, border-radius 0.25s ease;
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
/* Hover general (sin tocar colores definidos en variantes) añadimos ligera elevación */
|
|
540
|
+
.react-calendar__tile:enabled:hover,
|
|
541
|
+
.react-calendar__tile:enabled:focus {
|
|
542
|
+
transform: translateY(-2px);
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
/* Evitar salto al active manteniendo animación */
|
|
546
|
+
.react-calendar__tile--active {
|
|
547
|
+
transition: background-color 0.18s ease, color 0.18s ease, border-radius 0.25s ease;
|
|
482
548
|
}
|
|
483
549
|
|
|
550
|
+
/* Grid compacto SOLO cuando no es doble vista */
|
|
551
|
+
${({ showdoubleview }) => showdoubleview === "false" && lt`
|
|
552
|
+
.react-calendar__month-view__weekdays,
|
|
553
|
+
.react-calendar__month-view__days {
|
|
554
|
+
display: grid !important;
|
|
555
|
+
grid-template-columns: repeat(7, var(--cal-cell-size));
|
|
556
|
+
justify-content: center;
|
|
557
|
+
gap: 2px; /* Sin gaps para exactitud */
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
.react-calendar__month-view__days {
|
|
561
|
+
margin-top: 0;
|
|
562
|
+
}
|
|
563
|
+
`}
|
|
564
|
+
|
|
484
565
|
.react-calendar__tile:disabled {
|
|
485
566
|
text-decoration: line-through;
|
|
486
567
|
color: var(--color-gray-300);
|
|
@@ -499,8 +580,19 @@ const CalendarStyle = dt.div`
|
|
|
499
580
|
align-items: center;
|
|
500
581
|
justify-content: center;
|
|
501
582
|
border-radius: 50%;
|
|
583
|
+
width: var(--cal-cell-size);
|
|
584
|
+
height: var(--cal-cell-size);
|
|
585
|
+
min-width: var(--cal-cell-size);
|
|
586
|
+
max-width: var(--cal-cell-size);
|
|
587
|
+
min-height: var(--cal-cell-size);
|
|
588
|
+
max-height: var(--cal-cell-size);
|
|
589
|
+
color: hsl(var(--color-default-400) / 1);
|
|
502
590
|
}
|
|
503
591
|
|
|
592
|
+
.react-calendar__year-view__months__month{
|
|
593
|
+
border-radius: 8px !important;
|
|
594
|
+
}
|
|
595
|
+
|
|
504
596
|
${({ color }) => {
|
|
505
597
|
switch (color) {
|
|
506
598
|
case "primary":
|
|
@@ -510,19 +602,19 @@ const CalendarStyle = dt.div`
|
|
|
510
602
|
background-color: var(--color-primary-100);
|
|
511
603
|
|
|
512
604
|
color: var(--color-primary-500);
|
|
513
|
-
border-radius:
|
|
605
|
+
border-radius: 50%;
|
|
514
606
|
}
|
|
515
607
|
|
|
516
608
|
.react-calendar .react-calendar__tile--now {
|
|
517
|
-
border-radius:
|
|
609
|
+
border-radius: 50%;
|
|
518
610
|
background-color: var(--color-primary-100);
|
|
519
611
|
color: var(--color-primary-500);
|
|
520
612
|
}
|
|
521
613
|
|
|
522
614
|
.react-calendar__tile.react-calendar__tile--active.react-calendar__tile--range.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd {
|
|
523
|
-
background-color: var(--color-primary
|
|
615
|
+
background-color: var(--color-primary);
|
|
524
616
|
color: white;
|
|
525
|
-
border-radius:
|
|
617
|
+
border-radius: 50%;
|
|
526
618
|
}
|
|
527
619
|
|
|
528
620
|
/* .react-calendar__tile--hasActive.react-calendar__year-view__months__month, */
|
|
@@ -538,7 +630,7 @@ const CalendarStyle = dt.div`
|
|
|
538
630
|
.react-calendar .react-calendar__tile--hasActive.react-calendar__tile--rangeStart.react-calendar__year-view__months__month,
|
|
539
631
|
.react-calendar__tile--hasActive.react-calendar__tile--rangeStart.react-calendar__decade-view__years__year,
|
|
540
632
|
.react-calendar__tile--hasActive.react-calendar__tile--rangeStart.react-calendar__century-view__decades__decade {
|
|
541
|
-
background-color: var(--color-primary
|
|
633
|
+
background-color: var(--color-primary);
|
|
542
634
|
color: white;
|
|
543
635
|
|
|
544
636
|
border-radius: 8px 0 0 8px;
|
|
@@ -554,7 +646,7 @@ const CalendarStyle = dt.div`
|
|
|
554
646
|
.react-calendar__tile.react-calendar__tile--hasActive.react-calendar__tile--range.react-calendar__tile--rangeEnd.react-calendar__year-view__months__month,
|
|
555
647
|
.react-calendar__tile--hasActive.react-calendar__tile--rangeEnd.react-calendar__decade-view__years__year,
|
|
556
648
|
.react-calendar__tile--hasActive.react-calendar__tile--rangeEnd.react-calendar__century-view__decades__decade {
|
|
557
|
-
background-color: var(--color-primary
|
|
649
|
+
background-color: var(--color-primary);
|
|
558
650
|
color: white;
|
|
559
651
|
|
|
560
652
|
border-radius: 0 8px 8px 0;
|
|
@@ -728,6 +820,7 @@ const CalendarPicker = ({
|
|
|
728
820
|
containerStyle: {
|
|
729
821
|
zIndex: "100"
|
|
730
822
|
},
|
|
823
|
+
align: "start",
|
|
731
824
|
content: /* @__PURE__ */ jsxs(
|
|
732
825
|
CalendarStyle,
|
|
733
826
|
{
|
|
@@ -755,8 +848,8 @@ const CalendarPicker = ({
|
|
|
755
848
|
tileDisabled,
|
|
756
849
|
selectRange: type === "date-range-picker",
|
|
757
850
|
returnValue: type === "date-range-picker" ? "range" : "start",
|
|
758
|
-
prevLabel: /* @__PURE__ */ jsx(FaArrowLeft, { className: "w-4 h-
|
|
759
|
-
nextLabel: /* @__PURE__ */ jsx(FaArrowRight, { className: "w-4 h-
|
|
851
|
+
prevLabel: /* @__PURE__ */ jsx(FaArrowLeft, { className: "w-4 h-4 text-default-400" }),
|
|
852
|
+
nextLabel: /* @__PURE__ */ jsx(FaArrowRight, { className: "w-4 h-4 text-default-400" }),
|
|
760
853
|
tileContent
|
|
761
854
|
}
|
|
762
855
|
),
|