@fewangsit/wangsvue-fats 1.0.0-alpha.2

package/utils/toast.util.d.ts

@@ -0,0 +1,120 @@
+import { WangsIcons } from '../components/icon/Icon.vue.d';
+export type ToastSeverity = 'success' | 'error' | 'info';
+export interface ToastParams {
+    /**
+     * The main message to display in the toast. Will be formatted based on template message.
+     */
+    message: string;
+    /**
+     * Indicates whether the message is customized and does not follow the default message template.
+     * If true, custom formatting will be applied.
+     */
+    customMessage?: boolean;
+    /**
+     * The severity level of the toast message.
+     * Can be 'success', 'error', or 'info'.
+     */
+    severity?: ToastSeverity;
+    /**
+     * The icon to display in the toast.
+     */
+    icon?: WangsIcons;
+    /**
+     * The custom CSS class to apply to the icon.
+     */
+    iconClass?: any;
+    /**
+     * The error object from a catch statement, used to provide additional details for error toasts.
+     * Accepts any type of error object.
+     */
+    error?: unknown;
+    /**
+     * The duration for which the toast will be displayed, in milliseconds.
+     * Set to 0 to show the message infinitely.
+     *
+     * @default 3000 - 3 seconds
+     */
+    life?: number;
+    /**
+     * The name of the message group to which this toast belongs.
+     */
+    group?: string;
+    /**
+     * Unique identifier of the toast message.
+     */
+    messageId?: string;
+}
+export interface ToastMethod {
+    add(params: ToastParams): void;
+    /**
+     * Clears the messages that belongs to the group.
+     * @param {string} group - Name of the message group.
+     */
+    removeGroup(group: string): void;
+    removeAllGroups(): void;
+}
+/**
+ * Configuration options for the `useToast` hook.
+ */
+export interface UseToastConfig {
+    /**
+     * Default message templates for each severity level.
+     * Keys represent the severity, and values are the template strings.
+     *
+     * @example
+     * {
+     *   severity: {
+     *     success: 'Success, {message}',
+     *     error: 'Error, {message} {additionalMessage}',
+     *     info: 'Info, {message} {additionalMessage}',
+     *   },
+     *   additionalMessage: ' Silahkan cek kembali koneksi Anda.'
+     * }
+     */
+    template?: {
+        severity?: Record<string, string>;
+        additionalMessage?: string;
+    };
+    /**
+     * Icons for each severity level.
+     * Keys represent the severity, and values are the corresponding icon identifiers.
+     *
+     * @example
+     * {
+     *   success: 'emotion-happy-fill',
+     *   error: 'emotion-unhappy-fill',
+     * }
+     */
+    icons?: Record<string, WangsIcons>;
+}
+/**
+ * Hook to create and manage toast notifications.
+ *
+ * @param {UseToastConfig} config - Configuration object for the toast notifications.
+ * Refer to {@link UseToastConfig} for the structure and details of this object.
+ *
+ * @returns {ToastMethod} A method to trigger toast notifications.
+ * The method accepts {@link ToastParams} to customize individual notifications.
+ *
+ * @example
+ * const toast = useToast({
+ *   template: {
+ *     success: 'Success, {message}',
+ *     error: 'Error, {message} {additionalMessage}',
+ *     info: 'Info, {message} {additionalMessage}',
+ *   },
+ *   icons: {
+ *     success: 'emotion-happy-fill',
+ *     error: 'emotion-unhappy-fill',
+ *   }
+ * });
+ *
+ * // Overiding the default config with ToastParams
+ * toast.add({
+ *   message: 'Operation completed successfully!',
+ *   customMessage: true,
+ *   icon: 'custom-success-icon',
+ * });
+ */
+declare const useToast: ({ icons, template }?: UseToastConfig) => ToastMethod;
+export default useToast;