@witchcraft/ui 0.3.2 → 0.3.3

package/dist/runtime/helpers/NotificationHandler.js

@@ -4,12 +4,13 @@ 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 { reactive } from "vue";
 export class NotificationHandler {
   timeout = 5e3;
   debug = false;
   id = 0;
-  queue = [];
-  history = [];
+  queue;
+  history;
   maxHistory = 100;
   listeners = [];
   stringifier;
@@ -18,6 +19,8 @@ export class NotificationHandler {
     stringifier,
     maxHistory
   } = {}) {
+    this.queue = reactive([]);
+    this.history = reactive([]);
     if (timeout) this.timeout = timeout;
     if (maxHistory) this.maxHistory = maxHistory;
     if (stringifier) this.stringifier = stringifier;
@@ -102,9 +105,10 @@ export class NotificationHandler {
       entry.resolve = _resolve;
     });
     if (entry.timeout !== void 0) {
-      setTimeout(() => {
-        entry.resolve(entry.cancellable);
-      }, entry.timeout);
+      entry._timer = {
+        elapsedBeforePause: 0
+      };
+      this.resume(entry);
     }
     this.queue.push(entry);
     for (const listener of this.listeners) {
@@ -115,8 +119,10 @@ export class NotificationHandler {
       for (const listener of this.listeners) {
         listener(entry, "resolved");
       }
+      ;
       this.history.push(entry);
       if (this.history.length > this.maxHistory) {
+        ;
         this.history.splice(0, 1);
         for (const listener of this.listeners) {
           listener(entry, "deleted");
@@ -126,6 +132,29 @@ export class NotificationHandler {
       return res;
     });
   }
+  pause(notification) {
+    if (notification.timeout === void 0) {
+      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) {
+    if (notification.timeout === void 0) {
+      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) {
     notification.resolve(notification.default);
   }
@@ -148,15 +177,4 @@ export class NotificationHandler {
   clear() {
     setReadOnly(this, "history", []);
   }
-  addNotificationListener(cb) {
-    this.listeners.push(cb);
-  }
-  removeNotificationListener(cb) {
-    const exists = this.listeners.indexOf(cb);
-    if (exists > -1) {
-      this.listeners.splice(exists, 1);
-    } else {
-      throw new Error(`Listener does not exist: ${cb.toString()}`);
-    }
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@witchcraft/ui",
-	"version": "0.3.2",
+	"version": "0.3.3",
 	"description": "Vue component library.",
 	"type": "module",
 	"main": "./dist/runtime/main.lib.js",

package/src/runtime/assets/animations.css

@@ -0,0 +1,75 @@
+@theme {
+	--animate-blinkInf: blink 1s linear-infinite;
+	@keyframes blink {
+		0% {
+			opacity: 0;
+		}
+
+		25% {
+			opacity: 1;
+		}
+
+		75% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: 0;
+		}
+	}
+
+	--animate-slideBgInf: slide-bg 10s linear-infinite;
+	@keyframes slide {
+		0% {
+			background-position:0%;
+		}
+		100% {
+			background-position: 100%;
+		}
+	}
+
+	--animate-hide: hide 500ms ease-in;
+	@keyframes hide {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+	--animate-slideIn: slideIn 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes slideIn {
+		from {
+			transform: translateX(100%);
+			opacity: 0;
+		}
+		to {
+			transform: translateX(0);
+			opacity: 1;
+		}
+	}
+
+	--animate-overlayShow: overlayShow 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes overlayShow {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	--animate-contentShow: contentShow 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes contentShow {
+		from {
+			opacity: 0;
+			transform: translate(0, -10%) scale(0.96);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+}
+

package/src/runtime/assets/base.css

@@ -34,33 +34,6 @@ animations can be calculated correctly. */
 	user-select: none;
 }
 
-/* Animations */
-@keyframes blink {
-	0% {
-		opacity: 0;
-	}
-
-	25% {
-		opacity: 1;
-	}
-
-	75% {
-		opacity: 1;
-	}
-
-	100% {
-		opacity: 0;
-	}
-}
-
-@keyframes slide {
-	0% {
-		background-position:0%;
-	}
-	100% {
-		background-position: 100%;
-	}
-}
 
 a {
 	@apply link-like;

package/src/runtime/assets/tailwind.css

@@ -1,5 +1,6 @@
 /* For storybook, not exported. */
 @import "tailwindcss" source("../../");
 @import "./theme.css";
+@import "./animations.css";
 @import "./base.css";
 @import "./utils.css";

package/src/runtime/components/LibColorPicker/LibColorPicker.stories.ts

@@ -23,7 +23,7 @@ export const Primary: Story = {
 		components,
 		setup: () => {
 			const color = ref({ r: 0, g: 0, b: 0/* , a: 0.5 */, ...(args.modelValue) })
-			delete args.modelValue
+			delete (args as any).modelValue
 			const handleChange = (e: any) => {
 				color.value = { ...e }
 			}

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

@@ -1,6 +1,8 @@
 <template>
 <div
-	:class="twMerge(`notification
+	v-if="notification"
+	:class="twMerge(`
+		notification
 		max-w-700px
 		bg-neutral-50
 		dark:bg-neutral-900
@@ -8,11 +10,15 @@
 		dark:text-bg
 		border
 		border-neutral-400
+		dark:border-neutral-700
 		rounded-sm
 		focus-outline
-		flex-flex-col
+		flex
+		flex-col
 		gap-2
-		p-2 m-2
+		p-1
+		text-sm
+		focus:border-accent-500
 	`,
 		($attrs as any).class)"
 	v-bind="{ ...$attrs, class: undefined }"
@@ -20,30 +26,59 @@
 	ref="notificationEl"
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
 >
-	<div class="notification--header flex-reverse flex justify-between">
-		<div
+	<slot
+		name="top"
+		:notification="notification"
+	/>
+	<div
+		class="
+			notification--header
+			flex-reverse
+			flex
+			justify-between
+			items-center
+		"
+	>
+		<slot
 			v-if="notification.title"
-			tabindex="0"
-			class="title
-				focus-outline flex
-				rounded-sm
-				font-bold
-			"
+			name="title"
+			v-bind="setSlotVar('title', {
+				title: notification.title,
+				class: `
+					notification--title
+					focus-outline
+					rounded-sm
+					font-bold
+				`,
+				tabindex: 0
+			})"
 		>
-			{{ notification.title }}
-		</div>
+			<div
+				v-bind="slotVars.title"
+			>
+				{{ notification.title }}
+			</div>
+		</slot>
 		<div class="notification--spacer flex-1"/>
 		<div class="actions flex">
 			<LibButton
 				:border="false"
-				class="notification--copy-button text-neutral-700"
+				class="
+					notification--title-button
+					notification--copy-button
+					text-neutral-700
+					dark:text-neutral-300
+				"
 				@click="copy(handler ? handler.stringify(notification) : JSON.stringify(notification))"
 			>
 				<icon><i-fa6-regular-copy/></icon>
 			</LibButton>
 			<lib-button
 				v-if="notification.cancellable"
-				class="notification--cancel-button"
+				class="
+					notification--title-button
+					notification--cancel-button
+				"
 				:border="false"
 				@click="NotificationHandler.dismiss(notification)"
 			>
@@ -51,12 +86,27 @@
 			</lib-button>
 		</div>
 	</div>
-	<div
-		class="notification--message whitespace-pre-wrap"
-		tabindex="0"
+	<slot
+		v-if="notification.message"
+		name="message"
+		v-bind="setSlotVar('message', {
+			class: `
+				notification--message
+				whitespace-pre-wrap
+				text-neutral-800
+				dark:text-neutral-200
+				mb-1
+			`,
+			message: notification.message,
+			tabindex: 0
+		})"
 	>
-		{{ notification.message }}
-	</div>
+		<div
+			v-bind="slotVars.message"
+		>
+			{{ notification.message }}
+		</div>
+	</slot>
 	<div class="notification--footer flex items-end justify-between">
 		<div
 			v-if="notification.code"
@@ -67,19 +117,23 @@
 		<div class="notification--footer-spacer flex-1 py-1"/>
 		<div
 			v-if="notification.options"
-			class="notification--options
-				flex flex-wrap justify-end
+			class="
+				notification--options
+				flex
+				flex-wrap
+				justify-end
 				gap-2
 			"
 		>
 			<lib-button
 				:label="option"
 				:class="twMerge(`
+					notification--button
 					notification--option-button
+					px-2
 				`,
-					buttonColors[i] == 'secondary' && 'p-0'
+					notification.default === option && `notification--default`
 				)"
-				:border="buttonColors[i] !== 'secondary'"
 				:color="buttonColors[i]"
 				v-for="option, i in notification.options"
 				:key="option"
@@ -91,11 +145,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type HTMLAttributes, ref, useAttrs } from "vue"
+import { computed, type HTMLAttributes, onMounted, ref, useAttrs } from "vue"
 
 import IFa6RegularCopy from "~icons/fa6-regular/copy"
 import IFa6SolidXmark from "~icons/fa6-solid/xmark"
 
+import { useSlotVars } from "../../composables/useSlotVars.js"
 import { copy } from "../../helpers/copy.js"
 import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js"
 import { twMerge } from "../../utils/twMerge.js"
@@ -109,6 +164,9 @@ defineOptions({
 })
 const $attrs = useAttrs()
 
+const { setSlotVar, slotVars } = useSlotVars()
+
+
 const props = withDefaults(defineProps<Props>(), {
 	handler: undefined
 })
@@ -120,6 +178,9 @@ const getColor = (notification: NotificationEntry, option: string): "ok" | "prim
 const buttonColors = computed(() => props.notification.options.map((option: any /* what ??? */) => getColor(props.notification, option)))
 
 const notificationEl = ref<null | HTMLElement>(null)
+onMounted(() => {
+	notificationEl.value?.focus()
+})
 defineExpose({
 	focus: () => {
 		notificationEl.value?.focus()

package/src/runtime/components/LibNotifications/LibNotifications.stories.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Meta, StoryObj } from "@storybook/vue3"
-import { reactive, ref } from "vue"
+import { ref } from "vue"
 
 import LibNotifications from "./LibNotifications.vue"
 
@@ -23,7 +23,7 @@ export const Primary: Story = {
 	render: args => ({
 		components,
 		setup() {
-			const handler = reactive(new NotificationHandler())
+			const handler = new NotificationHandler({})
 
 			let count = 0
 
@@ -76,7 +76,7 @@ export const Primary: Story = {
 				void handler.notify({
 					title: withTitle.value ? `Notification(${count})` : undefined,
 					message: `This is a notification. No action required.`,
-					timeout: disableTimeout.value ? false : 2000
+					timeout: disableTimeout.value ? false : 5000
 				})
 			}
 			return {
@@ -97,7 +97,7 @@ export const Primary: Story = {
 		backgrounds: { disable: true },
 		// <lib-debug>{{args.handler}}</lib-debug>
 		template: `
-	<lib-root :outline="args.outline">
+	<lib-root :outline="args.outline" :notification-handler="handler">
 		<lib-button :label="'Notify Timeoutable'" @click="notifyTimeoutable()"></lib-button>
 		<lib-button :label="'Notify RequiresAction'" @click="notifyRequiresAction()"></lib-button>
 		<lib-button :label="'Notify Non-Cancellable that RequiresAction'" @click="notifyNonCancellableRequiresAction()"></lib-button>

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">