slim-select 3.0.5 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +6 -1
- package/dist/react/index.d.ts +6 -1
- package/dist/react/index.js +183 -129
- 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.css +1 -1
- package/dist/slimselect.css.map +1 -1
- package/dist/slimselect.es.js +115 -61
- 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 +6 -1
- package/dist/vue/index.js +106 -52
- package/dist/vue/index.umd.js +1 -1
- package/index.html +1 -1
- package/package.json +1 -1
- package/src/slim-select/index.test.ts +3 -3
- package/src/slim-select/index.ts +23 -2
- package/src/slim-select/render.test.ts +14 -0
- package/src/slim-select/render.ts +5 -4
- package/src/slim-select/select.ts +151 -0
- package/src/slim-select/settings.test.ts +1 -1
- package/src/slim-select/settings.ts +1 -1
- package/src/slim-select/slimselect.scss +52 -15
- package/vite.config.docs.mts +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 j } from "react";
|
|
2
|
+
var D = { exports: {} }, A = {};
|
|
3
3
|
/**
|
|
4
4
|
* @license React
|
|
5
5
|
* react-jsx-runtime.production.js
|
|
@@ -50,11 +50,11 @@ function he() {
|
|
|
50
50
|
return n.$$typeof === ie ? null : n.displayName || n.name || null;
|
|
51
51
|
if (typeof n == "string") return n;
|
|
52
52
|
switch (n) {
|
|
53
|
-
case
|
|
53
|
+
case O:
|
|
54
54
|
return "Fragment";
|
|
55
|
-
case
|
|
55
|
+
case y:
|
|
56
56
|
return "Profiler";
|
|
57
|
-
case
|
|
57
|
+
case C:
|
|
58
58
|
return "StrictMode";
|
|
59
59
|
case Q:
|
|
60
60
|
return "Suspense";
|
|
@@ -67,7 +67,7 @@ function he() {
|
|
|
67
67
|
switch (typeof n.tag == "number" && console.error(
|
|
68
68
|
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
69
69
|
), n.$$typeof) {
|
|
70
|
-
case
|
|
70
|
+
case E:
|
|
71
71
|
return "Portal";
|
|
72
72
|
case R:
|
|
73
73
|
return n.displayName || "Context";
|
|
@@ -99,16 +99,16 @@ function he() {
|
|
|
99
99
|
}
|
|
100
100
|
if (u) {
|
|
101
101
|
u = console;
|
|
102
|
-
var g = u.error,
|
|
102
|
+
var g = u.error, b = typeof Symbol == "function" && Symbol.toStringTag && n[Symbol.toStringTag] || n.constructor.name || "Object";
|
|
103
103
|
return g.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
|
-
|
|
106
|
+
b
|
|
107
107
|
), e(n);
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
110
|
function s(n) {
|
|
111
|
-
if (n ===
|
|
111
|
+
if (n === O) return "<>";
|
|
112
112
|
if (typeof n == "object" && n !== null && n.$$typeof === _)
|
|
113
113
|
return "<...>";
|
|
114
114
|
try {
|
|
@@ -126,7 +126,7 @@ function he() {
|
|
|
126
126
|
return Error("react-stack-top-frame");
|
|
127
127
|
}
|
|
128
128
|
function r(n) {
|
|
129
|
-
if (
|
|
129
|
+
if (Y.call(n, "key")) {
|
|
130
130
|
var u = Object.getOwnPropertyDescriptor(n, "key").get;
|
|
131
131
|
if (u && u.isReactWarning) return !1;
|
|
132
132
|
}
|
|
@@ -150,14 +150,14 @@ function he() {
|
|
|
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
|
)), n = this.props.ref, n !== void 0 ? n : null;
|
|
152
152
|
}
|
|
153
|
-
function h(n, u, g,
|
|
153
|
+
function h(n, u, g, b, N, H) {
|
|
154
154
|
var w = g.ref;
|
|
155
155
|
return n = {
|
|
156
|
-
$$typeof:
|
|
156
|
+
$$typeof: S,
|
|
157
157
|
type: n,
|
|
158
158
|
key: u,
|
|
159
159
|
props: g,
|
|
160
|
-
_owner:
|
|
160
|
+
_owner: b
|
|
161
161
|
}, (w !== void 0 ? w : null) !== null ? Object.defineProperty(n, "ref", {
|
|
162
162
|
enumerable: !1,
|
|
163
163
|
get: c
|
|
@@ -175,49 +175,49 @@ function he() {
|
|
|
175
175
|
configurable: !1,
|
|
176
176
|
enumerable: !1,
|
|
177
177
|
writable: !0,
|
|
178
|
-
value:
|
|
178
|
+
value: N
|
|
179
179
|
}), Object.defineProperty(n, "_debugTask", {
|
|
180
180
|
configurable: !1,
|
|
181
181
|
enumerable: !1,
|
|
182
182
|
writable: !0,
|
|
183
|
-
value:
|
|
183
|
+
value: H
|
|
184
184
|
}), Object.freeze && (Object.freeze(n.props), Object.freeze(n)), n;
|
|
185
185
|
}
|
|
186
|
-
function o(n, u, g,
|
|
186
|
+
function o(n, u, g, b, N, H) {
|
|
187
187
|
var w = u.children;
|
|
188
188
|
if (w !== void 0)
|
|
189
|
-
if (
|
|
189
|
+
if (b)
|
|
190
190
|
if (le(w)) {
|
|
191
|
-
for (
|
|
192
|
-
d(w[
|
|
191
|
+
for (b = 0; b < w.length; b++)
|
|
192
|
+
d(w[b]);
|
|
193
193
|
Object.freeze && Object.freeze(w);
|
|
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
198
|
else d(w);
|
|
199
|
-
if (
|
|
199
|
+
if (Y.call(u, "key")) {
|
|
200
200
|
w = p(n);
|
|
201
|
-
var
|
|
201
|
+
var x = Object.keys(u).filter(function(ne) {
|
|
202
202
|
return ne !== "key";
|
|
203
203
|
});
|
|
204
|
-
|
|
204
|
+
b = 0 < x.length ? "{key: someKey, " + x.join(": ..., ") + ": ...}" : "{key: someKey}", J[w + b] || (x = 0 < x.length ? "{" + x.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
|
-
|
|
211
|
+
b,
|
|
212
212
|
w,
|
|
213
|
-
|
|
213
|
+
x,
|
|
214
214
|
w
|
|
215
|
-
), J[w +
|
|
215
|
+
), J[w + b] = !0);
|
|
216
216
|
}
|
|
217
217
|
if (w = null, g !== void 0 && (t(g), w = "" + g), r(u) && (t(u.key), w = "" + u.key), "key" in u) {
|
|
218
218
|
g = {};
|
|
219
|
-
for (var
|
|
220
|
-
|
|
219
|
+
for (var F in u)
|
|
220
|
+
F !== "key" && (g[F] = u[F]);
|
|
221
221
|
} else g = u;
|
|
222
222
|
return w && a(
|
|
223
223
|
g,
|
|
@@ -227,17 +227,17 @@ React keys must be passed directly to JSX without using spread:
|
|
|
227
227
|
w,
|
|
228
228
|
g,
|
|
229
229
|
i(),
|
|
230
|
-
|
|
231
|
-
|
|
230
|
+
N,
|
|
231
|
+
H
|
|
232
232
|
);
|
|
233
233
|
}
|
|
234
234
|
function d(n) {
|
|
235
235
|
m(n) ? n._store && (n._store.validated = 1) : typeof n == "object" && n !== null && n.$$typeof === _ && (n._payload.status === "fulfilled" ? m(n._payload.value) && n._payload.value._store && (n._payload.value._store.validated = 1) : n._store && (n._store.validated = 1));
|
|
236
236
|
}
|
|
237
237
|
function m(n) {
|
|
238
|
-
return typeof n == "object" && n !== null && n.$$typeof ===
|
|
238
|
+
return typeof n == "object" && n !== null && n.$$typeof === S;
|
|
239
239
|
}
|
|
240
|
-
var f = ae,
|
|
240
|
+
var f = ae, S = Symbol.for("react.transitional.element"), E = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), y = Symbol.for("react.profiler"), k = Symbol.for("react.consumer"), R = Symbol.for("react.context"), M = Symbol.for("react.forward_ref"), Q = Symbol.for("react.suspense"), ee = Symbol.for("react.suspense_list"), te = Symbol.for("react.memo"), _ = Symbol.for("react.lazy"), se = Symbol.for("react.activity"), ie = Symbol.for("react.client.reference"), I = f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, le = Array.isArray, B = console.createTask ? console.createTask : function() {
|
|
241
241
|
return null;
|
|
242
242
|
};
|
|
243
243
|
f = {
|
|
@@ -248,33 +248,33 @@ React keys must be passed directly to JSX without using spread:
|
|
|
248
248
|
var $, z = {}, W = f.react_stack_bottom_frame.bind(
|
|
249
249
|
f,
|
|
250
250
|
l
|
|
251
|
-
)(), G =
|
|
252
|
-
T.Fragment =
|
|
253
|
-
var
|
|
251
|
+
)(), G = B(s(l)), J = {};
|
|
252
|
+
T.Fragment = O, T.jsx = function(n, u, g) {
|
|
253
|
+
var b = 1e4 > I.recentlyCreatedOwnerStacks++;
|
|
254
254
|
return o(
|
|
255
255
|
n,
|
|
256
256
|
u,
|
|
257
257
|
g,
|
|
258
258
|
!1,
|
|
259
|
-
|
|
260
|
-
|
|
259
|
+
b ? Error("react-stack-top-frame") : W,
|
|
260
|
+
b ? B(s(n)) : G
|
|
261
261
|
);
|
|
262
262
|
}, T.jsxs = function(n, u, g) {
|
|
263
|
-
var
|
|
263
|
+
var b = 1e4 > I.recentlyCreatedOwnerStacks++;
|
|
264
264
|
return o(
|
|
265
265
|
n,
|
|
266
266
|
u,
|
|
267
267
|
g,
|
|
268
268
|
!0,
|
|
269
|
-
|
|
270
|
-
|
|
269
|
+
b ? Error("react-stack-top-frame") : W,
|
|
270
|
+
b ? B(s(n)) : G
|
|
271
271
|
);
|
|
272
272
|
};
|
|
273
273
|
}()), T;
|
|
274
274
|
}
|
|
275
275
|
var Z;
|
|
276
276
|
function de() {
|
|
277
|
-
return Z || (Z = 1, process.env.NODE_ENV === "production" ?
|
|
277
|
+
return Z || (Z = 1, process.env.NODE_ENV === "production" ? D.exports = ce() : D.exports = he()), D.exports;
|
|
278
278
|
}
|
|
279
279
|
var ue = de();
|
|
280
280
|
class fe {
|
|
@@ -341,7 +341,7 @@ 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 U() {
|
|
345
345
|
return Math.random().toString(36).substring(2, 10);
|
|
346
346
|
}
|
|
347
347
|
function pe(p, e) {
|
|
@@ -353,7 +353,7 @@ function pe(p, e) {
|
|
|
353
353
|
}
|
|
354
354
|
return t(p, e) || s(p, e);
|
|
355
355
|
}
|
|
356
|
-
function
|
|
356
|
+
function P(p, e = 50, t = !1) {
|
|
357
357
|
let s;
|
|
358
358
|
return function(...i) {
|
|
359
359
|
const l = self, r = () => {
|
|
@@ -362,14 +362,14 @@ function N(p, e = 50, t = !1) {
|
|
|
362
362
|
clearTimeout(s), s = setTimeout(r, e), a && p.apply(l, i);
|
|
363
363
|
};
|
|
364
364
|
}
|
|
365
|
-
function
|
|
365
|
+
function q(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 v {
|
|
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 === "" ? U() : 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 L {
|
|
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 === "" ? U() : 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 v(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 L || "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 v || "text" in t) {
|
|
427
427
|
const s = this.validateOption(t);
|
|
428
428
|
if (s)
|
|
429
429
|
return s;
|
|
@@ -439,13 +439,13 @@ class ge {
|
|
|
439
439
|
let t = [];
|
|
440
440
|
return e.forEach((s) => {
|
|
441
441
|
if (s) {
|
|
442
|
-
if (s instanceof
|
|
442
|
+
if (s instanceof L || "label" in s) {
|
|
443
443
|
let i = [];
|
|
444
444
|
"options" in s && s.options && s.options.forEach((l) => {
|
|
445
|
-
i.push(new
|
|
446
|
-
}), i.length > 0 && t.push(new
|
|
445
|
+
i.push(new v(l));
|
|
446
|
+
}), i.length > 0 && t.push(new L(s));
|
|
447
447
|
}
|
|
448
|
-
(s instanceof
|
|
448
|
+
(s instanceof v || "text" in s) && t.push(new v(s));
|
|
449
449
|
}
|
|
450
450
|
}), t;
|
|
451
451
|
}
|
|
@@ -456,11 +456,11 @@ class ge {
|
|
|
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 v && c.id === r.id) {
|
|
460
460
|
a = !0;
|
|
461
461
|
break;
|
|
462
462
|
}
|
|
463
|
-
if (c instanceof
|
|
463
|
+
if (c instanceof L) {
|
|
464
464
|
for (const h of c.options)
|
|
465
465
|
if (h.id === r.id) {
|
|
466
466
|
a = !0;
|
|
@@ -485,10 +485,10 @@ class ge {
|
|
|
485
485
|
}
|
|
486
486
|
addOption(e, t = !1) {
|
|
487
487
|
if (t) {
|
|
488
|
-
let s = [new
|
|
488
|
+
let s = [new v(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 v(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
|
|
@@ -497,13 +497,13 @@ class ge {
|
|
|
497
497
|
let s = null, i = !1;
|
|
498
498
|
const l = [];
|
|
499
499
|
for (let a of this.data) {
|
|
500
|
-
if (a instanceof
|
|
500
|
+
if (a instanceof L)
|
|
501
501
|
for (let c of a.options) {
|
|
502
502
|
s || (s = c);
|
|
503
503
|
let h = c[e] || "";
|
|
504
504
|
c.selected = i ? !1 : t.includes(h), c.selected && (l.push(c), this.selectType === "single" && (i = !0));
|
|
505
505
|
}
|
|
506
|
-
a instanceof
|
|
506
|
+
a instanceof v && (s || (s = a), a.selected = i ? !1 : t.includes(a[e]), a.selected && (l.push(a), this.selectType === "single" && (i = !0)));
|
|
507
507
|
}
|
|
508
508
|
this.selectType === "single" && s && !i && (s.selected = !0, l.push(s));
|
|
509
509
|
const r = t.map((a) => l.find((c) => c[e] === a)?.id || "");
|
|
@@ -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 L && 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 L ? e = t.options[0] : t instanceof v && (e = t), e)
|
|
538
538
|
break;
|
|
539
539
|
return e;
|
|
540
540
|
}
|
|
@@ -547,16 +547,16 @@ class ge {
|
|
|
547
547
|
filter(e, t) {
|
|
548
548
|
const s = [];
|
|
549
549
|
return this.data.forEach((i) => {
|
|
550
|
-
if (i instanceof
|
|
550
|
+
if (i instanceof L) {
|
|
551
551
|
let l = [];
|
|
552
552
|
if (i.options.forEach((a) => {
|
|
553
|
-
(!e || e(a)) && (t ? l.push(new
|
|
553
|
+
(!e || e(a)) && (t ? l.push(new v(a)) : s.push(new v(a)));
|
|
554
554
|
}), l.length > 0) {
|
|
555
|
-
let a = new
|
|
555
|
+
let a = new L(i);
|
|
556
556
|
a.options = l, s.push(a);
|
|
557
557
|
}
|
|
558
558
|
}
|
|
559
|
-
i instanceof
|
|
559
|
+
i instanceof v && (!e || e(i)) && s.push(new v(i));
|
|
560
560
|
}), s;
|
|
561
561
|
}
|
|
562
562
|
// Take in an array of options and reoder them based upon the selected order
|
|
@@ -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;
|
|
@@ -659,8 +659,8 @@ class be {
|
|
|
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(), S = f ? f.id : "";
|
|
663
|
+
this.callbacks.setSelected(S, !1);
|
|
664
664
|
}
|
|
665
665
|
this.settings.closeOnSelect && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(this.store.getSelectedOptions());
|
|
666
666
|
}
|
|
@@ -764,10 +764,10 @@ class be {
|
|
|
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
766
|
for (const m of o) {
|
|
767
|
-
if (m instanceof
|
|
767
|
+
if (m instanceof L)
|
|
768
768
|
for (const f of m.options)
|
|
769
769
|
f.id && d.push(f.id);
|
|
770
|
-
m instanceof
|
|
770
|
+
m instanceof v && d.push(m.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
|
}
|
|
@@ -814,7 +814,7 @@ 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 =
|
|
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 = P((l) => {
|
|
818
818
|
this.callbacks.search(l.target.value);
|
|
819
819
|
}, 100), t.onkeydown = (l) => {
|
|
820
820
|
switch (l.key) {
|
|
@@ -848,7 +848,7 @@ class be {
|
|
|
848
848
|
return;
|
|
849
849
|
}
|
|
850
850
|
const h = (d) => {
|
|
851
|
-
let m = new
|
|
851
|
+
let m = new v(d);
|
|
852
852
|
if (this.callbacks.addOption(m), this.settings.isMultiple) {
|
|
853
853
|
let f = this.store.getSelected();
|
|
854
854
|
f.push(m.id), this.callbacks.setSelected(f, !0);
|
|
@@ -878,9 +878,6 @@ class be {
|
|
|
878
878
|
searchFocus() {
|
|
879
879
|
this.content.search.input.focus();
|
|
880
880
|
}
|
|
881
|
-
clearSearch() {
|
|
882
|
-
this.content.search.input.value = "";
|
|
883
|
-
}
|
|
884
881
|
getOptions(e = !1, t = !1, s = !1) {
|
|
885
882
|
let i = "." + this.classes.option;
|
|
886
883
|
return e && (i += ":not(." + this.classes.placeholder + ")"), t && (i += ":not(." + this.classes.disabled + ")"), s && (i += ":not(." + this.classes.hide + ")"), Array.from(this.content.list.querySelectorAll(i));
|
|
@@ -950,7 +947,7 @@ class be {
|
|
|
950
947
|
return;
|
|
951
948
|
}
|
|
952
949
|
this.settings.allowDeselect && !this.settings.isMultiple && (this.store.filter((i) => i.placeholder, !1).length || this.store.addOption(
|
|
953
|
-
new
|
|
950
|
+
new v({
|
|
954
951
|
text: "",
|
|
955
952
|
value: "",
|
|
956
953
|
selected: !1,
|
|
@@ -960,7 +957,7 @@ class be {
|
|
|
960
957
|
));
|
|
961
958
|
const t = document.createDocumentFragment();
|
|
962
959
|
for (const s of e) {
|
|
963
|
-
if (s instanceof
|
|
960
|
+
if (s instanceof L) {
|
|
964
961
|
const i = document.createElement("div");
|
|
965
962
|
i.classList.add(this.classes.optgroup);
|
|
966
963
|
const l = document.createElement("div");
|
|
@@ -972,8 +969,8 @@ class be {
|
|
|
972
969
|
const c = document.createElement("div");
|
|
973
970
|
c.classList.add(this.classes.optgroupSelectAll);
|
|
974
971
|
let h = !0;
|
|
975
|
-
for (const
|
|
976
|
-
if (!
|
|
972
|
+
for (const S of s.options)
|
|
973
|
+
if (!S.selected) {
|
|
977
974
|
h = !1;
|
|
978
975
|
break;
|
|
979
976
|
}
|
|
@@ -985,24 +982,24 @@ class be {
|
|
|
985
982
|
const m = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
986
983
|
m.setAttribute("d", this.classes.optgroupSelectAllBox), d.appendChild(m);
|
|
987
984
|
const f = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
988
|
-
f.setAttribute("d", this.classes.optgroupSelectAllCheck), d.appendChild(f), c.addEventListener("click", (
|
|
989
|
-
|
|
990
|
-
const
|
|
985
|
+
f.setAttribute("d", this.classes.optgroupSelectAllCheck), d.appendChild(f), c.addEventListener("click", (S) => {
|
|
986
|
+
S.preventDefault(), S.stopPropagation();
|
|
987
|
+
const E = this.store.getSelected();
|
|
991
988
|
if (h) {
|
|
992
|
-
const
|
|
993
|
-
for (const
|
|
994
|
-
if (
|
|
989
|
+
const O = E.filter((C) => {
|
|
990
|
+
for (const y of s.options)
|
|
991
|
+
if (C === y.id)
|
|
995
992
|
return !1;
|
|
996
993
|
return !0;
|
|
997
994
|
});
|
|
998
|
-
this.callbacks.setSelected(
|
|
995
|
+
this.callbacks.setSelected(O, !0);
|
|
999
996
|
return;
|
|
1000
997
|
} else {
|
|
1001
|
-
let
|
|
1002
|
-
const
|
|
1003
|
-
for (const
|
|
1004
|
-
|
|
1005
|
-
this.callbacks.setSelected(
|
|
998
|
+
let O = s.options.map((y) => y.id).filter((y) => y !== void 0);
|
|
999
|
+
const C = E.concat(O);
|
|
1000
|
+
for (const y of s.options)
|
|
1001
|
+
y.id && !this.store.getOptionByID(y.id) && this.callbacks.addOption(new v(y));
|
|
1002
|
+
this.callbacks.setSelected(C, !0);
|
|
1006
1003
|
return;
|
|
1007
1004
|
}
|
|
1008
1005
|
}), a.appendChild(c);
|
|
@@ -1019,9 +1016,9 @@ class be {
|
|
|
1019
1016
|
}
|
|
1020
1017
|
i.appendChild(l);
|
|
1021
1018
|
for (const c of s.options)
|
|
1022
|
-
i.appendChild(this.option(new
|
|
1019
|
+
i.appendChild(this.option(new v(c))), t.appendChild(i);
|
|
1023
1020
|
}
|
|
1024
|
-
s instanceof
|
|
1021
|
+
s instanceof v && t.appendChild(this.option(s));
|
|
1025
1022
|
}
|
|
1026
1023
|
this.content.list.appendChild(t);
|
|
1027
1024
|
}
|
|
@@ -1041,7 +1038,7 @@ class be {
|
|
|
1041
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) => {
|
|
1042
1039
|
s.preventDefault(), s.stopPropagation();
|
|
1043
1040
|
const i = this.store.getSelected(), l = s.currentTarget, r = String(l.dataset.id), a = s.ctrlKey || s.metaKey;
|
|
1044
|
-
if (e.disabled || !this.settings.isMultiple && e.selected && !this.settings.allowDeselect || this.settings.isMultiple && this.settings.maxSelected <= i.length && !e.selected || this.settings.isMultiple && this.settings.minSelected >= i.length && e.selected && !a)
|
|
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)
|
|
1045
1042
|
return;
|
|
1046
1043
|
let c = !1;
|
|
1047
1044
|
const h = this.store.getSelectedOptions();
|
|
@@ -1049,9 +1046,9 @@ class be {
|
|
|
1049
1046
|
if (this.settings.isMultiple) {
|
|
1050
1047
|
const d = h.some((f) => f.id === r);
|
|
1051
1048
|
if (s.shiftKey && this.lastSelectedOption) {
|
|
1052
|
-
const f = this.store.getDataOptions(),
|
|
1053
|
-
if (
|
|
1054
|
-
const
|
|
1049
|
+
const f = this.store.getDataOptions(), S = f.findIndex((O) => O.id === this.lastSelectedOption.id), E = f.findIndex((O) => O.id === e.id);
|
|
1050
|
+
if (S >= 0 && E >= 0) {
|
|
1051
|
+
const O = Math.min(S, E), C = Math.max(S, E), k = f.slice(O, C + 1).filter((R) => !h.find((M) => M.id === R.id));
|
|
1055
1052
|
h.length + k.length <= this.settings.maxSelected ? o = h.concat(k) : o = h;
|
|
1056
1053
|
} else
|
|
1057
1054
|
o = h;
|
|
@@ -1081,10 +1078,10 @@ class be {
|
|
|
1081
1078
|
const h = c.textContent || "", o = new RegExp("(" + l + ")", "i");
|
|
1082
1079
|
if (o.test(h)) {
|
|
1083
1080
|
const d = document.createElement("span");
|
|
1084
|
-
h.split(o).forEach((f,
|
|
1081
|
+
h.split(o).forEach((f, S) => {
|
|
1085
1082
|
if (f && o.test(f)) {
|
|
1086
|
-
const
|
|
1087
|
-
|
|
1083
|
+
const E = document.createElement("mark");
|
|
1084
|
+
E.className = s, E.textContent = f, d.appendChild(E);
|
|
1088
1085
|
} else f && d.appendChild(document.createTextNode(f));
|
|
1089
1086
|
}), c.parentNode?.replaceChild(d, c);
|
|
1090
1087
|
}
|
|
@@ -1119,16 +1116,21 @@ class be {
|
|
|
1119
1116
|
i && !(s && !t) ? l.classList.remove(r) : l.classList.add(r);
|
|
1120
1117
|
}
|
|
1121
1118
|
}
|
|
1122
|
-
class
|
|
1119
|
+
class be {
|
|
1123
1120
|
select;
|
|
1124
1121
|
// Mutation observer fields
|
|
1125
1122
|
onValueChange;
|
|
1126
1123
|
onClassChange;
|
|
1127
1124
|
onDisabledChange;
|
|
1128
1125
|
onOptionsChange;
|
|
1126
|
+
onLabelClick;
|
|
1129
1127
|
// Change observers
|
|
1130
1128
|
listen = !1;
|
|
1131
1129
|
observer = null;
|
|
1130
|
+
// Event handlers for preventing native select behavior (especially on iOS Safari)
|
|
1131
|
+
preventNativeSelect = null;
|
|
1132
|
+
preventNativeSelectMousedown = null;
|
|
1133
|
+
preventNativeSelectFocus = null;
|
|
1132
1134
|
constructor(e) {
|
|
1133
1135
|
this.select = e, this.valueChange = this.valueChange.bind(this), this.select.addEventListener("change", this.valueChange, {
|
|
1134
1136
|
// allow bubbling of event
|
|
@@ -1142,10 +1144,16 @@ class ve {
|
|
|
1142
1144
|
this.select.disabled = !0;
|
|
1143
1145
|
}
|
|
1144
1146
|
hideUI() {
|
|
1145
|
-
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")
|
|
1147
|
+
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) => {
|
|
1148
|
+
e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
|
|
1149
|
+
}, this.preventNativeSelectMousedown = (e) => {
|
|
1150
|
+
e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
|
|
1151
|
+
}, this.preventNativeSelectFocus = (e) => {
|
|
1152
|
+
e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
|
|
1153
|
+
}, 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 }));
|
|
1146
1154
|
}
|
|
1147
1155
|
showUI() {
|
|
1148
|
-
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");
|
|
1156
|
+
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);
|
|
1149
1157
|
}
|
|
1150
1158
|
changeListen(e) {
|
|
1151
1159
|
this.listen = e, e && this.observer && this.observer.observe(this.select, {
|
|
@@ -1291,7 +1299,7 @@ class ve {
|
|
|
1291
1299
|
updateOptions(e) {
|
|
1292
1300
|
this.changeListen(!1), this.select.innerHTML = "";
|
|
1293
1301
|
for (const t of e)
|
|
1294
|
-
t instanceof
|
|
1302
|
+
t instanceof L && this.select.appendChild(this.createOptgroup(t)), t instanceof v && this.select.appendChild(this.createOption(t));
|
|
1295
1303
|
this.select.dispatchEvent(new Event("change", { bubbles: !0 })), this.changeListen(!0);
|
|
1296
1304
|
}
|
|
1297
1305
|
createOptgroup(e) {
|
|
@@ -1309,8 +1317,48 @@ class ve {
|
|
|
1309
1317
|
t.setAttribute("data-" + me(s), e.data[s]);
|
|
1310
1318
|
}), t;
|
|
1311
1319
|
}
|
|
1320
|
+
// Find and handle labels associated with this select
|
|
1321
|
+
setupLabelHandlers() {
|
|
1322
|
+
const e = [], t = this.select.id;
|
|
1323
|
+
t && document.querySelectorAll(`label[for="${t}"]`).forEach((r) => e.push(r));
|
|
1324
|
+
let s = this.select.parentElement;
|
|
1325
|
+
for (; s && s !== document.body; ) {
|
|
1326
|
+
if (s.tagName === "LABEL") {
|
|
1327
|
+
e.push(s);
|
|
1328
|
+
break;
|
|
1329
|
+
}
|
|
1330
|
+
s = s.parentElement;
|
|
1331
|
+
}
|
|
1332
|
+
Array.from(new Set(e)).forEach((l) => {
|
|
1333
|
+
if (l.__slimSelectLabelHandler)
|
|
1334
|
+
return;
|
|
1335
|
+
const r = (a) => {
|
|
1336
|
+
a.preventDefault(), a.stopPropagation(), this.onLabelClick && setTimeout(() => {
|
|
1337
|
+
this.onLabelClick();
|
|
1338
|
+
}, 0);
|
|
1339
|
+
};
|
|
1340
|
+
l.__slimSelectLabelHandler = r, l.addEventListener("click", r, { capture: !0, passive: !1 });
|
|
1341
|
+
});
|
|
1342
|
+
}
|
|
1343
|
+
// Remove label handlers
|
|
1344
|
+
removeLabelHandlers() {
|
|
1345
|
+
const e = [], t = this.select.id;
|
|
1346
|
+
t && document.querySelectorAll(`label[for="${t}"]`).forEach((r) => e.push(r));
|
|
1347
|
+
let s = this.select.parentElement;
|
|
1348
|
+
for (; s && s !== document.body; ) {
|
|
1349
|
+
if (s.tagName === "LABEL") {
|
|
1350
|
+
e.push(s);
|
|
1351
|
+
break;
|
|
1352
|
+
}
|
|
1353
|
+
s = s.parentElement;
|
|
1354
|
+
}
|
|
1355
|
+
Array.from(new Set(e)).forEach((l) => {
|
|
1356
|
+
const r = l.__slimSelectLabelHandler;
|
|
1357
|
+
r && (l.removeEventListener("click", r, { capture: !0 }), delete l.__slimSelectLabelHandler);
|
|
1358
|
+
});
|
|
1359
|
+
}
|
|
1312
1360
|
destroy() {
|
|
1313
|
-
this.changeListen(!1), this.select.removeEventListener("change", this.valueChange), this.observer && (this.observer.disconnect(), this.observer = null), delete this.select.dataset.id, this.showUI();
|
|
1361
|
+
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();
|
|
1314
1362
|
}
|
|
1315
1363
|
}
|
|
1316
1364
|
class we {
|
|
@@ -1351,10 +1399,10 @@ class we {
|
|
|
1351
1399
|
maxValuesMessage;
|
|
1352
1400
|
addableText;
|
|
1353
1401
|
constructor(e) {
|
|
1354
|
-
e || (e = {}), this.id = "ss-" +
|
|
1402
|
+
e || (e = {}), this.id = "ss-" + U(), 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}';
|
|
1355
1403
|
}
|
|
1356
1404
|
}
|
|
1357
|
-
let
|
|
1405
|
+
let Se = class {
|
|
1358
1406
|
selectEl;
|
|
1359
1407
|
// Classes
|
|
1360
1408
|
settings;
|
|
@@ -1389,8 +1437,8 @@ let Oe = class {
|
|
|
1389
1437
|
this.selectEl.dataset.ssid && this.destroy(), this.settings = new we(e.settings), this.cssClasses = new fe(e.cssClasses);
|
|
1390
1438
|
const t = ["beforeOpen", "afterOpen", "beforeClose", "afterClose"];
|
|
1391
1439
|
for (const a in e.events)
|
|
1392
|
-
e.events.hasOwnProperty(a) && (t.indexOf(a) !== -1 ? this.events[a] =
|
|
1393
|
-
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
|
|
1440
|
+
e.events.hasOwnProperty(a) && (t.indexOf(a) !== -1 ? this.events[a] = P(e.events[a], 100) : this.events[a] = e.events[a]);
|
|
1441
|
+
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) => {
|
|
1394
1442
|
this.setSelected(a.map((c) => c.id));
|
|
1395
1443
|
}, this.select.onClassChange = (a) => {
|
|
1396
1444
|
this.settings.class = a, this.render.updateClassStyles();
|
|
@@ -1398,6 +1446,8 @@ let Oe = class {
|
|
|
1398
1446
|
a ? this.disable() : this.enable();
|
|
1399
1447
|
}, this.select.onOptionsChange = (a) => {
|
|
1400
1448
|
this.setData(a);
|
|
1449
|
+
}, this.select.onLabelClick = () => {
|
|
1450
|
+
this.settings.disabled || this.open();
|
|
1401
1451
|
};
|
|
1402
1452
|
const s = e.data ? e.data : this.select.getData();
|
|
1403
1453
|
this.store = new ge(this.settings.isMultiple ? "multiple" : "single", s), e.data && this.select.updateOptions(this.store.getData());
|
|
@@ -1411,9 +1461,9 @@ let Oe = class {
|
|
|
1411
1461
|
beforeChange: this.events.beforeChange,
|
|
1412
1462
|
afterChange: this.events.afterChange
|
|
1413
1463
|
};
|
|
1414
|
-
this.render = new
|
|
1464
|
+
this.render = new ve(this.settings, this.cssClasses, this.store, i), this.render.renderValues(), this.render.renderOptions(this.store.getData());
|
|
1415
1465
|
const l = this.selectEl.getAttribute("aria-label"), r = this.selectEl.getAttribute("aria-labelledby");
|
|
1416
|
-
l ? this.render.main.main.setAttribute("aria-label", l) : 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.selectEl.slim = this;
|
|
1466
|
+
l ? this.render.main.main.setAttribute("aria-label", l) : 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;
|
|
1417
1467
|
}
|
|
1418
1468
|
// Set to enabled and remove disabled classes
|
|
1419
1469
|
enable() {
|
|
@@ -1434,7 +1484,7 @@ let Oe = class {
|
|
|
1434
1484
|
}
|
|
1435
1485
|
this.store.setData(e);
|
|
1436
1486
|
const i = this.store.getData();
|
|
1437
|
-
this.select.updateOptions(i), this.render.renderValues(), this.render.renderOptions(i), this.events.afterChange && !
|
|
1487
|
+
this.select.updateOptions(i), this.render.renderValues(), this.render.renderOptions(i), this.events.afterChange && !q(t, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
|
|
1438
1488
|
}
|
|
1439
1489
|
getSelected() {
|
|
1440
1490
|
let e = this.store.getSelectedOptions();
|
|
@@ -1455,13 +1505,13 @@ let Oe = class {
|
|
|
1455
1505
|
}
|
|
1456
1506
|
this.store.setSelectedBy("id", l);
|
|
1457
1507
|
const r = this.store.getData();
|
|
1458
|
-
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 && !
|
|
1508
|
+
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 && !q(s, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
|
|
1459
1509
|
}
|
|
1460
1510
|
addOption(e) {
|
|
1461
1511
|
const t = this.store.getSelected();
|
|
1462
1512
|
this.store.getDataOptions().some((i) => i.value === (e.value ?? e.text)) || this.store.addOption(e);
|
|
1463
1513
|
const s = this.store.getData();
|
|
1464
|
-
this.select.updateOptions(s), this.render.renderValues(), this.render.renderOptions(s), this.events.afterChange && !
|
|
1514
|
+
this.select.updateOptions(s), this.render.renderValues(), this.render.renderOptions(s), this.events.afterChange && !q(t, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
|
|
1465
1515
|
}
|
|
1466
1516
|
open() {
|
|
1467
1517
|
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(() => {
|
|
@@ -1469,13 +1519,17 @@ let Oe = class {
|
|
|
1469
1519
|
}, this.settings.timeoutDelay), this.settings.contentPosition === "absolute" && (this.settings.intervalMove && clearInterval(this.settings.intervalMove), this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500)));
|
|
1470
1520
|
}
|
|
1471
1521
|
close(e = null) {
|
|
1472
|
-
!this.settings.isOpen || this.settings.alwaysOpen || (this.events.beforeClose && this.events.beforeClose(), this.render.close(), this.render.
|
|
1522
|
+
!this.settings.isOpen || this.settings.alwaysOpen || (this.events.beforeClose && this.events.beforeClose(), this.render.close(), this.render.content.search.input.value !== "" && this.search(""), this.render.mainFocus(e), this.settings.isOpen = !1, this.settings.isFullOpen = !1, this.closeTimeout = setTimeout(() => {
|
|
1473
1523
|
this.events.afterClose && this.events.afterClose(), document.removeEventListener("click", this.documentClick);
|
|
1474
1524
|
}, this.settings.timeoutDelay), this.settings.intervalMove && clearInterval(this.settings.intervalMove));
|
|
1475
1525
|
}
|
|
1476
1526
|
// Take in string value and search current options
|
|
1477
1527
|
search(e) {
|
|
1478
|
-
if (this.render.content.search.input.value !== e && (this.render.content.search.input.value = e),
|
|
1528
|
+
if (this.render.content.search.input.value !== e && (this.render.content.search.input.value = e), e === "") {
|
|
1529
|
+
this.render.renderOptions(this.store.getData());
|
|
1530
|
+
return;
|
|
1531
|
+
}
|
|
1532
|
+
if (!this.events.search) {
|
|
1479
1533
|
const s = e === "" ? this.store.getData() : this.store.search(e, this.events.searchFilter);
|
|
1480
1534
|
this.render.renderOptions(s);
|
|
1481
1535
|
return;
|
|
@@ -1494,11 +1548,11 @@ let Oe = class {
|
|
|
1494
1548
|
destroy() {
|
|
1495
1549
|
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();
|
|
1496
1550
|
}
|
|
1497
|
-
windowResize =
|
|
1551
|
+
windowResize = P(() => {
|
|
1498
1552
|
!this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
|
|
1499
1553
|
});
|
|
1500
1554
|
// Event listener for window scrolling
|
|
1501
|
-
windowScroll =
|
|
1555
|
+
windowScroll = P(() => {
|
|
1502
1556
|
!this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
|
|
1503
1557
|
});
|
|
1504
1558
|
// Event listener for document click
|
|
@@ -1510,9 +1564,9 @@ let Oe = class {
|
|
|
1510
1564
|
document.hidden && this.close();
|
|
1511
1565
|
};
|
|
1512
1566
|
};
|
|
1513
|
-
const
|
|
1567
|
+
const Oe = re(
|
|
1514
1568
|
({ data: p, settings: e, events: t, cssClasses: s, value: i, onChange: l, children: r, multiple: a }, c) => {
|
|
1515
|
-
const h =
|
|
1569
|
+
const h = V(null), o = V(null), d = V(!0);
|
|
1516
1570
|
return oe(c, () => ({
|
|
1517
1571
|
slimSelect: o.current
|
|
1518
1572
|
})), j(() => {
|
|
@@ -1524,11 +1578,11 @@ const Se = re(
|
|
|
1524
1578
|
const f = t?.afterChange;
|
|
1525
1579
|
return m.events = {
|
|
1526
1580
|
...t,
|
|
1527
|
-
afterChange: (
|
|
1528
|
-
const
|
|
1529
|
-
l && l(
|
|
1581
|
+
afterChange: (S) => {
|
|
1582
|
+
const E = a ? S.map((O) => O.value) : S[0]?.value ?? "";
|
|
1583
|
+
l && l(E), f && f(S);
|
|
1530
1584
|
}
|
|
1531
|
-
}, o.current = new
|
|
1585
|
+
}, o.current = new Se(m), i !== void 0 && o.current.setSelected(i, !1), () => {
|
|
1532
1586
|
o.current && (o.current.destroy(), o.current = null);
|
|
1533
1587
|
};
|
|
1534
1588
|
}, []), j(() => {
|
|
@@ -1542,10 +1596,10 @@ const Se = re(
|
|
|
1542
1596
|
}, [p]), /* @__PURE__ */ ue.jsx("select", { ref: h, multiple: a, children: r });
|
|
1543
1597
|
}
|
|
1544
1598
|
);
|
|
1545
|
-
|
|
1599
|
+
Oe.displayName = "SlimSelect";
|
|
1546
1600
|
export {
|
|
1547
|
-
|
|
1548
|
-
|
|
1601
|
+
L as Optgroup,
|
|
1602
|
+
v as Option,
|
|
1549
1603
|
we as Settings,
|
|
1550
|
-
|
|
1604
|
+
Oe as default
|
|
1551
1605
|
};
|