@jblehm/super-list 1.0.13 → 1.0.14
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.css +1 -1
- package/dist/super-list.js +268 -255
- package/package.json +3 -2
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.list-filter-text-input[data-v-
|
|
1
|
+
.list-filter-text-input[data-v-93cf8991]{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;touch-action:none}.list-filter-text-input[data-v-93cf8991]:focus,.list-filter-text-input[data-v-93cf8991]:focus-visible,.list-filter-text-input[data-v-93cf8991]:active{text-align:left}.click-through[data-v-93cf8991]{pointer-events:none}.dark-placeholder-text[data-v-93cf8991]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-93cf8991]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-93cf8991]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-93cf8991]{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-84dc0bfc]{top:var(--parent-y)}.list-reverse[data-v-84dc0bfc]{bottom:var(--parent-y)}.select-list[data-v-84dc0bfc]{--parent-width: var(--3f25a304);--parent-x: var(--39d34c36);--parent-y: var(--39d34ff7);--duration: var(--0cc221d8);--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-84dc0bfc]:focus-visible,.select-list>ul[data-v-84dc0bfc]:focus-visible,.super-list-button-container[data-v-84dc0bfc]:focus-visible{outline:none}.super-list-button-container[data-v-84dc0bfc]{height:100%;width:100%}.select-list.select-list-open[data-v-84dc0bfc]{z-index:999999;--max-height: var(--faf36f1e);max-height:var(--max-height, 0)}.select-list.no-scroll[data-v-84dc0bfc]{overflow:hidden}.select-list-fixed[data-v-84dc0bfc]{position:fixed;opacity:1;visibility:visible}.list-content[data-v-84dc0bfc]{--duration: var(--0cc221d8);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-84dc0bfc]{border-radius:var(--border-radius)}@media (min-width: 640px){.select-list.select-list-scrollable[data-v-84dc0bfc]{border-radius:var(--border-radius) 0 0 var(--border-radius)}.list-content[data-v-84dc0bfc]{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,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent as Z, ref as
|
|
2
|
-
import './index.css';class
|
|
1
|
+
import { defineComponent as Z, ref as m, computed as O, openBlock as x, createElementBlock as M, withKeys as h, normalizeClass as R, createElementVNode as H, useTemplateRef as Ee, watch as F, Fragment as de, renderList as Se, withModifiers as te, toDisplayString as ve, createBlock as ce, createCommentVNode as K, useCssVars as Ae, onMounted as we, onUnmounted as Fe, renderSlot as Le, createVNode as Q, nextTick as He, resolveDynamicComponent as Ne, withCtx as me } from "vue";
|
|
2
|
+
import './index.css';class Be {
|
|
3
3
|
eventsTypes = ["resize", "load", "scroll", "wheel", "touchmove"];
|
|
4
4
|
config = {
|
|
5
5
|
attributes: !0,
|
|
@@ -8,8 +8,8 @@ import './index.css';class He {
|
|
|
8
8
|
};
|
|
9
9
|
mutationObserver;
|
|
10
10
|
callbackFunction;
|
|
11
|
-
constructor(i,
|
|
12
|
-
this.targetNode =
|
|
11
|
+
constructor(i, d = document.body) {
|
|
12
|
+
this.targetNode = d, this.callbackFunction = (g) => i(g), this.mutationObserver = new MutationObserver(() => i());
|
|
13
13
|
}
|
|
14
14
|
observe() {
|
|
15
15
|
this.mutationObserver.observe(this.targetNode, this.config);
|
|
@@ -46,11 +46,11 @@ import './index.css';class He {
|
|
|
46
46
|
window.removeEventListener("resize", this.callbackFunction);
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
-
function
|
|
50
|
-
return i != null ? i(e) : e == null ? "" : typeof e == "object" ? e[
|
|
49
|
+
function Pe(e, i, d, g) {
|
|
50
|
+
return i != null ? i(e) : e == null ? "" : typeof e == "object" ? e[d] : g ? Re(e, g) : "" + e;
|
|
51
51
|
}
|
|
52
|
-
function
|
|
53
|
-
return i.find((
|
|
52
|
+
function Re(e, i) {
|
|
53
|
+
return i.find((d) => d.type === e)?.label ?? "";
|
|
54
54
|
}
|
|
55
55
|
class qe {
|
|
56
56
|
constructor() {
|
|
@@ -58,10 +58,10 @@ class qe {
|
|
|
58
58
|
}, this.then = () => {
|
|
59
59
|
};
|
|
60
60
|
}
|
|
61
|
-
async abortablePromise(i,
|
|
62
|
-
const o = await
|
|
61
|
+
async abortablePromise(i, d, g) {
|
|
62
|
+
const o = await d();
|
|
63
63
|
if (!i.aborted)
|
|
64
|
-
return
|
|
64
|
+
return g(o);
|
|
65
65
|
}
|
|
66
66
|
setFunc(i) {
|
|
67
67
|
this.func = i;
|
|
@@ -75,8 +75,8 @@ class qe {
|
|
|
75
75
|
abort(i) {
|
|
76
76
|
this.abortController.abort(i || "Aborted By Controller."), this.abortController = new AbortController();
|
|
77
77
|
}
|
|
78
|
-
resetAndExecute(i,
|
|
79
|
-
return this.abort("New Request From Controller."), this.setFunc(i), this.setThen(
|
|
78
|
+
resetAndExecute(i, d) {
|
|
79
|
+
return this.abort("New Request From Controller."), this.setFunc(i), this.setThen(d), this.execute();
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Z({
|
|
@@ -108,60 +108,73 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Z({
|
|
|
108
108
|
"update:query": null,
|
|
109
109
|
"update:press": null
|
|
110
110
|
},
|
|
111
|
-
setup(e, { expose: i, emit:
|
|
112
|
-
const
|
|
113
|
-
function
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
function t(
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
111
|
+
setup(e, { expose: i, emit: d }) {
|
|
112
|
+
const g = d, o = e, f = m(null);
|
|
113
|
+
function w() {
|
|
114
|
+
N();
|
|
115
|
+
}
|
|
116
|
+
function t(u) {
|
|
117
|
+
u.preventDefault(), u.stopPropagation(), u.stopImmediatePropagation();
|
|
118
|
+
}
|
|
119
|
+
function s(u) {
|
|
120
|
+
u.cancelable && u.preventDefault(), u.stopImmediatePropagation(), u.stopPropagation();
|
|
121
|
+
}
|
|
122
|
+
function v(u) {
|
|
123
|
+
u?.target && u.target === f.value || o.parentMethods.unfocus(u);
|
|
124
|
+
}
|
|
125
|
+
function l(u) {
|
|
126
|
+
u.target && u.target.value != null && g("update:query", u.target.value);
|
|
127
|
+
}
|
|
128
|
+
const y = O(() => {
|
|
129
|
+
const u = f?.value ? f.value.length : 0, c = o.placeholder?.length || 0;
|
|
130
|
+
return u > 0 ? u : c > 0 ? c : 5;
|
|
131
|
+
}), k = O(() => o.enableButtonClick === !0 && o.enableTextFilter === !0 ? "" : "click-through"), I = O(() => o.showDropDown && !o.enableTextFilter || !o.showDropDown ? "dark-placeholder-text" : "light-placeholder-text");
|
|
132
|
+
function E() {
|
|
133
|
+
if (f?.value) {
|
|
134
|
+
const u = f.value;
|
|
135
|
+
u.blur(), u.value = "";
|
|
127
136
|
}
|
|
128
137
|
}
|
|
129
|
-
function
|
|
130
|
-
|
|
138
|
+
function N() {
|
|
139
|
+
f?.value && f.value.focus();
|
|
131
140
|
}
|
|
132
|
-
return i({ blurInput:
|
|
141
|
+
return i({ blurInput: E, focusInput: N, textInputRef: f }), (u, c) => (x(), M("input", {
|
|
133
142
|
ref_key: "textInputRef",
|
|
134
|
-
ref:
|
|
143
|
+
ref: f,
|
|
135
144
|
tabindex: e.enableTextFilter ? 0 : -1,
|
|
136
145
|
onKeydown: [
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
146
|
+
c[0] || (c[0] = h((p) => e.parentMethods.press(p), ["enter"])),
|
|
147
|
+
c[1] || (c[1] = h((p) => e.parentMethods.press(), ["space"])),
|
|
148
|
+
c[2] || (c[2] = h((p) => e.parentMethods.press(p), ["esc"])),
|
|
149
|
+
c[3] || (c[3] = h((p) => e.parentMethods.press(p), ["up"])),
|
|
150
|
+
c[4] || (c[4] = h((p) => e.parentMethods.press(p), ["down"]))
|
|
142
151
|
],
|
|
143
|
-
onFocusin:
|
|
144
|
-
onFocusout:
|
|
145
|
-
|
|
146
|
-
|
|
152
|
+
onFocusin: c[5] || (c[5] = (p) => e.parentMethods.openList()),
|
|
153
|
+
onFocusout: c[6] || (c[6] = (p) => v(p)),
|
|
154
|
+
onMousedown: c[7] || (c[7] = (p) => e.parentMethods.openList()),
|
|
155
|
+
onMouseup: c[8] || (c[8] = (p) => s(p)),
|
|
156
|
+
onTouchstart: c[9] || (c[9] = (p) => w()),
|
|
157
|
+
onTouchend: c[10] || (c[10] = (p) => s(p)),
|
|
158
|
+
onTouchmove: c[11] || (c[11] = (p) => t(p)),
|
|
159
|
+
onInput: c[12] || (c[12] = (p) => l(p)),
|
|
147
160
|
type: "text",
|
|
148
161
|
"aria-autocomplete": "none",
|
|
149
162
|
autocomplete: "off",
|
|
150
163
|
placeholder: e.placeholder,
|
|
151
|
-
size:
|
|
164
|
+
size: y.value,
|
|
152
165
|
class: R([[
|
|
153
|
-
|
|
154
|
-
|
|
166
|
+
k.value,
|
|
167
|
+
I.value,
|
|
155
168
|
{ "text-filter-disabled": !e.enableTextFilter }
|
|
156
169
|
], "list-filter-text-input"])
|
|
157
170
|
}, null, 42, je));
|
|
158
171
|
}
|
|
159
|
-
}),
|
|
160
|
-
const
|
|
161
|
-
for (const [
|
|
162
|
-
|
|
163
|
-
return
|
|
164
|
-
}, be = /* @__PURE__ */
|
|
172
|
+
}), V = (e, i) => {
|
|
173
|
+
const d = e.__vccOpts || e;
|
|
174
|
+
for (const [g, o] of i)
|
|
175
|
+
d[g] = o;
|
|
176
|
+
return d;
|
|
177
|
+
}, be = /* @__PURE__ */ V($e, [["__scopeId", "data-v-93cf8991"]]), Ke = {}, Ve = {
|
|
165
178
|
xmlns: "http://www.w3.org/2000/svg",
|
|
166
179
|
fill: "currentColor",
|
|
167
180
|
"aria-hidden": "true",
|
|
@@ -169,14 +182,14 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Z({
|
|
|
169
182
|
viewBox: "0 -16 16 17"
|
|
170
183
|
};
|
|
171
184
|
function ze(e, i) {
|
|
172
|
-
return x(),
|
|
173
|
-
|
|
185
|
+
return x(), M("svg", Ve, i[0] || (i[0] = [
|
|
186
|
+
H("path", {
|
|
174
187
|
"shape-rendering": "geometricPrecision",
|
|
175
188
|
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"
|
|
176
189
|
}, null, -1)
|
|
177
190
|
]));
|
|
178
191
|
}
|
|
179
|
-
const Xe = /* @__PURE__ */
|
|
192
|
+
const Xe = /* @__PURE__ */ V(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = { class: "list-item-span" }, We = { class: "list-item-span" }, Qe = /* @__PURE__ */ Z({
|
|
180
193
|
__name: "ListItem",
|
|
181
194
|
props: {
|
|
182
195
|
mouseHoveringOnList: {
|
|
@@ -213,9 +226,9 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
213
226
|
}
|
|
214
227
|
},
|
|
215
228
|
setup(e) {
|
|
216
|
-
const i = e,
|
|
217
|
-
if (!
|
|
218
|
-
const t = (Array.isArray(
|
|
229
|
+
const i = e, d = Ee("items"), g = O(() => {
|
|
230
|
+
if (!d?.value) return null;
|
|
231
|
+
const t = (Array.isArray(d.value) ? d.value : [d.value])[i.focusedIndex];
|
|
219
232
|
return t && typeof t == "object" && "scrollIntoView" in t && typeof t.scrollIntoView == "function" ? t : null;
|
|
220
233
|
});
|
|
221
234
|
F(
|
|
@@ -223,23 +236,23 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
223
236
|
() => o()
|
|
224
237
|
), F(
|
|
225
238
|
() => i.listElementOpenAndVisible,
|
|
226
|
-
() =>
|
|
239
|
+
() => f()
|
|
227
240
|
), F(
|
|
228
|
-
() =>
|
|
229
|
-
() =>
|
|
241
|
+
() => g.value,
|
|
242
|
+
() => f()
|
|
230
243
|
);
|
|
231
244
|
function o() {
|
|
232
|
-
!i.showDropDown || !
|
|
245
|
+
!i.showDropDown || !g?.value?.parentElement?.parentElement || (g.value.parentElement.parentElement.scrollTop = g.value.offsetTop);
|
|
233
246
|
}
|
|
234
|
-
function
|
|
235
|
-
const
|
|
236
|
-
if (!i.showDropDown || !
|
|
237
|
-
const s =
|
|
238
|
-
s && (t.scrollTop =
|
|
247
|
+
function f() {
|
|
248
|
+
const w = g.value, t = w?.parentElement?.parentElement;
|
|
249
|
+
if (!i.showDropDown || !w || !t) return;
|
|
250
|
+
const s = w.offsetTop - t.scrollTop < 0, v = w.offsetTop + w.offsetHeight - t.scrollTop > t.clientHeight;
|
|
251
|
+
s && (t.scrollTop = w.offsetTop), v && (t.scrollTop = w.offsetTop + w.clientHeight - t.clientHeight);
|
|
239
252
|
}
|
|
240
|
-
return (
|
|
241
|
-
(x(!0),
|
|
242
|
-
key:
|
|
253
|
+
return (w, t) => (x(), M(de, null, [
|
|
254
|
+
(x(!0), M(de, null, Se(e.filteredListItems, (s, v) => (x(), M("li", {
|
|
255
|
+
key: v,
|
|
243
256
|
ref_for: !0,
|
|
244
257
|
ref: "items",
|
|
245
258
|
onKeyup: [
|
|
@@ -255,21 +268,21 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
255
268
|
tabindex: "-1",
|
|
256
269
|
onMousedown: te((l) => e.parentMethods.updatedSelected(s), ["left"]),
|
|
257
270
|
class: R([
|
|
258
|
-
{ "list-option-selected": e.selectedIndex ===
|
|
271
|
+
{ "list-option-selected": e.selectedIndex === v },
|
|
259
272
|
{
|
|
260
|
-
"list-option-active": e.filteredListItems.length === 1 || e.focusedIndex ===
|
|
273
|
+
"list-option-active": e.filteredListItems.length === 1 || e.focusedIndex === v && !e.mouseHoveringOnList
|
|
261
274
|
},
|
|
262
275
|
"list-option"
|
|
263
276
|
])
|
|
264
277
|
}, [
|
|
265
|
-
|
|
266
|
-
e.selectedIndex ===
|
|
278
|
+
H("span", Je, ve(e.parentMethods.getLabel(s)), 1),
|
|
279
|
+
e.selectedIndex === v ? (x(), ce(Xe, {
|
|
267
280
|
key: 0,
|
|
268
281
|
class: "list-item-icon",
|
|
269
282
|
"aria-hidden": "true"
|
|
270
|
-
})) :
|
|
283
|
+
})) : K("", !0)
|
|
271
284
|
], 42, Ue))), 128)),
|
|
272
|
-
e.filteredListItems.length === 0 ? (x(),
|
|
285
|
+
e.filteredListItems.length === 0 ? (x(), M("li", {
|
|
273
286
|
key: 0,
|
|
274
287
|
onKeyup: [
|
|
275
288
|
t[6] || (t[6] = h((s) => e.parentMethods.press(s), ["enter"])),
|
|
@@ -285,9 +298,9 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
285
298
|
tabindex: "-1",
|
|
286
299
|
class: "list-option-message"
|
|
287
300
|
}, t[20] || (t[20] = [
|
|
288
|
-
|
|
289
|
-
]), 32)) :
|
|
290
|
-
e.totalOptionsCount && e.totalOptionsCount > (e.filteredListItems?.length || 0) ? (x(),
|
|
301
|
+
H("span", { class: "list-item-span" }, "No Items To Display.", -1)
|
|
302
|
+
]), 32)) : K("", !0),
|
|
303
|
+
e.totalOptionsCount && e.totalOptionsCount > (e.filteredListItems?.length || 0) ? (x(), M("li", {
|
|
291
304
|
key: 1,
|
|
292
305
|
onKeyup: [
|
|
293
306
|
t[13] || (t[13] = h((s) => e.parentMethods.press(s), ["enter"])),
|
|
@@ -303,11 +316,11 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
303
316
|
tabindex: "-1",
|
|
304
317
|
class: "list-option-message"
|
|
305
318
|
}, [
|
|
306
|
-
|
|
307
|
-
], 32)) :
|
|
319
|
+
H("span", We, " +" + ve(e.totalOptionsCount - e.filteredListItems?.length || 0) + " More Items...", 1)
|
|
320
|
+
], 32)) : K("", !0)
|
|
308
321
|
], 64));
|
|
309
322
|
}
|
|
310
|
-
}), Ze = /* @__PURE__ */
|
|
323
|
+
}), Ze = /* @__PURE__ */ V(Qe, [["__scopeId", "data-v-f1a723a6"]]), Ye = /* @__PURE__ */ Z({
|
|
311
324
|
__name: "ItemList",
|
|
312
325
|
props: {
|
|
313
326
|
mouseHoveringOnList: {
|
|
@@ -360,134 +373,134 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
360
373
|
}
|
|
361
374
|
},
|
|
362
375
|
emits: ["reverseDropDownList"],
|
|
363
|
-
setup(e, { expose: i, emit:
|
|
364
|
-
|
|
376
|
+
setup(e, { expose: i, emit: d }) {
|
|
377
|
+
Ae((a) => ({
|
|
365
378
|
"3f25a304": k.value,
|
|
366
|
-
"39d34c36":
|
|
379
|
+
"39d34c36": p.value,
|
|
367
380
|
"39d34ff7": ne.value,
|
|
368
|
-
"0cc221d8":
|
|
381
|
+
"0cc221d8": j.value,
|
|
369
382
|
faf36f1e: Y.value
|
|
370
383
|
}));
|
|
371
|
-
const
|
|
384
|
+
const g = d, o = e, f = m(null), w = m(null), t = m(null), s = m(0), v = m(0), l = m(0), y = m(0), k = m("0px"), I = m(!1), E = m([]), N = m(0), u = O(() => !I.value || window?.innerHeight == null ? !1 : X() && se()), c = O(() => o.maxListHeightPX >= N.value);
|
|
372
385
|
F(
|
|
373
|
-
() =>
|
|
374
|
-
(
|
|
386
|
+
() => u.value,
|
|
387
|
+
(a) => g("reverseDropDownList", a),
|
|
375
388
|
{ immediate: !0 }
|
|
376
389
|
);
|
|
377
|
-
const
|
|
390
|
+
const p = O(() => s.value + "px"), ne = O(() => y.value + "px");
|
|
378
391
|
i({ listContainerRef: t });
|
|
379
|
-
const
|
|
380
|
-
|
|
381
|
-
}, oe = (
|
|
382
|
-
const
|
|
383
|
-
(!(
|
|
392
|
+
const q = (a) => {
|
|
393
|
+
a?.key && a.key === " " && a.preventDefault();
|
|
394
|
+
}, oe = (a) => {
|
|
395
|
+
const L = t?.value, T = a.target;
|
|
396
|
+
(!(L && T && L.contains(T)) || L.isEqualNode(T)) && o.parentMethods.focusInput();
|
|
384
397
|
};
|
|
385
398
|
function B() {
|
|
386
|
-
return
|
|
399
|
+
return w?.value ? (w?.value).clientHeight : 0;
|
|
387
400
|
}
|
|
388
|
-
function
|
|
401
|
+
function S() {
|
|
389
402
|
if (!o.showDropDown || B() === 0) return o.maxListHeightPX;
|
|
390
|
-
const
|
|
391
|
-
return o.maxListHeightPX && o.maxListHeightPX >
|
|
403
|
+
const a = B() === 0 ? o.maxListHeightPX : +B();
|
|
404
|
+
return o.maxListHeightPX && o.maxListHeightPX > a ? a : o.maxListHeightPX;
|
|
392
405
|
}
|
|
393
406
|
function X() {
|
|
394
|
-
return
|
|
407
|
+
return v.value > S();
|
|
395
408
|
}
|
|
396
409
|
function se() {
|
|
397
|
-
return l.value <
|
|
410
|
+
return l.value < S();
|
|
398
411
|
}
|
|
399
|
-
const Y =
|
|
412
|
+
const Y = O(() => (o.maxListHeightPX || 0) + "px"), j = O(() => (o.listAnimationDurationMs || 0) + "ms"), G = O(() => o.blockListChange ? E.value : o.filteredListItems);
|
|
400
413
|
F(
|
|
401
414
|
() => G,
|
|
402
|
-
(
|
|
403
|
-
|
|
415
|
+
(a) => {
|
|
416
|
+
a && (E.value = a.value);
|
|
404
417
|
},
|
|
405
418
|
{ immediate: !1, deep: !0 }
|
|
406
419
|
);
|
|
407
|
-
let
|
|
420
|
+
let C = setTimeout(() => {
|
|
408
421
|
}, 0), A = null;
|
|
409
|
-
function
|
|
410
|
-
|
|
422
|
+
function $() {
|
|
423
|
+
N.value = B(), clearTimeout(C), A && A.observe(), I.value = !0, z(void 0);
|
|
411
424
|
}
|
|
412
425
|
function ie() {
|
|
413
|
-
clearTimeout(
|
|
414
|
-
o.showDropDown || (
|
|
426
|
+
clearTimeout(C), C = setTimeout(() => {
|
|
427
|
+
o.showDropDown || (I.value = !1, A && A.unobserve());
|
|
415
428
|
}, o.listAnimationDurationMs + 50);
|
|
416
429
|
}
|
|
417
430
|
F(
|
|
418
431
|
() => o.showDropDown,
|
|
419
|
-
(
|
|
420
|
-
|
|
432
|
+
(a, L) => {
|
|
433
|
+
a !== L && (a ? $() : ie());
|
|
421
434
|
},
|
|
422
435
|
{ immediate: !0 }
|
|
423
436
|
);
|
|
424
|
-
function z(
|
|
425
|
-
U(),
|
|
437
|
+
function z(a) {
|
|
438
|
+
U(), He(() => U()), _(a);
|
|
426
439
|
}
|
|
427
|
-
function _(
|
|
428
|
-
if (!o.enableScrollClose || !
|
|
429
|
-
const
|
|
430
|
-
o.showDropDown &&
|
|
440
|
+
function _(a) {
|
|
441
|
+
if (!o.enableScrollClose || !a?.target || typeof t?.value?.contains != "function" || a?.target?.nodeType == null) return;
|
|
442
|
+
const L = ["scroll", "wheel", "touchmove"].includes(a?.type), T = !t.value.contains(a.target);
|
|
443
|
+
o.showDropDown && L && T && o.parentMethods.closeList();
|
|
431
444
|
}
|
|
432
445
|
function U() {
|
|
433
446
|
le(), J();
|
|
434
447
|
}
|
|
435
448
|
function le() {
|
|
436
|
-
if (
|
|
437
|
-
const
|
|
438
|
-
|
|
449
|
+
if (f?.value == null) return;
|
|
450
|
+
const a = f.value.getBoundingClientRect();
|
|
451
|
+
v.value = a.top, l.value = window.innerHeight - a.bottom, k.value = a.width + "px";
|
|
439
452
|
}
|
|
440
453
|
function J() {
|
|
441
|
-
if (
|
|
442
|
-
const
|
|
443
|
-
|
|
454
|
+
if (f?.value == null || t?.value == null) return;
|
|
455
|
+
const a = re().getBoundingClientRect(), L = t.value.getBoundingClientRect(), T = y.value, ee = s.value;
|
|
456
|
+
u.value ? y.value = T - (a.top - L.bottom) : y.value = T - (L.top - a.bottom), s.value = ee - (L.left - a.left);
|
|
444
457
|
}
|
|
445
458
|
function W() {
|
|
446
|
-
return (
|
|
459
|
+
return (f?.value).getElementsByTagName("button")[0];
|
|
447
460
|
}
|
|
448
461
|
function re() {
|
|
449
|
-
return
|
|
462
|
+
return f?.value;
|
|
450
463
|
}
|
|
451
464
|
return we(() => {
|
|
452
|
-
A = new
|
|
453
|
-
}),
|
|
465
|
+
A = new Be(z, W()), setTimeout(() => z(void 0), 250);
|
|
466
|
+
}), Fe(() => {
|
|
454
467
|
A?.unobserve();
|
|
455
|
-
}), (
|
|
456
|
-
|
|
468
|
+
}), (a, L) => (x(), M(de, null, [
|
|
469
|
+
H("div", {
|
|
457
470
|
ref_key: "dropDownButtonContainer",
|
|
458
|
-
ref:
|
|
471
|
+
ref: f,
|
|
459
472
|
class: "super-list-button-container"
|
|
460
473
|
}, [
|
|
461
|
-
Le(
|
|
474
|
+
Le(a.$slots, "default", {}, void 0, !0)
|
|
462
475
|
], 512),
|
|
463
|
-
|
|
476
|
+
H("div", {
|
|
464
477
|
ref_key: "listContainerRef",
|
|
465
478
|
ref: t,
|
|
466
|
-
onMouseenter:
|
|
479
|
+
onMouseenter: L[0] || (L[0] = (T) => e.parentMethods.mouseOverList()),
|
|
467
480
|
tabindex: "-1",
|
|
468
481
|
class: R([
|
|
469
482
|
"select-list",
|
|
470
|
-
|
|
483
|
+
u.value ? "list-reverse" : "list-normal",
|
|
471
484
|
{ "select-list-open": e.showDropDown },
|
|
472
|
-
{ "no-scroll":
|
|
473
|
-
{ "select-list-fixed":
|
|
474
|
-
{ "select-list-scrollable": !
|
|
485
|
+
{ "no-scroll": c.value && I.value },
|
|
486
|
+
{ "select-list-fixed": I.value },
|
|
487
|
+
{ "select-list-scrollable": !c.value }
|
|
475
488
|
]),
|
|
476
|
-
onKeydown:
|
|
477
|
-
onMouseup:
|
|
489
|
+
onKeydown: L[1] || (L[1] = h((T) => q(T), ["space"])),
|
|
490
|
+
onMouseup: L[2] || (L[2] = te((T) => oe(T), ["left"]))
|
|
478
491
|
}, [
|
|
479
|
-
|
|
492
|
+
H("ul", {
|
|
480
493
|
tabindex: "-1",
|
|
481
494
|
ref_key: "dropDownListUL",
|
|
482
|
-
ref:
|
|
495
|
+
ref: w,
|
|
483
496
|
class: "list-content"
|
|
484
497
|
}, [
|
|
485
498
|
Q(Ze, {
|
|
486
|
-
filteredListItems:
|
|
499
|
+
filteredListItems: E.value,
|
|
487
500
|
mouseHoveringOnList: e.mouseHoveringOnList,
|
|
488
501
|
focusedIndex: e.focusedIndex,
|
|
489
502
|
selectedIndex: e.selectedIndex,
|
|
490
|
-
listElementOpenAndVisible:
|
|
503
|
+
listElementOpenAndVisible: I.value,
|
|
491
504
|
"parent-methods": e.parentMethods,
|
|
492
505
|
"show-drop-down": e.showDropDown,
|
|
493
506
|
"total-options-count": e.totalOptionsCount
|
|
@@ -496,7 +509,7 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
496
509
|
], 34)
|
|
497
510
|
], 64));
|
|
498
511
|
}
|
|
499
|
-
}),
|
|
512
|
+
}), ge = /* @__PURE__ */ V(Ye, [["__scopeId", "data-v-84dc0bfc"]]), Ge = {}, _e = {
|
|
500
513
|
xmlns: "http://www.w3.org/2000/svg",
|
|
501
514
|
fill: "currentColor",
|
|
502
515
|
"aria-hidden": "true",
|
|
@@ -504,14 +517,14 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
504
517
|
viewBox: "0 0 12 6"
|
|
505
518
|
};
|
|
506
519
|
function et(e, i) {
|
|
507
|
-
return x(),
|
|
508
|
-
|
|
520
|
+
return x(), M("svg", _e, i[0] || (i[0] = [
|
|
521
|
+
H("path", {
|
|
509
522
|
"shape-rendering": "geometricPrecision",
|
|
510
523
|
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"
|
|
511
524
|
}, null, -1)
|
|
512
525
|
]));
|
|
513
526
|
}
|
|
514
|
-
const
|
|
527
|
+
const he = /* @__PURE__ */ V(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
515
528
|
key: 2,
|
|
516
529
|
class: "list-button-icon custom-icon"
|
|
517
530
|
}, ot = /* @__PURE__ */ Z({
|
|
@@ -540,64 +553,64 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
540
553
|
}
|
|
541
554
|
},
|
|
542
555
|
setup(e, { expose: i }) {
|
|
543
|
-
const
|
|
556
|
+
const d = e, g = m(null);
|
|
544
557
|
function o() {
|
|
545
|
-
|
|
558
|
+
d.enableTextFilter || d.parentMethods.openList();
|
|
546
559
|
}
|
|
547
|
-
function
|
|
548
|
-
|
|
560
|
+
function f(v) {
|
|
561
|
+
d.enableTextFilter ? (d.parentMethods.focusInput(), v.stopPropagation(), v.preventDefault()) : d.parentMethods.press(v);
|
|
549
562
|
}
|
|
550
|
-
function
|
|
551
|
-
|
|
563
|
+
function w(v) {
|
|
564
|
+
d.enableTextFilter || d.parentMethods.press(v);
|
|
552
565
|
}
|
|
553
566
|
function t() {
|
|
554
|
-
|
|
567
|
+
g?.value && g.value.blur();
|
|
555
568
|
}
|
|
556
569
|
function s() {
|
|
557
|
-
|
|
570
|
+
g?.value && g.value.focus();
|
|
558
571
|
}
|
|
559
|
-
return i({ blurInput: t, focusInput: s, buttonRef:
|
|
572
|
+
return i({ blurInput: t, focusInput: s, buttonRef: g }), (v, l) => (x(), M("button", {
|
|
560
573
|
ref_key: "buttonRef",
|
|
561
|
-
ref:
|
|
574
|
+
ref: g,
|
|
562
575
|
tabindex: e.enableTextFilter ? -1 : 0,
|
|
563
576
|
onKeydown: [
|
|
564
|
-
l[0] || (l[0] = h((
|
|
565
|
-
l[1] || (l[1] = h((
|
|
566
|
-
l[2] || (l[2] = h((
|
|
567
|
-
l[3] || (l[3] = h((
|
|
568
|
-
l[4] || (l[4] = h((
|
|
577
|
+
l[0] || (l[0] = h((y) => f(y), ["enter"])),
|
|
578
|
+
l[1] || (l[1] = h((y) => w(y), ["space"])),
|
|
579
|
+
l[2] || (l[2] = h((y) => e.parentMethods.press(y), ["esc"])),
|
|
580
|
+
l[3] || (l[3] = h((y) => e.parentMethods.press(y), ["up"])),
|
|
581
|
+
l[4] || (l[4] = h((y) => e.parentMethods.press(y), ["down"]))
|
|
569
582
|
],
|
|
570
|
-
onFocusout: l[5] || (l[5] = (
|
|
571
|
-
onClick: l[6] || (l[6] = (
|
|
583
|
+
onFocusout: l[5] || (l[5] = (y) => e.parentMethods.unfocus(y)),
|
|
584
|
+
onClick: l[6] || (l[6] = (y) => o()),
|
|
572
585
|
type: "button",
|
|
573
|
-
class: R([[{ "click-through":
|
|
586
|
+
class: R([[{ "click-through": d.enableTextFilter || d.showDropDown }], "list-button"])
|
|
574
587
|
}, [
|
|
575
|
-
Le(
|
|
576
|
-
|
|
577
|
-
class: R(["list-button-icon-div", { "bigger-gap":
|
|
588
|
+
Le(v.$slots, "default", {}, void 0, !0),
|
|
589
|
+
H("span", {
|
|
590
|
+
class: R(["list-button-icon-div", { "bigger-gap": d.showDropDown }])
|
|
578
591
|
}, [
|
|
579
|
-
e.customIcon ?
|
|
592
|
+
e.customIcon ? K("", !0) : (x(), M("span", {
|
|
580
593
|
key: 0,
|
|
581
|
-
class: R(["list-button-icon", [{ "rotate-180": !
|
|
594
|
+
class: R(["list-button-icon", [{ "rotate-180": !d.showDropDown }]])
|
|
582
595
|
}, [
|
|
583
|
-
Q(
|
|
596
|
+
Q(he, { "aria-hidden": "true" })
|
|
584
597
|
], 2)),
|
|
585
|
-
e.customIcon ?
|
|
598
|
+
e.customIcon ? K("", !0) : (x(), M("span", {
|
|
586
599
|
key: 1,
|
|
587
|
-
class: R(["list-button-icon", [{ "rotate-180":
|
|
600
|
+
class: R(["list-button-icon", [{ "rotate-180": d.showDropDown }]])
|
|
588
601
|
}, [
|
|
589
|
-
e.customIcon == null ? (x(), ce(
|
|
602
|
+
e.customIcon == null ? (x(), ce(he, {
|
|
590
603
|
key: 0,
|
|
591
604
|
"aria-hidden": "true"
|
|
592
|
-
})) :
|
|
605
|
+
})) : K("", !0)
|
|
593
606
|
], 2)),
|
|
594
|
-
e.customIcon ? (x(),
|
|
595
|
-
(x(), ce(
|
|
596
|
-
])) :
|
|
607
|
+
e.customIcon ? (x(), M("span", nt, [
|
|
608
|
+
(x(), ce(Ne(e.customIcon), { "aria-hidden": "true" }))
|
|
609
|
+
])) : K("", !0)
|
|
597
610
|
], 2)
|
|
598
611
|
], 42, tt));
|
|
599
612
|
}
|
|
600
|
-
}), ye = /* @__PURE__ */
|
|
613
|
+
}), ye = /* @__PURE__ */ V(ot, [["__scopeId", "data-v-01ef8e37"]]), st = /* @__PURE__ */ Z({
|
|
601
614
|
__name: "super-list",
|
|
602
615
|
props: {
|
|
603
616
|
selected: {
|
|
@@ -649,41 +662,41 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
649
662
|
}
|
|
650
663
|
},
|
|
651
664
|
emits: { "update:selected": null },
|
|
652
|
-
setup(e, { expose: i, emit:
|
|
653
|
-
const
|
|
665
|
+
setup(e, { expose: i, emit: d }) {
|
|
666
|
+
const g = d, o = e, f = m([]), w = new qe(), t = m(0), s = O(() => o.forceTextFilterVisibilityTo != null ? o.forceTextFilterVisibilityTo : t.value > o.maxListOptions), v = m(!1), l = m(!1), y = m(!1), k = m(!0), I = m(!1), E = m(!1), N = m(ge), u = m(be), c = m(ye), p = m("");
|
|
654
667
|
F(
|
|
655
|
-
() =>
|
|
668
|
+
() => p.value,
|
|
656
669
|
(n, r) => {
|
|
657
670
|
n !== r && typeof o.options == "function" && ee(n);
|
|
658
671
|
}
|
|
659
672
|
);
|
|
660
673
|
const ne = () => {
|
|
661
|
-
s.value &&
|
|
662
|
-
},
|
|
663
|
-
clearTimeout(W), ne(),
|
|
664
|
-
}, oe =
|
|
665
|
-
n &&
|
|
666
|
-
},
|
|
674
|
+
s.value && u?.value?.blurInput();
|
|
675
|
+
}, q = () => {
|
|
676
|
+
clearTimeout(W), ne(), p.value = "", v.value = !1, k.value = !0;
|
|
677
|
+
}, oe = O(() => E?.value === !0 ? "Error loading data" : I?.value === !0 ? "Loading..." : S(o.selected)), B = (n) => {
|
|
678
|
+
n && g("update:selected", n), q();
|
|
679
|
+
}, S = (n) => Pe(
|
|
667
680
|
n,
|
|
668
681
|
o.customPlaceHolderFunction,
|
|
669
682
|
o.objectLabelKeyName,
|
|
670
683
|
o.enumKeyToLabelObjectArray
|
|
671
684
|
);
|
|
672
685
|
function X() {
|
|
673
|
-
throw
|
|
686
|
+
throw I.value = !0, E.value = !0, new Error("Invalid options argument provided to ListInputComponent");
|
|
674
687
|
}
|
|
675
688
|
function se() {
|
|
676
|
-
throw
|
|
689
|
+
throw I.value = !0, E.value = !0, new Error("Invalid response provided to ListInputComponent, no total count key found");
|
|
677
690
|
}
|
|
678
691
|
function Y() {
|
|
679
|
-
throw
|
|
692
|
+
throw I.value = !0, E.value = !0, new Error("Invalid objectLabelKeyName for provided Dropdown list value.");
|
|
680
693
|
}
|
|
681
694
|
we(() => {
|
|
682
|
-
typeof o.options != "function" && !Array.isArray(o.options) ? X() :
|
|
695
|
+
typeof o.options != "function" && !Array.isArray(o.options) ? X() : L();
|
|
683
696
|
});
|
|
684
|
-
const
|
|
697
|
+
const j = m(!1), G = m(0), C = m(0), A = m(0);
|
|
685
698
|
F(
|
|
686
|
-
() =>
|
|
699
|
+
() => C.value,
|
|
687
700
|
(n, r) => {
|
|
688
701
|
n != r && !l.value && (A.value = n);
|
|
689
702
|
},
|
|
@@ -691,104 +704,104 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
691
704
|
), F(
|
|
692
705
|
() => l.value,
|
|
693
706
|
(n) => {
|
|
694
|
-
n || (A.value =
|
|
707
|
+
n || (A.value = C.value);
|
|
695
708
|
},
|
|
696
709
|
{ immediate: !0 }
|
|
697
710
|
);
|
|
698
|
-
const
|
|
699
|
-
if (typeof o.options == "function" && !Array.isArray(o.options)) return
|
|
700
|
-
const n =
|
|
701
|
-
return n === "" ? r : r.filter((b) =>
|
|
711
|
+
const $ = O(() => {
|
|
712
|
+
if (typeof o.options == "function" && !Array.isArray(o.options)) return f.value;
|
|
713
|
+
const n = p.value, r = f.value;
|
|
714
|
+
return n === "" ? r : r.filter((b) => S(b).toLowerCase().includes(n.toLowerCase()));
|
|
702
715
|
});
|
|
703
716
|
F(
|
|
704
|
-
() =>
|
|
717
|
+
() => $.value,
|
|
705
718
|
(n, r) => {
|
|
706
719
|
JSON.stringify(n) !== JSON.stringify(r) && z();
|
|
707
720
|
},
|
|
708
721
|
{ immediate: !1, deep: !0 }
|
|
709
722
|
);
|
|
710
723
|
const ie = () => {
|
|
711
|
-
|
|
724
|
+
j.value = !0;
|
|
712
725
|
}, z = () => {
|
|
713
726
|
const n = _();
|
|
714
|
-
G.value = n,
|
|
727
|
+
G.value = n, C.value = n > -1 ? n : 0;
|
|
715
728
|
};
|
|
716
729
|
function _() {
|
|
717
730
|
if (o.selected == null) return -1;
|
|
718
|
-
const n =
|
|
731
|
+
const n = f.value.map((b) => S(b)), r = n.filter((b) => b === S(o.selected));
|
|
719
732
|
if (r.length > 1) {
|
|
720
733
|
const b = r.map((D) => n.indexOf(D));
|
|
721
734
|
for (let D = 0; D < b.length; D++) {
|
|
722
|
-
const
|
|
723
|
-
if (
|
|
735
|
+
const P = JSON.stringify(f.value[b[D]]), ae = JSON.stringify(o.selected);
|
|
736
|
+
if (P === ae) return b[D];
|
|
724
737
|
}
|
|
725
738
|
return -1;
|
|
726
739
|
}
|
|
727
|
-
return n.indexOf(
|
|
740
|
+
return n.indexOf(S(o.selected));
|
|
728
741
|
}
|
|
729
742
|
const U = () => {
|
|
730
|
-
|
|
743
|
+
I.value || (v.value || (l.value = !1, z(), le(), v.value = !0), j.value = !1, k.value = !1);
|
|
731
744
|
}, le = () => {
|
|
732
|
-
const n = window
|
|
733
|
-
n && s.value && (re(),
|
|
734
|
-
}, J =
|
|
745
|
+
const n = window?.innerWidth != null && window.innerWidth < 640, r = screen?.width != null && screen.width < 640, b = u.value.textInputRef;
|
|
746
|
+
(n || r) && s.value && (re(), b?.scrollIntoView({ block: "start" }));
|
|
747
|
+
}, J = m(!0);
|
|
735
748
|
let W = setTimeout(() => {
|
|
736
749
|
}, 0);
|
|
737
750
|
function re() {
|
|
738
|
-
|
|
751
|
+
u.value.textInputRef && (clearTimeout(W), J.value = !1, W = setTimeout(() => {
|
|
739
752
|
J.value = !0;
|
|
740
753
|
}, 300));
|
|
741
754
|
}
|
|
742
|
-
const
|
|
743
|
-
s?.value == !0 ?
|
|
755
|
+
const a = () => {
|
|
756
|
+
s?.value == !0 ? u.value.focusInput() : c?.value?.focusInput && c?.value?.focusInput();
|
|
744
757
|
};
|
|
745
|
-
async function
|
|
746
|
-
typeof o.options == "function" ? await ee(
|
|
758
|
+
async function L() {
|
|
759
|
+
typeof o.options == "function" ? await ee(p.value ? p.value : void 0, !0) : (pe(o.options), t.value = f.value.length), T();
|
|
747
760
|
}
|
|
748
|
-
i({ initializeOptions:
|
|
749
|
-
function
|
|
750
|
-
_() == -1 &&
|
|
761
|
+
i({ initializeOptions: L, getLabel: S });
|
|
762
|
+
function T() {
|
|
763
|
+
_() == -1 && f.value && !!f.value[0] && B(f.value[0]);
|
|
751
764
|
}
|
|
752
765
|
async function ee(n, r = !0) {
|
|
753
|
-
|
|
754
|
-
const b = async () => o.options(o.maxListOptions, n || ""), D = (
|
|
755
|
-
(!
|
|
756
|
-
|
|
766
|
+
I.value = r;
|
|
767
|
+
const b = async () => o.options(o.maxListOptions, n || ""), D = (P) => {
|
|
768
|
+
(!P || !("data" in P)) && X(), pe(P.data), xe(P?.data?.length ?? 0).then(() => {
|
|
769
|
+
I.value = !1;
|
|
757
770
|
});
|
|
758
771
|
};
|
|
759
|
-
await
|
|
772
|
+
await w.resetAndExecute(b, D);
|
|
760
773
|
}
|
|
761
774
|
async function xe(n) {
|
|
762
775
|
const r = async () => o.options(1, ""), b = (D) => {
|
|
763
776
|
(!D || !("totalNum" in D)) && se(), t.value = D.totalNum ?? n;
|
|
764
777
|
};
|
|
765
|
-
await
|
|
778
|
+
await w.resetAndExecute(r, b);
|
|
766
779
|
}
|
|
767
|
-
const fe = () =>
|
|
768
|
-
|
|
769
|
-
},
|
|
780
|
+
const fe = () => u?.value?.textInputRef?.getElementsByTagName("li")[C.value] ?? null, Ie = (n) => {
|
|
781
|
+
v.value == !1 ? U() : n && Te(n);
|
|
782
|
+
}, Te = (n) => {
|
|
770
783
|
const r = n.key || n.code;
|
|
771
|
-
(r === "Tab" || r === "Escape") &&
|
|
772
|
-
},
|
|
773
|
-
|
|
784
|
+
(r === "Tab" || r === "Escape") && q(), r === "ArrowDown" && Oe(n), r === "ArrowUp" && Me(n), (r === "Enter" || r === " ") && De(), n.preventDefault(), n.stopPropagation();
|
|
785
|
+
}, De = () => {
|
|
786
|
+
$.value.length > 0 ? (l.value = !0, B($.value[C.value])) : q();
|
|
774
787
|
}, Oe = (n) => {
|
|
775
|
-
k.value = !0,
|
|
788
|
+
k.value = !0, C.value < $.value.length - 1 && (n.preventDefault(), j.value = !1, C.value++, fe()?.focus());
|
|
776
789
|
}, Me = (n) => {
|
|
777
|
-
k.value = !0,
|
|
790
|
+
k.value = !0, C.value > 0 && (n.preventDefault(), j.value = !1, C.value--, fe()?.focus());
|
|
778
791
|
}, Ce = (n) => {
|
|
779
|
-
if (
|
|
780
|
-
|
|
781
|
-
const r =
|
|
782
|
-
if (!(
|
|
792
|
+
if (v?.value === !1) return;
|
|
793
|
+
p.value.length > 0 && (l.value = !0);
|
|
794
|
+
const r = N?.value?.listContainerRef, b = u?.value?.textInputRef, D = n?.relatedTarget && b?.isEqualNode(n?.relatedTarget), P = n?.relatedTarget && r && r.contains(n?.relatedTarget), ae = n?.relatedTarget && r && r.isEqualNode(n?.relatedTarget);
|
|
795
|
+
if (!(P || D)) {
|
|
783
796
|
if (ae) {
|
|
784
|
-
|
|
797
|
+
a();
|
|
785
798
|
return;
|
|
786
799
|
}
|
|
787
|
-
|
|
800
|
+
q();
|
|
788
801
|
}
|
|
789
802
|
};
|
|
790
803
|
function pe(n) {
|
|
791
|
-
Array.isArray(n) || X(), n.length > 0 && typeof n[0] == "object" && ke(n),
|
|
804
|
+
Array.isArray(n) || X(), n.length > 0 && typeof n[0] == "object" && ke(n), f.value = n;
|
|
792
805
|
}
|
|
793
806
|
function ke(n) {
|
|
794
807
|
(!o.objectLabelKeyName || o.objectLabelKeyName.length === 0) && Y();
|
|
@@ -801,21 +814,21 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
801
814
|
unfocus: Ce,
|
|
802
815
|
press: Ie,
|
|
803
816
|
mouseOverList: ie,
|
|
804
|
-
getLabel:
|
|
817
|
+
getLabel: S,
|
|
805
818
|
updatedSelected: B,
|
|
806
|
-
focusInput:
|
|
807
|
-
closeList:
|
|
819
|
+
focusInput: a,
|
|
820
|
+
closeList: q
|
|
808
821
|
};
|
|
809
|
-
return (n, r) => (x(),
|
|
822
|
+
return (n, r) => (x(), M("div", {
|
|
810
823
|
style: { position: "relative" },
|
|
811
824
|
class: R(n.$attrs.class)
|
|
812
825
|
}, [
|
|
813
|
-
Q(
|
|
826
|
+
Q(ge, {
|
|
814
827
|
ref_key: "itemListRef",
|
|
815
|
-
ref:
|
|
816
|
-
"show-drop-down":
|
|
817
|
-
filteredListItems:
|
|
818
|
-
mouseHoveringOnList:
|
|
828
|
+
ref: N,
|
|
829
|
+
"show-drop-down": v.value,
|
|
830
|
+
filteredListItems: $.value,
|
|
831
|
+
mouseHoveringOnList: j.value,
|
|
819
832
|
focusedIndex: A.value,
|
|
820
833
|
selectedIndex: G.value,
|
|
821
834
|
"max-list-height-p-x": e.maxListHeightPX,
|
|
@@ -824,30 +837,30 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
824
837
|
blockListChange: l.value,
|
|
825
838
|
"onUpdate:blockListChange": r[1] || (r[1] = (b) => l.value = b),
|
|
826
839
|
"total-options-count": t.value,
|
|
827
|
-
onReverseDropDownList: r[2] || (r[2] = (b) =>
|
|
840
|
+
onReverseDropDownList: r[2] || (r[2] = (b) => y.value = b),
|
|
828
841
|
enableScrollClose: J.value,
|
|
829
842
|
"enable-text-filter": s.value
|
|
830
843
|
}, {
|
|
831
844
|
default: me(() => [
|
|
832
845
|
Q(ye, {
|
|
833
846
|
ref_key: "dropDownButtonInput",
|
|
834
|
-
ref:
|
|
847
|
+
ref: c,
|
|
835
848
|
"parent-methods": ue,
|
|
836
|
-
"show-drop-down":
|
|
849
|
+
"show-drop-down": v.value,
|
|
837
850
|
"enable-text-filter": s.value,
|
|
838
851
|
"custom-icon": e.customIcon,
|
|
839
|
-
"reverse-drop-down-list":
|
|
852
|
+
"reverse-drop-down-list": y.value
|
|
840
853
|
}, {
|
|
841
854
|
default: me(() => [
|
|
842
855
|
Q(be, {
|
|
843
856
|
ref_key: "dropDownTextInput",
|
|
844
|
-
ref:
|
|
857
|
+
ref: u,
|
|
845
858
|
"enable-text-filter": s.value,
|
|
846
|
-
"show-drop-down":
|
|
859
|
+
"show-drop-down": v.value,
|
|
847
860
|
placeholder: oe.value,
|
|
848
861
|
"enable-button-click": k.value,
|
|
849
862
|
"parent-methods": ue,
|
|
850
|
-
"onUpdate:query": r[0] || (r[0] = (b) =>
|
|
863
|
+
"onUpdate:query": r[0] || (r[0] = (b) => p.value = b)
|
|
851
864
|
}, null, 8, ["enable-text-filter", "show-drop-down", "placeholder", "enable-button-click"])
|
|
852
865
|
]),
|
|
853
866
|
_: 1
|
|
@@ -857,7 +870,7 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
857
870
|
}, 8, ["show-drop-down", "filteredListItems", "mouseHoveringOnList", "focusedIndex", "selectedIndex", "max-list-height-p-x", "list-animation-duration-ms", "blockListChange", "total-options-count", "enableScrollClose", "enable-text-filter"])
|
|
858
871
|
], 2));
|
|
859
872
|
}
|
|
860
|
-
}), lt = /* @__PURE__ */
|
|
873
|
+
}), lt = /* @__PURE__ */ V(st, [["__scopeId", "data-v-e1f079fa"]]);
|
|
861
874
|
export {
|
|
862
875
|
lt as default
|
|
863
876
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jblehm/super-list",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.14",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist/ListInputComponents",
|
|
@@ -28,7 +28,8 @@
|
|
|
28
28
|
"types": "vue-tsc",
|
|
29
29
|
"preview": "vite preview",
|
|
30
30
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
|
31
|
-
"format": "prettier --write src/"
|
|
31
|
+
"format": "prettier --write src/",
|
|
32
|
+
"serve": "vite serve --host"
|
|
32
33
|
},
|
|
33
34
|
"dependencies": {
|
|
34
35
|
"vue": "^3.5.10"
|