@witchcraft/ui 0.3.12 → 0.3.14

package/dist/module.json

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

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/LibTable/LibTable.d.vue.ts

@@ -25,6 +25,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     slots: {
         [x: string]: ((props: {
             colKey: any;
+            config: any;
             style: string;
             class: string;
         }) => any) | undefined;

package/dist/runtime/components/LibTable/LibTable.vue

@@ -61,6 +61,7 @@
 ].join(' ')"
 					:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
 					:col-key="col"
+					:config="colConfig[col]"
 				>
 					<td
 						:class="[
@@ -145,7 +146,7 @@ const getExtraClasses = (row, col, isHeader) => {
 const extraClasses = computed(() => Object.fromEntries(
   [...Array(props.values.length + 1).keys()].map((row) => [...Array(props.cols.length).keys()].map((col) => [
     `${row - 1}-${col}`,
-    getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" ")
+    " " + getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" ") + " "
   ])).flat()
 ));
 </script>

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

@@ -25,6 +25,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     slots: {
         [x: string]: ((props: {
             colKey: any;
+            config: any;
             style: string;
             class: string;
         }) => any) | undefined;

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.14",
   "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/components/LibTable/LibTable.stories.ts

@@ -7,12 +7,12 @@ import LibTable from "./LibTable.vue"
 import * as components from "../index.js"
 
 const meta: Meta<typeof LibTable> = {
-	component: LibTable,
+	component: LibTable as any,
 	title: "Components/Table"
 }
 
 export default meta
-type Story = StoryObj<typeof LibTable>
+type Story = StoryObj<typeof LibTable> & { args: { slots?: string } }
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -22,6 +22,7 @@ export const Primary: Story = {
 					<lib-table
 						v-bind="args"
 					>
+						${(args as any).slots}
 					</lib-table>
 				</div>
 		`
@@ -91,6 +92,38 @@ export const NoHeaderNoCellBorders: Story = {
 		cellBorder: false
 	}
 }
+
+export const InitialSize: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		colConfig: {
+			prop1: { name: "Initially Flex 1", resizable: true },
+			prop2: { name: "Initially Flex 2", resizable: true },
+			prop3: { name: "Initially Size of Header", resizable: true }
+		},
+		resizable: {
+			enabled: true
+		},
+		class: `
+			[&:not(.resizable-cols-setup)]:block
+			[&:not(.resizable-cols-setup)_thead]:block
+			[&:not(.resizable-cols-setup)_thead_tr]:w-full
+			[&:not(.resizable-cols-setup)_thead_tr]:flex
+			[&:not(.resizable-cols-setup)_thead_tr]:flex-nowrap
+			[&:not(.resizable-cols-setup)_thead_td:not(.override-initial)]:flex-1
+		`,
+		slots: `
+			<template #header-prop3="colProps">
+			<td
+				:class="\`\${colProps.class} w-[min-content] whitespace-nowrap override-initial\`"
+			>
+				{{ colProps.config.name }}
+			</td>
+		</template>
+		`
+	}
+}
 export const FitWidthFalse: Story = {
 	...Primary,
 	args: {

package/src/runtime/components/LibTable/LibTable.vue

@@ -61,6 +61,7 @@
 					].join(' ')"
 					:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
 					:col-key="col"
+					:config="(colConfig as any)[col]"
 				>
 					<td
 						:class="[
@@ -160,7 +161,7 @@ const extraClasses = computed(() => Object.fromEntries([...Array(props.values.le
 		.map(col =>
 			[
 				`${row - 1}-${col}`,
-				getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" ")
+				" " +	getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" ") + " "
 			]))
 	.flat()
 ))

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