@lemonadejs/dropdown 5.0.0 → 5.8.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/README.md +173 -172
- package/dist/index.d.ts +43 -18
- package/dist/index.js +567 -280
- package/dist/style.css +79 -54
- package/package.json +23 -23
package/dist/style.css
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
.lm-dropdown {
|
|
2
|
-
display: inline-block;
|
|
3
2
|
user-select: none;
|
|
4
3
|
cursor: pointer;
|
|
5
4
|
box-sizing: border-box;
|
|
6
5
|
outline-offset: 1px;
|
|
6
|
+
vertical-align: top;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.lm-dropdown[data-disabled="true"] {
|
|
10
|
+
opacity: 0.5;
|
|
11
|
+
pointer-events: none;
|
|
7
12
|
}
|
|
8
13
|
|
|
9
14
|
.lm-dropdown-header {
|
|
10
15
|
display: flex;
|
|
11
|
-
position: relative;
|
|
12
16
|
align-items: center;
|
|
13
17
|
}
|
|
14
18
|
|
|
@@ -23,13 +27,14 @@
|
|
|
23
27
|
cursor: pointer;
|
|
24
28
|
padding: 15px;
|
|
25
29
|
font-weight: bold;
|
|
26
|
-
outline: 0;
|
|
27
30
|
border: 0;
|
|
28
|
-
color: var(--lm-
|
|
31
|
+
color: var(--lm-font-color);
|
|
32
|
+
margin: 1px;
|
|
29
33
|
}
|
|
30
34
|
|
|
31
35
|
.lm-dropdown-content {
|
|
32
36
|
position: relative;
|
|
37
|
+
margin-top: 1px;
|
|
33
38
|
}
|
|
34
39
|
|
|
35
40
|
.lm-dropdown .lm-modal {
|
|
@@ -49,50 +54,48 @@
|
|
|
49
54
|
cursor: pointer;
|
|
50
55
|
box-sizing: border-box;
|
|
51
56
|
width: 100%;
|
|
52
|
-
background: var(--lm-background-color, #fff);
|
|
57
|
+
background: var(--lm-background-color-input, #fff);
|
|
53
58
|
border: 1px solid var(--lm-border-color, #767676);
|
|
54
59
|
border-radius: var(--lm-border-radius, 2px);
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
@media (prefers-color-scheme: dark) {
|
|
58
|
-
.lm-dropdown-input {
|
|
59
|
-
background: var(--lm-background-color, #3b3b3b);
|
|
60
|
-
border: 1px solid var(--lm-border-color, #858585);
|
|
61
|
-
color: var(--lm-text-color, #fff);
|
|
62
|
-
}
|
|
60
|
+
position: relative;
|
|
63
61
|
}
|
|
64
62
|
|
|
65
63
|
.lm-dropdown-input > br {
|
|
66
64
|
display: none;
|
|
67
65
|
}
|
|
68
66
|
|
|
69
|
-
.lm-dropdown-input:focus {
|
|
70
|
-
outline: 2px solid var(--lm-border-outline, #000);
|
|
71
|
-
outline-offset: -1px;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
67
|
.lm-dropdown-input::after {
|
|
75
68
|
content: '';
|
|
76
69
|
position: absolute;
|
|
77
70
|
width: 24px;
|
|
78
|
-
height:
|
|
79
|
-
top:
|
|
80
|
-
right:
|
|
71
|
+
height: 24px;
|
|
72
|
+
top: calc(50% - 12px);
|
|
73
|
+
right: 0;
|
|
81
74
|
background-repeat: no-repeat;
|
|
82
|
-
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns
|
|
75
|
+
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27none%27 d=%27M0 0h24v24H0V0z%27/%3E%3Cpath d=%27M7 10l5 5 5-5H7z%27 fill=%27gray%27/%3E%3C/svg%3E");
|
|
83
76
|
background-position: center;
|
|
84
77
|
transition: transform .1s ease-in-out;
|
|
85
78
|
}
|
|
86
79
|
|
|
80
|
+
.lm-application .lm-dropdown-add,
|
|
87
81
|
.lm-dropdown-add {
|
|
88
82
|
position: absolute;
|
|
89
|
-
padding:
|
|
90
|
-
|
|
83
|
+
padding: 0;
|
|
84
|
+
margin: 0;
|
|
85
|
+
border: 0;
|
|
86
|
+
background: transparent;
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
right: 30px;
|
|
89
|
+
top: calc(50% - 8px);
|
|
91
90
|
display: none;
|
|
92
91
|
}
|
|
93
92
|
|
|
94
93
|
.lm-dropdown-add::after {
|
|
95
94
|
content: '+';
|
|
95
|
+
width: 16px;
|
|
96
|
+
height: auto;
|
|
97
|
+
display: block;
|
|
98
|
+
color: var(--lm-font-color);
|
|
96
99
|
}
|
|
97
100
|
|
|
98
101
|
.lm-dropdown[data-insert="true"] .lm-dropdown-input {
|
|
@@ -124,14 +127,19 @@
|
|
|
124
127
|
box-sizing: border-box;
|
|
125
128
|
}
|
|
126
129
|
|
|
130
|
+
.lm-dropdown-item[data-disabled="true"] {
|
|
131
|
+
opacity: 0.5;
|
|
132
|
+
pointer-events: none;
|
|
133
|
+
}
|
|
134
|
+
|
|
127
135
|
.lm-dropdown-item[data-group]::before {
|
|
128
136
|
content: attr(data-group);
|
|
129
137
|
display: block;
|
|
130
138
|
padding: 8px;
|
|
131
139
|
font-weight: bold;
|
|
132
140
|
width: 100%;
|
|
133
|
-
background-color: #
|
|
134
|
-
color: #000;
|
|
141
|
+
background-color: var(--lm-background-color-input, #fff);
|
|
142
|
+
color: var(--lm-font-color, #000);
|
|
135
143
|
box-sizing: border-box;
|
|
136
144
|
}
|
|
137
145
|
|
|
@@ -140,7 +148,7 @@
|
|
|
140
148
|
text-align: left;
|
|
141
149
|
text-overflow: ellipsis;
|
|
142
150
|
overflow: hidden;
|
|
143
|
-
color: #000;
|
|
151
|
+
color: var(--lm-font-color, #000);
|
|
144
152
|
display: flex;
|
|
145
153
|
align-items: center;
|
|
146
154
|
padding: 4px 40px 4px 10px;
|
|
@@ -168,20 +176,12 @@
|
|
|
168
176
|
}
|
|
169
177
|
|
|
170
178
|
.lm-dropdown-item > div:hover {
|
|
171
|
-
background-color:
|
|
179
|
+
background-color: #1e90ff;
|
|
172
180
|
color: white;
|
|
173
181
|
}
|
|
174
182
|
|
|
175
|
-
.lm-dropdown-item[data-cursor="true"] > div {
|
|
176
|
-
background-color: #eee;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
.lm-dropdown-item[data-cursor="true"]:hover > div {
|
|
180
|
-
background-color: dodgerblue;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
183
|
.lm-dropdown-item[data-selected="true"] > div {
|
|
184
|
-
background-color:
|
|
184
|
+
background-color: #1e90ff;
|
|
185
185
|
color: white;
|
|
186
186
|
}
|
|
187
187
|
|
|
@@ -192,6 +192,18 @@
|
|
|
192
192
|
line-height: 24px;
|
|
193
193
|
}
|
|
194
194
|
|
|
195
|
+
.lm-dropdown-item[data-cursor="true"] > div {
|
|
196
|
+
background-color: var(--lm-background-color-highlight);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.lm-dropdown-item[data-cursor="true"]:hover > div {
|
|
200
|
+
background-color: var(--lm-background-color-active);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.lm-dropdown-item[data-cursor="true"].lm-dropdown-item[data-selected="true"] > div {
|
|
204
|
+
background-color: #1d86ed;
|
|
205
|
+
}
|
|
206
|
+
|
|
195
207
|
/** Picker */
|
|
196
208
|
|
|
197
209
|
.lm-dropdown[data-type="picker"][data-state="true"] .lm-dropdown-content .lm-modal {
|
|
@@ -215,7 +227,7 @@
|
|
|
215
227
|
border-top: 1px solid var(--lm-border-color);
|
|
216
228
|
border-bottom: 1px solid var(--lm-border-color);
|
|
217
229
|
box-shadow: 0 0 12px rgb(0 0 0 / 22%);
|
|
218
|
-
justify-content:
|
|
230
|
+
justify-content: space-between;
|
|
219
231
|
}
|
|
220
232
|
|
|
221
233
|
.lm-dropdown[data-type="picker"] .lm-modal {
|
|
@@ -226,6 +238,10 @@
|
|
|
226
238
|
height: 300px !important;
|
|
227
239
|
}
|
|
228
240
|
|
|
241
|
+
.lm-dropdown[data-type="picker"] .lm-lazy {
|
|
242
|
+
width: 100% !important;
|
|
243
|
+
}
|
|
244
|
+
|
|
229
245
|
.lm-dropdown[data-type="picker"] .lm-dropdown-item > div {
|
|
230
246
|
border-bottom: solid 1px rgba(0, 0, 0, 0.2);
|
|
231
247
|
text-transform: uppercase;
|
|
@@ -264,17 +280,16 @@
|
|
|
264
280
|
position: initial;
|
|
265
281
|
}
|
|
266
282
|
|
|
267
|
-
.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-header
|
|
268
|
-
display:
|
|
269
|
-
position: fixed;
|
|
270
|
-
right: 0;
|
|
271
|
-
top: 0;
|
|
283
|
+
.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-header {
|
|
284
|
+
display: flex;
|
|
272
285
|
background-color: #fff;
|
|
273
|
-
z-index: 1;
|
|
274
|
-
padding-top: 5px;
|
|
275
286
|
box-sizing: border-box;
|
|
276
287
|
}
|
|
277
288
|
|
|
289
|
+
.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-header-controls {
|
|
290
|
+
display: flex;
|
|
291
|
+
}
|
|
292
|
+
|
|
278
293
|
.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input {
|
|
279
294
|
font-size: 1.5em;
|
|
280
295
|
border-radius: 0;
|
|
@@ -286,6 +301,7 @@
|
|
|
286
301
|
padding-bottom: 0;
|
|
287
302
|
line-height: 60px;
|
|
288
303
|
height: 60px;
|
|
304
|
+
flex: 1;
|
|
289
305
|
}
|
|
290
306
|
|
|
291
307
|
.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input::after {
|
|
@@ -293,7 +309,15 @@
|
|
|
293
309
|
}
|
|
294
310
|
|
|
295
311
|
.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-add {
|
|
296
|
-
right:
|
|
312
|
+
right: 150px;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.lm-dropdown[data-type="searchbar"][data-state="true"]:not(.lm-dropdown-loading) .lm-dropdown-add::after {
|
|
316
|
+
content: 'add';
|
|
317
|
+
font-family: "Material Symbols Outlined", "Material Icons";
|
|
318
|
+
font-size: 24px;
|
|
319
|
+
width: 24px;
|
|
320
|
+
height: 24px;
|
|
297
321
|
}
|
|
298
322
|
|
|
299
323
|
.lm-dropdown[data-type="searchbar"] .lm-modal {
|
|
@@ -319,8 +343,13 @@
|
|
|
319
343
|
|
|
320
344
|
.lm-dropdown[data-type="searchbar"] .lm-lazy {
|
|
321
345
|
max-height: initial;
|
|
346
|
+
width: 100% !important;
|
|
322
347
|
}
|
|
323
348
|
|
|
349
|
+
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
|
|
324
353
|
.lm-dropdown .lm-lazy {
|
|
325
354
|
max-height: 300px;
|
|
326
355
|
scrollbar-width: thin;
|
|
@@ -334,18 +363,18 @@
|
|
|
334
363
|
width: 12px;
|
|
335
364
|
}
|
|
336
365
|
|
|
337
|
-
.lm-dropdown
|
|
338
|
-
content: '';
|
|
366
|
+
.lm-dropdown .lm-dropdown-loading::after {
|
|
339
367
|
position: absolute;
|
|
368
|
+
content: '';
|
|
340
369
|
width: 12px;
|
|
341
370
|
height: 12px;
|
|
342
|
-
margin
|
|
343
|
-
margin-left: -12px;
|
|
371
|
+
margin: 5px;
|
|
344
372
|
border-style: solid;
|
|
345
373
|
border-color: #888;
|
|
346
374
|
border-top-color: transparent;
|
|
347
375
|
border-width: 1px;
|
|
348
376
|
border-radius: 50%;
|
|
377
|
+
background-image: none;
|
|
349
378
|
animation: lm-dropdown-spin .8s linear infinite;
|
|
350
379
|
}
|
|
351
380
|
|
|
@@ -358,10 +387,6 @@
|
|
|
358
387
|
}
|
|
359
388
|
}
|
|
360
389
|
|
|
361
|
-
.lm-dark-mode .lm-dropdown-item > div {
|
|
362
|
-
color: white;
|
|
363
|
-
}
|
|
364
|
-
|
|
365
390
|
/** Lazyloading */
|
|
366
391
|
|
|
367
392
|
.lm-lazy {
|
package/package.json
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@lemonadejs/dropdown",
|
|
3
|
-
"title": "LemonadeJS dropdown",
|
|
4
|
-
"description": "LemonadeJS dropdown integration.",
|
|
5
|
-
"author": {
|
|
6
|
-
"name": "Contact <contact@lemonadejs.net>",
|
|
7
|
-
"url": "https://lemonadejs.net"
|
|
8
|
-
},
|
|
9
|
-
"keywords": [
|
|
10
|
-
"javascript dropdown",
|
|
11
|
-
"lemonadejs plugins",
|
|
12
|
-
"js",
|
|
13
|
-
"library",
|
|
14
|
-
"javascript plugins"
|
|
15
|
-
],
|
|
16
|
-
"dependencies": {
|
|
17
|
-
"lemonadejs": "^5.
|
|
18
|
-
"@lemonadejs/modal": "^5.
|
|
19
|
-
},
|
|
20
|
-
"main": "dist/index.js",
|
|
21
|
-
"types": "dist/index.d.ts",
|
|
22
|
-
"version": "5.
|
|
23
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@lemonadejs/dropdown",
|
|
3
|
+
"title": "LemonadeJS dropdown",
|
|
4
|
+
"description": "LemonadeJS dropdown integration.",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Contact <contact@lemonadejs.net>",
|
|
7
|
+
"url": "https://lemonadejs.net"
|
|
8
|
+
},
|
|
9
|
+
"keywords": [
|
|
10
|
+
"javascript dropdown",
|
|
11
|
+
"lemonadejs plugins",
|
|
12
|
+
"js",
|
|
13
|
+
"library",
|
|
14
|
+
"javascript plugins"
|
|
15
|
+
],
|
|
16
|
+
"dependencies": {
|
|
17
|
+
"lemonadejs": "^5.3.2",
|
|
18
|
+
"@lemonadejs/modal": "^5.8.0"
|
|
19
|
+
},
|
|
20
|
+
"main": "dist/index.js",
|
|
21
|
+
"types": "dist/index.d.ts",
|
|
22
|
+
"version": "5.8.0"
|
|
23
|
+
}
|