Skip to content

Commit 931525c

Browse files
ghiscodingghiscoding
authored
Merge pull request #7 from ghiscoding/chore/auto-adjust-position-height
feat: auto-adjust height by available space & width by text content
2 parents dbfed26 + 33df39f commit 931525c

15 files changed

+1123
-137
lines changed

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@ npm install multiple-select-vanilla
3535
New Multiple-Select Options:
3636
- dropped jQuery requirement and replaced necessary code with pure vanilla JS code.
3737
- written in TypeScript which brings typings support
38+
- added new features:
39+
- `showOkButton` to add an "OK" button at the end of multiple select option list
40+
- `autoAdjustDropHeight` will automatically adjust the drop (up or down) height with available space
41+
- `autoAdjustDropPosition` will automatically choose best position (top/bottom) with available space
42+
- `autoAdjustDropWidthByTextSize` automatically set the drop width size from the widest list option width
3843

3944
## Contributions
4045

‎demo/src/app-routing.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ import Options25 from './options/options25';
3838
import Options26 from './options/options26';
3939
import Options27 from './options/options27';
4040
import Options28 from './options/options28';
41+
import Options29 from './options/options29';
42+
import Options30 from './options/options30';
4143
import Methods01 from './methods/methods01';
4244
import Methods02 from './methods/methods02';
4345
import Methods03 from './methods/methods03';
@@ -105,6 +107,8 @@ export const exampleRouting = [
105107
{ name: 'options26', view: '/src/options/options26.html', viewModel: Options26, title: 'The Styler' },
106108
{ name: 'options27', view: '/src/options/options27.html', viewModel: Options27, title: 'Text Template' },
107109
{ name: 'options28', view: '/src/options/options28.html', viewModel: Options28, title: 'Label Template' },
110+
{ name: 'options29', view: '/src/options/options29.html', viewModel: Options29, title: 'Auto-Adjust Drop Position' },
111+
{ name: 'options30', view: '/src/options/options30.html', viewModel: Options30, title: 'Auto-Adjust Drop Height/Width' },
108112
],
109113
},
110114
{

‎demo/src/options/options29.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+
Auto-Adjust Drop Position
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/options/options08.html"
11+
>html</a
12+
>
13+
|
14+
<a target="_blank" href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/options/options08.ts"
15+
>ts</a
16+
>
17+
</span>
18+
</span>
19+
</h2>
20+
<div class="demo-subtitle">
21+
Use <code>autoAdjustDropPosition</code> to automatically adjust the drop position from available space (top, bottom).
22+
</div>
23+
</div>
24+
</div>
25+
26+
<div>
27+
<div class="mb-3 row">
28+
<label class="col-sm-2"> Basic Select </label>
29+
30+
<div class="col-sm-10">
31+
<select multiple="multiple" class="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" style="margin-top: calc(100vh - 275px)">
49+
<label class="col-sm-2"> Basic Select </label>
50+
51+
<div class="col-sm-10">
52+
<select multiple="multiple" class="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/options/options29.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
2+
3+
export default class Example {
4+
ms: MultipleSelectInstance[] = [];
5+
6+
mount() {
7+
this.ms = multipleSelect('select', {
8+
autoAdjustDropPosition: true,
9+
}) as MultipleSelectInstance[];
10+
}
11+
12+
unmount() {
13+
// destroy ms instance(s) to avoid DOM leaks
14+
this.ms.forEach((m) => m.destroy());
15+
this.ms = [];
16+
}
17+
}

‎demo/src/options/options30.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<div class="row mb-2">
2+
<div class="col-md-12 title-desc">
3+
<h2 class="bd-title">
4+
Auto-Adjust Drop Height/Width
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/options/options08.html"
11+
>html</a
12+
>
13+
|
14+
<a target="_blank" href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/options/options08.ts"
15+
>ts</a
16+
>
17+
</span>
18+
</span>
19+
</h2>
20+
<div class="demo-subtitle">
21+
Use <code>autoAdjustDropWidthByTextSize</code> to automatically adjust the drop width by the largest option width from the
22+
found in the list. <br />
23+
Use <code>autoAdjustDropHeight</code> to automatically adjust the drop max height calculated from the available space.
24+
</div>
25+
</div>
26+
</div>
27+
28+
<div>
29+
<div class="mb-3 row">
30+
<label class="col-sm-3 text-end">Adjust drop width by option list content</label>
31+
32+
<div class="col-sm-9">
33+
<select id="select1" multiple="multiple" data-width="75" class="my-container">
34+
<option value="1">January</option>
35+
<option value="2">February</option>
36+
<option value="3">March</option>
37+
<option value="4">April</option>
38+
<option value="5">May</option>
39+
<option value="6">June</option>
40+
<option value="7">July</option>
41+
<option value="8">August</option>
42+
<option value="9">September</option>
43+
<option value="10">October</option>
44+
<option value="11">November</option>
45+
<option value="12">December</option>
46+
</select>
47+
</div>
48+
</div>
49+
50+
<div class="mb-3 row">
51+
<label class="col-sm-3 text-end">Resize drop height (width: 200px)</label>
52+
53+
<div class="col-sm-9">
54+
<select id="select2" multiple="multiple" data-width="200" class="my-container">
55+
<option value="1">January</option>
56+
<option value="2">February</option>
57+
<option value="3">March</option>
58+
<option value="4">April</option>
59+
<option value="5">May</option>
60+
<option value="6">June</option>
61+
<option value="7">July</option>
62+
<option value="8">August</option>
63+
<option value="9">September</option>
64+
<option value="10">October</option>
65+
<option value="11">November</option>
66+
<option value="12">December</option>
67+
</select>
68+
</div>
69+
</div>
70+
71+
<div class="mb-3 row">
72+
<label class="col-sm-3 text-end">Resize drop height (width: auto)</label>
73+
74+
<div class="col-sm-9">
75+
<select id="select3" multiple="multiple">
76+
<option value="1">January</option>
77+
<option value="2">February</option>
78+
<option value="3">March</option>
79+
<option value="4">April</option>
80+
<option value="5">May</option>
81+
<option value="6">June</option>
82+
<option value="7">July</option>
83+
<option value="8">August</option>
84+
<option value="9">September</option>
85+
<option value="10">October</option>
86+
<option value="11">November</option>
87+
<option value="12">December</option>
88+
</select>
89+
</div>
90+
</div>
91+
</div>

‎demo/src/options/options30.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
2+
3+
export default class Example {
4+
ms1?: MultipleSelectInstance;
5+
ms2?: MultipleSelectInstance;
6+
7+
mount() {
8+
this.ms1 = multipleSelect('#select1', {
9+
autoAdjustDropWidthByTextSize: true,
10+
autoAdjustDropHeight: true,
11+
position: 'top',
12+
showOkButton: true,
13+
}) as MultipleSelectInstance;
14+
15+
this.ms1 = multipleSelect('#select2', {
16+
autoAdjustDropWidthByTextSize: true,
17+
autoAdjustDropHeight: true,
18+
position: 'top',
19+
showOkButton: true,
20+
}) as MultipleSelectInstance;
21+
22+
this.ms2 = multipleSelect('#select3', {
23+
autoAdjustDropWidthByTextSize: true,
24+
autoAdjustDropHeight: true,
25+
filter: true,
26+
position: 'top',
27+
}) as MultipleSelectInstance;
28+
}
29+
30+
unmount() {
31+
// destroy ms instance(s) to avoid DOM leaks
32+
this.ms1?.destroy();
33+
this.ms2?.destroy();
34+
this.ms1 = undefined;
35+
this.ms2 = undefined;
36+
}
37+
}

‎lib/build-watch.mjs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,14 @@ runCompilation(process.env.LERNA_FILE_CHANGES.split(','));
1212

1313
function runBuild() {
1414
buildSync({
15+
color: true,
1516
entryPoints: ['./src/index.ts'],
1617
bundle: true,
1718
minify: env === 'production',
1819
format: 'esm',
1920
target: 'es2020',
21+
sourcemap: false,
22+
logLevel: 'error',
2023
// outfile: env === 'production' ? './dist/multiple-select.min.js' : './dist/multiple-select.js',
2124
outfile: 'dist/esm/multiple-select.js',
2225
});

‎lib/package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"exports": {
88
".": {
99
"import": "./dist/esm/multiple-select.js",
10-
"require": "./dist/cjs/multiple-select.js"
10+
"require": "./dist/cjs/multiple-select.js",
11+
"default": "./dist/esm/multiple-select.js"
1112
},
1213
"./*": "./*"
1314
},
@@ -47,20 +48,21 @@
4748
"build:types": "tsc --emitDeclarationOnly --incremental --declarationMap false --outDir dist/types",
4849
"build:types:prod": "tsc --emitDeclarationOnly --incremental --declarationMap --outDir dist/types",
4950
"sass:build": "sass src/styles:dist/styles/css --style=compressed --quiet-deps --no-source-map",
50-
"postsass:build": "postcss dist/styles/css/**/* --dir dist/styles/css --base dist/styles/css --no-map --use autoprefixer --style=compressed",
51+
"postsass:build": "postcss dist/styles/css/**/* --dir dist/styles/css --base dist/styles/css --no-map --use cssnano --use autoprefixer --style=compressed",
5152
"sass:watch": "sass src/styles:dist/styles/css --watch --style=compressed --quiet-deps --no-source-map",
5253
"sass:copy": "cross-env copyfiles -u 2 src/styles/**/*.scss dist/styles/sass"
5354
},
5455
"devDependencies": {
5556
"autoprefixer": "^10.4.13",
5657
"copyfiles": "^2.4.1",
5758
"cross-env": "^7.0.3",
58-
"esbuild": "^0.17.7",
59+
"cssnano": "^5.1.15",
60+
"esbuild": "^0.17.8",
5961
"fs-extra": "^11.1.0",
6062
"npm-run-all2": "^6.0.4",
6163
"postcss": "^8.4.21",
6264
"postcss-cli": "^10.1.0",
63-
"sass": "^1.58.0",
65+
"sass": "^1.58.1",
6466
"typescript": "^4.9.5"
6567
}
6668
}

0 commit comments

Comments
 (0)