simp-select 1.1.23 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/README.md +91 -67
- package/dist/demo/index.html +12 -2
- package/dist/simpleSelect.js +1 -1
- package/dist/simpleSelectItemDOM.d.ts +1 -0
- package/dist/style.css +1 -1
- package/dist/types/simpleSelect.types.d.ts +1 -0
- package/package.json +1 -1
- package/src/const/simpleSelection.const.ts +2 -0
- package/src/demo/index.html +66 -2
- package/src/simpleSelectItemDOM.ts +36 -10
- package/src/style.css +25 -0
- package/src/types/simpleSelect.types.ts +2 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
|
5
|
+
|
|
6
|
+
## [1.2.0] - 2026-06-17
|
|
7
|
+
|
|
8
|
+
### 🚀 Added
|
|
9
|
+
- New `isLabelMode` option (`data-is-label-mode`) to display the placeholder as a persistent top-level label.
|
|
10
|
+
- CSS state classes `SimpleSel--fill_with_value` and `SimpleSel--fill_without_value` for smart placeholder visibility tracking.
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## [1.1.23] and below
|
|
15
|
+
- Previous release history can be found in Git commit logs.
|
package/README.md
CHANGED
|
@@ -17,8 +17,8 @@ npm install simp-select --save
|
|
|
17
17
|
```
|
|
18
18
|
Or you can load it via a script tag as follows:
|
|
19
19
|
```
|
|
20
|
-
<script src="https://unpkg.com/simp-select@1.
|
|
21
|
-
<script src="https://unpkg.com/simp-select@1.
|
|
20
|
+
<script src="https://unpkg.com/simp-select@1.2.0/dist/simpleSelect.js" ></script>
|
|
21
|
+
<script src="https://unpkg.com/simp-select@1.2.0/dist/polyfill.js" ></script> - for IE 11
|
|
22
22
|
Or get last version
|
|
23
23
|
<script src="https://unpkg.com/simp-select"></script>
|
|
24
24
|
```
|
|
@@ -39,73 +39,97 @@ the variable `SimpSelect` attached to `window` or `this` depending on what envir
|
|
|
39
39
|
## API
|
|
40
40
|
#### `new SimpSelect(selector, <options>)`
|
|
41
41
|
|
|
42
|
-
| Property | Value
|
|
43
|
-
|
|
44
|
-
| **selector**(required) | string(css selector), HTMLSelectElement, HTMLSelectElement(Array, HTMLSelectElement)
|
|
45
|
-
| **OPTIONS:** |
|
|
46
|
-
| **countShowSelected**:number* | <p>default: **3** </p> Show count selected options. If more then this count, showed template: Selected: 4<p>Or - `data-simple-count-shows-selected="3"` - in select
|
|
47
|
-
| **isSearch**:boolean* | <p>default: **false** </p> Show input for filter items <p>Or - `data-simple-select-search="true"` - in select
|
|
48
|
-
| **isSearchInDropdown**:boolean* | <p>default: **false** </p> Show search input inside dropdown <p>Or - `data-simple-select-search-dropdown="true"` - in select
|
|
49
|
-
| **isConfirmInMulti**:boolean* | <p>default: **false** </p> Show buttons `OK` and `Cancel`. Only Multiselect <p>Or `data-simple-is-confirm="true" - in select`</p>
|
|
50
|
-
| **isConfirmInMultiOkClickOutside**:boolean | <p>default: **false** </p> Click outside like click by button `OK`. Only if `isConfirmInMulti=true`
|
|
51
|
-
| **nativeOnDevice**:string[] | <p>default: **'Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk'** </p> The system default select list is rendered on the matched device(Check useragent ).
|
|
52
|
-
| **debounceTime**:number* | <p>default: **0** </p> The change event will not be triggered immediately, but after a specified amount of time. <p>Or `data-simple-debounce-time="1000"` in select
|
|
53
|
-
| **floatWidth**:number* | <p>default: **767** </p> Minimum screen width of device below which the dropdown is rendered like popup. <p>Or `data-simple-float-width="500" in select. Or data-simple-float-none="true" - cancel for select`
|
|
54
|
-
| **sepChars**:string | <p>default: **,** </p> Separator for selected element. Show
|
|
55
|
-
| **selectAll**:boolean* | <p>default: **false**</p> Show button - `Select all` <p>Or `data-simple-select-all="true"` in select
|
|
56
|
-
| **selectAllAfterClose**:boolean | <p>default: **true**</p> Close dropdown after click for `select all`
|
|
57
|
-
| **resetAll**:boolean* | <p>default: **false**</p> Show button - `Reset all` <p>Or `data-simple-reset-all="true"` in select
|
|
58
|
-
| **resetAllAfterClose**:boolean | <p>default: **true**</p> Close dropdown after click for `Reset all`
|
|
59
|
-
| **isCloneClass**:boolean | <p>default: **true**</p> Clone class from native select to wrapper created select
|
|
60
|
-
| **isRemoveTop**:boolean* | <p>default: **false**</p> Do not create top element (Title, arrow, search ) (default: false) <p>Or `data-simple-remove-top="true"` in select
|
|
61
|
-
| **isUp**:boolean* | <p>default: **false**</p> Dropdown rendering the direction in which to open the dropdown (default: false) <p>Or `data-simple-up="true"` in select
|
|
62
|
-
| **isAlwaysOpen**:boolean* | <p>default: **false**</p> Dropdown always open (default: false) <p>Or `data-simple-always-open="true"` in select
|
|
63
|
-
| **isAlwaysOpenShowDisabledTabindex**:boolean* | <p>default: **false**</p> Set tabindex (tabindex="0") for disabled element (In Always open list)
|
|
64
|
-
| **isOnlyPlaceholder**:boolean* | <p>default: **false**</p> Show only placeholder. Don't show selected options (default: false) <p>Or `data-simple-is-only-placeholder="true"` in select
|
|
65
|
-
| **
|
|
66
|
-
| **
|
|
67
|
-
| **
|
|
68
|
-
| **
|
|
69
|
-
| **
|
|
70
|
-
| **
|
|
71
|
-
| **
|
|
72
|
-
| **
|
|
73
|
-
| **
|
|
74
|
-
| **
|
|
75
|
-
| **
|
|
76
|
-
| **
|
|
77
|
-
| **
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
| **data-simple-
|
|
81
|
-
| **data-simple-item-html-
|
|
82
|
-
| **data-simple-
|
|
83
|
-
| **data-simple-
|
|
84
|
-
| **data-simple-html-
|
|
85
|
-
| **data-simple-
|
|
86
|
-
|
|
|
87
|
-
|
|
|
88
|
-
| **
|
|
89
|
-
| **
|
|
90
|
-
| **
|
|
91
|
-
| **
|
|
92
|
-
| **
|
|
93
|
-
| **
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
| **
|
|
97
|
-
| **
|
|
98
|
-
| **
|
|
99
|
-
| **
|
|
100
|
-
| **
|
|
101
|
-
| **
|
|
102
|
-
|
|
|
103
|
-
|
|
|
104
|
-
| **
|
|
105
|
-
| **
|
|
106
|
-
| **getSelects()**:simpleSelect.getSelects() | Get list SimpSelect
|
|
42
|
+
| Property | Value |
|
|
43
|
+
|----------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
44
|
+
| **selector**(required) | string(css selector), HTMLSelectElement, HTMLSelectElement(Array, HTMLSelectElement) |
|
|
45
|
+
| **OPTIONS:** | |
|
|
46
|
+
| **countShowSelected**:number* | <p>default: **3** </p> Show count selected options. If more then this count, showed template: Selected: 4<p>Or - `data-simple-count-shows-selected="3"` - in select |
|
|
47
|
+
| **isSearch**:boolean* | <p>default: **false** </p> Show input for filter items <p>Or - `data-simple-select-search="true"` - in select |
|
|
48
|
+
| **isSearchInDropdown**:boolean* | <p>default: **false** </p> Show search input inside dropdown <p>Or - `data-simple-select-search-dropdown="true"` - in select |
|
|
49
|
+
| **isConfirmInMulti**:boolean* | <p>default: **false** </p> Show buttons `OK` and `Cancel`. Only Multiselect <p>Or `data-simple-is-confirm="true" - in select`</p> |
|
|
50
|
+
| **isConfirmInMultiOkClickOutside**:boolean | <p>default: **false** </p> Click outside like click by button `OK`. Only if `isConfirmInMulti=true` |
|
|
51
|
+
| **nativeOnDevice**:string[] | <p>default: **'Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk'** </p> The system default select list is rendered on the matched device(Check useragent ). |
|
|
52
|
+
| **debounceTime**:number* | <p>default: **0** </p> The change event will not be triggered immediately, but after a specified amount of time. <p>Or `data-simple-debounce-time="1000"` in select |
|
|
53
|
+
| **floatWidth**:number* | <p>default: **767** </p> Minimum screen width of device below which the dropdown is rendered like popup. <p>Or `data-simple-float-width="500" in select. Or data-simple-float-none="true" - cancel for select` |
|
|
54
|
+
| **sepChars**:string | <p>default: **,** </p> Separator for selected element. Show |
|
|
55
|
+
| **selectAll**:boolean* | <p>default: **false**</p> Show button - `Select all` <p>Or `data-simple-select-all="true"` in select |
|
|
56
|
+
| **selectAllAfterClose**:boolean | <p>default: **true**</p> Close dropdown after click for `select all` |
|
|
57
|
+
| **resetAll**:boolean* | <p>default: **false**</p> Show button - `Reset all` <p>Or `data-simple-reset-all="true"` in select |
|
|
58
|
+
| **resetAllAfterClose**:boolean | <p>default: **true**</p> Close dropdown after click for `Reset all` |
|
|
59
|
+
| **isCloneClass**:boolean | <p>default: **true**</p> Clone class from native select to wrapper created select |
|
|
60
|
+
| **isRemoveTop**:boolean* | <p>default: **false**</p> Do not create top element (Title, arrow, search ) (default: false) <p>Or `data-simple-remove-top="true"` in select |
|
|
61
|
+
| **isUp**:boolean* | <p>default: **false**</p> Dropdown rendering the direction in which to open the dropdown (default: false) <p>Or `data-simple-up="true"` in select |
|
|
62
|
+
| **isAlwaysOpen**:boolean* | <p>default: **false**</p> Dropdown always open (default: false) <p>Or `data-simple-always-open="true"` in select |
|
|
63
|
+
| **isAlwaysOpenShowDisabledTabindex**:boolean* | <p>default: **false**</p> Set tabindex (tabindex="0") for disabled element (In Always open list) |
|
|
64
|
+
| **isOnlyPlaceholder**:boolean* | <p>default: **false**</p> Show only placeholder. Don't show selected options (default: false) <p>Or `data-simple-is-only-placeholder="true"` in select |
|
|
65
|
+
| **isLabelMode**:boolean* | <p>default: **false**</p> Always displays the placeholder text as a persistent top-level label, even after a value is selected. See [Note](#placeholder-visibility) <p>Or `data-is-label-mode="true"` in select |
|
|
66
|
+
| **detectNative**:function | <p>default: **none**</p> Return `true` if need rendering native select |
|
|
67
|
+
| **changeBodyLi**:function | <p>default: **none**</p> Custom <li>(body) item renderer |
|
|
68
|
+
| **locale**:{key: string} | <p>default: **simpleSelectLocale** **</p> Object of locales. ** |
|
|
69
|
+
| **historyMaxSize**: number | <p>default: **0** </p> Maximum number of saved changes. |
|
|
70
|
+
| **isScrollToCheckedFirst**: boolean | <p>default: **true** </p> Scroll to the first element. This works only on the first opening. |
|
|
71
|
+
| **isScrollToCheckedAlways**: boolean | <p>default: **false** </p> Scroll to the first element. This works on each opening. |
|
|
72
|
+
| **isDebounceStatusBar**: boolean | <p>default: **false** </p> Status bar if multiselect has debounce. <p>Or `data-simple-debounce-status-bar="true"` in select |
|
|
73
|
+
| **isDebounceStatusBarBottom**: boolean | <p>default: **false** </p> Location of the bar status in the dropdown (default in the Top element) |
|
|
74
|
+
| **isNeedFormatTitle**: boolean | <p>default: **false** </p> If you need to clear the line for the title |
|
|
75
|
+
| **formatTitle**: function | <p>default: **none** </p> Custom Line Clearing Function for Title |
|
|
76
|
+
| **isSetAttributeSizeMultiple**: boolean | <p>default: **''** </p> Add classes for wrapper SimpSelect. <p>Or `data-simple-add-classes="class1 class2"` in select |
|
|
77
|
+
| **attributeSizeMultiple**: number | <p>default: **true** (If the attribute is not set for Select) </p> Set attribute "size" for seletct multiple |
|
|
78
|
+
| **addClasses**: string | <p>default: **1** </p> Value for attribute "size" for seletct multiple |
|
|
79
|
+
| ***Options only DOM elements*** | |
|
|
80
|
+
| **data-simple-placeholder="text": Select** | Replace default placeholder (locale.title) |
|
|
81
|
+
| **data-simple-item-html-before="<div>before</div>: Select** | Add HTML before content (for item Li) |
|
|
82
|
+
| **data-simple-item-html-after="<div>after</div>": Select** | Add HTML after content (for item Li) |
|
|
83
|
+
| **data-simple-add-classes="class1 class2": Select** | Add classes for wrapper SimpSelect |
|
|
84
|
+
| **data-simple-html-before="<span>before</span>": option** | Add HTML before content (for item Li) |
|
|
85
|
+
| **data-simple-html-after="<span>after</span>": option** | Add HTML after content (for item Li) |
|
|
86
|
+
| **data-simple-show-checkbox: Select** | Show checkbox in item (Li) (for single select) |
|
|
87
|
+
| ***Callbacks*** | |
|
|
88
|
+
| **callbackInitialization: (item:SimpleSelectItem) => void** | Before initialization |
|
|
89
|
+
| **callbackInitialized**:(item:SimpleSelectItem) => void; | After initialization |
|
|
90
|
+
| **callbackOpen**: (item:SimpleSelectItem) => void; | Open dropdown |
|
|
91
|
+
| **callbackClose**: (item:SimpleSelectItem) => void; | Close dropdown |
|
|
92
|
+
| **callbackDestroyInit**: (item:SimpleSelectItem) => void; | Before destroy SimpSelect |
|
|
93
|
+
| **callbackDestroy**: (item:SimpleSelectItem) => void; | After destroy SimpSelect |
|
|
94
|
+
| **callbackChangeSelect** :(e: Event, item:SimpleSelectItem) => void; | Change SimpSelect (change options) |
|
|
95
|
+
| ***Methods*** | |
|
|
96
|
+
| **reload**:select(DomElement).SimpSelect.reload() | Reload SimpSelect. |
|
|
97
|
+
| **update**:select(DomElement).SimpSelect.update() | Update list (ul in dropdown) |
|
|
98
|
+
| **detach**:select(DomElement).SimpSelect.detach() | Detach SimpSelect. |
|
|
99
|
+
| **getHistory**:select(DomElement).SimpSelect.getHistory() | Get history. |
|
|
100
|
+
| **getHistoryLast**:select(DomElement).SimpSelect.getHistoryLast() | Get history - last element. |
|
|
101
|
+
| **getHistoryFirst**:select(DomElement).SimpSelect.getHistoryFirst() | Get history - first element. |
|
|
102
|
+
| **getInstance**:select(DomElement).SimpSelect.getInstance() | Get instance SimpSelect. |
|
|
103
|
+
| ***const simpleSelect = new SimpleSelect('select')*** | Instance of the SimpleSelect plugin object |
|
|
104
|
+
| **getSelectById('ID')**:simpleSelect.getSelectById('ID') | Get item SimpSelect for ID (data-simple-select-init="ID" - dem element select) |
|
|
105
|
+
| **getSelectFirst()**:simpleSelect.getSelectFirst() | Get first item SimpSelect |
|
|
106
|
+
| **getSelects()**:simpleSelect.getSelects() | Get list SimpSelect |
|
|
107
|
+
| **getSelects()**:simpleSelect.getSelects() | Get list SimpSelect |
|
|
107
108
|
|
|
108
109
|
**Data attributes in DOM element(select) more important than initialization options.*
|
|
110
|
+
|
|
111
|
+
> 💡 <a id="placeholder-visibility"></a>**Note on Floating Label Styling**
|
|
112
|
+
>
|
|
113
|
+
> When `isLabelMode` is enabled, the plugin automatically toggles CSS state classes and handles basic placeholder visibility out of the box.
|
|
114
|
+
>
|
|
115
|
+
> You can easily customize the look of the floating label using these state classes:
|
|
116
|
+
> * **`SimpleSel--fill_with_value`** — Active when a real value is selected (label floats up).
|
|
117
|
+
> * **`SimpleSel--fill_without_value`** — Active when the selection is empty (label rests in the center).
|
|
118
|
+
>
|
|
119
|
+
> **Example Nesting CSS:**
|
|
120
|
+
> ```css
|
|
121
|
+
> /* Customizing the floating label when it moves to the top */
|
|
122
|
+
> .SimpleSel--label_mode.SimpleSel--fill_with_value {
|
|
123
|
+
> .SimpleSel__label {
|
|
124
|
+
> color: #007bff; /* Change label color when active */
|
|
125
|
+
> font-weight: 600;
|
|
126
|
+
> }
|
|
127
|
+
> }
|
|
128
|
+
> ```
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
109
133
|
```
|
|
110
134
|
**Object of locales.
|
|
111
135
|
const simpleSelectLocale: = {
|