@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/base/signature/index.vue

@@ -0,0 +1,218 @@
+<template>
+	<div :style="{ width: w, height: h }" @touchmove.prevent>
+		<canvas :id="state.uid" class="size-full" :class="{ 'cursor-not-allowed': disabled }" :data-uid="state.uid" :aria-disabled="disabled ? 'true' : undefined" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import SignaturePad from 'signature_pad';
+
+interface SigOption {
+	backgroundColor?: string;
+	penColor?: string;
+	minWidth?: number;
+	maxWidth?: number;
+	[key: string]: unknown;
+}
+
+interface WaterMarkData {
+	text?: string;
+	x?: number;
+	y?: number;
+	sx?: number;
+	sy?: number;
+	font?: string;
+	fillStyle?: string;
+	strokeStyle?: string;
+	style?: 'all' | 'stroke' | 'fill';
+}
+
+const props = withDefaults(
+	defineProps<{
+		sigOption?: SigOption;
+		w?: string;
+		h?: string;
+		clearOnResize?: boolean;
+		waterMark?: WaterMarkData;
+		disabled?: boolean;
+		defaultUrl?: string;
+	}>(),
+	{
+		sigOption: () => ({
+			backgroundColor: 'rgb(255,255,255)',
+			penColor: 'rgb(0, 0, 0)',
+			minWidth: 2.5,
+			maxWidth: 2.5,
+		}),
+		w: '100%',
+		h: '100%',
+		clearOnResize: false,
+		waterMark: () => ({}),
+		disabled: false,
+		defaultUrl: '',
+	}
+);
+
+const emit = defineEmits<{
+	'after-update-stroke': [];
+}>();
+
+interface SignatureState {
+	sig: SignaturePad | null;
+	option: SigOption;
+	uid: string;
+}
+
+const fallbackId = useId();
+
+const state = reactive<SignatureState>({
+	sig: null,
+	option: {
+		backgroundColor: 'rgb(255,255,255)',
+		penColor: 'rgb(0, 0, 0)',
+		minWidth: 2.5,
+		maxWidth: 2.5,
+	},
+	uid: `canvas-${fallbackId}`,
+});
+
+for (const key of Object.keys(props.sigOption)) {
+	state.option[key] = props.sigOption[key];
+}
+
+watch(
+	() => props.disabled,
+	(val) => {
+		if (!state.sig) return;
+		if (val) {
+			state.sig.off();
+		} else {
+			state.sig.on();
+		}
+	}
+);
+
+watch(
+	() => props.sigOption.penColor,
+	(color) => {
+		if (!color || !state.sig) return;
+		state.option.penColor = color;
+		const sig = state.sig as SignaturePad & { penColor: string };
+		if (sig.penColor === color) return;
+		sig.penColor = color;
+	}
+);
+
+watch(
+	() => [props.sigOption.minWidth, props.sigOption.maxWidth] as const,
+	([minWidth, maxWidth]) => {
+		if (typeof minWidth !== 'number' || typeof maxWidth !== 'number' || !state.sig) return;
+		state.option.minWidth = minWidth;
+		state.option.maxWidth = maxWidth;
+		const penWidthChanged = state.sig.minWidth !== minWidth || state.sig.maxWidth !== maxWidth;
+		if (!penWidthChanged) return;
+		const strokes = state.sig.toData();
+		state.sig.minWidth = minWidth;
+		state.sig.maxWidth = maxWidth;
+		if (strokes.length) state.sig.fromData(strokes);
+	}
+);
+
+watch(
+	() => props.sigOption.backgroundColor,
+	(color) => {
+		if (!color || !state.sig) return;
+		state.option.backgroundColor = color;
+		const sig = state.sig as SignaturePad & { backgroundColor: string };
+		if (sig.backgroundColor === color) return;
+		const existingData = state.sig.toData();
+		const hadSignature = !state.sig.isEmpty();
+		sig.backgroundColor = color;
+		state.sig.clear();
+		if (hadSignature && existingData.length) state.sig.fromData(existingData);
+	}
+);
+
+const getCanvas = (): HTMLCanvasElement | null => document.getElementById(state.uid) as HTMLCanvasElement | null;
+
+const clear = (): void => state.sig?.clear();
+
+const save = (format?: string): string => (format ? state.sig!.toDataURL(format) : state.sig!.toDataURL());
+
+const fromDataURL = (url: string): void => {
+	state.sig?.fromDataURL(url);
+};
+
+const isEmpty = (): boolean => state.sig?.isEmpty() ?? true;
+
+const undo = (): void => {
+	if (!state.sig) return;
+	const data = state.sig.toData();
+	if (data?.length) {
+		data.pop();
+		state.sig.fromData(data);
+	}
+};
+
+const addWaterMark = (data: WaterMarkData): void => {
+	if (Object.prototype.toString.call(data) !== '[object Object]') {
+		throw new Error(`Expected Object, got ${typeof data}.`);
+	}
+	const canvas = getCanvas();
+	if (!canvas) return;
+	const ctx = canvas.getContext('2d');
+	if (!ctx) return;
+
+	ctx.font = data.font ?? '20px sans-serif';
+	ctx.fillStyle = data.fillStyle ?? '#333';
+	ctx.strokeStyle = data.strokeStyle ?? '#333';
+
+	const tx = data.text ?? '';
+	const x = data.x ?? 20;
+	const y = data.y ?? 20;
+	const sx = data.sx ?? 40;
+	const sy = data.sy ?? 40;
+
+	if (data.style === 'all') {
+		ctx.fillText(tx, x, y);
+		ctx.strokeText(tx, sx, sy);
+	} else if (data.style === 'stroke') {
+		ctx.strokeText(tx, sx, sy);
+	} else {
+		ctx.fillText(tx, x, y);
+	}
+};
+
+const draw = (): void => {
+	const canvas = getCanvas();
+	if (!canvas) return;
+
+	state.sig = new SignaturePad(canvas, state.option);
+	state.sig.addEventListener('afterUpdateStroke', () => emit('after-update-stroke'));
+
+	const resizeCanvas = (c: HTMLCanvasElement): void => {
+		const url = isEmpty() ? undefined : save();
+		const ratio = Math.max(window.devicePixelRatio || 1, 1);
+		const pxRe = /px/;
+		c.width = pxRe.test(props.w) ? Number(props.w.replace('px', '')) * ratio : c.offsetWidth * ratio;
+		c.height = pxRe.test(props.h) ? Number(props.h.replace('px', '')) * ratio : c.offsetHeight * ratio;
+		c.getContext('2d')?.scale(ratio, ratio);
+		clear();
+		if (!props.clearOnResize && url !== undefined) fromDataURL(url);
+		if (Object.keys(props.waterMark).length) addWaterMark(props.waterMark);
+	};
+
+	window.addEventListener('resize', () => resizeCanvas(canvas));
+	resizeCanvas(canvas);
+	if (props.defaultUrl) fromDataURL(props.defaultUrl);
+	if (props.disabled) {
+		state.sig.off();
+	} else {
+		state.sig.on();
+	}
+};
+
+onMounted(() => draw());
+
+defineExpose({ save, clear, isEmpty, undo, addWaterMark, fromDataURL });
+</script>

package/src/runtime/components/base/toast/Toast.vue

@@ -0,0 +1,396 @@
+<template>
+	<div
+		ref="toastRef"
+		:class="
+			cn(
+				props.class,
+				toastClass,
+				classes?.toast,
+				toast.classes?.toast,
+				// @ts-ignore
+				classes?.[toastType],
+				// @ts-ignore
+				toast?.classes?.[toastType]
+			)
+		"
+		data-sonner-toast=""
+		:data-rich-colors="toast.richColors ?? defaultRichColors"
+		:data-styled="!Boolean(toast.component || toast?.unstyled || unstyled)"
+		:data-mounted="mounted"
+		:data-promise="Boolean(toast.promise)"
+		:data-swiped="swiped"
+		:data-removed="removed"
+		:data-visible="isVisible"
+		:data-y-position="y"
+		:data-x-position="x"
+		:data-index="index"
+		:data-front="isFront"
+		:data-swiping="swiping"
+		:data-dismissible="dismissible"
+		:data-type="toastType"
+		:data-invert="toast.invert || invert"
+		:data-swipe-out="swipeOut"
+		:data-swipe-direction="swipeOutDirection"
+		:data-expanded="Boolean(expanded || (expandByDefault && mounted))"
+		:data-testid="toast.testId"
+		:data-close-button="closeButton"
+		:style="{
+			'--index': index,
+			'--toasts-before': index,
+			'--z-index': toasts.length - index,
+			'--offset': `${removed ? offsetBeforeRemove : offset}px`,
+			'--initial-height': expandByDefault ? 'auto' : `${initialHeight}px`,
+			...style,
+			...props.toast.style,
+		}"
+		@dragend="handleDragEnd"
+		@pointerdown="onPointerDown"
+		@pointerup="onPointerUp"
+		@pointermove="onPointerMove"
+	>
+		<template v-if="toast.component">
+			<component :is="toast.component" v-bind="toast.componentProps" :on-close-toast="handleCloseToast" :is-paused="$props.expanded || $props.interacting || isDocumentHidden" />
+		</template>
+
+		<template v-else>
+			<!-- Icon -->
+			<template v-if="toastType !== 'default' || toast.icon || toast.promise">
+				<div data-icon="" :class="cn(classes?.icon, toast?.classes?.icon)">
+					<component :is="toast.icon" v-if="toast.icon" />
+					<template v-else>
+						<slot v-if="toastType === 'loading'" name="loading-icon" />
+						<slot v-else-if="toastType === 'success'" name="success-icon" />
+						<slot v-else-if="toastType === 'error'" name="error-icon" />
+						<slot v-else-if="toastType === 'warning'" name="warning-icon" />
+						<slot v-else-if="toastType === 'info'" name="info-icon" />
+					</template>
+				</div>
+			</template>
+
+			<!-- Content: Title + Description -->
+			<div data-content="" :class="cn(classes?.content, toast?.classes?.content)">
+				<div data-title="" :class="cn(classes?.title, toast.classes?.title)">
+					<template v-if="isStringOfTitle">
+						<component :is="toast.title" v-bind="toast.componentProps" />
+					</template>
+					<template v-else>
+						{{ toast.title }}
+					</template>
+				</div>
+
+				<template v-if="toast.description">
+					<div data-description="" :class="cn(descriptionClass, toastDescriptionClass, classes?.description, toast.classes?.description)">
+						<template v-if="isStringOfDescription">
+							<component :is="toast.description" v-bind="toast.componentProps" />
+						</template>
+						<template v-else>
+							{{ toast.description }}
+						</template>
+					</div>
+				</template>
+			</div>
+
+			<!-- Cancel Button -->
+			<template v-if="toast.cancel">
+				<button
+					:style="toast.cancelButtonStyle || cancelButtonStyle"
+					:class="cn(classes?.cancelButton, toast.classes?.cancelButton)"
+					data-button
+					data-cancel
+					@click="
+						(event) => {
+							if (!isAction(toast.cancel!)) return;
+							if (!dismissible) return;
+							toast.cancel.onClick?.(event);
+							deleteToast();
+						}
+					"
+				>
+					{{ isAction(toast.cancel) ? toast.cancel?.label : toast.cancel }}
+				</button>
+			</template>
+
+			<!-- Action Button -->
+			<template v-if="toast.action">
+				<button
+					:style="toast.actionButtonStyle || actionButtonStyle"
+					:class="cn(classes?.actionButton, toast.classes?.actionButton)"
+					data-button
+					data-action
+					@click="
+						(event) => {
+							if (!isAction(toast.action!)) return;
+							toast.action.onClick?.(event);
+							if (event.defaultPrevented) return;
+							deleteToast();
+						}
+					"
+				>
+					{{ isAction(toast.action) ? toast.action?.label : toast.action }}
+				</button>
+			</template>
+		</template>
+
+		<!-- Close Button -->
+		<template v-if="closeButton && !toast.component && toastType !== 'loading'">
+			<DynectButton :color="colorClose" size="xs" :icon-only="true" :aria-label="closeButtonAriaLabel || 'Close toast'" :data-disabled="disabled" data-close-button="true" :class="cn(classes?.closeButton, toast?.classes?.closeButton)" @click="handleCloseToast">
+				<template v-if="icons?.close">
+					<Icon name="lucide:x" />
+				</template>
+				<template v-else>
+					<slot name="close-icon" />
+				</template>
+			</DynectButton>
+		</template>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import { type HeightT, type ToastProps, type ToastT, isAction } from './types';
+import { useIsDocumentHidden, getDefaultSwipeDirections } from './hooks';
+import { SWIPE_THRESHOLD, TIME_BEFORE_UNMOUNT, TOAST_LIFETIME } from './constant';
+
+// ── Props & Emits ──────────────────────────────────────────────────────────────
+const props = defineProps<ToastProps>();
+
+const emit = defineEmits<{
+	(e: 'update:heights', heights: HeightT[]): void;
+	(e: 'update:height', height: HeightT): void;
+	(e: 'removeToast', toast: ToastT): void;
+}>();
+
+// ── Composables ────────────────────────────────────────────────────────────────
+const { isDocumentHidden } = useIsDocumentHidden();
+
+// ── State ──────────────────────────────────────────────────────────────────────
+const toastRef = ref<HTMLLIElement | null>(null);
+const mounted = ref(false);
+const removed = ref(false);
+const swiping = ref(false);
+const swipeOut = ref(false);
+const swiped = ref(false);
+const swipeDirection = ref<'x' | 'y' | null>(null);
+const swipeOutDirection = ref<'left' | 'right' | 'up' | 'down' | null>(null);
+const initialHeight = ref(0);
+const offsetBeforeRemove = ref(0);
+const dragStartTime = ref<Date | null>(null);
+const pointerStartRef = ref<{ x: number; y: number } | null>(null);
+const closeTimerStartTimeRef = ref(0);
+const lastCloseTimerStartTimeRef = ref(0);
+const remainingTime = ref(props.toast.duration || props.duration || TOAST_LIFETIME);
+
+// ── Computed ───────────────────────────────────────────────────────────────────
+const coords = computed(() => props.position.split('-'));
+const y = computed(() => coords.value[0]);
+const x = computed(() => coords.value[1]);
+
+const isFront = computed(() => props.index === 0);
+const isVisible = computed(() => props.index + 1 <= props.visibleToasts);
+const toastType = computed(() => props.toast.type);
+const toastClass = computed(() => props.toast.class || '');
+const toastDescriptionClass = computed(() => props.descriptionClass || '');
+const dismissible = computed(() => props.toast.dismissible !== false);
+const disabled = computed(() => toastType.value === 'loading');
+const closeButton = computed(() => props.toast.closeButton ?? props.closeButton);
+const duration = computed(() => props.toast.duration || props.duration || TOAST_LIFETIME);
+const isStringOfTitle = computed(() => typeof props.toast.title !== 'string');
+const isStringOfDescription = computed(() => typeof props.toast.description !== 'string');
+
+const heightIndex = computed(() => {
+	const currentPosition = props.toast.position || props.position;
+	const samePositionHeights = props.heights.filter((h) => h.position === currentPosition);
+	return Math.max(
+		samePositionHeights.findIndex((h) => h.toastId === props.toast.id),
+		0
+	);
+});
+
+const toastsHeightBefore = computed(() => {
+	const currentPosition = props.toast.position || props.position;
+	const samePositionHeights = props.heights.filter((h) => h.position === currentPosition);
+	return samePositionHeights.reduce((prev, curr, i) => (i >= heightIndex.value ? prev : prev + curr.height), 0);
+});
+
+const offset = computed(() => heightIndex.value * props.gap! + toastsHeightBefore.value || 0);
+
+const colorCloseMap: Record<string, 'ghost' | 'success' | 'info' | 'warning' | 'danger'> = {
+	success: 'success',
+	info: 'info',
+	warning: 'warning',
+	error: 'danger',
+};
+
+const colorClose = computed(() => colorCloseMap[toastType.value ?? ''] ?? 'ghost');
+
+// ── Functions ──────────────────────────────────────────────────────────────────
+function deleteToast() {
+	removed.value = true;
+	offsetBeforeRemove.value = offset.value;
+	setTimeout(() => emit('removeToast', props.toast), TIME_BEFORE_UNMOUNT);
+}
+
+function handleCloseToast() {
+	if (disabled.value || !dismissible.value) return;
+	deleteToast();
+	props.toast.onDismiss?.(props.toast);
+}
+
+function handleDragEnd() {
+	swiping.value = false;
+	swipeDirection.value = null;
+	pointerStartRef.value = null;
+}
+
+function getDampening(delta: number): number {
+	return 1 / (1.5 + Math.abs(delta) / 20);
+}
+
+function calculateSwipeAmount(delta: number, direction: 'x' | 'y', swipeDirections: string[]): number {
+	const validDirections = direction === 'y' ? ['top', 'bottom'] : ['left', 'right'];
+	if (!validDirections.some((dir) => swipeDirections.includes(dir))) return 0;
+
+	const isPositiveDirection = direction === 'y' ? (swipeDirections.includes('top') && delta < 0) || (swipeDirections.includes('bottom') && delta > 0) : (swipeDirections.includes('left') && delta < 0) || (swipeDirections.includes('right') && delta > 0);
+
+	if (isPositiveDirection) return delta;
+
+	const dampenedDelta = delta * getDampening(delta);
+	return Math.abs(dampenedDelta) < Math.abs(delta) ? dampenedDelta : delta;
+}
+
+function onPointerDown(event: PointerEvent) {
+	if (event.button === 2 || disabled.value || !dismissible.value) return;
+	dragStartTime.value = new Date();
+	offsetBeforeRemove.value = offset.value;
+	(event.target as HTMLElement).setPointerCapture(event.pointerId);
+	if ((event.target as HTMLElement).tagName === 'BUTTON') return;
+	swiping.value = true;
+	pointerStartRef.value = { x: event.clientX, y: event.clientY };
+}
+
+function onPointerUp() {
+	if (swipeOut.value || !dismissible.value) return;
+	pointerStartRef.value = null;
+
+	const swipeAmountX = Number(toastRef.value?.style.getPropertyValue('--swipe-amount-x').replace('px', '') || 0);
+	const swipeAmountY = Number(toastRef.value?.style.getPropertyValue('--swipe-amount-y').replace('px', '') || 0);
+	const timeTaken = Date.now() - (dragStartTime.value?.getTime() || 0);
+	const swipeAmount = swipeDirection.value === 'x' ? swipeAmountX : swipeAmountY;
+	const velocity = Math.abs(swipeAmount) / timeTaken;
+
+	if (Math.abs(swipeAmount) >= SWIPE_THRESHOLD || velocity > 0.11) {
+		offsetBeforeRemove.value = offset.value;
+		props.toast.onDismiss?.(props.toast);
+		const horizontalDirection = swipeAmountX > 0 ? 'right' : 'left';
+		const verticalDirection = swipeAmountY > 0 ? 'down' : 'up';
+		swipeOutDirection.value = swipeDirection.value === 'x' ? horizontalDirection : verticalDirection;
+		deleteToast();
+		swipeOut.value = true;
+		return;
+	}
+
+	toastRef.value?.style.setProperty('--swipe-amount-x', '0px');
+	toastRef.value?.style.setProperty('--swipe-amount-y', '0px');
+	swiped.value = false;
+	swiping.value = false;
+	swipeDirection.value = null;
+}
+
+function onPointerMove(event: PointerEvent) {
+	if (!pointerStartRef.value || !dismissible.value) return;
+
+	const selectionLength = typeof globalThis !== 'undefined' && globalThis?.getSelection ? (globalThis.getSelection()?.toString()?.length ?? 0) : 0;
+	if (selectionLength > 0) return;
+
+	const yDelta = event.clientY - pointerStartRef.value.y;
+	const xDelta = event.clientX - pointerStartRef.value.x;
+	const swipeDirections = props.swipeDirections ?? getDefaultSwipeDirections(props.position);
+
+	if (!swipeDirection.value && (Math.abs(xDelta) > 1 || Math.abs(yDelta) > 1)) {
+		swipeDirection.value = Math.abs(xDelta) > Math.abs(yDelta) ? 'x' : 'y';
+	}
+
+	const swipeAmount = {
+		x: swipeDirection.value === 'x' ? calculateSwipeAmount(xDelta, 'x', swipeDirections) : 0,
+		y: swipeDirection.value === 'y' ? calculateSwipeAmount(yDelta, 'y', swipeDirections) : 0,
+	};
+
+	if (Math.abs(swipeAmount.x) > 0 || Math.abs(swipeAmount.y) > 0) swiped.value = true;
+
+	toastRef.value?.style.setProperty('--swipe-amount-x', `${swipeAmount.x}px`);
+	toastRef.value?.style.setProperty('--swipe-amount-y', `${swipeAmount.y}px`);
+}
+
+// ── Watchers ───────────────────────────────────────────────────────────────────
+watchEffect(async () => {
+	if (!mounted.value || !toastRef.value) return;
+	await nextTick();
+
+	const toastNode = toastRef.value;
+	const originalHeight = toastNode.style.height;
+	toastNode.style.height = 'auto';
+	const newHeight = toastNode.getBoundingClientRect().height;
+	toastNode.style.height = originalHeight;
+	initialHeight.value = newHeight;
+
+	emit('update:height', {
+		toastId: props.toast.id,
+		height: newHeight,
+		position: props.toast.position || props.position,
+	});
+});
+
+watchEffect((onInvalidate) => {
+	if ((props.toast.promise && toastType.value === 'loading') || props.toast.duration === Infinity || props.toast.type === 'loading') return;
+
+	let timeoutId: ReturnType<typeof setTimeout>;
+
+	const pauseTimer = () => {
+		if (lastCloseTimerStartTimeRef.value < closeTimerStartTimeRef.value) {
+			remainingTime.value -= Date.now() - closeTimerStartTimeRef.value;
+		}
+		lastCloseTimerStartTimeRef.value = Date.now();
+	};
+
+	const startTimer = () => {
+		if (remainingTime.value === Infinity) return;
+		closeTimerStartTimeRef.value = Date.now();
+		timeoutId = setTimeout(() => {
+			props.toast.onAutoClose?.(props.toast);
+			deleteToast();
+		}, remainingTime.value);
+	};
+
+	if (props.expanded || props.interacting || isDocumentHidden.value) {
+		pauseTimer();
+	} else {
+		startTimer();
+	}
+
+	onInvalidate(() => clearTimeout(timeoutId));
+});
+
+watch(
+	() => props.toast.delete,
+	(value) => {
+		if (value) {
+			deleteToast();
+			props.toast.onDismiss?.(props.toast);
+		}
+	}
+);
+
+// ── Lifecycle ──────────────────────────────────────────────────────────────────
+onMounted(() => {
+	mounted.value = true;
+	remainingTime.value = duration.value;
+	if (!toastRef.value) return;
+	const height = toastRef.value.getBoundingClientRect().height;
+	initialHeight.value = height;
+	emit('update:heights', [{ toastId: props.toast.id, height, position: props.toast.position! }, ...props.heights]);
+});
+
+onBeforeUnmount(() => {
+	if (toastRef.value) emit('removeToast', props.toast);
+});
+</script>