@jblehm/super-list 1.0.11 → 1.0.13

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