wip: Improving CustomAlert functionalities...

packages/core/package.json

@@ -33,16 +33,18 @@
     "dist",
     "src"
   ],
-  "main": "./dist/vuert.umd.cjs",
-  "module": "./dist/vuert.js",
+  "main": "dist/vuert.umd.cjs",
+  "module": "dist/vuert.cjs.js",
+  "unpkg": "dist/vuert.global.js",
+  "jsdelivr": "dist/vuert.global.js",
   "exports": {
     ".": {
-      "import": "./dist/vuert.js",
-      "require": "./dist/vuert.umd.cjs",
+      "import": "./dist/vuert.esm.js",
+      "require": "./dist/vuert.cjs.js",
       "types": "./src/index.ts"
     }
   },
-  "types": "./src/index.ts",
+  "types": "src/index.ts",
   "scripts": {
     "build": "vite build",
     "build:types": "vue-tsc --build --emitDeclarationOnly --force",

packages/core/src/components/AlertHandler.vue

@@ -2,6 +2,7 @@
     <Component :is="is">
         <slot v-if="context"
               :alert="context.alert"
+              :custom-component="context.component"
               :is-open="context.isOpen.value"
               :resolve="context.resolve"
               :reject="context.reject"></slot>

packages/core/src/index.ts

@@ -7,7 +7,10 @@ export { Action, Alert, Context } from "./models/index.js";
 
 export type { VuertOptions, VuertSubscriber } from "./vuert.js";
 
-export type { IAction, ActionCallback, ActionOptions } from "./types/action.js";
+export type { IAction, ActionCallback, ActionOptions } from "./types/action/index.js";
+export type { CallbackAction } from "./types/action/callback.js";
+export type { ValueAction } from "./types/action/value.js";
+
 export type { IAlert, AlertOptions } from "./types/alert/index.js";
 export type { SimpleAlert, BlockingAlert, DismissibleAlert } from "./types/alert/simple.js";
 export type { CustomAlert, BlockingCustomAlert, DismissibleCustomAlert } from "./types/alert/custom.js";

packages/core/src/models/action.ts

@@ -1,4 +1,4 @@
-import type { IAction, ActionCallback, ActionOptions } from "../types/action.js";
+import type { IAction, ActionCallback, ActionOptions } from "../types/action/index.js";
 
 export default class Action<R = void> implements IAction<R>
 {
@@ -18,6 +18,6 @@ export default class Action<R = void> implements IAction<R>
         this.icon = options.icon;
         this.label = options.label;
 
-        this.callback = options.callback ?? (() => undefined);
+        this.callback = options.callback ?? (() => options.value);
     }
 }

packages/core/src/models/alert.ts

@@ -1,13 +1,10 @@
-import type { Component } from "vue";
-
 import { ValueException } from "@byloth/exceptions";
 
-import type { Props } from "../types/core.js";
 import type { IAlert, AlertOptions } from "../types/alert/index.js";
 
 import Action from "./action.js";
 
-export default class Alert<R = void> implements IAlert<R>
+export default class Alert<R = void, P extends Record<string, unknown> = never> implements IAlert<R, P>
 {
     public readonly id: symbol;
 
@@ -18,16 +15,14 @@ export default class Alert<R = void> implements IAlert<R>
     public readonly title?: string;
 
     public readonly message?: string;
-
-    public readonly component?: Component;
-    public readonly props?: Props;
+    public readonly payload?: P;
 
     public readonly actions: Action<R>[];
-    public readonly dismissible: boolean;
 
+    public readonly dismissible: boolean;
     public readonly timeout: number;
 
-    public constructor(options: AlertOptions<R>, cause?: unknown)
+    public constructor(options: AlertOptions<R, P>)
     {
         this.id = options.id ?? Symbol();
 
@@ -44,9 +39,7 @@ export default class Alert<R = void> implements IAlert<R>
         }
 
         this.message = options.message;
-
-        this.component = options.component;
-        this.props = options.props;
+        this.payload = options.payload;
 
         this.actions = options.actions?.map((a) => new Action(a)) ?? [];
 

packages/core/src/models/context.ts

@@ -1,19 +1,19 @@
 import { computed, ref } from "vue";
-import type { ComputedRef, Ref } from "vue";
+import type { Component, ComputedRef, Ref } from "vue";
 
 import { delay, DeferredPromise, Subscribers } from "@byloth/core";
 import type { MaybePromise, Timeout } from "@byloth/core";
 
 import type { Duration } from "../types/index.js";
-import type { ActionCallback } from "../types/action.js";
+import type { ActionCallback } from "../types/action/index.js";
 import type { AlertOptions } from "../types/alert/index.js";
 
 import Action from "./action.js";
 import Alert from "./alert.js";
 
 export type ContextResult<R> = Action<R> | ActionCallback<R | undefined> | MaybePromise<R | undefined>;
 
-export default class Context<T = void> extends DeferredPromise<T>
+export default class Context<T = void, P extends Record<string, unknown> = never> extends DeferredPromise<T>
 {
     protected _duration: Duration;
     protected _timeoutId?: Timeout;
@@ -25,10 +25,11 @@ export default class Context<T = void> extends DeferredPromise<T>
 
     protected readonly _isOpen: Ref<boolean>;
 
-    public readonly alert: Alert<T>;
+    public readonly alert: Alert<T, P>;
     public readonly isOpen: ComputedRef<boolean>;
+    public readonly component?: Component;
 
-    public constructor(options: AlertOptions<T>, duration: number | Duration)
+    public constructor(options: AlertOptions<T, P>, duration: number | Duration)
     {
         const _close = async (): Promise<void> =>
         {
@@ -98,10 +99,12 @@ export default class Context<T = void> extends DeferredPromise<T>
         this._closingSubscribers = new Subscribers();
         this._closedSubscribers = new Subscribers();
 
-        this.alert = new Alert<T>(options);
+        this.alert = new Alert<T, P>(options as AlertOptions<T>);
 
         this._isOpen = ref(false);
         this.isOpen = computed((): boolean => this._isOpen.value);
+
+        this.component = options.component;
     }
 
     public async open(): Promise<void>

packages/core/src/types/action/callback.ts

@@ -0,0 +1,7 @@
+import type { ActionCallback, CoreAction } from "./core";
+
+export interface CallbackAction<R = void> extends CoreAction
+{
+    callback: ActionCallback<R>;
+    value?: never;
+}

packages/core/src/types/action.ts → packages/core/src/types/action/core.ts

@@ -2,7 +2,7 @@ import type { MaybePromise } from "@byloth/core";
 
 export type ActionCallback<T> = () => MaybePromise<T>;
 
-export interface IAction<R>
+export interface IAction<R = void>
 {
     id: symbol;
     type: "primary" | "secondary" | "alternative";
@@ -13,11 +13,10 @@ export interface IAction<R>
 }
 
 type PartialAction<R> = Partial<IAction<R>>;
-type OmittedAction = Omit<PartialAction<never>, "callback">;
+type OmittedProperty = "callback";
+type OmittedAction = Omit<PartialAction<never>, OmittedProperty>;
 
-export interface ActionOptions<R = void> extends OmittedAction
+export interface CoreAction extends OmittedAction
 {
     label: string;
-
-    callback?: ActionCallback<R>;
 }

packages/core/src/types/action/index.ts

@@ -0,0 +1,6 @@
+import type { CallbackAction } from "./callback";
+import type { ValueAction } from "./value";
+
+export type { ActionCallback, IAction } from "./core";
+
+export type ActionOptions<R = void> = CallbackAction<R> | ValueAction<R>;

packages/core/src/types/action/value.ts

@@ -0,0 +1,7 @@
+import type { CoreAction } from "./core";
+
+export interface ValueAction<R = void> extends CoreAction
+{
+    callback?: never;
+    value: R;
+}

packages/core/src/types/alert/core.ts

@@ -1,9 +1,6 @@
-import type { Component } from "vue";
+import type { IAction, ActionOptions } from "../action/index.js";
 
-import type { Props } from "../core.js";
-import type { IAction, ActionOptions } from "../action.js";
-
-export interface IAlert<R = void>
+export interface IAlert<R = void, P extends Record<string, unknown> = never>
 {
     id: symbol;
 
@@ -14,20 +11,18 @@ export interface IAlert<R = void>
     title?: string;
 
     message?: string;
-
-    component?: Component;
-    props?: Props;
+    payload?: P;
 
     actions: IAction<R>[];
 
     dismissible: boolean;
     timeout: number;
 }
 
-type PartialAlert<R> = Partial<IAlert<R>>;
-type OmittedProperty = "message" | "component" | "props" | "actions";
-type OmittedAlert = Omit<PartialAlert<never>, OmittedProperty>;
-export interface CoreAlert<R = void> extends OmittedAlert
+type PartialAlert<R, P extends Record<string, unknown>> = Partial<IAlert<R, P>>;
+type OmittedProperty = "message" | "actions";
+type OmittedAlert<P extends Record<string, unknown>> = Omit<PartialAlert<never, P>, OmittedProperty>;
+export interface CoreAlert<R = void, P extends Record<string, unknown> = never> extends OmittedAlert<P>
 {
     actions?: ActionOptions<R>[];
 }

packages/core/src/types/alert/custom.ts

@@ -1,14 +1,11 @@
 import type { Component } from "vue";
 
-import type { Props } from "../core.js";
 import type { CoreAlert, BlockingMixin, DismissibleMixin } from "./core.js";
 
-export interface CustomAlert<R = void> extends CoreAlert<R>
+export interface CustomAlert<R = void, P extends Record<string, unknown> = never> extends CoreAlert<R, P>
 {
-    message?: never;
-
+    message?: string;
     component: Component;
-    props?: Props;
 }
 
 export type BlockingCustomAlert<R = void> = CustomAlert<R> & BlockingMixin;

packages/core/src/types/alert/index.ts

@@ -3,4 +3,4 @@ import type { CustomAlert } from "./custom.js";
 
 export type { IAlert } from "./core.js";
 
-export type AlertOptions<R = void> = SimpleAlert<R> | CustomAlert<R>;
+export type AlertOptions<R = void, P extends Record<string, unknown> = never> = SimpleAlert<R, P> | CustomAlert<R, P>;

packages/core/src/types/alert/simple.ts

@@ -1,11 +1,9 @@
 import type { CoreAlert, BlockingMixin, DismissibleMixin } from "./core.js";
 
-export interface SimpleAlert<R = void> extends CoreAlert<R>
+export interface SimpleAlert<R = void, P extends Record<string, unknown> = never> extends CoreAlert<R, P>
 {
     message: string;
-
     component?: never;
-    props?: never;
 }
 
 export type BlockingAlert<R = void> = SimpleAlert<R> & BlockingMixin;

packages/core/vite.config.ts

@@ -12,6 +12,16 @@ export default defineConfig({
   build: {
     lib: {
       entry: resolve("./src/index.ts"),
+      fileName: (format) =>
+      {
+        if (format === "cjs") { return `vuert.cjs`; }
+        if (format === "es") { return `vuert.esm.js`; }
+        if (format === "iife") { return `vuert.global.js`; }
+        if (format === "umd") { return `vuert.umd.cjs`; }
+
+        throw new Error(`Unknown build format: ${format}`);
+      },
+      formats: ["cjs", "es", "iife", "umd"],
       name: "Vuert"
     },
     rollupOptions: {