@nomideusz/svelte-calendar 1.0.0 → 1.1.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/dist/calendar/Calendar.svelte +37 -43
- package/dist/core/index.d.ts +1 -1
- package/dist/core/index.js +1 -1
- package/dist/core/locale.d.ts +5 -0
- package/dist/core/locale.js +9 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/primitives/EmptySlot.svelte +2 -1
- package/dist/primitives/EventBlock.svelte +4 -2
- package/dist/primitives/NowIndicator.svelte +2 -1
- package/dist/primitives/TimeGutter.svelte +4 -2
- package/dist/text-fit.js +6 -1
- package/dist/theme/auto.js +10 -7
- package/dist/theme/presets.d.ts +13 -7
- package/dist/theme/presets.js +27 -18
- package/dist/views/agenda/AgendaDay.svelte +147 -115
- package/dist/views/agenda/AgendaWeek.svelte +106 -90
- package/dist/views/mobile/MobileDay.svelte +83 -63
- package/dist/views/mobile/MobileWeek.svelte +42 -34
- package/dist/views/month/MonthGrid.svelte +21 -17
- package/dist/views/planner/PlannerScroll.svelte +86 -87
- package/dist/views/planner/PlannerWeek.svelte +160 -91
- package/package.json +6 -6
- package/widget/widget.js +387 -380
|
@@ -585,91 +585,99 @@ const weekDays = $derived.by(() => {
|
|
|
585
585
|
gap: 4px;
|
|
586
586
|
padding: 4px 14px 6px;
|
|
587
587
|
}
|
|
588
|
+
/* An all-day event is a solid band in its colour — no tint, no dot, no pill. */
|
|
588
589
|
.ag-allday-chip {
|
|
589
590
|
display: flex;
|
|
590
591
|
align-items: center;
|
|
591
592
|
gap: 4px;
|
|
592
593
|
padding: 2px 8px;
|
|
593
|
-
border-radius:
|
|
594
|
-
|
|
595
|
-
|
|
594
|
+
border-radius: 0;
|
|
595
|
+
border: none;
|
|
596
|
+
background: var(--ev-color);
|
|
597
|
+
color: var(--dt-btn-text, #fff);
|
|
596
598
|
cursor: pointer;
|
|
597
|
-
transition: background 0.15s, border-color 0.15s;
|
|
598
599
|
}
|
|
599
600
|
.ag-allday-chip:hover,
|
|
600
601
|
.ag-allday-chip:active {
|
|
601
|
-
|
|
602
|
-
border-color: color-mix(in srgb, var(--ev-color) 30%, transparent);
|
|
602
|
+
filter: brightness(1.08);
|
|
603
603
|
}
|
|
604
604
|
.ag-allday-chip:focus-visible {
|
|
605
605
|
outline: none;
|
|
606
|
-
box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
|
|
606
|
+
box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #2563eb);
|
|
607
607
|
}
|
|
608
608
|
.ag-allday-chip--selected {
|
|
609
|
-
|
|
610
|
-
background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, var(--dt-bg, #ffffff)));
|
|
609
|
+
box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);
|
|
611
610
|
}
|
|
612
611
|
.ag-allday-dot {
|
|
613
|
-
|
|
614
|
-
height: 5px;
|
|
615
|
-
border-radius: 50%;
|
|
616
|
-
background: var(--ev-color);
|
|
617
|
-
flex-shrink: 0;
|
|
612
|
+
display: none;
|
|
618
613
|
}
|
|
619
614
|
.ag-allday-title {
|
|
620
615
|
font: 500 0.7rem/1.2 var(--dt-sans, system-ui, sans-serif);
|
|
621
|
-
color:
|
|
616
|
+
color: inherit;
|
|
622
617
|
white-space: nowrap;
|
|
623
618
|
}
|
|
624
619
|
.ag-allday-span {
|
|
625
|
-
font: 500 10px/1.2 var(--dt-
|
|
626
|
-
|
|
620
|
+
font: 500 10px/1.2 var(--dt-sans, system-ui, sans-serif);
|
|
621
|
+
font-variant-numeric: tabular-nums;
|
|
622
|
+
color: inherit;
|
|
623
|
+
opacity: 0.8;
|
|
627
624
|
white-space: nowrap;
|
|
628
625
|
}
|
|
629
626
|
|
|
630
627
|
/* ═══ Shared: event card ═══ */
|
|
628
|
+
/* Paper, not a tinted card: a 3px start bar in the event colour, a
|
|
629
|
+
hairline rule beneath, ink text. Hover is a wash, selection a ring. */
|
|
631
630
|
.ag-card {
|
|
631
|
+
position: relative;
|
|
632
632
|
display: flex;
|
|
633
633
|
align-items: stretch;
|
|
634
|
-
border-radius:
|
|
635
|
-
background:
|
|
636
|
-
border:
|
|
634
|
+
border-radius: 0;
|
|
635
|
+
background: transparent;
|
|
636
|
+
border: none;
|
|
637
|
+
border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.3));
|
|
637
638
|
overflow: hidden;
|
|
638
639
|
cursor: pointer;
|
|
639
|
-
transition: background 150ms,
|
|
640
|
+
transition: background 150ms, box-shadow 150ms;
|
|
641
|
+
}
|
|
642
|
+
.ag-card::before {
|
|
643
|
+
content: '';
|
|
644
|
+
position: absolute;
|
|
645
|
+
left: 0;
|
|
646
|
+
top: 0;
|
|
647
|
+
bottom: 0;
|
|
648
|
+
width: 3px;
|
|
649
|
+
background: var(--ev-color);
|
|
640
650
|
}
|
|
641
651
|
.ag-card:hover,
|
|
642
652
|
.ag-card:active {
|
|
643
|
-
background:
|
|
644
|
-
border-color: color-mix(in srgb, var(--ev-color) 30%, transparent);
|
|
653
|
+
background: var(--dt-hover, rgba(0, 0, 0, 0.04));
|
|
645
654
|
}
|
|
646
655
|
.ag-card:focus-visible {
|
|
647
656
|
outline: none;
|
|
648
657
|
box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
|
|
649
658
|
}
|
|
650
659
|
.ag-card--selected {
|
|
651
|
-
|
|
652
|
-
background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, var(--dt-bg, #ffffff)));
|
|
653
|
-
}
|
|
654
|
-
.ag-card--cancelled {
|
|
655
|
-
opacity: 0.5;
|
|
660
|
+
box-shadow: inset 0 0 0 1px var(--ev-color);
|
|
656
661
|
}
|
|
657
662
|
.ag-card--cancelled .ag-card-title {
|
|
658
663
|
text-decoration: line-through;
|
|
664
|
+
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
659
665
|
}
|
|
660
|
-
.ag-card--
|
|
661
|
-
|
|
662
|
-
|
|
666
|
+
.ag-card--cancelled::before,
|
|
667
|
+
.ag-card--full::before {
|
|
668
|
+
opacity: 0.45;
|
|
663
669
|
}
|
|
664
|
-
.ag-card--
|
|
665
|
-
|
|
670
|
+
.ag-card--tentative .ag-card-title,
|
|
671
|
+
.ag-card--limited .ag-card-title,
|
|
672
|
+
.ag-card--full .ag-card-title {
|
|
673
|
+
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
666
674
|
}
|
|
667
|
-
.ag-card--
|
|
668
|
-
|
|
669
|
-
|
|
675
|
+
.ag-card--tentative::before,
|
|
676
|
+
.ag-card--limited::before {
|
|
677
|
+
background: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);
|
|
670
678
|
}
|
|
671
679
|
.ag-card-body {
|
|
672
|
-
padding: 7px 10px;
|
|
680
|
+
padding: 7px 10px 7px 13px;
|
|
673
681
|
display: flex;
|
|
674
682
|
flex-direction: column;
|
|
675
683
|
gap: 2px;
|
|
@@ -678,7 +686,8 @@ const weekDays = $derived.by(() => {
|
|
|
678
686
|
}
|
|
679
687
|
.ag-card-title {
|
|
680
688
|
font-size: 13px;
|
|
681
|
-
font-weight:
|
|
689
|
+
font-weight: 500;
|
|
690
|
+
color: var(--dt-text, rgba(0, 0, 0, 0.87));
|
|
682
691
|
line-height: 1.3;
|
|
683
692
|
word-break: break-word;
|
|
684
693
|
flex: 1;
|
|
@@ -694,7 +703,8 @@ const weekDays = $derived.by(() => {
|
|
|
694
703
|
align-items: center;
|
|
695
704
|
font-size: 11px;
|
|
696
705
|
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
697
|
-
font-family: var(--dt-
|
|
706
|
+
font-family: var(--dt-sans, system-ui, sans-serif);
|
|
707
|
+
font-variant-numeric: tabular-nums;
|
|
698
708
|
line-height: 1;
|
|
699
709
|
}
|
|
700
710
|
.ag-card-dur {
|
|
@@ -704,8 +714,8 @@ const weekDays = $derived.by(() => {
|
|
|
704
714
|
.ag-card-eta {
|
|
705
715
|
margin-left: auto;
|
|
706
716
|
font-size: 11px;
|
|
707
|
-
font-weight:
|
|
708
|
-
color:
|
|
717
|
+
font-weight: 500;
|
|
718
|
+
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
709
719
|
letter-spacing: 0.02em;
|
|
710
720
|
}
|
|
711
721
|
.ag-card-sub {
|
|
@@ -724,17 +734,20 @@ const weekDays = $derived.by(() => {
|
|
|
724
734
|
flex-wrap: wrap;
|
|
725
735
|
}
|
|
726
736
|
.ag-card-tag {
|
|
727
|
-
font: 500
|
|
728
|
-
|
|
729
|
-
|
|
737
|
+
font: 500 10.5px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
738
|
+
text-transform: uppercase;
|
|
739
|
+
letter-spacing: 0.04em;
|
|
740
|
+
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
741
|
+
background: transparent;
|
|
742
|
+
border: 1px solid var(--dt-border-day, rgba(0, 0, 0, 0.6));
|
|
730
743
|
padding: 2px 5px;
|
|
731
|
-
border-radius:
|
|
744
|
+
border-radius: 0;
|
|
732
745
|
white-space: nowrap;
|
|
733
746
|
}
|
|
734
747
|
.ag-card-progress {
|
|
735
748
|
height: 3px;
|
|
736
749
|
background: var(--dt-border, rgba(0, 0, 0, 0.08));
|
|
737
|
-
border-radius:
|
|
750
|
+
border-radius: 0;
|
|
738
751
|
overflow: hidden;
|
|
739
752
|
margin-top: 2px;
|
|
740
753
|
}
|
|
@@ -742,7 +755,7 @@ const weekDays = $derived.by(() => {
|
|
|
742
755
|
height: 100%;
|
|
743
756
|
width: 100%;
|
|
744
757
|
background: var(--ev-color, var(--dt-accent));
|
|
745
|
-
border-radius:
|
|
758
|
+
border-radius: 0;
|
|
746
759
|
transform-origin: left;
|
|
747
760
|
transition: transform 1s linear;
|
|
748
761
|
}
|
|
@@ -824,21 +837,13 @@ const weekDays = $derived.by(() => {
|
|
|
824
837
|
}
|
|
825
838
|
.ag-wday-badge {
|
|
826
839
|
font-size: 10px;
|
|
827
|
-
font-weight:
|
|
840
|
+
font-weight: 500;
|
|
828
841
|
letter-spacing: 0.08em;
|
|
829
842
|
text-transform: uppercase;
|
|
830
843
|
color: var(--dt-accent, #2563eb);
|
|
831
|
-
background: color-mix(in srgb, var(--dt-accent, #2563eb) 12%, transparent);
|
|
832
|
-
padding: 2px 7px;
|
|
833
|
-
border-radius: 3px;
|
|
834
844
|
}
|
|
835
845
|
.ag-wday-badge--muted {
|
|
836
846
|
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
837
|
-
background: color-mix(
|
|
838
|
-
in srgb,
|
|
839
|
-
var(--dt-text-2, rgba(0, 0, 0, 0.54)) 10%,
|
|
840
|
-
transparent
|
|
841
|
-
);
|
|
842
847
|
}
|
|
843
848
|
.ag-wday-name {
|
|
844
849
|
font-size: 13px;
|
|
@@ -847,7 +852,8 @@ const weekDays = $derived.by(() => {
|
|
|
847
852
|
}
|
|
848
853
|
.ag-wday-date {
|
|
849
854
|
font-size: 11px;
|
|
850
|
-
font-family: var(--dt-
|
|
855
|
+
font-family: var(--dt-sans, system-ui, sans-serif);
|
|
856
|
+
font-variant-numeric: tabular-nums;
|
|
851
857
|
color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
|
|
852
858
|
line-height: 1.2;
|
|
853
859
|
}
|
|
@@ -939,44 +945,48 @@ const weekDays = $derived.by(() => {
|
|
|
939
945
|
.ag-wday-compact {
|
|
940
946
|
padding: 0 20px 8px;
|
|
941
947
|
}
|
|
948
|
+
/* A compact row: 3px start bar, hairline beneath, ink text. */
|
|
942
949
|
.ag-compact {
|
|
950
|
+
position: relative;
|
|
943
951
|
display: flex;
|
|
944
952
|
align-items: baseline;
|
|
945
953
|
gap: 6px;
|
|
946
|
-
padding: 3px 0;
|
|
954
|
+
padding: 3px 0 3px 9px;
|
|
955
|
+
border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.3));
|
|
947
956
|
cursor: pointer;
|
|
948
957
|
min-width: 0;
|
|
949
958
|
width: 100%;
|
|
950
959
|
}
|
|
960
|
+
.ag-compact::before {
|
|
961
|
+
content: '';
|
|
962
|
+
position: absolute;
|
|
963
|
+
left: 0;
|
|
964
|
+
top: 0;
|
|
965
|
+
bottom: 0;
|
|
966
|
+
width: 3px;
|
|
967
|
+
background: var(--ev-color, var(--dt-accent));
|
|
968
|
+
}
|
|
951
969
|
.ag-compact--selected {
|
|
952
|
-
|
|
953
|
-
border-radius: 4px;
|
|
954
|
-
/* The highlight bleeds into the gutter via a spread shadow — zero
|
|
955
|
-
layout impact, so nothing shifts or clips even when the host
|
|
956
|
-
reduces the gutters below the bleed width. */
|
|
957
|
-
box-shadow: 0 0 0 6px color-mix(in srgb, var(--ev-color) 10%, transparent);
|
|
970
|
+
box-shadow: inset 0 0 0 1px var(--ev-color);
|
|
958
971
|
}
|
|
959
972
|
.ag-compact:hover .ag-compact-title,
|
|
960
973
|
.ag-compact:active .ag-compact-title {
|
|
961
974
|
color: var(--dt-text);
|
|
962
975
|
}
|
|
976
|
+
.ag-compact:hover,
|
|
963
977
|
.ag-compact:active {
|
|
964
|
-
background:
|
|
965
|
-
border-radius: 4px;
|
|
978
|
+
background: var(--dt-hover, rgba(0, 0, 0, 0.04));
|
|
966
979
|
}
|
|
967
980
|
.ag-compact:focus-visible {
|
|
968
981
|
outline: none;
|
|
969
982
|
box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
|
|
970
|
-
border-radius: 4px;
|
|
971
983
|
}
|
|
972
|
-
/* The time label doubles as the class-color signal (replaces the old
|
|
973
|
-
dot): the event color mixed toward the text color, so it stays
|
|
974
|
-
legible on any palette and costs zero horizontal space. */
|
|
975
984
|
.ag-compact-time {
|
|
976
985
|
font-size: 11px;
|
|
977
|
-
font-family: var(--dt-
|
|
978
|
-
font-
|
|
979
|
-
|
|
986
|
+
font-family: var(--dt-sans, system-ui, sans-serif);
|
|
987
|
+
font-variant-numeric: tabular-nums;
|
|
988
|
+
font-weight: 400;
|
|
989
|
+
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
980
990
|
min-width: 40px;
|
|
981
991
|
flex-shrink: 0;
|
|
982
992
|
white-space: nowrap;
|
|
@@ -1010,7 +1020,7 @@ const weekDays = $derived.by(() => {
|
|
|
1010
1020
|
.ag-compact-title {
|
|
1011
1021
|
font-size: 12px;
|
|
1012
1022
|
font-weight: 500;
|
|
1013
|
-
color: var(--dt-text
|
|
1023
|
+
color: var(--dt-text, rgba(0, 0, 0, 0.87));
|
|
1014
1024
|
flex: 1;
|
|
1015
1025
|
/* The title is the row's identity — never let subtitle/tags/duration
|
|
1016
1026
|
squeeze it out on narrow screens (min-width: 0 resolves to 0px). */
|
|
@@ -1023,7 +1033,8 @@ const weekDays = $derived.by(() => {
|
|
|
1023
1033
|
}
|
|
1024
1034
|
.ag-compact-dur {
|
|
1025
1035
|
font-size: 10px;
|
|
1026
|
-
font-family: var(--dt-
|
|
1036
|
+
font-family: var(--dt-sans, system-ui, sans-serif);
|
|
1037
|
+
font-variant-numeric: tabular-nums;
|
|
1027
1038
|
color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
|
|
1028
1039
|
flex-shrink: 0;
|
|
1029
1040
|
white-space: nowrap;
|
|
@@ -1050,27 +1061,32 @@ const weekDays = $derived.by(() => {
|
|
|
1050
1061
|
text-overflow: ellipsis;
|
|
1051
1062
|
max-width: 100px;
|
|
1052
1063
|
}
|
|
1053
|
-
.ag-compact--cancelled {
|
|
1054
|
-
opacity: 0.5;
|
|
1055
|
-
}
|
|
1056
1064
|
.ag-compact--cancelled .ag-compact-title {
|
|
1057
1065
|
text-decoration: line-through;
|
|
1066
|
+
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
1058
1067
|
}
|
|
1059
|
-
.ag-compact--
|
|
1060
|
-
|
|
1068
|
+
.ag-compact--cancelled::before,
|
|
1069
|
+
.ag-compact--full::before {
|
|
1070
|
+
opacity: 0.45;
|
|
1061
1071
|
}
|
|
1062
|
-
.ag-compact--
|
|
1063
|
-
|
|
1072
|
+
.ag-compact--tentative .ag-compact-title,
|
|
1073
|
+
.ag-compact--limited .ag-compact-title,
|
|
1074
|
+
.ag-compact--full .ag-compact-title {
|
|
1075
|
+
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
1064
1076
|
}
|
|
1065
|
-
.ag-compact--
|
|
1066
|
-
|
|
1077
|
+
.ag-compact--tentative::before,
|
|
1078
|
+
.ag-compact--limited::before {
|
|
1079
|
+
background: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);
|
|
1067
1080
|
}
|
|
1068
1081
|
.ag-compact-tag {
|
|
1069
|
-
font: 500
|
|
1070
|
-
|
|
1071
|
-
|
|
1082
|
+
font: 500 10.5px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
1083
|
+
text-transform: uppercase;
|
|
1084
|
+
letter-spacing: 0.04em;
|
|
1085
|
+
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
1086
|
+
background: transparent;
|
|
1087
|
+
border: 1px solid var(--dt-border-day, rgba(0, 0, 0, 0.6));
|
|
1072
1088
|
padding: 1px 4px;
|
|
1073
|
-
border-radius:
|
|
1089
|
+
border-radius: 0;
|
|
1074
1090
|
white-space: nowrap;
|
|
1075
1091
|
flex-shrink: 1;
|
|
1076
1092
|
min-width: 2.5em;
|
|
@@ -1092,7 +1108,7 @@ const weekDays = $derived.by(() => {
|
|
|
1092
1108
|
.ag-compact-more:focus-visible {
|
|
1093
1109
|
outline: none;
|
|
1094
1110
|
box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
|
|
1095
|
-
border-radius:
|
|
1111
|
+
border-radius: 0;
|
|
1096
1112
|
}
|
|
1097
1113
|
|
|
1098
1114
|
/* ═══ Day-drop drag ═══ */
|
|
@@ -1100,7 +1116,7 @@ const weekDays = $derived.by(() => {
|
|
|
1100
1116
|
opacity: 0.4;
|
|
1101
1117
|
}
|
|
1102
1118
|
.ag-wday--drop {
|
|
1103
|
-
background:
|
|
1119
|
+
background: var(--dt-hover, rgba(0, 0, 0, 0.04));
|
|
1104
1120
|
box-shadow: inset 0 0 0 1px var(--dt-accent, #2563eb);
|
|
1105
1121
|
}
|
|
1106
1122
|
|