Skip to content

Commit af9104a

Browse files
ghiscodingghiscoding
authored
Merge pull request #10 from ghiscoding/chore/font-awesome-icons
feat: provide demo with Font-Awesome checkbox/radio icons
2 parents e418fdb + b6c0bae commit af9104a

File tree

10 files changed

+268
-110
lines changed

10 files changed

+268
-110
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ New Multiple-Select Options:
4343
- `useSelectOptionLabel` will use the `<option label="">` (from select option value) that can be used to display shorter selected option values.
4444
- example: value "1,3" instead of "January,March"
4545
- `useSelectOptionLabelToHtml` similar to `useSelectOptionLabel` but also renders HTML.
46-
- `sanitizer` will be used to sanitizes HTML code and prevent XSS cross-site scripting attacks.
46+
- `sanitizer` can be used to sanitize HTML code and prevent XSS cross-site scripting attacks.
4747

4848
## Contributions
4949

‎demo/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"devDependencies": {
2727
"multiple-select-vanilla": "workspace:*",
2828
"sass": "^1.58.3",
29-
"typescript": "^4.9.5",
29+
"typescript": "^5.0.0-beta",
3030
"vite": "^4.1.2"
3131
}
3232
}

‎demo/src/app-routing.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Example08 from './examples/example08';
1010
import Example09 from './examples/example09';
1111
import Example10 from './examples/example10';
1212
import Example11 from './examples/example11';
13+
import Example12 from './examples/example12';
1314
import Options01 from './options/options01';
1415
import Options02 from './options/options02';
1516
import Options03 from './options/options03';
@@ -76,6 +77,7 @@ export const exampleRouting = [
7677
{ name: 'example09', view: '/src/examples/example09.html', viewModel: Example09, title: 'Locale' },
7778
{ name: 'example10', view: '/src/examples/example10.html', viewModel: Example10, title: 'Large Select' },
7879
{ name: 'example11', view: '/src/examples/example11.html', viewModel: Example11, title: 'The Themes' },
80+
{ name: 'example12', view: '/src/examples/example12.html', viewModel: Example12, title: 'Checkbox/Radio Icons' },
7981
],
8082
},
8183
{

‎demo/src/examples/example12.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<div class="row mb-2">
2+
<div class="col-md-12 title-desc">
3+
<h2 class="bd-title">
4+
Checkbox/Radio Icons with Font-Awesome
5+
<span class="float-end links">
6+
Code <span class="fa fa-link"></span>
7+
<span class="small">
8+
<a
9+
target="_blank"
10+
href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/examples/example11.html"
11+
>html</a
12+
>
13+
|
14+
<a target="_blank" href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/examples/example11.ts"
15+
>ts</a
16+
>
17+
</span>
18+
</span>
19+
</h2>
20+
<div class="demo-subtitle">
21+
Display checkbox or radio icons using Font-Awesome or any other library to replicate the same UI across all browser.
22+
</div>
23+
</div>
24+
</div>
25+
26+
<div>
27+
<div class="mb-3 row">
28+
<label class="col-sm-2 col-form-label col-form-label-sm"> Single Select </label>
29+
30+
<div class="col-sm-10">
31+
<select id="single" class="awesome-select full-width">
32+
<option value="1">January</option>
33+
<option value="2">February</option>
34+
<option value="3">March</option>
35+
<option value="4">April</option>
36+
<option value="5">May</option>
37+
<option value="6">June</option>
38+
<option value="7">July</option>
39+
<option value="8">August</option>
40+
<option value="9">September</option>
41+
<option value="10">October</option>
42+
<option value="11">November</option>
43+
<option value="12">December</option>
44+
</select>
45+
</div>
46+
</div>
47+
48+
<div class="mb-3 row">
49+
<label class="col-sm-2 col-form-label">Multiple Select </label>
50+
51+
<div class="col-sm-10">
52+
<select multiple="multiple" id="multiple" class="awesome-select full-width">
53+
<option value="1">January</option>
54+
<option value="2">February</option>
55+
<option value="3">March</option>
56+
<option value="4">April</option>
57+
<option value="5">May</option>
58+
<option value="6">June</option>
59+
<option value="7">July</option>
60+
<option value="8">August</option>
61+
<option value="9">September</option>
62+
<option value="10">October</option>
63+
<option value="11">November</option>
64+
<option value="12">December</option>
65+
</select>
66+
</div>
67+
</div>
68+
</div>

‎demo/src/examples/example12.scss‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
// choose any color you want for checkboxes & radio icons
2+
$single-radio-color: #006d60;
3+
$multiple-checkbox-color: #63007c;
4+
5+
.awesome-select .ms-drop {
6+
// we need to remove extra padding added by the lib but isn't needed when using icons instead of checkbox input
7+
ul label,
8+
.ms-select-all label span {
9+
padding-left: 0;
10+
}
11+
12+
input[type='checkbox'],
13+
input[type='radio'] {
14+
/* make input checkbox invisible but don't hide it since multiple-select uses hide for something else */
15+
opacity: 0;
16+
width: 0;
17+
18+
& + span:before {
19+
display: inline-block;
20+
font-family: FontAwesome;
21+
font-size: 16px;
22+
font-weight: normal;
23+
margin: 0;
24+
opacity: 0.6;
25+
}
26+
}
27+
28+
input[type='checkbox'] {
29+
& + span:before {
30+
cursor: pointer;
31+
color: $multiple-checkbox-color;
32+
content: '\f096';
33+
height: 20px;
34+
width: 20px;
35+
border: none;
36+
border-radius: none;
37+
}
38+
39+
&:checked + span:before {
40+
content: '\f046'; // or '\f14a'
41+
opacity: 1;
42+
height: 20px;
43+
width: 20px;
44+
border: none;
45+
border-radius: none;
46+
margin: 0;
47+
}
48+
}
49+
input[type='radio'] {
50+
& + span:before {
51+
color: $single-radio-color;
52+
content: '\f10c';
53+
height: 20px;
54+
width: 20px;
55+
border: none;
56+
border-radius: none;
57+
margin: none;
58+
}
59+
&:checked + span:before {
60+
content: '\f192';
61+
height: 20px;
62+
width: 20px;
63+
border: none;
64+
border-radius: none;
65+
margin: none;
66+
}
67+
}
68+
}

‎demo/src/examples/example12.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
2+
import './example12.scss';
3+
4+
export default class Example {
5+
ms1?: MultipleSelectInstance;
6+
ms2?: MultipleSelectInstance;
7+
8+
mount() {
9+
this.ms1 = multipleSelect('#single', { singleRadio: true }) as MultipleSelectInstance;
10+
this.ms2 = multipleSelect('#multiple', { showOkButton: true }) as MultipleSelectInstance;
11+
}
12+
13+
unmount() {
14+
// destroy ms instance(s) to avoid DOM leaks
15+
this.ms1?.destroy();
16+
this.ms2?.destroy();
17+
this.ms1 = undefined;
18+
this.ms2 = undefined;
19+
}
20+
}

‎lib/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,12 @@
5757
"copyfiles": "^2.4.1",
5858
"cross-env": "^7.0.3",
5959
"cssnano": "^5.1.15",
60-
"esbuild": "^0.17.8",
60+
"esbuild": "^0.17.9",
6161
"fs-extra": "^11.1.0",
6262
"npm-run-all2": "^6.0.4",
6363
"postcss": "^8.4.21",
6464
"postcss-cli": "^10.1.0",
6565
"sass": "^1.58.3",
66-
"typescript": "^4.9.5"
66+
"typescript": "^5.0.0-beta"
6767
}
6868
}

‎lib/src/styles/_variables.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
$primary-color: #31708f !default;
1+
$primary-color: #000 !default;
22

33
$ms-item-border: 1px solid transparent !default;
44
$ms-item-hover-border: 1px solid #d5d5d5 !default;
55
$ms-icon-font-size: 16px !default;
66
$ms-checkbox-hover-bg-color: #fafafa !default;
77
$ms-ok-button-bg-color: #fff !default;
8-
$ms-ok-button-bg-hover-color: darken(#eff5fc, 3%) !default;
8+
$ms-ok-button-bg-hover-color: #f9f9f9 !default;
99
$ms-ok-button-border-color: #ccc !default;
1010
$ms-ok-button-border-radius: 0 0 4px 4px !default;
1111
$ms-ok-button-border-width: 1px 0 0 0 !default;

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,6 @@
5050
"pnpm": "^7.27.1",
5151
"prettier": "^2.8.4",
5252
"rimraf": "^3.0.2",
53-
"typescript": "^4.9.5"
53+
"typescript": "^5.0.0-beta"
5454
}
5555
}

0 commit comments

Comments
 (0)