@lemonadejs/dropdown 3.0.4 → 3.0.9

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/react.js CHANGED
@@ -1,37 +1,37 @@
1
- // @ts-nocheck
2
- import React, { useRef, useEffect } from "react";
3
- import Component from './index';
4
-
5
-
6
- // @ts-ignore
7
- export default React.forwardRef((props, mainReference) => {
8
- // Dom element
9
- const Ref = useRef(null);
10
-
11
- // Get the properties for the spreadsheet
12
- let options = { ...props };
13
-
14
- useEffect(() => {
15
- // @ts-ignore
16
- if (!Ref.current.innerHTML) {
17
- mainReference.current = Component(Ref.current, options);
18
- }
19
- }, []);
20
-
21
- useEffect(() => {
22
- for (let key in props) {
23
- if (props.hasOwnProperty(key) && mainReference.current.hasOwnProperty(key)) {
24
- if (props[key] !== mainReference.current[key]) {
25
- mainReference.current[key] = props[key];
26
- }
27
- }
28
- }
29
- }, [props])
30
-
31
- let prop = {
32
- ref: Ref,
33
- style: { height: '100%', width: '100%' }
34
- };
35
-
36
- return React.createElement("div", prop);
1
+ // @ts-nocheck
2
+ import React, { useRef, useEffect } from "react";
3
+ import Component from './index';
4
+
5
+
6
+ // @ts-ignore
7
+ export default React.forwardRef((props, mainReference) => {
8
+ // Dom element
9
+ const Ref = useRef(null);
10
+
11
+ // Get the properties for the spreadsheet
12
+ let options = { ...props };
13
+
14
+ useEffect(() => {
15
+ // @ts-ignore
16
+ if (!Ref.current.innerHTML) {
17
+ mainReference.current = Component(Ref.current, options);
18
+ }
19
+ }, []);
20
+
21
+ useEffect(() => {
22
+ for (let key in props) {
23
+ if (props.hasOwnProperty(key) && mainReference.current.hasOwnProperty(key)) {
24
+ if (props[key] !== mainReference.current[key]) {
25
+ mainReference.current[key] = props[key];
26
+ }
27
+ }
28
+ }
29
+ }, [props])
30
+
31
+ let prop = {
32
+ ref: Ref,
33
+ style: { height: '100%', width: '100%' }
34
+ };
35
+
36
+ return React.createElement("div", prop);
37
37
  })
package/dist/style.css CHANGED
@@ -1,178 +1,242 @@
1
- .lm-dropdown {
2
- display: inline-block;
3
- user-select: none;
4
- cursor: pointer;
5
- box-sizing: border-box;
6
- }
7
-
8
- .lm-dropdown .lm-modal {
9
- padding: 0;
10
- min-width: initial;
11
- min-height: 30px;
12
- border: 1px solid #ccc;
13
- border-radius: 0;
14
- }
15
-
16
- .lm-dropdown .lm-lazy {
17
- max-height: 300px;
18
- }
19
-
20
- .lm-dropdown-input {
21
- display: inline-flex;
22
- padding: 5px 30px 5px 10px;
23
- align-items: center;
24
- position: relative;
25
- white-space: nowrap;
26
- overflow: hidden;
27
- text-overflow: ellipsis;
28
- appearance: none;
29
- cursor: pointer;
30
- box-sizing: border-box;
31
- width: 100%;
32
- background-repeat: no-repeat;
33
- background-position: top 50% right 0;
34
- 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");
35
- border: 1px solid #ccc;
36
- }
37
-
38
- .lm-dropdown-input:empty::before {
39
- content: "\00a0";
40
- }
41
-
42
- .lm-dropdown[data-state="true"] .lm-dropdown-input[placeholder]:empty::before {
43
- content: "\00a0" attr(placeholder);
44
- color: #aaa;
45
- }
46
-
47
- .lm-dropdown-options {
48
- width: 100%;
49
- }
50
-
51
- .lm-dropdown-item {
52
- box-sizing: border-box;
53
- }
54
-
55
- .lm-dropdown-item[data-group]::before {
56
- content: attr(data-group);
57
- display: block;
58
- padding: 8px;
59
- font-weight: bold;
60
- width: 100%;
61
- background-color: #FFF;
62
- color: #000;
63
- }
64
-
65
- .lm-dropdown-item > div {
66
- white-space: nowrap;
67
- text-align: left;
68
- text-overflow: ellipsis;
69
- overflow: hidden;
70
- color: #000;
71
- display: flex;
72
- align-items: center;
73
- padding: 4px 40px 4px 16px;
74
- position: relative;
75
- box-sizing: border-box;
76
- }
77
-
78
- .lm-dropdown-item > div > img {
79
- width: 24px;
80
- height: 24px;
81
- margin-left: -6px;
82
- margin-right: 6px;
83
- }
84
-
85
- .lm-dropdown-item > div > img[src=''] {
86
- display: none;
87
- }
88
-
89
- .lm-dropdown-item > div:hover {
90
- background-color: dodgerblue;
91
- color: white;
92
- }
93
-
94
- .lm-dropdown-item[data-cursor="true"] > div {
95
- background-color: #eee;
96
- }
97
-
98
- .lm-dropdown-item[data-selected="true"] > div {
99
- background-color: dodgerblue;
100
- color: white;
101
- }
102
-
103
- .lm-dropdown-item[data-selected="true"] > div::after {
104
- content: '✓';
105
- position: absolute;
106
- right: 10px;
107
- line-height: 24px;
108
- }
109
-
110
- /** Picker */
111
-
112
- .lm-dropdown[data-type="picker"] .lm-modal {
113
- position: absolute;
114
- bottom: 0;
115
- left: 0;
116
- width: 100% !important;
117
- height: 300px !important;
118
- }
119
-
120
- .lm-dropdown[data-type="picker"] .lm-dropdown-item > div {
121
- border-bottom: solid 1px rgba(0, 0, 0, 0.2);
122
- text-transform: uppercase;
123
- font-size: 1.1em;
124
- padding: 16px;
125
- }
126
-
127
- .lm-dropdown[data-type="picker"] .lm-dropdown-item[data-group]::before {
128
- text-align: center;
129
- border-bottom: solid 1px rgba(0, 0, 0, 0.2);
130
- padding: 16px;
131
- }
132
-
133
- /** Searchbar */
134
-
135
- .lm-dropdown[data-type="searchbar"][data-state="true"] {
136
- position: absolute;
137
- top: 0;
138
- left: 0;
139
- width: 100% !important;
140
- height: 100% !important;
141
- display: flex;
142
- flex-direction: column;
143
- background-color: #fff;
144
- }
145
-
146
- .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input {
147
- font-size: 1.5em;
148
- border-radius: 0;
149
- border: 0;
150
- border-bottom: 1px solid #ccc;
151
- outline: none;
152
- background-color: #fff;
153
- padding-top: 0;
154
- padding-bottom: 0;
155
- line-height: 60px;
156
- height: 60px;
157
- }
158
-
159
- .lm-dropdown[data-type="searchbar"] .lm-modal {
160
- max-height: initial;
161
- bottom: 0;
162
- width: 100% !important;
163
- height: calc(100% - 60px) !important;
164
- border: 0;
165
- }
166
-
167
- .lm-dropdown[data-type="searchbar"] .lm-dropdown-item > div {
168
- border-bottom: solid 1px rgba(0, 0, 0, 0.2);
169
- text-transform: uppercase;
170
- font-size: 1.1em;
171
- padding: 16px;
172
- }
173
-
174
- .lm-dropdown[data-type="searchbar"] .lm-dropdown-item[data-group]::before {
175
- text-align: center;
176
- border-bottom: solid 1px rgba(0, 0, 0, 0.2);
177
- padding: 16px;
178
- }
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
+ }
12
+
13
+ .lm-dropdown-header button {
14
+ display: none;
15
+ border: 1px solid transparent;
16
+ background-color: transparent;
17
+ text-transform: uppercase;
18
+ cursor: pointer;
19
+ padding: 15px;
20
+ font-weight: bold;
21
+ outline: 0;
22
+ }
23
+
24
+ .lm-dropdown .lm-modal {
25
+ padding: 0;
26
+ min-width: initial;
27
+ min-height: 5px;
28
+ border: 1px solid #ccc;
29
+ border-radius: 0;
30
+ }
31
+
32
+ .lm-dropdown .lm-lazy {
33
+ max-height: 300px;
34
+ }
35
+
36
+ .lm-dropdown-input {
37
+ padding: 5px 24px 5px 10px;
38
+ align-items: center;
39
+ position: relative;
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
+ background-repeat: no-repeat;
48
+ background-position: top 50% right 0;
49
+ 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");
50
+ border: 1px solid #ccc;
51
+ min-height: 1em;
52
+ }
53
+
54
+ .lm-dropdown-input:empty::before {
55
+ content: "\00a0";
56
+ }
57
+
58
+ .lm-dropdown[data-state="true"] .lm-dropdown-input[placeholder]:empty::before {
59
+ content: "\00a0" attr(placeholder);
60
+ color: #aaa;
61
+ }
62
+
63
+ .lm-dropdown-options {
64
+ width: 100%;
65
+ }
66
+
67
+ .lm-dropdown-item {
68
+ box-sizing: border-box;
69
+ }
70
+
71
+ .lm-dropdown-item[data-group]::before {
72
+ content: attr(data-group);
73
+ display: block;
74
+ padding: 8px;
75
+ font-weight: bold;
76
+ width: 100%;
77
+ background-color: #FFF;
78
+ color: #000;
79
+ box-sizing: border-box;
80
+ }
81
+
82
+ .lm-dropdown-item > div {
83
+ white-space: nowrap;
84
+ text-align: left;
85
+ text-overflow: ellipsis;
86
+ overflow: hidden;
87
+ color: #000;
88
+ display: flex;
89
+ align-items: center;
90
+ padding: 4px 40px 4px 16px;
91
+ position: relative;
92
+ box-sizing: border-box;
93
+ }
94
+
95
+ .lm-dropdown-item > div > img {
96
+ width: 24px;
97
+ height: 24px;
98
+ margin-left: -6px;
99
+ margin-right: 6px;
100
+ }
101
+
102
+ .lm-dropdown-item > div > img[src=''] {
103
+ display: none;
104
+ }
105
+
106
+ .lm-dropdown-item > div:hover {
107
+ background-color: dodgerblue !important;
108
+ color: white;
109
+ }
110
+
111
+ .lm-dropdown-item[data-cursor="true"] > div {
112
+ background-color: #eee;
113
+ }
114
+
115
+ .lm-dropdown-item[data-cursor="true"]:hover > div {
116
+ background-color: dodgerblue;
117
+ }
118
+
119
+ .lm-dropdown-item[data-selected="true"] > div {
120
+ background-color: dodgerblue;
121
+ color: white;
122
+ }
123
+
124
+ .lm-dropdown-item[data-selected="true"] > div::after {
125
+ content: '✓';
126
+ position: absolute;
127
+ right: 10px;
128
+ line-height: 24px;
129
+ }
130
+
131
+ /** Picker */
132
+
133
+ .lm-dropdown[data-type="picker"][data-state="true"] .lm-dropdown-header button {
134
+ display: initial;
135
+ position: absolute;
136
+ border: 1px solid #ccc;
137
+ text-align: right;
138
+ bottom: 300px;
139
+ left: 0;
140
+ width: 100% !important;
141
+ }
142
+
143
+ .lm-dropdown[data-type="picker"] .lm-modal {
144
+ position: absolute;
145
+ bottom: 0;
146
+ left: 0;
147
+ width: 100% !important;
148
+ height: 300px !important;
149
+ }
150
+
151
+ .lm-dropdown[data-type="picker"] .lm-dropdown-item > div {
152
+ border-bottom: solid 1px rgba(0, 0, 0, 0.2);
153
+ text-transform: uppercase;
154
+ font-size: 1.1em;
155
+ padding: 16px;
156
+ }
157
+
158
+ .lm-dropdown[data-type="picker"] .lm-dropdown-item[data-group]::before {
159
+ text-align: center;
160
+ border-bottom: solid 1px rgba(0, 0, 0, 0.2);
161
+ padding: 16px;
162
+ }
163
+
164
+ /** Searchbar */
165
+
166
+ .lm-dropdown[data-type="searchbar"][data-state="true"] {
167
+ position: absolute;
168
+ top: 0;
169
+ left: 0;
170
+ width: 100% !important;
171
+ height: 100% !important;
172
+ display: flex;
173
+ flex-direction: column;
174
+ background-color: #fff;
175
+ }
176
+
177
+ .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-done {
178
+ display: initial;
179
+ border-left: 1px solid #ccc;
180
+ border-bottom: 1px solid #eee;
181
+ }
182
+
183
+ .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input {
184
+ font-size: 1.5em;
185
+ border-radius: 0;
186
+ border: 0;
187
+ border-bottom: 1px solid #eee;
188
+ outline: none;
189
+ background-color: #fff;
190
+ padding-top: 0;
191
+ padding-bottom: 0;
192
+ line-height: 60px;
193
+ height: 60px;
194
+ }
195
+
196
+ .lm-dropdown[data-type="searchbar"] .lm-modal {
197
+ max-height: initial;
198
+ bottom: 0;
199
+ width: 100% !important;
200
+ height: calc(100% - 60px) !important;
201
+ border: 0;
202
+ }
203
+
204
+ .lm-dropdown[data-type="searchbar"] .lm-dropdown-item > div {
205
+ border-bottom: solid 1px rgba(0, 0, 0, 0.2);
206
+ text-transform: uppercase;
207
+ font-size: 1.1em;
208
+ padding: 16px;
209
+ }
210
+
211
+ .lm-dropdown[data-type="searchbar"] .lm-dropdown-item[data-group]::before {
212
+ text-align: center;
213
+ border-bottom: solid 1px rgba(0, 0, 0, 0.2);
214
+ padding: 16px;
215
+ }
216
+
217
+ .lm-dropdown[data-type="searchbar"] .lm-lazy {
218
+ max-height: initial;
219
+ }
220
+
221
+ /** Lazyloading */
222
+
223
+ .lm-lazy {
224
+ position: relative;
225
+ overflow-y: auto;
226
+ overflow-x: hidden;
227
+ display: flex;
228
+ box-sizing: border-box;
229
+ height: 100%;
230
+ }
231
+
232
+ .lm-lazy-scroll {
233
+ position: absolute;
234
+ width: 1px;
235
+ }
236
+
237
+ .lm-lazy-items {
238
+ position: sticky;
239
+ top: 0;
240
+ box-sizing: border-box;
241
+ width: 100%;
242
+ }
package/dist/vue.js CHANGED
@@ -1,45 +1,45 @@
1
- import { h } from 'vue';
2
- import component from "./index";
3
-
4
-
5
- export default {
6
- inheritAttrs: false,
7
- mounted() {
8
- let options = {
9
- ...this.$attrs
10
- };
11
-
12
- this.el = this.$refs.container;
13
-
14
- this.current = component(this.$refs.container, options);
15
- },
16
- setup() {
17
- let containerProps = {
18
- ref: 'container',
19
- style: {
20
- width: '100%',
21
- height: '100%',
22
- }
23
- };
24
- return () => h('div', containerProps);
25
- },
26
- watch: {
27
- $attrs: {
28
- deep: true,
29
- handler() {
30
- this.updateState();
31
- }
32
- }
33
- },
34
- methods: {
35
- updateState() {
36
- for (let key in this.$attrs) {
37
- if (this.$attrs.hasOwnProperty(key) && this.current.hasOwnProperty(key)) {
38
- if (this.$attrs[key] !== this.current[key]) {
39
- this.current[key] = this.$attrs[key];
40
- }
41
- }
42
- }
43
- }
44
- }
45
- }
1
+ import { h } from 'vue';
2
+ import component from "./index";
3
+
4
+
5
+ export default {
6
+ inheritAttrs: false,
7
+ mounted() {
8
+ let options = {
9
+ ...this.$attrs
10
+ };
11
+
12
+ this.el = this.$refs.container;
13
+
14
+ this.current = component(this.$refs.container, options);
15
+ },
16
+ setup() {
17
+ let containerProps = {
18
+ ref: 'container',
19
+ style: {
20
+ width: '100%',
21
+ height: '100%',
22
+ }
23
+ };
24
+ return () => h('div', containerProps);
25
+ },
26
+ watch: {
27
+ $attrs: {
28
+ deep: true,
29
+ handler() {
30
+ this.updateState();
31
+ }
32
+ }
33
+ },
34
+ methods: {
35
+ updateState() {
36
+ for (let key in this.$attrs) {
37
+ if (this.$attrs.hasOwnProperty(key) && this.current.hasOwnProperty(key)) {
38
+ if (this.$attrs[key] !== this.current[key]) {
39
+ this.current[key] = this.$attrs[key];
40
+ }
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }
package/package.json CHANGED
@@ -1,23 +1,22 @@
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": "^4.0.6",
18
- "@lemonadejs/modal": "2.3.3",
19
- "@lemonadejs/lazy-loading": "1.0.0"
20
- },
21
- "main": "dist/index.js",
22
- "version": "3.0.4"
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": "^4.0.7",
18
+ "@lemonadejs/modal": "^2.4.0"
19
+ },
20
+ "main": "dist/index.js",
21
+ "version": "3.0.9"
22
+ }