@schwarzdavid/ui-kit 0.0.1-alpha.1 → 0.0.1-alpha.2

package/dist/ui-kit.d.ts

@@ -8,6 +8,7 @@ import { DefineComponent } from 'vue';
 import { MaybeRefOrGetter } from 'vue';
 import { MethodOptions } from 'vue';
 import { PublicProps } from 'vue';
+import { Ref } from 'vue';
 
 declare interface ConfirmDialogBaseProps {
     title: string;
@@ -87,6 +88,17 @@ export declare interface InfoDialogValueCta<T> extends InfoDialogBaseCta {
     value: T;
 }
 
+export declare type LoadingAction = (...args: any) => any | Promise<any>;
+
+export declare interface LoadingComposable<A extends LoadingAction> {
+    loading: Readonly<Ref<boolean>>;
+    action(...args: Parameters<A>): Promise<Awaited<ReturnType<A>>>;
+}
+
+export declare interface LoadingOptions {
+    overlay: MaybeRefOrGetter<boolean>;
+}
+
 export declare type PromptDialogComponent<T> = ComponentPublicInstance<PromptDialogComponentProps<T>, any, any, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin, PromptDialogComponentEmits<T>>;
 
 export declare type PromptDialogComponentEmits<T> = (name: 'update:modelValue', value: T | null) => unknown;
@@ -118,8 +130,21 @@ export declare enum PromptDialogSize {
     LARGE = "lg"
 }
 
+export declare interface ToastComposable {
+    info(message: string): Promise<void>;
+    warn(message: string): Promise<void>;
+    error(message: string): Promise<void>;
+    success(message: string): Promise<void>;
+}
+
 export declare const UiKitOutlet: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 export declare function useDialog(): DialogComposable;
 
+export declare function useLoading<A extends LoadingAction>(actionCallback: A, { overlay }?: Partial<LoadingOptions>): LoadingComposable<A>;
+
+export declare function useLoadingOverlay(): Ref<boolean>;
+
+export declare function useToast(): ToastComposable;
+
 export { }

package/dist/ui-kit.js

@@ -1,62 +1,62 @@
-import { ref as V, readonly as ne, markRaw as ae, defineComponent as w, openBlock as m, createElementBlock as j, Fragment as L, renderList as K, unref as r, createBlock as g, resolveDynamicComponent as N, mergeProps as O, onMounted as me, withCtx as i, createTextVNode as W, toDisplayString as H, getCurrentInstance as pe, inject as fe, computed as f, TransitionGroup as ve, normalizeClass as oe, createVNode as l, createElementVNode as M, createCommentVNode as k, normalizeProps as le, toValue as Z } from "vue";
-import { VAlert as ge, VDialog as X, VCard as J, VCardTitle as re, VBtn as x, VCardText as ue, VCardActions as Y, VToolbar as _e, VToolbarTitle as Ce, VSpacer as ee, VDivider as ye } from "vuetify/components";
-import { merge as S } from "lodash";
-import { useI18n as Te } from "vue-i18n";
+import { ref as b, readonly as J, markRaw as le, defineComponent as A, openBlock as m, createElementBlock as L, Fragment as R, renderList as Y, unref as u, createBlock as g, resolveDynamicComponent as B, mergeProps as G, onMounted as fe, withCtx as c, createTextVNode as H, toDisplayString as K, getCurrentInstance as ve, inject as ge, computed as f, TransitionGroup as _e, normalizeClass as re, isRef as ye, createVNode as s, createElementVNode as Q, createCommentVNode as k, normalizeProps as ue, toValue as X } from "vue";
+import { VAlert as Ce, VOverlay as Te, VProgressCircular as be, VDialog as Z, VCard as ee, VCardTitle as se, VBtn as x, VCardText as ie, VCardActions as te, VToolbar as he, VToolbarTitle as we, VSpacer as ae, VDivider as xe } from "vuetify/components";
+import { merge as $ } from "lodash";
+import { useI18n as Ae } from "vue-i18n";
 const v = [];
 for (let e = 0; e < 256; ++e)
   v.push((e + 256).toString(16).slice(1));
-function be(e, n = 0) {
+function Ve(e, n = 0) {
   return (v[e[n + 0]] + v[e[n + 1]] + v[e[n + 2]] + v[e[n + 3]] + "-" + v[e[n + 4]] + v[e[n + 5]] + "-" + v[e[n + 6]] + v[e[n + 7]] + "-" + v[e[n + 8]] + v[e[n + 9]] + "-" + v[e[n + 10]] + v[e[n + 11]] + v[e[n + 12]] + v[e[n + 13]] + v[e[n + 14]] + v[e[n + 15]]).toLowerCase();
 }
-let z;
-const he = new Uint8Array(16);
-function xe() {
-  if (!z) {
+let q;
+const De = new Uint8Array(16);
+function ke() {
+  if (!q) {
     if (typeof crypto > "u" || !crypto.getRandomValues)
       throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-    z = crypto.getRandomValues.bind(crypto);
+    q = crypto.getRandomValues.bind(crypto);
   }
-  return z(he);
+  return q(De);
 }
-const Ae = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), te = { randomUUID: Ae };
-function se(e, n, t) {
-  if (te.randomUUID && !n && !e)
-    return te.randomUUID();
+const Ee = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), oe = { randomUUID: Ee };
+function ce(e, n, t) {
+  if (oe.randomUUID && !n && !e)
+    return oe.randomUUID();
   e = e || {};
-  const a = e.random || (e.rng || xe)();
-  return a[6] = a[6] & 15 | 64, a[8] = a[8] & 63 | 128, be(a);
+  const a = e.random || (e.rng || ke)();
+  return a[6] = a[6] & 15 | 64, a[8] = a[8] & 63 | 128, Ve(a);
 }
-const R = V([]);
-function ce() {
+const U = b([]);
+function de() {
   function e() {
     let a;
     for (; ; )
-      if (a = se(), !R.value.some((o) => o.id === a))
+      if (a = ce(), !U.value.some((o) => o.id === a))
         return a;
   }
   function n(a) {
-    const o = e(), c = ae({ ...a, id: o, resolve: (d) => {
+    const o = e(), i = le({ ...a, id: o, resolve: (d) => {
       t(o), a.resolve(d);
     }, reject: (d) => {
       t(o), a.reject(d);
     } });
-    return R.value.push(c), c;
+    return U.value.push(i), i;
   }
   function t(a) {
-    const o = typeof a == "string" ? a : a.id, u = R.value.findIndex((s) => s.id === o);
-    u >= 0 && R.value.splice(u, 1);
+    const o = typeof a == "string" ? a : a.id, l = U.value.findIndex((r) => r.id === o);
+    l >= 0 && U.value.splice(l, 1);
   }
   return {
-    queue: ne(R),
+    queue: J(U),
     addToQueue: n,
     removeFromQueue: t
   };
 }
-const Ve = /* @__PURE__ */ w({
+const Ie = /* @__PURE__ */ A({
   __name: "DialogOutlet",
   setup(e) {
-    const { queue: n } = ce();
-    return (t, a) => (m(!0), j(L, null, K(r(n), (o) => (m(), g(N(o.component), O({
+    const { queue: n } = de();
+    return (t, a) => (m(!0), L(R, null, Y(u(n), (o) => (m(), g(B(o.component), G({
       key: o.id,
       ref_for: !0
     }, o.props, {
@@ -64,90 +64,90 @@ const Ve = /* @__PURE__ */ w({
       onReject: o.reject
     }), null, 16, ["onResolve", "onReject"]))), 128));
   }
-}), P = V([]);
-function ie() {
+}), P = b([]);
+function ne() {
   function e() {
     let a;
     for (; ; )
-      if (a = se(), !P.value.some((o) => o.id === a))
+      if (a = ce(), !P.value.some((o) => o.id === a))
         return a;
   }
   function n(a) {
-    const o = e(), s = ae({ ...a, id: o, resolve: () => {
+    const o = e(), r = le({ ...a, id: o, resolve: () => {
       t(o), a.resolve();
     } });
-    return P.value.unshift(s), s;
+    return P.value.unshift(r), r;
   }
   function t(a) {
-    const o = typeof a == "string" ? a : a.id, u = P.value.findIndex((s) => s.id === o);
-    u >= 0 && P.value.splice(u, 1);
+    const o = typeof a == "string" ? a : a.id, l = P.value.findIndex((r) => r.id === o);
+    l >= 0 && P.value.splice(l, 1);
   }
   return {
-    queue: ne(P),
+    queue: J(P),
     addToQueue: n,
     removeFromQueue: t
   };
 }
-const we = /* @__PURE__ */ w({
+const Le = /* @__PURE__ */ A({
   __name: "ToastEntry",
   props: {
     entry: {}
   },
   setup(e) {
-    const n = e, t = ie(), a = V(-1);
+    const n = e, t = ne(), a = b(-1);
     function o() {
       window.clearTimeout(a.value), t.removeFromQueue(n.entry.id);
     }
-    return me(() => {
+    return fe(() => {
       a.value = window.setTimeout(() => {
         o();
       }, n.entry.timeout);
-    }), (u, s) => (m(), g(r(ge), {
+    }), (l, r) => (m(), g(u(Ce), {
       theme: "dark",
       class: "toast-entry",
       closable: "",
       "onClick:close": o
     }, {
-      default: i(() => [
-        W(H(u.entry.message), 1)
+      default: c(() => [
+        H(K(l.entry.message), 1)
       ]),
       _: 1
     }));
   }
-}), F = (e, n) => {
+}), N = (e, n) => {
   const t = e.__vccOpts || e;
   for (const [a, o] of n)
     t[a] = o;
   return t;
-}, De = /* @__PURE__ */ F(we, [["__scopeId", "data-v-419b7d95"]]);
-function $() {
+}, Re = /* @__PURE__ */ N(Le, [["__scopeId", "data-v-419b7d95"]]);
+function S() {
   let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
-  if ($.cache.has(e)) return $.cache.get(e);
+  if (S.cache.has(e)) return S.cache.get(e);
   const n = e.replace(/[^a-z]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
-  return $.cache.set(e, n), n;
+  return S.cache.set(e, n), n;
 }
-$.cache = /* @__PURE__ */ new Map();
-function ke(e, n) {
-  const t = pe();
+S.cache = /* @__PURE__ */ new Map();
+function je(e, n) {
+  const t = ve();
   if (!t)
     throw new Error(`[Vuetify] ${e} must be called from inside a setup function`);
   return t;
 }
-function Ee() {
+function Ue() {
   let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "composables";
-  const n = ke(e).type;
-  return $((n == null ? void 0 : n.aliasName) || (n == null ? void 0 : n.name));
+  const n = je(e).type;
+  return S((n == null ? void 0 : n.aliasName) || (n == null ? void 0 : n.name));
 }
-const Ie = Symbol.for("vuetify:display");
-function de() {
-  let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : Ee();
-  const t = fe(Ie);
+const Pe = Symbol.for("vuetify:display");
+function me() {
+  let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : Ue();
+  const t = ge(Pe);
   if (!t) throw new Error("Could not find Vuetify display injection");
   const a = f(() => {
     if (e.mobile != null) return e.mobile;
     if (!e.mobileBreakpoint) return t.mobile.value;
-    const u = typeof e.mobileBreakpoint == "number" ? e.mobileBreakpoint : t.thresholds.value[e.mobileBreakpoint];
-    return t.width.value < u;
+    const l = typeof e.mobileBreakpoint == "number" ? e.mobileBreakpoint : t.thresholds.value[e.mobileBreakpoint];
+    return t.width.value < l;
   }), o = f(() => n ? {
     [`${n}--mobile`]: a.value
   } : {});
@@ -157,52 +157,77 @@ function de() {
     mobile: a
   };
 }
-const je = /* @__PURE__ */ w({
+const Oe = /* @__PURE__ */ A({
   __name: "ToastOutlet",
   setup(e) {
-    const { queue: n } = ie(), { mobile: t } = de(), a = f(() => t.value ? "" : "toast-outlet--desktop");
-    function o(u) {
-      const { width: s } = u.getBoundingClientRect();
-      u instanceof HTMLElement && (u.style.width = `${s.toFixed()}px`);
+    const { queue: n } = ne(), { mobile: t } = me(), a = f(() => t.value ? "" : "toast-outlet--desktop");
+    function o(l) {
+      const { width: r } = l.getBoundingClientRect();
+      l instanceof HTMLElement && (l.style.width = `${r.toFixed()}px`);
     }
-    return (u, s) => (m(), g(ve, {
+    return (l, r) => (m(), g(_e, {
       name: "fade",
       tag: "div",
-      class: oe(["toast-outlet", a.value]),
+      class: re(["toast-outlet", a.value]),
       onBeforeLeave: o
     }, {
-      default: i(() => [
-        (m(!0), j(L, null, K(r(n), (c) => (m(), g(De, {
-          key: c.id,
-          entry: c
+      default: c(() => [
+        (m(!0), L(R, null, Y(u(n), (i) => (m(), g(Re, {
+          key: i.id,
+          entry: i
         }, null, 8, ["entry"]))), 128))
       ]),
       _: 1
     }, 8, ["class"]));
   }
-}), Le = /* @__PURE__ */ F(je, [["__scopeId", "data-v-93b5ec8a"]]), He = /* @__PURE__ */ w({
+}), Se = /* @__PURE__ */ N(Oe, [["__scopeId", "data-v-93b5ec8a"]]), Qe = b(!1);
+function pe() {
+  return Qe;
+}
+const $e = /* @__PURE__ */ A({
+  __name: "LoadingOverlay",
+  setup(e) {
+    const n = pe();
+    return (t, a) => (m(), g(u(Te), {
+      modelValue: u(n),
+      "onUpdate:modelValue": a[0] || (a[0] = (o) => ye(n) ? n.value = o : null),
+      persistent: "",
+      class: "d-flex align-center justify-center"
+    }, {
+      default: c(() => [
+        s(u(be), {
+          indeterminate: "",
+          color: "primary",
+          size: "100"
+        })
+      ]),
+      _: 1
+    }, 8, ["modelValue"]));
+  }
+}), tt = /* @__PURE__ */ A({
   __name: "UiKitOutlet",
   setup(e) {
-    return (n, t) => (m(), j(L, null, [
-      l(Ve),
-      l(Le)
+    return (n, t) => (m(), L(R, null, [
+      s(Ie),
+      s(Se),
+      s($e)
     ], 64));
   }
-}), y = /* @__PURE__ */ w({
+}), C = /* @__PURE__ */ A({
   __name: "MaybeTranslation",
   props: {
     content: {},
     translate: { type: Boolean, default: !0 }
   },
   setup(e) {
-    const { t: n } = Te({ useScope: "global" });
-    return (t, a) => t.translate ? (m(), j(L, { key: 0 }, [
-      W(H(r(n)(t.content)), 1)
-    ], 64)) : (m(), j(L, { key: 1 }, [
-      W(H(t.content), 1)
+    const { t: n } = Ae({ useScope: "global" });
+    return (t, a) => t.translate ? (m(), L(R, { key: 0 }, [
+      H(K(u(n)(t.content)), 1)
+    ], 64)) : (m(), L(R, { key: 1 }, [
+      H(K(t.content), 1)
     ], 64));
   }
-}), Ue = { class: "d-flex justify-space-between pr-2 py-2" }, Re = 650, Pe = /* @__PURE__ */ w({
+}), Ne = { class: "d-flex justify-space-between pr-2 py-2" }, Fe = 650, Me = /* @__PURE__ */ A({
   __name: "InfoDialog",
   props: {
     data: {}
@@ -214,87 +239,87 @@ const je = /* @__PURE__ */ w({
       translateText: !0,
       value: null
     };
-    let u = null;
-    const s = V(!0), c = f(() => Object.hasOwn(t.data, "content") ? {
+    let l = null;
+    const r = b(!0), i = f(() => Object.hasOwn(t.data, "content") ? {
       content: t.data.content,
       translateContent: t.data.translateContent
     } : null), d = f(() => Object.hasOwn(t.data, "component") ? {
       component: t.data.component,
       props: t.data.props
-    } : null), _ = f(() => t.data.defaultCta === !1 ? null : S({}, o, t.data.defaultCta));
-    function A(p) {
-      E(p) ? p.action() : b(p.value);
+    } : null), _ = f(() => t.data.defaultCta === !1 ? null : $({}, o, t.data.defaultCta));
+    function V(p) {
+      E(p) ? p.action() : h(p.value);
     }
     function E(p) {
       return Object.hasOwn(p, "action");
     }
-    function b(p = null) {
-      u = p, s.value = !1;
+    function h(p = null) {
+      l = p, r.value = !1;
     }
     function I() {
-      a("resolve", u);
+      a("resolve", l);
     }
-    return (p, h) => (m(), g(r(X), {
-      modelValue: s.value,
-      "onUpdate:modelValue": h[1] || (h[1] = (C) => s.value = C),
-      "max-width": p.data.width ?? Re,
+    return (p, w) => (m(), g(u(Z), {
+      modelValue: r.value,
+      "onUpdate:modelValue": w[1] || (w[1] = (y) => r.value = y),
+      "max-width": p.data.width ?? Fe,
       onAfterLeave: I
     }, {
-      default: i(() => [
-        l(r(J), { class: "info-dialog-card" }, {
-          default: i(() => [
-            M("div", Ue, [
-              l(r(re), null, {
-                default: i(() => [
-                  l(y, {
+      default: c(() => [
+        s(u(ee), { class: "info-dialog-card" }, {
+          default: c(() => [
+            Q("div", Ne, [
+              s(u(se), null, {
+                default: c(() => [
+                  s(C, {
                     translate: p.data.translateTitle,
                     content: p.data.title
                   }, null, 8, ["translate", "content"])
                 ]),
                 _: 1
               }),
-              l(r(x), {
+              s(u(x), {
                 icon: "$close",
                 variant: "text",
-                onClick: h[0] || (h[0] = (C) => b(null))
+                onClick: w[0] || (w[0] = (y) => h(null))
               })
             ]),
-            c.value ? (m(), g(r(ue), { key: 0 }, {
-              default: i(() => [
-                M("p", null, [
-                  l(y, {
-                    translate: c.value.translateContent,
-                    content: c.value.content
+            i.value ? (m(), g(u(ie), { key: 0 }, {
+              default: c(() => [
+                Q("p", null, [
+                  s(C, {
+                    translate: i.value.translateContent,
+                    content: i.value.content
                   }, null, 8, ["translate", "content"])
                 ])
               ]),
               _: 1
             })) : k("", !0),
-            d.value ? (m(), g(N(d.value.component), le(O({ key: 1 }, d.value.props)), null, 16)) : k("", !0),
-            l(r(Y), { class: "justify-end" }, {
-              default: i(() => [
-                (m(!0), j(L, null, K(p.data.additionalCta ?? [], (C, T) => (m(), g(r(x), {
+            d.value ? (m(), g(B(d.value.component), ue(G({ key: 1 }, d.value.props)), null, 16)) : k("", !0),
+            s(u(te), { class: "justify-end" }, {
+              default: c(() => [
+                (m(!0), L(R, null, Y(p.data.additionalCta ?? [], (y, T) => (m(), g(u(x), {
                   key: T,
                   color: "primary",
                   variant: "text",
-                  onClick: () => A(C)
+                  onClick: () => V(y)
                 }, {
-                  default: i(() => [
-                    l(y, {
-                      translate: C.translateText,
-                      content: C.text
+                  default: c(() => [
+                    s(C, {
+                      translate: y.translateText,
+                      content: y.text
                     }, null, 8, ["translate", "content"])
                   ]),
                   _: 2
                 }, 1032, ["onClick"]))), 128)),
-                _.value ? (m(), g(r(x), {
+                _.value ? (m(), g(u(x), {
                   key: 0,
                   color: "primary",
                   variant: "elevated",
-                  onClick: b
+                  onClick: h
                 }, {
-                  default: i(() => [
-                    l(y, {
+                  default: c(() => [
+                    s(C, {
                       translate: _.value.translateText,
                       content: _.value.text
                     }, null, 8, ["translate", "content"])
@@ -311,9 +336,9 @@ const je = /* @__PURE__ */ w({
       _: 1
     }, 8, ["modelValue", "max-width"]));
   }
-}), $e = /* @__PURE__ */ F(Pe, [["__scopeId", "data-v-ab153f63"]]);
+}), Be = /* @__PURE__ */ N(Me, [["__scopeId", "data-v-ab153f63"]]);
 var D = /* @__PURE__ */ ((e) => (e.SMALL = "sm", e.LARGE = "lg", e))(D || {});
-const Me = /* @__PURE__ */ w({
+const Ge = /* @__PURE__ */ A({
   __name: "PromptDialog",
   props: {
     data: {}
@@ -323,92 +348,92 @@ const Me = /* @__PURE__ */ w({
     const t = e, a = n, o = {
       [D.SMALL]: 650,
       [D.LARGE]: 1200
-    }, u = {
+    }, l = {
       text: "APP.CANCEL",
       translateText: !0
-    }, s = {
+    }, r = {
       text: "APP.SAVE",
       translateText: !0
-    }, c = V(!0), d = V(Z(t.data.initialValue) ?? null), _ = V(null), { mobile: A } = de(), E = f(() => t.data.required && !d.value), b = f(() => o[t.data.size ?? D.SMALL]), I = f(() => t.data.size === D.LARGE ? A.value : !1), p = f(() => S({}, u, t.data.abortCta)), h = f(() => S({}, s, t.data.saveCta)), C = f(() => t.data.size === D.LARGE ? "secondary" : "primary");
+    }, i = b(!0), d = b(X(t.data.initialValue) ?? null), _ = b(null), { mobile: V } = me(), E = f(() => t.data.required && !d.value), h = f(() => o[t.data.size ?? D.SMALL]), I = f(() => t.data.size === D.LARGE ? V.value : !1), p = f(() => $({}, l, t.data.abortCta)), w = f(() => $({}, r, t.data.saveCta)), y = f(() => t.data.size === D.LARGE ? "secondary" : "primary");
     function T() {
-      d.value = Z(t.data.initialValue) ?? null, c.value = !1;
+      d.value = X(t.data.initialValue) ?? null, i.value = !1;
     }
-    function Q() {
-      c.value = !1;
+    function F() {
+      i.value = !1;
     }
-    function G() {
+    function W() {
       if (t.data.required && !d.value) {
         a("reject");
         return;
       }
       a("resolve", d.value);
     }
-    return (U, B) => (m(), g(r(X), {
-      modelValue: c.value,
-      "onUpdate:modelValue": B[1] || (B[1] = (q) => c.value = q),
-      "max-width": b.value,
+    return (j, M) => (m(), g(u(Z), {
+      modelValue: i.value,
+      "onUpdate:modelValue": M[1] || (M[1] = (z) => i.value = z),
+      "max-width": h.value,
       fullscreen: I.value,
-      scrollable: U.data.size === r(D).LARGE,
-      onAfterLeave: G
+      scrollable: j.data.size === u(D).LARGE,
+      onAfterLeave: W
     }, {
-      default: i(() => [
-        l(r(J), { class: "prompt-dialog-card" }, {
-          default: i(() => [
-            l(r(_e), { color: "primary" }, {
-              default: i(() => [
-                l(r(Ce), null, {
-                  default: i(() => [
-                    l(y, {
-                      translate: U.data.translateTitle,
-                      content: U.data.title
+      default: c(() => [
+        s(u(ee), { class: "prompt-dialog-card" }, {
+          default: c(() => [
+            s(u(he), { color: "primary" }, {
+              default: c(() => [
+                s(u(we), null, {
+                  default: c(() => [
+                    s(C, {
+                      translate: j.data.translateTitle,
+                      content: j.data.title
                     }, null, 8, ["translate", "content"])
                   ]),
                   _: 1
                 }),
-                l(r(ee)),
-                M("div", {
+                s(u(ae)),
+                Q("div", {
                   ref_key: "toolbar",
                   ref: _,
                   class: "prompt-dialog-toolbar-slot"
                 }, null, 512),
-                l(r(x), {
+                s(u(x), {
                   icon: "mdi-close",
                   onClick: T
                 })
               ]),
               _: 1
             }),
-            _.value ? (m(), g(N(U.data.component), O({ key: 0 }, U.data.props, {
+            _.value ? (m(), g(B(j.data.component), G({ key: 0 }, j.data.props, {
               modelValue: d.value,
-              "onUpdate:modelValue": B[0] || (B[0] = (q) => d.value = q),
+              "onUpdate:modelValue": M[0] || (M[0] = (z) => d.value = z),
               toolbar: _.value
             }), null, 16, ["modelValue", "toolbar"])) : k("", !0),
-            l(r(ye)),
-            l(r(Y), null, {
-              default: i(() => [
-                l(r(ee)),
-                l(r(x), {
-                  color: C.value,
+            s(u(xe)),
+            s(u(te), null, {
+              default: c(() => [
+                s(u(ae)),
+                s(u(x), {
+                  color: y.value,
                   onClick: T
                 }, {
-                  default: i(() => [
-                    l(y, {
+                  default: c(() => [
+                    s(C, {
                       translate: p.value.translateText,
                       content: p.value.text
                     }, null, 8, ["translate", "content"])
                   ]),
                   _: 1
                 }, 8, ["color"]),
-                l(r(x), {
+                s(u(x), {
                   variant: "elevated",
-                  color: C.value,
+                  color: y.value,
                   disabled: E.value,
-                  onClick: Q
+                  onClick: F
                 }, {
-                  default: i(() => [
-                    l(y, {
-                      translate: h.value.translateText,
-                      content: h.value.text
+                  default: c(() => [
+                    s(C, {
+                      translate: w.value.translateText,
+                      content: w.value.text
                     }, null, 8, ["translate", "content"])
                   ]),
                   _: 1
@@ -423,7 +448,7 @@ const Me = /* @__PURE__ */ w({
       _: 1
     }, 8, ["modelValue", "max-width", "fullscreen", "scrollable"]));
   }
-}), Se = /* @__PURE__ */ F(Me, [["__scopeId", "data-v-1f5a0caf"]]), Fe = { class: "d-flex justify-space-between pr-2 py-2" }, Qe = 550, Be = /* @__PURE__ */ w({
+}), We = /* @__PURE__ */ N(Ge, [["__scopeId", "data-v-1f5a0caf"]]), ze = { class: "d-flex justify-space-between pr-2 py-2" }, qe = 550, He = /* @__PURE__ */ A({
   __name: "ConfirmDialog",
   props: {
     data: {}
@@ -433,95 +458,95 @@ const Me = /* @__PURE__ */ w({
     const t = e, a = n, o = {
       text: "APP.YES",
       translateText: !0
-    }, u = {
+    }, l = {
       text: "APP.NO",
       translateText: !0
     };
-    let s = !1;
-    const c = V(!0), d = f(() => Object.hasOwn(t.data, "content") ? {
+    let r = !1;
+    const i = b(!0), d = f(() => Object.hasOwn(t.data, "content") ? {
       content: t.data.content,
       translateContent: t.data.translateContent
     } : null), _ = f(() => Object.hasOwn(t.data, "component") ? {
       component: t.data.component,
       props: t.data.props
-    } : null), A = f(() => S({}, o, t.data.confirmCta)), E = f(() => S({}, u, t.data.rejectCta)), b = f(() => t.data.highlightCta ?? "confirm"), I = f(() => t.data.level ?? "primary");
+    } : null), V = f(() => $({}, o, t.data.confirmCta)), E = f(() => $({}, l, t.data.rejectCta)), h = f(() => t.data.highlightCta ?? "confirm"), I = f(() => t.data.level ?? "primary");
     function p() {
-      c.value = !1;
+      i.value = !1;
     }
-    function h() {
-      s = !0, c.value = !1;
+    function w() {
+      r = !0, i.value = !1;
     }
-    function C() {
-      if (t.data.throwOnReject && !s) {
+    function y() {
+      if (t.data.throwOnReject && !r) {
         a("reject");
         return;
       }
-      a("resolve", s);
+      a("resolve", r);
     }
-    return (T, Q) => (m(), g(r(X), {
-      modelValue: c.value,
-      "onUpdate:modelValue": Q[0] || (Q[0] = (G) => c.value = G),
+    return (T, F) => (m(), g(u(Z), {
+      modelValue: i.value,
+      "onUpdate:modelValue": F[0] || (F[0] = (W) => i.value = W),
       persistent: !!T.data.permanent,
-      "max-width": T.data.maxWidth ?? Qe,
-      onAfterLeave: C
+      "max-width": T.data.maxWidth ?? qe,
+      onAfterLeave: y
     }, {
-      default: i(() => [
-        l(r(J), { class: "confirm-dialog-card" }, {
-          default: i(() => [
-            M("div", Fe, [
-              l(r(re), null, {
-                default: i(() => [
-                  l(y, {
+      default: c(() => [
+        s(u(ee), { class: "confirm-dialog-card" }, {
+          default: c(() => [
+            Q("div", ze, [
+              s(u(se), null, {
+                default: c(() => [
+                  s(C, {
                     translate: T.data.translateTitle,
                     content: T.data.title
                   }, null, 8, ["translate", "content"])
                 ]),
                 _: 1
               }),
-              T.data.permanent ? k("", !0) : (m(), g(r(x), {
+              T.data.permanent ? k("", !0) : (m(), g(u(x), {
                 key: 0,
                 icon: "$close",
                 variant: "text",
                 onClick: p
               }))
             ]),
-            d.value ? (m(), g(r(ue), { key: 0 }, {
-              default: i(() => [
-                l(y, {
+            d.value ? (m(), g(u(ie), { key: 0 }, {
+              default: c(() => [
+                s(C, {
                   translate: d.value.translateContent,
                   content: d.value.content
                 }, null, 8, ["translate", "content"])
               ]),
               _: 1
             })) : k("", !0),
-            _.value ? (m(), g(N(_.value.component), le(O({ key: 1 }, _.value.props)), null, 16)) : k("", !0),
-            l(r(Y), { class: "justify-end" }, {
-              default: i(() => [
-                M("div", {
-                  class: oe(["d-flex align-center", b.value === "confirm" ? "" : "flex-row-reverse"])
+            _.value ? (m(), g(B(_.value.component), ue(G({ key: 1 }, _.value.props)), null, 16)) : k("", !0),
+            s(u(te), { class: "justify-end" }, {
+              default: c(() => [
+                Q("div", {
+                  class: re(["d-flex align-center", h.value === "confirm" ? "" : "flex-row-reverse"])
                 }, [
-                  l(r(x), {
-                    variant: b.value === "reject" ? "elevated" : "text",
+                  s(u(x), {
+                    variant: h.value === "reject" ? "elevated" : "text",
                     color: I.value,
                     onClick: p
                   }, {
-                    default: i(() => [
-                      l(y, {
+                    default: c(() => [
+                      s(C, {
                         translate: E.value.translateText,
                         content: E.value.text
                       }, null, 8, ["translate", "content"])
                     ]),
                     _: 1
                   }, 8, ["variant", "color"]),
-                  l(r(x), {
-                    variant: b.value === "confirm" ? "elevated" : "text",
+                  s(u(x), {
+                    variant: h.value === "confirm" ? "elevated" : "text",
                     color: I.value,
-                    onClick: h
+                    onClick: w
                   }, {
-                    default: i(() => [
-                      l(y, {
-                        translate: A.value.translateText,
-                        content: A.value.text
+                    default: c(() => [
+                      s(C, {
+                        translate: V.value.translateText,
+                        content: V.value.text
                       }, null, 8, ["translate", "content"])
                     ]),
                     _: 1
@@ -537,51 +562,51 @@ const Me = /* @__PURE__ */ w({
       _: 1
     }, 8, ["modelValue", "persistent", "max-width"]));
   }
-}), Ne = /* @__PURE__ */ F(Be, [["__scopeId", "data-v-634f1f39"]]);
-function Ke() {
-  const e = ce();
-  function n(o, u) {
-    let s;
-    return typeof o == "string" ? s = {
+}), Ke = /* @__PURE__ */ N(He, [["__scopeId", "data-v-634f1f39"]]);
+function nt() {
+  const e = de();
+  function n(o, l) {
+    let r;
+    return typeof o == "string" ? r = {
       title: o,
-      content: u ?? ""
-    } : s = o, new Promise((c) => {
+      content: l ?? ""
+    } : r = o, new Promise((i) => {
       const d = {
-        component: $e,
-        props: { data: s },
-        resolve: c,
+        component: Be,
+        props: { data: r },
+        resolve: i,
         reject: () => {
-          c(null);
+          i(null);
         }
       };
       e.addToQueue(d);
     });
   }
   function t(o) {
-    return new Promise((u, s) => {
-      const c = {
-        component: Se,
+    return new Promise((l, r) => {
+      const i = {
+        component: We,
         props: { data: o },
-        resolve: u,
-        reject: s
+        resolve: l,
+        reject: r
       };
-      e.addToQueue(c);
+      e.addToQueue(i);
     });
   }
-  function a(o, u, s) {
-    let c = o;
-    return typeof o == "string" && typeof u == "string" && (c = {
+  function a(o, l, r) {
+    let i = o;
+    return typeof o == "string" && typeof l == "string" && (i = {
       title: o,
-      content: u,
-      level: s
+      content: l,
+      level: r
     }), new Promise((d, _) => {
-      const A = {
-        component: Ne,
-        props: { data: c },
+      const V = {
+        component: Ke,
+        props: { data: i },
         resolve: d,
         reject: _
       };
-      e.addToQueue(A);
+      e.addToQueue(V);
     });
   }
   return {
@@ -590,10 +615,77 @@ function Ke() {
     confirm: a
   };
 }
-var Oe = /* @__PURE__ */ ((e) => (e.DEFAULT = "primary", e.WARNING = "warning", e.DANGER = "error", e))(Oe || {});
+var Xe = /* @__PURE__ */ ((e) => (e.DEFAULT = "primary", e.WARNING = "warning", e.DANGER = "error", e))(Xe || {}), O = /* @__PURE__ */ ((e) => (e.SUCCESS = "success", e.INFO = "info", e.WARNING = "warning", e.ERROR = "error", e))(O || {});
+function at() {
+  const e = ne();
+  function n(l) {
+    return new Promise((r) => {
+      e.addToQueue({
+        message: l,
+        resolve: r,
+        timeout: 4e3,
+        type: O.INFO
+      });
+    });
+  }
+  function t(l) {
+    return new Promise((r) => {
+      e.addToQueue({
+        message: l,
+        resolve: r,
+        timeout: 4e3,
+        type: O.WARNING
+      });
+    });
+  }
+  function a(l) {
+    return new Promise((r) => {
+      e.addToQueue({
+        message: l,
+        resolve: r,
+        timeout: 4e3,
+        type: O.ERROR
+      });
+    });
+  }
+  function o(l) {
+    return new Promise((r) => {
+      e.addToQueue({
+        message: l,
+        resolve: r,
+        timeout: 4e3,
+        type: O.SUCCESS
+      });
+    });
+  }
+  return {
+    info: n,
+    warn: t,
+    error: a,
+    success: o
+  };
+}
+function ot(e, { overlay: n } = {}) {
+  const t = b(!1), a = pe();
+  async function o(...l) {
+    const r = X(n);
+    t.value = !0, r && (a.value = !0);
+    try {
+      return await e(...l);
+    } catch (i) {
+      throw i;
+    } finally {
+      t.value = !1, r && (a.value = !1);
+    }
+  }
+  return { loading: J(t), action: o };
+}
 export {
-  Oe as ConfirmDialogLevel,
+  Xe as ConfirmDialogLevel,
   D as PromptDialogSize,
-  He as UiKitOutlet,
-  Ke as useDialog
+  tt as UiKitOutlet,
+  nt as useDialog,
+  ot as useLoading,
+  pe as useLoadingOverlay,
+  at as useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schwarzdavid/ui-kit",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.2",
   "type": "module",
   "scripts": {
     "preview": "vite preview",