@jblehm/super-list 1.0.14 → 1.0.16

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