@witchcraft/ui 0.3.12 → 0.3.13

package/dist/module.json

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

package/dist/runtime/components/LibColorInput/LibColorInput.d.vue.ts

@@ -34,16 +34,16 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
     onCancel?: (() => any) | undefined;
-    onSave?: (() => any) | undefined;
     "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
+    onSave?: (() => any) | undefined;
 }>, {
     border: boolean;
     allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
     };
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {
         stringColor: any;

package/dist/runtime/components/LibColorInput/LibColorInput.vue.d.ts

@@ -34,16 +34,16 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
     onCancel?: (() => any) | undefined;
-    onSave?: (() => any) | undefined;
     "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
+    onSave?: (() => any) | undefined;
 }>, {
     border: boolean;
     allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
     };
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {
         stringColor: any;

package/dist/runtime/components/LibColorPicker/LibColorPicker.d.vue.ts

@@ -39,18 +39,18 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
     onCancel?: (() => any) | undefined;
-    onSave?: ((val: RgbaColor) => any) | undefined;
     "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
+    onSave?: ((val: RgbaColor) => any) | undefined;
 }>, {
     border: boolean;
-    valid: boolean;
     allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
         fromStringToHsva?: (string: string) => HsvaColor | undefined;
     };
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
+    valid: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/LibColorPicker/LibColorPicker.vue.d.ts

@@ -39,18 +39,18 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
     onCancel?: (() => any) | undefined;
-    onSave?: ((val: RgbaColor) => any) | undefined;
     "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
+    onSave?: ((val: RgbaColor) => any) | undefined;
 }>, {
     border: boolean;
-    valid: boolean;
     allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
         fromStringToHsva?: (string: string) => HsvaColor | undefined;
     };
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
+    valid: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/LibInputDeprecated/LibInputDeprecated.d.vue.ts

@@ -110,8 +110,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     blur: (val: FocusEvent) => any;
     input: (val: InputEvent) => any;
     submit: (val: string, suggestion?: any) => any;
-    keydown: (val: KeyboardEvent) => any;
     focus: (val: FocusEvent) => any;
+    keydown: (val: KeyboardEvent) => any;
     indicatorClick: (val: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<Props & {
     values?: string[] | undefined;
@@ -122,10 +122,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     onInput?: ((val: InputEvent) => any) | undefined;
     onSubmit?: ((val: string, suggestion?: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onFocus?: ((val: FocusEvent) => any) | undefined;
+    onKeydown?: ((val: KeyboardEvent) => any) | undefined;
     "onUpdate:inputValue"?: ((value: string) => any) | undefined;
     "onUpdate:values"?: ((value: string[] | undefined) => any) | undefined;
-    onKeydown?: ((val: KeyboardEvent) => any) | undefined;
-    onFocus?: ((val: FocusEvent) => any) | undefined;
     onIndicatorClick?: ((val: MouseEvent) => any) | undefined;
 }>, {
     disabled: boolean;

package/dist/runtime/components/LibInputDeprecated/LibInputDeprecated.vue.d.ts

@@ -110,8 +110,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     blur: (val: FocusEvent) => any;
     input: (val: InputEvent) => any;
     submit: (val: string, suggestion?: any) => any;
-    keydown: (val: KeyboardEvent) => any;
     focus: (val: FocusEvent) => any;
+    keydown: (val: KeyboardEvent) => any;
     indicatorClick: (val: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<Props & {
     values?: string[] | undefined;
@@ -122,10 +122,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     onInput?: ((val: InputEvent) => any) | undefined;
     onSubmit?: ((val: string, suggestion?: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onFocus?: ((val: FocusEvent) => any) | undefined;
+    onKeydown?: ((val: KeyboardEvent) => any) | undefined;
     "onUpdate:inputValue"?: ((value: string) => any) | undefined;
     "onUpdate:values"?: ((value: string[] | undefined) => any) | undefined;
-    onKeydown?: ((val: KeyboardEvent) => any) | undefined;
-    onFocus?: ((val: FocusEvent) => any) | undefined;
     onIndicatorClick?: ((val: MouseEvent) => any) | undefined;
 }>, {
     disabled: boolean;

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

@@ -92,7 +92,7 @@
 		</div>
 	</div>
 	<slot
-		v-if="notification.message"
+		v-if="notification.message && !notification.component"
 		name="message"
 		v-bind="setSlotVar('message', {
   class: `
@@ -112,6 +112,21 @@
 			{{ notification.message }}
 		</div>
 	</slot>
+	<Component
+		v-if="notification.component"
+		:is="notification.component"
+		v-bind="{
+  message: notification.message,
+  messageClasses: `
+					notification--message
+					whitespace-pre-wrap
+					text-neutral-800
+					dark:text-neutral-200
+					mb-1
+				`,
+  ...notification.componentProps ?? {}
+}"
+	/>
 	<div class="notification--footer flex items-end justify-between">
 		<div
 			v-if="notification.code"

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

@@ -0,0 +1,6 @@
+import type { CustomNotificationComponentProps } from "../../types/index.js";
+type __VLS_Props = CustomNotificationComponentProps & {
+    customProp: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,29 @@
+<template>
+<div class="border-2 border-accent-500 p-1 px-2 rounded-sm bg-accent-500/10">
+	<div class="text-lg">
+		Custom Message Component
+	</div>
+	<div class="font-bold">
+		Original message:
+	</div>
+	<div
+		:class="props.messageClasses"
+	>
+		{{ props.message }}
+	</div>
+	<div class="font-bold">
+		Custom Prop:
+	</div>
+	<div>
+		{{ props.customProp }}
+	</div>
+</div>
+</template>
+
+<script setup>
+const props = defineProps({
+  message: { type: String, required: true },
+  messageClasses: { type: String, required: false },
+  customProp: { type: String, required: true }
+});
+</script>

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

@@ -0,0 +1,6 @@
+import type { CustomNotificationComponentProps } from "../../types/index.js";
+type __VLS_Props = CustomNotificationComponentProps & {
+    customProp: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/LibPopup/LibPopup.d.vue.ts

@@ -22,12 +22,12 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
-    canClose: boolean;
     useDialogForBackdrop: false;
     useBackdrop: boolean;
     preferredHorizontal: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
     preferredVertical: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
     avoidRepositioning: boolean;
+    canClose: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     button?: (props: {
         extractEl: (_: any) => any;

package/dist/runtime/components/LibPopup/LibPopup.vue.d.ts

@@ -22,12 +22,12 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
-    canClose: boolean;
     useDialogForBackdrop: false;
     useBackdrop: boolean;
     preferredHorizontal: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
     preferredVertical: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
     avoidRepositioning: boolean;
+    canClose: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     button?: (props: {
         extractEl: (_: any) => any;

package/dist/runtime/helpers/NotificationHandler.d.ts

@@ -1,5 +1,5 @@
 import type { AnyFunction, MakeRequired } from "@alanscodelog/utils";
-import { type Reactive } from "vue";
+import { type Component, type Reactive } from "vue";
 export declare class NotificationHandler<TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>, TEntry extends NotificationEntry<TRawEntry> = NotificationEntry<TRawEntry>> {
     timeout: number;
     debug: boolean;
@@ -26,7 +26,6 @@ export declare class NotificationHandler<TRawEntry extends RawNotificationEntry<
 }
 export type NotificationPromise<TOption extends string = string> = Promise<TOption>;
 export type RawNotificationEntry<TOptions extends string[] = ["Ok", "Cancel"], TCancellable extends boolean | TOptions[number] = "Cancel"> = {
-    message: string;
     title?: string;
     code?: string;
     /** @default ["Ok", "Cancel"] */
@@ -41,6 +40,10 @@ export type RawNotificationEntry<TOptions extends string[] = ["Ok", "Cancel"], T
     /** @default false if cancellable, otherwise the default timeout */
     timeout?: number | boolean;
     icon?: string;
+    message: string;
+    component?: string | Component;
+    /** By default the component is passed the message and the messageClasses. Both will be overriden if you set them on componentProps. */
+    componentProps?: Record<string, any>;
 };
 export type NotificationEntry<TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>> = Omit<MakeRequired<TRawEntry, "options" | "requiresAction" | "default" | "dangerous">, "cancellable"> & {
     promise: NotificationPromise;

package/dist/runtime/helpers/NotificationHandler.js

@@ -4,7 +4,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 { reactive } from "vue";
+import { markRaw, reactive } from "vue";
 export class NotificationHandler {
   timeout = 5e3;
   debug = false;
@@ -87,6 +87,7 @@ export class NotificationHandler {
       default: "Ok",
       cancellable: rawEntry.cancellable,
       ...rawEntry,
+      component: rawEntry.component && typeof rawEntry.component !== "string" ? markRaw(rawEntry.component) : void 0,
       dangerous: rawEntry.dangerous ?? [],
       timeout: rawEntry.timeout === true ? this.timeout : rawEntry.timeout !== void 0 && rawEntry.timeout !== false ? rawEntry.timeout : void 0
     };

package/dist/runtime/types/index.d.ts

@@ -123,3 +123,7 @@ export type RangeDate = {
     start?: SingleDate;
     end?: SingleDate;
 };
+export type CustomNotificationComponentProps = {
+    message: string;
+    messageClasses?: string;
+};

package/dist/runtime/utils/notifyIfError.d.ts

@@ -1,3 +1,4 @@
+import type { NotificationEntry } from "../helpers/NotificationHandler.js";
 /**
  * Notifies the user if the given value is an error. Useful for making non-critical errors don't go unnoticed.
  *
@@ -5,10 +6,11 @@
  *
  * If the value is not an error, it is returned.
  */
-export declare function notifyIfError<T>(err: T, { logger, ns, force }?: {
+export declare function notifyIfError<T>(err: T, { logger, ns, force, entry }?: {
     logger?: {
         debug: (...args: any[]) => void;
     };
     ns?: string;
     force?: boolean;
+    entry?: Partial<NotificationEntry<any>>;
 }): T;

package/dist/runtime/utils/notifyIfError.js

@@ -3,7 +3,8 @@ import { useNotificationHandler } from "../composables/useNotificationHandler.js
 export function notifyIfError(err, {
   logger,
   ns,
-  force = false
+  force = false,
+  entry
 } = {}) {
   if (force || err instanceof Error) {
     const errMessage = {
@@ -22,7 +23,8 @@ export function notifyIfError(err, {
       ...errMessage,
       options: ["Ok"],
       cancellable: "Ok",
-      timeout: true
+      timeout: true,
+      ...entry
     });
   }
   return err;

package/package.json

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

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

@@ -2,6 +2,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 
 import LibNotification from "./LibNotification.vue"
+import LibNotificationTestMessageComponent from "./LibNotificationTestMessageComponent.vue"
 
 import { NotificationHandler } from "../../helpers/NotificationHandler.js"
 import * as components from "../index.js"
@@ -21,7 +22,11 @@ type Story = StoryObj<typeof LibNotification>
 
 export const Primary: Story = {
 	render: args => ({
-		components: { ...components, LibNotification },
+		components: {
+			...components,
+			LibNotification,
+			LibNotificationTestMessageComponent
+		},
 		setup() {
 			return { args }
 		},
@@ -136,3 +141,19 @@ export const CustomDefaultAndDangerousOption: Story = {
 		})
 	}
 }
+
+
+export const CustomMessageComponent: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		// @ts-expect-error calling protected method
+		notification: handler._createEntry({
+			...Primary.args!.notification,
+			component: LibNotificationTestMessageComponent,
+			componentProps: {
+				customProp: "Custom Prop"
+			}
+		})
+	}
+}

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

@@ -90,7 +90,7 @@
 		</div>
 	</div>
 	<slot
-		v-if="notification.message"
+		v-if="notification.message && !notification.component"
 		name="message"
 		v-bind="setSlotVar('message', {
 			class: `
@@ -110,6 +110,21 @@
 			{{ notification.message }}
 		</div>
 	</slot>
+	<Component
+		v-if="notification.component"
+		:is="notification.component"
+		v-bind="{
+			message: notification.message,
+			messageClasses: `
+					notification--message
+					whitespace-pre-wrap
+					text-neutral-800
+					dark:text-neutral-200
+					mb-1
+				`,
+			...(notification.componentProps ?? {})
+		}"
+	/>
 	<div class="notification--footer flex items-end justify-between">
 		<div
 			v-if="notification.code"

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

@@ -0,0 +1,27 @@
+<template>
+<div class="border-2 border-accent-500 p-1 px-2 rounded-sm bg-accent-500/10">
+	<div class="text-lg">
+		Custom Message Component
+	</div>
+	<div class="font-bold">
+		Original message:
+	</div>
+	<div
+		:class="props.messageClasses"
+	>
+		{{ props.message }}
+	</div>
+	<div class="font-bold">
+		Custom Prop:
+	</div>
+	<div>
+		{{ props.customProp }}
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import type { CustomNotificationComponentProps } from "../../types/index.js"
+
+const props = defineProps<CustomNotificationComponentProps & { customProp: string }>()
+</script>

package/src/runtime/helpers/NotificationHandler.ts

@@ -5,7 +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"
+import { type Component, markRaw, type Reactive, reactive } from "vue"
 
 export class NotificationHandler<
 	TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>,
@@ -99,6 +99,7 @@ export class NotificationHandler<
 			default: "Ok",
 			cancellable: rawEntry.cancellable,
 			...rawEntry,
+			component: rawEntry.component && typeof rawEntry.component !== "string" ? markRaw(rawEntry.component) : undefined,
 			dangerous: rawEntry.dangerous ?? [],
 			timeout: rawEntry.timeout === true
 				? this.timeout
@@ -211,7 +212,6 @@ export type RawNotificationEntry<
 	TOptions extends string[] = ["Ok", "Cancel"],
 	TCancellable extends boolean | TOptions[number] = "Cancel"
 > = {
-	message: string
 	title?: string
 	code?: string
 	/** @default ["Ok", "Cancel"] */
@@ -226,6 +226,10 @@ export type RawNotificationEntry<
 	/** @default false if cancellable, otherwise the default timeout */
 	timeout?: number | boolean
 	icon?: string
+	message: string
+	component?: string | Component
+	/** By default the component is passed the message and the messageClasses. Both will be overriden if you set them on componentProps. */
+	componentProps?: Record<string, any>
 }
 
 export type NotificationEntry<

package/src/runtime/types/index.ts

@@ -118,3 +118,8 @@ export type RangeDate = {
 	start?: SingleDate
 	end?: SingleDate
 }
+
+export type CustomNotificationComponentProps = {
+	message: string
+	messageClasses?: string
+}

package/src/runtime/utils/notifyIfError.ts

@@ -1,6 +1,7 @@
 import { TypedError } from "@alanscodelog/utils/TypedError"
 
 import { useNotificationHandler } from "../composables/useNotificationHandler.js"
+import type { NotificationEntry } from "../helpers/NotificationHandler.js"
 
 /**
  * Notifies the user if the given value is an error. Useful for making non-critical errors don't go unnoticed.
@@ -13,13 +14,15 @@ export function notifyIfError<T>(
 	err: T, {
 		logger,
 		ns,
-		force = false
+		force = false,
+		entry
 	}: {
 		logger?: { debug: (...args: any[]) => void }
 		/* Logger namespace. */
 		ns?: string
 		/* force interpret as error, for catch blocks */
 		force?: boolean
+		entry?: Partial<NotificationEntry<any>>
 	} = {}): T {
 	if (force || err instanceof Error) {
 		const errMessage = {
@@ -38,7 +41,8 @@ export function notifyIfError<T>(
 			...errMessage,
 			options: ["Ok"],
 			cancellable: "Ok",
-			timeout: true
+			timeout: true,
+			...entry
 		})
 	}
 	return err