@danielgindi/selectbox 2.0.23 → 2.0.25

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 +56 -36
  20. package/scss/selectbox.scss +14 -2
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.23",
3
+ "version": "2.0.25",
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,23 @@
1
1
  .droplist_wrapper {
2
+ --droplist-border-radius: 5px;
3
+ --droplist-above-margin: 1px;
4
+ --droplist-below-margin: -1px;
5
+ --droplist-item-height: 1.77em;
6
+ --droplist-item-top-padding: 0.23em;
7
+ --droplist-item-bottom-padding: 0.23em;
8
+ --droplist-item-start-padding: 0.85em;
9
+ --droplist-item-end-padding: 0.85em;
10
+ --droplist-item-child-start-padding: 1.85em;
11
+ --droplist-item-multi-top-padding: 0.077em;
12
+ --droplist-item-multi-bottom-padding: 0.154em;
13
+ --droplist-item-multi-start-padding: 0.154em;
14
+ --droplist-item-multi-end-padding: 0.462em;
15
+ --droplist-item-multi-label-top-padding: 0.077em;
16
+ --droplist-item-multi-label-start-padding: 1.85em;
17
+ --droplist-item-multi-child-start-padding: 1.15em;
18
+ --droplist-item-remove-spacing: 2px;
19
+ --droplist-checkbox-start: 6px;
20
+
2
21
  box-sizing: border-box;
3
22
  z-index: 10000;
4
23
  float: left;
@@ -6,10 +25,11 @@
6
25
  padding: 0;
7
26
  border: 1px solid #b1b1b1;
8
27
  outline: 0;
9
- border-radius: 5px;
28
+ border-radius: var(--droplist-border-radius);
10
29
  background: #fff;
11
30
  max-height: 300px;
12
31
  max-width: 100%;
32
+ line-height: 1.3;
13
33
 
14
34
  .droplist_header {
15
35
  position: relative;
@@ -25,13 +45,13 @@
25
45
  &.droplist__is_above {
26
46
  border-bottom-left-radius: 0;
27
47
  border-bottom-right-radius: 0;
28
- margin: 1px 0 0 0;
48
+ margin-top: var(--droplist-above-margin);
29
49
  }
30
50
 
31
51
  &.droplist__is_below {
32
52
  border-top-left-radius: 0;
33
53
  border-top-right-radius: 0;
34
- margin: -1px 0 0 0;
54
+ margin-top: var(--droplist-below-margin);
35
55
  }
36
56
 
37
57
  ul {
@@ -50,10 +70,11 @@
50
70
  box-sizing: border-box;
51
71
  position: relative;
52
72
  margin: 0;
53
- padding: 3px 11px 4px 11px;
54
- height: 23px;
55
- font-size: 13px;
56
- line-height: 17px;
73
+ padding-top: var(--droplist-item-top-padding);
74
+ padding-bottom: var(--droplist-item-bottom-padding);
75
+ padding-left: var(--droplist-item-start-padding);
76
+ padding-right: var(--droplist-item-end-padding);
77
+ height: var(--droplist-item-height);
57
78
  color: #3e3f48;
58
79
  white-space: nowrap;
59
80
  cursor: pointer;
@@ -73,8 +94,9 @@
73
94
  li {
74
95
  .checkbox {
75
96
  position: absolute;
76
- left: 6px;
77
- top: 3px;
97
+ top: 50%;
98
+ transform: translateY(-50%);
99
+ left: var(--droplist-checkbox-start);
78
100
  display: block;
79
101
  width: 16px;
80
102
  height: 16px;
@@ -84,13 +106,12 @@
84
106
  background-size: 100% 100%;
85
107
  }
86
108
 
87
- &:hover .checkbox {
109
+ &:not(:active):hover .checkbox {
88
110
  /* unchecked hover style */
89
111
  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
112
  }
91
113
 
92
- &:active .checkbox,
93
- &:hover:active .checkbox {
114
+ &:active .checkbox {
94
115
  /* unchecked active style */
95
116
  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
117
  }
@@ -102,13 +123,12 @@
102
123
  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
124
  }
104
125
 
105
- &:hover .checkbox {
126
+ &:not(:active):hover .checkbox {
106
127
  /* checked hover style */
107
128
  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
129
  }
109
130
 
110
- &:active .checkbox,
111
- &:hover:active .checkbox {
131
+ &:active .checkbox {
112
132
  /* checked active style */
113
133
  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
134
  }
@@ -119,11 +139,15 @@
119
139
  }
120
140
 
121
141
  li.droplist__item_multi:not(.droplist__item_multi_nocheck) {
122
- padding: 1px 6px 2px 2px;
142
+ padding-top: var(--droplist-item-multi-top-padding);
143
+ padding-bottom: var(--droplist-item-multi-bottom-padding);
144
+ padding-left: var(--droplist-item-multi-start-padding);
145
+ padding-right: var(--droplist-item-multi-end-padding);
123
146
 
124
147
  .droplist__item_label {
125
148
  display: block;
126
- margin: 1px 0 0 24px;
149
+ margin-top: var(--droplist-item-multi-label-top-padding);
150
+ margin-left: var(--droplist-item-multi-label-start-padding);
127
151
  }
128
152
  }
129
153
 
@@ -132,12 +156,12 @@
132
156
  }
133
157
 
134
158
  li.droplist__item_child.droplist__item_multi:not(.droplist__item_multi_nocheck) {
135
- padding-left: 15px;
159
+ padding-left: var(--droplist-item-multi-child-start-padding);
136
160
  }
137
161
 
138
162
  li.droplist__item_child.droplist__item_single,
139
163
  li.droplist__item_child.droplist__item_multi_nocheck {
140
- padding-left: 24px;
164
+ padding-left: var(--droplist-item-child-start-padding);
141
165
  }
142
166
 
143
167
  li.droplist__item_nointeraction {
@@ -152,7 +176,7 @@
152
176
  display: none;
153
177
  position: absolute;
154
178
  top: 0;
155
- right: 2px;
179
+ right: var(--droplist-item-remove-spacing);
156
180
  width: 34px;
157
181
  height: 20px;
158
182
  padding: 0;
@@ -187,42 +211,38 @@
187
211
  li {
188
212
  .checkbox {
189
213
  left: auto;
190
- right: 6px;
214
+ right: var(--droplist-checkbox-start);
191
215
  }
192
216
  }
193
217
 
194
218
  li.droplist__item_multi:not(.droplist__item_multi_nocheck) {
195
- padding: 1px 2px 2px 6px;
219
+ padding-left: var(--droplist-item-multi-end-padding);
220
+ padding-right: var(--droplist-item-multi-start-padding);
196
221
 
197
222
  .droplist__item_label {
198
- margin: 1px 24px 0 0;
223
+ margin-left: 0;
224
+ margin-right: var(--droplist-item-multi-label-start-padding);
199
225
  }
200
226
  }
201
227
 
202
228
  li.droplist__item_child.droplist__item_multi:not(.droplist__item_multi_nocheck) {
203
- padding-left: 6px;
204
- padding-right: 15px;
229
+ padding-left: var(--droplist-item-multi-end-padding);
230
+ padding-right: var(--droplist-item-multi-child-start-padding);
205
231
  }
206
232
 
207
233
  li.droplist__item_child.droplist__item_single,
208
234
  li.droplist__item_child.droplist__item_multi_nocheck {
209
- padding-left: 11px;
210
- padding-right: 24px;
235
+ padding-left: var(--droplist-item-end-padding);
236
+ padding-right: var(--droplist-item-child-start-padding);
211
237
  }
212
238
 
213
239
  li .remove {
214
240
  right: auto;
215
- left: 2px;
241
+ left: var(--droplist-item-remove-spacing);
216
242
  }
217
243
  }
218
244
  }
219
245
 
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;
246
+ .droplist_wrapper.droplist_disabled_no_interaction ul li.droplist__item_nointeraction {
247
+ opacity: 0.5;
228
248
  }
package/scss/selectbox.scss CHANGED
@@ -33,6 +33,7 @@ $spinner-transition-duration: .15s;
33
33
  --selectbox-multi-item-vert-spacing: 0.416em;
34
34
  --selectbox-multi-item-horz-padding: 0.416em;
35
35
  --selectbox-multi-item-top-padding: 0px;
36
+ --selectbox-multi-item-remove-spacing: 0.153em;
36
37
  --selectbox-multi-item-bottom-padding: 0.2em;
37
38
  --selectbox-multi-search-top-offset: 0px;
38
39
 
@@ -373,7 +374,8 @@ $spinner-transition-duration: .15s;
373
374
  cursor: pointer;
374
375
  display: inline-block;
375
376
  font-weight: bold;
376
- margin-right: 0.153em;
377
+ margin-top: 0.2em;
378
+ margin-right: var(--selectbox-multi-item-remove-spacing);
377
379
  font-size: 13px;
378
380
 
379
381
  &:before {
@@ -381,7 +383,7 @@ $spinner-transition-duration: .15s;
381
383
  }
382
384
 
383
385
  @include insideRtlSelectBox {
384
- margin-left: 0.153em;
386
+ margin-left: var(--selectbox-multi-item-remove-spacing);
385
387
  margin-right: 0;
386
388
  }
387
389
  }
@@ -498,6 +500,16 @@ input.selectbox__search_field {
498
500
  padding: 0;
499
501
  }
500
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
+
501
513
  @-webkit-keyframes selectbox__spinner_anim {
502
514
  0% {
503
515
  transform: rotate(0deg);