@witchcraft/ui 0.3.1 → 0.3.3

package/src/runtime/components/LibNotifications/LibNotifications.vue

@@ -1,69 +1,131 @@
 <template>
+<!-- using custom toasts, reka-ui toasts still have issues, like like of control over pause, and I can't get the leave event to animate or transition with vue transitions to work -->
 <TransitionGroup
 	name="list"
 	tag="div"
-	:class="twMerge(`notifications
-			absolute
-			z-50
-			inset-y-0 right-0
-			w-1/3
-			min-w-[300px]
-			pointer-events-none
-			overflow-hidden
-			flex flex-col
-		`, ($attrs as any).class)"
+	:class="twMerge(`
+		notifications
+		[--notification-width:300px]
+		fixed
+		top-0
+		z-50
+		right-[calc(var(--notification-width)*-1)]
+		py-2
+		w-[calc(var(--spacing)*2+var(--notification-width)*2)]
+		[&_.notification]:w-[var(--notification-width)]
+		max-h-[100dvh]
+		flex
+		flex-col
+		[&_.notification]:shrink-0
+		gap-1
+		list-none
+		outline-none
+		overflow-y-auto
+		overflow-x-clip
+		scrollbar-hidden
+	`, ($attrs as any).class)"
 	v-bind="{ ...$attrs, class: undefined }"
 >
 	<lib-notification
-		class="pointer-events-auto"
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
+		class="overflow-hidden"
 		v-for="notification of notifications"
 		:key="notification.id"
-	/>
-</TransitionGroup>
-<Transition>
-	<div
-		v-show="topNotifications.length > 0"
-		:class="twMerge(`notifications--none`, ($attrs as any).class)"
-	/>
-</Transition>
-<Transition>
-	<dialog
-		v-show="topNotifications.length > 0"
-		:id="id"
-		:class="twMerge(`notifications-modal
-			bg-transparent
-			p-0
-			backdrop:bg-black/50
-			backdrop:p-5
-		`, ($attrs as any).class)"
-		ref="dialogEl"
-		@click.self.prevent="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
+		@pointerenter="notification.timeout && !notification.isPaused && handler.pause(notification)"
+		@blur="notification.timeout && notification.isPaused && handler.resume(notification)"
 	>
-		<form>
+		<template #top>
+			<LibProgressBar
+				v-if="notification.timeout !== undefined"
+				class="
+					w-full
+					h-1
+					before:duration-[10ms]
+					-mt-1
+					-mx-[calc(var(--spacing)*2+2px)]
+					rounded-none
+				"
+				:progress="100 - (((notification.isPaused ? (notification._timer.elapsedBeforePause): (notification._timer.elapsedBeforePause + (time - notification.startTime))) / notification.timeout) * 100)"
+			/>
+		</template>
+	</lib-notification>
+</TransitionGroup>
+<!-- we don't need to worry about the user accidentally closing a non-closable dialog as keeping open=true (which the handler handles when the component tries to close) is enough to keep it open without issues -->
+<AlertDialogRoot
+	:open="topNotifications.length > 0 && topNotifications[0] !== undefined"
+	@update:open="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
+>
+	<AlertDialogPortal :to="'#root'">
+		<AlertDialogOverlay
+			class="
+				fixed inset-0 z-30
+				bg-neutral-950/20
+				data-[state=open]:animate-overlayShow
+			"
+		/>
+		<AlertDialogContent
+			class="
+				data-[state=open]:animate-contentShow
+				fixed
+				top-[50%]
+				left-[50%]
+				translate-x-[-50%]
+				translate-y-[-50%]
+				max-h-[80dvh]
+				max-w-[700px]
+				z-100
+			"
+		>
 			<lib-notification
-				v-if="topNotifications.length > 0 && topNotifications[0]"
+				class="
+					top-notification
+					text-md
+					gap-2
+					p-2
+					[&_.notification--button]:p-2
+					[&_.notification--button]:py-1
+					[&_.notification--header]:text-lg
+					[&_.notification--message]:py-3
+				"
 				:handler="handler"
-				class="top-notification"
-				:notification="topNotifications[0]"
+				:notification="topNotifications[0]!"
 				ref="topNotificationComp"
-			/>
-		</form>
-	</dialog>
-</Transition>
+			>
+				<template #title="slotProps">
+					<AlertDialogTitle v-bind="slotProps">
+						{{ slotProps.title }}
+					</AlertDialogTitle>
+				</template>
+				<template #message="slotProps">
+					<AlertDialogDescription v-bind="slotProps">
+						{{ slotProps.message }}
+					</AlertDialogDescription>
+				</template>
+			</lib-notification>
+		</AlertDialogContent>
+	</AlertDialogPortal>
+</AlertDialogRoot>
 </template>
 
 <script setup lang="ts">
-import { removeIfIn } from "@alanscodelog/utils/removeIfIn"
-import { nextTick, onBeforeUnmount, ref, shallowReactive } from "vue"
+import {
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogOverlay,
+	AlertDialogPortal,
+	AlertDialogRoot,
+	AlertDialogTitle
+} from "reka-ui"
+import { computed, ref } from "vue"
 
 import LibNotification from "./LibNotification.vue"
 
 import { useNotificationHandler } from "../../composables/useNotificationHandler.js"
-import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js"
+import { NotificationHandler } from "../../helpers/NotificationHandler.js"
 import { twMerge } from "../../utils/twMerge.js"
+import LibProgressBar from "../LibProgressBar/LibProgressBar.vue"
 import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js"
 
 defineOptions({
@@ -73,58 +135,18 @@ defineOptions({
 
 const props = defineProps<Props>()
 
-const dialogEl = ref<HTMLDialogElement | null>(null)
+const topNotifications = computed(() => handler.queue.filter(entry => entry.requiresAction).reverse())
+const notifications = computed(() => handler.queue.filter(entry => !entry.requiresAction))
 
-const isOpen = ref(false)
-const notifications = shallowReactive<NotificationEntry[]>([])
-const topNotifications = shallowReactive<NotificationEntry[]>([])
-const open = () => {
-	if (!isOpen.value) {
-		void nextTick(() => {
-			dialogEl.value!.showModal()
-			isOpen.value = true
-		})
-	}
-}
-const close = () => {
-	if (isOpen.value && topNotifications.length === 0) {
-		dialogEl.value!.close()
-		isOpen.value = false
-	}
-}
+const time = ref(Date.now())
+setInterval(() => {
+	requestAnimationFrame(() => {
+		time.value = Date.now()
+	})
+}, 50)
 
-const addNotification = (entry: NotificationEntry) => {
-	if (entry.resolution === undefined) {
-		if (entry.requiresAction) {
-			topNotifications.push(entry)
-			open()
-			entry.promise.then(() => {
-				removeIfIn(topNotifications, entry)
-				close()
-			})
-		} else {
-			notifications.splice(0, 0, entry)
-			entry.promise.then(() => {
-				removeIfIn(notifications, entry)
-			})
-		}
-	}
-}
-
-const notificationListener = (entry: NotificationEntry, type: "added" | "resolved" | "deleted"): void => {
-	if (type === "added") {
-		addNotification(entry)
-	}
-}
 
 const handler = props.handler ?? useNotificationHandler()
-
-handler.addNotificationListener(notificationListener)
-
-for (const entry of handler.queue) { addNotification(entry) }
-onBeforeUnmount(() => {
-	handler.removeNotificationListener(notificationListener)
-})
 </script>
 
 <script lang="ts">

package/src/runtime/components/LibPopup/LibPopup.vue

@@ -86,7 +86,7 @@ const backgroundEl = ref<IPopupReference | null>(null)
 
 const pos = ref<PopupPosition>({} as any)
 const modelValue = defineModel<boolean>({ default: false })
-let isOpen = false
+let isOpen = modelValue.value
 
 /**
  * We don't have access to the dialog backdrop and without extra styling, it's of 0 width/height, positioned in the center of the screen, with margins taking up all the space.
@@ -341,10 +341,6 @@ const close = () => {
 	}
 }
 
-const toggle = () => {
-	if (!isOpen) show()
-	else close()
-}
 
 const recomputeListener = () => recompute()
 
@@ -369,7 +365,7 @@ watch([modelValue, popupEl], () => {
 
 const handleMouseup = ($event: MouseEvent) => {
 	$event.preventDefault()
-	toggle()
+	close()
 }
 onMounted(() => {
 	recompute()

package/src/runtime/components/LibProgressBar/LibProgressBar.vue

@@ -28,7 +28,7 @@
 			before:shadow-black/50
 			before:rounded-sm
 			before:bg-bars-gradient
-			before:animate-[slide_10s_linear_infinite]
+			before:animate-slideBgInf
 			before:[background-size:15px_15px]
 			before:absolute
 			before:w-[var(--progress)]
@@ -171,6 +171,7 @@ type RealProps
 		& BaseInteractiveProps
 		& LabelProps
 		& {
+			/** A number from 0-100. It is auto-clamped. */
 			progress: number
 			/** Will auto hide after this given time if progress is 100% or more or less than 0% until progress is set to something else. Disabled (-1) by default. */
 			autohideOnComplete?: number

package/src/runtime/components/LibRecorder/LibRecorder.vue

@@ -53,7 +53,7 @@
 				hover:bg-red-500
 			`,
 			recording && `
-				animate-[blink_1s_infinite]
+				animate-blinkInf
 				bg-red-500
 			`,
 			(disabled || readonly) && `

package/src/runtime/composables/index.ts

@@ -13,5 +13,7 @@ export { useNotificationHandler } from "./useNotificationHandler.js"
 export { usePreHydrationValue } from "./usePreHydrationValue.js"
 export { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js"
 export { useSetupDarkMode } from "./useSetupDarkMode.js"
+export { useSetupLocale } from "./useSetupLocale.js"
 export { useShowDevOnlyKey } from "./useShowDevOnlyKey.js"
+export { useSlotVars } from "./useSlotVars.js"
 export { useSuggestions } from "./useSuggestions.js"

package/src/runtime/composables/useSlotVars.ts

@@ -0,0 +1,41 @@
+import { reactive } from "vue"
+
+/**
+ * Helper for managing props passed to slots and their fallbacks.
+ *
+ * Most slots have a default style but vue makes it hard to pass them both to the slot and the fallback content without repitition.
+ *
+ * This helper allows setting the variables from the template when creating the slot WHILE also using the created state without having to use any wrapper components, {@link https://github.com/vuejs/core/issues/1172 | see also this issue}.
+ *
+ * @example
+ * ```vue
+ * <template>
+ * 	<div>
+ * 		<slot
+ * 			v-bind="setSlotVar('title', {
+ * 				class: 'title focus-outline flex rounded-sm font-bold'
+ * 				someOtherProp: true
+ * 			})"
+ * 		>
+ * 			<FallbackComponent v-bind="slotVars.title"/>
+ * 		<slot/>
+ * 	</div>
+ * </template>
+ * <script setup lang="ts">
+ * import { useSlotVars } from "@witchcraft/ui/composables/useSlotVars"
+ * const { slotVars, setSlotVar } = useSlotVars()
+ * </script>
+ * ```
+ * The magic is that setSlotVar both sets and returns the value for the slot name passed. You can then access the state in a fallback component by accessing slotVars[slotName]. Unfortunately this is untyped unless you set the generic in useSlotsVars, but we usually don't need them to be typed.
+ */
+export function useSlotVars<T extends Record<string, Record<string, any>>, TKey extends keyof T>() {
+	const state = reactive<Record<TKey, Record<string, any>>>({} as any)
+	function setSlotVar<T extends Record<string, any>>(name: TKey, obj: T): T {
+		state[name as keyof typeof state] = obj as any
+		return state[name as keyof typeof state] as T
+	}
+	return {
+		slotVars: state,
+		setSlotVar
+	}
+}

package/src/runtime/helpers/NotificationHandler.ts

@@ -5,6 +5,7 @@ import { indent } from "@alanscodelog/utils/indent"
 import { isBlank } from "@alanscodelog/utils/isBlank"
 import { pretty } from "@alanscodelog/utils/pretty"
 import { setReadOnly } from "@alanscodelog/utils/setReadOnly"
+import { type Reactive, reactive } from "vue"
 
 export class NotificationHandler<
 	TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>,
@@ -16,9 +17,9 @@ export class NotificationHandler<
 
 	private id: number = 0
 
-	readonly queue: TEntry[] = []
+	readonly queue: Reactive<TEntry[]>
 
-	readonly history: TEntry[] = []
+	readonly history: Readonly<TEntry[]>
 
 	maxHistory: number = 100
 
@@ -35,6 +36,8 @@ export class NotificationHandler<
 		stringifier?: NotificationHandler<TRawEntry>["stringifier"]
 		maxHistory?: NotificationHandler<TRawEntry>["maxHistory"]
 	} = {}) {
+		this.queue = reactive([])
+		this.history = reactive([])
 		if (timeout) this.timeout = timeout
 		if (maxHistory) this.maxHistory = maxHistory
 		if (stringifier) this.stringifier = stringifier
@@ -126,11 +129,12 @@ export class NotificationHandler<
 		}) as NotificationPromise
 
 		if (entry.timeout !== undefined) {
-			setTimeout(() => {
-				entry.resolve(entry.cancellable)
-			}, entry.timeout)
+			entry._timer = {
+				elapsedBeforePause: 0
+			}
+			this.resume(entry as any)
 		}
-		this.queue.push(entry)
+		this.queue.push(entry as any)
 		for (const listener of this.listeners) {
 			listener(entry, "added")
 		}
@@ -140,18 +144,43 @@ export class NotificationHandler<
 			for (const listener of this.listeners) {
 				listener(entry, "resolved")
 			}
-			this.history.push(entry)
+			;(this.history as any).push(entry)
 			if (this.history.length > this.maxHistory) {
-				this.history.splice(0, 1)
+				;(this.history as any).splice(0, 1)
 				for (const listener of this.listeners) {
 					listener(entry, "deleted")
 				}
 			}
-			this.queue.splice(this.queue.indexOf(entry), 1)
+			this.queue.splice(this.queue.indexOf(entry as any), 1)
 			return res
 		}) satisfies NotificationPromise as any
 	}
 
+	pause(notification: NotificationEntry): void {
+		if (notification.timeout === undefined) {
+			throw new Error(`Cannot pause notification with no timeout: ${notification.id}`)
+		}
+		if (notification.isPaused) {
+			throw new Error(`Cannot pause notification that is already paused: ${notification.id}`)
+		}
+		notification.isPaused = true
+		clearTimeout(notification._timer.id)
+		notification._timer.elapsedBeforePause += (Date.now() - notification.startTime)
+	}
+
+	resume(notification: NotificationEntry): void {
+		if (notification.timeout === undefined) {
+			throw new Error(`Cannot resume notification with no timeout: ${notification.id}`)
+		}
+		notification.isPaused = false
+		notification.startTime = Date.now()
+		const remaining = notification.timeout - notification._timer.elapsedBeforePause
+		clearTimeout(notification._timer.id)
+		notification._timer.id = setTimeout(() => {
+			notification.resolve(notification.cancellable)
+		}, remaining)
+	}
+
 	static resolveToDefault(notification: NotificationEntry): void {
 		notification.resolve(notification.default)
 	}
@@ -174,19 +203,6 @@ export class NotificationHandler<
 	clear(): void {
 		setReadOnly(this, "history", [])
 	}
-
-	addNotificationListener(cb: NotificationListener<TEntry>): void {
-		this.listeners.push(cb)
-	}
-
-	removeNotificationListener(cb: NotificationListener<TEntry>): void {
-		const exists = this.listeners.indexOf(cb)
-		if (exists > -1) {
-			this.listeners.splice(exists, 1)
-		} else {
-			throw new Error(`Listener does not exist: ${cb.toString()}`)
-		}
-	}
 }
 
 export type NotificationPromise<TOption extends string = string> = Promise<TOption>
@@ -221,6 +237,12 @@ export type NotificationEntry<
 	timeout?: number
 	resolution?: string
 	id: number
+	startTime: number
+	isPaused: boolean
+	_timer: {
+		id?: ReturnType<typeof setTimeout>
+		elapsedBeforePause: number
+	}
 }
 
 export type NotificationListener<TEntry extends NotificationEntry<any>> = (notification: TEntry, type: "added" | "resolved" | "deleted") => void