feat: provide demo with Font-Awesome checkbox/radio icons

README.md

@@ -43,7 +43,7 @@ New Multiple-Select Options:
   - `useSelectOptionLabel` will use the `<option label="">` (from select option value) that can be used to display shorter selected option values.
     - example: value "1,3" instead of "January,March"
   - `useSelectOptionLabelToHtml` similar to `useSelectOptionLabel` but also renders HTML.
-  - `sanitizer` will be used to sanitizes HTML code and prevent XSS cross-site scripting attacks.
+  - `sanitizer` can be used to sanitize HTML code and prevent XSS cross-site scripting attacks.
 
 ## Contributions
 

demo/package.json

@@ -26,7 +26,7 @@
   "devDependencies": {
     "multiple-select-vanilla": "workspace:*",
     "sass": "^1.58.3",
-    "typescript": "^4.9.5",
+    "typescript": "^5.0.0-beta",
     "vite": "^4.1.2"
   }
 }

demo/src/app-routing.ts

@@ -10,6 +10,7 @@ import Example08 from './examples/example08';
 import Example09 from './examples/example09';
 import Example10 from './examples/example10';
 import Example11 from './examples/example11';
+import Example12 from './examples/example12';
 import Options01 from './options/options01';
 import Options02 from './options/options02';
 import Options03 from './options/options03';
@@ -76,6 +77,7 @@ export const exampleRouting = [
       { name: 'example09', view: '/src/examples/example09.html', viewModel: Example09, title: 'Locale' },
       { name: 'example10', view: '/src/examples/example10.html', viewModel: Example10, title: 'Large Select' },
       { name: 'example11', view: '/src/examples/example11.html', viewModel: Example11, title: 'The Themes' },
+      { name: 'example12', view: '/src/examples/example12.html', viewModel: Example12, title: 'Checkbox/Radio Icons' },
     ],
   },
   {

demo/src/examples/example12.html

@@ -0,0 +1,68 @@
+<div class="row mb-2">
+  <div class="col-md-12 title-desc">
+    <h2 class="bd-title">
+      Checkbox/Radio Icons with Font-Awesome
+      <span class="float-end links">
+        Code <span class="fa fa-link"></span>
+        <span class="small">
+          <a
+            target="_blank"
+            href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/examples/example11.html"
+            >html</a
+          >
+          |
+          <a target="_blank" href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/examples/example11.ts"
+            >ts</a
+          >
+        </span>
+      </span>
+    </h2>
+    <div class="demo-subtitle">
+      Display checkbox or radio icons using Font-Awesome or any other library to replicate the same UI across all browser.
+    </div>
+  </div>
+</div>
+
+<div>
+  <div class="mb-3 row">
+    <label class="col-sm-2 col-form-label col-form-label-sm"> Single Select </label>
+
+    <div class="col-sm-10">
+      <select id="single" class="awesome-select full-width">
+        <option value="1">January</option>
+        <option value="2">February</option>
+        <option value="3">March</option>
+        <option value="4">April</option>
+        <option value="5">May</option>
+        <option value="6">June</option>
+        <option value="7">July</option>
+        <option value="8">August</option>
+        <option value="9">September</option>
+        <option value="10">October</option>
+        <option value="11">November</option>
+        <option value="12">December</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="mb-3 row">
+    <label class="col-sm-2 col-form-label">Multiple Select </label>
+
+    <div class="col-sm-10">
+      <select multiple="multiple" id="multiple" class="awesome-select full-width">
+        <option value="1">January</option>
+        <option value="2">February</option>
+        <option value="3">March</option>
+        <option value="4">April</option>
+        <option value="5">May</option>
+        <option value="6">June</option>
+        <option value="7">July</option>
+        <option value="8">August</option>
+        <option value="9">September</option>
+        <option value="10">October</option>
+        <option value="11">November</option>
+        <option value="12">December</option>
+      </select>
+    </div>
+  </div>
+</div>

demo/src/examples/example12.scss

@@ -0,0 +1,68 @@
+// choose any color you want for checkboxes & radio icons
+$single-radio-color: #006d60;
+$multiple-checkbox-color: #63007c;
+
+.awesome-select .ms-drop {
+  // we need to remove extra padding added by the lib but isn't needed when using icons instead of checkbox input
+  ul label,
+  .ms-select-all label span {
+    padding-left: 0;
+  }
+
+  input[type='checkbox'],
+  input[type='radio'] {
+    /* make input checkbox invisible but don't hide it since multiple-select uses hide for something else */
+    opacity: 0;
+    width: 0;
+
+    & + span:before {
+      display: inline-block;
+      font-family: FontAwesome;
+      font-size: 16px;
+      font-weight: normal;
+      margin: 0;
+      opacity: 0.6;
+    }
+  }
+
+  input[type='checkbox'] {
+    & + span:before {
+      cursor: pointer;
+      color: $multiple-checkbox-color;
+      content: '\f096';
+      height: 20px;
+      width: 20px;
+      border: none;
+      border-radius: none;
+    }
+
+    &:checked + span:before {
+      content: '\f046'; // or '\f14a'
+      opacity: 1;
+      height: 20px;
+      width: 20px;
+      border: none;
+      border-radius: none;
+      margin: 0;
+    }
+  }
+  input[type='radio'] {
+    & + span:before {
+      color: $single-radio-color;
+      content: '\f10c';
+      height: 20px;
+      width: 20px;
+      border: none;
+      border-radius: none;
+      margin: none;
+    }
+    &:checked + span:before {
+      content: '\f192';
+      height: 20px;
+      width: 20px;
+      border: none;
+      border-radius: none;
+      margin: none;
+    }
+  }
+}

demo/src/examples/example12.ts

@@ -0,0 +1,20 @@
+import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
+import './example12.scss';
+
+export default class Example {
+  ms1?: MultipleSelectInstance;
+  ms2?: MultipleSelectInstance;
+
+  mount() {
+    this.ms1 = multipleSelect('#single', { singleRadio: true }) as MultipleSelectInstance;
+    this.ms2 = multipleSelect('#multiple', { showOkButton: true }) as MultipleSelectInstance;
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms1?.destroy();
+    this.ms2?.destroy();
+    this.ms1 = undefined;
+    this.ms2 = undefined;
+  }
+}

lib/package.json

@@ -57,12 +57,12 @@
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "cssnano": "^5.1.15",
-    "esbuild": "^0.17.8",
+    "esbuild": "^0.17.9",
     "fs-extra": "^11.1.0",
     "npm-run-all2": "^6.0.4",
     "postcss": "^8.4.21",
     "postcss-cli": "^10.1.0",
     "sass": "^1.58.3",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.0-beta"
   }
 }

lib/src/styles/_variables.scss

@@ -1,11 +1,11 @@
-$primary-color: #31708f !default;
+$primary-color: #000 !default;
 
 $ms-item-border: 1px solid transparent !default;
 $ms-item-hover-border: 1px solid #d5d5d5 !default;
 $ms-icon-font-size: 16px !default;
 $ms-checkbox-hover-bg-color: #fafafa !default;
 $ms-ok-button-bg-color: #fff !default;
-$ms-ok-button-bg-hover-color: darken(#eff5fc, 3%) !default;
+$ms-ok-button-bg-hover-color: #f9f9f9 !default;
 $ms-ok-button-border-color: #ccc !default;
 $ms-ok-button-border-radius: 0 0 4px 4px !default;
 $ms-ok-button-border-width: 1px 0 0 0 !default;

package.json

@@ -50,6 +50,6 @@
     "pnpm": "^7.27.1",
     "prettier": "^2.8.4",
     "rimraf": "^3.0.2",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.0-beta"
   }
 }