@jblehm/super-list 1.0.16 → 1.0.17
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 +1 -1
- package/dist/index.css +1 -1
- package/dist/super-list.js +104 -101
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
# superlist V1.0.
|
|
1
|
+
# superlist V1.0.17
|
|
2
2
|
An un-styled text searchable combobox for Vue.
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.list-filter-text-input[data-v-0a7e1379]{color:var(--superlist-text-colour, rgb(17, 24, 39));text-align:center;padding:.125rem 2rem .125rem .5rem!important;width:100%;height:100%;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;border:0 none;pointer-events:auto;cursor:text}.list-filter-text-input[data-v-0a7e1379]:focus,.list-filter-text-input[data-v-0a7e1379]:focus-visible,.list-filter-text-input[data-v-0a7e1379]:active{text-align:left}.click-through[data-v-0a7e1379]{pointer-events:none}.dark-placeholder-text[data-v-0a7e1379]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-0a7e1379]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-0a7e1379]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-0a7e1379]{font-size:.875rem;line-height:1.5rem}}.list-option[data-v-f1a723a6]{text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-text-colour, rgb(55, 60, 65));transition-property:font-weight,background-color,color,text-shadow;transition-duration:.5s;transition-timing-function:ease;font-weight:400;text-shadow:1px 1px 3px var(--superlist-background-colour, white)}.list-option[data-v-f1a723a6]:focus-visible,.list-option>span[data-v-f1a723a6]:focus-visible{outline:none}.list-option-selected[data-v-f1a723a6]{font-weight:600}.list-option-message[data-v-f1a723a6]{text-shadow:1px 1px 3px var(--superlist-background-colour, white);text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.list-option-active[data-v-f1a723a6]:hover,.list-option-active[data-v-f1a723a6],.list-option-selected[data-v-f1a723a6]:hover,.list-option[data-v-f1a723a6]:hover{font-weight:600;background-color:var(--superlist-theme-colour, rgb(77, 168, 11, .8));color:var(--superlist-background-colour, white);text-shadow:1px 1px 3px var(--superlist-theme-colour, rgb(77, 168, 11, .8));transition-duration:0s!important}.list-item-icon[data-v-f1a723a6]{display:flex;height:1rem;width:1rem;position:absolute;right:.7rem;margin-top:-.1rem;align-self:center}.list-item-span[data-v-f1a723a6]{padding:.5rem 1.75rem .5rem .75rem;width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-normal[data-v-
|
|
1
|
+
.list-filter-text-input[data-v-0a7e1379]{color:var(--superlist-text-colour, rgb(17, 24, 39));text-align:center;padding:.125rem 2rem .125rem .5rem!important;width:100%;height:100%;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;border:0 none;pointer-events:auto;cursor:text}.list-filter-text-input[data-v-0a7e1379]:focus,.list-filter-text-input[data-v-0a7e1379]:focus-visible,.list-filter-text-input[data-v-0a7e1379]:active{text-align:left}.click-through[data-v-0a7e1379]{pointer-events:none}.dark-placeholder-text[data-v-0a7e1379]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-0a7e1379]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-0a7e1379]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-0a7e1379]{font-size:.875rem;line-height:1.5rem}}.list-option[data-v-f1a723a6]{text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-text-colour, rgb(55, 60, 65));transition-property:font-weight,background-color,color,text-shadow;transition-duration:.5s;transition-timing-function:ease;font-weight:400;text-shadow:1px 1px 3px var(--superlist-background-colour, white)}.list-option[data-v-f1a723a6]:focus-visible,.list-option>span[data-v-f1a723a6]:focus-visible{outline:none}.list-option-selected[data-v-f1a723a6]{font-weight:600}.list-option-message[data-v-f1a723a6]{text-shadow:1px 1px 3px var(--superlist-background-colour, white);text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.list-option-active[data-v-f1a723a6]:hover,.list-option-active[data-v-f1a723a6],.list-option-selected[data-v-f1a723a6]:hover,.list-option[data-v-f1a723a6]:hover{font-weight:600;background-color:var(--superlist-theme-colour, rgb(77, 168, 11, .8));color:var(--superlist-background-colour, white);text-shadow:1px 1px 3px var(--superlist-theme-colour, rgb(77, 168, 11, .8));transition-duration:0s!important}.list-item-icon[data-v-f1a723a6]{display:flex;height:1rem;width:1rem;position:absolute;right:.7rem;margin-top:-.1rem;align-self:center}.list-item-span[data-v-f1a723a6]{padding:.5rem 1.75rem .5rem .75rem;width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-normal[data-v-3718a5aa]{top:var(--parent-y)}.list-reverse[data-v-3718a5aa]{bottom:var(--parent-y)}.select-list[data-v-3718a5aa]{--parent-width: var(--03128522);--parent-x: var(--1fdf57be);--parent-y: var(--1fdf503c);--duration: var(--2fda0ec3);--border-radius: var(--superlist-list-border-radius, 0);border-radius:var(--border-radius);width:var(--parent-width);min-width:var(--parent-width);left:var(--parent-x);display:block;transition-property:max-height,opacity,visibility;transition-duration:var(--duration, .3s);transition-timing-function:cubic-bezier(.1,.9,.35,.98);position:absolute;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background-color:#ffffffb3;align-items:baseline;opacity:.25;z-index:999;visibility:collapse;overflow:auto;max-height:0;border:none!important}.select-list[data-v-3718a5aa]:focus-visible,.select-list>ul[data-v-3718a5aa]:focus-visible,.super-list-button-container[data-v-3718a5aa]:focus-visible{outline:none}.super-list-button-container[data-v-3718a5aa]{height:100%;width:100%}.select-list.select-list-open[data-v-3718a5aa]{z-index:999999;--max-height: var(--9c0b17c8);max-height:var(--max-height, 0)}.select-list.no-scroll[data-v-3718a5aa]{overflow:hidden}.select-list-fixed[data-v-3718a5aa]{position:fixed;opacity:1;visibility:visible}.list-content[data-v-3718a5aa]{--duration: var(--2fda0ec3);overflow:visible;margin:0;padding:0;border-style:none;color:var(--superlist-text-colour, rgb(55, 60, 65));list-style:none;max-width:100%}.select-list.select-list-scrollable[data-v-3718a5aa]{border-radius:var(--border-radius)}@media (min-width: 640px){.select-list.select-list-scrollable[data-v-3718a5aa]{border-radius:var(--border-radius) 0 0 var(--border-radius)}.list-content[data-v-3718a5aa]{font-size:.875rem;line-height:1.25rem}}.list-button-icon[data-v-01ef8e37]{display:flex;transition-timing-function:ease-in-out;transition-duration:.2s;transition-property:transform;width:.6rem;transform:rotate(0);color:var(--superlist-text-colour, rgb(17, 24, 39));justify-content:center;max-height:18%}.list-button-icon.custom-icon[data-v-01ef8e37]{max-height:100%;width:1.25rem}.list-button-icon.rotate-180[data-v-01ef8e37]{transform:rotate(180deg)}.list-button[data-v-01ef8e37]{position:relative;padding:0;margin:0;width:100%;max-height:100%;height:100%;background-color:var(--superlist-background-colour, white);align-items:center;pointer-events:auto;cursor:pointer}.list-button[data-v-01ef8e37]:focus,.list-button[data-v-01ef8e37]:focus-visible,.list-button[data-v-01ef8e37]:active{text-align:left}.list-button-icon-div[data-v-01ef8e37]{pointer-events:none;position:absolute;top:0;bottom:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-right:.75rem;max-height:100%;height:100%;gap:max(.15rem,calc(6.25% + .075rem));transition:gap .2s}.list-button-icon-div.bigger-gap[data-v-01ef8e37]{gap:calc(40% - .25rem)}.click-through[data-v-01ef8e37]{pointer-events:none}[data-v-e1f079fa]{box-sizing:border-box}
|
package/dist/super-list.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as Y, ref as f, computed as O, openBlock as x, createElementBlock as M, withKeys as m, normalizeClass as R, createElementVNode as N, useTemplateRef as Ee, watch as F, Fragment as de, renderList as Ae, withModifiers as te, toDisplayString as ve, createBlock as ce, createCommentVNode as $, useCssVars as Fe, onMounted as we, onUnmounted as Se, renderSlot as Le, createVNode as Z, nextTick as Ne, resolveDynamicComponent as Be, withCtx as me } from "vue";
|
|
2
2
|
import './index.css';class He {
|
|
3
3
|
eventsTypes = ["resize", "load", "scroll", "wheel", "touchmove"];
|
|
4
4
|
config = {
|
|
@@ -79,7 +79,7 @@ class qe {
|
|
|
79
79
|
return this.abort("New Request From Controller."), this.setFunc(i), this.setThen(a), this.execute();
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
|
-
const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */
|
|
82
|
+
const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Y({
|
|
83
83
|
__name: "ListTextInput",
|
|
84
84
|
props: {
|
|
85
85
|
enableTextFilter: {
|
|
@@ -178,7 +178,7 @@ function ze(e, i) {
|
|
|
178
178
|
}, null, -1)
|
|
179
179
|
]));
|
|
180
180
|
}
|
|
181
|
-
const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = { class: "list-item-span" }, We = { class: "list-item-span" }, Qe = /* @__PURE__ */
|
|
181
|
+
const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = { class: "list-item-span" }, We = { class: "list-item-span" }, Qe = /* @__PURE__ */ Y({
|
|
182
182
|
__name: "ListItem",
|
|
183
183
|
props: {
|
|
184
184
|
mouseHoveringOnList: {
|
|
@@ -309,7 +309,7 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
309
309
|
], 32)) : $("", !0)
|
|
310
310
|
], 64));
|
|
311
311
|
}
|
|
312
|
-
}), Ze = /* @__PURE__ */ K(Qe, [["__scopeId", "data-v-f1a723a6"]]), Ye = /* @__PURE__ */
|
|
312
|
+
}), Ze = /* @__PURE__ */ K(Qe, [["__scopeId", "data-v-f1a723a6"]]), Ye = /* @__PURE__ */ Y({
|
|
313
313
|
__name: "ItemList",
|
|
314
314
|
props: {
|
|
315
315
|
mouseHoveringOnList: {
|
|
@@ -363,25 +363,25 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
363
363
|
},
|
|
364
364
|
emits: ["reverseDropDownList"],
|
|
365
365
|
setup(e, { expose: i, emit: a }) {
|
|
366
|
-
Fe((
|
|
367
|
-
"
|
|
368
|
-
"
|
|
369
|
-
"
|
|
370
|
-
"
|
|
371
|
-
|
|
366
|
+
Fe((r) => ({
|
|
367
|
+
"03128522": k.value,
|
|
368
|
+
"1fdf57be": S.value,
|
|
369
|
+
"1fdf503c": ne.value,
|
|
370
|
+
"2fda0ec3": q.value,
|
|
371
|
+
"9c0b17c8": G.value
|
|
372
372
|
}));
|
|
373
|
-
const v = a, o = e, d = f(null), w = f(null), t = f(null), s = f(0), c = f(0), l = f(0), y = f(0), k = f("0px"), I = f(!1), g = f([]), b = f(0), h = O(() => !I.value || window?.innerHeight == null ? !1 :
|
|
373
|
+
const v = a, o = e, d = f(null), w = f(null), t = f(null), s = f(0), c = f(0), l = f(0), y = f(0), k = f("0px"), I = f(!1), g = f([]), b = f(0), h = O(() => !I.value || window?.innerHeight == null ? !1 : U() && se()), V = O(() => o.maxListHeightPX >= b.value);
|
|
374
374
|
F(
|
|
375
375
|
() => h.value,
|
|
376
|
-
(
|
|
376
|
+
(r) => v("reverseDropDownList", r),
|
|
377
377
|
{ immediate: !0 }
|
|
378
378
|
);
|
|
379
379
|
const S = O(() => s.value + "px"), ne = O(() => y.value + "px");
|
|
380
380
|
i({ listContainerRef: t });
|
|
381
|
-
const P = (
|
|
382
|
-
|
|
383
|
-
}, oe = (
|
|
384
|
-
const L = t?.value, D =
|
|
381
|
+
const P = (r) => {
|
|
382
|
+
r?.key && r.key === " " && r.preventDefault();
|
|
383
|
+
}, oe = (r) => {
|
|
384
|
+
const L = t?.value, D = r.target;
|
|
385
385
|
(!(L && D && L.contains(D)) || L.isEqualNode(D)) && o.parentMethods.focusInput();
|
|
386
386
|
};
|
|
387
387
|
function B() {
|
|
@@ -389,20 +389,20 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
389
389
|
}
|
|
390
390
|
function E() {
|
|
391
391
|
if (!o.showDropDown || B() === 0) return o.maxListHeightPX;
|
|
392
|
-
const
|
|
393
|
-
return o.maxListHeightPX && o.maxListHeightPX >
|
|
392
|
+
const r = B() === 0 ? o.maxListHeightPX : +B();
|
|
393
|
+
return o.maxListHeightPX && o.maxListHeightPX > r ? r : o.maxListHeightPX;
|
|
394
394
|
}
|
|
395
|
-
function
|
|
395
|
+
function U() {
|
|
396
396
|
return c.value > E();
|
|
397
397
|
}
|
|
398
398
|
function se() {
|
|
399
399
|
return l.value < E();
|
|
400
400
|
}
|
|
401
|
-
const
|
|
401
|
+
const G = O(() => (o.maxListHeightPX || 0) + "px"), q = O(() => (o.listAnimationDurationMs || 0) + "ms"), _ = O(() => o.blockListChange ? g.value : o.filteredListItems);
|
|
402
402
|
F(
|
|
403
|
-
() =>
|
|
404
|
-
(
|
|
405
|
-
|
|
403
|
+
() => _,
|
|
404
|
+
(r) => {
|
|
405
|
+
r && (g.value = r.value);
|
|
406
406
|
},
|
|
407
407
|
{ immediate: !1, deep: !0 }
|
|
408
408
|
);
|
|
@@ -418,51 +418,54 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
418
418
|
}
|
|
419
419
|
F(
|
|
420
420
|
() => o.showDropDown,
|
|
421
|
-
(
|
|
422
|
-
|
|
421
|
+
(r, L) => {
|
|
422
|
+
r !== L && (r ? j() : ie());
|
|
423
423
|
},
|
|
424
424
|
{ immediate: !0 }
|
|
425
425
|
);
|
|
426
|
-
function z(
|
|
427
|
-
|
|
426
|
+
function z(r) {
|
|
427
|
+
J(), Ne(() => J()), ee(r);
|
|
428
428
|
}
|
|
429
|
-
function
|
|
430
|
-
if (!o.enableScrollClose || !
|
|
431
|
-
const L = ["scroll", "wheel", "touchmove"].includes(
|
|
432
|
-
|
|
429
|
+
function ee(r) {
|
|
430
|
+
if (!o.enableScrollClose || !r?.target || typeof t?.value?.contains != "function" || r?.target?.nodeType == null) return;
|
|
431
|
+
const L = ["scroll", "wheel", "touchmove"].includes(r?.type);
|
|
432
|
+
if ([r?.srcElement?.id, r?.target?.id].includes("super-list-select-list")) return;
|
|
433
|
+
const X = !t.value.contains(r.target);
|
|
434
|
+
o.showDropDown && L && X && o.parentMethods.closeList();
|
|
433
435
|
}
|
|
434
|
-
function
|
|
435
|
-
le(),
|
|
436
|
+
function J() {
|
|
437
|
+
le(), W();
|
|
436
438
|
}
|
|
437
439
|
function le() {
|
|
438
440
|
if (d?.value == null) return;
|
|
439
|
-
const
|
|
440
|
-
c.value =
|
|
441
|
+
const r = d.value.getBoundingClientRect();
|
|
442
|
+
c.value = r.top, l.value = window.innerHeight - r.bottom, k.value = r.width + "px";
|
|
441
443
|
}
|
|
442
|
-
function
|
|
444
|
+
function W() {
|
|
443
445
|
if (d?.value == null || t?.value == null) return;
|
|
444
|
-
const
|
|
445
|
-
h.value ? y.value = D - (
|
|
446
|
+
const r = re().getBoundingClientRect(), L = t.value.getBoundingClientRect(), D = y.value, X = s.value;
|
|
447
|
+
h.value ? y.value = D - (r.top - L.bottom) : y.value = D - (L.top - r.bottom), s.value = X - (L.left - r.left);
|
|
446
448
|
}
|
|
447
|
-
function
|
|
449
|
+
function Q() {
|
|
448
450
|
return (d?.value).getElementsByTagName("button")[0];
|
|
449
451
|
}
|
|
450
452
|
function re() {
|
|
451
453
|
return d?.value;
|
|
452
454
|
}
|
|
453
455
|
return we(() => {
|
|
454
|
-
A = new He(z,
|
|
456
|
+
A = new He(z, Q()), setTimeout(() => z(void 0), 250);
|
|
455
457
|
}), Se(() => {
|
|
456
458
|
A?.unobserve();
|
|
457
|
-
}), (
|
|
459
|
+
}), (r, L) => (x(), M(de, null, [
|
|
458
460
|
N("div", {
|
|
459
461
|
ref_key: "dropDownButtonContainer",
|
|
460
462
|
ref: d,
|
|
461
463
|
class: "super-list-button-container"
|
|
462
464
|
}, [
|
|
463
|
-
Le(
|
|
465
|
+
Le(r.$slots, "default", {}, void 0, !0)
|
|
464
466
|
], 512),
|
|
465
467
|
N("div", {
|
|
468
|
+
id: "super-list-select-list",
|
|
466
469
|
ref_key: "listContainerRef",
|
|
467
470
|
ref: t,
|
|
468
471
|
onMouseenter: L[0] || (L[0] = (D) => e.parentMethods.mouseOverList()),
|
|
@@ -484,7 +487,7 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
484
487
|
ref: w,
|
|
485
488
|
class: "list-content"
|
|
486
489
|
}, [
|
|
487
|
-
|
|
490
|
+
Z(Ze, {
|
|
488
491
|
filteredListItems: g.value,
|
|
489
492
|
mouseHoveringOnList: e.mouseHoveringOnList,
|
|
490
493
|
focusedIndex: e.focusedIndex,
|
|
@@ -498,7 +501,7 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
498
501
|
], 34)
|
|
499
502
|
], 64));
|
|
500
503
|
}
|
|
501
|
-
}), he = /* @__PURE__ */ K(Ye, [["__scopeId", "data-v-
|
|
504
|
+
}), he = /* @__PURE__ */ K(Ye, [["__scopeId", "data-v-3718a5aa"]]), Ge = {}, _e = {
|
|
502
505
|
xmlns: "http://www.w3.org/2000/svg",
|
|
503
506
|
fill: "currentColor",
|
|
504
507
|
"aria-hidden": "true",
|
|
@@ -516,7 +519,7 @@ function et(e, i) {
|
|
|
516
519
|
const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
517
520
|
key: 2,
|
|
518
521
|
class: "list-button-icon custom-icon"
|
|
519
|
-
}, ot = /* @__PURE__ */
|
|
522
|
+
}, ot = /* @__PURE__ */ Y({
|
|
520
523
|
__name: "ListButton",
|
|
521
524
|
props: {
|
|
522
525
|
// eslint-disable-line
|
|
@@ -582,7 +585,7 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
582
585
|
key: 0,
|
|
583
586
|
class: R(["list-button-icon", [{ "rotate-180": !a.showDropDown }]])
|
|
584
587
|
}, [
|
|
585
|
-
|
|
588
|
+
Z(ge, { "aria-hidden": "true" })
|
|
586
589
|
], 2)),
|
|
587
590
|
e.customIcon ? $("", !0) : (x(), M("span", {
|
|
588
591
|
key: 1,
|
|
@@ -599,7 +602,7 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
599
602
|
], 2)
|
|
600
603
|
], 42, tt));
|
|
601
604
|
}
|
|
602
|
-
}), ye = /* @__PURE__ */ K(ot, [["__scopeId", "data-v-01ef8e37"]]), st = /* @__PURE__ */
|
|
605
|
+
}), ye = /* @__PURE__ */ K(ot, [["__scopeId", "data-v-01ef8e37"]]), st = /* @__PURE__ */ Y({
|
|
603
606
|
__name: "super-list",
|
|
604
607
|
props: {
|
|
605
608
|
selected: {
|
|
@@ -655,14 +658,14 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
655
658
|
const v = a, o = e, d = f([]), w = new qe(), t = f(0), s = O(() => o.forceTextFilterVisibilityTo != null ? o.forceTextFilterVisibilityTo : t.value > o.maxListOptions), c = f(!1), l = f(!1), y = f(!1), k = f(!0), I = f(!1), g = f(!1), b = f(he), h = f(be), V = f(ye), S = f("");
|
|
656
659
|
F(
|
|
657
660
|
() => S.value,
|
|
658
|
-
(n,
|
|
659
|
-
n !==
|
|
661
|
+
(n, u) => {
|
|
662
|
+
n !== u && typeof o.options == "function" && X(n);
|
|
660
663
|
}
|
|
661
664
|
);
|
|
662
665
|
const ne = () => {
|
|
663
666
|
s.value && h?.value?.blurInput();
|
|
664
667
|
}, P = () => {
|
|
665
|
-
clearTimeout(
|
|
668
|
+
clearTimeout(Q), ne(), S.value = "", c.value = !1, k.value = !0;
|
|
666
669
|
}, oe = O(() => g?.value === !0 ? "Error loading data" : I?.value === !0 ? "Loading..." : E(o.selected)), B = (n) => {
|
|
667
670
|
n && v("update:selected", n), P();
|
|
668
671
|
}, E = (n) => Re(
|
|
@@ -671,23 +674,23 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
671
674
|
o.objectLabelKeyName,
|
|
672
675
|
o.enumKeyToLabelObjectArray
|
|
673
676
|
);
|
|
674
|
-
function
|
|
677
|
+
function U() {
|
|
675
678
|
throw I.value = !0, g.value = !0, new Error("Invalid options argument provided to ListInputComponent");
|
|
676
679
|
}
|
|
677
680
|
function se() {
|
|
678
681
|
throw I.value = !0, g.value = !0, new Error("Invalid response provided to ListInputComponent, no total count key found");
|
|
679
682
|
}
|
|
680
|
-
function
|
|
683
|
+
function G() {
|
|
681
684
|
throw I.value = !0, g.value = !0, new Error("Invalid objectLabelKeyName for provided Dropdown list value.");
|
|
682
685
|
}
|
|
683
686
|
we(() => {
|
|
684
|
-
typeof o.options != "function" && !Array.isArray(o.options) ?
|
|
687
|
+
typeof o.options != "function" && !Array.isArray(o.options) ? U() : L();
|
|
685
688
|
});
|
|
686
|
-
const q = f(!1),
|
|
689
|
+
const q = f(!1), _ = f(0), C = f(0), A = f(0);
|
|
687
690
|
F(
|
|
688
691
|
() => C.value,
|
|
689
|
-
(n,
|
|
690
|
-
n !=
|
|
692
|
+
(n, u) => {
|
|
693
|
+
n != u && !l.value && (A.value = n);
|
|
691
694
|
},
|
|
692
695
|
{ immediate: !0 }
|
|
693
696
|
), F(
|
|
@@ -699,27 +702,27 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
699
702
|
);
|
|
700
703
|
const j = O(() => {
|
|
701
704
|
if (typeof o.options == "function" && !Array.isArray(o.options)) return d.value;
|
|
702
|
-
const n = S.value,
|
|
703
|
-
return n === "" ?
|
|
705
|
+
const n = S.value, u = d.value;
|
|
706
|
+
return n === "" ? u : u.filter((p) => E(p).toLowerCase().includes(n.toLowerCase()));
|
|
704
707
|
});
|
|
705
708
|
F(
|
|
706
709
|
() => j.value,
|
|
707
|
-
(n,
|
|
708
|
-
JSON.stringify(n) !== JSON.stringify(
|
|
710
|
+
(n, u) => {
|
|
711
|
+
JSON.stringify(n) !== JSON.stringify(u) && z();
|
|
709
712
|
},
|
|
710
713
|
{ immediate: !1, deep: !0 }
|
|
711
714
|
);
|
|
712
715
|
const ie = () => {
|
|
713
716
|
q.value = !0;
|
|
714
717
|
}, z = () => {
|
|
715
|
-
const n =
|
|
716
|
-
|
|
718
|
+
const n = ee();
|
|
719
|
+
_.value = n, C.value = n > -1 ? n : 0;
|
|
717
720
|
};
|
|
718
|
-
function
|
|
721
|
+
function ee() {
|
|
719
722
|
if (o.selected == null) return -1;
|
|
720
|
-
const n = d.value.map((p) => E(p)),
|
|
721
|
-
if (
|
|
722
|
-
const p =
|
|
723
|
+
const n = d.value.map((p) => E(p)), u = n.filter((p) => p === E(o.selected));
|
|
724
|
+
if (u.length > 1) {
|
|
725
|
+
const p = u.map((T) => n.indexOf(T));
|
|
723
726
|
for (let T = 0; T < p.length; T++) {
|
|
724
727
|
const H = JSON.stringify(d.value[p[T]]), ae = JSON.stringify(o.selected);
|
|
725
728
|
if (H === ae) return p[T];
|
|
@@ -728,49 +731,49 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
728
731
|
}
|
|
729
732
|
return n.indexOf(E(o.selected));
|
|
730
733
|
}
|
|
731
|
-
const
|
|
734
|
+
const J = () => {
|
|
732
735
|
I.value || (c.value || (l.value = !1, z(), le(), c.value = !0), q.value = !1, k.value = !1);
|
|
733
736
|
}, le = () => {
|
|
734
|
-
const n = window?.innerWidth != null && window.innerWidth < 640,
|
|
735
|
-
(n ||
|
|
736
|
-
},
|
|
737
|
-
let
|
|
737
|
+
const n = window?.innerWidth != null && window.innerWidth < 640, u = screen?.width != null && screen.width < 640, p = h.value.textInputRef;
|
|
738
|
+
(n || u) && s.value && (re(), p?.scrollIntoView({ block: "start" }));
|
|
739
|
+
}, W = f(!0);
|
|
740
|
+
let Q = setTimeout(() => {
|
|
738
741
|
}, 0);
|
|
739
742
|
function re() {
|
|
740
|
-
h.value.textInputRef && (clearTimeout(
|
|
741
|
-
|
|
743
|
+
h.value.textInputRef && (clearTimeout(Q), W.value = !1, Q = setTimeout(() => {
|
|
744
|
+
W.value = !0;
|
|
742
745
|
}, 300));
|
|
743
746
|
}
|
|
744
|
-
const
|
|
747
|
+
const r = () => {
|
|
745
748
|
s?.value == !0 ? h.value.focusInput() : V?.value?.focusInput && V?.value?.focusInput();
|
|
746
749
|
};
|
|
747
750
|
async function L() {
|
|
748
|
-
typeof o.options == "function" ? await
|
|
751
|
+
typeof o.options == "function" ? await X(S.value ? S.value : void 0, !0) : (pe(o.options), t.value = d.value.length), D();
|
|
749
752
|
}
|
|
750
753
|
i({ initializeOptions: L, getLabel: E });
|
|
751
754
|
function D() {
|
|
752
|
-
|
|
755
|
+
ee() == -1 && d.value && !!d.value[0] && B(d.value[0]);
|
|
753
756
|
}
|
|
754
|
-
async function
|
|
755
|
-
I.value =
|
|
757
|
+
async function X(n, u = !0) {
|
|
758
|
+
I.value = u;
|
|
756
759
|
const p = async () => o.options(o.maxListOptions, n || ""), T = (H) => {
|
|
757
|
-
(!H || !("data" in H)) &&
|
|
760
|
+
(!H || !("data" in H)) && U(), pe(H.data), xe(H?.data?.length ?? 0).then(() => {
|
|
758
761
|
I.value = !1;
|
|
759
762
|
});
|
|
760
763
|
};
|
|
761
764
|
await w.resetAndExecute(p, T);
|
|
762
765
|
}
|
|
763
766
|
async function xe(n) {
|
|
764
|
-
const
|
|
767
|
+
const u = async () => o.options(1, ""), p = (T) => {
|
|
765
768
|
(!T || !("totalNum" in T)) && se(), t.value = T.totalNum ?? n;
|
|
766
769
|
};
|
|
767
|
-
await w.resetAndExecute(
|
|
770
|
+
await w.resetAndExecute(u, p);
|
|
768
771
|
}
|
|
769
772
|
const fe = () => h?.value?.textInputRef?.getElementsByTagName("li")[C.value] ?? null, Ie = (n) => {
|
|
770
|
-
c.value == !1 ?
|
|
773
|
+
c.value == !1 ? J() : n && De(n);
|
|
771
774
|
}, De = (n) => {
|
|
772
|
-
const
|
|
773
|
-
(
|
|
775
|
+
const u = n.key || n.code;
|
|
776
|
+
(u === "Tab" || u === "Escape") && P(), u === "ArrowDown" && Oe(n), u === "ArrowUp" && Me(n), (u === "Enter" || u === " ") && Te(), n.preventDefault(), n.stopPropagation();
|
|
774
777
|
}, Te = () => {
|
|
775
778
|
j.value.length > 0 ? (l.value = !0, B(j.value[C.value])) : P();
|
|
776
779
|
}, Oe = (n) => {
|
|
@@ -780,58 +783,58 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
780
783
|
}, Ce = (n) => {
|
|
781
784
|
if (c?.value === !1) return;
|
|
782
785
|
S.value.length > 0 && (l.value = !0);
|
|
783
|
-
const
|
|
786
|
+
const u = b?.value?.listContainerRef, p = h?.value?.textInputRef, T = n?.relatedTarget && p?.isEqualNode(n?.relatedTarget), H = n?.relatedTarget && u && u.contains(n?.relatedTarget), ae = n?.relatedTarget && u && u.isEqualNode(n?.relatedTarget);
|
|
784
787
|
if (!(H || T)) {
|
|
785
788
|
if (ae) {
|
|
786
|
-
|
|
789
|
+
r();
|
|
787
790
|
return;
|
|
788
791
|
}
|
|
789
792
|
P();
|
|
790
793
|
}
|
|
791
794
|
};
|
|
792
795
|
function pe(n) {
|
|
793
|
-
Array.isArray(n) ||
|
|
796
|
+
Array.isArray(n) || U(), n.length > 0 && typeof n[0] == "object" && ke(n), d.value = n;
|
|
794
797
|
}
|
|
795
798
|
function ke(n) {
|
|
796
|
-
(!o.objectLabelKeyName || o.objectLabelKeyName.length === 0) &&
|
|
797
|
-
const
|
|
799
|
+
(!o.objectLabelKeyName || o.objectLabelKeyName.length === 0) && G();
|
|
800
|
+
const u = o.objectLabelKeyName;
|
|
798
801
|
for (let p = 0; p < n.length; p++)
|
|
799
|
-
(typeof n[p] != "object" || !(
|
|
802
|
+
(typeof n[p] != "object" || !(u in n[p])) && G();
|
|
800
803
|
}
|
|
801
804
|
const ue = {
|
|
802
|
-
openList:
|
|
805
|
+
openList: J,
|
|
803
806
|
unfocus: Ce,
|
|
804
807
|
press: Ie,
|
|
805
808
|
mouseOverList: ie,
|
|
806
809
|
getLabel: E,
|
|
807
810
|
updatedSelected: B,
|
|
808
|
-
focusInput:
|
|
811
|
+
focusInput: r,
|
|
809
812
|
closeList: P
|
|
810
813
|
};
|
|
811
|
-
return (n,
|
|
814
|
+
return (n, u) => (x(), M("div", {
|
|
812
815
|
style: { position: "relative" },
|
|
813
816
|
class: R(n.$attrs.class)
|
|
814
817
|
}, [
|
|
815
|
-
|
|
818
|
+
Z(he, {
|
|
816
819
|
ref_key: "itemListRef",
|
|
817
820
|
ref: b,
|
|
818
821
|
"show-drop-down": c.value,
|
|
819
822
|
filteredListItems: j.value,
|
|
820
823
|
mouseHoveringOnList: q.value,
|
|
821
824
|
focusedIndex: A.value,
|
|
822
|
-
selectedIndex:
|
|
825
|
+
selectedIndex: _.value,
|
|
823
826
|
"max-list-height-p-x": e.maxListHeightPX,
|
|
824
827
|
"list-animation-duration-ms": e.listAnimationDurationMs,
|
|
825
828
|
"parent-methods": ue,
|
|
826
829
|
blockListChange: l.value,
|
|
827
|
-
"onUpdate:blockListChange":
|
|
830
|
+
"onUpdate:blockListChange": u[1] || (u[1] = (p) => l.value = p),
|
|
828
831
|
"total-options-count": t.value,
|
|
829
|
-
onReverseDropDownList:
|
|
830
|
-
enableScrollClose:
|
|
832
|
+
onReverseDropDownList: u[2] || (u[2] = (p) => y.value = p),
|
|
833
|
+
enableScrollClose: W.value,
|
|
831
834
|
"enable-text-filter": s.value
|
|
832
835
|
}, {
|
|
833
836
|
default: me(() => [
|
|
834
|
-
|
|
837
|
+
Z(ye, {
|
|
835
838
|
ref_key: "dropDownButtonInput",
|
|
836
839
|
ref: V,
|
|
837
840
|
"parent-methods": ue,
|
|
@@ -841,7 +844,7 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
841
844
|
"reverse-drop-down-list": y.value
|
|
842
845
|
}, {
|
|
843
846
|
default: me(() => [
|
|
844
|
-
|
|
847
|
+
Z(be, {
|
|
845
848
|
ref_key: "dropDownTextInput",
|
|
846
849
|
ref: h,
|
|
847
850
|
"enable-text-filter": s.value,
|
|
@@ -849,7 +852,7 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
849
852
|
placeholder: oe.value,
|
|
850
853
|
"enable-button-click": k.value,
|
|
851
854
|
"parent-methods": ue,
|
|
852
|
-
"onUpdate:query":
|
|
855
|
+
"onUpdate:query": u[0] || (u[0] = (p) => S.value = p)
|
|
853
856
|
}, null, 8, ["enable-text-filter", "show-drop-down", "placeholder", "enable-button-click"])
|
|
854
857
|
]),
|
|
855
858
|
_: 1
|