@danielgindi/selectbox 2.0.24 → 2.0.26

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.
Files changed (20) hide show
  1. package/css/droplist.css +1 -1
  2. package/css/droplist.css.map +1 -1
  3. package/css/selectbox.css +1 -1
  4. package/css/selectbox.css.map +1 -1
  5. package/dist/lib.cjs.js +4 -1
  6. package/dist/lib.cjs.js.map +1 -1
  7. package/dist/lib.cjs.min.js +2 -2
  8. package/dist/lib.cjs.min.js.map +1 -1
  9. package/dist/lib.es6.js +4 -1
  10. package/dist/lib.es6.js.map +1 -1
  11. package/dist/lib.es6.min.js +2 -2
  12. package/dist/lib.es6.min.js.map +1 -1
  13. package/dist/lib.umd.js +4 -1
  14. package/dist/lib.umd.js.map +1 -1
  15. package/dist/lib.umd.min.js +2 -2
  16. package/dist/lib.umd.min.js.map +1 -1
  17. package/lib/SelectBox.js +3 -0
  18. package/package.json +1 -1
  19. package/scss/droplist.scss +68 -40
  20. package/scss/selectbox.scss +10 -0
package/lib/SelectBox.js CHANGED
@@ -1923,6 +1923,9 @@ class SelectBox {
1923
1923
  }
1924
1924
  }
1925
1925
 
1926
+ p.selectionChanged = true;
1927
+ p.resortBySelectionNeeded = true;
1928
+
1926
1929
  // If we are in context of group, then there are lots of syncs coming, so do not do it now
1927
1930
  const hasGroupSync = !!event.isCheckingGroup;
1928
1931
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@danielgindi/selectbox",
3
- "version": "2.0.24",
3
+ "version": "2.0.26",
4
4
  "description": "A collection of dom utilities. So you can work natively with the dom without dom frameworks.",
5
5
  "main": "dist/lib.cjs.min.js",
6
6
  "module": "lib/index.js",
package/scss/droplist.scss CHANGED
@@ -1,4 +1,24 @@
1
1
  .droplist_wrapper {
2
+ --droplist-border-radius: 5px;
3
+ --droplist-border-above-below-radius: 0px;
4
+ --droplist-above-margin: 1px;
5
+ --droplist-below-margin: -1px;
6
+ --droplist-item-height: 1.77em;
7
+ --droplist-item-top-padding: 0.23em;
8
+ --droplist-item-bottom-padding: 0.23em;
9
+ --droplist-item-start-padding: 0.85em;
10
+ --droplist-item-end-padding: 0.85em;
11
+ --droplist-item-child-start-padding: 1.85em;
12
+ --droplist-item-multi-top-padding: 0.077em;
13
+ --droplist-item-multi-bottom-padding: 0.154em;
14
+ --droplist-item-multi-start-padding: 0.154em;
15
+ --droplist-item-multi-end-padding: 0.462em;
16
+ --droplist-item-multi-label-top-padding: 0.077em;
17
+ --droplist-item-multi-label-start-padding: 1.85em;
18
+ --droplist-item-multi-child-start-padding: 1.15em;
19
+ --droplist-item-remove-spacing: 2px;
20
+ --droplist-checkbox-start: 6px;
21
+
2
22
  box-sizing: border-box;
3
23
  z-index: 10000;
4
24
  float: left;
@@ -6,10 +26,11 @@
6
26
  padding: 0;
7
27
  border: 1px solid #b1b1b1;
8
28
  outline: 0;
9
- border-radius: 5px;
29
+ border-radius: var(--droplist-border-radius);
10
30
  background: #fff;
11
31
  max-height: 300px;
12
32
  max-width: 100%;
33
+ line-height: 1.3;
13
34
 
14
35
  .droplist_header {
15
36
  position: relative;
@@ -23,18 +44,25 @@
23
44
  }
24
45
 
25
46
  &.droplist__is_above {
26
- border-bottom-left-radius: 0;
27
- border-bottom-right-radius: 0;
28
- margin: 1px 0 0 0;
47
+ margin-top: var(--droplist-above-margin);
48
+
49
+ &, ul {
50
+ border-bottom-left-radius: var(--droplist-border-above-below-radius);
51
+ border-bottom-right-radius: var(--droplist-border-above-below-radius);
52
+ }
29
53
  }
30
54
 
31
55
  &.droplist__is_below {
32
- border-top-left-radius: 0;
33
- border-top-right-radius: 0;
34
- margin: -1px 0 0 0;
56
+ margin-top: var(--droplist-below-margin);
57
+
58
+ &, ul {
59
+ border-top-left-radius: var(--droplist-border-above-below-radius);
60
+ border-top-right-radius: var(--droplist-border-above-below-radius);
61
+ }
35
62
  }
36
63
 
37
64
  ul {
65
+ border-radius: var(--droplist-border-radius);
38
66
  position: relative;
39
67
  list-style: none;
40
68
  margin: 0;
@@ -50,10 +78,11 @@
50
78
  box-sizing: border-box;
51
79
  position: relative;
52
80
  margin: 0;
53
- padding: 3px 11px 4px 11px;
54
- height: 23px;
55
- font-size: 13px;
56
- line-height: 17px;
81
+ padding-top: var(--droplist-item-top-padding);
82
+ padding-bottom: var(--droplist-item-bottom-padding);
83
+ padding-left: var(--droplist-item-start-padding);
84
+ padding-right: var(--droplist-item-end-padding);
85
+ height: var(--droplist-item-height);
57
86
  color: #3e3f48;
58
87
  white-space: nowrap;
59
88
  cursor: pointer;
@@ -73,8 +102,9 @@
73
102
  li {
74
103
  .checkbox {
75
104
  position: absolute;
76
- left: 6px;
77
- top: 3px;
105
+ top: 50%;
106
+ transform: translateY(-50%);
107
+ left: var(--droplist-checkbox-start);
78
108
  display: block;
79
109
  width: 16px;
80
110
  height: 16px;
@@ -84,13 +114,12 @@
84
114
  background-size: 100% 100%;
85
115
  }
86
116
 
87
- &:hover .checkbox {
117
+ &:not(:active):hover .checkbox {
88
118
  /* unchecked hover style */
89
119
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %236ca1c6; fill: %23fff;'%3E%3C/rect%3E%3C/svg%3E");
90
120
  }
91
121
 
92
- &:active .checkbox,
93
- &:hover:active .checkbox {
122
+ &:active .checkbox {
94
123
  /* unchecked active style */
95
124
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %23396d93; fill: %23b5cfe3;'%3E%3C/rect%3E%3C/svg%3E");
96
125
  }
@@ -102,13 +131,12 @@
102
131
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %236ca1c6; fill: %23dae7f1;'%3E%3C/rect%3E%3Cpath fill='%236ca1c6' d='m364.136 158.276-172.589 171.204c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z'/%3E%3C/svg%3E%0A");
103
132
  }
104
133
 
105
- &:hover .checkbox {
134
+ &:not(:active):hover .checkbox {
106
135
  /* checked hover style */
107
136
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %236ca1c6; fill: %23fff;'%3E%3C/rect%3E%3Cpath fill='%236ca1c6' d='m364.136 158.276-172.589 171.204c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z'/%3E%3C/svg%3E%0A");
108
137
  }
109
138
 
110
- &:active .checkbox,
111
- &:hover:active .checkbox {
139
+ &:active .checkbox {
112
140
  /* checked active style */
113
141
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %23396d93; fill: %23b5cfe3;'%3E%3C/rect%3E%3Cpath fill='%23396d93' d='m364.136 158.276-172.589 171.204c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z'/%3E%3C/svg%3E%0A");
114
142
  }
@@ -119,11 +147,15 @@
119
147
  }
120
148
 
121
149
  li.droplist__item_multi:not(.droplist__item_multi_nocheck) {
122
- padding: 1px 6px 2px 2px;
150
+ padding-top: var(--droplist-item-multi-top-padding);
151
+ padding-bottom: var(--droplist-item-multi-bottom-padding);
152
+ padding-left: var(--droplist-item-multi-start-padding);
153
+ padding-right: var(--droplist-item-multi-end-padding);
123
154
 
124
155
  .droplist__item_label {
125
156
  display: block;
126
- margin: 1px 0 0 24px;
157
+ margin-top: var(--droplist-item-multi-label-top-padding);
158
+ margin-left: var(--droplist-item-multi-label-start-padding);
127
159
  }
128
160
  }
129
161
 
@@ -132,12 +164,12 @@
132
164
  }
133
165
 
134
166
  li.droplist__item_child.droplist__item_multi:not(.droplist__item_multi_nocheck) {
135
- padding-left: 15px;
167
+ padding-left: var(--droplist-item-multi-child-start-padding);
136
168
  }
137
169
 
138
170
  li.droplist__item_child.droplist__item_single,
139
171
  li.droplist__item_child.droplist__item_multi_nocheck {
140
- padding-left: 24px;
172
+ padding-left: var(--droplist-item-child-start-padding);
141
173
  }
142
174
 
143
175
  li.droplist__item_nointeraction {
@@ -152,7 +184,7 @@
152
184
  display: none;
153
185
  position: absolute;
154
186
  top: 0;
155
- right: 2px;
187
+ right: var(--droplist-item-remove-spacing);
156
188
  width: 34px;
157
189
  height: 20px;
158
190
  padding: 0;
@@ -187,42 +219,38 @@
187
219
  li {
188
220
  .checkbox {
189
221
  left: auto;
190
- right: 6px;
222
+ right: var(--droplist-checkbox-start);
191
223
  }
192
224
  }
193
225
 
194
226
  li.droplist__item_multi:not(.droplist__item_multi_nocheck) {
195
- padding: 1px 2px 2px 6px;
227
+ padding-left: var(--droplist-item-multi-end-padding);
228
+ padding-right: var(--droplist-item-multi-start-padding);
196
229
 
197
230
  .droplist__item_label {
198
- margin: 1px 24px 0 0;
231
+ margin-left: 0;
232
+ margin-right: var(--droplist-item-multi-label-start-padding);
199
233
  }
200
234
  }
201
235
 
202
236
  li.droplist__item_child.droplist__item_multi:not(.droplist__item_multi_nocheck) {
203
- padding-left: 6px;
204
- padding-right: 15px;
237
+ padding-left: var(--droplist-item-multi-end-padding);
238
+ padding-right: var(--droplist-item-multi-child-start-padding);
205
239
  }
206
240
 
207
241
  li.droplist__item_child.droplist__item_single,
208
242
  li.droplist__item_child.droplist__item_multi_nocheck {
209
- padding-left: 11px;
210
- padding-right: 24px;
243
+ padding-left: var(--droplist-item-end-padding);
244
+ padding-right: var(--droplist-item-child-start-padding);
211
245
  }
212
246
 
213
247
  li .remove {
214
248
  right: auto;
215
- left: 2px;
249
+ left: var(--droplist-item-remove-spacing);
216
250
  }
217
251
  }
218
252
  }
219
253
 
220
- .has_droplist_above {
221
- border-top-left-radius: 0;
222
- border-top-right-radius: 0;
223
- }
224
-
225
- .has_droplist_below {
226
- border-bottom-left-radius: 0;
227
- border-bottom-right-radius: 0;
254
+ .droplist_wrapper.droplist_disabled_no_interaction ul li.droplist__item_nointeraction {
255
+ opacity: 0.5;
228
256
  }
package/scss/selectbox.scss CHANGED
@@ -500,6 +500,16 @@ input.selectbox__search_field {
500
500
  padding: 0;
501
501
  }
502
502
 
503
+ .selectbox.has_droplist_above {
504
+ border-top-left-radius: 0;
505
+ border-top-right-radius: 0;
506
+ }
507
+
508
+ .selectbox.has_droplist_below {
509
+ border-bottom-left-radius: 0;
510
+ border-bottom-right-radius: 0;
511
+ }
512
+
503
513
  @-webkit-keyframes selectbox__spinner_anim {
504
514
  0% {
505
515
  transform: rotate(0deg);