@duskmoon-dev/el-autocomplete 0.4.0

package/dist/esm/index.js

@@ -0,0 +1,420 @@
+// src/el-dm-autocomplete.ts
+import { BaseElement, css as cssTag } from "@duskmoon-dev/el-core";
+import { css } from "@duskmoon-dev/core/components/autocomplete";
+var strippedCss = css.replace(/@layer\s+components\s*\{/, "").replace(/\}[\s]*$/, "");
+var styles = cssTag`
+  ${strippedCss}
+
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .autocomplete {
+    width: 100%;
+  }
+`;
+
+class ElDmAutocomplete extends BaseElement {
+  static properties = {
+    value: { type: String, reflect: true, default: "" },
+    options: { type: String, reflect: true, default: "[]" },
+    multiple: { type: Boolean, reflect: true, default: false },
+    disabled: { type: Boolean, reflect: true, default: false },
+    clearable: { type: Boolean, reflect: true, default: false },
+    placeholder: { type: String, reflect: true, default: "" },
+    size: { type: String, reflect: true, default: "md" },
+    loading: { type: Boolean, reflect: true, default: false },
+    noResultsText: { type: String, reflect: true, default: "No results found" }
+  };
+  value;
+  options;
+  multiple;
+  disabled;
+  clearable;
+  placeholder;
+  size;
+  loading;
+  noResultsText;
+  _isOpen = false;
+  _searchValue = "";
+  _highlightedIndex = -1;
+  _selectedValues = [];
+  constructor() {
+    super();
+    this.attachStyles(styles);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._parseValue();
+    document.addEventListener("click", this._handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this._handleOutsideClick);
+  }
+  _handleOutsideClick = (e) => {
+    if (!this.contains(e.target)) {
+      this._close();
+    }
+  };
+  _parseValue() {
+    if (this.multiple && this.value) {
+      try {
+        this._selectedValues = JSON.parse(this.value);
+      } catch {
+        this._selectedValues = this.value ? [this.value] : [];
+      }
+    } else {
+      this._selectedValues = this.value ? [this.value] : [];
+    }
+  }
+  _getOptions() {
+    try {
+      return JSON.parse(this.options);
+    } catch {
+      return [];
+    }
+  }
+  _getFilteredOptions() {
+    const allOptions = this._getOptions();
+    if (!this._searchValue)
+      return allOptions;
+    const search = this._searchValue.toLowerCase();
+    return allOptions.filter((opt) => opt.label.toLowerCase().includes(search) || opt.value.toLowerCase().includes(search) || opt.description?.toLowerCase().includes(search));
+  }
+  _open() {
+    if (this.disabled)
+      return;
+    this._isOpen = true;
+    this._highlightedIndex = -1;
+    this.update();
+  }
+  _close() {
+    this._isOpen = false;
+    this._searchValue = "";
+    this._highlightedIndex = -1;
+    this.update();
+  }
+  _toggle() {
+    if (this._isOpen) {
+      this._close();
+    } else {
+      this._open();
+    }
+  }
+  _handleInputChange(e) {
+    const input = e.target;
+    this._searchValue = input.value;
+    this._highlightedIndex = -1;
+    if (!this._isOpen) {
+      this._open();
+    } else {
+      this.update();
+    }
+    this.emit("input", { searchValue: this._searchValue });
+  }
+  _handleKeyDown(e) {
+    const filteredOptions = this._getFilteredOptions().filter((opt) => !opt.disabled);
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!this._isOpen) {
+          this._open();
+        } else {
+          this._highlightedIndex = Math.min(this._highlightedIndex + 1, filteredOptions.length - 1);
+          this.update();
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (this._isOpen) {
+          this._highlightedIndex = Math.max(this._highlightedIndex - 1, 0);
+          this.update();
+        }
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (this._isOpen && this._highlightedIndex >= 0 && this._highlightedIndex < filteredOptions.length) {
+          this._selectOption(filteredOptions[this._highlightedIndex]);
+        } else if (!this._isOpen) {
+          this._open();
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        this._close();
+        break;
+      case "Backspace":
+        if (this.multiple && !this._searchValue && this._selectedValues.length > 0) {
+          const lastValue = this._selectedValues[this._selectedValues.length - 1];
+          this._removeValue(lastValue);
+        }
+        break;
+    }
+  }
+  _selectOption(option) {
+    if (option.disabled)
+      return;
+    if (this.multiple) {
+      const index = this._selectedValues.indexOf(option.value);
+      if (index === -1) {
+        this._selectedValues = [...this._selectedValues, option.value];
+      } else {
+        this._selectedValues = this._selectedValues.filter((v) => v !== option.value);
+      }
+      this.value = JSON.stringify(this._selectedValues);
+      this._searchValue = "";
+    } else {
+      this._selectedValues = [option.value];
+      this.value = option.value;
+      this._close();
+    }
+    this.emit("change", {
+      value: this.value,
+      selectedValues: this._selectedValues,
+      option
+    });
+    this.update();
+  }
+  _removeValue(val) {
+    this._selectedValues = this._selectedValues.filter((v) => v !== val);
+    this.value = this.multiple ? JSON.stringify(this._selectedValues) : this._selectedValues[0] || "";
+    this.emit("change", {
+      value: this.value,
+      selectedValues: this._selectedValues
+    });
+    this.update();
+  }
+  _clear() {
+    this._selectedValues = [];
+    this._searchValue = "";
+    this.value = this.multiple ? "[]" : "";
+    this.emit("clear", { value: this.value });
+    this.emit("change", {
+      value: this.value,
+      selectedValues: this._selectedValues
+    });
+    this.update();
+  }
+  _getDisplayValue() {
+    if (this._selectedValues.length === 0)
+      return "";
+    const allOptions = this._getOptions();
+    if (this.multiple) {
+      return "";
+    }
+    const selectedOption = allOptions.find((opt) => opt.value === this._selectedValues[0]);
+    return selectedOption?.label || this._selectedValues[0];
+  }
+  _highlightMatch(text) {
+    if (!this._searchValue)
+      return text;
+    const search = this._searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const regex = new RegExp(`(${search})`, "gi");
+    return text.replace(regex, '<span class="autocomplete-highlight">$1</span>');
+  }
+  _renderTags() {
+    const allOptions = this._getOptions();
+    return this._selectedValues.map((val) => {
+      const option = allOptions.find((opt) => opt.value === val);
+      const label = option?.label || val;
+      return `
+        <span class="autocomplete-tag">
+          <span>${label}</span>
+          <button
+            type="button"
+            class="autocomplete-tag-remove"
+            data-value="${val}"
+            ${this.disabled ? "disabled" : ""}
+          >&times;</button>
+        </span>
+      `;
+    }).join("");
+  }
+  _renderOptions() {
+    const filteredOptions = this._getFilteredOptions();
+    if (this.loading) {
+      return `
+        <div class="autocomplete-loading">
+          <span>Loading...</span>
+        </div>
+      `;
+    }
+    if (filteredOptions.length === 0) {
+      return `
+        <div class="autocomplete-no-results">${this.noResultsText}</div>
+      `;
+    }
+    const groups = new Map;
+    const ungrouped = [];
+    for (const opt of filteredOptions) {
+      if (opt.group) {
+        const group = groups.get(opt.group) || [];
+        group.push(opt);
+        groups.set(opt.group, group);
+      } else {
+        ungrouped.push(opt);
+      }
+    }
+    let html = "";
+    let globalIndex = 0;
+    for (const [groupName, options] of groups) {
+      html += `<div class="autocomplete-group-header">${groupName}</div>`;
+      for (const opt of options) {
+        html += this._renderOption(opt, globalIndex++);
+      }
+    }
+    for (const opt of ungrouped) {
+      html += this._renderOption(opt, globalIndex++);
+    }
+    return html;
+  }
+  _renderOption(opt, index) {
+    const isSelected = this._selectedValues.includes(opt.value);
+    const isHighlighted = index === this._highlightedIndex;
+    const classes = [
+      "autocomplete-option",
+      isSelected ? "selected" : "",
+      isHighlighted ? "highlighted" : "",
+      opt.disabled ? "disabled" : ""
+    ].filter(Boolean).join(" ");
+    return `
+      <div
+        class="${classes}"
+        data-value="${opt.value}"
+        data-index="${index}"
+        role="option"
+        aria-selected="${isSelected}"
+        ${opt.disabled ? 'aria-disabled="true"' : ""}
+      >
+        ${this.multiple ? `
+          <span class="autocomplete-option-icon">
+            ${isSelected ? "✓" : ""}
+          </span>
+        ` : ""}
+        <div class="autocomplete-option-content">
+          <div class="autocomplete-option-label">${this._highlightMatch(opt.label)}</div>
+          ${opt.description ? `<div class="autocomplete-option-description">${this._highlightMatch(opt.description)}</div>` : ""}
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    const sizeClass = this.size !== "md" ? `autocomplete-${this.size}` : "";
+    const openClass = this._isOpen ? "autocomplete-open" : "";
+    const clearableClass = this.clearable ? "autocomplete-clearable" : "";
+    const showClear = this.clearable && this._selectedValues.length > 0 && !this.disabled;
+    if (this.multiple) {
+      return `
+        <div class="autocomplete ${sizeClass} ${openClass} ${clearableClass}">
+          <div class="autocomplete-tags">
+            ${this._renderTags()}
+            <input
+              type="text"
+              class="autocomplete-tags-input"
+              placeholder="${this._selectedValues.length === 0 ? this.placeholder : ""}"
+              value="${this._searchValue}"
+              ${this.disabled ? "disabled" : ""}
+              role="combobox"
+              aria-expanded="${this._isOpen}"
+              aria-haspopup="listbox"
+              autocomplete="off"
+            />
+          </div>
+          ${showClear ? `
+            <button type="button" class="autocomplete-clear" aria-label="Clear selection">&times;</button>
+          ` : ""}
+          <div class="autocomplete-dropdown" role="listbox">
+            ${this._renderOptions()}
+          </div>
+        </div>
+      `;
+    }
+    return `
+      <div class="autocomplete ${sizeClass} ${openClass} ${clearableClass}">
+        <input
+          type="text"
+          class="autocomplete-input"
+          placeholder="${this.placeholder}"
+          value="${this._isOpen ? this._searchValue : this._getDisplayValue()}"
+          ${this.disabled ? "disabled" : ""}
+          role="combobox"
+          aria-expanded="${this._isOpen}"
+          aria-haspopup="listbox"
+          autocomplete="off"
+        />
+        ${showClear ? `
+          <button type="button" class="autocomplete-clear" aria-label="Clear selection">&times;</button>
+        ` : ""}
+        <div class="autocomplete-dropdown" role="listbox">
+          ${this._renderOptions()}
+        </div>
+      </div>
+    `;
+  }
+  update() {
+    super.update();
+    this._attachEventListeners();
+  }
+  _attachEventListeners() {
+    const input = this.shadowRoot?.querySelector(".autocomplete-input, .autocomplete-tags-input");
+    if (input) {
+      input.removeEventListener("input", this._handleInputChange.bind(this));
+      input.removeEventListener("keydown", this._handleKeyDown.bind(this));
+      input.removeEventListener("focus", this._open.bind(this));
+      input.addEventListener("input", this._handleInputChange.bind(this));
+      input.addEventListener("keydown", this._handleKeyDown.bind(this));
+      input.addEventListener("focus", this._open.bind(this));
+    }
+    const clearBtn = this.shadowRoot?.querySelector(".autocomplete-clear");
+    if (clearBtn) {
+      clearBtn.removeEventListener("click", this._clear.bind(this));
+      clearBtn.addEventListener("click", this._clear.bind(this));
+    }
+    const options = this.shadowRoot?.querySelectorAll(".autocomplete-option");
+    options?.forEach((opt) => {
+      opt.removeEventListener("click", this._handleOptionClick);
+      opt.addEventListener("click", this._handleOptionClick);
+    });
+    const tagRemoves = this.shadowRoot?.querySelectorAll(".autocomplete-tag-remove");
+    tagRemoves?.forEach((btn) => {
+      btn.removeEventListener("click", this._handleTagRemove);
+      btn.addEventListener("click", this._handleTagRemove);
+    });
+  }
+  _handleOptionClick = (e) => {
+    e.stopPropagation();
+    const target = e.currentTarget;
+    const value = target.dataset.value;
+    if (value) {
+      const allOptions = this._getOptions();
+      const option = allOptions.find((opt) => opt.value === value);
+      if (option) {
+        this._selectOption(option);
+      }
+    }
+  };
+  _handleTagRemove = (e) => {
+    e.stopPropagation();
+    const target = e.currentTarget;
+    const value = target.dataset.value;
+    if (value) {
+      this._removeValue(value);
+    }
+  };
+}
+
+// src/index.ts
+function register() {
+  if (!customElements.get("el-dm-autocomplete")) {
+    customElements.define("el-dm-autocomplete", ElDmAutocomplete);
+  }
+}
+export {
+  register,
+  ElDmAutocomplete
+};