@idds/js 1.2.3 → 1.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.iife.js +146 -73
- package/dist/index.js +146 -73
- package/package.json +1 -1
package/dist/index.iife.js
CHANGED
|
@@ -409,6 +409,11 @@ var InaUI = (() => {
|
|
|
409
409
|
};
|
|
410
410
|
this.state = {
|
|
411
411
|
viewDate: /* @__PURE__ */ new Date(),
|
|
412
|
+
nextViewDate: (() => {
|
|
413
|
+
const next = /* @__PURE__ */ new Date();
|
|
414
|
+
next.setMonth(next.getMonth() + 1);
|
|
415
|
+
return next;
|
|
416
|
+
})(),
|
|
412
417
|
selectedDate: null,
|
|
413
418
|
selectedDates: [],
|
|
414
419
|
rangeDate: [null, null],
|
|
@@ -461,7 +466,7 @@ var InaUI = (() => {
|
|
|
461
466
|
}
|
|
462
467
|
return false;
|
|
463
468
|
}
|
|
464
|
-
createIcon(name, size =
|
|
469
|
+
createIcon(name, size = 20) {
|
|
465
470
|
if (name === "chevron-left")
|
|
466
471
|
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6l6 6" /></svg>`;
|
|
467
472
|
if (name === "chevron-right")
|
|
@@ -470,6 +475,90 @@ var InaUI = (() => {
|
|
|
470
475
|
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`;
|
|
471
476
|
return "";
|
|
472
477
|
}
|
|
478
|
+
isLeftGreaterThanRight(leftDate, rightDate) {
|
|
479
|
+
const leftYear = leftDate.getFullYear();
|
|
480
|
+
const leftMonth = leftDate.getMonth();
|
|
481
|
+
const rightYear = rightDate.getFullYear();
|
|
482
|
+
const rightMonth = rightDate.getMonth();
|
|
483
|
+
return leftYear > rightYear || leftYear === rightYear && leftMonth >= rightMonth;
|
|
484
|
+
}
|
|
485
|
+
navigateMonth(isNextMonth, direction) {
|
|
486
|
+
const { mode } = this.options;
|
|
487
|
+
if (isNextMonth) {
|
|
488
|
+
const newDate = new Date(this.state.nextViewDate);
|
|
489
|
+
if (direction === "prev") {
|
|
490
|
+
newDate.setMonth(newDate.getMonth() - 1);
|
|
491
|
+
} else {
|
|
492
|
+
newDate.setMonth(newDate.getMonth() + 1);
|
|
493
|
+
}
|
|
494
|
+
if (mode !== "single" && this.isLeftGreaterThanRight(this.state.viewDate, newDate)) {
|
|
495
|
+
const adjustedLeft = new Date(newDate);
|
|
496
|
+
adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
|
|
497
|
+
this.state.viewDate = adjustedLeft;
|
|
498
|
+
}
|
|
499
|
+
this.state.nextViewDate = newDate;
|
|
500
|
+
} else {
|
|
501
|
+
const newDate = new Date(this.state.viewDate);
|
|
502
|
+
if (direction === "prev") {
|
|
503
|
+
newDate.setMonth(newDate.getMonth() - 1);
|
|
504
|
+
} else {
|
|
505
|
+
newDate.setMonth(newDate.getMonth() + 1);
|
|
506
|
+
}
|
|
507
|
+
if (mode !== "single" && this.isLeftGreaterThanRight(newDate, this.state.nextViewDate)) {
|
|
508
|
+
const adjustedRight = new Date(newDate);
|
|
509
|
+
adjustedRight.setMonth(adjustedRight.getMonth() + 1);
|
|
510
|
+
this.state.nextViewDate = adjustedRight;
|
|
511
|
+
}
|
|
512
|
+
this.state.viewDate = newDate;
|
|
513
|
+
}
|
|
514
|
+
this.renderPanel();
|
|
515
|
+
}
|
|
516
|
+
setMonthExact(isNextMonth, m) {
|
|
517
|
+
const { mode } = this.options;
|
|
518
|
+
if (isNextMonth) {
|
|
519
|
+
const newDate = new Date(this.state.nextViewDate);
|
|
520
|
+
newDate.setMonth(m);
|
|
521
|
+
if (mode !== "single" && this.isLeftGreaterThanRight(this.state.viewDate, newDate)) {
|
|
522
|
+
const adjustedLeft = new Date(newDate);
|
|
523
|
+
adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
|
|
524
|
+
this.state.viewDate = adjustedLeft;
|
|
525
|
+
}
|
|
526
|
+
this.state.nextViewDate = newDate;
|
|
527
|
+
} else {
|
|
528
|
+
const newDate = new Date(this.state.viewDate);
|
|
529
|
+
newDate.setMonth(m);
|
|
530
|
+
if (mode !== "single" && this.isLeftGreaterThanRight(newDate, this.state.nextViewDate)) {
|
|
531
|
+
const adjustedRight = new Date(newDate);
|
|
532
|
+
adjustedRight.setMonth(adjustedRight.getMonth() + 1);
|
|
533
|
+
this.state.nextViewDate = adjustedRight;
|
|
534
|
+
}
|
|
535
|
+
this.state.viewDate = newDate;
|
|
536
|
+
}
|
|
537
|
+
this.renderPanel();
|
|
538
|
+
}
|
|
539
|
+
setYearExact(isNextMonth, y) {
|
|
540
|
+
const { mode } = this.options;
|
|
541
|
+
if (isNextMonth) {
|
|
542
|
+
const newDate = new Date(this.state.nextViewDate);
|
|
543
|
+
newDate.setFullYear(y);
|
|
544
|
+
if (mode !== "single" && this.isLeftGreaterThanRight(this.state.viewDate, newDate)) {
|
|
545
|
+
const adjustedLeft = new Date(newDate);
|
|
546
|
+
adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
|
|
547
|
+
this.state.viewDate = adjustedLeft;
|
|
548
|
+
}
|
|
549
|
+
this.state.nextViewDate = newDate;
|
|
550
|
+
} else {
|
|
551
|
+
const newDate = new Date(this.state.viewDate);
|
|
552
|
+
newDate.setFullYear(y);
|
|
553
|
+
if (mode !== "single" && this.isLeftGreaterThanRight(newDate, this.state.nextViewDate)) {
|
|
554
|
+
const adjustedRight = new Date(newDate);
|
|
555
|
+
adjustedRight.setMonth(adjustedRight.getMonth() + 1);
|
|
556
|
+
this.state.nextViewDate = adjustedRight;
|
|
557
|
+
}
|
|
558
|
+
this.state.viewDate = newDate;
|
|
559
|
+
}
|
|
560
|
+
this.renderPanel();
|
|
561
|
+
}
|
|
473
562
|
initDOM() {
|
|
474
563
|
if (!this.container.classList.contains(`${PREFIX}-date-picker`)) {
|
|
475
564
|
this.container.classList.add(`${PREFIX}-date-picker`);
|
|
@@ -735,84 +824,57 @@ var InaUI = (() => {
|
|
|
735
824
|
container.className = !isNextMonth ? `${PREFIX}-date-picker__calendar-container` : `${PREFIX}-date-picker__calendar`;
|
|
736
825
|
const header = document.createElement("div");
|
|
737
826
|
header.className = isNextMonth ? `${PREFIX}-date-picker__next-month-header` : `${PREFIX}-date-picker__calendar-header`;
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
827
|
+
const prevBtn = document.createElement("button");
|
|
828
|
+
prevBtn.type = "button";
|
|
829
|
+
prevBtn.className = `${PREFIX}-date-picker__nav-button`;
|
|
830
|
+
prevBtn.innerHTML = this.createIcon("chevron-left");
|
|
831
|
+
prevBtn.onclick = (e) => {
|
|
832
|
+
e.stopPropagation();
|
|
833
|
+
this.navigateMonth(isNextMonth, "prev");
|
|
834
|
+
};
|
|
835
|
+
prevBtn.onkeydown = (e) => {
|
|
836
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
837
|
+
e.preventDefault();
|
|
744
838
|
e.stopPropagation();
|
|
745
|
-
this.
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
if (e.key === "Enter" || e.key === " ") {
|
|
750
|
-
e.preventDefault();
|
|
751
|
-
e.stopPropagation();
|
|
752
|
-
this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
|
|
753
|
-
this.renderPanel();
|
|
754
|
-
}
|
|
755
|
-
};
|
|
756
|
-
header.appendChild(prevBtn);
|
|
757
|
-
} else {
|
|
758
|
-
const spacer = document.createElement("div");
|
|
759
|
-
spacer.style.width = "32px";
|
|
760
|
-
header.appendChild(spacer);
|
|
761
|
-
}
|
|
839
|
+
this.navigateMonth(isNextMonth, "prev");
|
|
840
|
+
}
|
|
841
|
+
};
|
|
842
|
+
header.appendChild(prevBtn);
|
|
762
843
|
const controls = document.createElement("div");
|
|
763
844
|
controls.className = `${PREFIX}-date-picker__header-controls`;
|
|
764
845
|
const monthCont = document.createElement("div");
|
|
765
846
|
monthCont.className = `${PREFIX}-date-picker__dropdown-container`;
|
|
766
847
|
const monthPicker = this.createMonthPicker(month, (m) => {
|
|
767
|
-
|
|
768
|
-
this.state.viewDate = new Date(year, m - 1, 1);
|
|
769
|
-
} else {
|
|
770
|
-
this.state.viewDate.setMonth(m);
|
|
771
|
-
}
|
|
772
|
-
this.renderPanel();
|
|
848
|
+
this.setMonthExact(isNextMonth, m);
|
|
773
849
|
});
|
|
774
850
|
monthCont.appendChild(monthPicker.element);
|
|
775
851
|
const yearCont = document.createElement("div");
|
|
776
852
|
yearCont.className = `${PREFIX}-date-picker__dropdown-container`;
|
|
777
853
|
const yearPicker = this.createYearPicker(year, (y) => {
|
|
778
|
-
|
|
779
|
-
this.state.viewDate = new Date(y, month - 1, 1);
|
|
780
|
-
} else {
|
|
781
|
-
this.state.viewDate.setFullYear(y);
|
|
782
|
-
}
|
|
783
|
-
this.renderPanel();
|
|
854
|
+
this.setYearExact(isNextMonth, y);
|
|
784
855
|
});
|
|
785
856
|
yearCont.appendChild(yearPicker.element);
|
|
786
857
|
controls.append(monthCont, yearCont);
|
|
787
858
|
header.appendChild(controls);
|
|
788
|
-
const
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
nextBtn.
|
|
793
|
-
if (!isNextMonth && (mode === "range" || mode === "multiple")) {
|
|
794
|
-
nextBtn.classList.add(`${PREFIX}-date-picker__nav-button--mobile-only`);
|
|
795
|
-
}
|
|
796
|
-
nextBtn.innerHTML = this.createIcon("chevron-right");
|
|
797
|
-
nextBtn.onclick = (e) => {
|
|
798
|
-
e.stopPropagation();
|
|
799
|
-
this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
|
|
800
|
-
this.renderPanel();
|
|
801
|
-
};
|
|
802
|
-
nextBtn.onkeydown = (e) => {
|
|
803
|
-
if (e.key === "Enter" || e.key === " ") {
|
|
804
|
-
e.preventDefault();
|
|
805
|
-
e.stopPropagation();
|
|
806
|
-
this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
|
|
807
|
-
this.renderPanel();
|
|
808
|
-
}
|
|
809
|
-
};
|
|
810
|
-
header.appendChild(nextBtn);
|
|
811
|
-
} else if (!isNextMonth) {
|
|
812
|
-
const spacer = document.createElement("div");
|
|
813
|
-
spacer.style.width = "32px";
|
|
814
|
-
header.appendChild(spacer);
|
|
859
|
+
const nextBtn = document.createElement("button");
|
|
860
|
+
nextBtn.type = "button";
|
|
861
|
+
nextBtn.className = `${PREFIX}-date-picker__nav-button`;
|
|
862
|
+
if (!isNextMonth && (mode === "range" || mode === "multiple")) {
|
|
863
|
+
nextBtn.classList.add(`${PREFIX}-date-picker__nav-button--mobile-only`);
|
|
815
864
|
}
|
|
865
|
+
nextBtn.innerHTML = this.createIcon("chevron-right");
|
|
866
|
+
nextBtn.onclick = (e) => {
|
|
867
|
+
e.stopPropagation();
|
|
868
|
+
this.navigateMonth(isNextMonth, "next");
|
|
869
|
+
};
|
|
870
|
+
nextBtn.onkeydown = (e) => {
|
|
871
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
872
|
+
e.preventDefault();
|
|
873
|
+
e.stopPropagation();
|
|
874
|
+
this.navigateMonth(isNextMonth, "next");
|
|
875
|
+
}
|
|
876
|
+
};
|
|
877
|
+
header.appendChild(nextBtn);
|
|
816
878
|
const grid = document.createElement("div");
|
|
817
879
|
grid.className = `${PREFIX}-date-picker__calendar-grid`;
|
|
818
880
|
this.DAYS_SHORT.forEach((d) => {
|
|
@@ -954,12 +1016,7 @@ var InaUI = (() => {
|
|
|
954
1016
|
const cal1 = this.renderCalendarGrid(this.state.viewDate);
|
|
955
1017
|
this.elements.panelContent.appendChild(cal1);
|
|
956
1018
|
if (this.options.mode === "range" || this.options.mode === "multiple") {
|
|
957
|
-
const
|
|
958
|
-
this.state.viewDate.getFullYear(),
|
|
959
|
-
this.state.viewDate.getMonth() + 1,
|
|
960
|
-
1
|
|
961
|
-
);
|
|
962
|
-
const cal2 = this.renderCalendarGrid(nextMonthDate, true);
|
|
1019
|
+
const cal2 = this.renderCalendarGrid(this.state.nextViewDate, true);
|
|
963
1020
|
this.elements.panelContent.appendChild(cal2);
|
|
964
1021
|
}
|
|
965
1022
|
}
|
|
@@ -3043,13 +3100,29 @@ var InaUI = (() => {
|
|
|
3043
3100
|
);
|
|
3044
3101
|
if (!input) {
|
|
3045
3102
|
customFieldContainer.innerHTML = `
|
|
3046
|
-
<div class="${PREFIX4}-
|
|
3047
|
-
<
|
|
3048
|
-
|
|
3049
|
-
|
|
3103
|
+
<div class="${PREFIX4}-chip__input-wrapper">
|
|
3104
|
+
<input type="text" class="${PREFIX4}-chip__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? primaryCustomValue : ""}" />
|
|
3105
|
+
<button type="button" class="${PREFIX4}-chip__clear-button" aria-label="Clear input" style="display: ${!isStandard && primaryCustomValue ? "inline-flex" : "none"};">
|
|
3106
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${PREFIX4}-chip__clear-icon">
|
|
3107
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
3108
|
+
<path d="M18 6l-12 12"></path>
|
|
3109
|
+
<path d="M6 6l12 12"></path>
|
|
3110
|
+
</svg>
|
|
3111
|
+
</button>
|
|
3050
3112
|
</div>
|
|
3051
3113
|
`;
|
|
3052
3114
|
input = customFieldContainer.querySelector("input");
|
|
3115
|
+
const clearBtn = customFieldContainer.querySelector(
|
|
3116
|
+
".ina-chip__clear-button"
|
|
3117
|
+
);
|
|
3118
|
+
input.addEventListener("input", (e) => {
|
|
3119
|
+
clearBtn.style.display = e.target.value ? "inline-flex" : "none";
|
|
3120
|
+
});
|
|
3121
|
+
clearBtn.addEventListener("click", () => {
|
|
3122
|
+
input.value = "";
|
|
3123
|
+
clearBtn.style.display = "none";
|
|
3124
|
+
commitCustomValue(input);
|
|
3125
|
+
});
|
|
3053
3126
|
input.addEventListener("blur", (e) => {
|
|
3054
3127
|
commitCustomValue(e.target);
|
|
3055
3128
|
});
|
package/dist/index.js
CHANGED
|
@@ -423,6 +423,11 @@ var DatePicker = class {
|
|
|
423
423
|
};
|
|
424
424
|
this.state = {
|
|
425
425
|
viewDate: /* @__PURE__ */ new Date(),
|
|
426
|
+
nextViewDate: (() => {
|
|
427
|
+
const next = /* @__PURE__ */ new Date();
|
|
428
|
+
next.setMonth(next.getMonth() + 1);
|
|
429
|
+
return next;
|
|
430
|
+
})(),
|
|
426
431
|
selectedDate: null,
|
|
427
432
|
selectedDates: [],
|
|
428
433
|
rangeDate: [null, null],
|
|
@@ -475,7 +480,7 @@ var DatePicker = class {
|
|
|
475
480
|
}
|
|
476
481
|
return false;
|
|
477
482
|
}
|
|
478
|
-
createIcon(name, size =
|
|
483
|
+
createIcon(name, size = 20) {
|
|
479
484
|
if (name === "chevron-left")
|
|
480
485
|
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6l6 6" /></svg>`;
|
|
481
486
|
if (name === "chevron-right")
|
|
@@ -484,6 +489,90 @@ var DatePicker = class {
|
|
|
484
489
|
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`;
|
|
485
490
|
return "";
|
|
486
491
|
}
|
|
492
|
+
isLeftGreaterThanRight(leftDate, rightDate) {
|
|
493
|
+
const leftYear = leftDate.getFullYear();
|
|
494
|
+
const leftMonth = leftDate.getMonth();
|
|
495
|
+
const rightYear = rightDate.getFullYear();
|
|
496
|
+
const rightMonth = rightDate.getMonth();
|
|
497
|
+
return leftYear > rightYear || leftYear === rightYear && leftMonth >= rightMonth;
|
|
498
|
+
}
|
|
499
|
+
navigateMonth(isNextMonth, direction) {
|
|
500
|
+
const { mode } = this.options;
|
|
501
|
+
if (isNextMonth) {
|
|
502
|
+
const newDate = new Date(this.state.nextViewDate);
|
|
503
|
+
if (direction === "prev") {
|
|
504
|
+
newDate.setMonth(newDate.getMonth() - 1);
|
|
505
|
+
} else {
|
|
506
|
+
newDate.setMonth(newDate.getMonth() + 1);
|
|
507
|
+
}
|
|
508
|
+
if (mode !== "single" && this.isLeftGreaterThanRight(this.state.viewDate, newDate)) {
|
|
509
|
+
const adjustedLeft = new Date(newDate);
|
|
510
|
+
adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
|
|
511
|
+
this.state.viewDate = adjustedLeft;
|
|
512
|
+
}
|
|
513
|
+
this.state.nextViewDate = newDate;
|
|
514
|
+
} else {
|
|
515
|
+
const newDate = new Date(this.state.viewDate);
|
|
516
|
+
if (direction === "prev") {
|
|
517
|
+
newDate.setMonth(newDate.getMonth() - 1);
|
|
518
|
+
} else {
|
|
519
|
+
newDate.setMonth(newDate.getMonth() + 1);
|
|
520
|
+
}
|
|
521
|
+
if (mode !== "single" && this.isLeftGreaterThanRight(newDate, this.state.nextViewDate)) {
|
|
522
|
+
const adjustedRight = new Date(newDate);
|
|
523
|
+
adjustedRight.setMonth(adjustedRight.getMonth() + 1);
|
|
524
|
+
this.state.nextViewDate = adjustedRight;
|
|
525
|
+
}
|
|
526
|
+
this.state.viewDate = newDate;
|
|
527
|
+
}
|
|
528
|
+
this.renderPanel();
|
|
529
|
+
}
|
|
530
|
+
setMonthExact(isNextMonth, m) {
|
|
531
|
+
const { mode } = this.options;
|
|
532
|
+
if (isNextMonth) {
|
|
533
|
+
const newDate = new Date(this.state.nextViewDate);
|
|
534
|
+
newDate.setMonth(m);
|
|
535
|
+
if (mode !== "single" && this.isLeftGreaterThanRight(this.state.viewDate, newDate)) {
|
|
536
|
+
const adjustedLeft = new Date(newDate);
|
|
537
|
+
adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
|
|
538
|
+
this.state.viewDate = adjustedLeft;
|
|
539
|
+
}
|
|
540
|
+
this.state.nextViewDate = newDate;
|
|
541
|
+
} else {
|
|
542
|
+
const newDate = new Date(this.state.viewDate);
|
|
543
|
+
newDate.setMonth(m);
|
|
544
|
+
if (mode !== "single" && this.isLeftGreaterThanRight(newDate, this.state.nextViewDate)) {
|
|
545
|
+
const adjustedRight = new Date(newDate);
|
|
546
|
+
adjustedRight.setMonth(adjustedRight.getMonth() + 1);
|
|
547
|
+
this.state.nextViewDate = adjustedRight;
|
|
548
|
+
}
|
|
549
|
+
this.state.viewDate = newDate;
|
|
550
|
+
}
|
|
551
|
+
this.renderPanel();
|
|
552
|
+
}
|
|
553
|
+
setYearExact(isNextMonth, y) {
|
|
554
|
+
const { mode } = this.options;
|
|
555
|
+
if (isNextMonth) {
|
|
556
|
+
const newDate = new Date(this.state.nextViewDate);
|
|
557
|
+
newDate.setFullYear(y);
|
|
558
|
+
if (mode !== "single" && this.isLeftGreaterThanRight(this.state.viewDate, newDate)) {
|
|
559
|
+
const adjustedLeft = new Date(newDate);
|
|
560
|
+
adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
|
|
561
|
+
this.state.viewDate = adjustedLeft;
|
|
562
|
+
}
|
|
563
|
+
this.state.nextViewDate = newDate;
|
|
564
|
+
} else {
|
|
565
|
+
const newDate = new Date(this.state.viewDate);
|
|
566
|
+
newDate.setFullYear(y);
|
|
567
|
+
if (mode !== "single" && this.isLeftGreaterThanRight(newDate, this.state.nextViewDate)) {
|
|
568
|
+
const adjustedRight = new Date(newDate);
|
|
569
|
+
adjustedRight.setMonth(adjustedRight.getMonth() + 1);
|
|
570
|
+
this.state.nextViewDate = adjustedRight;
|
|
571
|
+
}
|
|
572
|
+
this.state.viewDate = newDate;
|
|
573
|
+
}
|
|
574
|
+
this.renderPanel();
|
|
575
|
+
}
|
|
487
576
|
initDOM() {
|
|
488
577
|
if (!this.container.classList.contains(`${PREFIX}-date-picker`)) {
|
|
489
578
|
this.container.classList.add(`${PREFIX}-date-picker`);
|
|
@@ -749,84 +838,57 @@ var DatePicker = class {
|
|
|
749
838
|
container.className = !isNextMonth ? `${PREFIX}-date-picker__calendar-container` : `${PREFIX}-date-picker__calendar`;
|
|
750
839
|
const header = document.createElement("div");
|
|
751
840
|
header.className = isNextMonth ? `${PREFIX}-date-picker__next-month-header` : `${PREFIX}-date-picker__calendar-header`;
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
841
|
+
const prevBtn = document.createElement("button");
|
|
842
|
+
prevBtn.type = "button";
|
|
843
|
+
prevBtn.className = `${PREFIX}-date-picker__nav-button`;
|
|
844
|
+
prevBtn.innerHTML = this.createIcon("chevron-left");
|
|
845
|
+
prevBtn.onclick = (e) => {
|
|
846
|
+
e.stopPropagation();
|
|
847
|
+
this.navigateMonth(isNextMonth, "prev");
|
|
848
|
+
};
|
|
849
|
+
prevBtn.onkeydown = (e) => {
|
|
850
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
851
|
+
e.preventDefault();
|
|
758
852
|
e.stopPropagation();
|
|
759
|
-
this.
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
if (e.key === "Enter" || e.key === " ") {
|
|
764
|
-
e.preventDefault();
|
|
765
|
-
e.stopPropagation();
|
|
766
|
-
this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
|
|
767
|
-
this.renderPanel();
|
|
768
|
-
}
|
|
769
|
-
};
|
|
770
|
-
header.appendChild(prevBtn);
|
|
771
|
-
} else {
|
|
772
|
-
const spacer = document.createElement("div");
|
|
773
|
-
spacer.style.width = "32px";
|
|
774
|
-
header.appendChild(spacer);
|
|
775
|
-
}
|
|
853
|
+
this.navigateMonth(isNextMonth, "prev");
|
|
854
|
+
}
|
|
855
|
+
};
|
|
856
|
+
header.appendChild(prevBtn);
|
|
776
857
|
const controls = document.createElement("div");
|
|
777
858
|
controls.className = `${PREFIX}-date-picker__header-controls`;
|
|
778
859
|
const monthCont = document.createElement("div");
|
|
779
860
|
monthCont.className = `${PREFIX}-date-picker__dropdown-container`;
|
|
780
861
|
const monthPicker = this.createMonthPicker(month, (m) => {
|
|
781
|
-
|
|
782
|
-
this.state.viewDate = new Date(year, m - 1, 1);
|
|
783
|
-
} else {
|
|
784
|
-
this.state.viewDate.setMonth(m);
|
|
785
|
-
}
|
|
786
|
-
this.renderPanel();
|
|
862
|
+
this.setMonthExact(isNextMonth, m);
|
|
787
863
|
});
|
|
788
864
|
monthCont.appendChild(monthPicker.element);
|
|
789
865
|
const yearCont = document.createElement("div");
|
|
790
866
|
yearCont.className = `${PREFIX}-date-picker__dropdown-container`;
|
|
791
867
|
const yearPicker = this.createYearPicker(year, (y) => {
|
|
792
|
-
|
|
793
|
-
this.state.viewDate = new Date(y, month - 1, 1);
|
|
794
|
-
} else {
|
|
795
|
-
this.state.viewDate.setFullYear(y);
|
|
796
|
-
}
|
|
797
|
-
this.renderPanel();
|
|
868
|
+
this.setYearExact(isNextMonth, y);
|
|
798
869
|
});
|
|
799
870
|
yearCont.appendChild(yearPicker.element);
|
|
800
871
|
controls.append(monthCont, yearCont);
|
|
801
872
|
header.appendChild(controls);
|
|
802
|
-
const
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
nextBtn.
|
|
807
|
-
if (!isNextMonth && (mode === "range" || mode === "multiple")) {
|
|
808
|
-
nextBtn.classList.add(`${PREFIX}-date-picker__nav-button--mobile-only`);
|
|
809
|
-
}
|
|
810
|
-
nextBtn.innerHTML = this.createIcon("chevron-right");
|
|
811
|
-
nextBtn.onclick = (e) => {
|
|
812
|
-
e.stopPropagation();
|
|
813
|
-
this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
|
|
814
|
-
this.renderPanel();
|
|
815
|
-
};
|
|
816
|
-
nextBtn.onkeydown = (e) => {
|
|
817
|
-
if (e.key === "Enter" || e.key === " ") {
|
|
818
|
-
e.preventDefault();
|
|
819
|
-
e.stopPropagation();
|
|
820
|
-
this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
|
|
821
|
-
this.renderPanel();
|
|
822
|
-
}
|
|
823
|
-
};
|
|
824
|
-
header.appendChild(nextBtn);
|
|
825
|
-
} else if (!isNextMonth) {
|
|
826
|
-
const spacer = document.createElement("div");
|
|
827
|
-
spacer.style.width = "32px";
|
|
828
|
-
header.appendChild(spacer);
|
|
873
|
+
const nextBtn = document.createElement("button");
|
|
874
|
+
nextBtn.type = "button";
|
|
875
|
+
nextBtn.className = `${PREFIX}-date-picker__nav-button`;
|
|
876
|
+
if (!isNextMonth && (mode === "range" || mode === "multiple")) {
|
|
877
|
+
nextBtn.classList.add(`${PREFIX}-date-picker__nav-button--mobile-only`);
|
|
829
878
|
}
|
|
879
|
+
nextBtn.innerHTML = this.createIcon("chevron-right");
|
|
880
|
+
nextBtn.onclick = (e) => {
|
|
881
|
+
e.stopPropagation();
|
|
882
|
+
this.navigateMonth(isNextMonth, "next");
|
|
883
|
+
};
|
|
884
|
+
nextBtn.onkeydown = (e) => {
|
|
885
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
886
|
+
e.preventDefault();
|
|
887
|
+
e.stopPropagation();
|
|
888
|
+
this.navigateMonth(isNextMonth, "next");
|
|
889
|
+
}
|
|
890
|
+
};
|
|
891
|
+
header.appendChild(nextBtn);
|
|
830
892
|
const grid = document.createElement("div");
|
|
831
893
|
grid.className = `${PREFIX}-date-picker__calendar-grid`;
|
|
832
894
|
this.DAYS_SHORT.forEach((d) => {
|
|
@@ -968,12 +1030,7 @@ var DatePicker = class {
|
|
|
968
1030
|
const cal1 = this.renderCalendarGrid(this.state.viewDate);
|
|
969
1031
|
this.elements.panelContent.appendChild(cal1);
|
|
970
1032
|
if (this.options.mode === "range" || this.options.mode === "multiple") {
|
|
971
|
-
const
|
|
972
|
-
this.state.viewDate.getFullYear(),
|
|
973
|
-
this.state.viewDate.getMonth() + 1,
|
|
974
|
-
1
|
|
975
|
-
);
|
|
976
|
-
const cal2 = this.renderCalendarGrid(nextMonthDate, true);
|
|
1033
|
+
const cal2 = this.renderCalendarGrid(this.state.nextViewDate, true);
|
|
977
1034
|
this.elements.panelContent.appendChild(cal2);
|
|
978
1035
|
}
|
|
979
1036
|
}
|
|
@@ -3149,13 +3206,29 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
|
|
|
3149
3206
|
);
|
|
3150
3207
|
if (!input) {
|
|
3151
3208
|
customFieldContainer.innerHTML = `
|
|
3152
|
-
<div class="${PREFIX5}-
|
|
3153
|
-
<
|
|
3154
|
-
|
|
3155
|
-
|
|
3209
|
+
<div class="${PREFIX5}-chip__input-wrapper">
|
|
3210
|
+
<input type="text" class="${PREFIX5}-chip__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? primaryCustomValue : ""}" />
|
|
3211
|
+
<button type="button" class="${PREFIX5}-chip__clear-button" aria-label="Clear input" style="display: ${!isStandard && primaryCustomValue ? "inline-flex" : "none"};">
|
|
3212
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${PREFIX5}-chip__clear-icon">
|
|
3213
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
3214
|
+
<path d="M18 6l-12 12"></path>
|
|
3215
|
+
<path d="M6 6l12 12"></path>
|
|
3216
|
+
</svg>
|
|
3217
|
+
</button>
|
|
3156
3218
|
</div>
|
|
3157
3219
|
`;
|
|
3158
3220
|
input = customFieldContainer.querySelector("input");
|
|
3221
|
+
const clearBtn = customFieldContainer.querySelector(
|
|
3222
|
+
".ina-chip__clear-button"
|
|
3223
|
+
);
|
|
3224
|
+
input.addEventListener("input", (e) => {
|
|
3225
|
+
clearBtn.style.display = e.target.value ? "inline-flex" : "none";
|
|
3226
|
+
});
|
|
3227
|
+
clearBtn.addEventListener("click", () => {
|
|
3228
|
+
input.value = "";
|
|
3229
|
+
clearBtn.style.display = "none";
|
|
3230
|
+
commitCustomValue(input);
|
|
3231
|
+
});
|
|
3159
3232
|
input.addEventListener("blur", (e) => {
|
|
3160
3233
|
commitCustomValue(e.target);
|
|
3161
3234
|
});
|