Update select with overlayMenu

Author: Templarian

src/pg/inputSelect/__examples__/basic/basic.ts

@@ -19,12 +19,13 @@ export default class XPgInputSelectBasic extends HTMLElement {
       { label: 'Option 3', value: 'option3' },
       { label: 'Option 4', value: 'option4' }
     );
-    this.$input.value = this.$input.options[1].value;
-    this.$input.addEventListener('change', this.handleChange.bind(this));
+    //this.$input.value = this.$input.options[1].value;
+    this.$input.addEventListener('change', this.#handleChange.bind(this));
   }
 
-  handleChange(e) {
+  #handleChange(e) {
     const { value } = e.detail;
+    this.$input.value = value;
     this.$value.innerText = `${value}`;
   }
 }

src/pg/inputSelect/inputSelect.css

@@ -1,31 +1,32 @@
 :host {
-  display: block;
-  font-family: var(--pg-font-family);
+  display: contents;
 }
 
-[part="wrapper"] {
+[part=button] {
+  font-family: var(--pg-font-family);
+  text-align: left;
   display: grid;
   grid-template-rows: auto;
   grid-template-columns: 100% 0;
-}
-
-[part="select"] {
-  grid-row: 1;
-  grid-column: 1;
   border: 1px solid var(--pg-input-select-border-color, #453C4F);
   border-radius: 0.25rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0;
   width: 100%;
   font-size: 1rem;
   outline: 0;
-  -webkit-appearance: none;
 }
 
-[part="select"]:focus {
+[part=button]:focus {
   box-shadow: 0 0 0 3px rgba(79, 143, 249, 0.5);
 }
 
-[part="chevron"] {
+[part=label] {
+  grid-row: 1;
+  grid-column: 1;
+  padding: 0.5rem 0.75rem;
+}
+
+[part=chevron] {
   grid-row: 1;
   grid-column: 2;
   pointer-events: none;

src/pg/inputSelect/inputSelect.html

@@ -1,4 +1,4 @@
-<div part="wrapper">
-  <button part="select"></button>
+<button part="button">
+  <span part="label"></span>
   <svg part="chevron" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
-</div>
+</button>

src/pg/inputSelect/inputSelect.ts

@@ -1,4 +1,5 @@
 import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+import PgOverlayMenu from '../overlayMenu/overlayMenu';
 
 import template from './inputSelect.html';
 import style from './inputSelect.css';
@@ -18,49 +19,36 @@ export default class PgInputSelect extends HTMLElement {
   @Prop() value: string = '';
   @Prop() name: string = '';
 
-  @Part() $select: HTMLSelectElement;
+  @Part() $button: HTMLButtonElement;
+  @Part() $label: HTMLSpanElement;
 
-  //cacheKeys: string[] = [];
+  connectedCallback() {
+    this.$button.addEventListener('click', this.#handleClick.bind(this));
+  }
 
   render(changes) {
-    /*if (changes.options) {
-      this.options.forEach((o) => {
-        const option = document.createElement('option');
-        option.textContent = o.label;
-        option.value = o.value;
-        this.$select.appendChild(option);
-      });
-      if (this.$select.value !== this.value) {
-        this.$select.value = this.value;
-      }
-    }*/
     if (changes.value) {
-      if (this.$select.value !== this.value) {
-        this.$select.value = this.value;
-      }
+      this.$label.textContent = this.value ? this.value : '\u00A0';
     }
   }
 
-  connectedCallback() {
-    forEach({
-      container: this.$select,
-      items: this.options,
-      type: () => {
-        return HTMLOptionElement;
-      }
-    })
-    this.$select.addEventListener('change', this.handleSelect.bind(this));
-  }
-
-  handleSelect(e) {
-    const { value } = e.target;
-    this.dispatchEvent(
-      new CustomEvent('change', {
+  #menuOpen = false;
+  async #handleClick() {
+    if (this.#menuOpen) { return; }
+    this.#menuOpen = true;
+    const result = await PgOverlayMenu.open({
+      source: this.$button,
+      value: this.options.find(x => x.value === this.value) ?? null,
+      items: this.options
+    });
+    if (result !== undefined) {
+      this.dispatchEvent(new CustomEvent('change', {
         detail: {
-          value,
-          name: this.name
+          value: result.value
         }
-      })
-    )
+      }));
+      this.$label.textContent = result.label;
+    }
+    this.#menuOpen = false;
   }
 }

src/pg/menu/menu.ts

@@ -45,7 +45,7 @@ export default class PgMenu extends HTMLElement {
    * @param startIndex Start index.
    * @param endIndex End index.
    */
-  getItemHeight(startIndex, endIndex): number {
+  getItemOffset(startIndex, endIndex): number {
     const computedStyle = getComputedStyle(this.$items);
     let height = parseInt(computedStyle.getPropertyValue('padding-top'), 10);
     const total = this.$items.children.length;
@@ -59,4 +59,9 @@ export default class PgMenu extends HTMLElement {
     return height;
   }
 
+  getItemHeight(index) {
+    const ele = this.$items.children[index] as any;
+    return ele.getHeight();
+  }
+
 }

src/pg/overlayMenu/overlayMenu.ts

@@ -37,6 +37,7 @@ export default class PgOverlayMenu extends PgOverlay {
     // Position (replace with css once Firefox supports it)
     const rect = this.source?.getBoundingClientRect();
     let x = rect?.left ?? 0, y = rect?.top ?? 0;
+    this.$overlay.style.minWidth = `${rect?.width}px`;
     const value = this.value === null || typeof this.value !== 'object'
       ? this.value
       : this.value.value;
@@ -45,8 +46,18 @@ export default class PgOverlayMenu extends PgOverlay {
       ? -1
       : this.items.findIndex(x => x.value === value);
     if (index !== -1) {
+      const height = this.$menu.getItemHeight(index);
       // Overlap item
-      y -= this.$menu.getItemHeight(0, index);
+      y -= this.$menu.getItemOffset(0, index);
+      if (rect?.height !== height && rect?.height) {
+        y += (rect.height - height) / 2;
+      }
+    } else if (this.items.length > 0) {
+      const height = this.$menu.getItemHeight(0);
+      y -= this.$menu.getItemOffset(0, 0);
+      if (rect?.height !== height && rect?.height) {
+        y += (rect.height - height) / 2;
+      }
     }
     this.$overlay.style.translate = `${x}px ${y}px`;
     // Focus