@jblehm/super-list 1.0.8 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/index.css +1 -1
- package/dist/super-list.js +69 -72
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
# superlist V1.0.
|
|
1
|
+
# superlist V1.0.9
|
|
2
2
|
An un-styled text searchable combobox
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.list-filter-text-input[data-v-06682ad2]{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-06682ad2]:focus,.list-filter-text-input[data-v-06682ad2]:focus-visible,.list-filter-text-input[data-v-06682ad2]:active{text-align:left}.click-through[data-v-06682ad2]{pointer-events:none}.dark-placeholder-text[data-v-06682ad2]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-06682ad2]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-06682ad2]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-06682ad2]{font-size:.875rem;line-height:1.5rem}}.list-option[data-v-
|
|
1
|
+
.list-filter-text-input[data-v-06682ad2]{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-06682ad2]:focus,.list-filter-text-input[data-v-06682ad2]:focus-visible,.list-filter-text-input[data-v-06682ad2]:active{text-align:left}.click-through[data-v-06682ad2]{pointer-events:none}.dark-placeholder-text[data-v-06682ad2]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-06682ad2]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-06682ad2]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-06682ad2]{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-9504a6f6]{top:var(--parent-y)}.list-reverse[data-v-9504a6f6]{bottom:var(--parent-y)}.select-list[data-v-9504a6f6]{--parent-width: var(--4d70fae9);--parent-x: var(--17685e9b);--parent-y: var(--1768625c);--duration: var(--57b60186);--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,box-shadow,opacity,visibility,filter,drop-shadow;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-9504a6f6]:focus-visible,.select-list>ul[data-v-9504a6f6]:focus-visible,.super-list-button-container[data-v-9504a6f6]:focus-visible{outline:none}.super-list-button-container[data-v-9504a6f6]{height:100%;width:100%}.select-list.select-list-open[data-v-9504a6f6]{z-index:999999;--max-height: var(--2b5b3b16);max-height:var(--max-height, 0)}.select-list.no-scroll[data-v-9504a6f6]{overflow:hidden}.select-list-fixed[data-v-9504a6f6]{position:fixed;opacity:1;visibility:visible}.list-content[data-v-9504a6f6]{--duration: var(--57b60186);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-9504a6f6]{border-radius:var(--border-radius)}@media (min-width: 640px){.select-list.select-list-scrollable[data-v-9504a6f6]{border-radius:var(--border-radius) 0 0 var(--border-radius)}.list-content[data-v-9504a6f6]{font-size:.875rem;line-height:1.25rem}}.list-button-icon[data-v-80cac867]{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-80cac867]{max-height:100%;width:1.25rem}.list-button-icon.rotate-180[data-v-80cac867]{transform:rotate(180deg)}.list-button[data-v-80cac867]{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-80cac867]:focus,.list-button[data-v-80cac867]:focus-visible,.list-button[data-v-80cac867]:active{text-align:left}.list-button-icon-div[data-v-80cac867]{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-80cac867]{gap:calc(40% - .25rem)}.click-through[data-v-80cac867]{pointer-events:none}[data-v-f0f16320]{box-sizing:border-box}
|
package/dist/super-list.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent as Q, ref as f, computed as D, openBlock as L, createElementBlock as T, withKeys as m, normalizeClass as
|
|
2
|
-
import './index.css';class
|
|
1
|
+
import { defineComponent as Q, ref as f, computed as D, openBlock as L, createElementBlock as T, withKeys as m, normalizeClass as B, createElementVNode as F, useTemplateRef as ke, watch as N, Fragment as de, renderList as Ee, withModifiers as te, toDisplayString as ve, createBlock as ce, createCommentVNode as j, useCssVars as Ae, onMounted as ye, onUnmounted as Ne, renderSlot as we, createVNode as W, nextTick as Se, resolveDynamicComponent as Fe, withCtx as me } from "vue";
|
|
2
|
+
import './index.css';class He {
|
|
3
3
|
eventsTypes = ["resize", "load", "scroll", "wheel", "touchmove"];
|
|
4
4
|
config = {
|
|
5
5
|
attributes: !0,
|
|
@@ -46,13 +46,13 @@ import './index.css';class Be {
|
|
|
46
46
|
window.removeEventListener("resize", this.callbackFunction);
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
-
function
|
|
50
|
-
return e == null ? "" : typeof e == "object" ? e[b] : h ?
|
|
49
|
+
function Be(e, s, b, h) {
|
|
50
|
+
return e == null ? "" : typeof e == "object" ? e[b] : h ? Pe(e, h) : s ? s(e) : "" + e;
|
|
51
51
|
}
|
|
52
|
-
function
|
|
52
|
+
function Pe(e, s) {
|
|
53
53
|
return s.find((b) => b.type === e)?.label ?? "";
|
|
54
54
|
}
|
|
55
|
-
class
|
|
55
|
+
class Re {
|
|
56
56
|
constructor() {
|
|
57
57
|
this.abortController = new AbortController(), this.func = () => {
|
|
58
58
|
}, this.then = () => {
|
|
@@ -79,7 +79,7 @@ class qe {
|
|
|
79
79
|
return this.abort("New Request From Controller."), this.setFunc(s), this.setThen(b), this.execute();
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
|
-
const
|
|
82
|
+
const qe = ["tabindex", "placeholder", "size"], je = /* @__PURE__ */ Q({
|
|
83
83
|
__name: "ListTextInput",
|
|
84
84
|
props: {
|
|
85
85
|
enableTextFilter: {
|
|
@@ -120,7 +120,7 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Q({
|
|
|
120
120
|
const d = i?.value ? i.value.length : 0, c = o.placeholder?.length || 0;
|
|
121
121
|
return d > 0 ? d : c > 0 ? c : 5;
|
|
122
122
|
}), g = D(() => o.enableButtonClick === !0 && o.enableTextFilter === !0 ? "" : "click-through"), p = D(() => o.showDropDown && !o.enableTextFilter || !o.showDropDown ? "dark-placeholder-text" : "light-placeholder-text");
|
|
123
|
-
function
|
|
123
|
+
function S() {
|
|
124
124
|
if (i?.value) {
|
|
125
125
|
const d = i.value;
|
|
126
126
|
d.blur(), d.value = "";
|
|
@@ -129,7 +129,7 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Q({
|
|
|
129
129
|
function k() {
|
|
130
130
|
i?.value && i.value.focus();
|
|
131
131
|
}
|
|
132
|
-
return s({ blurInput:
|
|
132
|
+
return s({ blurInput: S, focusInput: k, textInputRef: i }), (d, c) => (L(), T("input", {
|
|
133
133
|
ref_key: "textInputRef",
|
|
134
134
|
ref: i,
|
|
135
135
|
tabindex: e.enableTextFilter ? 0 : -1,
|
|
@@ -148,34 +148,34 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Q({
|
|
|
148
148
|
autocomplete: "off",
|
|
149
149
|
placeholder: e.placeholder,
|
|
150
150
|
size: l.value,
|
|
151
|
-
class:
|
|
151
|
+
class: B([[
|
|
152
152
|
g.value,
|
|
153
153
|
p.value,
|
|
154
154
|
{ "text-filter-disabled": !e.enableTextFilter }
|
|
155
155
|
], "list-filter-text-input"])
|
|
156
|
-
}, null, 42,
|
|
156
|
+
}, null, 42, qe));
|
|
157
157
|
}
|
|
158
158
|
}), $ = (e, s) => {
|
|
159
159
|
const b = e.__vccOpts || e;
|
|
160
160
|
for (const [h, o] of s)
|
|
161
161
|
b[h] = o;
|
|
162
162
|
return b;
|
|
163
|
-
}, be = /* @__PURE__ */ $(
|
|
163
|
+
}, be = /* @__PURE__ */ $(je, [["__scopeId", "data-v-06682ad2"]]), $e = {}, Ke = {
|
|
164
164
|
xmlns: "http://www.w3.org/2000/svg",
|
|
165
165
|
fill: "currentColor",
|
|
166
166
|
"aria-hidden": "true",
|
|
167
167
|
"data-slot": "icon",
|
|
168
168
|
viewBox: "0 -16 16 17"
|
|
169
169
|
};
|
|
170
|
-
function
|
|
171
|
-
return L(), T("svg",
|
|
172
|
-
|
|
170
|
+
function Ve(e, s) {
|
|
171
|
+
return L(), T("svg", Ke, s[0] || (s[0] = [
|
|
172
|
+
F("path", {
|
|
173
173
|
"shape-rendering": "geometricPrecision",
|
|
174
174
|
d: "M 6 -2.25 L 13.75 -14 A 0.5 0.5 90 0 1 15 -13 L 6.5 -0.5 A 2 1 90 0 1 5.5 -0.5 L 1 -6 A 0.5 0.5 90 0 1 2.25 -7 Z"
|
|
175
175
|
}, null, -1)
|
|
176
176
|
]));
|
|
177
177
|
}
|
|
178
|
-
const
|
|
178
|
+
const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = { class: "list-item-span" }, Je = { class: "list-item-span" }, We = /* @__PURE__ */ Q({
|
|
179
179
|
__name: "ListItem",
|
|
180
180
|
props: {
|
|
181
181
|
mouseHoveringOnList: {
|
|
@@ -217,13 +217,13 @@ const Xe = /* @__PURE__ */ $(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
217
217
|
const t = (Array.isArray(b.value) ? b.value : [b.value])[s.focusedIndex];
|
|
218
218
|
return t && typeof t == "object" && "scrollIntoView" in t && typeof t.scrollIntoView == "function" ? t : null;
|
|
219
219
|
});
|
|
220
|
-
|
|
220
|
+
N(
|
|
221
221
|
() => s.showDropDown,
|
|
222
222
|
() => o()
|
|
223
|
-
),
|
|
223
|
+
), N(
|
|
224
224
|
() => s.listElementOpenAndVisible,
|
|
225
225
|
() => i()
|
|
226
|
-
),
|
|
226
|
+
), N(
|
|
227
227
|
() => h.value,
|
|
228
228
|
() => i()
|
|
229
229
|
);
|
|
@@ -253,7 +253,7 @@ const Xe = /* @__PURE__ */ $(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
253
253
|
onFocusout: t[5] || (t[5] = (p) => e.parentMethods.unfocus(p)),
|
|
254
254
|
tabindex: "-1",
|
|
255
255
|
onMousedown: te((p) => e.parentMethods.updatedSelected(l), ["left"]),
|
|
256
|
-
class:
|
|
256
|
+
class: B([
|
|
257
257
|
{ "list-option-selected": e.selectedIndex === g },
|
|
258
258
|
{
|
|
259
259
|
"list-option-active": e.filteredListItems.length === 1 || e.focusedIndex === g && !e.mouseHoveringOnList
|
|
@@ -261,15 +261,13 @@ const Xe = /* @__PURE__ */ $(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
261
261
|
"list-option"
|
|
262
262
|
])
|
|
263
263
|
}, [
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
}, ve(e.parentMethods.getLabel(l)), 3),
|
|
267
|
-
e.selectedIndex === g ? (L(), ce(Xe, {
|
|
264
|
+
F("span", Ue, ve(e.parentMethods.getLabel(l)), 1),
|
|
265
|
+
e.selectedIndex === g ? (L(), ce(ze, {
|
|
268
266
|
key: 0,
|
|
269
267
|
class: "list-item-icon",
|
|
270
268
|
"aria-hidden": "true"
|
|
271
269
|
})) : j("", !0)
|
|
272
|
-
], 42,
|
|
270
|
+
], 42, Xe))), 128)),
|
|
273
271
|
e.filteredListItems.length === 0 ? (L(), T("li", {
|
|
274
272
|
key: 0,
|
|
275
273
|
onKeyup: [
|
|
@@ -286,7 +284,7 @@ const Xe = /* @__PURE__ */ $(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
286
284
|
tabindex: "-1",
|
|
287
285
|
class: "list-option-message"
|
|
288
286
|
}, t[20] || (t[20] = [
|
|
289
|
-
|
|
287
|
+
F("span", { class: "list-item-span" }, "No Items To Display.", -1)
|
|
290
288
|
]), 32)) : j("", !0),
|
|
291
289
|
e.totalOptionsCount && e.totalOptionsCount > (e.filteredListItems?.length || 0) ? (L(), T("li", {
|
|
292
290
|
key: 1,
|
|
@@ -304,11 +302,11 @@ const Xe = /* @__PURE__ */ $(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
304
302
|
tabindex: "-1",
|
|
305
303
|
class: "list-option-message"
|
|
306
304
|
}, [
|
|
307
|
-
|
|
305
|
+
F("span", Je, " +" + ve(e.totalOptionsCount - e.filteredListItems?.length || 0) + " More Items...", 1)
|
|
308
306
|
], 32)) : j("", !0)
|
|
309
307
|
], 64));
|
|
310
308
|
}
|
|
311
|
-
}), Qe = /* @__PURE__ */ $(We, [["__scopeId", "data-v-
|
|
309
|
+
}), Qe = /* @__PURE__ */ $(We, [["__scopeId", "data-v-f1a723a6"]]), Ze = /* @__PURE__ */ Q({
|
|
312
310
|
__name: "ItemList",
|
|
313
311
|
props: {
|
|
314
312
|
mouseHoveringOnList: {
|
|
@@ -359,19 +357,19 @@ const Xe = /* @__PURE__ */ $(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
359
357
|
emits: ["reverseDropDownList"],
|
|
360
358
|
setup(e, { expose: s, emit: b }) {
|
|
361
359
|
Ae((u) => ({
|
|
362
|
-
"
|
|
363
|
-
"
|
|
364
|
-
"
|
|
365
|
-
"
|
|
366
|
-
|
|
360
|
+
"4d70fae9": k.value,
|
|
361
|
+
"17685e9b": ne.value,
|
|
362
|
+
"1768625c": P.value,
|
|
363
|
+
"57b60186": R.value,
|
|
364
|
+
"2b5b3b16": Y.value
|
|
367
365
|
}));
|
|
368
|
-
const h = b, o = e, i = f(null), a = f(null), t = f(null), l = f(0), g = f(0), p = f(0),
|
|
369
|
-
|
|
366
|
+
const h = b, o = e, i = f(null), a = f(null), t = f(null), l = f(0), g = f(0), p = f(0), S = f(0), k = f("0px"), d = f(!1), c = f([]), w = f(0), C = D(() => !d.value || window?.innerHeight == null ? !1 : z() && se()), E = D(() => o.maxListHeightPX >= w.value);
|
|
367
|
+
N(
|
|
370
368
|
() => C.value,
|
|
371
369
|
(u) => h("reverseDropDownList", u),
|
|
372
370
|
{ immediate: !0 }
|
|
373
371
|
);
|
|
374
|
-
const ne = D(() => l.value + "px"), P = D(() =>
|
|
372
|
+
const ne = D(() => l.value + "px"), P = D(() => S.value + "px");
|
|
375
373
|
s({ listContainerRef: t });
|
|
376
374
|
const oe = (u) => {
|
|
377
375
|
u?.key && u.key === " " && u.preventDefault();
|
|
@@ -394,7 +392,7 @@ const Xe = /* @__PURE__ */ $(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
394
392
|
return p.value < Z();
|
|
395
393
|
}
|
|
396
394
|
const Y = D(() => (o.maxListHeightPX || 0) + "px"), R = D(() => (o.listAnimationDurationMs || 0) + "ms"), G = D(() => o.blockListChange ? c.value : o.filteredListItems);
|
|
397
|
-
|
|
395
|
+
N(
|
|
398
396
|
() => G,
|
|
399
397
|
(u) => {
|
|
400
398
|
u && (c.value = u.value);
|
|
@@ -411,7 +409,7 @@ const Xe = /* @__PURE__ */ $(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
411
409
|
o.showDropDown || (d.value = !1, A && A.unobserve());
|
|
412
410
|
}, o.listAnimationDurationMs + 50);
|
|
413
411
|
}
|
|
414
|
-
|
|
412
|
+
N(
|
|
415
413
|
() => o.showDropDown,
|
|
416
414
|
(u, y) => {
|
|
417
415
|
u !== y && (u ? q() : ie());
|
|
@@ -419,7 +417,7 @@ const Xe = /* @__PURE__ */ $(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
419
417
|
{ immediate: !0 }
|
|
420
418
|
);
|
|
421
419
|
function K(u) {
|
|
422
|
-
X(),
|
|
420
|
+
X(), Se(() => X()), _(u);
|
|
423
421
|
}
|
|
424
422
|
function _(u) {
|
|
425
423
|
if (!o.enableScrollClose || !u?.target || typeof t?.value?.contains != "function" || u?.target?.nodeType == null) return;
|
|
@@ -436,8 +434,8 @@ const Xe = /* @__PURE__ */ $(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
436
434
|
}
|
|
437
435
|
function U() {
|
|
438
436
|
if (i?.value == null || t?.value == null) return;
|
|
439
|
-
const u = re().getBoundingClientRect(), y = t.value.getBoundingClientRect(), x =
|
|
440
|
-
C.value ?
|
|
437
|
+
const u = re().getBoundingClientRect(), y = t.value.getBoundingClientRect(), x = S.value, ee = l.value;
|
|
438
|
+
C.value ? S.value = x - (u.top - y.bottom) : S.value = x - (y.top - u.bottom), l.value = ee - (y.left - u.left);
|
|
441
439
|
}
|
|
442
440
|
function J() {
|
|
443
441
|
return (i?.value).getElementsByTagName("button")[0];
|
|
@@ -446,23 +444,23 @@ const Xe = /* @__PURE__ */ $(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
446
444
|
return i?.value;
|
|
447
445
|
}
|
|
448
446
|
return ye(() => {
|
|
449
|
-
A = new
|
|
450
|
-
}),
|
|
447
|
+
A = new He(K, J()), setTimeout(() => K(void 0), 250);
|
|
448
|
+
}), Ne(() => {
|
|
451
449
|
A?.unobserve();
|
|
452
450
|
}), (u, y) => (L(), T(de, null, [
|
|
453
|
-
|
|
451
|
+
F("div", {
|
|
454
452
|
ref_key: "dropDownButtonContainer",
|
|
455
453
|
ref: i,
|
|
456
454
|
class: "super-list-button-container"
|
|
457
455
|
}, [
|
|
458
456
|
we(u.$slots, "default", {}, void 0, !0)
|
|
459
457
|
], 512),
|
|
460
|
-
|
|
458
|
+
F("div", {
|
|
461
459
|
ref_key: "listContainerRef",
|
|
462
460
|
ref: t,
|
|
463
461
|
onMouseenter: y[0] || (y[0] = (x) => e.parentMethods.mouseOverList()),
|
|
464
462
|
tabindex: "-1",
|
|
465
|
-
class:
|
|
463
|
+
class: B([
|
|
466
464
|
"select-list",
|
|
467
465
|
C.value ? "list-reverse" : "list-normal",
|
|
468
466
|
{ "select-list-open": e.showDropDown },
|
|
@@ -470,11 +468,10 @@ const Xe = /* @__PURE__ */ $(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
470
468
|
{ "select-list-fixed": d.value },
|
|
471
469
|
{ "select-list-scrollable": !E.value }
|
|
472
470
|
]),
|
|
473
|
-
style: Ne(d.value ? "" : "border: none !important;"),
|
|
474
471
|
onKeydown: y[1] || (y[1] = m((x) => oe(x), ["space"])),
|
|
475
472
|
onMouseup: y[2] || (y[2] = te((x) => V(x), ["left"]))
|
|
476
473
|
}, [
|
|
477
|
-
|
|
474
|
+
F("ul", {
|
|
478
475
|
tabindex: "-1",
|
|
479
476
|
ref_key: "dropDownListUL",
|
|
480
477
|
ref: a,
|
|
@@ -491,10 +488,10 @@ const Xe = /* @__PURE__ */ $(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
491
488
|
"total-options-count": e.totalOptionsCount
|
|
492
489
|
}, null, 8, ["filteredListItems", "mouseHoveringOnList", "focusedIndex", "selectedIndex", "listElementOpenAndVisible", "parent-methods", "show-drop-down", "total-options-count"])
|
|
493
490
|
], 512)
|
|
494
|
-
],
|
|
491
|
+
], 34)
|
|
495
492
|
], 64));
|
|
496
493
|
}
|
|
497
|
-
}), he = /* @__PURE__ */ $(Ze, [["__scopeId", "data-v-
|
|
494
|
+
}), he = /* @__PURE__ */ $(Ze, [["__scopeId", "data-v-9504a6f6"]]), Ye = {}, Ge = {
|
|
498
495
|
xmlns: "http://www.w3.org/2000/svg",
|
|
499
496
|
fill: "currentColor",
|
|
500
497
|
"aria-hidden": "true",
|
|
@@ -503,7 +500,7 @@ const Xe = /* @__PURE__ */ $(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
503
500
|
};
|
|
504
501
|
function _e(e, s) {
|
|
505
502
|
return L(), T("svg", Ge, s[0] || (s[0] = [
|
|
506
|
-
|
|
503
|
+
F("path", {
|
|
507
504
|
"shape-rendering": "geometricPrecision",
|
|
508
505
|
d: "M 6 4 L 10 0.25 A 0.5 0.5 90 0 1 11 1.25 L 6.5 5.75 A 15 3 90 0 1 5.5 5.75 L 1 1.25 A 0.5 0.5 90 0 1 2 0.25 Z"
|
|
509
506
|
}, null, -1)
|
|
@@ -557,21 +554,21 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
557
554
|
onFocusout: i[5] || (i[5] = (a) => e.parentMethods.unfocus(a)),
|
|
558
555
|
onClick: i[6] || (i[6] = (a) => b()),
|
|
559
556
|
type: "button",
|
|
560
|
-
class:
|
|
557
|
+
class: B([[{ "click-through": s.enableTextFilter || s.showDropDown }], "list-button"])
|
|
561
558
|
}, [
|
|
562
559
|
we(o.$slots, "default", {}, void 0, !0),
|
|
563
|
-
|
|
564
|
-
class:
|
|
560
|
+
F("span", {
|
|
561
|
+
class: B(["list-button-icon-div", { "bigger-gap": s.showDropDown }])
|
|
565
562
|
}, [
|
|
566
563
|
e.customIcon ? j("", !0) : (L(), T("span", {
|
|
567
564
|
key: 0,
|
|
568
|
-
class:
|
|
565
|
+
class: B(["list-button-icon", [{ "rotate-180": !s.showDropDown }]])
|
|
569
566
|
}, [
|
|
570
567
|
W(ge, { "aria-hidden": "true" })
|
|
571
568
|
], 2)),
|
|
572
569
|
e.customIcon ? j("", !0) : (L(), T("span", {
|
|
573
570
|
key: 1,
|
|
574
|
-
class:
|
|
571
|
+
class: B(["list-button-icon", [{ "rotate-180": s.showDropDown }]])
|
|
575
572
|
}, [
|
|
576
573
|
e.customIcon == null ? (L(), ce(ge, {
|
|
577
574
|
key: 0,
|
|
@@ -579,7 +576,7 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
579
576
|
})) : j("", !0)
|
|
580
577
|
], 2)),
|
|
581
578
|
e.customIcon ? (L(), T("span", tt, [
|
|
582
|
-
(L(), ce(
|
|
579
|
+
(L(), ce(Fe(e.customIcon), { "aria-hidden": "true" }))
|
|
583
580
|
])) : j("", !0)
|
|
584
581
|
], 2)
|
|
585
582
|
], 42, et));
|
|
@@ -637,8 +634,8 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
637
634
|
},
|
|
638
635
|
emits: { "update:selected": null },
|
|
639
636
|
setup(e, { expose: s, emit: b }) {
|
|
640
|
-
const h = b, o = e, i = f([]), a = new
|
|
641
|
-
|
|
637
|
+
const h = b, o = e, i = f([]), a = new Re(), t = f(0), l = D(() => o.forceTextFilterVisibilityTo !== void 0 ? o.forceTextFilterVisibilityTo : t.value > o.maxListOptions), g = f(!1), p = f(!1), S = f(!1), k = f(!0), d = f(!1), c = f(!1), w = f(he), C = f(be), E = f("");
|
|
638
|
+
N(
|
|
642
639
|
() => E.value,
|
|
643
640
|
(n, r) => {
|
|
644
641
|
n !== r && typeof o.options == "function" && ee(n);
|
|
@@ -650,7 +647,7 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
650
647
|
clearTimeout(J), ne(), E.value = "", g.value = !1, k.value = !0;
|
|
651
648
|
}, oe = D(() => c?.value === !0 ? "Error loading data" : d?.value === !0 ? "Loading..." : Z(o.selected)), V = (n) => {
|
|
652
649
|
n && h("update:selected", n), P();
|
|
653
|
-
}, M = (n, r = !1) =>
|
|
650
|
+
}, M = (n, r = !1) => Be(
|
|
654
651
|
n,
|
|
655
652
|
r ? o.customPlaceHolderFunction : void 0,
|
|
656
653
|
o.objectLabelKeyName,
|
|
@@ -672,13 +669,13 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
672
669
|
typeof o.options != "function" && !Array.isArray(o.options) ? z() : y();
|
|
673
670
|
});
|
|
674
671
|
const R = f(!1), G = f(0), O = f(0), A = f(0);
|
|
675
|
-
|
|
672
|
+
N(
|
|
676
673
|
() => O.value,
|
|
677
674
|
(n, r) => {
|
|
678
675
|
n != r && !p.value && (A.value = n);
|
|
679
676
|
},
|
|
680
677
|
{ immediate: !0 }
|
|
681
|
-
),
|
|
678
|
+
), N(
|
|
682
679
|
() => p.value,
|
|
683
680
|
(n) => {
|
|
684
681
|
n || (A.value = O.value);
|
|
@@ -690,7 +687,7 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
690
687
|
const n = E.value, r = i.value;
|
|
691
688
|
return n === "" ? r : r.filter((v) => M(v).toLowerCase().includes(n.toLowerCase()));
|
|
692
689
|
});
|
|
693
|
-
|
|
690
|
+
N(
|
|
694
691
|
() => q.value,
|
|
695
692
|
(n, r) => {
|
|
696
693
|
JSON.stringify(n) !== JSON.stringify(r) && K();
|
|
@@ -709,8 +706,8 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
709
706
|
if (r.length > 1) {
|
|
710
707
|
const v = r.map((I) => n.indexOf(I));
|
|
711
708
|
for (let I = 0; I < v.length; I++) {
|
|
712
|
-
const
|
|
713
|
-
if (
|
|
709
|
+
const H = JSON.stringify(i.value[v[I]]), ae = JSON.stringify(o.selected);
|
|
710
|
+
if (H === ae) return v[I];
|
|
714
711
|
}
|
|
715
712
|
return -1;
|
|
716
713
|
}
|
|
@@ -739,8 +736,8 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
739
736
|
}
|
|
740
737
|
async function ee(n, r = !0) {
|
|
741
738
|
d.value = r;
|
|
742
|
-
const v = async () => o.options(o.maxListOptions, n || ""), I = (
|
|
743
|
-
(!
|
|
739
|
+
const v = async () => o.options(o.maxListOptions, n || ""), I = (H) => {
|
|
740
|
+
(!H || !("data" in H)) && z(), pe(H.data), Le(H?.data?.length ?? 0).then(() => {
|
|
744
741
|
d.value = !1;
|
|
745
742
|
});
|
|
746
743
|
};
|
|
@@ -766,8 +763,8 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
766
763
|
}, Me = (n) => {
|
|
767
764
|
if (g?.value === !1) return;
|
|
768
765
|
E.value.length > 0 && (p.value = !0);
|
|
769
|
-
const r = w?.value?.listContainerRef, v = C?.value?.textInputRef, I = n?.relatedTarget && v?.isEqualNode(n?.relatedTarget),
|
|
770
|
-
if (!(
|
|
766
|
+
const r = w?.value?.listContainerRef, v = C?.value?.textInputRef, I = n?.relatedTarget && v?.isEqualNode(n?.relatedTarget), H = n?.relatedTarget && r && r.contains(n?.relatedTarget), ae = n?.relatedTarget && r && r.isEqualNode(n?.relatedTarget);
|
|
767
|
+
if (!(H || I)) {
|
|
771
768
|
if (ae) {
|
|
772
769
|
u();
|
|
773
770
|
return;
|
|
@@ -796,7 +793,7 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
796
793
|
};
|
|
797
794
|
return (n, r) => (L(), T("div", {
|
|
798
795
|
style: { position: "relative" },
|
|
799
|
-
class:
|
|
796
|
+
class: B(n.$attrs.class)
|
|
800
797
|
}, [
|
|
801
798
|
W(he, {
|
|
802
799
|
ref_key: "itemListRef",
|
|
@@ -812,7 +809,7 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
812
809
|
blockListChange: p.value,
|
|
813
810
|
"onUpdate:blockListChange": r[1] || (r[1] = (v) => p.value = v),
|
|
814
811
|
"total-options-count": t.value,
|
|
815
|
-
onReverseDropDownList: r[2] || (r[2] = (v) =>
|
|
812
|
+
onReverseDropDownList: r[2] || (r[2] = (v) => S.value = v),
|
|
816
813
|
enableScrollClose: U.value
|
|
817
814
|
}, {
|
|
818
815
|
default: me(() => [
|
|
@@ -821,7 +818,7 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
821
818
|
"show-drop-down": g.value,
|
|
822
819
|
"enable-text-filter": l.value,
|
|
823
820
|
"custom-icon": e.customIcon,
|
|
824
|
-
"reverse-drop-down-list":
|
|
821
|
+
"reverse-drop-down-list": S.value
|
|
825
822
|
}, {
|
|
826
823
|
default: me(() => [
|
|
827
824
|
W(be, {
|