chore: cleanup examples and make them more readable

ghiscoding · ghiscoding · commit ab3a0b9046b9 · 2026-02-03T21:29:02.000-05:00
diff --git a/packages/demo/src/app-routing.ts b/packages/demo/src/app-routing.ts
@@ -15,7 +15,6 @@ import Example13 from './examples/example13.js';
 import Example14 from './examples/example14.js';
 import Example15 from './examples/example15.js';
 import Example16 from './examples/example16.js';
-import Example17 from './examples/example17.js';
 import GettingStarted from './getting-started.js';
 import I18n from './i18n/i18n.js';
 import Methods01 from './methods/methods01.js';
@@ -100,7 +99,6 @@ export const exampleRouting = [
       { name: 'example14', view: '/src/examples/example14.html', viewModel: Example14, title: 'The Divider' },
       { name: 'example15', view: '/src/examples/example15.html', viewModel: Example15, title: 'Dark Mode' },
       { name: 'example16', view: '/src/examples/example16.html', viewModel: Example16, title: 'Template with Images' },
-      { name: 'example17', view: '/src/examples/example17.html', viewModel: Example17, title: 'Bug' },
     ],
   },
   {
diff --git a/packages/demo/src/examples/example01.html b/packages/demo/src/examples/example01.html
@@ -98,20 +98,3 @@ <h2 class="bd-title">
     </div>
   </div>
 </div>
-
-<div class="my-5 offset-sm-1 col-sm-10">
-  <hr>
-</div>
-
-<div class="row mt-4">
-  <label class="col-sm-2">Code Sample</label>
-  <div class="col-sm-10 col-lg-8">
-    <iframe
-      style="height: 100%; width: 60%; position: absolute"
-      src="data:text/html;charset=utf-8,
-      <head><base target='_blank' /></head>
-      <body><script src='https://gist.github.com/ghiscoding/d9136bb871e43cf93da6b58cd3e1ccfe.js'></script>
-      </body>"
-    ></iframe>
-  </div>
-</div>
diff --git a/packages/demo/src/examples/example13.html b/packages/demo/src/examples/example13.html
@@ -36,9 +36,9 @@ <h2 class="bd-title">
   </div>
 
   <div class="mb-3 row">
-    <label class="col-sm-3 text-end">Use Select Option Label & Render HTML</label>
+    <label class="col-sm-4 text-end">Use Select Option Label & Render HTML</label>
 
-    <div class="col-sm-9">
+    <div class="col-sm-8">
       <select id="select1" class="full-width" data-test="select1"></select>
     </div>
   </div>
diff --git a/packages/demo/src/examples/example17.html b/packages/demo/src/examples/example17.html
diff --git a/packages/demo/src/examples/example17.ts b/packages/demo/src/examples/example17.ts
diff --git a/packages/demo/src/i18n/i18n.html b/packages/demo/src/i18n/i18n.html
@@ -37,21 +37,4 @@ <h2 class="bd-title">
       </select>
     </div>
   </div>
-
-  <div class="my-5 offset-sm-1 col-sm-10">
-    <hr>
-  </div>
-
-  <div class="row mt-5">
-    <label class="col-sm-2">Code Sample</label>
-    <div class="col-sm-10 col-lg-8">
-      <iframe
-        style="height: 100%; width: 60%; position: absolute"
-        src="data:text/html;charset=utf-8,
-        <head><base target='_blank' /></head>
-        <body><script src='https://gist.github.com/ghiscoding/337a664ffd1564d2f95c3f9d1b814172.js'></script></script>
-        </body>"
-      ></iframe>
-    </div>
-  </div>
 </div>
diff --git a/packages/demo/src/methods/methods01.html b/packages/demo/src/methods/methods01.html
@@ -16,7 +16,7 @@ <h2 class="bd-title">
       </span>
     </h2>
     <div class="demo-subtitle">
-      Use <code>multipleSelect('select').getOptions()</code>to get the options object.
+      Use <code>multipleSelect(selector).getOptions()</code>to get the options object.
     </div>
   </div>
 </div>
diff --git a/packages/demo/src/methods/methods02.html b/packages/demo/src/methods/methods02.html
@@ -16,7 +16,7 @@ <h2 class="bd-title">
       </span>
     </h2>
     <div class="demo-subtitle">
-      Use <code>multipleSelect('select').refreshOptions( { filter: false })</code>to refresh the options object.
+      Use <code>multipleSelect(selector).refreshOptions(&#123; filter: false &#125;)</code>to refresh the options object.
     </div>
   </div>
 </div>
diff --git a/packages/demo/src/methods/methods03.html b/packages/demo/src/methods/methods03.html
@@ -16,7 +16,7 @@ <h2 class="bd-title">
       </span>
     </h2>
     <div class="demo-subtitle">
-      Use <code>multipleSelect('select').setSelects([])</code>and <code>multipleSelect('select').getSelects()</code>to set selects and get
+      Use <code>multipleSelect(selector).setSelects([])</code>and <code>multipleSelect(selector).getSelects()</code>to set selects and get
       selects.
     </div>
   </div>
diff --git a/packages/demo/src/methods/methods04.html b/packages/demo/src/methods/methods04.html
@@ -16,7 +16,7 @@ <h2 class="bd-title">
       </span>
     </h2>
     <div class="demo-subtitle">
-      Use <code>multipleSelect('select').enable()</code>and <code>multipleSelect('select').disable()</code>to enable and disable select.
+      Use <code>multipleSelect(selector).enable()</code>and <code>multipleSelect(selector).disable()</code>to enable and disable select.
     </div>
   </div>
 </div>
diff --git a/packages/demo/src/methods/methods05.html b/packages/demo/src/methods/methods05.html
@@ -16,7 +16,7 @@ <h2 class="bd-title">
       </span>
     </h2>
     <div class="demo-subtitle">
-      Use <code>multipleSelect('select').open()</code>and <code>multipleSelect('select').close()</code>to open and close the select dropdown
+      Use <code>multipleSelect(selector).open()</code>and <code>multipleSelect(selector).close()</code>to open and close the select dropdown
       list.
     </div>
   </div>
diff --git a/packages/demo/src/methods/methods06.html b/packages/demo/src/methods/methods06.html
@@ -16,7 +16,7 @@ <h2 class="bd-title">
       </span>
     </h2>
     <div class="demo-subtitle">
-      Methods: <code>multipleSelect('select').check(2)</code>and <code>multipleSelect('select').uncheck(2)</code>to check and uncheck a
+      Methods: <code>multipleSelect(selector).check(2)</code>and <code>multipleSelect(selector).uncheck(2)</code>to check and uncheck a
       select option.
     </div>
   </div>
diff --git a/packages/demo/src/methods/methods07.html b/packages/demo/src/methods/methods07.html
@@ -16,7 +16,7 @@ <h2 class="bd-title">
       </span>
     </h2>
     <div class="demo-subtitle">
-      Use <code>multipleSelect('select').checkAll()</code>and <code>multipleSelect('select').uncheckAll()</code>to check and uncheck all
+      Use <code>multipleSelect(selector).checkAll()</code>and <code>multipleSelect(selector).uncheckAll()</code>to check and uncheck all
       options.
     </div>
   </div>
diff --git a/packages/demo/src/methods/methods08.html b/packages/demo/src/methods/methods08.html
@@ -16,7 +16,7 @@ <h2 class="bd-title">
       </span>
     </h2>
     <div class="demo-subtitle">
-      Methods: <code>multipleSelect('select').checkInvert()</code>to invert check all items.
+      Methods: <code>multipleSelect(selector).checkInvert()</code>to invert check all items.
     </div>
   </div>
 </div>
diff --git a/packages/demo/src/methods/methods09.html b/packages/demo/src/methods/methods09.html
@@ -16,7 +16,7 @@ <h2 class="bd-title">
       </span>
     </h2>
     <div class="demo-subtitle">
-      Use <code>multipleSelect('select').focus()</code>and <code>multipleSelect('select').blur()</code>to focus and blur the select.
+      Use <code>multipleSelect(selector).focus()</code>and <code>multipleSelect(selector).blur()</code>to focus and blur the select.
     </div>
   </div>
 </div>
diff --git a/packages/demo/src/methods/methods10.html b/packages/demo/src/methods/methods10.html
@@ -16,8 +16,8 @@ <h2 class="bd-title">
       </span>
     </h2>
     <div class="demo-subtitle">
-      Use <code>multiple('select').refresh()</code>to refresh/reload the Multiple Select. If you're dynamically adding/removing option tags
-      on the original select via AJAX or DOM manipulation methods, call refresh to reflect the changes.
+      Use <code>multipleSelect(selector).refresh()</code>to refresh/reload the Multiple Select. If you're dynamically adding/removing option
+      tags on the original select via AJAX or DOM manipulation methods, call refresh to reflect the changes.
     </div>
   </div>
 </div>
diff --git a/packages/demo/src/methods/methods11.html b/packages/demo/src/methods/methods11.html
@@ -16,7 +16,7 @@ <h2 class="bd-title">
       </span>
     </h2>
     <div class="demo-subtitle">
-      Use <code>multiple('select').destroy()</code>to destroy the select.
+      Use <code>multipleSelect(selector).destroy()</code>to destroy the select.
     </div>
   </div>
 </div>
@@ -51,21 +51,4 @@ <h2 class="bd-title">
       </select>
     </div>
   </div>
-
-  <div class="my-5 offset-sm-1 col-sm-10">
-    <hr>
-  </div>
-
-  <div class="row mt-5">
-    <label class="col-sm-2">Code Sample</label>
-    <div class="col-sm-10 col-lg-8">
-      <iframe
-        style="height: 100%; width: 60%; position: absolute"
-        src="data:text/html;charset=utf-8,
-        <head><base target='_blank' /></head>
-        <body><script src='https://gist.github.com/ghiscoding/4ab63b63f7374017e79151328f70ba73.js'></script>
-        </body>"
-      ></iframe>
-    </div>
-  </div>
 </div>
diff --git a/packages/demo/src/methods/methods12.html b/packages/demo/src/methods/methods12.html
@@ -16,7 +16,7 @@ <h2 class="bd-title">
       </span>
     </h2>
     <div class="demo-subtitle">
-      Use <code>multipleSelect('getData')</code>to get the loaded data.
+      Use <code>multipleSelect(selector).getData()</code>to get the loaded data.
     </div>
   </div>
 </div>
diff --git a/packages/demo/src/methods/methods13.html b/packages/demo/src/methods/methods13.html
@@ -16,7 +16,7 @@ <h2 class="bd-title">
       </span>
     </h2>
     <div class="demo-subtitle">
-      Use <code>multipleSelect('select').setData([/*data*/])</code> to update the loaded data.
+      Use <code>multipleSelect(selector).setData([/*data*/])</code> to update the loaded data.
     </div>
   </div>
 </div>
