@witchcraft/ui 0.3.2 → 0.3.4

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