@lemonadejs/dropdown 3.1.10 → 3.1.12

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/dist/style.css CHANGED
@@ -1,308 +1,308 @@
1
- .lm-dropdown {
2
- display: inline-block;
3
- user-select: none;
4
- cursor: pointer;
5
- box-sizing: border-box;
6
- outline-offset: 1px;
7
- }
8
-
9
- .lm-dropdown-header {
10
- display: flex;
11
- position: relative;
12
- align-items: center;
13
- }
14
-
15
- .lm-dropdown-header button {
16
- display: none;
17
- border: 1px solid transparent;
18
- background-color: transparent;
19
- text-transform: uppercase;
20
- cursor: pointer;
21
- padding: 15px;
22
- font-weight: bold;
23
- outline: 0;
24
- }
25
-
26
- .lm-dropdown .lm-modal {
27
- padding: 0;
28
- min-width: initial;
29
- min-height: 5px;
30
- border: 1px solid #ccc;
31
- border-radius: 0;
32
- }
33
-
34
- .lm-dropdown .lm-lazy {
35
- max-height: 300px;
36
- }
37
-
38
- .lm-dropdown-input {
39
- padding: 5px 24px 5px 10px;
40
- white-space: nowrap;
41
- overflow: hidden;
42
- text-overflow: ellipsis;
43
- appearance: none;
44
- cursor: pointer;
45
- box-sizing: border-box;
46
- width: 100%;
47
- border: 1px solid #ccc;
48
- min-height: 1em;
49
- }
50
-
51
- .lm-dropdown-input::after {
52
- content: '';
53
- position: absolute;
54
- width: 24px;
55
- height: 100%;
56
- top: 0;
57
- right: 4px;
58
- background-repeat: no-repeat;
59
- background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E");
60
- background-position: center;
61
- transition: transform .1s ease-in-out;
62
- }
63
-
64
- .lm-dropdown-add {
65
- position: absolute;
66
- padding: 12px;
67
- right: 20px;
68
- display: none;
69
- }
70
-
71
- .lm-dropdown-add::after {
72
- content: '+';
73
- }
74
-
75
- .lm-dropdown[data-insert="true"] .lm-dropdown-input {
76
- padding-right: 35px;
77
- }
78
-
79
- .lm-dropdown[data-state="true"][data-insert="true"] .lm-dropdown-add {
80
- display: initial;
81
- }
82
-
83
- .lm-dropdown[data-state="true"] .lm-dropdown-input::after {
84
- transform: rotate(-180deg);
85
- }
86
-
87
- .lm-dropdown-input:empty::before {
88
- content: "\00a0";
89
- }
90
-
91
- .lm-dropdown[data-state="true"] .lm-dropdown-input[placeholder]:empty::before {
92
- content: "\00a0" attr(placeholder);
93
- color: #aaa;
94
- }
95
-
96
- .lm-dropdown-options {
97
- width: 100%;
98
- }
99
-
100
- .lm-dropdown-item {
101
- box-sizing: border-box;
102
- }
103
-
104
- .lm-dropdown-item[data-group]::before {
105
- content: attr(data-group);
106
- display: block;
107
- padding: 8px;
108
- font-weight: bold;
109
- width: 100%;
110
- background-color: #FFF;
111
- color: #000;
112
- box-sizing: border-box;
113
- }
114
-
115
- .lm-dropdown-item > div {
116
- white-space: nowrap;
117
- text-align: left;
118
- text-overflow: ellipsis;
119
- overflow: hidden;
120
- color: #000;
121
- display: flex;
122
- align-items: center;
123
- padding: 4px 40px 4px 16px;
124
- position: relative;
125
- box-sizing: border-box;
126
- }
127
-
128
- .lm-dropdown-item > div > img {
129
- width: 24px;
130
- height: 24px;
131
- margin-left: -6px;
132
- margin-right: 6px;
133
- }
134
-
135
- .lm-dropdown-item > div > img[src=''] {
136
- display: none;
137
- }
138
-
139
- .lm-dropdown-item > div:hover {
140
- background-color: dodgerblue !important;
141
- color: white;
142
- }
143
-
144
- .lm-dropdown-item[data-cursor="true"] > div {
145
- background-color: #eee;
146
- }
147
-
148
- .lm-dropdown-item[data-cursor="true"]:hover > div {
149
- background-color: dodgerblue;
150
- }
151
-
152
- .lm-dropdown-item[data-selected="true"] > div {
153
- background-color: dodgerblue;
154
- color: white;
155
- }
156
-
157
- .lm-dropdown-item[data-selected="true"] > div::after {
158
- content: '✓';
159
- position: absolute;
160
- right: 10px;
161
- line-height: 24px;
162
- }
163
-
164
- /** Picker */
165
-
166
- .lm-dropdown[data-type="picker"][data-state="true"] .lm-dropdown-header button {
167
- display: initial;
168
- position: absolute;
169
- border: 1px solid #ccc;
170
- text-align: right;
171
- bottom: 300px;
172
- left: 0;
173
- width: 100% !important;
174
- }
175
-
176
- .lm-dropdown[data-type="picker"] .lm-modal {
177
- position: absolute;
178
- bottom: 0;
179
- left: 0;
180
- width: 100% !important;
181
- height: 300px !important;
182
- }
183
-
184
- .lm-dropdown[data-type="picker"] .lm-dropdown-item > div {
185
- border-bottom: solid 1px rgba(0, 0, 0, 0.2);
186
- text-transform: uppercase;
187
- font-size: 1.1em;
188
- padding: 16px;
189
- }
190
-
191
- .lm-dropdown[data-type="picker"] .lm-dropdown-item[data-group]::before {
192
- text-align: center;
193
- border-bottom: solid 1px rgba(0, 0, 0, 0.2);
194
- padding: 16px;
195
- }
196
-
197
- /** Searchbar */
198
-
199
- .lm-dropdown[data-type="searchbar"][data-state="true"] {
200
- position: absolute;
201
- top: 0;
202
- left: 0;
203
- width: 100% !important;
204
- height: 100% !important;
205
- display: flex;
206
- flex-direction: column;
207
- background-color: #fff;
208
- }
209
-
210
- .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-done {
211
- display: initial;
212
- border-left: 1px solid #ccc;
213
- border-bottom: 1px solid #eee;
214
- height: 100%;
215
- }
216
-
217
- .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input {
218
- font-size: 1.5em;
219
- border-radius: 0;
220
- border: 0;
221
- border-bottom: 1px solid #eee;
222
- outline: none;
223
- background-color: #fff;
224
- padding-top: 0;
225
- padding-bottom: 0;
226
- line-height: 60px;
227
- height: 60px;
228
- }
229
-
230
- .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input::after {
231
- background: initial;
232
- }
233
-
234
- .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-add {
235
- right: 100px;
236
- }
237
-
238
- .lm-dropdown[data-type="searchbar"] .lm-modal {
239
- max-height: initial;
240
- bottom: 0;
241
- width: 100% !important;
242
- height: calc(100% - 60px) !important;
243
- border: 0;
244
- }
245
-
246
- .lm-dropdown[data-type="searchbar"] .lm-dropdown-item > div {
247
- border-bottom: solid 1px rgba(0, 0, 0, 0.2);
248
- text-transform: uppercase;
249
- font-size: 1.1em;
250
- padding: 16px;
251
- }
252
-
253
- .lm-dropdown[data-type="searchbar"] .lm-dropdown-item[data-group]::before {
254
- text-align: center;
255
- border-bottom: solid 1px rgba(0, 0, 0, 0.2);
256
- padding: 16px;
257
- }
258
-
259
- .lm-dropdown[data-type="searchbar"] .lm-lazy {
260
- max-height: initial;
261
- }
262
-
263
- /** Lazyloading */
264
-
265
- .lm-lazy {
266
- position: relative;
267
- overflow-y: auto;
268
- overflow-x: hidden;
269
- display: flex;
270
- box-sizing: border-box;
271
- height: 100%;
272
- }
273
-
274
- .lm-lazy-scroll {
275
- position: absolute;
276
- width: 1px;
277
- }
278
-
279
- .lm-lazy-items {
280
- position: sticky;
281
- top: 0;
282
- box-sizing: border-box;
283
- width: 100%;
284
- }
285
-
286
- .lm-dropdown-loading .lm-dropdown-add::after {
287
- content: '';
288
- position: absolute;
289
- width: 12px;
290
- height: 12px;
291
- margin-top: -7px;
292
- margin-left: -12px;
293
- border-style: solid;
294
- border-color: #888;
295
- border-top-color: transparent;
296
- border-width: 1px;
297
- border-radius: 50%;
298
- animation: spin .8s linear infinite;
299
- }
300
-
301
- @keyframes spin {
302
- from {
303
- transform:rotate(0deg);
304
- }
305
- to {
306
- transform:rotate(360deg);
307
- }
1
+ .lm-dropdown {
2
+ display: inline-block;
3
+ user-select: none;
4
+ cursor: pointer;
5
+ box-sizing: border-box;
6
+ outline-offset: 1px;
7
+ }
8
+
9
+ .lm-dropdown-header {
10
+ display: flex;
11
+ position: relative;
12
+ align-items: center;
13
+ }
14
+
15
+ .lm-dropdown-header button {
16
+ display: none;
17
+ border: 1px solid transparent;
18
+ background-color: transparent;
19
+ text-transform: uppercase;
20
+ cursor: pointer;
21
+ padding: 15px;
22
+ font-weight: bold;
23
+ outline: 0;
24
+ }
25
+
26
+ .lm-dropdown .lm-modal {
27
+ padding: 0;
28
+ min-width: initial;
29
+ min-height: 5px;
30
+ border: 1px solid #ccc;
31
+ border-radius: 0;
32
+ }
33
+
34
+ .lm-dropdown .lm-lazy {
35
+ max-height: 300px;
36
+ }
37
+
38
+ .lm-dropdown-input {
39
+ padding: 5px 24px 5px 10px;
40
+ white-space: nowrap;
41
+ overflow: hidden;
42
+ text-overflow: ellipsis;
43
+ appearance: none;
44
+ cursor: pointer;
45
+ box-sizing: border-box;
46
+ width: 100%;
47
+ border: 1px solid #ccc;
48
+ min-height: 1em;
49
+ }
50
+
51
+ .lm-dropdown-input::after {
52
+ content: '';
53
+ position: absolute;
54
+ width: 24px;
55
+ height: 100%;
56
+ top: 0;
57
+ right: 4px;
58
+ background-repeat: no-repeat;
59
+ background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E");
60
+ background-position: center;
61
+ transition: transform .1s ease-in-out;
62
+ }
63
+
64
+ .lm-dropdown-add {
65
+ position: absolute;
66
+ padding: 12px;
67
+ right: 20px;
68
+ display: none;
69
+ }
70
+
71
+ .lm-dropdown-add::after {
72
+ content: '+';
73
+ }
74
+
75
+ .lm-dropdown[data-insert="true"] .lm-dropdown-input {
76
+ padding-right: 35px;
77
+ }
78
+
79
+ .lm-dropdown[data-state="true"][data-insert="true"] .lm-dropdown-add {
80
+ display: initial;
81
+ }
82
+
83
+ .lm-dropdown[data-state="true"] .lm-dropdown-input::after {
84
+ transform: rotate(-180deg);
85
+ }
86
+
87
+ .lm-dropdown-input:empty::before {
88
+ content: "\00a0";
89
+ }
90
+
91
+ .lm-dropdown[data-state="true"] .lm-dropdown-input[placeholder]:empty::before {
92
+ content: "\00a0" attr(placeholder);
93
+ color: #aaa;
94
+ }
95
+
96
+ .lm-dropdown-options {
97
+ width: 100%;
98
+ }
99
+
100
+ .lm-dropdown-item {
101
+ box-sizing: border-box;
102
+ }
103
+
104
+ .lm-dropdown-item[data-group]::before {
105
+ content: attr(data-group);
106
+ display: block;
107
+ padding: 8px;
108
+ font-weight: bold;
109
+ width: 100%;
110
+ background-color: #FFF;
111
+ color: #000;
112
+ box-sizing: border-box;
113
+ }
114
+
115
+ .lm-dropdown-item > div {
116
+ white-space: nowrap;
117
+ text-align: left;
118
+ text-overflow: ellipsis;
119
+ overflow: hidden;
120
+ color: #000;
121
+ display: flex;
122
+ align-items: center;
123
+ padding: 4px 40px 4px 16px;
124
+ position: relative;
125
+ box-sizing: border-box;
126
+ }
127
+
128
+ .lm-dropdown-item > div > img {
129
+ width: 24px;
130
+ height: 24px;
131
+ margin-left: -6px;
132
+ margin-right: 6px;
133
+ }
134
+
135
+ .lm-dropdown-item > div > img[src=''] {
136
+ display: none;
137
+ }
138
+
139
+ .lm-dropdown-item > div:hover {
140
+ background-color: dodgerblue !important;
141
+ color: white;
142
+ }
143
+
144
+ .lm-dropdown-item[data-cursor="true"] > div {
145
+ background-color: #eee;
146
+ }
147
+
148
+ .lm-dropdown-item[data-cursor="true"]:hover > div {
149
+ background-color: dodgerblue;
150
+ }
151
+
152
+ .lm-dropdown-item[data-selected="true"] > div {
153
+ background-color: dodgerblue;
154
+ color: white;
155
+ }
156
+
157
+ .lm-dropdown-item[data-selected="true"] > div::after {
158
+ content: '✓';
159
+ position: absolute;
160
+ right: 10px;
161
+ line-height: 24px;
162
+ }
163
+
164
+ /** Picker */
165
+
166
+ .lm-dropdown[data-type="picker"][data-state="true"] .lm-dropdown-header button {
167
+ display: initial;
168
+ position: absolute;
169
+ border: 1px solid #ccc;
170
+ text-align: right;
171
+ bottom: 300px;
172
+ left: 0;
173
+ width: 100% !important;
174
+ }
175
+
176
+ .lm-dropdown[data-type="picker"] .lm-modal {
177
+ position: absolute;
178
+ bottom: 0;
179
+ left: 0;
180
+ width: 100% !important;
181
+ height: 300px !important;
182
+ }
183
+
184
+ .lm-dropdown[data-type="picker"] .lm-dropdown-item > div {
185
+ border-bottom: solid 1px rgba(0, 0, 0, 0.2);
186
+ text-transform: uppercase;
187
+ font-size: 1.1em;
188
+ padding: 16px;
189
+ }
190
+
191
+ .lm-dropdown[data-type="picker"] .lm-dropdown-item[data-group]::before {
192
+ text-align: center;
193
+ border-bottom: solid 1px rgba(0, 0, 0, 0.2);
194
+ padding: 16px;
195
+ }
196
+
197
+ /** Searchbar */
198
+
199
+ .lm-dropdown[data-type="searchbar"][data-state="true"] {
200
+ position: absolute;
201
+ top: 0;
202
+ left: 0;
203
+ width: 100% !important;
204
+ height: 100% !important;
205
+ display: flex;
206
+ flex-direction: column;
207
+ background-color: #fff;
208
+ }
209
+
210
+ .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-done {
211
+ display: initial;
212
+ border-left: 1px solid #ccc;
213
+ border-bottom: 1px solid #eee;
214
+ height: 100%;
215
+ }
216
+
217
+ .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input {
218
+ font-size: 1.5em;
219
+ border-radius: 0;
220
+ border: 0;
221
+ border-bottom: 1px solid #eee;
222
+ outline: none;
223
+ background-color: #fff;
224
+ padding-top: 0;
225
+ padding-bottom: 0;
226
+ line-height: 60px;
227
+ height: 60px;
228
+ }
229
+
230
+ .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input::after {
231
+ background: initial;
232
+ }
233
+
234
+ .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-add {
235
+ right: 100px;
236
+ }
237
+
238
+ .lm-dropdown[data-type="searchbar"] .lm-modal {
239
+ max-height: initial;
240
+ bottom: 0;
241
+ width: 100% !important;
242
+ height: calc(100% - 60px) !important;
243
+ border: 0;
244
+ }
245
+
246
+ .lm-dropdown[data-type="searchbar"] .lm-dropdown-item > div {
247
+ border-bottom: solid 1px rgba(0, 0, 0, 0.2);
248
+ text-transform: uppercase;
249
+ font-size: 1.1em;
250
+ padding: 16px;
251
+ }
252
+
253
+ .lm-dropdown[data-type="searchbar"] .lm-dropdown-item[data-group]::before {
254
+ text-align: center;
255
+ border-bottom: solid 1px rgba(0, 0, 0, 0.2);
256
+ padding: 16px;
257
+ }
258
+
259
+ .lm-dropdown[data-type="searchbar"] .lm-lazy {
260
+ max-height: initial;
261
+ }
262
+
263
+ /** Lazyloading */
264
+
265
+ .lm-lazy {
266
+ position: relative;
267
+ overflow-y: auto;
268
+ overflow-x: hidden;
269
+ display: flex;
270
+ box-sizing: border-box;
271
+ height: 100%;
272
+ }
273
+
274
+ .lm-lazy-scroll {
275
+ position: absolute;
276
+ width: 1px;
277
+ }
278
+
279
+ .lm-lazy-items {
280
+ position: sticky;
281
+ top: 0;
282
+ box-sizing: border-box;
283
+ width: 100%;
284
+ }
285
+
286
+ .lm-dropdown-loading .lm-dropdown-add::after {
287
+ content: '';
288
+ position: absolute;
289
+ width: 12px;
290
+ height: 12px;
291
+ margin-top: -7px;
292
+ margin-left: -12px;
293
+ border-style: solid;
294
+ border-color: #888;
295
+ border-top-color: transparent;
296
+ border-width: 1px;
297
+ border-radius: 50%;
298
+ animation: spin .8s linear infinite;
299
+ }
300
+
301
+ @keyframes spin {
302
+ from {
303
+ transform:rotate(0deg);
304
+ }
305
+ to {
306
+ transform:rotate(360deg);
307
+ }
308
308
  }
package/dist/vue.d.ts CHANGED
@@ -1,15 +1,15 @@
1
- /**
2
- * Official Type definitions for the LemonadeJS plugins
3
- * https://lemonadejs.net
4
- * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
5
- */
6
- import Component from './index';
7
-
8
- interface Dropdown {
9
- (): any
10
- [key: string]: any
11
- }
12
-
13
- declare function Dropdown<Dropdown>(props: Component.Options): any;
14
-
1
+ /**
2
+ * Official Type definitions for the LemonadeJS plugins
3
+ * https://lemonadejs.net
4
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
5
+ */
6
+ import Component from './index';
7
+
8
+ interface Dropdown {
9
+ (): any
10
+ [key: string]: any
11
+ }
12
+
13
+ declare function Dropdown<Dropdown>(props: Component.Options): any;
14
+
15
15
  export default Dropdown;