chore: add avatar text template demo directly from html (#253)

Author: ghiscoding

packages/demo/src/examples/example16.html

@@ -28,7 +28,21 @@ <h2 class="bd-title">
     <label class="col-sm-2 col-form-label">Avatar Template</label>
 
     <div class="col-sm-10">
-      <select class="data full-width" data-test="data">
+      <select id="select1" class="full-width" data-test="select1">
+      </select>
+    </div>
+  </div>
+
+  <div class="mb-3 row">
+    <label class="col-sm-2 col-form-label">Avatar Text Template</label>
+
+    <div class="col-sm-10">
+      <select id="select2" class="full-width" data-test="select2">
+        <option value="1">Eric::Developer</option>
+        <option value="2">Smith::Accounting</option>
+        <option value="3">Erika::Designer</option>
+        <option value="4">Julia::Finance</option>
+        <option value="5">Catherine::HR</option>
       </select>
     </div>
   </div>

packages/demo/src/examples/example16.scss

@@ -5,6 +5,19 @@
     border-radius: 50%;
     vertical-align: middle;
   }
+  .image-container {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+  .name-section {
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .job-section {
+    font-size: 13px;
+    line-height: 16px;
+  }
   .ms-parent {
     font-size: 1.1em;
     height: 50px;

packages/demo/src/examples/example16.ts

@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 import { type MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla';
 
 import avatar1 from './images/avatar1.png';
@@ -8,24 +9,62 @@ import avatar5 from './images/avatar5.png';
 import './example16.scss';
 
 export default class Example {
-  ms?: MultipleSelectInstance;
+  ms1?: MultipleSelectInstance;
+  ms2?: MultipleSelectInstance;
 
   mount() {
-    this.ms = multipleSelect('.data', {
+    this.ms1 = multipleSelect('[data-test=select1]', {
       data: [
         { value: '1', text: `<img alt="avatar1" src="${avatar1}" class="avatar"> Eric` },
         { value: '2', text: `<img alt="avatar2" src="${avatar2}" class="avatar"> Smith` },
         { value: '3', text: `<img alt="avatar3" src="${avatar3}" class="avatar"> Erika` },
         { value: '4', text: `<img alt="avatar4" src="${avatar4}" class="avatar"> Julia` },
         { value: '5', text: `<img alt="avatar5" src="${avatar5}" class="avatar"> Catherine` },
       ],
+      infiniteScroll: true,
       renderOptionLabelAsHtml: true, // without this flag, html code will be showing as plain text
     }) as MultipleSelectInstance;
+
+    this.ms2 = multipleSelect('[data-test=select2]', {
+      singleRadio: true,
+      renderOptionLabelAsHtml: true, // without this flag, html code will be showing as plain text
+      textTemplate: el => {
+        const [name, job] = el.textContent!.split('::');
+        return `<div class="image-container"><img alt="avatar${el.value}" src="${this.getAvatarByIdx(
+          el.value,
+        )}" class="avatar"><div class="text-container"><div class="name-section">${name}</div><div class="job-section">${job}</div></div></div>`;
+      },
+      sanitizer: html => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }),
+    }) as MultipleSelectInstance;
   }
 
   unmount() {
     // destroy ms instance(s) to avoid DOM leaks
-    this.ms?.destroy();
-    this.ms = undefined;
+    this.ms1?.destroy();
+    this.ms2?.destroy();
+    this.ms1 = undefined;
+    this.ms2 = undefined;
+  }
+
+  protected getAvatarByIdx(idx: number | string) {
+    let avatar: any;
+    switch (+idx) {
+      case 1:
+        avatar = avatar1;
+        break;
+      case 2:
+        avatar = avatar2;
+        break;
+      case 3:
+        avatar = avatar3;
+        break;
+      case 4:
+        avatar = avatar4;
+        break;
+      case 5:
+        avatar = avatar5;
+        break;
+    }
+    return avatar;
   }
 }

playwright/e2e/example16.spec.ts

@@ -3,14 +3,28 @@ import { test, expect } from '@playwright/test';
 test.describe('Example 16 - Avatar Images as Text Template', () => {
   test('show avatar images', async ({ page }) => {
     await page.goto('#/example16');
-    await page.locator('.ms-parent').click();
+
+    // 1st select
+    await page.locator('.ms-parent[data-test=select1]').click();
     await page.keyboard.press('ArrowDown');
     await page.keyboard.press('ArrowDown');
     await page.keyboard.press('Enter');
+    const parentSpan1 = await page.locator('.ms-parent[data-test=select1] .ms-choice span');
+    expect(parentSpan1).toHaveText('Erika');
+    await expect(parentSpan1.locator('img').getByAltText('image3')).toBeDefined();
+    await expect(parentSpan1.locator('img')).toHaveAttribute('src', /examples\/images\/avatar3.png/gi);
+    await expect(page.locator('div[data-test=select1] .ms-drop')).toBeHidden();
 
-    const parentSpan = await page.locator('.ms-parent .ms-choice span');
-    expect(parentSpan).toHaveText('Erika');
-    await expect(parentSpan.locator('img').getByAltText('image3')).toBeDefined();
-    await expect(parentSpan.locator('img')).toHaveAttribute('src', /examples\/images\/avatar3.png/gi);
+    // 2nd select
+    await page.locator('.ms-parent[data-test=select2]').click();
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+    const parentSpan2 = await page.locator('.ms-parent[data-test=select2] .ms-choice span');
+    expect(await parentSpan2.locator('.name-section')).toHaveText('Erika');
+    expect(await parentSpan2.locator('.job-section')).toHaveText('Designer');
+    await expect(parentSpan2.locator('img').getByAltText('image3')).toBeDefined();
+    await expect(parentSpan2.locator('img')).toHaveAttribute('src', /examples\/images\/avatar3.png/gi);
+    await expect(page.locator('div[data-test=select2] .ms-drop')).toBeHidden();
   });
 });