@dile/ui 3.2.1 → 3.3.0

package/components/selector/index.js

@@ -1,2 +1,3 @@
 export { DileSelector } from './src/DileSelector.js';
-export { DileSelectorItem } from './src/DileSelectorItem.js';
+export { DileSelectorItem } from './src/DileSelectorItem.js';
+export { DileSelectorOverlay } from './src/DileSelectorOverlay.js';

package/components/selector/selector-overlay.js

@@ -0,0 +1,3 @@
+import { DileSelectorOverlay } from "./src/DileSelectorOverlay.js";
+
+window.customElements.define("dile-selector-overlay", DileSelectorOverlay);

package/components/selector/selector-overlay.spec.js

@@ -0,0 +1,139 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './selector-overlay.js';
+import './selector-item.js';
+
+describe('dile-selector-overlay', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSelectorOverlay(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-selector-overlay');
+    await el.updateComplete;
+    return el;
+  }
+
+  function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  it('renders a bare rounded icon trigger with the default icon when label is empty', async () => {
+    const el = await renderSelectorOverlay(`
+      <dile-selector-overlay>
+        <dile-selector-item>One</dile-selector-item>
+        <dile-selector-item>Two</dile-selector-item>
+      </dile-selector-overlay>
+    `);
+
+    const trigger = el.shadowRoot.getElementById('trigger');
+    const icon = trigger.querySelector('dile-lucide-icon');
+    expect(icon).toBeTruthy();
+    expect(icon.getAttribute('icon')).toBe('ellipsis-vertical');
+    expect(icon.hasAttribute('rounded')).toBe(true);
+    // dile-lucide-icon forwards `rounded` to the inner icon it renders in its own shadow DOM
+    expect(icon.shadowRoot.querySelector('[rounded]')).toBeTruthy();
+    expect(trigger.querySelector('dile-lucide-badge')).toBeFalsy();
+  });
+
+  it('by default, label is shown as static text regardless of the selection', async () => {
+    const el = await renderSelectorOverlay(`
+      <dile-selector-overlay label="Menu" selected="0">
+        <dile-selector-item>One</dile-selector-item>
+        <dile-selector-item>Two</dile-selector-item>
+      </dile-selector-overlay>
+    `);
+
+    const trigger = el.shadowRoot.getElementById('trigger');
+    const badge = trigger.querySelector('dile-lucide-badge');
+    expect(badge).toBeTruthy();
+    expect(badge.textContent.trim()).toBe('Menu');
+    expect(badge.getAttribute('icon')).toBe('ellipsis-vertical');
+    expect(trigger.querySelector('dile-lucide-icon')).toBeFalsy();
+
+    el.querySelectorAll('dile-selector-item')[1].shadowRoot.querySelector('article').click();
+    await el.updateComplete;
+
+    expect(trigger.querySelector('dile-lucide-badge').textContent.trim()).toBe('Menu');
+  });
+
+  it('with dynamicLabel, the trigger label follows the selected item text and updates when selection changes', async () => {
+    const el = await renderSelectorOverlay(`
+      <dile-selector-overlay dynamicLabel selected="1">
+        <dile-selector-item>One</dile-selector-item>
+        <dile-selector-item>Two</dile-selector-item>
+      </dile-selector-overlay>
+    `);
+
+    const trigger = el.shadowRoot.getElementById('trigger');
+    expect(trigger.querySelector('dile-lucide-badge').textContent.trim()).toBe('Two');
+
+    el.querySelectorAll('dile-selector-item')[0].shadowRoot.querySelector('article').click();
+    await el.updateComplete;
+
+    expect(trigger.querySelector('dile-lucide-badge').textContent.trim()).toBe('One');
+  });
+
+  it('with dynamicLabel and nothing selected, label falls back to the label property', async () => {
+    const el = await renderSelectorOverlay(`
+      <dile-selector-overlay dynamicLabel label="Choose an option">
+        <dile-selector-item>One</dile-selector-item>
+        <dile-selector-item>Two</dile-selector-item>
+      </dile-selector-overlay>
+    `);
+
+    const trigger = el.shadowRoot.getElementById('trigger');
+    expect(trigger.querySelector('dile-lucide-badge').textContent.trim()).toBe('Choose an option');
+  });
+
+  it('uses a custom icon name when the icon property is set', async () => {
+    const el = await renderSelectorOverlay(`
+      <dile-selector-overlay icon="star" label="Two">
+        <dile-selector-item>One</dile-selector-item>
+        <dile-selector-item>Two</dile-selector-item>
+      </dile-selector-overlay>
+    `);
+
+    const trigger = el.shadowRoot.getElementById('trigger');
+    expect(trigger.querySelector('dile-lucide-badge').getAttribute('icon')).toBe('star');
+  });
+
+  it('opens the internal dile-menu-overlay when the trigger is clicked', async () => {
+    const el = await renderSelectorOverlay(`
+      <dile-selector-overlay>
+        <dile-selector-item>One</dile-selector-item>
+        <dile-selector-item>Two</dile-selector-item>
+      </dile-selector-overlay>
+    `);
+
+    const menuOverlay = el.shadowRoot.querySelector('dile-menu-overlay');
+    el.shadowRoot.getElementById('trigger').click();
+    await wait(100);
+
+    expect(menuOverlay.shadowRoot.getElementById('overlay').classList.contains('opened')).toBe(true);
+  });
+
+  it('selecting an item dispatches dile-selected-changed and closes the overlay', async () => {
+    const el = await renderSelectorOverlay(`
+      <dile-selector-overlay>
+        <dile-selector-item>One</dile-selector-item>
+        <dile-selector-item>Two</dile-selector-item>
+      </dile-selector-overlay>
+    `);
+
+    const menuOverlay = el.shadowRoot.querySelector('dile-menu-overlay');
+    el.shadowRoot.getElementById('trigger').click();
+    await wait(100);
+
+    let detail = null;
+    el.addEventListener('dile-selected-changed', (e) => { detail = e.detail; });
+
+    const items = el.querySelectorAll('dile-selector-item');
+    items[1].shadowRoot.querySelector('article').click();
+    await el.updateComplete;
+
+    expect(detail.selected).toBe(1);
+    expect(el.selected).toBe(1);
+    expect(menuOverlay.shadowRoot.getElementById('overlay').classList.contains('opened')).toBe(false);
+  });
+});

package/components/selector/src/DileSelectorOverlay.js

@@ -0,0 +1,133 @@
+import { html, css, LitElement } from "lit";
+import { DileSelectable } from "../../../mixins/selectable/index.js";
+import "../../menu-overlay/menu-overlay.js";
+import "@dile/iconlib/dile-lucide-badge.js";
+import "@dile/iconlib/dile-lucide-icon.js";
+import "@dile/iconlib/lucide-icons/ellipsis-vertical.js";
+
+export class DileSelectorOverlay extends DileSelectable(LitElement) {
+
+  static get properties() {
+    return {
+      /** Text shown next to the trigger icon. When null or empty, only the icon is shown.
+       *  Fixed by default; see dynamicLabel to have it follow the selected item's text instead. */
+      label: { type: String },
+
+      /** When true, label automatically follows the selected item's text instead of staying fixed */
+      dynamicLabel: { type: Boolean },
+
+      /** Lucide icon name used in the trigger. Defaults to "ellipsis-vertical" */
+      icon: { type: String },
+
+      _displayLabel: { state: true },
+
+      /** Accessible label for the trigger when there is no visible label text */
+      triggerAriaLabel: { type: String },
+
+      /** Forwarded to the internal dile-menu-overlay */
+      horizontalAlign: { type: String },
+
+      /** Forwarded to the internal dile-menu-overlay */
+      verticalAlign: { type: String },
+
+      /** Forwarded to the internal dile-menu-overlay */
+      moveTop: { type: Number },
+
+      /** Forwarded to the internal dile-menu-overlay */
+      moveLeft: { type: Number },
+    };
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+      #trigger {
+        display: inline-flex;
+        cursor: pointer;
+      }
+    `;
+  }
+
+  constructor() {
+    super();
+    this.label = null;
+    this.dynamicLabel = false;
+    this.icon = 'ellipsis-vertical';
+    this._displayLabel = null;
+    this.triggerAriaLabel = 'Options';
+    this.horizontalAlign = 'under_left';
+    this.verticalAlign = 'bottom';
+    this.moveTop = 0;
+    this.moveLeft = 0;
+  }
+
+  render() {
+    return html`
+      <dile-menu-overlay
+        horizontalAlign="${this.horizontalAlign}"
+        verticalAlign="${this.verticalAlign}"
+        moveTop="${this.moveTop}"
+        moveLeft="${this.moveLeft}"
+        closeOnClickInside
+      >
+        <span
+          slot="trigger"
+          id="trigger"
+          role="button"
+          tabindex="0"
+          aria-haspopup="true"
+          aria-label="${this._displayLabel || this.triggerAriaLabel}"
+          @keydown="${this._onTriggerKeydown}"
+        >
+          ${this._displayLabel
+            ? html`<dile-lucide-badge icon="${this.icon}">${this._displayLabel}</dile-lucide-badge>`
+            : html`<dile-lucide-icon icon="${this.icon}" rounded></dile-lucide-icon>`
+          }
+        </span>
+        <div slot="content">
+          <slot></slot>
+        </div>
+      </dile-menu-overlay>
+    `;
+  }
+
+  willUpdate(changedProperties) {
+    this._updateDisplayLabel();
+  }
+
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    // On the very first render the <slot> didn't exist yet when willUpdate ran,
+    // so the initial selection couldn't be resolved. Recompute now that it does.
+    this._updateDisplayLabel();
+  }
+
+  _updateDisplayLabel() {
+    if (!this.dynamicLabel) {
+      this._displayLabel = this.label;
+      return;
+    }
+    // Computed directly from `selected`/`attrForSelected` (mirroring DileSelectable.setSelectedItem)
+    // instead of reading `_items[].selected`, so the trigger label is correct on the very same
+    // render pass, without waiting for an extra update cycle.
+    const slot = this.shadowRoot.querySelector('slot');
+    const items = slot ? slot.assignedElements({ flatten: true }) : [];
+    let selectedItem;
+    if (this.attrForSelected) {
+      selectedItem = items.find((item) => item.getAttribute(this.attrForSelected) == this.selected);
+    } else {
+      const selectedIndex = parseInt(this.selected);
+      selectedItem = !isNaN(selectedIndex) ? items[selectedIndex] : undefined;
+    }
+    this._displayLabel = selectedItem ? selectedItem.textContent.trim() : this.label;
+  }
+
+  _onTriggerKeydown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      e.currentTarget.click();
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -27,5 +27,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d2ea4a1b93655d34f8e5113726283f2a311370cc"
+  "gitHead": "e123ebdc49cb479a03e4b5689ddc6fbfb4ab39b1"
 }