@idds/js 1.0.69 → 1.0.71

package/dist/index.iife.js

@@ -36,6 +36,7 @@ var InaUI = (() => {
     initRangeDatepicker: () => initRangeDatepicker,
     initSelectDropdown: () => initSelectDropdown,
     initSingleFileUpload: () => initSingleFileUpload,
+    initStepper: () => initStepper,
     initTab: () => initTab,
     initTimepicker: () => initTimepicker,
     initToggle: () => initToggle,
@@ -1024,6 +1025,129 @@ var InaUI = (() => {
     });
   }
 
+  // src/js/components/stateful/stepper.js
+  function initStepper() {
+    const steppers = document.querySelectorAll(`.${PREFIX}-stepper`);
+    steppers.forEach((stepper) => {
+      if (stepper.dataset.initialized === "true") return;
+      stepper.dataset.initialized = "true";
+      const stepperId = stepper.id;
+      const items = stepper.querySelectorAll(`.${PREFIX}-stepper__item`);
+      const separators = stepper.querySelectorAll(
+        `.${PREFIX}-stepper__separator`
+      );
+      const totalSteps = items.length;
+      let currentStep = parseInt(stepper.dataset.currentStep || "0", 10);
+      const nextBtns = document.querySelectorAll(
+        `[data-stepper-next="${stepperId}"]`
+      );
+      const prevBtns = document.querySelectorAll(
+        `[data-stepper-prev="${stepperId}"]`
+      );
+      const displayTargetId = stepper.dataset.displayTarget;
+      const displayTarget = displayTargetId ? document.getElementById(displayTargetId) : null;
+      const checkIcon = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="${PREFIX}-stepper__check-icon"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        stroke-width="2.5"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M5 12l5 5l10 -10" />
+      </svg>
+    `;
+      const updateUI = () => {
+        stepper.dataset.currentStep = currentStep;
+        items.forEach((item, index) => {
+          const iconWrapper = item.querySelector(
+            `.${PREFIX}-stepper__icon-wrapper`
+          );
+          const itemNumber = index + 1;
+          item.classList.remove(
+            `${PREFIX}-stepper__item--completed`,
+            `${PREFIX}-stepper__item--active`
+          );
+          if (iconWrapper) iconWrapper.innerHTML = "";
+          if (index < currentStep) {
+            item.classList.add(`${PREFIX}-stepper__item--completed`);
+            if (iconWrapper) iconWrapper.innerHTML = checkIcon;
+          } else if (index === currentStep) {
+            item.classList.add(`${PREFIX}-stepper__item--active`);
+            if (iconWrapper)
+              iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
+          } else {
+            if (iconWrapper)
+              iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
+          }
+        });
+        separators.forEach((separator, index) => {
+          if (index < currentStep) {
+            separator.classList.add(`${PREFIX}-stepper__separator--completed`);
+          } else {
+            separator.classList.remove(`${PREFIX}-stepper__separator--completed`);
+          }
+        });
+        prevBtns.forEach((btn) => {
+          if (currentStep === 0) {
+            btn.setAttribute("disabled", "true");
+          } else {
+            btn.removeAttribute("disabled");
+          }
+        });
+        nextBtns.forEach((btn) => {
+          if (currentStep === totalSteps - 1) {
+            btn.setAttribute("disabled", "true");
+          } else {
+            btn.removeAttribute("disabled");
+          }
+        });
+        if (displayTarget) {
+          displayTarget.textContent = `Current Step: ${currentStep + 1}`;
+        }
+        stepper.dispatchEvent(
+          new CustomEvent("stepper:change", {
+            bubbles: true,
+            detail: { currentStep, totalSteps }
+          })
+        );
+      };
+      nextBtns.forEach((btn) => {
+        btn.addEventListener("click", () => {
+          if (currentStep < totalSteps - 1) {
+            currentStep++;
+            updateUI();
+          }
+        });
+      });
+      prevBtns.forEach((btn) => {
+        btn.addEventListener("click", () => {
+          if (currentStep > 0) {
+            currentStep--;
+            updateUI();
+          }
+        });
+      });
+      items.forEach((item, index) => {
+        if (item.classList.contains(`${PREFIX}-stepper__item--clickable`) || item.hasAttribute("data-clickable")) {
+          item.addEventListener("click", () => {
+            if (!item.classList.contains(`${PREFIX}-stepper__item--disabled`)) {
+              currentStep = index;
+              updateUI();
+            }
+          });
+        }
+      });
+      updateUI();
+    });
+  }
+
   // src/js/components/stateful/file-upload.js
   var ICONS = {
     upload: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="16"></line></svg>`,
@@ -2280,53 +2404,65 @@ var InaUI = (() => {
       let currentPage = parseInt(container.dataset.current || "1", 10);
       let totalPages = parseInt(container.dataset.total || "10", 10);
       let pageSize = parseInt(container.dataset.pageSize || "10", 10);
+      let isDisabled = container.dataset.disabled === "true";
       let pageButtons = [];
       const updateUI = () => {
         pageInfo.textContent = `Halaman ${currentPage} dari ${totalPages}`;
         const isFirst = currentPage === 1;
         if (firstBtn) {
-          firstBtn.disabled = isFirst;
+          const disabled = isDisabled || isFirst;
+          firstBtn.disabled = disabled;
           firstBtn.classList.toggle(
             `${PREFIX}-pagination__nav-button--disabled`,
-            isFirst
+            disabled
           );
           firstBtn.classList.toggle(
             `${PREFIX}-pagination__nav-button--enabled`,
-            !isFirst
+            !disabled
           );
         }
         if (prevBtn) {
-          prevBtn.disabled = isFirst;
+          const disabled = isDisabled || isFirst;
+          prevBtn.disabled = disabled;
           prevBtn.classList.toggle(
             `${PREFIX}-pagination__nav-button--disabled`,
-            isFirst
+            disabled
           );
           prevBtn.classList.toggle(
             `${PREFIX}-pagination__nav-button--enabled`,
-            !isFirst
+            !disabled
           );
         }
         const isLast = currentPage === totalPages;
         if (nextBtn) {
-          nextBtn.disabled = isLast;
+          const disabled = isDisabled || isLast;
+          nextBtn.disabled = disabled;
           nextBtn.classList.toggle(
             `${PREFIX}-pagination__nav-button--disabled`,
-            isLast
+            disabled
           );
           nextBtn.classList.toggle(
             `${PREFIX}-pagination__nav-button--enabled`,
-            !isLast
+            !disabled
           );
         }
         if (lastBtn) {
-          lastBtn.disabled = isLast;
+          const disabled = isDisabled || isLast;
+          lastBtn.disabled = disabled;
           lastBtn.classList.toggle(
             `${PREFIX}-pagination__nav-button--disabled`,
-            isLast
+            disabled
           );
           lastBtn.classList.toggle(
             `${PREFIX}-pagination__nav-button--enabled`,
-            !isLast
+            !disabled
+          );
+        }
+        if (pageSizeSelect) {
+          pageSizeSelect.disabled = isDisabled;
+          pageSizeSelect.classList.toggle(
+            `${PREFIX}-pagination__page-size-select--disabled`,
+            isDisabled
           );
         }
         renderPageNumbers();
@@ -2353,10 +2489,11 @@ var InaUI = (() => {
           const button = document.createElement("button");
           button.type = "button";
           button.textContent = i;
-          button.className = `${PREFIX}-pagination__page-button ${PREFIX}-pagination__page-button--${isActive ? "active" : "enabled"}`;
+          button.disabled = isDisabled;
+          button.className = `${PREFIX}-pagination__page-button ${PREFIX}-pagination__page-button--${isActive ? "active" : isDisabled ? "disabled" : "enabled"}`;
           button.addEventListener("click", (e) => {
             e.stopPropagation();
-            if (i !== currentPage) {
+            if (!isDisabled && i !== currentPage) {
               goToPage(i);
             }
           });
@@ -2365,6 +2502,7 @@ var InaUI = (() => {
         }
       };
       const goToPage = (page) => {
+        if (isDisabled) return;
         if (page < 1) page = 1;
         if (page > totalPages) page = totalPages;
         if (page === currentPage) return;
@@ -2385,24 +2523,55 @@ var InaUI = (() => {
           })
         );
       };
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "attributes") {
+            if (mutation.attributeName === "data-current") {
+              const newVal = parseInt(container.dataset.current || "1", 10);
+              if (newVal !== currentPage) {
+                currentPage = newVal;
+                updateUI();
+              }
+            } else if (mutation.attributeName === "data-total") {
+              totalPages = parseInt(container.dataset.total || "10", 10);
+              updateUI();
+            } else if (mutation.attributeName === "data-page-size") {
+              pageSize = parseInt(container.dataset.pageSize || "10", 10);
+            } else if (mutation.attributeName === "data-disabled") {
+              isDisabled = container.dataset.disabled === "true";
+              updateUI();
+            }
+          }
+        });
+      });
+      observer.observe(container, {
+        attributes: true,
+        attributeFilter: [
+          "data-current",
+          "data-total",
+          "data-page-size",
+          "data-disabled"
+        ]
+      });
       if (firstBtn)
         firstBtn.addEventListener("click", () => {
-          if (currentPage > 1) goToPage(1);
+          if (!isDisabled && currentPage > 1) goToPage(1);
         });
       if (prevBtn)
         prevBtn.addEventListener("click", () => {
-          if (currentPage > 1) goToPage(currentPage - 1);
+          if (!isDisabled && currentPage > 1) goToPage(currentPage - 1);
         });
       if (nextBtn)
         nextBtn.addEventListener("click", () => {
-          if (currentPage < totalPages) goToPage(currentPage + 1);
+          if (!isDisabled && currentPage < totalPages) goToPage(currentPage + 1);
         });
       if (lastBtn)
         lastBtn.addEventListener("click", () => {
-          if (currentPage < totalPages) goToPage(totalPages);
+          if (!isDisabled && currentPage < totalPages) goToPage(totalPages);
         });
       if (pageSizeSelect) {
         pageSizeSelect.addEventListener("change", (e) => {
+          if (isDisabled) return;
           pageSize = parseInt(e.target.value, 10);
           currentPage = 1;
           container.dataset.pageSize = pageSize;
@@ -2690,6 +2859,7 @@ var InaUI = (() => {
       initModal();
       initRangeDatepicker();
       initRadioButton();
+      initStepper();
       initTab();
       initTimepicker();
       initToggle();

package/dist/index.js

@@ -1187,6 +1187,129 @@ function initRadioButton() {
   });
 }
 
+// src/js/components/stateful/stepper.js
+function initStepper() {
+  const steppers = document.querySelectorAll(`.${PREFIX}-stepper`);
+  steppers.forEach((stepper) => {
+    if (stepper.dataset.initialized === "true") return;
+    stepper.dataset.initialized = "true";
+    const stepperId = stepper.id;
+    const items = stepper.querySelectorAll(`.${PREFIX}-stepper__item`);
+    const separators = stepper.querySelectorAll(
+      `.${PREFIX}-stepper__separator`
+    );
+    const totalSteps = items.length;
+    let currentStep = parseInt(stepper.dataset.currentStep || "0", 10);
+    const nextBtns = document.querySelectorAll(
+      `[data-stepper-next="${stepperId}"]`
+    );
+    const prevBtns = document.querySelectorAll(
+      `[data-stepper-prev="${stepperId}"]`
+    );
+    const displayTargetId = stepper.dataset.displayTarget;
+    const displayTarget = displayTargetId ? document.getElementById(displayTargetId) : null;
+    const checkIcon = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="${PREFIX}-stepper__check-icon"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        stroke-width="2.5"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M5 12l5 5l10 -10" />
+      </svg>
+    `;
+    const updateUI = () => {
+      stepper.dataset.currentStep = currentStep;
+      items.forEach((item, index) => {
+        const iconWrapper = item.querySelector(
+          `.${PREFIX}-stepper__icon-wrapper`
+        );
+        const itemNumber = index + 1;
+        item.classList.remove(
+          `${PREFIX}-stepper__item--completed`,
+          `${PREFIX}-stepper__item--active`
+        );
+        if (iconWrapper) iconWrapper.innerHTML = "";
+        if (index < currentStep) {
+          item.classList.add(`${PREFIX}-stepper__item--completed`);
+          if (iconWrapper) iconWrapper.innerHTML = checkIcon;
+        } else if (index === currentStep) {
+          item.classList.add(`${PREFIX}-stepper__item--active`);
+          if (iconWrapper)
+            iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
+        } else {
+          if (iconWrapper)
+            iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
+        }
+      });
+      separators.forEach((separator, index) => {
+        if (index < currentStep) {
+          separator.classList.add(`${PREFIX}-stepper__separator--completed`);
+        } else {
+          separator.classList.remove(`${PREFIX}-stepper__separator--completed`);
+        }
+      });
+      prevBtns.forEach((btn) => {
+        if (currentStep === 0) {
+          btn.setAttribute("disabled", "true");
+        } else {
+          btn.removeAttribute("disabled");
+        }
+      });
+      nextBtns.forEach((btn) => {
+        if (currentStep === totalSteps - 1) {
+          btn.setAttribute("disabled", "true");
+        } else {
+          btn.removeAttribute("disabled");
+        }
+      });
+      if (displayTarget) {
+        displayTarget.textContent = `Current Step: ${currentStep + 1}`;
+      }
+      stepper.dispatchEvent(
+        new CustomEvent("stepper:change", {
+          bubbles: true,
+          detail: { currentStep, totalSteps }
+        })
+      );
+    };
+    nextBtns.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        if (currentStep < totalSteps - 1) {
+          currentStep++;
+          updateUI();
+        }
+      });
+    });
+    prevBtns.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        if (currentStep > 0) {
+          currentStep--;
+          updateUI();
+        }
+      });
+    });
+    items.forEach((item, index) => {
+      if (item.classList.contains(`${PREFIX}-stepper__item--clickable`) || item.hasAttribute("data-clickable")) {
+        item.addEventListener("click", () => {
+          if (!item.classList.contains(`${PREFIX}-stepper__item--disabled`)) {
+            currentStep = index;
+            updateUI();
+          }
+        });
+      }
+    });
+    updateUI();
+  });
+}
+
 // src/js/components/stateful/file-upload.js
 var ICONS = {
   upload: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="16"></line></svg>`,
@@ -2443,53 +2566,65 @@ function initPagination() {
     let currentPage = parseInt(container.dataset.current || "1", 10);
     let totalPages = parseInt(container.dataset.total || "10", 10);
     let pageSize = parseInt(container.dataset.pageSize || "10", 10);
+    let isDisabled = container.dataset.disabled === "true";
     let pageButtons = [];
     const updateUI = () => {
       pageInfo.textContent = `Halaman ${currentPage} dari ${totalPages}`;
       const isFirst = currentPage === 1;
       if (firstBtn) {
-        firstBtn.disabled = isFirst;
+        const disabled = isDisabled || isFirst;
+        firstBtn.disabled = disabled;
         firstBtn.classList.toggle(
           `${PREFIX}-pagination__nav-button--disabled`,
-          isFirst
+          disabled
         );
         firstBtn.classList.toggle(
           `${PREFIX}-pagination__nav-button--enabled`,
-          !isFirst
+          !disabled
         );
       }
       if (prevBtn) {
-        prevBtn.disabled = isFirst;
+        const disabled = isDisabled || isFirst;
+        prevBtn.disabled = disabled;
         prevBtn.classList.toggle(
           `${PREFIX}-pagination__nav-button--disabled`,
-          isFirst
+          disabled
         );
         prevBtn.classList.toggle(
           `${PREFIX}-pagination__nav-button--enabled`,
-          !isFirst
+          !disabled
         );
       }
       const isLast = currentPage === totalPages;
       if (nextBtn) {
-        nextBtn.disabled = isLast;
+        const disabled = isDisabled || isLast;
+        nextBtn.disabled = disabled;
         nextBtn.classList.toggle(
           `${PREFIX}-pagination__nav-button--disabled`,
-          isLast
+          disabled
         );
         nextBtn.classList.toggle(
           `${PREFIX}-pagination__nav-button--enabled`,
-          !isLast
+          !disabled
         );
       }
       if (lastBtn) {
-        lastBtn.disabled = isLast;
+        const disabled = isDisabled || isLast;
+        lastBtn.disabled = disabled;
         lastBtn.classList.toggle(
           `${PREFIX}-pagination__nav-button--disabled`,
-          isLast
+          disabled
         );
         lastBtn.classList.toggle(
           `${PREFIX}-pagination__nav-button--enabled`,
-          !isLast
+          !disabled
+        );
+      }
+      if (pageSizeSelect) {
+        pageSizeSelect.disabled = isDisabled;
+        pageSizeSelect.classList.toggle(
+          `${PREFIX}-pagination__page-size-select--disabled`,
+          isDisabled
         );
       }
       renderPageNumbers();
@@ -2516,10 +2651,11 @@ function initPagination() {
         const button = document.createElement("button");
         button.type = "button";
         button.textContent = i;
-        button.className = `${PREFIX}-pagination__page-button ${PREFIX}-pagination__page-button--${isActive ? "active" : "enabled"}`;
+        button.disabled = isDisabled;
+        button.className = `${PREFIX}-pagination__page-button ${PREFIX}-pagination__page-button--${isActive ? "active" : isDisabled ? "disabled" : "enabled"}`;
         button.addEventListener("click", (e) => {
           e.stopPropagation();
-          if (i !== currentPage) {
+          if (!isDisabled && i !== currentPage) {
             goToPage(i);
           }
         });
@@ -2528,6 +2664,7 @@ function initPagination() {
       }
     };
     const goToPage = (page) => {
+      if (isDisabled) return;
       if (page < 1) page = 1;
       if (page > totalPages) page = totalPages;
       if (page === currentPage) return;
@@ -2548,24 +2685,55 @@ function initPagination() {
         })
       );
     };
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "attributes") {
+          if (mutation.attributeName === "data-current") {
+            const newVal = parseInt(container.dataset.current || "1", 10);
+            if (newVal !== currentPage) {
+              currentPage = newVal;
+              updateUI();
+            }
+          } else if (mutation.attributeName === "data-total") {
+            totalPages = parseInt(container.dataset.total || "10", 10);
+            updateUI();
+          } else if (mutation.attributeName === "data-page-size") {
+            pageSize = parseInt(container.dataset.pageSize || "10", 10);
+          } else if (mutation.attributeName === "data-disabled") {
+            isDisabled = container.dataset.disabled === "true";
+            updateUI();
+          }
+        }
+      });
+    });
+    observer.observe(container, {
+      attributes: true,
+      attributeFilter: [
+        "data-current",
+        "data-total",
+        "data-page-size",
+        "data-disabled"
+      ]
+    });
     if (firstBtn)
       firstBtn.addEventListener("click", () => {
-        if (currentPage > 1) goToPage(1);
+        if (!isDisabled && currentPage > 1) goToPage(1);
       });
     if (prevBtn)
       prevBtn.addEventListener("click", () => {
-        if (currentPage > 1) goToPage(currentPage - 1);
+        if (!isDisabled && currentPage > 1) goToPage(currentPage - 1);
       });
     if (nextBtn)
       nextBtn.addEventListener("click", () => {
-        if (currentPage < totalPages) goToPage(currentPage + 1);
+        if (!isDisabled && currentPage < totalPages) goToPage(currentPage + 1);
       });
     if (lastBtn)
       lastBtn.addEventListener("click", () => {
-        if (currentPage < totalPages) goToPage(totalPages);
+        if (!isDisabled && currentPage < totalPages) goToPage(totalPages);
       });
     if (pageSizeSelect) {
       pageSizeSelect.addEventListener("change", (e) => {
+        if (isDisabled) return;
         pageSize = parseInt(e.target.value, 10);
         currentPage = 1;
         container.dataset.pageSize = pageSize;
@@ -2660,6 +2828,7 @@ function initAll() {
   initActionDropdown();
   initSelectDropdown();
   initRadioButton();
+  initStepper();
   initFileUpload();
   initSingleFileUpload();
   initFileUploadBase();

package/package.json

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