chore(demo): add reset lazy load button [refresh gh-pages]

Author: ghiscoding

packages/demo/src/options/options42.html

@@ -20,8 +20,8 @@ <h2 class="bd-title">
     <div class="demo-subtitle">
       Use <code>lazyLoad: callback</code> to lazy load data only after clicking and opening the select dropdown.
       Note that once the data is loaded, it no longer needs to be lazy loaded again and so re-opening the select dropdown will show instantly afterward. 
-      You can refresh the page, or change server delay, to retest the lazy loading. 
-      Also note that any option pre-selection will only show up after the data is fully loaded.
+      You can refresh the page, or click the button to retest the lazy loading.
+      Also note that any pre-selected options will only show up after the data is fully loaded.
     </div>
   </div>
 </div>
@@ -30,8 +30,9 @@ <h2 class="bd-title">
   <div class="mb-3 row">
     <label class="col-sm-2"> Server Delay (ms) </label>
 
-    <div class="col-sm-10">
-      <input id="serverdelay" type="number" value="1000" step="100" style="width: 100px" />
+    <div class="col-sm-10 d-flex align-items-center gap-2">
+      <input id="serverdelay" type="number" value="1000" step="100" style="height: 34px; width: 100px;" />
+      <button id="resetlazy" class="btn btn-outline-secondary btn-sm">Reset Lazy Load</button>
     </div>
   </div>
 

packages/demo/src/options/options42.ts

@@ -2,6 +2,7 @@ import { type MultipleSelectInstance, multipleSelect } from 'multiple-select-van
 
 export default class Example {
   serverDelayInput?: HTMLInputElement | null;
+  resetLazyBtn?: HTMLButtonElement | null;
   ms1?: MultipleSelectInstance;
   ms2?: MultipleSelectInstance;
   ms3?: MultipleSelectInstance;
@@ -15,7 +16,9 @@ export default class Example {
 
   mount() {
     this.serverDelayInput = document.querySelector('#serverdelay');
+    this.resetLazyBtn = document.querySelector('#resetlazy');
     this.serverDelayInput!.addEventListener('keyup', this.changeServerDelay.bind(this));
+    this.resetLazyBtn!.addEventListener('click', this.createMultipleSelect.bind(this));
     this.createMultipleSelect();
   }
 
@@ -202,5 +205,6 @@ export default class Example {
     this.ms2 = undefined;
     this.ms3 = undefined;
     this.serverDelayInput!.removeEventListener('click', this.changeServerDelay.bind(this));
+    this.resetLazyBtn!.removeEventListener('click', this.createMultipleSelect.bind(this));
   }
 }