@idds/js 1.0.39 → 1.0.41

package/dist/index.iife.js

@@ -133,7 +133,14 @@ var InaUI = (() => {
       if (!panelContent) {
         panelContent = document.createElement("div");
         panelContent.className = "ina-date-picker__panel-content";
+        if (mode === "range" || mode === "multiple") {
+          panelContent.classList.add("ina-date-picker__panel-content--dual");
+        }
         panel.appendChild(panelContent);
+      } else {
+        if (mode === "range" || mode === "multiple") {
+          panelContent.classList.add("ina-date-picker__panel-content--dual");
+        }
       }
       let viewDate = /* @__PURE__ */ new Date();
       let selectedDate = null;
@@ -257,7 +264,6 @@ var InaUI = (() => {
             btn.classList.add("ina-month-picker__month-option--selected");
           btn.textContent = m;
           btn.addEventListener("click", (e) => {
-            e.stopPropagation();
             currentMonthIdx = idx;
             updateText();
             togglePicker(false);
@@ -268,7 +274,6 @@ var InaUI = (() => {
         pickerPanel.appendChild(grid);
         container.append(pickerTrigger, pickerPanel);
         pickerTrigger.addEventListener("click", (e) => {
-          e.stopPropagation();
           togglePicker(!isPickerOpen);
         });
         function togglePicker(show) {
@@ -314,7 +319,6 @@ var InaUI = (() => {
         prevBtn.className = "ina-year-picker__nav-button";
         prevBtn.innerHTML = createIcon("chevron-left");
         prevBtn.onclick = (e) => {
-          e.stopPropagation();
           decadeStart -= 20;
           renderGrid();
         };
@@ -323,7 +327,6 @@ var InaUI = (() => {
         nextBtn.className = "ina-year-picker__nav-button";
         nextBtn.innerHTML = createIcon("chevron-right");
         nextBtn.onclick = (e) => {
-          e.stopPropagation();
           decadeStart += 20;
           renderGrid();
         };
@@ -343,7 +346,6 @@ var InaUI = (() => {
               btn.classList.add("ina-year-picker__year-option--selected");
             btn.textContent = y;
             btn.addEventListener("click", (e) => {
-              e.stopPropagation();
               currentYearVal = y;
               updateText();
               togglePicker(false);
@@ -355,7 +357,6 @@ var InaUI = (() => {
         pickerPanel.append(header, grid);
         container.append(pickerTrigger, pickerPanel);
         pickerTrigger.addEventListener("click", (e) => {
-          e.stopPropagation();
           togglePicker(!isPickerOpen);
         });
         function togglePicker(show) {
@@ -396,7 +397,6 @@ var InaUI = (() => {
           prevBtn.className = "ina-date-picker__nav-button";
           prevBtn.innerHTML = createIcon("chevron-left");
           prevBtn.onclick = (e) => {
-            e.stopPropagation();
             viewDate.setMonth(viewDate.getMonth() - 1);
             render();
           };
@@ -406,31 +406,33 @@ var InaUI = (() => {
           spacer.style.width = "32px";
           header.appendChild(spacer);
         }
-        if (!isNextMonth) {
-          const controls = document.createElement("div");
-          controls.className = "ina-date-picker__header-controls";
-          const monthCont = document.createElement("div");
-          monthCont.className = "ina-date-picker__dropdown-container";
-          const monthPicker = createMonthPicker(month, (m) => {
+        const controls = document.createElement("div");
+        controls.className = isNextMonth ? "ina-date-picker__next-month-controls" : "ina-date-picker__header-controls";
+        controls.className = "ina-date-picker__header-controls";
+        const monthCont = document.createElement("div");
+        monthCont.className = "ina-date-picker__dropdown-container";
+        const monthPicker = createMonthPicker(month, (m) => {
+          if (isNextMonth) {
+            viewDate = new Date(year, m - 1, 1);
+          } else {
             viewDate.setMonth(m);
-            render();
-          });
-          monthCont.appendChild(monthPicker.element);
-          const yearCont = document.createElement("div");
-          yearCont.className = "ina-date-picker__dropdown-container";
-          const yearPicker = createYearPicker(year, (y) => {
+          }
+          render();
+        });
+        monthCont.appendChild(monthPicker.element);
+        const yearCont = document.createElement("div");
+        yearCont.className = "ina-date-picker__dropdown-container";
+        const yearPicker = createYearPicker(year, (y) => {
+          if (isNextMonth) {
+            viewDate = new Date(y, month - 1, 1);
+          } else {
             viewDate.setFullYear(y);
-            render();
-          });
-          yearCont.appendChild(yearPicker.element);
-          controls.append(monthCont, yearCont);
-          header.appendChild(controls);
-        } else {
-          const title = document.createElement("div");
-          title.className = "ina-date-picker__calendar-title";
-          title.textContent = `${MONTHS_ID[month]} ${year}`;
-          header.appendChild(title);
-        }
+          }
+          render();
+        });
+        yearCont.appendChild(yearPicker.element);
+        controls.append(monthCont, yearCont);
+        header.appendChild(controls);
         const showNextBtn = mode === "single" && !isNextMonth || isNextMonth;
         if (showNextBtn) {
           const nextBtn = document.createElement("button");
@@ -438,7 +440,6 @@ var InaUI = (() => {
           nextBtn.className = "ina-date-picker__nav-button";
           nextBtn.innerHTML = createIcon("chevron-right");
           nextBtn.onclick = (e) => {
-            e.stopPropagation();
             viewDate.setMonth(viewDate.getMonth() + 1);
             render();
           };
@@ -496,7 +497,6 @@ var InaUI = (() => {
           if (!isSelected && !isInRange)
             btn.classList.add("ina-date-picker__day--hover");
           btn.onclick = (e) => {
-            e.stopPropagation();
             if (mode === "single") {
               selectedDate = date;
               close();
@@ -574,7 +574,6 @@ var InaUI = (() => {
         else open();
       }
       trigger.addEventListener("click", (e) => {
-        e.stopPropagation();
         toggle();
       });
       document.addEventListener("click", (e) => {

package/dist/index.js

@@ -121,7 +121,14 @@ function initDatepicker() {
     if (!panelContent) {
       panelContent = document.createElement("div");
       panelContent.className = "ina-date-picker__panel-content";
+      if (mode === "range" || mode === "multiple") {
+        panelContent.classList.add("ina-date-picker__panel-content--dual");
+      }
       panel.appendChild(panelContent);
+    } else {
+      if (mode === "range" || mode === "multiple") {
+        panelContent.classList.add("ina-date-picker__panel-content--dual");
+      }
     }
     let viewDate = /* @__PURE__ */ new Date();
     let selectedDate = null;
@@ -245,7 +252,6 @@ function initDatepicker() {
           btn.classList.add("ina-month-picker__month-option--selected");
         btn.textContent = m;
         btn.addEventListener("click", (e) => {
-          e.stopPropagation();
           currentMonthIdx = idx;
           updateText();
           togglePicker(false);
@@ -256,7 +262,6 @@ function initDatepicker() {
       pickerPanel.appendChild(grid);
       container.append(pickerTrigger, pickerPanel);
       pickerTrigger.addEventListener("click", (e) => {
-        e.stopPropagation();
         togglePicker(!isPickerOpen);
       });
       function togglePicker(show) {
@@ -302,7 +307,6 @@ function initDatepicker() {
       prevBtn.className = "ina-year-picker__nav-button";
       prevBtn.innerHTML = createIcon("chevron-left");
       prevBtn.onclick = (e) => {
-        e.stopPropagation();
         decadeStart -= 20;
         renderGrid();
       };
@@ -311,7 +315,6 @@ function initDatepicker() {
       nextBtn.className = "ina-year-picker__nav-button";
       nextBtn.innerHTML = createIcon("chevron-right");
       nextBtn.onclick = (e) => {
-        e.stopPropagation();
         decadeStart += 20;
         renderGrid();
       };
@@ -331,7 +334,6 @@ function initDatepicker() {
             btn.classList.add("ina-year-picker__year-option--selected");
           btn.textContent = y;
           btn.addEventListener("click", (e) => {
-            e.stopPropagation();
             currentYearVal = y;
             updateText();
             togglePicker(false);
@@ -343,7 +345,6 @@ function initDatepicker() {
       pickerPanel.append(header, grid);
       container.append(pickerTrigger, pickerPanel);
       pickerTrigger.addEventListener("click", (e) => {
-        e.stopPropagation();
         togglePicker(!isPickerOpen);
       });
       function togglePicker(show) {
@@ -384,7 +385,6 @@ function initDatepicker() {
         prevBtn.className = "ina-date-picker__nav-button";
         prevBtn.innerHTML = createIcon("chevron-left");
         prevBtn.onclick = (e) => {
-          e.stopPropagation();
           viewDate.setMonth(viewDate.getMonth() - 1);
           render();
         };
@@ -394,31 +394,33 @@ function initDatepicker() {
         spacer.style.width = "32px";
         header.appendChild(spacer);
       }
-      if (!isNextMonth) {
-        const controls = document.createElement("div");
-        controls.className = "ina-date-picker__header-controls";
-        const monthCont = document.createElement("div");
-        monthCont.className = "ina-date-picker__dropdown-container";
-        const monthPicker = createMonthPicker(month, (m) => {
+      const controls = document.createElement("div");
+      controls.className = isNextMonth ? "ina-date-picker__next-month-controls" : "ina-date-picker__header-controls";
+      controls.className = "ina-date-picker__header-controls";
+      const monthCont = document.createElement("div");
+      monthCont.className = "ina-date-picker__dropdown-container";
+      const monthPicker = createMonthPicker(month, (m) => {
+        if (isNextMonth) {
+          viewDate = new Date(year, m - 1, 1);
+        } else {
           viewDate.setMonth(m);
-          render();
-        });
-        monthCont.appendChild(monthPicker.element);
-        const yearCont = document.createElement("div");
-        yearCont.className = "ina-date-picker__dropdown-container";
-        const yearPicker = createYearPicker(year, (y) => {
+        }
+        render();
+      });
+      monthCont.appendChild(monthPicker.element);
+      const yearCont = document.createElement("div");
+      yearCont.className = "ina-date-picker__dropdown-container";
+      const yearPicker = createYearPicker(year, (y) => {
+        if (isNextMonth) {
+          viewDate = new Date(y, month - 1, 1);
+        } else {
           viewDate.setFullYear(y);
-          render();
-        });
-        yearCont.appendChild(yearPicker.element);
-        controls.append(monthCont, yearCont);
-        header.appendChild(controls);
-      } else {
-        const title = document.createElement("div");
-        title.className = "ina-date-picker__calendar-title";
-        title.textContent = `${MONTHS_ID[month]} ${year}`;
-        header.appendChild(title);
-      }
+        }
+        render();
+      });
+      yearCont.appendChild(yearPicker.element);
+      controls.append(monthCont, yearCont);
+      header.appendChild(controls);
       const showNextBtn = mode === "single" && !isNextMonth || isNextMonth;
       if (showNextBtn) {
         const nextBtn = document.createElement("button");
@@ -426,7 +428,6 @@ function initDatepicker() {
         nextBtn.className = "ina-date-picker__nav-button";
         nextBtn.innerHTML = createIcon("chevron-right");
         nextBtn.onclick = (e) => {
-          e.stopPropagation();
           viewDate.setMonth(viewDate.getMonth() + 1);
           render();
         };
@@ -484,7 +485,6 @@ function initDatepicker() {
         if (!isSelected && !isInRange)
           btn.classList.add("ina-date-picker__day--hover");
         btn.onclick = (e) => {
-          e.stopPropagation();
           if (mode === "single") {
             selectedDate = date;
             close();
@@ -562,7 +562,6 @@ function initDatepicker() {
       else open();
     }
     trigger.addEventListener("click", (e) => {
-      e.stopPropagation();
       toggle();
     });
     document.addEventListener("click", (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/js",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "publishConfig": {
     "access": "public"
   },