@jblehm/super-list 1.0.5 → 1.0.7
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 +74 -78
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
# superlist V1.0.
|
|
1
|
+
# superlist V1.0.7
|
|
2
2
|
An un-styled text searchable combobox
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.list-filter-text-input[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-9b370840]{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-9b370840]:focus-visible,.list-option>span[data-v-9b370840]:focus-visible{outline:none}.list-option-selected[data-v-9b370840]{font-weight:600}.list-option-message[data-v-9b370840]{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-9b370840]:hover,.list-option-active[data-v-9b370840],.list-option-selected[data-v-9b370840]:hover,.list-option[data-v-9b370840]: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-9b370840]{display:flex;height:1rem;width:1rem;position:absolute;right:.7rem;margin-top:-.1rem;align-self:center}.list-item-span[data-v-9b370840]{padding:.5rem .75rem;width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-item-extra-padding[data-v-9b370840]{padding-right:1.75rem}.list-normal[data-v-204dcd0d]{top:var(--parent-y)}.list-reverse[data-v-204dcd0d]{bottom:var(--parent-y)}.select-list[data-v-204dcd0d]{--parent-width: var(--4c386c4b);--parent-x: var(--10585e06);--parent-y: var(--10585684);--duration: var(--5530ef9f);--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-204dcd0d]:focus-visible,.select-list>ul[data-v-204dcd0d]:focus-visible,.super-list-button-container[data-v-204dcd0d]:focus-visible{outline:none}.super-list-button-container[data-v-204dcd0d]{height:100%;width:100%}.select-list.select-list-open[data-v-204dcd0d]{z-index:999999;--max-height: var(--d3e84810);max-height:var(--max-height, 0)}.select-list.no-scroll[data-v-204dcd0d]{overflow:hidden}.select-list-fixed[data-v-204dcd0d]{position:fixed;opacity:1;visibility:visible}.list-content[data-v-204dcd0d]{--duration: var(--5530ef9f);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-204dcd0d]{border-radius:var(--border-radius)}@media (min-width: 640px){.select-list.select-list-scrollable[data-v-204dcd0d]{border-radius:var(--border-radius) 0 0 var(--border-radius)}.list-content[data-v-204dcd0d]{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,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as Q, ref as f, computed as D, openBlock as
|
|
1
|
+
import { defineComponent as Q, ref as f, computed as D, openBlock as L, createElementBlock as T, withKeys as m, normalizeClass as F, createElementVNode as H, 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
2
|
import './index.css';class He {
|
|
3
3
|
eventsTypes = ["resize", "load", "scroll", "wheel", "touchmove"];
|
|
4
4
|
config = {
|
|
@@ -120,7 +120,7 @@ const qe = ["tabindex", "placeholder", "size"], je = /* @__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,27 +129,26 @@ const qe = ["tabindex", "placeholder", "size"], je = /* @__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,
|
|
136
136
|
onKeydown: [
|
|
137
|
-
c[0] || (c[0] = m((
|
|
138
|
-
c[1] || (c[1] = m((
|
|
139
|
-
c[2] || (c[2] = m((
|
|
140
|
-
c[3] || (c[3] = m((
|
|
141
|
-
c[4] || (c[4] = m((
|
|
137
|
+
c[0] || (c[0] = m((w) => e.parentMethods.press(w), ["enter"])),
|
|
138
|
+
c[1] || (c[1] = m((w) => e.parentMethods.press(), ["space"])),
|
|
139
|
+
c[2] || (c[2] = m((w) => e.parentMethods.press(w), ["esc"])),
|
|
140
|
+
c[3] || (c[3] = m((w) => e.parentMethods.press(w), ["up"])),
|
|
141
|
+
c[4] || (c[4] = m((w) => e.parentMethods.press(w), ["down"]))
|
|
142
142
|
],
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
onInput: c[8] || (c[8] = (L) => t(L)),
|
|
143
|
+
onFocusout: c[5] || (c[5] = (w) => a(w)),
|
|
144
|
+
onClick: c[6] || (c[6] = (w) => e.parentMethods.openList()),
|
|
145
|
+
onInput: c[7] || (c[7] = (w) => t(w)),
|
|
147
146
|
type: "text",
|
|
148
147
|
"aria-autocomplete": "none",
|
|
149
148
|
autocomplete: "off",
|
|
150
149
|
placeholder: e.placeholder,
|
|
151
150
|
size: l.value,
|
|
152
|
-
class:
|
|
151
|
+
class: F([[
|
|
153
152
|
g.value,
|
|
154
153
|
p.value,
|
|
155
154
|
{ "text-filter-disabled": !e.enableTextFilter }
|
|
@@ -161,7 +160,7 @@ const qe = ["tabindex", "placeholder", "size"], je = /* @__PURE__ */ Q({
|
|
|
161
160
|
for (const [h, o] of s)
|
|
162
161
|
b[h] = o;
|
|
163
162
|
return b;
|
|
164
|
-
}, be = /* @__PURE__ */ $(je, [["__scopeId", "data-v-
|
|
163
|
+
}, be = /* @__PURE__ */ $(je, [["__scopeId", "data-v-06682ad2"]]), $e = {}, Ke = {
|
|
165
164
|
xmlns: "http://www.w3.org/2000/svg",
|
|
166
165
|
fill: "currentColor",
|
|
167
166
|
"aria-hidden": "true",
|
|
@@ -169,7 +168,7 @@ const qe = ["tabindex", "placeholder", "size"], je = /* @__PURE__ */ Q({
|
|
|
169
168
|
viewBox: "0 -16 16 17"
|
|
170
169
|
};
|
|
171
170
|
function Ve(e, s) {
|
|
172
|
-
return
|
|
171
|
+
return L(), T("svg", Ke, s[0] || (s[0] = [
|
|
173
172
|
H("path", {
|
|
174
173
|
"shape-rendering": "geometricPrecision",
|
|
175
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"
|
|
@@ -218,13 +217,13 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
218
217
|
const t = (Array.isArray(b.value) ? b.value : [b.value])[s.focusedIndex];
|
|
219
218
|
return t && typeof t == "object" && "scrollIntoView" in t && typeof t.scrollIntoView == "function" ? t : null;
|
|
220
219
|
});
|
|
221
|
-
|
|
220
|
+
N(
|
|
222
221
|
() => s.showDropDown,
|
|
223
222
|
() => o()
|
|
224
|
-
),
|
|
223
|
+
), N(
|
|
225
224
|
() => s.listElementOpenAndVisible,
|
|
226
225
|
() => i()
|
|
227
|
-
),
|
|
226
|
+
), N(
|
|
228
227
|
() => h.value,
|
|
229
228
|
() => i()
|
|
230
229
|
);
|
|
@@ -237,8 +236,8 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
237
236
|
const l = a.offsetTop - t.scrollTop < 0, g = a.offsetTop + a.offsetHeight - t.scrollTop > t.clientHeight;
|
|
238
237
|
l && (t.scrollTop = a.offsetTop), g && (t.scrollTop = a.offsetTop + a.clientHeight - t.clientHeight);
|
|
239
238
|
}
|
|
240
|
-
return (a, t) => (
|
|
241
|
-
(
|
|
239
|
+
return (a, t) => (L(), T(de, null, [
|
|
240
|
+
(L(!0), T(de, null, Ee(e.filteredListItems, (l, g) => (L(), T("li", {
|
|
242
241
|
key: g,
|
|
243
242
|
ref_for: !0,
|
|
244
243
|
ref: "items",
|
|
@@ -254,7 +253,7 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
254
253
|
onFocusout: t[5] || (t[5] = (p) => e.parentMethods.unfocus(p)),
|
|
255
254
|
tabindex: "-1",
|
|
256
255
|
onMousedown: te((p) => e.parentMethods.updatedSelected(l), ["left"]),
|
|
257
|
-
class:
|
|
256
|
+
class: F([
|
|
258
257
|
{ "list-option-selected": e.selectedIndex === g },
|
|
259
258
|
{
|
|
260
259
|
"list-option-active": e.filteredListItems.length === 1 || e.focusedIndex === g && !e.mouseHoveringOnList
|
|
@@ -263,15 +262,15 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
263
262
|
])
|
|
264
263
|
}, [
|
|
265
264
|
H("span", {
|
|
266
|
-
class:
|
|
265
|
+
class: F(["list-item-span", { "list-item-extra-padding": e.selectedIndex === g }])
|
|
267
266
|
}, ve(e.parentMethods.getLabel(l)), 3),
|
|
268
|
-
e.selectedIndex === g ? (
|
|
267
|
+
e.selectedIndex === g ? (L(), ce(ze, {
|
|
269
268
|
key: 0,
|
|
270
269
|
class: "list-item-icon",
|
|
271
270
|
"aria-hidden": "true"
|
|
272
271
|
})) : j("", !0)
|
|
273
272
|
], 42, Xe))), 128)),
|
|
274
|
-
e.filteredListItems.length === 0 ? (
|
|
273
|
+
e.filteredListItems.length === 0 ? (L(), T("li", {
|
|
275
274
|
key: 0,
|
|
276
275
|
onKeyup: [
|
|
277
276
|
t[6] || (t[6] = m((l) => e.parentMethods.press(l), ["enter"])),
|
|
@@ -289,7 +288,7 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
289
288
|
}, t[20] || (t[20] = [
|
|
290
289
|
H("span", { class: "list-item-span" }, "No Items To Display.", -1)
|
|
291
290
|
]), 32)) : j("", !0),
|
|
292
|
-
e.totalOptionsCount && e.totalOptionsCount > (e.filteredListItems?.length || 0) ? (
|
|
291
|
+
e.totalOptionsCount && e.totalOptionsCount > (e.filteredListItems?.length || 0) ? (L(), T("li", {
|
|
293
292
|
key: 1,
|
|
294
293
|
onKeyup: [
|
|
295
294
|
t[13] || (t[13] = m((l) => e.parentMethods.press(l), ["enter"])),
|
|
@@ -360,19 +359,19 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
360
359
|
emits: ["reverseDropDownList"],
|
|
361
360
|
setup(e, { expose: s, emit: b }) {
|
|
362
361
|
Ae((u) => ({
|
|
363
|
-
"
|
|
364
|
-
"
|
|
365
|
-
|
|
366
|
-
"
|
|
367
|
-
|
|
362
|
+
"4c386c4b": k.value,
|
|
363
|
+
"10585e06": ne.value,
|
|
364
|
+
10585684: P.value,
|
|
365
|
+
"5530ef9f": R.value,
|
|
366
|
+
d3e84810: Y.value
|
|
368
367
|
}));
|
|
369
|
-
const h = b, o = e, i = f(null), a = f(null), t = f(null), l = f(0), g = f(0), p = f(0),
|
|
370
|
-
|
|
368
|
+
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);
|
|
369
|
+
N(
|
|
371
370
|
() => C.value,
|
|
372
371
|
(u) => h("reverseDropDownList", u),
|
|
373
372
|
{ immediate: !0 }
|
|
374
373
|
);
|
|
375
|
-
const ne = D(() => l.value + "px"), P = D(() =>
|
|
374
|
+
const ne = D(() => l.value + "px"), P = D(() => S.value + "px");
|
|
376
375
|
s({ listContainerRef: t });
|
|
377
376
|
const oe = (u) => {
|
|
378
377
|
u?.key && u.key === " " && u.preventDefault();
|
|
@@ -395,7 +394,7 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
395
394
|
return p.value < Z();
|
|
396
395
|
}
|
|
397
396
|
const Y = D(() => (o.maxListHeightPX || 0) + "px"), R = D(() => (o.listAnimationDurationMs || 0) + "ms"), G = D(() => o.blockListChange ? c.value : o.filteredListItems);
|
|
398
|
-
|
|
397
|
+
N(
|
|
399
398
|
() => G,
|
|
400
399
|
(u) => {
|
|
401
400
|
u && (c.value = u.value);
|
|
@@ -405,14 +404,14 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
405
404
|
let O = setTimeout(() => {
|
|
406
405
|
}, 0), A = null;
|
|
407
406
|
function q() {
|
|
408
|
-
|
|
407
|
+
w.value = M(), clearTimeout(O), A && A.observe(), d.value = !0, K(void 0);
|
|
409
408
|
}
|
|
410
409
|
function ie() {
|
|
411
410
|
clearTimeout(O), O = setTimeout(() => {
|
|
412
411
|
o.showDropDown || (d.value = !1, A && A.unobserve());
|
|
413
412
|
}, o.listAnimationDurationMs + 50);
|
|
414
413
|
}
|
|
415
|
-
|
|
414
|
+
N(
|
|
416
415
|
() => o.showDropDown,
|
|
417
416
|
(u, y) => {
|
|
418
417
|
u !== y && (u ? q() : ie());
|
|
@@ -420,7 +419,7 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
420
419
|
{ immediate: !0 }
|
|
421
420
|
);
|
|
422
421
|
function K(u) {
|
|
423
|
-
X(),
|
|
422
|
+
X(), Se(() => X()), _(u);
|
|
424
423
|
}
|
|
425
424
|
function _(u) {
|
|
426
425
|
if (!o.enableScrollClose || !u?.target || typeof t?.value?.contains != "function" || u?.target?.nodeType == null) return;
|
|
@@ -437,8 +436,8 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
437
436
|
}
|
|
438
437
|
function U() {
|
|
439
438
|
if (i?.value == null || t?.value == null) return;
|
|
440
|
-
const u = re().getBoundingClientRect(), y = t.value.getBoundingClientRect(), x =
|
|
441
|
-
C.value ?
|
|
439
|
+
const u = re().getBoundingClientRect(), y = t.value.getBoundingClientRect(), x = S.value, ee = l.value;
|
|
440
|
+
C.value ? S.value = x - (u.top - y.bottom) : S.value = x - (y.top - u.bottom), l.value = ee - (y.left - u.left);
|
|
442
441
|
}
|
|
443
442
|
function J() {
|
|
444
443
|
return (i?.value).getElementsByTagName("button")[0];
|
|
@@ -448,22 +447,22 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
448
447
|
}
|
|
449
448
|
return ye(() => {
|
|
450
449
|
A = new He(K, J()), setTimeout(() => K(void 0), 250);
|
|
451
|
-
}),
|
|
450
|
+
}), Ne(() => {
|
|
452
451
|
A?.unobserve();
|
|
453
|
-
}), (u, y) => (
|
|
452
|
+
}), (u, y) => (L(), T(de, null, [
|
|
454
453
|
H("div", {
|
|
455
454
|
ref_key: "dropDownButtonContainer",
|
|
456
455
|
ref: i,
|
|
457
456
|
class: "super-list-button-container"
|
|
458
457
|
}, [
|
|
459
|
-
|
|
458
|
+
we(u.$slots, "default", {}, void 0, !0)
|
|
460
459
|
], 512),
|
|
461
460
|
H("div", {
|
|
462
461
|
ref_key: "listContainerRef",
|
|
463
462
|
ref: t,
|
|
464
463
|
onMouseenter: y[0] || (y[0] = (x) => e.parentMethods.mouseOverList()),
|
|
465
464
|
tabindex: "-1",
|
|
466
|
-
class:
|
|
465
|
+
class: F([
|
|
467
466
|
"select-list",
|
|
468
467
|
C.value ? "list-reverse" : "list-normal",
|
|
469
468
|
{ "select-list-open": e.showDropDown },
|
|
@@ -494,7 +493,7 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
494
493
|
], 34)
|
|
495
494
|
], 64));
|
|
496
495
|
}
|
|
497
|
-
}), he = /* @__PURE__ */ $(Qe, [["__scopeId", "data-v-
|
|
496
|
+
}), he = /* @__PURE__ */ $(Qe, [["__scopeId", "data-v-204dcd0d"]]), Ze = {}, Ye = {
|
|
498
497
|
xmlns: "http://www.w3.org/2000/svg",
|
|
499
498
|
fill: "currentColor",
|
|
500
499
|
"aria-hidden": "true",
|
|
@@ -502,7 +501,7 @@ const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
502
501
|
viewBox: "0 0 12 6"
|
|
503
502
|
};
|
|
504
503
|
function Ge(e, s) {
|
|
505
|
-
return
|
|
504
|
+
return L(), T("svg", Ye, s[0] || (s[0] = [
|
|
506
505
|
H("path", {
|
|
507
506
|
"shape-rendering": "geometricPrecision",
|
|
508
507
|
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"
|
|
@@ -543,51 +542,48 @@ const ge = /* @__PURE__ */ $(Ze, [["render", Ge]]), _e = ["tabindex"], et = {
|
|
|
543
542
|
s.enableTextFilter || s.parentMethods.openList();
|
|
544
543
|
}
|
|
545
544
|
function h(o) {
|
|
546
|
-
s.enableTextFilter ? (s.parentMethods.focusInput(), o.stopPropagation(), o.preventDefault()) : s.parentMethods.press(o);
|
|
545
|
+
s.enableTextFilter ? (s.parentMethods.focusInput(), o.stopPropagation(), o.preventDefault()) : (console.log("pressing from button"), s.parentMethods.press(o));
|
|
547
546
|
}
|
|
548
|
-
return (o, i) => (
|
|
547
|
+
return (o, i) => (L(), T("button", {
|
|
549
548
|
tabindex: e.enableTextFilter ? -1 : 0,
|
|
550
|
-
|
|
549
|
+
onKeydown: [
|
|
551
550
|
i[0] || (i[0] = m((a) => h(a), ["enter"])),
|
|
552
551
|
i[1] || (i[1] = m((a) => e.parentMethods.press(a), ["space"])),
|
|
553
|
-
i[2] || (i[2] = m((a) => e.parentMethods.press(a), ["esc"]))
|
|
554
|
-
],
|
|
555
|
-
onKeydown: [
|
|
552
|
+
i[2] || (i[2] = m((a) => e.parentMethods.press(a), ["esc"])),
|
|
556
553
|
i[3] || (i[3] = m((a) => e.parentMethods.press(a), ["up"])),
|
|
557
554
|
i[4] || (i[4] = m((a) => e.parentMethods.press(a), ["down"]))
|
|
558
555
|
],
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
onClick: i[7] || (i[7] = (a) => b()),
|
|
556
|
+
onFocusout: i[5] || (i[5] = (a) => e.parentMethods.unfocus(a)),
|
|
557
|
+
onClick: i[6] || (i[6] = (a) => b()),
|
|
562
558
|
type: "button",
|
|
563
|
-
class:
|
|
559
|
+
class: F([[{ "click-through": s.enableTextFilter || s.showDropDown }], "list-button"])
|
|
564
560
|
}, [
|
|
565
|
-
|
|
561
|
+
we(o.$slots, "default", {}, void 0, !0),
|
|
566
562
|
H("span", {
|
|
567
|
-
class:
|
|
563
|
+
class: F(["list-button-icon-div", { "bigger-gap": s.showDropDown }])
|
|
568
564
|
}, [
|
|
569
|
-
e.customIcon ? j("", !0) : (
|
|
565
|
+
e.customIcon ? j("", !0) : (L(), T("span", {
|
|
570
566
|
key: 0,
|
|
571
|
-
class:
|
|
567
|
+
class: F(["list-button-icon", [{ "rotate-180": !s.showDropDown }]])
|
|
572
568
|
}, [
|
|
573
569
|
W(ge, { "aria-hidden": "true" })
|
|
574
570
|
], 2)),
|
|
575
|
-
e.customIcon ? j("", !0) : (
|
|
571
|
+
e.customIcon ? j("", !0) : (L(), T("span", {
|
|
576
572
|
key: 1,
|
|
577
|
-
class:
|
|
573
|
+
class: F(["list-button-icon", [{ "rotate-180": s.showDropDown }]])
|
|
578
574
|
}, [
|
|
579
|
-
e.customIcon == null ? (
|
|
575
|
+
e.customIcon == null ? (L(), ce(ge, {
|
|
580
576
|
key: 0,
|
|
581
577
|
"aria-hidden": "true"
|
|
582
578
|
})) : j("", !0)
|
|
583
579
|
], 2)),
|
|
584
|
-
e.customIcon ? (
|
|
585
|
-
(
|
|
580
|
+
e.customIcon ? (L(), T("span", et, [
|
|
581
|
+
(L(), ce(Fe(e.customIcon), { "aria-hidden": "true" }))
|
|
586
582
|
])) : j("", !0)
|
|
587
583
|
], 2)
|
|
588
584
|
], 42, _e));
|
|
589
585
|
}
|
|
590
|
-
}), nt = /* @__PURE__ */ $(tt, [["__scopeId", "data-v-
|
|
586
|
+
}), nt = /* @__PURE__ */ $(tt, [["__scopeId", "data-v-80cac867"]]), ot = /* @__PURE__ */ Q({
|
|
591
587
|
__name: "super-list",
|
|
592
588
|
props: {
|
|
593
589
|
selected: {
|
|
@@ -640,8 +636,8 @@ const ge = /* @__PURE__ */ $(Ze, [["render", Ge]]), _e = ["tabindex"], et = {
|
|
|
640
636
|
},
|
|
641
637
|
emits: { "update:selected": null },
|
|
642
638
|
setup(e, { expose: s, emit: b }) {
|
|
643
|
-
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),
|
|
644
|
-
|
|
639
|
+
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("");
|
|
640
|
+
N(
|
|
645
641
|
() => E.value,
|
|
646
642
|
(n, r) => {
|
|
647
643
|
n !== r && typeof o.options == "function" && ee(n);
|
|
@@ -675,13 +671,13 @@ const ge = /* @__PURE__ */ $(Ze, [["render", Ge]]), _e = ["tabindex"], et = {
|
|
|
675
671
|
typeof o.options != "function" && !Array.isArray(o.options) ? z() : y();
|
|
676
672
|
});
|
|
677
673
|
const R = f(!1), G = f(0), O = f(0), A = f(0);
|
|
678
|
-
|
|
674
|
+
N(
|
|
679
675
|
() => O.value,
|
|
680
676
|
(n, r) => {
|
|
681
677
|
n != r && !p.value && (A.value = n);
|
|
682
678
|
},
|
|
683
679
|
{ immediate: !0 }
|
|
684
|
-
),
|
|
680
|
+
), N(
|
|
685
681
|
() => p.value,
|
|
686
682
|
(n) => {
|
|
687
683
|
n || (A.value = O.value);
|
|
@@ -693,7 +689,7 @@ const ge = /* @__PURE__ */ $(Ze, [["render", Ge]]), _e = ["tabindex"], et = {
|
|
|
693
689
|
const n = E.value, r = i.value;
|
|
694
690
|
return n === "" ? r : r.filter((v) => M(v).toLowerCase().includes(n.toLowerCase()));
|
|
695
691
|
});
|
|
696
|
-
|
|
692
|
+
N(
|
|
697
693
|
() => q.value,
|
|
698
694
|
(n, r) => {
|
|
699
695
|
JSON.stringify(n) !== JSON.stringify(r) && K();
|
|
@@ -743,13 +739,13 @@ const ge = /* @__PURE__ */ $(Ze, [["render", Ge]]), _e = ["tabindex"], et = {
|
|
|
743
739
|
async function ee(n, r = !0) {
|
|
744
740
|
d.value = r;
|
|
745
741
|
const v = async () => o.options(o.maxListOptions, n || ""), I = (B) => {
|
|
746
|
-
(!B || !("data" in B)) && z(), pe(B.data),
|
|
742
|
+
(!B || !("data" in B)) && z(), pe(B.data), Le(B?.data?.length ?? 0).then(() => {
|
|
747
743
|
d.value = !1;
|
|
748
744
|
});
|
|
749
745
|
};
|
|
750
746
|
await a.resetAndExecute(v, I);
|
|
751
747
|
}
|
|
752
|
-
async function
|
|
748
|
+
async function Le(n) {
|
|
753
749
|
const r = async () => o.options(1, ""), v = (I) => {
|
|
754
750
|
(!I || !("totalNum" in I)) && se(), t.value = I.totalNum ?? n;
|
|
755
751
|
};
|
|
@@ -769,7 +765,7 @@ const ge = /* @__PURE__ */ $(Ze, [["render", Ge]]), _e = ["tabindex"], et = {
|
|
|
769
765
|
}, Me = (n) => {
|
|
770
766
|
if (g?.value === !1) return;
|
|
771
767
|
E.value.length > 0 && (p.value = !0);
|
|
772
|
-
const r =
|
|
768
|
+
const r = w?.value?.listContainerRef, v = C?.value?.textInputRef, I = n?.relatedTarget && v?.isEqualNode(n?.relatedTarget), B = n?.relatedTarget && r && r.contains(n?.relatedTarget), ae = n?.relatedTarget && r && r.isEqualNode(n?.relatedTarget);
|
|
773
769
|
if (!(B || I)) {
|
|
774
770
|
if (ae) {
|
|
775
771
|
u();
|
|
@@ -797,13 +793,13 @@ const ge = /* @__PURE__ */ $(Ze, [["render", Ge]]), _e = ["tabindex"], et = {
|
|
|
797
793
|
focusInput: u,
|
|
798
794
|
closeList: P
|
|
799
795
|
};
|
|
800
|
-
return (n, r) => (
|
|
796
|
+
return (n, r) => (L(), T("div", {
|
|
801
797
|
style: { position: "relative" },
|
|
802
|
-
class:
|
|
798
|
+
class: F(n.$attrs.class)
|
|
803
799
|
}, [
|
|
804
800
|
W(he, {
|
|
805
801
|
ref_key: "itemListRef",
|
|
806
|
-
ref:
|
|
802
|
+
ref: w,
|
|
807
803
|
"show-drop-down": g.value,
|
|
808
804
|
filteredListItems: q.value,
|
|
809
805
|
mouseHoveringOnList: R.value,
|
|
@@ -815,7 +811,7 @@ const ge = /* @__PURE__ */ $(Ze, [["render", Ge]]), _e = ["tabindex"], et = {
|
|
|
815
811
|
blockListChange: p.value,
|
|
816
812
|
"onUpdate:blockListChange": r[1] || (r[1] = (v) => p.value = v),
|
|
817
813
|
"total-options-count": t.value,
|
|
818
|
-
onReverseDropDownList: r[2] || (r[2] = (v) =>
|
|
814
|
+
onReverseDropDownList: r[2] || (r[2] = (v) => S.value = v),
|
|
819
815
|
enableScrollClose: U.value
|
|
820
816
|
}, {
|
|
821
817
|
default: me(() => [
|
|
@@ -824,7 +820,7 @@ const ge = /* @__PURE__ */ $(Ze, [["render", Ge]]), _e = ["tabindex"], et = {
|
|
|
824
820
|
"show-drop-down": g.value,
|
|
825
821
|
"enable-text-filter": l.value,
|
|
826
822
|
"custom-icon": e.customIcon,
|
|
827
|
-
"reverse-drop-down-list":
|
|
823
|
+
"reverse-drop-down-list": S.value
|
|
828
824
|
}, {
|
|
829
825
|
default: me(() => [
|
|
830
826
|
W(be, {
|