slim-select 3.0.6 → 3.1.1
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 +4 -3
- package/dist/index.d.ts +8 -0
- package/dist/react/index.d.ts +8 -0
- package/dist/react/index.js +415 -328
- package/dist/react/index.umd.js +4 -4
- package/dist/slimselect.cjs.js +1 -1
- package/dist/slimselect.cjs.js.map +1 -1
- package/dist/slimselect.es.js +108 -39
- package/dist/slimselect.es.js.map +1 -1
- package/dist/slimselect.iife.js +1 -1
- package/dist/slimselect.iife.js.map +1 -1
- package/dist/slimselect.js +1 -1
- package/dist/slimselect.js.map +1 -1
- package/dist/vue/index.d.ts +8 -0
- package/dist/vue/index.js +139 -54
- package/dist/vue/index.umd.js +1 -1
- package/package.json +2 -1
- package/src/slim-select/index.test.ts +356 -0
- package/src/slim-select/index.ts +17 -2
- package/src/slim-select/react/react.test.tsx +498 -0
- package/src/slim-select/react/react.tsx +102 -5
- package/src/slim-select/select.test.ts +234 -0
- package/src/slim-select/select.ts +196 -0
- package/src/slim-select/vue/vue.test.ts +259 -0
- package/src/slim-select/vue/vue.vue +85 -25
- package/vitest.config.ts +3 -2
package/dist/react/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import ae, { forwardRef as re, useRef as
|
|
2
|
-
var
|
|
1
|
+
import ae, { forwardRef as re, useRef as V, useImperativeHandle as oe, useEffect as $ } from "react";
|
|
2
|
+
var B = { exports: {} }, R = {};
|
|
3
3
|
/**
|
|
4
4
|
* @license React
|
|
5
5
|
* react-jsx-runtime.production.js
|
|
@@ -9,29 +9,29 @@ var P = { exports: {} }, A = {};
|
|
|
9
9
|
* This source code is licensed under the MIT license found in the
|
|
10
10
|
* LICENSE file in the root directory of this source tree.
|
|
11
11
|
*/
|
|
12
|
-
var
|
|
12
|
+
var ee;
|
|
13
13
|
function ce() {
|
|
14
|
-
if (
|
|
15
|
-
|
|
14
|
+
if (ee) return R;
|
|
15
|
+
ee = 1;
|
|
16
16
|
var p = Symbol.for("react.transitional.element"), e = Symbol.for("react.fragment");
|
|
17
|
-
function t(s, i,
|
|
17
|
+
function t(s, i, n) {
|
|
18
18
|
var r = null;
|
|
19
|
-
if (
|
|
20
|
-
|
|
19
|
+
if (n !== void 0 && (r = "" + n), i.key !== void 0 && (r = "" + i.key), "key" in i) {
|
|
20
|
+
n = {};
|
|
21
21
|
for (var a in i)
|
|
22
|
-
a !== "key" && (
|
|
23
|
-
} else
|
|
24
|
-
return i =
|
|
22
|
+
a !== "key" && (n[a] = i[a]);
|
|
23
|
+
} else n = i;
|
|
24
|
+
return i = n.ref, {
|
|
25
25
|
$$typeof: p,
|
|
26
26
|
type: s,
|
|
27
27
|
key: r,
|
|
28
28
|
ref: i !== void 0 ? i : null,
|
|
29
|
-
props:
|
|
29
|
+
props: n
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
|
-
return
|
|
32
|
+
return R.Fragment = e, R.jsx = t, R.jsxs = t, R;
|
|
33
33
|
}
|
|
34
|
-
var
|
|
34
|
+
var _ = {};
|
|
35
35
|
/**
|
|
36
36
|
* @license React
|
|
37
37
|
* react-jsx-runtime.development.js
|
|
@@ -41,240 +41,240 @@ var T = {};
|
|
|
41
41
|
* This source code is licensed under the MIT license found in the
|
|
42
42
|
* LICENSE file in the root directory of this source tree.
|
|
43
43
|
*/
|
|
44
|
-
var
|
|
44
|
+
var te;
|
|
45
45
|
function he() {
|
|
46
|
-
return
|
|
47
|
-
function p(
|
|
48
|
-
if (
|
|
49
|
-
if (typeof
|
|
50
|
-
return
|
|
51
|
-
if (typeof
|
|
52
|
-
switch (
|
|
53
|
-
case
|
|
46
|
+
return te || (te = 1, process.env.NODE_ENV !== "production" && function() {
|
|
47
|
+
function p(l) {
|
|
48
|
+
if (l == null) return null;
|
|
49
|
+
if (typeof l == "function")
|
|
50
|
+
return l.$$typeof === ie ? null : l.displayName || l.name || null;
|
|
51
|
+
if (typeof l == "string") return l;
|
|
52
|
+
switch (l) {
|
|
53
|
+
case L:
|
|
54
54
|
return "Fragment";
|
|
55
|
-
case
|
|
55
|
+
case v:
|
|
56
56
|
return "Profiler";
|
|
57
|
-
case
|
|
57
|
+
case O:
|
|
58
58
|
return "StrictMode";
|
|
59
|
-
case
|
|
59
|
+
case D:
|
|
60
60
|
return "Suspense";
|
|
61
|
-
case
|
|
61
|
+
case P:
|
|
62
62
|
return "SuspenseList";
|
|
63
|
-
case
|
|
63
|
+
case M:
|
|
64
64
|
return "Activity";
|
|
65
65
|
}
|
|
66
|
-
if (typeof
|
|
67
|
-
switch (typeof
|
|
66
|
+
if (typeof l == "object")
|
|
67
|
+
switch (typeof l.tag == "number" && console.error(
|
|
68
68
|
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
69
|
-
),
|
|
70
|
-
case
|
|
69
|
+
), l.$$typeof) {
|
|
70
|
+
case m:
|
|
71
71
|
return "Portal";
|
|
72
|
-
case R:
|
|
73
|
-
return n.displayName || "Context";
|
|
74
72
|
case k:
|
|
75
|
-
return
|
|
76
|
-
case
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
return
|
|
81
|
-
case
|
|
82
|
-
u =
|
|
73
|
+
return l.displayName || "Context";
|
|
74
|
+
case T:
|
|
75
|
+
return (l._context.displayName || "Context") + ".Consumer";
|
|
76
|
+
case b:
|
|
77
|
+
var u = l.render;
|
|
78
|
+
return l = l.displayName, l || (l = u.displayName || u.name || "", l = l !== "" ? "ForwardRef(" + l + ")" : "ForwardRef"), l;
|
|
79
|
+
case F:
|
|
80
|
+
return u = l.displayName || null, u !== null ? u : p(l.type) || "Memo";
|
|
81
|
+
case A:
|
|
82
|
+
u = l._payload, l = l._init;
|
|
83
83
|
try {
|
|
84
|
-
return p(
|
|
84
|
+
return p(l(u));
|
|
85
85
|
} catch {
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
return null;
|
|
89
89
|
}
|
|
90
|
-
function e(
|
|
91
|
-
return "" +
|
|
90
|
+
function e(l) {
|
|
91
|
+
return "" + l;
|
|
92
92
|
}
|
|
93
|
-
function t(
|
|
93
|
+
function t(l) {
|
|
94
94
|
try {
|
|
95
|
-
e(
|
|
95
|
+
e(l);
|
|
96
96
|
var u = !1;
|
|
97
97
|
} catch {
|
|
98
98
|
u = !0;
|
|
99
99
|
}
|
|
100
100
|
if (u) {
|
|
101
101
|
u = console;
|
|
102
|
-
var
|
|
103
|
-
return
|
|
102
|
+
var w = u.error, y = typeof Symbol == "function" && Symbol.toStringTag && l[Symbol.toStringTag] || l.constructor.name || "Object";
|
|
103
|
+
return w.call(
|
|
104
104
|
u,
|
|
105
105
|
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
106
|
-
|
|
107
|
-
), e(
|
|
106
|
+
y
|
|
107
|
+
), e(l);
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
|
-
function s(
|
|
111
|
-
if (
|
|
112
|
-
if (typeof
|
|
110
|
+
function s(l) {
|
|
111
|
+
if (l === L) return "<>";
|
|
112
|
+
if (typeof l == "object" && l !== null && l.$$typeof === A)
|
|
113
113
|
return "<...>";
|
|
114
114
|
try {
|
|
115
|
-
var u = p(
|
|
115
|
+
var u = p(l);
|
|
116
116
|
return u ? "<" + u + ">" : "<...>";
|
|
117
117
|
} catch {
|
|
118
118
|
return "<...>";
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
121
|
function i() {
|
|
122
|
-
var
|
|
123
|
-
return
|
|
122
|
+
var l = j.A;
|
|
123
|
+
return l === null ? null : l.getOwner();
|
|
124
124
|
}
|
|
125
|
-
function
|
|
125
|
+
function n() {
|
|
126
126
|
return Error("react-stack-top-frame");
|
|
127
127
|
}
|
|
128
|
-
function r(
|
|
129
|
-
if (
|
|
130
|
-
var u = Object.getOwnPropertyDescriptor(
|
|
128
|
+
function r(l) {
|
|
129
|
+
if (J.call(l, "key")) {
|
|
130
|
+
var u = Object.getOwnPropertyDescriptor(l, "key").get;
|
|
131
131
|
if (u && u.isReactWarning) return !1;
|
|
132
132
|
}
|
|
133
|
-
return
|
|
133
|
+
return l.key !== void 0;
|
|
134
134
|
}
|
|
135
|
-
function a(
|
|
136
|
-
function
|
|
137
|
-
|
|
135
|
+
function a(l, u) {
|
|
136
|
+
function w() {
|
|
137
|
+
G || (G = !0, console.error(
|
|
138
138
|
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
139
139
|
u
|
|
140
140
|
));
|
|
141
141
|
}
|
|
142
|
-
|
|
143
|
-
get:
|
|
142
|
+
w.isReactWarning = !0, Object.defineProperty(l, "key", {
|
|
143
|
+
get: w,
|
|
144
144
|
configurable: !0
|
|
145
145
|
});
|
|
146
146
|
}
|
|
147
147
|
function c() {
|
|
148
|
-
var
|
|
149
|
-
return
|
|
148
|
+
var l = p(this.type);
|
|
149
|
+
return X[l] || (X[l] = !0, console.error(
|
|
150
150
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
151
|
-
)),
|
|
151
|
+
)), l = this.props.ref, l !== void 0 ? l : null;
|
|
152
152
|
}
|
|
153
|
-
function h(
|
|
154
|
-
var
|
|
155
|
-
return
|
|
156
|
-
$$typeof:
|
|
157
|
-
type:
|
|
153
|
+
function h(l, u, w, y, I, q) {
|
|
154
|
+
var E = w.ref;
|
|
155
|
+
return l = {
|
|
156
|
+
$$typeof: C,
|
|
157
|
+
type: l,
|
|
158
158
|
key: u,
|
|
159
|
-
props:
|
|
160
|
-
_owner:
|
|
161
|
-
}, (
|
|
159
|
+
props: w,
|
|
160
|
+
_owner: y
|
|
161
|
+
}, (E !== void 0 ? E : null) !== null ? Object.defineProperty(l, "ref", {
|
|
162
162
|
enumerable: !1,
|
|
163
163
|
get: c
|
|
164
|
-
}) : Object.defineProperty(
|
|
164
|
+
}) : Object.defineProperty(l, "ref", { enumerable: !1, value: null }), l._store = {}, Object.defineProperty(l._store, "validated", {
|
|
165
165
|
configurable: !1,
|
|
166
166
|
enumerable: !1,
|
|
167
167
|
writable: !0,
|
|
168
168
|
value: 0
|
|
169
|
-
}), Object.defineProperty(
|
|
169
|
+
}), Object.defineProperty(l, "_debugInfo", {
|
|
170
170
|
configurable: !1,
|
|
171
171
|
enumerable: !1,
|
|
172
172
|
writable: !0,
|
|
173
173
|
value: null
|
|
174
|
-
}), Object.defineProperty(
|
|
174
|
+
}), Object.defineProperty(l, "_debugStack", {
|
|
175
175
|
configurable: !1,
|
|
176
176
|
enumerable: !1,
|
|
177
177
|
writable: !0,
|
|
178
|
-
value:
|
|
179
|
-
}), Object.defineProperty(
|
|
178
|
+
value: I
|
|
179
|
+
}), Object.defineProperty(l, "_debugTask", {
|
|
180
180
|
configurable: !1,
|
|
181
181
|
enumerable: !1,
|
|
182
182
|
writable: !0,
|
|
183
|
-
value:
|
|
184
|
-
}), Object.freeze && (Object.freeze(
|
|
183
|
+
value: q
|
|
184
|
+
}), Object.freeze && (Object.freeze(l.props), Object.freeze(l)), l;
|
|
185
185
|
}
|
|
186
|
-
function o(
|
|
187
|
-
var
|
|
188
|
-
if (
|
|
189
|
-
if (
|
|
190
|
-
if (
|
|
191
|
-
for (
|
|
192
|
-
d(
|
|
193
|
-
Object.freeze && Object.freeze(
|
|
186
|
+
function o(l, u, w, y, I, q) {
|
|
187
|
+
var E = u.children;
|
|
188
|
+
if (E !== void 0)
|
|
189
|
+
if (y)
|
|
190
|
+
if (ne(E)) {
|
|
191
|
+
for (y = 0; y < E.length; y++)
|
|
192
|
+
d(E[y]);
|
|
193
|
+
Object.freeze && Object.freeze(E);
|
|
194
194
|
} else
|
|
195
195
|
console.error(
|
|
196
196
|
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
197
197
|
);
|
|
198
|
-
else d(
|
|
199
|
-
if (
|
|
200
|
-
|
|
201
|
-
var
|
|
202
|
-
return
|
|
198
|
+
else d(E);
|
|
199
|
+
if (J.call(u, "key")) {
|
|
200
|
+
E = p(l);
|
|
201
|
+
var N = Object.keys(u).filter(function(le) {
|
|
202
|
+
return le !== "key";
|
|
203
203
|
});
|
|
204
|
-
|
|
204
|
+
y = 0 < N.length ? "{key: someKey, " + N.join(": ..., ") + ": ...}" : "{key: someKey}", Q[E + y] || (N = 0 < N.length ? "{" + N.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
205
205
|
`A props object containing a "key" prop is being spread into JSX:
|
|
206
206
|
let props = %s;
|
|
207
207
|
<%s {...props} />
|
|
208
208
|
React keys must be passed directly to JSX without using spread:
|
|
209
209
|
let props = %s;
|
|
210
210
|
<%s key={someKey} {...props} />`,
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
),
|
|
211
|
+
y,
|
|
212
|
+
E,
|
|
213
|
+
N,
|
|
214
|
+
E
|
|
215
|
+
), Q[E + y] = !0);
|
|
216
216
|
}
|
|
217
|
-
if (
|
|
218
|
-
|
|
219
|
-
for (var
|
|
220
|
-
|
|
221
|
-
} else
|
|
222
|
-
return
|
|
223
|
-
|
|
224
|
-
typeof
|
|
217
|
+
if (E = null, w !== void 0 && (t(w), E = "" + w), r(u) && (t(u.key), E = "" + u.key), "key" in u) {
|
|
218
|
+
w = {};
|
|
219
|
+
for (var Y in u)
|
|
220
|
+
Y !== "key" && (w[Y] = u[Y]);
|
|
221
|
+
} else w = u;
|
|
222
|
+
return E && a(
|
|
223
|
+
w,
|
|
224
|
+
typeof l == "function" ? l.displayName || l.name || "Unknown" : l
|
|
225
225
|
), h(
|
|
226
|
-
|
|
226
|
+
l,
|
|
227
|
+
E,
|
|
227
228
|
w,
|
|
228
|
-
g,
|
|
229
229
|
i(),
|
|
230
|
-
|
|
231
|
-
|
|
230
|
+
I,
|
|
231
|
+
q
|
|
232
232
|
);
|
|
233
233
|
}
|
|
234
|
-
function d(
|
|
235
|
-
|
|
234
|
+
function d(l) {
|
|
235
|
+
g(l) ? l._store && (l._store.validated = 1) : typeof l == "object" && l !== null && l.$$typeof === A && (l._payload.status === "fulfilled" ? g(l._payload.value) && l._payload.value._store && (l._payload.value._store.validated = 1) : l._store && (l._store.validated = 1));
|
|
236
236
|
}
|
|
237
|
-
function
|
|
238
|
-
return typeof
|
|
237
|
+
function g(l) {
|
|
238
|
+
return typeof l == "object" && l !== null && l.$$typeof === C;
|
|
239
239
|
}
|
|
240
|
-
var f = ae,
|
|
240
|
+
var f = ae, C = Symbol.for("react.transitional.element"), m = Symbol.for("react.portal"), L = Symbol.for("react.fragment"), O = Symbol.for("react.strict_mode"), v = Symbol.for("react.profiler"), T = Symbol.for("react.consumer"), k = Symbol.for("react.context"), b = Symbol.for("react.forward_ref"), D = Symbol.for("react.suspense"), P = Symbol.for("react.suspense_list"), F = Symbol.for("react.memo"), A = Symbol.for("react.lazy"), M = Symbol.for("react.activity"), ie = Symbol.for("react.client.reference"), j = f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, J = Object.prototype.hasOwnProperty, ne = Array.isArray, U = console.createTask ? console.createTask : function() {
|
|
241
241
|
return null;
|
|
242
242
|
};
|
|
243
243
|
f = {
|
|
244
|
-
react_stack_bottom_frame: function(
|
|
245
|
-
return
|
|
244
|
+
react_stack_bottom_frame: function(l) {
|
|
245
|
+
return l();
|
|
246
246
|
}
|
|
247
247
|
};
|
|
248
|
-
var
|
|
248
|
+
var G, X = {}, K = f.react_stack_bottom_frame.bind(
|
|
249
249
|
f,
|
|
250
|
-
|
|
251
|
-
)(),
|
|
252
|
-
|
|
253
|
-
var
|
|
250
|
+
n
|
|
251
|
+
)(), Z = U(s(n)), Q = {};
|
|
252
|
+
_.Fragment = L, _.jsx = function(l, u, w) {
|
|
253
|
+
var y = 1e4 > j.recentlyCreatedOwnerStacks++;
|
|
254
254
|
return o(
|
|
255
|
-
|
|
255
|
+
l,
|
|
256
256
|
u,
|
|
257
|
-
|
|
257
|
+
w,
|
|
258
258
|
!1,
|
|
259
|
-
|
|
260
|
-
|
|
259
|
+
y ? Error("react-stack-top-frame") : K,
|
|
260
|
+
y ? U(s(l)) : Z
|
|
261
261
|
);
|
|
262
|
-
},
|
|
263
|
-
var
|
|
262
|
+
}, _.jsxs = function(l, u, w) {
|
|
263
|
+
var y = 1e4 > j.recentlyCreatedOwnerStacks++;
|
|
264
264
|
return o(
|
|
265
|
-
|
|
265
|
+
l,
|
|
266
266
|
u,
|
|
267
|
-
|
|
267
|
+
w,
|
|
268
268
|
!0,
|
|
269
|
-
|
|
270
|
-
|
|
269
|
+
y ? Error("react-stack-top-frame") : K,
|
|
270
|
+
y ? U(s(l)) : Z
|
|
271
271
|
);
|
|
272
272
|
};
|
|
273
|
-
}()),
|
|
273
|
+
}()), _;
|
|
274
274
|
}
|
|
275
|
-
var
|
|
275
|
+
var se;
|
|
276
276
|
function de() {
|
|
277
|
-
return
|
|
277
|
+
return se || (se = 1, process.env.NODE_ENV === "production" ? B.exports = ce() : B.exports = he()), B.exports;
|
|
278
278
|
}
|
|
279
279
|
var ue = de();
|
|
280
280
|
class fe {
|
|
@@ -341,35 +341,35 @@ class fe {
|
|
|
341
341
|
e || (e = {}), this.main = e.main || "ss-main", this.placeholder = e.placeholder || "ss-placeholder", this.values = e.values || "ss-values", this.single = e.single || "ss-single", this.max = e.max || "ss-max", this.value = e.value || "ss-value", this.valueText = e.valueText || "ss-value-text", this.valueDelete = e.valueDelete || "ss-value-delete", this.valueOut = e.valueOut || "ss-value-out", this.deselect = e.deselect || "ss-deselect", this.deselectPath = e.deselectPath || "M10,10 L90,90 M10,90 L90,10", this.arrow = e.arrow || "ss-arrow", this.arrowClose = e.arrowClose || "M10,30 L50,70 L90,30", this.arrowOpen = e.arrowOpen || "M10,70 L50,30 L90,70", this.content = e.content || "ss-content", this.contentOpen = e.contentOpen || "ss-open", this.dirAbove = e.dirAbove || "ss-dir-above", this.dirBelow = e.dirBelow || "ss-dir-below", this.search = e.search || "ss-search", this.searchHighlighter = e.searchHighlighter || "ss-search-highlight", this.searching = e.searching || "ss-searching", this.addable = e.addable || "ss-addable", this.addablePath = e.addablePath || "M50,10 L50,90 M10,50 L90,50", this.list = e.list || "ss-list", this.optgroup = e.optgroup || "ss-optgroup", this.optgroupLabel = e.optgroupLabel || "ss-optgroup-label", this.optgroupLabelText = e.optgroupLabelText || "ss-optgroup-label-text", this.optgroupActions = e.optgroupActions || "ss-optgroup-actions", this.optgroupSelectAll = e.optgroupSelectAll || "ss-selectall", this.optgroupSelectAllBox = e.optgroupSelectAllBox || "M60,10 L10,10 L10,90 L90,90 L90,50", this.optgroupSelectAllCheck = e.optgroupSelectAllCheck || "M30,45 L50,70 L90,10", this.optgroupClosable = e.optgroupClosable || "ss-closable", this.option = e.option || "ss-option", this.optionDelete = e.optionDelete || "M10,10 L90,90 M10,90 L90,10", this.highlighted = e.highlighted || "ss-highlighted", this.mainOpen = e.mainOpen || "ss-open", this.close = e.close || "ss-close", this.selected = e.selected || "ss-selected", this.error = e.error || "ss-error", this.disabled = e.disabled || "ss-disabled", this.hide = e.hide || "ss-hide";
|
|
342
342
|
}
|
|
343
343
|
}
|
|
344
|
-
function
|
|
344
|
+
function W() {
|
|
345
345
|
return Math.random().toString(36).substring(2, 10);
|
|
346
346
|
}
|
|
347
347
|
function pe(p, e) {
|
|
348
|
-
function t(i,
|
|
349
|
-
return
|
|
348
|
+
function t(i, n) {
|
|
349
|
+
return n && i && i.classList && i.classList.contains(n) || n && i && i.dataset && i.dataset.id && i.dataset.id === e ? i : null;
|
|
350
350
|
}
|
|
351
|
-
function s(i,
|
|
352
|
-
return !i || i === document ? null : t(i,
|
|
351
|
+
function s(i, n) {
|
|
352
|
+
return !i || i === document ? null : t(i, n) ? i : s(i.parentNode, n);
|
|
353
353
|
}
|
|
354
354
|
return t(p, e) || s(p, e);
|
|
355
355
|
}
|
|
356
|
-
function
|
|
356
|
+
function H(p, e = 50, t = !1) {
|
|
357
357
|
let s;
|
|
358
358
|
return function(...i) {
|
|
359
|
-
const
|
|
360
|
-
s = null, t || p.apply(
|
|
359
|
+
const n = self, r = () => {
|
|
360
|
+
s = null, t || p.apply(n, i);
|
|
361
361
|
}, a = t && !s;
|
|
362
|
-
clearTimeout(s), s = setTimeout(r, e), a && p.apply(
|
|
362
|
+
clearTimeout(s), s = setTimeout(r, e), a && p.apply(n, i);
|
|
363
363
|
};
|
|
364
364
|
}
|
|
365
|
-
function
|
|
365
|
+
function z(p, e) {
|
|
366
366
|
return JSON.stringify(p) === JSON.stringify(e);
|
|
367
367
|
}
|
|
368
368
|
function me(p) {
|
|
369
369
|
const e = p.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (t) => "-" + t.toLowerCase());
|
|
370
370
|
return p[0] === p[0].toUpperCase() ? e.substring(1) : e;
|
|
371
371
|
}
|
|
372
|
-
class
|
|
372
|
+
class S {
|
|
373
373
|
id;
|
|
374
374
|
value;
|
|
375
375
|
text;
|
|
@@ -384,10 +384,10 @@ class b {
|
|
|
384
384
|
data;
|
|
385
385
|
mandatory;
|
|
386
386
|
constructor(e) {
|
|
387
|
-
this.id = !e.id || e.id === "" ?
|
|
387
|
+
this.id = !e.id || e.id === "" ? W() : e.id, this.value = e.value === void 0 ? e.text || "" : e.value || "", this.text = e.text || "", this.html = e.html || "", this.defaultSelected = e.defaultSelected !== void 0 ? e.defaultSelected : !1, this.selected = e.selected !== void 0 ? e.selected : !1, this.display = e.display !== void 0 ? e.display : !0, this.disabled = e.disabled !== void 0 ? e.disabled : !1, this.mandatory = e.mandatory !== void 0 ? e.mandatory : !1, this.placeholder = e.placeholder !== void 0 ? e.placeholder : !1, this.class = e.class || "", this.style = e.style || "", this.data = e.data || {};
|
|
388
388
|
}
|
|
389
389
|
}
|
|
390
|
-
class
|
|
390
|
+
class x {
|
|
391
391
|
id;
|
|
392
392
|
label;
|
|
393
393
|
selectAll;
|
|
@@ -395,9 +395,9 @@ class y {
|
|
|
395
395
|
closable;
|
|
396
396
|
options;
|
|
397
397
|
constructor(e) {
|
|
398
|
-
if (this.id = !e.id || e.id === "" ?
|
|
398
|
+
if (this.id = !e.id || e.id === "" ? W() : e.id, this.label = e.label || "", this.selectAll = e.selectAll === void 0 ? !1 : e.selectAll, this.selectAllText = e.selectAllText || "Select All", this.closable = e.closable || "off", this.options = [], e.options)
|
|
399
399
|
for (const t of e.options)
|
|
400
|
-
this.options.push(new
|
|
400
|
+
this.options.push(new S(t));
|
|
401
401
|
}
|
|
402
402
|
}
|
|
403
403
|
class ge {
|
|
@@ -414,7 +414,7 @@ class ge {
|
|
|
414
414
|
return new Error("Data must be an array");
|
|
415
415
|
for (let t of e)
|
|
416
416
|
if (t)
|
|
417
|
-
if (t instanceof
|
|
417
|
+
if (t instanceof x || "label" in t) {
|
|
418
418
|
if (!("label" in t))
|
|
419
419
|
return new Error("Optgroup must have a label");
|
|
420
420
|
if ("options" in t && t.options)
|
|
@@ -423,7 +423,7 @@ class ge {
|
|
|
423
423
|
if (i)
|
|
424
424
|
return i;
|
|
425
425
|
}
|
|
426
|
-
} else if (t instanceof
|
|
426
|
+
} else if (t instanceof S || "text" in t) {
|
|
427
427
|
const s = this.validateOption(t);
|
|
428
428
|
if (s)
|
|
429
429
|
return s;
|
|
@@ -439,28 +439,28 @@ class ge {
|
|
|
439
439
|
let t = [];
|
|
440
440
|
return e.forEach((s) => {
|
|
441
441
|
if (s) {
|
|
442
|
-
if (s instanceof
|
|
442
|
+
if (s instanceof x || "label" in s) {
|
|
443
443
|
let i = [];
|
|
444
|
-
"options" in s && s.options && s.options.forEach((
|
|
445
|
-
i.push(new
|
|
446
|
-
}), i.length > 0 && t.push(new
|
|
444
|
+
"options" in s && s.options && s.options.forEach((n) => {
|
|
445
|
+
i.push(new S(n));
|
|
446
|
+
}), i.length > 0 && t.push(new x(s));
|
|
447
447
|
}
|
|
448
|
-
(s instanceof
|
|
448
|
+
(s instanceof S || "text" in s) && t.push(new S(s));
|
|
449
449
|
}
|
|
450
450
|
}), t;
|
|
451
451
|
}
|
|
452
452
|
setData(e, t = !1) {
|
|
453
453
|
const s = this.partialToFullData(e);
|
|
454
454
|
if (t) {
|
|
455
|
-
const i = this.getSelectedOptions(),
|
|
455
|
+
const i = this.getSelectedOptions(), n = [];
|
|
456
456
|
i.forEach((r) => {
|
|
457
457
|
let a = !1;
|
|
458
458
|
for (const c of s) {
|
|
459
|
-
if (c instanceof
|
|
459
|
+
if (c instanceof S && c.id === r.id) {
|
|
460
460
|
a = !0;
|
|
461
461
|
break;
|
|
462
462
|
}
|
|
463
|
-
if (c instanceof
|
|
463
|
+
if (c instanceof x) {
|
|
464
464
|
for (const h of c.options)
|
|
465
465
|
if (h.id === r.id) {
|
|
466
466
|
a = !0;
|
|
@@ -468,8 +468,8 @@ class ge {
|
|
|
468
468
|
}
|
|
469
469
|
}
|
|
470
470
|
}
|
|
471
|
-
a ||
|
|
472
|
-
}), this.data = [...
|
|
471
|
+
a || n.push(r);
|
|
472
|
+
}), this.data = [...n, ...s];
|
|
473
473
|
} else
|
|
474
474
|
this.data = s;
|
|
475
475
|
this.selectType === "single" && this.setSelectedBy("id", this.getSelected());
|
|
@@ -485,28 +485,28 @@ class ge {
|
|
|
485
485
|
}
|
|
486
486
|
addOption(e, t = !1) {
|
|
487
487
|
if (t) {
|
|
488
|
-
let s = [new
|
|
488
|
+
let s = [new S(e)];
|
|
489
489
|
this.setData(s.concat(this.getData()));
|
|
490
490
|
} else
|
|
491
|
-
this.setData(this.getData().concat(new
|
|
491
|
+
this.setData(this.getData().concat(new S(e)));
|
|
492
492
|
}
|
|
493
493
|
// Pass in an array of id that will loop through
|
|
494
494
|
// each option and set the selected property to true
|
|
495
495
|
// but also clean selected by determining selectType
|
|
496
496
|
setSelectedBy(e, t) {
|
|
497
497
|
let s = null, i = !1;
|
|
498
|
-
const
|
|
498
|
+
const n = [];
|
|
499
499
|
for (let a of this.data) {
|
|
500
|
-
if (a instanceof
|
|
500
|
+
if (a instanceof x)
|
|
501
501
|
for (let c of a.options) {
|
|
502
502
|
s || (s = c);
|
|
503
503
|
let h = c[e] || "";
|
|
504
|
-
c.selected = i ? !1 : t.includes(h), c.selected && (
|
|
504
|
+
c.selected = i ? !1 : t.includes(h), c.selected && (n.push(c), this.selectType === "single" && (i = !0));
|
|
505
505
|
}
|
|
506
|
-
a instanceof
|
|
506
|
+
a instanceof S && (s || (s = a), a.selected = i ? !1 : t.includes(a[e]), a.selected && (n.push(a), this.selectType === "single" && (i = !0)));
|
|
507
507
|
}
|
|
508
|
-
this.selectType === "single" && s && !i && (s.selected = !0,
|
|
509
|
-
const r = t.map((a) =>
|
|
508
|
+
this.selectType === "single" && s && !i && (s.selected = !0, n.push(s));
|
|
509
|
+
const r = t.map((a) => n.find((c) => c[e] === a)?.id || "");
|
|
510
510
|
this.selectedOrder = r;
|
|
511
511
|
}
|
|
512
512
|
getSelected() {
|
|
@@ -520,7 +520,7 @@ class ge {
|
|
|
520
520
|
}
|
|
521
521
|
getOptgroupByID(e) {
|
|
522
522
|
for (let t of this.data)
|
|
523
|
-
if (t instanceof
|
|
523
|
+
if (t instanceof x && t.id === e)
|
|
524
524
|
return t;
|
|
525
525
|
return null;
|
|
526
526
|
}
|
|
@@ -534,7 +534,7 @@ class ge {
|
|
|
534
534
|
getFirstOption() {
|
|
535
535
|
let e = null;
|
|
536
536
|
for (let t of this.data)
|
|
537
|
-
if (t instanceof
|
|
537
|
+
if (t instanceof x ? e = t.options[0] : t instanceof S && (e = t), e)
|
|
538
538
|
break;
|
|
539
539
|
return e;
|
|
540
540
|
}
|
|
@@ -547,28 +547,28 @@ class ge {
|
|
|
547
547
|
filter(e, t) {
|
|
548
548
|
const s = [];
|
|
549
549
|
return this.data.forEach((i) => {
|
|
550
|
-
if (i instanceof
|
|
551
|
-
let
|
|
550
|
+
if (i instanceof x) {
|
|
551
|
+
let n = [];
|
|
552
552
|
if (i.options.forEach((a) => {
|
|
553
|
-
(!e || e(a)) && (t ?
|
|
554
|
-
}),
|
|
555
|
-
let a = new
|
|
556
|
-
a.options =
|
|
553
|
+
(!e || e(a)) && (t ? n.push(new S(a)) : s.push(new S(a)));
|
|
554
|
+
}), n.length > 0) {
|
|
555
|
+
let a = new x(i);
|
|
556
|
+
a.options = n, s.push(a);
|
|
557
557
|
}
|
|
558
558
|
}
|
|
559
|
-
i instanceof
|
|
559
|
+
i instanceof S && (!e || e(i)) && s.push(new S(i));
|
|
560
560
|
}), s;
|
|
561
561
|
}
|
|
562
562
|
// Take in an array of options and reoder them based upon the selected order
|
|
563
563
|
selectedOrderOptions(e) {
|
|
564
564
|
const t = [];
|
|
565
565
|
return this.selectedOrder.forEach((s) => {
|
|
566
|
-
const i = e.find((
|
|
566
|
+
const i = e.find((n) => n.id === s);
|
|
567
567
|
i && t.push(i);
|
|
568
568
|
}), e.forEach((s) => {
|
|
569
569
|
let i = !1;
|
|
570
|
-
t.forEach((
|
|
571
|
-
if (s.id ===
|
|
570
|
+
t.forEach((n) => {
|
|
571
|
+
if (s.id === n.id) {
|
|
572
572
|
i = !0;
|
|
573
573
|
return;
|
|
574
574
|
}
|
|
@@ -576,7 +576,7 @@ class ge {
|
|
|
576
576
|
}), t;
|
|
577
577
|
}
|
|
578
578
|
}
|
|
579
|
-
class
|
|
579
|
+
class ve {
|
|
580
580
|
settings;
|
|
581
581
|
store;
|
|
582
582
|
callbacks;
|
|
@@ -604,8 +604,8 @@ class be {
|
|
|
604
604
|
this.main.main.classList.add(t), this.content.main.classList.add(t), this.content.main.classList.add(this.classes.contentOpen), this.content.search.input.removeAttribute("aria-hidden"), this.moveContent();
|
|
605
605
|
const s = this.store.getSelectedOptions();
|
|
606
606
|
if (s.length) {
|
|
607
|
-
const i = s[s.length - 1].id,
|
|
608
|
-
|
|
607
|
+
const i = s[s.length - 1].id, n = this.content.list.querySelector('[data-id="' + i + '"]');
|
|
608
|
+
n && this.ensureElementInView(this.content.list, n);
|
|
609
609
|
}
|
|
610
610
|
}
|
|
611
611
|
close() {
|
|
@@ -654,21 +654,21 @@ class be {
|
|
|
654
654
|
if (h.stopPropagation(), this.settings.disabled)
|
|
655
655
|
return;
|
|
656
656
|
let o = !0;
|
|
657
|
-
const d = this.store.getSelectedOptions(),
|
|
658
|
-
if (this.callbacks.beforeChange && (o = this.callbacks.beforeChange(
|
|
657
|
+
const d = this.store.getSelectedOptions(), g = [];
|
|
658
|
+
if (this.callbacks.beforeChange && (o = this.callbacks.beforeChange(g, d) === !0), o) {
|
|
659
659
|
if (this.settings.isMultiple)
|
|
660
660
|
this.callbacks.setSelected([], !1), this.updateDeselectAll();
|
|
661
661
|
else {
|
|
662
|
-
const f = this.store.getFirstOption(),
|
|
663
|
-
this.callbacks.setSelected(
|
|
662
|
+
const f = this.store.getFirstOption(), C = f ? f.id : "";
|
|
663
|
+
this.callbacks.setSelected(C, !1);
|
|
664
664
|
}
|
|
665
665
|
this.settings.closeOnSelect && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(this.store.getSelectedOptions());
|
|
666
666
|
}
|
|
667
667
|
};
|
|
668
|
-
const
|
|
669
|
-
|
|
668
|
+
const n = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
669
|
+
n.setAttribute("viewBox", "0 0 100 100");
|
|
670
670
|
const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
671
|
-
r.setAttribute("d", this.classes.deselectPath),
|
|
671
|
+
r.setAttribute("d", this.classes.deselectPath), n.appendChild(r), s.appendChild(n), e.appendChild(s);
|
|
672
672
|
const a = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
673
673
|
a.classList.add(this.classes.arrow), a.setAttribute("viewBox", "0 0 100 100");
|
|
674
674
|
const c = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
@@ -677,7 +677,7 @@ class be {
|
|
|
677
677
|
values: t,
|
|
678
678
|
deselect: {
|
|
679
679
|
main: s,
|
|
680
|
-
svg:
|
|
680
|
+
svg: n,
|
|
681
681
|
path: r
|
|
682
682
|
},
|
|
683
683
|
arrow: {
|
|
@@ -735,8 +735,8 @@ class be {
|
|
|
735
735
|
this.settings.keepOrder && (t = this.store.selectedOrderOptions(t));
|
|
736
736
|
let s = [];
|
|
737
737
|
for (let i = 0; i < e.length; i++) {
|
|
738
|
-
const
|
|
739
|
-
r && (t.filter((c) => c.id === r, !1).length || s.push(
|
|
738
|
+
const n = e[i], r = n.getAttribute("data-id");
|
|
739
|
+
r && (t.filter((c) => c.id === r, !1).length || s.push(n));
|
|
740
740
|
}
|
|
741
741
|
for (const i of s)
|
|
742
742
|
i.classList.add(this.classes.valueOut), setTimeout(() => {
|
|
@@ -744,10 +744,10 @@ class be {
|
|
|
744
744
|
}, 100);
|
|
745
745
|
e = this.main.values.childNodes;
|
|
746
746
|
for (let i = 0; i < t.length; i++) {
|
|
747
|
-
let
|
|
747
|
+
let n = !0;
|
|
748
748
|
for (let r = 0; r < e.length; r++)
|
|
749
|
-
t[i].id === String(e[r].dataset.id) && (
|
|
750
|
-
|
|
749
|
+
t[i].id === String(e[r].dataset.id) && (n = !1);
|
|
750
|
+
n && (this.settings.keepOrder ? this.main.values.appendChild(this.multipleValue(t[i])) : e.length === 0 ? this.main.values.appendChild(this.multipleValue(t[i])) : i === 0 ? this.main.values.insertBefore(this.multipleValue(t[i]), e[i]) : e[i - 1].insertAdjacentElement("afterend", this.multipleValue(t[i])));
|
|
751
751
|
}
|
|
752
752
|
}
|
|
753
753
|
multipleValue(e) {
|
|
@@ -763,19 +763,19 @@ class be {
|
|
|
763
763
|
const h = this.store.getSelectedOptions(), o = h.filter((d) => d.selected && d.id !== e.id, !0);
|
|
764
764
|
if (!(this.settings.minSelected && o.length < this.settings.minSelected) && (this.callbacks.beforeChange && (c = this.callbacks.beforeChange(o, h) === !0), c)) {
|
|
765
765
|
let d = [];
|
|
766
|
-
for (const
|
|
767
|
-
if (
|
|
768
|
-
for (const f of
|
|
766
|
+
for (const g of o) {
|
|
767
|
+
if (g instanceof x)
|
|
768
|
+
for (const f of g.options)
|
|
769
769
|
f.id && d.push(f.id);
|
|
770
|
-
|
|
770
|
+
g instanceof S && d.push(g.id);
|
|
771
771
|
}
|
|
772
772
|
this.callbacks.setSelected(d, !1), this.settings.closeOnSelect && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(o), this.updateDeselectAll();
|
|
773
773
|
}
|
|
774
774
|
};
|
|
775
|
-
const
|
|
776
|
-
|
|
775
|
+
const n = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
776
|
+
n.setAttribute("viewBox", "0 0 100 100");
|
|
777
777
|
const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
778
|
-
r.setAttribute("d", this.classes.optionDelete),
|
|
778
|
+
r.setAttribute("d", this.classes.optionDelete), n.appendChild(r), i.appendChild(n), t.appendChild(i), i.onkeydown = (a) => {
|
|
779
779
|
a.key === "Enter" && i.click();
|
|
780
780
|
};
|
|
781
781
|
}
|
|
@@ -814,13 +814,13 @@ class be {
|
|
|
814
814
|
main: e,
|
|
815
815
|
input: t
|
|
816
816
|
};
|
|
817
|
-
if (this.settings.showSearch || (e.classList.add(this.classes.hide), t.readOnly = !0), t.type = "search", t.placeholder = this.settings.searchPlaceholder, t.tabIndex = -1, t.setAttribute("aria-label", this.settings.searchPlaceholder), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("autocapitalize", "off"), t.setAttribute("autocomplete", "off"), t.setAttribute("autocorrect", "off"), t.setAttribute("aria-hidden", "true"), t.oninput =
|
|
818
|
-
this.callbacks.search(
|
|
819
|
-
}, 100), t.onkeydown = (
|
|
820
|
-
switch (
|
|
817
|
+
if (this.settings.showSearch || (e.classList.add(this.classes.hide), t.readOnly = !0), t.type = "search", t.placeholder = this.settings.searchPlaceholder, t.tabIndex = -1, t.setAttribute("aria-label", this.settings.searchPlaceholder), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("autocapitalize", "off"), t.setAttribute("autocomplete", "off"), t.setAttribute("autocorrect", "off"), t.setAttribute("aria-hidden", "true"), t.oninput = H((n) => {
|
|
818
|
+
this.callbacks.search(n.target.value);
|
|
819
|
+
}, 100), t.onkeydown = (n) => {
|
|
820
|
+
switch (n.key) {
|
|
821
821
|
case "ArrowUp":
|
|
822
822
|
case "ArrowDown":
|
|
823
|
-
return
|
|
823
|
+
return n.key === "ArrowDown" ? this.highlight("down") : this.highlight("up"), !1;
|
|
824
824
|
case "Tab":
|
|
825
825
|
return this.callbacks.close(), !0;
|
|
826
826
|
// Continue doing normal tabbing
|
|
@@ -836,10 +836,10 @@ class be {
|
|
|
836
836
|
return !0;
|
|
837
837
|
}, e.appendChild(t), this.callbacks.addable) {
|
|
838
838
|
s.classList.add(this.classes.addable);
|
|
839
|
-
const
|
|
840
|
-
|
|
839
|
+
const n = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
840
|
+
n.setAttribute("viewBox", "0 0 100 100");
|
|
841
841
|
const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
842
|
-
r.setAttribute("d", this.classes.addablePath),
|
|
842
|
+
r.setAttribute("d", this.classes.addablePath), n.appendChild(r), s.appendChild(n), s.onclick = (a) => {
|
|
843
843
|
if (a.preventDefault(), a.stopPropagation(), !this.callbacks.addable)
|
|
844
844
|
return;
|
|
845
845
|
const c = this.content.search.input.value.trim();
|
|
@@ -848,12 +848,12 @@ class be {
|
|
|
848
848
|
return;
|
|
849
849
|
}
|
|
850
850
|
const h = (d) => {
|
|
851
|
-
let
|
|
852
|
-
if (this.callbacks.addOption(
|
|
851
|
+
let g = new S(d);
|
|
852
|
+
if (this.callbacks.addOption(g), this.settings.isMultiple) {
|
|
853
853
|
let f = this.store.getSelected();
|
|
854
|
-
f.push(
|
|
854
|
+
f.push(g.id), this.callbacks.setSelected(f, !0);
|
|
855
855
|
} else
|
|
856
|
-
this.callbacks.setSelected([
|
|
856
|
+
this.callbacks.setSelected([g.id], !0);
|
|
857
857
|
this.callbacks.search(""), this.settings.closeOnSelect && setTimeout(() => {
|
|
858
858
|
this.callbacks.close();
|
|
859
859
|
}, 100);
|
|
@@ -869,7 +869,7 @@ class be {
|
|
|
869
869
|
}) : o instanceof Error ? this.renderError(o.message) : h(o));
|
|
870
870
|
}, e.appendChild(s), i.addable = {
|
|
871
871
|
main: s,
|
|
872
|
-
svg:
|
|
872
|
+
svg: n,
|
|
873
873
|
path: r
|
|
874
874
|
};
|
|
875
875
|
}
|
|
@@ -892,25 +892,25 @@ class be {
|
|
|
892
892
|
return;
|
|
893
893
|
}
|
|
894
894
|
let s = !1;
|
|
895
|
-
for (const
|
|
896
|
-
|
|
895
|
+
for (const n of t)
|
|
896
|
+
n.classList.contains(this.classes.highlighted) && (s = !0);
|
|
897
897
|
if (!s) {
|
|
898
|
-
for (const
|
|
899
|
-
if (
|
|
900
|
-
|
|
898
|
+
for (const n of t)
|
|
899
|
+
if (n.classList.contains(this.classes.selected)) {
|
|
900
|
+
n.classList.add(this.classes.highlighted);
|
|
901
901
|
break;
|
|
902
902
|
}
|
|
903
903
|
}
|
|
904
|
-
for (let
|
|
905
|
-
if (t[
|
|
906
|
-
const r = t[
|
|
904
|
+
for (let n = 0; n < t.length; n++)
|
|
905
|
+
if (t[n].classList.contains(this.classes.highlighted)) {
|
|
906
|
+
const r = t[n];
|
|
907
907
|
r.classList.remove(this.classes.highlighted);
|
|
908
908
|
const a = r.parentElement;
|
|
909
909
|
if (a && a.classList.contains(this.classes.mainOpen)) {
|
|
910
910
|
const o = a.querySelector("." + this.classes.optgroupLabel);
|
|
911
911
|
o && o.click();
|
|
912
912
|
}
|
|
913
|
-
let c = t[e === "down" ?
|
|
913
|
+
let c = t[e === "down" ? n + 1 < t.length ? n + 1 : 0 : n - 1 >= 0 ? n - 1 : t.length - 1];
|
|
914
914
|
c.classList.add(this.classes.highlighted), this.ensureElementInView(this.content.list, c), c.id && this.main.main.setAttribute("aria-activedescendant", c.id);
|
|
915
915
|
const h = c.parentElement;
|
|
916
916
|
if (h && h.classList.contains(this.classes.close)) {
|
|
@@ -947,7 +947,7 @@ class be {
|
|
|
947
947
|
return;
|
|
948
948
|
}
|
|
949
949
|
this.settings.allowDeselect && !this.settings.isMultiple && (this.store.filter((i) => i.placeholder, !1).length || this.store.addOption(
|
|
950
|
-
new
|
|
950
|
+
new S({
|
|
951
951
|
text: "",
|
|
952
952
|
value: "",
|
|
953
953
|
selected: !1,
|
|
@@ -957,20 +957,20 @@ class be {
|
|
|
957
957
|
));
|
|
958
958
|
const t = document.createDocumentFragment();
|
|
959
959
|
for (const s of e) {
|
|
960
|
-
if (s instanceof
|
|
960
|
+
if (s instanceof x) {
|
|
961
961
|
const i = document.createElement("div");
|
|
962
962
|
i.classList.add(this.classes.optgroup);
|
|
963
|
-
const
|
|
964
|
-
|
|
963
|
+
const n = document.createElement("div");
|
|
964
|
+
n.classList.add(this.classes.optgroupLabel), i.appendChild(n);
|
|
965
965
|
const r = document.createElement("div");
|
|
966
|
-
r.classList.add(this.classes.optgroupLabelText), r.textContent = s.label,
|
|
966
|
+
r.classList.add(this.classes.optgroupLabelText), r.textContent = s.label, n.appendChild(r);
|
|
967
967
|
const a = document.createElement("div");
|
|
968
|
-
if (a.classList.add(this.classes.optgroupActions),
|
|
968
|
+
if (a.classList.add(this.classes.optgroupActions), n.appendChild(a), this.settings.isMultiple && s.selectAll) {
|
|
969
969
|
const c = document.createElement("div");
|
|
970
970
|
c.classList.add(this.classes.optgroupSelectAll);
|
|
971
971
|
let h = !0;
|
|
972
|
-
for (const
|
|
973
|
-
if (!
|
|
972
|
+
for (const C of s.options)
|
|
973
|
+
if (!C.selected) {
|
|
974
974
|
h = !1;
|
|
975
975
|
break;
|
|
976
976
|
}
|
|
@@ -979,27 +979,27 @@ class be {
|
|
|
979
979
|
o.textContent = s.selectAllText, c.appendChild(o);
|
|
980
980
|
const d = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
981
981
|
d.setAttribute("viewBox", "0 0 100 100"), c.appendChild(d);
|
|
982
|
-
const
|
|
983
|
-
|
|
982
|
+
const g = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
983
|
+
g.setAttribute("d", this.classes.optgroupSelectAllBox), d.appendChild(g);
|
|
984
984
|
const f = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
985
|
-
f.setAttribute("d", this.classes.optgroupSelectAllCheck), d.appendChild(f), c.addEventListener("click", (
|
|
986
|
-
|
|
987
|
-
const
|
|
985
|
+
f.setAttribute("d", this.classes.optgroupSelectAllCheck), d.appendChild(f), c.addEventListener("click", (C) => {
|
|
986
|
+
C.preventDefault(), C.stopPropagation();
|
|
987
|
+
const m = this.store.getSelected();
|
|
988
988
|
if (h) {
|
|
989
|
-
const
|
|
990
|
-
for (const
|
|
991
|
-
if (
|
|
989
|
+
const L = m.filter((O) => {
|
|
990
|
+
for (const v of s.options)
|
|
991
|
+
if (O === v.id)
|
|
992
992
|
return !1;
|
|
993
993
|
return !0;
|
|
994
994
|
});
|
|
995
|
-
this.callbacks.setSelected(
|
|
995
|
+
this.callbacks.setSelected(L, !0);
|
|
996
996
|
return;
|
|
997
997
|
} else {
|
|
998
|
-
let
|
|
999
|
-
const
|
|
1000
|
-
for (const
|
|
1001
|
-
|
|
1002
|
-
this.callbacks.setSelected(
|
|
998
|
+
let L = s.options.map((v) => v.id).filter((v) => v !== void 0);
|
|
999
|
+
const O = m.concat(L);
|
|
1000
|
+
for (const v of s.options)
|
|
1001
|
+
v.id && !this.store.getOptionByID(v.id) && this.callbacks.addOption(new S(v));
|
|
1002
|
+
this.callbacks.setSelected(O, !0);
|
|
1003
1003
|
return;
|
|
1004
1004
|
}
|
|
1005
1005
|
}), a.appendChild(c);
|
|
@@ -1010,15 +1010,15 @@ class be {
|
|
|
1010
1010
|
const h = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
1011
1011
|
h.setAttribute("viewBox", "0 0 100 100"), h.classList.add(this.classes.arrow), c.appendChild(h);
|
|
1012
1012
|
const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
1013
|
-
h.appendChild(o), s.options.some((d) => d.selected) || this.content.search.input.value.trim() !== "" ? (c.classList.add(this.classes.mainOpen), o.setAttribute("d", this.classes.arrowOpen)) : s.closable === "open" ? (i.classList.add(this.classes.mainOpen), o.setAttribute("d", this.classes.arrowOpen)) : s.closable === "close" && (i.classList.add(this.classes.close), o.setAttribute("d", this.classes.arrowClose)),
|
|
1013
|
+
h.appendChild(o), s.options.some((d) => d.selected) || this.content.search.input.value.trim() !== "" ? (c.classList.add(this.classes.mainOpen), o.setAttribute("d", this.classes.arrowOpen)) : s.closable === "open" ? (i.classList.add(this.classes.mainOpen), o.setAttribute("d", this.classes.arrowOpen)) : s.closable === "close" && (i.classList.add(this.classes.close), o.setAttribute("d", this.classes.arrowClose)), n.addEventListener("click", (d) => {
|
|
1014
1014
|
d.preventDefault(), d.stopPropagation(), i.classList.contains(this.classes.close) ? (i.classList.remove(this.classes.close), i.classList.add(this.classes.mainOpen), o.setAttribute("d", this.classes.arrowOpen)) : (i.classList.remove(this.classes.mainOpen), i.classList.add(this.classes.close), o.setAttribute("d", this.classes.arrowClose));
|
|
1015
1015
|
}), a.appendChild(c);
|
|
1016
1016
|
}
|
|
1017
|
-
i.appendChild(
|
|
1017
|
+
i.appendChild(n);
|
|
1018
1018
|
for (const c of s.options)
|
|
1019
|
-
i.appendChild(this.option(new
|
|
1019
|
+
i.appendChild(this.option(new S(c))), t.appendChild(i);
|
|
1020
1020
|
}
|
|
1021
|
-
s instanceof
|
|
1021
|
+
s instanceof S && t.appendChild(this.option(s));
|
|
1022
1022
|
}
|
|
1023
1023
|
this.content.list.appendChild(t);
|
|
1024
1024
|
}
|
|
@@ -1037,7 +1037,7 @@ class be {
|
|
|
1037
1037
|
this.classes.searchHighlighter
|
|
1038
1038
|
) : e.html !== "" ? t.innerHTML = e.html : t.textContent = e.text, this.settings.showOptionTooltips && t.textContent && t.setAttribute("title", t.textContent), e.display || t.classList.add(this.classes.hide), e.disabled && t.classList.add(this.classes.disabled), e.selected && this.settings.hideSelected && t.classList.add(this.classes.hide), e.selected ? (t.classList.add(this.classes.selected), t.setAttribute("aria-selected", "true"), this.main.main.setAttribute("aria-activedescendant", t.id)) : (t.classList.remove(this.classes.selected), t.setAttribute("aria-selected", "false")), t.addEventListener("click", (s) => {
|
|
1039
1039
|
s.preventDefault(), s.stopPropagation();
|
|
1040
|
-
const i = this.store.getSelected(),
|
|
1040
|
+
const i = this.store.getSelected(), n = s.currentTarget, r = String(n.dataset.id), a = s.ctrlKey || s.metaKey;
|
|
1041
1041
|
if (e.disabled || !this.settings.isMultiple && e.selected && !this.settings.allowDeselect || e.selected && e.mandatory || this.settings.isMultiple && this.settings.maxSelected <= i.length && !e.selected || this.settings.isMultiple && this.settings.minSelected >= i.length && e.selected && !a)
|
|
1042
1042
|
return;
|
|
1043
1043
|
let c = !1;
|
|
@@ -1046,10 +1046,10 @@ class be {
|
|
|
1046
1046
|
if (this.settings.isMultiple) {
|
|
1047
1047
|
const d = h.some((f) => f.id === r);
|
|
1048
1048
|
if (s.shiftKey && this.lastSelectedOption) {
|
|
1049
|
-
const f = this.store.getDataOptions(),
|
|
1050
|
-
if (
|
|
1051
|
-
const
|
|
1052
|
-
h.length +
|
|
1049
|
+
const f = this.store.getDataOptions(), C = f.findIndex((L) => L.id === this.lastSelectedOption.id), m = f.findIndex((L) => L.id === e.id);
|
|
1050
|
+
if (C >= 0 && m >= 0) {
|
|
1051
|
+
const L = Math.min(C, m), O = Math.max(C, m), T = f.slice(L, O + 1).filter((k) => !h.find((b) => b.id === k.id));
|
|
1052
|
+
h.length + T.length <= this.settings.maxSelected ? o = h.concat(T) : o = h;
|
|
1053
1053
|
} else
|
|
1054
1054
|
o = h;
|
|
1055
1055
|
} else a ? (d ? o = h.filter((f) => f.id !== r) : o = h.concat(e), this.lastSelectedOption = e) : (d ? o = h.filter((f) => f.id !== r) : o = h.concat(e), this.lastSelectedOption = e);
|
|
@@ -1071,17 +1071,17 @@ class be {
|
|
|
1071
1071
|
const i = t.trim();
|
|
1072
1072
|
if (i === "")
|
|
1073
1073
|
return e;
|
|
1074
|
-
const
|
|
1074
|
+
const n = i.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), r = document.createElement("div");
|
|
1075
1075
|
r.innerHTML = e;
|
|
1076
1076
|
const a = (c) => {
|
|
1077
1077
|
if (c.nodeType === Node.TEXT_NODE) {
|
|
1078
|
-
const h = c.textContent || "", o = new RegExp("(" +
|
|
1078
|
+
const h = c.textContent || "", o = new RegExp("(" + n + ")", "i");
|
|
1079
1079
|
if (o.test(h)) {
|
|
1080
1080
|
const d = document.createElement("span");
|
|
1081
|
-
h.split(o).forEach((f,
|
|
1081
|
+
h.split(o).forEach((f, C) => {
|
|
1082
1082
|
if (f && o.test(f)) {
|
|
1083
|
-
const
|
|
1084
|
-
|
|
1083
|
+
const m = document.createElement("mark");
|
|
1084
|
+
m.className = s, m.textContent = f, d.appendChild(m);
|
|
1085
1085
|
} else f && d.appendChild(document.createTextNode(f));
|
|
1086
1086
|
}), c.parentNode?.replaceChild(d, c);
|
|
1087
1087
|
}
|
|
@@ -1101,8 +1101,8 @@ class be {
|
|
|
1101
1101
|
this.content.main.style.margin = "-1px 0px 0px 0px", this.settings.contentPosition !== "relative" && (this.content.main.style.top = e.top + e.height + (this.settings.contentPosition === "fixed" ? 0 : window.scrollY) + "px", this.content.main.style.left = e.left + (this.settings.contentPosition === "fixed" ? 0 : window.scrollX) + "px", this.content.main.style.width = e.width + "px");
|
|
1102
1102
|
}
|
|
1103
1103
|
ensureElementInView(e, t) {
|
|
1104
|
-
const s = e.scrollTop + e.offsetTop, i = s + e.clientHeight,
|
|
1105
|
-
|
|
1104
|
+
const s = e.scrollTop + e.offsetTop, i = s + e.clientHeight, n = t.offsetTop, r = n + t.clientHeight;
|
|
1105
|
+
n < s ? e.scrollTop -= s - n : r > i && (e.scrollTop += r - i);
|
|
1106
1106
|
}
|
|
1107
1107
|
putContent() {
|
|
1108
1108
|
const e = this.main.main.offsetHeight, t = this.main.main.getBoundingClientRect(), s = this.content.main.offsetHeight;
|
|
@@ -1112,20 +1112,27 @@ class be {
|
|
|
1112
1112
|
updateDeselectAll() {
|
|
1113
1113
|
if (!this.store || !this.settings)
|
|
1114
1114
|
return;
|
|
1115
|
-
const e = this.store.getSelectedOptions(), t = e && e.length > 0, s = this.settings.isMultiple, i = this.settings.allowDeselect,
|
|
1116
|
-
i && !(s && !t) ?
|
|
1115
|
+
const e = this.store.getSelectedOptions(), t = e && e.length > 0, s = this.settings.isMultiple, i = this.settings.allowDeselect, n = this.main.deselect.main, r = this.classes.hide;
|
|
1116
|
+
i && !(s && !t) ? n.classList.remove(r) : n.classList.add(r);
|
|
1117
1117
|
}
|
|
1118
1118
|
}
|
|
1119
|
-
class
|
|
1119
|
+
class be {
|
|
1120
1120
|
select;
|
|
1121
1121
|
// Mutation observer fields
|
|
1122
1122
|
onValueChange;
|
|
1123
1123
|
onClassChange;
|
|
1124
1124
|
onDisabledChange;
|
|
1125
1125
|
onOptionsChange;
|
|
1126
|
+
onLabelClick;
|
|
1126
1127
|
// Change observers
|
|
1127
1128
|
listen = !1;
|
|
1128
1129
|
observer = null;
|
|
1130
|
+
isUpdating = !1;
|
|
1131
|
+
pendingOptionsChange = null;
|
|
1132
|
+
// Event handlers for preventing native select behavior (especially on iOS Safari)
|
|
1133
|
+
preventNativeSelect = null;
|
|
1134
|
+
preventNativeSelectMousedown = null;
|
|
1135
|
+
preventNativeSelectFocus = null;
|
|
1129
1136
|
constructor(e) {
|
|
1130
1137
|
this.select = e, this.valueChange = this.valueChange.bind(this), this.select.addEventListener("change", this.valueChange, {
|
|
1131
1138
|
// allow bubbling of event
|
|
@@ -1139,10 +1146,16 @@ class ve {
|
|
|
1139
1146
|
this.select.disabled = !0;
|
|
1140
1147
|
}
|
|
1141
1148
|
hideUI() {
|
|
1142
|
-
this.select.tabIndex = -1, this.select.style.position = "absolute", this.select.style.width = "1px", this.select.style.height = "1px", this.select.style.opacity = "0", this.select.style.overflow = "hidden", this.select.style.pointerEvents = "none", this.select.style.margin = "0", this.select.style.padding = "0", this.select.style.borderWidth = "0", this.select.style.clip = "rect(0 0 0 0)", this.select.setAttribute("aria-hidden", "true")
|
|
1149
|
+
this.select.tabIndex = -1, this.select.style.position = "absolute", this.select.style.width = "1px", this.select.style.height = "1px", this.select.style.opacity = "0", this.select.style.overflow = "hidden", this.select.style.pointerEvents = "none", this.select.style.margin = "0", this.select.style.padding = "0", this.select.style.borderWidth = "0", this.select.style.clip = "rect(0 0 0 0)", this.select.setAttribute("aria-hidden", "true"), this.preventNativeSelect || (this.preventNativeSelect = (e) => {
|
|
1150
|
+
e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
|
|
1151
|
+
}, this.preventNativeSelectMousedown = (e) => {
|
|
1152
|
+
e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
|
|
1153
|
+
}, this.preventNativeSelectFocus = (e) => {
|
|
1154
|
+
e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
|
|
1155
|
+
}, this.select.addEventListener("click", this.preventNativeSelect, { capture: !0, passive: !1 }), this.select.addEventListener("mousedown", this.preventNativeSelectMousedown, { capture: !0, passive: !1 }), this.select.addEventListener("focus", this.preventNativeSelectFocus, { capture: !0, passive: !1 }));
|
|
1143
1156
|
}
|
|
1144
1157
|
showUI() {
|
|
1145
|
-
this.select.removeAttribute("tabindex"), this.select.style.position = "", this.select.style.width = "", this.select.style.height = "", this.select.style.opacity = "", this.select.style.overflow = "", this.select.style.pointerEvents = "", this.select.style.margin = "", this.select.style.padding = "", this.select.style.borderWidth = "", this.select.style.clip = "", this.select.removeAttribute("aria-hidden");
|
|
1158
|
+
this.select.removeAttribute("tabindex"), this.select.style.position = "", this.select.style.width = "", this.select.style.height = "", this.select.style.opacity = "", this.select.style.overflow = "", this.select.style.pointerEvents = "", this.select.style.margin = "", this.select.style.padding = "", this.select.style.borderWidth = "", this.select.style.clip = "", this.select.removeAttribute("aria-hidden"), this.preventNativeSelect && (this.select.removeEventListener("click", this.preventNativeSelect, { capture: !0 }), this.preventNativeSelect = null), this.preventNativeSelectMousedown && (this.select.removeEventListener("mousedown", this.preventNativeSelectMousedown, { capture: !0 }), this.preventNativeSelectMousedown = null), this.preventNativeSelectFocus && (this.select.removeEventListener("focus", this.preventNativeSelectFocus, { capture: !0 }), this.preventNativeSelectFocus = null);
|
|
1146
1159
|
}
|
|
1147
1160
|
changeListen(e) {
|
|
1148
1161
|
this.listen = e, e && this.observer && this.observer.observe(this.select, {
|
|
@@ -1163,18 +1176,27 @@ class ve {
|
|
|
1163
1176
|
if (!this.listen)
|
|
1164
1177
|
return;
|
|
1165
1178
|
let t = !1, s = !1, i = !1;
|
|
1166
|
-
for (const
|
|
1167
|
-
if (
|
|
1168
|
-
for (const r of Array.from(
|
|
1179
|
+
for (const n of e) {
|
|
1180
|
+
if (n.target === this.select && (n.attributeName === "disabled" && (s = !0), n.attributeName === "class" && (t = !0), n.type === "childList")) {
|
|
1181
|
+
for (const r of Array.from(n.addedNodes))
|
|
1169
1182
|
if (r.nodeName === "OPTION" && r.value === this.select.value) {
|
|
1170
1183
|
this.select.dispatchEvent(new Event("change"));
|
|
1171
1184
|
break;
|
|
1172
1185
|
}
|
|
1173
1186
|
i = !0;
|
|
1174
1187
|
}
|
|
1175
|
-
(
|
|
1188
|
+
(n.target.nodeName === "OPTGROUP" || n.target.nodeName === "OPTION") && (i = !0);
|
|
1189
|
+
}
|
|
1190
|
+
if (t && this.onClassChange && this.onClassChange(this.select.className.split(" ")), s && this.onDisabledChange && (this.changeListen(!1), this.onDisabledChange(this.select.disabled), this.changeListen(!0)), i && this.onOptionsChange) {
|
|
1191
|
+
if (this.isUpdating) {
|
|
1192
|
+
if (this.select.options.length > 0) {
|
|
1193
|
+
const n = this.getData();
|
|
1194
|
+
n.length > 0 && (this.pendingOptionsChange = n);
|
|
1195
|
+
}
|
|
1196
|
+
return;
|
|
1197
|
+
}
|
|
1198
|
+
this.changeListen(!1), this.onOptionsChange(this.getData()), this.changeListen(!0);
|
|
1176
1199
|
}
|
|
1177
|
-
t && this.onClassChange && this.onClassChange(this.select.className.split(" ")), s && this.onDisabledChange && (this.changeListen(!1), this.onDisabledChange(this.select.disabled), this.changeListen(!0)), i && this.onOptionsChange && (this.changeListen(!1), this.onOptionsChange(this.getData()), this.changeListen(!0));
|
|
1178
1200
|
}
|
|
1179
1201
|
// From the select element pull optgroup and options into data
|
|
1180
1202
|
getData() {
|
|
@@ -1222,9 +1244,9 @@ class ve {
|
|
|
1222
1244
|
for (const s of t) {
|
|
1223
1245
|
if (s.nodeName === "OPTGROUP") {
|
|
1224
1246
|
const i = s.childNodes;
|
|
1225
|
-
for (const
|
|
1226
|
-
if (
|
|
1227
|
-
const r =
|
|
1247
|
+
for (const n of i)
|
|
1248
|
+
if (n.nodeName === "OPTION") {
|
|
1249
|
+
const r = n;
|
|
1228
1250
|
r.selected && e.push(this.getDataFromOption(r));
|
|
1229
1251
|
}
|
|
1230
1252
|
}
|
|
@@ -1243,8 +1265,8 @@ class ve {
|
|
|
1243
1265
|
const t = this.select.childNodes;
|
|
1244
1266
|
for (const s of t) {
|
|
1245
1267
|
if (s.nodeName === "OPTGROUP") {
|
|
1246
|
-
const
|
|
1247
|
-
for (const r of
|
|
1268
|
+
const n = s.childNodes;
|
|
1269
|
+
for (const r of n)
|
|
1248
1270
|
if (r.nodeName === "OPTION") {
|
|
1249
1271
|
const a = r;
|
|
1250
1272
|
a.selected = e.includes(a.id);
|
|
@@ -1266,8 +1288,8 @@ class ve {
|
|
|
1266
1288
|
const t = this.select.childNodes;
|
|
1267
1289
|
for (const s of t) {
|
|
1268
1290
|
if (s.nodeName === "OPTGROUP") {
|
|
1269
|
-
const
|
|
1270
|
-
for (const r of
|
|
1291
|
+
const n = s.childNodes;
|
|
1292
|
+
for (const r of n)
|
|
1271
1293
|
if (r.nodeName === "OPTION") {
|
|
1272
1294
|
const a = r;
|
|
1273
1295
|
a.selected = e.includes(a.value);
|
|
@@ -1286,10 +1308,15 @@ class ve {
|
|
|
1286
1308
|
})), this.changeListen(!0);
|
|
1287
1309
|
}
|
|
1288
1310
|
updateOptions(e) {
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1311
|
+
if (!(!e || e.length === 0)) {
|
|
1312
|
+
this.isUpdating = !0, this.pendingOptionsChange = null, this.changeListen(!1), this.select.innerHTML = "";
|
|
1313
|
+
for (const t of e)
|
|
1314
|
+
t instanceof x && this.select.appendChild(this.createOptgroup(t)), t instanceof S && this.select.appendChild(this.createOption(t));
|
|
1315
|
+
if (this.select.dispatchEvent(new Event("change", { bubbles: !0 })), this.changeListen(!0), this.isUpdating = !1, this.pendingOptionsChange !== null) {
|
|
1316
|
+
const t = this.pendingOptionsChange;
|
|
1317
|
+
t.length > 0 && this.onOptionsChange ? (this.pendingOptionsChange = null, this.changeListen(!1), this.onOptionsChange(t), this.changeListen(!0)) : this.pendingOptionsChange = null;
|
|
1318
|
+
}
|
|
1319
|
+
}
|
|
1293
1320
|
}
|
|
1294
1321
|
createOptgroup(e) {
|
|
1295
1322
|
const t = document.createElement("optgroup");
|
|
@@ -1306,8 +1333,48 @@ class ve {
|
|
|
1306
1333
|
t.setAttribute("data-" + me(s), e.data[s]);
|
|
1307
1334
|
}), t;
|
|
1308
1335
|
}
|
|
1336
|
+
// Find and handle labels associated with this select
|
|
1337
|
+
setupLabelHandlers() {
|
|
1338
|
+
const e = [], t = this.select.id;
|
|
1339
|
+
t && document.querySelectorAll(`label[for="${t}"]`).forEach((r) => e.push(r));
|
|
1340
|
+
let s = this.select.parentElement;
|
|
1341
|
+
for (; s && s !== document.body; ) {
|
|
1342
|
+
if (s.tagName === "LABEL") {
|
|
1343
|
+
e.push(s);
|
|
1344
|
+
break;
|
|
1345
|
+
}
|
|
1346
|
+
s = s.parentElement;
|
|
1347
|
+
}
|
|
1348
|
+
Array.from(new Set(e)).forEach((n) => {
|
|
1349
|
+
if (n.__slimSelectLabelHandler)
|
|
1350
|
+
return;
|
|
1351
|
+
const r = (a) => {
|
|
1352
|
+
a.preventDefault(), a.stopPropagation(), this.onLabelClick && setTimeout(() => {
|
|
1353
|
+
this.onLabelClick();
|
|
1354
|
+
}, 0);
|
|
1355
|
+
};
|
|
1356
|
+
n.__slimSelectLabelHandler = r, n.addEventListener("click", r, { capture: !0, passive: !1 });
|
|
1357
|
+
});
|
|
1358
|
+
}
|
|
1359
|
+
// Remove label handlers
|
|
1360
|
+
removeLabelHandlers() {
|
|
1361
|
+
const e = [], t = this.select.id;
|
|
1362
|
+
t && document.querySelectorAll(`label[for="${t}"]`).forEach((r) => e.push(r));
|
|
1363
|
+
let s = this.select.parentElement;
|
|
1364
|
+
for (; s && s !== document.body; ) {
|
|
1365
|
+
if (s.tagName === "LABEL") {
|
|
1366
|
+
e.push(s);
|
|
1367
|
+
break;
|
|
1368
|
+
}
|
|
1369
|
+
s = s.parentElement;
|
|
1370
|
+
}
|
|
1371
|
+
Array.from(new Set(e)).forEach((n) => {
|
|
1372
|
+
const r = n.__slimSelectLabelHandler;
|
|
1373
|
+
r && (n.removeEventListener("click", r, { capture: !0 }), delete n.__slimSelectLabelHandler);
|
|
1374
|
+
});
|
|
1375
|
+
}
|
|
1309
1376
|
destroy() {
|
|
1310
|
-
this.changeListen(!1), this.select.removeEventListener("change", this.valueChange), this.observer && (this.observer.disconnect(), this.observer = null), delete this.select.dataset.id, this.showUI();
|
|
1377
|
+
this.changeListen(!1), this.select.removeEventListener("change", this.valueChange), this.preventNativeSelect && (this.select.removeEventListener("click", this.preventNativeSelect, { capture: !0 }), this.preventNativeSelect = null), this.preventNativeSelectMousedown && (this.select.removeEventListener("mousedown", this.preventNativeSelectMousedown, { capture: !0 }), this.preventNativeSelectMousedown = null), this.preventNativeSelectFocus && (this.select.removeEventListener("focus", this.preventNativeSelectFocus, { capture: !0 }), this.preventNativeSelectFocus = null), this.observer && (this.observer.disconnect(), this.observer = null), this.removeLabelHandlers(), delete this.select.dataset.id, this.showUI();
|
|
1311
1378
|
}
|
|
1312
1379
|
}
|
|
1313
1380
|
class we {
|
|
@@ -1348,10 +1415,10 @@ class we {
|
|
|
1348
1415
|
maxValuesMessage;
|
|
1349
1416
|
addableText;
|
|
1350
1417
|
constructor(e) {
|
|
1351
|
-
e || (e = {}), this.id = "ss-" +
|
|
1418
|
+
e || (e = {}), this.id = "ss-" + W(), this.style = e.style || "", this.class = e.class || [], this.disabled = e.disabled !== void 0 ? e.disabled : !1, this.alwaysOpen = e.alwaysOpen !== void 0 ? e.alwaysOpen : !1, this.showSearch = e.showSearch !== void 0 ? e.showSearch : !0, this.focusSearch = e.focusSearch !== void 0 ? e.focusSearch : !0, this.ariaLabel = e.ariaLabel || "Combobox", this.searchPlaceholder = e.searchPlaceholder || "Search...", this.searchText = e.searchText || "No Results", this.searchingText = e.searchingText || "Searching...", this.searchHighlight = e.searchHighlight !== void 0 ? e.searchHighlight : !1, this.closeOnSelect = e.closeOnSelect !== void 0 ? e.closeOnSelect : !0, this.contentLocation = e.contentLocation || document.body, this.contentPosition = e.contentPosition || "absolute", this.openPosition = e.openPosition || "auto", this.placeholderText = e.placeholderText !== void 0 ? e.placeholderText : "Select Value", this.allowDeselect = e.allowDeselect !== void 0 ? e.allowDeselect : !1, this.hideSelected = e.hideSelected !== void 0 ? e.hideSelected : !1, this.keepOrder = e.keepOrder !== void 0 ? e.keepOrder : !1, this.showOptionTooltips = e.showOptionTooltips !== void 0 ? e.showOptionTooltips : !1, this.minSelected = e.minSelected || 0, this.maxSelected = e.maxSelected || 1e3, this.timeoutDelay = e.timeoutDelay || 200, this.maxValuesShown = e.maxValuesShown || 20, this.maxValuesMessage = e.maxValuesMessage || "{number} selected", this.addableText = e.addableText || 'Press "Enter" to add {value}';
|
|
1352
1419
|
}
|
|
1353
1420
|
}
|
|
1354
|
-
let
|
|
1421
|
+
let Se = class {
|
|
1355
1422
|
selectEl;
|
|
1356
1423
|
// Classes
|
|
1357
1424
|
settings;
|
|
@@ -1386,15 +1453,17 @@ let Oe = class {
|
|
|
1386
1453
|
this.selectEl.dataset.ssid && this.destroy(), this.settings = new we(e.settings), this.cssClasses = new fe(e.cssClasses);
|
|
1387
1454
|
const t = ["beforeOpen", "afterOpen", "beforeClose", "afterClose"];
|
|
1388
1455
|
for (const a in e.events)
|
|
1389
|
-
e.events.hasOwnProperty(a) && (t.indexOf(a) !== -1 ? this.events[a] =
|
|
1390
|
-
this.settings.disabled = e.settings?.disabled ? e.settings.disabled : this.selectEl.disabled, this.settings.isMultiple = this.selectEl.multiple, this.settings.style = this.selectEl.style.cssText, this.settings.class = this.selectEl.className.split(" "), this.select = new
|
|
1456
|
+
e.events.hasOwnProperty(a) && (t.indexOf(a) !== -1 ? this.events[a] = H(e.events[a], 100) : this.events[a] = e.events[a]);
|
|
1457
|
+
this.settings.disabled = e.settings?.disabled ? e.settings.disabled : this.selectEl.disabled, this.settings.isMultiple = this.selectEl.multiple, this.settings.style = this.selectEl.style.cssText, this.settings.class = this.selectEl.className.split(" "), this.select = new be(this.selectEl), this.selectEl.id || (this.selectEl.id = this.settings.id), this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class), this.select.hideUI(), this.select.onValueChange = (a) => {
|
|
1391
1458
|
this.setSelected(a.map((c) => c.id));
|
|
1392
1459
|
}, this.select.onClassChange = (a) => {
|
|
1393
1460
|
this.settings.class = a, this.render.updateClassStyles();
|
|
1394
1461
|
}, this.select.onDisabledChange = (a) => {
|
|
1395
1462
|
a ? this.disable() : this.enable();
|
|
1396
1463
|
}, this.select.onOptionsChange = (a) => {
|
|
1397
|
-
this.setData(a);
|
|
1464
|
+
this.setData(a || []);
|
|
1465
|
+
}, this.select.onLabelClick = () => {
|
|
1466
|
+
this.settings.disabled || this.open();
|
|
1398
1467
|
};
|
|
1399
1468
|
const s = e.data ? e.data : this.select.getData();
|
|
1400
1469
|
this.store = new ge(this.settings.isMultiple ? "multiple" : "single", s), e.data && this.select.updateOptions(this.store.getData());
|
|
@@ -1408,9 +1477,9 @@ let Oe = class {
|
|
|
1408
1477
|
beforeChange: this.events.beforeChange,
|
|
1409
1478
|
afterChange: this.events.afterChange
|
|
1410
1479
|
};
|
|
1411
|
-
this.render = new
|
|
1412
|
-
const
|
|
1413
|
-
|
|
1480
|
+
this.render = new ve(this.settings, this.cssClasses, this.store, i), this.render.renderValues(), this.render.renderOptions(this.store.getData());
|
|
1481
|
+
const n = this.selectEl.getAttribute("aria-label"), r = this.selectEl.getAttribute("aria-labelledby");
|
|
1482
|
+
n ? this.render.main.main.setAttribute("aria-label", n) : r && this.render.main.main.setAttribute("aria-labelledby", r), this.selectEl.parentNode && this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling), window.addEventListener("resize", this.windowResize, !1), this.settings.openPosition === "auto" && window.addEventListener("scroll", this.windowScroll, !1), document.addEventListener("visibilitychange", this.windowVisibilityChange), this.settings.disabled && this.disable(), this.settings.alwaysOpen && this.open(), this.select.setupLabelHandlers(), this.selectEl.slim = this;
|
|
1414
1483
|
}
|
|
1415
1484
|
// Set to enabled and remove disabled classes
|
|
1416
1485
|
enable() {
|
|
@@ -1431,7 +1500,7 @@ let Oe = class {
|
|
|
1431
1500
|
}
|
|
1432
1501
|
this.store.setData(e);
|
|
1433
1502
|
const i = this.store.getData();
|
|
1434
|
-
this.select.updateOptions(i), this.render.renderValues(), this.render.renderOptions(i), this.events.afterChange && !
|
|
1503
|
+
this.select.updateOptions(i), this.render.renderValues(), this.render.renderOptions(i), this.events.afterChange && !z(t, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
|
|
1435
1504
|
}
|
|
1436
1505
|
getSelected() {
|
|
1437
1506
|
let e = this.store.getSelectedOptions();
|
|
@@ -1441,24 +1510,24 @@ let Oe = class {
|
|
|
1441
1510
|
setSelected(e, t = !0) {
|
|
1442
1511
|
const s = this.store.getSelected(), i = this.store.getDataOptions();
|
|
1443
1512
|
e = Array.isArray(e) ? e : [e];
|
|
1444
|
-
const
|
|
1513
|
+
const n = [];
|
|
1445
1514
|
for (const a of e) {
|
|
1446
1515
|
if (i.find((c) => c.id == a)) {
|
|
1447
|
-
|
|
1516
|
+
n.push(a);
|
|
1448
1517
|
continue;
|
|
1449
1518
|
}
|
|
1450
1519
|
for (const c of i.filter((h) => h.value == a))
|
|
1451
|
-
|
|
1520
|
+
n.push(c.id);
|
|
1452
1521
|
}
|
|
1453
|
-
this.store.setSelectedBy("id",
|
|
1522
|
+
this.store.setSelectedBy("id", n);
|
|
1454
1523
|
const r = this.store.getData();
|
|
1455
|
-
this.select.updateOptions(r), this.render.renderValues(), this.render.content.search.input.value !== "" ? this.search(this.render.content.search.input.value) : this.render.renderOptions(r), t && this.events.afterChange && !
|
|
1524
|
+
this.select.updateOptions(r), this.render.renderValues(), this.render.content.search.input.value !== "" ? this.search(this.render.content.search.input.value) : this.render.renderOptions(r), t && this.events.afterChange && !z(s, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
|
|
1456
1525
|
}
|
|
1457
1526
|
addOption(e) {
|
|
1458
1527
|
const t = this.store.getSelected();
|
|
1459
1528
|
this.store.getDataOptions().some((i) => i.value === (e.value ?? e.text)) || this.store.addOption(e);
|
|
1460
1529
|
const s = this.store.getData();
|
|
1461
|
-
this.select.updateOptions(s), this.render.renderValues(), this.render.renderOptions(s), this.events.afterChange && !
|
|
1530
|
+
this.select.updateOptions(s), this.render.renderValues(), this.render.renderOptions(s), this.events.afterChange && !z(t, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
|
|
1462
1531
|
}
|
|
1463
1532
|
open() {
|
|
1464
1533
|
this.settings.disabled || this.settings.isOpen || (this.events.beforeOpen && this.events.beforeOpen(), this.render.open(), this.settings.showSearch && this.settings.focusSearch && this.render.searchFocus(), this.settings.isOpen = !0, this.openTimeout = setTimeout(() => {
|
|
@@ -1495,11 +1564,11 @@ let Oe = class {
|
|
|
1495
1564
|
destroy() {
|
|
1496
1565
|
this.openTimeout && (clearTimeout(this.openTimeout), this.openTimeout = null), this.closeTimeout && (clearTimeout(this.closeTimeout), this.closeTimeout = null), this.settings.intervalMove && (clearInterval(this.settings.intervalMove), this.settings.intervalMove = null), document.removeEventListener("click", this.documentClick), window.removeEventListener("resize", this.windowResize, !1), this.settings.openPosition === "auto" && window.removeEventListener("scroll", this.windowScroll, !1), document.removeEventListener("visibilitychange", this.windowVisibilityChange), this.store.setData([]), this.render.destroy(), this.select.destroy();
|
|
1497
1566
|
}
|
|
1498
|
-
windowResize =
|
|
1567
|
+
windowResize = H(() => {
|
|
1499
1568
|
!this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
|
|
1500
1569
|
});
|
|
1501
1570
|
// Event listener for window scrolling
|
|
1502
|
-
windowScroll =
|
|
1571
|
+
windowScroll = H(() => {
|
|
1503
1572
|
!this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
|
|
1504
1573
|
});
|
|
1505
1574
|
// Event listener for document click
|
|
@@ -1511,42 +1580,60 @@ let Oe = class {
|
|
|
1511
1580
|
document.hidden && this.close();
|
|
1512
1581
|
};
|
|
1513
1582
|
};
|
|
1514
|
-
const
|
|
1515
|
-
({ data: p, settings: e, events: t, cssClasses: s, value: i, onChange:
|
|
1516
|
-
const h =
|
|
1517
|
-
|
|
1583
|
+
const Oe = re(
|
|
1584
|
+
({ data: p, settings: e, events: t, cssClasses: s, value: i, onChange: n, children: r, multiple: a }, c) => {
|
|
1585
|
+
const h = V(null), o = V(null), d = V(!0), g = V(i);
|
|
1586
|
+
oe(c, () => ({
|
|
1518
1587
|
slimSelect: o.current
|
|
1519
|
-
}))
|
|
1588
|
+
}));
|
|
1589
|
+
const f = (m) => typeof m == "string" ? a ? [m] : m : Array.isArray(m) ? a ? m : m[0] : a ? [] : "", C = (m, L = !1) => {
|
|
1590
|
+
if (!o.current || m === void 0)
|
|
1591
|
+
return;
|
|
1592
|
+
const O = f(m), T = o.current.getData().flatMap((b) => "label" in b ? b.options : [b]);
|
|
1593
|
+
if (!(Array.isArray(O) ? O.length > 0 && O.every((b) => T.some((D) => D.value === b)) : O !== "" && T.some((b) => b.value === O)) && !Array.isArray(O) && !T.some((D) => D.placeholder)) {
|
|
1594
|
+
const D = o.current.getData(), P = {
|
|
1595
|
+
value: "",
|
|
1596
|
+
text: "",
|
|
1597
|
+
placeholder: !0
|
|
1598
|
+
};
|
|
1599
|
+
o.current.setData([P].concat(D));
|
|
1600
|
+
}
|
|
1601
|
+
o.current.setSelected(O, L);
|
|
1602
|
+
};
|
|
1603
|
+
return $(() => {
|
|
1520
1604
|
if (!h.current) return;
|
|
1521
1605
|
const m = {
|
|
1522
1606
|
select: h.current
|
|
1523
1607
|
};
|
|
1524
1608
|
p && (m.data = p), e && (m.settings = e), s && (m.cssClasses = s);
|
|
1525
|
-
const
|
|
1609
|
+
const L = t?.afterChange;
|
|
1526
1610
|
return m.events = {
|
|
1527
1611
|
...t,
|
|
1528
1612
|
afterChange: (O) => {
|
|
1529
|
-
|
|
1530
|
-
|
|
1613
|
+
if (!o.current) return;
|
|
1614
|
+
const v = a ? O.map((A) => A.value) : O[0]?.value ?? "", k = o.current.getData().flatMap(
|
|
1615
|
+
(A) => "label" in A ? A.options : [A]
|
|
1616
|
+
), b = g.current, D = b === void 0 ? !1 : Array.isArray(b) ? b.length > 0 && b.every((A) => k.some((M) => M.value === A)) : b !== "" && k.some((A) => A.value === b), P = Array.isArray(v) ? v.length > 0 && v.every((A) => k.some((M) => M.value === A)) : v !== "" && k.some((A) => A.value === v), F = Array.isArray(v) && Array.isArray(b) ? JSON.stringify(v.sort()) !== JSON.stringify(b.sort()) : b !== v;
|
|
1617
|
+
n && F && (D || P) && (n(v), g.current = v), L && L(O);
|
|
1531
1618
|
}
|
|
1532
|
-
}, o.current = new
|
|
1619
|
+
}, o.current = new Se(m), i !== void 0 && C(i, !1), () => {
|
|
1533
1620
|
o.current && (o.current.destroy(), o.current = null);
|
|
1534
1621
|
};
|
|
1535
|
-
}, []),
|
|
1622
|
+
}, []), $(() => {
|
|
1536
1623
|
if (d.current) {
|
|
1537
|
-
d.current = !1;
|
|
1624
|
+
d.current = !1, g.current = i;
|
|
1538
1625
|
return;
|
|
1539
1626
|
}
|
|
1540
|
-
o.current && i !== void 0 &&
|
|
1541
|
-
}, [i]),
|
|
1542
|
-
o.current && p && !d.current && o.current.setData(p);
|
|
1627
|
+
o.current && i !== void 0 && (g.current = i, C(i, !1));
|
|
1628
|
+
}, [i]), $(() => {
|
|
1629
|
+
o.current && p && !d.current && (o.current.setData(p), i !== void 0 && C(i, !1));
|
|
1543
1630
|
}, [p]), /* @__PURE__ */ ue.jsx("select", { ref: h, multiple: a, children: r });
|
|
1544
1631
|
}
|
|
1545
1632
|
);
|
|
1546
|
-
|
|
1633
|
+
Oe.displayName = "SlimSelect";
|
|
1547
1634
|
export {
|
|
1548
|
-
|
|
1549
|
-
|
|
1635
|
+
x as Optgroup,
|
|
1636
|
+
S as Option,
|
|
1550
1637
|
we as Settings,
|
|
1551
|
-
|
|
1638
|
+
Oe as default
|
|
1552
1639
|
};
|