selectamelo 0.1.0

package/dist/index.global.js

@@ -0,0 +1,634 @@
+"use strict";
+var ZSelectCore = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/index.ts
+  var index_exports = {};
+  __export(index_exports, {
+    ZSelectCore: () => ZSelectCore
+  });
+
+  // src/dom.ts
+  function uid(prefix = "zs-") {
+    return prefix + Math.random().toString(36).slice(2);
+  }
+
+  // src/core.ts
+  var instances = /* @__PURE__ */ new WeakMap();
+  function dispatch(select, name, detail) {
+    select.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }));
+  }
+  function getSelected(select) {
+    if (select.multiple) return Array.from(select.selectedOptions).map((o) => o.value);
+    return select.value;
+  }
+  function setSelected(select, value) {
+    if (select.multiple) {
+      const arr = Array.isArray(value) ? value.map(String) : value == null ? [] : [String(value)];
+      Array.from(select.options).forEach((o) => o.selected = arr.includes(o.value));
+    } else {
+      select.value = value == null ? "" : String(value);
+    }
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  var ZSelectCore = {
+    create(select, options = {}) {
+      const existing = instances.get(select);
+      if (existing) return existing;
+      const opts = {
+        searchable: options.searchable ?? true,
+        placeholder: options.placeholder ?? "",
+        allowClear: options.allowClear ?? true,
+        hideSearch: options.hideSearch ?? false
+      };
+      function readBoolAttr(name) {
+        const v = select.getAttribute(name);
+        if (v == null) return null;
+        if (v === "" || v === "true" || v === "1") return true;
+        if (v === "false" || v === "0") return false;
+        return null;
+      }
+      const aAllowClear = readBoolAttr("data-allow-clear");
+      if (aAllowClear != null) opts.allowClear = aAllowClear;
+      const aHideSearch = readBoolAttr("data-hide-search");
+      if (aHideSearch != null) opts.hideSearch = aHideSearch;
+      const aSearchable = readBoolAttr("data-searchable");
+      if (aSearchable != null) opts.searchable = aSearchable;
+      const root = document.createElement("div");
+      root.className = "zselect";
+      root.setAttribute("data-zselect-core", "1");
+      const control = document.createElement("button");
+      control.type = "button";
+      control.className = "zselect__control";
+      control.setAttribute("aria-haspopup", "listbox");
+      control.setAttribute("aria-expanded", "false");
+      const ds = {
+        placeholder: select.getAttribute("data-zselect-placeholder"),
+        searchPlaceholder: select.getAttribute("data-zselect-search-placeholder"),
+        clearTitle: select.getAttribute("data-zselect-clear-title"),
+        clearAriaLabel: select.getAttribute("data-zselect-clear-aria-label"),
+        removeChipAriaLabel: select.getAttribute("data-zselect-remove-chip-aria-label"),
+        noResults: select.getAttribute("data-zselect-no-results")
+      };
+      const t = {
+        placeholder: options.i18n?.placeholder ?? ds.placeholder ?? options.placeholder ?? "",
+        searchPlaceholder: options.i18n?.searchPlaceholder ?? ds.searchPlaceholder ?? "Cerca...",
+        clearTitle: options.i18n?.clearTitle ?? ds.clearTitle ?? "Pulisci",
+        clearAriaLabel: options.i18n?.clearAriaLabel ?? ds.clearAriaLabel ?? "Pulisci selezione",
+        removeChipAriaLabel: options.i18n?.removeChipAriaLabel ?? ds.removeChipAriaLabel ?? "Rimuovi",
+        noResults: options.i18n?.noResults ?? ds.noResults ?? "Nessun risultato"
+      };
+      const valueWrap = document.createElement("span");
+      valueWrap.className = "zselect__valuewrap";
+      const chipsEl = document.createElement("span");
+      chipsEl.className = "zselect__chips";
+      chipsEl.hidden = !select.multiple;
+      const valueEl = document.createElement("span");
+      valueEl.className = "zselect__value";
+      valueWrap.append(chipsEl, valueEl);
+      const actions = document.createElement("span");
+      actions.className = "zselect__actions";
+      const clearEl = document.createElement("span");
+      clearEl.className = "zselect__clear";
+      clearEl.textContent = "\xD7";
+      clearEl.title = t.clearTitle;
+      clearEl.setAttribute("aria-hidden", "true");
+      clearEl.setAttribute("aria-label", t.clearAriaLabel);
+      clearEl.style.display = "none";
+      const arrow = document.createElement("span");
+      arrow.className = "zselect__arrow";
+      arrow.textContent = "\u25BE";
+      actions.append(clearEl, arrow);
+      control.append(valueWrap, actions);
+      const dropdown = document.createElement("div");
+      dropdown.className = "zselect__dropdown";
+      dropdown.hidden = true;
+      const searchEl = document.createElement("input");
+      searchEl.className = "zselect__search";
+      searchEl.type = "text";
+      searchEl.autocomplete = "off";
+      searchEl.placeholder = t.searchPlaceholder;
+      searchEl.hidden = opts.hideSearch || !opts.searchable;
+      const list = document.createElement("ul");
+      list.className = "zselect__list";
+      list.setAttribute("role", "listbox");
+      const listId = `zselect-list-${uid()}`;
+      list.id = listId;
+      control.setAttribute("aria-controls", listId);
+      dropdown.append(searchEl, list);
+      root.append(control, dropdown);
+      const prevStyle = {
+        position: select.style.position,
+        left: select.style.left,
+        width: select.style.width,
+        height: select.style.height
+      };
+      select.style.position = "absolute";
+      select.style.left = "-9999px";
+      select.style.width = "1px";
+      select.style.height = "1px";
+      select.insertAdjacentElement("afterend", root);
+      let open = false;
+      let readonly = !!options.readonly || select.getAttribute("data-readonly") === "true";
+      const aDisabled = readBoolAttr("data-disabled");
+      if (aDisabled != null) select.disabled = !!aDisabled;
+      let activeIndex = -1;
+      let filterQuery = "";
+      let hoverArmed = false;
+      function isDisabled() {
+        return select.disabled || select.hasAttribute("disabled");
+      }
+      function isReadonly() {
+        return readonly;
+      }
+      function applyStateToUI() {
+        const disabledNow = isDisabled();
+        const readonlyNow = isReadonly();
+        root.classList.toggle("is-disabled", disabledNow);
+        root.classList.toggle("is-readonly", readonlyNow);
+        control.disabled = disabledNow || readonlyNow;
+        searchEl.disabled = disabledNow || readonlyNow;
+        control.setAttribute("aria-disabled", disabledNow || readonlyNow ? "true" : "false");
+        if ((disabledNow || readonlyNow) && open) close();
+      }
+      function hasValue() {
+        if (select.multiple) return Array.from(select.selectedOptions).some((o) => (o.value ?? "") !== "");
+        return (select.value ?? "") !== "";
+      }
+      function updateClearVisibility() {
+        if (!opts.allowClear || isDisabled() || isReadonly()) {
+          clearEl.style.display = "none";
+          return;
+        }
+        clearEl.style.display = hasValue() ? "" : "none";
+      }
+      function normalize(s) {
+        return s.toLowerCase();
+      }
+      function getOptionLabel(opt) {
+        return (opt.textContent ?? "").trim();
+      }
+      function allOptions() {
+        return Array.from(select.options);
+      }
+      function selectedOptions() {
+        return Array.from(select.selectedOptions);
+      }
+      function selectedNonEmpty() {
+        return selectedOptions().filter((o) => (o.value ?? "") !== "");
+      }
+      function emitChange() {
+        select.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+      function getFilteredOptions() {
+        const q = normalize(filterQuery.trim());
+        const all = allOptions();
+        if (!q) return all;
+        return all.filter((o) => normalize(getOptionLabel(o)).includes(q));
+      }
+      function clearValue() {
+        if (!opts.allowClear) return;
+        if (isReadonly()) return;
+        if (select.multiple) {
+          allOptions().forEach((o) => o.selected = false);
+          select.value = "";
+        } else {
+          const hasEmpty = !!select.querySelector('option[value=""]');
+          select.value = hasEmpty ? "" : select.options[0]?.value ?? "";
+        }
+        emitChange();
+        dispatch(select, "zselect:clear");
+      }
+      function renderChips() {
+        chipsEl.innerHTML = "";
+        if (!select.multiple) return;
+        const selected = selectedNonEmpty();
+        if (!selected.length) return;
+        selected.forEach((opt) => {
+          const chip = document.createElement("span");
+          chip.className = "zselect__chip";
+          chip.dataset.value = opt.value;
+          const label = document.createElement("span");
+          label.className = "zselect__chip-label";
+          label.textContent = getOptionLabel(opt);
+          const x = document.createElement("button");
+          x.type = "button";
+          x.className = "zselect__chip-remove";
+          x.textContent = "\xD7";
+          x.title = "Rimuovi";
+          x.setAttribute("aria-label", t.removeChipAriaLabel);
+          x.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (isReadonly()) return;
+            opt.selected = false;
+            emitChange();
+          });
+          chip.append(label, x);
+          chipsEl.append(chip);
+        });
+      }
+      function renderLabel() {
+        const selected = selectedOptions();
+        const isPlaceholder = selected.length === 0 || selected.length === 1 && (selected[0]?.value ?? "") === "" || select.multiple && selectedNonEmpty().length === 0;
+        if (select.multiple) {
+          renderChips();
+          valueEl.textContent = isPlaceholder ? t.placeholder || "Seleziona..." : "";
+          valueEl.classList.toggle("is-placeholder", isPlaceholder);
+          return;
+        }
+        if (isPlaceholder) {
+          valueEl.textContent = t.placeholder || "Seleziona...";
+          valueEl.classList.add("is-placeholder");
+          return;
+        }
+        const first = selected[0];
+        valueEl.textContent = (first?.textContent ?? "").trim();
+        valueEl.classList.remove("is-placeholder");
+      }
+      function getOptionItems(includeDisabled = true) {
+        const selector = includeDisabled ? ".zselect__option" : ".zselect__option:not(.is-disabled)";
+        return Array.from(list.querySelectorAll(selector));
+      }
+      function setActiveIndex(items, idx, scroll = true) {
+        activeIndex = idx;
+        items.forEach((li, i) => li.classList.toggle("is-active", i === activeIndex));
+        if (scroll && activeIndex >= 0) items[activeIndex]?.scrollIntoView({ block: "nearest" });
+      }
+      function clearActive(items) {
+        const all = items ?? getOptionItems();
+        activeIndex = -1;
+        all.forEach((li) => li.classList.remove("is-active"));
+      }
+      function setActiveByValue(val) {
+        const items = getOptionItems();
+        const idx = items.findIndex((li) => (li.dataset.value ?? "") === val);
+        setActiveIndex(items, idx, true);
+      }
+      function renderList() {
+        const filtered = getFilteredOptions().filter((opt) => (opt.value ?? "") !== "");
+        list.innerHTML = "";
+        const selectedValues = new Set(selectedOptions().map((o) => o.value));
+        if (!filtered.length) {
+          const empty = document.createElement("li");
+          empty.className = "zselect__empty";
+          empty.textContent = t.noResults;
+          list.append(empty);
+          activeIndex = -1;
+          return;
+        }
+        filtered.forEach((opt, idx) => {
+          const li = document.createElement("li");
+          li.className = "zselect__option";
+          li.setAttribute("role", "option");
+          li.dataset.value = opt.value;
+          const labelText = getOptionLabel(opt);
+          const labelEl = document.createElement("span");
+          labelEl.className = "zselect__option-label";
+          labelEl.textContent = labelText;
+          const checkEl = document.createElement("span");
+          checkEl.className = "zselect__option-check";
+          checkEl.setAttribute("aria-hidden", "true");
+          checkEl.textContent = "\u2713";
+          const isSelected = selectedValues.has(opt.value);
+          checkEl.hidden = !isSelected;
+          li.append(labelEl, checkEl);
+          if (opt.disabled) li.classList.add("is-disabled");
+          if (isSelected) {
+            li.classList.add("is-selected");
+            li.setAttribute("aria-selected", "true");
+          } else {
+            li.setAttribute("aria-selected", "false");
+          }
+          li.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            if (opt.disabled) return;
+            if (isReadonly()) return;
+            if (select.multiple) {
+              opt.selected = !opt.selected;
+              emitChange();
+              renderList();
+              if (!searchEl.hidden) searchEl.focus();
+            } else {
+              select.value = opt.value;
+              emitChange();
+              close();
+              control.focus();
+            }
+          });
+          li.addEventListener("mouseenter", () => {
+            if (!hoverArmed) return;
+            if (opt.disabled) return;
+            const all = getOptionItems();
+            setActiveIndex(all, idx, false);
+          });
+          list.append(li);
+        });
+        clearActive();
+      }
+      function refresh() {
+        renderLabel();
+        updateClearVisibility();
+        if (open) renderList();
+      }
+      function openDropdown() {
+        if (open || isDisabled() || isReadonly()) return;
+        open = true;
+        dropdown.hidden = false;
+        control.setAttribute("aria-expanded", "true");
+        root.classList.add("is-open");
+        filterQuery = "";
+        hoverArmed = false;
+        dropdown.addEventListener(
+          "mousemove",
+          () => {
+            hoverArmed = true;
+          },
+          { once: true }
+        );
+        if (!searchEl.hidden) {
+          searchEl.value = "";
+          renderList();
+          queueMicrotask(() => searchEl.focus());
+        } else {
+          renderList();
+        }
+        dispatch(select, "zselect:open");
+      }
+      function close() {
+        if (!open) return;
+        open = false;
+        hoverArmed = false;
+        dropdown.hidden = true;
+        control.setAttribute("aria-expanded", "false");
+        root.classList.remove("is-open");
+        dispatch(select, "zselect:close");
+      }
+      function toggle() {
+        open ? close() : openDropdown();
+      }
+      function moveActive(delta) {
+        const items = getOptionItems(false);
+        if (!items.length) return;
+        let i = activeIndex;
+        if (i < 0) i = -1;
+        i = Math.min(Math.max(i + delta, 0), items.length - 1);
+        setActiveIndex(items, i, true);
+      }
+      function selectActive() {
+        if (isReadonly()) return;
+        const items = getOptionItems(false);
+        if (!items.length) return;
+        const li = items[Math.max(0, Math.min(activeIndex, items.length - 1))];
+        if (!li) return;
+        const val = li.dataset.value ?? "";
+        const opt = Array.from(select.options).find((o) => o.value === val);
+        if (!opt || opt.disabled) return;
+        if (select.multiple) {
+          opt.selected = !opt.selected;
+          emitChange();
+          renderList();
+          if (!searchEl.hidden) searchEl.focus();
+        } else {
+          select.value = opt.value;
+          emitChange();
+          close();
+          control.focus();
+        }
+      }
+      function onKeydown(e) {
+        if (isDisabled() || isReadonly()) return;
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          if (!open) openDropdown();
+          moveActive(1);
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          if (!open) openDropdown();
+          moveActive(-1);
+          return;
+        }
+        if (e.key === "Enter") {
+          if (!open) return;
+          e.preventDefault();
+          selectActive();
+          return;
+        }
+        if (e.key === "Escape") {
+          if (!open) return;
+          e.preventDefault();
+          close();
+          control.focus();
+          return;
+        }
+        if (e.key === "Tab") {
+          if (open) close();
+          return;
+        }
+        if (select.multiple && e.key === "Backspace") {
+          const searchEmpty = searchEl.hidden || searchEl.value.trim() === "";
+          if (searchEmpty) {
+            const selected = selectedNonEmpty();
+            const last = selected[selected.length - 1];
+            if (last) {
+              last.selected = false;
+              emitChange();
+              renderList();
+            }
+          }
+        }
+      }
+      const onDocDown = (e) => {
+        if (!root.contains(e.target)) close();
+      };
+      document.addEventListener("mousedown", onDocDown);
+      control.addEventListener("click", () => toggle());
+      control.addEventListener("keydown", onKeydown);
+      searchEl.addEventListener("keydown", onKeydown);
+      searchEl.addEventListener("input", () => {
+        filterQuery = searchEl.value ?? "";
+        renderList();
+        dispatch(select, "zselect:search", { q: filterQuery });
+      });
+      clearEl.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        clearValue();
+        if (open) renderList();
+        if (!searchEl.hidden) searchEl.focus();
+      });
+      select.addEventListener("change", () => {
+        renderLabel();
+        updateClearVisibility();
+        if (open) renderList();
+        dispatch(select, "zselect:change", { value: getSelected(select) });
+      });
+      function clearOptions(keepPlaceholder = true) {
+        const placeholderOpt = select.querySelector('option[value=""]');
+        select.innerHTML = "";
+        if (keepPlaceholder) {
+          const opt = document.createElement("option");
+          opt.value = "";
+          opt.textContent = placeholderOpt?.textContent ?? opts.placeholder ?? "Seleziona...";
+          select.append(opt);
+        }
+        select.value = "";
+        emitChange();
+      }
+      function setOptions(optionsArr, keepPlaceholder = true) {
+        const placeholderText = select.querySelector('option[value=""]')?.textContent ?? opts.placeholder ?? "Seleziona...";
+        select.innerHTML = "";
+        if (keepPlaceholder) {
+          const ph = document.createElement("option");
+          ph.value = "";
+          ph.textContent = placeholderText;
+          select.append(ph);
+        }
+        optionsArr.forEach((o) => {
+          const opt = document.createElement("option");
+          opt.value = String(o.value);
+          opt.textContent = o.label;
+          if (o.disabled) opt.disabled = true;
+          select.append(opt);
+        });
+        select.value = "";
+        emitChange();
+      }
+      function setLoading(isLoading) {
+        root.classList.toggle("is-loading", !!isLoading);
+        if (isLoading) {
+          control.disabled = true;
+          searchEl.disabled = true;
+          return;
+        }
+        applyStateToUI();
+      }
+      function findOptionEl(value) {
+        const v = String(value);
+        return Array.from(select.options).find((o) => o.value === v) ?? null;
+      }
+      function addOption(option, selectIt = false) {
+        const value = String(option.value);
+        if (findOptionEl(value)) return;
+        const opt = document.createElement("option");
+        opt.value = value;
+        opt.textContent = option.label;
+        if (option.disabled) opt.disabled = true;
+        select.append(opt);
+        if (selectIt) {
+          if (select.multiple) opt.selected = true;
+          else select.value = value;
+          emitChange();
+        } else {
+          refresh();
+        }
+      }
+      function removeOption(value) {
+        const opt = findOptionEl(value);
+        if (!opt) return;
+        const wasSelected = opt.selected;
+        opt.remove();
+        if (wasSelected) {
+          emitChange();
+        } else {
+          refresh();
+        }
+      }
+      function updateOption(value, patch) {
+        const opt = findOptionEl(value);
+        if (!opt) return;
+        if (patch.label !== void 0) opt.textContent = patch.label;
+        if (patch.disabled !== void 0) opt.disabled = !!patch.disabled;
+        refresh();
+      }
+      function upsertOption(option, selectIt = false) {
+        const value = String(option.value);
+        const opt = findOptionEl(value);
+        if (!opt) {
+          addOption(option, selectIt);
+          return;
+        }
+        opt.textContent = option.label;
+        opt.disabled = !!option.disabled;
+        if (selectIt) {
+          if (select.multiple) opt.selected = true;
+          else select.value = value;
+          select.dispatchEvent(new Event("change", { bubbles: true }));
+        } else {
+          refresh();
+        }
+      }
+      renderLabel();
+      updateClearVisibility();
+      if (options.disabled != null) select.disabled = !!options.disabled;
+      applyStateToUI();
+      const inst = {
+        select,
+        destroy() {
+          document.removeEventListener("mousedown", onDocDown);
+          root.remove();
+          select.style.position = prevStyle.position;
+          select.style.left = prevStyle.left;
+          select.style.width = prevStyle.width;
+          select.style.height = prevStyle.height;
+          instances.delete(select);
+        },
+        open: openDropdown,
+        close,
+        setValue(value) {
+          setSelected(select, value);
+        },
+        getValue() {
+          return getSelected(select);
+        },
+        clearOptions,
+        setOptions,
+        addOption,
+        removeOption,
+        updateOption,
+        upsertOption,
+        refresh,
+        setLoading,
+        setDisabled(v) {
+          select.disabled = !!v;
+          applyStateToUI();
+        },
+        setReadonly(v) {
+          readonly = !!v;
+          applyStateToUI();
+        },
+        isDisabled,
+        isReadonly
+      };
+      instances.set(select, inst);
+      return inst;
+    },
+    get(select) {
+      return instances.get(select) ?? null;
+    },
+    destroy(select) {
+      const inst = instances.get(select);
+      if (inst) inst.destroy();
+    }
+  };
+  return __toCommonJS(index_exports);
+})();
+//# sourceMappingURL=index.global.js.map