@witchcraft/ui 0.3.9 → 0.3.11

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.9",
+  "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,11 +170,29 @@ const props = defineProps({
   notification: { type: null, required: true },
   handler: { type: Object, required: false, default: void 0 }
 });
-const getColor = (notification, option) => notification.default === option ? "primary" : notification.dangerous.includes(option) ? "danger" : "secondary";
+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/dist/runtime/utils/doInvertTextColor.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns whether the text should be inverted (to white) based on the given color.
+ */
+export declare function doInvertTextColor(color: string): boolean;

package/dist/runtime/utils/doInvertTextColor.js

@@ -0,0 +1,8 @@
+import Color from "colorjs.io";
+export function doInvertTextColor(color) {
+  const c = new Color(color).to("hsv");
+  const v = c.hsv[2];
+  const a = c.alpha;
+  const doInvert = !!(v < 50 || (a === void 0 || a < 0.5));
+  return doInvert;
+}

package/package.json

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

package/src/module.ts

@@ -21,7 +21,6 @@ import { unpluginIconViteOptions } from "./runtime/build/unpluginIconViteOptions
 import { themeConvertionOpts } from "./runtime/tailwind/themeConvertionOpts.js"
 import { theme } from "./runtime/theme.js"
 
-import pkg from "../package.json" assert { type: "json" }
 
 const knownDirectives = ["vExtractRootEl", "vResizableCols", "vResizeObserver", "vResizableCols"] as const
 

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,16 +174,46 @@ const props = withDefaults(defineProps<Props>(), {
 	handler: undefined
 })
 
-const getColor = (notification: NotificationEntry, option: string): "ok" | "primary" | "danger" | "secondary" => notification.default === option ? "primary" : notification.dangerous.includes(option) ? "danger" : "secondary"
+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"
+		: notification.default === option
+			? "primary"
+			: "secondary"
+}
 
 /* Todo make this more flexible? */
 
 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

package/src/runtime/utils/doInvertTextColor.ts

@@ -0,0 +1,11 @@
+import Color from "colorjs.io"
+/**
+ * Returns whether the text should be inverted (to white) based on the given color.
+ */
+export function doInvertTextColor(color: string) {
+	const c = new Color(color).to("hsv")
+	const v = c.hsv[2]
+	const a = c.alpha
+	const doInvert = !!(v! < 50 || (a === undefined || a < 0.5))
+	return doInvert
+}