@signal24/vue-foundation 4.7.1 → 4.7.3

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

@@ -35,6 +35,7 @@ declare const _default: import("vue").DefineComponent<{
     disabled: PropType<boolean>;
     optionsListId: PropType<string>;
     debug: PropType<boolean>;
+    required: PropType<boolean>;
 }, unknown, {
     isLoading: boolean;
     isLoaded: boolean;
@@ -64,7 +65,6 @@ declare const _default: import("vue").DefineComponent<{
     effectiveOptions(): OptionDescriptor[];
 }, {
     loadRemoteOptions(): Promise<void>;
-    handleSourceUpdate(): Promise<void> | undefined;
     reloadOptions(): Promise<void>;
     reloadOptionsIfSearching(): void;
     handleKeyDown(e: KeyboardEvent): void;
@@ -83,7 +83,6 @@ declare const _default: import("vue").DefineComponent<{
     addRemoteOption(option: GenericObject): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     optionsLoaded: (options: any[]) => void;
-    createItem: (searchText: string) => void;
     'update:modelValue': (value: any) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -111,10 +110,10 @@ declare const _default: import("vue").DefineComponent<{
     disabled: PropType<boolean>;
     optionsListId: PropType<string>;
     debug: PropType<boolean>;
+    required: PropType<boolean>;
 }>> & {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     onOptionsLoaded?: ((options: any[]) => any) | undefined;
-    onCreateItem?: ((searchText: string) => any) | undefined;
 }, {
     modelValue: any;
 }, {}>;

package/dist/vue-foundation.es.js

@@ -1,17 +1,17 @@
 var Ve = Object.defineProperty;
 var Fe = (e, t, n) => t in e ? Ve(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var v = (e, t, n) => (Fe(e, typeof t != "symbol" ? t + "" : t, n), n);
-import { defineComponent as x, defineProps as Ne, defineEmits as Re, ref as w, computed as V, openBlock as u, createElementBlock as f, createElementVNode as O, toDisplayString as C, withDirectives as U, createCommentVNode as T, Fragment as j, renderList as J, vModelSelect as Ke, getCurrentInstance as ee, onMounted as L, normalizeClass as k, normalizeStyle as Ue, withModifiers as te, renderSlot as K, reactive as je, h as W, Teleport as We, markRaw as Pe, onBeforeUnmount as ne, resolveDirective as Te, createBlock as ke, createSlots as qe, withCtx as Y, createTextVNode as ae, vModelText as ze, watch as ce, onActivated as Se, onDeactivated as xe } from "vue";
-import { compact as Xe, debounce as Ye, isEqual as Ce, upperFirst as Ze, startCase as Ge, cloneDeep as Qe, remove as Je } from "lodash";
+import { defineComponent as C, defineProps as Ne, defineEmits as Re, ref as w, computed as V, openBlock as u, createElementBlock as f, createElementVNode as O, toDisplayString as x, withDirectives as U, createCommentVNode as T, Fragment as j, renderList as J, vModelSelect as Ke, getCurrentInstance as ee, onMounted as L, normalizeClass as k, normalizeStyle as Ue, withModifiers as te, renderSlot as K, reactive as je, h as W, Teleport as We, markRaw as Pe, onBeforeUnmount as ne, resolveDirective as Te, createBlock as ke, createSlots as qe, withCtx as Y, createTextVNode as ae, vModelText as ze, watch as ce, onActivated as Se, onDeactivated as Ce } from "vue";
+import { compact as Xe, debounce as Ye, isEqual as xe, upperFirst as Ze, startCase as Ge, cloneDeep as Qe, remove as Je } from "lodash";
 import { escapeHtml as et } from "@vue/shared";
-import { escapeHtml as is } from "@vue/shared";
+import { escapeHtml as si } from "@vue/shared";
 import { format as G } from "date-fns";
-const tt = x({
+const tt = C({
   setup() {
     const e = Ne();
     Re(["update:modelValue"]);
-    const t = w(null), n = V(() => t.value ? t.value.map((o) => e.preprocesor ? e.preprocesor(o) : o[e.displayKey ?? ""]) : null), s = w(e.modelValue ?? null);
-    return { props: e, options: t, renderOptions: n, selectedItem: s };
+    const t = w(null), n = V(() => t.value ? t.value.map((o) => e.preprocesor ? e.preprocesor(o) : o[e.displayKey ?? ""]) : null), i = w(e.modelValue ?? null);
+    return { props: e, options: t, renderOptions: n, selectedItem: i };
   },
   watch: {
     loadFn() {
@@ -34,47 +34,47 @@ const tt = x({
   }
 }), Le = (e, t) => {
   const n = e.__vccOpts || e;
-  for (const [s, i] of t)
-    n[s] = i;
+  for (const [i, s] of t)
+    n[i] = s;
   return n;
 }, nt = {
   key: 0,
   disabled: ""
-}, st = {
+}, it = {
   key: 0,
   value: null
-}, it = ["value"];
-function ot(e, t, n, s, i, o) {
+}, st = ["value"];
+function ot(e, t, n, i, s, o) {
   return e.renderOptions ? U((u(), f("select", {
     key: 1,
     "onUpdate:modelValue": t[0] || (t[0] = (r) => e.selectedItem = r)
   }, [
-    e.props.nullText ? (u(), f("option", st, C(e.props.nullText), 1)) : T("", !0),
+    e.props.nullText ? (u(), f("option", it, x(e.props.nullText), 1)) : T("", !0),
     (u(!0), f(j, null, J(e.renderOptions, (r, l) => {
       var c;
       return u(), f("option", {
         key: l,
         value: (c = e.options) == null ? void 0 : c[l]
-      }, C(r), 9, it);
+      }, x(r), 9, st);
     }), 128))
   ], 512)), [
     [Ke, e.selectedItem]
   ]) : (u(), f("select", nt, [
-    O("option", null, C(e.props.loadingText || "Loading..."), 1)
+    O("option", null, x(e.props.loadingText || "Loading..."), 1)
   ]));
 }
-const Hn = /* @__PURE__ */ Le(tt, [["render", ot]]), lt = ["onClick"], rt = /* @__PURE__ */ x({
+const Hn = /* @__PURE__ */ Le(tt, [["render", ot]]), lt = ["onClick"], rt = /* @__PURE__ */ C({
   __name: "overlay-anchor",
   props: {
     overlayId: {},
     anchor: {}
   },
   setup(e) {
-    const t = e, n = t.anchor instanceof HTMLElement ? t.anchor : t.anchor.el, s = w({ visibility: "hidden", top: "0", left: "0" }), i = w([]), o = ee();
+    const t = e, n = t.anchor instanceof HTMLElement ? t.anchor : t.anchor.el, i = w({ visibility: "hidden", top: "0", left: "0" }), s = w([]), o = ee();
     L(r);
     function r() {
       const h = o.vnode.el, { styles: b, classes: m } = l(h, n);
-      s.value = b, i.value = m;
+      i.value = b, s.value = m;
     }
     function l(h, b) {
       const m = t.anchor instanceof HTMLElement ? {} : t.anchor, y = b.getBoundingClientRect(), p = h.getBoundingClientRect();
@@ -111,8 +111,8 @@ const Hn = /* @__PURE__ */ Le(tt, [["render", ot]]), lt = ["onClick"], rt = /* @
         window.addEventListener("click", c);
       }, 10);
     }), (h, b) => (u(), f("div", {
-      class: k(["vf-overlay-anchor", i.value]),
-      style: Ue(s.value),
+      class: k(["vf-overlay-anchor", s.value]),
+      style: Ue(i.value),
       onClick: te(c, ["stop"])
     }, [
       K(h.$slots, "default")
@@ -120,18 +120,18 @@ const Hn = /* @__PURE__ */ Le(tt, [["render", ot]]), lt = ["onClick"], rt = /* @
   }
 });
 let at = 0;
-const S = je([]), _n = x({
+const S = je([]), _n = C({
   setup() {
     return () => W("div", [
       J(S, (e) => W(We, { key: e.id, to: "#vf-overlay-target" }, [e.wrapperVnode ?? e.vnode]))
     ]);
   }
 });
-function se(e, t, n) {
-  const s = document.getElementById("vf-overlay-target") ?? document.createElement("div");
-  s.id = "vf-overlay-target", s.removeAttribute("inert"), document.body.appendChild(s);
-  const i = String(++at), o = Pe(e), r = W(o, t), l = n != null && n.anchor ? W(rt, { overlayId: i, anchor: n.anchor }, () => [r]) : void 0, c = {
-    id: i,
+function ie(e, t, n) {
+  const i = document.getElementById("vf-overlay-target") ?? document.createElement("div");
+  i.id = "vf-overlay-target", i.removeAttribute("inert"), document.body.appendChild(i);
+  const s = String(++at), o = Pe(e), r = W(o, t), l = n != null && n.anchor ? W(rt, { overlayId: s, anchor: n.anchor }, () => [r]) : void 0, c = {
+    id: s,
     component: o,
     props: t,
     options: n ?? {},
@@ -160,36 +160,36 @@ function P(e) {
   const t = S.indexOf(e);
   t >= 0 && S.splice(t, 1);
 }
-async function ie(e, t, n) {
-  return new Promise((s) => {
-    let i = null;
+async function se(e, t, n) {
+  return new Promise((i) => {
+    let s = null;
     const r = { ...t, callback: (l) => {
-      P(i), s(l);
+      P(s), i(l);
     } };
-    i = se(e, r, n);
+    s = ie(e, r, n);
   });
 }
 function q(e, t) {
   return { title: t ? e : void 0, message: t ?? e };
 }
 async function de(e, t) {
-  await ie(X, q(e, t));
+  await se(X, q(e, t));
 }
 async function $n(e, t) {
-  return await ie(X, {
+  return await se(X, {
     ...q(e, t),
     shouldConfirm: !0
   }) === !0;
 }
 async function An(e, t) {
-  return await ie(X, {
+  return await se(X, {
     ...q(e, t),
     shouldConfirm: !0,
     classes: ["destructive"]
   }) === !0;
 }
 function Bn(e, t) {
-  const n = se(X, {
+  const n = ie(X, {
     ...q(e, t),
     isBare: !0,
     classes: ["wait"],
@@ -231,8 +231,8 @@ async function Nn(e) {
 }
 const $ = Symbol("MaskState");
 function Rn(e, t) {
-  const n = e.$.vnode.el, s = n.closest(".vf-modal");
-  return ht(s ?? n, t);
+  const n = e.$.vnode.el, i = n.closest(".vf-modal");
+  return ht(i ?? n, t);
 }
 function Kn(e) {
   const t = e.$.vnode.el, n = t.closest(".vf-modal");
@@ -250,20 +250,21 @@ function Ie(e) {
 }
 const Q = Symbol("FormMaskState");
 function ft(e, t, n) {
-  const s = e instanceof Element ? e : _e(e);
-  s.classList.add("vf-masked");
-  const i = t instanceof Element ? t : s.querySelectorAll(t ?? 'button:not([disabled]):not([type="button"])')[0], o = i.tagName === "INPUT" ? i.value : i.innerHTML;
-  i.setAttribute("disabled", "disabled"), i.innerText = n ?? "Please wait...";
-  const l = [...s.querySelectorAll("input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])")];
-  return l.forEach((c) => c.setAttribute("disabled", "disabled")), s[Q] = {
+  const i = e instanceof Element ? e : _e(e);
+  i.classList.add("vf-masked");
+  const s = t instanceof Element ? t : i.querySelectorAll(t ?? 'button:not([disabled]):not([type="button"])')[0];
+  let o;
+  s && (o = s.tagName === "INPUT" ? s.value : s.innerHTML, s.setAttribute("disabled", "disabled"), s.innerText = n ?? "Please wait...");
+  const l = [...i.querySelectorAll("input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])")];
+  return l.forEach((c) => c.setAttribute("disabled", "disabled")), i[Q] = {
     disabledElements: l,
-    waitButton: i,
+    waitButton: s,
     buttonHtml: o
-  }, () => He(s);
+  }, () => He(i);
 }
 function He(e) {
   const t = e instanceof Element ? e : _e(e), n = t[Q];
-  n && (t.classList.remove("vf-masked"), n.disabledElements.forEach((s) => s.removeAttribute("disabled")), n.waitButton.innerHTML = n.buttonHtml, n.waitButton.removeAttribute("disabled"), delete t[Q]);
+  n && (t.classList.remove("vf-masked"), n.disabledElements.forEach((i) => i.removeAttribute("disabled")), n.waitButton && (n.waitButton.innerHTML = n.buttonHtml, n.waitButton.removeAttribute("disabled")), delete t[Q]);
 }
 function _e(e) {
   const t = e.$.vnode.el;
@@ -275,7 +276,7 @@ const pt = ["id"], mt = {
 }, vt = { class: "vf-modal-content" }, yt = {
   key: 1,
   class: "vf-modal-footer"
-}, gt = /* @__PURE__ */ x({
+}, gt = /* @__PURE__ */ C({
   __name: "modal",
   props: {
     id: {},
@@ -286,26 +287,26 @@ const pt = ["id"], mt = {
   },
   emits: ["formSubmit"],
   setup(e, { expose: t }) {
-    const n = e, s = ee();
+    const n = e, i = ee();
     t({ mask: m, unmask: y, hide: p, unhide: a });
-    const i = w(), o = w(), r = w(!1), l = V(() => Xe([n.class, r.value && "hidden"]));
+    const s = w(), o = w(), r = w(!1), l = V(() => Xe([n.class, r.value && "hidden"]));
     L(() => {
       var d;
-      document.body.classList.add("vf-modal-open"), n.closeOnMaskClick && (window.addEventListener("keydown", h), (d = i.value) == null || d.addEventListener("click", c));
+      document.body.classList.add("vf-modal-open"), n.closeOnMaskClick && (window.addEventListener("keydown", h), (d = s.value) == null || d.addEventListener("click", c));
     }), ne(() => {
       window.removeEventListener("keydown", h), document.body.querySelectorAll(".vf-modal").length > 0 || document.body.classList.remove("vf-modal-open");
     });
     function c(d) {
-      d.target == i.value && b();
+      d.target == s.value && b();
     }
     function h(d) {
       if (d.key === "Esc" || d.key === "Escape") {
         const E = document.querySelectorAll(".vf-modal-wrap");
-        E[E.length - 1] === i.value && b();
+        E[E.length - 1] === s.value && b();
       }
     }
     function b() {
-      Me(s);
+      Me(i);
     }
     function m() {
       ft(o.value);
@@ -323,7 +324,7 @@ const pt = ["id"], mt = {
       id: d.id,
       class: k(["vf-overlay vf-modal-wrap", l.value]),
       ref_key: "overlay",
-      ref: i
+      ref: s
     }, [
       O("form", {
         action: ".",
@@ -350,7 +351,7 @@ const pt = ["id"], mt = {
     ], 10, pt));
   }
 });
-const bt = ["innerHtml"], Et = ["innerText"], X = /* @__PURE__ */ x({
+const bt = ["innerHtml"], Et = ["innerText"], X = /* @__PURE__ */ C({
   __name: "alert-modal",
   props: {
     isBare: { type: Boolean },
@@ -363,15 +364,15 @@ const bt = ["innerHtml"], Et = ["innerText"], X = /* @__PURE__ */ x({
   },
   setup(e) {
     const t = e, n = V(() => t.message instanceof Error ? ut(t.message) : t.message);
-    return (s, i) => {
+    return (i, s) => {
       const o = Te("autofocus");
       return u(), ke(gt, {
-        class: k(["vf-alert", s.classes])
+        class: k(["vf-alert", i.classes])
       }, qe({
         default: Y(() => [
-          s.isHtml ? (u(), f("div", {
+          i.isHtml ? (u(), f("div", {
             key: 0,
-            innerHtml: s.message,
+            innerHtml: i.message,
             class: "user-message"
           }, null, 8, bt)) : (u(), f("div", {
             key: 1,
@@ -380,20 +381,20 @@ const bt = ["innerHtml"], Et = ["innerText"], X = /* @__PURE__ */ x({
         ]),
         _: 2
       }, [
-        s.title ? {
+        i.title ? {
           name: "header",
           fn: Y(() => [
-            O("h1", null, C(s.title), 1)
+            O("h1", null, x(i.title), 1)
           ]),
           key: "0"
         } : void 0,
-        s.isBare ? void 0 : {
+        i.isBare ? void 0 : {
           name: "footer",
           fn: Y(() => [
-            s.shouldConfirm ? (u(), f(j, { key: 0 }, [
+            i.shouldConfirm ? (u(), f(j, { key: 0 }, [
               U((u(), f("button", {
                 class: "primary",
-                onClick: i[0] || (i[0] = () => s.callback(!0))
+                onClick: s[0] || (s[0] = () => i.callback(!0))
               }, [
                 ae("Confirm")
               ])), [
@@ -401,12 +402,12 @@ const bt = ["innerHtml"], Et = ["innerText"], X = /* @__PURE__ */ x({
               ]),
               O("button", {
                 class: "default",
-                onClick: i[1] || (i[1] = () => s.callback(!1))
+                onClick: s[1] || (s[1] = () => i.callback(!1))
               }, "Cancel")
             ], 64)) : U((u(), f("button", {
               key: 1,
               class: "default",
-              onClick: i[2] || (i[2] = () => s.callback(!0))
+              onClick: s[2] || (s[2] = () => i.callback(!0))
             }, [
               ae("OK")
             ])), [
@@ -439,22 +440,22 @@ function St(e, t, n) {
   if (ue.randomUUID && !t && !e)
     return ue.randomUUID();
   e = e || {};
-  const s = e.random || (e.rng || wt)();
-  if (s[6] = s[6] & 15 | 64, s[8] = s[8] & 63 | 128, t) {
+  const i = e.random || (e.rng || wt)();
+  if (i[6] = i[6] & 15 | 64, i[8] = i[8] & 63 | 128, t) {
     n = n || 0;
-    for (let i = 0; i < 16; ++i)
-      t[n + i] = s[i];
+    for (let s = 0; s < 16; ++s)
+      t[n + s] = i[s];
     return t;
   }
-  return Tt(s);
+  return Tt(i);
 }
 function Un(e) {
   return e.replace(/\n/g, "<br>");
 }
-function xt(e) {
+function Ct(e) {
   return e.replace(/_/g, " ");
 }
-function Ct(e) {
+function xt(e) {
   const t = e.replace(/\D/g, "").replace(/^1/, "");
   return t.length != 10 ? e : "(" + t.substring(0, 3) + ") " + t.substring(3, 6) + "-" + t.substring(6);
 }
@@ -490,11 +491,11 @@ const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
     noResultsText: String,
     disabled: Boolean,
     optionsListId: String,
-    debug: Boolean
+    debug: Boolean,
+    required: Boolean
   },
   emits: {
     optionsLoaded: Object,
-    createItem: Object,
     "update:modelValue": Object
   },
   data() {
@@ -542,14 +543,14 @@ const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
     optionsDescriptors() {
       return this.allOptions.map((e, t) => {
         var l, c;
-        const n = this.formatter(e), s = (l = this.subtitleFormatter) == null ? void 0 : l.call(this, e), i = n ? n.trim().toLowerCase() : "", o = s ? s.trim().toLowerCase() : "", r = [];
+        const n = this.formatter(e), i = (l = this.subtitleFormatter) == null ? void 0 : l.call(this, e), s = n ? n.trim().toLowerCase() : "", o = i ? i.trim().toLowerCase() : "", r = [];
         return this.searchFields ? this.searchFields.forEach((h) => {
           e[h] && r.push(String(e[h]).toLowerCase());
-        }) : (r.push(i), o && r.push(o)), {
+        }) : (r.push(s), o && r.push(o)), {
           // eslint-disable-next-line vue/no-use-computed-property-like-method
           key: ((c = this.effectiveKeyExtractor) == null ? void 0 : c.call(this, e)) ?? String(t),
           title: n,
-          subtitle: s,
+          subtitle: i,
           searchContent: r.join(""),
           ref: e
         };
@@ -560,14 +561,14 @@ const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
       if (this.isSearching) {
         const t = this.searchText.trim().toLowerCase();
         if (t.length) {
-          e = e.filter((i) => i.searchContent.includes(t));
-          const n = et(this.searchText).replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"), s = new RegExp(`(${n})`, "ig");
-          e = e.map((i) => {
+          e = e.filter((s) => s.searchContent.includes(t));
+          const n = et(this.searchText).replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"), i = new RegExp(`(${n})`, "ig");
+          e = e.map((s) => {
             var o;
             return {
-              ...i,
-              title: i.title.replace(s, "<mark>$1</mark>"),
-              subtitle: (o = i.subtitle) == null ? void 0 : o.replace(s, "<mark>$1</mark>")
+              ...s,
+              title: s.title.replace(i, "<mark>$1</mark>"),
+              subtitle: (o = s.subtitle) == null ? void 0 : o.replace(i, "<mark>$1</mark>")
             };
           }), this.shouldShowCreateOption && (e.find((o) => o.searchContent === t) !== void 0 || e.push({
             key: he,
@@ -588,7 +589,7 @@ const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
       this.handleValueChanged();
     },
     options() {
-      this.loadedOptions = this.options ?? [];
+      this.loadedOptions = this.options ?? [], this.isLoaded = !0;
     },
     // data
     optionsDescriptors() {
@@ -606,7 +607,7 @@ const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
     }
   },
   async mounted() {
-    this.shouldShowCreateOption = this.$attrs.onCreateItem !== void 0, this.options ? (this.loadedOptions = this.options, this.isLoaded = !0) : this.preload && await this.loadRemoteOptions(), this.handleValueChanged(), this.$watch("selectedOption", () => {
+    this.shouldShowCreateOption = this.onCreateItem !== void 0, this.options ? (this.loadedOptions = this.options, this.isLoaded = !0) : this.preload && await this.loadRemoteOptions(), this.handleValueChanged(), this.$watch("selectedOption", () => {
       this.selectedOption !== this.modelValue && this.$emit(
         "update:modelValue",
         this.selectedOption && this.valueExtractor ? this.valueExtractor(this.selectedOption) : this.selectedOption
@@ -617,11 +618,6 @@ const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
     async loadRemoteOptions() {
       await this.reloadOptions(), this.loadedOptions && this.$emit("optionsLoaded", this.loadedOptions);
     },
-    handleSourceUpdate() {
-      if (this.preload)
-        return this.reloadOptions();
-      this.isLoaded && (this.isLoaded = !1, this.loadedOptions = []);
-    },
     async reloadOptions() {
       var t;
       const e = this.remoteSearch && this.isSearching && this.searchText ? this.searchText : null;
@@ -671,10 +667,10 @@ const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
       return this.effectiveKeyExtractor ? this.effectiveKeyExtractor(this.selectedOption) : ((t = this.getOptionDescriptor(e)) == null ? void 0 : t.key) ?? "";
     },
     getOptionDescriptor(e) {
-      const t = this.effectiveOptions.find((s) => s.ref === e);
+      const t = this.effectiveOptions.find((i) => i.ref === e);
       if (t)
         return t;
-      const n = this.effectiveOptions.find((s) => Ce(s.ref, e));
+      const n = this.effectiveOptions.find((i) => xe(i.ref, e));
       return n || null;
     },
     handleInputBlurred() {
@@ -684,19 +680,19 @@ const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
       this.isLoaded || this.loadRemoteOptions(), this.optionsListId && this.$refs.optionsContainer.setAttribute("id", this.optionsListId), this.teleportOptionsContainer();
     },
     teleportOptionsContainer() {
-      const e = this.$el.getBoundingClientRect(), t = e.y + e.height + 2, n = e.x, s = this.$refs.optionsContainer, i = window.getComputedStyle(this.$el);
-      for (let o in i)
-        /^(font|text)/.test(o) && (s.style[o] = i[o]);
-      if (s.style.top = t + "px", s.style.left = n + "px", s.style.minWidth = e.width + "px", !i.maxHeight || i.maxHeight == "none") {
+      const e = this.$el.getBoundingClientRect(), t = e.y + e.height + 2, n = e.x, i = this.$refs.optionsContainer, s = window.getComputedStyle(this.$el);
+      for (let o in s)
+        /^(font|text)/.test(o) && (i.style[o] = s[o]);
+      if (i.style.top = t + "px", i.style.left = n + "px", i.style.minWidth = e.width + "px", !s.maxHeight || s.maxHeight == "none") {
         const o = window.innerHeight - t - 12;
-        s.style.maxHeight = o + "px";
+        i.style.maxHeight = o + "px";
       }
-      s.style.visibility = "visible", document.body.appendChild(s), setTimeout(this.highlightInitialOption, 0);
+      i.style.visibility = "visible", document.body.appendChild(i), setTimeout(this.highlightInitialOption, 0);
     },
     highlightInitialOption() {
       if (!this.isLoaded || !this.highlightedOptionKey)
         return;
-      const e = this.effectiveOptions.findIndex((s) => s.key == this.highlightedOptionKey), t = this.$refs.optionsContainer, n = t.querySelectorAll(".option")[e];
+      const e = this.effectiveOptions.findIndex((i) => i.key == this.highlightedOptionKey), t = this.$refs.optionsContainer, n = t.querySelectorAll(".option")[e];
       t.scrollTop = n.offsetTop;
     },
     handleOptionHover(e) {
@@ -708,18 +704,19 @@ const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
       if (n < 0 ? n = 0 : n >= this.effectiveOptions.length && (n = this.effectiveOptions.length - 1), t == n)
         return;
       this.highlightedOptionKey = this.effectiveOptions[n].key;
-      const s = this.$refs.optionsContainer, i = s.querySelectorAll(".option")[n];
-      i.offsetTop < s.scrollTop ? s.scrollTop = i.offsetTop : i.offsetTop + i.offsetHeight > s.scrollTop + s.clientHeight && (s.scrollTop = i.offsetTop + i.offsetHeight - s.clientHeight);
+      const i = this.$refs.optionsContainer, s = i.querySelectorAll(".option")[n];
+      s.offsetTop < i.scrollTop ? i.scrollTop = s.offsetTop : s.offsetTop + s.offsetHeight > i.scrollTop + i.clientHeight && (i.scrollTop = s.offsetTop + s.offsetHeight - i.clientHeight);
     },
     selectOption(e) {
+      var t;
       if (this.isSearching = !1, e.key == H)
         this.searchText = "", this.selectedOption = null, this.selectedOptionTitle = null;
       else if (e.key === he) {
-        const t = this.searchText.trim();
-        this.searchText = "", this.selectedOption = null, this.selectedOptionTitle = null, this.$emit("createItem", t);
+        const n = this.searchText.trim();
+        this.searchText = "", this.selectedOption = null, this.selectedOptionTitle = null, (t = this.onCreateItem) == null || t.call(this, n);
       } else {
-        const n = this.optionsDescriptors.find((s) => s.key == e.key).ref;
-        this.selectedOption = n, this.selectedOptionTitle = this.formatter(n), this.searchText = this.selectedOptionTitle || "";
+        const i = this.optionsDescriptors.find((s) => s.key == e.key).ref;
+        this.selectedOption = i, this.selectedOptionTitle = this.formatter(i), this.searchText = this.selectedOptionTitle || "";
       }
       this.$refs.searchField.blur();
     },
@@ -727,11 +724,11 @@ const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
       this.modelValue ? (this.selectedOption = this.valueExtractor ? this.allOptions.find((e) => this.modelValue === this.valueExtractor(e)) : this.modelValue, this.selectedOptionTitle = this.selectedOption ? this.formatter(this.selectedOption) : null, this.searchText = this.selectedOptionTitle || "") : (this.selectedOption = null, this.selectedOptionTitle = null, this.searchText = "");
     },
     addRemoteOption(e) {
-      this.loadedOptions.push(e);
+      this.loadedOptions.unshift(e);
     }
   }
 };
-const Ht = ["placeholder"], _t = {
+const Ht = ["placeholder", "required"], _t = {
   key: 0,
   ref: "optionsContainer",
   class: "vf-smart-select-options"
@@ -742,7 +739,7 @@ const Ht = ["placeholder"], _t = {
   key: 0,
   class: "no-results"
 };
-function Ft(e, t, n, s, i, o) {
+function Ft(e, t, n, i, s, o) {
   const r = Te("disabled");
   return u(), f("div", {
     class: k(["vf-smart-select", { disabled: o.effectiveDisabled, open: e.shouldDisplayOptions }])
@@ -755,7 +752,8 @@ function Ft(e, t, n, s, i, o) {
       onKeydown: t[1] || (t[1] = (...l) => o.handleKeyDown && o.handleKeyDown(...l)),
       placeholder: o.effectivePlaceholder,
       onFocus: t[2] || (t[2] = (...l) => o.handleInputFocused && o.handleInputFocused(...l)),
-      onBlur: t[3] || (t[3] = (...l) => o.handleInputBlurred && o.handleInputBlurred(...l))
+      onBlur: t[3] || (t[3] = (...l) => o.handleInputBlurred && o.handleInputBlurred(...l)),
+      required: n.required
     }, null, 42, Ht), [
       [ze, e.searchText],
       [r, o.effectiveDisabled]
@@ -780,12 +778,12 @@ function Ft(e, t, n, s, i, o) {
             innerHTML: l.subtitle
           }, null, 8, Bt)) : T("", !0)
         ], 42, $t))), 128)),
-        !o.effectiveOptions.length && e.searchText ? (u(), f("div", Vt, C(o.effectiveNoResultsText), 1)) : T("", !0)
+        !o.effectiveOptions.length && e.searchText ? (u(), f("div", Vt, x(o.effectiveNoResultsText), 1)) : T("", !0)
       ], 64)) : (u(), f("div", Dt, "Loading..."))
     ], 512)) : T("", !0)
   ], 2);
 }
-const Nt = /* @__PURE__ */ Le(It, [["render", Ft]]), Wn = /* @__PURE__ */ x({
+const Nt = /* @__PURE__ */ Le(It, [["render", Ft]]), Wn = /* @__PURE__ */ C({
   __name: "ez-smart-select",
   props: {
     modelValue: {},
@@ -796,26 +794,26 @@ const Nt = /* @__PURE__ */ Le(It, [["render", Ft]]), Wn = /* @__PURE__ */ x({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const n = e, s = V(() => Array.isArray(n.options) ? n.options.map((r) => ({ value: r, label: r })) : Object.entries(n.options).map(([r, l]) => ({
+    const n = e, i = V(() => Array.isArray(n.options) ? n.options.map((r) => ({ value: r, label: r })) : Object.entries(n.options).map(([r, l]) => ({
       value: r,
       label: l
-    }))), i = V(() => n.formatter ? (r) => {
+    }))), s = V(() => n.formatter ? (r) => {
       var l;
       return (l = n.formatter) == null ? void 0 : l.call(n, r.label);
-    } : (r) => r.label), o = w(s.value.find((r) => r.value === n.modelValue) ?? null);
+    } : (r) => r.label), o = w(i.value.find((r) => r.value === n.modelValue) ?? null);
     return ce(
       () => n.modelValue,
       (r) => {
-        o.value = s.value.find((l) => l.value === r) ?? null;
+        o.value = i.value.find((l) => l.value === r) ?? null;
       }
     ), ce(o, (r) => {
       var l;
-      t("update:modelValue", r ? ((l = s.value.find((c) => Ce(c, r))) == null ? void 0 : l.value) ?? null : null);
+      t("update:modelValue", r ? ((l = i.value.find((c) => xe(c, r))) == null ? void 0 : l.value) ?? null : null);
     }), (r, l) => (u(), ke(Nt, {
       modelValue: o.value,
       "onUpdate:modelValue": l[0] || (l[0] = (c) => o.value = c),
-      options: s.value,
-      formatter: i.value,
+      options: i.value,
+      formatter: s.value,
       "null-title": r.nullTitle
     }, null, 8, ["modelValue", "options", "formatter", "null-title"]));
   }
@@ -825,7 +823,7 @@ const Nt = /* @__PURE__ */ Le(It, [["render", Ft]]), Wn = /* @__PURE__ */ x({
 }, Wt = {
   key: 0,
   class: "progress-bar"
-}, Pt = /* @__PURE__ */ x({
+}, Pt = /* @__PURE__ */ C({
   __name: "toast",
   props: {
     message: {},
@@ -840,26 +838,26 @@ const Nt = /* @__PURE__ */ Le(It, [["render", Ft]]), Wn = /* @__PURE__ */ x({
     function n() {
       t.onClick ? t.onClick() : t.disableClose || t.callback();
     }
-    const s = w();
+    const i = w();
     return t.durationSecs !== null && L(() => {
       var o;
-      const i = t.durationSecs ?? 5;
-      (o = s.value) == null || o.animate([{ width: "0%" }, { width: "100%" }], {
-        duration: i * 1e3,
+      const s = t.durationSecs ?? 5;
+      (o = i.value) == null || o.animate([{ width: "0%" }, { width: "100%" }], {
+        duration: s * 1e3,
         easing: "linear"
-      }), setTimeout(() => t.callback(), i * 1e3);
-    }), (i, o) => (u(), f("div", {
-      class: k(["vf-toast", i.className]),
+      }), setTimeout(() => t.callback(), s * 1e3);
+    }), (s, o) => (u(), f("div", {
+      class: k(["vf-toast", s.className]),
       onClick: te(n, ["stop"])
     }, [
       O("div", Kt, [
-        O("div", Ut, C(i.message), 1),
-        i.disableClose ? T("", !0) : (u(), f("div", jt, "x"))
+        O("div", Ut, x(s.message), 1),
+        s.disableClose ? T("", !0) : (u(), f("div", jt, "x"))
       ]),
-      i.durationSecs !== null ? (u(), f("div", Wt, [
+      s.durationSecs !== null ? (u(), f("div", Wt, [
         O("div", {
           ref_key: "progressInnerEl",
-          ref: s,
+          ref: i,
           class: "inner"
         }, null, 512)
       ])) : T("", !0)
@@ -867,15 +865,15 @@ const Nt = /* @__PURE__ */ Le(It, [["render", Ft]]), Wn = /* @__PURE__ */ x({
   }
 });
 function Pn(e) {
-  const t = se(Pt, {
+  const t = ie(Pt, {
     ...e,
     callback: () => P(t)
   });
   return () => P(t);
 }
 function qt(e) {
-  const t = Math.floor(Math.log(e) / Math.log(1024)), s = (e / Math.pow(1024, t)).toFixed(2), i = ["B", "KB", "MB", "GB", "TB"][t];
-  return `${s} ${i}`;
+  const t = Math.floor(Math.log(e) / Math.log(1024)), i = (e / Math.pow(1024, t)).toFixed(2), s = ["B", "KB", "MB", "GB", "TB"][t];
+  return `${i} ${s}`;
 }
 function zt(e) {
   return e != null && String(e).length ? e : "-";
@@ -887,7 +885,7 @@ function Yt(e) {
   return e === null || typeof e == "string" && !/^\d+$/.test(e) ? e : sn(Number(e));
 }
 function Zt(e) {
-  return e && Ct(e);
+  return e && xt(e);
 }
 function Gt(e) {
   return e ? Ze(e) : null;
@@ -899,7 +897,7 @@ function Jt(e) {
   return e ? e.toUpperCase() : null;
 }
 function en(e) {
-  return e ? xt(e) : null;
+  return e ? Ct(e) : null;
 }
 function tn(e) {
   return Lt(e);
@@ -920,30 +918,30 @@ const fe = {
   ...e(fe)
 });
 function zn(e, t, n) {
-  const s = typeof t == "function" ? e.findIndex(t) : e.indexOf(t);
-  return s === -1 ? !1 : (e.splice(s, 1, n), !0);
+  const i = typeof t == "function" ? e.findIndex(t) : e.indexOf(t);
+  return i === -1 ? !1 : (e.splice(i, 1, n), !0);
 }
 function Xn(e, t) {
   const n = document.createElement("div");
   n.classList.add("vf-overlay"), n.addEventListener("click", m), document.body.appendChild(n);
-  const s = document.createElement("div");
-  s.classList.add("vf-context-menu"), s.style.position = "absolute", n.appendChild(s);
-  const i = e.currentTarget;
-  i.style.userSelect = "none", i.classList.add("context-menu-active"), t.targetClass && i.classList.add(t.targetClass), t.class && s.classList.add(t.class), t.items.forEach((p) => {
+  const i = document.createElement("div");
+  i.classList.add("vf-context-menu"), i.style.position = "absolute", n.appendChild(i);
+  const s = e.currentTarget;
+  s.style.userSelect = "none", s.classList.add("context-menu-active"), t.targetClass && s.classList.add(t.targetClass), t.class && i.classList.add(t.class), t.items.forEach((p) => {
     if (p == "-") {
       const d = document.createElement("div");
-      d.classList.add("separator"), s.appendChild(d);
+      d.classList.add("separator"), i.appendChild(d);
       return;
     }
     const a = document.createElement("div");
-    a.classList.add("item"), a.style.userSelect = "none", a.innerText = p.title, s.appendChild(a), p.class && a.classList.add(p.class), p.shouldConfirm ? a.addEventListener("click", (d) => y(d, a, p.handler)) : a.addEventListener("click", () => p.handler());
+    a.classList.add("item"), a.style.userSelect = "none", a.innerText = p.title, i.appendChild(a), p.class && a.classList.add(p.class), p.shouldConfirm ? a.addEventListener("click", (d) => y(d, a, p.handler)) : a.addEventListener("click", () => p.handler());
   });
-  const o = window.innerWidth - e.clientX, r = window.innerHeight - e.clientY, l = s.offsetHeight, c = s.offsetWidth, h = o < c ? e.clientX - c - 1 : e.clientX + 1, b = r < l ? e.clientY - l - 1 : e.clientY + 1;
-  s.style.left = h + "px", s.style.top = b + "px", setTimeout(() => {
-    s.style.width = s.offsetWidth + "px";
+  const o = window.innerWidth - e.clientX, r = window.innerHeight - e.clientY, l = i.offsetHeight, c = i.offsetWidth, h = o < c ? e.clientX - c - 1 : e.clientX + 1, b = r < l ? e.clientY - l - 1 : e.clientY + 1;
+  i.style.left = h + "px", i.style.top = b + "px", setTimeout(() => {
+    i.style.width = i.offsetWidth + "px";
   }, 50);
   function m() {
-    t.targetClass && i.classList.remove(t.targetClass), i.classList.remove("context-menu-active"), i.style.userSelect = "", n.remove();
+    t.targetClass && s.classList.remove(t.targetClass), s.classList.remove("context-menu-active"), s.style.userSelect = "", n.remove();
   }
   function y(p, a, d) {
     if (a.classList.contains("pending-confirm"))
@@ -965,14 +963,14 @@ function Zn(e, t) {
 }
 function Gn(e, t) {
   const n = { ...e };
-  for (const s of t)
-    n[s] === "" && (n[s] = null);
+  for (const i of t)
+    n[i] === "" && (n[i] = null);
   return n;
 }
 function on(e) {
   return e instanceof Error && "status" in e && "body" in e;
 }
-function Qn({ apiClient: e, wrapper: t, onRequest: n, onError: s, afterRequest: i, CancelablePromise: o }) {
+function Qn({ apiClient: e, wrapper: t, onRequest: n, onError: i, afterRequest: s, CancelablePromise: o }) {
   const r = e.request.request.bind(e.request), l = t ?? ((c, h) => h(c));
   e.request.request = (c) => l(c, (h) => (h = ln(h), n && (h = n(h)), new o((b, m, y) => {
     const p = r(h);
@@ -982,15 +980,15 @@ function Qn({ apiClient: e, wrapper: t, onRequest: n, onError: s, afterRequest:
           return m(new z(a.body.error));
         a.message = `${a.body.error} (${a.status})`;
       }
-      if (s) {
-        const d = s(a, h);
+      if (i) {
+        const d = i(a, h);
         if (d === null)
           return;
         if (d instanceof Error)
           return m(d);
       }
       m(a);
-    }).finally(() => i == null ? void 0 : i(h));
+    }).finally(() => s == null ? void 0 : s(h));
   })));
 }
 class pe {
@@ -1006,12 +1004,12 @@ class pe {
   }
 }
 function ln(e) {
-  if (!(typeof e.body == "object" && Object.values(e.body).some((i) => i instanceof pe)))
+  if (!(typeof e.body == "object" && Object.values(e.body).some((s) => s instanceof pe)))
     return e;
-  const n = {}, s = {};
-  for (const [i, o] of Object.entries(e.body))
-    o instanceof pe ? n[i] = o.blob : s[i] = o;
-  return n._payload = new Blob([JSON.stringify(s)], { type: "application/json" }), {
+  const n = {}, i = {};
+  for (const [s, o] of Object.entries(e.body))
+    o instanceof pe ? n[s] = o.blob : i[s] = o;
+  return n._payload = new Blob([JSON.stringify(i)], { type: "application/json" }), {
     ...e,
     body: void 0,
     formData: n
@@ -1020,25 +1018,25 @@ function ln(e) {
 const le = Symbol("HookState");
 function Jn(e, t) {
   const n = t ?? ee();
-  L(() => rn(n, e), n), Se(() => an(n), n), xe(() => me(n), n), ne(() => me(n), n);
+  L(() => rn(n, e), n), Se(() => an(n), n), Ce(() => me(n), n), ne(() => me(n), n);
 }
 function rn(e, t) {
   const n = {};
   if (t.elScrolledToBottom && (n.el = new A(e.vnode.el, t.elScrolledToBottom)), t.ancestorScrolledToBottom) {
-    const s = De(e.vnode.el);
-    s ? n.ancestor = new A(s, t.ancestorScrolledToBottom) : console.warn("[VueFoundation] No scollable ancestor found for component:", e);
+    const i = De(e.vnode.el);
+    i ? n.ancestor = new A(i, t.ancestorScrolledToBottom) : console.warn("[VueFoundation] No scollable ancestor found for component:", e);
   }
   t.windowScrolledToBottom && (n.window = new A(window, t.windowScrolledToBottom)), e[le] = n;
 }
 function an(e) {
-  var n, s, i;
+  var n, i, s;
   const t = e[le];
-  (n = t == null ? void 0 : t.el) == null || n.install(), (s = t == null ? void 0 : t.ancestor) == null || s.install(), (i = t == null ? void 0 : t.window) == null || i.install();
+  (n = t == null ? void 0 : t.el) == null || n.install(), (i = t == null ? void 0 : t.ancestor) == null || i.install(), (s = t == null ? void 0 : t.window) == null || s.install();
 }
 function me(e) {
-  var n, s, i;
+  var n, i, s;
   const t = e[le];
-  (n = t == null ? void 0 : t.el) == null || n.uninstall(), (s = t == null ? void 0 : t.ancestor) == null || s.uninstall(), (i = t == null ? void 0 : t.window) == null || i.uninstall();
+  (n = t == null ? void 0 : t.el) == null || n.uninstall(), (i = t == null ? void 0 : t.ancestor) == null || i.uninstall(), (s = t == null ? void 0 : t.window) == null || s.uninstall();
 }
 const Z = ["auto", "scroll"];
 function De(e) {
@@ -1064,8 +1062,8 @@ class A {
     Math.ceil(this.el.scrollTop + this.el.clientHeight + 5) >= this.el.scrollHeight ? this.isTripped || (this.handler(t), this.isTripped = !0) : this.isTripped && (this.isTripped = !1);
   }
 }
-function es(e) {
-  L(() => window.addEventListener("resize", e)), Se(() => window.addEventListener("resize", e)), xe(() => window.removeEventListener("resize", e)), ne(() => window.removeEventListener("resize", e));
+function ei(e) {
+  L(() => window.addEventListener("resize", e)), Se(() => window.addEventListener("resize", e)), Ce(() => window.removeEventListener("resize", e)), ne(() => window.removeEventListener("resize", e));
 }
 const cn = {
   mounted: ye,
@@ -1091,14 +1089,14 @@ function un(e) {
       return;
     }
     t.preventDefault(), t.stopImmediatePropagation();
-    const s = {
+    const i = {
       initTime: n,
       preconfirmHtml: e.innerHTML,
       resetHandler: () => {
-        e.innerHTML = s.preconfirmHtml, e.blur(), e.removeEventListener("mouseout", s.resetHandler), delete e[_];
+        e.innerHTML = i.preconfirmHtml, e.blur(), e.removeEventListener("mouseout", i.resetHandler), delete e[_];
       }
     };
-    e[_] = s, e.innerHTML = "Confirm", e.addEventListener("mouseout", s.resetHandler);
+    e[_] = i, e.innerHTML = "Confirm", e.addEventListener("mouseout", i.resetHandler);
   });
 }
 const hn = {
@@ -1124,7 +1122,7 @@ function mn(e, t) {
   if (!t.value)
     return ((c = e.attributes.getNamedItem("placeholder")) == null ? void 0 : c.value) ?? "";
   let n = "";
-  const s = t.value.replace(/ /g, "T").replace(/\.\d+Z$/, "Z"), i = e.attributes.getNamedItem("local") !== null ? s.replace(/Z$/, "") : s.replace(/(Z|\+00:00)?$/, "Z"), o = new Date(i);
+  const i = t.value.replace(/ /g, "T").replace(/\.\d+Z$/, "Z"), s = e.attributes.getNamedItem("local") !== null ? i.replace(/Z$/, "") : i.replace(/(Z|\+00:00)?$/, "Z"), o = new Date(s);
   e.attributes.getNamedItem("display-utc") !== null && o.setMinutes(o.getMinutes() - o.getTimezoneOffset());
   let r = (h = e.attributes.getNamedItem("format")) == null ? void 0 : h.value;
   if (!r && e.attributes.getNamedItem("relative-date") !== null) {
@@ -1161,9 +1159,9 @@ function Ee(e, t) {
     return;
   if (!t.value)
     return Ae(e);
-  const n = new Date(t.value), s = (r = e.attributes.getNamedItem("base-time")) == null ? void 0 : r.value, i = n.getTime() - (s ? new Date(s).getTime() - t.value * 1e3 : 0), o = e.getAttribute("no-seconds") === null;
+  const n = new Date(t.value), i = (r = e.attributes.getNamedItem("base-time")) == null ? void 0 : r.value, s = n.getTime() - (i ? new Date(i).getTime() - t.value * 1e3 : 0), o = e.getAttribute("no-seconds") === null;
   e[F] || re.push(e), e[F] = {
-    startTs: i,
+    startTs: s,
     includeSeconds: o
   }, $e(e);
 }
@@ -1175,12 +1173,12 @@ function Ae(e) {
   e[F] && (Je(re, e), delete e[F]), e.innerText = "-";
 }
 function En(e, t) {
-  const n = [], s = Math.floor(e / 86400);
-  s && n.push(s + "d"), e -= s * 86400;
-  const i = Math.floor(e / 3600);
-  (s || i) && n.push(i + "h"), e -= i * 3600;
+  const n = [], i = Math.floor(e / 86400);
+  i && n.push(i + "d"), e -= i * 86400;
+  const s = Math.floor(e / 3600);
+  (i || s) && n.push(s + "h"), e -= s * 3600;
   const o = Math.floor(e / 60);
-  return (s || i || o) && n.push(o + "m"), t ? n.length || n.push("0m") : (e -= o * 60, n.push(e + "s")), n.join(" ");
+  return (i || s || o) && n.push(o + "m"), t ? n.length || n.push("0m") : (e -= o * 60, n.push(e + "s")), n.join(" ");
 }
 const D = Symbol("InfiniteScrollHandler"), On = {
   mounted(e, t) {
@@ -1207,14 +1205,14 @@ const Tn = {
   unmounted: Be
 }, B = Symbol("TooltipState");
 function we(e, t) {
-  var s;
-  let n = ((s = e.attributes.getNamedItem("tip")) == null ? void 0 : s.value) ?? t.value;
+  var i;
+  let n = ((i = e.attributes.getNamedItem("tip")) == null ? void 0 : i.value) ?? t.value;
   if (t.value || (n = null), n) {
-    const i = {
+    const s = {
       content: n,
       html: e.getAttribute("html") !== null
     };
-    e[B] ? e[B].configure(i) : e[B] = new kn(e, i);
+    e[B] ? e[B].configure(s) : e[B] = new kn(e, s);
   } else
     Be(e);
 }
@@ -1258,9 +1256,9 @@ class kn {
     this.shouldShow || this.tipEl && (this.tipEl.remove(), this.tipEl = void 0, this.titleEl = void 0, this.contentEl = void 0, this.checkInterval && (clearInterval(this.checkInterval), this.checkInterval = void 0), window.removeEventListener("mousemove", this.handleMouseMoveWithContext), this.mouseMoveBound = !1);
   }
   handleMouseMove(t) {
-    const n = this.tipEl.offsetWidth, s = this.tipEl.offsetHeight, i = window.innerWidth, o = window.innerHeight;
+    const n = this.tipEl.offsetWidth, i = this.tipEl.offsetHeight, s = window.innerWidth, o = window.innerHeight;
     let r = t.pageX + 10, l = t.pageY + 20;
-    r + n > i && (r = t.pageX - 5 - n), l + s > o && (l = t.pageY - 5 - s), this.tipEl.style.left = r + "px", this.tipEl.style.top = l + "px", this.lastMoveEvt = t;
+    r + n > s && (r = t.pageX - 5 - n), l + i > o && (l = t.pageY - 5 - i), this.tipEl.style.left = r + "px", this.tipEl.style.top = l + "px", this.lastMoveEvt = t;
   }
   checkMoveEvent() {
     var t;
@@ -1273,7 +1271,7 @@ class kn {
 function Sn(e) {
   e.directive("autofocus", cn), e.directive("confirm-button", dn), e.directive("date-input", hn), e.directive("datetime", pn), e.directive("disabled", vn), e.directive("duration", gn), e.directive("infinite-scroll", On), e.directive("readonly", wn), e.directive("tooltip", Tn);
 }
-function ts(e) {
+function ti(e) {
   Sn(e);
 }
 export {
@@ -1288,28 +1286,28 @@ export {
   Zn as cloneProp,
   Vn as configureVf,
   qn as createFilters,
-  se as createOverlayInjection,
-  xt as desnakeCase,
+  ie as createOverlayInjection,
+  Ct as desnakeCase,
   dt as dismissOverlayInjectionById,
   Dn as dismissOverlayInjectionByInstance,
   Me as dismissOverlayInjectionByInternalInstance,
   ct as dismissOverlayInjectionByVnode,
-  is as escapeHtml,
+  si as escapeHtml,
   ut as formatError,
   sn as formatNumber,
-  Ct as formatPhone,
+  xt as formatPhone,
   Lt as formatUSCurrency,
   Nn as handleError,
   Fn as handleErrorAndAlert,
   Qn as installApiClientInterceptors,
-  ts as installVf,
+  ti as installVf,
   on as isApiError,
   Rn as maskComponent,
   ht as maskEl,
   ft as maskForm,
   Un as nl2br,
   Gn as nullifyEmptyInputs,
-  ie as presentOverlay,
+  se as presentOverlay,
   P as removeOverlayInjection,
   zn as replaceElement,
   de as showAlert,
@@ -1325,6 +1323,6 @@ export {
   Ie as unmaskEl,
   He as unmaskForm,
   Jn as useInfiniteScroll,
-  es as useResizeWatcher,
+  ei as useResizeWatcher,
   jn as uuid
 };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.7.1",
+    "version": "4.7.3",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "bin": {

package/src/components/smart-select.vue

@@ -10,6 +10,7 @@
             v-disabled="effectiveDisabled"
             @focus="handleInputFocused"
             @blur="handleInputBlurred"
+            :required="required"
         />
         <div v-if="shouldDisplayOptions" ref="optionsContainer" class="vf-smart-select-options">
             <div v-if="!isLoaded" class="no-results">Loading...</div>
@@ -83,12 +84,12 @@ export default {
         noResultsText: String as PropType<string>,
         disabled: Boolean as PropType<boolean>,
         optionsListId: String as PropType<string>,
-        debug: Boolean as PropType<boolean>
+        debug: Boolean as PropType<boolean>,
+        required: Boolean as PropType<boolean>
     },
 
     emits: {
         optionsLoaded: Object as (options: any[]) => void,
-        createItem: Object as (searchText: string) => void,
         'update:modelValue': Object as (value: any) => void
     },
 
@@ -232,6 +233,7 @@ export default {
 
         options() {
             this.loadedOptions = this.options ?? [];
+            this.isLoaded = true;
         },
 
         // data
@@ -274,7 +276,7 @@ export default {
     },
 
     async mounted() {
-        this.shouldShowCreateOption = this.$attrs['onCreateItem'] !== undefined;
+        this.shouldShowCreateOption = this.onCreateItem !== undefined;
 
         if (this.options) {
             this.loadedOptions = this.options;
@@ -305,13 +307,6 @@ export default {
             this.loadedOptions && this.$emit('optionsLoaded', this.loadedOptions);
         },
 
-        handleSourceUpdate() {
-            if (this.preload) return this.reloadOptions();
-            if (!this.isLoaded) return;
-            this.isLoaded = false;
-            this.loadedOptions = [];
-        },
-
         async reloadOptions() {
             const searchText = this.remoteSearch && this.isSearching && this.searchText ? this.searchText : null;
             this.isLoading = true;
@@ -509,7 +504,7 @@ export default {
                 this.searchText = '';
                 this.selectedOption = null;
                 this.selectedOptionTitle = null;
-                this.$emit('createItem', createText);
+                this.onCreateItem?.(createText);
             } else {
                 const selectedDecoratedOption = this.optionsDescriptors.find(decoratedOption => decoratedOption.key == option.key);
                 const realOption = selectedDecoratedOption!.ref;
@@ -534,7 +529,7 @@ export default {
         },
 
         addRemoteOption(option: GenericObject) {
-            this.loadedOptions.push(option);
+            this.loadedOptions.unshift(option);
         }
     }
 };

package/src/helpers/mask.ts

@@ -50,8 +50,8 @@ const FormMaskState = Symbol('FormMaskState');
 interface IFormMaskState {
     [FormMaskState]?: {
         disabledElements: HTMLElement[];
-        waitButton: HTMLElement;
-        buttonHtml: string;
+        waitButton?: HTMLElement;
+        buttonHtml?: string;
     };
 }
 type FormMaskElement = Element & IFormMaskState;
@@ -62,10 +62,13 @@ export function maskForm(formOrCmp: Element | AnyComponentPublicInstance, button
 
     const buttonEl = (
         buttonSelector instanceof Element ? buttonSelector : form.querySelectorAll(buttonSelector ?? 'button:not([disabled]):not([type="button"])')[0]
-    ) as HTMLElement;
-    const originalButtonHtml = buttonEl.tagName === 'INPUT' ? (buttonEl as HTMLInputElement).value : buttonEl.innerHTML;
-    buttonEl.setAttribute('disabled', 'disabled');
-    buttonEl.innerText = buttonText ?? 'Please wait...';
+    ) as HTMLElement | undefined;
+    let originalButtonHtml: string | undefined;
+    if (buttonEl) {
+        originalButtonHtml = buttonEl.tagName === 'INPUT' ? (buttonEl as HTMLInputElement).value : buttonEl.innerHTML;
+        buttonEl.setAttribute('disabled', 'disabled');
+        buttonEl.innerText = buttonText ?? 'Please wait...';
+    }
 
     const inputsQR = form.querySelectorAll('input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])');
     const inputs = [...inputsQR] as HTMLElement[];
@@ -89,8 +92,11 @@ export function unmaskForm(formOrCmp: Element | AnyComponentPublicInstance) {
     form.classList.remove('vf-masked');
 
     state.disabledElements.forEach(el => el.removeAttribute('disabled'));
-    state.waitButton.innerHTML = state.buttonHtml;
-    state.waitButton.removeAttribute('disabled');
+
+    if (state.waitButton) {
+        state.waitButton.innerHTML = state.buttonHtml!;
+        state.waitButton.removeAttribute('disabled');
+    }
 
     delete (form as FormMaskElement)[FormMaskState];
 }