mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-30 13:28:11 +00:00
fix
This commit is contained in:
yaschalew
@@ -0,0 +1,279 @@
|
|||||||
|
.ethiopian-picker-surface .calendars {
|
||||||
|
width: 100% !important;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
color: rgb(31 41 55);
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-nav,
|
||||||
|
.ethiopian-picker-surface .calendars-ctrl {
|
||||||
|
background: transparent;
|
||||||
|
border-bottom: 1px solid rgb(229 231 235);
|
||||||
|
padding: 0.35rem 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-month {
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-month-header,
|
||||||
|
.ethiopian-picker-surface .calendars-month-header select,
|
||||||
|
.ethiopian-picker-surface .calendars-month-header input {
|
||||||
|
height: 2.1rem;
|
||||||
|
background: transparent;
|
||||||
|
color: rgb(17 24 39);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-month th,
|
||||||
|
.ethiopian-picker-surface .calendars-month td {
|
||||||
|
border: 0;
|
||||||
|
padding: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-month th {
|
||||||
|
color: rgb(107 114 128);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-month a,
|
||||||
|
.ethiopian-picker-surface .calendars-month span {
|
||||||
|
border-radius: 0.35rem;
|
||||||
|
background: transparent;
|
||||||
|
color: rgb(17 24 39);
|
||||||
|
padding: 0.38rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-month a:hover {
|
||||||
|
background: rgb(220 252 231);
|
||||||
|
color: rgb(22 101 52);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-month td .calendars-today {
|
||||||
|
background: rgb(220 252 231);
|
||||||
|
color: rgb(22 101 52);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-month td .calendars-selected {
|
||||||
|
background: rgb(34 197 94);
|
||||||
|
color: rgb(255 255 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-month td .calendars-other-month {
|
||||||
|
color: rgb(156 163 175);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-nav .calendars-cmd-prev,
|
||||||
|
.ethiopian-picker-surface .calendars-nav .calendars-cmd-next,
|
||||||
|
.ethiopian-picker-surface .calendars-nav .calendars-cmd-prevJump,
|
||||||
|
.ethiopian-picker-surface .calendars-nav .calendars-cmd-nextJump,
|
||||||
|
.calendars-popup .calendars-nav .calendars-cmd-prev,
|
||||||
|
.calendars-popup .calendars-nav .calendars-cmd-next,
|
||||||
|
.calendars-popup .calendars-nav .calendars-cmd-prevJump,
|
||||||
|
.calendars-popup .calendars-nav .calendars-cmd-nextJump {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
border: 1px solid rgb(187 247 208);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background: rgb(240 253 244);
|
||||||
|
color: rgb(21 128 61);
|
||||||
|
line-height: 1;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-nav .calendars-cmd-prev:hover,
|
||||||
|
.ethiopian-picker-surface .calendars-nav .calendars-cmd-next:hover,
|
||||||
|
.ethiopian-picker-surface .calendars-nav .calendars-cmd-prevJump:hover,
|
||||||
|
.ethiopian-picker-surface .calendars-nav .calendars-cmd-nextJump:hover,
|
||||||
|
.calendars-popup .calendars-nav .calendars-cmd-prev:hover,
|
||||||
|
.calendars-popup .calendars-nav .calendars-cmd-next:hover,
|
||||||
|
.calendars-popup .calendars-nav .calendars-cmd-prevJump:hover,
|
||||||
|
.calendars-popup .calendars-nav .calendars-cmd-nextJump:hover {
|
||||||
|
background: rgb(34 197 94);
|
||||||
|
border-color: rgb(34 197 94);
|
||||||
|
color: rgb(255 255 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-nav,
|
||||||
|
.calendars-popup .calendars-nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-nav .calendars-cmd,
|
||||||
|
.calendars-popup .calendars-nav .calendars-cmd {
|
||||||
|
float: none;
|
||||||
|
width: auto;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-nav .calendars-cmd-today,
|
||||||
|
.calendars-popup .calendars-nav .calendars-cmd-today {
|
||||||
|
flex: 1;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
color: rgb(21 128 61);
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ethiopian-picker-surface .calendars-nav .calendars-cmd.calendars-disabled,
|
||||||
|
.calendars-popup .calendars-nav .calendars-cmd.calendars-disabled {
|
||||||
|
opacity: 0.45;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ethiopian-picker-surface .calendars,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars,
|
||||||
|
.dark .calendars-popup .calendars,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars {
|
||||||
|
background: rgb(17 24 39);
|
||||||
|
color: rgb(229 231 235);
|
||||||
|
border-color: rgb(55 65 81);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ethiopian-picker-surface .calendars-nav,
|
||||||
|
.dark .ethiopian-picker-surface .calendars-ctrl,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-nav,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-ctrl,
|
||||||
|
.dark .calendars-popup .calendars-nav,
|
||||||
|
.dark .calendars-popup .calendars-ctrl,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-nav,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-ctrl {
|
||||||
|
background: rgb(17 24 39);
|
||||||
|
border-color: rgb(55 65 81);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ethiopian-picker-surface .calendars-month-header,
|
||||||
|
.dark .ethiopian-picker-surface .calendars-month-header select,
|
||||||
|
.dark .ethiopian-picker-surface .calendars-month-header input,
|
||||||
|
.dark .ethiopian-picker-surface .calendars-month a,
|
||||||
|
.dark .ethiopian-picker-surface .calendars-month span,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-month-header,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-month-header select,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-month-header input,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-month a,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-month span,
|
||||||
|
.dark .calendars-popup .calendars-month-header,
|
||||||
|
.dark .calendars-popup .calendars-month-header select,
|
||||||
|
.dark .calendars-popup .calendars-month-header input,
|
||||||
|
.dark .calendars-popup .calendars-month a,
|
||||||
|
.dark .calendars-popup .calendars-month span,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-month-header,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-month-header select,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-month-header input,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-month a,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-month span {
|
||||||
|
color: rgb(229 231 235);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ethiopian-picker-surface .calendars-month th,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-month th,
|
||||||
|
.dark .calendars-popup .calendars-month th,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-month th {
|
||||||
|
color: rgb(156 163 175);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ethiopian-picker-surface .calendars-month a:hover,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-month a:hover,
|
||||||
|
.dark .calendars-popup .calendars-month a:hover,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-month a:hover {
|
||||||
|
background: rgb(20 83 45);
|
||||||
|
color: rgb(187 247 208);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ethiopian-picker-surface .calendars-month td .calendars-today,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-month td .calendars-today,
|
||||||
|
.dark .calendars-popup .calendars-month td .calendars-today,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-month td .calendars-today {
|
||||||
|
background: rgb(20 83 45);
|
||||||
|
color: rgb(187 247 208);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ethiopian-picker-surface .calendars-month td .calendars-highlight,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-month td .calendars-highlight,
|
||||||
|
.dark .calendars-popup .calendars-month td .calendars-highlight,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-month td .calendars-highlight {
|
||||||
|
background: rgb(22 101 52);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ethiopian-picker-surface .calendars-month td .calendars-selected,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-month td .calendars-selected,
|
||||||
|
.dark .calendars-popup .calendars-month td .calendars-selected,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-month td .calendars-selected {
|
||||||
|
background: rgb(34 197 94);
|
||||||
|
color: rgb(5 46 22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ethiopian-picker-surface .calendars-month td .calendars-other-month,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-month td .calendars-other-month,
|
||||||
|
.dark .calendars-popup .calendars-month td .calendars-other-month,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-month td .calendars-other-month {
|
||||||
|
color: rgb(107 114 128);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ethiopian-picker-surface .calendars a.calendars-disabled,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars a.calendars-disabled,
|
||||||
|
.dark .calendars-popup .calendars a.calendars-disabled,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars a.calendars-disabled {
|
||||||
|
color: rgb(75 85 99);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-prev,
|
||||||
|
.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-next,
|
||||||
|
.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-prevJump,
|
||||||
|
.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-nextJump,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-prev,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-next,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-prevJump,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-nextJump,
|
||||||
|
.dark .calendars-popup .calendars-nav .calendars-cmd-prev,
|
||||||
|
.dark .calendars-popup .calendars-nav .calendars-cmd-next,
|
||||||
|
.dark .calendars-popup .calendars-nav .calendars-cmd-prevJump,
|
||||||
|
.dark .calendars-popup .calendars-nav .calendars-cmd-nextJump,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-prev,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-next,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-prevJump,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-nextJump {
|
||||||
|
background: rgb(21 128 61 / 0.22);
|
||||||
|
border-color: rgb(34 197 94 / 0.45);
|
||||||
|
color: rgb(187 247 208);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-prev:hover,
|
||||||
|
.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-next:hover,
|
||||||
|
.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-prevJump:hover,
|
||||||
|
.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-nextJump:hover,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-prev:hover,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-next:hover,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-prevJump:hover,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-nextJump:hover,
|
||||||
|
.dark .calendars-popup .calendars-nav .calendars-cmd-prev:hover,
|
||||||
|
.dark .calendars-popup .calendars-nav .calendars-cmd-next:hover,
|
||||||
|
.dark .calendars-popup .calendars-nav .calendars-cmd-prevJump:hover,
|
||||||
|
.dark .calendars-popup .calendars-nav .calendars-cmd-nextJump:hover,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-prev:hover,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-next:hover,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-prevJump:hover,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-nextJump:hover {
|
||||||
|
background: rgb(34 197 94);
|
||||||
|
border-color: rgb(34 197 94);
|
||||||
|
color: rgb(5 46 22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-today,
|
||||||
|
[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-today,
|
||||||
|
.dark .calendars-popup .calendars-nav .calendars-cmd-today,
|
||||||
|
[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-today {
|
||||||
|
color: rgb(187 247 208);
|
||||||
|
}
|
||||||
@@ -0,0 +1,208 @@
|
|||||||
|
/* Flora styling for jQuery Calendars Picker v2.0.0. */
|
||||||
|
.calendars {
|
||||||
|
background-color: #e0f4d7;
|
||||||
|
color: #000;
|
||||||
|
border: 1px solid #f90;
|
||||||
|
-moz-border-radius: 0.25em;
|
||||||
|
-webkit-border-radius: 0.25em;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
font-family: Arial,Helvetica,Sans-serif;
|
||||||
|
font-size: 90%;
|
||||||
|
}
|
||||||
|
.calendars-rtl {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
.calendars-popup {
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.calendars-disable {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
background-color: white;
|
||||||
|
opacity: 0.5;
|
||||||
|
filter: alpha(opacity=50);
|
||||||
|
}
|
||||||
|
.calendars a {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.calendars a.calendars-disabled {
|
||||||
|
color: #888;
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
.calendars button {
|
||||||
|
margin: 0.25em;
|
||||||
|
padding: 0.125em 0em;
|
||||||
|
background-color: #fc8;
|
||||||
|
border: none;
|
||||||
|
-moz-border-radius: 0.25em;
|
||||||
|
-webkit-border-radius: 0.25em;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.calendars-nav, .calendars-ctrl {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #e0f4d7;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 90%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.datepick-ctrl {
|
||||||
|
background-color: #f90;
|
||||||
|
}
|
||||||
|
.calendars-cmd {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
.calendars-cmd:hover {
|
||||||
|
background-color: #b1db87;
|
||||||
|
}
|
||||||
|
.calendars-ctrl .calendars-cmd:hover {
|
||||||
|
background-color: #fa4;
|
||||||
|
}
|
||||||
|
.calendars-cmd-prevJump, .calendars-cmd-nextJump {
|
||||||
|
width: 8%;
|
||||||
|
}
|
||||||
|
a.calendars-cmd {
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
button.calendars-cmd {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-cmd-prev, .calendars-cmd-prevJump, .calendars-cmd-clear {
|
||||||
|
float: left;
|
||||||
|
padding-left: 2%;
|
||||||
|
}
|
||||||
|
.calendars-cmd-current, .calendars-cmd-today {
|
||||||
|
float: left;
|
||||||
|
width: 35%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-cmd-next, .calendars-cmd-nextJump, .calendars-cmd-close {
|
||||||
|
float: right;
|
||||||
|
padding-right: 2%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-prev, .calendars-rtl .calendars-cmd-prevJump,
|
||||||
|
.calendars-rtl .calendars-cmd-clear {
|
||||||
|
float: right;
|
||||||
|
padding-left: 0%;
|
||||||
|
padding-right: 2%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-current, .calendars-rtl .calendars-cmd-today {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-next, .calendars-rtl .calendars-cmd-nextJump,
|
||||||
|
.calendars-rtl .calendars-cmd-close {
|
||||||
|
float: left;
|
||||||
|
padding-left: 2%;
|
||||||
|
padding-right: 0%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.calendars-month-nav {
|
||||||
|
float: left;
|
||||||
|
background-color: #b1db87;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month-nav div {
|
||||||
|
float: left;
|
||||||
|
width: 12.5%;
|
||||||
|
margin: 1%;
|
||||||
|
padding: 1%;
|
||||||
|
}
|
||||||
|
.calendars-month-nav span {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.calendars-month-row {
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
.calendars-month {
|
||||||
|
float: left;
|
||||||
|
width: 15em;
|
||||||
|
border: 1px solid #83c948;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month-header, .calendars-month-header select, .calendars-month-header input {
|
||||||
|
height: 1.5em;
|
||||||
|
background-color: #83c948;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.calendars-month-header select, .calendars-month-header input {
|
||||||
|
height: 1.4em;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.calendars-month-header input {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.calendars-month table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
.calendars-month thead {
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
}
|
||||||
|
.calendars-month th, .calendars-month td {
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0em;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month th {
|
||||||
|
border: 1px solid #b1db87;
|
||||||
|
}
|
||||||
|
.calendars-month th, .calendars-month th a {
|
||||||
|
background-color: #b1db87;
|
||||||
|
color: #000;
|
||||||
|
border: 1px solid #b1db87;
|
||||||
|
}
|
||||||
|
.calendars-month td {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #666;
|
||||||
|
border: 1px solid #b1db87;
|
||||||
|
}
|
||||||
|
.calendars-month td.calendars-week * {
|
||||||
|
background-color: #b1db87;
|
||||||
|
color: #666;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.calendars-month a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.125em 0em;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.calendars-month span {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.125em 0em;
|
||||||
|
}
|
||||||
|
.calendars-month td span {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-other-month {
|
||||||
|
background-color: #e0f4d7;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-weekend {
|
||||||
|
background-color: #e0f4d7;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-today {
|
||||||
|
background-color: #b1db87;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-highlight {
|
||||||
|
background-color: #fc8;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-selected {
|
||||||
|
background-color: #f90;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.calendars-status {
|
||||||
|
clear: both;
|
||||||
|
background-color: #b1db87;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-clear-fix {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
@@ -0,0 +1,197 @@
|
|||||||
|
/* Humanity styling for jQuery Calendars Picker v2.0.0. */
|
||||||
|
.calendars {
|
||||||
|
background-color: #f4f0ec;
|
||||||
|
color: #1e1b1c;
|
||||||
|
border: 1px solid #cb842e;
|
||||||
|
-moz-border-radius: 0.25em;
|
||||||
|
-webkit-border-radius: 0.25em;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
font-family: Arial,Helvetica,Sans-serif;
|
||||||
|
font-size: 90%;
|
||||||
|
}
|
||||||
|
.calendars-rtl {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
.calendars-popup {
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.calendars-disable {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
background-color: white;
|
||||||
|
opacity: 0.5;
|
||||||
|
filter: alpha(opacity=50);
|
||||||
|
}
|
||||||
|
.calendars a {
|
||||||
|
color: #1e1b1c;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.calendars a.calendars-disabled {
|
||||||
|
color: #888;
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
.calendars button {
|
||||||
|
margin: 0.25em;
|
||||||
|
padding: 0.125em 0em;
|
||||||
|
background-color: #ede4d4;
|
||||||
|
border: none;
|
||||||
|
-moz-border-radius: 0.25em;
|
||||||
|
-webkit-border-radius: 0.25em;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.calendars-nav, .calendars-ctrl {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #ede4d4;
|
||||||
|
font-size: 90%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.calendars-ctrl {
|
||||||
|
background-color: #cb842e;
|
||||||
|
}
|
||||||
|
.calendars-cmd {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
.calendars-cmd:hover {
|
||||||
|
background-color: #f4f0ec;
|
||||||
|
}
|
||||||
|
.calendars-cmd-prevJump, .calendars-cmd-nextJump {
|
||||||
|
width: 8%;
|
||||||
|
}
|
||||||
|
a.calendars-cmd {
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
button.calendars-cmd {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-cmd-prev, .calendars-cmd-prevJump, .calendars-cmd-clear {
|
||||||
|
float: left;
|
||||||
|
padding-left: 2%;
|
||||||
|
}
|
||||||
|
.calendars-cmd-current, .calendars-cmd-today {
|
||||||
|
float: left;
|
||||||
|
width: 35%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-cmd-next, .calendars-cmd-nextJump, .calendars-cmd-close {
|
||||||
|
float: right;
|
||||||
|
padding-right: 2%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-prev, .calendars-rtl .calendars-cmd-prevJump,
|
||||||
|
.calendars-rtl .calendars-cmd-clear {
|
||||||
|
float: right;
|
||||||
|
padding-left: 0%;
|
||||||
|
padding-right: 2%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-current, .calendars-rtl .calendars-cmd-today {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-next, .calendars-rtl .calendars-cmd-nextJump,
|
||||||
|
.calendars-rtl .calendars-cmd-close {
|
||||||
|
float: left;
|
||||||
|
padding-left: 2%;
|
||||||
|
padding-right: 0%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.calendars-month-nav {
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month-nav div {
|
||||||
|
float: left;
|
||||||
|
width: 12.5%;
|
||||||
|
margin: 1%;
|
||||||
|
padding: 1%;
|
||||||
|
}
|
||||||
|
.calendars-month-nav span {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.calendars-month-row {
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
.calendars-month {
|
||||||
|
float: left;
|
||||||
|
width: 17em;
|
||||||
|
border: 1px solid #e0cfc2;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month-header, .calendars-month-header select, .calendars-month-header input {
|
||||||
|
height: 1.5em;
|
||||||
|
background-color: #cb842e;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.calendars-month-header select, .calendars-month-header input {
|
||||||
|
height: 1.4em;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.calendars-month-header input {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.calendars-month table {
|
||||||
|
width: 100%;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
.calendars-month th, .calendars-month td {
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0.125em;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month td.calendars-week,
|
||||||
|
.calendars-month td.calendars-week * {
|
||||||
|
background-color: #cb842e;
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid #cb842e;
|
||||||
|
}
|
||||||
|
.calendars-month a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.125em 0em;
|
||||||
|
background-color: #ede4d4;
|
||||||
|
color: #000;
|
||||||
|
border: 1px solid #cdc3b7;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.calendars-month span {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.25em;
|
||||||
|
}
|
||||||
|
.calendars-month a {
|
||||||
|
background-color: #ede4d4;
|
||||||
|
color: #444;
|
||||||
|
border: 1px solid #cdc3b7;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.calendars-month td span {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-other-month {
|
||||||
|
background-color: #f4f0ec;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-today {
|
||||||
|
background-color: #f5f5b5;
|
||||||
|
border: 1px solid #d9bb73;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-highlight {
|
||||||
|
background-color: #f5f0e5;
|
||||||
|
color: #1e1b1c;
|
||||||
|
border: 1px solid #f5ad66;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-selected {
|
||||||
|
background-color: #cb842e;
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid #cb842e;
|
||||||
|
}
|
||||||
|
.calendars-status {
|
||||||
|
clear: both;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-clear-fix {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
@@ -0,0 +1,215 @@
|
|||||||
|
/* Default styling for jQuery Calendars Picker v2.0.0. */
|
||||||
|
.calendars {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #000;
|
||||||
|
border: 1px solid #444;
|
||||||
|
-moz-border-radius: 0.25em;
|
||||||
|
-webkit-border-radius: 0.25em;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
font-family: Arial,Helvetica,Sans-serif;
|
||||||
|
font-size: 90%;
|
||||||
|
}
|
||||||
|
.calendars-rtl {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
.calendars-popup {
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.calendars-disable {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
background-color: white;
|
||||||
|
opacity: 0.5;
|
||||||
|
filter: alpha(opacity=50);
|
||||||
|
}
|
||||||
|
.calendars a {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.calendars a.calendars-disabled {
|
||||||
|
color: #888;
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
.calendars button {
|
||||||
|
margin: 0.25em;
|
||||||
|
padding: 0.125em 0em;
|
||||||
|
background-color: #fcc;
|
||||||
|
border: none;
|
||||||
|
-moz-border-radius: 0.25em;
|
||||||
|
-webkit-border-radius: 0.25em;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.calendars-nav, .calendars-ctrl {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 90%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.calendars-ctrl {
|
||||||
|
background-color: #600;
|
||||||
|
}
|
||||||
|
.calendars-cmd {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
.calendars-cmd:hover {
|
||||||
|
background-color: #777;
|
||||||
|
}
|
||||||
|
.calendars-ctrl .calendars-cmd:hover {
|
||||||
|
background-color: #f08080;
|
||||||
|
}
|
||||||
|
.calendars-cmd-prevJump, .calendars-cmd-nextJump {
|
||||||
|
width: 8%;
|
||||||
|
}
|
||||||
|
a.calendars-cmd {
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
button.calendars-cmd {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-cmd-prev, .calendars-cmd-prevJump, .calendars-cmd-clear {
|
||||||
|
float: left;
|
||||||
|
padding-left: 2%;
|
||||||
|
}
|
||||||
|
.calendars-cmd-current, .calendars-cmd-today {
|
||||||
|
float: left;
|
||||||
|
width: 35%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-cmd-next, .calendars-cmd-nextJump, .calendars-cmd-close {
|
||||||
|
float: right;
|
||||||
|
padding-right: 2%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-prev, .calendars-rtl .calendars-cmd-prevJump,
|
||||||
|
.calendars-rtl .calendars-cmd-clear {
|
||||||
|
float: right;
|
||||||
|
padding-left: 0%;
|
||||||
|
padding-right: 2%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-current, .calendars-rtl .calendars-cmd-today {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-next, .calendars-rtl .calendars-cmd-nextJump,
|
||||||
|
.calendars-rtl .calendars-cmd-close {
|
||||||
|
float: left;
|
||||||
|
padding-left: 2%;
|
||||||
|
padding-right: 0%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.calendars-month-nav {
|
||||||
|
float: left;
|
||||||
|
background-color: #777;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month-nav div {
|
||||||
|
float: left;
|
||||||
|
width: 12.5%;
|
||||||
|
margin: 1%;
|
||||||
|
padding: 1%;
|
||||||
|
}
|
||||||
|
.calendars-month-nav span {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.calendars-month-row {
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
.calendars-month {
|
||||||
|
float: left;
|
||||||
|
width: 15em;
|
||||||
|
border: 1px solid #444;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month-header, .calendars-month-header select, .calendars-month-header input {
|
||||||
|
height: 1.5em;
|
||||||
|
background-color: #444;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.calendars-month-header select, .calendars-month-header input {
|
||||||
|
height: 1.4em;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.calendars-month-header input {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.calendars-month table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
.calendars-month thead {
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
}
|
||||||
|
.calendars-month th, .calendars-month td {
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0em;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month th {
|
||||||
|
border: 1px solid #777;
|
||||||
|
}
|
||||||
|
.calendars-month th, .calendars-month th a {
|
||||||
|
background-color: #777;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.calendars-month td {
|
||||||
|
background-color: #eee;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
}
|
||||||
|
.calendars-month td.calendars-week {
|
||||||
|
border: 1px solid #777;
|
||||||
|
}
|
||||||
|
.calendars-month td.calendars-week * {
|
||||||
|
background-color: #777;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.calendars-month a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.125em 0em;
|
||||||
|
background-color: #eee;
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.calendars-month span {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.125em 0em;
|
||||||
|
}
|
||||||
|
.calendars-month td span {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-other-month {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-weekend {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-today {
|
||||||
|
background-color: #f0c0c0;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-highlight {
|
||||||
|
background-color: #f08080;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-selected {
|
||||||
|
background-color: #777;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.calendars-month th.calendars-week {
|
||||||
|
background-color: #777;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.calendars-status {
|
||||||
|
clear: both;
|
||||||
|
background-color: #ddd;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-clear-fix {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
@@ -0,0 +1,199 @@
|
|||||||
|
/* Redmond styling for jQuery Calendars Picker v2.0.0. */
|
||||||
|
.calendars {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #222;
|
||||||
|
border: 1px solid #4297d7;
|
||||||
|
-moz-border-radius: 0.25em;
|
||||||
|
-webkit-border-radius: 0.25em;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
font-family: Arial,Helvetica,Sans-serif;
|
||||||
|
font-size: 90%;
|
||||||
|
}
|
||||||
|
.calendars-rtl {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
.calendars-popup {
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.calendars-disable {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
background-color: white;
|
||||||
|
opacity: 0.5;
|
||||||
|
filter: alpha(opacity=50);
|
||||||
|
}
|
||||||
|
.calendars a {
|
||||||
|
color: #222;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.calendars a.calendars-disabled {
|
||||||
|
color: #888;
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
.calendars button {
|
||||||
|
margin: 0.25em;
|
||||||
|
padding: 0.125em 0em;
|
||||||
|
background-color: #5c9ccc;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
-moz-border-radius: 0.25em;
|
||||||
|
-webkit-border-radius: 0.25em;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.calendars-nav, .calendars-ctrl {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
font-size: 90%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.calendars-ctrl {
|
||||||
|
background-color: #d0e5f5;
|
||||||
|
}
|
||||||
|
.calendars-cmd {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
.calendars-cmd:hover {
|
||||||
|
background-color: #dfeffc;
|
||||||
|
}
|
||||||
|
button.calendars-cmd:hover {
|
||||||
|
background-color: #79b7e7;
|
||||||
|
}
|
||||||
|
.calendars-cmd-prevJump, .calendars-cmd-nextJump {
|
||||||
|
width: 8%;
|
||||||
|
}
|
||||||
|
a.calendars-cmd {
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
button.calendars-cmd {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-cmd-prev, .calendars-cmd-prevJump, .calendars-cmd-clear {
|
||||||
|
float: left;
|
||||||
|
padding-left: 2%;
|
||||||
|
}
|
||||||
|
.calendars-cmd-current, .calendars-cmd-today {
|
||||||
|
float: left;
|
||||||
|
width: 35%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-cmd-next, .calendars-cmd-nextJump, .calendars-cmd-close {
|
||||||
|
float: right;
|
||||||
|
padding-right: 2%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-prev, .calendars-rtl .calendars-cmd-prevJump,
|
||||||
|
.calendars-rtl .calendars-cmd-clear {
|
||||||
|
float: right;
|
||||||
|
padding-left: 0%;
|
||||||
|
padding-right: 2%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-current, .calendars-rtl .calendars-cmd-today {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-next, .calendars-rtl .calendars-cmd-nextJump,
|
||||||
|
.calendars-rtl .calendars-cmd-close {
|
||||||
|
float: left;
|
||||||
|
padding-left: 2%;
|
||||||
|
padding-right: 0%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.calendars-month-nav {
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month-nav div {
|
||||||
|
float: left;
|
||||||
|
width: 12.5%;
|
||||||
|
margin: 1%;
|
||||||
|
padding: 1%;
|
||||||
|
}
|
||||||
|
.calendars-month-nav span {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.calendars-month-row {
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
.calendars-month {
|
||||||
|
float: left;
|
||||||
|
width: 15em;
|
||||||
|
border: 1px solid #5c9ccc;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month-header, .calendars-month-header select, .calendars-month-header input {
|
||||||
|
height: 1.5em;
|
||||||
|
background-color: #5c9ccc;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.calendars-month-header select, .calendars-month-header input {
|
||||||
|
height: 1.4em;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.calendars-month-header input {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.calendars-month table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
.calendars-month thead {
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
}
|
||||||
|
.calendars-month th, .calendars-month td {
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0em;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month th {
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-bottom: 1px solid #c5dbec;
|
||||||
|
}
|
||||||
|
.calendars-month td {
|
||||||
|
border: 1px solid #c5dbec;
|
||||||
|
}
|
||||||
|
.calendars-month td.calendars-week * {
|
||||||
|
background-color: #d0e5f5;
|
||||||
|
color: #222;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.calendars-month a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.125em 0em;
|
||||||
|
background-color: #dfeffc;
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.calendars-month span {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.125em 0em;
|
||||||
|
}
|
||||||
|
.calendars-month td span {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-other-month {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-today {
|
||||||
|
background-color: #fad42e;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-highlight {
|
||||||
|
background-color: #79b7e7;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-selected {
|
||||||
|
background-color: #4297d7;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.calendars-status {
|
||||||
|
clear: both;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-clear-fix {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
@@ -0,0 +1,200 @@
|
|||||||
|
/* Smoothness styling for jQuery Calendars Picker v2.0.0. */
|
||||||
|
.calendars {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #222;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
-moz-border-radius: 0.25em;
|
||||||
|
-webkit-border-radius: 0.25em;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
font-family: Arial,Helvetica,Sans-serif;
|
||||||
|
font-size: 90%;
|
||||||
|
}
|
||||||
|
.calendars-rtl {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
.calendars-popup {
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.calendars-disable {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
background-color: white;
|
||||||
|
opacity: 0.5;
|
||||||
|
filter: alpha(opacity=50);
|
||||||
|
}
|
||||||
|
.calendars a {
|
||||||
|
color: #222;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.calendars a.calendars-disabled {
|
||||||
|
color: #888;
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
.calendars button {
|
||||||
|
margin: 0.25em;
|
||||||
|
padding: 0.125em 0em;
|
||||||
|
background-color: #fcc;
|
||||||
|
border: none;
|
||||||
|
-moz-border-radius: 0.25em;
|
||||||
|
-webkit-border-radius: 0.25em;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.calendars-nav, .calendars-ctrl {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
font-size: 90%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.calendars-ctrl {
|
||||||
|
background-color: #fee6e3;
|
||||||
|
}
|
||||||
|
.calendars-cmd {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
.calendars-cmd:hover {
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
}
|
||||||
|
.calendars-ctrl .calendars-cmd:hover {
|
||||||
|
background-color: #f08080;
|
||||||
|
}
|
||||||
|
.calendars-cmd-prevJump, .calendars-cmd-nextJump {
|
||||||
|
width: 8%;
|
||||||
|
}
|
||||||
|
a.calendars-cmd {
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
button.calendars-cmd {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-cmd-prev, .calendars-cmd-prevJump, .calendars-cmd-clear {
|
||||||
|
float: left;
|
||||||
|
padding-left: 2%;
|
||||||
|
}
|
||||||
|
.calendars-cmd-current, .calendars-cmd-today {
|
||||||
|
float: left;
|
||||||
|
width: 35%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-cmd-next, .calendars-cmd-nextJump, .calendars-cmd-close {
|
||||||
|
float: right;
|
||||||
|
padding-right: 2%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-prev, .calendars-rtl .calendars-cmd-prevJump,
|
||||||
|
.calendars-rtl .calendars-cmd-clear {
|
||||||
|
float: right;
|
||||||
|
padding-left: 0%;
|
||||||
|
padding-right: 2%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-current, .calendars-rtl .calendars-cmd-today {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.calendars-rtl .calendars-cmd-next, .calendars-rtl .calendars-cmd-nextJump,
|
||||||
|
.calendars-rtl .calendars-cmd-close {
|
||||||
|
float: left;
|
||||||
|
padding-left: 2%;
|
||||||
|
padding-right: 0%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.calendars-month-nav {
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month-nav div {
|
||||||
|
float: left;
|
||||||
|
width: 12.5%;
|
||||||
|
margin: 1%;
|
||||||
|
padding: 1%;
|
||||||
|
}
|
||||||
|
.calendars-month-nav span {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.calendars-month-row {
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
.calendars-month {
|
||||||
|
float: left;
|
||||||
|
width: 15em;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month-header, .calendars-month-header select, .calendars-month-header input {
|
||||||
|
height: 1.5em;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
color: #222;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.calendars-month-header select, .calendars-month-header input {
|
||||||
|
height: 1.4em;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.calendars-month-header input {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.calendars-month table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
.calendars-month thead {
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
}
|
||||||
|
.calendars-month th, .calendars-month td {
|
||||||
|
margin: 0em;
|
||||||
|
padding: 0em;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-month thead tr {
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
}
|
||||||
|
.calendars-month td {
|
||||||
|
background-color: #eee;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
}
|
||||||
|
.calendars-month td.calendars-week * {
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
color: #222;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.calendars-month a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.125em 0em;
|
||||||
|
background-color: #eee;
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.calendars-month span {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.125em 0em;
|
||||||
|
}
|
||||||
|
.calendars-month td span {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-other-month {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-weekend {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-today {
|
||||||
|
background-color: #fbf9ee;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-highlight {
|
||||||
|
background-color: #dadada;
|
||||||
|
}
|
||||||
|
.calendars-month td .calendars-selected {
|
||||||
|
background-color: #fcc;
|
||||||
|
}
|
||||||
|
.calendars-status {
|
||||||
|
clear: both;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calendars-clear-fix {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
/* ThemeRoller Blacktie override style sheet for jQuery Calendars Picker v2.0.0. */
|
||||||
|
@import "ui.calendars.picker.css";
|
||||||
|
|
||||||
|
.ui-widget-header a,
|
||||||
|
.ui-widget-header select {
|
||||||
|
color: #eeeeee; /* Set (.ui-widget-header a) colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-widget-header a:hover {
|
||||||
|
background-color: #1c1c1c; /* Set (.ui-state-hover) colours from theme here */
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.ui-widget-header select,
|
||||||
|
.ui-widget-header option {
|
||||||
|
background-color: #333333; /* Set (.ui-widget-header) background colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-state-highlight a {
|
||||||
|
color: #363636; /* Set (.ui-state-highlight) colour from theme here */
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
/* ThemeRoller Blitzer override style sheet for jQuery Calendars Picker v2.0.0. */
|
||||||
|
@import "ui.calendars.picker.css";
|
||||||
|
|
||||||
|
.ui-widget-header a,
|
||||||
|
.ui-widget-header select {
|
||||||
|
color: #ffffff; /* Set (.ui-widget-header a) colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-widget-header a:hover {
|
||||||
|
background-color: #f6f6f6; /* Set (.ui-state-hover) colours from theme here */
|
||||||
|
color: #111111;
|
||||||
|
}
|
||||||
|
.ui-widget-header select,
|
||||||
|
.ui-widget-header option {
|
||||||
|
background-color: #cc0000; /* Set (.ui-widget-header) background colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-state-highlight a {
|
||||||
|
color: #555555; /* Set (.ui-state-highlight) colour from theme here */
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
/* ThemeRoller Cupertino override style sheet for jQuery Calendars Picker v2.0.0. */
|
||||||
|
@import "ui.calendars.picker.css";
|
||||||
|
|
||||||
|
.ui-widget-header a,
|
||||||
|
.ui-widget-header select {
|
||||||
|
color: #222222; /* Set (.ui-widget-header a) colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-widget-header a:hover {
|
||||||
|
background-color: #f0f0f0; /* Set (.ui-state-hover) colours from theme here */
|
||||||
|
color: #0b5b98;
|
||||||
|
}
|
||||||
|
.ui-widget-header select,
|
||||||
|
.ui-widget-header option {
|
||||||
|
background-color: #e7eef3; /* Set (.ui-widget-header) background colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-state-highlight a {
|
||||||
|
color: #363636; /* Set (.ui-state-highlight) colour from theme here */
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
/* ThemeRoller Dark Hive override style sheet for jQuery Calendars Picker v2.0.0. */
|
||||||
|
@import "ui.calendars.picker.css";
|
||||||
|
|
||||||
|
.ui-widget-header a,
|
||||||
|
.ui-widget-header select {
|
||||||
|
color: #ffffff; /* Set (.ui-widget-header a) colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-widget-header a:hover {
|
||||||
|
background-color: #003147; /* Set (.ui-state-hover) colours from theme here */
|
||||||
|
color: #ffffff;;
|
||||||
|
}
|
||||||
|
.ui-widget-header select,
|
||||||
|
.ui-widget-header option {
|
||||||
|
background-color: #444444; /* Set (.ui-widget-header) background colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-state-highlight a {
|
||||||
|
color: #eeeeee; /* Set (.ui-state-highlight) colour from theme here */
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
/* ThemeRoller DotLuv override style sheet for jQuery Calendars Picker v2.0.0. */
|
||||||
|
@import "ui.calendars.picker.css";
|
||||||
|
|
||||||
|
.ui-widget-header a,
|
||||||
|
.ui-widget-header select {
|
||||||
|
color: #f6f6f6; /* Set (.ui-widget-header a) colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-widget-header a:hover {
|
||||||
|
background-color: #00498f; /* Set (.ui-state-hover) colours from theme here */
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.ui-widget-header select,
|
||||||
|
.ui-widget-header option {
|
||||||
|
background-color: #0b3e6f; /* Set (.ui-widget-header) background colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-state-highlight a {
|
||||||
|
color: #ffffff; /* Set (.ui-state-highlight) colour from theme here */
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
/* ThemeRoller Eggplant override style sheet for jQuery Calendars Picker v2.0.0. */
|
||||||
|
@import "ui.calendars.picker.css";
|
||||||
|
|
||||||
|
.ui-widget-header a,
|
||||||
|
.ui-widget-header select {
|
||||||
|
color: #ffffff; /* Set (.ui-widget-header a) colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-widget-header a:hover {
|
||||||
|
background-color: #eae6ea; /* Set (.ui-state-hover) colours from theme here */
|
||||||
|
color: #734d99;
|
||||||
|
}
|
||||||
|
.ui-widget-header select,
|
||||||
|
.ui-widget-header option {
|
||||||
|
background-color: #30273a; /* Set (.ui-widget-header) background colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-state-highlight a {
|
||||||
|
color: #fafafa; /* Set (.ui-state-highlight) colour from theme here */
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
/* ThemeRoller ExciteBike override style sheet for jQuery dCalendars Picker v2.0.0. */
|
||||||
|
@import "ui.calendars.picker.css";
|
||||||
|
|
||||||
|
.ui-widget-header a,
|
||||||
|
.ui-widget-header select {
|
||||||
|
color: #e69700; /* Set (.ui-widget-header a) colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-widget-header a:hover {
|
||||||
|
background-color: #2293f7; /* Set (.ui-state-hover) colours from theme here */
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.ui-widget-header select,
|
||||||
|
.ui-widget-header option {
|
||||||
|
background-color: #f9f9f9; /* Set (.ui-widget-header) background colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-state-highlight a {
|
||||||
|
color: #333333; /* Set (.ui-state-highlight) colour from theme here */
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
/* ThemeRoller Flick override style sheet for jQuery Calendars Picker v2.0.0. */
|
||||||
|
@import "ui.calendars.picker.css";
|
||||||
|
|
||||||
|
.ui-widget-header a,
|
||||||
|
.ui-widget-header select {
|
||||||
|
color: #444444; /* Set (.ui-widget-header a) colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-widget-header a:hover {
|
||||||
|
background-color: #0073ea; /* Set (.ui-state-hover) colours from theme here */
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.ui-widget-header select,
|
||||||
|
.ui-widget-header option {
|
||||||
|
background-color: #dddddd; /* Set (.ui-widget-header) background colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-state-highlight a {
|
||||||
|
color: #444444; /* Set (.ui-state-highlight) colour from theme here */
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
/* ThemeRoller HotSneaks override style sheet for jQuery Calendars Picker v2.0.0. */
|
||||||
|
@import "ui.calendars.picker.css";
|
||||||
|
|
||||||
|
.ui-widget-header a,
|
||||||
|
.ui-widget-header select {
|
||||||
|
color: #e1e463; /* Set (.ui-widget-header a) colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-widget-header a:hover {
|
||||||
|
background-color: #ccd232; /* Set (.ui-state-hover) colours from theme here */
|
||||||
|
color: #212121;
|
||||||
|
}
|
||||||
|
.ui-widget-header select,
|
||||||
|
.ui-widget-header option {
|
||||||
|
background-color: #35414f; /* Set (.ui-widget-header) background colour from theme here */
|
||||||
|
}
|
||||||
|
.ui-state-highlight a {
|
||||||
|
color: #363636; /* Set (.ui-state-highlight) colour from theme here */
|
||||||
|
}
|
||||||
@@ -0,0 +1,107 @@
|
|||||||
|
/* ThemeRoller override style sheet for jQuery Calendars Picker v2.0.0. */
|
||||||
|
.ui-datepicker {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#ui-datepicker-div,
|
||||||
|
.ui-datepicker-inline {
|
||||||
|
width: 17em;
|
||||||
|
font-size: 75%;
|
||||||
|
}
|
||||||
|
#ui-datepicker-div {
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.ui-datepicker-inline {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.ui-datepicker-rtl {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
#ui-datepicker-div a,
|
||||||
|
.ui-datepicker-inline a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.ui-datepicker-prompt {
|
||||||
|
height: 1.5em;
|
||||||
|
padding-top: 0.25em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
button.ui-datepicker-cmd {
|
||||||
|
height: 2em;
|
||||||
|
}
|
||||||
|
.ui-datepicker-cmd-clear {
|
||||||
|
float: left;
|
||||||
|
margin-left: 0.25em;
|
||||||
|
}
|
||||||
|
.ui-datepicker-cmd-close {
|
||||||
|
float: right;
|
||||||
|
margin-right: 0.25em;
|
||||||
|
}
|
||||||
|
.ui-datepicker-cmd-prev {
|
||||||
|
position: static;
|
||||||
|
float: left;
|
||||||
|
width: 30%;
|
||||||
|
height: auto;
|
||||||
|
margin-left: 1%;
|
||||||
|
}
|
||||||
|
.ui-datepicker-cmd-next {
|
||||||
|
position: static;
|
||||||
|
float: right;
|
||||||
|
width: 30%;
|
||||||
|
height: auto;
|
||||||
|
margin-right: 1%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.ui-datepicker-cmd-current,
|
||||||
|
.ui-datepicker-cmd-today {
|
||||||
|
float: left;
|
||||||
|
width: 37%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ui-datepicker-month-nav {
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ui-datepicker-month-nav div {
|
||||||
|
float: left;
|
||||||
|
width: 12.5%;
|
||||||
|
margin: 1%;
|
||||||
|
padding: 1%;
|
||||||
|
}
|
||||||
|
.ui-datepicker-month-nav span {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.ui-datepicker-row-break {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
.ui-datepicker-group {
|
||||||
|
float: left;
|
||||||
|
width: 17em;
|
||||||
|
}
|
||||||
|
.ui-datepicker-group .ui-datepicker-header {
|
||||||
|
height: 1.5em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ui-datepicker select,
|
||||||
|
.ui-datepicker-inline select {
|
||||||
|
width: auto;
|
||||||
|
height: 1.66em;
|
||||||
|
border: none;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.ui-datepicker th {
|
||||||
|
padding: 0.5em 0.3em;
|
||||||
|
}
|
||||||
|
.ui-datepicker td,
|
||||||
|
.ui-datepicker td a,
|
||||||
|
.ui-datepicker td span {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ui-datepicker-status {
|
||||||
|
padding: 0.25em 0em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ui-datepicker .ui-helper-clearfix {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
@@ -0,0 +1,457 @@
|
|||||||
|
import $ from "@/shared/common/jquery-global";
|
||||||
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
// CSS and plugins
|
||||||
|
import "@/shared/common/css/redmond.calendars.picker.css";
|
||||||
|
import "@/shared/common/css/ethiopian-date-picker-overrides.css";
|
||||||
|
import "@/shared/common/js/jquery.plugin.js";
|
||||||
|
import "@/shared/common/js/jquery.calendars.js";
|
||||||
|
import "@/shared/common/js/jquery.calendars.plus.js";
|
||||||
|
import "@/shared/common/js/jquery.calendars.picker.js";
|
||||||
|
import "@/shared/common/js/jquery.calendars.ethiopian.js";
|
||||||
|
import "@/shared/common/js/jquery.calendars.ethiopian-am.js";
|
||||||
|
|
||||||
|
interface CalendarsDate {
|
||||||
|
toString(): string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CalendarsDateFactory {
|
||||||
|
toJSDate(): Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CalendarsInstance {
|
||||||
|
newDate: (year: number, month: number, day: number) => CalendarsDateFactory;
|
||||||
|
fromJSDate: (jsDate: Date) => unknown;
|
||||||
|
formatDate: (
|
||||||
|
format: string,
|
||||||
|
date: unknown,
|
||||||
|
settings?: { localNumbers?: boolean },
|
||||||
|
) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CalendarsApi {
|
||||||
|
instance: (calendarType: string, language: string) => CalendarsInstance;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CalendarsPickerOptions {
|
||||||
|
calendar: CalendarsInstance;
|
||||||
|
dateFormat: string;
|
||||||
|
onSelect: (dates: CalendarsDate[]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
type CalendarsPickerElement = JQuery<HTMLElement> & {
|
||||||
|
calendarsPicker: (...args: unknown[]) => unknown;
|
||||||
|
};
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface JQueryStatic {
|
||||||
|
calendars: CalendarsApi;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface EthiopianDatePickerModalProps {
|
||||||
|
value?: string | Date;
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ETHIOPIAN_UTC_OFFSET_HOURS = 3;
|
||||||
|
|
||||||
|
const toEthiopianTimeInput = (date: Date): string => {
|
||||||
|
if (!(date instanceof Date) || isNaN(date.getTime())) {
|
||||||
|
return "00:00";
|
||||||
|
}
|
||||||
|
|
||||||
|
const totalMinutesUtc = date.getUTCHours() * 60 + date.getUTCMinutes();
|
||||||
|
const totalMinutesEthiopian =
|
||||||
|
(totalMinutesUtc + ETHIOPIAN_UTC_OFFSET_HOURS * 60 + 1440) % 1440;
|
||||||
|
|
||||||
|
const hh = Math.floor(totalMinutesEthiopian / 60)
|
||||||
|
.toString()
|
||||||
|
.padStart(2, "0");
|
||||||
|
const mm = (totalMinutesEthiopian % 60).toString().padStart(2, "0");
|
||||||
|
|
||||||
|
return `${hh}:${mm}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCurrentEthiopianTimeInput = (): string => {
|
||||||
|
return toEthiopianTimeInput(new Date());
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ethiopian 12-hour clock parts. The Ethiopian day starts at 6:00 EAT, so EAT
|
||||||
|
* 6:00 AM is clock 12 (day) and EAT 6:00 PM is clock 12 (night).
|
||||||
|
*
|
||||||
|
* `period` is purely a display concern — the stored value is always derived
|
||||||
|
* from the EAT 24-hour time, so the backend payload is unaffected.
|
||||||
|
*/
|
||||||
|
type EthiopianClockPeriod = "day" | "night";
|
||||||
|
|
||||||
|
interface EthiopianClockParts {
|
||||||
|
hour: number; // 1-12
|
||||||
|
minute: number; // 0-59
|
||||||
|
period: EthiopianClockPeriod;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ETHIOPIAN_HOUR_OPTIONS = Array.from({ length: 12 }, (_, i) => i + 1);
|
||||||
|
|
||||||
|
// EAT 24h "HH:mm" -> Ethiopian 12h clock parts (day starts at 6:00 EAT).
|
||||||
|
const eatTimeToEthiopianClock = (eatTime: string): EthiopianClockParts => {
|
||||||
|
const [hhRaw, mmRaw] = (eatTime || "").split(":");
|
||||||
|
const parsedHour = Number(hhRaw);
|
||||||
|
const parsedMinute = Number(mmRaw);
|
||||||
|
const eatHour = Number.isFinite(parsedHour)
|
||||||
|
? ((parsedHour % 24) + 24) % 24
|
||||||
|
: 0;
|
||||||
|
const minute = Number.isFinite(parsedMinute)
|
||||||
|
? ((parsedMinute % 60) + 60) % 60
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
const hour = (eatHour + 6) % 12 || 12;
|
||||||
|
const period: EthiopianClockPeriod =
|
||||||
|
eatHour >= 6 && eatHour < 18 ? "day" : "night";
|
||||||
|
|
||||||
|
return { hour, minute, period };
|
||||||
|
};
|
||||||
|
|
||||||
|
// Ethiopian 12h clock parts -> EAT 24h "HH:mm".
|
||||||
|
const ethiopianClockToEatTime = ({
|
||||||
|
hour,
|
||||||
|
minute,
|
||||||
|
period,
|
||||||
|
}: EthiopianClockParts): string => {
|
||||||
|
const base = (hour % 12) + 6; // day window: 6..17
|
||||||
|
const eatHour = (period === "night" ? base + 12 : base) % 24;
|
||||||
|
const hh = eatHour.toString().padStart(2, "0");
|
||||||
|
const mm = (((minute % 60) + 60) % 60).toString().padStart(2, "0");
|
||||||
|
return `${hh}:${mm}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizeDigits = (value: string): string =>
|
||||||
|
value
|
||||||
|
.replace(/[٠-٩]/g, (digit) => String(digit.charCodeAt(0) - 1632))
|
||||||
|
.replace(/[۰-۹]/g, (digit) => String(digit.charCodeAt(0) - 1776));
|
||||||
|
|
||||||
|
const toEthiopianDateInput = (date: Date): string => {
|
||||||
|
if (
|
||||||
|
!(date instanceof Date) ||
|
||||||
|
Number.isNaN(date.getTime()) ||
|
||||||
|
!$ ||
|
||||||
|
!$.calendars
|
||||||
|
) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const calendar = $.calendars.instance("ethiopian", "am");
|
||||||
|
const ethiopianDate = calendar.fromJSDate(
|
||||||
|
new Date(date.getTime() + ETHIOPIAN_UTC_OFFSET_HOURS * 60 * 60 * 1000),
|
||||||
|
);
|
||||||
|
|
||||||
|
return calendar.formatDate("yyyy-mm-dd", ethiopianDate, {
|
||||||
|
localNumbers: false,
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const EthiopianDatePickerModal: React.FC<EthiopianDatePickerModalProps> = ({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
}) => {
|
||||||
|
const datePickerRef = useRef<HTMLDivElement>(null);
|
||||||
|
const pickerElementRef = useRef<CalendarsPickerElement | null>(null);
|
||||||
|
const isSyncingRef = useRef(false);
|
||||||
|
const lastSyncedDateRef = useRef<string>("");
|
||||||
|
const onChangeRef = useRef(onChange);
|
||||||
|
const initialValueRef = useRef(value);
|
||||||
|
const [selectedDate, setSelectedDate] = useState<string>("");
|
||||||
|
const [selectedTime, setSelectedTime] = useState<string>(
|
||||||
|
getCurrentEthiopianTimeInput,
|
||||||
|
);
|
||||||
|
const selectedTimeRef = useRef(selectedTime);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
onChangeRef.current = onChange;
|
||||||
|
}, [onChange]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
selectedTimeRef.current = selectedTime;
|
||||||
|
}, [selectedTime]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!(value instanceof Date) || Number.isNaN(value.getTime())) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextDate = toEthiopianDateInput(value);
|
||||||
|
// selectedTime is stored as EAT 24h "HH:mm"; the Ethiopian clock shown in
|
||||||
|
// the picker is derived from it via eatTimeToEthiopianClock. Seed it with
|
||||||
|
// EAT 24h here so the picker (and the trigger placeholder) agree.
|
||||||
|
const nextTime = toEthiopianTimeInput(value);
|
||||||
|
|
||||||
|
setSelectedDate(nextDate);
|
||||||
|
setSelectedTime(nextTime);
|
||||||
|
|
||||||
|
if (
|
||||||
|
!pickerElementRef.current ||
|
||||||
|
!$ ||
|
||||||
|
!$.calendars ||
|
||||||
|
!nextDate ||
|
||||||
|
lastSyncedDateRef.current === nextDate
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const calendar = $.calendars.instance("ethiopian", "am");
|
||||||
|
const [year, month, day] = nextDate.split("-").map(Number);
|
||||||
|
if (
|
||||||
|
Number.isFinite(year) &&
|
||||||
|
Number.isFinite(month) &&
|
||||||
|
Number.isFinite(day)
|
||||||
|
) {
|
||||||
|
const ethDate = calendar.newDate(year, month, day);
|
||||||
|
isSyncingRef.current = true;
|
||||||
|
try {
|
||||||
|
pickerElementRef.current.calendarsPicker("setDate", ethDate);
|
||||||
|
lastSyncedDateRef.current = nextDate;
|
||||||
|
} finally {
|
||||||
|
isSyncingRef.current = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore third-party plugin errors when syncing selection
|
||||||
|
}
|
||||||
|
}, [value]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!$ || !$.calendars || !datePickerRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const pickerHost = datePickerRef.current;
|
||||||
|
const calendar = $.calendars.instance("ethiopian", "am");
|
||||||
|
const picker = $(pickerHost) as unknown as CalendarsPickerElement;
|
||||||
|
pickerElementRef.current = picker;
|
||||||
|
|
||||||
|
picker.calendarsPicker({
|
||||||
|
calendar,
|
||||||
|
dateFormat: "yyyy-mm-dd",
|
||||||
|
onSelect: (dates: CalendarsDate[]) => {
|
||||||
|
if (isSyncingRef.current) return;
|
||||||
|
if (!dates?.length) return;
|
||||||
|
|
||||||
|
const date = dates[0].toString();
|
||||||
|
lastSyncedDateRef.current = date;
|
||||||
|
setSelectedDate(date);
|
||||||
|
onChangeRef.current(`${date} ${selectedTimeRef.current}`);
|
||||||
|
},
|
||||||
|
} as CalendarsPickerOptions);
|
||||||
|
|
||||||
|
const initialValue = initialValueRef.current;
|
||||||
|
if (initialValue instanceof Date && !Number.isNaN(initialValue.getTime())) {
|
||||||
|
try {
|
||||||
|
const initialEth = toEthiopianDateInput(initialValue);
|
||||||
|
if (initialEth) {
|
||||||
|
const [y, m, d] = initialEth.split("-").map(Number);
|
||||||
|
if (Number.isFinite(y) && Number.isFinite(m) && Number.isFinite(d)) {
|
||||||
|
isSyncingRef.current = true;
|
||||||
|
try {
|
||||||
|
picker.calendarsPicker("setDate", calendar.newDate(y, m, d));
|
||||||
|
lastSyncedDateRef.current = initialEth;
|
||||||
|
} finally {
|
||||||
|
isSyncingRef.current = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore third-party plugin errors when seeding initial date
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
try {
|
||||||
|
picker.calendarsPicker("destroy");
|
||||||
|
} catch {
|
||||||
|
// ignore cleanup errors from third-party plugin
|
||||||
|
}
|
||||||
|
pickerElementRef.current = null;
|
||||||
|
lastSyncedDateRef.current = "";
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// selectedTime is always EAT 24h "HH:mm"; the Ethiopian clock is a display-only
|
||||||
|
// projection so the stored value (and backend payload) stays unchanged.
|
||||||
|
const ethiopianClock = eatTimeToEthiopianClock(selectedTime);
|
||||||
|
|
||||||
|
const applyEthiopianClock = (next: EthiopianClockParts) => {
|
||||||
|
const eatTime = ethiopianClockToEatTime(next);
|
||||||
|
setSelectedTime(eatTime);
|
||||||
|
|
||||||
|
if (selectedDate) {
|
||||||
|
onChange(`${selectedDate} ${eatTime}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleHourChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||||
|
const hour = Number(e.target.value);
|
||||||
|
applyEthiopianClock({
|
||||||
|
...ethiopianClock,
|
||||||
|
hour: Number.isFinite(hour) ? hour : ethiopianClock.hour,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMinuteChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const parsed = Number(e.target.value);
|
||||||
|
const minute = Number.isFinite(parsed)
|
||||||
|
? Math.max(0, Math.min(59, Math.trunc(parsed)))
|
||||||
|
: 0;
|
||||||
|
applyEthiopianClock({ ...ethiopianClock, minute });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePeriodChange = (period: EthiopianClockPeriod) => {
|
||||||
|
applyEthiopianClock({ ...ethiopianClock, period });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ethiopian-picker-surface w-full space-y-3">
|
||||||
|
<div
|
||||||
|
ref={datePickerRef}
|
||||||
|
className="ethiopian-picker-calendar w-full overflow-hidden rounded-md border border-gray-200 dark:border-gray-700"
|
||||||
|
/>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-xs font-medium text-gray-600 dark:text-gray-300">
|
||||||
|
ሰዓት
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<select
|
||||||
|
aria-label="ሰዓት"
|
||||||
|
className="h-10 flex-1 rounded-md border border-gray-300 bg-white px-2 text-sm text-gray-800 shadow-sm transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
|
||||||
|
value={ethiopianClock.hour}
|
||||||
|
onChange={handleHourChange}>
|
||||||
|
{ETHIOPIAN_HOUR_OPTIONS.map((h) => (
|
||||||
|
<option key={h} value={h}>
|
||||||
|
{h}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<span className="text-sm font-medium text-gray-600 dark:text-gray-300">
|
||||||
|
:
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
max={59}
|
||||||
|
aria-label="ደቂቃ"
|
||||||
|
className="h-10 w-16 rounded-md border border-gray-300 bg-white px-2 text-center text-sm text-gray-800 shadow-sm transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
|
||||||
|
value={ethiopianClock.minute.toString().padStart(2, "0")}
|
||||||
|
onChange={handleMinuteChange}
|
||||||
|
/>
|
||||||
|
<div className="flex overflow-hidden rounded-md border border-gray-300 dark:border-gray-600">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => handlePeriodChange("day")}
|
||||||
|
className={cn(
|
||||||
|
"px-3 py-2 text-sm transition-colors",
|
||||||
|
ethiopianClock.period === "day"
|
||||||
|
? "bg-primary text-white"
|
||||||
|
: "bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
|
||||||
|
)}>
|
||||||
|
ቀን
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => handlePeriodChange("night")}
|
||||||
|
className={cn(
|
||||||
|
"px-3 py-2 text-sm transition-colors",
|
||||||
|
ethiopianClock.period === "night"
|
||||||
|
? "bg-primary text-white"
|
||||||
|
: "bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
|
||||||
|
)}>
|
||||||
|
ሌሊት
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export function convertEthiopianToGregorian(ethiopianDateTime: string): Date {
|
||||||
|
if (!ethiopianDateTime || typeof ethiopianDateTime !== "string") {
|
||||||
|
return new Date(NaN);
|
||||||
|
}
|
||||||
|
|
||||||
|
const normalizedDateTime = normalizeDigits(ethiopianDateTime.trim());
|
||||||
|
const [datePart, timePart = "00:00"] = normalizedDateTime.split(" ");
|
||||||
|
|
||||||
|
if (!datePart || !datePart.match(/^\d{4}-\d{2}-\d{2}$/)) {
|
||||||
|
return new Date(NaN);
|
||||||
|
}
|
||||||
|
|
||||||
|
const cal = $.calendars.instance("ethiopian", "am");
|
||||||
|
const [year, month, day] = datePart.split("-").map(Number);
|
||||||
|
|
||||||
|
if (isNaN(year) || isNaN(month) || isNaN(day)) {
|
||||||
|
return new Date(NaN);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const ethDate = cal.newDate(year, month, day);
|
||||||
|
const gregDate = ethDate.toJSDate();
|
||||||
|
|
||||||
|
const [hours, minutes] = timePart.split(":").map(Number);
|
||||||
|
|
||||||
|
if (
|
||||||
|
isNaN(hours) ||
|
||||||
|
isNaN(minutes) ||
|
||||||
|
hours < 0 ||
|
||||||
|
hours > 23 ||
|
||||||
|
minutes < 0 ||
|
||||||
|
minutes > 59
|
||||||
|
) {
|
||||||
|
return new Date(NaN);
|
||||||
|
}
|
||||||
|
|
||||||
|
const utcDate = new Date(
|
||||||
|
Date.UTC(
|
||||||
|
gregDate.getFullYear(),
|
||||||
|
gregDate.getMonth(),
|
||||||
|
gregDate.getDate(),
|
||||||
|
hours - ETHIOPIAN_UTC_OFFSET_HOURS,
|
||||||
|
minutes,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
return utcDate;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
"[convertEthiopianToGregorian] Error during conversion:",
|
||||||
|
error,
|
||||||
|
);
|
||||||
|
return new Date(NaN);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatEthiopianDate(ethiopianDate: string | Date): string {
|
||||||
|
if (!ethiopianDate) return "";
|
||||||
|
|
||||||
|
if (ethiopianDate instanceof Date) {
|
||||||
|
const day = ethiopianDate.getDate().toString().padStart(2, "0");
|
||||||
|
const month = (ethiopianDate.getMonth() + 1).toString().padStart(2, "0");
|
||||||
|
const year = ethiopianDate.getFullYear();
|
||||||
|
return `${day}/${month}/${year}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const parts = ethiopianDate.split("-");
|
||||||
|
if (parts.length !== 3) return ethiopianDate;
|
||||||
|
|
||||||
|
const [year, month, day] = parts;
|
||||||
|
return `${day.padStart(2, "0")}/${month.padStart(2, "0")}/${year}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EthiopianDatePickerModal;
|
||||||
@@ -0,0 +1,233 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Control, FieldValues } from "react-hook-form";
|
||||||
|
import $ from "@/shared/common/jquery-global";
|
||||||
|
import { FormField, FormItem, FormLabel, FormMessage } from "../../ui/form";
|
||||||
|
import EthiopianDatePickerModal, {
|
||||||
|
convertEthiopianToGregorian,
|
||||||
|
} from "./AmharicDatePicker";
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
|
||||||
|
import { Button } from "../../ui/button";
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import { CalendarIcon } from "lucide-react";
|
||||||
|
import { Calendar } from "../../ui/calendar";
|
||||||
|
import { Input } from "../../ui/input";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import {
|
||||||
|
formatEthiopianClockTime,
|
||||||
|
utcToEthiopian,
|
||||||
|
} from "@/shared/common/utils/ethiopianTimeZone";
|
||||||
|
|
||||||
|
interface DateFieldProps {
|
||||||
|
name: "startDate" | "endDate";
|
||||||
|
label: string;
|
||||||
|
control: Control<FieldValues>;
|
||||||
|
isEthiopian: boolean;
|
||||||
|
minDate?: Date | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface EthiopianCalendarFormatter {
|
||||||
|
fromJSDate: (jsDate: Date) => unknown;
|
||||||
|
formatDate: (
|
||||||
|
format: string,
|
||||||
|
date: unknown,
|
||||||
|
settings?: { localNumbers?: boolean },
|
||||||
|
) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DateField: React.FC<DateFieldProps> = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
control,
|
||||||
|
isEthiopian,
|
||||||
|
minDate,
|
||||||
|
}) => {
|
||||||
|
const [gregorianTimeFallback, setGregorianTimeFallback] = useState<string>(
|
||||||
|
() => format(new Date(), "HH:mm"),
|
||||||
|
);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={name}
|
||||||
|
render={({ field }) => {
|
||||||
|
const getGregorianTimeValue = (): string => {
|
||||||
|
if (
|
||||||
|
field.value instanceof Date &&
|
||||||
|
!Number.isNaN(field.value.getTime())
|
||||||
|
) {
|
||||||
|
return format(field.value, "HH:mm");
|
||||||
|
}
|
||||||
|
return gregorianTimeFallback;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEthiopianChange = (ethiopianDate: string) => {
|
||||||
|
const gregorianDate = convertEthiopianToGregorian(ethiopianDate);
|
||||||
|
if (!Number.isNaN(gregorianDate.getTime())) {
|
||||||
|
field.onChange(gregorianDate);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getDisplayText = (): string => {
|
||||||
|
if (isEthiopian) {
|
||||||
|
if (
|
||||||
|
field.value instanceof Date &&
|
||||||
|
!Number.isNaN(field.value.getTime())
|
||||||
|
) {
|
||||||
|
const ethiopianTime = utcToEthiopian(field.value);
|
||||||
|
const timeStr = formatEthiopianClockTime(field.value);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const ethiopianCalendar = $.calendars.instance(
|
||||||
|
"ethiopian",
|
||||||
|
"am",
|
||||||
|
) as unknown as EthiopianCalendarFormatter;
|
||||||
|
const ethiopianDate =
|
||||||
|
ethiopianCalendar.fromJSDate(ethiopianTime);
|
||||||
|
const dateStr = ethiopianCalendar.formatDate(
|
||||||
|
"yyyy-mm-dd",
|
||||||
|
ethiopianDate,
|
||||||
|
{ localNumbers: true },
|
||||||
|
);
|
||||||
|
return `${dateStr} ${timeStr}`;
|
||||||
|
} catch {
|
||||||
|
const fallbackDate = format(ethiopianTime, "yyyy-MM-dd");
|
||||||
|
return `${fallbackDate} ${timeStr}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return t("delegation.pickDate");
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
field.value instanceof Date &&
|
||||||
|
!Number.isNaN(field.value.getTime())
|
||||||
|
) {
|
||||||
|
const dateText = format(field.value, "PPP");
|
||||||
|
const timeText = format(field.value, "HH:mm");
|
||||||
|
return `${dateText} ${timeText}`;
|
||||||
|
}
|
||||||
|
return t("delegation.pickDate");
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItem className="flex flex-col gap-2">
|
||||||
|
<FormLabel className="text-base font-medium text-gray-700 dark:text-gray-200">
|
||||||
|
{label}
|
||||||
|
</FormLabel>
|
||||||
|
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className={cn(
|
||||||
|
"group h-11 w-full justify-between rounded-md border border-gray-300 bg-white px-3 text-left text-base font-normal shadow-sm transition-colors hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-100",
|
||||||
|
!field.value && "text-gray-500 dark:text-gray-400",
|
||||||
|
)}>
|
||||||
|
<span className="truncate">{getDisplayText()}</span>
|
||||||
|
<CalendarIcon className="ml-3 h-4 w-4 shrink-0 text-gray-500 transition-colors group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
|
||||||
|
<PopoverContent
|
||||||
|
className="w-auto max-w-[95vw] overflow-x-auto rounded-lg border border-gray-200 bg-white p-3 shadow-xl dark:border-gray-700 dark:bg-gray-900"
|
||||||
|
side="bottom"
|
||||||
|
align="start"
|
||||||
|
sideOffset={8}
|
||||||
|
avoidCollisions={false}>
|
||||||
|
{isEthiopian ? (
|
||||||
|
<div className="flex min-w-[20rem] flex-col gap-2">
|
||||||
|
<EthiopianDatePickerModal
|
||||||
|
value={field.value}
|
||||||
|
onChange={handleEthiopianChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="min-w-[20rem] space-y-3">
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={
|
||||||
|
field.value instanceof Date &&
|
||||||
|
!Number.isNaN(field.value.getTime())
|
||||||
|
? field.value
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
defaultMonth={
|
||||||
|
field.value instanceof Date &&
|
||||||
|
!Number.isNaN(field.value.getTime())
|
||||||
|
? field.value
|
||||||
|
: minDate instanceof Date &&
|
||||||
|
!Number.isNaN(minDate.getTime())
|
||||||
|
? minDate
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
onSelect={(selectedDate) => {
|
||||||
|
if (!selectedDate) {
|
||||||
|
field.onChange(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [hours, minutes] = getGregorianTimeValue()
|
||||||
|
.split(":")
|
||||||
|
.map(Number);
|
||||||
|
const nextDate = new Date(selectedDate);
|
||||||
|
nextDate.setHours(hours || 0, minutes || 0, 0, 0);
|
||||||
|
field.onChange(nextDate);
|
||||||
|
}}
|
||||||
|
initialFocus
|
||||||
|
className="w-full p-2"
|
||||||
|
disabled={(date) => {
|
||||||
|
const startOfToday = new Date(
|
||||||
|
new Date().setHours(0, 0, 0, 0),
|
||||||
|
);
|
||||||
|
if (date < startOfToday) return true;
|
||||||
|
if (
|
||||||
|
minDate instanceof Date &&
|
||||||
|
!Number.isNaN(minDate.getTime())
|
||||||
|
) {
|
||||||
|
const startOfMin = new Date(minDate);
|
||||||
|
startOfMin.setHours(0, 0, 0, 0);
|
||||||
|
if (date < startOfMin) return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="space-y-1 px-2 pb-1">
|
||||||
|
<p className="text-xs font-medium text-gray-600 dark:text-gray-300">
|
||||||
|
{t("common.Time", "Time")}
|
||||||
|
</p>
|
||||||
|
<Input
|
||||||
|
type="time"
|
||||||
|
value={getGregorianTimeValue()}
|
||||||
|
onChange={(event) => {
|
||||||
|
const newTime = event.target.value;
|
||||||
|
setGregorianTimeFallback(newTime);
|
||||||
|
|
||||||
|
if (
|
||||||
|
field.value instanceof Date &&
|
||||||
|
!Number.isNaN(field.value.getTime())
|
||||||
|
) {
|
||||||
|
const [hours, minutes] = newTime
|
||||||
|
.split(":")
|
||||||
|
.map(Number);
|
||||||
|
const nextDate = new Date(field.value);
|
||||||
|
nextDate.setHours(hours || 0, minutes || 0, 0, 0);
|
||||||
|
field.onChange(nextDate);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="h-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
<FormMessage className="text-sm" />
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DateField;
|
||||||
@@ -0,0 +1,242 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "../../ui/form";
|
||||||
|
import EthiopianDatePickerModal, {
|
||||||
|
convertEthiopianToGregorian,
|
||||||
|
} from "./AmharicDatePicker";
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
|
||||||
|
import { Button } from "../../ui/button";
|
||||||
|
import { Input } from "../../ui/input";
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import { CalendarIcon, Clock } from "lucide-react";
|
||||||
|
import { Calendar } from "../../ui/calendar";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import $ from "@/shared/common/jquery-global";
|
||||||
|
import {
|
||||||
|
formatEthiopianClockTime,
|
||||||
|
utcToEthiopian,
|
||||||
|
} from "@/shared/common/utils/ethiopianTimeZone";
|
||||||
|
|
||||||
|
interface DateTimeFieldProps {
|
||||||
|
name: "startDate" | "endDate";
|
||||||
|
label: string;
|
||||||
|
control: any;
|
||||||
|
isEthiopian: boolean;
|
||||||
|
isEditing: boolean;
|
||||||
|
fieldValue?: Date | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface EthiopianCalendarFormatter {
|
||||||
|
fromJSDate: (jsDate: Date) => unknown;
|
||||||
|
formatDate: (
|
||||||
|
format: string,
|
||||||
|
date: unknown,
|
||||||
|
settings?: { localNumbers?: boolean },
|
||||||
|
) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DateTimeField: React.FC<DateTimeFieldProps> = ({
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
control,
|
||||||
|
isEthiopian,
|
||||||
|
isEditing,
|
||||||
|
fieldValue,
|
||||||
|
}) => {
|
||||||
|
const [ethiopianDisplay, setEthiopianDisplay] = useState<string | null>("");
|
||||||
|
const [showTimeInput, setShowTimeInput] = useState(false);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={name}
|
||||||
|
render={({ field }) => {
|
||||||
|
const handleEthiopianChange = (ethiopianDate: string) => {
|
||||||
|
setEthiopianDisplay(ethiopianDate);
|
||||||
|
const gregorianDate = convertEthiopianToGregorian(ethiopianDate);
|
||||||
|
field.onChange(gregorianDate);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTimeChange = (hours: string, minutes: string) => {
|
||||||
|
if (field.value) {
|
||||||
|
const date = new Date(field.value);
|
||||||
|
date.setHours(parseInt(hours) || 0, parseInt(minutes) || 0, 0, 0);
|
||||||
|
field.onChange(date);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTimeString = () => {
|
||||||
|
if (!field.value) return "";
|
||||||
|
const date = new Date(field.value);
|
||||||
|
const hours = String(date.getHours()).padStart(2, "0");
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||||
|
return `${hours}:${minutes}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getDateTimeDisplay = () => {
|
||||||
|
if (!field.value) return t("delegation.pickDate");
|
||||||
|
const date = new Date(field.value);
|
||||||
|
if (Number.isNaN(date.getTime())) return t("delegation.pickDate");
|
||||||
|
const timeStr = isEthiopian
|
||||||
|
? formatEthiopianClockTime(date)
|
||||||
|
: getTimeString();
|
||||||
|
|
||||||
|
const dateStr = (() => {
|
||||||
|
if (!isEthiopian) return format(date, "PPP");
|
||||||
|
if (ethiopianDisplay) return ethiopianDisplay.split(" ")[0];
|
||||||
|
|
||||||
|
try {
|
||||||
|
const ethiopianCalendar = $.calendars.instance(
|
||||||
|
"ethiopian",
|
||||||
|
"am",
|
||||||
|
) as unknown as EthiopianCalendarFormatter;
|
||||||
|
const ethiopianDate = ethiopianCalendar.fromJSDate(
|
||||||
|
utcToEthiopian(date),
|
||||||
|
);
|
||||||
|
return ethiopianCalendar.formatDate(
|
||||||
|
"yyyy-mm-dd",
|
||||||
|
ethiopianDate,
|
||||||
|
{ localNumbers: true },
|
||||||
|
);
|
||||||
|
} catch {
|
||||||
|
return format(utcToEthiopian(date), "yyyy-MM-dd");
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
return `${dateStr} ${timeStr}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItem className="flex flex-col gap-2">
|
||||||
|
<FormLabel className="text-base font-medium text-gray-700">
|
||||||
|
{label}
|
||||||
|
</FormLabel>
|
||||||
|
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<FormControl>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className={cn(
|
||||||
|
"w-full justify-between px-3 py-2 text-left font-normal text-base",
|
||||||
|
!field.value && "text-muted-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{getDateTimeDisplay()}
|
||||||
|
<CalendarIcon className="ml-2 h-4 w-4 text-gray-500" />
|
||||||
|
</Button>
|
||||||
|
</FormControl>
|
||||||
|
</PopoverTrigger>
|
||||||
|
|
||||||
|
<PopoverContent
|
||||||
|
className="w-auto max-w-[95vw] overflow-x-auto p-4"
|
||||||
|
side="bottom"
|
||||||
|
align="start"
|
||||||
|
avoidCollisions={false}
|
||||||
|
>
|
||||||
|
<div className="min-w-[20rem] space-y-4">
|
||||||
|
{/* Date Picker */}
|
||||||
|
{isEthiopian ? (
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<FormControl>
|
||||||
|
<EthiopianDatePickerModal
|
||||||
|
value={field.value}
|
||||||
|
onChange={handleEthiopianChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={field.value}
|
||||||
|
onSelect={field.onChange}
|
||||||
|
initialFocus
|
||||||
|
disabled={(date) =>
|
||||||
|
date < new Date(new Date().setHours(0, 0, 0, 0))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Time Picker — Ethiopian mode uses the Ethiopian-clock
|
||||||
|
picker inside EthiopianDatePickerModal above, so this
|
||||||
|
Gregorian-local time picker is only shown otherwise. */}
|
||||||
|
{!isEthiopian && field.value && (
|
||||||
|
<div className="border-t pt-4">
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<Clock className="h-4 w-4 text-gray-500" />
|
||||||
|
<label className="text-sm font-medium text-gray-700">
|
||||||
|
{t("delegation.time") || "Time"}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<div className="flex-1">
|
||||||
|
<label className="text-xs text-gray-600 block mb-1">
|
||||||
|
{t("delegation.hours") || "Hours"}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
max="23"
|
||||||
|
value={String(
|
||||||
|
new Date(field.value).getHours(),
|
||||||
|
).padStart(2, "0")}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleTimeChange(
|
||||||
|
e.target.value,
|
||||||
|
String(
|
||||||
|
new Date(field.value).getMinutes(),
|
||||||
|
).padStart(2, "0"),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="text-center text-sm"
|
||||||
|
placeholder="00"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-center pt-6">
|
||||||
|
:
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<label className="text-xs text-gray-600 block mb-1">
|
||||||
|
{t("delegation.minutes") || "Minutes"}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
max="59"
|
||||||
|
value={String(
|
||||||
|
new Date(field.value).getMinutes(),
|
||||||
|
).padStart(2, "0")}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleTimeChange(
|
||||||
|
String(
|
||||||
|
new Date(field.value).getHours(),
|
||||||
|
).padStart(2, "0"),
|
||||||
|
e.target.value,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="text-center text-sm"
|
||||||
|
placeholder="00"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DateTimeField;
|
||||||
@@ -0,0 +1,806 @@
|
|||||||
|
import React, { JSX, useRef, useState } from "react";
|
||||||
|
import { Trash2, X, ChevronDown, Search } from "lucide-react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "../../ui/form";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "../../ui/select";
|
||||||
|
import { MultiSelect } from "../../ui/multi-select";
|
||||||
|
import { Input } from "../../ui/input";
|
||||||
|
import { Button } from "../../ui/button";
|
||||||
|
import TreeView, { TreeViewItem } from "@/shared/common/ui/treeSelect";
|
||||||
|
|
||||||
|
import { Controller } from "react-hook-form";
|
||||||
|
import { SingleSelect } from "../../ui/single-select";
|
||||||
|
import { useLocalizedName } from "../../localizedName";
|
||||||
|
import i18next from "i18next";
|
||||||
|
import { getCheckedLeafNodes } from "@/record-management/components/userRecords/common/treeUtils";
|
||||||
|
|
||||||
|
type BaseSelectOption = {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
unitId?: string;
|
||||||
|
};
|
||||||
|
interface CustomSelectProps {
|
||||||
|
form: any; // your react-hook-form instance
|
||||||
|
name: string;
|
||||||
|
label: string;
|
||||||
|
placeholder: string;
|
||||||
|
options: { id: string; name: { en: string; am: string } }[];
|
||||||
|
localizedName: (name: { en: string; am: string }) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1️⃣ Form Select Field
|
||||||
|
export const FormSelectField = ({
|
||||||
|
control,
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
options,
|
||||||
|
placeholder,
|
||||||
|
className,
|
||||||
|
customLabel,
|
||||||
|
disabled,
|
||||||
|
onCustomChange,
|
||||||
|
}: {
|
||||||
|
control: any;
|
||||||
|
name: string;
|
||||||
|
label: string;
|
||||||
|
options: BaseSelectOption[];
|
||||||
|
placeholder?: string;
|
||||||
|
className?: string;
|
||||||
|
customLabel?: React.ReactNode;
|
||||||
|
disabled?: boolean;
|
||||||
|
onCustomChange?: (value: string) => void;
|
||||||
|
}) => (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={name}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className={className || "space-y-1"}>
|
||||||
|
{customLabel ? (
|
||||||
|
customLabel
|
||||||
|
) : (
|
||||||
|
<FormLabel>
|
||||||
|
{name === "headerId" ||
|
||||||
|
name === "footerId" ||
|
||||||
|
name === "recordType" ||
|
||||||
|
name === "initiationType" ||
|
||||||
|
name === "initiatedAs" ? (
|
||||||
|
<span>
|
||||||
|
{label} <span className="text-red-500 text-xl">*</span>
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
label
|
||||||
|
)}
|
||||||
|
</FormLabel>
|
||||||
|
)}
|
||||||
|
<FormControl>
|
||||||
|
<Select
|
||||||
|
value={field.value ?? ""}
|
||||||
|
disabled={disabled}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
field.onChange(value);
|
||||||
|
onCustomChange?.(value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder={placeholder} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent className="w-full max-w-full sm:max-w-md z-[60] overflow-x-auto">
|
||||||
|
{options.map((option) => (
|
||||||
|
<SelectItem key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const FormSingleSelectField = ({
|
||||||
|
control,
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
options,
|
||||||
|
placeholder = "Select option",
|
||||||
|
onCustomChange,
|
||||||
|
}: {
|
||||||
|
control: any;
|
||||||
|
name: string;
|
||||||
|
label: string;
|
||||||
|
options: BaseSelectOption[];
|
||||||
|
placeholder?: string;
|
||||||
|
onCustomChange?: (selectedValue: string) => void;
|
||||||
|
}) => (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={name}
|
||||||
|
render={({ field }) => {
|
||||||
|
const handleChange = (value: string) => {
|
||||||
|
field.onChange(value);
|
||||||
|
if (onCustomChange) onCustomChange(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItem className="space-y-1">
|
||||||
|
<FormLabel>{label}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<SingleSelect
|
||||||
|
options={options}
|
||||||
|
value={field.value || ""}
|
||||||
|
onValueChange={handleChange}
|
||||||
|
placeholder={placeholder}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
// 2️⃣ Multi Select Field
|
||||||
|
export const FormMultiSelectField = ({
|
||||||
|
control,
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
options,
|
||||||
|
placeholder = "Select options",
|
||||||
|
maxCount,
|
||||||
|
disabled,
|
||||||
|
onCustomChange,
|
||||||
|
}: {
|
||||||
|
control: any;
|
||||||
|
name: string;
|
||||||
|
label: string;
|
||||||
|
options: BaseSelectOption[];
|
||||||
|
placeholder?: string;
|
||||||
|
maxCount?: number;
|
||||||
|
disabled?: boolean;
|
||||||
|
onCustomChange?: (selectedValues: string[]) => void;
|
||||||
|
}) => (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={name}
|
||||||
|
render={({ field }) => {
|
||||||
|
const handleChange = (values: string[]) => {
|
||||||
|
field.onChange(values);
|
||||||
|
if (onCustomChange) onCustomChange(values);
|
||||||
|
};
|
||||||
|
|
||||||
|
const fieldValue = Array.isArray(field.value)
|
||||||
|
? field.value
|
||||||
|
: field.value
|
||||||
|
? [field.value]
|
||||||
|
: [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItem className="space-y-1">
|
||||||
|
<FormLabel>
|
||||||
|
{name === "toPositions" ||
|
||||||
|
name === "toEmployees" ||
|
||||||
|
name === "collaborators" ||
|
||||||
|
name === "receivingDepartments" ||
|
||||||
|
name === "assignedEmployees" ? (
|
||||||
|
<span>
|
||||||
|
{label} <span className="text-red-500 text-xl">*</span>
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
label
|
||||||
|
)}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<MultiSelect
|
||||||
|
options={options}
|
||||||
|
value={fieldValue} // controlled value
|
||||||
|
onValueChange={handleChange} // controlled onChange
|
||||||
|
placeholder={placeholder}
|
||||||
|
maxCount={maxCount || 5}
|
||||||
|
disabled={disabled}
|
||||||
|
className="w-full max-w-full sm:max-w-md overflow-x-auto"
|
||||||
|
animation={0}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const FormTreeSelectField = ({
|
||||||
|
control,
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
options,
|
||||||
|
handleCheckChange,
|
||||||
|
collapsible = false,
|
||||||
|
localizedName,
|
||||||
|
selectedCountResolver,
|
||||||
|
}: {
|
||||||
|
control: any;
|
||||||
|
name: string;
|
||||||
|
label: string;
|
||||||
|
options: TreeViewItem[];
|
||||||
|
handleCheckChange?:
|
||||||
|
| ((item: TreeViewItem | TreeViewItem[], checked: boolean) => void)
|
||||||
|
| undefined;
|
||||||
|
collapsible?: boolean;
|
||||||
|
localizedName: (
|
||||||
|
name?:
|
||||||
|
| {
|
||||||
|
am: string;
|
||||||
|
en: string;
|
||||||
|
}
|
||||||
|
| undefined,
|
||||||
|
) => string;
|
||||||
|
selectedCountResolver?: (value: unknown) => number;
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [isOpen, setIsOpen] = React.useState(!collapsible);
|
||||||
|
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// Close dropdown on outside click
|
||||||
|
React.useEffect(() => {
|
||||||
|
function handleClickOutside(event: MouseEvent) {
|
||||||
|
if (
|
||||||
|
containerRef.current &&
|
||||||
|
!containerRef.current.contains(event.target as Node)
|
||||||
|
) {
|
||||||
|
setIsOpen(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener("mousedown", handleClickOutside);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("mousedown", handleClickOutside);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (collapsible) {
|
||||||
|
return (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={name}
|
||||||
|
rules={{ required: `${label} is required` }}
|
||||||
|
render={({ field }) => {
|
||||||
|
const selectedCount = selectedCountResolver
|
||||||
|
? selectedCountResolver(field.value)
|
||||||
|
: getCheckedLeafNodes(Array.isArray(field.value) ? field.value : [])
|
||||||
|
.length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItem
|
||||||
|
ref={containerRef}
|
||||||
|
className="sm:col-span-3 w-full min-w-0 max-w-full"
|
||||||
|
>
|
||||||
|
<FormLabel>
|
||||||
|
{name === "receivingUnitIds" ? (
|
||||||
|
<span>
|
||||||
|
{label} <span className="text-red-500 text-xl">*</span>
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
label
|
||||||
|
)}
|
||||||
|
</FormLabel>
|
||||||
|
<div className="relative w-full min-w-0 max-w-full">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
className="h-auto min-h-10 w-full max-w-full justify-between gap-2 py-2"
|
||||||
|
>
|
||||||
|
<span className="block min-w-0 flex-1 truncate text-left">
|
||||||
|
{selectedCount > 0
|
||||||
|
? `${selectedCount} unit(s) selected`
|
||||||
|
: `${t("common.select")} ${label}`}
|
||||||
|
</span>
|
||||||
|
<ChevronDown
|
||||||
|
className={`h-4 w-4 shrink-0 transition-transform ${
|
||||||
|
isOpen ? "rotate-180" : ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{isOpen && (
|
||||||
|
<div className="absolute left-0 right-0 z-50 mt-1 w-full min-w-0 max-w-full overflow-hidden rounded-md border bg-background p-2 shadow-md">
|
||||||
|
<TreeView
|
||||||
|
embedded
|
||||||
|
className="max-h-[55vh] overflow-y-auto sm:max-h-[450px]"
|
||||||
|
data={options}
|
||||||
|
showExpandAll={false}
|
||||||
|
showCheckboxes
|
||||||
|
onCheckChange={handleCheckChange}
|
||||||
|
localizedName={localizedName}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={name}
|
||||||
|
rules={{ required: `${label} is required` }}
|
||||||
|
render={() => (
|
||||||
|
<FormItem className="sm:col-span-3 w-full min-w-0">
|
||||||
|
<FormLabel>{label}</FormLabel>
|
||||||
|
<TreeView
|
||||||
|
className="max-h-[55vh] overflow-y-auto sm:max-h-[450px]"
|
||||||
|
data={options}
|
||||||
|
showExpandAll={false}
|
||||||
|
showCheckboxes
|
||||||
|
onCheckChange={handleCheckChange}
|
||||||
|
localizedName={localizedName}
|
||||||
|
/>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 3️⃣ Addable List Field (string-based)
|
||||||
|
export const FormAddableList = ({
|
||||||
|
form,
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
placeholder = "",
|
||||||
|
valueAdapter,
|
||||||
|
}: {
|
||||||
|
form: any;
|
||||||
|
name: string;
|
||||||
|
label: string;
|
||||||
|
placeholder?: string;
|
||||||
|
valueAdapter?: {
|
||||||
|
getDisplayItems: (fieldValue: unknown) => string[];
|
||||||
|
onItemsChange: (items: string[], fieldValue: unknown) => unknown;
|
||||||
|
};
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [pendingValue, setPendingValue] = useState("");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={name}
|
||||||
|
render={({ field }) => {
|
||||||
|
const items = valueAdapter
|
||||||
|
? valueAdapter.getDisplayItems(field.value)
|
||||||
|
: Array.isArray(field.value)
|
||||||
|
? field.value
|
||||||
|
: [];
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
const value = pendingValue.trim();
|
||||||
|
if (value && !items.includes(value)) {
|
||||||
|
const updatedItems = [...items, value];
|
||||||
|
field.onChange(
|
||||||
|
valueAdapter
|
||||||
|
? valueAdapter.onItemsChange(updatedItems, field.value)
|
||||||
|
: updatedItems,
|
||||||
|
);
|
||||||
|
setPendingValue("");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (index: number) => {
|
||||||
|
const updatedItems = items.filter(
|
||||||
|
(_: string, i: number) => i !== index,
|
||||||
|
);
|
||||||
|
field.onChange(
|
||||||
|
valueAdapter
|
||||||
|
? valueAdapter.onItemsChange(updatedItems, field.value)
|
||||||
|
: updatedItems,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
e.preventDefault();
|
||||||
|
handleAdd();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItem className="space-y-2">
|
||||||
|
<FormLabel>{label}</FormLabel>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-2">
|
||||||
|
<FormControl className="flex-1">
|
||||||
|
<Input
|
||||||
|
placeholder={placeholder}
|
||||||
|
value={pendingValue}
|
||||||
|
onChange={(e) => setPendingValue(e.target.value)}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
onBlur={handleAdd}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
onClick={handleAdd}
|
||||||
|
className="bg-primary-500 text-white hover:bg-primary-600"
|
||||||
|
>
|
||||||
|
{t("addRecord.Add")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{items.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-1 mt-2">
|
||||||
|
{items.map((unit: string, index: number) => (
|
||||||
|
<div
|
||||||
|
key={`${unit}-${index}`}
|
||||||
|
className="flex items-center gap-1 px-2 py-1 bg-blue-50 text-blue-700 border border-blue-100 rounded-md"
|
||||||
|
>
|
||||||
|
<span className="text-sm truncate max-w-[200px]">
|
||||||
|
{unit}
|
||||||
|
</span>
|
||||||
|
<X
|
||||||
|
size={14}
|
||||||
|
className="cursor-pointer text-blue-700 hover:text-red-600 ml-1"
|
||||||
|
onClick={() => handleDelete(index)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export const ClearableSelect = ({
|
||||||
|
form,
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
placeholder = "",
|
||||||
|
options,
|
||||||
|
localizedName,
|
||||||
|
}: {
|
||||||
|
form: any;
|
||||||
|
name: string;
|
||||||
|
label: string;
|
||||||
|
placeholder?: string;
|
||||||
|
options: { id: string; name: any }[];
|
||||||
|
localizedName: (name: any) => string;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<FormItem className="space-y-2">
|
||||||
|
<FormLabel>{label}</FormLabel>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={name}
|
||||||
|
render={({ field }) => (
|
||||||
|
<>
|
||||||
|
{field.value ? (
|
||||||
|
// Selected value with X to clear
|
||||||
|
<div className="flex items-center justify-between border text-sm rounded-md px-3 py-2 bg-gray-50">
|
||||||
|
<span>
|
||||||
|
{localizedName(
|
||||||
|
options.find((o) => o.id === field.value)?.name,
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<X
|
||||||
|
size={17}
|
||||||
|
className="cursor-pointer text-blue-700 hover:text-red-600 ml-1"
|
||||||
|
onClick={() => field.onChange("")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
// Select dropdown
|
||||||
|
<Select
|
||||||
|
value={field.value}
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
defaultValue={field.value}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder={placeholder} />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent className="w-full max-w-full sm:max-w-md z-[60] overflow-x-auto">
|
||||||
|
{options?.map((item) => (
|
||||||
|
<SelectItem key={item.id} value={item.id}>
|
||||||
|
{localizedName(item.name)}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
<FormMessage />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const CustomSelect = ({
|
||||||
|
form,
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
placeholder,
|
||||||
|
options,
|
||||||
|
localizedName,
|
||||||
|
}: CustomSelectProps) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label className="text-sm font-medium">{label}</label>
|
||||||
|
<Controller
|
||||||
|
control={form.control}
|
||||||
|
name={name}
|
||||||
|
render={({ field }) => {
|
||||||
|
const matchingOption = options.find((opt) => {
|
||||||
|
const english = opt.name?.en ?? "";
|
||||||
|
const amharic = opt.name?.am ?? "";
|
||||||
|
return (
|
||||||
|
field.value === opt.id ||
|
||||||
|
field.value === english ||
|
||||||
|
field.value === amharic
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Treat undefined, null, and empty string as no selection
|
||||||
|
const hasValue = field.value !== undefined && field.value !== null && field.value !== "";
|
||||||
|
const resolvedValue = matchingOption && hasValue
|
||||||
|
? matchingOption.id
|
||||||
|
: "";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
value={resolvedValue}
|
||||||
|
onValueChange={(val) => {
|
||||||
|
if (val === "__clear__" || val === "") {
|
||||||
|
field.onChange("");
|
||||||
|
} else {
|
||||||
|
field.onChange(val);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder={placeholder} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{options.map((opt) => (
|
||||||
|
<SelectItem key={opt.id} value={opt.id}>
|
||||||
|
{localizedName(opt.name)}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
<SelectItem value="__clear__">{t("common.Cancel")}</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface TreeViewItemO {
|
||||||
|
id: string;
|
||||||
|
name: string | { en: string; am: string }; // allow localized or raw
|
||||||
|
value?: string;
|
||||||
|
children?: TreeViewItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SimpleTreeSelectProps {
|
||||||
|
label: string;
|
||||||
|
options: TreeViewItemO[];
|
||||||
|
value: string | null;
|
||||||
|
onChange: (id: string | null) => void;
|
||||||
|
collapsible?: boolean;
|
||||||
|
localizedName?: (name?: { en?: string; am?: string } | undefined) => string;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SimpleTreeSelect = ({
|
||||||
|
label,
|
||||||
|
options,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
collapsible = false,
|
||||||
|
localizedName,
|
||||||
|
className,
|
||||||
|
}: SimpleTreeSelectProps) => {
|
||||||
|
const [isOpen, setIsOpen] = useState(!collapsible);
|
||||||
|
const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
const toggleExpand = (id: string) => {
|
||||||
|
const newSet = new Set(expandedItems);
|
||||||
|
if (newSet.has(id)) newSet.delete(id);
|
||||||
|
else newSet.add(id);
|
||||||
|
setExpandedItems(newSet);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelect = (id: string) => {
|
||||||
|
onChange(id);
|
||||||
|
// Optional: close dropdown after selection
|
||||||
|
// setIsOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get full path for a selected item
|
||||||
|
const findSelectedPath = (
|
||||||
|
items: TreeViewItemO[],
|
||||||
|
parentPath: string[] = [],
|
||||||
|
): string | null => {
|
||||||
|
for (const item of items) {
|
||||||
|
const name =
|
||||||
|
typeof item.name === "string"
|
||||||
|
? item.name
|
||||||
|
: (localizedName?.(item.name) ?? item.name.en);
|
||||||
|
|
||||||
|
if (item.id === value) {
|
||||||
|
return [...parentPath, name].join(" / ");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.children && item.children.length > 0) {
|
||||||
|
const childPath = findSelectedPath(item.children, [
|
||||||
|
...parentPath,
|
||||||
|
name,
|
||||||
|
]);
|
||||||
|
if (childPath) return childPath;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderTree = (items: TreeViewItemO[]): JSX.Element[] => {
|
||||||
|
return items.flatMap((item) => {
|
||||||
|
const hasChildren = item.children && item.children.length > 0;
|
||||||
|
const isExpanded = expandedItems.has(item.id);
|
||||||
|
|
||||||
|
// Determine if any child is selected to highlight parent
|
||||||
|
const isParentSelected = hasChildren
|
||||||
|
? item.children!.some((child) => child.id === value)
|
||||||
|
: false;
|
||||||
|
|
||||||
|
// Skip single-unit org
|
||||||
|
if (hasChildren && item.children!.length === 1) {
|
||||||
|
return renderTree(item.children!);
|
||||||
|
}
|
||||||
|
|
||||||
|
const itemLabel =
|
||||||
|
typeof item.name === "string"
|
||||||
|
? item.name
|
||||||
|
: (localizedName?.(item.name) ?? item.name.en);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={item.id} className="ml-4 mb-1">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
{hasChildren && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => toggleExpand(item.id)}
|
||||||
|
className="w-4 h-4 flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<ChevronDown
|
||||||
|
className={`h-3 w-3 transition-transform ${
|
||||||
|
isExpanded ? "rotate-180" : ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<label className="flex items-center space-x-2">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="unit-select"
|
||||||
|
checked={value === item.id || isParentSelected}
|
||||||
|
onChange={() => handleSelect(item.id)}
|
||||||
|
/>
|
||||||
|
<span className={isParentSelected ? "font-semibold" : ""}>
|
||||||
|
{itemLabel}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{hasChildren && isExpanded && (
|
||||||
|
<div className="ml-4">{renderTree(item.children!)}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectedPathLabel = findSelectedPath(options);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={className ?? "mb-4"}>
|
||||||
|
<label className="block font-semibold mb-1">{label}</label>
|
||||||
|
|
||||||
|
{collapsible && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
className="w-full max-w-lg justify-between mb-2"
|
||||||
|
>
|
||||||
|
<span className="truncate">
|
||||||
|
{selectedPathLabel ?? label}
|
||||||
|
</span>
|
||||||
|
<ChevronDown
|
||||||
|
className={`h-4 w-4 transition-transform ${
|
||||||
|
isOpen ? "rotate-180" : ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isOpen && (
|
||||||
|
<div className="border rounded-md p-2 bg-background max-h-96 overflow-y-auto max-w-lg">
|
||||||
|
{renderTree(options)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SelectedItemsChips = ({
|
||||||
|
items,
|
||||||
|
onRemove,
|
||||||
|
label,
|
||||||
|
localizedName,
|
||||||
|
}: {
|
||||||
|
items: TreeViewItem[];
|
||||||
|
onRemove: (value: string) => void;
|
||||||
|
label?: string;
|
||||||
|
localizedName: (
|
||||||
|
name?:
|
||||||
|
| {
|
||||||
|
am: string;
|
||||||
|
en: string;
|
||||||
|
}
|
||||||
|
| undefined,
|
||||||
|
) => string;
|
||||||
|
}) => {
|
||||||
|
if (!items?.length) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid gap-2 sm:col-span-3">
|
||||||
|
{label && <p className="text-sm font-semibold mb-2">{label}</p>}
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{items.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
className="flex items-center bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm"
|
||||||
|
>
|
||||||
|
<span className="truncate max-w-[180px]">
|
||||||
|
{localizedName(item.name)}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="ml-2 text-red-500 hover:text-red-700"
|
||||||
|
onClick={() => {
|
||||||
|
onRemove(item.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 969 B |
Binary file not shown.
|
After Width: | Height: | Size: 934 B |
Binary file not shown.
|
After Width: | Height: | Size: 269 B |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,7 @@
|
|||||||
|
import jQuery from "jquery";
|
||||||
|
|
||||||
|
// Make jQuery global for legacy plugins
|
||||||
|
(window as any).jQuery = jQuery;
|
||||||
|
(window as any).$ = jQuery;
|
||||||
|
|
||||||
|
export default jQuery;
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import $ from "jquery";
|
||||||
|
|
||||||
|
(function ($: any) {
|
||||||
|
"use strict";
|
||||||
|
$.calendars.calendars.ethiopian.prototype.regionalOptions.am = {
|
||||||
|
name: "የኢትዮጵያ ዘመን አቆጣጠር",
|
||||||
|
epochs: ["BEE", "EE"],
|
||||||
|
monthNames: [
|
||||||
|
"መስከረም",
|
||||||
|
"ጥቅምት",
|
||||||
|
"ኅዳር",
|
||||||
|
"ታህሣሥ",
|
||||||
|
"ጥር",
|
||||||
|
"የካቲት",
|
||||||
|
"መጋቢት",
|
||||||
|
"ሚያዝያ",
|
||||||
|
"ግንቦት",
|
||||||
|
"ሰኔ",
|
||||||
|
"ሐምሌ",
|
||||||
|
"ነሐሴ",
|
||||||
|
"ጳጉሜ",
|
||||||
|
],
|
||||||
|
monthNamesShort: [
|
||||||
|
"መስከ",
|
||||||
|
"ጥቅም",
|
||||||
|
"ኅዳር",
|
||||||
|
"ታህሣ",
|
||||||
|
"ጥር",
|
||||||
|
"የካቲ",
|
||||||
|
"መጋቢ",
|
||||||
|
"ሚያዝ",
|
||||||
|
"ግንቦ",
|
||||||
|
"ሰኔ",
|
||||||
|
"ሐምሌ",
|
||||||
|
"ነሐሴ",
|
||||||
|
"ጳጉሜ",
|
||||||
|
],
|
||||||
|
dayNames: ["እሑድ", "ሰኞ", "ማክሰኞ", "ረቡዕ", "ሓሙስ", "ዓርብ", "ቅዳሜ"],
|
||||||
|
dayNamesShort: ["እሑድ", "ሰኞ", "ማክሰ", "ረቡዕ", "ሓሙስ", "ዓርብ", "ቅዳሜ"],
|
||||||
|
dayNamesMin: ["እሑ", "ሰኞ", "ማክ", "ረቡ", "ሐሙ", "ዓር", "ቅዳ"],
|
||||||
|
digits: null,
|
||||||
|
dateFormat: "dd/mm/yyyy",
|
||||||
|
firstDay: 0,
|
||||||
|
isRTL: false,
|
||||||
|
};
|
||||||
|
})(jQuery);
|
||||||
@@ -0,0 +1,171 @@
|
|||||||
|
/* http://keith-wood.name/calendars.html
|
||||||
|
Ethiopian calendar for jQuery v2.1.0.
|
||||||
|
Written by Keith Wood (wood.keith{at}optusnet.com.au) February 2010.
|
||||||
|
Available under the MIT (http://keith-wood.name/licence.html) license.
|
||||||
|
Please attribute the author if you use it. */
|
||||||
|
|
||||||
|
(function($) { // Hide scope, no $ conflict
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/** Implementation of the Ethiopian calendar.
|
||||||
|
See <a href="http://en.wikipedia.org/wiki/Ethiopian_calendar">http://en.wikipedia.org/wiki/Ethiopian_calendar</a>.
|
||||||
|
See also Calendrical Calculations: The Millennium Edition
|
||||||
|
(<a href="http://emr.cs.iit.edu/home/reingold/calendar-book/index.shtml">http://emr.cs.iit.edu/home/reingold/calendar-book/index.shtml</a>).
|
||||||
|
@class EthiopianCalendar
|
||||||
|
@param {string} [language=''] The language code (default English) for localisation. */
|
||||||
|
function EthiopianCalendar(language) {
|
||||||
|
this.local = this.regionalOptions[language || ''] || this.regionalOptions[''];
|
||||||
|
}
|
||||||
|
|
||||||
|
EthiopianCalendar.prototype = new $.calendars.baseCalendar();
|
||||||
|
|
||||||
|
$.extend(EthiopianCalendar.prototype, {
|
||||||
|
/** The calendar name.
|
||||||
|
@memberof EthiopianCalendar */
|
||||||
|
name: 'Ethiopian',
|
||||||
|
/** Julian date of start of Ethiopian epoch: 27 August 8 CE (Gregorian).
|
||||||
|
@memberof EthiopianCalendar */
|
||||||
|
jdEpoch: 1724220.5,
|
||||||
|
/** Days per month in a common year.
|
||||||
|
@memberof EthiopianCalendar */
|
||||||
|
daysPerMonth: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 5],
|
||||||
|
/** <code>true</code> if has a year zero, <code>false</code> if not.
|
||||||
|
@memberof EthiopianCalendar */
|
||||||
|
hasYearZero: false,
|
||||||
|
/** The minimum month number.
|
||||||
|
@memberof EthiopianCalendar */
|
||||||
|
minMonth: 1,
|
||||||
|
/** The first month in the year.
|
||||||
|
@memberof EthiopianCalendar */
|
||||||
|
firstMonth: 1,
|
||||||
|
/** The minimum day number.
|
||||||
|
@memberof EthiopianCalendar */
|
||||||
|
minDay: 1,
|
||||||
|
|
||||||
|
/** Localisations for the plugin.
|
||||||
|
Entries are objects indexed by the language code ('' being the default US/English).
|
||||||
|
Each object has the following attributes.
|
||||||
|
@memberof EthiopianCalendar
|
||||||
|
@property {string} name The calendar name.
|
||||||
|
@property {string[]} epochs The epoch names (before/after year 0).
|
||||||
|
@property {string[]} monthNames The long names of the months of the year.
|
||||||
|
@property {string[]} monthNamesShort The short names of the months of the year.
|
||||||
|
@property {string[]} dayNames The long names of the days of the week.
|
||||||
|
@property {string[]} dayNamesShort The short names of the days of the week.
|
||||||
|
@property {string[]} dayNamesMin The minimal names of the days of the week.
|
||||||
|
@property {string} dateFormat The date format for this calendar.
|
||||||
|
See the options on <a href="BaseCalendar.html#formatDate"><code>formatDate</code></a> for details.
|
||||||
|
@property {number} firstDay The number of the first day of the week, starting at 0.
|
||||||
|
@property {boolean} isRTL <code>true</code> if this localisation reads right-to-left. */
|
||||||
|
regionalOptions: { // Localisations
|
||||||
|
'': {
|
||||||
|
name: 'Ethiopian',
|
||||||
|
epochs: ['BEE', 'EE'],
|
||||||
|
monthNames: ['Meskerem', 'Tikemet', 'Hidar', 'Tahesas', 'Tir', 'Yekatit',
|
||||||
|
'Megabit', 'Miazia', 'Genbot', 'Sene', 'Hamle', 'Nehase', 'Pagume'],
|
||||||
|
monthNamesShort: ['Mes', 'Tik', 'Hid', 'Tah', 'Tir', 'Yek',
|
||||||
|
'Meg', 'Mia', 'Gen', 'Sen', 'Ham', 'Neh', 'Pag'],
|
||||||
|
dayNames: ['Ehud', 'Segno', 'Maksegno', 'Irob', 'Hamus', 'Arb', 'Kidame'],
|
||||||
|
dayNamesShort: ['Ehu', 'Seg', 'Mak', 'Iro', 'Ham', 'Arb', 'Kid'],
|
||||||
|
dayNamesMin: ['Eh', 'Se', 'Ma', 'Ir', 'Ha', 'Ar', 'Ki'],
|
||||||
|
digits: null,
|
||||||
|
dateFormat: 'dd/mm/yyyy',
|
||||||
|
firstDay: 0,
|
||||||
|
isRTL: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Determine whether this date is in a leap year.
|
||||||
|
@memberof EthiopianCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year to examine.
|
||||||
|
@return {boolean} <code>true</code> if this is a leap year, <code>false</code> if not.
|
||||||
|
@throws Error if an invalid year or a different calendar used. */
|
||||||
|
leapYear: function(year) {
|
||||||
|
var date = this._validate(year, this.minMonth, this.minDay, $.calendars.local.invalidYear);
|
||||||
|
year = date.year() + (date.year() < 0 ? 1 : 0); // No year zero
|
||||||
|
return year % 4 === 3 || year % 4 === -1;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the number of months in a year.
|
||||||
|
@memberof EthiopianCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year to examine.
|
||||||
|
@return {number} The number of months.
|
||||||
|
@throws Error if an invalid year or a different calendar used. */
|
||||||
|
monthsInYear: function(year) {
|
||||||
|
this._validate(year, this.minMonth, this.minDay,
|
||||||
|
$.calendars.local.invalidYear || $.calendars.regionalOptions[''].invalidYear);
|
||||||
|
return 13;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Determine the week of the year for a date.
|
||||||
|
@memberof EthiopianCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year to examine.
|
||||||
|
@param {number} [month] The month to examine (if only <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day to examine (if only <code>year</code> specified above).
|
||||||
|
@return {number} The week of the year.
|
||||||
|
@throws Error if an invalid date or a different calendar used. */
|
||||||
|
weekOfYear: function(year, month, day) {
|
||||||
|
// Find Sunday of this week starting on Sunday
|
||||||
|
var checkDate = this.newDate(year, month, day);
|
||||||
|
checkDate.add(-checkDate.dayOfWeek(), 'd');
|
||||||
|
return Math.floor((checkDate.dayOfYear() - 1) / 7) + 1;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the number of days in a month.
|
||||||
|
@memberof EthiopianCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year of the month.
|
||||||
|
@param {number} [month] The month (if only <code>year</code> specified above).
|
||||||
|
@return {number} The number of days in this month.
|
||||||
|
@throws Error if an invalid month/year or a different calendar used. */
|
||||||
|
daysInMonth: function(year, month) {
|
||||||
|
var date = this._validate(year, month, this.minDay, $.calendars.local.invalidMonth);
|
||||||
|
return this.daysPerMonth[date.month() - 1] +
|
||||||
|
(date.month() === 13 && this.leapYear(date.year()) ? 1 : 0);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Determine whether this date is a week day.
|
||||||
|
@memberof EthiopianCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year to examine.
|
||||||
|
@param {number} [month] The month to examine (if only <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day to examine (if only <code>year</code> specified above).
|
||||||
|
@return {boolean} <code>true</code> if a week day, <code>false</code> if not.
|
||||||
|
@throws Error if an invalid date or a different calendar used. */
|
||||||
|
weekDay: function(year, month, day) {
|
||||||
|
return (this.dayOfWeek(year, month, day) || 7) < 6;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the Julian date equivalent for this date,
|
||||||
|
i.e. days since January 1, 4713 BCE Greenwich noon.
|
||||||
|
@memberof EthiopianCalendar
|
||||||
|
@param {CDate|number} year The date to convert or the year to convert.
|
||||||
|
@param {number} [month] The month to convert (if only <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day to convert (if only <code>year</code> specified above).
|
||||||
|
@return {number} The equivalent Julian date.
|
||||||
|
@throws Error if an invalid date or a different calendar used. */
|
||||||
|
toJD: function(year, month, day) {
|
||||||
|
var date = this._validate(year, month, day, $.calendars.local.invalidDate);
|
||||||
|
year = date.year();
|
||||||
|
if (year < 0) { year++; } // No year zero
|
||||||
|
return date.day() + (date.month() - 1) * 30 +
|
||||||
|
(year - 1) * 365 + Math.floor(year / 4) + this.jdEpoch - 1;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Create a new date from a Julian date.
|
||||||
|
@memberof EthiopianCalendar
|
||||||
|
@param {number} jd the Julian date to convert.
|
||||||
|
@return {CDate} the equivalent date. */
|
||||||
|
fromJD: function(jd) {
|
||||||
|
var c = Math.floor(jd) + 0.5 - this.jdEpoch;
|
||||||
|
var year = Math.floor((c - Math.floor((c + 366) / 1461)) / 365) + 1;
|
||||||
|
if (year <= 0) { year--; } // No year zero
|
||||||
|
c = Math.floor(jd) + 0.5 - this.newDate(year, 1, 1).toJD();
|
||||||
|
var month = Math.floor(c / 30) + 1;
|
||||||
|
var day = c - (month - 1) * 30 + 1;
|
||||||
|
return this.newDate(year, month, day);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ethiopian calendar implementation
|
||||||
|
$.calendars.calendars.ethiopian = EthiopianCalendar;
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
!function(a){"use strict";function b(a){this.local=this.regionalOptions[a||""]||this.regionalOptions[""]}b.prototype=new a.calendars.baseCalendar,a.extend(b.prototype,{name:"Ethiopian",jdEpoch:1724220.5,daysPerMonth:[30,30,30,30,30,30,30,30,30,30,30,30,5],hasYearZero:!1,minMonth:1,firstMonth:1,minDay:1,regionalOptions:{"":{name:"Ethiopian",epochs:["BEE","EE"],monthNames:["Meskerem","Tikemet","Hidar","Tahesas","Tir","Yekatit","Megabit","Miazia","Genbot","Sene","Hamle","Nehase","Pagume"],monthNamesShort:["Mes","Tik","Hid","Tah","Tir","Yek","Meg","Mia","Gen","Sen","Ham","Neh","Pag"],dayNames:["Ehud","Segno","Maksegno","Irob","Hamus","Arb","Kidame"],dayNamesShort:["Ehu","Seg","Mak","Iro","Ham","Arb","Kid"],dayNamesMin:["Eh","Se","Ma","Ir","Ha","Ar","Ki"],digits:null,dateFormat:"dd/mm/yyyy",firstDay:0,isRTL:!1}},leapYear:function(b){var c=this._validate(b,this.minMonth,this.minDay,a.calendars.local.invalidYear);return b=c.year()+(c.year()<0?1:0),b%4===3||b%4===-1},monthsInYear:function(b){return this._validate(b,this.minMonth,this.minDay,a.calendars.local.invalidYear||a.calendars.regionalOptions[""].invalidYear),13},weekOfYear:function(a,b,c){var d=this.newDate(a,b,c);return d.add(-d.dayOfWeek(),"d"),Math.floor((d.dayOfYear()-1)/7)+1},daysInMonth:function(b,c){var d=this._validate(b,c,this.minDay,a.calendars.local.invalidMonth);return this.daysPerMonth[d.month()-1]+(13===d.month()&&this.leapYear(d.year())?1:0)},weekDay:function(a,b,c){return(this.dayOfWeek(a,b,c)||7)<6},toJD:function(b,c,d){var e=this._validate(b,c,d,a.calendars.local.invalidDate);return b=e.year(),b<0&&b++,e.day()+30*(e.month()-1)+365*(b-1)+Math.floor(b/4)+this.jdEpoch-1},fromJD:function(a){var b=Math.floor(a)+.5-this.jdEpoch,c=Math.floor((b-Math.floor((b+366)/1461))/365)+1;c<=0&&c--,b=Math.floor(a)+.5-this.newDate(c,1,1).toJD();var d=Math.floor(b/30)+1,e=b-30*(d-1)+1;return this.newDate(c,d,e)}}),a.calendars.calendars.ethiopian=b}(jQuery);
|
||||||
|
//# sourceMappingURL=jquery.calendars.ethiopian.min.map
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sources":["..\\..\\src\\js\\jquery.calendars.ethiopian.js"],"names":["$","EthiopianCalendar","language","this","local","regionalOptions","prototype","calendars","baseCalendar","extend","name","jdEpoch","daysPerMonth","hasYearZero","minMonth","firstMonth","minDay","","epochs","monthNames","monthNamesShort","dayNames","dayNamesShort","dayNamesMin","digits","dateFormat","firstDay","isRTL","leapYear","year","date","_validate","invalidYear","monthsInYear","weekOfYear","month","day","checkDate","newDate","add","dayOfWeek","Math","floor","dayOfYear","daysInMonth","invalidMonth","weekDay","toJD","invalidDate","fromJD","jd","c","ethiopian","jQuery"],"mappings":"CAMA,SAAUA,GACT,YAQA,SAASC,GAAkBC,GAC1BC,KAAKC,MAAQD,KAAKE,gBAAgBH,GAAY,KAAOC,KAAKE,gBAAgB,IAG3EJ,EAAkBK,UAAY,GAAIN,GAAEO,UAAUC,aAE9CR,EAAES,OAAOR,EAAkBK,WAG1BI,KAAM,YAGNC,QAAS,UAGTC,cAAe,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAG/DC,aAAa,EAGbC,SAAU,EAGVC,WAAY,EAGZC,OAAQ,EAiBRX,iBACCY,IACCP,KAAM,YACNQ,QAAS,MAAO,MAChBC,YAAa,WAAY,UAAW,QAAS,UAAW,MAAO,UAC/D,UAAW,SAAU,SAAU,OAAQ,QAAS,SAAU,UAC1DC,iBAAkB,MAAO,MAAO,MAAO,MAAO,MAAO,MACrD,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,OAC1CC,UAAW,OAAQ,QAAS,WAAY,OAAQ,QAAS,MAAO,UAChEC,eAAgB,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,OAC1DC,aAAc,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAClDC,OAAQ,KACRC,WAAY,aACZC,SAAU,EACVC,OAAO,IASTC,SAAU,SAASC,GAClB,GAAIC,GAAO3B,KAAK4B,UAAUF,EAAM1B,KAAKW,SAAUX,KAAKa,OAAQhB,EAAEO,UAAUH,MAAM4B,YAE9E,OADAH,GAAOC,EAAKD,QAAUC,EAAKD,OAAS,EAAI,EAAI,GACrCA,EAAO,IAAM,GAAKA,EAAO,KAAM,GAQvCI,aAAc,SAASJ,GAGtB,MAFA1B,MAAK4B,UAAUF,EAAM1B,KAAKW,SAAUX,KAAKa,OACxChB,EAAEO,UAAUH,MAAM4B,aAAehC,EAAEO,UAAUF,gBAAgB,IAAI2B,aAC3D,IAURE,WAAY,SAASL,EAAMM,EAAOC,GAEjC,GAAIC,GAAYlC,KAAKmC,QAAQT,EAAMM,EAAOC,EAE1C,OADAC,GAAUE,KAAKF,EAAUG,YAAa,KAC/BC,KAAKC,OAAOL,EAAUM,YAAc,GAAK,GAAK,GAStDC,YAAa,SAASf,EAAMM,GAC3B,GAAIL,GAAO3B,KAAK4B,UAAUF,EAAMM,EAAOhC,KAAKa,OAAQhB,EAAEO,UAAUH,MAAMyC,aACtE,OAAO1C,MAAKS,aAAakB,EAAKK,QAAU,IACrB,KAAjBL,EAAKK,SAAkBhC,KAAKyB,SAASE,EAAKD,QAAU,EAAI,IAU3DiB,QAAS,SAASjB,EAAMM,EAAOC,GAC9B,OAAQjC,KAAKqC,UAAUX,EAAMM,EAAOC,IAAQ,GAAK,GAWlDW,KAAM,SAASlB,EAAMM,EAAOC,GAC3B,GAAIN,GAAO3B,KAAK4B,UAAUF,EAAMM,EAAOC,EAAKpC,EAAEO,UAAUH,MAAM4C,YAG9D,OAFAnB,GAAOC,EAAKD,OACRA,EAAO,GAAKA,IACTC,EAAKM,MAA6B,IAApBN,EAAKK,QAAU,GACtB,KAAZN,EAAO,GAAWY,KAAKC,MAAMb,EAAO,GAAK1B,KAAKQ,QAAU,GAO3DsC,OAAQ,SAASC,GAChB,GAAIC,GAAIV,KAAKC,MAAMQ,GAAM,GAAM/C,KAAKQ,QAChCkB,EAAOY,KAAKC,OAAOS,EAAIV,KAAKC,OAAOS,EAAI,KAAO,OAAS,KAAO,CAC9DtB,IAAQ,GAAKA,IACjBsB,EAAIV,KAAKC,MAAMQ,GAAM,GAAM/C,KAAKmC,QAAQT,EAAM,EAAG,GAAGkB,MACpD,IAAIZ,GAAQM,KAAKC,MAAMS,EAAI,IAAM,EAC7Bf,EAAMe,EAAkB,IAAbhB,EAAQ,GAAU,CACjC,OAAOhC,MAAKmC,QAAQT,EAAMM,EAAOC,MAKnCpC,EAAEO,UAAUA,UAAU6C,UAAYnD,GAEhCoD","file":"jquery.calendars.ethiopian.min.js"}
|
||||||
@@ -0,0 +1,982 @@
|
|||||||
|
/* http://keith-wood.name/calendars.html
|
||||||
|
Calendars for jQuery v2.1.0.
|
||||||
|
Written by Keith Wood (wood.keith{at}optusnet.com.au) August 2009.
|
||||||
|
Available under the MIT (http://keith-wood.name/licence.html) license.
|
||||||
|
Please attribute the author if you use it. */
|
||||||
|
|
||||||
|
(function($) { // Hide scope, no $ conflict
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function Calendars() {
|
||||||
|
this.regionalOptions = [];
|
||||||
|
/** Localised values.
|
||||||
|
@memberof Calendars
|
||||||
|
@property {string} [invalidCalendar='Calendar {0} not found']
|
||||||
|
Error message for an unknown calendar.
|
||||||
|
@property {string} [invalidDate='Invalid {0} date']
|
||||||
|
Error message for an invalid date for this calendar.
|
||||||
|
@property {string} [invalidMonth='Invalid {0} month']
|
||||||
|
Error message for an invalid month for this calendar.
|
||||||
|
@property {string} [invalidYear='Invalid {0} year']
|
||||||
|
Error message for an invalid year for this calendar.
|
||||||
|
@property {string} [differentCalendars='Cannot mix {0} and {1} dates']
|
||||||
|
Error message for mixing different calendars. */
|
||||||
|
this.regionalOptions[''] = {
|
||||||
|
invalidCalendar: 'Calendar {0} not found',
|
||||||
|
invalidDate: 'Invalid {0} date',
|
||||||
|
invalidMonth: 'Invalid {0} month',
|
||||||
|
invalidYear: 'Invalid {0} year',
|
||||||
|
differentCalendars: 'Cannot mix {0} and {1} dates'
|
||||||
|
};
|
||||||
|
this.local = this.regionalOptions[''];
|
||||||
|
this.calendars = {};
|
||||||
|
this._localCals = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Create the calendars plugin.
|
||||||
|
<p>Provides support for various world calendars in a consistent manner.</p>
|
||||||
|
<p>Use the global instance, <code>$.calendars</code>, to access the functionality.</p>
|
||||||
|
@class Calendars
|
||||||
|
@example $.calendars.instance('julian').newDate(2014, 12, 25) */
|
||||||
|
$.extend(Calendars.prototype, {
|
||||||
|
|
||||||
|
/** Obtain a calendar implementation and localisation.
|
||||||
|
@memberof Calendars
|
||||||
|
@param {string} [name='gregorian'] The name of the calendar, e.g. 'gregorian', 'persian', 'islamic'.
|
||||||
|
@param {string} [language=''] The language code to use for localisation (default is English).
|
||||||
|
@return {Calendar} The calendar and localisation.
|
||||||
|
@throws Error if calendar not found.
|
||||||
|
@example $.calendars.instance()
|
||||||
|
$.calendars.instance('persian')
|
||||||
|
$.calendars.instance('hebrew', 'he') */
|
||||||
|
instance: function(name, language) {
|
||||||
|
name = (name || 'gregorian').toLowerCase();
|
||||||
|
language = language || '';
|
||||||
|
var cal = this._localCals[name + '-' + language];
|
||||||
|
if (!cal && this.calendars[name]) {
|
||||||
|
cal = new this.calendars[name](language);
|
||||||
|
this._localCals[name + '-' + language] = cal;
|
||||||
|
}
|
||||||
|
if (!cal) {
|
||||||
|
throw (this.local.invalidCalendar || this.regionalOptions[''].invalidCalendar).
|
||||||
|
replace(/\{0\}/, name);
|
||||||
|
}
|
||||||
|
return cal;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Create a new date - for today if no other parameters given.
|
||||||
|
@memberof Calendars
|
||||||
|
@param {CDate|number} [year] The date to copy or the year for the date.
|
||||||
|
@param {number} [month] The month for the date (if numeric <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day for the date (if numeric <code>year</code> specified above).
|
||||||
|
@param {BaseCalendar|string} [calendar='gregorian'] The underlying calendar or the name of the calendar.
|
||||||
|
@param {string} [language=''] The language to use for localisation (default English).
|
||||||
|
@return {CDate} The new date.
|
||||||
|
@throws Error if an invalid date.
|
||||||
|
@example $.calendars.newDate()
|
||||||
|
$.calendars.newDate(otherDate)
|
||||||
|
$.calendars.newDate(2001, 1, 1)
|
||||||
|
$.calendars.newDate(1379, 10, 12, 'persian') */
|
||||||
|
newDate: function(year, month, day, calendar, language) {
|
||||||
|
calendar = ((typeof year !== 'undefined' && year !== null) && year.year ? year.calendar() :
|
||||||
|
(typeof calendar === 'string' ? this.instance(calendar, language) : calendar)) || this.instance();
|
||||||
|
return calendar.newDate(year, month, day);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** A simple digit substitution function for localising numbers via the
|
||||||
|
{@linkcode GregorianCalendar.regionalOptions|Calendar digits} option.
|
||||||
|
@memberof Calendars
|
||||||
|
@param {string[]} digits The substitute digits, for 0 through 9.
|
||||||
|
@return {CalendarsDigits} The substitution function.
|
||||||
|
@example digits: $.calendars.substituteDigits(['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']) */
|
||||||
|
substituteDigits: function(digits) {
|
||||||
|
return function(value) {
|
||||||
|
return (value + '').replace(/[0-9]/g, function(digit) {
|
||||||
|
return digits[digit];
|
||||||
|
});
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Digit substitution function for localising Chinese style numbers via the
|
||||||
|
{@linkcode GregorianCalendar.regionalOptions|Calendar digits} option.
|
||||||
|
@memberof Calendars
|
||||||
|
@param {string[]} digits The substitute digits, for 0 through 9.
|
||||||
|
@param {string[]} powers The characters denoting powers of 10, i.e. 1, 10, 100, 1000.
|
||||||
|
@return {CalendarsDigits} The substitution function.
|
||||||
|
@example digits: $.calendars.substituteChineseDigits(
|
||||||
|
['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九'], ['', '十', '百', '千']) */
|
||||||
|
substituteChineseDigits: function(digits, powers) {
|
||||||
|
return function(value) {
|
||||||
|
var localNumber = '';
|
||||||
|
var power = 0;
|
||||||
|
while (value > 0) {
|
||||||
|
var units = value % 10;
|
||||||
|
localNumber = (units === 0 ? '' : digits[units] + powers[power]) + localNumber;
|
||||||
|
power++;
|
||||||
|
value = Math.floor(value / 10);
|
||||||
|
}
|
||||||
|
if (localNumber.indexOf(digits[1] + powers[1]) === 0) {
|
||||||
|
localNumber = localNumber.substr(1);
|
||||||
|
}
|
||||||
|
return localNumber || digits[0];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Generic date, based on a particular calendar.
|
||||||
|
@class CDate
|
||||||
|
@param {BaseCalendar} calendar The underlying calendar implementation.
|
||||||
|
@param {number} year The year for this date.
|
||||||
|
@param {number} month The month for this date.
|
||||||
|
@param {number} day The day for this date.
|
||||||
|
@return {CDate} The date object.
|
||||||
|
@throws Error if an invalid date. */
|
||||||
|
function CDate(calendar, year, month, day) {
|
||||||
|
this._calendar = calendar;
|
||||||
|
this._year = year;
|
||||||
|
this._month = month;
|
||||||
|
this._day = day;
|
||||||
|
if (this._calendar._validateLevel === 0 &&
|
||||||
|
!this._calendar.isValid(this._year, this._month, this._day)) {
|
||||||
|
throw ($.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate).
|
||||||
|
replace(/\{0\}/, this._calendar.local.name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Pad a numeric value with leading zeroes.
|
||||||
|
@private
|
||||||
|
@param {number} value The number to format.
|
||||||
|
@param {number} length The minimum length.
|
||||||
|
@return {string} The formatted number. */
|
||||||
|
function pad(value, length) {
|
||||||
|
value = '' + value;
|
||||||
|
return '000000'.substring(0, length - value.length) + value;
|
||||||
|
}
|
||||||
|
|
||||||
|
$.extend(CDate.prototype, {
|
||||||
|
|
||||||
|
/** Create a new date.
|
||||||
|
@memberof CDate
|
||||||
|
@param {CDate|number} [year] The date to copy or the year for the date (default to this date).
|
||||||
|
@param {number} [month] The month for the date (if numeric <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day for the date (if numeric <code>year</code> specified above).
|
||||||
|
@return {CDate} The new date.
|
||||||
|
@throws Error if an invalid date.
|
||||||
|
@example date.newDate()
|
||||||
|
date.newDate(otherDate)
|
||||||
|
date.newDate(2001, 1, 1) */
|
||||||
|
newDate: function(year, month, day) {
|
||||||
|
return this._calendar.newDate((typeof year === 'undefined' || year === null ? this : year), month, day);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Set or retrieve the year for this date.
|
||||||
|
@memberof CDate
|
||||||
|
@param {number} [year] The year for the date.
|
||||||
|
@return {number|CDate} The date's year (if no parameter) or the updated date.
|
||||||
|
@throws Error if an invalid date.
|
||||||
|
@example date.year(2001)
|
||||||
|
var year = date.year() */
|
||||||
|
year: function(year) {
|
||||||
|
return (arguments.length === 0 ? this._year : this.set(year, 'y'));
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Set or retrieve the month for this date.
|
||||||
|
@memberof CDate
|
||||||
|
@param {number} [month] The month for the date.
|
||||||
|
@return {number|CDate} The date's month (if no parameter) or the updated date.
|
||||||
|
@throws Error if an invalid date.
|
||||||
|
@example date.month(1)
|
||||||
|
var month = date.month() */
|
||||||
|
month: function(month) {
|
||||||
|
return (arguments.length === 0 ? this._month : this.set(month, 'm'));
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Set or retrieve the day for this date.
|
||||||
|
@memberof CDate
|
||||||
|
@param {number} [day] The day for the date.
|
||||||
|
@return {number|CData} The date's day (if no parameter) or the updated date.
|
||||||
|
@throws Error if an invalid date.
|
||||||
|
@example date.day(1)
|
||||||
|
var day = date.day() */
|
||||||
|
day: function(day) {
|
||||||
|
return (arguments.length === 0 ? this._day : this.set(day, 'd'));
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Set new values for this date.
|
||||||
|
@memberof CDate
|
||||||
|
@param {number} year The year for the date.
|
||||||
|
@param {number} month The month for the date.
|
||||||
|
@param {number} day The day for the date.
|
||||||
|
@return {CDate} The updated date.
|
||||||
|
@throws Error if an invalid date.
|
||||||
|
@example date.date(2001, 1, 1) */
|
||||||
|
date: function(year, month, day) {
|
||||||
|
if (!this._calendar.isValid(year, month, day)) {
|
||||||
|
throw ($.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate).
|
||||||
|
replace(/\{0\}/, this._calendar.local.name);
|
||||||
|
}
|
||||||
|
this._year = year;
|
||||||
|
this._month = month;
|
||||||
|
this._day = day;
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Determine whether this date is in a leap year.
|
||||||
|
@memberof CDate
|
||||||
|
@return {boolean} <code>true</code> if this is a leap year, <code>false</code> if not.
|
||||||
|
@example if (date.leapYear()) ...*/
|
||||||
|
leapYear: function() {
|
||||||
|
return this._calendar.leapYear(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the epoch designator for this date, e.g. BCE or CE.
|
||||||
|
@memberof CDate
|
||||||
|
@return {string} The current epoch.
|
||||||
|
@example var epoch = date.epoch() */
|
||||||
|
epoch: function() {
|
||||||
|
return this._calendar.epoch(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Format the year, if not a simple sequential number.
|
||||||
|
@memberof CDate
|
||||||
|
@return {string} The formatted year.
|
||||||
|
@example var year = date.formatYear() */
|
||||||
|
formatYear: function() {
|
||||||
|
return this._calendar.formatYear(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the month of the year for this date,
|
||||||
|
i.e. the month's position within a numbered year.
|
||||||
|
@memberof CDate
|
||||||
|
@return {number} The month of the year: <code>minMonth</code> to months per year.
|
||||||
|
@example var month = date.monthOfYear() */
|
||||||
|
monthOfYear: function() {
|
||||||
|
return this._calendar.monthOfYear(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the week of the year for this date.
|
||||||
|
@memberof CDate
|
||||||
|
@return {number} The week of the year: 1 to weeks per year.
|
||||||
|
@example var week = date.weekOfYear() */
|
||||||
|
weekOfYear: function() {
|
||||||
|
return this._calendar.weekOfYear(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the number of days in the year for this date.
|
||||||
|
@memberof CDate
|
||||||
|
@return {number} The number of days in this year.
|
||||||
|
@example var days = date.daysInYear() */
|
||||||
|
daysInYear: function() {
|
||||||
|
return this._calendar.daysInYear(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the day of the year for this date.
|
||||||
|
@memberof CDate
|
||||||
|
@return {number} The day of the year: 1 to days per year.
|
||||||
|
@example var doy = date.dayOfYear() */
|
||||||
|
dayOfYear: function() {
|
||||||
|
return this._calendar.dayOfYear(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the number of days in the month for this date.
|
||||||
|
@memberof CDate
|
||||||
|
@return {number} The number of days.
|
||||||
|
@example var days = date.daysInMonth() */
|
||||||
|
daysInMonth: function() {
|
||||||
|
return this._calendar.daysInMonth(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the day of the week for this date.
|
||||||
|
@memberof CDate
|
||||||
|
@return {number} The day of the week: 0 to number of days - 1.
|
||||||
|
@example var dow = date.dayOfWeek() */
|
||||||
|
dayOfWeek: function() {
|
||||||
|
return this._calendar.dayOfWeek(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Determine whether this date is a week day.
|
||||||
|
@memberof CDate
|
||||||
|
@return {boolean} <code>true</code> if a week day, <code>false</code> if not.
|
||||||
|
@example if (date.weekDay()) ... */
|
||||||
|
weekDay: function() {
|
||||||
|
return this._calendar.weekDay(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve additional information about this date.
|
||||||
|
@memberof CDate
|
||||||
|
@return {object} Additional information - contents depends on calendar.
|
||||||
|
@example var info = date.extraInfo() */
|
||||||
|
extraInfo: function() {
|
||||||
|
return this._calendar.extraInfo(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Add period(s) to a date.
|
||||||
|
@memberof CDate
|
||||||
|
@param {number} offset The number of periods to adjust by.
|
||||||
|
@param {string} period One of 'y' for years, 'm' for months, 'w' for weeks, 'd' for days.
|
||||||
|
@return {CDate} The updated date.
|
||||||
|
@example date.add(10, 'd') */
|
||||||
|
add: function(offset, period) {
|
||||||
|
return this._calendar.add(this, offset, period);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Set a portion of the date.
|
||||||
|
@memberof CDate
|
||||||
|
@param {number} value The new value for the period.
|
||||||
|
@param {string} period One of 'y' for year, 'm' for month, 'd' for day.
|
||||||
|
@return {CDate} The updated date.
|
||||||
|
@throws Error if not a valid date.
|
||||||
|
@example date.set(10, 'd') */
|
||||||
|
set: function(value, period) {
|
||||||
|
return this._calendar.set(this, value, period);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Compare this date to another date.
|
||||||
|
@memberof CDate
|
||||||
|
@param {CDate} date The other date.
|
||||||
|
@return {number} -1 if this date is before the other date,
|
||||||
|
0 if they are equal, or +1 if this date is after the other date.
|
||||||
|
@example if (date1.compareTo(date2) < 0) ... */
|
||||||
|
compareTo: function(date) {
|
||||||
|
if (this._calendar.name !== date._calendar.name) {
|
||||||
|
throw ($.calendars.local.differentCalendars || $.calendars.regionalOptions[''].differentCalendars).
|
||||||
|
replace(/\{0\}/, this._calendar.local.name).replace(/\{1\}/, date._calendar.local.name);
|
||||||
|
}
|
||||||
|
var c = (this._year !== date._year ? this._year - date._year :
|
||||||
|
this._month !== date._month ? this.monthOfYear() - date.monthOfYear() :
|
||||||
|
this._day - date._day);
|
||||||
|
return (c === 0 ? 0 : (c < 0 ? -1 : +1));
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the calendar backing this date.
|
||||||
|
@memberof CDate
|
||||||
|
@return {BaseCalendar} The calendar implementation.
|
||||||
|
@example var cal = date.calendar() */
|
||||||
|
calendar: function() {
|
||||||
|
return this._calendar;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the Julian date equivalent for this date,
|
||||||
|
i.e. days since January 1, 4713 BCE Greenwich noon.
|
||||||
|
@memberof CDate
|
||||||
|
@return {number} The equivalent Julian date.
|
||||||
|
@example var jd = date.toJD() */
|
||||||
|
toJD: function() {
|
||||||
|
return this._calendar.toJD(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Create a new date from a Julian date.
|
||||||
|
@memberof CDate
|
||||||
|
@param {number} jd The Julian date to convert.
|
||||||
|
@return {CDate} The equivalent date.
|
||||||
|
@example var date2 = date1.fromJD(jd) */
|
||||||
|
fromJD: function(jd) {
|
||||||
|
return this._calendar.fromJD(jd);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Convert this date to a standard (Gregorian) JavaScript Date.
|
||||||
|
@memberof CDate
|
||||||
|
@return {Date} The equivalent JavaScript date.
|
||||||
|
@example var jsd = date.toJSDate() */
|
||||||
|
toJSDate: function() {
|
||||||
|
return this._calendar.toJSDate(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Create a new date from a standard (Gregorian) JavaScript Date.
|
||||||
|
@memberof CDate
|
||||||
|
@param {Date} jsd The JavaScript date to convert.
|
||||||
|
@return {CDate} The equivalent date.
|
||||||
|
@example var date2 = date1.fromJSDate(jsd) */
|
||||||
|
fromJSDate: function(jsd) {
|
||||||
|
return this._calendar.fromJSDate(jsd);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Convert to a string for display.
|
||||||
|
@memberof CDate
|
||||||
|
@return {string} This date as a string. */
|
||||||
|
toString: function() {
|
||||||
|
return (this.year() < 0 ? '-' : '') + pad(Math.abs(this.year()), 4) +
|
||||||
|
'-' + pad(this.month(), 2) + '-' + pad(this.day(), 2);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Basic functionality for all calendars.
|
||||||
|
Other calendars should extend this:
|
||||||
|
<pre>OtherCalendar.prototype = new BaseCalendar();</pre>
|
||||||
|
@class BaseCalendar */
|
||||||
|
function BaseCalendar() {
|
||||||
|
this.shortYearCutoff = '+10';
|
||||||
|
}
|
||||||
|
|
||||||
|
$.extend(BaseCalendar.prototype, {
|
||||||
|
_validateLevel: 0, // "Stack" to turn validation on/off
|
||||||
|
|
||||||
|
/** Create a new date within this calendar - today if no parameters given.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {CDate|number} year The date to duplicate or the year for the date.
|
||||||
|
@param {number} [month] The month for the date (if numeric <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day for the date (if numeric <code>year</code> specified above).
|
||||||
|
@return {CDate} The new date.
|
||||||
|
@throws Error if not a valid date or a different calendar is used.
|
||||||
|
@example var date = calendar.newDate(2014, 1, 26)
|
||||||
|
var date2 = calendar.newDate(date1)
|
||||||
|
var today = calendar.newDate() */
|
||||||
|
newDate: function(year, month, day) {
|
||||||
|
if (typeof year === 'undefined' || year === null) {
|
||||||
|
return this.today();
|
||||||
|
}
|
||||||
|
if (year.year) {
|
||||||
|
this._validate(year, month, day,
|
||||||
|
$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
|
||||||
|
day = year.day();
|
||||||
|
month = year.month();
|
||||||
|
year = year.year();
|
||||||
|
}
|
||||||
|
return new CDate(this, year, month, day);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Create a new date for today.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@return {CDate} Today's date.
|
||||||
|
@example var today = calendar.today() */
|
||||||
|
today: function() {
|
||||||
|
return this.fromJSDate(new Date());
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the epoch designator for this date.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year to examine.
|
||||||
|
@return {string} The current epoch.
|
||||||
|
@throws Error if an invalid year or a different calendar is used.
|
||||||
|
@example var epoch = calendar.epoch(date)
|
||||||
|
var epoch = calendar.epoch(2014) */
|
||||||
|
epoch: function(year) {
|
||||||
|
var date = this._validate(year, this.minMonth, this.minDay,
|
||||||
|
$.calendars.local.invalidYear || $.calendars.regionalOptions[''].invalidYear);
|
||||||
|
return (date.year() < 0 ? this.local.epochs[0] : this.local.epochs[1]);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Format the year, if not a simple sequential number
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {CDate|number} year The date to format or the year to format.
|
||||||
|
@return {string} The formatted year.
|
||||||
|
@throws Error if an invalid year or a different calendar is used.
|
||||||
|
@example var year = calendar.formatYear(date)
|
||||||
|
var year = calendar.formatYear(2014) */
|
||||||
|
formatYear: function(year) {
|
||||||
|
var date = this._validate(year, this.minMonth, this.minDay,
|
||||||
|
$.calendars.local.invalidYear || $.calendars.regionalOptions[''].invalidYear);
|
||||||
|
return (date.year() < 0 ? '-' : '') + pad(Math.abs(date.year()), 4);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the number of months in a year.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year to examine.
|
||||||
|
@return {number} The number of months.
|
||||||
|
@throws Error if an invalid year or a different calendar is used.
|
||||||
|
@example var months = calendar.monthsInYear(date)
|
||||||
|
var months = calendar.monthsInYear(2014) */
|
||||||
|
monthsInYear: function(year) {
|
||||||
|
this._validate(year, this.minMonth, this.minDay,
|
||||||
|
$.calendars.local.invalidYear || $.calendars.regionalOptions[''].invalidYear);
|
||||||
|
return 12;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Calculate the month's ordinal position within the year -
|
||||||
|
for those calendars that don't start at month 1!
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year to examine.
|
||||||
|
@param {number} [month] The month to examine (if numeric <code>year</code> specified above).
|
||||||
|
@return {number} The ordinal position, starting from <code>minMonth</code>.
|
||||||
|
@throws Error if an invalid year/month or a different calendar is used.
|
||||||
|
@example var pos = calendar.monthOfYear(date)
|
||||||
|
var pos = calendar.monthOfYear(2014, 7) */
|
||||||
|
monthOfYear: function(year, month) {
|
||||||
|
var date = this._validate(year, month, this.minDay,
|
||||||
|
$.calendars.local.invalidMonth || $.calendars.regionalOptions[''].invalidMonth);
|
||||||
|
return (date.month() + this.monthsInYear(date) - this.firstMonth) %
|
||||||
|
this.monthsInYear(date) + this.minMonth;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Calculate actual month from ordinal position, starting from <code>minMonth</code>.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {number} year The year to examine.
|
||||||
|
@param {number} ord The month's ordinal position.
|
||||||
|
@return {number} The month's number.
|
||||||
|
@throws Error if an invalid year/month.
|
||||||
|
@example var month = calendar.fromMonthOfYear(2014, 7) */
|
||||||
|
fromMonthOfYear: function(year, ord) {
|
||||||
|
var m = (ord + this.firstMonth - 2 * this.minMonth) %
|
||||||
|
this.monthsInYear(year) + this.minMonth;
|
||||||
|
this._validate(year, m, this.minDay,
|
||||||
|
$.calendars.local.invalidMonth || $.calendars.regionalOptions[''].invalidMonth);
|
||||||
|
return m;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the number of days in a year.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year to examine.
|
||||||
|
@return {number} The number of days.
|
||||||
|
@throws Error if an invalid year or a different calendar is used.
|
||||||
|
@example var days = calendar.daysInYear(date)
|
||||||
|
var days = calendar.daysInYear(2014) */
|
||||||
|
daysInYear: function(year) {
|
||||||
|
var date = this._validate(year, this.minMonth, this.minDay,
|
||||||
|
$.calendars.local.invalidYear || $.calendars.regionalOptions[''].invalidYear);
|
||||||
|
return (this.leapYear(date) ? 366 : 365);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the day of the year for a date.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {CDate|number} year The date to convert or the year to convert.
|
||||||
|
@param {number} [month] The month to convert (if numeric <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day to convert (if numeric <code>year</code> specified above).
|
||||||
|
@return {number} The day of the year: 1 to days per year.
|
||||||
|
@throws Error if an invalid date or a different calendar is used.
|
||||||
|
@example var doy = calendar.dayOfYear(date)
|
||||||
|
var doy = calendar.dayOfYear(2014, 7, 1) */
|
||||||
|
dayOfYear: function(year, month, day) {
|
||||||
|
var date = this._validate(year, month, day,
|
||||||
|
$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
|
||||||
|
return date.toJD() - this.newDate(date.year(),
|
||||||
|
this.fromMonthOfYear(date.year(), this.minMonth), this.minDay).toJD() + 1;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the number of days in a week.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@return {number} The number of days.
|
||||||
|
@example var days = calendar.daysInWeek() */
|
||||||
|
daysInWeek: function() {
|
||||||
|
return 7;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the day of the week for a date.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year to examine.
|
||||||
|
@param {number} [month] The month to examine (if numeric <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day to examine (if numeric <code>year</code> specified above).
|
||||||
|
@return {number} The day of the week: 0 to number of days - 1.
|
||||||
|
@throws Error if an invalid date or a different calendar is used.
|
||||||
|
@example var dow = calendar.dayOfWeek(date)
|
||||||
|
var dow = calendar.dayOfWeek(2014, 1, 26) */
|
||||||
|
dayOfWeek: function(year, month, day) {
|
||||||
|
var date = this._validate(year, month, day,
|
||||||
|
$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
|
||||||
|
return (Math.floor(this.toJD(date)) + 2) % this.daysInWeek();
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve additional information about a date.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year to examine.
|
||||||
|
@param {number} [month] The month to examine (if numeric <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day to examine (if numeric <code>year</code> specified above).
|
||||||
|
@return {object} Additional information - content depends on calendar.
|
||||||
|
@throws Error if an invalid date or a different calendar is used.
|
||||||
|
@example var info = calendar.extraInfo(date)
|
||||||
|
var info = calendar.extraInfo(2014, 1, 26) */
|
||||||
|
extraInfo: function(year, month, day) {
|
||||||
|
this._validate(year, month, day,
|
||||||
|
$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Add period(s) to a date.
|
||||||
|
Cater for no year zero.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {CDate} date The starting date.
|
||||||
|
@param {number} offset The number of periods to adjust by.
|
||||||
|
@param {string} period One of 'y' for years, 'm' for months, 'w' for weeks, 'd' for days.
|
||||||
|
@return {CDate} The updated date.
|
||||||
|
@throws Error if a different calendar is used.
|
||||||
|
@example calendar.add(date, 10, 'd') */
|
||||||
|
add: function(date, offset, period) {
|
||||||
|
this._validate(date, this.minMonth, this.minDay,
|
||||||
|
$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
|
||||||
|
return this._correctAdd(date, this._add(date, offset, period), offset, period);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Add period(s) to a date.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@private
|
||||||
|
@param {CDate} date The starting date.
|
||||||
|
@param {number} offset The number of periods to adjust by.
|
||||||
|
@param {string} period One of 'y' for years, 'm' for months, 'w' for weeks, 'd' for days.
|
||||||
|
@return {number[]} The updated date as year, month, and day. */
|
||||||
|
_add: function(date, offset, period) {
|
||||||
|
this._validateLevel++;
|
||||||
|
var d;
|
||||||
|
if (period === 'd' || period === 'w') {
|
||||||
|
var jd = date.toJD() + offset * (period === 'w' ? this.daysInWeek() : 1);
|
||||||
|
d = date.calendar().fromJD(jd);
|
||||||
|
this._validateLevel--;
|
||||||
|
return [d.year(), d.month(), d.day()];
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
var y = date.year() + (period === 'y' ? offset : 0);
|
||||||
|
var m = date.monthOfYear() + (period === 'm' ? offset : 0);
|
||||||
|
d = date.day();
|
||||||
|
var resyncYearMonth = function(calendar) {
|
||||||
|
while (m < calendar.minMonth) {
|
||||||
|
y--;
|
||||||
|
m += calendar.monthsInYear(y);
|
||||||
|
}
|
||||||
|
var yearMonths = calendar.monthsInYear(y);
|
||||||
|
while (m > yearMonths - 1 + calendar.minMonth) {
|
||||||
|
y++;
|
||||||
|
m -= yearMonths;
|
||||||
|
yearMonths = calendar.monthsInYear(y);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (period === 'y') {
|
||||||
|
if (date.month() !== this.fromMonthOfYear(y, m)) { // Hebrew
|
||||||
|
m = this.newDate(y, date.month(), this.minDay).monthOfYear();
|
||||||
|
}
|
||||||
|
m = Math.min(m, this.monthsInYear(y));
|
||||||
|
d = Math.min(d, this.daysInMonth(y, this.fromMonthOfYear(y, m)));
|
||||||
|
}
|
||||||
|
else if (period === 'm') {
|
||||||
|
resyncYearMonth(this);
|
||||||
|
d = Math.min(d, this.daysInMonth(y, this.fromMonthOfYear(y, m)));
|
||||||
|
}
|
||||||
|
var ymd = [y, this.fromMonthOfYear(y, m), d];
|
||||||
|
this._validateLevel--;
|
||||||
|
return ymd;
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
this._validateLevel--;
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Correct a candidate date after adding period(s) to a date.
|
||||||
|
Handle no year zero if necessary.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@private
|
||||||
|
@param {CDate} date The starting date.
|
||||||
|
@param {number[]} ymd The added date.
|
||||||
|
@param {number} offset The number of periods to adjust by.
|
||||||
|
@param {string} period One of 'y' for years, 'm' for months, 'w' for weeks, 'd' for days.
|
||||||
|
@return {CDate} The updated date. */
|
||||||
|
_correctAdd: function(date, ymd, offset, period) {
|
||||||
|
if (!this.hasYearZero && (period === 'y' || period === 'm')) {
|
||||||
|
if (ymd[0] === 0 || // In year zero
|
||||||
|
(date.year() > 0) !== (ymd[0] > 0)) { // Crossed year zero
|
||||||
|
var adj = {y: [1, 1, 'y'], m: [1, this.monthsInYear(-1), 'm'],
|
||||||
|
w: [this.daysInWeek(), this.daysInYear(-1), 'd'],
|
||||||
|
d: [1, this.daysInYear(-1), 'd']}[period];
|
||||||
|
var dir = (offset < 0 ? -1 : +1);
|
||||||
|
ymd = this._add(date, offset * adj[0] + dir * adj[1], adj[2]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return date.date(ymd[0], ymd[1], ymd[2]);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Set a portion of the date.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {CDate} date The starting date.
|
||||||
|
@param {number} value The new value for the period.
|
||||||
|
@param {string} period One of 'y' for year, 'm' for month, 'd' for day.
|
||||||
|
@return {CDate} The updated date.
|
||||||
|
@throws Error if an invalid date or a different calendar is used.
|
||||||
|
@example calendar.set(date, 10, 'd') */
|
||||||
|
set: function(date, value, period) {
|
||||||
|
this._validate(date, this.minMonth, this.minDay,
|
||||||
|
$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
|
||||||
|
var y = (period === 'y' ? value : date.year());
|
||||||
|
var m = (period === 'm' ? value : date.month());
|
||||||
|
var d = (period === 'd' ? value : date.day());
|
||||||
|
if (period === 'y' || period === 'm') {
|
||||||
|
d = Math.min(d, this.daysInMonth(y, m));
|
||||||
|
}
|
||||||
|
return date.date(y, m, d);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Determine whether a date is valid for this calendar.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {number} year The year to examine.
|
||||||
|
@param {number} month The month to examine.
|
||||||
|
@param {number} day The day to examine.
|
||||||
|
@return {boolean} <code>true</code> if a valid date, <code>false</code> if not.
|
||||||
|
@example if (calendar.isValid(2014, 2, 31)) ... */
|
||||||
|
isValid: function(year, month, day) {
|
||||||
|
this._validateLevel++;
|
||||||
|
var valid = (this.hasYearZero || year !== 0);
|
||||||
|
if (valid) {
|
||||||
|
var date = this.newDate(year, month, this.minDay);
|
||||||
|
valid = (month >= this.minMonth && month - this.minMonth < this.monthsInYear(date)) &&
|
||||||
|
(day >= this.minDay && day - this.minDay < this.daysInMonth(date));
|
||||||
|
}
|
||||||
|
this._validateLevel--;
|
||||||
|
return valid;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Convert the date to a standard (Gregorian) JavaScript Date.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {CDate|number} year The date to convert or the year to convert.
|
||||||
|
@param {number} [month] The month to convert (if numeric <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day to convert (if numeric <code>year</code> specified above).
|
||||||
|
@return {Date} The equivalent JavaScript date.
|
||||||
|
@throws Error if an invalid date or a different calendar is used.
|
||||||
|
@example var jsd = calendar.toJSDate(date)
|
||||||
|
var jsd = calendar.toJSDate(2014, 1, 26) */
|
||||||
|
toJSDate: function(year, month, day) {
|
||||||
|
var date = this._validate(year, month, day,
|
||||||
|
$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
|
||||||
|
return $.calendars.instance().fromJD(this.toJD(date)).toJSDate();
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Convert the date from a standard (Gregorian) JavaScript Date.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {Date} jsd The JavaScript date.
|
||||||
|
@return {CDate} The equivalent calendar date.
|
||||||
|
@example var date = calendar.fromJSDate(jsd) */
|
||||||
|
fromJSDate: function(jsd) {
|
||||||
|
return this.fromJD($.calendars.instance().fromJSDate(jsd).toJD());
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Check that a candidate date is from the same calendar and is valid.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@private
|
||||||
|
@param {CDate|number} year The date to validate or the year to validate.
|
||||||
|
@param {number} [month] The month to validate (if numeric <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day to validate (if numeric <code>year</code> specified above).
|
||||||
|
@param {string} error Error message if invalid.
|
||||||
|
@throws Error if an invalid date or a different calendar is used. */
|
||||||
|
_validate: function(year, month, day, error) {
|
||||||
|
if (year.year) {
|
||||||
|
if (this._validateLevel === 0 && this.name !== year.calendar().name) {
|
||||||
|
throw ($.calendars.local.differentCalendars || $.calendars.regionalOptions[''].differentCalendars).
|
||||||
|
replace(/\{0\}/, this.local.name).replace(/\{1\}/, year.calendar().local.name);
|
||||||
|
}
|
||||||
|
return year;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
this._validateLevel++;
|
||||||
|
if (this._validateLevel === 1 && !this.isValid(year, month, day)) {
|
||||||
|
throw error.replace(/\{0\}/, this.local.name);
|
||||||
|
}
|
||||||
|
var date = this.newDate(year, month, day);
|
||||||
|
this._validateLevel--;
|
||||||
|
return date;
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
this._validateLevel--;
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Implementation of the Proleptic Gregorian Calendar.
|
||||||
|
See <a href=":http://en.wikipedia.org/wiki/Gregorian_calendar">http://en.wikipedia.org/wiki/Gregorian_calendar</a>
|
||||||
|
and <a href="http://en.wikipedia.org/wiki/Proleptic_Gregorian_calendar">http://en.wikipedia.org/wiki/Proleptic_Gregorian_calendar</a>.
|
||||||
|
@class GregorianCalendar
|
||||||
|
@augments BaseCalendar
|
||||||
|
@param {string} [language=''] The language code (default English) for localisation. */
|
||||||
|
function GregorianCalendar(language) {
|
||||||
|
this.local = this.regionalOptions[language] || this.regionalOptions[''];
|
||||||
|
}
|
||||||
|
|
||||||
|
GregorianCalendar.prototype = new BaseCalendar();
|
||||||
|
|
||||||
|
$.extend(GregorianCalendar.prototype, {
|
||||||
|
/** The calendar name.
|
||||||
|
@memberof GregorianCalendar */
|
||||||
|
name: 'Gregorian',
|
||||||
|
/** Julian date of start of Gregorian epoch: 1 January 0001 CE.
|
||||||
|
@memberof GregorianCalendar */
|
||||||
|
jdEpoch: 1721425.5,
|
||||||
|
/** Days per month in a common year.
|
||||||
|
@memberof GregorianCalendar */
|
||||||
|
daysPerMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
|
||||||
|
/** <code>true</code> if has a year zero, <code>false</code> if not.
|
||||||
|
@memberof GregorianCalendar */
|
||||||
|
hasYearZero: false,
|
||||||
|
/** The minimum month number.
|
||||||
|
@memberof GregorianCalendar */
|
||||||
|
minMonth: 1,
|
||||||
|
/** The first month in the year.
|
||||||
|
@memberof GregorianCalendar */
|
||||||
|
firstMonth: 1,
|
||||||
|
/** The minimum day number.
|
||||||
|
@memberof GregorianCalendar */
|
||||||
|
minDay: 1,
|
||||||
|
|
||||||
|
/** Convert a number into a localised form.
|
||||||
|
@callback CalendarsDigits
|
||||||
|
@param {number} value The number to convert.
|
||||||
|
@return {string} The localised number.
|
||||||
|
@example digits: $.calendars.substituteDigits(['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']) */
|
||||||
|
|
||||||
|
/** Localisations for the plugin.
|
||||||
|
Entries are objects indexed by the language code ('' being the default US/English).
|
||||||
|
Each object has the following attributes.
|
||||||
|
@memberof GregorianCalendar
|
||||||
|
@property {string} [name='Gregorian'] The calendar name.
|
||||||
|
@property {string[]} [epochs=['BCE','CE']] The epoch names.
|
||||||
|
@property {string[]} [monthNames=[...]] The long names of the months of the year.
|
||||||
|
@property {string[]} [monthNamesShort=[...]] The short names of the months of the year.
|
||||||
|
@property {string[]} [dayNames=[...]] The long names of the days of the week.
|
||||||
|
@property {string[]} [dayNamesShort=[...]] The short names of the days of the week.
|
||||||
|
@property {string[]} [dayNamesMin=[...]] The minimal names of the days of the week.
|
||||||
|
@property {CalendarsDigits} [digits=null] Convert numbers to localised versions.
|
||||||
|
@property {string} [dateFormat='mm/dd/yyyy'] The date format for this calendar.
|
||||||
|
See the options on {@linkcode BaseCalendar.formatDate|formatDate} for details.
|
||||||
|
@property {number} [firstDay=0] The number of the first day of the week, starting at 0.
|
||||||
|
@property {boolean} [isRTL=false] <code>true</code> if this localisation reads right-to-left. */
|
||||||
|
regionalOptions: { // Localisations
|
||||||
|
'': {
|
||||||
|
name: 'Gregorian',
|
||||||
|
epochs: ['BCE', 'CE'],
|
||||||
|
monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
|
||||||
|
'July', 'August', 'September', 'October', 'November', 'December'],
|
||||||
|
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||||
|
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
||||||
|
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||||
|
dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
|
||||||
|
digits: null,
|
||||||
|
dateFormat: 'mm/dd/yyyy',
|
||||||
|
firstDay: 0,
|
||||||
|
isRTL: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Determine whether this date is in a leap year.
|
||||||
|
@memberof GregorianCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year to examine.
|
||||||
|
@return {boolean} <code>true</code> if this is a leap year, <code>false</code> if not.
|
||||||
|
@throws Error if an invalid year or a different calendar is used. */
|
||||||
|
leapYear: function(year) {
|
||||||
|
var date = this._validate(year, this.minMonth, this.minDay,
|
||||||
|
$.calendars.local.invalidYear || $.calendars.regionalOptions[''].invalidYear);
|
||||||
|
year = date.year() + (date.year() < 0 ? 1 : 0); // No year zero
|
||||||
|
return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Determine the week of the year for a date - ISO 8601.
|
||||||
|
@memberof GregorianCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year to examine.
|
||||||
|
@param {number} [month] The month to examine (if numeric <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day to examine (if numeric <code>year</code> specified above).
|
||||||
|
@return {number} The week of the year, starting from 1.
|
||||||
|
@throws Error if an invalid date or a different calendar is used. */
|
||||||
|
weekOfYear: function(year, month, day) {
|
||||||
|
// Find Thursday of this week starting on Monday
|
||||||
|
var checkDate = this.newDate(year, month, day);
|
||||||
|
checkDate.add(4 - (checkDate.dayOfWeek() || 7), 'd');
|
||||||
|
return Math.floor((checkDate.dayOfYear() - 1) / 7) + 1;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the number of days in a month.
|
||||||
|
@memberof GregorianCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year of the month.
|
||||||
|
@param {number} [month] The month (if numeric <code>year</code> specified above).
|
||||||
|
@return {number} The number of days in this month.
|
||||||
|
@throws Error if an invalid month/year or a different calendar is used. */
|
||||||
|
daysInMonth: function(year, month) {
|
||||||
|
var date = this._validate(year, month, this.minDay,
|
||||||
|
$.calendars.local.invalidMonth || $.calendars.regionalOptions[''].invalidMonth);
|
||||||
|
return this.daysPerMonth[date.month() - 1] +
|
||||||
|
(date.month() === 2 && this.leapYear(date.year()) ? 1 : 0);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Determine whether this date is a week day.
|
||||||
|
@memberof GregorianCalendar
|
||||||
|
@param {CDate|number} year The date to examine or the year to examine.
|
||||||
|
@param {number} [month] The month to examine (if numeric <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day to examine (if numeric <code>year</code> specified above).
|
||||||
|
@return {boolean} <code>true</code> if a week day, <code>false</code> if not.
|
||||||
|
@throws Error if an invalid date or a different calendar is used. */
|
||||||
|
weekDay: function(year, month, day) {
|
||||||
|
return (this.dayOfWeek(year, month, day) || 7) < 6;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the Julian date equivalent for this date,
|
||||||
|
i.e. days since January 1, 4713 BCE Greenwich noon.
|
||||||
|
@memberof GregorianCalendar
|
||||||
|
@param {CDate|number} year The date to convert or the year to convert.
|
||||||
|
@param {number} [month] The month to convert (if numeric <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day to convert (if numeric <code>year</code> specified above).
|
||||||
|
@return {number} The equivalent Julian date.
|
||||||
|
@throws Error if an invalid date or a different calendar is used. */
|
||||||
|
toJD: function(year, month, day) {
|
||||||
|
var date = this._validate(year, month, day,
|
||||||
|
$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
|
||||||
|
year = date.year();
|
||||||
|
month = date.month();
|
||||||
|
day = date.day();
|
||||||
|
if (year < 0) { year++; } // No year zero
|
||||||
|
// Jean Meeus algorithm, "Astronomical Algorithms", 1991
|
||||||
|
if (month < 3) {
|
||||||
|
month += 12;
|
||||||
|
year--;
|
||||||
|
}
|
||||||
|
var a = Math.floor(year / 100);
|
||||||
|
var b = 2 - a + Math.floor(a / 4);
|
||||||
|
return Math.floor(365.25 * (year + 4716)) +
|
||||||
|
Math.floor(30.6001 * (month + 1)) + day + b - 1524.5;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Create a new date from a Julian date.
|
||||||
|
@memberof GregorianCalendar
|
||||||
|
@param {number} jd The Julian date to convert.
|
||||||
|
@return {CDate} The equivalent date. */
|
||||||
|
fromJD: function(jd) {
|
||||||
|
// Jean Meeus algorithm, "Astronomical Algorithms", 1991
|
||||||
|
var z = Math.floor(jd + 0.5);
|
||||||
|
var a = Math.floor((z - 1867216.25) / 36524.25);
|
||||||
|
a = z + 1 + a - Math.floor(a / 4);
|
||||||
|
var b = a + 1524;
|
||||||
|
var c = Math.floor((b - 122.1) / 365.25);
|
||||||
|
var d = Math.floor(365.25 * c);
|
||||||
|
var e = Math.floor((b - d) / 30.6001);
|
||||||
|
var day = b - d - Math.floor(e * 30.6001);
|
||||||
|
var month = e - (e > 13.5 ? 13 : 1);
|
||||||
|
var year = c - (month > 2.5 ? 4716 : 4715);
|
||||||
|
if (year <= 0) { year--; } // No year zero
|
||||||
|
return this.newDate(year, month, day);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Convert this date to a standard (Gregorian) JavaScript Date.
|
||||||
|
@memberof GregorianCalendar
|
||||||
|
@param {CDate|number} year The date to convert or the year to convert.
|
||||||
|
@param {number} [month] The month to convert (if numeric <code>year</code> specified above).
|
||||||
|
@param {number} [day] The day to convert (if numeric <code>year</code> specified above).
|
||||||
|
@return {Date} The equivalent JavaScript date.
|
||||||
|
@throws Error if an invalid date or a different calendar is used. */
|
||||||
|
toJSDate: function(year, month, day) {
|
||||||
|
var date = this._validate(year, month, day,
|
||||||
|
$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
|
||||||
|
var jsd = new Date(date.year(), date.month() - 1, date.day());
|
||||||
|
jsd.setHours(0);
|
||||||
|
jsd.setMinutes(0);
|
||||||
|
jsd.setSeconds(0);
|
||||||
|
jsd.setMilliseconds(0);
|
||||||
|
// Hours may be non-zero on daylight saving cut-over:
|
||||||
|
// > 12 when midnight changeover, but then cannot generate
|
||||||
|
// midnight datetime, so jump to 1AM, otherwise reset.
|
||||||
|
jsd.setHours(jsd.getHours() > 12 ? jsd.getHours() + 2 : 0);
|
||||||
|
return jsd;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Create a new date from a standard (Gregorian) JavaScript Date.
|
||||||
|
@memberof GregorianCalendar
|
||||||
|
@param {Date} jsd The JavaScript date to convert.
|
||||||
|
@return {CDate} The equivalent date. */
|
||||||
|
fromJSDate: function(jsd) {
|
||||||
|
return this.newDate(jsd.getFullYear(), jsd.getMonth() + 1, jsd.getDate());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Singleton manager
|
||||||
|
$.calendars = new Calendars();
|
||||||
|
|
||||||
|
// Date template
|
||||||
|
$.calendars.cdate = CDate;
|
||||||
|
|
||||||
|
// Base calendar template
|
||||||
|
$.calendars.baseCalendar = BaseCalendar;
|
||||||
|
|
||||||
|
// Gregorian calendar implementation
|
||||||
|
$.calendars.calendars.gregorian = GregorianCalendar;
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,463 @@
|
|||||||
|
/* http://keith-wood.name/calendars.html
|
||||||
|
Calendars extras for jQuery v2.1.0.
|
||||||
|
Written by Keith Wood (wood.keith{at}optusnet.com.au) August 2009.
|
||||||
|
Available under the MIT (http://keith-wood.name/licence.html) license.
|
||||||
|
Please attribute the author if you use it. */
|
||||||
|
|
||||||
|
(function($) { // Hide scope, no $ conflict
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
$.extend($.calendars.regionalOptions[''], {
|
||||||
|
invalidArguments: 'Invalid arguments',
|
||||||
|
invalidFormat: 'Cannot format a date from another calendar',
|
||||||
|
missingNumberAt: 'Missing number at position {0}',
|
||||||
|
unknownNameAt: 'Unknown name at position {0}',
|
||||||
|
unexpectedLiteralAt: 'Unexpected literal at position {0}',
|
||||||
|
unexpectedText: 'Additional text found at end'
|
||||||
|
});
|
||||||
|
$.calendars.local = $.calendars.regionalOptions[''];
|
||||||
|
|
||||||
|
$.extend($.calendars.cdate.prototype, {
|
||||||
|
|
||||||
|
/** Format this date.
|
||||||
|
Found in the <code>jquery.calendars.plus.js</code> module.
|
||||||
|
@memberof CDate
|
||||||
|
@param {string} [format] The date format to use (see {@linkcode BaseCalendar.formatDate|formatDate}).
|
||||||
|
@param {object} [settings] Options for the <code>formatDate</code> function.
|
||||||
|
@return {string} The formatted date. */
|
||||||
|
formatDate: function(format, settings) {
|
||||||
|
if (typeof format !== 'string') {
|
||||||
|
settings = format;
|
||||||
|
format = '';
|
||||||
|
}
|
||||||
|
return this._calendar.formatDate(format || '', this, settings);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$.extend($.calendars.baseCalendar.prototype, {
|
||||||
|
|
||||||
|
UNIX_EPOCH: $.calendars.instance().newDate(1970, 1, 1).toJD(),
|
||||||
|
SECS_PER_DAY: 24 * 60 * 60,
|
||||||
|
TICKS_EPOCH: $.calendars.instance().jdEpoch, // 1 January 0001 CE
|
||||||
|
TICKS_PER_DAY: 24 * 60 * 60 * 10000000,
|
||||||
|
|
||||||
|
/** Date format for ATOM (RFC 3339/ISO 8601) - 'yyyy-mm-dd'.
|
||||||
|
@memberof BaseCalendar */
|
||||||
|
ATOM: 'yyyy-mm-dd',
|
||||||
|
/** Date format for cookies - 'D, dd M yyyy'.
|
||||||
|
@memberof BaseCalendar */
|
||||||
|
COOKIE: 'D, dd M yyyy',
|
||||||
|
/** Date format for the full date - 'DD, MM d, yyyy'.
|
||||||
|
@memberof BaseCalendar */
|
||||||
|
FULL: 'DD, MM d, yyyy',
|
||||||
|
/** Date format for ISO 8601 - 'yyyy-mm-dd'.
|
||||||
|
@memberof BaseCalendar */
|
||||||
|
ISO_8601: 'yyyy-mm-dd',
|
||||||
|
/** Date format for Julian date - days since January 1, 4713 BCE Greenwich noon.
|
||||||
|
@memberof BaseCalendar */
|
||||||
|
JULIAN: 'J',
|
||||||
|
/** Date format for RFC 822 - 'D, d M yy'.
|
||||||
|
@memberof BaseCalendar */
|
||||||
|
RFC_822: 'D, d M yy',
|
||||||
|
/** Date format for RFC 850 - 'DD, dd-M-yy'.
|
||||||
|
@memberof BaseCalendar */
|
||||||
|
RFC_850: 'DD, dd-M-yy',
|
||||||
|
/** Date format for RFC 1036 - 'D, d M yy'.
|
||||||
|
@memberof BaseCalendar */
|
||||||
|
RFC_1036: 'D, d M yy',
|
||||||
|
/** Date format for RFC 1123 - 'D, d M yyyy'.
|
||||||
|
@memberof BaseCalendar */
|
||||||
|
RFC_1123: 'D, d M yyyy',
|
||||||
|
/** Date format for RFC 2822 - 'D, d M yyyy'.
|
||||||
|
@memberof BaseCalendar */
|
||||||
|
RFC_2822: 'D, d M yyyy',
|
||||||
|
/** Date format for RSS (RFC 822) - 'D, d M yy'.
|
||||||
|
@memberof BaseCalendar */
|
||||||
|
RSS: 'D, d M yy',
|
||||||
|
/** Date format for Windows ticks - number of 100-nanosecond ticks since 1 January 0001 00:00:00 UTC.
|
||||||
|
@memberof BaseCalendar */
|
||||||
|
TICKS: '!',
|
||||||
|
/** Date format for Unix timestamp - number of seconds elapsed since the
|
||||||
|
start of the Unix epoch at 1 January 1970 00:00:00 UTC.
|
||||||
|
@memberof BaseCalendar */
|
||||||
|
TIMESTAMP: '@',
|
||||||
|
/** Date format for W3C (ISO 8601) - 'yyyy-mm-dd'.
|
||||||
|
@memberof BaseCalendar */
|
||||||
|
W3C: 'yyyy-mm-dd',
|
||||||
|
|
||||||
|
/** Format a date object into a string value.
|
||||||
|
The format can be combinations of the following:
|
||||||
|
<ul>
|
||||||
|
<li>d - day of month (no leading zero)</li>
|
||||||
|
<li>dd - day of month (two digit)</li>
|
||||||
|
<li>o - day of year (no leading zeros)</li>
|
||||||
|
<li>oo - day of year (three digit)</li>
|
||||||
|
<li>D - day name short</li>
|
||||||
|
<li>DD - day name long</li>
|
||||||
|
<li>w - week of year (no leading zero)</li>
|
||||||
|
<li>ww - week of year (two digit)</li>
|
||||||
|
<li>m - month of year (no leading zero)</li>
|
||||||
|
<li>mm - month of year (two digit)</li>
|
||||||
|
<li>M - month name short</li>
|
||||||
|
<li>MM - month name long</li>
|
||||||
|
<li>yy - year (two digit)</li>
|
||||||
|
<li>yyyy - year (four digit)</li>
|
||||||
|
<li>YYYY - formatted year</li>
|
||||||
|
<li>J - Julian date (days since January 1, 4713 BCE Greenwich noon)</li>
|
||||||
|
<li>@ - Unix timestamp (s since 01/01/1970)</li>
|
||||||
|
<li>! - Windows ticks (100ns since 01/01/0001)</li>
|
||||||
|
<li>'...' - literal text</li>
|
||||||
|
<li>'' - single quote</li>
|
||||||
|
</ul>
|
||||||
|
Found in the <code>jquery.calendars.plus.js</code> module.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {string} [format] The desired format of the date (defaults to calendar format).
|
||||||
|
@param {CDate} date The date value to format.
|
||||||
|
@param {object} [settings] Addition options, whose attributes include:
|
||||||
|
@param {string[]} [settings.dayNamesShort] Abbreviated names of the days from day 0 (Sunday).
|
||||||
|
@param {string[]} [settings.dayNames] Names of the days from day 0 (Sunday).
|
||||||
|
@param {string[]} [settings.monthNamesShort] Abbreviated names of the months.
|
||||||
|
@param {string[]} [settings.monthNames] Names of the months.
|
||||||
|
@param {boolean} [settings.localNumbers=false] <code>true</code> to localise numbers (if available),
|
||||||
|
<code>false</code> to use normal Arabic numerals.
|
||||||
|
@return {string} The date in the above format.
|
||||||
|
@throws Errors if the date is from a different calendar. */
|
||||||
|
formatDate: function(format, date, settings) {
|
||||||
|
if (typeof format !== 'string') {
|
||||||
|
settings = date;
|
||||||
|
date = format;
|
||||||
|
format = '';
|
||||||
|
}
|
||||||
|
if (!date) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
if (date.calendar() !== this) {
|
||||||
|
throw $.calendars.local.invalidFormat || $.calendars.regionalOptions[''].invalidFormat;
|
||||||
|
}
|
||||||
|
format = format || this.local.dateFormat;
|
||||||
|
settings = settings || {};
|
||||||
|
var dayNamesShort = settings.dayNamesShort || this.local.dayNamesShort;
|
||||||
|
var dayNames = settings.dayNames || this.local.dayNames;
|
||||||
|
var monthNamesShort = settings.monthNamesShort || this.local.monthNamesShort;
|
||||||
|
var monthNames = settings.monthNames || this.local.monthNames;
|
||||||
|
var localNumbers = settings.localNumbers || this.local.localNumbers;
|
||||||
|
// Check whether a format character is doubled
|
||||||
|
var doubled = function(match, step) {
|
||||||
|
var matches = 1;
|
||||||
|
while (iFormat + matches < format.length && format.charAt(iFormat + matches) === match) {
|
||||||
|
matches++;
|
||||||
|
}
|
||||||
|
iFormat += matches - 1;
|
||||||
|
return Math.floor(matches / (step || 1)) > 1;
|
||||||
|
};
|
||||||
|
// Format a number, with leading zeroes if necessary
|
||||||
|
var formatNumber = function(match, value, len, step) {
|
||||||
|
var num = '' + value;
|
||||||
|
if (doubled(match, step)) {
|
||||||
|
while (num.length < len) {
|
||||||
|
num = '0' + num;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return num;
|
||||||
|
};
|
||||||
|
// Format a name, short or long as requested
|
||||||
|
var formatName = function(match, value, shortNames, longNames) {
|
||||||
|
return (doubled(match) ? longNames[value] : shortNames[value]);
|
||||||
|
};
|
||||||
|
// Localise numbers if requested and available
|
||||||
|
var localiseNumbers = localNumbers && this.local.digits ?
|
||||||
|
this.local.digits : function(value) { return value; };
|
||||||
|
var output = '';
|
||||||
|
var literal = false;
|
||||||
|
for (var iFormat = 0; iFormat < format.length; iFormat++) {
|
||||||
|
if (literal) {
|
||||||
|
if (format.charAt(iFormat) === '\'' && !doubled('\'')) {
|
||||||
|
literal = false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
output += format.charAt(iFormat);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
switch (format.charAt(iFormat)) {
|
||||||
|
case 'd':
|
||||||
|
output += localiseNumbers(formatNumber('d', date.day(), 2));
|
||||||
|
break;
|
||||||
|
case 'D':
|
||||||
|
output += formatName('D', date.dayOfWeek(), dayNamesShort, dayNames);
|
||||||
|
break;
|
||||||
|
case 'o':
|
||||||
|
output += formatNumber('o', date.dayOfYear(), 3);
|
||||||
|
break;
|
||||||
|
case 'w':
|
||||||
|
output += formatNumber('w', date.weekOfYear(), 2);
|
||||||
|
break;
|
||||||
|
case 'm':
|
||||||
|
output += localiseNumbers(formatNumber('m', date.month(), 2));
|
||||||
|
break;
|
||||||
|
case 'M':
|
||||||
|
output += formatName('M', date.month() - this.minMonth, monthNamesShort, monthNames);
|
||||||
|
break;
|
||||||
|
case 'y':
|
||||||
|
output += localiseNumbers(doubled('y', 2) ? date.year() :
|
||||||
|
(date.year() % 100 < 10 ? '0' : '') + date.year() % 100);
|
||||||
|
break;
|
||||||
|
case 'Y':
|
||||||
|
doubled('Y', 2);
|
||||||
|
output += date.formatYear();
|
||||||
|
break;
|
||||||
|
case 'J':
|
||||||
|
output += date.toJD();
|
||||||
|
break;
|
||||||
|
case '@':
|
||||||
|
output += (date.toJD() - this.UNIX_EPOCH) * this.SECS_PER_DAY;
|
||||||
|
break;
|
||||||
|
case '!':
|
||||||
|
output += (date.toJD() - this.TICKS_EPOCH) * this.TICKS_PER_DAY;
|
||||||
|
break;
|
||||||
|
case '\'':
|
||||||
|
if (doubled('\'')) {
|
||||||
|
output += '\'';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
literal = true;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
output += format.charAt(iFormat);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return output;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Parse a string value into a date object.
|
||||||
|
See {@linkcode BaseCalendar.formatDate|formatDate} for the possible formats, plus:
|
||||||
|
<ul>
|
||||||
|
<li>* - ignore rest of string</li>
|
||||||
|
</ul>
|
||||||
|
Found in the <code>jquery.calendars.plus.js</code> module.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {string} format The expected format of the date ('' for default calendar format).
|
||||||
|
@param {string} value The date in the above format.
|
||||||
|
@param {object} [settings] Additional options whose attributes include:
|
||||||
|
@param {number} [settings.shortYearCutoff] The cutoff year for determining the century.
|
||||||
|
@param {string[]} [settings.dayNamesShort] Abbreviated names of the days from day 0 (Sunday).
|
||||||
|
@param {string[]} [settings.dayNames] Names of the days from day 0 (Sunday).
|
||||||
|
@param {string[]} [settings.monthNamesShort] Abbreviated names of the months.
|
||||||
|
@param {string[]} [settings.monthNames] Names of the months.
|
||||||
|
@return {CDate} The extracted date value or <code>null</code> if value is blank.
|
||||||
|
@throws Errors if the format and/or value are missing,
|
||||||
|
if the value doesn't match the format, or if the date is invalid. */
|
||||||
|
parseDate: function(format, value, settings) {
|
||||||
|
if (typeof value === 'undefined' || value === null) {
|
||||||
|
throw $.calendars.local.invalidArguments || $.calendars.regionalOptions[''].invalidArguments;
|
||||||
|
}
|
||||||
|
value = (typeof value === 'object' ? value.toString() : value + '');
|
||||||
|
if (value === '') {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
format = format || this.local.dateFormat;
|
||||||
|
settings = settings || {};
|
||||||
|
var shortYearCutoff = settings.shortYearCutoff || this.shortYearCutoff;
|
||||||
|
shortYearCutoff = (typeof shortYearCutoff !== 'string' ? shortYearCutoff :
|
||||||
|
this.today().year() % 100 + parseInt(shortYearCutoff, 10));
|
||||||
|
var dayNamesShort = settings.dayNamesShort || this.local.dayNamesShort;
|
||||||
|
var dayNames = settings.dayNames || this.local.dayNames;
|
||||||
|
var monthNamesShort = settings.monthNamesShort || this.local.monthNamesShort;
|
||||||
|
var monthNames = settings.monthNames || this.local.monthNames;
|
||||||
|
var jd = -1;
|
||||||
|
var year = -1;
|
||||||
|
var month = -1;
|
||||||
|
var day = -1;
|
||||||
|
var doy = -1;
|
||||||
|
var shortYear = false;
|
||||||
|
var literal = false;
|
||||||
|
// Check whether a format character is doubled
|
||||||
|
var doubled = function(match, step) {
|
||||||
|
var matches = 1;
|
||||||
|
while (iFormat + matches < format.length && format.charAt(iFormat + matches) === match) {
|
||||||
|
matches++;
|
||||||
|
}
|
||||||
|
iFormat += matches - 1;
|
||||||
|
return Math.floor(matches / (step || 1)) > 1;
|
||||||
|
};
|
||||||
|
// Extract a number from the string value
|
||||||
|
var getNumber = function(match, step) {
|
||||||
|
var isDoubled = doubled(match, step);
|
||||||
|
var size = [2, 3, isDoubled ? 4 : 2, isDoubled ? 4 : 2, 10, 11, 20]['oyYJ@!'.indexOf(match) + 1];
|
||||||
|
var digits = new RegExp('^-?\\d{1,' + size + '}');
|
||||||
|
var num = value.substring(iValue).match(digits);
|
||||||
|
if (!num) {
|
||||||
|
throw ($.calendars.local.missingNumberAt || $.calendars.regionalOptions[''].missingNumberAt).
|
||||||
|
replace(/\{0\}/, iValue);
|
||||||
|
}
|
||||||
|
iValue += num[0].length;
|
||||||
|
return parseInt(num[0], 10);
|
||||||
|
};
|
||||||
|
// Extract a name from the string value and convert to an index
|
||||||
|
var calendar = this;
|
||||||
|
var getName = function(match, shortNames, longNames, step) {
|
||||||
|
var names = (doubled(match, step) ? longNames : shortNames);
|
||||||
|
for (var i = 0; i < names.length; i++) {
|
||||||
|
if (value.substr(iValue, names[i].length).toLowerCase() === names[i].toLowerCase()) {
|
||||||
|
iValue += names[i].length;
|
||||||
|
return i + calendar.minMonth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
throw ($.calendars.local.unknownNameAt || $.calendars.regionalOptions[''].unknownNameAt).
|
||||||
|
replace(/\{0\}/, iValue);
|
||||||
|
};
|
||||||
|
// Confirm that a literal character matches the string value
|
||||||
|
var checkLiteral = function() {
|
||||||
|
if (value.charAt(iValue) !== format.charAt(iFormat)) {
|
||||||
|
throw ($.calendars.local.unexpectedLiteralAt ||
|
||||||
|
$.calendars.regionalOptions[''].unexpectedLiteralAt).replace(/\{0\}/, iValue);
|
||||||
|
}
|
||||||
|
iValue++;
|
||||||
|
};
|
||||||
|
var iValue = 0;
|
||||||
|
for (var iFormat = 0; iFormat < format.length; iFormat++) {
|
||||||
|
if (literal) {
|
||||||
|
if (format.charAt(iFormat) === '\'' && !doubled('\'')) {
|
||||||
|
literal = false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
checkLiteral();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
switch (format.charAt(iFormat)) {
|
||||||
|
case 'd':
|
||||||
|
day = getNumber('d');
|
||||||
|
break;
|
||||||
|
case 'D':
|
||||||
|
getName('D', dayNamesShort, dayNames);
|
||||||
|
break;
|
||||||
|
case 'o':
|
||||||
|
doy = getNumber('o');
|
||||||
|
break;
|
||||||
|
case 'w':
|
||||||
|
getNumber('w');
|
||||||
|
break;
|
||||||
|
case 'm':
|
||||||
|
month = getNumber('m');
|
||||||
|
break;
|
||||||
|
case 'M':
|
||||||
|
month = getName('M', monthNamesShort, monthNames);
|
||||||
|
break;
|
||||||
|
case 'y':
|
||||||
|
var iSave = iFormat;
|
||||||
|
shortYear = !doubled('y', 2);
|
||||||
|
iFormat = iSave;
|
||||||
|
year = getNumber('y', 2);
|
||||||
|
break;
|
||||||
|
case 'Y':
|
||||||
|
year = getNumber('Y', 2);
|
||||||
|
break;
|
||||||
|
case 'J':
|
||||||
|
jd = getNumber('J') + 0.5;
|
||||||
|
if (value.charAt(iValue) === '.') {
|
||||||
|
iValue++;
|
||||||
|
getNumber('J');
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case '@':
|
||||||
|
jd = getNumber('@') / this.SECS_PER_DAY + this.UNIX_EPOCH;
|
||||||
|
break;
|
||||||
|
case '!':
|
||||||
|
jd = getNumber('!') / this.TICKS_PER_DAY + this.TICKS_EPOCH;
|
||||||
|
break;
|
||||||
|
case '*':
|
||||||
|
iValue = value.length;
|
||||||
|
break;
|
||||||
|
case '\'':
|
||||||
|
if (doubled('\'')) {
|
||||||
|
checkLiteral();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
literal = true;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
checkLiteral();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (iValue < value.length) {
|
||||||
|
throw $.calendars.local.unexpectedText || $.calendars.regionalOptions[''].unexpectedText;
|
||||||
|
}
|
||||||
|
if (year === -1) {
|
||||||
|
year = this.today().year();
|
||||||
|
}
|
||||||
|
else if (year < 100 && shortYear) {
|
||||||
|
year += (shortYearCutoff === -1 ? 1900 : this.today().year() -
|
||||||
|
this.today().year() % 100 - (year <= shortYearCutoff ? 0 : 100));
|
||||||
|
}
|
||||||
|
if (doy > -1) {
|
||||||
|
month = 1;
|
||||||
|
day = doy;
|
||||||
|
for (var dim = this.daysInMonth(year, month); day > dim; dim = this.daysInMonth(year, month)) {
|
||||||
|
month++;
|
||||||
|
day -= dim;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (jd > -1 ? this.fromJD(jd) : this.newDate(year, month, day));
|
||||||
|
},
|
||||||
|
|
||||||
|
/** A date may be specified as an exact value or a relative one.
|
||||||
|
Found in the <code>jquery.calendars.plus.js</code> module.
|
||||||
|
@memberof BaseCalendar
|
||||||
|
@param {CDate|number|string} dateSpec The date as an object or string in the given format or
|
||||||
|
an offset - numeric days from today, or string amounts and periods, e.g. '+1m +2w'.
|
||||||
|
@param {CDate} defaultDate The date to use if no other supplied, may be <code>null</code>.
|
||||||
|
@param {CDate} [currentDate=null] The current date as a possible basis for relative dates,
|
||||||
|
if <code>null</code> today is used.
|
||||||
|
@param {string} [dateFormat] The expected date format -
|
||||||
|
see {@linkcode BaseCalendar.formatDate|formatDate}. Use '' for the calendar default format.
|
||||||
|
@param {object} [settings] Additional options whose attributes include:
|
||||||
|
@param {number} [settings.shortYearCutoff] The cutoff year for determining the century.
|
||||||
|
@param {string[]} [settings.dayNamesShort] Abbreviated names of the days from day 0 (Sunday).
|
||||||
|
@param {string[]} [settings.dayNames] Names of the days from day 0 (Sunday).
|
||||||
|
@param {string[]} [settings.monthNamesShort] Abbreviated names of the months.
|
||||||
|
@param {string[]} [settings.monthNames] Names of the months.
|
||||||
|
@return {CDate} The decoded date. */
|
||||||
|
determineDate: function(dateSpec, defaultDate, currentDate, dateFormat, settings) {
|
||||||
|
if (currentDate && typeof currentDate !== 'object') {
|
||||||
|
settings = dateFormat;
|
||||||
|
dateFormat = currentDate;
|
||||||
|
currentDate = null;
|
||||||
|
}
|
||||||
|
if (typeof dateFormat !== 'string') {
|
||||||
|
settings = dateFormat;
|
||||||
|
dateFormat = '';
|
||||||
|
}
|
||||||
|
var calendar = this;
|
||||||
|
var offsetString = function(offset) {
|
||||||
|
try {
|
||||||
|
return calendar.parseDate(dateFormat, offset, settings);
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
// Ignore
|
||||||
|
}
|
||||||
|
offset = offset.toLowerCase();
|
||||||
|
var date = (offset.match(/^c/) && currentDate ?
|
||||||
|
currentDate.newDate() : null) || calendar.today();
|
||||||
|
var pattern = /([+-]?[0-9]+)\s*(d|w|m|y)?/g;
|
||||||
|
var matches = pattern.exec(offset);
|
||||||
|
while (matches) {
|
||||||
|
date.add(parseInt(matches[1], 10), matches[2] || 'd');
|
||||||
|
matches = pattern.exec(offset);
|
||||||
|
}
|
||||||
|
return date;
|
||||||
|
};
|
||||||
|
defaultDate = (defaultDate ? defaultDate.newDate() : null);
|
||||||
|
dateSpec = (typeof dateSpec === 'undefined' || dateSpec === null ? defaultDate :
|
||||||
|
(typeof dateSpec === 'string' ? offsetString(dateSpec) : (typeof dateSpec === 'number' ?
|
||||||
|
(isNaN(dateSpec) || dateSpec === Infinity || dateSpec === -Infinity ? defaultDate :
|
||||||
|
calendar.today().add(dateSpec, 'd')) : calendar.newDate(dateSpec))));
|
||||||
|
return dateSpec;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
@@ -0,0 +1,389 @@
|
|||||||
|
/* globals JQClass */
|
||||||
|
/*! Simple JavaScript Inheritance
|
||||||
|
* By John Resig http://ejohn.org/
|
||||||
|
* MIT Licensed.
|
||||||
|
*/
|
||||||
|
// Inspired by base2 and Prototype
|
||||||
|
import $ from "@/shared/common/jquery-global";
|
||||||
|
(function(){
|
||||||
|
'use strict';
|
||||||
|
var initializing = false;
|
||||||
|
|
||||||
|
// The base JQClass implementation (does nothing)
|
||||||
|
window.JQClass = function(){};
|
||||||
|
|
||||||
|
// Collection of derived classes
|
||||||
|
JQClass.classes = {};
|
||||||
|
|
||||||
|
// Create a new JQClass that inherits from this class
|
||||||
|
JQClass.extend = function extender(prop) {
|
||||||
|
var base = this.prototype;
|
||||||
|
|
||||||
|
// Instantiate a base class (but only create the instance, don't run the init constructor)
|
||||||
|
initializing = true;
|
||||||
|
var prototype = new this();
|
||||||
|
initializing = false;
|
||||||
|
|
||||||
|
// Copy the properties over onto the new prototype
|
||||||
|
for (var name in prop) { // jshint loopfunc:true
|
||||||
|
// Check if we're overwriting an existing function
|
||||||
|
if (typeof prop[name] === 'function' && typeof base[name] === 'function') {
|
||||||
|
prototype[name] = (function (name, fn) {
|
||||||
|
return function () {
|
||||||
|
var __super = this._super;
|
||||||
|
// Add a new ._super() method that is the same method but on the super-class
|
||||||
|
this._super = function (args) {
|
||||||
|
return base[name].apply(this, args || []);
|
||||||
|
};
|
||||||
|
var ret = fn.apply(this, arguments);
|
||||||
|
// The method only needs to be bound temporarily, so we remove it when we're done executing
|
||||||
|
this._super = __super;
|
||||||
|
return ret;
|
||||||
|
};
|
||||||
|
})(name, prop[name]);
|
||||||
|
// Check if we're overwriting existing default options.
|
||||||
|
} else if (typeof prop[name] === 'object' && typeof base[name] === 'object' && name === 'defaultOptions') {
|
||||||
|
var obj1 = base[name];
|
||||||
|
var obj2 = prop[name];
|
||||||
|
var obj3 = {};
|
||||||
|
var key;
|
||||||
|
for (key in obj1) { // jshint forin:false
|
||||||
|
obj3[key] = obj1[key];
|
||||||
|
}
|
||||||
|
for (key in obj2) { // jshint forin:false
|
||||||
|
obj3[key] = obj2[key];
|
||||||
|
}
|
||||||
|
prototype[name] = obj3;
|
||||||
|
} else {
|
||||||
|
prototype[name] = prop[name];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// The dummy class constructor
|
||||||
|
function JQClass() {
|
||||||
|
// All construction is actually done in the init method
|
||||||
|
if (!initializing && this._init) {
|
||||||
|
this._init.apply(this, arguments);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Populate our constructed prototype object
|
||||||
|
JQClass.prototype = prototype;
|
||||||
|
|
||||||
|
// Enforce the constructor to be what we expect
|
||||||
|
JQClass.prototype.constructor = JQClass;
|
||||||
|
|
||||||
|
// And make this class extendable
|
||||||
|
JQClass.extend = extender;
|
||||||
|
|
||||||
|
return JQClass;
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
/*! Abstract base class for collection plugins v1.0.2.
|
||||||
|
Written by Keith Wood (wood.keith{at}optusnet.com.au) December 2013.
|
||||||
|
Licensed under the MIT license (http://keith-wood.name/licence.html). */
|
||||||
|
(function($) { // Ensure $, encapsulate
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/** <p>Abstract base class for collection plugins v1.0.2.</p>
|
||||||
|
<p>Written by Keith Wood (wood.keith{at}optusnet.com.au) December 2013.</p>
|
||||||
|
<p>Licensed under the MIT license (http://keith-wood.name/licence.html).</p>
|
||||||
|
<p>Use {@link $.JQPlugin.createPlugin} to create new plugins using this framework.</p>
|
||||||
|
<p>This base class provides common functionality such as:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Creates jQuery bridge - allowing you to invoke your plugin on a collection of elements.</li>
|
||||||
|
<li>Handles initialisation including reading settings from metadata -
|
||||||
|
an instance object is attached to the affected element(s) containing all the necessary data.</li>
|
||||||
|
<li>Handles option retrieval and update - options can be set through default values,
|
||||||
|
through inline metadata, or through instantiation settings.<br>
|
||||||
|
Metadata is specified as an attribute on the element:
|
||||||
|
<code>data-<pluginName>="<option name>: '<value>', ..."</code>.
|
||||||
|
Dates should be specified as strings in this format: <code>'new Date(y, m-1, d)'</code>.</li>
|
||||||
|
<li>Handles method calling - inner functions starting with '_'are inaccessible,
|
||||||
|
whereas others can be called via <code>$(selector).pluginName('functionName')</code>.</li>
|
||||||
|
<li>Handles plugin destruction - removing all trace of the plugin.</li>
|
||||||
|
</ul>
|
||||||
|
@module JQPlugin
|
||||||
|
@abstract */
|
||||||
|
JQClass.classes.JQPlugin = JQClass.extend({
|
||||||
|
|
||||||
|
/** Name to identify this plugin.
|
||||||
|
@example name: 'tabs' */
|
||||||
|
name: 'plugin',
|
||||||
|
|
||||||
|
/** Default options for instances of this plugin (default: {}).
|
||||||
|
@example defaultOptions: {
|
||||||
|
selectedClass: 'selected',
|
||||||
|
triggers: 'click'
|
||||||
|
} */
|
||||||
|
defaultOptions: {},
|
||||||
|
|
||||||
|
/** Options dependent on the locale.
|
||||||
|
Indexed by language and (optional) country code, with '' denoting the default language (English/US).
|
||||||
|
Normally additional languages would be provided as separate files to all them to be included as needed.
|
||||||
|
@example regionalOptions: {
|
||||||
|
'': {
|
||||||
|
greeting: 'Hi'
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
regionalOptions: {},
|
||||||
|
|
||||||
|
/** Whether or not a deep merge should be performed when accumulating options.
|
||||||
|
The default is <code>true</code> but can be overridden in a sub-class. */
|
||||||
|
deepMerge: true,
|
||||||
|
|
||||||
|
/** Retrieve a marker class for affected elements.
|
||||||
|
In the format: <code>is-<pluginName></code>.
|
||||||
|
@protected
|
||||||
|
@return {string} The marker class. */
|
||||||
|
_getMarker: function() {
|
||||||
|
return 'is-' + this.name;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Initialise the plugin.
|
||||||
|
Create the jQuery bridge - plugin name <code>xyz</code>
|
||||||
|
produces singleton <code>$.xyz</code> and collection function <code>$.fn.xyz</code>.
|
||||||
|
@protected */
|
||||||
|
_init: function() {
|
||||||
|
// Apply default localisations
|
||||||
|
$.extend(this.defaultOptions, (this.regionalOptions && this.regionalOptions['']) || {});
|
||||||
|
// Camel-case the name
|
||||||
|
var jqName = camelCase(this.name);
|
||||||
|
// Expose jQuery singleton manager
|
||||||
|
$[jqName] = this;
|
||||||
|
// Expose jQuery collection plugin
|
||||||
|
$.fn[jqName] = function(options) {
|
||||||
|
var otherArgs = Array.prototype.slice.call(arguments, 1);
|
||||||
|
var inst = this;
|
||||||
|
var returnValue = this;
|
||||||
|
this.each(function () {
|
||||||
|
if (typeof options === 'string') {
|
||||||
|
if (options[0] === '_' || !$[jqName][options]) {
|
||||||
|
throw 'Unknown method: ' + options;
|
||||||
|
}
|
||||||
|
var methodValue = $[jqName][options].apply($[jqName], [this].concat(otherArgs));
|
||||||
|
if (methodValue !== inst && methodValue !== undefined) {
|
||||||
|
returnValue = methodValue;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$[jqName]._attach(this, options);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return returnValue;
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Set default options for all subsequent instances.
|
||||||
|
@param {object} options The new default options.
|
||||||
|
@example $.pluginName.setDefaults({name: value, ...}) */
|
||||||
|
setDefaults: function(options) {
|
||||||
|
$.extend(this.defaultOptions, options || {});
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Initialise an element. Called internally only.
|
||||||
|
Adds an instance object as data named for the plugin.
|
||||||
|
Override {@linkcode module:JQPlugin~_postAttach|_postAttach} for plugin-specific processing.
|
||||||
|
@private
|
||||||
|
@param {Element} elem The element to enhance.
|
||||||
|
@param {object} options Overriding settings. */
|
||||||
|
_attach: function(elem, options) {
|
||||||
|
elem = $(elem);
|
||||||
|
if (elem.hasClass(this._getMarker())) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
elem.addClass(this._getMarker());
|
||||||
|
options = $.extend(this.deepMerge, {}, this.defaultOptions, this._getMetadata(elem), options || {});
|
||||||
|
var inst = $.extend({name: this.name, elem: elem, options: options}, this._instSettings(elem, options));
|
||||||
|
elem.data(this.name, inst); // Save instance against element
|
||||||
|
this._postAttach(elem, inst);
|
||||||
|
this.option(elem, options);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve additional instance settings.
|
||||||
|
Override this in a sub-class to provide extra settings.
|
||||||
|
These are added directly to the instance object.
|
||||||
|
Default attributes of an instance object are shown as properties below:
|
||||||
|
@protected
|
||||||
|
@param {jQuery} elem The current jQuery element.
|
||||||
|
@param {object} options The instance options.
|
||||||
|
@return {object} Any extra instance values.
|
||||||
|
@property {Element} elem The element to which this instance applies.
|
||||||
|
@property {string} name The name of this plugin.
|
||||||
|
@property {object} options The accumulated options for this instance.
|
||||||
|
@example _instSettings: function(elem, options) {
|
||||||
|
return {nav: elem.find(options.navSelector)};
|
||||||
|
} */
|
||||||
|
_instSettings: function(elem, options) { // jshint unused:false
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Plugin specific post initialisation.
|
||||||
|
Override this in a sub-class to perform extra activities.
|
||||||
|
This is where you would implement your plugin's main functionality.
|
||||||
|
@protected
|
||||||
|
@param {jQuery} elem The current jQuery element.
|
||||||
|
@param {object} inst The instance settings.
|
||||||
|
@example _postAttach: function(elem, inst) {
|
||||||
|
elem.on('click.' + this.name, function() {
|
||||||
|
...
|
||||||
|
});
|
||||||
|
} */
|
||||||
|
_postAttach: function(elem, inst) { // jshint unused:false
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve metadata configuration from the element.
|
||||||
|
Metadata is specified as an attribute:
|
||||||
|
<code>data-<pluginName>="<option name>: '<value>', ..."</code>.
|
||||||
|
Dates should be specified as strings in this format: <code>'new Date(y, m-1, d)'</code>.
|
||||||
|
@private
|
||||||
|
@param {jQuery} elem The source element.
|
||||||
|
@return {object} The inline configuration or {}. */
|
||||||
|
_getMetadata: function(elem) {
|
||||||
|
try {
|
||||||
|
var data = elem.data(this.name.toLowerCase()) || '';
|
||||||
|
data = data.replace(/(\\?)'/g, function(e, t) {
|
||||||
|
return t ? '\'' : '"';
|
||||||
|
}).replace(/([a-zA-Z0-9]+):/g, function(match, group, i) {
|
||||||
|
var count = data.substring(0, i).match(/"/g); // Handle embedded ':'
|
||||||
|
return (!count || count.length % 2 === 0 ? '"' + group + '":' : group + ':');
|
||||||
|
}).replace(/\\:/g, ':');
|
||||||
|
data = $.parseJSON('{' + data + '}');
|
||||||
|
for (var key in data) {
|
||||||
|
if (data.hasOwnProperty(key)) {
|
||||||
|
var value = data[key];
|
||||||
|
if (typeof value === 'string' && value.match(/^new Date\(([-0-9,\s]*)\)$/)) { // Convert dates
|
||||||
|
data[key] = eval(value); // jshint ignore:line
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve the instance data for element.
|
||||||
|
@protected
|
||||||
|
@param {Element} elem The source element.
|
||||||
|
@return {object} The instance data or <code>{}</code> if none. */
|
||||||
|
_getInst: function(elem) {
|
||||||
|
return $(elem).data(this.name) || {};
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Retrieve or reconfigure the settings for a plugin.
|
||||||
|
If new settings are provided they are applied to the instance options.
|
||||||
|
If an option name only is provided the value of that option is returned.
|
||||||
|
If no name or value is provided, all options are returned.
|
||||||
|
Override {@linkcode module:JQPlugin~_optionsChanged|_optionsChanged}
|
||||||
|
for plugin-specific processing when option values change.
|
||||||
|
@param {Element} elem The source element.
|
||||||
|
@param {object|string} [name] The collection of new option values or the name of a single option.
|
||||||
|
@param {any} [value] The value for a single named option.
|
||||||
|
@return {any|object} If retrieving a single value or all options.
|
||||||
|
@example $(selector).plugin('option', 'name', value) // Set one option
|
||||||
|
$(selector).plugin('option', {name: value, ...}) // Set multiple options
|
||||||
|
var value = $(selector).plugin('option', 'name') // Get one option
|
||||||
|
var options = $(selector).plugin('option') // Get all options */
|
||||||
|
option: function(elem, name, value) {
|
||||||
|
elem = $(elem);
|
||||||
|
var inst = elem.data(this.name);
|
||||||
|
var options = name || {};
|
||||||
|
if (!name || (typeof name === 'string' && typeof value === 'undefined')) {
|
||||||
|
options = (inst || {}).options;
|
||||||
|
return (options && name ? options[name] : options);
|
||||||
|
}
|
||||||
|
if (!elem.hasClass(this._getMarker())) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (typeof name === 'string') {
|
||||||
|
options = {};
|
||||||
|
options[name] = value;
|
||||||
|
}
|
||||||
|
this._optionsChanged(elem, inst, options);
|
||||||
|
$.extend(inst.options, options);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Plugin specific options processing.
|
||||||
|
Old value available in <code>inst.options[name]</code>, new value in <code>options[name]</code>.
|
||||||
|
Override this in a sub-class to perform extra activities.
|
||||||
|
@protected
|
||||||
|
@param {jQuery} elem The current jQuery element.
|
||||||
|
@param {object} inst The instance settings.
|
||||||
|
@param {object} options The new options.
|
||||||
|
@example _optionsChanged: function(elem, inst, options) {
|
||||||
|
if (options.name != inst.options.name) {
|
||||||
|
elem.removeClass(inst.options.name).addClass(options.name);
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
_optionsChanged: function(elem, inst, options) { // jshint unused:false
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Remove all trace of the plugin.
|
||||||
|
Override {@linkcode module:JQPlugin~_preDestroy|_preDestroy} for plugin-specific processing.
|
||||||
|
@param {Element} elem The source element.
|
||||||
|
@example $(selector).plugin('destroy') */
|
||||||
|
destroy: function(elem) {
|
||||||
|
elem = $(elem);
|
||||||
|
if (!elem.hasClass(this._getMarker())) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this._preDestroy(elem, this._getInst(elem));
|
||||||
|
elem.removeData(this.name).removeClass(this._getMarker());
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Plugin specific pre destruction.
|
||||||
|
It is invoked as part of the {@linkcode module:JQPlugin~destroy|destroy} processing.
|
||||||
|
Override this in a sub-class to perform extra activities and undo everything that was
|
||||||
|
done in the {@linkcode module:JQPlugin~_postAttach|_postAttach} or
|
||||||
|
{@linkcode module:JQPlugin~_optionsChanged|_optionsChanged} functions.
|
||||||
|
@protected
|
||||||
|
@param {jQuery} elem The current jQuery element.
|
||||||
|
@param {object} inst The instance settings.
|
||||||
|
@example _preDestroy: function(elem, inst) {
|
||||||
|
elem.off('.' + this.name);
|
||||||
|
} */
|
||||||
|
_preDestroy: function(elem, inst) { // jshint unused:false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Convert names from hyphenated to camel-case.
|
||||||
|
@private
|
||||||
|
@param {string} value The original hyphenated name.
|
||||||
|
@return {string} The camel-case version. */
|
||||||
|
function camelCase(name) {
|
||||||
|
return name.replace(/-([a-z])/g, function(match, group) {
|
||||||
|
return group.toUpperCase();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Expose the plugin base.
|
||||||
|
@namespace $.JQPlugin */
|
||||||
|
$.JQPlugin = {
|
||||||
|
|
||||||
|
/** Create a new collection plugin.
|
||||||
|
@memberof $.JQPlugin
|
||||||
|
@param {string} [superClass='JQPlugin'] The name of the parent class to inherit from.
|
||||||
|
@param {object} overrides The property/function overrides for the new class.
|
||||||
|
See {@link module:JQPlugin|JQPlugin} for the base functionality.
|
||||||
|
@example $.JQPlugin.createPlugin({ // Define the plugin
|
||||||
|
name: 'tabs',
|
||||||
|
defaultOptions: {selectedClass: 'selected'},
|
||||||
|
_initSettings: function(elem, options) { return {...}; },
|
||||||
|
_postAttach: function(elem, inst) { ... }
|
||||||
|
});
|
||||||
|
$('selector').tabs(); // And instantiate it */
|
||||||
|
createPlugin: function(superClass, overrides) {
|
||||||
|
if (typeof superClass === 'object') {
|
||||||
|
overrides = superClass;
|
||||||
|
superClass = 'JQPlugin';
|
||||||
|
}
|
||||||
|
superClass = camelCase(superClass);
|
||||||
|
var className = camelCase(overrides.name);
|
||||||
|
JQClass.classes[className] = JQClass.classes[superClass].extend(overrides);
|
||||||
|
new JQClass.classes[className](); // jshint ignore:line
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import { useCallback } from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
export type LocalizedText = {
|
||||||
|
am?: string;
|
||||||
|
en?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useLocalizedName = (language?: string) => {
|
||||||
|
const { i18n } = useTranslation();
|
||||||
|
const currentLanguage = language || i18n.language;
|
||||||
|
return useCallback(
|
||||||
|
(name?: LocalizedText): string => {
|
||||||
|
if (!name) return "";
|
||||||
|
const am = name.am?.trim() ?? "";
|
||||||
|
const en = name.en?.trim() ?? "";
|
||||||
|
return (currentLanguage.startsWith("am") ? am || en : en || am) || "";
|
||||||
|
},
|
||||||
|
[currentLanguage],
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Input } from "@/shared/common/ui/input"; // your Input component
|
||||||
|
|
||||||
|
interface FaydaInputProps {
|
||||||
|
faydaValue: string;
|
||||||
|
setFaydaValue: (value: string) => void; // make sure it's not optional
|
||||||
|
}
|
||||||
|
|
||||||
|
export const FaydaInput: React.FC<FaydaInputProps> = ({
|
||||||
|
faydaValue,
|
||||||
|
setFaydaValue,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="block">
|
||||||
|
<span className="font-medium">Fayda ID</span>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
value={faydaValue}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
setFaydaValue(e.target.value)
|
||||||
|
}
|
||||||
|
placeholder="Enter Fayda ID"
|
||||||
|
className="mt-1 block w-full rounded-md border px-3 py-2"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { Progress } from "@/shared/common/ui/progress";
|
||||||
|
|
||||||
|
interface LoadingOverlayProps {
|
||||||
|
progress?: number;
|
||||||
|
text?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function LoadingOverlay({
|
||||||
|
progress = 50,
|
||||||
|
text = "Processing...",
|
||||||
|
}: LoadingOverlayProps) {
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-primary-300 bg-opacity-50 z-50 flex flex-col items-center justify-center space-y-4">
|
||||||
|
<div className="text-white text-lg font-semibold animate-pulse">
|
||||||
|
{text}
|
||||||
|
</div>
|
||||||
|
<Progress value={progress} className="w-3/4 md:w-1/3 h-3 rounded-full" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
import { FC } from "react";
|
||||||
|
// @ts-ignore - Module types not available
|
||||||
|
import * as SliderPrimitive from "@radix-ui/react-slider";
|
||||||
|
|
||||||
|
interface SliderUIProps {
|
||||||
|
id?: string;
|
||||||
|
label: string;
|
||||||
|
description?: string;
|
||||||
|
value: number[];
|
||||||
|
onChange: (value: number) => void;
|
||||||
|
min?: number;
|
||||||
|
max?: number;
|
||||||
|
step?: number;
|
||||||
|
required?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SliderUI: FC<SliderUIProps> = ({
|
||||||
|
id,
|
||||||
|
label,
|
||||||
|
description,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
min = 0,
|
||||||
|
max = 100,
|
||||||
|
step = 1,
|
||||||
|
required = false,
|
||||||
|
disabled = false,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label htmlFor={id} className="block text-sm font-medium">
|
||||||
|
{label} {required && <span className="text-red-500">*</span>}
|
||||||
|
</label>
|
||||||
|
{description && <p className="text-xs text-gray-500">{description}</p>}
|
||||||
|
<SliderPrimitive.Root
|
||||||
|
id={id}
|
||||||
|
value={value}
|
||||||
|
onValueChange={(val: number[]) => onChange(val[0])}
|
||||||
|
min={min}
|
||||||
|
max={max}
|
||||||
|
step={step}
|
||||||
|
disabled={disabled}
|
||||||
|
className="relative flex w-full touch-none select-none items-center h-5">
|
||||||
|
<SliderPrimitive.Track className="relative bg-gray-200 flex-1 h-1 rounded-full">
|
||||||
|
<SliderPrimitive.Range className="absolute bg-blue-500 h-full rounded-full" />
|
||||||
|
</SliderPrimitive.Track>
|
||||||
|
<SliderPrimitive.Thumb className="block w-5 h-5 bg-white border border-gray-300 rounded-full shadow" />
|
||||||
|
</SliderPrimitive.Root>
|
||||||
|
<div className="text-sm text-gray-600 text-center">{value}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
// src/shared/common/ui/text.tsx
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
type TextProps = React.HTMLAttributes<HTMLSpanElement> & {
|
||||||
|
fw?: number | string;
|
||||||
|
color?: string;
|
||||||
|
size?: string | number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Text: React.FC<TextProps> = ({
|
||||||
|
fw,
|
||||||
|
color,
|
||||||
|
size,
|
||||||
|
style,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
style={{ fontWeight: fw, color, fontSize: size, ...style }}
|
||||||
|
{...props}>
|
||||||
|
{children}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
||||||
|
import { ChevronDownIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function Accordion({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
||||||
|
return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function AccordionItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<AccordionPrimitive.Item
|
||||||
|
data-slot="accordion-item"
|
||||||
|
className={cn("border-b last:border-b-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AccordionTrigger({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<AccordionPrimitive.Header className="flex">
|
||||||
|
<AccordionPrimitive.Trigger
|
||||||
|
data-slot="accordion-trigger"
|
||||||
|
className={cn(
|
||||||
|
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
|
||||||
|
</AccordionPrimitive.Trigger>
|
||||||
|
</AccordionPrimitive.Header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AccordionContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<AccordionPrimitive.Content
|
||||||
|
data-slot="accordion-content"
|
||||||
|
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className={cn("pt-0 pb-4", className)}>{children}</div>
|
||||||
|
</AccordionPrimitive.Content>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
||||||
@@ -0,0 +1,155 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { buttonVariants } from "@/shared/common/ui/button";
|
||||||
|
|
||||||
|
function AlertDialog({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
|
||||||
|
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Overlay
|
||||||
|
data-slot="alert-dialog-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPortal>
|
||||||
|
<AlertDialogOverlay />
|
||||||
|
<AlertDialogPrimitive.Content
|
||||||
|
data-slot="alert-dialog-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</AlertDialogPortal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogHeader({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert-dialog-header"
|
||||||
|
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogFooter({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert-dialog-footer"
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Title
|
||||||
|
data-slot="alert-dialog-title"
|
||||||
|
className={cn("text-lg font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Description
|
||||||
|
data-slot="alert-dialog-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogAction({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Action
|
||||||
|
className={cn(buttonVariants(), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogCancel({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Cancel
|
||||||
|
className={cn(buttonVariants({ variant: "outline" }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogPortal,
|
||||||
|
AlertDialogOverlay,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
};
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
import { cn } from "@/super-admin/lib/utils";
|
||||||
|
|
||||||
|
const alertVariants = cva(
|
||||||
|
"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-background text-foreground",
|
||||||
|
destructive:
|
||||||
|
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const Alert = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
|
||||||
|
>(({ className, variant, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
role="alert"
|
||||||
|
className={cn(alertVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
Alert.displayName = "Alert";
|
||||||
|
|
||||||
|
const AlertTitle = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLHeadingElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<h5
|
||||||
|
ref={ref}
|
||||||
|
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertTitle.displayName = "AlertTitle";
|
||||||
|
|
||||||
|
const AlertDescription = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLParagraphElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm [&_p]:leading-relaxed", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertDescription.displayName = "AlertDescription";
|
||||||
|
|
||||||
|
export { Alert, AlertTitle, AlertDescription };
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
||||||
|
|
||||||
|
import { cn } from "@/super-admin/lib/utils";
|
||||||
|
|
||||||
|
function Avatar({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<AvatarPrimitive.Root
|
||||||
|
data-slot="avatar"
|
||||||
|
className={cn(
|
||||||
|
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AvatarImage({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
||||||
|
return (
|
||||||
|
<AvatarPrimitive.Image
|
||||||
|
data-slot="avatar-image"
|
||||||
|
className={cn("aspect-square size-full", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AvatarFallback({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
||||||
|
return (
|
||||||
|
<AvatarPrimitive.Fallback
|
||||||
|
data-slot="avatar-fallback"
|
||||||
|
className={cn(
|
||||||
|
"bg-muted flex size-full items-center justify-center rounded-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Avatar, AvatarImage, AvatarFallback };
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Slot } from "@radix-ui/react-slot";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
//the status edit
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
//draft and forward
|
||||||
|
default:
|
||||||
|
"bg-blue-100 text-blue-800 text-sm font-medium me-2 px-3 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300",
|
||||||
|
secondary:
|
||||||
|
"bg-indigo-100 text-indigo-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-indigo-900 dark:text-indigo-300",
|
||||||
|
destructive:
|
||||||
|
"bg-gray-100 text-gray-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-gray-300",
|
||||||
|
outline:
|
||||||
|
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||||
|
info: "border-transparent bg-info text-info-foreground [a&]:hover:bg-info/90",
|
||||||
|
purple:
|
||||||
|
"bg-purple-100 text-purple-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-purple-900 dark:text-purple-300",
|
||||||
|
warning:
|
||||||
|
"bg-pink-100 text-pink-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-pink-900 dark:text-pink-300",
|
||||||
|
//approved
|
||||||
|
success:
|
||||||
|
"bg-green-100 text-green-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300",
|
||||||
|
danger:
|
||||||
|
"bg-red-100 text-red-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300",
|
||||||
|
danger2:
|
||||||
|
"bg-yellow-100 text-yellow-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-yellow-900 dark:text-yellow-300",
|
||||||
|
forward:
|
||||||
|
"bg-orange-100 text-orange-800 text-sm font-medium me-2 px-3 py-0.5 rounded-full dark:bg-orange-900 dark:text-orange-300",
|
||||||
|
dispatched:
|
||||||
|
"bg-green-100 text-green-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
function Badge({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span"> &
|
||||||
|
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : "span";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="badge"
|
||||||
|
className={cn(badgeVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants };
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Slot } from "@radix-ui/react-slot";
|
||||||
|
import { ChevronRight, MoreHorizontal } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
|
||||||
|
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
|
||||||
|
return (
|
||||||
|
<ol
|
||||||
|
data-slot="breadcrumb-list"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
data-slot="breadcrumb-item"
|
||||||
|
className={cn("inline-flex items-center gap-1.5", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbLink({
|
||||||
|
asChild,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"a"> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "a";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="breadcrumb-link"
|
||||||
|
className={cn("hover:text-foreground transition-colors", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="breadcrumb-page"
|
||||||
|
role="link"
|
||||||
|
aria-disabled="true"
|
||||||
|
aria-current="page"
|
||||||
|
className={cn("text-foreground font-normal", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbSeparator({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"li">) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
data-slot="breadcrumb-separator"
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
className={cn("[&>svg]:size-3.5", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children ?? <ChevronRight />}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbEllipsis({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="breadcrumb-ellipsis"
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
className={cn("flex size-9 items-center justify-center", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<MoreHorizontal className="size-4" />
|
||||||
|
<span className="sr-only">More</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
};
|
||||||
@@ -0,0 +1,161 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Slot } from "@radix-ui/react-slot";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
|
||||||
|
outline:
|
||||||
|
"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||||
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||||
|
link: "text-muted-foreground underline-offset-13 hover:underline hover:text-primary",
|
||||||
|
linkActive: "text-primary-700 underline-offset-13 underline -mt-2",
|
||||||
|
addRecordBtn:
|
||||||
|
"bg-primary text-white size-35 shadow-xs hover:bg-primary-700 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
|
||||||
|
viewDetail:
|
||||||
|
"bg-transparent border border-primary text-primary text-base font-normal me-2 !px-2.5 py-0.5 rounded-full scale-90 origin-center hover:bg-primary/10 transition-colors dark:bg-primary/20 dark:border-primary dark:text-primary-foreground leading-tight whitespace-nowrap",
|
||||||
|
incomingmenu:
|
||||||
|
"bg-transparent border border-primary text-primary text-md font-normal me-2 !px-4 py-0.5 rounded-md w-[170px] scale-90 origin-center hover:bg-primary/10 transition-colors dark:bg-primary/20 dark:border-primary dark:text-primary-foreground leading-tight whitespace-nowrap",
|
||||||
|
incomingmenu1:
|
||||||
|
"bg-transparent border border-gray-500 text-gray-500 text-md font-normal me-2 !px-4 py-0.5 rounded-md w-[170px] scale-90 origin-center hover:bg-gray-500/10 transition-colors dark:border-gray-300 dark:text-gray-300 leading-tight whitespace-nowrap",
|
||||||
|
actionGreen:
|
||||||
|
"bg-emerald-50/90 dark:bg-emerald-950/20 border border-emerald-200 dark:border-emerald-900/40 text-emerald-700 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-950/40 hover:text-emerald-800 dark:hover:text-emerald-200 hover:border-emerald-300 dark:hover:border-emerald-800/60 focus-visible:ring-emerald-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
|
||||||
|
actionLightGreen:
|
||||||
|
"bg-green-50/50 dark:bg-green-950/10 border border-green-100 dark:border-green-900/20 text-green-600 dark:text-green-400 hover:bg-green-100/50 dark:hover:bg-green-950/30 hover:text-green-700 dark:hover:text-green-300 hover:border-green-200 dark:hover:border-green-800/40 focus-visible:ring-green-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
|
||||||
|
actionRed:
|
||||||
|
"bg-rose-50/90 dark:bg-rose-950/20 border border-rose-200 dark:border-rose-900/40 text-rose-700 dark:text-rose-300 hover:bg-rose-100 dark:hover:bg-rose-950/40 hover:text-rose-800 dark:hover:text-rose-200 hover:border-rose-300 dark:hover:border-rose-800/60 focus-visible:ring-rose-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
|
||||||
|
actionYellow:
|
||||||
|
"bg-amber-50/90 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-900/40 text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-950/40 hover:text-amber-800 dark:hover:text-amber-200 hover:border-amber-300 dark:hover:border-amber-800/60 focus-visible:ring-amber-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
|
||||||
|
actionBlue:
|
||||||
|
"bg-blue-50/90 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-900/40 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-950/40 hover:text-blue-800 dark:hover:text-blue-200 hover:border-blue-300 dark:hover:border-blue-800/60 focus-visible:ring-blue-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
|
||||||
|
actionPurple:
|
||||||
|
"bg-purple-50/90 dark:bg-purple-950/20 border border-purple-200 dark:border-purple-900/40 text-purple-700 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-950/40 hover:text-purple-800 dark:hover:text-purple-200 hover:border-purple-300 dark:hover:border-purple-800/60 focus-visible:ring-purple-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||||
|
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||||
|
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||||
|
icon: "size-9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
type ButtonProps = React.ComponentProps<"button"> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ className, variant, size, asChild = false, type, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? Slot : "button";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
// When `asChild` is used, Radix will attach the ref to the child via Slot.
|
||||||
|
ref={ref as any}
|
||||||
|
className={cn(
|
||||||
|
buttonVariants({ variant, size, className }),
|
||||||
|
"cursor-pointer",
|
||||||
|
)}
|
||||||
|
{...(asChild ? {} : { type: type ?? "button" })}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
Button.displayName = "Button";
|
||||||
|
|
||||||
|
export function getActionButtonVariant(actionName: string): any {
|
||||||
|
const normalized = actionName.trim().toLowerCase();
|
||||||
|
|
||||||
|
if (
|
||||||
|
normalized.includes("approve") ||
|
||||||
|
normalized.includes("sign") ||
|
||||||
|
normalized.includes("reply") ||
|
||||||
|
normalized === "accept"
|
||||||
|
) {
|
||||||
|
return "actionGreen";
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
normalized.includes("accept and forward") ||
|
||||||
|
normalized.includes("accept & forward")
|
||||||
|
) {
|
||||||
|
return "actionLightGreen";
|
||||||
|
}
|
||||||
|
if (normalized.includes("delete") || normalized.includes("reject")) {
|
||||||
|
return "actionRed";
|
||||||
|
}
|
||||||
|
if (normalized.includes("forward")) {
|
||||||
|
return "actionPurple";
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
normalized.includes("adjustment") ||
|
||||||
|
normalized.includes("adjust") ||
|
||||||
|
normalized.includes("secure letter") ||
|
||||||
|
normalized.includes("make urgent") ||
|
||||||
|
normalized.includes("urgent") ||
|
||||||
|
normalized.includes("assign") ||
|
||||||
|
normalized.includes("reassign") ||
|
||||||
|
normalized.includes("under review") ||
|
||||||
|
normalized.includes("return")
|
||||||
|
) {
|
||||||
|
return "actionYellow";
|
||||||
|
}
|
||||||
|
if (normalized.includes("edit") || normalized.includes("comment")) {
|
||||||
|
return "actionBlue";
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
normalized.includes("send") ||
|
||||||
|
normalized.includes("dispatch") ||
|
||||||
|
normalized.includes("share")
|
||||||
|
) {
|
||||||
|
return "actionPurple";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom keyword heuristics
|
||||||
|
if (
|
||||||
|
normalized.includes("remove") ||
|
||||||
|
normalized.includes("cancel") ||
|
||||||
|
normalized.includes("fail") ||
|
||||||
|
normalized.includes("discard")
|
||||||
|
) {
|
||||||
|
return "actionRed";
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
normalized.includes("warn") ||
|
||||||
|
normalized.includes("caution") ||
|
||||||
|
normalized.includes("alert") ||
|
||||||
|
normalized.includes("pending")
|
||||||
|
) {
|
||||||
|
return "actionYellow";
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
normalized.includes("success") ||
|
||||||
|
normalized.includes("complete") ||
|
||||||
|
normalized.includes("done") ||
|
||||||
|
normalized.includes("save")
|
||||||
|
) {
|
||||||
|
return "actionGreen";
|
||||||
|
}
|
||||||
|
|
||||||
|
return "actionBlue"; // Informational fallback
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants };
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
|
import { DayPicker } from "react-day-picker";
|
||||||
|
import "react-day-picker/style.css";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { buttonVariants } from "@/shared/common/ui/button";
|
||||||
|
|
||||||
|
function Calendar({
|
||||||
|
className,
|
||||||
|
classNames,
|
||||||
|
showOutsideDays = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DayPicker>) {
|
||||||
|
return (
|
||||||
|
<DayPicker
|
||||||
|
showOutsideDays={showOutsideDays}
|
||||||
|
{...props}
|
||||||
|
className={cn(
|
||||||
|
"rdp w-full rounded-xl border border-slate-200 bg-white p-3 shadow-[0_10px_30px_-20px_rgba(15,23,42,0.5)] dark:border-slate-700 dark:bg-slate-900",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
classNames={{
|
||||||
|
months: "rdp-months flex flex-col gap-4 sm:flex-row sm:gap-6",
|
||||||
|
month: "rdp-month space-y-4",
|
||||||
|
caption: "rdp-caption relative flex items-center justify-center pt-1",
|
||||||
|
caption_label:
|
||||||
|
"rdp-caption_label text-sm font-semibold tracking-wide text-slate-800 dark:text-slate-100",
|
||||||
|
nav: "rdp-nav flex items-center gap-1",
|
||||||
|
nav_button: cn(
|
||||||
|
"rdp-nav_button",
|
||||||
|
buttonVariants({ variant: "ghost", size: "icon" }),
|
||||||
|
"h-8 w-8 rounded-lg text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100",
|
||||||
|
),
|
||||||
|
nav_button_previous: "rdp-nav_button_previous absolute left-0",
|
||||||
|
nav_button_next: "rdp-nav_button_next absolute right-0",
|
||||||
|
table: "rdp-table w-full border-collapse space-y-1",
|
||||||
|
head_row: "rdp-head_row flex w-full justify-between",
|
||||||
|
head_cell:
|
||||||
|
"rdp-head_cell text-slate-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-slate-400 uppercase tracking-wide text-center pt-1 mb-2 whitespace-nowrap",
|
||||||
|
row: "rdp-row flex w-full justify-between mt-1",
|
||||||
|
cell: cn(
|
||||||
|
"rdp-cell relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-10",
|
||||||
|
props.mode === "range"
|
||||||
|
? "[&:has([aria-selected].day-range-end)]:rounded-r-lg [&:has([aria-selected].day-range-start)]:rounded-l-lg [&:has([aria-selected].day-range-middle)]:bg-primary-50 dark:[&:has([aria-selected].day-range-middle)]:bg-primary-900/30"
|
||||||
|
: "",
|
||||||
|
),
|
||||||
|
day: cn(
|
||||||
|
"rdp-day",
|
||||||
|
buttonVariants({ variant: "ghost" }),
|
||||||
|
"h-9 w-9 rounded-lg p-0 font-medium text-slate-700 hover:bg-slate-100 hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-primary-500/30 aria-selected:opacity-100 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-white",
|
||||||
|
),
|
||||||
|
day_selected:
|
||||||
|
"rdp-day_selected bg-primary-600 text-white hover:bg-primary-600 hover:text-white focus:bg-primary-600 focus:text-white dark:bg-primary-500 dark:hover:bg-primary-500",
|
||||||
|
day_today:
|
||||||
|
"rdp-day_today border border-primary-300 bg-primary-50 text-primary-700 dark:border-primary-500/50 dark:bg-primary-900/30 dark:text-primary-300",
|
||||||
|
day_outside:
|
||||||
|
"rdp-day_outside text-slate-400 opacity-60 aria-selected:bg-primary-100 aria-selected:text-primary-700 dark:text-slate-600 dark:aria-selected:bg-primary-900/40 dark:aria-selected:text-primary-300",
|
||||||
|
day_disabled: "rdp-day_disabled text-slate-300 opacity-50 dark:text-slate-600",
|
||||||
|
day_range_middle:
|
||||||
|
"rdp-day_range_middle aria-selected:bg-primary-100 aria-selected:text-primary-800 dark:aria-selected:bg-primary-900/40 dark:aria-selected:text-primary-200",
|
||||||
|
day_range_start:
|
||||||
|
"rdp-day_range_start day-range-start aria-selected:bg-primary-600 aria-selected:text-white",
|
||||||
|
day_range_end:
|
||||||
|
"rdp-day_range_end day-range-end aria-selected:bg-primary-600 aria-selected:text-white",
|
||||||
|
day_hidden: "rdp-day_hidden invisible",
|
||||||
|
...classNames,
|
||||||
|
}}
|
||||||
|
// Removed unsupported 'Chevron' component override
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Calendar };
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card"
|
||||||
|
className={cn(
|
||||||
|
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-header"
|
||||||
|
className={cn("flex flex-col gap-1.5 px-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-title"
|
||||||
|
className={cn("leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-content"
|
||||||
|
className={cn("px-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-footer"
|
||||||
|
className={cn("flex items-center px-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardFooter,
|
||||||
|
CardTitle,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
};
|
||||||
@@ -0,0 +1,355 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as RechartsPrimitive from "recharts";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
// Format: { THEME_NAME: CSS_SELECTOR }
|
||||||
|
const THEMES = { light: "", dark: ".dark" } as const;
|
||||||
|
|
||||||
|
export type ChartConfig = {
|
||||||
|
[k in string]: {
|
||||||
|
label?: React.ReactNode;
|
||||||
|
icon?: React.ComponentType;
|
||||||
|
} & (
|
||||||
|
| { color?: string; theme?: never }
|
||||||
|
| { color?: never; theme: Record<keyof typeof THEMES, string> }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
type ChartContextProps = {
|
||||||
|
config: ChartConfig;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ChartContext = React.createContext<ChartContextProps | null>(null);
|
||||||
|
|
||||||
|
function useChart() {
|
||||||
|
const context = React.useContext(ChartContext);
|
||||||
|
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("useChart must be used within a <ChartContainer />");
|
||||||
|
}
|
||||||
|
|
||||||
|
return context;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ChartContainer({
|
||||||
|
id,
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
config,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
config: ChartConfig;
|
||||||
|
children: React.ComponentProps<
|
||||||
|
typeof RechartsPrimitive.ResponsiveContainer
|
||||||
|
>["children"];
|
||||||
|
}) {
|
||||||
|
const uniqueId = React.useId();
|
||||||
|
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ChartContext.Provider value={{ config }}>
|
||||||
|
<div
|
||||||
|
data-slot="chart"
|
||||||
|
data-chart={chartId}
|
||||||
|
className={cn(
|
||||||
|
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChartStyle id={chartId} config={config} />
|
||||||
|
<RechartsPrimitive.ResponsiveContainer>
|
||||||
|
{children}
|
||||||
|
</RechartsPrimitive.ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
</ChartContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
|
||||||
|
const colorConfig = Object.entries(config).filter(
|
||||||
|
([, config]) => config.theme || config.color
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!colorConfig.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<style
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: Object.entries(THEMES)
|
||||||
|
.map(
|
||||||
|
([theme, prefix]) => `
|
||||||
|
${prefix} [data-chart=${id}] {
|
||||||
|
${colorConfig
|
||||||
|
.map(([key, itemConfig]) => {
|
||||||
|
const color =
|
||||||
|
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
|
||||||
|
itemConfig.color;
|
||||||
|
return color ? ` --color-${key}: ${color};` : null;
|
||||||
|
})
|
||||||
|
.join("\n")}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
)
|
||||||
|
.join("\n"),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ChartTooltip = RechartsPrimitive.Tooltip;
|
||||||
|
|
||||||
|
function ChartTooltipContent({
|
||||||
|
active,
|
||||||
|
payload,
|
||||||
|
className,
|
||||||
|
indicator = "dot",
|
||||||
|
hideLabel = false,
|
||||||
|
hideIndicator = false,
|
||||||
|
label,
|
||||||
|
labelFormatter,
|
||||||
|
labelClassName,
|
||||||
|
formatter,
|
||||||
|
color,
|
||||||
|
nameKey,
|
||||||
|
labelKey,
|
||||||
|
}: Omit<React.ComponentProps<typeof RechartsPrimitive.Tooltip>, "payload"> &
|
||||||
|
React.ComponentProps<"div"> & {
|
||||||
|
payload?: Array<any>;
|
||||||
|
hideLabel?: boolean;
|
||||||
|
hideIndicator?: boolean;
|
||||||
|
indicator?: "line" | "dot" | "dashed";
|
||||||
|
nameKey?: string;
|
||||||
|
labelKey?: string;
|
||||||
|
label?: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
const { config } = useChart();
|
||||||
|
|
||||||
|
const tooltipLabel = React.useMemo(() => {
|
||||||
|
if (hideLabel || !payload?.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [item] = payload;
|
||||||
|
const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
|
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||||
|
const value =
|
||||||
|
!labelKey && typeof label === "string"
|
||||||
|
? config[label as keyof typeof config]?.label || label
|
||||||
|
: itemConfig?.label;
|
||||||
|
|
||||||
|
if (labelFormatter) {
|
||||||
|
return (
|
||||||
|
<div className={cn("font-medium", labelClassName)}>
|
||||||
|
{labelFormatter(value, payload as any)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!value) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className={cn("font-medium", labelClassName)}>{value}</div>;
|
||||||
|
}, [
|
||||||
|
label,
|
||||||
|
labelFormatter,
|
||||||
|
payload,
|
||||||
|
hideLabel,
|
||||||
|
labelClassName,
|
||||||
|
config,
|
||||||
|
labelKey,
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (!active || !payload?.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nestLabel = payload.length === 1 && indicator !== "dot";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{!nestLabel ? tooltipLabel : null}
|
||||||
|
<div className="grid gap-1.5">
|
||||||
|
{payload.map((item, index) => {
|
||||||
|
const key = `${nameKey || item.name || item.dataKey || "value"}`;
|
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||||
|
const indicatorColor = color || item.payload.fill || item.color;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={item.dataKey}
|
||||||
|
className={cn(
|
||||||
|
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
|
||||||
|
indicator === "dot" && "items-center"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{formatter && item?.value !== undefined && item.name ? (
|
||||||
|
formatter(item.value, item.name, item as any, index, item.payload as any)
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{itemConfig?.icon ? (
|
||||||
|
<itemConfig.icon />
|
||||||
|
) : (
|
||||||
|
!hideIndicator && (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
|
||||||
|
{
|
||||||
|
"h-2.5 w-2.5": indicator === "dot",
|
||||||
|
"w-1": indicator === "line",
|
||||||
|
"w-0 border-[1.5px] border-dashed bg-transparent":
|
||||||
|
indicator === "dashed",
|
||||||
|
"my-0.5": nestLabel && indicator === "dashed",
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--color-bg": indicatorColor,
|
||||||
|
"--color-border": indicatorColor,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-1 justify-between leading-none",
|
||||||
|
nestLabel ? "items-end" : "items-center"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="grid gap-1.5">
|
||||||
|
{nestLabel ? tooltipLabel : null}
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{itemConfig?.label || (typeof item.name === "string" ? item.name : (item.name as any)?.en || (item.name as any)?.am || "Item")}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{item.value && (
|
||||||
|
<span className="text-foreground font-mono font-medium tabular-nums">
|
||||||
|
{item.value.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChartLegend = RechartsPrimitive.Legend;
|
||||||
|
|
||||||
|
function ChartLegendContent({
|
||||||
|
className,
|
||||||
|
hideIcon = false,
|
||||||
|
payload,
|
||||||
|
verticalAlign = "bottom",
|
||||||
|
nameKey,
|
||||||
|
}: React.ComponentProps<"div"> &
|
||||||
|
{
|
||||||
|
payload?: { dataKey?: string; value?: string; color?: string }[];
|
||||||
|
verticalAlign?: "top" | "bottom" | "middle";
|
||||||
|
hideIcon?: boolean;
|
||||||
|
nameKey?: string;
|
||||||
|
}) {
|
||||||
|
const { config } = useChart();
|
||||||
|
|
||||||
|
if (!payload?.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex items-center justify-center gap-4",
|
||||||
|
verticalAlign === "top" ? "pb-3" : "pt-3",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{payload.map((item) => {
|
||||||
|
const key = `${nameKey || item.dataKey || "value"}`;
|
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={item.value}
|
||||||
|
className={cn(
|
||||||
|
"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{itemConfig?.icon && !hideIcon ? (
|
||||||
|
<itemConfig.icon />
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"h-2 w-2 shrink-0 rounded-[2px]",
|
||||||
|
item.color ? `chart-legend-color--${item.color.replace("#", "")}` : ""
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{itemConfig?.label}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper to extract item config from a payload.
|
||||||
|
function getPayloadConfigFromPayload(
|
||||||
|
config: ChartConfig,
|
||||||
|
payload: unknown,
|
||||||
|
key: string
|
||||||
|
) {
|
||||||
|
if (typeof payload !== "object" || payload === null) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const payloadPayload =
|
||||||
|
"payload" in payload &&
|
||||||
|
typeof payload.payload === "object" &&
|
||||||
|
payload.payload !== null
|
||||||
|
? payload.payload
|
||||||
|
: undefined;
|
||||||
|
|
||||||
|
let configLabelKey: string = key;
|
||||||
|
|
||||||
|
if (
|
||||||
|
key in payload &&
|
||||||
|
typeof payload[key as keyof typeof payload] === "string"
|
||||||
|
) {
|
||||||
|
configLabelKey = payload[key as keyof typeof payload] as string;
|
||||||
|
} else if (
|
||||||
|
payloadPayload &&
|
||||||
|
key in payloadPayload &&
|
||||||
|
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
|
||||||
|
) {
|
||||||
|
configLabelKey = payloadPayload[
|
||||||
|
key as keyof typeof payloadPayload
|
||||||
|
] as string;
|
||||||
|
}
|
||||||
|
|
||||||
|
return configLabelKey in config
|
||||||
|
? config[configLabelKey]
|
||||||
|
: config[key as keyof typeof config];
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
ChartContainer,
|
||||||
|
ChartTooltip,
|
||||||
|
ChartTooltipContent,
|
||||||
|
ChartLegend,
|
||||||
|
ChartLegendContent,
|
||||||
|
ChartStyle,
|
||||||
|
};
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
||||||
|
import { CheckIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
|
||||||
|
// Define variants using CVA
|
||||||
|
const checkboxVariants = cva(
|
||||||
|
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "",
|
||||||
|
//soft: "rounded-full bg-primary/10 border-primary text-primary data-[state=checked]:bg-primary data-[state=checked]:text-white data-[state=checked]:border-primary",
|
||||||
|
subtle: "border-muted bg-muted/20",
|
||||||
|
soft: `
|
||||||
|
size-5 rounded-full border-2 border-primary bg-transparent
|
||||||
|
data-[state=checked]:bg-primary
|
||||||
|
data-[state=checked]:border-primary
|
||||||
|
transition-colors
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
sm: "size-3",
|
||||||
|
md: "size-4",
|
||||||
|
lg: "size-5",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "md",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
function Checkbox({
|
||||||
|
className,
|
||||||
|
variant = "default",
|
||||||
|
size = "md",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CheckboxPrimitive.Root> &
|
||||||
|
VariantProps<typeof checkboxVariants>) {
|
||||||
|
return (
|
||||||
|
<CheckboxPrimitive.Root
|
||||||
|
data-slot="checkbox"
|
||||||
|
className={cn(checkboxVariants({ variant, size }), className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<CheckboxPrimitive.Indicator
|
||||||
|
data-slot="checkbox-indicator"
|
||||||
|
className="flex items-center justify-center text-current transition-none"
|
||||||
|
>
|
||||||
|
<CheckIcon className="size-3.5" />
|
||||||
|
</CheckboxPrimitive.Indicator>
|
||||||
|
</CheckboxPrimitive.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Checkbox, checkboxVariants };
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
|
||||||
|
|
||||||
|
function Collapsible({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
||||||
|
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function CollapsibleTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
||||||
|
return (
|
||||||
|
<CollapsiblePrimitive.CollapsibleTrigger
|
||||||
|
data-slot="collapsible-trigger"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CollapsibleContent({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
||||||
|
return (
|
||||||
|
<CollapsiblePrimitive.CollapsibleContent
|
||||||
|
data-slot="collapsible-content"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
||||||
@@ -0,0 +1,206 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Command as CommandPrimitive } from "cmdk";
|
||||||
|
import { SearchIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from "@/shared/common/ui/dialog";
|
||||||
|
|
||||||
|
function Command({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive
|
||||||
|
data-slot="command"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandDialog({
|
||||||
|
title = "Command Palette",
|
||||||
|
description = "Search for a command to run...",
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Dialog> & {
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Dialog {...props}>
|
||||||
|
<DialogHeader className="sr-only">
|
||||||
|
<DialogTitle>{title}</DialogTitle>
|
||||||
|
<DialogDescription>{description}</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<DialogContent className="overflow-hidden p-0">
|
||||||
|
<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
||||||
|
{children}
|
||||||
|
</Command>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandInput({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="command-input-wrapper"
|
||||||
|
className="flex h-9 items-center gap-2 border-b px-3 dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<SearchIcon className="size-4 shrink-0 opacity-50 dark:text-gray-400" />
|
||||||
|
<CommandPrimitive.Input
|
||||||
|
data-slot="command-input"
|
||||||
|
className={cn(
|
||||||
|
"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandList({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.List>) {
|
||||||
|
const listRef = React.useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const listElement = listRef.current;
|
||||||
|
if (!listElement) return;
|
||||||
|
|
||||||
|
const handleWheel = (e: WheelEvent) => {
|
||||||
|
// Allow scrolling within the list
|
||||||
|
const { scrollTop, scrollHeight, clientHeight } = listElement;
|
||||||
|
const isScrollingUp = e.deltaY < 0;
|
||||||
|
const isScrollingDown = e.deltaY > 0;
|
||||||
|
const isAtTop = scrollTop === 0;
|
||||||
|
const isAtBottom = scrollTop + clientHeight >= scrollHeight;
|
||||||
|
|
||||||
|
// Only prevent default if we're not at the boundaries
|
||||||
|
if ((isScrollingUp && !isAtTop) || (isScrollingDown && !isAtBottom)) {
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
listElement.addEventListener("wheel", handleWheel, { passive: false });
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
listElement.removeEventListener("wheel", handleWheel);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.List
|
||||||
|
ref={listRef}
|
||||||
|
data-slot="command-list"
|
||||||
|
className={cn(
|
||||||
|
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto overscroll-contain custom-scrollbar",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
style={{
|
||||||
|
scrollbarWidth: "thin",
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandEmpty({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Empty
|
||||||
|
data-slot="command-empty"
|
||||||
|
className="py-6 text-center text-sm"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandGroup({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Group
|
||||||
|
data-slot="command-group"
|
||||||
|
className={cn(
|
||||||
|
"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Separator
|
||||||
|
data-slot="command-separator"
|
||||||
|
className={cn("bg-border -mx-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Item
|
||||||
|
data-slot="command-item"
|
||||||
|
className={cn(
|
||||||
|
"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandShortcut({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="command-shortcut"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Command,
|
||||||
|
CommandDialog,
|
||||||
|
CommandInput,
|
||||||
|
CommandList,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandItem,
|
||||||
|
CommandShortcut,
|
||||||
|
CommandSeparator,
|
||||||
|
};
|
||||||
@@ -0,0 +1,250 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
|
||||||
|
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function ContextMenu({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
|
||||||
|
return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuSub({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
|
||||||
|
return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuRadioGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.RadioGroup
|
||||||
|
data-slot="context-menu-radio-group"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuSubTrigger({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.SubTrigger
|
||||||
|
data-slot="context-menu-sub-trigger"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRightIcon className="ml-auto" />
|
||||||
|
</ContextMenuPrimitive.SubTrigger>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuSubContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.SubContent
|
||||||
|
data-slot="context-menu-sub-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.Portal>
|
||||||
|
<ContextMenuPrimitive.Content
|
||||||
|
data-slot="context-menu-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</ContextMenuPrimitive.Portal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuItem({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
variant = "default",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
|
||||||
|
inset?: boolean;
|
||||||
|
variant?: "default" | "destructive";
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.Item
|
||||||
|
data-slot="context-menu-item"
|
||||||
|
data-inset={inset}
|
||||||
|
data-variant={variant}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuCheckboxItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
checked,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.CheckboxItem
|
||||||
|
data-slot="context-menu-checkbox-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<ContextMenuPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</ContextMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</ContextMenuPrimitive.CheckboxItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuRadioItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.RadioItem
|
||||||
|
data-slot="context-menu-radio-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<ContextMenuPrimitive.ItemIndicator>
|
||||||
|
<CircleIcon className="size-2 fill-current" />
|
||||||
|
</ContextMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</ContextMenuPrimitive.RadioItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuLabel({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.Label
|
||||||
|
data-slot="context-menu-label"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.Separator
|
||||||
|
data-slot="context-menu-separator"
|
||||||
|
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuShortcut({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="context-menu-shortcut"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
ContextMenu,
|
||||||
|
ContextMenuTrigger,
|
||||||
|
ContextMenuContent,
|
||||||
|
ContextMenuItem,
|
||||||
|
ContextMenuCheckboxItem,
|
||||||
|
ContextMenuRadioItem,
|
||||||
|
ContextMenuLabel,
|
||||||
|
ContextMenuSeparator,
|
||||||
|
ContextMenuShortcut,
|
||||||
|
ContextMenuGroup,
|
||||||
|
ContextMenuPortal,
|
||||||
|
ContextMenuSub,
|
||||||
|
ContextMenuSubContent,
|
||||||
|
ContextMenuSubTrigger,
|
||||||
|
ContextMenuRadioGroup,
|
||||||
|
};
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
import { Column } from "@tanstack/react-table";
|
||||||
|
import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { Button } from "@/shared/common/ui/button";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/shared/common/ui/dropdown-menu";
|
||||||
|
|
||||||
|
interface DataTableColumnHeaderProps<TData, TValue>
|
||||||
|
extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
|
column: Column<TData, TValue>;
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DataTableColumnHeader<TData, TValue>({
|
||||||
|
column,
|
||||||
|
title,
|
||||||
|
className,
|
||||||
|
}: DataTableColumnHeaderProps<TData, TValue>) {
|
||||||
|
if (!column.getCanSort()) {
|
||||||
|
return <div className="bg-gray-50 dark:bg-gray-800 text-base text-gray-500 dark:text-gray-400">{title}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn("flex items-center space-x-2", className)}>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="-ml-3 h-8 data-[state=open]:bg-accent dark:data-[state=open]:bg-gray-700"
|
||||||
|
>
|
||||||
|
<span className="bg-gray-50 dark:bg-gray-800 text-base text-gray-500 dark:text-gray-400">{title}</span>
|
||||||
|
{column.getIsSorted() === "desc" ? (
|
||||||
|
<ArrowDown className="h-4 w-4 dark:text-gray-400" />
|
||||||
|
) : column.getIsSorted() === "asc" ? (
|
||||||
|
<ArrowUp className="h-4 w-4 dark:text-gray-400" />
|
||||||
|
) : (
|
||||||
|
<ChevronsUpDown className="h-4 w-4 dark:text-gray-400" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="start" className="dark:bg-gray-800 dark:border-gray-700">
|
||||||
|
<DropdownMenuItem onClick={() => column.toggleSorting(false)} className="dark:text-gray-200 dark:hover:bg-gray-700">
|
||||||
|
<ArrowUp className="h-3.5 w-3.5 text-muted-foreground/70 dark:text-gray-400" />
|
||||||
|
Asc
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => column.toggleSorting(true)} className="dark:text-gray-200 dark:hover:bg-gray-700">
|
||||||
|
<ArrowDown className="h-3.5 w-3.5 text-muted-foreground/70 dark:text-gray-400" />
|
||||||
|
Desc
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator className="dark:bg-gray-700" />
|
||||||
|
<DropdownMenuItem onClick={() => column.toggleVisibility(false)} className="dark:text-gray-200 dark:hover:bg-gray-700">
|
||||||
|
<EyeOff className="h-3.5 w-3.5 text-muted-foreground/70 dark:text-gray-400" />
|
||||||
|
Hide
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,108 @@
|
|||||||
|
import { Table } from "@tanstack/react-table";
|
||||||
|
import {
|
||||||
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
|
ChevronsLeft,
|
||||||
|
ChevronsRight,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
import { Button } from "@/shared/common/ui/button";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/shared/common/ui/select";
|
||||||
|
import React from "react";
|
||||||
|
interface DataTablePaginationProps<TData> {
|
||||||
|
table: Table<TData>;
|
||||||
|
pageCount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DataTablePagination<TData>({
|
||||||
|
table,
|
||||||
|
pageCount
|
||||||
|
|
||||||
|
}: DataTablePaginationProps<TData>) {
|
||||||
|
const handlePageSizeChange = React.useCallback(
|
||||||
|
(value: string) => {
|
||||||
|
table.setPageSize(Number(value));
|
||||||
|
},
|
||||||
|
[table]
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-end px-2 my-4">
|
||||||
|
<div className="flex items-center space-x-6 lg:space-x-8">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<p className="text-sm font-medium">Rows per page</p>
|
||||||
|
<Select
|
||||||
|
value={`${table.getState().pagination.pageSize}`}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
table.setPageSize(Number(value));
|
||||||
|
}}>
|
||||||
|
<SelectTrigger className="h-8 w-[70px]">
|
||||||
|
<SelectValue placeholder={table.getState().pagination.pageSize} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent side="top">
|
||||||
|
{[10, 20, 30, 40, 50].map((pageSize) => (
|
||||||
|
<SelectItem key={pageSize} value={`${pageSize}`}>
|
||||||
|
{pageSize}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="flex w-[100px] items-center justify-center text-sm font-medium">
|
||||||
|
Page {table.getState().pagination.pageIndex + 1} of{" "}
|
||||||
|
{table.getPageCount()}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="hidden h-8 w-8 p-0 lg:flex"
|
||||||
|
onClick={() => {
|
||||||
|
table.setPageIndex(0);
|
||||||
|
}}
|
||||||
|
disabled={!table.getCanPreviousPage()}>
|
||||||
|
<span className="sr-only">Go to first page</span>
|
||||||
|
<ChevronsLeft />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="h-8 w-8 p-0"
|
||||||
|
onClick={() => {
|
||||||
|
table.previousPage();
|
||||||
|
}}
|
||||||
|
disabled={!table.getCanPreviousPage()}>
|
||||||
|
<span className="sr-only">Go to previous page</span>
|
||||||
|
<ChevronLeft />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="h-8 w-8 p-0"
|
||||||
|
onClick={() => {
|
||||||
|
table.nextPage();
|
||||||
|
}}
|
||||||
|
disabled={!table.getCanNextPage()}>
|
||||||
|
<span className="sr-only">Go to next page</span>
|
||||||
|
<ChevronRight />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="hidden h-8 w-8 p-0 lg:flex"
|
||||||
|
onClick={() => {
|
||||||
|
const lastPageIndex = table.getPageCount() - 1;
|
||||||
|
table.setPageIndex(lastPageIndex);
|
||||||
|
}}
|
||||||
|
disabled={!table.getCanNextPage()}>
|
||||||
|
<span className="sr-only">Go to last page</span>
|
||||||
|
<ChevronsRight />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,133 @@
|
|||||||
|
import { Table } from "@tanstack/react-table";
|
||||||
|
import {
|
||||||
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
|
ChevronsLeft,
|
||||||
|
ChevronsRight,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
import { Button } from "@/shared/common/ui/button";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/shared/common/ui/select";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
interface DataTablePaginationProps<TData> {
|
||||||
|
table: Table<TData>;
|
||||||
|
pageCount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DataTablePagination<TData>({
|
||||||
|
table,
|
||||||
|
}: DataTablePaginationProps<TData>) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 py-2">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<p className="text-xs sm:text-sm font-medium whitespace-nowrap">
|
||||||
|
Rows per page
|
||||||
|
</p>
|
||||||
|
<Select
|
||||||
|
value={`${table.getState().pagination?.pageSize ?? 10}`}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
table.setPageSize(Number(value));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="h-9 sm:h-8 w-[70px] min-w-[70px] text-sm">
|
||||||
|
<SelectValue
|
||||||
|
placeholder={table.getState().pagination?.pageSize ?? 10}
|
||||||
|
/>
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent side="top">
|
||||||
|
{[10, 20, 30, 40, 50].map((pageSize) => (
|
||||||
|
<SelectItem key={pageSize} value={`${pageSize}`}>
|
||||||
|
{pageSize}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex w-full sm:w-auto items-center justify-between sm:justify-end gap-2 sm:gap-4">
|
||||||
|
<div className="flex items-center justify-center text-xs sm:text-sm font-medium whitespace-nowrap">
|
||||||
|
Page {table.getState().pagination.pageIndex + 1} of{" "}
|
||||||
|
{table.getPageCount()}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-1 sm:space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="h-9 w-9 p-0 sm:hidden"
|
||||||
|
onClick={() => {
|
||||||
|
table.setPageIndex(0);
|
||||||
|
}}
|
||||||
|
disabled={!table.getCanPreviousPage()}
|
||||||
|
>
|
||||||
|
<span className="sr-only">Go to first page</span>
|
||||||
|
<ChevronsLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="hidden h-9 sm:h-8 w-9 sm:w-8 p-0 sm:flex"
|
||||||
|
onClick={() => {
|
||||||
|
table.setPageIndex(0);
|
||||||
|
}}
|
||||||
|
disabled={!table.getCanPreviousPage()}
|
||||||
|
>
|
||||||
|
<span className="sr-only">Go to first page</span>
|
||||||
|
<ChevronsLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="h-9 sm:h-8 w-9 sm:w-8 p-0"
|
||||||
|
onClick={() => {
|
||||||
|
table.previousPage();
|
||||||
|
}}
|
||||||
|
disabled={!table.getCanPreviousPage()}
|
||||||
|
>
|
||||||
|
<span className="sr-only">Go to previous page</span>
|
||||||
|
<ChevronLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="h-9 sm:h-8 w-9 sm:w-8 p-0"
|
||||||
|
onClick={() => {
|
||||||
|
table.nextPage();
|
||||||
|
}}
|
||||||
|
disabled={!table.getCanNextPage()}
|
||||||
|
>
|
||||||
|
<span className="sr-only">Go to next page</span>
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="h-9 w-9 p-0 sm:hidden"
|
||||||
|
onClick={() => {
|
||||||
|
const lastPageIndex = table.getPageCount() - 1;
|
||||||
|
table.setPageIndex(lastPageIndex);
|
||||||
|
}}
|
||||||
|
disabled={!table.getCanNextPage()}
|
||||||
|
>
|
||||||
|
<span className="sr-only">Go to last page</span>
|
||||||
|
<ChevronsRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="hidden h-9 sm:h-8 w-9 sm:w-8 p-0 sm:flex"
|
||||||
|
onClick={() => {
|
||||||
|
const lastPageIndex = table.getPageCount() - 1;
|
||||||
|
table.setPageIndex(lastPageIndex);
|
||||||
|
}}
|
||||||
|
disabled={!table.getCanNextPage()}
|
||||||
|
>
|
||||||
|
<span className="sr-only">Go to last page</span>
|
||||||
|
<ChevronsRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,134 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||||
|
import { XIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function Dialog({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||||
|
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||||
|
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||||
|
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||||
|
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
data-slot="dialog-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<DialogPortal data-slot="dialog-portal">
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
data-slot="dialog-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}>
|
||||||
|
{children}
|
||||||
|
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
|
||||||
|
<XIcon />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-header"
|
||||||
|
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-footer"
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
data-slot="dialog-title"
|
||||||
|
className={cn("text-lg leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
data-slot="dialog-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogPortal,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
};
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as Dialog from "@radix-ui/react-dialog";
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
export const Drawer = Dialog.Root;
|
||||||
|
export const DrawerTrigger = Dialog.Trigger;
|
||||||
|
export const DrawerContent = ({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<Dialog.Portal>
|
||||||
|
<Dialog.Overlay className="fixed inset-0 bg-black/50" />
|
||||||
|
<Dialog.Content
|
||||||
|
className={cn(
|
||||||
|
"fixed right-0 top-0 h-full w-[400px] bg-white p-6 shadow-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}>
|
||||||
|
{children}
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Portal>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const DrawerHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}) => (
|
||||||
|
<div className={cn("mb-4", className)} {...props}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const DrawerTitle = Dialog.Title;
|
||||||
|
export const DrawerDescription = Dialog.Description;
|
||||||
|
|
||||||
|
export const DrawerFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}) => (
|
||||||
|
<div className={cn("mt-4 flex justify-end gap-2", className)} {...props}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const DrawerClose = Dialog.Close;
|
||||||
@@ -0,0 +1,255 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||||
|
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function DropdownMenu({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||||
|
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Trigger
|
||||||
|
data-slot="dropdown-menu-trigger"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuContent({
|
||||||
|
className,
|
||||||
|
sideOffset = 4,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Portal>
|
||||||
|
<DropdownMenuPrimitive.Content
|
||||||
|
data-slot="dropdown-menu-content"
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</DropdownMenuPrimitive.Portal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuItem({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
variant = "default",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||||
|
inset?: boolean;
|
||||||
|
variant?: "default" | "destructive";
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Item
|
||||||
|
data-slot="dropdown-menu-item"
|
||||||
|
data-inset={inset}
|
||||||
|
data-variant={variant}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuCheckboxItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
checked,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.CheckboxItem
|
||||||
|
data-slot="dropdown-menu-checkbox-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuRadioGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.RadioGroup
|
||||||
|
data-slot="dropdown-menu-radio-group"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuRadioItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.RadioItem
|
||||||
|
data-slot="dropdown-menu-radio-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<CircleIcon className="size-2 fill-current" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.RadioItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuLabel({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Label
|
||||||
|
data-slot="dropdown-menu-label"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Separator
|
||||||
|
data-slot="dropdown-menu-separator"
|
||||||
|
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuShortcut({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="dropdown-menu-shortcut"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSub({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||||
|
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSubTrigger({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.SubTrigger
|
||||||
|
data-slot="dropdown-menu-sub-trigger"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRightIcon className="ml-auto size-4" />
|
||||||
|
</DropdownMenuPrimitive.SubTrigger>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSubContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.SubContent
|
||||||
|
data-slot="dropdown-menu-sub-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuPortal,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuGroup,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuCheckboxItem,
|
||||||
|
DropdownMenuRadioGroup,
|
||||||
|
DropdownMenuRadioItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuShortcut,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
};
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
import { ImageIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { Card, CardDescription, CardTitle } from "@/shared/common/ui/card";
|
||||||
|
|
||||||
|
interface EmptyCardProps extends React.ComponentPropsWithoutRef<typeof Card> {
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
action?: React.ReactNode;
|
||||||
|
icon?: React.ComponentType<{ className?: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function EmptyCard({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
icon: Icon = ImageIcon,
|
||||||
|
action,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: EmptyCardProps) {
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
className={cn(
|
||||||
|
"flex w-full flex-col items-center justify-center space-y-6 bg-transparent p-16",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className="mr-4 shrink-0 rounded-full border border-dashed p-4">
|
||||||
|
<Icon className="size-8 text-muted-foreground" aria-hidden="true" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-center gap-1.5 text-center">
|
||||||
|
<CardTitle>{title}</CardTitle>
|
||||||
|
{description ? <CardDescription>{description}</CardDescription> : null}
|
||||||
|
</div>
|
||||||
|
{action ? action : null}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,430 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { FileText, Upload, X } from "lucide-react";
|
||||||
|
import Dropzone, {
|
||||||
|
type DropzoneProps,
|
||||||
|
type FileRejection,
|
||||||
|
} from "react-dropzone";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
import { Button } from "@/shared/common/ui/button";
|
||||||
|
import { Progress } from "@/shared/common/ui/progress";
|
||||||
|
import { ScrollArea } from "@/shared/common/ui/scroll-area";
|
||||||
|
import { useControllableState } from "./hooks/use-controllable-state";
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { formatBytes } from "./utils";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { t } from "i18next";
|
||||||
|
import { ClientSideValidator } from "@/shared/services/validation/ClientSideValidator";
|
||||||
|
import { FileUploadValidator } from "@/shared/services/validation/FileUploadValidator";
|
||||||
|
|
||||||
|
interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
|
/**
|
||||||
|
* Value of the uploader.
|
||||||
|
* @type File[]
|
||||||
|
* @default undefined
|
||||||
|
* @example value={files}
|
||||||
|
*/
|
||||||
|
value?: File[];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function to be called when the value changes.
|
||||||
|
* @type (files: File[]) => void
|
||||||
|
* @default undefined
|
||||||
|
* @example onValueChange={(files) => setFiles(files)}
|
||||||
|
*/
|
||||||
|
onValueChange: (files: File[]) => void | null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function to be called when files are uploaded.
|
||||||
|
* @type (files: File[]) => Promise<void>
|
||||||
|
* @default undefined
|
||||||
|
* @example onUpload={(files) => uploadFiles(files)}
|
||||||
|
*/
|
||||||
|
onUpload?: (files: File[]) => Promise<void>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Progress of the uploaded files.
|
||||||
|
* @type Record<string, number> | undefined
|
||||||
|
* @default undefined
|
||||||
|
* @example progresses={{ "file1.png": 50 }}
|
||||||
|
*/
|
||||||
|
progresses?: Record<string, number>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Accepted file types for the uploader.
|
||||||
|
* @type { [key: string]: string[]}
|
||||||
|
* @default
|
||||||
|
* ```ts
|
||||||
|
* { "image/*": [] }
|
||||||
|
* ```
|
||||||
|
* @example accept={["image/png", "image/jpeg"]}
|
||||||
|
*/
|
||||||
|
accept?: DropzoneProps["accept"];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Maximum file size for the uploader.
|
||||||
|
* @type number | undefined
|
||||||
|
* @default 1024 * 1024 * 2 // 2MB
|
||||||
|
* @example maxSize={1024 * 1024 * 2} // 2MB
|
||||||
|
*/
|
||||||
|
maxSize?: DropzoneProps["maxSize"];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Maximum number of files for the uploader.
|
||||||
|
* @type number | undefined
|
||||||
|
* @default 1
|
||||||
|
* @example maxFileCount={4}
|
||||||
|
*/
|
||||||
|
maxFileCount?: DropzoneProps["maxFiles"];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether the uploader should accept multiple files.
|
||||||
|
* @type boolean
|
||||||
|
* @default false
|
||||||
|
* @example multiple
|
||||||
|
*/
|
||||||
|
multiple?: boolean;
|
||||||
|
canUploadIndividual?: boolean;
|
||||||
|
uploadIndividualFun?: () => void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether the uploader is disabled.
|
||||||
|
* @type boolean
|
||||||
|
* @default false
|
||||||
|
* @example disabled
|
||||||
|
*/
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FileUploader(props: FileUploaderProps) {
|
||||||
|
const {
|
||||||
|
value: valueProp,
|
||||||
|
onValueChange,
|
||||||
|
onUpload,
|
||||||
|
progresses,
|
||||||
|
accept = {
|
||||||
|
"/": [],
|
||||||
|
},
|
||||||
|
maxSize = 1024 * 1024 * 200,
|
||||||
|
maxFileCount = 4,
|
||||||
|
multiple = false,
|
||||||
|
disabled = false,
|
||||||
|
className,
|
||||||
|
canUploadIndividual = false,
|
||||||
|
uploadIndividualFun,
|
||||||
|
...dropzoneProps
|
||||||
|
} = props;
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [files, setFiles] = useControllableState({
|
||||||
|
prop: valueProp,
|
||||||
|
onChange: onValueChange,
|
||||||
|
});
|
||||||
|
const validatorRef = React.useRef(new ClientSideValidator());
|
||||||
|
|
||||||
|
const onDrop = React.useCallback(
|
||||||
|
async (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
|
||||||
|
if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {
|
||||||
|
toast.error(
|
||||||
|
`${t("PDF.cannotUploadMoreThan")} ${maxFileCount} ${t("PDF.files")}`
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate files using comprehensive validator
|
||||||
|
const validatedFiles: File[] = [];
|
||||||
|
const invalidFiles: string[] = [];
|
||||||
|
|
||||||
|
for (const file of acceptedFiles) {
|
||||||
|
const allowedMimeTypes = accept
|
||||||
|
? Object.keys(accept)
|
||||||
|
.map((mime) => mime.trim().toLowerCase())
|
||||||
|
.filter(
|
||||||
|
(mime) =>
|
||||||
|
mime.includes("/") &&
|
||||||
|
mime !== "/" &&
|
||||||
|
mime !== "*" &&
|
||||||
|
mime !== "*/*"
|
||||||
|
)
|
||||||
|
: undefined;
|
||||||
|
const allowedExtensions = accept
|
||||||
|
? Object.values(accept).flatMap((extensions) =>
|
||||||
|
(extensions || []).map((ext) =>
|
||||||
|
ext.startsWith(".") ? ext.toLowerCase() : `.${ext.toLowerCase()}`
|
||||||
|
)
|
||||||
|
)
|
||||||
|
: undefined;
|
||||||
|
|
||||||
|
// Basic validation (size, extension, filename, MIME type)
|
||||||
|
const basicValidation = FileUploadValidator.validateFile(file, {
|
||||||
|
maxSizeMB: maxSize ? maxSize / (1024 * 1024) : undefined,
|
||||||
|
allowedMimeTypes:
|
||||||
|
file.type && allowedMimeTypes?.length ? allowedMimeTypes : undefined,
|
||||||
|
allowedExtensions:
|
||||||
|
allowedExtensions && allowedExtensions.length > 0
|
||||||
|
? allowedExtensions
|
||||||
|
: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!basicValidation.isValid) {
|
||||||
|
invalidFiles.push(`${file.name}: ${basicValidation.error}`);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Client-side magic byte validation
|
||||||
|
const clientValidation = await validatorRef.current.validateUpload(
|
||||||
|
file,
|
||||||
|
file.type,
|
||||||
|
allowedMimeTypes || []
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!clientValidation.isValid) {
|
||||||
|
invalidFiles.push(`${file.name}: ${clientValidation.error}`);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
validatedFiles.push(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show errors for invalid files
|
||||||
|
if (invalidFiles.length > 0) {
|
||||||
|
invalidFiles.forEach((error) => {
|
||||||
|
toast.error(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const newFiles = validatedFiles.map((file) =>
|
||||||
|
Object.assign(file, {
|
||||||
|
preview: URL.createObjectURL(file),
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const updatedFiles = files ? [...files, ...newFiles] : newFiles;
|
||||||
|
|
||||||
|
setFiles(updatedFiles);
|
||||||
|
|
||||||
|
if (rejectedFiles.length > 0) {
|
||||||
|
rejectedFiles.forEach(({ file }) => {
|
||||||
|
toast.error(`${t("PDF.file")} ${file.name} ${t("PDF.wasRejected")}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
onUpload &&
|
||||||
|
updatedFiles.length > 0 &&
|
||||||
|
updatedFiles.length <= maxFileCount
|
||||||
|
) {
|
||||||
|
const target =
|
||||||
|
updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`;
|
||||||
|
|
||||||
|
toast.promise(onUpload(updatedFiles), {
|
||||||
|
loading: `${t("PDF.uploading")} ${target}...`,
|
||||||
|
success: () => {
|
||||||
|
setFiles([]);
|
||||||
|
return `${target} ${t("PDF.uploaded")}`;
|
||||||
|
},
|
||||||
|
error: `${t("PDF.failedToUpload")} ${target}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
[files, maxFileCount, multiple, onUpload, setFiles, t, maxSize, accept]
|
||||||
|
);
|
||||||
|
|
||||||
|
function onRemove(index: number) {
|
||||||
|
if (!files) return;
|
||||||
|
const newFiles = files.filter((_, i) => i !== index);
|
||||||
|
setFiles(newFiles);
|
||||||
|
onValueChange?.(newFiles);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Revoke preview url when component unmounts
|
||||||
|
React.useEffect(() => {
|
||||||
|
return () => {
|
||||||
|
if (!files) return;
|
||||||
|
files.forEach((file) => {
|
||||||
|
if (isFileWithPreview(file)) {
|
||||||
|
URL.revokeObjectURL(file.preview);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative flex flex-col gap-6 overflow-hidden">
|
||||||
|
{onValueChange !== null && (
|
||||||
|
<Dropzone
|
||||||
|
onDrop={onDrop}
|
||||||
|
accept={accept}
|
||||||
|
maxSize={maxSize}
|
||||||
|
maxFiles={maxFileCount}
|
||||||
|
multiple={maxFileCount > 1 || multiple}
|
||||||
|
disabled={isDisabled}
|
||||||
|
>
|
||||||
|
{({ getRootProps, getInputProps, isDragActive }) => (
|
||||||
|
<div
|
||||||
|
{...getRootProps()}
|
||||||
|
className={cn(
|
||||||
|
"group relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed border-muted-foreground/25 px-5 py-2.5 text-center transition hover:bg-muted/25",
|
||||||
|
"ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||||
|
"dark:bg-gray-900/50 dark:border-gray-600 dark:hover:bg-gray-800/60",
|
||||||
|
isDragActive && "border-muted-foreground/50 dark:border-gray-500",
|
||||||
|
isDisabled && "pointer-events-none opacity-60",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...dropzoneProps}
|
||||||
|
>
|
||||||
|
<input {...getInputProps()} />
|
||||||
|
{isDragActive ? (
|
||||||
|
<div className="flex flex-col items-center justify-center gap-4 sm:px-5">
|
||||||
|
<div className="rounded-full border border-dashed border-muted-foreground/50 p-3 dark:border-gray-500">
|
||||||
|
<Upload
|
||||||
|
className="size-7 text-muted-foreground"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="font-medium text-muted-foreground">
|
||||||
|
{t("PDF.dropFilesHere")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center justify-center gap-4 sm:px-5">
|
||||||
|
<div className="rounded-full border border-dashed border-muted-foreground/50 p-3 dark:border-gray-500">
|
||||||
|
<Upload
|
||||||
|
className="size-7 text-muted-foreground"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-px">
|
||||||
|
<p className="font-medium text-muted-foreground">
|
||||||
|
{t("PDF.dragDropInstruction")}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground/70">
|
||||||
|
{t("PDF.youCanUpload")}
|
||||||
|
{maxFileCount > 1
|
||||||
|
? ` ${
|
||||||
|
maxFileCount === Infinity
|
||||||
|
? "multiple"
|
||||||
|
: maxFileCount
|
||||||
|
}
|
||||||
|
${t("PDF.filesUpTo")} ${formatBytes(maxSize)} )`
|
||||||
|
: ` ${t("PDF.aFileWith")} ${formatBytes(maxSize)}`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Dropzone>
|
||||||
|
)}
|
||||||
|
{files?.length ? (
|
||||||
|
<ScrollArea className="h-fit w-full px-3">
|
||||||
|
<div className="flex max-h-48 flex-col gap-4">
|
||||||
|
{files?.map((file, index) => (
|
||||||
|
<FileCard
|
||||||
|
key={index}
|
||||||
|
file={file}
|
||||||
|
onRemove={() => onRemove(index)}
|
||||||
|
progress={progresses?.[file.name]}
|
||||||
|
canUploadIndividual={canUploadIndividual}
|
||||||
|
uploadIndividualFun={uploadIndividualFun || (() => {})}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FileCardProps {
|
||||||
|
file: File;
|
||||||
|
onRemove: () => void;
|
||||||
|
progress?: number;
|
||||||
|
canUploadIndividual?: boolean;
|
||||||
|
uploadIndividualFun: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function FileCard({
|
||||||
|
file,
|
||||||
|
progress,
|
||||||
|
onRemove,
|
||||||
|
canUploadIndividual = false,
|
||||||
|
uploadIndividualFun,
|
||||||
|
}: FileCardProps) {
|
||||||
|
return (
|
||||||
|
<div className="relative flex items-center gap-2.5 rounded-md border border-transparent p-2 dark:border-gray-700 dark:bg-gray-800/50">
|
||||||
|
<div className="flex flex-1 gap-2.5">
|
||||||
|
{isFileWithPreview(file) ? <FilePreview file={file} /> : null}
|
||||||
|
<div className="flex w-full flex-col gap-2">
|
||||||
|
<div className="flex flex-col gap-px">
|
||||||
|
<p className="line-clamp-1 text-sm font-medium text-foreground/80">
|
||||||
|
{file.name}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{formatBytes(file.size)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{progress ? <Progress value={progress} /> : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
className="size-7 dark:border-gray-600 dark:hover:bg-gray-700"
|
||||||
|
onClick={onRemove}
|
||||||
|
>
|
||||||
|
<X className="size-4" aria-hidden="true" />
|
||||||
|
<span className="sr-only">{t("PDF.removeFile")}</span>
|
||||||
|
</Button>
|
||||||
|
{canUploadIndividual && (
|
||||||
|
<Button type="button" variant="outline" className="dark:border-gray-600 dark:hover:bg-gray-700" onClick={uploadIndividualFun}>
|
||||||
|
upload
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isFileWithPreview(file: File): file is File & { preview: string } {
|
||||||
|
return "preview" in file && typeof file.preview === "string";
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FilePreviewProps {
|
||||||
|
file: File & { preview: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
function FilePreview({ file }: FilePreviewProps) {
|
||||||
|
if (file.type.startsWith("image/")) {
|
||||||
|
return (
|
||||||
|
<img
|
||||||
|
className="h-auto max-w-full"
|
||||||
|
src={file.preview}
|
||||||
|
alt={file.name}
|
||||||
|
width={48}
|
||||||
|
height={48}
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
{
|
||||||
|
/* <Image
|
||||||
|
src={file.preview}
|
||||||
|
alt={file.name}
|
||||||
|
width={48}
|
||||||
|
height={48}
|
||||||
|
loading="lazy"
|
||||||
|
className="aspect-square shrink-0 rounded-md object-cover"
|
||||||
|
/> */
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<FileText className="size-10 text-muted-foreground" aria-hidden="true" />
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
|
||||||
|
* prop or avoid re-executing effects when passed as a dependency
|
||||||
|
*/
|
||||||
|
function useCallbackRef<T extends (...args: never[]) => unknown>(
|
||||||
|
callback: T | undefined
|
||||||
|
): T {
|
||||||
|
const callbackRef = React.useRef(callback);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
callbackRef.current = callback;
|
||||||
|
});
|
||||||
|
|
||||||
|
return React.useMemo(
|
||||||
|
() => ((...args) => callbackRef.current?.(...args)) as T,
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { useCallbackRef };
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { useCallbackRef } from "./use-callback-ref";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx
|
||||||
|
*/
|
||||||
|
|
||||||
|
type UseControllableStateParams<T> = {
|
||||||
|
prop?: T | undefined;
|
||||||
|
defaultProp?: T | undefined;
|
||||||
|
onChange?: (state: T) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type SetStateFn<T> = (prevState?: T) => T;
|
||||||
|
|
||||||
|
function useControllableState<T>({
|
||||||
|
prop,
|
||||||
|
defaultProp,
|
||||||
|
onChange = () => {},
|
||||||
|
}: UseControllableStateParams<T>) {
|
||||||
|
const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
|
||||||
|
defaultProp,
|
||||||
|
onChange,
|
||||||
|
});
|
||||||
|
const isControlled = prop !== undefined;
|
||||||
|
const value = isControlled ? prop : uncontrolledProp;
|
||||||
|
const handleChange = useCallbackRef(onChange);
|
||||||
|
|
||||||
|
const setValue: React.Dispatch<React.SetStateAction<T | undefined>> =
|
||||||
|
React.useCallback(
|
||||||
|
(nextValue) => {
|
||||||
|
if (isControlled) {
|
||||||
|
const setter = nextValue as SetStateFn<T>;
|
||||||
|
const value =
|
||||||
|
typeof nextValue === "function" ? setter(prop) : nextValue;
|
||||||
|
if (value !== prop) handleChange(value as T);
|
||||||
|
} else {
|
||||||
|
setUncontrolledProp(nextValue);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[isControlled, prop, setUncontrolledProp, handleChange]
|
||||||
|
);
|
||||||
|
|
||||||
|
return [value, setValue] as const;
|
||||||
|
}
|
||||||
|
|
||||||
|
function useUncontrolledState<T>({
|
||||||
|
defaultProp,
|
||||||
|
onChange,
|
||||||
|
}: Omit<UseControllableStateParams<T>, "prop">) {
|
||||||
|
const uncontrolledState = React.useState<T | undefined>(defaultProp);
|
||||||
|
const [value] = uncontrolledState;
|
||||||
|
const prevValueRef = React.useRef(value);
|
||||||
|
const handleChange = useCallbackRef(onChange);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (prevValueRef.current !== value) {
|
||||||
|
handleChange(value as T);
|
||||||
|
prevValueRef.current = value;
|
||||||
|
}
|
||||||
|
}, [value, prevValueRef, handleChange]);
|
||||||
|
|
||||||
|
return uncontrolledState;
|
||||||
|
}
|
||||||
|
|
||||||
|
export { useControllableState };
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
// Define the structure of an uploaded file
|
||||||
|
export interface UploadedFile {
|
||||||
|
name: string;
|
||||||
|
size: number;
|
||||||
|
type: string;
|
||||||
|
buffer: ArrayBuffer;
|
||||||
|
preview: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UploadProgress {
|
||||||
|
[key: string]: number; // ✅ Use string index for compatibility
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useUploadFile() {
|
||||||
|
const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
|
||||||
|
const [progresses, setProgresses] = useState<UploadProgress>({});
|
||||||
|
const [isUploading, setIsUploading] = useState<boolean>(false);
|
||||||
|
|
||||||
|
// Accepts File[] instead of FileList
|
||||||
|
const onUpload = async (files: File[]) => {
|
||||||
|
setIsUploading(true);
|
||||||
|
|
||||||
|
const filePromises: Promise<UploadedFile>[] = files.map((file, index) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
const previewReader = new FileReader();
|
||||||
|
reader.onload = (event) => {
|
||||||
|
if (event.target?.result instanceof ArrayBuffer) {
|
||||||
|
previewReader.readAsDataURL(file); // Convert for preview
|
||||||
|
|
||||||
|
previewReader.onload = () => {
|
||||||
|
resolve({
|
||||||
|
name: file.name,
|
||||||
|
size: file.size,
|
||||||
|
type: file.type,
|
||||||
|
buffer: event.target!.result as ArrayBuffer,
|
||||||
|
preview: previewReader.result as string, // Store preview
|
||||||
|
});
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
reject(new Error("Failed to read file as ArrayBuffer."));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.onerror = () => reject(new Error("File reading error"));
|
||||||
|
reader.readAsArrayBuffer(file);
|
||||||
|
|
||||||
|
// Convert index to string for progresses
|
||||||
|
const fileIndex = index.toString();
|
||||||
|
setProgresses((prev) => ({ ...prev, [fileIndex]: 0 }));
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setProgresses((prev) => ({ ...prev, [fileIndex]: 100 }));
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
const fileBuffers = await Promise.all(filePromises);
|
||||||
|
setUploadedFiles((prev) => [...prev, ...fileBuffers]);
|
||||||
|
} catch (error) {
|
||||||
|
} finally {
|
||||||
|
setIsUploading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
onUpload,
|
||||||
|
progresses,
|
||||||
|
uploadedFiles,
|
||||||
|
isUploading,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
"use client";
|
||||||
|
import { FileUploader } from "./fileUpload";
|
||||||
|
import { useState, useEffect, useRef } from "react"; // Added useRef import
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
export interface FileInfo {
|
||||||
|
fileName: string;
|
||||||
|
contentType: string;
|
||||||
|
originalname: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Name {
|
||||||
|
am: string;
|
||||||
|
en: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UploadRequestBody {
|
||||||
|
fileInfo: FileInfo;
|
||||||
|
name: Name;
|
||||||
|
recordContentId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UploadResponse {
|
||||||
|
uploadUrl: string;
|
||||||
|
attachmentId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ReusableFileUploader({
|
||||||
|
setFiles,
|
||||||
|
files,
|
||||||
|
canUploadIndividual = false,
|
||||||
|
isLoading,
|
||||||
|
uploadIndividualFun,
|
||||||
|
}: {
|
||||||
|
setFiles?: (files: File[]) => void;
|
||||||
|
files: File[];
|
||||||
|
isLoading: boolean;
|
||||||
|
canUploadIndividual?: boolean;
|
||||||
|
uploadIndividualFun?: () => void;
|
||||||
|
}) {
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const lastFiles = useRef<File[]>([]); // Now properly defined
|
||||||
|
useEffect(() => {
|
||||||
|
lastFiles.current = files;
|
||||||
|
}, [files]);
|
||||||
|
|
||||||
|
const handleFileChange = (newFiles: File[]) => {
|
||||||
|
if (setFiles) {
|
||||||
|
// Only update if files actually changed
|
||||||
|
if (
|
||||||
|
newFiles.length !== lastFiles.current.length ||
|
||||||
|
newFiles.some((f, i) => f !== lastFiles.current[i])
|
||||||
|
) {
|
||||||
|
setFiles(newFiles);
|
||||||
|
setError(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<FileUploader
|
||||||
|
maxFileCount={30}
|
||||||
|
maxSize={200 * 1024 * 1024}
|
||||||
|
value={files}
|
||||||
|
onValueChange={handleFileChange}
|
||||||
|
disabled={isLoading}
|
||||||
|
canUploadIndividual={canUploadIndividual}
|
||||||
|
uploadIndividualFun={uploadIndividualFun}
|
||||||
|
/>
|
||||||
|
{isLoading && <p className="text-muted-foreground">Uploading...</p>}
|
||||||
|
{error && <p className="text-red-500 dark:text-red-400">{error}</p>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/shared/common/ui/card";
|
||||||
|
import { ScrollArea, ScrollBar } from "@/shared/common/ui/scroll-area";
|
||||||
|
|
||||||
|
import { EmptyCard } from "./empty-card";
|
||||||
|
import { UploadedFile } from "./hooks/use-file-upload";
|
||||||
|
|
||||||
|
interface UploadedFilesCardProps {
|
||||||
|
uploadedFiles: UploadedFile[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function UploadedFilesCard({ uploadedFiles }: UploadedFilesCardProps) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Uploaded files</CardTitle>
|
||||||
|
<CardDescription>View the uploaded files here</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{uploadedFiles.length > 0 ? (
|
||||||
|
<ScrollArea className="pb-4">
|
||||||
|
<div className="flex w-max space-x-2.5">
|
||||||
|
{uploadedFiles.map((file, index) => (
|
||||||
|
<div key={index} className="relative aspect-video w-64">
|
||||||
|
<img
|
||||||
|
src={file.preview}
|
||||||
|
alt={file.name}
|
||||||
|
className="rounded-md object-cover w-full h-full"
|
||||||
|
/>
|
||||||
|
{/* <Image
|
||||||
|
src={file.preview}
|
||||||
|
alt={file.name}
|
||||||
|
fill
|
||||||
|
sizes="(min-width: 640px) 640px, 100vw"
|
||||||
|
loading="lazy"
|
||||||
|
className="rounded-md object-cover"
|
||||||
|
/> */}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<ScrollBar orientation="horizontal" />
|
||||||
|
</ScrollArea>
|
||||||
|
) : (
|
||||||
|
<EmptyCard
|
||||||
|
title="No files uploaded"
|
||||||
|
description="Upload some files to see them here"
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import { clsx, type ClassValue } from "clsx";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatBytes(
|
||||||
|
bytes: number,
|
||||||
|
opts: {
|
||||||
|
decimals?: number;
|
||||||
|
sizeType?: "accurate" | "normal";
|
||||||
|
} = {}
|
||||||
|
) {
|
||||||
|
const { decimals = 0, sizeType = "normal" } = opts;
|
||||||
|
|
||||||
|
const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
|
||||||
|
const accurateSizes = ["Bytes", "KiB", "MiB", "GiB", "TiB"];
|
||||||
|
if (bytes === 0) return "0 Byte";
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||||
|
return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${
|
||||||
|
sizeType === "accurate" ? accurateSizes[i] ?? "Bytes" : sizes[i] ?? "Bytes"
|
||||||
|
}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Stole this from the @radix-ui/primitive
|
||||||
|
* @see https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx
|
||||||
|
*/
|
||||||
|
export function composeEventHandlers<E>(
|
||||||
|
originalEventHandler?: (event: E) => void,
|
||||||
|
ourEventHandler?: (event: E) => void,
|
||||||
|
{ checkForDefaultPrevented = true } = {}
|
||||||
|
) {
|
||||||
|
return function handleEvent(event: E) {
|
||||||
|
originalEventHandler?.(event);
|
||||||
|
|
||||||
|
if (
|
||||||
|
checkForDefaultPrevented === false ||
|
||||||
|
!(event as unknown as Event).defaultPrevented
|
||||||
|
) {
|
||||||
|
return ourEventHandler?.(event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,166 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
||||||
|
import { Slot } from "@radix-ui/react-slot";
|
||||||
|
import {
|
||||||
|
Controller,
|
||||||
|
FormProvider,
|
||||||
|
useFormContext,
|
||||||
|
useFormState,
|
||||||
|
type ControllerProps,
|
||||||
|
type FieldPath,
|
||||||
|
type FieldValues,
|
||||||
|
} from "react-hook-form";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { Label } from "@/shared/common/ui/label";
|
||||||
|
|
||||||
|
const Form = FormProvider;
|
||||||
|
|
||||||
|
type FormFieldContextValue<
|
||||||
|
TFieldValues extends FieldValues = FieldValues,
|
||||||
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
|
||||||
|
> = {
|
||||||
|
name: TName;
|
||||||
|
};
|
||||||
|
|
||||||
|
const FormFieldContext = React.createContext<FormFieldContextValue>(
|
||||||
|
{} as FormFieldContextValue
|
||||||
|
);
|
||||||
|
|
||||||
|
const FormField = <
|
||||||
|
TFieldValues extends FieldValues = FieldValues,
|
||||||
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
|
||||||
|
>({
|
||||||
|
...props
|
||||||
|
}: ControllerProps<TFieldValues, TName>) => {
|
||||||
|
return (
|
||||||
|
<FormFieldContext.Provider value={{ name: props.name }}>
|
||||||
|
<Controller {...props} />
|
||||||
|
</FormFieldContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const useFormField = () => {
|
||||||
|
const fieldContext = React.useContext(FormFieldContext);
|
||||||
|
const itemContext = React.useContext(FormItemContext);
|
||||||
|
const { getFieldState } = useFormContext();
|
||||||
|
const formState = useFormState({ name: fieldContext.name });
|
||||||
|
const fieldState = getFieldState(fieldContext.name, formState);
|
||||||
|
|
||||||
|
if (!fieldContext) {
|
||||||
|
throw new Error("useFormField should be used within <FormField>");
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id } = itemContext;
|
||||||
|
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
name: fieldContext.name,
|
||||||
|
formItemId: `${id}-form-item`,
|
||||||
|
formDescriptionId: `${id}-form-item-description`,
|
||||||
|
formMessageId: `${id}-form-item-message`,
|
||||||
|
...fieldState,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
type FormItemContextValue = {
|
||||||
|
id: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const FormItemContext = React.createContext<FormItemContextValue>(
|
||||||
|
{} as FormItemContextValue
|
||||||
|
);
|
||||||
|
|
||||||
|
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
const id = React.useId();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItemContext.Provider value={{ id }}>
|
||||||
|
<div
|
||||||
|
data-slot="form-item"
|
||||||
|
className={cn("grid gap-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</FormItemContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FormLabel({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||||
|
const { error, formItemId } = useFormField();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Label
|
||||||
|
data-slot="form-label"
|
||||||
|
data-error={!!error}
|
||||||
|
className={cn("data-[error=true]:text-destructive-foreground", className)}
|
||||||
|
htmlFor={formItemId}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
|
||||||
|
const { error, formItemId, formDescriptionId, formMessageId } =
|
||||||
|
useFormField();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Slot
|
||||||
|
data-slot="form-control"
|
||||||
|
id={formItemId}
|
||||||
|
aria-describedby={
|
||||||
|
!error
|
||||||
|
? `${formDescriptionId}`
|
||||||
|
: `${formDescriptionId} ${formMessageId}`
|
||||||
|
}
|
||||||
|
aria-invalid={!!error}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||||
|
const { formDescriptionId } = useFormField();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
data-slot="form-description"
|
||||||
|
id={formDescriptionId}
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
|
||||||
|
const { error, formMessageId } = useFormField();
|
||||||
|
const body = error ? String(error?.message ?? "") : props.children;
|
||||||
|
|
||||||
|
if (!body) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
data-slot="form-message"
|
||||||
|
id={formMessageId}
|
||||||
|
className={cn("text-destructive-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{body}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
useFormField,
|
||||||
|
Form,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormMessage,
|
||||||
|
FormField,
|
||||||
|
};
|
||||||
@@ -0,0 +1,239 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { Button } from "@/shared/common/ui/button";
|
||||||
|
import { Label } from "@/shared/common/ui/label";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/shared/common/ui/select";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/shared/common/ui/popover";
|
||||||
|
import { CalendarIcon } from "lucide-react";
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import HabeshaCalendarUtils, {
|
||||||
|
HabeshaDate,
|
||||||
|
} from "@/shared/utils/habeshaCalendar";
|
||||||
|
|
||||||
|
export interface HabeshaDatePickerProps {
|
||||||
|
value?: Date;
|
||||||
|
onChange?: (date: Date) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
className?: string;
|
||||||
|
language?: "am" | "en";
|
||||||
|
}
|
||||||
|
|
||||||
|
export const HabeshaDatePicker: React.FC<HabeshaDatePickerProps> = ({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
placeholder = "Select date",
|
||||||
|
disabled = false,
|
||||||
|
className,
|
||||||
|
language = "am",
|
||||||
|
}) => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [selectedYear, setSelectedYear] = useState<string>("");
|
||||||
|
const [selectedMonth, setSelectedMonth] = useState<string>("");
|
||||||
|
const [selectedDay, setSelectedDay] = useState<string>("");
|
||||||
|
const [displayText, setDisplayText] = useState<string>("");
|
||||||
|
|
||||||
|
// Initialize with current date or provided value
|
||||||
|
useEffect(() => {
|
||||||
|
if (value && value instanceof Date && !isNaN(value.getTime())) {
|
||||||
|
const habeshaDate = HabeshaCalendarUtils.gregorianToHabesha(value);
|
||||||
|
setSelectedYear(habeshaDate.year.toString());
|
||||||
|
setSelectedMonth(habeshaDate.month.toString());
|
||||||
|
setSelectedDay(habeshaDate.day.toString());
|
||||||
|
} else {
|
||||||
|
const current = HabeshaCalendarUtils.getCurrentHabeshaDate();
|
||||||
|
setSelectedYear(current.year.toString());
|
||||||
|
setSelectedMonth(current.month.toString());
|
||||||
|
setSelectedDay("");
|
||||||
|
}
|
||||||
|
}, [value]);
|
||||||
|
|
||||||
|
// Update display text when language or value changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (value && value instanceof Date && !isNaN(value.getTime())) {
|
||||||
|
setDisplayText(HabeshaCalendarUtils.formatForDisplay(value, language));
|
||||||
|
} else {
|
||||||
|
setDisplayText("");
|
||||||
|
}
|
||||||
|
}, [value, language]);
|
||||||
|
|
||||||
|
const yearOptions = HabeshaCalendarUtils.generateHabeshaYearOptions(10, 5);
|
||||||
|
const monthOptions = React.useMemo(
|
||||||
|
() => HabeshaCalendarUtils.getMonthOptions(language),
|
||||||
|
[language]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Generate day options based on selected month and year
|
||||||
|
const getDayOptions = () => {
|
||||||
|
if (!selectedYear || !selectedMonth) return [];
|
||||||
|
|
||||||
|
const year = parseInt(selectedYear);
|
||||||
|
const month = parseInt(selectedMonth);
|
||||||
|
const daysInMonth = HabeshaCalendarUtils.getDaysInHabeshaMonth(year, month);
|
||||||
|
|
||||||
|
return Array.from({ length: daysInMonth }, (_, i) => ({
|
||||||
|
label: (i + 1).toString(),
|
||||||
|
value: (i + 1).toString(),
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDateSelect = () => {
|
||||||
|
if (selectedYear && selectedMonth && selectedDay) {
|
||||||
|
const year = parseInt(selectedYear);
|
||||||
|
const month = parseInt(selectedMonth);
|
||||||
|
const day = parseInt(selectedDay);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const gregorianDate = HabeshaCalendarUtils.habeshaToGregorian(
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
day
|
||||||
|
);
|
||||||
|
onChange?.(gregorianDate);
|
||||||
|
setIsOpen(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Invalid Habesha date:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClear = () => {
|
||||||
|
setSelectedYear("");
|
||||||
|
setSelectedMonth("");
|
||||||
|
setSelectedDay("");
|
||||||
|
onChange?.(new Date()); // Reset to current date
|
||||||
|
};
|
||||||
|
|
||||||
|
const displayValue = displayText;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover open={isOpen} onOpenChange={setIsOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className={cn(
|
||||||
|
"w-full justify-start text-left font-normal",
|
||||||
|
!value && "text-muted-foreground",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
disabled={disabled}
|
||||||
|
>
|
||||||
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||||
|
{displayValue || placeholder}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-4" align="start">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h4 className="font-medium">
|
||||||
|
{language === "am" ? "ቀን ይምረጡ" : "Select Date"}
|
||||||
|
</h4>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleClear}
|
||||||
|
className="text-xs"
|
||||||
|
>
|
||||||
|
{language === "am" ? "አጽዳ" : "Clear"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{/* Year Selection */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="text-xs">
|
||||||
|
{language === "am" ? "ዓመት" : "Year"}
|
||||||
|
</Label>
|
||||||
|
<Select value={selectedYear} onValueChange={setSelectedYear}>
|
||||||
|
<SelectTrigger className="h-8">
|
||||||
|
<SelectValue
|
||||||
|
placeholder={language === "am" ? "ዓመት" : "Year"}
|
||||||
|
/>
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{yearOptions.map((year) => (
|
||||||
|
<SelectItem key={year.value} value={year.value}>
|
||||||
|
{year.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Month Selection */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="text-xs">
|
||||||
|
{language === "am" ? "ወር" : "Month"}
|
||||||
|
</Label>
|
||||||
|
<Select value={selectedMonth} onValueChange={setSelectedMonth}>
|
||||||
|
<SelectTrigger className="h-8">
|
||||||
|
<SelectValue
|
||||||
|
placeholder={language === "am" ? "ወር" : "Month"}
|
||||||
|
/>
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{monthOptions.map((month) => (
|
||||||
|
<SelectItem key={month.value} value={month.value}>
|
||||||
|
{month.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Day Selection */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="text-xs">
|
||||||
|
{language === "am" ? "ቀን" : "Day"}
|
||||||
|
</Label>
|
||||||
|
<Select
|
||||||
|
value={selectedDay}
|
||||||
|
onValueChange={setSelectedDay}
|
||||||
|
disabled={!selectedYear || !selectedMonth}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="h-8">
|
||||||
|
<SelectValue placeholder={language === "am" ? "ቀን" : "Day"} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{getDayOptions().map((day) => (
|
||||||
|
<SelectItem key={day.value} value={day.value}>
|
||||||
|
{day.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end gap-2 pt-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
>
|
||||||
|
{language === "am" ? "ሰርዝ" : "Cancel"}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={handleDateSelect}
|
||||||
|
disabled={!selectedYear || !selectedMonth || !selectedDay}
|
||||||
|
>
|
||||||
|
{language === "am" ? "ምረጥ" : "Select"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HabeshaDatePicker;
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function HoverCard({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
|
||||||
|
return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function HoverCardTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function HoverCardContent({
|
||||||
|
className,
|
||||||
|
align = "center",
|
||||||
|
sideOffset = 4,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<HoverCardPrimitive.Content
|
||||||
|
data-slot="hover-card-content"
|
||||||
|
align={align}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { HoverCard, HoverCardTrigger, HoverCardContent };
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
|
||||||
|
({ className, type, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
data-slot="input"
|
||||||
|
className={cn(
|
||||||
|
"border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-background px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input dark:text-white dark:placeholder:text-muted-foreground/70",
|
||||||
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||||
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
Input.displayName = "Input";
|
||||||
|
|
||||||
|
export { Input };
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function Label({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
data-slot="label"
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Label };
|
||||||
@@ -0,0 +1,427 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
import { CheckIcon, ChevronDown, XIcon, WandSparkles } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { Separator } from "@/shared/common/ui/separator";
|
||||||
|
import { Button } from "@/shared/common/ui/button";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/shared/common/ui/popover";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
CommandSeparator,
|
||||||
|
} from "@/shared/common/ui/command";
|
||||||
|
import { t } from "i18next";
|
||||||
|
|
||||||
|
const normalizeSearchText = (value: string) =>
|
||||||
|
value.normalize("NFKC").toLocaleLowerCase().replace(/\s+/g, " ").trim();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Variants for the multi-select component to handle different styles.
|
||||||
|
* Uses class-variance-authority (cva) to define different styles based on "variant" prop.
|
||||||
|
*/
|
||||||
|
const multiSelectVariants = cva(
|
||||||
|
"m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"border-foreground/10 text-foreground bg-card hover:bg-card/80",
|
||||||
|
secondary:
|
||||||
|
"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
destructive:
|
||||||
|
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
||||||
|
inverted: "inverted",
|
||||||
|
dropDown:
|
||||||
|
"w-full border border-foreground/10 text-foreground bg-card hover:bg-card/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 transition duration-200",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Props for MultiSelect component
|
||||||
|
*/
|
||||||
|
interface MultiSelectProps
|
||||||
|
extends
|
||||||
|
React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
VariantProps<typeof multiSelectVariants> {
|
||||||
|
/**
|
||||||
|
* An array of option objects to be displayed in the multi-select component.
|
||||||
|
* Each option object has a label, value, and an optional icon.
|
||||||
|
*/
|
||||||
|
options: {
|
||||||
|
/** The text to display for the option. */
|
||||||
|
label: string;
|
||||||
|
/** The unique value associated with the option. */
|
||||||
|
value: string;
|
||||||
|
/** Optional icon component to display alongside the option. */
|
||||||
|
icon?: React.ComponentType<{ className?: string }>;
|
||||||
|
}[];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback function triggered when the selected values change.
|
||||||
|
* Receives an array of the new selected values.
|
||||||
|
*/
|
||||||
|
onValueChange: (value: string[]) => void;
|
||||||
|
|
||||||
|
/** The default selected values when the component mounts. */
|
||||||
|
defaultValue?: string[];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Placeholder text to be displayed when no values are selected.
|
||||||
|
* Optional, defaults to "Select options".
|
||||||
|
*/
|
||||||
|
placeholder?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Animation duration in seconds for the visual effects (e.g., bouncing badges).
|
||||||
|
* Optional, defaults to 0 (no animation).
|
||||||
|
*/
|
||||||
|
animation?: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Maximum number of items to display. Extra selected items will be summarized.
|
||||||
|
* Optional, defaults to 3.
|
||||||
|
*/
|
||||||
|
maxCount?: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The modality of the popover. When set to true, interaction with outside elements
|
||||||
|
* will be disabled and only popover content will be visible to screen readers.
|
||||||
|
* Optional, defaults to false.
|
||||||
|
*/
|
||||||
|
modalPopover?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If true, renders the multi-select component as a child of another component.
|
||||||
|
* Optional, defaults to false.
|
||||||
|
*/
|
||||||
|
asChild?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Additional class names to apply custom styles to the multi-select component.
|
||||||
|
* Optional, can be used to add custom styles.
|
||||||
|
*/
|
||||||
|
className?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Current selected values
|
||||||
|
*/
|
||||||
|
value?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MultiSelect = React.forwardRef<
|
||||||
|
HTMLButtonElement,
|
||||||
|
MultiSelectProps
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
options = [],
|
||||||
|
onValueChange,
|
||||||
|
variant,
|
||||||
|
defaultValue = [],
|
||||||
|
placeholder = "Select options",
|
||||||
|
animation = 0,
|
||||||
|
maxCount = 3,
|
||||||
|
modalPopover = false,
|
||||||
|
asChild = false,
|
||||||
|
className,
|
||||||
|
value,
|
||||||
|
...props
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
|
const [selectedValues, setSelectedValues] = React.useState<string[]>(
|
||||||
|
value || defaultValue,
|
||||||
|
);
|
||||||
|
const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
|
||||||
|
const [isAnimating, setIsAnimating] = React.useState(false);
|
||||||
|
const [isExtraOpen, setIsExtraOpen] = React.useState(false);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (value !== undefined) {
|
||||||
|
setSelectedValues(value);
|
||||||
|
}
|
||||||
|
}, [value]);
|
||||||
|
|
||||||
|
const handleInputKeyDown = (
|
||||||
|
event: React.KeyboardEvent<HTMLInputElement>,
|
||||||
|
) => {
|
||||||
|
if (event.key === "Enter") {
|
||||||
|
setIsPopoverOpen(true);
|
||||||
|
} else if (event.key === "Backspace" && !event.currentTarget.value) {
|
||||||
|
const newSelectedValues = [...selectedValues];
|
||||||
|
newSelectedValues.pop();
|
||||||
|
setSelectedValues(newSelectedValues);
|
||||||
|
onValueChange(newSelectedValues);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleOption = (option: string) => {
|
||||||
|
const newSelectedValues = selectedValues.includes(option)
|
||||||
|
? selectedValues.filter((value) => value !== option)
|
||||||
|
: [...selectedValues, option];
|
||||||
|
setSelectedValues(newSelectedValues);
|
||||||
|
onValueChange(newSelectedValues);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to remove a specific item without opening the dropdown
|
||||||
|
const removeItem = (valueToRemove: string, event: React.MouseEvent) => {
|
||||||
|
event.stopPropagation(); // Prevent dropdown from opening
|
||||||
|
const newSelectedValues = selectedValues.filter(
|
||||||
|
(value) => value !== valueToRemove,
|
||||||
|
);
|
||||||
|
setSelectedValues(newSelectedValues);
|
||||||
|
onValueChange(newSelectedValues);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClear = (event: React.MouseEvent) => {
|
||||||
|
event.stopPropagation(); // Prevent dropdown from opening
|
||||||
|
setSelectedValues([]);
|
||||||
|
onValueChange([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleAll = () => {
|
||||||
|
if (selectedValues.length === options.length) {
|
||||||
|
handleClear(new MouseEvent("click") as unknown as React.MouseEvent);
|
||||||
|
} else {
|
||||||
|
const allValues = options.map((option) => option.value);
|
||||||
|
setSelectedValues(allValues);
|
||||||
|
onValueChange(allValues);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover
|
||||||
|
open={isPopoverOpen}
|
||||||
|
onOpenChange={setIsPopoverOpen}
|
||||||
|
modal={modalPopover}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={cn(
|
||||||
|
"flex w-full p-2 rounded-md border min-h-10 h-auto items-center justify-between bg-background hover:bg-background/90 [&_svg]:pointer-events-auto",
|
||||||
|
className,
|
||||||
|
)}>
|
||||||
|
{selectedValues.length > 0 ? (
|
||||||
|
<div className="flex justify-between items-center w-full">
|
||||||
|
<div className="flex flex-wrap gap-1 items-center">
|
||||||
|
{selectedValues.slice(0, maxCount).map((value) => {
|
||||||
|
const option = options.find((o) => o.value === value);
|
||||||
|
const IconComponent = option?.icon;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={value}
|
||||||
|
className="flex items-center gap-1 px-2 py-1 bg-primary/10 text-primary border border-primary/20 dark:bg-primary/20 dark:text-primary-foreground dark:border-primary/40 rounded-md">
|
||||||
|
{IconComponent && (
|
||||||
|
<IconComponent className="h-3 w-3 mr-1" />
|
||||||
|
)}
|
||||||
|
<span className="max-w-[150px] truncate text-sm">
|
||||||
|
{option?.label}
|
||||||
|
</span>
|
||||||
|
<XIcon
|
||||||
|
className="h-3.5 w-3.5 cursor-pointer text-primary dark:text-primary-foreground hover:text-red-600 ml-1"
|
||||||
|
onClick={(e) => removeItem(value, e)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{selectedValues.length > maxCount && (
|
||||||
|
<Popover
|
||||||
|
open={isExtraOpen}
|
||||||
|
onOpenChange={setIsExtraOpen}
|
||||||
|
modal={true}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<div
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
onPointerDown={(e) => e.stopPropagation()}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setIsExtraOpen((prev) => !prev);
|
||||||
|
}}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter" || e.key === " ") {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
setIsExtraOpen((prev) => !prev);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="flex items-center gap-1 px-2 py-1 bg-gray-100 text-gray-700 border border-gray-200 rounded-md cursor-pointer hover:bg-gray-200 transition-colors dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600"
|
||||||
|
title={t("msg.selectAll") /* tooltip fallback */}>
|
||||||
|
<span className="text-sm">{`+ ${
|
||||||
|
selectedValues.length - maxCount
|
||||||
|
} more`}</span>
|
||||||
|
</div>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent
|
||||||
|
align="start"
|
||||||
|
className="w-72 p-0"
|
||||||
|
onPointerDown={(e) => e.stopPropagation()}
|
||||||
|
onClick={(e) => e.stopPropagation()}>
|
||||||
|
<div className="flex items-center justify-between border-b px-3 py-2">
|
||||||
|
<span className="text-xs font-semibold text-slate-700 dark:text-slate-200">
|
||||||
|
{t("ApprovalPage.Selected", "Selected")}
|
||||||
|
</span>
|
||||||
|
<span className="rounded-full bg-primary/15 px-2 py-0.5 text-xs font-medium text-primary dark:bg-primary/30 dark:text-primary-foreground">
|
||||||
|
{selectedValues.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="max-h-64 overflow-y-auto py-1">
|
||||||
|
{selectedValues.slice(maxCount).map((val) => {
|
||||||
|
const option = options.find((o) => o.value === val);
|
||||||
|
if (!option) return null;
|
||||||
|
const IconComponent = option.icon;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={val}
|
||||||
|
className="flex items-center justify-between gap-2 px-3 py-1.5 hover:bg-slate-50 dark:hover:bg-slate-800">
|
||||||
|
<span className="flex items-center gap-2 min-w-0">
|
||||||
|
{IconComponent && (
|
||||||
|
<IconComponent className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
||||||
|
)}
|
||||||
|
<span className="text-sm truncate">
|
||||||
|
{option.label}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<XIcon
|
||||||
|
className="h-3.5 w-3.5 cursor-pointer text-slate-500 dark:text-slate-400 hover:text-red-600 shrink-0"
|
||||||
|
onClick={(e) => removeItem(val, e)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center justify-between w-full mx-auto">
|
||||||
|
<span className="text-sm text-muted-foreground mx-3">
|
||||||
|
{placeholder}
|
||||||
|
</span>
|
||||||
|
<ChevronDown className="h-4 cursor-pointer text-muted-foreground mx-2" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent
|
||||||
|
className="w-auto p-0 max-w-[400px] dark:bg-gray-800 dark:border-gray-700"
|
||||||
|
align="start"
|
||||||
|
onEscapeKeyDown={() => setIsPopoverOpen(false)}
|
||||||
|
onWheel={(e) => {
|
||||||
|
// Prevent the wheel event from bubbling up to parent elements
|
||||||
|
e.stopPropagation();
|
||||||
|
}}>
|
||||||
|
<Command
|
||||||
|
filter={(value, search, keywords = []) => {
|
||||||
|
const normalizedSearch = normalizeSearchText(search);
|
||||||
|
if (!normalizedSearch) return 1;
|
||||||
|
|
||||||
|
const haystacks = [value, ...keywords]
|
||||||
|
.map((item) => normalizeSearchText(item))
|
||||||
|
.filter(Boolean);
|
||||||
|
|
||||||
|
return haystacks.some((item) => item.includes(normalizedSearch))
|
||||||
|
? 1
|
||||||
|
: 0;
|
||||||
|
}}>
|
||||||
|
<CommandInput
|
||||||
|
placeholder={t("ApprovalPage.Search")}
|
||||||
|
onKeyDown={handleInputKeyDown}
|
||||||
|
/>
|
||||||
|
<CommandList className="max-h-[200px] overflow-y-auto custom-scrollbar scroll-container">
|
||||||
|
<CommandEmpty>{t("common.noResult")}</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
<CommandItem
|
||||||
|
key="all"
|
||||||
|
onSelect={toggleAll}
|
||||||
|
className="cursor-pointer">
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
|
||||||
|
selectedValues.length === options.length
|
||||||
|
? "bg-primary text-primary-foreground"
|
||||||
|
: "opacity-50 [&_svg]:invisible",
|
||||||
|
)}>
|
||||||
|
<CheckIcon className="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<span>({t("msg.selectAll")})</span>
|
||||||
|
</CommandItem>
|
||||||
|
{options.map((option) => {
|
||||||
|
const isSelected = selectedValues.includes(option.value);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CommandItem
|
||||||
|
key={option.value}
|
||||||
|
value={option.label}
|
||||||
|
keywords={[option.value, option.label]}
|
||||||
|
onSelect={() => toggleOption(option.value)}
|
||||||
|
className="cursor-pointer">
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
|
||||||
|
isSelected
|
||||||
|
? "bg-primary text-primary-foreground"
|
||||||
|
: "opacity-50 [&_svg]:invisible",
|
||||||
|
)}>
|
||||||
|
<CheckIcon className="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
{option.icon && (
|
||||||
|
<option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||||
|
)}
|
||||||
|
<span>{option.label}</span>
|
||||||
|
</CommandItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</CommandGroup>
|
||||||
|
<CommandSeparator />
|
||||||
|
<CommandGroup>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
{selectedValues.length > 0 && (
|
||||||
|
<>
|
||||||
|
<CommandItem
|
||||||
|
onClick={handleClear}
|
||||||
|
className="flex-1 justify-center cursor-pointer">
|
||||||
|
{t("userIncoming.Clear")}
|
||||||
|
</CommandItem>
|
||||||
|
<Separator
|
||||||
|
orientation="vertical"
|
||||||
|
className="flex min-h-6 h-full"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<CommandItem
|
||||||
|
onSelect={() => setIsPopoverOpen(false)}
|
||||||
|
className="flex-1 justify-center cursor-pointer max-w-full">
|
||||||
|
{t("complaint.close")}
|
||||||
|
</CommandItem>
|
||||||
|
</div>
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
MultiSelect.displayName = "MultiSelect";
|
||||||
@@ -0,0 +1,168 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
||||||
|
import { cva } from "class-variance-authority";
|
||||||
|
import { ChevronDownIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function NavigationMenu({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
viewport = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
|
||||||
|
viewport?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Root
|
||||||
|
data-slot="navigation-menu"
|
||||||
|
data-viewport={viewport}
|
||||||
|
className={cn(
|
||||||
|
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{viewport && <NavigationMenuViewport />}
|
||||||
|
</NavigationMenuPrimitive.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuList({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.List
|
||||||
|
data-slot="navigation-menu-list"
|
||||||
|
className={cn(
|
||||||
|
"group flex flex-1 list-none items-center justify-center gap-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Item
|
||||||
|
data-slot="navigation-menu-item"
|
||||||
|
className={cn("relative", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const navigationMenuTriggerStyle = cva(
|
||||||
|
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
|
||||||
|
);
|
||||||
|
|
||||||
|
function NavigationMenuTrigger({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Trigger
|
||||||
|
data-slot="navigation-menu-trigger"
|
||||||
|
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}{" "}
|
||||||
|
<ChevronDownIcon
|
||||||
|
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</NavigationMenuPrimitive.Trigger>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Content
|
||||||
|
data-slot="navigation-menu-content"
|
||||||
|
className={cn(
|
||||||
|
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
|
||||||
|
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuViewport({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"absolute top-full left-0 isolate z-50 flex justify-center"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<NavigationMenuPrimitive.Viewport
|
||||||
|
data-slot="navigation-menu-viewport"
|
||||||
|
className={cn(
|
||||||
|
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuLink({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Link
|
||||||
|
data-slot="navigation-menu-link"
|
||||||
|
className={cn(
|
||||||
|
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuIndicator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Indicator
|
||||||
|
data-slot="navigation-menu-indicator"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
|
||||||
|
</NavigationMenuPrimitive.Indicator>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
NavigationMenu,
|
||||||
|
NavigationMenuList,
|
||||||
|
NavigationMenuItem,
|
||||||
|
NavigationMenuContent,
|
||||||
|
NavigationMenuTrigger,
|
||||||
|
NavigationMenuLink,
|
||||||
|
NavigationMenuIndicator,
|
||||||
|
NavigationMenuViewport,
|
||||||
|
navigationMenuTriggerStyle,
|
||||||
|
};
|
||||||
@@ -0,0 +1,127 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import {
|
||||||
|
ChevronLeftIcon,
|
||||||
|
ChevronRightIcon,
|
||||||
|
MoreHorizontalIcon,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { Button, buttonVariants } from "@/shared/common/ui/button";
|
||||||
|
|
||||||
|
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
|
||||||
|
return (
|
||||||
|
<nav
|
||||||
|
role="navigation"
|
||||||
|
aria-label="pagination"
|
||||||
|
data-slot="pagination"
|
||||||
|
className={cn("mx-auto flex w-full justify-center", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PaginationContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"ul">) {
|
||||||
|
return (
|
||||||
|
<ul
|
||||||
|
data-slot="pagination-content"
|
||||||
|
className={cn("flex flex-row items-center gap-1", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
|
||||||
|
return <li data-slot="pagination-item" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
type PaginationLinkProps = {
|
||||||
|
isActive?: boolean;
|
||||||
|
} & Pick<React.ComponentProps<typeof Button>, "size"> &
|
||||||
|
React.ComponentProps<"a">;
|
||||||
|
|
||||||
|
function PaginationLink({
|
||||||
|
className,
|
||||||
|
isActive,
|
||||||
|
size = "icon",
|
||||||
|
...props
|
||||||
|
}: PaginationLinkProps) {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
aria-current={isActive ? "page" : undefined}
|
||||||
|
data-slot="pagination-link"
|
||||||
|
data-active={isActive}
|
||||||
|
className={cn(
|
||||||
|
buttonVariants({
|
||||||
|
variant: isActive ? "outline" : "ghost",
|
||||||
|
size,
|
||||||
|
}),
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PaginationPrevious({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PaginationLink>) {
|
||||||
|
return (
|
||||||
|
<PaginationLink
|
||||||
|
aria-label="Go to previous page"
|
||||||
|
size="default"
|
||||||
|
className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronLeftIcon />
|
||||||
|
<span className="hidden sm:block">Previous</span>
|
||||||
|
</PaginationLink>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PaginationNext({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PaginationLink>) {
|
||||||
|
return (
|
||||||
|
<PaginationLink
|
||||||
|
aria-label="Go to next page"
|
||||||
|
size="default"
|
||||||
|
className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="hidden sm:block">Next</span>
|
||||||
|
<ChevronRightIcon />
|
||||||
|
</PaginationLink>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PaginationEllipsis({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
aria-hidden
|
||||||
|
data-slot="pagination-ellipsis"
|
||||||
|
className={cn("flex size-9 items-center justify-center", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<MoreHorizontalIcon className="size-4" />
|
||||||
|
<span className="sr-only">More pages</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Pagination,
|
||||||
|
PaginationContent,
|
||||||
|
PaginationLink,
|
||||||
|
PaginationItem,
|
||||||
|
PaginationPrevious,
|
||||||
|
PaginationNext,
|
||||||
|
PaginationEllipsis,
|
||||||
|
};
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function Popover({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
||||||
|
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
||||||
|
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverContent({
|
||||||
|
className,
|
||||||
|
align = "center",
|
||||||
|
sideOffset = 4,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<PopoverPrimitive.Portal>
|
||||||
|
<PopoverPrimitive.Content
|
||||||
|
data-slot="popover-content"
|
||||||
|
align={align}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</PopoverPrimitive.Portal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverAnchor({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
||||||
|
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function Progress({
|
||||||
|
className,
|
||||||
|
value,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<ProgressPrimitive.Root
|
||||||
|
data-slot="progress"
|
||||||
|
className={cn(
|
||||||
|
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ProgressPrimitive.Indicator
|
||||||
|
data-slot="progress-indicator"
|
||||||
|
className="bg-primary h-full w-full flex-1 transition-all"
|
||||||
|
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||||
|
/>
|
||||||
|
</ProgressPrimitive.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Progress };
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
||||||
|
import { CircleIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function RadioGroup({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<RadioGroupPrimitive.Root
|
||||||
|
data-slot="radio-group"
|
||||||
|
className={cn("grid gap-3", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function RadioGroupItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<RadioGroupPrimitive.Item
|
||||||
|
data-slot="radio-group-item"
|
||||||
|
className={cn(
|
||||||
|
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<RadioGroupPrimitive.Indicator
|
||||||
|
data-slot="radio-group-indicator"
|
||||||
|
className="relative flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
|
||||||
|
</RadioGroupPrimitive.Indicator>
|
||||||
|
</RadioGroupPrimitive.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { RadioGroup, RadioGroupItem };
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { GripVerticalIcon } from "lucide-react";
|
||||||
|
import * as ResizablePrimitive from "react-resizable-panels";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function ResizablePanelGroup({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
|
||||||
|
return (
|
||||||
|
<ResizablePrimitive.PanelGroup
|
||||||
|
data-slot="resizable-panel-group"
|
||||||
|
className={cn(
|
||||||
|
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ResizablePanel({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
|
||||||
|
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ResizableHandle({
|
||||||
|
withHandle,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
|
||||||
|
withHandle?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<ResizablePrimitive.PanelResizeHandle
|
||||||
|
data-slot="resizable-handle"
|
||||||
|
className={cn(
|
||||||
|
"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{withHandle && (
|
||||||
|
<div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
|
||||||
|
<GripVerticalIcon className="size-2.5" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ResizablePrimitive.PanelResizeHandle>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function ScrollArea({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<ScrollAreaPrimitive.Root
|
||||||
|
data-slot="scroll-area"
|
||||||
|
className={cn("relative", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.Viewport
|
||||||
|
data-slot="scroll-area-viewport"
|
||||||
|
className="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ScrollAreaPrimitive.Viewport>
|
||||||
|
<ScrollBar />
|
||||||
|
<ScrollAreaPrimitive.Corner />
|
||||||
|
</ScrollAreaPrimitive.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ScrollBar({
|
||||||
|
className,
|
||||||
|
orientation = "vertical",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
||||||
|
return (
|
||||||
|
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||||
|
data-slot="scroll-area-scrollbar"
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"flex touch-none p-px transition-colors select-none",
|
||||||
|
orientation === "vertical" &&
|
||||||
|
"h-full w-2.5 border-l border-l-transparent",
|
||||||
|
orientation === "horizontal" &&
|
||||||
|
"h-2.5 flex-col border-t border-t-transparent",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.ScrollAreaThumb
|
||||||
|
data-slot="scroll-area-thumb"
|
||||||
|
className="bg-border relative flex-1 rounded-full"
|
||||||
|
/>
|
||||||
|
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { ScrollArea, ScrollBar };
|
||||||
@@ -0,0 +1,183 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
||||||
|
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function Select({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||||
|
return <SelectPrimitive.Root data-slot="select" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||||
|
return <SelectPrimitive.Group data-slot="select-group" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectValue({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||||
|
return <SelectPrimitive.Value data-slot="select-value" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectTrigger({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Trigger
|
||||||
|
data-slot="select-trigger"
|
||||||
|
className={cn(
|
||||||
|
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SelectPrimitive.Icon asChild>
|
||||||
|
<ChevronDownIcon className="size-4 opacity-50" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
position = "popper",
|
||||||
|
onScroll,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Content> & {
|
||||||
|
onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content
|
||||||
|
data-slot="select-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
|
||||||
|
position === "popper" &&
|
||||||
|
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
position={position}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SelectScrollUpButton />
|
||||||
|
<SelectPrimitive.Viewport
|
||||||
|
className={cn(
|
||||||
|
"p-1",
|
||||||
|
position === "popper" &&
|
||||||
|
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
||||||
|
)}
|
||||||
|
onScroll={onScroll}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</SelectPrimitive.Viewport>
|
||||||
|
<SelectScrollDownButton />
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectLabel({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Label
|
||||||
|
data-slot="select-label"
|
||||||
|
className={cn("px-2 py-1.5 text-sm font-medium", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
data-slot="select-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute right-2 flex size-3.5 items-center justify-center">
|
||||||
|
<SelectPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Separator
|
||||||
|
data-slot="select-separator"
|
||||||
|
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectScrollUpButton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.ScrollUpButton
|
||||||
|
data-slot="select-scroll-up-button"
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronUpIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ScrollUpButton>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectScrollDownButton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.ScrollDownButton
|
||||||
|
data-slot="select-scroll-down-button"
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronDownIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ScrollDownButton>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectGroup,
|
||||||
|
SelectItem,
|
||||||
|
SelectLabel,
|
||||||
|
SelectScrollDownButton,
|
||||||
|
SelectScrollUpButton,
|
||||||
|
SelectSeparator,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
};
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function Separator({
|
||||||
|
className,
|
||||||
|
orientation = "horizontal",
|
||||||
|
decorative = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<SeparatorPrimitive.Root
|
||||||
|
data-slot="separator-root"
|
||||||
|
decorative={decorative}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Separator };
|
||||||
@@ -0,0 +1,137 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
||||||
|
import { XIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
||||||
|
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
||||||
|
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
||||||
|
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
||||||
|
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Overlay
|
||||||
|
data-slot="sheet-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
side = "right",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
||||||
|
side?: "top" | "right" | "bottom" | "left";
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SheetPortal>
|
||||||
|
<SheetOverlay />
|
||||||
|
<SheetPrimitive.Content
|
||||||
|
data-slot="sheet-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||||
|
side === "right" &&
|
||||||
|
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
||||||
|
side === "left" &&
|
||||||
|
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
||||||
|
side === "top" &&
|
||||||
|
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
|
||||||
|
side === "bottom" &&
|
||||||
|
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
||||||
|
<XIcon className="size-4" />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</SheetPrimitive.Close>
|
||||||
|
</SheetPrimitive.Content>
|
||||||
|
</SheetPortal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sheet-header"
|
||||||
|
className={cn("flex flex-col gap-1.5 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sheet-footer"
|
||||||
|
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Title
|
||||||
|
data-slot="sheet-title"
|
||||||
|
className={cn("text-foreground font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Description
|
||||||
|
data-slot="sheet-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Sheet,
|
||||||
|
SheetTrigger,
|
||||||
|
SheetClose,
|
||||||
|
SheetContent,
|
||||||
|
SheetHeader,
|
||||||
|
SheetFooter,
|
||||||
|
SheetTitle,
|
||||||
|
SheetDescription,
|
||||||
|
};
|
||||||
@@ -0,0 +1,727 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Slot } from "@radix-ui/react-slot";
|
||||||
|
import { VariantProps, cva } from "class-variance-authority";
|
||||||
|
import { PanelLeftIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { useIsMobile } from "@/record-management/hooks/use-mobile";
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { Button } from "@/shared/common/ui/button";
|
||||||
|
import { Input } from "@/shared/common/ui/input";
|
||||||
|
import { Separator } from "@/shared/common/ui/separator";
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetDescription,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
} from "@/shared/common/ui/sheet";
|
||||||
|
import { Skeleton } from "@/shared/common/ui/skeleton";
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipProvider,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from "@/shared/common/ui/tooltip";
|
||||||
|
|
||||||
|
const SIDEBAR_COOKIE_NAME = "sidebar_state";
|
||||||
|
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
||||||
|
const SIDEBAR_WIDTH = "16rem";
|
||||||
|
const SIDEBAR_WIDTH_MOBILE = "80vw"; // Changed from fixed size to viewport-relative
|
||||||
|
const SIDEBAR_WIDTH_ICON = "3rem";
|
||||||
|
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
||||||
|
|
||||||
|
type SidebarContext = {
|
||||||
|
state: "expanded" | "collapsed";
|
||||||
|
open: boolean;
|
||||||
|
setOpen: (open: boolean) => void;
|
||||||
|
openMobile: boolean;
|
||||||
|
setOpenMobile: (open: boolean) => void;
|
||||||
|
isMobile: boolean;
|
||||||
|
toggleSidebar: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const SidebarContext = React.createContext<SidebarContext | null>(null);
|
||||||
|
|
||||||
|
function useSidebar() {
|
||||||
|
const context = React.useContext(SidebarContext);
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("useSidebar must be used within a SidebarProvider.");
|
||||||
|
}
|
||||||
|
|
||||||
|
return context;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarProvider({
|
||||||
|
defaultOpen = true,
|
||||||
|
open: openProp,
|
||||||
|
onOpenChange: setOpenProp,
|
||||||
|
className,
|
||||||
|
style,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
defaultOpen?: boolean;
|
||||||
|
open?: boolean;
|
||||||
|
onOpenChange?: (open: boolean) => void;
|
||||||
|
}) {
|
||||||
|
const isMobile = useIsMobile();
|
||||||
|
const [openMobile, setOpenMobile] = React.useState(false);
|
||||||
|
|
||||||
|
// This is the internal state of the sidebar.
|
||||||
|
// We use openProp and setOpenProp for control from outside the component.
|
||||||
|
const [_open, _setOpen] = React.useState(defaultOpen);
|
||||||
|
const open = openProp ?? _open;
|
||||||
|
const setOpen = React.useCallback(
|
||||||
|
(value: boolean | ((value: boolean) => boolean)) => {
|
||||||
|
const openState = typeof value === "function" ? value(open) : value;
|
||||||
|
if (setOpenProp) {
|
||||||
|
setOpenProp(openState);
|
||||||
|
} else {
|
||||||
|
_setOpen(openState);
|
||||||
|
}
|
||||||
|
|
||||||
|
// This sets the cookie to keep the sidebar state.
|
||||||
|
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
||||||
|
},
|
||||||
|
[setOpenProp, open]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Helper to toggle the sidebar.
|
||||||
|
const toggleSidebar = React.useCallback(() => {
|
||||||
|
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
|
||||||
|
}, [isMobile, setOpen, setOpenMobile]);
|
||||||
|
|
||||||
|
// Adds a keyboard shortcut to toggle the sidebar.
|
||||||
|
React.useEffect(() => {
|
||||||
|
const handleKeyDown = (event: KeyboardEvent) => {
|
||||||
|
if (
|
||||||
|
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
||||||
|
(event.metaKey || event.ctrlKey)
|
||||||
|
) {
|
||||||
|
event.preventDefault();
|
||||||
|
toggleSidebar();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("keydown", handleKeyDown);
|
||||||
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||||
|
}, [toggleSidebar]);
|
||||||
|
|
||||||
|
// We add a state so that we can do data-state="expanded" or "collapsed".
|
||||||
|
// This makes it easier to style the sidebar with Tailwind classes.
|
||||||
|
const state = open ? "expanded" : "collapsed";
|
||||||
|
|
||||||
|
const contextValue = React.useMemo<SidebarContext>(
|
||||||
|
() => ({
|
||||||
|
state,
|
||||||
|
open,
|
||||||
|
setOpen,
|
||||||
|
isMobile,
|
||||||
|
openMobile,
|
||||||
|
setOpenMobile,
|
||||||
|
toggleSidebar,
|
||||||
|
}),
|
||||||
|
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SidebarContext.Provider value={contextValue}>
|
||||||
|
<TooltipProvider delayDuration={0}>
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-wrapper"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--sidebar-width": SIDEBAR_WIDTH,
|
||||||
|
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
||||||
|
...style,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
className={cn(
|
||||||
|
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</TooltipProvider>
|
||||||
|
</SidebarContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Sidebar({
|
||||||
|
side = "left",
|
||||||
|
variant = "sidebar",
|
||||||
|
collapsible = "offcanvas",
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
side?: "left" | "right";
|
||||||
|
variant?: "sidebar" | "floating" | "inset";
|
||||||
|
collapsible?: "offcanvas" | "icon" | "none";
|
||||||
|
}) {
|
||||||
|
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
||||||
|
|
||||||
|
if (collapsible === "none") {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar"
|
||||||
|
className={cn(
|
||||||
|
"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
return (
|
||||||
|
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
||||||
|
<SheetContent
|
||||||
|
data-sidebar="sidebar"
|
||||||
|
data-slot="sidebar"
|
||||||
|
data-mobile="true"
|
||||||
|
className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:top-4 [&>button]:right-4 max-w-full"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
side={side}
|
||||||
|
>
|
||||||
|
<SheetHeader className="sr-only">
|
||||||
|
<SheetTitle>Sidebar</SheetTitle>
|
||||||
|
<SheetDescription>Displays the mobile sidebar.</SheetDescription>
|
||||||
|
</SheetHeader>
|
||||||
|
<div className="flex h-full w-full flex-col">{children}</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="group peer text-sidebar-foreground hidden md:block"
|
||||||
|
data-state={state}
|
||||||
|
data-collapsible={state === "collapsed" ? collapsible : ""}
|
||||||
|
data-variant={variant}
|
||||||
|
data-side={side}
|
||||||
|
data-slot="sidebar"
|
||||||
|
>
|
||||||
|
{/* This is what handles the sidebar gap on desktop */}
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
||||||
|
"group-data-[collapsible=offcanvas]:w-0",
|
||||||
|
"group-data-[side=right]:rotate-180",
|
||||||
|
variant === "floating" || variant === "inset"
|
||||||
|
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
|
||||||
|
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
|
||||||
|
side === "left"
|
||||||
|
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
||||||
|
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
||||||
|
// Adjust the padding for floating and inset variants.
|
||||||
|
variant === "floating" || variant === "inset"
|
||||||
|
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
|
||||||
|
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-sidebar="sidebar"
|
||||||
|
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarTrigger({
|
||||||
|
className,
|
||||||
|
onClick,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Button>) {
|
||||||
|
const { toggleSidebar } = useSidebar();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
data-sidebar="trigger"
|
||||||
|
data-slot="sidebar-trigger"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className={cn("h-7 w-7", className)}
|
||||||
|
onClick={(event) => {
|
||||||
|
onClick?.(event);
|
||||||
|
toggleSidebar();
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<PanelLeftIcon />
|
||||||
|
<span className="sr-only">Toggle Sidebar</span>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
|
||||||
|
const { toggleSidebar } = useSidebar();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
data-sidebar="rail"
|
||||||
|
data-slot="sidebar-rail"
|
||||||
|
aria-label="Toggle Sidebar"
|
||||||
|
tabIndex={-1}
|
||||||
|
onClick={toggleSidebar}
|
||||||
|
title="Toggle Sidebar"
|
||||||
|
className={cn(
|
||||||
|
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
|
||||||
|
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
||||||
|
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
||||||
|
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
|
||||||
|
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
||||||
|
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
|
||||||
|
return (
|
||||||
|
<main
|
||||||
|
data-slot="sidebar-inset"
|
||||||
|
className={cn(
|
||||||
|
"bg-background relative flex w-full flex-1 flex-col",
|
||||||
|
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarInput({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Input>) {
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
data-slot="sidebar-input"
|
||||||
|
data-sidebar="input"
|
||||||
|
className={cn("bg-background h-8 w-full shadow-none", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-header"
|
||||||
|
data-sidebar="header"
|
||||||
|
className={cn("flex flex-col gap-2 p-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-footer"
|
||||||
|
data-sidebar="footer"
|
||||||
|
className={cn("flex flex-col gap-2 p-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Separator>) {
|
||||||
|
return (
|
||||||
|
<Separator
|
||||||
|
data-slot="sidebar-separator"
|
||||||
|
data-sidebar="separator"
|
||||||
|
className={cn("bg-sidebar-border mx-2 w-auto", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-content"
|
||||||
|
data-sidebar="content"
|
||||||
|
className={cn(
|
||||||
|
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-group"
|
||||||
|
data-sidebar="group"
|
||||||
|
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarGroupLabel({
|
||||||
|
className,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : "div";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-group-label"
|
||||||
|
data-sidebar="group-label"
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarGroupAction({
|
||||||
|
className,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : "button";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-group-action"
|
||||||
|
data-sidebar="group-action"
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
// Increases the hit area of the button on mobile.
|
||||||
|
"after:absolute after:-inset-2 md:after:hidden",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarGroupContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-group-content"
|
||||||
|
data-sidebar="group-content"
|
||||||
|
className={cn("w-full text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
|
||||||
|
return (
|
||||||
|
<ul
|
||||||
|
data-slot="sidebar-menu"
|
||||||
|
data-sidebar="menu"
|
||||||
|
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
data-slot="sidebar-menu-item"
|
||||||
|
data-sidebar="menu-item"
|
||||||
|
className={cn("group/menu-item relative", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const sidebarMenuButtonVariants = cva(
|
||||||
|
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||||
|
outline:
|
||||||
|
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-8 text-sm",
|
||||||
|
sm: "h-7 text-xs",
|
||||||
|
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
function SidebarMenuButton({
|
||||||
|
asChild = false,
|
||||||
|
isActive = false,
|
||||||
|
variant = "default",
|
||||||
|
size = "default",
|
||||||
|
tooltip,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
isActive?: boolean;
|
||||||
|
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
||||||
|
} & VariantProps<typeof sidebarMenuButtonVariants>) {
|
||||||
|
const { isMobile } = useSidebar();
|
||||||
|
const Comp = asChild ? Slot : "button";
|
||||||
|
|
||||||
|
const button = (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-menu-button"
|
||||||
|
data-sidebar="menu-button"
|
||||||
|
data-size={size}
|
||||||
|
data-active={isActive}
|
||||||
|
className={cn(
|
||||||
|
sidebarMenuButtonVariants({ variant, size }),
|
||||||
|
isActive && "text-accent-foreground [&_svg]:text-accent-foreground",
|
||||||
|
isMobile && "min-h-[44px]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
// On mobile, we don't show tooltips
|
||||||
|
if (isMobile || !tooltip) {
|
||||||
|
return button;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Desktop experience with tooltips
|
||||||
|
if (typeof tooltip === "string") {
|
||||||
|
tooltip = {
|
||||||
|
children: tooltip,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
||||||
|
<TooltipContent
|
||||||
|
side="right"
|
||||||
|
align="center"
|
||||||
|
{...(typeof tooltip === "object" ? tooltip : {})}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuAction({
|
||||||
|
className,
|
||||||
|
asChild = false,
|
||||||
|
showOnHover = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
showOnHover?: boolean;
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "button";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-menu-action"
|
||||||
|
data-sidebar="menu-action"
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
// Increases the hit area of the button on mobile.
|
||||||
|
"after:absolute after:-inset-2 md:after:hidden",
|
||||||
|
"peer-data-[size=sm]/menu-button:top-1",
|
||||||
|
"peer-data-[size=default]/menu-button:top-1.5",
|
||||||
|
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
showOnHover &&
|
||||||
|
"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuBadge({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-menu-badge"
|
||||||
|
data-sidebar="menu-badge"
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
|
||||||
|
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
||||||
|
"peer-data-[size=sm]/menu-button:top-1",
|
||||||
|
"peer-data-[size=default]/menu-button:top-1.5",
|
||||||
|
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuSkeleton({
|
||||||
|
className,
|
||||||
|
showIcon = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
showIcon?: boolean;
|
||||||
|
}) {
|
||||||
|
// Random width between 50 to 90%.
|
||||||
|
const width = React.useMemo(() => {
|
||||||
|
return `${Math.floor(Math.random() * 40) + 50}%`;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-menu-skeleton"
|
||||||
|
data-sidebar="menu-skeleton"
|
||||||
|
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{showIcon && (
|
||||||
|
<Skeleton
|
||||||
|
className="size-4 rounded-md"
|
||||||
|
data-sidebar="menu-skeleton-icon"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<Skeleton
|
||||||
|
className="h-4 max-w-(--skeleton-width) flex-1"
|
||||||
|
data-sidebar="menu-skeleton-text"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--skeleton-width": width,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
|
||||||
|
return (
|
||||||
|
<ul
|
||||||
|
data-slot="sidebar-menu-sub"
|
||||||
|
data-sidebar="menu-sub"
|
||||||
|
className={cn(
|
||||||
|
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuSubItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"li">) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
data-slot="sidebar-menu-sub-item"
|
||||||
|
data-sidebar="menu-sub-item"
|
||||||
|
className={cn("group/menu-sub-item relative", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuSubButton({
|
||||||
|
asChild = false,
|
||||||
|
size = "md",
|
||||||
|
isActive = false,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"a"> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
size?: "sm" | "md";
|
||||||
|
isActive?: boolean;
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "a";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-menu-sub-button"
|
||||||
|
data-sidebar="menu-sub-button"
|
||||||
|
data-size={size}
|
||||||
|
data-active={isActive}
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
||||||
|
size === "sm" && "text-xs",
|
||||||
|
size === "md" && "text-sm",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Sidebar,
|
||||||
|
SidebarContent,
|
||||||
|
SidebarFooter,
|
||||||
|
SidebarGroup,
|
||||||
|
SidebarGroupAction,
|
||||||
|
SidebarGroupContent,
|
||||||
|
SidebarGroupLabel,
|
||||||
|
SidebarHeader,
|
||||||
|
SidebarInput,
|
||||||
|
SidebarInset,
|
||||||
|
SidebarMenu,
|
||||||
|
SidebarMenuAction,
|
||||||
|
SidebarMenuBadge,
|
||||||
|
SidebarMenuButton,
|
||||||
|
SidebarMenuItem,
|
||||||
|
SidebarMenuSkeleton,
|
||||||
|
SidebarMenuSub,
|
||||||
|
SidebarMenuSubButton,
|
||||||
|
SidebarMenuSubItem,
|
||||||
|
SidebarProvider,
|
||||||
|
SidebarRail,
|
||||||
|
SidebarSeparator,
|
||||||
|
SidebarTrigger,
|
||||||
|
useSidebar,
|
||||||
|
};
|
||||||
@@ -0,0 +1,154 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Button } from "@/shared/common/ui/button";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverTrigger,
|
||||||
|
PopoverContent,
|
||||||
|
} from "@/shared/common/ui/popover";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandInput,
|
||||||
|
CommandList,
|
||||||
|
CommandItem,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
} from "@/shared/common/ui/command";
|
||||||
|
import { CheckIcon, ChevronDown } from "lucide-react";
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
const normalizeSearchText = (value: string) =>
|
||||||
|
value.normalize("NFKC").toLocaleLowerCase().replace(/\s+/g, " ").trim();
|
||||||
|
|
||||||
|
interface SingleSelectProps {
|
||||||
|
options: { label: string; value: string }[];
|
||||||
|
value?: string;
|
||||||
|
placeholder?: string;
|
||||||
|
onValueChange: (value: string) => void;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SingleSelect = React.forwardRef<
|
||||||
|
HTMLButtonElement,
|
||||||
|
SingleSelectProps
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
options = [],
|
||||||
|
value,
|
||||||
|
placeholder = "Select an option",
|
||||||
|
onValueChange,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
|
const [isOpen, setIsOpen] = React.useState(false);
|
||||||
|
const [searchQuery, setSearchQuery] = React.useState("");
|
||||||
|
|
||||||
|
const normalizedQuery = normalizeSearchText(searchQuery);
|
||||||
|
const filteredOptions = options.filter((opt) =>
|
||||||
|
normalizeSearchText(opt.label).includes(normalizedQuery),
|
||||||
|
);
|
||||||
|
|
||||||
|
const selectedOption = options.find((o) => o.value === value);
|
||||||
|
|
||||||
|
const handleSelect = (val: string) => {
|
||||||
|
onValueChange(val);
|
||||||
|
setIsOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover open={isOpen} onOpenChange={setIsOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={cn(
|
||||||
|
"flex h-10 w-full min-w-0 max-w-full shrink items-center justify-between overflow-hidden rounded-md border border-gray-300 bg-white text-gray-900",
|
||||||
|
"px-3 py-2 text-sm font-normal shadow-sm transition-all duration-150",
|
||||||
|
"hover:bg-gray-50 hover:border-gray-400 focus:ring-2 focus:ring-primary-200 focus:border-primary-500",
|
||||||
|
"dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200",
|
||||||
|
"dark:hover:bg-gray-600 dark:hover:border-gray-500",
|
||||||
|
isOpen &&
|
||||||
|
"border-primary-500 ring-2 ring-primary-100 dark:ring-primary-900/40",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"block min-w-0 flex-1 truncate text-left",
|
||||||
|
selectedOption
|
||||||
|
? "font-medium text-gray-900 dark:text-gray-100"
|
||||||
|
: "font-normal text-gray-500 dark:text-gray-400",
|
||||||
|
)}
|
||||||
|
title={selectedOption ? selectedOption.label : undefined}
|
||||||
|
>
|
||||||
|
{selectedOption ? selectedOption.label : placeholder}
|
||||||
|
</span>
|
||||||
|
<ChevronDown
|
||||||
|
className={cn(
|
||||||
|
"ml-2 h-4 w-4 shrink-0 text-gray-500 transition-transform duration-200",
|
||||||
|
"dark:text-gray-400",
|
||||||
|
isOpen && "rotate-180",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
|
||||||
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] max-w-full p-0 border border-gray-200 rounded-lg shadow-lg bg-white dark:border-gray-600 dark:bg-gray-800"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
|
<Command shouldFilter={false}>
|
||||||
|
<CommandInput
|
||||||
|
placeholder="Search..."
|
||||||
|
value={searchQuery}
|
||||||
|
onValueChange={setSearchQuery}
|
||||||
|
className="text-sm dark:text-gray-200 dark:placeholder:text-gray-500"
|
||||||
|
/>
|
||||||
|
<CommandList
|
||||||
|
className="max-h-60 overflow-y-auto"
|
||||||
|
onWheel={(event) => event.stopPropagation()}
|
||||||
|
>
|
||||||
|
<CommandEmpty className="py-3 text-gray-500 text-sm text-center dark:text-gray-400">
|
||||||
|
No results found.
|
||||||
|
</CommandEmpty>
|
||||||
|
|
||||||
|
<CommandGroup>
|
||||||
|
{filteredOptions.map((opt) => (
|
||||||
|
<CommandItem
|
||||||
|
key={opt.value}
|
||||||
|
value={opt.label}
|
||||||
|
onSelect={() => handleSelect(opt.value)}
|
||||||
|
className={cn(
|
||||||
|
"cursor-pointer flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors duration-100",
|
||||||
|
|
||||||
|
"hover:bg-primary-50 hover:text-primary-700",
|
||||||
|
"focus:bg-primary-50",
|
||||||
|
|
||||||
|
"dark:hover:bg-primary-700 dark:focus:bg-primary-700 dark:text-gray-200",
|
||||||
|
|
||||||
|
// Remove cmdk's default active styling
|
||||||
|
"data-[selected=true]:text-inherit",
|
||||||
|
"data-[selected=true]:bg-transparent",
|
||||||
|
|
||||||
|
value === opt.value &&
|
||||||
|
"bg-primary-100 text-primary-700 font-medium dark:bg-primary-900/50 dark:text-primary-300",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className="min-w-0 flex-1 truncate">{opt.label}</span>
|
||||||
|
{value === opt.value && (
|
||||||
|
<CheckIcon className="h-4 w-4 shrink-0 text-primary-600" />
|
||||||
|
)}
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
SingleSelect.displayName = "SingleSelect";
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="skeleton"
|
||||||
|
className={cn("bg-primary/10 animate-pulse rounded-md", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Skeleton };
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import { useTheme } from "next-themes"
|
||||||
|
import { Toaster as Sonner, ToasterProps } from "sonner"
|
||||||
|
|
||||||
|
const Toaster = ({ ...props }: ToasterProps) => {
|
||||||
|
const { theme = "system" } = useTheme()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sonner
|
||||||
|
theme={theme as ToasterProps["theme"]}
|
||||||
|
className="toaster group"
|
||||||
|
toastOptions={{
|
||||||
|
classNames: {
|
||||||
|
toast:
|
||||||
|
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
||||||
|
description: "group-[.toast]:text-muted-foreground",
|
||||||
|
actionButton:
|
||||||
|
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground font-medium",
|
||||||
|
cancelButton:
|
||||||
|
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground font-medium",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Toaster }
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { VariantProps, cva } from "class-variance-authority";
|
||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
import Loader from "@/record-management/common/loader";
|
||||||
|
|
||||||
|
const spinnerVariants = cva("flex-col items-center justify-center", {
|
||||||
|
variants: {
|
||||||
|
show: {
|
||||||
|
true: "flex",
|
||||||
|
false: "hidden",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const loaderVariants = cva("animate-spin text-primary", {
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
small: "size-6",
|
||||||
|
medium: "size-8",
|
||||||
|
large: "size-12",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
size: "medium",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
interface SpinnerContentProps
|
||||||
|
extends VariantProps<typeof spinnerVariants>,
|
||||||
|
VariantProps<typeof loaderVariants> {
|
||||||
|
className?: string;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Spinner({
|
||||||
|
show,
|
||||||
|
children,
|
||||||
|
}: SpinnerContentProps) {
|
||||||
|
return (
|
||||||
|
<span className={spinnerVariants({ show })}>
|
||||||
|
<Loader />
|
||||||
|
{children}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,152 @@
|
|||||||
|
import React, { useState, useCallback } from "react";
|
||||||
|
import { Star } from "lucide-react";
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
export interface StarRatingProps {
|
||||||
|
value?: number;
|
||||||
|
onChange?: (rating: number) => void;
|
||||||
|
maxRating?: number;
|
||||||
|
size?: "sm" | "md" | "lg";
|
||||||
|
disabled?: boolean;
|
||||||
|
showLabels?: boolean;
|
||||||
|
className?: string;
|
||||||
|
labels?: string[];
|
||||||
|
language?: "am" | "en";
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultLabelsEn = ["Very Poor", "Poor", "Normal", "Good", "Excellent"];
|
||||||
|
const defaultLabelsAm = ["በጣም መጥፎ", "መጥፎ", "መካከለኛ", "ጥሩ", "በጣም ጥሩ"];
|
||||||
|
|
||||||
|
export const StarRating: React.FC<StarRatingProps> = ({
|
||||||
|
value = 0,
|
||||||
|
onChange,
|
||||||
|
maxRating = 5,
|
||||||
|
size = "md",
|
||||||
|
disabled = false,
|
||||||
|
showLabels = true,
|
||||||
|
className,
|
||||||
|
labels,
|
||||||
|
language = "en",
|
||||||
|
}) => {
|
||||||
|
// Use provided labels or default based on language
|
||||||
|
const ratingLabels =
|
||||||
|
labels || (language === "am" ? defaultLabelsAm : defaultLabelsEn);
|
||||||
|
const [hoverRating, setHoverRating] = useState(0);
|
||||||
|
const [isHovering, setIsHovering] = useState(false);
|
||||||
|
|
||||||
|
const sizeClasses = {
|
||||||
|
sm: "w-4 h-4",
|
||||||
|
md: "w-6 h-6",
|
||||||
|
lg: "w-8 h-8",
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleStarClick = useCallback(
|
||||||
|
(rating: number) => {
|
||||||
|
if (!disabled && onChange) {
|
||||||
|
// Use requestAnimationFrame to prevent vibration
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
onChange(rating);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[disabled, onChange]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleStarHover = useCallback(
|
||||||
|
(rating: number) => {
|
||||||
|
if (!disabled) {
|
||||||
|
if (!isHovering || rating !== hoverRating) {
|
||||||
|
setHoverRating(rating);
|
||||||
|
setIsHovering(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[disabled, isHovering, hoverRating]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleMouseLeave = useCallback(() => {
|
||||||
|
if (isHovering) {
|
||||||
|
setIsHovering(false);
|
||||||
|
setHoverRating(0);
|
||||||
|
}
|
||||||
|
}, [isHovering]);
|
||||||
|
|
||||||
|
const displayRating = isHovering ? hoverRating : value;
|
||||||
|
const currentLabel = ratingLabels[displayRating - 1] || "";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn("flex flex-col items-center gap-4", className)}
|
||||||
|
style={{
|
||||||
|
backfaceVisibility: "hidden",
|
||||||
|
transform: "translateZ(0)",
|
||||||
|
willChange: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-center gap-2"
|
||||||
|
onMouseLeave={handleMouseLeave}
|
||||||
|
style={{
|
||||||
|
backfaceVisibility: "hidden",
|
||||||
|
transform: "translateZ(0)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{Array.from({ length: maxRating }, (_, index) => {
|
||||||
|
const starRating = index + 1;
|
||||||
|
const isFilled = starRating <= displayRating;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
type="button"
|
||||||
|
className={cn(
|
||||||
|
"relative flex items-center justify-center transition-colors duration-150 ease-out focus:outline-none focus:ring-2 focus:ring-primary/20 rounded-lg p-2",
|
||||||
|
disabled
|
||||||
|
? "cursor-not-allowed opacity-50"
|
||||||
|
: "cursor-pointer hover:bg-yellow-50/30"
|
||||||
|
)}
|
||||||
|
onClick={() => handleStarClick(starRating)}
|
||||||
|
onMouseEnter={() => handleStarHover(starRating)}
|
||||||
|
disabled={disabled}
|
||||||
|
style={{
|
||||||
|
touchAction: "manipulation",
|
||||||
|
backfaceVisibility: "hidden",
|
||||||
|
transform: "translate3d(0, 0, 0)",
|
||||||
|
WebkitFontSmoothing: "antialiased",
|
||||||
|
minWidth: "3rem",
|
||||||
|
minHeight: "3rem",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Star
|
||||||
|
className={cn(
|
||||||
|
sizeClasses[size],
|
||||||
|
"transition-colors duration-150 ease-out",
|
||||||
|
isFilled
|
||||||
|
? "fill-yellow-400 text-yellow-400"
|
||||||
|
: "fill-transparent text-gray-300"
|
||||||
|
)}
|
||||||
|
style={{
|
||||||
|
backfaceVisibility: "hidden",
|
||||||
|
transform: "translate3d(0, 0, 0)",
|
||||||
|
WebkitFontSmoothing: "antialiased",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showLabels && (
|
||||||
|
<div className="text-center min-h-[2.5rem] flex items-center justify-center">
|
||||||
|
{displayRating > 0 && (
|
||||||
|
<div className="text-lg font-semibold text-gray-800 bg-yellow-50 px-4 py-2 rounded-full border border-yellow-200 transition-opacity duration-150">
|
||||||
|
{currentLabel}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default StarRating;
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
||||||
|
import { cn } from "@/super-admin/lib/utils";
|
||||||
|
|
||||||
|
function Switch({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<SwitchPrimitive.Root
|
||||||
|
data-slot="switch"
|
||||||
|
className={cn(
|
||||||
|
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SwitchPrimitive.Thumb
|
||||||
|
data-slot="switch-thumb"
|
||||||
|
className={cn(
|
||||||
|
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SwitchPrimitive.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Switch };
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
|
||||||
|
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="table-container"
|
||||||
|
className="relative w-full overflow-x-auto"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
data-slot="table"
|
||||||
|
className={cn("w-full caption-bottom text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
||||||
|
return (
|
||||||
|
<thead
|
||||||
|
data-slot="table-header"
|
||||||
|
className={cn("[&_tr]:border-b", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
||||||
|
return (
|
||||||
|
<tbody
|
||||||
|
data-slot="table-body"
|
||||||
|
className={cn("[&_tr:last-child]:border-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
||||||
|
return (
|
||||||
|
<tfoot
|
||||||
|
data-slot="table-footer"
|
||||||
|
className={cn(
|
||||||
|
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
||||||
|
return (
|
||||||
|
<tr
|
||||||
|
data-slot="table-row"
|
||||||
|
className={cn(
|
||||||
|
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
||||||
|
return (
|
||||||
|
<th
|
||||||
|
data-slot="table-head"
|
||||||
|
className={cn(
|
||||||
|
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
||||||
|
return (
|
||||||
|
<td
|
||||||
|
data-slot="table-cell"
|
||||||
|
className={cn(
|
||||||
|
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableCaption({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"caption">) {
|
||||||
|
return (
|
||||||
|
<caption
|
||||||
|
data-slot="table-caption"
|
||||||
|
className={cn("text-muted-foreground mt-4 text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Table,
|
||||||
|
TableHeader,
|
||||||
|
TableBody,
|
||||||
|
TableFooter,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
TableCell,
|
||||||
|
TableCaption,
|
||||||
|
};
|
||||||
@@ -0,0 +1,232 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import {
|
||||||
|
ColumnDef,
|
||||||
|
ColumnFiltersState,
|
||||||
|
SortingState,
|
||||||
|
VisibilityState,
|
||||||
|
flexRender,
|
||||||
|
getCoreRowModel,
|
||||||
|
getFacetedRowModel,
|
||||||
|
getFacetedUniqueValues,
|
||||||
|
getFilteredRowModel,
|
||||||
|
getSortedRowModel,
|
||||||
|
useReactTable,
|
||||||
|
} from "@tanstack/react-table";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/shared/common/ui/table";
|
||||||
|
|
||||||
|
import { DataTablePaginationFinal } from "./DataTablePaginationFinal";
|
||||||
|
import { DataTableToolbar } from "./DataTableToolbar";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { usePersistedColumnVisibility } from "@/shared/hooks/usePersistedColumnVisibility";
|
||||||
|
|
||||||
|
interface DataTableProps<TData, TValue> {
|
||||||
|
columns: ColumnDef<TData, TValue>[];
|
||||||
|
data: TData[];
|
||||||
|
tableName: string;
|
||||||
|
initialColumnVisibility?: VisibilityState;
|
||||||
|
extraToolbar?: React.ReactNode;
|
||||||
|
toolBarPosition?: "right" | "left" | "center";
|
||||||
|
isLoading?: boolean;
|
||||||
|
itemCount: number;
|
||||||
|
pageIndex: number; // <-- new
|
||||||
|
pageSize?: number; // <-- new
|
||||||
|
onPageChange: (pageIndex: number) => void; // <-- required
|
||||||
|
onPageSizeChange?: (size: number) => void; // <-- new
|
||||||
|
nextFunction: () => void;
|
||||||
|
prevFunction: () => void;
|
||||||
|
refresh?: () => void;
|
||||||
|
onGlobalFilterChange?: (value: string) => void;
|
||||||
|
/** Hide the toolbar's "Filter <tableName>..." text input. Use when the page
|
||||||
|
* already provides its own search/filter UI above the table. */
|
||||||
|
hideToolbarFilter?: boolean;
|
||||||
|
/** Disable client-side filtering when using server-side filtering */
|
||||||
|
disableClientFiltering?: boolean;
|
||||||
|
}
|
||||||
|
interface incomingHistory {
|
||||||
|
status: string;
|
||||||
|
record: { recordTypeKey: string };
|
||||||
|
id: string;
|
||||||
|
isUrgent?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AdvancedTable<TData, TValue>({
|
||||||
|
columns,
|
||||||
|
data,
|
||||||
|
tableName,
|
||||||
|
initialColumnVisibility,
|
||||||
|
extraToolbar,
|
||||||
|
toolBarPosition = "right",
|
||||||
|
isLoading = false,
|
||||||
|
itemCount,
|
||||||
|
onPageChange,
|
||||||
|
onPageSizeChange,
|
||||||
|
nextFunction,
|
||||||
|
prevFunction,
|
||||||
|
pageIndex,
|
||||||
|
pageSize = 10,
|
||||||
|
refresh,
|
||||||
|
onGlobalFilterChange,
|
||||||
|
hideToolbarFilter = false,
|
||||||
|
disableClientFiltering = false,
|
||||||
|
}: DataTableProps<TData, TValue>) {
|
||||||
|
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||||
|
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
const [columnVisibility, setColumnVisibility] = usePersistedColumnVisibility(
|
||||||
|
tableName,
|
||||||
|
{
|
||||||
|
letterName: false,
|
||||||
|
fileName: false,
|
||||||
|
...(initialColumnVisibility ?? {}),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
const [rowSelection, setRowSelection] = React.useState({});
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data,
|
||||||
|
columns,
|
||||||
|
pageCount: pageSize > 0 ? Math.ceil(itemCount / pageSize) : 1,
|
||||||
|
state: {
|
||||||
|
sorting,
|
||||||
|
columnVisibility,
|
||||||
|
rowSelection,
|
||||||
|
columnFilters,
|
||||||
|
pagination: {
|
||||||
|
pageIndex, // now controlled from props
|
||||||
|
pageSize,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
manualPagination: true,
|
||||||
|
enableRowSelection: true,
|
||||||
|
onRowSelectionChange: setRowSelection,
|
||||||
|
onSortingChange: setSorting,
|
||||||
|
onColumnFiltersChange: setColumnFilters,
|
||||||
|
onColumnVisibilityChange: setColumnVisibility,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
...(disableClientFiltering
|
||||||
|
? {}
|
||||||
|
: { getFilteredRowModel: getFilteredRowModel() }),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
getFacetedRowModel: getFacetedRowModel(),
|
||||||
|
getFacetedUniqueValues: getFacetedUniqueValues(),
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<DataTableToolbar
|
||||||
|
table={table}
|
||||||
|
tableName={tableName}
|
||||||
|
extraToolbar={extraToolbar}
|
||||||
|
toolBarPosition={toolBarPosition}
|
||||||
|
refreshTable={refresh}
|
||||||
|
onGlobalFilterChange={onGlobalFilterChange}
|
||||||
|
hideToolbarFilter={hideToolbarFilter}
|
||||||
|
disableClientFiltering={disableClientFiltering}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="rounded-md border dark:border-gray-700 bg-white dark:bg-gray-900 overflow-x-auto font-urbanist custom-scrollbar">
|
||||||
|
<Table className="w-full text-base text-gray-700 dark:text-gray-300 font-urbanist">
|
||||||
|
<TableHeader className="bg-gray-50 dark:bg-gray-800">
|
||||||
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
|
<TableRow key={headerGroup.id} className="dark:border-gray-700">
|
||||||
|
{headerGroup.headers.map((header) => (
|
||||||
|
<TableHead
|
||||||
|
key={header.id}
|
||||||
|
className="text-base text-gray-500 dark:text-gray-400 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
{header.isPlaceholder
|
||||||
|
? null
|
||||||
|
: flexRender(
|
||||||
|
header.column.columnDef.header,
|
||||||
|
header.getContext(),
|
||||||
|
)}
|
||||||
|
</TableHead>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableHeader>
|
||||||
|
|
||||||
|
<TableBody>
|
||||||
|
{isLoading ? (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell
|
||||||
|
colSpan={columns.length}
|
||||||
|
className="text-center py-6"
|
||||||
|
>
|
||||||
|
Loading...
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
) : table.getRowModel().rows?.length ? (
|
||||||
|
table.getRowModel().rows.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.id}
|
||||||
|
data-state={row.getIsSelected() && "selected"}
|
||||||
|
className={`
|
||||||
|
transition-colors duration-150
|
||||||
|
${
|
||||||
|
((row.original as incomingHistory).isUrgent === true &&
|
||||||
|
tableName === "Pending Records") ||
|
||||||
|
((row.original as any).action === "inprogress" &&
|
||||||
|
tableName === "My Approval Records")
|
||||||
|
? "bg-yellow-200 dark:bg-yellow-900/30 hover:bg-yellow-300 dark:hover:bg-yellow-900/50"
|
||||||
|
: "hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||||
|
}
|
||||||
|
${
|
||||||
|
(((row.original as any).signStatus === "draft" &&
|
||||||
|
tableName === "Collaborations") ||
|
||||||
|
tableName === "Pending Approval Tasks") &&
|
||||||
|
"bg-primary-50 dark:bg-primary-900/20 hover:bg-primary-100 dark:hover:bg-primary-900/30 font-semibold border-l-4 border-l-primary-500 dark:border-l-primary-400"
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{row.getVisibleCells().map((cell) => (
|
||||||
|
<TableCell key={cell.id} className="py-4">
|
||||||
|
<div className="max-h-[110px] max-w-[460px] overflow-y-auto overflow-x-auto scrollbar-hidden hover:cursor-pointer custom-scrollbar">
|
||||||
|
{flexRender(
|
||||||
|
cell.column.columnDef.cell,
|
||||||
|
cell.getContext(),
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell
|
||||||
|
colSpan={columns.length}
|
||||||
|
className="text-center py-6"
|
||||||
|
>
|
||||||
|
{t("common.noResult")}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
{itemCount > pageSize && (
|
||||||
|
<DataTablePaginationFinal
|
||||||
|
pageIndex={pageIndex}
|
||||||
|
pageSize={pageSize}
|
||||||
|
itemCount={itemCount}
|
||||||
|
onPageChange={onPageChange}
|
||||||
|
onPageSizeChange={onPageSizeChange}
|
||||||
|
nextFunction={nextFunction}
|
||||||
|
prevFunction={prevFunction}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,149 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Column } from "@tanstack/react-table";
|
||||||
|
|
||||||
|
import { cn } from "@/super-admin/lib/utils";
|
||||||
|
import { Badge } from "@/shared/common/ui/badge";
|
||||||
|
import { Button } from "@/shared/common/ui/button";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
CommandSeparator,
|
||||||
|
} from "@/shared/common/ui/command";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/shared/common/ui/popover";
|
||||||
|
import { Separator } from "@/shared/common/ui/separator";
|
||||||
|
import { CheckIcon, PlusCircle } from "lucide-react";
|
||||||
|
|
||||||
|
export type FilterOption = {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
icon?: React.ComponentType<{ className?: string }>;
|
||||||
|
};
|
||||||
|
|
||||||
|
interface DataTableFacetedFilter<TData, TValue> {
|
||||||
|
column?: Column<TData, TValue>;
|
||||||
|
title?: string;
|
||||||
|
options: FilterOption[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DataTableFacetedFilter<TData, TValue>({
|
||||||
|
column,
|
||||||
|
title,
|
||||||
|
options,
|
||||||
|
}: DataTableFacetedFilter<TData, TValue>) {
|
||||||
|
const facets = column?.getFacetedUniqueValues();
|
||||||
|
const selectedValues = new Set(column?.getFilterValue() as string[]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button variant="outline" size="sm" className="h-8 border-dashed">
|
||||||
|
<PlusCircle className="mr-2 h-4 w-4" />
|
||||||
|
{title}
|
||||||
|
{selectedValues?.size > 0 && (
|
||||||
|
<>
|
||||||
|
<Separator orientation="vertical" className="mx-2 h-4" />
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className="rounded-sm px-1 font-normal lg:hidden"
|
||||||
|
>
|
||||||
|
{selectedValues.size}
|
||||||
|
</Badge>
|
||||||
|
<div className="hidden space-x-1 lg:flex">
|
||||||
|
{selectedValues.size > 2 ? (
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className="rounded-sm px-1 font-normal"
|
||||||
|
>
|
||||||
|
{selectedValues.size} selected
|
||||||
|
</Badge>
|
||||||
|
) : (
|
||||||
|
options
|
||||||
|
.filter((option) => selectedValues.has(option.value))
|
||||||
|
.map((option) => (
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
key={option.value}
|
||||||
|
className="rounded-sm px-1 font-normal"
|
||||||
|
>
|
||||||
|
{option.label}
|
||||||
|
</Badge>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-[200px] p-0" align="start">
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder={title} />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>No results found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{options.map((option) => {
|
||||||
|
const isSelected = selectedValues.has(option.value);
|
||||||
|
return (
|
||||||
|
<CommandItem
|
||||||
|
key={option.value}
|
||||||
|
onSelect={() => {
|
||||||
|
if (isSelected) {
|
||||||
|
selectedValues.delete(option.value);
|
||||||
|
} else {
|
||||||
|
selectedValues.add(option.value);
|
||||||
|
}
|
||||||
|
const filterValues = Array.from(selectedValues);
|
||||||
|
column?.setFilterValue(
|
||||||
|
filterValues.length ? filterValues : undefined
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
|
||||||
|
isSelected
|
||||||
|
? "bg-primary text-primary-foreground"
|
||||||
|
: "opacity-50 [&_svg]:invisible"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CheckIcon className={cn("h-4 w-4")} />
|
||||||
|
</div>
|
||||||
|
{option.icon && (
|
||||||
|
<option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||||
|
)}
|
||||||
|
<span>{option.label}</span>
|
||||||
|
{facets?.get(option.value) && (
|
||||||
|
<span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
|
||||||
|
{facets.get(option.value)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</CommandItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</CommandGroup>
|
||||||
|
{selectedValues.size > 0 && (
|
||||||
|
<>
|
||||||
|
<CommandSeparator />
|
||||||
|
<CommandGroup>
|
||||||
|
<CommandItem
|
||||||
|
onSelect={() => column?.setFilterValue(undefined)}
|
||||||
|
className="justify-center text-center"
|
||||||
|
>
|
||||||
|
Clear filters
|
||||||
|
</CommandItem>
|
||||||
|
</CommandGroup>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,178 @@
|
|||||||
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
|
import { Button } from "@/shared/common/ui/button";
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { useMemo } from "react";
|
||||||
|
|
||||||
|
interface DataTablePaginationProps {
|
||||||
|
pageIndex: number; // current page index (0-based)
|
||||||
|
pageSize?: number; // items per page
|
||||||
|
itemCount: number; // total number of items
|
||||||
|
onPageChange: (page: number) => void;
|
||||||
|
nextFunction: () => void;
|
||||||
|
prevFunction: () => void;
|
||||||
|
/** Maximum number of numeric page buttons rendered before truncating with ellipsis. */
|
||||||
|
siblingCount?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ELLIPSIS = "…" as const;
|
||||||
|
|
||||||
|
type PageItem = number | typeof ELLIPSIS;
|
||||||
|
|
||||||
|
function buildPageItems(
|
||||||
|
currentPage: number,
|
||||||
|
totalPages: number,
|
||||||
|
siblingCount: number,
|
||||||
|
): PageItem[] {
|
||||||
|
// Always show first, last, current, and `siblingCount` pages around current.
|
||||||
|
// Insert ellipsis where there are gaps.
|
||||||
|
const totalNumbers = siblingCount * 2 + 5; // first + last + current + 2*siblings + 2 ellipses
|
||||||
|
|
||||||
|
if (totalPages <= totalNumbers) {
|
||||||
|
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const leftSibling = Math.max(currentPage - siblingCount, 2);
|
||||||
|
const rightSibling = Math.min(currentPage + siblingCount, totalPages - 1);
|
||||||
|
const showLeftEllipsis = leftSibling > 2;
|
||||||
|
const showRightEllipsis = rightSibling < totalPages - 1;
|
||||||
|
|
||||||
|
const items: PageItem[] = [1];
|
||||||
|
if (showLeftEllipsis) items.push(ELLIPSIS);
|
||||||
|
for (let i = leftSibling; i <= rightSibling; i++) items.push(i);
|
||||||
|
if (showRightEllipsis) items.push(ELLIPSIS);
|
||||||
|
items.push(totalPages);
|
||||||
|
return items;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DataTablePagination({
|
||||||
|
pageIndex,
|
||||||
|
pageSize = 10,
|
||||||
|
itemCount,
|
||||||
|
onPageChange,
|
||||||
|
nextFunction,
|
||||||
|
prevFunction,
|
||||||
|
siblingCount = 1,
|
||||||
|
}: DataTablePaginationProps) {
|
||||||
|
const totalPages = Math.max(1, Math.ceil(itemCount / pageSize));
|
||||||
|
const currentPage = pageIndex + 1; // 1-based for display
|
||||||
|
|
||||||
|
const canGoNext = pageIndex < totalPages - 1;
|
||||||
|
const canGoPrev = pageIndex > 0;
|
||||||
|
|
||||||
|
const pageItems = useMemo(
|
||||||
|
() => buildPageItems(currentPage, totalPages, siblingCount),
|
||||||
|
[currentPage, totalPages, siblingCount],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Edge case: hide entirely when there's nothing to paginate.
|
||||||
|
if (totalPages <= 1 || itemCount === 0) return null;
|
||||||
|
|
||||||
|
const handleNext = () => {
|
||||||
|
if (canGoNext) {
|
||||||
|
onPageChange(pageIndex + 1);
|
||||||
|
nextFunction();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePrev = () => {
|
||||||
|
if (canGoPrev) {
|
||||||
|
onPageChange(pageIndex - 1);
|
||||||
|
prevFunction();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const goToPage = (page: number) => {
|
||||||
|
const clamped = Math.min(Math.max(page, 1), totalPages);
|
||||||
|
if (clamped - 1 === pageIndex) return;
|
||||||
|
onPageChange(clamped - 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const rangeStart = pageIndex * pageSize + 1;
|
||||||
|
const rangeEnd = Math.min(rangeStart + pageSize - 1, itemCount);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav
|
||||||
|
role="navigation"
|
||||||
|
aria-label="Pagination"
|
||||||
|
className="flex flex-col gap-3 px-2 py-3 text-sm sm:flex-row sm:items-center sm:justify-between"
|
||||||
|
>
|
||||||
|
<p className="text-muted-foreground dark:text-gray-400">
|
||||||
|
Showing{" "}
|
||||||
|
<span className="font-medium text-gray-700 dark:text-gray-200">
|
||||||
|
{rangeStart}
|
||||||
|
</span>
|
||||||
|
{"–"}
|
||||||
|
<span className="font-medium text-gray-700 dark:text-gray-200">
|
||||||
|
{rangeEnd}
|
||||||
|
</span>{" "}
|
||||||
|
of{" "}
|
||||||
|
<span className="font-medium text-gray-700 dark:text-gray-200">
|
||||||
|
{itemCount}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap items-center justify-end gap-1">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={handlePrev}
|
||||||
|
disabled={!canGoPrev}
|
||||||
|
aria-label="Previous page"
|
||||||
|
className="h-8 gap-1 px-3 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-4 w-4" />
|
||||||
|
<span className="hidden sm:inline">Previous</span>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<ul className="flex items-center gap-1">
|
||||||
|
{pageItems.map((item, idx) => {
|
||||||
|
if (item === ELLIPSIS) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
key={`ellipsis-${idx}`}
|
||||||
|
aria-hidden="true"
|
||||||
|
className="flex h-8 w-8 items-center justify-center text-gray-400 dark:text-gray-500"
|
||||||
|
>
|
||||||
|
{ELLIPSIS}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const isActive = item === currentPage;
|
||||||
|
return (
|
||||||
|
<li key={item}>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant={isActive ? "default" : "ghost"}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => goToPage(item)}
|
||||||
|
aria-current={isActive ? "page" : undefined}
|
||||||
|
aria-label={`Go to page ${item}`}
|
||||||
|
className={cn(
|
||||||
|
"h-8 min-w-8 px-2 text-sm transition-colors",
|
||||||
|
isActive
|
||||||
|
? "bg-primary-100 text-primary-800 font-bold hover:bg-primary-200 dark:bg-primary-900 dark:text-primary-300 dark:hover:bg-primary-800"
|
||||||
|
: "font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleNext}
|
||||||
|
disabled={!canGoNext}
|
||||||
|
aria-label="Next page"
|
||||||
|
className="h-8 gap-1 px-3 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<span className="hidden sm:inline">Next</span>
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,260 @@
|
|||||||
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
|
import { Button } from "@/shared/common/ui/button";
|
||||||
|
import { cn } from "@/shared/lib/utils";
|
||||||
|
import { useMemo } from "react";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/shared/common/ui/select";
|
||||||
|
import { Table } from "@tanstack/react-table";
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
interface DataTablePaginationProps<TData = any> {
|
||||||
|
table?: Table<TData>;
|
||||||
|
pageIndex?: number;
|
||||||
|
pageSize?: number;
|
||||||
|
itemCount?: number;
|
||||||
|
onPageChange?: (page: number) => void;
|
||||||
|
onPageSizeChange?: (size: number) => void;
|
||||||
|
pageCount?: number;
|
||||||
|
nextFunction?: () => void;
|
||||||
|
prevFunction?: () => void;
|
||||||
|
/** Maximum number of numeric page buttons rendered before truncating with ellipsis. */
|
||||||
|
siblingCount?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ELLIPSIS = "…" as const;
|
||||||
|
|
||||||
|
type PageItem = number | typeof ELLIPSIS;
|
||||||
|
|
||||||
|
function buildPageItems(
|
||||||
|
currentPage: number,
|
||||||
|
totalPages: number,
|
||||||
|
siblingCount: number,
|
||||||
|
): PageItem[] {
|
||||||
|
const totalNumbers = siblingCount * 2 + 5;
|
||||||
|
|
||||||
|
if (totalPages <= totalNumbers) {
|
||||||
|
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const leftSibling = Math.max(currentPage - siblingCount, 2);
|
||||||
|
const rightSibling = Math.min(currentPage + siblingCount, totalPages - 1);
|
||||||
|
const showLeftEllipsis = leftSibling > 2;
|
||||||
|
const showRightEllipsis = rightSibling < totalPages - 1;
|
||||||
|
|
||||||
|
const items: PageItem[] = [1];
|
||||||
|
if (showLeftEllipsis) items.push(ELLIPSIS);
|
||||||
|
for (let i = leftSibling; i <= rightSibling; i++) items.push(i);
|
||||||
|
if (showRightEllipsis) items.push(ELLIPSIS);
|
||||||
|
items.push(totalPages);
|
||||||
|
return items;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DataTablePaginationFinal<TData>({
|
||||||
|
table,
|
||||||
|
pageIndex: pageIndexProp,
|
||||||
|
pageSize: pageSizeProp,
|
||||||
|
itemCount: itemCountProp,
|
||||||
|
onPageChange,
|
||||||
|
onPageSizeChange,
|
||||||
|
nextFunction,
|
||||||
|
prevFunction,
|
||||||
|
pageCount: pageCountProp,
|
||||||
|
siblingCount = 1,
|
||||||
|
}: DataTablePaginationProps<TData>) {
|
||||||
|
// Derive page size
|
||||||
|
const pageSize = table
|
||||||
|
? (table.getState().pagination?.pageSize ?? 10)
|
||||||
|
: (pageSizeProp ?? 10);
|
||||||
|
|
||||||
|
// Derive page index (0-based)
|
||||||
|
const pageIndex = table
|
||||||
|
? (table.getState().pagination?.pageIndex ?? 0)
|
||||||
|
: (pageIndexProp ?? 0);
|
||||||
|
|
||||||
|
// Derive total pages
|
||||||
|
const totalPages = table
|
||||||
|
? table.getPageCount()
|
||||||
|
: (pageCountProp ?? Math.max(1, Math.ceil((itemCountProp ?? 0) / pageSize)));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const currentPage = pageIndex + 1;
|
||||||
|
|
||||||
|
const canGoNext = table ? table.getCanNextPage() : pageIndex < totalPages - 1;
|
||||||
|
const canGoPrev = table ? table.getCanPreviousPage() : pageIndex > 0;
|
||||||
|
|
||||||
|
const pageItems = useMemo(
|
||||||
|
() => buildPageItems(currentPage, totalPages, siblingCount),
|
||||||
|
[currentPage, totalPages, siblingCount],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Safely determine if the table is completely empty
|
||||||
|
const isEmpty = table
|
||||||
|
? table.getCoreRowModel().rows.length === 0 && (!itemCountProp || itemCountProp === 0)
|
||||||
|
: (itemCountProp !== undefined && itemCountProp === 0);
|
||||||
|
|
||||||
|
if (isEmpty) return null;
|
||||||
|
|
||||||
|
// Hide pagination if there is at most 1 page and no way to change page size
|
||||||
|
const hasPageSizeSelector = !!table || !!onPageSizeChange;
|
||||||
|
if (totalPages <= 1 && !hasPageSizeSelector) return null;
|
||||||
|
|
||||||
|
const handleNext = () => {
|
||||||
|
if (canGoNext) {
|
||||||
|
if (table) {
|
||||||
|
table.nextPage();
|
||||||
|
} else {
|
||||||
|
onPageChange?.(pageIndex + 1);
|
||||||
|
}
|
||||||
|
nextFunction?.();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePrev = () => {
|
||||||
|
if (canGoPrev) {
|
||||||
|
if (table) {
|
||||||
|
table.previousPage();
|
||||||
|
} else {
|
||||||
|
onPageChange?.(pageIndex - 1);
|
||||||
|
}
|
||||||
|
prevFunction?.();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const goToPage = (page: number) => {
|
||||||
|
const clamped = Math.min(Math.max(page, 1), totalPages);
|
||||||
|
if (clamped - 1 === pageIndex) return;
|
||||||
|
if (table) {
|
||||||
|
table.setPageIndex(clamped - 1);
|
||||||
|
} else {
|
||||||
|
onPageChange?.(clamped - 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePageSizeChange = (size: number) => {
|
||||||
|
if (table) {
|
||||||
|
table.setPageSize(size);
|
||||||
|
} else {
|
||||||
|
onPageSizeChange?.(size);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const rangeStart = pageIndex * pageSize + 1;
|
||||||
|
const rangeEnd = Math.min(rangeStart + pageSize - 1, itemCountProp ?? 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav
|
||||||
|
role="navigation"
|
||||||
|
aria-label="Pagination"
|
||||||
|
className="flex flex-col gap-3 px-2 py-3 text-sm sm:flex-row sm:items-center sm:justify-between"
|
||||||
|
>
|
||||||
|
{hasPageSizeSelector ? (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<p className="text-xs sm:text-sm font-medium whitespace-nowrap">
|
||||||
|
Rows per page
|
||||||
|
</p>
|
||||||
|
<Select
|
||||||
|
value={`${pageSize}`}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
handlePageSizeChange(Number(value));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="h-9 sm:h-8 w-[70px] min-w-[70px] text-sm">
|
||||||
|
<SelectValue placeholder={pageSize} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent side="top">
|
||||||
|
{[10, 20, 30, 40, 50].map((size) => (
|
||||||
|
<SelectItem key={size} value={`${size}`}>
|
||||||
|
{size}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-xs sm:text-sm text-muted-foreground dark:text-gray-400">
|
||||||
|
Showing{" "}
|
||||||
|
<span className="font-medium text-gray-700 dark:text-gray-200">
|
||||||
|
{rangeStart}
|
||||||
|
</span>
|
||||||
|
{"–"}
|
||||||
|
<span className="font-medium text-gray-700 dark:text-gray-200">
|
||||||
|
{rangeEnd}
|
||||||
|
</span>{" "}
|
||||||
|
of{" "}
|
||||||
|
<span className="font-medium text-gray-700 dark:text-gray-200">
|
||||||
|
{itemCountProp}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex flex-wrap items-center justify-end gap-1">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={handlePrev}
|
||||||
|
disabled={!canGoPrev}
|
||||||
|
aria-label="Previous page"
|
||||||
|
className="h-8 gap-1 px-3 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-4 w-4" />
|
||||||
|
<span className="hidden sm:inline">Previous</span>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<ul className="flex items-center gap-1">
|
||||||
|
{pageItems.map((item, idx) => {
|
||||||
|
if (item === ELLIPSIS) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
key={`ellipsis-${idx}`}
|
||||||
|
aria-hidden="true"
|
||||||
|
className="flex h-8 w-8 items-center justify-center text-gray-400 dark:text-gray-500"
|
||||||
|
>
|
||||||
|
{ELLIPSIS}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const isActive = item === currentPage;
|
||||||
|
return (
|
||||||
|
<li key={item}>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant={isActive ? "default" : "ghost"}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => goToPage(item)}
|
||||||
|
aria-current={isActive ? "page" : undefined}
|
||||||
|
aria-label={`Go to page ${item}`}
|
||||||
|
className={cn(
|
||||||
|
"h-8 min-w-8 px-2 text-sm transition-colors",
|
||||||
|
isActive
|
||||||
|
? "bg-primary text-primary-foreground font-bold hover:bg-primary/90 dark:bg-primary dark:text-primary-foreground"
|
||||||
|
: "font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleNext}
|
||||||
|
disabled={!canGoNext}
|
||||||
|
aria-label="Next page"
|
||||||
|
className="h-8 gap-1 px-3 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<span className="hidden sm:inline">Next</span>
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import type { Table } from "@tanstack/react-table";
|
||||||
|
|
||||||
|
import { Button } from "@/shared/common/ui/button";
|
||||||
|
import { Input } from "@/shared/common/ui/input";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
import { RotateCcw, X } from "lucide-react";
|
||||||
|
|
||||||
|
import { ReactNode } from "react";
|
||||||
|
import { DataTableFacetedFilter } from "./DataTableFacetedFilter";
|
||||||
|
import { DataTableViewOptions } from "./DataTableViewOptions";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
export interface FilterConfig {
|
||||||
|
columnKey: string;
|
||||||
|
title: string;
|
||||||
|
options: { label: string; value: string }[];
|
||||||
|
isVisible?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DataTableToolbarProps<TData> {
|
||||||
|
table: Table<TData>;
|
||||||
|
tableName: string;
|
||||||
|
toolBarPosition?: "right" | "left" | "center";
|
||||||
|
extraToolbar?: ReactNode;
|
||||||
|
filters?: FilterConfig[];
|
||||||
|
refreshTable?: () => void;
|
||||||
|
onGlobalFilterChange?: (value: string) => void;
|
||||||
|
/** Hide the built-in "Filter <tableName>..." text input. Pages that own
|
||||||
|
* their own search/filter UI (e.g. outgoing/incoming/pending/userRecords)
|
||||||
|
* pass true so the toolbar doesn't show a redundant filter input. */
|
||||||
|
hideToolbarFilter?: boolean;
|
||||||
|
/** Disable client-side filtering when using server-side filtering */
|
||||||
|
disableClientFiltering?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DataTableToolbar<TData>({
|
||||||
|
table,
|
||||||
|
tableName,
|
||||||
|
toolBarPosition = "left",
|
||||||
|
extraToolbar,
|
||||||
|
filters = [],
|
||||||
|
refreshTable,
|
||||||
|
onGlobalFilterChange,
|
||||||
|
hideToolbarFilter = false,
|
||||||
|
disableClientFiltering = false,
|
||||||
|
}: DataTableToolbarProps<TData>) {
|
||||||
|
const isFiltered = table.getState().columnFilters.length > 0;
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||||||
|
{/* Filters Section */}
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
{!hideToolbarFilter && (
|
||||||
|
<Input
|
||||||
|
placeholder={`Filter ${tableName}...`}
|
||||||
|
onChange={(event) => {
|
||||||
|
const value = event.target.value;
|
||||||
|
if (!disableClientFiltering) {
|
||||||
|
table.setGlobalFilter(value);
|
||||||
|
}
|
||||||
|
onGlobalFilterChange?.(value);
|
||||||
|
}}
|
||||||
|
className="h-8 w-full sm:w-[150px] lg:w-[250px]"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{filters.map(
|
||||||
|
({ columnKey, title, options, isVisible = true }) =>
|
||||||
|
isVisible &&
|
||||||
|
table.getColumn(columnKey) && (
|
||||||
|
<DataTableFacetedFilter
|
||||||
|
key={columnKey}
|
||||||
|
column={table.getColumn(columnKey)}
|
||||||
|
title={title}
|
||||||
|
options={options}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isFiltered && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => table.resetColumnFilters()}
|
||||||
|
className="h-8 px-2 lg:px-3"
|
||||||
|
>
|
||||||
|
Reset
|
||||||
|
<X className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Extra Toolbar & View Options Section */}
|
||||||
|
<div
|
||||||
|
className={`flex flex-wrap items-center gap-2 ${
|
||||||
|
toolBarPosition === "center"
|
||||||
|
? "justify-center"
|
||||||
|
: toolBarPosition === "left"
|
||||||
|
? "justify-start"
|
||||||
|
: "justify-end"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{extraToolbar}
|
||||||
|
<DataTableViewOptions table={table} refreshTable={refreshTable} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user