@jblehm/super-list 1.0.9 → 1.0.11
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 +2 -2
- package/dist/index.css +1 -1
- package/dist/super-list.js +129 -125
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
# superlist V1.0.
|
|
2
|
-
An un-styled text searchable combobox
|
|
1
|
+
# superlist V1.0.11
|
|
2
|
+
An un-styled text searchable combobox for Vue.
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.list-filter-text-input[data-v-
|
|
1
|
+
.list-filter-text-input[data-v-18c89a96]{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-18c89a96]:focus,.list-filter-text-input[data-v-18c89a96]:focus-visible,.list-filter-text-input[data-v-18c89a96]:active{text-align:left}.click-through[data-v-18c89a96]{pointer-events:none}.dark-placeholder-text[data-v-18c89a96]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-18c89a96]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-18c89a96]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-18c89a96]{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-70680770]{top:var(--parent-y)}.list-reverse[data-v-70680770]{bottom:var(--parent-y)}.select-list[data-v-70680770]{--parent-width: var(--38eed713);--parent-x: var(--01bedfc5);--parent-y: var(--01bee386);--duration: var(--50b69332);--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-70680770]:focus-visible,.select-list>ul[data-v-70680770]:focus-visible,.super-list-button-container[data-v-70680770]:focus-visible{outline:none}.super-list-button-container[data-v-70680770]{height:100%;width:100%}.select-list.select-list-open[data-v-70680770]{z-index:999999;--max-height: var(--2ed2b4c0);max-height:var(--max-height, 0)}.select-list.no-scroll[data-v-70680770]{overflow:hidden}.select-list-fixed[data-v-70680770]{position:fixed;opacity:1;visibility:visible}.list-content[data-v-70680770]{--duration: var(--50b69332);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-70680770]{border-radius:var(--border-radius)}@media (min-width: 640px){.select-list.select-list-scrollable[data-v-70680770]{border-radius:var(--border-radius) 0 0 var(--border-radius)}.list-content[data-v-70680770]{font-size:.875rem;line-height:1.25rem}}.list-button-icon[data-v-3e92a870]{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-3e92a870]{max-height:100%;width:1.25rem}.list-button-icon.rotate-180[data-v-3e92a870]{transform:rotate(180deg)}.list-button[data-v-3e92a870]{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-3e92a870]:focus,.list-button[data-v-3e92a870]:focus-visible,.list-button[data-v-3e92a870]:active{text-align:left}.list-button-icon-div[data-v-3e92a870]{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-3e92a870]{gap:calc(40% - .25rem)}.click-through[data-v-3e92a870]{pointer-events:none}[data-v-f0f16320]{box-sizing:border-box}
|
package/dist/super-list.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
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
|
|
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 S, useTemplateRef as ke, watch as F, 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 Fe, renderSlot as we, createVNode as W, nextTick as Ne, resolveDynamicComponent as Se, withCtx as me } from "vue";
|
|
2
2
|
import './index.css';class He {
|
|
3
3
|
eventsTypes = ["resize", "load", "scroll", "wheel", "touchmove"];
|
|
4
4
|
config = {
|
|
@@ -109,29 +109,29 @@ const qe = ["tabindex", "placeholder", "size"], je = /* @__PURE__ */ Q({
|
|
|
109
109
|
"update:press": null
|
|
110
110
|
},
|
|
111
111
|
setup(e, { expose: s, emit: b }) {
|
|
112
|
-
const h = b, o = e,
|
|
112
|
+
const h = b, o = e, r = f(null);
|
|
113
113
|
function a(d) {
|
|
114
|
-
d?.target && d.target ===
|
|
114
|
+
d?.target && d.target === r.value || o.parentMethods.unfocus(d);
|
|
115
115
|
}
|
|
116
116
|
function t(d) {
|
|
117
117
|
d.target && d.target.value != null && h("update:query", d.target.value);
|
|
118
118
|
}
|
|
119
|
-
const
|
|
120
|
-
const d =
|
|
119
|
+
const i = D(() => {
|
|
120
|
+
const d = r?.value ? r.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
|
|
124
|
-
if (
|
|
125
|
-
const d =
|
|
123
|
+
function N() {
|
|
124
|
+
if (r?.value) {
|
|
125
|
+
const d = r.value;
|
|
126
126
|
d.blur(), d.value = "";
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
129
|
function k() {
|
|
130
|
-
|
|
130
|
+
r?.value && r.value.focus();
|
|
131
131
|
}
|
|
132
|
-
return s({ blurInput:
|
|
132
|
+
return s({ blurInput: N, focusInput: k, textInputRef: r }), (d, c) => (L(), T("input", {
|
|
133
133
|
ref_key: "textInputRef",
|
|
134
|
-
ref:
|
|
134
|
+
ref: r,
|
|
135
135
|
tabindex: e.enableTextFilter ? 0 : -1,
|
|
136
136
|
onKeydown: [
|
|
137
137
|
c[0] || (c[0] = m((w) => e.parentMethods.press(w), ["enter"])),
|
|
@@ -140,14 +140,15 @@ const qe = ["tabindex", "placeholder", "size"], je = /* @__PURE__ */ Q({
|
|
|
140
140
|
c[3] || (c[3] = m((w) => e.parentMethods.press(w), ["up"])),
|
|
141
141
|
c[4] || (c[4] = m((w) => e.parentMethods.press(w), ["down"]))
|
|
142
142
|
],
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
143
|
+
onFocusin: c[5] || (c[5] = (w) => e.parentMethods.openList()),
|
|
144
|
+
onFocusout: c[6] || (c[6] = (w) => a(w)),
|
|
145
|
+
onClick: c[7] || (c[7] = (w) => e.parentMethods.openList()),
|
|
146
|
+
onInput: c[8] || (c[8] = (w) => t(w)),
|
|
146
147
|
type: "text",
|
|
147
148
|
"aria-autocomplete": "none",
|
|
148
149
|
autocomplete: "off",
|
|
149
150
|
placeholder: e.placeholder,
|
|
150
|
-
size:
|
|
151
|
+
size: i.value,
|
|
151
152
|
class: B([[
|
|
152
153
|
g.value,
|
|
153
154
|
p.value,
|
|
@@ -160,7 +161,7 @@ const qe = ["tabindex", "placeholder", "size"], je = /* @__PURE__ */ Q({
|
|
|
160
161
|
for (const [h, o] of s)
|
|
161
162
|
b[h] = o;
|
|
162
163
|
return b;
|
|
163
|
-
}, be = /* @__PURE__ */ $(je, [["__scopeId", "data-v-
|
|
164
|
+
}, be = /* @__PURE__ */ $(je, [["__scopeId", "data-v-18c89a96"]]), $e = {}, Ke = {
|
|
164
165
|
xmlns: "http://www.w3.org/2000/svg",
|
|
165
166
|
fill: "currentColor",
|
|
166
167
|
"aria-hidden": "true",
|
|
@@ -169,7 +170,7 @@ const qe = ["tabindex", "placeholder", "size"], je = /* @__PURE__ */ Q({
|
|
|
169
170
|
};
|
|
170
171
|
function Ve(e, s) {
|
|
171
172
|
return L(), T("svg", Ke, s[0] || (s[0] = [
|
|
172
|
-
|
|
173
|
+
S("path", {
|
|
173
174
|
"shape-rendering": "geometricPrecision",
|
|
174
175
|
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
176
|
}, null, -1)
|
|
@@ -217,27 +218,27 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
217
218
|
const t = (Array.isArray(b.value) ? b.value : [b.value])[s.focusedIndex];
|
|
218
219
|
return t && typeof t == "object" && "scrollIntoView" in t && typeof t.scrollIntoView == "function" ? t : null;
|
|
219
220
|
});
|
|
220
|
-
|
|
221
|
+
F(
|
|
221
222
|
() => s.showDropDown,
|
|
222
223
|
() => o()
|
|
223
|
-
),
|
|
224
|
+
), F(
|
|
224
225
|
() => s.listElementOpenAndVisible,
|
|
225
|
-
() =>
|
|
226
|
-
),
|
|
226
|
+
() => r()
|
|
227
|
+
), F(
|
|
227
228
|
() => h.value,
|
|
228
|
-
() =>
|
|
229
|
+
() => r()
|
|
229
230
|
);
|
|
230
231
|
function o() {
|
|
231
232
|
!s.showDropDown || !h?.value?.parentElement?.parentElement || (h.value.parentElement.parentElement.scrollTop = h.value.offsetTop);
|
|
232
233
|
}
|
|
233
|
-
function
|
|
234
|
+
function r() {
|
|
234
235
|
const a = h.value, t = a?.parentElement?.parentElement;
|
|
235
236
|
if (!s.showDropDown || !a || !t) return;
|
|
236
|
-
const
|
|
237
|
-
|
|
237
|
+
const i = a.offsetTop - t.scrollTop < 0, g = a.offsetTop + a.offsetHeight - t.scrollTop > t.clientHeight;
|
|
238
|
+
i && (t.scrollTop = a.offsetTop), g && (t.scrollTop = a.offsetTop + a.clientHeight - t.clientHeight);
|
|
238
239
|
}
|
|
239
240
|
return (a, t) => (L(), T(de, null, [
|
|
240
|
-
(L(!0), T(de, null, Ee(e.filteredListItems, (
|
|
241
|
+
(L(!0), T(de, null, Ee(e.filteredListItems, (i, g) => (L(), T("li", {
|
|
241
242
|
key: g,
|
|
242
243
|
ref_for: !0,
|
|
243
244
|
ref: "items",
|
|
@@ -252,7 +253,7 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
252
253
|
],
|
|
253
254
|
onFocusout: t[5] || (t[5] = (p) => e.parentMethods.unfocus(p)),
|
|
254
255
|
tabindex: "-1",
|
|
255
|
-
onMousedown: te((p) => e.parentMethods.updatedSelected(
|
|
256
|
+
onMousedown: te((p) => e.parentMethods.updatedSelected(i), ["left"]),
|
|
256
257
|
class: B([
|
|
257
258
|
{ "list-option-selected": e.selectedIndex === g },
|
|
258
259
|
{
|
|
@@ -261,7 +262,7 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
261
262
|
"list-option"
|
|
262
263
|
])
|
|
263
264
|
}, [
|
|
264
|
-
|
|
265
|
+
S("span", Ue, ve(e.parentMethods.getLabel(i)), 1),
|
|
265
266
|
e.selectedIndex === g ? (L(), ce(ze, {
|
|
266
267
|
key: 0,
|
|
267
268
|
class: "list-item-icon",
|
|
@@ -271,38 +272,38 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
271
272
|
e.filteredListItems.length === 0 ? (L(), T("li", {
|
|
272
273
|
key: 0,
|
|
273
274
|
onKeyup: [
|
|
274
|
-
t[6] || (t[6] = m((
|
|
275
|
-
t[7] || (t[7] = m((
|
|
276
|
-
t[8] || (t[8] = m((
|
|
275
|
+
t[6] || (t[6] = m((i) => e.parentMethods.press(i), ["enter"])),
|
|
276
|
+
t[7] || (t[7] = m((i) => e.parentMethods.press(i), ["space"])),
|
|
277
|
+
t[8] || (t[8] = m((i) => e.parentMethods.press(i), ["esc"]))
|
|
277
278
|
],
|
|
278
279
|
onKeydown: [
|
|
279
|
-
t[9] || (t[9] = m((
|
|
280
|
-
t[10] || (t[10] = m((
|
|
280
|
+
t[9] || (t[9] = m((i) => e.parentMethods.press(i), ["up"])),
|
|
281
|
+
t[10] || (t[10] = m((i) => e.parentMethods.press(i), ["down"]))
|
|
281
282
|
],
|
|
282
|
-
onFocusout: t[11] || (t[11] = (
|
|
283
|
-
onMousedown: t[12] || (t[12] = te((
|
|
283
|
+
onFocusout: t[11] || (t[11] = (i) => e.parentMethods.unfocus(i)),
|
|
284
|
+
onMousedown: t[12] || (t[12] = te((i) => e.parentMethods.closeList(i), ["left"])),
|
|
284
285
|
tabindex: "-1",
|
|
285
286
|
class: "list-option-message"
|
|
286
287
|
}, t[20] || (t[20] = [
|
|
287
|
-
|
|
288
|
+
S("span", { class: "list-item-span" }, "No Items To Display.", -1)
|
|
288
289
|
]), 32)) : j("", !0),
|
|
289
290
|
e.totalOptionsCount && e.totalOptionsCount > (e.filteredListItems?.length || 0) ? (L(), T("li", {
|
|
290
291
|
key: 1,
|
|
291
292
|
onKeyup: [
|
|
292
|
-
t[13] || (t[13] = m((
|
|
293
|
-
t[14] || (t[14] = m((
|
|
294
|
-
t[15] || (t[15] = m((
|
|
293
|
+
t[13] || (t[13] = m((i) => e.parentMethods.press(i), ["enter"])),
|
|
294
|
+
t[14] || (t[14] = m((i) => e.parentMethods.press(i), ["space"])),
|
|
295
|
+
t[15] || (t[15] = m((i) => e.parentMethods.press(i), ["esc"]))
|
|
295
296
|
],
|
|
296
297
|
onKeydown: [
|
|
297
|
-
t[16] || (t[16] = m((
|
|
298
|
-
t[17] || (t[17] = m((
|
|
298
|
+
t[16] || (t[16] = m((i) => e.parentMethods.press(i), ["up"])),
|
|
299
|
+
t[17] || (t[17] = m((i) => e.parentMethods.press(i), ["down"]))
|
|
299
300
|
],
|
|
300
|
-
onFocusout: t[18] || (t[18] = (
|
|
301
|
-
onMousedown: t[19] || (t[19] = te((
|
|
301
|
+
onFocusout: t[18] || (t[18] = (i) => e.parentMethods.unfocus(i)),
|
|
302
|
+
onMousedown: t[19] || (t[19] = te((i) => e.parentMethods.closeList(i), ["left"])),
|
|
302
303
|
tabindex: "-1",
|
|
303
304
|
class: "list-option-message"
|
|
304
305
|
}, [
|
|
305
|
-
|
|
306
|
+
S("span", Je, " +" + ve(e.totalOptionsCount - e.filteredListItems?.length || 0) + " More Items...", 1)
|
|
306
307
|
], 32)) : j("", !0)
|
|
307
308
|
], 64));
|
|
308
309
|
}
|
|
@@ -357,19 +358,19 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
357
358
|
emits: ["reverseDropDownList"],
|
|
358
359
|
setup(e, { expose: s, emit: b }) {
|
|
359
360
|
Ae((u) => ({
|
|
360
|
-
"
|
|
361
|
-
"
|
|
362
|
-
"
|
|
363
|
-
"
|
|
364
|
-
"
|
|
361
|
+
"38eed713": k.value,
|
|
362
|
+
"01bedfc5": ne.value,
|
|
363
|
+
"01bee386": P.value,
|
|
364
|
+
"50b69332": R.value,
|
|
365
|
+
"2ed2b4c0": Y.value
|
|
365
366
|
}));
|
|
366
|
-
const h = b, o = e,
|
|
367
|
-
|
|
367
|
+
const h = b, o = e, r = f(null), a = f(null), t = f(null), i = f(0), g = f(0), p = f(0), N = 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);
|
|
368
|
+
F(
|
|
368
369
|
() => C.value,
|
|
369
370
|
(u) => h("reverseDropDownList", u),
|
|
370
371
|
{ immediate: !0 }
|
|
371
372
|
);
|
|
372
|
-
const ne = D(() =>
|
|
373
|
+
const ne = D(() => i.value + "px"), P = D(() => N.value + "px");
|
|
373
374
|
s({ listContainerRef: t });
|
|
374
375
|
const oe = (u) => {
|
|
375
376
|
u?.key && u.key === " " && u.preventDefault();
|
|
@@ -392,7 +393,7 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
392
393
|
return p.value < Z();
|
|
393
394
|
}
|
|
394
395
|
const Y = D(() => (o.maxListHeightPX || 0) + "px"), R = D(() => (o.listAnimationDurationMs || 0) + "ms"), G = D(() => o.blockListChange ? c.value : o.filteredListItems);
|
|
395
|
-
|
|
396
|
+
F(
|
|
396
397
|
() => G,
|
|
397
398
|
(u) => {
|
|
398
399
|
u && (c.value = u.value);
|
|
@@ -409,7 +410,7 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
409
410
|
o.showDropDown || (d.value = !1, A && A.unobserve());
|
|
410
411
|
}, o.listAnimationDurationMs + 50);
|
|
411
412
|
}
|
|
412
|
-
|
|
413
|
+
F(
|
|
413
414
|
() => o.showDropDown,
|
|
414
415
|
(u, y) => {
|
|
415
416
|
u !== y && (u ? q() : ie());
|
|
@@ -417,7 +418,7 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
417
418
|
{ immediate: !0 }
|
|
418
419
|
);
|
|
419
420
|
function K(u) {
|
|
420
|
-
X(),
|
|
421
|
+
X(), Ne(() => X()), _(u);
|
|
421
422
|
}
|
|
422
423
|
function _(u) {
|
|
423
424
|
if (!o.enableScrollClose || !u?.target || typeof t?.value?.contains != "function" || u?.target?.nodeType == null) return;
|
|
@@ -428,34 +429,34 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
428
429
|
le(), U();
|
|
429
430
|
}
|
|
430
431
|
function le() {
|
|
431
|
-
if (
|
|
432
|
-
const u =
|
|
432
|
+
if (r?.value == null) return;
|
|
433
|
+
const u = r.value.getBoundingClientRect();
|
|
433
434
|
g.value = u.top, p.value = window.innerHeight - u.bottom, k.value = u.width + "px";
|
|
434
435
|
}
|
|
435
436
|
function U() {
|
|
436
|
-
if (
|
|
437
|
-
const u = re().getBoundingClientRect(), y = t.value.getBoundingClientRect(), x =
|
|
438
|
-
C.value ?
|
|
437
|
+
if (r?.value == null || t?.value == null) return;
|
|
438
|
+
const u = re().getBoundingClientRect(), y = t.value.getBoundingClientRect(), x = N.value, ee = i.value;
|
|
439
|
+
C.value ? N.value = x - (u.top - y.bottom) : N.value = x - (y.top - u.bottom), i.value = ee - (y.left - u.left);
|
|
439
440
|
}
|
|
440
441
|
function J() {
|
|
441
|
-
return (
|
|
442
|
+
return (r?.value).getElementsByTagName("button")[0];
|
|
442
443
|
}
|
|
443
444
|
function re() {
|
|
444
|
-
return
|
|
445
|
+
return r?.value;
|
|
445
446
|
}
|
|
446
447
|
return ye(() => {
|
|
447
448
|
A = new He(K, J()), setTimeout(() => K(void 0), 250);
|
|
448
|
-
}),
|
|
449
|
+
}), Fe(() => {
|
|
449
450
|
A?.unobserve();
|
|
450
451
|
}), (u, y) => (L(), T(de, null, [
|
|
451
|
-
|
|
452
|
+
S("div", {
|
|
452
453
|
ref_key: "dropDownButtonContainer",
|
|
453
|
-
ref:
|
|
454
|
+
ref: r,
|
|
454
455
|
class: "super-list-button-container"
|
|
455
456
|
}, [
|
|
456
457
|
we(u.$slots, "default", {}, void 0, !0)
|
|
457
458
|
], 512),
|
|
458
|
-
|
|
459
|
+
S("div", {
|
|
459
460
|
ref_key: "listContainerRef",
|
|
460
461
|
ref: t,
|
|
461
462
|
onMouseenter: y[0] || (y[0] = (x) => e.parentMethods.mouseOverList()),
|
|
@@ -471,7 +472,7 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
471
472
|
onKeydown: y[1] || (y[1] = m((x) => oe(x), ["space"])),
|
|
472
473
|
onMouseup: y[2] || (y[2] = te((x) => V(x), ["left"]))
|
|
473
474
|
}, [
|
|
474
|
-
|
|
475
|
+
S("ul", {
|
|
475
476
|
tabindex: "-1",
|
|
476
477
|
ref_key: "dropDownListUL",
|
|
477
478
|
ref: a,
|
|
@@ -491,7 +492,7 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
491
492
|
], 34)
|
|
492
493
|
], 64));
|
|
493
494
|
}
|
|
494
|
-
}), he = /* @__PURE__ */ $(Ze, [["__scopeId", "data-v-
|
|
495
|
+
}), he = /* @__PURE__ */ $(Ze, [["__scopeId", "data-v-70680770"]]), Ye = {}, Ge = {
|
|
495
496
|
xmlns: "http://www.w3.org/2000/svg",
|
|
496
497
|
fill: "currentColor",
|
|
497
498
|
"aria-hidden": "true",
|
|
@@ -500,7 +501,7 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
500
501
|
};
|
|
501
502
|
function _e(e, s) {
|
|
502
503
|
return L(), T("svg", Ge, s[0] || (s[0] = [
|
|
503
|
-
|
|
504
|
+
S("path", {
|
|
504
505
|
"shape-rendering": "geometricPrecision",
|
|
505
506
|
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"
|
|
506
507
|
}, null, -1)
|
|
@@ -539,25 +540,28 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
539
540
|
function b() {
|
|
540
541
|
s.enableTextFilter || s.parentMethods.openList();
|
|
541
542
|
}
|
|
542
|
-
function h(
|
|
543
|
-
s.enableTextFilter ? (s.parentMethods.focusInput(),
|
|
543
|
+
function h(r) {
|
|
544
|
+
s.enableTextFilter ? (s.parentMethods.focusInput(), r.stopPropagation(), r.preventDefault()) : s.parentMethods.press(r);
|
|
544
545
|
}
|
|
545
|
-
|
|
546
|
+
function o(r) {
|
|
547
|
+
s.enableTextFilter || s.parentMethods.press(r);
|
|
548
|
+
}
|
|
549
|
+
return (r, a) => (L(), T("button", {
|
|
546
550
|
tabindex: e.enableTextFilter ? -1 : 0,
|
|
547
551
|
onKeydown: [
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
552
|
+
a[0] || (a[0] = m((t) => h(t), ["enter"])),
|
|
553
|
+
a[1] || (a[1] = m((t) => o(t), ["space"])),
|
|
554
|
+
a[2] || (a[2] = m((t) => e.parentMethods.press(t), ["esc"])),
|
|
555
|
+
a[3] || (a[3] = m((t) => e.parentMethods.press(t), ["up"])),
|
|
556
|
+
a[4] || (a[4] = m((t) => e.parentMethods.press(t), ["down"]))
|
|
553
557
|
],
|
|
554
|
-
onFocusout:
|
|
555
|
-
onClick:
|
|
558
|
+
onFocusout: a[5] || (a[5] = (t) => e.parentMethods.unfocus(t)),
|
|
559
|
+
onClick: a[6] || (a[6] = (t) => b()),
|
|
556
560
|
type: "button",
|
|
557
561
|
class: B([[{ "click-through": s.enableTextFilter || s.showDropDown }], "list-button"])
|
|
558
562
|
}, [
|
|
559
|
-
we(
|
|
560
|
-
|
|
563
|
+
we(r.$slots, "default", {}, void 0, !0),
|
|
564
|
+
S("span", {
|
|
561
565
|
class: B(["list-button-icon-div", { "bigger-gap": s.showDropDown }])
|
|
562
566
|
}, [
|
|
563
567
|
e.customIcon ? j("", !0) : (L(), T("span", {
|
|
@@ -576,12 +580,12 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
576
580
|
})) : j("", !0)
|
|
577
581
|
], 2)),
|
|
578
582
|
e.customIcon ? (L(), T("span", tt, [
|
|
579
|
-
(L(), ce(
|
|
583
|
+
(L(), ce(Se(e.customIcon), { "aria-hidden": "true" }))
|
|
580
584
|
])) : j("", !0)
|
|
581
585
|
], 2)
|
|
582
586
|
], 42, et));
|
|
583
587
|
}
|
|
584
|
-
}), ot = /* @__PURE__ */ $(nt, [["__scopeId", "data-v-
|
|
588
|
+
}), ot = /* @__PURE__ */ $(nt, [["__scopeId", "data-v-3e92a870"]]), st = /* @__PURE__ */ Q({
|
|
585
589
|
__name: "super-list",
|
|
586
590
|
props: {
|
|
587
591
|
selected: {
|
|
@@ -634,22 +638,22 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
634
638
|
},
|
|
635
639
|
emits: { "update:selected": null },
|
|
636
640
|
setup(e, { expose: s, emit: b }) {
|
|
637
|
-
const h = b, o = e,
|
|
638
|
-
|
|
641
|
+
const h = b, o = e, r = f([]), a = new Re(), t = f(0), i = D(() => o.forceTextFilterVisibilityTo !== void 0 ? o.forceTextFilterVisibilityTo : t.value > o.maxListOptions), g = f(!1), p = f(!1), N = f(!1), k = f(!0), d = f(!1), c = f(!1), w = f(he), C = f(be), E = f("");
|
|
642
|
+
F(
|
|
639
643
|
() => E.value,
|
|
640
|
-
(n,
|
|
641
|
-
n !==
|
|
644
|
+
(n, l) => {
|
|
645
|
+
n !== l && typeof o.options == "function" && ee(n);
|
|
642
646
|
}
|
|
643
647
|
);
|
|
644
648
|
const ne = () => {
|
|
645
|
-
|
|
649
|
+
i.value && C?.value?.blurInput();
|
|
646
650
|
}, P = () => {
|
|
647
651
|
clearTimeout(J), ne(), E.value = "", g.value = !1, k.value = !0;
|
|
648
652
|
}, oe = D(() => c?.value === !0 ? "Error loading data" : d?.value === !0 ? "Loading..." : Z(o.selected)), V = (n) => {
|
|
649
653
|
n && h("update:selected", n), P();
|
|
650
|
-
}, M = (n,
|
|
654
|
+
}, M = (n, l = !1) => Be(
|
|
651
655
|
n,
|
|
652
|
-
|
|
656
|
+
l ? o.customPlaceHolderFunction : void 0,
|
|
653
657
|
o.objectLabelKeyName,
|
|
654
658
|
o.enumKeyToLabelObjectArray
|
|
655
659
|
);
|
|
@@ -669,13 +673,13 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
669
673
|
typeof o.options != "function" && !Array.isArray(o.options) ? z() : y();
|
|
670
674
|
});
|
|
671
675
|
const R = f(!1), G = f(0), O = f(0), A = f(0);
|
|
672
|
-
|
|
676
|
+
F(
|
|
673
677
|
() => O.value,
|
|
674
|
-
(n,
|
|
675
|
-
n !=
|
|
678
|
+
(n, l) => {
|
|
679
|
+
n != l && !p.value && (A.value = n);
|
|
676
680
|
},
|
|
677
681
|
{ immediate: !0 }
|
|
678
|
-
),
|
|
682
|
+
), F(
|
|
679
683
|
() => p.value,
|
|
680
684
|
(n) => {
|
|
681
685
|
n || (A.value = O.value);
|
|
@@ -683,14 +687,14 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
683
687
|
{ immediate: !0 }
|
|
684
688
|
);
|
|
685
689
|
const q = D(() => {
|
|
686
|
-
if (typeof o.options == "function" && !Array.isArray(o.options)) return
|
|
687
|
-
const n = E.value,
|
|
688
|
-
return n === "" ?
|
|
690
|
+
if (typeof o.options == "function" && !Array.isArray(o.options)) return r.value;
|
|
691
|
+
const n = E.value, l = r.value;
|
|
692
|
+
return n === "" ? l : l.filter((v) => M(v).toLowerCase().includes(n.toLowerCase()));
|
|
689
693
|
});
|
|
690
|
-
|
|
694
|
+
F(
|
|
691
695
|
() => q.value,
|
|
692
|
-
(n,
|
|
693
|
-
JSON.stringify(n) !== JSON.stringify(
|
|
696
|
+
(n, l) => {
|
|
697
|
+
JSON.stringify(n) !== JSON.stringify(l) && K();
|
|
694
698
|
},
|
|
695
699
|
{ immediate: !1, deep: !0 }
|
|
696
700
|
);
|
|
@@ -702,11 +706,11 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
702
706
|
};
|
|
703
707
|
function _() {
|
|
704
708
|
if (o.selected == null) return -1;
|
|
705
|
-
const n =
|
|
706
|
-
if (
|
|
707
|
-
const v =
|
|
709
|
+
const n = r.value.map((v) => M(v)), l = n.filter((v) => v === M(o.selected));
|
|
710
|
+
if (l.length > 1) {
|
|
711
|
+
const v = l.map((I) => n.indexOf(I));
|
|
708
712
|
for (let I = 0; I < v.length; I++) {
|
|
709
|
-
const H = JSON.stringify(
|
|
713
|
+
const H = JSON.stringify(r.value[v[I]]), ae = JSON.stringify(o.selected);
|
|
710
714
|
if (H === ae) return v[I];
|
|
711
715
|
}
|
|
712
716
|
return -1;
|
|
@@ -716,8 +720,8 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
716
720
|
const X = () => {
|
|
717
721
|
d.value || (g.value || (p.value = !1, K(), le(), g.value = !0), R.value = !1, k.value = !1);
|
|
718
722
|
}, le = () => {
|
|
719
|
-
const n = window.innerWidth != null && window.innerWidth < 640,
|
|
720
|
-
n &&
|
|
723
|
+
const n = window.innerWidth != null && window.innerWidth < 640, l = C.value.textInputRef;
|
|
724
|
+
n && i.value && (re(), l?.scrollIntoView({ block: "start" }));
|
|
721
725
|
}, U = f(!0);
|
|
722
726
|
let J = setTimeout(() => {
|
|
723
727
|
}, 0);
|
|
@@ -728,14 +732,14 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
728
732
|
}
|
|
729
733
|
const u = () => C.value.focusInput();
|
|
730
734
|
async function y() {
|
|
731
|
-
typeof o.options == "function" ? await ee(E.value ? E.value : void 0, !0) : (pe(o.options), t.value =
|
|
735
|
+
typeof o.options == "function" ? await ee(E.value ? E.value : void 0, !0) : (pe(o.options), t.value = r.value.length), x();
|
|
732
736
|
}
|
|
733
737
|
s({ initializeOptions: y, getLabel: M });
|
|
734
738
|
function x() {
|
|
735
|
-
_() == -1 &&
|
|
739
|
+
_() == -1 && r.value && !!r.value[0] && V(r.value[0]);
|
|
736
740
|
}
|
|
737
|
-
async function ee(n,
|
|
738
|
-
d.value =
|
|
741
|
+
async function ee(n, l = !0) {
|
|
742
|
+
d.value = l;
|
|
739
743
|
const v = async () => o.options(o.maxListOptions, n || ""), I = (H) => {
|
|
740
744
|
(!H || !("data" in H)) && z(), pe(H.data), Le(H?.data?.length ?? 0).then(() => {
|
|
741
745
|
d.value = !1;
|
|
@@ -744,16 +748,16 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
744
748
|
await a.resetAndExecute(v, I);
|
|
745
749
|
}
|
|
746
750
|
async function Le(n) {
|
|
747
|
-
const
|
|
751
|
+
const l = async () => o.options(1, ""), v = (I) => {
|
|
748
752
|
(!I || !("totalNum" in I)) && se(), t.value = I.totalNum ?? n;
|
|
749
753
|
};
|
|
750
|
-
await a.resetAndExecute(
|
|
754
|
+
await a.resetAndExecute(l, v);
|
|
751
755
|
}
|
|
752
756
|
const fe = () => C?.value?.textInputRef?.getElementsByTagName("li")[O.value] ?? null, xe = (n) => {
|
|
753
757
|
g.value == !1 ? X() : n && Ie(n);
|
|
754
758
|
}, Ie = (n) => {
|
|
755
|
-
const
|
|
756
|
-
(
|
|
759
|
+
const l = n.key || n.code;
|
|
760
|
+
(l === "Tab" || l === "Escape") && P(), l === "ArrowDown" && Te(n), l === "ArrowUp" && Oe(n), (l === "Enter" || l === " ") && De(), n.preventDefault(), n.stopPropagation();
|
|
757
761
|
}, De = () => {
|
|
758
762
|
q.value.length > 0 ? (p.value = !0, V(q.value[O.value])) : P();
|
|
759
763
|
}, Te = (n) => {
|
|
@@ -763,7 +767,7 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
763
767
|
}, Me = (n) => {
|
|
764
768
|
if (g?.value === !1) return;
|
|
765
769
|
E.value.length > 0 && (p.value = !0);
|
|
766
|
-
const
|
|
770
|
+
const l = w?.value?.listContainerRef, v = C?.value?.textInputRef, I = n?.relatedTarget && v?.isEqualNode(n?.relatedTarget), H = n?.relatedTarget && l && l.contains(n?.relatedTarget), ae = n?.relatedTarget && l && l.isEqualNode(n?.relatedTarget);
|
|
767
771
|
if (!(H || I)) {
|
|
768
772
|
if (ae) {
|
|
769
773
|
u();
|
|
@@ -773,13 +777,13 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
773
777
|
}
|
|
774
778
|
};
|
|
775
779
|
function pe(n) {
|
|
776
|
-
Array.isArray(n) || z(), n.length > 0 && typeof n[0] == "object" && Ce(n),
|
|
780
|
+
Array.isArray(n) || z(), n.length > 0 && typeof n[0] == "object" && Ce(n), r.value = n;
|
|
777
781
|
}
|
|
778
782
|
function Ce(n) {
|
|
779
783
|
(!o.objectLabelKeyName || o.objectLabelKeyName.length === 0) && Y();
|
|
780
|
-
const
|
|
784
|
+
const l = o.objectLabelKeyName;
|
|
781
785
|
for (let v = 0; v < n.length; v++)
|
|
782
|
-
(typeof n[v] != "object" || !(
|
|
786
|
+
(typeof n[v] != "object" || !(l in n[v])) && Y();
|
|
783
787
|
}
|
|
784
788
|
const ue = {
|
|
785
789
|
openList: X,
|
|
@@ -791,7 +795,7 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
791
795
|
focusInput: u,
|
|
792
796
|
closeList: P
|
|
793
797
|
};
|
|
794
|
-
return (n,
|
|
798
|
+
return (n, l) => (L(), T("div", {
|
|
795
799
|
style: { position: "relative" },
|
|
796
800
|
class: B(n.$attrs.class)
|
|
797
801
|
}, [
|
|
@@ -807,29 +811,29 @@ const ge = /* @__PURE__ */ $(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
807
811
|
"list-animation-duration-ms": e.listAnimationDurationMs,
|
|
808
812
|
"parent-methods": ue,
|
|
809
813
|
blockListChange: p.value,
|
|
810
|
-
"onUpdate:blockListChange":
|
|
814
|
+
"onUpdate:blockListChange": l[1] || (l[1] = (v) => p.value = v),
|
|
811
815
|
"total-options-count": t.value,
|
|
812
|
-
onReverseDropDownList:
|
|
816
|
+
onReverseDropDownList: l[2] || (l[2] = (v) => N.value = v),
|
|
813
817
|
enableScrollClose: U.value
|
|
814
818
|
}, {
|
|
815
819
|
default: me(() => [
|
|
816
820
|
W(ot, {
|
|
817
821
|
"parent-methods": ue,
|
|
818
822
|
"show-drop-down": g.value,
|
|
819
|
-
"enable-text-filter":
|
|
823
|
+
"enable-text-filter": i.value,
|
|
820
824
|
"custom-icon": e.customIcon,
|
|
821
|
-
"reverse-drop-down-list":
|
|
825
|
+
"reverse-drop-down-list": N.value
|
|
822
826
|
}, {
|
|
823
827
|
default: me(() => [
|
|
824
828
|
W(be, {
|
|
825
829
|
ref_key: "dropDownTextInput",
|
|
826
830
|
ref: C,
|
|
827
|
-
"enable-text-filter":
|
|
831
|
+
"enable-text-filter": i.value,
|
|
828
832
|
"show-drop-down": g.value,
|
|
829
833
|
placeholder: oe.value,
|
|
830
834
|
"enable-button-click": k.value,
|
|
831
835
|
"parent-methods": ue,
|
|
832
|
-
"onUpdate:query":
|
|
836
|
+
"onUpdate:query": l[0] || (l[0] = (v) => E.value = v)
|
|
833
837
|
}, null, 8, ["enable-text-filter", "show-drop-down", "placeholder", "enable-button-click"])
|
|
834
838
|
]),
|
|
835
839
|
_: 1
|