npm - @idds/js - Versions diffs - 1.0.99 → 1.2.0 - Mend

@idds/js 1.0.99 → 1.2.0

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.

Files changed (3) hide show

package/dist/index.iife.js CHANGED Viewed

@@ -2956,34 +2956,59 @@ var InaUI = (() => {
       if (container.__inaChipInitialized) return;
       const showCustomization = container.getAttribute("data-show-customization") === "true";
       const customizationLabel = container.getAttribute("data-customization-label") || "Kustomisasi";
+      const isMultiple = container.getAttribute("data-multiple") === "true";
       let selectedValue = container.getAttribute("data-selected") || "";
       const list = container.querySelector(`.${PREFIX4}-chip__list`);
       const items = list ? list.querySelectorAll(`.${PREFIX4}-chip__item`) : [];
       let customFieldContainer = container.querySelector(
         `.${PREFIX4}-chip__custom-field`
       );
+      const getNormalizedSelected = () => {
+        if (!selectedValue) return [];
+        return isMultiple ? selectedValue.split(",").map((s) => s.trim()).filter(Boolean) : [selectedValue];
+      };
       const updateUI = () => {
-        items.forEach((item) => {
+        const normSelected = getNormalizedSelected();
+        const getInitialFocusIndex = () => {
+          if (normSelected.length > 0) {
+            const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).map((item) => item.getAttribute("data-value"));
+            const hasCustomVal = normSelected.some(
+              (val) => !standardValues.includes(val) && val !== ""
+            );
+            if (hasCustomVal && showCustomization) {
+              return items.length - 1;
+            }
+            const firstSelectedIndex = Array.from(items).findIndex(
+              (opt) => normSelected.includes(opt.getAttribute("data-value"))
+            );
+            if (firstSelectedIndex !== -1) return firstSelectedIndex;
+          }
+          return 0;
+        };
+        const focusedIndex = getInitialFocusIndex();
+        items.forEach((item, index2) => {
           const itemValue = item.getAttribute("data-value");
-          const isSelected = itemValue === selectedValue;
+          const isSelected = normSelected.includes(itemValue) || showCustomization && item.textContent.trim() === customizationLabel && normSelected.some(
+            (val) => !Array.from(items).filter((i) => i.textContent.trim() !== customizationLabel).map((i) => i.getAttribute("data-value")).includes(val) && val !== ""
+          );
           if (isSelected) {
             item.classList.add(`${PREFIX4}-chip__item--selected`);
           } else {
             item.classList.remove(`${PREFIX4}-chip__item--selected`);
           }
+          item.setAttribute("tabindex", index2 === focusedIndex ? "0" : "-1");
         });
         if (showCustomization) {
-          const isCustomToggleSelected = selectedValue === customizationLabel;
-          let isStandard = false;
-          items.forEach((item) => {
-            if (item.getAttribute("data-value") === selectedValue && item.textContent.trim() !== customizationLabel) {
-              isStandard = true;
-            }
-          });
+          const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).map((item) => item.getAttribute("data-value"));
+          const customValues = normSelected.filter(
+            (val) => !standardValues.includes(val) && val !== ""
+          );
+          const isStandard = customValues.length === 0;
+          const primaryCustomValue = customValues[customValues.length - 1] || "";
           const toggleBtn = Array.from(items).find(
             (i) => i.textContent.trim() === customizationLabel
           );
-          const showInput = toggleBtn && selectedValue === toggleBtn.getAttribute("data-value") || !isStandard && selectedValue !== "";
+          const showInput = toggleBtn && normSelected.includes(toggleBtn.getAttribute("data-value")) || !isStandard && normSelected.length > 0;
           if (showInput) {
             if (!customFieldContainer) {
               customFieldContainer = document.createElement("div");
@@ -2997,7 +3022,7 @@ var InaUI = (() => {
               customFieldContainer.innerHTML = `
                <div class="${PREFIX4}-text-field ${PREFIX4}-text-field--size-medium ${PREFIX4}-text-field--variant-outline ${PREFIX4}-chip__input">
                  <div class="${PREFIX4}-text-field__wrapper">
-                   <input type="text" class="${PREFIX4}-text-field__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? selectedValue : ""}" />
+                   <input type="text" class="${PREFIX4}-text-field__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? primaryCustomValue : ""}" />
                  </div>
                </div>
              `;
@@ -3005,21 +3030,21 @@ var InaUI = (() => {
               input.addEventListener("blur", (e) => {
                 const val = e.target.value;
                 if (val.trim()) {
-                  handleSelect(val);
-                } else {
-                  handleSelect("");
+                  handleSelect(val.trim());
                 }
               });
               input.addEventListener("keydown", (e) => {
                 if (e.key === "Enter") {
-                  handleSelect(e.target.value);
+                  if (e.target.value.trim()) {
+                    handleSelect(e.target.value.trim());
+                  }
                   e.target.blur();
                 }
               });
             } else {
               const inputEl = customFieldContainer.querySelector("input");
               if (inputEl && document.activeElement !== inputEl) {
-                inputEl.value = !isStandard ? selectedValue : "";
+                inputEl.value = !isStandard ? primaryCustomValue : "";
               }
             }
             customFieldContainer.style.display = "block";
@@ -3031,17 +3056,41 @@ var InaUI = (() => {
         }
       };
       const handleSelect = (val) => {
-        selectedValue = val;
-        container.setAttribute("data-selected", val);
+        if (!val) return;
+        let finalVal = val;
+        if (isMultiple) {
+          const normSelected = getNormalizedSelected();
+          let newSelected;
+          if (normSelected.includes(val)) {
+            newSelected = normSelected.filter((v) => v !== val);
+          } else {
+            newSelected = [...normSelected, val];
+          }
+          finalVal = newSelected;
+          selectedValue = newSelected.join(",");
+        } else {
+          selectedValue = val;
+        }
+        container.setAttribute("data-selected", selectedValue);
         updateUI();
         container.dispatchEvent(
           new CustomEvent("chip:select", {
-            detail: { value: val },
+            detail: { value: finalVal },
             bubbles: true
           })
         );
       };
-      items.forEach((item) => {
+      let currentFocusedIndex = -1;
+      const setItemFocus = (index2) => {
+        items.forEach((item, i) => {
+          item.setAttribute("tabindex", i === index2 ? "0" : "-1");
+        });
+        if (items[index2]) {
+          items[index2].focus();
+          currentFocusedIndex = index2;
+        }
+      };
+      items.forEach((item, index2) => {
         item.addEventListener("click", (e) => {
           const val = item.getAttribute("data-value");
           const label = item.textContent.trim();
@@ -3051,6 +3100,39 @@ var InaUI = (() => {
             handleSelect(val);
           }
         });
+        item.addEventListener("focus", () => {
+          currentFocusedIndex = index2;
+        });
+        item.addEventListener("keydown", (e) => {
+          if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+            e.preventDefault();
+            const nextIndex = (index2 + 1) % items.length;
+            setItemFocus(nextIndex);
+          } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const prevIndex = (index2 - 1 + items.length) % items.length;
+            setItemFocus(prevIndex);
+          }
+          if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            const val = item.getAttribute("data-value");
+            const label = item.textContent.trim();
+            if (showCustomization && label === customizationLabel) {
+              handleSelect(val);
+              setTimeout(() => {
+                const customFieldContainer2 = container.querySelector(
+                  `.${PREFIX4}-chip__custom-field`
+                );
+                if (customFieldContainer2) {
+                  const inputEl = customFieldContainer2.querySelector("input");
+                  if (inputEl) inputEl.focus();
+                }
+              }, 50);
+            } else {
+              handleSelect(val);
+            }
+          }
+        });
       });
       updateUI();
       container.__inaChipInitialized = true;

package/dist/index.js CHANGED Viewed

@@ -3036,34 +3036,59 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
     if (container.__inaChipInitialized) return;
     const showCustomization = container.getAttribute("data-show-customization") === "true";
     const customizationLabel = container.getAttribute("data-customization-label") || "Kustomisasi";
+    const isMultiple = container.getAttribute("data-multiple") === "true";
     let selectedValue = container.getAttribute("data-selected") || "";
     const list = container.querySelector(`.${PREFIX5}-chip__list`);
     const items = list ? list.querySelectorAll(`.${PREFIX5}-chip__item`) : [];
     let customFieldContainer = container.querySelector(
       `.${PREFIX5}-chip__custom-field`
     );
+    const getNormalizedSelected = () => {
+      if (!selectedValue) return [];
+      return isMultiple ? selectedValue.split(",").map((s) => s.trim()).filter(Boolean) : [selectedValue];
+    };
     const updateUI = () => {
-      items.forEach((item) => {
+      const normSelected = getNormalizedSelected();
+      const getInitialFocusIndex = () => {
+        if (normSelected.length > 0) {
+          const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).map((item) => item.getAttribute("data-value"));
+          const hasCustomVal = normSelected.some(
+            (val) => !standardValues.includes(val) && val !== ""
+          );
+          if (hasCustomVal && showCustomization) {
+            return items.length - 1;
+          }
+          const firstSelectedIndex = Array.from(items).findIndex(
+            (opt) => normSelected.includes(opt.getAttribute("data-value"))
+          );
+          if (firstSelectedIndex !== -1) return firstSelectedIndex;
+        }
+        return 0;
+      };
+      const focusedIndex = getInitialFocusIndex();
+      items.forEach((item, index2) => {
         const itemValue = item.getAttribute("data-value");
-        const isSelected = itemValue === selectedValue;
+        const isSelected = normSelected.includes(itemValue) || showCustomization && item.textContent.trim() === customizationLabel && normSelected.some(
+          (val) => !Array.from(items).filter((i) => i.textContent.trim() !== customizationLabel).map((i) => i.getAttribute("data-value")).includes(val) && val !== ""
+        );
         if (isSelected) {
           item.classList.add(`${PREFIX5}-chip__item--selected`);
         } else {
           item.classList.remove(`${PREFIX5}-chip__item--selected`);
         }
+        item.setAttribute("tabindex", index2 === focusedIndex ? "0" : "-1");
       });
       if (showCustomization) {
-        const isCustomToggleSelected = selectedValue === customizationLabel;
-        let isStandard = false;
-        items.forEach((item) => {
-          if (item.getAttribute("data-value") === selectedValue && item.textContent.trim() !== customizationLabel) {
-            isStandard = true;
-          }
-        });
+        const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).map((item) => item.getAttribute("data-value"));
+        const customValues = normSelected.filter(
+          (val) => !standardValues.includes(val) && val !== ""
+        );
+        const isStandard = customValues.length === 0;
+        const primaryCustomValue = customValues[customValues.length - 1] || "";
         const toggleBtn = Array.from(items).find(
           (i) => i.textContent.trim() === customizationLabel
         );
-        const showInput = toggleBtn && selectedValue === toggleBtn.getAttribute("data-value") || !isStandard && selectedValue !== "";
+        const showInput = toggleBtn && normSelected.includes(toggleBtn.getAttribute("data-value")) || !isStandard && normSelected.length > 0;
         if (showInput) {
           if (!customFieldContainer) {
             customFieldContainer = document.createElement("div");
@@ -3077,7 +3102,7 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
             customFieldContainer.innerHTML = `
                <div class="${PREFIX5}-text-field ${PREFIX5}-text-field--size-medium ${PREFIX5}-text-field--variant-outline ${PREFIX5}-chip__input">
                  <div class="${PREFIX5}-text-field__wrapper">
-                   <input type="text" class="${PREFIX5}-text-field__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? selectedValue : ""}" />
+                   <input type="text" class="${PREFIX5}-text-field__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? primaryCustomValue : ""}" />
                  </div>
                </div>
              `;
@@ -3085,21 +3110,21 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
             input.addEventListener("blur", (e) => {
               const val = e.target.value;
               if (val.trim()) {
-                handleSelect(val);
-              } else {
-                handleSelect("");
+                handleSelect(val.trim());
               }
             });
             input.addEventListener("keydown", (e) => {
               if (e.key === "Enter") {
-                handleSelect(e.target.value);
+                if (e.target.value.trim()) {
+                  handleSelect(e.target.value.trim());
+                }
                 e.target.blur();
               }
             });
           } else {
             const inputEl = customFieldContainer.querySelector("input");
             if (inputEl && document.activeElement !== inputEl) {
-              inputEl.value = !isStandard ? selectedValue : "";
+              inputEl.value = !isStandard ? primaryCustomValue : "";
             }
           }
           customFieldContainer.style.display = "block";
@@ -3111,17 +3136,41 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
       }
     };
     const handleSelect = (val) => {
-      selectedValue = val;
-      container.setAttribute("data-selected", val);
+      if (!val) return;
+      let finalVal = val;
+      if (isMultiple) {
+        const normSelected = getNormalizedSelected();
+        let newSelected;
+        if (normSelected.includes(val)) {
+          newSelected = normSelected.filter((v) => v !== val);
+        } else {
+          newSelected = [...normSelected, val];
+        }
+        finalVal = newSelected;
+        selectedValue = newSelected.join(",");
+      } else {
+        selectedValue = val;
+      }
+      container.setAttribute("data-selected", selectedValue);
       updateUI();
       container.dispatchEvent(
         new CustomEvent("chip:select", {
-          detail: { value: val },
+          detail: { value: finalVal },
           bubbles: true
         })
       );
     };
-    items.forEach((item) => {
+    let currentFocusedIndex = -1;
+    const setItemFocus = (index2) => {
+      items.forEach((item, i) => {
+        item.setAttribute("tabindex", i === index2 ? "0" : "-1");
+      });
+      if (items[index2]) {
+        items[index2].focus();
+        currentFocusedIndex = index2;
+      }
+    };
+    items.forEach((item, index2) => {
       item.addEventListener("click", (e) => {
         const val = item.getAttribute("data-value");
         const label = item.textContent.trim();
@@ -3131,6 +3180,39 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
           handleSelect(val);
         }
       });
+      item.addEventListener("focus", () => {
+        currentFocusedIndex = index2;
+      });
+      item.addEventListener("keydown", (e) => {
+        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+          e.preventDefault();
+          const nextIndex = (index2 + 1) % items.length;
+          setItemFocus(nextIndex);
+        } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+          e.preventDefault();
+          const prevIndex = (index2 - 1 + items.length) % items.length;
+          setItemFocus(prevIndex);
+        }
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          const val = item.getAttribute("data-value");
+          const label = item.textContent.trim();
+          if (showCustomization && label === customizationLabel) {
+            handleSelect(val);
+            setTimeout(() => {
+              const customFieldContainer2 = container.querySelector(
+                `.${PREFIX5}-chip__custom-field`
+              );
+              if (customFieldContainer2) {
+                const inputEl = customFieldContainer2.querySelector("input");
+                if (inputEl) inputEl.focus();
+              }
+            }, 50);
+          } else {
+            handleSelect(val);
+          }
+        }
+      });
     });
     updateUI();
     container.__inaChipInitialized = true;

package/package.json CHANGED Viewed

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