@schwarzdavid/ui-kit 0.0.1-alpha.3 → 0.0.1-alpha.5

package/dist/style.css

@@ -1 +1 @@
-.toast-entry[data-v-ad30c2cc]{pointer-events:all}.toast-outlet[data-v-98dd8b51]{position:fixed;z-index:9999;bottom:8px;right:8px;left:8px;display:flex;flex-direction:column;row-gap:8px;pointer-events:none}.fade-move[data-v-98dd8b51],.fade-enter-active[data-v-98dd8b51],.fade-leave-active[data-v-98dd8b51]{transition:all .3s cubic-bezier(.4,0,.2,1)}.fade-enter-from[data-v-98dd8b51],.fade-leave-to[data-v-98dd8b51]{opacity:0;transform:translate(50%) scaleY(.5)}.fade-leave-active[data-v-98dd8b51]{position:absolute}.info-dialog-card[data-v-48bbcd24]>.v-card-text{padding-left:16px!important;padding-right:16px!important}.prompt-dialog-card[data-v-aa6b77b6]>.v-card-item{padding-left:16px!important;padding-right:16px!important}.prompt-dialog-toolbar-slot[data-v-aa6b77b6]{display:contents}.confirm-dialog-card[data-v-e571516e]>.v-card-text{padding-left:16px!important;padding-right:16px!important}
+.toast-entry[data-v-59807b44]{pointer-events:all}.toast-entry[data-v-59807b44] .v-alert__prepend{align-self:center}.toast-outlet[data-v-ba5c8268]{position:fixed;z-index:9999;bottom:8px;right:8px;left:8px;display:flex;flex-direction:column;row-gap:8px;pointer-events:none}.toast-outlet--desktop[data-v-ba5c8268]{left:unset;max-width:500px;width:100%}.fade-move[data-v-ba5c8268],.fade-enter-active[data-v-ba5c8268],.fade-leave-active[data-v-ba5c8268]{transition:all .3s cubic-bezier(.4,0,.2,1)}.fade-enter-from[data-v-ba5c8268],.fade-leave-to[data-v-ba5c8268]{opacity:0;transform:translate(50%) scaleY(.5)}.fade-leave-active[data-v-ba5c8268]{position:absolute}.info-dialog-card[data-v-48bbcd24]>.v-card-text{padding-left:16px!important;padding-right:16px!important}.prompt-dialog-card[data-v-aa6b77b6]>.v-card-item{padding-left:16px!important;padding-right:16px!important}.prompt-dialog-toolbar-slot[data-v-aa6b77b6]{display:contents}.confirm-dialog-card[data-v-e571516e]>.v-card-text{padding-left:16px!important;padding-right:16px!important}

package/dist/ui-kit.d.ts

@@ -5,8 +5,10 @@ import { ComponentProvideOptions } from 'vue';
 import { ComponentPublicInstance } from 'vue';
 import { ComputedOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { FunctionPlugin } from 'vue';
 import { MaybeRefOrGetter } from 'vue';
 import { MethodOptions } from 'vue';
+import { PartialDeep } from 'type-fest';
 import { PublicProps } from 'vue';
 import { Ref } from 'vue';
 
@@ -45,6 +47,8 @@ export declare interface ConfirmDialogTextContent extends ConfirmDialogBaseProps
     translateContent?: boolean;
 }
 
+export declare function createUIKit(options?: PartialDeep<PluginOptions>): FunctionPlugin<void>;
+
 export declare interface DialogComposable {
     info(title: string, content: string): Promise<null>;
     info<T = void, C extends Component = Component>(options: InfoDialogProps<T, C>): Promise<T extends void ? null : (T | null)>;
@@ -95,8 +99,33 @@ export declare interface LoadingComposable<A extends LoadingAction> {
     action(...args: Parameters<A>): Promise<Awaited<ReturnType<A>>>;
 }
 
-export declare interface LoadingOptions {
-    overlay: MaybeRefOrGetter<boolean>;
+declare interface PluginDialogOptions {
+    confirm: {
+        confirmCta: ConfirmDialogCta;
+        rejectCta: ConfirmDialogCta;
+    };
+    info: {
+        defaultCta: InfoDialogCta<null>;
+    };
+    prompt: {
+        abortCta: PromptDialogCta;
+        saveCta: PromptDialogCta;
+    };
+}
+
+declare interface PluginLoadingOptions {
+    delay: number | false;
+    overlay: boolean;
+}
+
+declare interface PluginOptions {
+    loading: PluginLoadingOptions;
+    dialog: PluginDialogOptions;
+    toast: PluginToastOptions;
+}
+
+declare interface PluginToastOptions {
+    timeout: number;
 }
 
 export declare type PromptDialogComponent<T> = ComponentPublicInstance<PromptDialogComponentProps<T>, any, any, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin, PromptDialogComponentEmits<T>>;
@@ -131,17 +160,22 @@ export declare enum PromptDialogSize {
 }
 
 export declare interface ToastComposable {
-    info(message: string): Promise<void>;
-    warn(message: string): Promise<void>;
-    error(message: string): Promise<void>;
-    success(message: string): Promise<void>;
+    info(message: string, options?: Partial<ToastOptions>): Promise<void>;
+    warn(message: string, options?: Partial<ToastOptions>): Promise<void>;
+    error(message: string, options?: Partial<ToastOptions>): Promise<void>;
+    success(message: string, options?: Partial<ToastOptions>): Promise<void>;
+}
+
+export declare interface ToastOptions {
+    timeout: number;
+    translateMessage: boolean;
 }
 
 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 useLoading<A extends LoadingAction>(actionCallback: A, options?: Partial<PluginLoadingOptions>): LoadingComposable<A>;
 
 export declare function useLoadingOverlay(): Ref<boolean>;
 

package/dist/ui-kit.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schwarzdavid/ui-kit",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.5",
   "type": "module",
   "scripts": {
     "preview": "vite preview",
@@ -42,16 +42,16 @@
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@laynezh/vite-plugin-lib-assets": "^0.5.24",
     "@mdi/font": "^7.4.47",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
-    "@storybook/addon-links": "^8.4.5",
-    "@storybook/addon-onboarding": "^8.4.5",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/manager-api": "^8.4.5",
-    "@storybook/test": "^8.4.5",
-    "@storybook/theming": "^8.4.5",
-    "@storybook/vue3": "^8.4.5",
-    "@storybook/vue3-vite": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.6",
+    "@storybook/addon-interactions": "^8.4.6",
+    "@storybook/addon-links": "^8.4.6",
+    "@storybook/addon-onboarding": "^8.4.6",
+    "@storybook/blocks": "^8.4.6",
+    "@storybook/manager-api": "^8.4.6",
+    "@storybook/test": "^8.4.6",
+    "@storybook/theming": "^8.4.6",
+    "@storybook/vue3": "^8.4.6",
+    "@storybook/vue3-vite": "^8.4.6",
     "@stylistic/eslint-plugin": "^2.10.1",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
@@ -68,7 +68,8 @@
     "jsdom": "^25.0.1",
     "pinia": "^2.2.6",
     "sass": "^1.80.6",
-    "storybook": "^8.4.5",
+    "storybook": "^8.4.6",
+    "type-fest": "^4.29.0",
     "typescript": "~5.6.3",
     "typescript-eslint": "^8.13.0",
     "vite": "^5.4.10",