@duskmoon-dev/el-autocomplete 0.4.0 → 0.6.0

package/src/el-dm-autocomplete.ts

@@ -1,4 +1,4 @@
-import { BaseElement, css as cssTag } from '@duskmoon-dev/el-core';
+import { BaseElement, css as cssTag } from '@duskmoon-dev/el-base';
 import { css } from '@duskmoon-dev/core/components/autocomplete';
 
 // Strip @layer components wrapper for Shadow DOM
@@ -20,6 +20,25 @@ const styles = cssTag`
   .autocomplete {
     width: 100%;
   }
+
+  /* Popover API styles for dropdown — override core's absolute positioning
+     and visibility rules since the top layer breaks parent-child CSS selectors */
+  .autocomplete-dropdown {
+    position: fixed;
+    margin: 0;
+    border: none;
+    padding: 0;
+    inset: unset;
+    /* Override core's hidden defaults — popover API controls visibility */
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+    transition: none;
+  }
+
+  .autocomplete-dropdown:popover-open {
+    display: block;
+  }
 `;
 
 export type AutocompleteSize = 'sm' | 'md' | 'lg';
@@ -34,31 +53,32 @@ export interface AutocompleteOption {
 
 export 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: { type: String, reflect: true },
+    options: { type: String, reflect: true },
+    multiple: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    clearable: { type: Boolean, reflect: true },
+    placeholder: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    loading: { type: Boolean, reflect: true },
+    noResultsText: { type: String, reflect: true, attribute: 'no-results-text' },
   };
 
-  value!: string;
-  options!: string;
-  multiple!: boolean;
-  disabled!: boolean;
-  clearable!: boolean;
-  placeholder!: string;
-  size!: AutocompleteSize;
-  loading!: boolean;
-  noResultsText!: string;
+  declare value: string;
+  declare options: string;
+  declare multiple: boolean;
+  declare disabled: boolean;
+  declare clearable: boolean;
+  declare placeholder: string;
+  declare size: AutocompleteSize;
+  declare loading: boolean;
+  declare noResultsText: string;
 
   private _isOpen = false;
   private _searchValue = '';
   private _highlightedIndex = -1;
   private _selectedValues: string[] = [];
+  private _scrollHandler: (() => void) | null = null;
 
   constructor() {
     super();
@@ -74,6 +94,11 @@ export class ElDmAutocomplete extends BaseElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener('click', this._handleOutsideClick);
+    if (this._scrollHandler) {
+      window.removeEventListener('scroll', this._scrollHandler, true);
+      window.removeEventListener('resize', this._scrollHandler);
+      this._scrollHandler = null;
+    }
   }
 
   private _handleOutsideClick = (e: MouseEvent) => {
@@ -96,7 +121,7 @@ export class ElDmAutocomplete extends BaseElement {
 
   private _getOptions(): AutocompleteOption[] {
     try {
-      return JSON.parse(this.options);
+      return JSON.parse(this.options || '[]');
     } catch {
       return [];
     }
@@ -120,15 +145,77 @@ export class ElDmAutocomplete extends BaseElement {
     this._isOpen = true;
     this._highlightedIndex = -1;
     this.update();
+
+    const dropdown = this.shadowRoot?.querySelector('.autocomplete-dropdown') as HTMLElement;
+    const trigger = this.shadowRoot?.querySelector('.autocomplete-input, .autocomplete-tags') as HTMLElement;
+    if (dropdown && trigger) {
+      try {
+        dropdown.showPopover();
+        this._positionDropdown(dropdown, trigger);
+      } catch {
+        // Ignore if already shown
+      }
+
+      this._scrollHandler = () => {
+        this._positionDropdown(dropdown, trigger);
+      };
+      window.addEventListener('scroll', this._scrollHandler, true);
+      window.addEventListener('resize', this._scrollHandler);
+    }
   }
 
   private _close() {
+    if (!this._isOpen) return;
     this._isOpen = false;
     this._searchValue = '';
     this._highlightedIndex = -1;
+
+    if (this._scrollHandler) {
+      window.removeEventListener('scroll', this._scrollHandler, true);
+      window.removeEventListener('resize', this._scrollHandler);
+      this._scrollHandler = null;
+    }
+
+    const dropdown = this.shadowRoot?.querySelector('.autocomplete-dropdown') as HTMLElement;
+    if (dropdown) {
+      try {
+        dropdown.hidePopover();
+      } catch {
+        // Ignore if already hidden
+      }
+    }
+
     this.update();
   }
 
+  private _positionDropdown(dropdown: HTMLElement, trigger: HTMLElement) {
+    const triggerRect = trigger.getBoundingClientRect();
+    const dropdownRect = dropdown.getBoundingClientRect();
+
+    // Position below the trigger
+    let top = triggerRect.bottom + 4;
+    let left = triggerRect.left;
+
+    // If dropdown would overflow the bottom, position above
+    if (top + dropdownRect.height > window.innerHeight) {
+      top = triggerRect.top - dropdownRect.height - 4;
+    }
+
+    // Clamp to viewport right edge
+    if (left + triggerRect.width > window.innerWidth) {
+      left = window.innerWidth - triggerRect.width - 8;
+    }
+
+    // Clamp to viewport left edge
+    if (left < 8) {
+      left = 8;
+    }
+
+    dropdown.style.top = `${top}px`;
+    dropdown.style.left = `${left}px`;
+    dropdown.style.width = `${triggerRect.width}px`;
+  }
+
   private _toggle() {
     if (this._isOpen) {
       this._close();
@@ -325,7 +412,7 @@ export class ElDmAutocomplete extends BaseElement {
 
     if (filteredOptions.length === 0) {
       return `
-        <div class="autocomplete-no-results">${this.noResultsText}</div>
+        <div class="autocomplete-no-results">${this.noResultsText || 'No results found'}</div>
       `;
     }
 
@@ -402,12 +489,13 @@ export class ElDmAutocomplete extends BaseElement {
   }
 
   render() {
-    const sizeClass =
-      this.size !== 'md' ? `autocomplete-${this.size}` : '';
+    const size = this.size || 'md';
+    const sizeClass = size !== 'md' ? `autocomplete-${size}` : '';
     const openClass = this._isOpen ? 'autocomplete-open' : '';
     const clearableClass = this.clearable ? 'autocomplete-clearable' : '';
     const showClear =
       this.clearable && this._selectedValues.length > 0 && !this.disabled;
+    const placeholder = this.placeholder || '';
 
     if (this.multiple) {
       return `
@@ -417,7 +505,7 @@ export class ElDmAutocomplete extends BaseElement {
             <input
               type="text"
               class="autocomplete-tags-input"
-              placeholder="${this._selectedValues.length === 0 ? this.placeholder : ''}"
+              placeholder="${this._selectedValues.length === 0 ? placeholder : ''}"
               value="${this._searchValue}"
               ${this.disabled ? 'disabled' : ''}
               role="combobox"
@@ -433,7 +521,7 @@ export class ElDmAutocomplete extends BaseElement {
           `
               : ''
           }
-          <div class="autocomplete-dropdown" role="listbox">
+          <div class="autocomplete-dropdown" role="listbox" popover="manual">
             ${this._renderOptions()}
           </div>
         </div>
@@ -445,7 +533,7 @@ export class ElDmAutocomplete extends BaseElement {
         <input
           type="text"
           class="autocomplete-input"
-          placeholder="${this.placeholder}"
+          placeholder="${placeholder}"
           value="${this._isOpen ? this._searchValue : this._getDisplayValue()}"
           ${this.disabled ? 'disabled' : ''}
           role="combobox"
@@ -460,7 +548,7 @@ export class ElDmAutocomplete extends BaseElement {
         `
             : ''
         }
-        <div class="autocomplete-dropdown" role="listbox">
+        <div class="autocomplete-dropdown" role="listbox" popover="manual">
           ${this._renderOptions()}
         </div>
       </div>
@@ -470,6 +558,20 @@ export class ElDmAutocomplete extends BaseElement {
   update() {
     super.update();
     this._attachEventListeners();
+
+    // Re-show popover after DOM re-render (innerHTML replacement loses popover state)
+    if (this._isOpen) {
+      const dropdown = this.shadowRoot?.querySelector('.autocomplete-dropdown') as HTMLElement;
+      const trigger = this.shadowRoot?.querySelector('.autocomplete-input, .autocomplete-tags') as HTMLElement;
+      if (dropdown && trigger) {
+        try {
+          dropdown.showPopover();
+          this._positionDropdown(dropdown, trigger);
+        } catch {
+          // Ignore if already shown
+        }
+      }
+    }
   }
 
   private _attachEventListeners() {