@dynect/base 0.1.0 → 0.3.0

package/src/runtime/components/base/toast/assets/CloseIcon.vue

@@ -0,0 +1,3 @@
+<template>
+	<Icon name="lucide:x" class="text-text-base size-4" />
+</template>

package/src/runtime/components/base/toast/assets/ErrorIcon.vue

@@ -0,0 +1,7 @@
+<template>
+	<IconWrapper icon-name="lucide:circle-alert" bg-class="bg-bg-danger-medium" icon-class="text-text-fg-danger-strong" />
+</template>
+
+<script setup lang="ts">
+import IconWrapper from './IconWrapper.vue';
+</script>

package/src/runtime/components/base/toast/assets/IconWrapper.vue

@@ -0,0 +1,13 @@
+<template>
+	<Icon :name="iconName" :class="cn('size-4', iconClass)" />
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+defineProps<{
+	iconName: string;
+	bgClass?: string;
+	iconClass?: string;
+}>();
+</script>

package/src/runtime/components/base/toast/assets/InfoIcon.vue

@@ -0,0 +1,7 @@
+<template>
+	<IconWrapper icon-name="lucide:info" bg-class="bg-bg-info-medium" icon-class="text-text-fg-info-strong" />
+</template>
+
+<script setup lang="ts">
+import IconWrapper from './IconWrapper.vue';
+</script>

package/src/runtime/components/base/toast/assets/Loader.vue

@@ -0,0 +1,18 @@
+<template>
+	<!-- Spinner Bars -->
+	<div class="sonner-loading-wrapper flex size-9 shrink-0 items-center justify-center rounded-lg" :data-visible="visible">
+		<div class="sonner-spinner">
+			<template v-for="bar in bars" :key="`spinner-bar-${bar}`">
+				<div class="sonner-loading-bar" />
+			</template>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+const bars = new Array(12).fill(0);
+
+defineProps<{
+	visible: boolean;
+}>();
+</script>

package/src/runtime/components/base/toast/assets/SuccessIcon.vue

@@ -0,0 +1,7 @@
+<template>
+	<IconWrapper icon-name="lucide:circle-check" bg-class="bg-bg-success-medium" icon-class="text-text-fg-success-strong" />
+</template>
+
+<script setup lang="ts">
+import IconWrapper from './IconWrapper.vue';
+</script>

package/src/runtime/components/base/toast/assets/WarningIcon.vue

@@ -0,0 +1,7 @@
+<template>
+	<IconWrapper icon-name="lucide:triangle-alert" bg-class="bg-bg-warning-medium" icon-class="text-text-fg-warning-strong" />
+</template>
+
+<script setup lang="ts">
+import IconWrapper from './IconWrapper.vue';
+</script>

package/src/runtime/components/base/toast/constant.ts

@@ -0,0 +1,30 @@
+/**
+ * @description Toast component — contains the Toast class and all rendering/configuration
+ * @author      Amirul Apex
+ * @created     Jan 2026
+ * @project     Dynect
+ */
+
+// Visible toasts amount
+export const VISIBLE_TOASTS_AMOUNT = 3 as const;
+
+// Viewport padding
+export const VIEWPORT_OFFSET = '24px' as const;
+
+// Mobile viewport padding
+export const MOBILE_VIEWPORT_OFFSET = '16px' as const;
+
+// Default lifetime of a toast (in ms)
+export const TOAST_LIFETIME = 4000 as const;
+
+// Default toast width
+export const TOAST_WIDTH = 356 as const;
+
+// Default gap between toasts
+export const GAP = 14 as const;
+
+// Threshold to dismiss a toast
+export const SWIPE_THRESHOLD = 45 as const;
+
+// Equal to exit animation duration
+export const TIME_BEFORE_UNMOUNT = 200 as const;

package/src/runtime/components/base/toast/hooks.ts

@@ -0,0 +1,114 @@
+import { nextTick, ref, watchEffect, type CSSProperties, type Ref } from 'vue';
+import type { SwipeDirection, ToasterProps, ToastT } from './types';
+import { ToastState } from './state';
+import { MOBILE_VIEWPORT_OFFSET, VIEWPORT_OFFSET } from './constant';
+
+export function useIsDocumentHidden() {
+	const isDocumentHidden = ref(false);
+
+	watchEffect(() => {
+		// SSR guard: only run in browser
+		if (typeof document === 'undefined') return;
+
+		const callback = () => {
+			isDocumentHidden.value = document.hidden;
+		};
+		document.addEventListener('visibilitychange', callback);
+		return () => {
+			if (typeof globalThis !== 'undefined' && globalThis.removeEventListener) {
+				globalThis.removeEventListener('visibilitychange', callback);
+			}
+		};
+	});
+
+	return {
+		isDocumentHidden,
+	};
+}
+
+export function getDefaultSwipeDirections(position: string): Array<SwipeDirection> {
+	const [y, x] = position.split('-');
+	const directions: Array<SwipeDirection> = [];
+
+	if (y) {
+		directions.push(y as SwipeDirection);
+	}
+
+	if (x) {
+		directions.push(x as SwipeDirection);
+	}
+
+	return directions;
+}
+
+export function assignOffset(defaultOffset: ToasterProps['offset'], mobileOffset: ToasterProps['mobileOffset']) {
+	const styles = {} as CSSProperties;
+
+	[defaultOffset, mobileOffset].forEach((offset, index) => {
+		const isMobile = index === 1;
+		const prefix = isMobile ? '--mobile-offset' : '--offset';
+		const defaultValue = isMobile ? MOBILE_VIEWPORT_OFFSET : VIEWPORT_OFFSET;
+
+		function assignAll(offset: string | number) {
+			['top', 'right', 'bottom', 'left'].forEach((key) => {
+				styles[`${prefix}-${key}`] = typeof offset === 'number' ? `${offset}px` : offset;
+			});
+		}
+
+		if (typeof offset === 'number' || typeof offset === 'string') {
+			assignAll(offset);
+		} else if (typeof offset === 'object') {
+			['top', 'right', 'bottom', 'left'].forEach((key) => {
+				if (offset[key as keyof typeof offset] === undefined) {
+					styles[`${prefix}-${key}`] = defaultValue;
+				} else {
+					styles[`${prefix}-${key}`] = typeof offset[key as keyof typeof offset] === 'number' ? `${offset[key as keyof typeof offset]}px` : offset[key as keyof typeof offset];
+				}
+			});
+		} else {
+			assignAll(defaultValue);
+		}
+	});
+
+	return styles;
+}
+
+export function useVueSonner(): {
+	activeToasts: Ref<ToastT[]>;
+} {
+	const activeToasts = ref<ToastT[]>([]);
+
+	const handleToastUpdate = (toast: ToastT) => {
+		if ('dismiss' in toast && toast.dismiss) {
+			activeToasts.value = activeToasts.value.filter((t) => t.id !== toast.id);
+			return;
+		}
+
+		nextTick(() => {
+			const existingToastIndex = activeToasts.value.findIndex((t) => t.id === toast.id);
+			if (existingToastIndex === -1) {
+				activeToasts.value = [toast, ...activeToasts.value];
+			} else {
+				const updatedToasts = [...activeToasts.value];
+				updatedToasts[existingToastIndex] = {
+					...updatedToasts[existingToastIndex],
+					...toast,
+				};
+
+				activeToasts.value = updatedToasts;
+			}
+		});
+	};
+
+	watchEffect((onInvalidate) => {
+		const unsubscribe = ToastState.subscribe(handleToastUpdate);
+
+		onInvalidate(() => {
+			unsubscribe();
+		});
+	});
+
+	return {
+		activeToasts,
+	};
+}

package/src/runtime/components/base/toast/state.ts

@@ -0,0 +1,317 @@
+import { isVNode, type Component } from 'vue';
+import type { ExternalToast, PromiseData, PromiseIExtendedResult, PromiseT, ToastT, ToastToDismiss, ToastTypes } from './types';
+
+let toastsCounter = 1;
+
+type titleT = (() => string | Component) | string | Component;
+type ToastId = string | number | undefined;
+
+class Observer {
+	subscribers: Array<(toast: ExternalToast | ToastToDismiss) => void>;
+	toasts: Array<ToastT | ToastToDismiss>;
+	dismissedToasts: Set<string | number>;
+
+	constructor() {
+		this.subscribers = [];
+		this.toasts = [];
+		this.dismissedToasts = new Set();
+	}
+
+	// We use arrow functions to maintain the correct `this` reference
+	subscribe = (subscriber: (toast: ToastT | ToastToDismiss) => void) => {
+		this.subscribers.push(subscriber as any);
+
+		return () => {
+			const index = this.subscribers.indexOf(subscriber as any);
+			this.subscribers.splice(index, 1);
+		};
+	};
+
+	publish = (data: ToastT) => {
+		this.subscribers.forEach((subscriber) => subscriber(data));
+	};
+
+	addToast = (data: ToastT) => {
+		this.publish(data);
+		this.toasts = [...this.toasts, data];
+	};
+
+	create = (
+		data: ExternalToast & {
+			message?: titleT;
+			type?: ToastTypes;
+			promise?: PromiseT;
+		}
+	) => {
+		const { message, ...rest } = data;
+		const id = typeof data.id === 'number' || (data.id && data.id?.length > 0) ? data.id : toastsCounter++;
+		const alreadyExists = this.toasts.find((toast) => {
+			return toast.id === id;
+		});
+		const dismissible = data.dismissible ?? true;
+
+		if (this.dismissedToasts.has(id)) {
+			this.dismissedToasts.delete(id);
+		}
+
+		if (alreadyExists) {
+			this.toasts = this.toasts.map((toast) => {
+				if (toast.id === id) {
+					this.publish({ ...toast, ...data, id, title: message });
+					return {
+						...toast,
+						...data,
+						id,
+						dismissible,
+						title: message,
+					};
+				}
+
+				return toast;
+			});
+		} else {
+			this.addToast({ title: message, ...rest, dismissible, id });
+		}
+
+		return id;
+	};
+
+	dismiss = (id?: number | string) => {
+		if (id) {
+			this.dismissedToasts.add(id);
+			// SSR guard for requestAnimationFrame
+			const notify = () => this.subscribers.forEach((subscriber) => subscriber({ id, dismiss: true }));
+
+			if (typeof requestAnimationFrame === 'undefined') {
+				notify();
+			} else {
+				requestAnimationFrame(notify);
+			}
+		} else {
+			this.toasts.forEach((toast) => {
+				this.subscribers.forEach((subscriber) => subscriber({ id: toast.id, dismiss: true }));
+			});
+		}
+		return id;
+	};
+
+	message = (message: titleT, data?: ExternalToast) => {
+		return this.create({ ...data, message, type: 'default' });
+	};
+
+	error = (message: titleT, data?: ExternalToast) => {
+		return this.create({ ...data, type: 'error', message });
+	};
+
+	success = (message: titleT, data?: ExternalToast) => {
+		return this.create({ ...data, type: 'success', message });
+	};
+
+	info = (message: titleT, data?: ExternalToast) => {
+		return this.create({ ...data, type: 'info', message });
+	};
+
+	warning = (message: titleT, data?: ExternalToast) => {
+		return this.create({ ...data, type: 'warning', message });
+	};
+
+	loading = (message: titleT, data?: ExternalToast) => {
+		return this.create({ ...data, type: 'loading', message });
+	};
+
+	private readonly handlePromiseSuccess = async (response: any, id: ToastId, data: PromiseData<any>, shouldDismiss: any) => {
+		const isVueComponent = isVNode(response);
+		if (isVueComponent) {
+			shouldDismiss.value = false;
+			this.create({ id, type: 'default', message: response });
+			return;
+		}
+
+		if (isHttpResponse(response) && !response.ok) {
+			await this.handleHttpError(response, id, data, shouldDismiss);
+			return;
+		}
+
+		if (response instanceof Error) {
+			await this.handleError(response, id, data, shouldDismiss);
+			return;
+		}
+
+		if (data.success !== undefined) {
+			await this.handleSuccessResponse(response, id, data, shouldDismiss);
+		}
+	};
+
+	private readonly handleHttpError = async (response: Response, id: ToastId, data: PromiseData<any>, shouldDismiss: any) => {
+		shouldDismiss.value = false;
+		const promiseData = typeof data.error === 'function' ? await (data.error as (error: string) => Promise<string | Component>)(`HTTP error! status: ${response.status}`) : data.error;
+		const description = typeof data.description === 'function' ? await (data.description as (error: string) => Promise<string | Component>)(`HTTP error! status: ${response.status}`) : data.description;
+
+		const isExtendedResult = typeof promiseData === 'object' && !isVNode(promiseData);
+		const toastSettings: PromiseIExtendedResult = isExtendedResult ? (promiseData as PromiseIExtendedResult) : { message: promiseData || '', id: id || '' };
+
+		this.create({ id, type: 'error', description, ...toastSettings });
+	};
+
+	private readonly handleError = async (error: Error, id: ToastId, data: PromiseData<any>, shouldDismiss: any) => {
+		shouldDismiss.value = false;
+		const promiseData = typeof data.error === 'function' ? await (data.error as (error: Error) => Promise<string | Component>)(error) : data.error;
+		const description = typeof data.description === 'function' ? await (data.description as (error: Error) => Promise<string | Component>)(error) : data.description;
+
+		const isExtendedResult = typeof promiseData === 'object' && !isVNode(promiseData);
+		const toastSettings: PromiseIExtendedResult = isExtendedResult ? (promiseData as PromiseIExtendedResult) : { message: promiseData || '', id: id || '' };
+
+		this.create({ id, type: 'error', description, ...toastSettings });
+	};
+
+	private readonly handleSuccessResponse = async (response: any, id: ToastId, data: PromiseData<any>, shouldDismiss: any) => {
+		shouldDismiss.value = false;
+		const promiseData = typeof data.success === 'function' ? await (data.success as (response: any) => Promise<string | Component>)(response) : data.success;
+		const description = typeof data.description === 'function' ? await (data.description as (response: any) => Promise<string | Component>)(response) : data.description;
+
+		const isExtendedResult = typeof promiseData === 'object' && !isVNode(promiseData);
+		const toastSettings: PromiseIExtendedResult = isExtendedResult ? (promiseData as PromiseIExtendedResult) : { message: promiseData || '', id: id || '' };
+
+		this.create({ id, type: 'success', description, ...toastSettings });
+	};
+
+	private readonly handlePromiseError = async (error: unknown, id: ToastId, data: PromiseData<any>, shouldDismiss: any) => {
+		if (data.error !== undefined) {
+			shouldDismiss.value = false;
+			const promiseData = typeof data.error === 'function' ? await (data.error as (error: unknown) => Promise<string | Component>)(error) : data.error;
+			const description = typeof data.description === 'function' ? await (data.description as (error: unknown) => Promise<string | Component>)(error) : data.description;
+
+			const isExtendedResult = typeof promiseData === 'object' && !isVNode(promiseData);
+			const toastSettings: PromiseIExtendedResult = isExtendedResult ? (promiseData as PromiseIExtendedResult) : { message: promiseData || '', id: id || '' };
+
+			this.create({ id, type: 'error', description, ...toastSettings });
+		}
+	};
+
+	promise = <ToastData>(promise: PromiseT<ToastData>, data?: PromiseData<ToastData>) => {
+		if (!data) {
+			// Nothing to show
+			return;
+		}
+
+		let id: string | number | undefined;
+		if (data.loading !== undefined) {
+			id = this.create({
+				...data,
+				promise,
+				type: 'loading',
+				message: data.loading,
+				description: typeof data.description === 'function' ? undefined : data.description,
+			});
+		}
+
+		const p = Promise.resolve(typeof promise === 'function' ? promise() : promise);
+
+		const shouldDismiss = { value: id !== undefined };
+		let result: ['resolve', ToastData] | ['reject', unknown];
+
+		const originalPromise = p
+			.then(async (response) => {
+				result = ['resolve', response];
+				await this.handlePromiseSuccess(response, id, data, shouldDismiss);
+			})
+			.catch(async (error) => {
+				result = ['reject', error];
+				await this.handlePromiseError(error, id, data, shouldDismiss);
+			})
+			.finally(() => {
+				if (shouldDismiss.value) {
+					// Toast is still in load state (and will be indefinitely — dismiss it)
+					this.dismiss(id);
+					id = undefined;
+				}
+
+				data.finally?.();
+			});
+
+		const unwrap = () => new Promise<ToastData>((resolve, reject) => originalPromise.then(() => (result[0] === 'reject' ? reject(result[1]) : resolve(result[1]))).catch(reject));
+
+		if (typeof id !== 'string' && typeof id !== 'number') {
+			// cannot Object.assign on undefined
+			return { unwrap };
+		} else {
+			return Object.assign(id, { unwrap });
+		}
+	};
+
+	// We can't provide the toast we just created as a prop as we didn't create it yet, so we can create a default toast object, I just don't know how to use function in argument when calling()?
+	custom = (component: Component, data?: ExternalToast) => {
+		const id = data?.id || toastsCounter++;
+		const alreadyExists = this.toasts.find((toast) => {
+			return toast.id === id;
+		});
+		const dismissible = data?.dismissible ?? true;
+
+		if (this.dismissedToasts.has(id)) {
+			this.dismissedToasts.delete(id);
+		}
+
+		if (alreadyExists) {
+			this.toasts = this.toasts.map((toast) => {
+				if (toast.id === id) {
+					this.publish({ ...toast, component, dismissible, id, ...data });
+					return { ...toast, component, dismissible, id, ...data };
+				}
+
+				return toast;
+			});
+		} else {
+			this.addToast({ component, dismissible, id, ...data });
+		}
+		return id;
+	};
+
+	getActiveToasts = () => {
+		return this.toasts.filter((toast) => !this.dismissedToasts.has(toast.id));
+	};
+}
+
+export const ToastState = new Observer();
+
+// bind this to the toast function
+function toastFunction(message: titleT, data?: ExternalToast) {
+	const id = data?.id || toastsCounter++;
+
+	ToastState.create({
+		message,
+		id,
+		type: 'default',
+		...data,
+	});
+
+	return id;
+}
+
+const isHttpResponse = (data: any): data is Response => {
+	return data && typeof data === 'object' && 'ok' in data && typeof data.ok === 'boolean' && 'status' in data && typeof data.status === 'number';
+};
+
+const basicToast = toastFunction;
+
+const getHistory = () => ToastState.toasts;
+const getToasts = () => ToastState.getActiveToasts();
+
+// We use `Object.assign` to maintain the correct types as we would lose them otherwise
+export const toast = Object.assign(
+	basicToast,
+	{
+		success: ToastState.success,
+		info: ToastState.info,
+		warning: ToastState.warning,
+		error: ToastState.error,
+		custom: ToastState.custom,
+		message: ToastState.message,
+		promise: ToastState.promise,
+		dismiss: ToastState.dismiss,
+		loading: ToastState.loading,
+	},
+	{
+		getHistory,
+		getToasts,
+	}
+);