Skip to content

Commit 6980fd7

Browse files
fabienwnklrfabienwnklr
authored
Fix windows run script and use type definitions (#1922)
* fix: style dropdown bootstrap4/5 * fix: appareance with input-group class * feat: add ignoreOnDropdownHeight property * fix: calcul dropdownheight with optgroup * fix: style for input-group class * fix: add separator height to dropdown height calcul * feat: add option 'search' * test: add test for normalize/search options * fix: different style for select/active option * fix: persitant state style for selected item * fix: peristant style for selected option * fix: npm run script for windows * updates type def and use it for autocompletion * fix wrong indent * fix: remove type import throw error for build * fix position dropdown on first opening * add auto_position plugin example * add auto-select-on-type plugin example * add dropdown-header example * add select-on-focus plugin example * fix : re-comment blur method * fix syntaxe issues * fix error syntax * update link into readme
1 parent eedd41e commit 6980fd7

29 files changed

+486
-113
lines changed

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313

1414
Selectize is an extensible [jQuery](http://jquery.com/)-based custom `<select>`; UI control. It's useful for tagging, contact lists, country selectors, and so on. The goal is to provide a solid & usable experience with a clean and powerful API.
1515

16-
- [Demos](https://selectize.dev/demos.html)
16+
- [Demos](https://selectize.dev/docs/demos)
1717
- [Changelog](https://github.com/selectize/selectize.js/releases)
18-
- [Documentation](https://selectize.dev/docs.html)
18+
- [Documentation](https://selectize.dev/docs/api)
1919

2020
## Features
2121

@@ -82,7 +82,7 @@ Selectize is available at [cdnjs](https://cdnjs.com/libraries/selectize.js).
8282
$("select").selectize(options);
8383
```
8484

85-
The available options are [documented here](https://selectize.dev/docs.html).
85+
The available options are [documented here](https://selectize.dev/docs/api).
8686

8787
### Contributing
8888

‎docs/docs/plugins/auto-position.mdx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
id: auto-position
3+
title: Auto position
4+
description: A plugin for auto manage position of dropdown
5+
---
6+
7+
import AutoPosition from '@site/src/components/Examples/Plugins/AutoPosition';
8+
9+
<AutoPosition />

‎docs/docs/plugins/auto-select-on-type.mdx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
id: auto-select-on-type
3+
title: Auto Select On Tape
4+
description: A plugin by Ris Adams for auto select value when is tapping on select input
5+
---
6+
7+
import AutoSelectOnType from '@site/src/components/Examples/Plugins/AutoSelectOnType';
8+
9+
<AutoSelectOnType />

‎docs/docs/plugins/dropdown-header.mdx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
id: dropdown-header
3+
title: Dropdown header
4+
description: Add dropdown header to native dropdown with a close button.
5+
---
6+
7+
import DropdownHeader from '@site/src/components/Examples/Plugins/DropdownHeader';
8+
9+
<DropdownHeader />

‎docs/docs/plugins/select-on-focus.mdx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
id: select-on-focus
3+
title: Select on focus
4+
description: Select input value when input is focused
5+
---
6+
7+
import SelectOnFocus from '@site/src/components/Examples/Plugins/SelectOnFocus';
8+
9+
<SelectOnFocus />

‎docs/docs/usage.mdx

+8-4
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@ description: Usage
2828
### Configuration
2929

3030
<table width="100%">
31+
<tbody>
3132
<tr>
32-
<th valign="top" colspan="4" align="left"><a href="#general" name="general">General</a></th>
33+
<th valign="top" colSpan="4" align="left"><a href="#general" name="general">General</a></th>
3334
</tr>
3435
<tr>
3536
<th valign="top" width="120px" align="left">Setting</th>
@@ -227,7 +228,7 @@ description: Usage
227228
<td valign="top"><code>false</code></td>
228229
</tr>
229230
<tr>
230-
<th valign="top" colspan="4" align="left"><a href="#data_searching" name="data_searching">Data / Searching</a></th>
231+
<th valign="top" colSpan="4" align="left"><a href="#data_searching" name="data_searching">Data / Searching</a></th>
231232
</tr>
232233
<tr>
233234
<th valign="top" align="left">Setting</th>
@@ -336,7 +337,7 @@ description: Usage
336337
<td valign="top"><code>true</code></td>
337338
</tr>
338339
<tr>
339-
<th valign="top" colspan="4" align="left"><a href="#callbacks" name="callbacks">Callbacks</a></th>
340+
<th valign="top" colSpan="4" align="left"><a href="#callbacks" name="callbacks">Callbacks</a></th>
340341
</tr>
341342
<tr>
342343
<th valign="top" align="left">Setting</th>
@@ -447,7 +448,7 @@ description: Usage
447448
<td valign="top"><code>null</code></td>
448449
</tr>
449450
<tr>
450-
<th valign="top" colspan="4" align="left"><a href="#rendering" name="rendering">Rendering</a></th>
451+
<th valign="top" colSpan="4" align="left"><a href="#rendering" name="rendering">Rendering</a></th>
451452
</tr>
452453
<tr>
453454
<td valign="top"><code>render</code></td>
@@ -459,6 +460,7 @@ description: Usage
459460
escapes all special HTML characters.
460461
This is very important to use to prevent XSS vulnerabilities.
461462
<table width="100%">
463+
<tbody>
462464
<tr>
463465
<td valign="top"><code>option</code></td>
464466
<td valign="top">An option in the <br />dropdown list of <br />available options.</td>
@@ -479,9 +481,11 @@ description: Usage
479481
<td valign="top"><code>optgroup</code></td>
480482
<td valign="top">The wrapper for an <br />optgroup. The <code>html</code><br /> property in the data <br /> will be the raw <br />html of the optgroup <br />header and options.</td>
481483
</tr>
484+
</tbody>
482485
</table>
483486
</td>
484487
<td valign="top"><code>object</code></td>
485488
<td valign="top"></td>
486489
</tr>
490+
</tbody>
487491
</table>

‎docs/docusaurus.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const config = {
7676
"https://code.jquery.com/jquery-3.6.1.min.js",
7777
"https://code.jquery.com/ui/1.13.2/jquery-ui.min.js",
7878
"https://kit.fontawesome.com/109d56cc28.js",
79-
"/js/selectize.min.js",
79+
"/js/selectize.js",
8080
],
8181

8282
themeConfig:

‎docs/sidebars.js

+4
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,15 @@ const sidebars = {
6666
image: "/img/logo.svg"
6767
},
6868
items: [
69+
"plugins/auto-position",
70+
"plugins/auto-select-on-type",
6971
"plugins/clear-button",
7072
"plugins/drag-drop",
73+
"plugins/dropdown-header",
7174
"plugins/opt-group-col",
7275
"plugins/remove-button",
7376
"plugins/restore-backspace",
77+
"plugins/select-on-focus",
7478
]
7579
}
7680
],

‎docs/src/components/Examples/Api.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,11 @@ export default function Api() {
6464
>
6565
<ThemeChanger />
6666
<h4>Examples of how to interact with the control programmatically.</h4>
67-
<div class="control-group">
67+
<div className="control-group">
6868
<select id="select-tools" multiple placeholder="Pick a tool..."></select>
6969
</div>
7070

71-
<div class="pt-4">
71+
<div className="pt-4">
7272
<button type="button" value="clear()" id="button-clear">clear()</button>
7373
<button type="button" value="clearOptions()" id="button-clearoptions">clearOptions()</button>
7474
<button type="button" value="addOption()" id="button-addoption">addOption()</button>

‎docs/src/components/Examples/ConfirmDelete.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ export default function ConfirmDelete() {
2323
>
2424
<ThemeChanger />
2525
<h4>Using the Confirm Delete dialog</h4>
26-
<div class="control-group">
27-
<label for="input-tags">Tags:</label>
28-
<input type="text" id="input-tags" class="demo-default" value="awesome,neat,yeah" />
26+
<div className="control-group">
27+
<label htmlFor="input-tags">Tags:</label>
28+
<input type="text" id="input-tags" className="demo-default" defaultValue="awesome,neat,yeah" />
2929
</div>
3030
</div>
3131

‎docs/src/components/Examples/DynamicOptGroups.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,9 @@ export default function OptGroups() {
5252
<h4 style={{ textAlign: "left", marginBottom: "4rem" }}>
5353
Selectize provides the ability to group options together within the dropdown menu.
5454
</h4>
55-
<div class="control-group">
56-
<label for="select-console">Console:</label>
57-
<select id="select-console" class="demo-consoles" placeholder="Select console..."></select>
55+
<div className="control-group">
56+
<label htmlFor="select-console">Console:</label>
57+
<select id="select-console" className="demo-consoles" placeholder="Select console..."></select>
5858
</div>
5959
</div>
6060

‎docs/src/components/Examples/Events.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import CodeBlock from "@theme/CodeBlock";
44
import ThemeChanger from "../Theming/ThemeChanger";
55

66
export default function Events() {
7+
const defaultVal = ['WY'];
8+
79
useEffect(() => {
810
var eventHandler = function (name) {
911
return function () {
@@ -36,9 +38,9 @@ export default function Events() {
3638
<ThemeChanger />
3739
<h4>Using Events</h4>
3840
<p>Check out the console for more details about each event.</p>
39-
<div class="control-group">
40-
<label for="select-state">States:</label>
41-
<select id="select-state" multiple name="state">
41+
<div className="control-group">
42+
<label htmlFor="select-state">States:</label>
43+
<select id="select-state" multiple name="state" defaultValue={defaultVal}>
4244
<option value="">Select a state...</option>
4345
<option value="AL">Alabama</option>
4446
<option value="AK">Alaska</option>
@@ -90,10 +92,10 @@ export default function Events() {
9092
<option value="WA">Washington</option>
9193
<option value="WV">West Virginia</option>
9294
<option value="WI">Wisconsin</option>
93-
<option value="WY" selected>Wyoming</option>
95+
<option value="WY">Wyoming</option>
9496
</select>
9597
</div>
96-
<h4 class='mt-4'>Event Log</h4>
98+
<h4 className='mt-4'>Event Log</h4>
9799
<pre id="log"></pre>
98100
</div>
99101

‎docs/src/components/Examples/Lock.js

+13-13
Original file line numberDiff line numberDiff line change
@@ -21,32 +21,32 @@ export default function Lock() {
2121
<ThemeChanger />
2222
<h4>Control Locking.</h4>
2323
<p>Selectize controls can be locked to prevent user interaction.</p>
24-
<div class="control-group">
25-
<label for="select-locked-empty">Locked (empty):</label>
24+
<div className="control-group">
25+
<label htmlFor="select-locked-empty">Locked (empty):</label>
2626
<select id="select-locked-empty" multiple placeholder="No input allowed...">
2727
<option value="A">Option A</option>
2828
<option value="B">Option B</option>
2929
<option value="C">Option C</option>
3030
</select>
3131
</div>
32-
<div class="control-group">
33-
<label for="select-locked-single">Locked (single):</label>
34-
<select id="select-locked-single" placeholder="No input allowed...">
32+
<div className="control-group">
33+
<label htmlFor="select-locked-single">Locked (single):</label>
34+
<select id="select-locked-single" placeholder="No input allowed..." defaultValue={'B'}>
3535
<option value="A">Option A</option>
36-
<option value="B" selected>Option B</option>
36+
<option value="B">Option B</option>
3737
<option value="C">Option C</option>
3838
</select>
3939
</div>
40-
<div class="control-group">
41-
<label for="select-locked">Locked:</label>
42-
<select id="select-locked" multiple placeholder="No input allowed...">
40+
<div className="control-group">
41+
<label htmlFor="select-locked">Locked:</label>
42+
<select id="select-locked" multiple placeholder="No input allowed..." defaultValue={['B', 'C']}>
4343
<option value="A">Option A</option>
44-
<option value="B" selected>Option B</option>
45-
<option value="C" selected>Option C</option>
44+
<option value="B">Option B</option>
45+
<option value="C">Option C</option>
4646
</select>
4747
</div>
48-
<div class="control-group">
49-
<label for="select-unlocked">Unlocked:</label>
48+
<div className="control-group">
49+
<label htmlFor="select-unlocked">Unlocked:</label>
5050
<select id="select-unlocked" multiple placeholder="Input allowed...">
5151
<option value="A">Option A</option>
5252
<option value="B">Option B</option>

‎docs/src/components/Examples/Performance.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -65,19 +65,19 @@ export default function Performance() {
6565
<ThemeChanger />
6666
<h4>Performance Demo</h4>
6767
<p>This shows how it performs with 25,000 items.</p>
68-
<div class="control-group">
69-
<label for="select-junk">Jumbled Mess:</label>
68+
<div className="control-group">
69+
<label htmlFor="select-junk">Jumbled Mess:</label>
7070
<select id="select-junk" placeholder="Start Typing..."></select>
7171
</div>
7272

7373
<h4 className="pt-6">Digestion of many children</h4>
7474
<p>This example shows how long it takes to initialize a demo with a lot of DOM children. Hint: Click the load button, then click the selectize button to run the demo.</p>
75-
<div class='pt-2 pb-2'>
76-
<button type="button" class="activate" id="select-children-load">Load</button>
77-
<button type="button" class="activate" id="select-children-activate">Selectize</button>
75+
<div className='pt-2 pb-2'>
76+
<button type="button" className="activate" id="select-children-load">Load</button>
77+
<button type="button" className="activate" id="select-children-activate">Selectize</button>
7878
</div>
7979

80-
<div class="control-group">
80+
<div className="control-group">
8181
<select id="select-children"></select>
8282
</div>
8383

‎docs/src/components/Examples/Plugins/AutoPosition.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React, { useEffect } from "react";
2+
import CodeBlock from "@theme/CodeBlock";
3+
import ThemeChanger from "../../Theming/ThemeChanger";
4+
5+
export default function AutoPosition() {
6+
useEffect(() => {
7+
$("#autoPositionBottom").selectize({
8+
plugins: ["auto_position"],
9+
});
10+
11+
$("#autoPositionTop").selectize({
12+
plugins: ["auto_position"],
13+
});
14+
});
15+
16+
return (
17+
<div>
18+
<div
19+
style={{
20+
marginBottom: "1rem",
21+
}}
22+
>
23+
<ThemeChanger />
24+
<h4 style={{ textAlign: "left", marginBottom: "4rem" }}>
25+
A plugin for auto manage position of dropdown
26+
</h4>
27+
28+
<p>This select expected to open on bottom</p>
29+
<select id="autoPositionBottom">
30+
<option value=""></option>
31+
<option value="1">Awesome</option>
32+
<option value="2">Beast</option>
33+
<option value="3">Compatible</option>
34+
<option value="4">Thomas Edison</option>
35+
<option value="5">Nikola</option>
36+
<option value="6">Selectize</option>
37+
<option value="7">Javascript</option>
38+
</select>
39+
</div>
40+
41+
<CodeBlock className="language-html" title="Html">
42+
{`<select id="autoPositionBottom">
43+
<option value=''></option>
44+
<option value='1'>Awesome</option>
45+
<option value='2'>Beast</option>
46+
<option value='3'>Compatible</option>
47+
<option value='4'>Thomas Edison</option>
48+
<option value='5'>Nikola</option>
49+
<option value='6'>Selectize</option>
50+
<option value='7'>Javascript</option>
51+
</select>
52+
`}
53+
</CodeBlock>
54+
<CodeBlock className="language-javascript" title="Javascript">
55+
{`$("#autoPositionBottom").selectize({
56+
plugins: ["auto_position"],
57+
});`}
58+
</CodeBlock>
59+
60+
<div style={{ marginTop: "10rem" }}>
61+
<p>This select expected to open on top</p>
62+
<pre className="margin-bottom--md">Scroll to auto update dropdown positionning</pre>
63+
<select id="autoPositionTop">
64+
<option value=""></option>
65+
<option value="1">Awesome</option>
66+
<option value="2">Beast</option>
67+
<option value="3">Compatible</option>
68+
<option value="4">Thomas Edison</option>
69+
<option value="5">Nikola</option>
70+
<option value="6">Selectize</option>
71+
<option value="7">Javascript</option>
72+
</select>
73+
</div>
74+
75+
<CodeBlock className="language-html" title="Html">
76+
{`<select id="autoPositionTop">
77+
<option value=''></option>
78+
<option value='1'>Awesome</option>
79+
<option value='2'>Beast</option>
80+
<option value='3'>Compatible</option>
81+
<option value='4'>Thomas Edison</option>
82+
<option value='5'>Nikola</option>
83+
<option value='6'>Selectize</option>
84+
<option value='7'>Javascript</option>
85+
</select>
86+
`}
87+
</CodeBlock>
88+
<CodeBlock className="language-javascript" title="Javascript">
89+
{`$("#autoPositionTop").selectize({
90+
plugins: ["auto_position"],
91+
});`}
92+
</CodeBlock>
93+
</div>
94+
);
95+
}

0 commit comments

Comments
 (0)