@dile/crud 2.2.1 → 2.2.3

package/components/ajax-select-crud/ajax-select-crud-overlay.spec.js

@@ -153,6 +153,26 @@ describe('dile-ajax-select-crud-overlay', () => {
     });
   });
 
+  describe('Icons (inherited from dile-select-ajax-overlay)', () => {
+    it('propagates iconProperty and icon to data-icon on the generated options/select', async () => {
+      mockAxios([
+        { id: 1, name: 'Spain' },
+        { id: 2, name: 'France', iconName: 'material.star' },
+      ]);
+      const el = await renderCrudSelect(`
+        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" iconProperty="iconName" icon="lucide.globe" delay="10"></dile-ajax-select-crud-overlay>
+      `);
+
+      await typeKeyword(el, 'sp');
+
+      const options = el.select.options;
+      // Spain has no iconName of its own, so it falls back to the select-level default.
+      expect(options[0].icon).toBe('lucide.globe');
+      // France declares its own icon via iconProperty, which takes precedence.
+      expect(options[1].icon).toBe('material.star');
+    });
+  });
+
   describe('Form Association', () => {
     it('is form-associated, same as dile-select-ajax-overlay', async () => {
       mockAxios([]);

package/components/many-relation/many-relation.spec.js

@@ -48,6 +48,15 @@ describe.each(VARIANTS)('$tag (select: $selectTag)', ({ tag, selectTag }) => {
     expect(theselect.tagName.toLowerCase()).toBe(selectTag);
   });
 
+  it('passes iconProperty and icon through to the internal select', async () => {
+    mockAxios({ get: vi.fn(() => Promise.resolve({ status: 200, data: [] })) });
+    const el = await renderManyRelation('iconProperty="iconName" icon="lucide.globe"');
+
+    const theselect = select(el);
+    expect(theselect.getAttribute('iconproperty')).toBe('iconName');
+    expect(theselect.getAttribute('icon')).toBe('lucide.globe');
+  });
+
   it('loads the related items list from endpointList on connect', async () => {
     const get = vi.fn(() =>
       Promise.resolve({ status: 200, data: { data: [{ id: 1, name: 'Strategy' }] } })
@@ -99,3 +108,47 @@ describe.each(VARIANTS)('$tag (select: $selectTag)', ({ tag, selectTag }) => {
     expect(del).toHaveBeenCalledWith('/api/board-games/1/tags/9', {}, undefined);
   });
 });
+
+describe('dile-many-relation-overlay icons (only the overlay select supports them)', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    delete window.axiosInstance;
+  });
+
+  function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  it('reaches the internal dile-select-overlay popup as data-icon on the generated options', async () => {
+    const get = vi.fn(() =>
+      Promise.resolve({ status: 200, data: [{ id: 1, name: 'Strategy', iconName: 'material.star' }] })
+    );
+    window.axiosInstance = { get };
+
+    document.body.innerHTML = `
+      <dile-many-relation-overlay
+        endpointGet="/api/tags"
+        endpointList="/api/board-games/1/tags"
+        endpointAdd="/api/board-games/1/tags"
+        endpointRemove="/api/board-games/1/tags"
+        idProperty="id"
+        displayProperty="name"
+        iconProperty="iconName"
+        icon="lucide.globe"
+      ></dile-many-relation-overlay>
+    `;
+    const el = document.body.querySelector('dile-many-relation-overlay');
+    await el.updateComplete;
+
+    const theselect = el.shadowRoot.getElementById('theselect');
+    const input = theselect.shadowRoot.getElementById('search');
+    input.value = 'str';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await wait(theselect.delay + 50);
+    await theselect.updateComplete;
+
+    const options = theselect.select.options;
+    // Only result has its own iconName, taking precedence over the select-level default.
+    expect(options[0].icon).toBe('material.star');
+  });
+});

package/components/many-relation/src/DileManyRelation.js

@@ -110,6 +110,14 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
       maxResults: { type: Number },
       pageParamName: { type: String },
       getSelectResultList: { type: Object },
+      /** Property in each result item holding a dile-iconlib "family.name" icon string, shown
+       *  next to that option. Only has an effect when the internal select is
+       *  dile-ajax-select-crud-overlay (i.e. on dile-many-relation-overlay) — the native-select-based
+       *  dile-ajax-select-crud can't show icons. */
+      iconProperty: { type: String },
+      /** dile-iconlib "family.name" icon string used as the default icon for every option that
+       *  doesn't have its own via iconProperty. Same dile-many-relation-overlay-only caveat as iconProperty. */
+      icon: { type: String },
 
       // Related list customisation
       itemTemplate: { type: Object },
@@ -202,6 +210,8 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
           maxResults="${this.maxResults}"
           pageParamName="${this.pageParamName}"
           .getSelectResultList="${this.getSelectResultList}"
+          iconProperty="${this.iconProperty}"
+          icon="${this.icon}"
           language="${this.language}"
           @element-changed="${this._onSelectChanged}"
         ></${selectTag}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "type": "module",
@@ -25,12 +25,12 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/ui": "^3.5.1",
+    "@dile/ui": "^3.5.3",
     "axios": "^1.19.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7bcf203fb23acc24867e9f3df4f3ca2367eabd97"
+  "gitHead": "e9fe84bbbcc552ccf6045190ee0f034dfdb06412"
 }