@signal24/vue-foundation 4.17.0 → 4.17.2

package/dist/demo/components/demo-root.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/demo/components/demo-vf-smart-select.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/src/components/overlay-anchor.vue.d.ts

@@ -1,22 +1,20 @@
 import type { OverlayAnchorOptions } from './overlay-types';
-declare var __VLS_0: {};
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
+declare function __VLS_template(): {
     slots: {
-        default?(_: typeof __VLS_0): any;
+        default?(_: {}): any;
     };
     refs: {};
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<{
     overlayId: string;
     anchor: OverlayAnchorOptions;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     overlayId: string;
     anchor: OverlayAnchorOptions;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/src/components/overlay-container.d.ts

@@ -15,7 +15,7 @@ export interface OverlayInjection<C extends OverlayComponent, R extends Componen
 }
 export declare const OverlayContainer: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}>;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export type Vue__ComponentPublicInstanceConstructor<T extends ComponentPublicInstance<Props, RawBindings, D, C, M> = ComponentPublicInstance<any>, Props = any, RawBindings = any, D = any, C extends ComputedOptions = ComputedOptions, M extends MethodOptions = MethodOptions> = {
     __isFragment?: never;
     __isTeleport?: never;

package/dist/src/components/vf-alert-modal.vue.d.ts

@@ -14,5 +14,5 @@ declare const _default: import("vue").DefineComponent<{
     message: string | Error;
     shouldConfirm?: boolean;
     callback: (ok: boolean) => void;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}>;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/src/components/vf-ez-smart-select.vue.d.ts

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
         [K: string]: string;
     } | string[];
     formatter?: (item: IComputedOption) => string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string | null) => any;
 }, string, import("vue").PublicProps, Readonly<{
     modelValue: string | null | undefined;
@@ -22,5 +22,5 @@ declare const _default: import("vue").DefineComponent<{
     formatter?: (item: IComputedOption) => string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/src/components/vf-modal.vue.d.ts

@@ -2,21 +2,19 @@ declare function mask(): () => void;
 declare function unmask(): void;
 declare function hide(): () => void;
 declare function unhide(): void;
-declare var __VLS_1: {};
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
+declare function __VLS_template(): {
     slots: {
         header?(_: {}): any;
-        default?(_: typeof __VLS_1): any;
+        default?(_: {}): any;
         footer?(_: {}): any;
     };
     refs: {
-        overlay: import("vue").HTMLAttributes & import("vue").ReservedProps;
-        form: import("vue").FormHTMLAttributes & import("vue").ReservedProps;
+        overlay: HTMLDivElement;
+        form: HTMLFormElement;
     };
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<{
     id?: string;
     closeOnMaskClick?: boolean;
@@ -38,8 +36,8 @@ declare const __VLS_component: import("vue").DefineComponent<{
     class?: string | string[];
 }> & Readonly<{
     onFormSubmit?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/src/components/vf-toast.vue.d.ts

@@ -9,5 +9,5 @@ declare const _default: import("vue").DefineComponent<IToastOptions & {
     callback: () => void;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IToastOptions & {
     callback: () => void;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}>;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/vue-foundation.es.js

@@ -25,8 +25,8 @@ const Wt = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const n = e, o = t, i = T(null), l = M(() => i.value ? i.value.map((h) => {
-      const k = h;
+    const n = e, o = t, i = T(null), l = M(() => i.value ? i.value.map((p) => {
+      const k = p;
       return n.preprocesor ? n.preprocesor(k) : n.displayKey ? k[n.displayKey] : "";
     }) : null), c = T(n.modelValue ?? null);
     F(() => n.loadFn, r), F(
@@ -36,16 +36,16 @@ const Wt = {
     async function r() {
       i.value = await n.loadFn();
     }
-    return $(r), (d, h) => l.value ? J((w(), b("select", {
+    return $(r), (d, p) => l.value ? J((w(), b("select", {
       key: 1,
-      "onUpdate:modelValue": h[0] || (h[0] = (k) => c.value = k)
+      "onUpdate:modelValue": p[0] || (p[0] = (k) => c.value = k)
     }, [
       n.nullText ? (w(), b("option", Ut, W(n.nullText), 1)) : D("", !0),
-      (w(!0), b(ee, null, he(l.value, (k, p) => {
+      (w(!0), b(ee, null, he(l.value, (k, y) => {
         var E;
         return w(), b("option", {
-          key: p,
-          value: (E = i.value) == null ? void 0 : E[p]
+          key: y,
+          value: (E = i.value) == null ? void 0 : E[y]
         }, W(k), 9, jt);
       }), 128))
     ], 512)), [
@@ -65,32 +65,32 @@ const Wt = {
     $(c);
     function c() {
       if (!l) return;
-      const h = l.vnode.el, { styles: k, classes: p } = r(h, n);
-      o.value = k, i.value = p;
+      const p = l.vnode.el, { styles: k, classes: y } = r(p, n);
+      o.value = k, i.value = y;
     }
-    function r(h, k) {
-      const p = t.anchor instanceof HTMLElement ? {} : t.anchor, E = k.getBoundingClientRect(), f = h.getBoundingClientRect();
-      p.matchWidth && (f.width = E.width), p.matchHeight && (f.height = E.height);
-      const a = p.class ? Array.isArray(p.class) ? p.class : [p.class] : [];
+    function r(p, k) {
+      const y = t.anchor instanceof HTMLElement ? {} : t.anchor, E = k.getBoundingClientRect(), v = p.getBoundingClientRect();
+      y.matchWidth && (v.width = E.width), y.matchHeight && (v.height = E.height);
+      const a = y.class ? Array.isArray(y.class) ? y.class : [y.class] : [];
       let u, S;
-      if (p.y === "center")
-        u = E.top + E.height / 2 - f.height / 2, a.push("anchored-center-y");
+      if (y.y === "center")
+        u = E.top + E.height / 2 - v.height / 2, a.push("anchored-center-y");
       else {
-        const L = (E.bottom + f.height < window.innerHeight || p.y === "below") && p.y !== "above";
-        u = L ? E.bottom : E.top - f.height, a.push(L ? "anchored-top" : "anchored-bottom");
+        const L = (E.bottom + v.height < window.innerHeight || y.y === "below") && y.y !== "above";
+        u = L ? E.bottom : E.top - v.height, a.push(L ? "anchored-top" : "anchored-bottom");
       }
-      if (p.x === "center")
-        S = E.left + E.width / 2 - f.width / 2, a.push("anchored-center-x");
+      if (y.x === "center")
+        S = E.left + E.width / 2 - v.width / 2, a.push("anchored-center-x");
       else {
-        const L = (E.left + f.width < window.innerWidth || p.x === "left") && p.x !== "right";
-        S = L ? E.left : E.right - f.width, a.push(L ? "anchored-left" : "anchored-right");
+        const L = (E.left + v.width < window.innerWidth || y.x === "left") && y.x !== "right";
+        S = L ? E.left : E.right - v.width, a.push(L ? "anchored-left" : "anchored-right");
       }
       return {
         styles: {
           top: `${u}px`,
           left: `${S}px`,
-          ...p.matchWidth ? { width: `${f.width}px` } : {},
-          ...p.matchHeight ? { height: `${f.height}px` } : {}
+          ...y.matchWidth ? { width: `${v.width}px` } : {},
+          ...y.matchHeight ? { height: `${v.height}px` } : {}
         },
         classes: a
       };
@@ -102,12 +102,12 @@ const Wt = {
       setTimeout(() => {
         window.addEventListener("click", d);
       }, 10);
-    }), (h, k) => (w(), b("div", {
+    }), (p, k) => (w(), b("div", {
       class: B(["vf-overlay-anchor", i.value]),
       style: St(o.value),
       onClick: ye(d, ["stop"])
     }, [
-      Q(h.$slots, "default")
+      Q(p.$slots, "default")
     ], 6));
   }
 });
@@ -302,18 +302,18 @@ const Qt = ["id"], Jt = {
   emits: ["formSubmit"],
   setup(e, { expose: t }) {
     const n = pe(), o = e;
-    t({ mask: p, unmask: E, hide: f, unhide: a });
+    t({ mask: y, unmask: E, hide: v, unhide: a });
     const i = T(), l = T(), c = T(!1), r = M(() => At([...Array.isArray(o.class) ? o.class : [o.class], c.value && "hidden"]));
     $(() => {
       var u;
-      document.body.classList.add("vf-modal-open"), o.closeOnMaskClick && (window.addEventListener("keydown", h), (u = i.value) == null || u.addEventListener("click", d));
+      document.body.classList.add("vf-modal-open"), o.closeOnMaskClick && (window.addEventListener("keydown", p), (u = i.value) == null || u.addEventListener("click", d));
     }), ge(() => {
-      window.removeEventListener("keydown", h), document.body.querySelectorAll(".vf-modal").length > 0 || document.body.classList.remove("vf-modal-open");
+      window.removeEventListener("keydown", p), document.body.querySelectorAll(".vf-modal").length > 0 || document.body.classList.remove("vf-modal-open");
     });
     function d(u) {
       u.target == i.value && k();
     }
-    function h(u) {
+    function p(u) {
       if (u.key === "Esc" || u.key === "Escape") {
         const S = document.querySelectorAll(".vf-modal-wrap");
         S[S.length - 1] === i.value && k();
@@ -322,13 +322,13 @@ const Qt = ["id"], Jt = {
     function k() {
       Ye(n);
     }
-    function p() {
+    function y() {
       return Gt(l.value), () => E();
     }
     function E() {
       Ge(l.value);
     }
-    function f() {
+    function v() {
       return c.value = !0, () => a();
     }
     function a() {
@@ -511,33 +511,33 @@ const mn = ["disabled", "placeholder", "required"], hn = {
     t({
       addRemoteOption: wt
     });
-    const r = T(), d = T(), h = T(), k = T(!1), p = T(!1), E = T([]), f = T(!1), a = T(""), u = T(null), S = T(null), I = T(!1), L = T(null), Se = T(!1), it = M(() => l.prependOptions ?? []), rt = M(() => l.appendOptions ?? []), Ce = M(() => !!l.disabled), at = M(() => !p.value && l.preload ? "Loading..." : l.nullTitle ? l.nullTitle : l.placeholder || ""), ut = M(() => l.noResultsText || "No options match your search."), R = M(() => l.valueExtractor ? l.valueExtractor : l.valueField ? (s) => s[l.valueField] : null), j = M(() => l.keyExtractor ? l.keyExtractor : l.keyField ? (s) => String(s[l.keyField]) : R.value ? (s) => String(R.value(s)) : null), ie = M(() => l.formatter ? l.formatter : l.labelField ? (s) => String(s[l.labelField]) : (s) => String(s)), Le = M(() => [...it.value, ...E.value, ...rt.value]), re = M(() => Le.value.map((s, v) => {
+    const r = T(), d = T(), p = T(), k = T(!1), y = T(!1), E = T([]), v = T(!1), a = T(""), u = T(null), S = T(null), I = T(!1), L = T(null), Se = T(!1), it = M(() => l.prependOptions ?? []), rt = M(() => l.appendOptions ?? []), Ce = M(() => !!l.disabled), at = M(() => !y.value && l.preload ? "Loading..." : l.nullTitle ? l.nullTitle : l.placeholder || ""), ut = M(() => l.noResultsText || "No options match your search."), R = M(() => l.valueExtractor ? l.valueExtractor : l.valueField ? (s) => s[l.valueField] : null), j = M(() => l.keyExtractor ? l.keyExtractor : l.keyField ? (s) => String(s[l.keyField]) : R.value ? (s) => String(R.value(s)) : null), ie = M(() => l.formatter ? l.formatter : l.labelField ? (s) => String(s[l.labelField]) : (s) => String(s)), Le = M(() => [...it.value, ...E.value, ...rt.value]), re = M(() => Le.value.map((s, f) => {
       var Ae, Fe;
-      const m = ie.value(s), y = (Ae = l.subtitleFormatter) == null ? void 0 : Ae.call(l, s), g = m ? m.trim().toLowerCase() : "", C = y ? y.trim().toLowerCase() : "", Z = [];
+      const m = ie.value(s), h = (Ae = l.subtitleFormatter) == null ? void 0 : Ae.call(l, s), g = m ? m.trim().toLowerCase() : "", C = h ? h.trim().toLowerCase() : "", Z = [];
       return l.searchFields ? l.searchFields.forEach((Oe) => {
         s[Oe] && Z.push(String(s[Oe]).toLowerCase());
       }) : (Z.push(g), C && Z.push(C)), {
-        key: ((Fe = j.value) == null ? void 0 : Fe.call(j, s)) ?? String(v),
+        key: ((Fe = j.value) == null ? void 0 : Fe.call(j, s)) ?? String(f),
         title: m,
-        subtitle: y,
+        subtitle: h,
         searchContent: Z.join(""),
         ref: s
       };
     })), H = M(() => {
       let s = [...re.value];
-      if (f.value) {
-        const v = a.value.trim().toLowerCase();
-        if (v.length) {
-          s = s.filter((g) => g.searchContent.includes(v));
-          const m = _t(a.value).replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"), y = new RegExp(`(${m})`, "ig");
+      if (v.value) {
+        const f = a.value.trim().toLowerCase();
+        if (f.length) {
+          s = s.filter((g) => g.searchContent.includes(f));
+          const m = _t(a.value).replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"), h = new RegExp(`(${m})`, "ig");
           s = s.map((g) => {
             var C;
             return {
               ...g,
-              title: g.title.replace(y, "<mark>$1</mark>"),
-              subtitle: (C = g.subtitle) == null ? void 0 : C.replace(y, "<mark>$1</mark>")
+              title: g.title.replace(h, "<mark>$1</mark>"),
+              subtitle: (C = g.subtitle) == null ? void 0 : C.replace(h, "<mark>$1</mark>")
             };
-          }), Se.value && (s.find((C) => C.searchContent === v) !== void 0 || s.push({
+          }), Se.value && (s.find((C) => C.searchContent === f) !== void 0 || s.push({
             key: i,
             title: "Create <strong>" + a.value.trim() + "</strong>..."
           }));
@@ -551,19 +551,19 @@ const mn = ["disabled", "placeholder", "required"], hn = {
     F(() => l.modelValue, ue), F(
       () => l.options,
       () => {
-        E.value = l.options ?? [], p.value = !0;
+        E.value = l.options ?? [], y.value = !0;
       }
     ), F(re, () => {
       I.value && setTimeout(Ie, 0);
     }), F(a, () => {
-      f.value && !l.remoteSearch && !a.value.trim().length && (f.value = !1);
+      v.value && !l.remoteSearch && !a.value.trim().length && (v.value = !1);
     }), F(I, () => {
-      I.value ? setTimeout(yt, 0) : (f.value = !1, a.value = S.value || "", h.value && (h.value.style.visibility = "hidden"));
+      I.value ? setTimeout(yt, 0) : (v.value = !1, a.value = S.value || "", p.value && (p.value.style.visibility = "hidden"));
     }), F(H, () => {
       var s;
-      l.modelValue && !u.value && ue(), (L.value || f.value) && !H.value.find((v) => v.key == L.value) && (L.value = ((s = H.value[0]) == null ? void 0 : s.key) ?? o);
+      l.modelValue && !u.value && ue(), (L.value || v.value) && !H.value.find((f) => f.key == L.value) && (L.value = ((s = H.value[0]) == null ? void 0 : s.key) ?? o);
     }), $(async () => {
-      Se.value = l.onCreateItem !== void 0, l.options ? (E.value = [...l.options], p.value = !0) : l.preload && await xe(), ue(), F(u, () => {
+      Se.value = l.onCreateItem !== void 0, l.options ? (E.value = [...l.options], y.value = !0) : l.preload && await xe(), ue(), F(u, () => {
         u.value !== l.modelValue && c(
           "update:modelValue",
           u.value && R.value ? R.value(u.value) : u.value
@@ -574,12 +574,12 @@ const mn = ["disabled", "placeholder", "required"], hn = {
       await Me(), E.value && c("optionsLoaded", E.value);
     }
     async function Me() {
-      var v;
-      const s = l.remoteSearch && f.value && a.value ? a.value : null;
-      k.value = !0, E.value = await ((v = l.loadOptions) == null ? void 0 : v.call(l, s)) ?? [], k.value = !1, p.value = !0;
+      var f;
+      const s = l.remoteSearch && v.value && a.value ? a.value : null;
+      k.value = !0, E.value = await ((f = l.loadOptions) == null ? void 0 : f.call(l, s)) ?? [], k.value = !1, y.value = !0;
     }
     function ct() {
-      f.value && (Me(), f.value = a.value.trim().length > 0);
+      v.value && (Me(), v.value = a.value.trim().length > 0);
     }
     function dt(s) {
       if (s.key == "Escape") {
@@ -587,8 +587,8 @@ const mn = ["disabled", "placeholder", "required"], hn = {
         return;
       }
       if (!(s.key == "ArrowLeft" || s.key == "ArrowRight") && s.key != "Tab") {
-        if (!p.value) {
-          f.value || s.preventDefault();
+        if (!y.value) {
+          v.value || s.preventDefault();
           return;
         }
         if (s.key == "ArrowUp" || s.key == "ArrowDown")
@@ -599,14 +599,14 @@ const mn = ["disabled", "placeholder", "required"], hn = {
           return s.preventDefault(), ae(s.key == "Home" ? -Number.MAX_SAFE_INTEGER : Number.MAX_SAFE_INTEGER);
         if (s.key == "Enter") {
           s.preventDefault();
-          const v = H.value.find((m) => m.key == L.value);
-          if (v) return He(v);
+          const f = H.value.find((m) => m.key == L.value);
+          if (f) return He(f);
         }
         if (s.key === "Delete" || s.key === "Backspace") {
-          a.value.length > 1 && (f.value = !0);
+          a.value.length > 1 && (v.value = !0);
           return;
         }
-        !s.metaKey && wn.includes(s.key) && (f.value = !0);
+        !s.metaKey && wn.includes(s.key) && (v.value = !0);
       }
     }
     function ft() {
@@ -619,56 +619,56 @@ const mn = ["disabled", "placeholder", "required"], hn = {
       u.value ? L.value = mt(u.value) : l.nullTitle && (L.value = o);
     }
     function mt(s) {
-      var v;
-      return j.value ? j.value(u.value) : ((v = ht(s)) == null ? void 0 : v.key) ?? "";
+      var f;
+      return j.value ? j.value(u.value) : ((f = ht(s)) == null ? void 0 : f.key) ?? "";
     }
     function ht(s) {
-      const v = H.value.find((g) => g.ref === s);
-      if (v)
-        return v;
-      const m = l.keyExtractor ? (g, C) => l.keyExtractor(g) === l.keyExtractor(C) : Xe, y = H.value.find((g) => m(g.ref, s));
-      return y || null;
+      const f = H.value.find((g) => g.ref === s);
+      if (f)
+        return f;
+      const m = l.keyExtractor ? (g, C) => l.keyExtractor(g) === l.keyExtractor(C) : Xe, h = H.value.find((g) => m(g.ref, s));
+      return h || null;
     }
     function pt() {
       l.debug || (!a.value.length && l.nullTitle && (u.value = null, S.value = null), I.value = !1);
     }
     function yt() {
       var s;
-      p.value || xe(), l.optionsListId && ((s = h.value) == null || s.setAttribute("id", l.optionsListId)), gt();
+      y.value || xe(), l.optionsListId && ((s = p.value) == null || s.setAttribute("id", l.optionsListId)), gt();
     }
     function gt() {
-      const s = r.value.getBoundingClientRect(), v = s.y + s.height + 2, m = s.x, y = h.value, g = window.getComputedStyle(r.value);
+      const s = r.value.getBoundingClientRect(), f = s.y + s.height + 2, m = s.x, h = p.value, g = window.getComputedStyle(r.value);
       for (let C in g)
-        /^(font|text)/.test(C) && (y.style[C] = g[C]);
-      if (y.style.top = v + "px", y.style.left = m + "px", y.style.minWidth = s.width + "px", !g.maxHeight || g.maxHeight == "none") {
-        const C = window.innerHeight - v - 12;
-        y.style.maxHeight = C + "px";
+        /^(font|text)/.test(C) && (h.style[C] = g[C]);
+      if (h.style.top = f + "px", h.style.left = m + "px", h.style.minWidth = s.width + "px", !g.maxHeight || g.maxHeight == "none") {
+        const C = window.innerHeight - f - 12;
+        h.style.maxHeight = C + "px";
       }
-      y.style.visibility = "visible", document.body.appendChild(y), setTimeout(Ie, 0);
+      h.style.visibility = "visible", document.body.appendChild(h), setTimeout(Ie, 0);
     }
     function Ie() {
-      if (!p.value || !L.value) return;
-      const s = H.value.findIndex((y) => y.key == L.value), v = h.value, m = v.querySelectorAll(".option")[s];
-      v.scrollTop = m.offsetTop;
+      if (!y.value || !L.value) return;
+      const s = H.value.findIndex((h) => h.key == L.value), f = p.value, m = f == null ? void 0 : f.querySelectorAll(".option")[s];
+      m && (f.scrollTop = m.offsetTop);
     }
     function Et(s) {
       L.value = s ? s.key : null;
     }
     function ae(s) {
-      const v = H.value.findIndex((C) => C.key == L.value);
-      let m = v + s;
-      if (m < 0 ? m = 0 : m >= H.value.length && (m = H.value.length - 1), v == m) return;
+      const f = H.value.findIndex((C) => C.key == L.value);
+      let m = f + s;
+      if (m < 0 ? m = 0 : m >= H.value.length && (m = H.value.length - 1), f == m) return;
       L.value = H.value[m].key;
-      const y = h.value, g = y.querySelectorAll(".option")[m];
-      g.offsetTop < y.scrollTop ? y.scrollTop = g.offsetTop : g.offsetTop + g.offsetHeight > y.scrollTop + y.clientHeight && (y.scrollTop = g.offsetTop + g.offsetHeight - y.clientHeight);
+      const h = p.value, g = h == null ? void 0 : h.querySelectorAll(".option")[m];
+      g && (g.offsetTop < h.scrollTop ? h.scrollTop = g.offsetTop : g.offsetTop + g.offsetHeight > h.scrollTop + h.clientHeight && (h.scrollTop = g.offsetTop + g.offsetHeight - h.clientHeight));
     }
     function He(s) {
-      var v, m;
-      if (f.value = !1, s.key == o)
+      var f, m;
+      if (v.value = !1, s.key == o)
         a.value = "", u.value = null, S.value = null;
       else if (s.key === i) {
-        const y = a.value.trim();
-        a.value = "", u.value = null, S.value = null, (v = l.onCreateItem) == null || v.call(l, y);
+        const h = a.value.trim();
+        a.value = "", u.value = null, S.value = null, (f = l.onCreateItem) == null || f.call(l, h);
       } else {
         const g = re.value.find((C) => C.key == s.key).ref;
         u.value = g, S.value = ie.value(g), a.value = S.value || "";
@@ -681,7 +681,7 @@ const mn = ["disabled", "placeholder", "required"], hn = {
     function wt(s) {
       E.value.unshift(s);
     }
-    return (s, v) => (w(), b("div", {
+    return (s, f) => (w(), b("div", {
       ref_key: "el",
       ref: r,
       class: B(["vf-smart-select", { disabled: Ce.value, open: I.value }])
@@ -689,7 +689,7 @@ const mn = ["disabled", "placeholder", "required"], hn = {
       J(O("input", {
         ref_key: "searchField",
         ref: d,
-        "onUpdate:modelValue": v[0] || (v[0] = (m) => a.value = m),
+        "onUpdate:modelValue": f[0] || (f[0] = (m) => a.value = m),
         type: "text",
         disabled: Ce.value,
         class: B({ nullable: !!s.nullTitle }),
@@ -705,17 +705,17 @@ const mn = ["disabled", "placeholder", "required"], hn = {
       I.value ? (w(), b("div", {
         key: 0,
         ref_key: "optionsContainer",
-        ref: h,
+        ref: p,
         class: "vf-smart-select-options"
       }, [
-        p.value ? (w(), b(ee, { key: 1 }, [
+        y.value ? (w(), b(ee, { key: 1 }, [
           (w(!0), b(ee, null, he(H.value, (m) => (w(), b("div", {
             key: String(m.key),
             class: B(["option", {
               highlighted: L.value === m.key
             }]),
-            onMousemove: (y) => Et(m),
-            onMousedown: (y) => He(m)
+            onMousemove: (h) => Et(m),
+            onMousedown: (h) => He(m)
           }, [
             O("div", {
               class: "title",
@@ -753,12 +753,12 @@ const mn = ["disabled", "placeholder", "required"], hn = {
         c.value = o.value.find((d) => d.value === r) ?? null;
       }
     ), F(c, (r) => {
-      var h;
-      const d = r ? (h = o.value.find((k) => Xe(k, r))) == null ? void 0 : h.value : null;
+      var p;
+      const d = r ? (p = o.value.find((k) => Xe(k, r))) == null ? void 0 : p.value : null;
       l("update:modelValue", d ?? null);
     }), (r, d) => (w(), qe(kn, {
       modelValue: c.value,
-      "onUpdate:modelValue": d[0] || (d[0] = (h) => c.value = h),
+      "onUpdate:modelValue": d[0] || (d[0] = (p) => c.value = p),
       options: o.value,
       formatter: i.value,
       "null-title": r.nullTitle
@@ -870,27 +870,27 @@ function Io(e, t, n) {
 }
 function Ho(e, t) {
   const n = document.createElement("div");
-  n.classList.add("vf-overlay"), n.addEventListener("click", p), document.body.appendChild(n);
+  n.classList.add("vf-overlay"), n.addEventListener("click", y), document.body.appendChild(n);
   const o = document.createElement("div");
   o.classList.add("vf-context-menu"), o.style.position = "absolute", n.appendChild(o);
   const i = e.currentTarget;
-  i.style.userSelect = "none", i.classList.add("context-menu-active"), t.targetClass && i.classList.add(t.targetClass), t.class && o.classList.add(t.class), t.items.forEach((f) => {
-    if (f == "-") {
+  i.style.userSelect = "none", i.classList.add("context-menu-active"), t.targetClass && i.classList.add(t.targetClass), t.class && o.classList.add(t.class), t.items.forEach((v) => {
+    if (v == "-") {
       const u = document.createElement("div");
       u.classList.add("separator"), o.appendChild(u);
       return;
     }
     const a = document.createElement("div");
-    a.classList.add("item"), a.style.userSelect = "none", a.innerText = f.title, o.appendChild(a), f.class && a.classList.add(f.class), f.shouldConfirm ? a.addEventListener("click", (u) => E(u, a, f.handler)) : a.addEventListener("click", () => f.handler());
+    a.classList.add("item"), a.style.userSelect = "none", a.innerText = v.title, o.appendChild(a), v.class && a.classList.add(v.class), v.shouldConfirm ? a.addEventListener("click", (u) => E(u, a, v.handler)) : a.addEventListener("click", () => v.handler());
   });
-  const l = window.innerWidth - e.clientX, c = window.innerHeight - e.clientY, r = o.offsetHeight, d = o.offsetWidth, h = l < d ? e.clientX - d - 1 : e.clientX + 1, k = c < r ? e.clientY - r - 1 : e.clientY + 1;
-  o.style.left = h + "px", o.style.top = k + "px", setTimeout(() => {
+  const l = window.innerWidth - e.clientX, c = window.innerHeight - e.clientY, r = o.offsetHeight, d = o.offsetWidth, p = l < d ? e.clientX - d - 1 : e.clientX + 1, k = c < r ? e.clientY - r - 1 : e.clientY + 1;
+  o.style.left = p + "px", o.style.top = k + "px", setTimeout(() => {
     o.style.width = o.offsetWidth + "px";
   }, 50);
-  function p() {
+  function y() {
     t.targetClass && i.classList.remove(t.targetClass), i.classList.remove("context-menu-active"), i.style.userSelect = "", n.remove();
   }
-  function E(f, a, u) {
+  function E(v, a, u) {
     if (a.classList.contains("pending-confirm"))
       return u();
     const S = a.innerHTML;
@@ -898,7 +898,7 @@ function Ho(e, t) {
     const I = () => {
       a.classList.remove("pending-confirm"), a.innerHTML = S, a.removeEventListener("mouseleave", I);
     };
-    a.addEventListener("mouseleave", I), f.stopPropagation();
+    a.addEventListener("mouseleave", I), v.stopPropagation();
   }
 }
 const Vn = (e) => new Promise((t) => setTimeout(t, e)), Ao = (e) => Vn(e * 1e3);
@@ -1028,13 +1028,13 @@ function Re(e, t) {
   t.value == t.oldValue && e.innerHTML.length || (e.innerText = Kn(e, t));
 }
 function Kn(e, t) {
-  var d, h;
+  var d, p;
   if (!t.value)
     return ((d = e.attributes.getNamedItem("placeholder")) == null ? void 0 : d.value) ?? "";
   let n = "";
   const o = t.value.replace(/ /g, "T").replace(/\.\d+Z$/, "Z"), i = e.attributes.getNamedItem("local") !== null ? o.replace(/Z$/, "") : o.replace(/(Z|\+00:00)?$/, "Z"), l = new Date(i);
   e.attributes.getNamedItem("display-utc") !== null && l.setMinutes(l.getMinutes() - l.getTimezoneOffset());
-  let c = (h = e.attributes.getNamedItem("format")) == null ? void 0 : h.value;
+  let c = (p = e.attributes.getNamedItem("format")) == null ? void 0 : p.value;
   if (!c && e.attributes.getNamedItem("relative-date") !== null) {
     const k = /* @__PURE__ */ new Date();
     k.getFullYear() == l.getFullYear() && k.getMonth() == l.getMonth() && k.getDate() == l.getDate() && (n = "at", c = "HH:mm");

package/eslint.config.mjs

@@ -15,6 +15,7 @@ export default tseslint.config(
     eslint.configs.recommended,
     ...tseslint.configs.recommended,
     ...pluginVue.configs['flat/recommended'],
+    eslintPluginPrettierRecommended,
 
     // register parser options
     {
@@ -36,7 +37,6 @@ export default tseslint.config(
     },
 
     // plugins & configs
-    eslintPluginPrettierRecommended,
     {
         plugins: {
             'unused-imports': unusedImports,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.17.0",
+    "version": "4.17.2",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "exports": {
@@ -43,7 +43,7 @@
         "vue": "^3.4.0"
     },
     "devDependencies": {
-        "@eslint/js": "^9.9.1",
+        "@eslint/js": "^9.10.0",
         "@nabla/vite-plugin-eslint": "^2.0.4",
         "@signal24/openapi-client-codegen": "^1.1.0",
         "@tsconfig/node20": "^20.1.4",
@@ -57,25 +57,25 @@
         "@vue/eslint-config-typescript": "^13.0.0",
         "@vue/test-utils": "^2.4.6",
         "@vue/tsconfig": "^0.5.1",
-        "cypress": "^13.14.1",
-        "date-fns": "^3.6.0",
-        "eslint": "^9.9.1",
+        "cypress": "^13.14.2",
+        "date-fns": "^4.1.0",
+        "eslint": "^9.10.0",
         "eslint-plugin-cypress": "^3.5.0",
         "eslint-plugin-simple-import-sort": "^12.1.1",
-        "eslint-plugin-unused-imports": "^4.1.3",
+        "eslint-plugin-unused-imports": "^4.1.4",
         "eslint-plugin-vue": "^9.28.0",
         "jsdom": "^25.0.0",
         "lodash": "^4.17.21",
         "prettier": "^3.3.3",
         "sass": "^1.78.0",
-        "start-server-and-test": "^2.0.5",
-        "type-fest": "^4.26.0",
-        "typescript": "^5.5.4",
-        "typescript-eslint": "^8.4.0",
-        "vite": "^5.4.3",
-        "vitest": "^2.0.5",
-        "vue": "^3.5.1",
-        "vue-tsc": "^2.1.4"
+        "start-server-and-test": "^2.0.8",
+        "type-fest": "^4.26.1",
+        "typescript": "^5.6.2",
+        "typescript-eslint": "^8.6.0",
+        "vite": "^5.4.6",
+        "vitest": "^2.1.1",
+        "vue": "^3.5.6",
+        "vue-tsc": "^2.1.6"
     },
     "packageManager": "yarn@4.0.2"
 }

package/src/components/vf-smart-select.vue

@@ -443,7 +443,8 @@ function highlightInitialOption() {
     if (!highlightedOptionKey.value) return;
     const highlightedOptionIdx = effectiveOptions.value.findIndex(option => option.key == highlightedOptionKey.value);
     const containerEl = optionsContainer.value!;
-    const highlightedOptionEl = containerEl.querySelectorAll('.option')[highlightedOptionIdx] as HTMLElement;
+    const highlightedOptionEl = containerEl?.querySelectorAll('.option')[highlightedOptionIdx] as HTMLElement;
+    if (!highlightedOptionEl) return;
     containerEl.scrollTop = highlightedOptionEl.offsetTop;
 }
 
@@ -463,7 +464,8 @@ function incrementHighlightedOption(increment: number) {
     highlightedOptionKey.value = effectiveOptions.value[targetOptionIdx].key;
 
     const containerEl = optionsContainer.value!;
-    const targetOptionEl = containerEl.querySelectorAll('.option')[targetOptionIdx] as HTMLElement;
+    const targetOptionEl = containerEl?.querySelectorAll('.option')[targetOptionIdx] as HTMLElement;
+    if (!targetOptionEl) return;
 
     if (targetOptionEl.offsetTop < containerEl.scrollTop) {
         containerEl.scrollTop = targetOptionEl.offsetTop;