@witchcraft/ui 0.3.10 → 0.3.11

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/LibNotifications/LibNotification.d.vue.ts

@@ -11,7 +11,13 @@ Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     focus: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    pause: (notification: NotificationEntry) => any;
+    resume: (notification: NotificationEntry) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onPause?: ((notification: NotificationEntry) => any) | undefined;
+    onResume?: ((notification: NotificationEntry) => any) | undefined;
+}>, {
     handler: NotificationHandler;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     top?: (props: {

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

@@ -20,13 +20,16 @@
 		p-1
 		text-sm
 		focus:border-accent-500
+		focus-within:border-accent-500
 	`,
   $attrs.class
 )"
 	v-bind="{ ...$attrs, class: void 0 }"
 	tabindex="0"
+	:data-id="notification.id"
 	ref="notificationEl"
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
+	@pointerenter="notification.timeout && !notification.isPaused && emit('pause', notification)"
 >
 	<slot
 		name="top"
@@ -148,7 +151,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, useAttrs } from "vue";
+import { computed, onBeforeUnmount, 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";
@@ -167,13 +170,29 @@ const props = defineProps({
   notification: { type: null, required: true },
   handler: { type: Object, required: false, default: void 0 }
 });
+const emit = defineEmits(["pause", "resume"]);
 const getColor = (notification, option) => {
   return notification.dangerous.includes(option) ? "danger" : notification.default === option ? "primary" : "secondary";
 };
 const buttonColors = computed(() => props.notification.options.map((option) => getColor(props.notification, option)));
 const notificationEl = ref(null);
+const mousedownAbortController = new AbortController();
 onMounted(() => {
   notificationEl.value?.focus();
+  if (props.notification.timeout) {
+    window.addEventListener("pointerdown", (e) => {
+      if (!e.target || !(e.target instanceof HTMLElement)) return;
+      if (e.target === notificationEl.value || notificationEl.value?.contains(e.target)) {
+        if (props.notification.isPaused) return;
+        emit("pause", props.notification);
+      } else {
+        emit("resume", props.notification);
+      }
+    }, { signal: mousedownAbortController.signal });
+  }
+});
+onBeforeUnmount(() => {
+  mousedownAbortController.abort();
 });
 defineExpose({
   focus: () => {

package/dist/runtime/components/LibNotifications/LibNotification.vue.d.ts

@@ -11,7 +11,13 @@ Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     focus: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    pause: (notification: NotificationEntry) => any;
+    resume: (notification: NotificationEntry) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onPause?: ((notification: NotificationEntry) => any) | undefined;
+    onResume?: ((notification: NotificationEntry) => any) | undefined;
+}>, {
     handler: NotificationHandler;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     top?: (props: {

package/dist/runtime/components/LibNotifications/LibNotifications.vue

@@ -32,8 +32,8 @@
 		class="overflow-hidden my-2"
 		v-for="notification of notifications"
 		:key="notification.id"
-		@pointerenter="notification.timeout && !notification.isPaused && handler.pause(notification)"
-		@blur="notification.timeout && notification.isPaused && handler.resume(notification)"
+		@pause="handler.pause(notification)"
+		@resume="handler.resume(notification)"
 	>
 		<template #top>
 			<LibProgressBar

package/package.json

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

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

@@ -19,12 +19,15 @@
 		p-1
 		text-sm
 		focus:border-accent-500
+		focus-within:border-accent-500
 	`,
 		($attrs as any).class)"
 	v-bind="{ ...$attrs, class: undefined }"
 	tabindex="0"
+	:data-id="notification.id"
 	ref="notificationEl"
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
+	@pointerenter="notification.timeout && !notification.isPaused && emit('pause', notification)"
 >
 	<slot
 		name="top"
@@ -145,7 +148,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type HTMLAttributes, onMounted, ref, useAttrs } from "vue"
+import { computed, type HTMLAttributes, onBeforeUnmount, onMounted, ref, useAttrs } from "vue"
 
 import IFa6RegularCopy from "~icons/fa6-regular/copy"
 import IFa6SolidXmark from "~icons/fa6-solid/xmark"
@@ -171,6 +174,11 @@ const props = withDefaults(defineProps<Props>(), {
 	handler: undefined
 })
 
+const emit = defineEmits<{
+	(e: "pause", notification: NotificationEntry): void
+	(e: "resume", notification: NotificationEntry): void
+}>()
+
 const getColor = (notification: NotificationEntry, option: string): "ok" | "primary" | "danger" | "secondary" => {
 	return notification.dangerous.includes(option)
 		? "danger"
@@ -184,9 +192,28 @@ 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)
+
+const mousedownAbortController = new AbortController()
+
 onMounted(() => {
 	notificationEl.value?.focus()
+	if (props.notification.timeout) {
+		window.addEventListener("pointerdown", e => {
+			if (!e.target || !(e.target instanceof HTMLElement)) return
+			if (e.target === notificationEl.value || notificationEl.value?.contains(e.target)) {
+				if (props.notification.isPaused) return
+				emit("pause", props.notification)
+			} else {
+				emit("resume", props.notification)
+			}
+		}, { signal: mousedownAbortController.signal })
+	}
 })
+
+onBeforeUnmount(() => {
+	mousedownAbortController.abort()
+})
+
 defineExpose({
 	focus: () => {
 		notificationEl.value?.focus()

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

@@ -32,8 +32,8 @@
 		class="overflow-hidden my-2"
 		v-for="notification of notifications"
 		:key="notification.id"
-		@pointerenter="notification.timeout && !notification.isPaused && handler.pause(notification)"
-		@blur="notification.timeout && notification.isPaused && handler.resume(notification)"
+		@pause="handler.pause(notification)"
+		@resume="handler.resume(notification)"
 	>
 		<template #top>
 			<LibProgressBar