@jblehm/super-list 1.0.20 → 1.0.23
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
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
# superlist V1.0.
|
|
1
|
+
# superlist V1.0.23
|
|
2
2
|
An un-styled mobile supported text searchable combobox for Vue.
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
|
|
5
5
|
|
|
6
6
|
Example component implementation in Vue:
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
|
|
9
9
|
|
|
10
10
|
```js
|
|
11
11
|
<template>
|
|
@@ -1,16 +1,8 @@
|
|
|
1
1
|
import { type PropType } from 'vue';
|
|
2
|
-
declare
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
};
|
|
6
|
-
refs: {
|
|
7
|
-
dropDownButtonContainer: HTMLDivElement;
|
|
8
|
-
listContainerRef: HTMLDivElement;
|
|
9
|
-
dropDownListUL: HTMLUListElement;
|
|
10
|
-
};
|
|
11
|
-
attrs: Partial<{}>;
|
|
2
|
+
declare var __VLS_1: {};
|
|
3
|
+
type __VLS_Slots = {} & {
|
|
4
|
+
default?: (props: typeof __VLS_1) => any;
|
|
12
5
|
};
|
|
13
|
-
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
14
6
|
declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
15
7
|
mouseHoveringOnList: {
|
|
16
8
|
type: BooleanConstructor;
|
|
@@ -123,9 +115,9 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
|
|
|
123
115
|
totalOptionsCount: number;
|
|
124
116
|
enableScrollClose: boolean;
|
|
125
117
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
126
|
-
declare const _default:
|
|
118
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
127
119
|
export default _default;
|
|
128
|
-
type
|
|
120
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
129
121
|
new (): {
|
|
130
122
|
$slots: S;
|
|
131
123
|
};
|
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
import { type PropType } from 'vue';
|
|
2
2
|
declare function blurInput(): void;
|
|
3
3
|
declare function focusInput(): void;
|
|
4
|
-
declare
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
};
|
|
8
|
-
refs: {
|
|
9
|
-
buttonRef: HTMLButtonElement;
|
|
10
|
-
};
|
|
11
|
-
attrs: Partial<{}>;
|
|
4
|
+
declare var __VLS_1: {};
|
|
5
|
+
type __VLS_Slots = {} & {
|
|
6
|
+
default?: (props: typeof __VLS_1) => any;
|
|
12
7
|
};
|
|
13
|
-
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
14
8
|
declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
15
9
|
parentMethods: {
|
|
16
10
|
type: ObjectConstructor;
|
|
@@ -60,9 +54,9 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
|
|
|
60
54
|
}>> & Readonly<{}>, {
|
|
61
55
|
customIcon: object | Function | null;
|
|
62
56
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
63
|
-
declare const _default:
|
|
57
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
64
58
|
export default _default;
|
|
65
|
-
type
|
|
59
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
66
60
|
new (): {
|
|
67
61
|
$slots: S;
|
|
68
62
|
};
|
|
@@ -72,7 +72,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
72
72
|
selectedIndex: number;
|
|
73
73
|
listElementOpenAndVisible: boolean;
|
|
74
74
|
totalOptionsCount: number;
|
|
75
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
|
|
76
|
-
items: HTMLLIElement;
|
|
77
|
-
}, any>;
|
|
75
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
78
76
|
export default _default;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.list-filter-text-input[data-v-
|
|
1
|
+
.list-filter-text-input[data-v-5cd54d87]{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-5cd54d87]:focus,.list-filter-text-input[data-v-5cd54d87]:focus-visible,.list-filter-text-input[data-v-5cd54d87]:active{text-align:left}.click-through[data-v-5cd54d87]{pointer-events:none}.dark-placeholder-text[data-v-5cd54d87]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-5cd54d87]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-5cd54d87]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-5cd54d87]{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-fdca8800]{top:var(--parent-y)}.list-reverse[data-v-fdca8800]{bottom:var(--parent-y)}.select-list[data-v-fdca8800]{--parent-width: var(--2a14c112);--parent-x: var(--042fa144);--parent-y: var(--042fa505);--duration: var(--e090ee34);--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-fdca8800]:focus-visible,.select-list>ul[data-v-fdca8800]:focus-visible,.super-list-button-container[data-v-fdca8800]:focus-visible{outline:none}.super-list-button-container[data-v-fdca8800]{height:100%;width:100%}.select-list.select-list-open[data-v-fdca8800]{z-index:999999;--max-height: var(--6e261aff);max-height:var(--max-height, 0)}.select-list.no-scroll[data-v-fdca8800]{overflow:hidden}.select-list-fixed[data-v-fdca8800]{position:fixed;opacity:1;visibility:visible}.list-content[data-v-fdca8800]{--duration: var(--e090ee34);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-fdca8800]{border-radius:var(--border-radius)}@media (min-width: 640px){.select-list.select-list-scrollable[data-v-fdca8800]{border-radius:var(--border-radius) 0 0 var(--border-radius)}.list-content[data-v-fdca8800]{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,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as Z, ref as f, computed as O, createElementBlock as M, openBlock as I, normalizeClass as R, withKeys as m, createElementVNode as S, 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 Ne, renderSlot as xe, createVNode as Q, nextTick as Se, resolveDynamicComponent as Be, withCtx as be } from "vue";
|
|
2
2
|
import './index.css';class He {
|
|
3
3
|
eventsTypes = ["resize", "load", "scroll", "wheel", "touchmove"];
|
|
4
4
|
config = {
|
|
@@ -79,7 +79,7 @@ class qe {
|
|
|
79
79
|
return this.abort("New Request From Controller."), this.setFunc(i), this.setThen(a), this.execute();
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
|
-
const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */
|
|
82
|
+
const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Z({
|
|
83
83
|
__name: "ListTextInput",
|
|
84
84
|
props: {
|
|
85
85
|
enableTextFilter: {
|
|
@@ -113,26 +113,26 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Y({
|
|
|
113
113
|
function w() {
|
|
114
114
|
o.parentMethods.openList();
|
|
115
115
|
}
|
|
116
|
-
function t(
|
|
117
|
-
o.parentMethods.unfocus(
|
|
116
|
+
function t(y) {
|
|
117
|
+
o.parentMethods.unfocus(y);
|
|
118
118
|
}
|
|
119
|
-
function s(
|
|
120
|
-
|
|
119
|
+
function s(y) {
|
|
120
|
+
y?.target?.value != null && v("update:query", y.target.value);
|
|
121
121
|
}
|
|
122
122
|
const c = O(() => {
|
|
123
|
-
const
|
|
124
|
-
return
|
|
125
|
-
}), l = O(() => o.enableButtonClick === !0 && o.enableTextFilter === !0 ? "" : "click-through"),
|
|
123
|
+
const y = d?.value ? d.value.length : 0, b = o.placeholder?.length || 0;
|
|
124
|
+
return y > 0 ? y : b > 0 ? b : 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
|
-
const
|
|
129
|
-
|
|
128
|
+
const y = d.value;
|
|
129
|
+
y.blur(), y.value = "";
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
|
-
function
|
|
132
|
+
function D() {
|
|
133
133
|
d?.value && d.value.focus();
|
|
134
134
|
}
|
|
135
|
-
return i({ blurInput: k, focusInput:
|
|
135
|
+
return i({ blurInput: k, focusInput: D, textInputRef: d }), (y, b) => (I(), M("input", {
|
|
136
136
|
ref_key: "textInputRef",
|
|
137
137
|
ref: d,
|
|
138
138
|
tabindex: e.enableTextFilter ? 0 : -1,
|
|
@@ -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));
|
|
@@ -163,7 +163,7 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Y({
|
|
|
163
163
|
for (const [v, o] of i)
|
|
164
164
|
a[v] = o;
|
|
165
165
|
return a;
|
|
166
|
-
},
|
|
166
|
+
}, he = /* @__PURE__ */ K($e, [["__scopeId", "data-v-5cd54d87"]]), Ke = {}, Ve = {
|
|
167
167
|
xmlns: "http://www.w3.org/2000/svg",
|
|
168
168
|
fill: "currentColor",
|
|
169
169
|
"aria-hidden": "true",
|
|
@@ -171,14 +171,14 @@ 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 I(), M("svg", Ve, i[0] || (i[0] = [
|
|
175
|
+
S("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)
|
|
179
179
|
]));
|
|
180
180
|
}
|
|
181
|
-
const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = { class: "list-item-span" }, We = { class: "list-item-span" }, Qe = /* @__PURE__ */
|
|
181
|
+
const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = { class: "list-item-span" }, We = { class: "list-item-span" }, Qe = /* @__PURE__ */ Z({
|
|
182
182
|
__name: "ListItem",
|
|
183
183
|
props: {
|
|
184
184
|
mouseHoveringOnList: {
|
|
@@ -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) => (I(), M(ce, null, [
|
|
243
|
+
(I(!0), M(ce, null, Ae(e.filteredListItems, (s, c) => (I(), M("li", {
|
|
244
244
|
key: c,
|
|
245
245
|
ref_for: !0,
|
|
246
246
|
ref: "items",
|
|
@@ -255,7 +255,7 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
255
255
|
],
|
|
256
256
|
onFocusout: t[5] || (t[5] = (l) => e.parentMethods.unfocus(l)),
|
|
257
257
|
tabindex: "-1",
|
|
258
|
-
onMousedown:
|
|
258
|
+
onMousedown: oe((l) => e.parentMethods.updatedSelected(s), ["left"]),
|
|
259
259
|
class: R([
|
|
260
260
|
{ "list-option-selected": e.selectedIndex === c },
|
|
261
261
|
{
|
|
@@ -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
|
+
S("span", Je, me(e.parentMethods.getLabel(s)), 1),
|
|
268
|
+
e.selectedIndex === c ? (I(), 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 ? (I(), M("li", {
|
|
275
275
|
key: 0,
|
|
276
276
|
onKeyup: [
|
|
277
277
|
t[6] || (t[6] = m((s) => e.parentMethods.press(s), ["enter"])),
|
|
@@ -283,13 +283,13 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
283
283
|
t[10] || (t[10] = m((s) => e.parentMethods.press(s), ["down"]))
|
|
284
284
|
],
|
|
285
285
|
onFocusout: t[11] || (t[11] = (s) => e.parentMethods.unfocus(s)),
|
|
286
|
-
onMousedown: t[12] || (t[12] =
|
|
286
|
+
onMousedown: t[12] || (t[12] = oe((s) => e.parentMethods.closeList(s), ["left"])),
|
|
287
287
|
tabindex: "-1",
|
|
288
288
|
class: "list-option-message"
|
|
289
289
|
}, t[20] || (t[20] = [
|
|
290
|
-
|
|
290
|
+
S("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) ? (I(), M("li", {
|
|
293
293
|
key: 1,
|
|
294
294
|
onKeyup: [
|
|
295
295
|
t[13] || (t[13] = m((s) => e.parentMethods.press(s), ["enter"])),
|
|
@@ -301,15 +301,15 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
301
301
|
t[17] || (t[17] = m((s) => e.parentMethods.press(s), ["down"]))
|
|
302
302
|
],
|
|
303
303
|
onFocusout: t[18] || (t[18] = (s) => e.parentMethods.unfocus(s)),
|
|
304
|
-
onMousedown: t[19] || (t[19] =
|
|
304
|
+
onMousedown: t[19] || (t[19] = oe((s) => e.parentMethods.closeList(s), ["left"])),
|
|
305
305
|
tabindex: "-1",
|
|
306
306
|
class: "list-option-message"
|
|
307
307
|
}, [
|
|
308
|
-
|
|
308
|
+
S("span", We, " +" + me(e.totalOptionsCount - e.filteredListItems?.length || 0) + " More Items...", 1)
|
|
309
309
|
], 32)) : $("", !0)
|
|
310
310
|
], 64));
|
|
311
311
|
}
|
|
312
|
-
}), Ze = /* @__PURE__ */ K(Qe, [["__scopeId", "data-v-
|
|
312
|
+
}), Ze = /* @__PURE__ */ K(Qe, [["__scopeId", "data-v-e4eeb2f7"]]), Ye = /* @__PURE__ */ Z({
|
|
313
313
|
__name: "ItemList",
|
|
314
314
|
props: {
|
|
315
315
|
mouseHoveringOnList: {
|
|
@@ -364,25 +364,25 @@ 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
|
+
"2a14c112": k.value,
|
|
368
|
+
"042fa144": N.value,
|
|
369
|
+
"042fa505": se.value,
|
|
370
|
+
e090ee34: q.value,
|
|
371
|
+
"6e261aff": Y.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"), D = f(!1), y = f([]), b = f(0), h = O(() => !D.value || window?.innerHeight == null ? !1 : X() && le()), V = O(() => o.maxListHeightPX >= b.value);
|
|
374
374
|
F(
|
|
375
375
|
() => h.value,
|
|
376
376
|
(r) => v("reverseDropDownList", r),
|
|
377
377
|
{ immediate: !0 }
|
|
378
378
|
);
|
|
379
|
-
const
|
|
379
|
+
const N = 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();
|
|
383
|
-
},
|
|
384
|
-
const L = t?.value,
|
|
385
|
-
(!(L &&
|
|
383
|
+
}, ie = (r) => {
|
|
384
|
+
const L = t?.value, x = r.target;
|
|
385
|
+
(!(L && x && L.contains(x)) || L.isEqualNode(x)) && o.parentMethods.focusInput();
|
|
386
386
|
};
|
|
387
387
|
function B() {
|
|
388
388
|
return w?.value ? (w?.value).clientHeight : 0;
|
|
@@ -392,107 +392,109 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
392
392
|
const r = B() === 0 ? o.maxListHeightPX : +B();
|
|
393
393
|
return o.maxListHeightPX && o.maxListHeightPX > r ? r : o.maxListHeightPX;
|
|
394
394
|
}
|
|
395
|
-
function
|
|
395
|
+
function X() {
|
|
396
396
|
return c.value > E();
|
|
397
397
|
}
|
|
398
|
-
function
|
|
398
|
+
function le() {
|
|
399
399
|
return l.value < E();
|
|
400
400
|
}
|
|
401
|
-
const
|
|
401
|
+
const Y = O(() => (o.maxListHeightPX || 0) + "px"), q = O(() => (o.listAnimationDurationMs || 0) + "ms"), G = O(() => o.blockListChange ? y.value : o.filteredListItems);
|
|
402
402
|
F(
|
|
403
|
-
() =>
|
|
403
|
+
() => G,
|
|
404
404
|
(r) => {
|
|
405
|
-
r && (
|
|
405
|
+
r && (y.value = r.value);
|
|
406
406
|
},
|
|
407
407
|
{ immediate: !1, deep: !0 }
|
|
408
408
|
);
|
|
409
409
|
let C = setTimeout(() => {
|
|
410
410
|
}, 0), A = null;
|
|
411
411
|
function j() {
|
|
412
|
-
b.value = B(), clearTimeout(C), A && A.observe(),
|
|
412
|
+
b.value = B(), clearTimeout(C), A && A.observe(), D.value = !0, z(void 0);
|
|
413
413
|
}
|
|
414
|
-
function
|
|
414
|
+
function re() {
|
|
415
415
|
clearTimeout(C), C = setTimeout(() => {
|
|
416
|
-
o.showDropDown || (
|
|
416
|
+
o.showDropDown || (D.value = !1, A && A.unobserve());
|
|
417
417
|
}, o.listAnimationDurationMs + 50);
|
|
418
418
|
}
|
|
419
419
|
F(
|
|
420
420
|
() => o.showDropDown,
|
|
421
421
|
(r, L) => {
|
|
422
|
-
r !== L && (r ? j() :
|
|
422
|
+
r !== L && (r ? j() : re());
|
|
423
423
|
},
|
|
424
424
|
{ immediate: !0 }
|
|
425
425
|
);
|
|
426
426
|
function z(r) {
|
|
427
|
-
|
|
427
|
+
te(), Se(() => te()), _(r);
|
|
428
|
+
}
|
|
429
|
+
function _(r) {
|
|
430
|
+
if (typeof t?.value?.contains != "function" || r?.target?.nodeType == null || ee(r)) return;
|
|
431
|
+
const x = ["scroll", "wheel", "touchmove"].includes(r?.type);
|
|
432
|
+
o.showDropDown && x && o.parentMethods.closeList();
|
|
428
433
|
}
|
|
429
434
|
function ee(r) {
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
if ([r?.srcElement?.id, r?.target?.id].includes("super-list-select-list")) return;
|
|
433
|
-
const X = !t.value.contains(r.target);
|
|
434
|
-
o.showDropDown && L && X && o.parentMethods.closeList();
|
|
435
|
+
const L = !!d.value?.contains(r?.target), x = !!t.value?.contains(r.target), W = [r?.srcElement?.id, r?.target?.id].includes("super-list-select-list");
|
|
436
|
+
return L || x || W;
|
|
435
437
|
}
|
|
436
|
-
function
|
|
437
|
-
|
|
438
|
+
function te() {
|
|
439
|
+
U(), J();
|
|
438
440
|
}
|
|
439
|
-
function
|
|
441
|
+
function U() {
|
|
440
442
|
if (d?.value == null) return;
|
|
441
443
|
const r = d.value.getBoundingClientRect();
|
|
442
444
|
c.value = r.top, l.value = window.innerHeight - r.bottom, k.value = r.width + "px";
|
|
443
445
|
}
|
|
444
|
-
function
|
|
446
|
+
function J() {
|
|
445
447
|
if (d?.value == null || t?.value == null) return;
|
|
446
|
-
const r =
|
|
447
|
-
h.value ?
|
|
448
|
+
const r = ne().getBoundingClientRect(), L = t.value.getBoundingClientRect(), x = g.value, W = s.value;
|
|
449
|
+
h.value ? g.value = x - (r.top - L.bottom) : g.value = x - (L.top - r.bottom), s.value = W - (L.left - r.left);
|
|
448
450
|
}
|
|
449
|
-
function
|
|
451
|
+
function ue() {
|
|
450
452
|
return (d?.value).getElementsByTagName("button")[0];
|
|
451
453
|
}
|
|
452
|
-
function
|
|
454
|
+
function ne() {
|
|
453
455
|
return d?.value;
|
|
454
456
|
}
|
|
455
|
-
return
|
|
456
|
-
A = new He(z,
|
|
457
|
-
}),
|
|
457
|
+
return Le(() => {
|
|
458
|
+
A = new He(z, ue()), setTimeout(() => z(void 0), 250);
|
|
459
|
+
}), Ne(() => {
|
|
458
460
|
A?.unobserve();
|
|
459
|
-
}), (r, L) => (
|
|
460
|
-
|
|
461
|
+
}), (r, L) => (I(), M(ce, null, [
|
|
462
|
+
S("div", {
|
|
461
463
|
ref_key: "dropDownButtonContainer",
|
|
462
464
|
ref: d,
|
|
463
465
|
class: "super-list-button-container"
|
|
464
466
|
}, [
|
|
465
|
-
|
|
467
|
+
xe(r.$slots, "default", {}, void 0, !0)
|
|
466
468
|
], 512),
|
|
467
|
-
|
|
469
|
+
S("div", {
|
|
468
470
|
id: "super-list-select-list",
|
|
469
471
|
ref_key: "listContainerRef",
|
|
470
472
|
ref: t,
|
|
471
|
-
onMouseenter: L[0] || (L[0] = (
|
|
473
|
+
onMouseenter: L[0] || (L[0] = (x) => e.parentMethods.mouseOverList()),
|
|
472
474
|
tabindex: "-1",
|
|
473
475
|
class: R([
|
|
474
476
|
"select-list",
|
|
475
477
|
h.value ? "list-reverse" : "list-normal",
|
|
476
478
|
{ "select-list-open": e.showDropDown },
|
|
477
|
-
{ "no-scroll": V.value &&
|
|
478
|
-
{ "select-list-fixed":
|
|
479
|
+
{ "no-scroll": V.value && D.value },
|
|
480
|
+
{ "select-list-fixed": D.value },
|
|
479
481
|
{ "select-list-scrollable": !V.value }
|
|
480
482
|
]),
|
|
481
|
-
onKeydown: L[1] || (L[1] = m((
|
|
482
|
-
onMouseup: L[2] || (L[2] =
|
|
483
|
+
onKeydown: L[1] || (L[1] = m((x) => P(x), ["space"])),
|
|
484
|
+
onMouseup: L[2] || (L[2] = oe((x) => ie(x), ["left"]))
|
|
483
485
|
}, [
|
|
484
|
-
|
|
486
|
+
S("ul", {
|
|
485
487
|
tabindex: "-1",
|
|
486
488
|
ref_key: "dropDownListUL",
|
|
487
489
|
ref: w,
|
|
488
490
|
class: "list-content"
|
|
489
491
|
}, [
|
|
490
|
-
|
|
491
|
-
filteredListItems:
|
|
492
|
+
Q(Ze, {
|
|
493
|
+
filteredListItems: y.value,
|
|
492
494
|
mouseHoveringOnList: e.mouseHoveringOnList,
|
|
493
495
|
focusedIndex: e.focusedIndex,
|
|
494
496
|
selectedIndex: e.selectedIndex,
|
|
495
|
-
listElementOpenAndVisible:
|
|
497
|
+
listElementOpenAndVisible: D.value,
|
|
496
498
|
"parent-methods": e.parentMethods,
|
|
497
499
|
"show-drop-down": e.showDropDown,
|
|
498
500
|
"total-options-count": e.totalOptionsCount
|
|
@@ -501,7 +503,7 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
501
503
|
], 34)
|
|
502
504
|
], 64));
|
|
503
505
|
}
|
|
504
|
-
}),
|
|
506
|
+
}), ge = /* @__PURE__ */ K(Ye, [["__scopeId", "data-v-fdca8800"]]), Ge = {}, _e = {
|
|
505
507
|
xmlns: "http://www.w3.org/2000/svg",
|
|
506
508
|
fill: "currentColor",
|
|
507
509
|
"aria-hidden": "true",
|
|
@@ -509,17 +511,17 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
|
|
|
509
511
|
viewBox: "0 0 12 6"
|
|
510
512
|
};
|
|
511
513
|
function et(e, i) {
|
|
512
|
-
return
|
|
513
|
-
|
|
514
|
+
return I(), M("svg", _e, i[0] || (i[0] = [
|
|
515
|
+
S("path", {
|
|
514
516
|
"shape-rendering": "geometricPrecision",
|
|
515
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"
|
|
516
518
|
}, null, -1)
|
|
517
519
|
]));
|
|
518
520
|
}
|
|
519
|
-
const
|
|
521
|
+
const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
520
522
|
key: 2,
|
|
521
523
|
class: "list-button-icon custom-icon"
|
|
522
|
-
}, ot = /* @__PURE__ */
|
|
524
|
+
}, ot = /* @__PURE__ */ Z({
|
|
523
525
|
__name: "ListButton",
|
|
524
526
|
props: {
|
|
525
527
|
// eslint-disable-line
|
|
@@ -561,48 +563,48 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
561
563
|
function s() {
|
|
562
564
|
v?.value && v.value.focus();
|
|
563
565
|
}
|
|
564
|
-
return i({ blurInput: t, focusInput: s, buttonRef: v }), (c, l) => (
|
|
566
|
+
return i({ blurInput: t, focusInput: s, buttonRef: v }), (c, l) => (I(), M("button", {
|
|
565
567
|
ref_key: "buttonRef",
|
|
566
568
|
ref: v,
|
|
567
569
|
tabindex: e.enableTextFilter ? -1 : 0,
|
|
568
570
|
onKeydown: [
|
|
569
|
-
l[0] || (l[0] = m((
|
|
570
|
-
l[1] || (l[1] = m((
|
|
571
|
-
l[2] || (l[2] = m((
|
|
572
|
-
l[3] || (l[3] = m((
|
|
573
|
-
l[4] || (l[4] = m((
|
|
571
|
+
l[0] || (l[0] = m((g) => d(g), ["enter"])),
|
|
572
|
+
l[1] || (l[1] = m((g) => w(g), ["space"])),
|
|
573
|
+
l[2] || (l[2] = m((g) => e.parentMethods.press(g), ["esc"])),
|
|
574
|
+
l[3] || (l[3] = m((g) => e.parentMethods.press(g), ["up"])),
|
|
575
|
+
l[4] || (l[4] = m((g) => e.parentMethods.press(g), ["down"]))
|
|
574
576
|
],
|
|
575
|
-
onFocusout: l[5] || (l[5] = (
|
|
576
|
-
onClick: l[6] || (l[6] = (
|
|
577
|
+
onFocusout: l[5] || (l[5] = (g) => e.parentMethods.unfocus(g)),
|
|
578
|
+
onClick: l[6] || (l[6] = (g) => o()),
|
|
577
579
|
type: "button",
|
|
578
580
|
class: R([[{ "click-through": a.enableTextFilter || a.showDropDown }], "list-button"])
|
|
579
581
|
}, [
|
|
580
|
-
|
|
581
|
-
|
|
582
|
+
xe(c.$slots, "default", {}, void 0, !0),
|
|
583
|
+
S("span", {
|
|
582
584
|
class: R(["list-button-icon-div", { "bigger-gap": a.showDropDown }])
|
|
583
585
|
}, [
|
|
584
|
-
e.customIcon ? $("", !0) : (
|
|
586
|
+
e.customIcon ? $("", !0) : (I(), M("span", {
|
|
585
587
|
key: 0,
|
|
586
588
|
class: R(["list-button-icon", [{ "rotate-180": !a.showDropDown }]])
|
|
587
589
|
}, [
|
|
588
|
-
|
|
590
|
+
Q(ye, { "aria-hidden": "true" })
|
|
589
591
|
], 2)),
|
|
590
|
-
e.customIcon ? $("", !0) : (
|
|
592
|
+
e.customIcon ? $("", !0) : (I(), M("span", {
|
|
591
593
|
key: 1,
|
|
592
594
|
class: R(["list-button-icon", [{ "rotate-180": a.showDropDown }]])
|
|
593
595
|
}, [
|
|
594
|
-
e.customIcon == null ? (
|
|
596
|
+
e.customIcon == null ? (I(), fe(ye, {
|
|
595
597
|
key: 0,
|
|
596
598
|
"aria-hidden": "true"
|
|
597
599
|
})) : $("", !0)
|
|
598
600
|
], 2)),
|
|
599
|
-
e.customIcon ? (
|
|
600
|
-
(
|
|
601
|
+
e.customIcon ? (I(), M("span", nt, [
|
|
602
|
+
(I(), fe(Be(e.customIcon), { "aria-hidden": "true" }))
|
|
601
603
|
])) : $("", !0)
|
|
602
604
|
], 2)
|
|
603
605
|
], 42, tt));
|
|
604
606
|
}
|
|
605
|
-
}),
|
|
607
|
+
}), we = /* @__PURE__ */ K(ot, [["__scopeId", "data-v-01ef8e37"]]), st = /* @__PURE__ */ Z({
|
|
606
608
|
__name: "super-list",
|
|
607
609
|
props: {
|
|
608
610
|
selected: {
|
|
@@ -655,18 +657,18 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
655
657
|
},
|
|
656
658
|
emits: { "update:selected": null },
|
|
657
659
|
setup(e, { expose: i, emit: a }) {
|
|
658
|
-
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),
|
|
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), g = f(!1), k = f(!0), D = f(!1), y = f(!1), b = f(ge), h = f(he), V = f(we), N = f("");
|
|
659
661
|
F(
|
|
660
|
-
() =>
|
|
662
|
+
() => N.value,
|
|
661
663
|
(n, u) => {
|
|
662
|
-
n !== u && typeof o.options == "function" &&
|
|
664
|
+
n !== u && typeof o.options == "function" && x(n);
|
|
663
665
|
}
|
|
664
666
|
);
|
|
665
|
-
const
|
|
667
|
+
const se = () => {
|
|
666
668
|
s.value && h?.value?.blurInput();
|
|
667
669
|
}, P = () => {
|
|
668
|
-
clearTimeout(
|
|
669
|
-
},
|
|
670
|
+
clearTimeout(J), se(), N.value = "", c.value = !1, k.value = !0;
|
|
671
|
+
}, ie = O(() => y?.value === !0 ? "Error loading data" : D?.value === !0 ? "Loading..." : E(o.selected)), B = (n) => {
|
|
670
672
|
n && v("update:selected", n), P();
|
|
671
673
|
}, E = (n) => Re(
|
|
672
674
|
n,
|
|
@@ -674,19 +676,19 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
674
676
|
o.objectLabelKeyName,
|
|
675
677
|
o.enumKeyToLabelObjectArray
|
|
676
678
|
);
|
|
677
|
-
function
|
|
678
|
-
throw
|
|
679
|
+
function X() {
|
|
680
|
+
throw D.value = !0, y.value = !0, new Error("Invalid options argument provided to ListInputComponent");
|
|
679
681
|
}
|
|
680
|
-
function
|
|
681
|
-
throw
|
|
682
|
+
function le() {
|
|
683
|
+
throw D.value = !0, y.value = !0, new Error("Invalid response provided to ListInputComponent, no total count key found");
|
|
682
684
|
}
|
|
683
|
-
function
|
|
684
|
-
throw
|
|
685
|
+
function Y() {
|
|
686
|
+
throw D.value = !0, y.value = !0, new Error("Invalid objectLabelKeyName for provided Dropdown list value.");
|
|
685
687
|
}
|
|
686
|
-
|
|
687
|
-
typeof o.options != "function" && !Array.isArray(o.options) ?
|
|
688
|
+
Le(() => {
|
|
689
|
+
typeof o.options != "function" && !Array.isArray(o.options) ? X() : r();
|
|
688
690
|
});
|
|
689
|
-
const q = f(!1),
|
|
691
|
+
const q = f(!1), G = f(0), C = f(0), A = f(0);
|
|
690
692
|
F(
|
|
691
693
|
() => C.value,
|
|
692
694
|
(n, u) => {
|
|
@@ -702,7 +704,7 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
702
704
|
);
|
|
703
705
|
const j = O(() => {
|
|
704
706
|
if (typeof o.options == "function" && !Array.isArray(o.options)) return d.value;
|
|
705
|
-
const n =
|
|
707
|
+
const n = N.value, u = d.value;
|
|
706
708
|
return n === "" ? u : u.filter((p) => E(p).toLowerCase().includes(n.toLowerCase()));
|
|
707
709
|
});
|
|
708
710
|
F(
|
|
@@ -712,147 +714,147 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
|
|
|
712
714
|
},
|
|
713
715
|
{ immediate: !1, deep: !0 }
|
|
714
716
|
);
|
|
715
|
-
const
|
|
717
|
+
const re = () => {
|
|
716
718
|
q.value = !0;
|
|
717
719
|
}, z = () => {
|
|
718
|
-
const n =
|
|
719
|
-
|
|
720
|
+
const n = _();
|
|
721
|
+
G.value = n, C.value = n > -1 ? n : 0;
|
|
720
722
|
};
|
|
721
|
-
function
|
|
723
|
+
function _() {
|
|
722
724
|
if (o.selected == null) return -1;
|
|
723
725
|
const n = d.value.map((p) => E(p)), u = n.filter((p) => p === E(o.selected));
|
|
724
726
|
if (u.length > 1) {
|
|
725
727
|
const p = u.map((T) => n.indexOf(T));
|
|
726
728
|
for (let T = 0; T < p.length; T++) {
|
|
727
|
-
const H = JSON.stringify(d.value[p[T]]),
|
|
728
|
-
if (H ===
|
|
729
|
+
const H = JSON.stringify(d.value[p[T]]), de = JSON.stringify(o.selected);
|
|
730
|
+
if (H === de) return p[T];
|
|
729
731
|
}
|
|
730
732
|
return -1;
|
|
731
733
|
}
|
|
732
734
|
return n.indexOf(E(o.selected));
|
|
733
735
|
}
|
|
734
|
-
const
|
|
735
|
-
|
|
736
|
-
},
|
|
736
|
+
const ee = () => {
|
|
737
|
+
D.value || (c.value || (l.value = !1, z(), te(), c.value = !0), q.value = !1, k.value = !1);
|
|
738
|
+
}, te = () => {
|
|
737
739
|
const n = window?.innerWidth != null && window.innerWidth < 640, u = screen?.width != null && screen.width < 640, p = h.value.textInputRef;
|
|
738
|
-
(n || u) && s.value && (
|
|
739
|
-
},
|
|
740
|
-
let
|
|
740
|
+
(n || u) && s.value && (ue(), p?.scrollIntoView({ block: "start" }));
|
|
741
|
+
}, U = f(!0);
|
|
742
|
+
let J = setTimeout(() => {
|
|
741
743
|
}, 0);
|
|
742
|
-
function
|
|
743
|
-
h.value.textInputRef && (clearTimeout(
|
|
744
|
-
|
|
744
|
+
function ue() {
|
|
745
|
+
h.value.textInputRef && (clearTimeout(J), U.value = !1, J = setTimeout(() => {
|
|
746
|
+
U.value = !0;
|
|
745
747
|
}, 300));
|
|
746
748
|
}
|
|
747
|
-
const
|
|
749
|
+
const ne = () => {
|
|
748
750
|
s?.value == !0 ? h.value.focusInput() : V?.value?.focusInput && V?.value?.focusInput();
|
|
749
751
|
};
|
|
750
|
-
async function
|
|
751
|
-
typeof o.options == "function" ? await
|
|
752
|
+
async function r() {
|
|
753
|
+
typeof o.options == "function" ? await x(N.value ? N.value : void 0, !0) : (ve(o.options), t.value = d.value.length), L();
|
|
752
754
|
}
|
|
753
|
-
i({ initializeOptions:
|
|
754
|
-
function
|
|
755
|
-
|
|
755
|
+
i({ initializeOptions: r, getLabel: E });
|
|
756
|
+
function L() {
|
|
757
|
+
_() == -1 && d.value && !!d.value[0] && B(d.value[0]);
|
|
756
758
|
}
|
|
757
|
-
async function
|
|
758
|
-
|
|
759
|
+
async function x(n, u = !0) {
|
|
760
|
+
D.value = u;
|
|
759
761
|
const p = async () => o.options(o.maxListOptions, n || ""), T = (H) => {
|
|
760
|
-
(!H || !("data" in H)) &&
|
|
761
|
-
|
|
762
|
+
(!H || !("data" in H)) && X(), ve(H.data), W(H?.data?.length ?? 0).then(() => {
|
|
763
|
+
D.value = !1;
|
|
762
764
|
});
|
|
763
765
|
};
|
|
764
766
|
await w.resetAndExecute(p, T);
|
|
765
767
|
}
|
|
766
|
-
async function
|
|
768
|
+
async function W(n) {
|
|
767
769
|
const u = async () => o.options(1, ""), p = (T) => {
|
|
768
|
-
(!T || !("totalNum" in T)) &&
|
|
770
|
+
(!T || !("totalNum" in T)) && le(), t.value = T.totalNum ?? n;
|
|
769
771
|
};
|
|
770
772
|
await w.resetAndExecute(u, p);
|
|
771
773
|
}
|
|
772
|
-
const
|
|
773
|
-
c.value == !1 ?
|
|
774
|
+
const pe = () => h?.value?.textInputRef?.getElementsByTagName("li")[C.value] ?? null, Ie = (n) => {
|
|
775
|
+
c.value == !1 ? ee() : n && De(n);
|
|
774
776
|
}, De = (n) => {
|
|
775
777
|
const u = n.key || n.code;
|
|
776
778
|
(u === "Tab" || u === "Escape") && P(), u === "ArrowDown" && Oe(n), u === "ArrowUp" && Me(n), (u === "Enter" || u === " ") && Te(), n.preventDefault(), n.stopPropagation();
|
|
777
779
|
}, Te = () => {
|
|
778
780
|
j.value.length > 0 ? (l.value = !0, B(j.value[C.value])) : P();
|
|
779
781
|
}, Oe = (n) => {
|
|
780
|
-
k.value = !0, C.value < j.value.length - 1 && (n.preventDefault(), q.value = !1, C.value++,
|
|
782
|
+
k.value = !0, C.value < j.value.length - 1 && (n.preventDefault(), q.value = !1, C.value++, pe()?.focus());
|
|
781
783
|
}, Me = (n) => {
|
|
782
|
-
k.value = !0, C.value > 0 && (n.preventDefault(), q.value = !1, C.value--,
|
|
784
|
+
k.value = !0, C.value > 0 && (n.preventDefault(), q.value = !1, C.value--, pe()?.focus());
|
|
783
785
|
}, Ce = (n) => {
|
|
784
786
|
if (c?.value === !1) return;
|
|
785
|
-
|
|
786
|
-
const u = b?.value?.listContainerRef, p = h?.value?.textInputRef, T = n?.relatedTarget && p?.isEqualNode(n?.relatedTarget), H = n?.relatedTarget && u && u.contains(n?.relatedTarget),
|
|
787
|
+
N.value.length > 0 && (l.value = !0);
|
|
788
|
+
const u = b?.value?.listContainerRef, p = h?.value?.textInputRef, T = n?.relatedTarget && p?.isEqualNode(n?.relatedTarget), H = n?.relatedTarget && u && u.contains(n?.relatedTarget), de = n?.relatedTarget && u && u.isEqualNode(n?.relatedTarget);
|
|
787
789
|
if (!(H || T)) {
|
|
788
|
-
if (
|
|
789
|
-
|
|
790
|
+
if (de) {
|
|
791
|
+
ne();
|
|
790
792
|
return;
|
|
791
793
|
}
|
|
792
794
|
P();
|
|
793
795
|
}
|
|
794
796
|
};
|
|
795
|
-
function
|
|
796
|
-
Array.isArray(n) ||
|
|
797
|
+
function ve(n) {
|
|
798
|
+
Array.isArray(n) || X(), n.length > 0 && typeof n[0] == "object" && ke(n), d.value = n;
|
|
797
799
|
}
|
|
798
800
|
function ke(n) {
|
|
799
|
-
(!o.objectLabelKeyName || o.objectLabelKeyName.length === 0) &&
|
|
801
|
+
(!o.objectLabelKeyName || o.objectLabelKeyName.length === 0) && Y();
|
|
800
802
|
const u = o.objectLabelKeyName;
|
|
801
803
|
for (let p = 0; p < n.length; p++)
|
|
802
|
-
(typeof n[p] != "object" || !(u in n[p])) &&
|
|
804
|
+
(typeof n[p] != "object" || !(u in n[p])) && Y();
|
|
803
805
|
}
|
|
804
|
-
const
|
|
805
|
-
openList:
|
|
806
|
+
const ae = {
|
|
807
|
+
openList: ee,
|
|
806
808
|
unfocus: Ce,
|
|
807
809
|
press: Ie,
|
|
808
|
-
mouseOverList:
|
|
810
|
+
mouseOverList: re,
|
|
809
811
|
getLabel: E,
|
|
810
812
|
updatedSelected: B,
|
|
811
|
-
focusInput:
|
|
813
|
+
focusInput: ne,
|
|
812
814
|
closeList: P
|
|
813
815
|
};
|
|
814
|
-
return (n, u) => (
|
|
816
|
+
return (n, u) => (I(), M("div", {
|
|
815
817
|
style: { position: "relative" },
|
|
816
818
|
class: R(n.$attrs.class)
|
|
817
819
|
}, [
|
|
818
|
-
|
|
820
|
+
Q(ge, {
|
|
819
821
|
ref_key: "itemListRef",
|
|
820
822
|
ref: b,
|
|
821
823
|
"show-drop-down": c.value,
|
|
822
824
|
filteredListItems: j.value,
|
|
823
825
|
mouseHoveringOnList: q.value,
|
|
824
826
|
focusedIndex: A.value,
|
|
825
|
-
selectedIndex:
|
|
827
|
+
selectedIndex: G.value,
|
|
826
828
|
"max-list-height-p-x": e.maxListHeightPX,
|
|
827
829
|
"list-animation-duration-ms": e.listAnimationDurationMs,
|
|
828
|
-
"parent-methods":
|
|
830
|
+
"parent-methods": ae,
|
|
829
831
|
blockListChange: l.value,
|
|
830
832
|
"onUpdate:blockListChange": u[1] || (u[1] = (p) => l.value = p),
|
|
831
833
|
"total-options-count": t.value,
|
|
832
|
-
onReverseDropDownList: u[2] || (u[2] = (p) =>
|
|
833
|
-
enableScrollClose:
|
|
834
|
+
onReverseDropDownList: u[2] || (u[2] = (p) => g.value = p),
|
|
835
|
+
enableScrollClose: U.value,
|
|
834
836
|
"enable-text-filter": s.value
|
|
835
837
|
}, {
|
|
836
|
-
default:
|
|
837
|
-
|
|
838
|
+
default: be(() => [
|
|
839
|
+
Q(we, {
|
|
838
840
|
ref_key: "dropDownButtonInput",
|
|
839
841
|
ref: V,
|
|
840
|
-
"parent-methods":
|
|
842
|
+
"parent-methods": ae,
|
|
841
843
|
"show-drop-down": c.value,
|
|
842
844
|
"enable-text-filter": s.value,
|
|
843
845
|
"custom-icon": e.customIcon,
|
|
844
|
-
"reverse-drop-down-list":
|
|
846
|
+
"reverse-drop-down-list": g.value
|
|
845
847
|
}, {
|
|
846
|
-
default:
|
|
847
|
-
|
|
848
|
+
default: be(() => [
|
|
849
|
+
Q(he, {
|
|
848
850
|
ref_key: "dropDownTextInput",
|
|
849
851
|
ref: h,
|
|
850
852
|
"enable-text-filter": s.value,
|
|
851
853
|
"show-drop-down": c.value,
|
|
852
|
-
placeholder:
|
|
854
|
+
placeholder: ie.value,
|
|
853
855
|
"enable-button-click": k.value,
|
|
854
|
-
"parent-methods":
|
|
855
|
-
"onUpdate:query": u[0] || (u[0] = (p) =>
|
|
856
|
+
"parent-methods": ae,
|
|
857
|
+
"onUpdate:query": u[0] || (u[0] = (p) => N.value = p)
|
|
856
858
|
}, null, 8, ["enable-text-filter", "show-drop-down", "placeholder", "enable-button-click"])
|
|
857
859
|
]),
|
|
858
860
|
_: 1
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jblehm/super-list",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.23",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist/ListInputComponents",
|
|
@@ -32,22 +32,21 @@
|
|
|
32
32
|
"serve": "vite serve --host"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"vue": "^3.5.
|
|
35
|
+
"vue": "^3.5.16"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@types/node": "^22.
|
|
39
|
-
"@vitejs/plugin-vue": "^5.
|
|
40
|
-
"@vitejs/plugin-vue-jsx": "^4.0
|
|
41
|
-
"@vue/eslint-config-prettier": "^
|
|
42
|
-
"@vue/eslint-config-typescript": "^
|
|
43
|
-
"eslint": "^
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"vite": "^
|
|
49
|
-
"
|
|
50
|
-
"vue-tsc": "^2.1.6"
|
|
38
|
+
"@types/node": "^22.15.29",
|
|
39
|
+
"@vitejs/plugin-vue": "^5.2.4",
|
|
40
|
+
"@vitejs/plugin-vue-jsx": "^4.2.0",
|
|
41
|
+
"@vue/eslint-config-prettier": "^10.2.0",
|
|
42
|
+
"@vue/eslint-config-typescript": "^14.5.0",
|
|
43
|
+
"eslint": "^9.28.0",
|
|
44
|
+
"postcss": "^8.5.4",
|
|
45
|
+
"prettier": "^3.5.3",
|
|
46
|
+
"typescript": "~5.8.3",
|
|
47
|
+
"vite": "^6.3.5",
|
|
48
|
+
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
49
|
+
"vue-tsc": "^2.2.10"
|
|
51
50
|
},
|
|
52
51
|
"sideEffects": [
|
|
53
52
|
"*.css"
|