@jblehm/super-list 1.0.27 → 1.0.28
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 +91 -87
- package/dist/super-list.js.map +1 -1
- package/dist/super-list.umd.cjs +2 -2
- package/dist/super-list.umd.cjs.map +1 -1
- package/dist/super-list.vue.d.ts +9 -0
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.list-filter-text-input[data-v-acc7ac24]{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-acc7ac24]:focus,.list-filter-text-input[data-v-acc7ac24]:focus-visible,.list-filter-text-input[data-v-acc7ac24]:active{text-align:left}.click-through[data-v-acc7ac24]{pointer-events:none}.dark-placeholder-text[data-v-acc7ac24]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-acc7ac24]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-acc7ac24]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-acc7ac24]{font-size:.875rem;line-height:1.5rem}}.list-option[data-v-e4eeb2f7]{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-e4eeb2f7]:focus-visible,.list-option>span[data-v-e4eeb2f7]:focus-visible{outline:none}.list-option-selected[data-v-e4eeb2f7]{font-weight:600}.list-option-message[data-v-e4eeb2f7]{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-e4eeb2f7]:hover,.list-option-active[data-v-e4eeb2f7],.list-option-selected[data-v-e4eeb2f7]:hover,.list-option[data-v-e4eeb2f7]: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-e4eeb2f7]{display:flex;height:1rem;width:1rem;position:absolute;right:.7rem;margin-top:-.1rem;align-self:center}.list-item-span[data-v-e4eeb2f7]{padding:.5rem 1.75rem .5rem .75rem;width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-normal[data-v-
|
|
1
|
+
.list-filter-text-input[data-v-acc7ac24]{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-acc7ac24]:focus,.list-filter-text-input[data-v-acc7ac24]:focus-visible,.list-filter-text-input[data-v-acc7ac24]:active{text-align:left}.click-through[data-v-acc7ac24]{pointer-events:none}.dark-placeholder-text[data-v-acc7ac24]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-acc7ac24]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-acc7ac24]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-acc7ac24]{font-size:.875rem;line-height:1.5rem}}.list-option[data-v-e4eeb2f7]{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-e4eeb2f7]:focus-visible,.list-option>span[data-v-e4eeb2f7]:focus-visible{outline:none}.list-option-selected[data-v-e4eeb2f7]{font-weight:600}.list-option-message[data-v-e4eeb2f7]{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-e4eeb2f7]:hover,.list-option-active[data-v-e4eeb2f7],.list-option-selected[data-v-e4eeb2f7]:hover,.list-option[data-v-e4eeb2f7]: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-e4eeb2f7]{display:flex;height:1rem;width:1rem;position:absolute;right:.7rem;margin-top:-.1rem;align-self:center}.list-item-span[data-v-e4eeb2f7]{padding:.5rem 1.75rem .5rem .75rem;width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-normal[data-v-53c634fd]{top:var(--parent-y)}.list-reverse[data-v-53c634fd]{bottom:var(--parent-y)}.select-list[data-v-53c634fd]{--parent-width: var(--220f507e);--parent-x: var(--935a72a0);--parent-y: var(--935a6b1e);--duration: var(--4076fb5c);--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,box-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-53c634fd]:focus-visible,.select-list>ul[data-v-53c634fd]:focus-visible,.super-list-button-container[data-v-53c634fd]:focus-visible{outline:none}.super-list-button-container[data-v-53c634fd]{height:100%;width:100%}.select-list.select-list-open[data-v-53c634fd]{z-index:999999;--max-height: var(--51ba7f6b);max-height:var(--max-height, 0)}.select-list.no-scroll[data-v-53c634fd]{overflow:hidden}.select-list-fixed[data-v-53c634fd]{position:fixed;opacity:1;visibility:visible}.list-content[data-v-53c634fd]{--duration: var(--4076fb5c);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-53c634fd]{border-radius:var(--border-radius)}.select-list[data-v-53c634fd]:not(.select-list-fixed){transition:none;box-shadow:none!important}@media (min-width: 640px){.select-list.select-list-scrollable[data-v-53c634fd]{border-radius:var(--border-radius) 0 0 var(--border-radius)}.list-content[data-v-53c634fd]{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-c65b5182]{box-sizing:border-box}
|
package/dist/super-list.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as Y, ref as f, computed as O, createElementBlock as M, openBlock as
|
|
1
|
+
import { defineComponent as Y, ref as f, computed as O, createElementBlock as M, openBlock as T, normalizeClass as R, withKeys as b, createElementVNode as B, useTemplateRef as Ee, watch as F, Fragment as ce, createCommentVNode as $, renderList as Ae, withModifiers as oe, createBlock as fe, toDisplayString as me, useCssVars as Fe, onMounted as Le, onUnmounted as Se, renderSlot as xe, createVNode as Z, nextTick as Be, resolveDynamicComponent as Ne, withCtx as be } from "vue";
|
|
2
2
|
import './index.css';class He {
|
|
3
3
|
eventsTypes = ["resize", "load", "scroll", "wheel", "touchmove"];
|
|
4
4
|
config = {
|
|
@@ -120,9 +120,9 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Y({
|
|
|
120
120
|
h?.target?.value != null && v("update:query", h.target.value);
|
|
121
121
|
}
|
|
122
122
|
const c = O(() => {
|
|
123
|
-
const h = d?.value ? d.value.length : 0,
|
|
124
|
-
return h > 0 ? h :
|
|
125
|
-
}), l = O(() => o.enableButtonClick === !0 && o.enableTextFilter === !0 ? "" : "click-through"),
|
|
123
|
+
const h = d?.value ? d.value.length : 0, y = o.placeholder?.length || 0;
|
|
124
|
+
return h > 0 ? h : y > 0 ? y : 5;
|
|
125
|
+
}), l = O(() => o.enableButtonClick === !0 && o.enableTextFilter === !0 ? "" : "click-through"), g = O(() => o.showDropDown && !o.enableTextFilter || !o.showDropDown ? "dark-placeholder-text" : "light-placeholder-text");
|
|
126
126
|
function k() {
|
|
127
127
|
if (d?.value) {
|
|
128
128
|
const h = d.value;
|
|
@@ -132,20 +132,20 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Y({
|
|
|
132
132
|
function I() {
|
|
133
133
|
d?.value && d.value.focus();
|
|
134
134
|
}
|
|
135
|
-
return i({ blurInput: k, focusInput: I, textInputRef: d }), (h,
|
|
135
|
+
return i({ blurInput: k, focusInput: I, textInputRef: d }), (h, y) => (T(), M("input", {
|
|
136
136
|
ref_key: "textInputRef",
|
|
137
137
|
ref: d,
|
|
138
138
|
tabindex: e.enableTextFilter ? 0 : -1,
|
|
139
139
|
onKeydown: [
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
140
|
+
y[0] || (y[0] = b((m) => e.parentMethods.press(m), ["enter"])),
|
|
141
|
+
y[1] || (y[1] = b((m) => e.parentMethods.press(), ["space"])),
|
|
142
|
+
y[2] || (y[2] = b((m) => e.parentMethods.press(m), ["esc"])),
|
|
143
|
+
y[3] || (y[3] = b((m) => e.parentMethods.press(m), ["up"])),
|
|
144
|
+
y[4] || (y[4] = b((m) => e.parentMethods.press(m), ["down"]))
|
|
145
145
|
],
|
|
146
|
-
onFocusin:
|
|
147
|
-
onFocusout:
|
|
148
|
-
onInput:
|
|
146
|
+
onFocusin: y[5] || (y[5] = (m) => w(m)),
|
|
147
|
+
onFocusout: y[6] || (y[6] = (m) => t(m)),
|
|
148
|
+
onInput: y[7] || (y[7] = (m) => s(m)),
|
|
149
149
|
type: "text",
|
|
150
150
|
"aria-autocomplete": "none",
|
|
151
151
|
autocomplete: "off",
|
|
@@ -153,7 +153,7 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Y({
|
|
|
153
153
|
size: c.value,
|
|
154
154
|
class: R([[
|
|
155
155
|
l.value,
|
|
156
|
-
|
|
156
|
+
g.value,
|
|
157
157
|
{ "text-filter-disabled": !e.enableTextFilter }
|
|
158
158
|
], "list-filter-text-input"])
|
|
159
159
|
}, null, 42, je));
|
|
@@ -171,8 +171,8 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Y({
|
|
|
171
171
|
viewBox: "0 -16 16 17"
|
|
172
172
|
};
|
|
173
173
|
function ze(e, i) {
|
|
174
|
-
return
|
|
175
|
-
|
|
174
|
+
return T(), M("svg", Ve, i[0] || (i[0] = [
|
|
175
|
+
B("path", {
|
|
176
176
|
"shape-rendering": "geometricPrecision",
|
|
177
177
|
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"
|
|
178
178
|
}, null, -1)
|
|
@@ -239,8 +239,8 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
239
239
|
const s = w.offsetTop - t.scrollTop < 0, c = w.offsetTop + w.offsetHeight - t.scrollTop > t.clientHeight;
|
|
240
240
|
s && (t.scrollTop = w.offsetTop), c && (t.scrollTop = w.offsetTop + w.clientHeight - t.clientHeight);
|
|
241
241
|
}
|
|
242
|
-
return (w, t) => (
|
|
243
|
-
(
|
|
242
|
+
return (w, t) => (T(), M(ce, null, [
|
|
243
|
+
(T(!0), M(ce, null, Ae(e.filteredListItems, (s, c) => (T(), M("li", {
|
|
244
244
|
key: c,
|
|
245
245
|
ref_for: !0,
|
|
246
246
|
ref: "items",
|
|
@@ -264,14 +264,14 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
264
264
|
"list-option"
|
|
265
265
|
])
|
|
266
266
|
}, [
|
|
267
|
-
|
|
268
|
-
e.selectedIndex === c ? (
|
|
267
|
+
B("span", Je, me(e.parentMethods.getLabel(s)), 1),
|
|
268
|
+
e.selectedIndex === c ? (T(), fe(Xe, {
|
|
269
269
|
key: 0,
|
|
270
270
|
class: "list-item-icon",
|
|
271
271
|
"aria-hidden": "true"
|
|
272
272
|
})) : $("", !0)
|
|
273
273
|
], 42, Ue))), 128)),
|
|
274
|
-
e.filteredListItems.length === 0 ? (
|
|
274
|
+
e.filteredListItems.length === 0 ? (T(), M("li", {
|
|
275
275
|
key: 0,
|
|
276
276
|
onKeyup: [
|
|
277
277
|
t[6] || (t[6] = b((s) => e.parentMethods.press(s), ["enter"])),
|
|
@@ -287,9 +287,9 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
287
287
|
tabindex: "-1",
|
|
288
288
|
class: "list-option-message"
|
|
289
289
|
}, t[20] || (t[20] = [
|
|
290
|
-
|
|
290
|
+
B("span", { class: "list-item-span" }, "No Items To Display.", -1)
|
|
291
291
|
]), 32)) : $("", !0),
|
|
292
|
-
e.totalOptionsCount && e.totalOptionsCount > (e.filteredListItems?.length || 0) ? (
|
|
292
|
+
e.totalOptionsCount && e.totalOptionsCount > (e.filteredListItems?.length || 0) ? (T(), M("li", {
|
|
293
293
|
key: 1,
|
|
294
294
|
onKeyup: [
|
|
295
295
|
t[13] || (t[13] = b((s) => e.parentMethods.press(s), ["enter"])),
|
|
@@ -305,7 +305,7 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
305
305
|
tabindex: "-1",
|
|
306
306
|
class: "list-option-message"
|
|
307
307
|
}, [
|
|
308
|
-
|
|
308
|
+
B("span", We, " +" + me(e.totalOptionsCount - e.filteredListItems?.length || 0) + " More Items...", 1)
|
|
309
309
|
], 32)) : $("", !0)
|
|
310
310
|
], 64));
|
|
311
311
|
}
|
|
@@ -364,19 +364,19 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
364
364
|
emits: ["reverseDropDownList"],
|
|
365
365
|
setup(e, { expose: i, emit: a }) {
|
|
366
366
|
Fe((r) => ({
|
|
367
|
-
|
|
368
|
-
"
|
|
369
|
-
"
|
|
370
|
-
"
|
|
371
|
-
"
|
|
367
|
+
"220f507e": k.value,
|
|
368
|
+
"935a72a0": S.value,
|
|
369
|
+
"935a6b1e": se.value,
|
|
370
|
+
"4076fb5c": q.value,
|
|
371
|
+
"51ba7f6b": G.value
|
|
372
372
|
}));
|
|
373
|
-
const v = a, o = e, d = f(null), w = f(null), t = f(null), s = f(0), c = f(0), l = f(0),
|
|
373
|
+
const v = a, o = e, d = f(null), w = f(null), t = f(null), s = f(0), c = f(0), l = f(0), g = f(0), k = f("0px"), I = f(!1), h = f([]), y = f(0), m = O(() => !I.value || window?.innerHeight == null ? !1 : X() && le()), V = O(() => o.maxListHeightPX >= y.value);
|
|
374
374
|
F(
|
|
375
375
|
() => m.value,
|
|
376
376
|
(r) => v("reverseDropDownList", r),
|
|
377
377
|
{ immediate: !0 }
|
|
378
378
|
);
|
|
379
|
-
const S = O(() => s.value + "px"), se = O(() =>
|
|
379
|
+
const S = O(() => s.value + "px"), se = O(() => g.value + "px");
|
|
380
380
|
i({ listContainerRef: t });
|
|
381
381
|
const P = (r) => {
|
|
382
382
|
r?.key && r.key === " " && r.preventDefault();
|
|
@@ -384,12 +384,12 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
384
384
|
const L = t?.value, x = r.target;
|
|
385
385
|
(!(L && x && L.contains(x)) || L.isEqualNode(x)) && o.parentMethods.focusInput();
|
|
386
386
|
};
|
|
387
|
-
function
|
|
387
|
+
function N() {
|
|
388
388
|
return w?.value ? (w?.value).clientHeight : 0;
|
|
389
389
|
}
|
|
390
390
|
function E() {
|
|
391
|
-
if (!I.value ||
|
|
392
|
-
const r =
|
|
391
|
+
if (!I.value || N() === 0) return o.maxListHeightPX;
|
|
392
|
+
const r = N() === 0 ? o.maxListHeightPX : +N();
|
|
393
393
|
return o.maxListHeightPX && o.maxListHeightPX > r ? r : o.maxListHeightPX;
|
|
394
394
|
}
|
|
395
395
|
function X() {
|
|
@@ -409,7 +409,7 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
409
409
|
let C = setTimeout(() => {
|
|
410
410
|
}, 0), A = null;
|
|
411
411
|
function j() {
|
|
412
|
-
|
|
412
|
+
y.value = N(), clearTimeout(C), A && A.observe(), I.value = !0, z(void 0);
|
|
413
413
|
}
|
|
414
414
|
function re() {
|
|
415
415
|
clearTimeout(C), C = setTimeout(() => {
|
|
@@ -424,7 +424,7 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
424
424
|
{ immediate: !0 }
|
|
425
425
|
);
|
|
426
426
|
function z(r) {
|
|
427
|
-
U(),
|
|
427
|
+
U(), Be(() => U()), ee(r);
|
|
428
428
|
}
|
|
429
429
|
function ee(r) {
|
|
430
430
|
if (!o.enableScrollClose || !o.showDropDown || typeof t?.value?.contains != "function" || r?.target?.nodeType == null || te(r)) return;
|
|
@@ -445,8 +445,8 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
445
445
|
}
|
|
446
446
|
function W() {
|
|
447
447
|
if (d?.value == null || t?.value == null) return;
|
|
448
|
-
const r = ne().getBoundingClientRect(), L = t.value.getBoundingClientRect(), x =
|
|
449
|
-
m.value ?
|
|
448
|
+
const r = ne().getBoundingClientRect(), L = t.value.getBoundingClientRect(), x = g.value, Q = s.value;
|
|
449
|
+
m.value ? g.value = x - (r.top - L.bottom) : g.value = x - (L.top - r.bottom), s.value = Q - (L.left - r.left);
|
|
450
450
|
}
|
|
451
451
|
function ue() {
|
|
452
452
|
return (d?.value).getElementsByTagName("button")[0];
|
|
@@ -458,15 +458,15 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
458
458
|
A = new He(z, ue()), setTimeout(() => z(void 0), 250);
|
|
459
459
|
}), Se(() => {
|
|
460
460
|
A?.unobserve();
|
|
461
|
-
}), (r, L) => (
|
|
462
|
-
|
|
461
|
+
}), (r, L) => (T(), M(ce, null, [
|
|
462
|
+
B("div", {
|
|
463
463
|
ref_key: "dropDownButtonContainer",
|
|
464
464
|
ref: d,
|
|
465
465
|
class: "super-list-button-container"
|
|
466
466
|
}, [
|
|
467
467
|
xe(r.$slots, "default", {}, void 0, !0)
|
|
468
468
|
], 512),
|
|
469
|
-
|
|
469
|
+
B("div", {
|
|
470
470
|
id: "super-list-select-list",
|
|
471
471
|
ref_key: "listContainerRef",
|
|
472
472
|
ref: t,
|
|
@@ -483,7 +483,7 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
483
483
|
onKeydown: L[1] || (L[1] = b((x) => P(x), ["space"])),
|
|
484
484
|
onMouseup: L[2] || (L[2] = oe((x) => ie(x), ["left"]))
|
|
485
485
|
}, [
|
|
486
|
-
|
|
486
|
+
B("ul", {
|
|
487
487
|
tabindex: "-1",
|
|
488
488
|
ref_key: "dropDownListUL",
|
|
489
489
|
ref: w,
|
|
@@ -503,7 +503,7 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
503
503
|
], 34)
|
|
504
504
|
], 64));
|
|
505
505
|
}
|
|
506
|
-
}),
|
|
506
|
+
}), ye = /* @__PURE__ */ K(Ye, [["__scopeId", "data-v-53c634fd"]]), Ge = {}, _e = {
|
|
507
507
|
xmlns: "http://www.w3.org/2000/svg",
|
|
508
508
|
fill: "currentColor",
|
|
509
509
|
"aria-hidden": "true",
|
|
@@ -511,14 +511,14 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
511
511
|
viewBox: "0 0 12 6"
|
|
512
512
|
};
|
|
513
513
|
function et(e, i) {
|
|
514
|
-
return
|
|
515
|
-
|
|
514
|
+
return T(), M("svg", _e, i[0] || (i[0] = [
|
|
515
|
+
B("path", {
|
|
516
516
|
"shape-rendering": "geometricPrecision",
|
|
517
517
|
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"
|
|
518
518
|
}, null, -1)
|
|
519
519
|
]));
|
|
520
520
|
}
|
|
521
|
-
const
|
|
521
|
+
const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
522
522
|
key: 2,
|
|
523
523
|
class: "list-button-icon custom-icon"
|
|
524
524
|
}, ot = /* @__PURE__ */ Y({
|
|
@@ -563,43 +563,43 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
563
563
|
function s() {
|
|
564
564
|
v?.value && v.value.focus();
|
|
565
565
|
}
|
|
566
|
-
return i({ blurInput: t, focusInput: s, buttonRef: v }), (c, l) => (
|
|
566
|
+
return i({ blurInput: t, focusInput: s, buttonRef: v }), (c, l) => (T(), M("button", {
|
|
567
567
|
ref_key: "buttonRef",
|
|
568
568
|
ref: v,
|
|
569
569
|
tabindex: e.enableTextFilter ? -1 : 0,
|
|
570
570
|
onKeydown: [
|
|
571
|
-
l[0] || (l[0] = b((
|
|
572
|
-
l[1] || (l[1] = b((
|
|
573
|
-
l[2] || (l[2] = b((
|
|
574
|
-
l[3] || (l[3] = b((
|
|
575
|
-
l[4] || (l[4] = b((
|
|
571
|
+
l[0] || (l[0] = b((g) => d(g), ["enter"])),
|
|
572
|
+
l[1] || (l[1] = b((g) => w(g), ["space"])),
|
|
573
|
+
l[2] || (l[2] = b((g) => e.parentMethods.press(g), ["esc"])),
|
|
574
|
+
l[3] || (l[3] = b((g) => e.parentMethods.press(g), ["up"])),
|
|
575
|
+
l[4] || (l[4] = b((g) => e.parentMethods.press(g), ["down"]))
|
|
576
576
|
],
|
|
577
|
-
onFocusout: l[5] || (l[5] = (
|
|
578
|
-
onClick: l[6] || (l[6] = (
|
|
577
|
+
onFocusout: l[5] || (l[5] = (g) => e.parentMethods.unfocus(g)),
|
|
578
|
+
onClick: l[6] || (l[6] = (g) => o()),
|
|
579
579
|
type: "button",
|
|
580
580
|
class: R([[{ "click-through": a.enableTextFilter || a.showDropDown }], "list-button"])
|
|
581
581
|
}, [
|
|
582
582
|
xe(c.$slots, "default", {}, void 0, !0),
|
|
583
|
-
|
|
583
|
+
B("span", {
|
|
584
584
|
class: R(["list-button-icon-div", { "bigger-gap": a.showDropDown }])
|
|
585
585
|
}, [
|
|
586
|
-
e.customIcon ? $("", !0) : (
|
|
586
|
+
e.customIcon ? $("", !0) : (T(), M("span", {
|
|
587
587
|
key: 0,
|
|
588
588
|
class: R(["list-button-icon", [{ "rotate-180": !a.showDropDown }]])
|
|
589
589
|
}, [
|
|
590
|
-
Z(
|
|
590
|
+
Z(ge, { "aria-hidden": "true" })
|
|
591
591
|
], 2)),
|
|
592
|
-
e.customIcon ? $("", !0) : (
|
|
592
|
+
e.customIcon ? $("", !0) : (T(), M("span", {
|
|
593
593
|
key: 1,
|
|
594
594
|
class: R(["list-button-icon", [{ "rotate-180": a.showDropDown }]])
|
|
595
595
|
}, [
|
|
596
|
-
e.customIcon == null ? (
|
|
596
|
+
e.customIcon == null ? (T(), fe(ge, {
|
|
597
597
|
key: 0,
|
|
598
598
|
"aria-hidden": "true"
|
|
599
599
|
})) : $("", !0)
|
|
600
600
|
], 2)),
|
|
601
|
-
e.customIcon ? (
|
|
602
|
-
(
|
|
601
|
+
e.customIcon ? (T(), M("span", nt, [
|
|
602
|
+
(T(), fe(Ne(e.customIcon), { "aria-hidden": "true" }))
|
|
603
603
|
])) : $("", !0)
|
|
604
604
|
], 2)
|
|
605
605
|
], 42, tt));
|
|
@@ -653,11 +653,15 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
653
653
|
colour: {
|
|
654
654
|
type: String,
|
|
655
655
|
default: "black"
|
|
656
|
+
},
|
|
657
|
+
scrollTextInputToTopOnMobile: {
|
|
658
|
+
type: Boolean,
|
|
659
|
+
default: !0
|
|
656
660
|
}
|
|
657
661
|
},
|
|
658
662
|
emits: { "update:selected": null },
|
|
659
663
|
setup(e, { expose: i, emit: a }) {
|
|
660
|
-
const v = a, o = e, d = f([]), w = new qe(), t = f(0), s = O(() => o.forceTextFilterVisibilityTo != null ? o.forceTextFilterVisibilityTo : t.value > o.maxListOptions), c = f(!1), l = f(!1),
|
|
664
|
+
const v = a, o = e, d = f([]), w = new qe(), t = f(0), s = O(() => o.forceTextFilterVisibilityTo != null ? o.forceTextFilterVisibilityTo : t.value > o.maxListOptions), c = f(!1), l = f(!1), g = f(!1), k = f(!0), I = f(!1), h = f(!1), y = f(ye), m = f(he), V = f(we), S = f("");
|
|
661
665
|
F(
|
|
662
666
|
() => S.value,
|
|
663
667
|
(n, u) => {
|
|
@@ -668,7 +672,7 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
668
672
|
s.value && m?.value?.blurInput();
|
|
669
673
|
}, P = () => {
|
|
670
674
|
clearTimeout(W), se(), S.value = "", c.value = !1, k.value = !0;
|
|
671
|
-
}, ie = O(() => h?.value === !0 ? "Error loading data" : I?.value === !0 ? "Loading..." : E(o.selected)),
|
|
675
|
+
}, ie = O(() => h?.value === !0 ? "Error loading data" : I?.value === !0 ? "Loading..." : E(o.selected)), N = (n) => {
|
|
672
676
|
n && v("update:selected", n), P();
|
|
673
677
|
}, E = (n) => Re(
|
|
674
678
|
n,
|
|
@@ -724,17 +728,17 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
724
728
|
if (o.selected == null) return -1;
|
|
725
729
|
const n = d.value.map((p) => E(p)), u = n.filter((p) => p === E(o.selected));
|
|
726
730
|
if (u.length > 1) {
|
|
727
|
-
const p = u.map((
|
|
728
|
-
for (let
|
|
729
|
-
const H = JSON.stringify(d.value[p[
|
|
730
|
-
if (H === de) return p[
|
|
731
|
+
const p = u.map((D) => n.indexOf(D));
|
|
732
|
+
for (let D = 0; D < p.length; D++) {
|
|
733
|
+
const H = JSON.stringify(d.value[p[D]]), de = JSON.stringify(o.selected);
|
|
734
|
+
if (H === de) return p[D];
|
|
731
735
|
}
|
|
732
736
|
return -1;
|
|
733
737
|
}
|
|
734
738
|
return n.indexOf(E(o.selected));
|
|
735
739
|
}
|
|
736
740
|
const te = () => {
|
|
737
|
-
I.value || (c.value || (l.value = !1, z(), U(), c.value = !0), q.value = !1, k.value = !1);
|
|
741
|
+
I.value || (c.value || (l.value = !1, z(), o.scrollTextInputToTopOnMobile && U(), c.value = !0), q.value = !1, k.value = !1);
|
|
738
742
|
}, U = () => {
|
|
739
743
|
const n = window?.innerWidth != null && window.innerWidth < 640, u = screen?.width != null && screen.width < 640, p = m.value.textInputRef;
|
|
740
744
|
(n || u) && s.value && (ue(), p?.scrollIntoView({ block: "start", inline: "center" }));
|
|
@@ -754,30 +758,30 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
754
758
|
}
|
|
755
759
|
i({ initializeOptions: r, getLabel: E });
|
|
756
760
|
function L() {
|
|
757
|
-
ee() == -1 && d.value && !!d.value[0] &&
|
|
761
|
+
ee() == -1 && d.value && !!d.value[0] && N(d.value[0]);
|
|
758
762
|
}
|
|
759
763
|
async function x(n, u = !0) {
|
|
760
764
|
I.value = u;
|
|
761
|
-
const p = async () => o.options(o.maxListOptions, n || ""),
|
|
765
|
+
const p = async () => o.options(o.maxListOptions, n || ""), D = (H) => {
|
|
762
766
|
(!H || !("data" in H)) && X(), ve(H.data), Q(H?.data?.length ?? 0).then(() => {
|
|
763
767
|
I.value = !1;
|
|
764
768
|
});
|
|
765
769
|
};
|
|
766
|
-
await w.resetAndExecute(p,
|
|
770
|
+
await w.resetAndExecute(p, D);
|
|
767
771
|
}
|
|
768
772
|
async function Q(n) {
|
|
769
|
-
const u = async () => o.options(1, ""), p = (
|
|
770
|
-
(!
|
|
773
|
+
const u = async () => o.options(1, ""), p = (D) => {
|
|
774
|
+
(!D || !("totalNum" in D)) && le(), t.value = D.totalNum ?? n;
|
|
771
775
|
};
|
|
772
776
|
await w.resetAndExecute(u, p);
|
|
773
777
|
}
|
|
774
778
|
const pe = () => m?.value?.textInputRef?.getElementsByTagName("li")[C.value] ?? null, Ie = (n) => {
|
|
775
|
-
c.value == !1 ? te() : n &&
|
|
776
|
-
},
|
|
779
|
+
c.value == !1 ? te() : n && Te(n);
|
|
780
|
+
}, Te = (n) => {
|
|
777
781
|
const u = n.key || n.code;
|
|
778
|
-
(u === "Tab" || u === "Escape") && P(), u === "ArrowDown" && Oe(n), u === "ArrowUp" && Me(n), (u === "Enter" || u === " ") &&
|
|
779
|
-
},
|
|
780
|
-
j.value.length > 0 ? (l.value = !0,
|
|
782
|
+
(u === "Tab" || u === "Escape") && P(), u === "ArrowDown" && Oe(n), u === "ArrowUp" && Me(n), (u === "Enter" || u === " ") && De(), n.preventDefault(), n.stopPropagation();
|
|
783
|
+
}, De = () => {
|
|
784
|
+
j.value.length > 0 ? (l.value = !0, N(j.value[C.value])) : P();
|
|
781
785
|
}, Oe = (n) => {
|
|
782
786
|
k.value = !0, C.value < j.value.length - 1 && (n.preventDefault(), q.value = !1, C.value++, pe()?.focus());
|
|
783
787
|
}, Me = (n) => {
|
|
@@ -785,8 +789,8 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
785
789
|
}, Ce = (n) => {
|
|
786
790
|
if (c?.value === !1) return;
|
|
787
791
|
S.value.length > 0 && (l.value = !0);
|
|
788
|
-
const u =
|
|
789
|
-
if (!(H ||
|
|
792
|
+
const u = y?.value?.listContainerRef, p = m?.value?.textInputRef, D = n?.relatedTarget && p?.isEqualNode(n?.relatedTarget), H = n?.relatedTarget && u && u.contains(n?.relatedTarget), de = n?.relatedTarget && u && u.isEqualNode(n?.relatedTarget);
|
|
793
|
+
if (!(H || D)) {
|
|
790
794
|
if (de) {
|
|
791
795
|
ne();
|
|
792
796
|
return;
|
|
@@ -809,17 +813,17 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
809
813
|
press: Ie,
|
|
810
814
|
mouseOverList: re,
|
|
811
815
|
getLabel: E,
|
|
812
|
-
updatedSelected:
|
|
816
|
+
updatedSelected: N,
|
|
813
817
|
focusInput: ne,
|
|
814
818
|
closeList: P
|
|
815
819
|
};
|
|
816
|
-
return (n, u) => (
|
|
820
|
+
return (n, u) => (T(), M("div", {
|
|
817
821
|
style: { position: "relative" },
|
|
818
822
|
class: R(n.$attrs.class)
|
|
819
823
|
}, [
|
|
820
|
-
Z(
|
|
824
|
+
Z(ye, {
|
|
821
825
|
ref_key: "itemListRef",
|
|
822
|
-
ref:
|
|
826
|
+
ref: y,
|
|
823
827
|
"show-drop-down": c.value,
|
|
824
828
|
filteredListItems: j.value,
|
|
825
829
|
mouseHoveringOnList: q.value,
|
|
@@ -831,7 +835,7 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
831
835
|
blockListChange: l.value,
|
|
832
836
|
"onUpdate:blockListChange": u[1] || (u[1] = (p) => l.value = p),
|
|
833
837
|
"total-options-count": t.value,
|
|
834
|
-
onReverseDropDownList: u[2] || (u[2] = (p) =>
|
|
838
|
+
onReverseDropDownList: u[2] || (u[2] = (p) => g.value = p),
|
|
835
839
|
enableScrollClose: J.value,
|
|
836
840
|
"enable-text-filter": s.value
|
|
837
841
|
}, {
|
|
@@ -843,7 +847,7 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
843
847
|
"show-drop-down": c.value,
|
|
844
848
|
"enable-text-filter": s.value,
|
|
845
849
|
"custom-icon": e.customIcon,
|
|
846
|
-
"reverse-drop-down-list":
|
|
850
|
+
"reverse-drop-down-list": g.value
|
|
847
851
|
}, {
|
|
848
852
|
default: be(() => [
|
|
849
853
|
Z(he, {
|
|
@@ -864,7 +868,7 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
864
868
|
}, 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"])
|
|
865
869
|
], 2));
|
|
866
870
|
}
|
|
867
|
-
}), lt = /* @__PURE__ */ K(st, [["__scopeId", "data-v-
|
|
871
|
+
}), lt = /* @__PURE__ */ K(st, [["__scopeId", "data-v-c65b5182"]]);
|
|
868
872
|
export {
|
|
869
873
|
lt as default
|
|
870
874
|
};
|