Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: change customFilter signature & add extra options/methods #81

Merged
merged 1 commit into from
Jun 25, 2023
Merged

feat!: change customFilter signature & add extra options/methods #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions demo/src/app-routing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Example10 from './examples/example10';
import Example11 from './examples/example11';
import Example12 from './examples/example12';
import Example13 from './examples/example13';
import Example14 from './examples/example14';
import Options01 from './options/options01';
import Options02 from './options/options02';
import Options03 from './options/options03';
Expand Down Expand Up @@ -44,6 +45,7 @@ import Options29 from './options/options29';
import Options30 from './options/options30';
import Options31 from './options/options31';
import Options32 from './options/options32';
import Options33 from './options/options33';
import Methods01 from './methods/methods01';
import Methods02 from './methods/methods02';
import Methods03 from './methods/methods03';
Expand All @@ -55,6 +57,7 @@ import Methods08 from './methods/methods08';
import Methods09 from './methods/methods09';
import Methods10 from './methods/methods10';
import Methods11 from './methods/methods11';
import Methods12 from './methods/methods12';
import Events from './events/events';
import I18n from './i18n/i18n';

Expand All @@ -80,6 +83,7 @@ export const exampleRouting = [
{ 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' },
{ name: 'example13', view: '/src/examples/example13.html', viewModel: Example13, title: 'Dynamically Create Select' },
{ name: 'example14', view: '/src/examples/example14.html', viewModel: Example14, title: 'The Divider' },
],
},
{
Expand Down Expand Up @@ -117,6 +121,7 @@ export const exampleRouting = [
{ name: 'options30', view: '/src/options/options30.html', viewModel: Options30, title: 'Auto-Adjust Drop Height/Width' },
{ name: 'options31', view: '/src/options/options31.html', viewModel: Options31, title: 'Use Select Option as Label' },
{ name: 'options32', view: '/src/options/options32.html', viewModel: Options32, title: 'Sanitizer' },
{ name: 'options33', view: '/src/options/options33.html', viewModel: Options33, title: 'Classes' },
],
},
{
Expand All @@ -133,6 +138,7 @@ export const exampleRouting = [
{ name: 'methods09', view: '/src/methods/methods09.html', viewModel: Methods09, title: 'The focus/blur' },
{ name: 'methods10', view: '/src/methods/methods10.html', viewModel: Methods10, title: 'The refresh' },
{ name: 'methods11', view: '/src/methods/methods11.html', viewModel: Methods11, title: 'The destroy' },
{ name: 'methods12', view: '/src/methods/methods12.html', viewModel: Methods12, title: 'The getData' },
],
},
{
Expand Down
54 changes: 51 additions & 3 deletions demo/src/examples/example11.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ <h2 class="bd-title">

<div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label col-form-label-sm"> Select </label>
<label class="col-sm-2 col-form-label col-form-label-sm">Select</label>

<div class="col-sm-10">
<select multiple="multiple" class="form-control form-control-sm" data-test="select1" placeholder="form-control-sm">
Expand All @@ -44,7 +44,7 @@ <h2 class="bd-title">
</div>

<div class="mb-3 row">
<label class="col-sm-2 col-form-label"> Select </label>
<label class="col-sm-2 col-form-label">Select</label>

<div class="col-sm-10">
<select multiple="multiple" class="form-control" data-test="select2" placeholder="form-control">
Expand All @@ -65,7 +65,7 @@ <h2 class="bd-title">
</div>

<div class="mb-3 row">
<label class="col-sm-2 col-form-label col-form-label-lg"> Select </label>
<label class="col-sm-2 col-form-label col-form-label-lg">Select</label>

<div class="col-sm-10">
<select multiple="multiple" class="form-control form-control-lg" data-test="select3" placeholder="form-control-lg">
Expand All @@ -84,4 +84,52 @@ <h2 class="bd-title">
</select>
</div>
</div>

<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Dropdown Select</label>

<div class="col-sm-10">
<select class="form-control ms-dropdown" data-test="select4">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Group 2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</optgroup>
<optgroup label="Group 3">
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
</optgroup>
</select>
</div>
</div>

<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Dropdown Dividers</label>

<div class="col-sm-10">
<select class="form-control ms-dropdown ms-dropdown-divider" data-test="select5">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Group 2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</optgroup>
<optgroup label="Group 3">
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
</optgroup>
</select>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion demo/src/examples/example12.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ <h2 class="bd-title">
<span class="small">
<a
target="_blank"
href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/examples/example11.html"
href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/examples/example12.html"
>html</a
>
|
Expand Down
2 changes: 1 addition & 1 deletion demo/src/examples/example13.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ <h2 class="bd-title">
<span class="small">
<a
target="_blank"
href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/options/options08.html"
href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/options/example13.html"
>html</a
>
|
Expand Down
115 changes: 115 additions & 0 deletions demo/src/examples/example14.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<div class="row mb-2">
<div class="col-md-12 title-desc">
<h2 class="bd-title">
The Divider
<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/example08.html"
>html</a
>
|
<a target="_blank" href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/examples/example08.ts"
>ts</a
>
</span>
</span>
</h2>
<div class="demo-subtitle">Display an option as a divider.</div>
</div>
</div>

<div>
<div class="mb-3 row">
<label class="col-sm-2">Single Select</label>

<div class="col-sm-10">
<select id="single" class="select full-width" data-test="single">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option data-divider="true"></option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option data-divider="true"></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">Multiple Select</label>

<div class="col-sm-10">
<select id="multiple" class="select full-width" data-test="multiple" multiple>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option data-divider="true"></option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option data-divider="true"></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">Group Select</label>

<div class="col-sm-10">
<select id="group" class="select full-width" data-test="group" multiple>
<option data-divider="true"></option>
<optgroup label="Group 1">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option data-divider="true"></option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
</optgroup>
<option data-divider="true"></option>
<optgroup label="Group 2">
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option data-divider="true"></option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</optgroup>
</select>
</div>
</div>

<div class="mb-3 row">
<label class="col-sm-2">Data Select 1</label>

<div class="col-sm-10">
<select id="data-select1" class="data-select full-width" data-test="data1" multiple></select>
</div>
</div>

<div class="mb-3 row">
<label class="col-sm-2">Data Select 2</label>

<div class="col-sm-10">
<select id="data-select2" class="data-select full-width" data-test="data2" multiple></select>
</div>
</div>
</div>
50 changes: 50 additions & 0 deletions demo/src/examples/example14.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';

export default class Example {
ms1: MultipleSelectInstance[] = [];
ms2: MultipleSelectInstance[] = [];

mount() {
this.ms1 = multipleSelect('.select') as MultipleSelectInstance[];
this.ms2 = multipleSelect('.data-select', {
dataTest: 'select1',
data: [
{
value: 1,
text: 'Option 1',
},
{
value: 2,
text: 'Option 2',
},
{
value: 3,
text: 'Option 3',
},
{
divider: true,
},
{
value: 4,
text: 'Option 4',
},
{
value: 5,
text: 'Option 5',
},
{
value: 6,
text: 'Option 6',
},
],
}) as MultipleSelectInstance[];
}

unmount() {
// destroy ms instance(s) to avoid DOM leaks
this.ms1.forEach((m) => m.destroy());
this.ms2.forEach((m) => m.destroy());
this.ms1 = [];
this.ms2 = [];
}
}
2 changes: 2 additions & 0 deletions demo/src/methods/methods03.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ <h2 class="bd-title">
<div class="col-sm-10">
<button id="setSelectsBtn" class="btn btn-secondary">SetSelects</button>
<button id="getSelectsBtn" class="btn btn-secondary">GetSelects</button>
<button id="setSelectsBtn2" class="btn btn-secondary">SetSelects by 'text'</button>
<button id="getSelectsBtn2" class="btn btn-secondary">GetSelects by 'text'</button>
</div>
</div>

Expand Down
8 changes: 8 additions & 0 deletions demo/src/methods/methods03.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ export default class Example {
alert(`Selected values: ${this.ms1?.getSelects()}`);
alert(`Selected texts: ${this.ms1?.getSelects('text')}`);
});

document.querySelector('#setSelectsBtn2')!.addEventListener('click', () => {
this.ms1?.setSelects(['February', 'April'], 'text');
});

document.querySelector('#getSelectsBtn2')!.addEventListener('click', () => {
alert(`Selected values: ${this.ms1?.getSelects('text')}`);
});
}

unmount() {
Expand Down
44 changes: 44 additions & 0 deletions demo/src/methods/methods12.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<div class="row mb-2">
<div class="col-md-12 title-desc">
<h2 class="bd-title">
The getData
<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/methods/methods01.html"
>html</a
>
|
<a target="_blank" href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/methods/methods01.ts"
>ts</a
>
</span>
</span>
</h2>
<div class="demo-subtitle">Use <code>multipleSelect('getData')</code> to get the loaded data.</div>
</div>
</div>

<div>
<div class="mb-3 row">
<label class="col-sm-2">Methods</label>

<div class="col-sm-10">
<button id="getData" class="btn btn-secondary">getData</button>
</div>
</div>

<div class="mb-3 row">
<label class="col-sm-2">Basic Select</label>

<div class="col-sm-10">
<select multiple="multiple" class="full-width">
<option value="text1">text1</option>
<option value="text2">text2</option>
<option value="text3">text3</option>
</select>
</div>
</div>
</div>
Loading