@jblehm/super-list 1.0.28 → 1.0.29

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 (7) hide show
  1. package/README.md +1 -1
  2. package/dist/index.css +1 -1
  3. package/dist/super-list.js +127 -118
  4. package/dist/super-list.js.map +1 -1
  5. package/dist/super-list.umd.cjs +2 -2
  6. package/dist/super-list.umd.cjs.map +1 -1
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # superlist V1.0.28
1
+ # superlist V1.0.29
2
2
  An un-styled mobile supported text searchable combobox for Vue.
3
3
 
4
4
  ![list_img_1.png](https://drive.google.com/thumbnail?id=1vccx8i3aOcXCjT1cflzeHJs0BNhj6I-u&sz=w1000)
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .list-filter-text-input[data-v-acc7ac24]{color:var(--superlist-text-colour, rgb(17, 24, 39));text-align:center;padding:.125rem 2rem .125rem .5rem!important;width:100%;height:100%;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;border:0 none;pointer-events:auto;cursor:text}.list-filter-text-input[data-v-acc7ac24]:focus,.list-filter-text-input[data-v-acc7ac24]:focus-visible,.list-filter-text-input[data-v-acc7ac24]:active{text-align:left}.click-through[data-v-acc7ac24]{pointer-events:none}.dark-placeholder-text[data-v-acc7ac24]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-acc7ac24]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-acc7ac24]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-acc7ac24]{font-size:.875rem;line-height:1.5rem}}.list-option[data-v-e4eeb2f7]{text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-text-colour, rgb(55, 60, 65));transition-property:font-weight,background-color,color,text-shadow;transition-duration:.5s;transition-timing-function:ease;font-weight:400;text-shadow:1px 1px 3px var(--superlist-background-colour, white)}.list-option[data-v-e4eeb2f7]:focus-visible,.list-option>span[data-v-e4eeb2f7]:focus-visible{outline:none}.list-option-selected[data-v-e4eeb2f7]{font-weight:600}.list-option-message[data-v-e4eeb2f7]{text-shadow:1px 1px 3px var(--superlist-background-colour, white);text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.list-option-active[data-v-e4eeb2f7]:hover,.list-option-active[data-v-e4eeb2f7],.list-option-selected[data-v-e4eeb2f7]:hover,.list-option[data-v-e4eeb2f7]:hover{font-weight:600;background-color:var(--superlist-theme-colour, rgb(77, 168, 11, .8));color:var(--superlist-background-colour, white);text-shadow:1px 1px 3px var(--superlist-theme-colour, rgb(77, 168, 11, .8));transition-duration:0s!important}.list-item-icon[data-v-e4eeb2f7]{display:flex;height:1rem;width:1rem;position:absolute;right:.7rem;margin-top:-.1rem;align-self:center}.list-item-span[data-v-e4eeb2f7]{padding:.5rem 1.75rem .5rem .75rem;width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-normal[data-v-53c634fd]{top:var(--parent-y)}.list-reverse[data-v-53c634fd]{bottom:var(--parent-y)}.select-list[data-v-53c634fd]{--parent-width: var(--220f507e);--parent-x: var(--935a72a0);--parent-y: var(--935a6b1e);--duration: var(--4076fb5c);--border-radius: var(--superlist-list-border-radius, 0);border-radius:var(--border-radius);width:var(--parent-width);min-width:var(--parent-width);left:var(--parent-x);display:block;transition-property:max-height,opacity,visibility,box-shadow;transition-duration:var(--duration, .3s);transition-timing-function:cubic-bezier(.1,.9,.35,.98);position:absolute;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background-color:#ffffffb3;align-items:baseline;opacity:.25;z-index:999;visibility:collapse;overflow:auto;max-height:0;border:none!important}.select-list[data-v-53c634fd]:focus-visible,.select-list>ul[data-v-53c634fd]:focus-visible,.super-list-button-container[data-v-53c634fd]:focus-visible{outline:none}.super-list-button-container[data-v-53c634fd]{height:100%;width:100%}.select-list.select-list-open[data-v-53c634fd]{z-index:999999;--max-height: var(--51ba7f6b);max-height:var(--max-height, 0)}.select-list.no-scroll[data-v-53c634fd]{overflow:hidden}.select-list-fixed[data-v-53c634fd]{position:fixed;opacity:1;visibility:visible}.list-content[data-v-53c634fd]{--duration: var(--4076fb5c);overflow:visible;margin:0;padding:0;border-style:none;color:var(--superlist-text-colour, rgb(55, 60, 65));list-style:none;max-width:100%}.select-list.select-list-scrollable[data-v-53c634fd]{border-radius:var(--border-radius)}.select-list[data-v-53c634fd]:not(.select-list-fixed){transition:none;box-shadow:none!important}@media (min-width: 640px){.select-list.select-list-scrollable[data-v-53c634fd]{border-radius:var(--border-radius) 0 0 var(--border-radius)}.list-content[data-v-53c634fd]{font-size:.875rem;line-height:1.25rem}}.list-button-icon[data-v-01ef8e37]{display:flex;transition-timing-function:ease-in-out;transition-duration:.2s;transition-property:transform;width:.6rem;transform:rotate(0);color:var(--superlist-text-colour, rgb(17, 24, 39));justify-content:center;max-height:18%}.list-button-icon.custom-icon[data-v-01ef8e37]{max-height:100%;width:1.25rem}.list-button-icon.rotate-180[data-v-01ef8e37]{transform:rotate(180deg)}.list-button[data-v-01ef8e37]{position:relative;padding:0;margin:0;width:100%;max-height:100%;height:100%;background-color:var(--superlist-background-colour, white);align-items:center;pointer-events:auto;cursor:pointer}.list-button[data-v-01ef8e37]:focus,.list-button[data-v-01ef8e37]:focus-visible,.list-button[data-v-01ef8e37]:active{text-align:left}.list-button-icon-div[data-v-01ef8e37]{pointer-events:none;position:absolute;top:0;bottom:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-right:.75rem;max-height:100%;height:100%;gap:max(.15rem,calc(6.25% + .075rem));transition:gap .2s}.list-button-icon-div.bigger-gap[data-v-01ef8e37]{gap:calc(40% - .25rem)}.click-through[data-v-01ef8e37]{pointer-events:none}[data-v-c65b5182]{box-sizing:border-box}
1
+ .list-filter-text-input[data-v-acc7ac24]{color:var(--superlist-text-colour, rgb(17, 24, 39));text-align:center;padding:.125rem 2rem .125rem .5rem!important;width:100%;height:100%;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;border:0 none;pointer-events:auto;cursor:text}.list-filter-text-input[data-v-acc7ac24]:focus,.list-filter-text-input[data-v-acc7ac24]:focus-visible,.list-filter-text-input[data-v-acc7ac24]:active{text-align:left}.click-through[data-v-acc7ac24]{pointer-events:none}.dark-placeholder-text[data-v-acc7ac24]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-acc7ac24]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-acc7ac24]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-acc7ac24]{font-size:.875rem;line-height:1.5rem}}.list-option[data-v-e4eeb2f7]{text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-text-colour, rgb(55, 60, 65));transition-property:font-weight,background-color,color,text-shadow;transition-duration:.5s;transition-timing-function:ease;font-weight:400;text-shadow:1px 1px 3px var(--superlist-background-colour, white)}.list-option[data-v-e4eeb2f7]:focus-visible,.list-option>span[data-v-e4eeb2f7]:focus-visible{outline:none}.list-option-selected[data-v-e4eeb2f7]{font-weight:600}.list-option-message[data-v-e4eeb2f7]{text-shadow:1px 1px 3px var(--superlist-background-colour, white);text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.list-option-active[data-v-e4eeb2f7]:hover,.list-option-active[data-v-e4eeb2f7],.list-option-selected[data-v-e4eeb2f7]:hover,.list-option[data-v-e4eeb2f7]:hover{font-weight:600;background-color:var(--superlist-theme-colour, rgb(77, 168, 11, .8));color:var(--superlist-background-colour, white);text-shadow:1px 1px 3px var(--superlist-theme-colour, rgb(77, 168, 11, .8));transition-duration:0s!important}.list-item-icon[data-v-e4eeb2f7]{display:flex;height:1rem;width:1rem;position:absolute;right:.7rem;margin-top:-.1rem;align-self:center}.list-item-span[data-v-e4eeb2f7]{padding:.5rem 1.75rem .5rem .75rem;width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-normal[data-v-53c634fd]{top:var(--parent-y)}.list-reverse[data-v-53c634fd]{bottom:var(--parent-y)}.select-list[data-v-53c634fd]{--parent-width: var(--220f507e);--parent-x: var(--935a72a0);--parent-y: var(--935a6b1e);--duration: var(--4076fb5c);--border-radius: var(--superlist-list-border-radius, 0);border-radius:var(--border-radius);width:var(--parent-width);min-width:var(--parent-width);left:var(--parent-x);display:block;transition-property:max-height,opacity,visibility,box-shadow;transition-duration:var(--duration, .3s);transition-timing-function:cubic-bezier(.1,.9,.35,.98);position:absolute;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background-color:#ffffffb3;align-items:baseline;opacity:.25;z-index:999;visibility:collapse;overflow:auto;max-height:0;border:none!important}.select-list[data-v-53c634fd]:focus-visible,.select-list>ul[data-v-53c634fd]:focus-visible,.super-list-button-container[data-v-53c634fd]:focus-visible{outline:none}.super-list-button-container[data-v-53c634fd]{height:100%;width:100%}.select-list.select-list-open[data-v-53c634fd]{z-index:999999;--max-height: var(--51ba7f6b);max-height:var(--max-height, 0)}.select-list.no-scroll[data-v-53c634fd]{overflow:hidden}.select-list-fixed[data-v-53c634fd]{position:fixed;opacity:1;visibility:visible}.list-content[data-v-53c634fd]{--duration: var(--4076fb5c);overflow:visible;margin:0;padding:0;border-style:none;color:var(--superlist-text-colour, rgb(55, 60, 65));list-style:none;max-width:100%}.select-list.select-list-scrollable[data-v-53c634fd]{border-radius:var(--border-radius)}.select-list[data-v-53c634fd]:not(.select-list-fixed){transition:none;box-shadow:none!important}@media (min-width: 640px){.select-list.select-list-scrollable[data-v-53c634fd]{border-radius:var(--border-radius) 0 0 var(--border-radius)}.list-content[data-v-53c634fd]{font-size:.875rem;line-height:1.25rem}}.list-button-icon[data-v-01ef8e37]{display:flex;transition-timing-function:ease-in-out;transition-duration:.2s;transition-property:transform;width:.6rem;transform:rotate(0);color:var(--superlist-text-colour, rgb(17, 24, 39));justify-content:center;max-height:18%}.list-button-icon.custom-icon[data-v-01ef8e37]{max-height:100%;width:1.25rem}.list-button-icon.rotate-180[data-v-01ef8e37]{transform:rotate(180deg)}.list-button[data-v-01ef8e37]{position:relative;padding:0;margin:0;width:100%;max-height:100%;height:100%;background-color:var(--superlist-background-colour, white);align-items:center;pointer-events:auto;cursor:pointer}.list-button[data-v-01ef8e37]:focus,.list-button[data-v-01ef8e37]:focus-visible,.list-button[data-v-01ef8e37]:active{text-align:left}.list-button-icon-div[data-v-01ef8e37]{pointer-events:none;position:absolute;top:0;bottom:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-right:.75rem;max-height:100%;height:100%;gap:max(.15rem,calc(6.25% + .075rem));transition:gap .2s}.list-button-icon-div.bigger-gap[data-v-01ef8e37]{gap:calc(40% - .25rem)}.click-through[data-v-01ef8e37]{pointer-events:none}[data-v-9cbaf19a]{box-sizing:border-box}
package/dist/super-list.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent as Y, ref as f, computed as O, createElementBlock as M, openBlock as T, normalizeClass as R, withKeys as b, createElementVNode as B, useTemplateRef as Ee, watch as F, Fragment as ce, createCommentVNode as $, renderList as Ae, withModifiers as oe, createBlock as fe, toDisplayString as me, useCssVars as Fe, onMounted as Le, onUnmounted as Se, renderSlot as xe, createVNode as Z, nextTick as Be, resolveDynamicComponent as Ne, withCtx as be } from "vue";
1
+ import { defineComponent as Y, ref as p, computed as O, createElementBlock as M, openBlock as T, normalizeClass as R, withKeys as b, createElementVNode as B, useTemplateRef as Ee, watch as A, Fragment as ce, createCommentVNode as $, renderList as Se, withModifiers as oe, createBlock as fe, toDisplayString as me, useCssVars as Ae, onMounted as Le, onUnmounted as Fe, renderSlot as xe, createVNode as Z, nextTick as Be, resolveDynamicComponent as Ne, withCtx as be } from "vue";
2
2
  import './index.css';class He {
3
3
  eventsTypes = ["resize", "load", "scroll", "wheel", "touchmove"];
4
4
  config = {
@@ -109,7 +109,7 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Y({
109
109
  "update:press": null
110
110
  },
111
111
  setup(e, { expose: i, emit: a }) {
112
- const v = a, o = e, d = f(null);
112
+ const v = a, o = e, d = p(null);
113
113
  function w(h) {
114
114
  "sourceCapabilities" in h && h.sourceCapabilities == null ? o.parentMethods.closeList() : o.parentMethods.openList();
115
115
  }
@@ -122,7 +122,7 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Y({
122
122
  const c = O(() => {
123
123
  const h = d?.value ? d.value.length : 0, y = o.placeholder?.length || 0;
124
124
  return h > 0 ? h : y > 0 ? y : 5;
125
- }), l = O(() => o.enableButtonClick === !0 && o.enableTextFilter === !0 ? "" : "click-through"), g = O(() => o.showDropDown && !o.enableTextFilter || !o.showDropDown ? "dark-placeholder-text" : "light-placeholder-text");
125
+ }), r = O(() => o.enableButtonClick === !0 && o.enableTextFilter === !0 ? "" : "click-through"), g = O(() => o.showDropDown && !o.enableTextFilter || !o.showDropDown ? "dark-placeholder-text" : "light-placeholder-text");
126
126
  function k() {
127
127
  if (d?.value) {
128
128
  const h = d.value;
@@ -152,7 +152,7 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Y({
152
152
  placeholder: e.placeholder,
153
153
  size: c.value,
154
154
  class: R([[
155
- l.value,
155
+ r.value,
156
156
  g.value,
157
157
  { "text-filter-disabled": !e.enableTextFilter }
158
158
  ], "list-filter-text-input"])
@@ -220,13 +220,13 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
220
220
  const t = (Array.isArray(a.value) ? a.value : [a.value])[i.focusedIndex];
221
221
  return t && typeof t == "object" && "scrollIntoView" in t && typeof t.scrollIntoView == "function" ? t : null;
222
222
  });
223
- F(
223
+ A(
224
224
  () => i.showDropDown,
225
225
  () => o()
226
- ), F(
226
+ ), A(
227
227
  () => i.listElementOpenAndVisible,
228
228
  () => d()
229
- ), F(
229
+ ), A(
230
230
  () => v.value,
231
231
  () => d()
232
232
  );
@@ -240,22 +240,22 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
240
240
  s && (t.scrollTop = w.offsetTop), c && (t.scrollTop = w.offsetTop + w.clientHeight - t.clientHeight);
241
241
  }
242
242
  return (w, t) => (T(), M(ce, null, [
243
- (T(!0), M(ce, null, Ae(e.filteredListItems, (s, c) => (T(), M("li", {
243
+ (T(!0), M(ce, null, Se(e.filteredListItems, (s, c) => (T(), M("li", {
244
244
  key: c,
245
245
  ref_for: !0,
246
246
  ref: "items",
247
247
  onKeyup: [
248
- t[0] || (t[0] = b((l) => e.parentMethods.press(l), ["enter"])),
249
- t[1] || (t[1] = b((l) => e.parentMethods.press(l), ["space"])),
250
- t[2] || (t[2] = b((l) => e.parentMethods.press(l), ["esc"]))
248
+ t[0] || (t[0] = b((r) => e.parentMethods.press(r), ["enter"])),
249
+ t[1] || (t[1] = b((r) => e.parentMethods.press(r), ["space"])),
250
+ t[2] || (t[2] = b((r) => e.parentMethods.press(r), ["esc"]))
251
251
  ],
252
252
  onKeydown: [
253
- t[3] || (t[3] = b((l) => e.parentMethods.press(l), ["up"])),
254
- t[4] || (t[4] = b((l) => e.parentMethods.press(l), ["down"]))
253
+ t[3] || (t[3] = b((r) => e.parentMethods.press(r), ["up"])),
254
+ t[4] || (t[4] = b((r) => e.parentMethods.press(r), ["down"]))
255
255
  ],
256
- onFocusout: t[5] || (t[5] = (l) => e.parentMethods.unfocus(l)),
256
+ onFocusout: t[5] || (t[5] = (r) => e.parentMethods.unfocus(r)),
257
257
  tabindex: "-1",
258
- onMousedown: oe((l) => e.parentMethods.updatedSelected(s), ["left"]),
258
+ onMousedown: oe((r) => e.parentMethods.updatedSelected(s), ["left"]),
259
259
  class: R([
260
260
  { "list-option-selected": e.selectedIndex === c },
261
261
  {
@@ -363,25 +363,25 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
363
363
  },
364
364
  emits: ["reverseDropDownList"],
365
365
  setup(e, { expose: i, emit: a }) {
366
- Fe((r) => ({
366
+ Ae((u) => ({
367
367
  "220f507e": k.value,
368
- "935a72a0": S.value,
368
+ "935a72a0": F.value,
369
369
  "935a6b1e": se.value,
370
370
  "4076fb5c": q.value,
371
371
  "51ba7f6b": G.value
372
372
  }));
373
- const v = a, o = e, d = f(null), w = f(null), t = f(null), s = f(0), c = f(0), l = f(0), g = f(0), k = f("0px"), I = f(!1), h = f([]), y = f(0), m = O(() => !I.value || window?.innerHeight == null ? !1 : X() && le()), V = O(() => o.maxListHeightPX >= y.value);
374
- F(
373
+ const v = a, o = e, d = p(null), w = p(null), t = p(null), s = p(0), c = p(0), r = p(0), g = p(0), k = p("0px"), I = p(!1), h = p([]), y = p(0), m = O(() => !I.value || window?.innerHeight == null ? !1 : X() && le()), V = O(() => o.maxListHeightPX >= y.value);
374
+ A(
375
375
  () => m.value,
376
- (r) => v("reverseDropDownList", r),
376
+ (u) => v("reverseDropDownList", u),
377
377
  { immediate: !0 }
378
378
  );
379
- const S = O(() => s.value + "px"), se = O(() => g.value + "px");
379
+ const F = O(() => s.value + "px"), se = O(() => g.value + "px");
380
380
  i({ listContainerRef: t });
381
- const P = (r) => {
382
- r?.key && r.key === " " && r.preventDefault();
383
- }, ie = (r) => {
384
- const L = t?.value, x = r.target;
381
+ const P = (u) => {
382
+ u?.key && u.key === " " && u.preventDefault();
383
+ }, ie = (u) => {
384
+ const L = t?.value, x = u.target;
385
385
  (!(L && x && L.contains(x)) || L.isEqualNode(x)) && o.parentMethods.focusInput();
386
386
  };
387
387
  function N() {
@@ -389,50 +389,50 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
389
389
  }
390
390
  function E() {
391
391
  if (!I.value || N() === 0) return o.maxListHeightPX;
392
- const r = N() === 0 ? o.maxListHeightPX : +N();
393
- return o.maxListHeightPX && o.maxListHeightPX > r ? r : o.maxListHeightPX;
392
+ const u = N() === 0 ? o.maxListHeightPX : +N();
393
+ return o.maxListHeightPX && o.maxListHeightPX > u ? u : o.maxListHeightPX;
394
394
  }
395
395
  function X() {
396
396
  return c.value > E();
397
397
  }
398
398
  function le() {
399
- return l.value < E();
399
+ return r.value < E();
400
400
  }
401
401
  const G = O(() => (o.maxListHeightPX || 0) + "px"), q = O(() => (o.listAnimationDurationMs || 0) + "ms"), _ = O(() => o.blockListChange ? h.value : o.filteredListItems);
402
- F(
402
+ A(
403
403
  () => _,
404
- (r) => {
405
- r && (h.value = r.value);
404
+ (u) => {
405
+ u && (h.value = u.value);
406
406
  },
407
407
  { immediate: !1, deep: !0 }
408
408
  );
409
409
  let C = setTimeout(() => {
410
- }, 0), A = null;
410
+ }, 0), S = null;
411
411
  function j() {
412
- y.value = N(), clearTimeout(C), A && A.observe(), I.value = !0, z(void 0);
412
+ y.value = N(), clearTimeout(C), S && S.observe(), I.value = !0, z(void 0);
413
413
  }
414
414
  function re() {
415
415
  clearTimeout(C), C = setTimeout(() => {
416
- o.showDropDown || (I.value = !1, A && A.unobserve());
416
+ o.showDropDown || (I.value = !1, S && S.unobserve());
417
417
  }, o.listAnimationDurationMs + 50);
418
418
  }
419
- F(
419
+ A(
420
420
  () => o.showDropDown,
421
- (r, L) => {
422
- r !== L && (U(), r ? j() : re());
421
+ (u, L) => {
422
+ u !== L && (U(), u ? j() : re());
423
423
  },
424
424
  { immediate: !0 }
425
425
  );
426
- function z(r) {
427
- U(), Be(() => U()), ee(r);
426
+ function z(u) {
427
+ U(), Be(() => U()), ee(u);
428
428
  }
429
- function ee(r) {
430
- if (!o.enableScrollClose || !o.showDropDown || typeof t?.value?.contains != "function" || r?.target?.nodeType == null || te(r)) return;
431
- const x = ["scroll", "wheel", "touchmove"].includes(r?.type);
429
+ function ee(u) {
430
+ if (!o.enableScrollClose || !o.showDropDown || typeof t?.value?.contains != "function" || u?.target?.nodeType == null || te(u)) return;
431
+ const x = ["scroll", "wheel", "touchmove"].includes(u?.type);
432
432
  o.showDropDown && x && o.parentMethods.closeList();
433
433
  }
434
- function te(r) {
435
- const L = !!d.value?.contains(r?.target), x = !!t.value?.contains(r.target), Q = [r?.srcElement?.id, r?.target?.id].includes("super-list-select-list");
434
+ function te(u) {
435
+ const L = !!d.value?.contains(u?.target), x = !!t.value?.contains(u.target), Q = [u?.srcElement?.id, u?.target?.id].includes("super-list-select-list");
436
436
  return L || x || Q;
437
437
  }
438
438
  function U() {
@@ -440,13 +440,13 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
440
440
  }
441
441
  function J() {
442
442
  if (d?.value == null) return;
443
- const r = d.value.getBoundingClientRect();
444
- c.value = r.top, l.value = window.innerHeight - r.bottom, k.value = r.width + "px";
443
+ const u = d.value.getBoundingClientRect();
444
+ c.value = u.top, r.value = window.innerHeight - u.bottom, k.value = u.width + "px";
445
445
  }
446
446
  function W() {
447
447
  if (d?.value == null || t?.value == null) return;
448
- const r = ne().getBoundingClientRect(), L = t.value.getBoundingClientRect(), x = g.value, Q = s.value;
449
- m.value ? g.value = x - (r.top - L.bottom) : g.value = x - (L.top - r.bottom), s.value = Q - (L.left - r.left);
448
+ const u = ne().getBoundingClientRect(), L = t.value.getBoundingClientRect(), x = g.value, Q = s.value;
449
+ m.value ? g.value = x - (u.top - L.bottom) : g.value = x - (L.top - u.bottom), s.value = Q - (L.left - u.left);
450
450
  }
451
451
  function ue() {
452
452
  return (d?.value).getElementsByTagName("button")[0];
@@ -455,16 +455,16 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
455
455
  return d?.value;
456
456
  }
457
457
  return Le(() => {
458
- A = new He(z, ue()), setTimeout(() => z(void 0), 250);
459
- }), Se(() => {
460
- A?.unobserve();
461
- }), (r, L) => (T(), M(ce, null, [
458
+ S = new He(z, ue()), setTimeout(() => z(void 0), 250);
459
+ }), Fe(() => {
460
+ S?.unobserve();
461
+ }), (u, L) => (T(), M(ce, null, [
462
462
  B("div", {
463
463
  ref_key: "dropDownButtonContainer",
464
464
  ref: d,
465
465
  class: "super-list-button-container"
466
466
  }, [
467
- xe(r.$slots, "default", {}, void 0, !0)
467
+ xe(u.$slots, "default", {}, void 0, !0)
468
468
  ], 512),
469
469
  B("div", {
470
470
  id: "super-list-select-list",
@@ -547,7 +547,7 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
547
547
  }
548
548
  },
549
549
  setup(e, { expose: i }) {
550
- const a = e, v = f(null);
550
+ const a = e, v = p(null);
551
551
  function o() {
552
552
  a.enableTextFilter || a.parentMethods.openList();
553
553
  }
@@ -563,19 +563,19 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
563
563
  function s() {
564
564
  v?.value && v.value.focus();
565
565
  }
566
- return i({ blurInput: t, focusInput: s, buttonRef: v }), (c, l) => (T(), M("button", {
566
+ return i({ blurInput: t, focusInput: s, buttonRef: v }), (c, r) => (T(), M("button", {
567
567
  ref_key: "buttonRef",
568
568
  ref: v,
569
569
  tabindex: e.enableTextFilter ? -1 : 0,
570
570
  onKeydown: [
571
- l[0] || (l[0] = b((g) => d(g), ["enter"])),
572
- l[1] || (l[1] = b((g) => w(g), ["space"])),
573
- l[2] || (l[2] = b((g) => e.parentMethods.press(g), ["esc"])),
574
- l[3] || (l[3] = b((g) => e.parentMethods.press(g), ["up"])),
575
- l[4] || (l[4] = b((g) => e.parentMethods.press(g), ["down"]))
571
+ r[0] || (r[0] = b((g) => d(g), ["enter"])),
572
+ r[1] || (r[1] = b((g) => w(g), ["space"])),
573
+ r[2] || (r[2] = b((g) => e.parentMethods.press(g), ["esc"])),
574
+ r[3] || (r[3] = b((g) => e.parentMethods.press(g), ["up"])),
575
+ r[4] || (r[4] = b((g) => e.parentMethods.press(g), ["down"]))
576
576
  ],
577
- onFocusout: l[5] || (l[5] = (g) => e.parentMethods.unfocus(g)),
578
- onClick: l[6] || (l[6] = (g) => o()),
577
+ onFocusout: r[5] || (r[5] = (g) => e.parentMethods.unfocus(g)),
578
+ onClick: r[6] || (r[6] = (g) => o()),
579
579
  type: "button",
580
580
  class: R([[{ "click-through": a.enableTextFilter || a.showDropDown }], "list-button"])
581
581
  }, [
@@ -661,17 +661,17 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
661
661
  },
662
662
  emits: { "update:selected": null },
663
663
  setup(e, { expose: i, emit: a }) {
664
- const v = a, o = e, d = f([]), w = new qe(), t = f(0), s = O(() => o.forceTextFilterVisibilityTo != null ? o.forceTextFilterVisibilityTo : t.value > o.maxListOptions), c = f(!1), l = f(!1), g = f(!1), k = f(!0), I = f(!1), h = f(!1), y = f(ye), m = f(he), V = f(we), S = f("");
665
- F(
666
- () => S.value,
667
- (n, u) => {
668
- n !== u && typeof o.options == "function" && x(n);
664
+ const v = a, o = e, d = p([]), w = new qe(), t = p(0), s = O(() => o.forceTextFilterVisibilityTo != null ? o.forceTextFilterVisibilityTo : t.value > o.maxListOptions), c = p(!1), r = p(!1), g = p(!1), k = p(!0), I = p(!1), h = p(!1), y = p(ye), m = p(he), V = p(we), F = p("");
665
+ A(
666
+ () => F.value,
667
+ (n, l) => {
668
+ n !== l && typeof o.options == "function" && x(n);
669
669
  }
670
670
  );
671
671
  const se = () => {
672
672
  s.value && m?.value?.blurInput();
673
673
  }, P = () => {
674
- clearTimeout(W), se(), S.value = "", c.value = !1, k.value = !0;
674
+ clearTimeout(W), se(), F.value = "", c.value = !1, k.value = !0;
675
675
  }, ie = O(() => h?.value === !0 ? "Error loading data" : I?.value === !0 ? "Loading..." : E(o.selected)), N = (n) => {
676
676
  n && v("update:selected", n), P();
677
677
  }, E = (n) => Re(
@@ -690,31 +690,31 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
690
690
  throw I.value = !0, h.value = !0, new Error("Invalid objectLabelKeyName for provided Dropdown list value.");
691
691
  }
692
692
  Le(() => {
693
- typeof o.options != "function" && !Array.isArray(o.options) ? X() : r();
693
+ typeof o.options != "function" && !Array.isArray(o.options) ? X() : u();
694
694
  });
695
- const q = f(!1), _ = f(0), C = f(0), A = f(0);
696
- F(
695
+ const q = p(!1), _ = p(0), C = p(0), S = p(0);
696
+ A(
697
697
  () => C.value,
698
- (n, u) => {
699
- n != u && !l.value && (A.value = n);
698
+ (n, l) => {
699
+ n != l && !r.value && (S.value = n);
700
700
  },
701
701
  { immediate: !0 }
702
- ), F(
703
- () => l.value,
702
+ ), A(
703
+ () => r.value,
704
704
  (n) => {
705
- n || (A.value = C.value);
705
+ n || (S.value = C.value);
706
706
  },
707
707
  { immediate: !0 }
708
708
  );
709
709
  const j = O(() => {
710
710
  if (typeof o.options == "function" && !Array.isArray(o.options)) return d.value;
711
- const n = S.value, u = d.value;
712
- return n === "" ? u : u.filter((p) => E(p).toLowerCase().includes(n.toLowerCase()));
711
+ const n = F.value, l = d.value;
712
+ return n === "" ? l : l.filter((f) => E(f).toLowerCase().includes(n.toLowerCase()));
713
713
  });
714
- F(
714
+ A(
715
715
  () => j.value,
716
- (n, u) => {
717
- JSON.stringify(n) !== JSON.stringify(u) && z();
716
+ (n, l) => {
717
+ JSON.stringify(n) !== JSON.stringify(l) && z();
718
718
  },
719
719
  { immediate: !1, deep: !0 }
720
720
  );
@@ -726,70 +726,79 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
726
726
  };
727
727
  function ee() {
728
728
  if (o.selected == null) return -1;
729
- const n = d.value.map((p) => E(p)), u = n.filter((p) => p === E(o.selected));
730
- if (u.length > 1) {
731
- const p = u.map((D) => n.indexOf(D));
732
- for (let D = 0; D < p.length; D++) {
733
- const H = JSON.stringify(d.value[p[D]]), de = JSON.stringify(o.selected);
734
- if (H === de) return p[D];
729
+ const n = d.value.map((f) => E(f)), l = n.filter((f) => f === E(o.selected));
730
+ if (l.length > 1) {
731
+ const f = l.map((D) => n.indexOf(D));
732
+ for (let D = 0; D < f.length; D++) {
733
+ const H = JSON.stringify(d.value[f[D]]), de = JSON.stringify(o.selected);
734
+ if (H === de) return f[D];
735
735
  }
736
736
  return -1;
737
737
  }
738
738
  return n.indexOf(E(o.selected));
739
739
  }
740
740
  const te = () => {
741
- I.value || (c.value || (l.value = !1, z(), o.scrollTextInputToTopOnMobile && U(), c.value = !0), q.value = !1, k.value = !1);
741
+ I.value || (c.value || (r.value = !1, z(), U(), c.value = !0), q.value = !1, k.value = !1);
742
742
  }, U = () => {
743
- const n = window?.innerWidth != null && window.innerWidth < 640, u = screen?.width != null && screen.width < 640, p = m.value.textInputRef;
744
- (n || u) && s.value && (ue(), p?.scrollIntoView({ block: "start", inline: "center" }));
745
- }, J = f(!0);
743
+ const n = window?.innerWidth != null && window.innerWidth < 640, l = screen?.width != null && screen.width < 640, f = m.value.textInputRef;
744
+ (n || l) && s.value && (ue(), o.scrollTextInputToTopOnMobile && f?.scrollIntoView({ block: "start", inline: "center" }));
745
+ }, J = p(!0);
746
746
  let W = setTimeout(() => {
747
747
  }, 0);
748
748
  function ue() {
749
- m.value.textInputRef && (clearTimeout(W), J.value = !1, W = setTimeout(() => {
750
- J.value = !0;
751
- }, 300));
749
+ const n = m.value.textInputRef;
750
+ if (!n) return;
751
+ J.value = !1;
752
+ let l = null;
753
+ const f = () => {
754
+ l && clearInterval(l), clearTimeout(W), setTimeout(() => {
755
+ J.value = !0;
756
+ }, 100);
757
+ };
758
+ W = setTimeout(f, 5e3), l = setInterval(() => {
759
+ (c.value === !1 || n?.scrollTop === 0 && document.readyState === "complete") && f();
760
+ }, 100);
752
761
  }
753
762
  const ne = () => {
754
763
  s?.value == !0 ? m.value.focusInput() : V?.value?.focusInput && V?.value?.focusInput();
755
764
  };
756
- async function r() {
757
- typeof o.options == "function" ? await x(S.value ? S.value : void 0, !0) : (ve(o.options), t.value = d.value.length), L();
765
+ async function u() {
766
+ typeof o.options == "function" ? await x(F.value ? F.value : void 0, !0) : (ve(o.options), t.value = d.value.length), L();
758
767
  }
759
- i({ initializeOptions: r, getLabel: E });
768
+ i({ initializeOptions: u, getLabel: E });
760
769
  function L() {
761
770
  ee() == -1 && d.value && !!d.value[0] && N(d.value[0]);
762
771
  }
763
- async function x(n, u = !0) {
764
- I.value = u;
765
- const p = async () => o.options(o.maxListOptions, n || ""), D = (H) => {
772
+ async function x(n, l = !0) {
773
+ I.value = l;
774
+ const f = async () => o.options(o.maxListOptions, n || ""), D = (H) => {
766
775
  (!H || !("data" in H)) && X(), ve(H.data), Q(H?.data?.length ?? 0).then(() => {
767
776
  I.value = !1;
768
777
  });
769
778
  };
770
- await w.resetAndExecute(p, D);
779
+ await w.resetAndExecute(f, D);
771
780
  }
772
781
  async function Q(n) {
773
- const u = async () => o.options(1, ""), p = (D) => {
782
+ const l = async () => o.options(1, ""), f = (D) => {
774
783
  (!D || !("totalNum" in D)) && le(), t.value = D.totalNum ?? n;
775
784
  };
776
- await w.resetAndExecute(u, p);
785
+ await w.resetAndExecute(l, f);
777
786
  }
778
787
  const pe = () => m?.value?.textInputRef?.getElementsByTagName("li")[C.value] ?? null, Ie = (n) => {
779
788
  c.value == !1 ? te() : n && Te(n);
780
789
  }, Te = (n) => {
781
- const u = n.key || n.code;
782
- (u === "Tab" || u === "Escape") && P(), u === "ArrowDown" && Oe(n), u === "ArrowUp" && Me(n), (u === "Enter" || u === " ") && De(), n.preventDefault(), n.stopPropagation();
790
+ const l = n.key || n.code;
791
+ (l === "Tab" || l === "Escape") && P(), l === "ArrowDown" && Oe(n), l === "ArrowUp" && Me(n), (l === "Enter" || l === " ") && De(), n.preventDefault(), n.stopPropagation();
783
792
  }, De = () => {
784
- j.value.length > 0 ? (l.value = !0, N(j.value[C.value])) : P();
793
+ j.value.length > 0 ? (r.value = !0, N(j.value[C.value])) : P();
785
794
  }, Oe = (n) => {
786
795
  k.value = !0, C.value < j.value.length - 1 && (n.preventDefault(), q.value = !1, C.value++, pe()?.focus());
787
796
  }, Me = (n) => {
788
797
  k.value = !0, C.value > 0 && (n.preventDefault(), q.value = !1, C.value--, pe()?.focus());
789
798
  }, Ce = (n) => {
790
799
  if (c?.value === !1) return;
791
- S.value.length > 0 && (l.value = !0);
792
- const u = y?.value?.listContainerRef, p = m?.value?.textInputRef, D = n?.relatedTarget && p?.isEqualNode(n?.relatedTarget), H = n?.relatedTarget && u && u.contains(n?.relatedTarget), de = n?.relatedTarget && u && u.isEqualNode(n?.relatedTarget);
800
+ F.value.length > 0 && (r.value = !0);
801
+ const l = y?.value?.listContainerRef, f = m?.value?.textInputRef, D = n?.relatedTarget && f?.isEqualNode(n?.relatedTarget), H = n?.relatedTarget && l && l.contains(n?.relatedTarget), de = n?.relatedTarget && l && l.isEqualNode(n?.relatedTarget);
793
802
  if (!(H || D)) {
794
803
  if (de) {
795
804
  ne();
@@ -803,9 +812,9 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
803
812
  }
804
813
  function ke(n) {
805
814
  (!o.objectLabelKeyName || o.objectLabelKeyName.length === 0) && G();
806
- const u = o.objectLabelKeyName;
807
- for (let p = 0; p < n.length; p++)
808
- (typeof n[p] != "object" || !(u in n[p])) && G();
815
+ const l = o.objectLabelKeyName;
816
+ for (let f = 0; f < n.length; f++)
817
+ (typeof n[f] != "object" || !(l in n[f])) && G();
809
818
  }
810
819
  const ae = {
811
820
  openList: te,
@@ -817,7 +826,7 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
817
826
  focusInput: ne,
818
827
  closeList: P
819
828
  };
820
- return (n, u) => (T(), M("div", {
829
+ return (n, l) => (T(), M("div", {
821
830
  style: { position: "relative" },
822
831
  class: R(n.$attrs.class)
823
832
  }, [
@@ -827,15 +836,15 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
827
836
  "show-drop-down": c.value,
828
837
  filteredListItems: j.value,
829
838
  mouseHoveringOnList: q.value,
830
- focusedIndex: A.value,
839
+ focusedIndex: S.value,
831
840
  selectedIndex: _.value,
832
841
  "max-list-height-p-x": e.maxListHeightPX,
833
842
  "list-animation-duration-ms": e.listAnimationDurationMs,
834
843
  "parent-methods": ae,
835
- blockListChange: l.value,
836
- "onUpdate:blockListChange": u[1] || (u[1] = (p) => l.value = p),
844
+ blockListChange: r.value,
845
+ "onUpdate:blockListChange": l[1] || (l[1] = (f) => r.value = f),
837
846
  "total-options-count": t.value,
838
- onReverseDropDownList: u[2] || (u[2] = (p) => g.value = p),
847
+ onReverseDropDownList: l[2] || (l[2] = (f) => g.value = f),
839
848
  enableScrollClose: J.value,
840
849
  "enable-text-filter": s.value
841
850
  }, {
@@ -858,7 +867,7 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
858
867
  placeholder: ie.value,
859
868
  "enable-button-click": k.value,
860
869
  "parent-methods": ae,
861
- "onUpdate:query": u[0] || (u[0] = (p) => S.value = p)
870
+ "onUpdate:query": l[0] || (l[0] = (f) => F.value = f)
862
871
  }, null, 8, ["enable-text-filter", "show-drop-down", "placeholder", "enable-button-click"])
863
872
  ]),
864
873
  _: 1
@@ -868,7 +877,7 @@ const ge = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
868
877
  }, 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"])
869
878
  ], 2));
870
879
  }
871
- }), lt = /* @__PURE__ */ K(st, [["__scopeId", "data-v-c65b5182"]]);
880
+ }), lt = /* @__PURE__ */ K(st, [["__scopeId", "data-v-9cbaf19a"]]);
872
881
  export {
873
882
  lt as default
874
883
  };