@idds/js 1.0.97 → 1.0.98
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 +50 -0
- package/dist/index.js +50 -0
- package/package.json +1 -1
package/dist/index.iife.js
CHANGED
|
@@ -726,6 +726,14 @@ var InaUI = (() => {
|
|
|
726
726
|
this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
|
|
727
727
|
this.renderPanel();
|
|
728
728
|
};
|
|
729
|
+
prevBtn.onkeydown = (e) => {
|
|
730
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
731
|
+
e.preventDefault();
|
|
732
|
+
e.stopPropagation();
|
|
733
|
+
this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
|
|
734
|
+
this.renderPanel();
|
|
735
|
+
}
|
|
736
|
+
};
|
|
729
737
|
header.appendChild(prevBtn);
|
|
730
738
|
} else {
|
|
731
739
|
const spacer = document.createElement("div");
|
|
@@ -772,6 +780,14 @@ var InaUI = (() => {
|
|
|
772
780
|
this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
|
|
773
781
|
this.renderPanel();
|
|
774
782
|
};
|
|
783
|
+
nextBtn.onkeydown = (e) => {
|
|
784
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
785
|
+
e.preventDefault();
|
|
786
|
+
e.stopPropagation();
|
|
787
|
+
this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
|
|
788
|
+
this.renderPanel();
|
|
789
|
+
}
|
|
790
|
+
};
|
|
775
791
|
header.appendChild(nextBtn);
|
|
776
792
|
} else if (!isNextMonth) {
|
|
777
793
|
const spacer = document.createElement("div");
|
|
@@ -803,6 +819,8 @@ var InaUI = (() => {
|
|
|
803
819
|
btn.type = "button";
|
|
804
820
|
btn.className = `${PREFIX}-date-picker__day`;
|
|
805
821
|
btn.textContent = i;
|
|
822
|
+
btn.setAttribute("role", "gridcell");
|
|
823
|
+
btn.tabIndex = -1;
|
|
806
824
|
const disabled = this.isDateDisabled(date);
|
|
807
825
|
if (disabled) {
|
|
808
826
|
btn.classList.add(`${PREFIX}-date-picker__day--disabled`);
|
|
@@ -826,6 +844,7 @@ var InaUI = (() => {
|
|
|
826
844
|
isSelected = true;
|
|
827
845
|
if (start && end && date > start && date < end) isInRange = true;
|
|
828
846
|
}
|
|
847
|
+
btn.setAttribute("aria-selected", isSelected.toString());
|
|
829
848
|
if (isSelected) btn.classList.add(`${PREFIX}-date-picker__day--selected`);
|
|
830
849
|
if (isInRange) btn.classList.add(`${PREFIX}-date-picker__day--in-range`);
|
|
831
850
|
if (date.toDateString() === today.toDateString())
|
|
@@ -837,6 +856,24 @@ var InaUI = (() => {
|
|
|
837
856
|
e.stopPropagation();
|
|
838
857
|
this.handleDateSelect(date);
|
|
839
858
|
};
|
|
859
|
+
btn.onkeydown = (e) => {
|
|
860
|
+
if (disabled || this.options.readonly) return;
|
|
861
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
862
|
+
e.preventDefault();
|
|
863
|
+
this.handleDateSelect(date);
|
|
864
|
+
} else if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
|
|
865
|
+
e.preventDefault();
|
|
866
|
+
const buttons = Array.from(grid.querySelectorAll("button"));
|
|
867
|
+
const currentIndex = buttons.indexOf(btn);
|
|
868
|
+
let nextIndex = currentIndex;
|
|
869
|
+
if (e.key === "ArrowRight") nextIndex += 1;
|
|
870
|
+
else if (e.key === "ArrowLeft") nextIndex -= 1;
|
|
871
|
+
else if (e.key === "ArrowDown") nextIndex += 7;
|
|
872
|
+
else if (e.key === "ArrowUp") nextIndex -= 7;
|
|
873
|
+
const targetBtn = buttons[nextIndex];
|
|
874
|
+
if (targetBtn) targetBtn.focus();
|
|
875
|
+
}
|
|
876
|
+
};
|
|
840
877
|
}
|
|
841
878
|
grid.appendChild(btn);
|
|
842
879
|
}
|
|
@@ -849,6 +886,19 @@ var InaUI = (() => {
|
|
|
849
886
|
btn.textContent = i;
|
|
850
887
|
grid.appendChild(btn);
|
|
851
888
|
}
|
|
889
|
+
setTimeout(() => {
|
|
890
|
+
const allButtons = Array.from(
|
|
891
|
+
grid.querySelectorAll("button:not(.ina-date-picker__day--other-month)")
|
|
892
|
+
);
|
|
893
|
+
const selectedBtn = allButtons.find(
|
|
894
|
+
(b) => b.classList.contains(`${PREFIX}-date-picker__day--selected`)
|
|
895
|
+
);
|
|
896
|
+
const todayBtn = allButtons.find(
|
|
897
|
+
(b) => b.classList.contains(`${PREFIX}-date-picker__day--today`) && !b.disabled
|
|
898
|
+
);
|
|
899
|
+
const focusableBtn = selectedBtn || todayBtn || allButtons.find((b) => !b.disabled);
|
|
900
|
+
if (focusableBtn) focusableBtn.tabIndex = 0;
|
|
901
|
+
}, 0);
|
|
852
902
|
container.append(header, grid);
|
|
853
903
|
return container;
|
|
854
904
|
}
|
package/dist/index.js
CHANGED
|
@@ -716,6 +716,14 @@ var DatePicker = class {
|
|
|
716
716
|
this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
|
|
717
717
|
this.renderPanel();
|
|
718
718
|
};
|
|
719
|
+
prevBtn.onkeydown = (e) => {
|
|
720
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
721
|
+
e.preventDefault();
|
|
722
|
+
e.stopPropagation();
|
|
723
|
+
this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
|
|
724
|
+
this.renderPanel();
|
|
725
|
+
}
|
|
726
|
+
};
|
|
719
727
|
header.appendChild(prevBtn);
|
|
720
728
|
} else {
|
|
721
729
|
const spacer = document.createElement("div");
|
|
@@ -762,6 +770,14 @@ var DatePicker = class {
|
|
|
762
770
|
this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
|
|
763
771
|
this.renderPanel();
|
|
764
772
|
};
|
|
773
|
+
nextBtn.onkeydown = (e) => {
|
|
774
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
775
|
+
e.preventDefault();
|
|
776
|
+
e.stopPropagation();
|
|
777
|
+
this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
|
|
778
|
+
this.renderPanel();
|
|
779
|
+
}
|
|
780
|
+
};
|
|
765
781
|
header.appendChild(nextBtn);
|
|
766
782
|
} else if (!isNextMonth) {
|
|
767
783
|
const spacer = document.createElement("div");
|
|
@@ -793,6 +809,8 @@ var DatePicker = class {
|
|
|
793
809
|
btn.type = "button";
|
|
794
810
|
btn.className = `${PREFIX}-date-picker__day`;
|
|
795
811
|
btn.textContent = i;
|
|
812
|
+
btn.setAttribute("role", "gridcell");
|
|
813
|
+
btn.tabIndex = -1;
|
|
796
814
|
const disabled = this.isDateDisabled(date);
|
|
797
815
|
if (disabled) {
|
|
798
816
|
btn.classList.add(`${PREFIX}-date-picker__day--disabled`);
|
|
@@ -816,6 +834,7 @@ var DatePicker = class {
|
|
|
816
834
|
isSelected = true;
|
|
817
835
|
if (start && end && date > start && date < end) isInRange = true;
|
|
818
836
|
}
|
|
837
|
+
btn.setAttribute("aria-selected", isSelected.toString());
|
|
819
838
|
if (isSelected) btn.classList.add(`${PREFIX}-date-picker__day--selected`);
|
|
820
839
|
if (isInRange) btn.classList.add(`${PREFIX}-date-picker__day--in-range`);
|
|
821
840
|
if (date.toDateString() === today.toDateString())
|
|
@@ -827,6 +846,24 @@ var DatePicker = class {
|
|
|
827
846
|
e.stopPropagation();
|
|
828
847
|
this.handleDateSelect(date);
|
|
829
848
|
};
|
|
849
|
+
btn.onkeydown = (e) => {
|
|
850
|
+
if (disabled || this.options.readonly) return;
|
|
851
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
852
|
+
e.preventDefault();
|
|
853
|
+
this.handleDateSelect(date);
|
|
854
|
+
} else if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
|
|
855
|
+
e.preventDefault();
|
|
856
|
+
const buttons = Array.from(grid.querySelectorAll("button"));
|
|
857
|
+
const currentIndex = buttons.indexOf(btn);
|
|
858
|
+
let nextIndex = currentIndex;
|
|
859
|
+
if (e.key === "ArrowRight") nextIndex += 1;
|
|
860
|
+
else if (e.key === "ArrowLeft") nextIndex -= 1;
|
|
861
|
+
else if (e.key === "ArrowDown") nextIndex += 7;
|
|
862
|
+
else if (e.key === "ArrowUp") nextIndex -= 7;
|
|
863
|
+
const targetBtn = buttons[nextIndex];
|
|
864
|
+
if (targetBtn) targetBtn.focus();
|
|
865
|
+
}
|
|
866
|
+
};
|
|
830
867
|
}
|
|
831
868
|
grid.appendChild(btn);
|
|
832
869
|
}
|
|
@@ -839,6 +876,19 @@ var DatePicker = class {
|
|
|
839
876
|
btn.textContent = i;
|
|
840
877
|
grid.appendChild(btn);
|
|
841
878
|
}
|
|
879
|
+
setTimeout(() => {
|
|
880
|
+
const allButtons = Array.from(
|
|
881
|
+
grid.querySelectorAll("button:not(.ina-date-picker__day--other-month)")
|
|
882
|
+
);
|
|
883
|
+
const selectedBtn = allButtons.find(
|
|
884
|
+
(b) => b.classList.contains(`${PREFIX}-date-picker__day--selected`)
|
|
885
|
+
);
|
|
886
|
+
const todayBtn = allButtons.find(
|
|
887
|
+
(b) => b.classList.contains(`${PREFIX}-date-picker__day--today`) && !b.disabled
|
|
888
|
+
);
|
|
889
|
+
const focusableBtn = selectedBtn || todayBtn || allButtons.find((b) => !b.disabled);
|
|
890
|
+
if (focusableBtn) focusableBtn.tabIndex = 0;
|
|
891
|
+
}, 0);
|
|
842
892
|
container.append(header, grid);
|
|
843
893
|
return container;
|
|
844
894
|
}
|