diff --git a/.gitignore b/.gitignore index a547bf3..251ce6d 100644 --- a/.gitignore +++ b/.gitignore @@ -8,7 +8,6 @@ pnpm-debug.log* lerna-debug.log* node_modules -dist dist-ssr *.local diff --git a/dist/Notifier.d.ts b/dist/Notifier.d.ts new file mode 100644 index 0000000..e2be52c --- /dev/null +++ b/dist/Notifier.d.ts @@ -0,0 +1,5 @@ +import { App, InjectionKey } from 'vue'; +import { Notifier, NotifierOptions } from './types'; +export declare const NotifierSymbol: InjectionKey; +export declare function createNotifier(app: App, globalOptions?: NotifierOptions): Notifier; +export declare function useNotifier(): Notifier; diff --git a/dist/components/NotifierComponent.vue.d.ts b/dist/components/NotifierComponent.vue.d.ts new file mode 100644 index 0000000..68bf763 --- /dev/null +++ b/dist/components/NotifierComponent.vue.d.ts @@ -0,0 +1,50 @@ +import { NotifierComponentOptions } from "../types"; +import { PropType } from "vue"; +declare const _sfc_main: import("vue").DefineComponent<{ + content: { + type: (StringConstructor | ObjectConstructor)[]; + required: true; + default: string; + }; + options: { + type: PropType; + required: true; + }; + status: { + type: PropType<"default" | "success" | "error" | "warning" | "info">; + required: true; + }; + onSubmit: { + type: FunctionConstructor; + required: true; + }; + onCancel: { + type: FunctionConstructor; + required: true; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly; + required: true; + }; + status: { + type: PropType<"default" | "success" | "error" | "warning" | "info">; + required: true; + }; + onSubmit: { + type: FunctionConstructor; + required: true; + }; + onCancel: { + type: FunctionConstructor; + required: true; + }; +}>>, { + content: string | Record; +}>; +export default _sfc_main; diff --git a/dist/components/NotifierDialog.vue.d.ts b/dist/components/NotifierDialog.vue.d.ts new file mode 100644 index 0000000..63af6dd --- /dev/null +++ b/dist/components/NotifierDialog.vue.d.ts @@ -0,0 +1,50 @@ +import { NotifierDialogOptions } from "../types"; +import { PropType } from "vue"; +declare const _sfc_main: import("vue").DefineComponent<{ + content: { + type: (StringConstructor | ObjectConstructor)[]; + required: true; + default: string; + }; + options: { + type: PropType; + required: true; + }; + status: { + type: PropType<"default" | "success" | "error" | "warning" | "info">; + required: true; + }; + onSubmit: { + type: FunctionConstructor; + required: true; + }; + onCancel: { + type: FunctionConstructor; + required: true; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly; + required: true; + }; + status: { + type: PropType<"default" | "success" | "error" | "warning" | "info">; + required: true; + }; + onSubmit: { + type: FunctionConstructor; + required: true; + }; + onCancel: { + type: FunctionConstructor; + required: true; + }; +}>>, { + content: string | Record; +}>; +export default _sfc_main; diff --git a/dist/components/NotifierToast.vue.d.ts b/dist/components/NotifierToast.vue.d.ts new file mode 100644 index 0000000..18ab814 --- /dev/null +++ b/dist/components/NotifierToast.vue.d.ts @@ -0,0 +1,50 @@ +import { PropType } from "vue"; +import { NotifierToastOptions } from "../types"; +declare const _sfc_main: import("vue").DefineComponent<{ + content: { + type: (StringConstructor | ObjectConstructor)[]; + required: true; + default: string; + }; + options: { + type: PropType; + required: true; + }; + status: { + type: PropType<"default" | "success" | "error" | "warning" | "info">; + required: true; + }; + onSubmit: { + type: FunctionConstructor; + required: true; + }; + onCancel: { + type: FunctionConstructor; + required: true; + }; +}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly; + required: true; + }; + status: { + type: PropType<"default" | "success" | "error" | "warning" | "info">; + required: true; + }; + onSubmit: { + type: FunctionConstructor; + required: true; + }; + onCancel: { + type: FunctionConstructor; + required: true; + }; +}>>, { + content: string | Record; +}>; +export default _sfc_main; diff --git a/dist/index.d.ts b/dist/index.d.ts new file mode 100644 index 0000000..b7546ae --- /dev/null +++ b/dist/index.d.ts @@ -0,0 +1,7 @@ +import { App } from 'vue'; +import { NotifierSymbol, createNotifier, useNotifier } from './Notifier'; +declare const _default: { + install: (app: App, options?: any) => void; +}; +export default _default; +export { createNotifier, useNotifier, NotifierSymbol }; diff --git a/dist/nuxt/composables.js b/dist/nuxt/composables.js new file mode 100644 index 0000000..e4360d7 --- /dev/null +++ b/dist/nuxt/composables.js @@ -0,0 +1,4 @@ +// @ts-ignore +import { useNotifier } from "../vuetify-notifier"; + +export { useNotifier }; diff --git a/dist/nuxt/index.js b/dist/nuxt/index.js new file mode 100644 index 0000000..f426d32 --- /dev/null +++ b/dist/nuxt/index.js @@ -0,0 +1,40 @@ +import { addImports, addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit' + +export default defineNuxtModule({ + meta: { + // Usually the npm package name of your module + name: 'vuetify-notifier', + // The key in `nuxt.config` that holds your module options + configKey: 'notifier', + // Compatibility constraints + compatibility: { + // Semver version of supported nuxt versions + nuxt: '^3.0.0' + } + }, + // Default configuration options for your module, can also be a function returning those + defaults: {}, + // Shorthand sugar to register Nuxt hooks + hooks: {}, + // The function holding your module logic, it can be asynchronous + setup(moduleOptions, nuxt) { + const { resolve } = createResolver(import.meta.url) + + addImports({ + name: 'useNotifier', // name of the composable to be used + as: 'useNotifier', + from: resolve('./composables') // path of composable + }) + + addPlugin(resolve('./plugin')) + } +}) + + +// @ts-ignore +// export default defineNuxtPlugin((nuxtApp: any) => { +// nuxtApp.vueApp.use(VuetifyNotifier) +// return { +// provide: { notifier: createNotifier(nuxtApp.vueApp) }, +// }; +// }); diff --git a/dist/nuxt/plugin.js b/dist/nuxt/plugin.js new file mode 100644 index 0000000..a95c934 --- /dev/null +++ b/dist/nuxt/plugin.js @@ -0,0 +1,13 @@ +// @ts-ignore: resolved with Nuxt +import { defineNuxtPlugin } from '#app'; + +// @ts-ignore: +import VuetifyNotifier, { createNotifier } from "../vuetify-notifier"; + +// @ts-ignore +export default defineNuxtPlugin((nuxtApp) => { + nuxtApp.vueApp.use(VuetifyNotifier) + return { + provide: { notifier: createNotifier(nuxtApp.vueApp) }, + }; +}); diff --git a/dist/types/index.d.ts b/dist/types/index.d.ts new file mode 100644 index 0000000..1b85178 --- /dev/null +++ b/dist/types/index.d.ts @@ -0,0 +1,141 @@ +import { App, Component } from "vue"; +import plugin from "../index"; +export default plugin; +export * from "../index"; +declare module 'vuetify-notifier'; +declare module "vue" { + interface ComponentCustomProperties { + $notifier: Notifier; + } +} +declare module '#app' { + interface NuxtApp { + $notifier: Notifier; + } +} +export interface NotifierOptions { + default?: NotifierDefaultOptions; + dialogOptions?: NotifierDialogOptions; + toastOptions?: NotifierToastOptions; + componentOptions?: NotifierComponentOptions; +} +export interface NotifierDefaultOptions { + defaultColor?: string; + defaultIcon?: string; + successIcon?: string; + infoIcon?: string; + warningIcon?: string; + errorIcon?: string; +} +export interface NotifierMountComponent { + component: Component; + app: App; + content: string | Component | NotifierContent; + status: string; + options: NotifierDialogOptions | NotifierToastOptions | NotifierComponentOptions; +} +export interface NotifierDialogOptions { + transition?: string; + width?: number | string; + minWidth?: number | string; + minHeight?: number | string; + textAlign?: "start" | "center" | "end"; + duration?: number; + defaultColor?: string; + defaultIcon?: string; + successIcon?: string; + infoIcon?: string; + warningIcon?: string; + errorIcon?: string; + showDivider?: boolean; + primaryButtonText?: string; + secondaryButtonText?: string; + dialogProps?: Record; + cardProps?: Record; + buttonProps?: Record; + primaryButtonProps?: Record; + secondaryButtonProps?: Record; + handleCancel?: 'resolve' | 'reject' | 'silent'; + inputProps?: Record; + prompt?: boolean; + alert?: boolean; +} +export interface NotifierToastOptions { + defaultColor?: string; + defaultIcon?: string; + successIcon?: string; + infoIcon?: string; + warningIcon?: string; + errorIcon?: string; + toastProps?: Record; +} +export interface NotifierComponentOptions { + transition?: string; + width?: number | string; + height?: number | string; + dialogProps?: Record; + componentProps?: Record; + existsButton?: boolean; +} +export interface Notifier { + confirm(content: string | NotifierContent, status?: string, options?: NotifierDialogOptions): Promise | { + success: Promise; + }; + confirmSuccess(content: string | NotifierContent, options?: NotifierDialogOptions): Promise | { + success: Promise; + }; + confirmInfo(content: string | NotifierContent, options?: NotifierDialogOptions): Promise | { + success: Promise; + }; + confirmWarning(content: string | NotifierContent, options?: NotifierDialogOptions): Promise | { + success: Promise; + }; + confirmError(content: string | NotifierContent, options?: NotifierDialogOptions): Promise | { + success: Promise; + }; + toast(content: string | NotifierContent, status?: string, options?: NotifierToastOptions): void; + toastSuccess(content: string | NotifierContent, options?: NotifierToastOptions): Promise | { + success: Promise; + }; + toastInfo(content: string | NotifierContent, options?: NotifierToastOptions): Promise | { + success: Promise; + }; + toastWarning(content: string | NotifierContent, options?: NotifierToastOptions): Promise | { + success: Promise; + }; + toastError(content: string | NotifierContent, options?: NotifierToastOptions): Promise | { + success: Promise; + }; + alert(content: string | NotifierContent, status?: string, options?: NotifierDialogOptions): Promise | { + success: Promise; + }; + alertSuccess(content: string | NotifierContent, options?: NotifierDialogOptions): Promise | { + success: Promise; + }; + alertInfo(content: string | NotifierContent, options?: NotifierDialogOptions): Promise | { + success: Promise; + }; + alertWarning(content: string | NotifierContent, options?: NotifierDialogOptions): Promise | { + success: Promise; + }; + alertError(content: string | NotifierContent, options?: NotifierDialogOptions): Promise | { + success: Promise; + }; + prompt(content: string | NotifierContent, status?: string, options?: NotifierDialogOptions): Promise | { + success: Promise; + }; + component(content: string | NotifierContent | Component, options?: NotifierComponentOptions): void; +} +export interface NotifierContent { + title?: string; + text?: string; +} +export interface NotifierComponent { + title?: string; + component?: string; +} +export type ConfirmResult = boolean | string | object | any; +export interface NuxtNotifierConfig { + dialog?: NotifierDialogOptions; + toast?: NotifierToastOptions; +} diff --git a/dist/utils/index.d.ts b/dist/utils/index.d.ts new file mode 100644 index 0000000..55962c0 --- /dev/null +++ b/dist/utils/index.d.ts @@ -0,0 +1,4 @@ +import { NotifierMountComponent, ConfirmResult } from '../types'; +export declare const getVAppRoot: () => HTMLElement; +export declare const createContainer: () => HTMLDivElement; +export declare const mountComponent: ({ component, app, content, status, options }: NotifierMountComponent) => Promise; diff --git a/dist/utils/options.d.ts b/dist/utils/options.d.ts new file mode 100644 index 0000000..529a384 --- /dev/null +++ b/dist/utils/options.d.ts @@ -0,0 +1,2 @@ +import { NotifierOptions } from "../types"; +export declare const defaultOptions: NotifierOptions; diff --git a/dist/vuetify-notifier.js b/dist/vuetify-notifier.js new file mode 100644 index 0000000..78c6245 --- /dev/null +++ b/dist/vuetify-notifier.js @@ -0,0 +1,479 @@ +import { defineComponent as U, ref as N, computed as _, resolveComponent as c, openBlock as v, createElementBlock as g, createVNode as s, withCtx as u, mergeProps as w, withModifiers as L, unref as C, createBlock as S, createCommentVNode as k, createTextVNode as T, toDisplayString as I, createElementVNode as Q, resolveDynamicComponent as K, Fragment as X, createApp as Y, getCurrentInstance as Z, inject as O } from "vue"; +const b = { + default: { + defaultColor: "", + defaultIcon: "mdi-alert-circle", + successIcon: "mdi-check-circle", + infoIcon: "mdi-information", + warningIcon: "mdi-alert", + errorIcon: "mdi-alert-circle" + }, + dialogOptions: { + transition: "dialog-bottom-transition", + width: 500, + minWidth: 300, + minHeight: 250, + textAlign: "center", + primaryButtonText: "OK", + secondaryButtonText: "Cancel", + showDivider: !0, + buttonProps: { + width: "100" + }, + handleCancel: "silent", + inputProps: { + label: "Input" + } + }, + toastOptions: { + toastProps: { + transition: "v-scroll-x-transition", + location: "top right" + } + }, + componentOptions: { + existsButton: !0 + } +}, tt = { class: "vuetify-notifier" }, et = /* @__PURE__ */ U({ + __name: "NotifierDialog", + props: { + content: { + type: [String, Object], + required: !0, + default: "Are you sure?" + }, + options: { + type: Object, + required: !0 + }, + status: { + type: String, + required: !0 + }, + onSubmit: { + type: Function, + required: !0 + }, + onCancel: { + type: Function, + required: !0 + } + }, + setup(e) { + const t = e, r = N(!0), d = N(""), f = _(() => { + var i; + return typeof t.content == "object" ? (i = t.content) == null ? void 0 : i.title : void 0; + }), p = _(() => { + var i; + return typeof t.content == "object" ? (i = t.content) == null ? void 0 : i.text : t.content; + }), a = async (i) => { + const { valid: l } = await i; + l && (r.value = !1, t.options.prompt ? t.onSubmit(d.value) : t.onSubmit(!0)); + }, m = () => { + r.value = !1, t.onCancel(); + }; + return (i, l) => { + const y = c("VIcon"), x = c("VToolbar"), P = c("v-col"), h = c("VTextField"), F = c("v-row"), A = c("VCardText"), j = c("VDivider"), B = c("VSpacer"), D = c("VBtn"), n = c("VCardActions"), o = c("VCard"), V = c("VForm"), q = c("VDialog"), G = c("VDefaultsProvider"); + return v(), g("div", tt, [ + s(G, null, { + default: u(() => { + var $, H; + return [ + s(q, w({ + modelValue: r.value, + "onUpdate:modelValue": l[1] || (l[1] = (E) => r.value = E), + persistent: "", + transition: ($ = e.options) == null ? void 0 : $.transition, + width: (H = e.options) == null ? void 0 : H.width, + scrollable: "" + }, e.options.dialogProps), { + default: u(() => [ + s(V, { + "validate-on": "submit", + onSubmit: L(a, ["prevent"]) + }, { + default: u(() => { + var E, z; + return [ + s(o, w(e.options.cardProps, { + "min-width": (E = e.options) == null ? void 0 : E.minWidth, + "min-height": (z = e.options) == null ? void 0 : z.minHeight + }), { + default: u(() => [ + C(f) ? (v(), S(x, { + key: 0, + title: C(f), + density: "compact", + color: e.status === "default" ? e.options.defaultColor : e.status + }, { + default: u(() => [ + s(y, { + icon: e.options[`${e.status}Icon`], + class: "mr-2" + }, null, 8, ["icon"]) + ]), + _: 1 + }, 8, ["title", "color"])) : k("", !0), + s(A, null, { + default: u(() => [ + s(F, { + align: "center", + justify: e.options.textAlign, + class: "h-100" + }, { + default: u(() => [ + s(P, { + cols: "12", + class: "text-center" + }, { + default: u(() => [ + T(I(C(p)), 1) + ]), + _: 1 + }), + e.options.prompt ? (v(), S(P, { + key: 0, + cols: "12" + }, { + default: u(() => [ + s(h, w({ + modelValue: d.value, + "onUpdate:modelValue": l[0] || (l[0] = (J) => d.value = J) + }, e.options.inputProps), null, 16, ["modelValue"]) + ]), + _: 1 + })) : k("", !0) + ]), + _: 1 + }, 8, ["justify"]) + ]), + _: 1 + }), + e.options.showDivider ? (v(), S(j, { key: 1 })) : k("", !0), + s(n, null, { + default: u(() => [ + s(B), + s(D, w(e.options.secondaryButtonProps || e.options.buttonProps, { onClick: m }), { + default: u(() => [ + T(I(e.options.secondaryButtonText), 1) + ]), + _: 1 + }, 16), + s(D, w({ variant: "tonal" }, e.options.primaryButtonProps || e.options.buttonProps, { + color: "primary", + type: "submit" + }), { + default: u(() => [ + T(I(e.options.primaryButtonText), 1) + ]), + _: 1 + }, 16) + ]), + _: 1 + }) + ]), + _: 1 + }, 16, ["min-width", "min-height"]) + ]; + }), + _: 1 + }, 8, ["onSubmit"]) + ]), + _: 1 + }, 16, ["modelValue", "transition", "width"]) + ]; + }), + _: 1 + }) + ]); + }; + } +}), nt = { class: "vuetify-notifier-toast" }, ot = { + key: 0, + class: "font-weight-bold mb-2" +}, rt = /* @__PURE__ */ U({ + __name: "NotifierToast", + props: { + content: { + type: [String, Object], + required: !0, + default: "Are you sure?" + }, + options: { + type: Object, + required: !0 + }, + status: { + type: String, + required: !0 + }, + onSubmit: { + type: Function, + required: !0 + }, + onCancel: { + type: Function, + required: !0 + } + }, + setup(e) { + const t = e, r = N(!0), d = _(() => { + var a; + return typeof t.content == "object" ? (a = t.content) == null ? void 0 : a.title : void 0; + }), f = _(() => { + var a; + return typeof t.content == "object" ? (a = t.content) == null ? void 0 : a.text : t.content; + }), p = () => { + r.value = !1, t.onCancel(); + }; + return (a, m) => { + const i = c("VBtn"), l = c("VSnackbar"), y = c("VDefaultsProvider"); + return v(), g("div", nt, [ + s(y, null, { + default: u(() => [ + s(l, w({ + modelValue: r.value, + "onUpdate:modelValue": [ + m[0] || (m[0] = (x) => r.value = x), + p + ], + color: e.status === "default" ? e.options.defaultColor : e.status + }, e.options.toastProps), { + actions: u(() => [ + s(i, { + icon: "mdi-close-circle", + size: "small", + onClick: p + }) + ]), + default: u(() => [ + C(d) ? (v(), g("div", ot, I(C(d)), 1)) : k("", !0), + Q("p", null, I(C(f)), 1) + ]), + _: 1 + }, 16, ["modelValue", "color"]) + ]), + _: 1 + }) + ]); + }; + } +}), it = { class: "vuetify-notifier" }, ct = /* @__PURE__ */ U({ + __name: "NotifierComponent", + props: { + content: { + type: [String, Object], + required: !0, + default: "Are you sure?" + }, + options: { + type: Object, + required: !0 + }, + status: { + type: String, + required: !0 + }, + onSubmit: { + type: Function, + required: !0 + }, + onCancel: { + type: Function, + required: !0 + } + }, + setup(e) { + const t = e, r = N(!0); + N(""); + const d = _(() => { + var i; + return typeof t.content == "object" ? (i = t.content) == null ? void 0 : i.title : void 0; + }), f = _(() => { + var i; + return typeof t.content == "object" ? (i = t.content) == null ? void 0 : i.component : t.content; + }), p = _(() => ({ + ...t.options.componentProps, + onSubmit: a, + onCancel: m + })), a = async (i) => { + r.value = !1, t.onSubmit(i); + }, m = (i) => { + r.value = !1, t.onCancel(i); + }; + return (i, l) => { + const y = c("v-icon"), x = c("v-btn"), P = c("VToolbar"), h = c("VCard"), F = c("VDialog"), A = c("VDefaultsProvider"); + return v(), g("div", it, [ + s(A, null, { + default: u(() => { + var j, B; + return [ + s(F, w({ + modelValue: r.value, + "onUpdate:modelValue": l[0] || (l[0] = (D) => r.value = D), + persistent: "", + transition: (j = e.options) == null ? void 0 : j.transition, + width: (B = e.options) == null ? void 0 : B.width, + scrollable: "" + }, e.options.dialogProps), { + default: u(() => [ + C(d) ? (v(), S(h, { key: 0 }, { + default: u(() => [ + s(P, { title: C(d) }, { + default: u(() => [ + e.options.existsButton ? (v(), S(x, { + key: 0, + icon: "", + onClick: m, + variant: "text" + }, { + default: u(() => [ + s(y, null, { + default: u(() => [ + T("mdi-close") + ]), + _: 1 + }) + ]), + _: 1 + })) : k("", !0) + ]), + _: 1 + }, 8, ["title"]), + (v(), S(K(C(f)), w(C(p), { + onOnSubmit: a, + onOnCancel: m + }), null, 16)) + ]), + _: 1 + })) : (v(), g(X, { key: 1 }, [ + (v(), S(K(e.content), w(C(p), { + onOnSubmit: a, + onOnCancel: m + }), null, 16)), + e.options.existsButton ? (v(), S(x, { + key: 0, + position: "fixed", + location: "top right", + icon: "", + onClick: m, + variant: "text" + }, { + default: u(() => [ + s(y, null, { + default: u(() => [ + T("mdi-close") + ]), + _: 1 + }) + ]), + _: 1 + })) : k("", !0) + ], 64)) + ]), + _: 1 + }, 16, ["modelValue", "transition", "width"]) + ]; + }), + _: 1 + }) + ]); + }; + } +}), ut = () => document.querySelector("[data-v-app]"), st = () => document.createElement("div"), W = ({ component: e, app: t, content: r, status: d = "default", options: f }) => { + const p = ut(), a = st(); + return new Promise((m, i) => { + const l = Y(e, { + content: r, + status: d, + options: f, + onSubmit: (y) => { + m(y), M(l, p, a); + }, + onCancel: (y) => { + switch (f == null ? void 0 : f.handleCancel) { + case "resolve": + m(y); + break; + case "reject": + i(y); + break; + } + M(l, p, a); + } + }); + Object.assign(l._context, t._context), p.appendChild(a), l.mount(a); + }); +}, M = (e, t, r) => { + setTimeout(() => { + e.unmount(), t.removeChild(r); + }, 500); +}, R = Symbol.for("vuetify:notifier"); +function at(e, t = {}) { + const r = (n, o = "default", V) => { + const q = { ...b.default, ...b.dialogOptions, ...t == null ? void 0 : t.default, ...t == null ? void 0 : t.dialogOptions, ...V }; + return W({ + component: et, + app: e, + content: n, + status: o, + options: q + }); + }, d = (n, o = "default", V = {}) => { + const q = { ...b.default, ...b.toastOptions, ...t == null ? void 0 : t.default, ...t == null ? void 0 : t.toastOptions, ...V }; + return W({ + component: rt, + app: e, + content: n, + status: o, + options: q + }); + }, f = (n, o = {}) => { + const V = { ...b.default, ...b.componentOptions, ...t == null ? void 0 : t.default, ...t == null ? void 0 : t.componentOptions, ...o }; + return W({ + component: ct, + app: e, + content: n, + status: "default", + options: V + }); + }, p = (n, o = {}) => r(n, "success", o), a = (n, o = {}) => r(n, "info", o), m = (n, o = {}) => r(n, "warning", o), i = (n, o = {}) => r(n, "error", o), l = (n, o = {}) => d(n, "success", o), y = (n, o = {}) => d(n, "info", o), x = (n, o = {}) => d(n, "warning", o), P = (n, o = {}) => d(n, "error", o), h = (n, o = "default", V = {}) => r(n, o, { ...V, secondaryButtonProps: { style: "display:none" } }); + return { + confirm: r, + confirmSuccess: p, + confirmInfo: a, + confirmWarning: m, + confirmError: i, + toast: d, + toastSuccess: l, + toastInfo: y, + toastWarning: x, + toastError: P, + alert: h, + alertSuccess: (n, o = {}) => h(n, "success", o), + alertInfo: (n, o = {}) => h(n, "info", o), + alertWarning: (n, o = {}) => h(n, "warning", o), + alertError: (n, o = {}) => h(n, "error", o), + prompt: (n, o = "default", V = {}) => r(n, o, { ...V, prompt: !0 }), + component: f + }; +} +function dt() { + if (!Z()) + throw new Error("[Vuetify Notifier] useNotifier() must be called from inside a setup function"); + const t = O(R); + if (!t) + throw new Error("[Vuetify Notifier] Could not find Notifier injection"); + return t; +} +const mt = { + install: (e, t) => { + e.provide(R, at(e, t)); + } +}; +export { + R as NotifierSymbol, + at as createNotifier, + mt as default, + dt as useNotifier +}; diff --git a/dist/vuetify-notifier.umd.cjs b/dist/vuetify-notifier.umd.cjs new file mode 100644 index 0000000..b3c3956 --- /dev/null +++ b/dist/vuetify-notifier.umd.cjs @@ -0,0 +1 @@ +(function(C,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(C=typeof globalThis<"u"?globalThis:C||self,t(C.VuetifyNotifier={},C.Vue))})(this,function(C,t){"use strict";const h={default:{defaultColor:"",defaultIcon:"mdi-alert-circle",successIcon:"mdi-check-circle",infoIcon:"mdi-information",warningIcon:"mdi-alert",errorIcon:"mdi-alert-circle"},dialogOptions:{transition:"dialog-bottom-transition",width:500,minWidth:300,minHeight:250,textAlign:"center",primaryButtonText:"OK",secondaryButtonText:"Cancel",showDivider:!0,buttonProps:{width:"100"},handleCancel:"silent",inputProps:{label:"Input"}},toastOptions:{toastProps:{transition:"v-scroll-x-transition",location:"top right"}},componentOptions:{existsButton:!0}},I={class:"vuetify-notifier"},F=t.defineComponent({__name:"NotifierDialog",props:{content:{type:[String,Object],required:!0,default:"Are you sure?"},options:{type:Object,required:!0},status:{type:String,required:!0},onSubmit:{type:Function,required:!0},onCancel:{type:Function,required:!0}},setup(o){const e=o,c=t.ref(!0),l=t.ref(""),m=t.computed(()=>{var i;return typeof e.content=="object"?(i=e.content)==null?void 0:i.title:void 0}),f=t.computed(()=>{var i;return typeof e.content=="object"?(i=e.content)==null?void 0:i.text:e.content}),s=async i=>{const{valid:a}=await i;a&&(c.value=!1,e.options.prompt?e.onSubmit(l.value):e.onSubmit(!0))},d=()=>{c.value=!1,e.onCancel()};return(i,a)=>{const p=t.resolveComponent("VIcon"),y=t.resolveComponent("VToolbar"),x=t.resolveComponent("v-col"),V=t.resolveComponent("VTextField"),S=t.resolveComponent("v-row"),P=t.resolveComponent("VCardText"),w=t.resolveComponent("VDivider"),N=t.resolveComponent("VSpacer"),k=t.resolveComponent("VBtn"),n=t.resolveComponent("VCardActions"),r=t.resolveComponent("VCard"),u=t.resolveComponent("VForm"),B=t.resolveComponent("VDialog"),G=t.resolveComponent("VDefaultsProvider");return t.openBlock(),t.createElementBlock("div",I,[t.createVNode(G,null,{default:t.withCtx(()=>{var j,q;return[t.createVNode(B,t.mergeProps({modelValue:c.value,"onUpdate:modelValue":a[1]||(a[1]=_=>c.value=_),persistent:"",transition:(j=o.options)==null?void 0:j.transition,width:(q=o.options)==null?void 0:q.width,scrollable:""},o.options.dialogProps),{default:t.withCtx(()=>[t.createVNode(u,{"validate-on":"submit",onSubmit:t.withModifiers(s,["prevent"])},{default:t.withCtx(()=>{var _,E;return[t.createVNode(r,t.mergeProps(o.options.cardProps,{"min-width":(_=o.options)==null?void 0:_.minWidth,"min-height":(E=o.options)==null?void 0:E.minHeight}),{default:t.withCtx(()=>[t.unref(m)?(t.openBlock(),t.createBlock(y,{key:0,title:t.unref(m),density:"compact",color:o.status==="default"?o.options.defaultColor:o.status},{default:t.withCtx(()=>[t.createVNode(p,{icon:o.options[`${o.status}Icon`],class:"mr-2"},null,8,["icon"])]),_:1},8,["title","color"])):t.createCommentVNode("",!0),t.createVNode(P,null,{default:t.withCtx(()=>[t.createVNode(S,{align:"center",justify:o.options.textAlign,class:"h-100"},{default:t.withCtx(()=>[t.createVNode(x,{cols:"12",class:"text-center"},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(t.unref(f)),1)]),_:1}),o.options.prompt?(t.openBlock(),t.createBlock(x,{key:0,cols:"12"},{default:t.withCtx(()=>[t.createVNode(V,t.mergeProps({modelValue:l.value,"onUpdate:modelValue":a[0]||(a[0]=J=>l.value=J)},o.options.inputProps),null,16,["modelValue"])]),_:1})):t.createCommentVNode("",!0)]),_:1},8,["justify"])]),_:1}),o.options.showDivider?(t.openBlock(),t.createBlock(w,{key:1})):t.createCommentVNode("",!0),t.createVNode(n,null,{default:t.withCtx(()=>[t.createVNode(N),t.createVNode(k,t.mergeProps(o.options.secondaryButtonProps||o.options.buttonProps,{onClick:d}),{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(o.options.secondaryButtonText),1)]),_:1},16),t.createVNode(k,t.mergeProps({variant:"tonal"},o.options.primaryButtonProps||o.options.buttonProps,{color:"primary",type:"submit"}),{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(o.options.primaryButtonText),1)]),_:1},16)]),_:1})]),_:1},16,["min-width","min-height"])]}),_:1},8,["onSubmit"])]),_:1},16,["modelValue","transition","width"])]}),_:1})])}}}),A={class:"vuetify-notifier-toast"},W={key:0,class:"font-weight-bold mb-2"},U=t.defineComponent({__name:"NotifierToast",props:{content:{type:[String,Object],required:!0,default:"Are you sure?"},options:{type:Object,required:!0},status:{type:String,required:!0},onSubmit:{type:Function,required:!0},onCancel:{type:Function,required:!0}},setup(o){const e=o,c=t.ref(!0),l=t.computed(()=>{var s;return typeof e.content=="object"?(s=e.content)==null?void 0:s.title:void 0}),m=t.computed(()=>{var s;return typeof e.content=="object"?(s=e.content)==null?void 0:s.text:e.content}),f=()=>{c.value=!1,e.onCancel()};return(s,d)=>{const i=t.resolveComponent("VBtn"),a=t.resolveComponent("VSnackbar"),p=t.resolveComponent("VDefaultsProvider");return t.openBlock(),t.createElementBlock("div",A,[t.createVNode(p,null,{default:t.withCtx(()=>[t.createVNode(a,t.mergeProps({modelValue:c.value,"onUpdate:modelValue":[d[0]||(d[0]=y=>c.value=y),f],color:o.status==="default"?o.options.defaultColor:o.status},o.options.toastProps),{actions:t.withCtx(()=>[t.createVNode(i,{icon:"mdi-close-circle",size:"small",onClick:f})]),default:t.withCtx(()=>[t.unref(l)?(t.openBlock(),t.createElementBlock("div",W,t.toDisplayString(t.unref(l)),1)):t.createCommentVNode("",!0),t.createElementVNode("p",null,t.toDisplayString(t.unref(m)),1)]),_:1},16,["modelValue","color"])]),_:1})])}}}),$={class:"vuetify-notifier"},M=t.defineComponent({__name:"NotifierComponent",props:{content:{type:[String,Object],required:!0,default:"Are you sure?"},options:{type:Object,required:!0},status:{type:String,required:!0},onSubmit:{type:Function,required:!0},onCancel:{type:Function,required:!0}},setup(o){const e=o,c=t.ref(!0);t.ref("");const l=t.computed(()=>{var i;return typeof e.content=="object"?(i=e.content)==null?void 0:i.title:void 0}),m=t.computed(()=>{var i;return typeof e.content=="object"?(i=e.content)==null?void 0:i.component:e.content}),f=t.computed(()=>({...e.options.componentProps,onSubmit:s,onCancel:d})),s=async i=>{c.value=!1,e.onSubmit(i)},d=i=>{c.value=!1,e.onCancel(i)};return(i,a)=>{const p=t.resolveComponent("v-icon"),y=t.resolveComponent("v-btn"),x=t.resolveComponent("VToolbar"),V=t.resolveComponent("VCard"),S=t.resolveComponent("VDialog"),P=t.resolveComponent("VDefaultsProvider");return t.openBlock(),t.createElementBlock("div",$,[t.createVNode(P,null,{default:t.withCtx(()=>{var w,N;return[t.createVNode(S,t.mergeProps({modelValue:c.value,"onUpdate:modelValue":a[0]||(a[0]=k=>c.value=k),persistent:"",transition:(w=o.options)==null?void 0:w.transition,width:(N=o.options)==null?void 0:N.width,scrollable:""},o.options.dialogProps),{default:t.withCtx(()=>[t.unref(l)?(t.openBlock(),t.createBlock(V,{key:0},{default:t.withCtx(()=>[t.createVNode(x,{title:t.unref(l)},{default:t.withCtx(()=>[o.options.existsButton?(t.openBlock(),t.createBlock(y,{key:0,icon:"",onClick:d,variant:"text"},{default:t.withCtx(()=>[t.createVNode(p,null,{default:t.withCtx(()=>[t.createTextVNode("mdi-close")]),_:1})]),_:1})):t.createCommentVNode("",!0)]),_:1},8,["title"]),(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(m)),t.mergeProps(t.unref(f),{onOnSubmit:s,onOnCancel:d}),null,16))]),_:1})):(t.openBlock(),t.createElementBlock(t.Fragment,{key:1},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.content),t.mergeProps(t.unref(f),{onOnSubmit:s,onOnCancel:d}),null,16)),o.options.existsButton?(t.openBlock(),t.createBlock(y,{key:0,position:"fixed",location:"top right",icon:"",onClick:d,variant:"text"},{default:t.withCtx(()=>[t.createVNode(p,null,{default:t.withCtx(()=>[t.createTextVNode("mdi-close")]),_:1})]),_:1})):t.createCommentVNode("",!0)],64))]),_:1},16,["modelValue","transition","width"])]}),_:1})])}}}),H=()=>document.querySelector("[data-v-app]"),z=()=>document.createElement("div"),g=({component:o,app:e,content:c,status:l="default",options:m})=>{const f=H(),s=z();return new Promise((d,i)=>{const a=t.createApp(o,{content:c,status:l,options:m,onSubmit:p=>{d(p),D(a,f,s)},onCancel:p=>{switch(m==null?void 0:m.handleCancel){case"resolve":d(p);break;case"reject":i(p);break}D(a,f,s)}});Object.assign(a._context,e._context),f.appendChild(s),a.mount(s)})},D=(o,e,c)=>{setTimeout(()=>{o.unmount(),e.removeChild(c)},500)},b=Symbol.for("vuetify:notifier");function T(o,e={}){const c=(n,r="default",u)=>{const B={...h.default,...h.dialogOptions,...e==null?void 0:e.default,...e==null?void 0:e.dialogOptions,...u};return g({component:F,app:o,content:n,status:r,options:B})},l=(n,r="default",u={})=>{const B={...h.default,...h.toastOptions,...e==null?void 0:e.default,...e==null?void 0:e.toastOptions,...u};return g({component:U,app:o,content:n,status:r,options:B})},m=(n,r={})=>{const u={...h.default,...h.componentOptions,...e==null?void 0:e.default,...e==null?void 0:e.componentOptions,...r};return g({component:M,app:o,content:n,status:"default",options:u})},f=(n,r={})=>c(n,"success",r),s=(n,r={})=>c(n,"info",r),d=(n,r={})=>c(n,"warning",r),i=(n,r={})=>c(n,"error",r),a=(n,r={})=>l(n,"success",r),p=(n,r={})=>l(n,"info",r),y=(n,r={})=>l(n,"warning",r),x=(n,r={})=>l(n,"error",r),V=(n,r="default",u={})=>c(n,r,{...u,secondaryButtonProps:{style:"display:none"}});return{confirm:c,confirmSuccess:f,confirmInfo:s,confirmWarning:d,confirmError:i,toast:l,toastSuccess:a,toastInfo:p,toastWarning:y,toastError:x,alert:V,alertSuccess:(n,r={})=>V(n,"success",r),alertInfo:(n,r={})=>V(n,"info",r),alertWarning:(n,r={})=>V(n,"warning",r),alertError:(n,r={})=>V(n,"error",r),prompt:(n,r="default",u={})=>c(n,r,{...u,prompt:!0}),component:m}}function K(){if(!t.getCurrentInstance())throw new Error("[Vuetify Notifier] useNotifier() must be called from inside a setup function");const e=t.inject(b);if(!e)throw new Error("[Vuetify Notifier] Could not find Notifier injection");return e}const R={install:(o,e)=>{o.provide(b,T(o,e))}};C.NotifierSymbol=b,C.createNotifier=T,C.default=R,C.useNotifier=K,Object.defineProperties(C,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});