@witchcraft/ui 0.3.11 → 0.3.13

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.11",
+  "version": "0.3.13",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",
@@ -121,7 +121,7 @@
     "husky": "^9.1.7",
     "indexit": "2.1.0-beta.3",
     "madge": "^7.0.0",
-    "nuxt": "^4.0.3",
+    "nuxt": "^4.2.1",
     "playwright": "=1.54.0",
     "playwright-core": "=1.54.0",
     "semantic-release": "^24.2.7",

package/src/runtime/assets/utils.css

@@ -37,17 +37,17 @@
 }
 
 @utility focus-outline-within {
-	@reference outlined-within:outline-2 outlined-within:outline-accent-500 outlined-within:outline-offset-2;
+	@apply outlined-within:outline-2 outlined-within:outline-accent-500 outlined-within:outline-offset-2;
 }
 
 @utility focus-outline {
-	@reference outlined:outline-2 outlined:outline-accent-500 outlined:outline-offset-2;
+	@apply outlined:outline-2 outlined:outline-accent-500 outlined:outline-offset-2;
 }
 @utility focus-outline-no-offset {
-	@reference outlined:outline-2 outlined:outline-accent-500;
+	@apply outlined:outline-2 outlined:outline-accent-500;
 }
 @utility focus-outline-hidden {
-	@reference outlined:outline-none;
+	@apply outlined:outline-none;
 }
 
 /* .bg-squares-gradient { */

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

@@ -21,14 +21,24 @@ export const SingleFile: Story = {
 	render: args => ({
 		components,
 		setup: () => {
-			function errorHandler(e: any): void {
+			const errors = ref([])
+			function errorHandler(errs: any) {
 				// eslint-disable-next-line no-console
-				console.log(e)
+				console.log(errs)
+				errors.value = errs
 			}
-			return { args, errorHandler }
+			return { args, errorHandler, errors }
 		},
 		template: `
 			<lib-file-input v-bind="{...args}" @errors="errorHandler"></lib-file-input>
+			<div
+				v-if="errors.length > 0"
+				class="border-2 border-red-500 rounded-lg p-2 mt-2 w-full"
+			>
+				<div v-for="err of errors" :key="err">
+					{{err}}
+				</div>
+			</div>
 		`
 	})
 }

package/src/runtime/components/LibFileInput/LibFileInput.vue

@@ -1,29 +1,51 @@
 <template>
 <!-- todo aria errors -->
 <div
-	:class="twMerge(`file-input
+	:class="twMerge(`
+		file-input
 		justify-center
 		border-2
 		border-dashed
 		border-accent-500/80
 		focus-outline-within
 		transition-[border-color,box-shadow]
-		ease-out`,
+		ease-out
+		hover:bg-accent-500/10
+		outlined-focus-within
+	`,
 		compact && `rounded-sm`,
-		!compact && `flex w-full flex-col items-center gap-2 rounded-xl  p-2 `,
+		!compact && `
+			flex
+			w-full
+			flex-col
+			items-stretch
+			gap-2
+			rounded-xl
+			p-2
+		`,
 		errors.length > 0 && errorFlashing && `border-danger-400`,
+		isHovered && `bg-accent-500/10`,
 		($.wrapperAttrs as any).class
 	)"
 	v-bind="{ ...$.wrapperAttrs, class: undefined }"
+	@drop="onDrop"
+	@dragover.prevent="isHovered = true"
+	@dragleave="isHovered = false"
 >
 	<div
 		:class="twMerge(`
-		file-input--wrapper
-		relative justify-center`,
+			file-input--wrapper
+			relative
+			justify-center
+			@container
+		`,
 			compact && `flex gap-2`,
-			!compact && `input-wrapper
-		flex flex-col items-center
-		`
+			!compact && `
+				file-input
+				flex
+				flex-col
+				items-center
+			`
 		)"
 	>
 		<label
@@ -34,7 +56,9 @@
 				flex
 				gap-1
 				items-center
+				justify-center
 				whitespace-nowrap
+				max-w-full
 			`)"
 		>
 			<slot
@@ -44,44 +68,58 @@
 				<icon><i-fa6-solid-arrow-up-from-bracket/></icon>
 			</slot>
 			<slot name="label">
-				{{
-					(compact
-						? multiple
-							? t("file-input.compact-choose-file-plural")
-							: t("file-input.compact-choose-file")
-						: multiple
-							? t("file-input.non-compact-choose-file-plural")
-							: t("file-input.non-compact-choose-file")
-					)
-				}}
+				<div class="text-ellipsis overflow-hidden shrink-1 hidden @min-[15ch]:block">
+					{{
+						(compact
+							? multiple
+								? t("file-input.compact-choose-file-plural")
+								: t("file-input.compact-choose-file")
+							: multiple
+								? t("file-input.non-compact-choose-file-plural")
+								: t("file-input.non-compact-choose-file")
+						)
+					}}
+				</div>
 			</slot>
-			<span
+			<div
 				v-if="compact && multiple"
 				class="file-input--label-count"
 			>
 				{{ ` (${files.length})` }}
-			</span>
+			</div>
+			<div
+				v-if="compact && !multiple && files.length > 0"
+				class="file-input--label-name text-ellipsis overflow-hidden shrink-9999 hidden @3xs:block"
+			>
+				{{ ` (${files[0]?.file.name})` }}
+			</div>
+			<div
+				v-if="compact && !multiple && files.length > 0"
+				class="file-input--label-name text-ellipsis overflow-hidden shrink-9999 @3xs:hidden"
+			>
+				{{ ` (...)` }}
+			</div>
 		</label>
 		<label
 			v-if="!compact && formats?.length > 0"
-			class="file-input--formats-label flex flex-col items-center text-sm"
+			class="file-input--formats-label flex-col items-center text-sm max-w-full hidden @min-[15ch]:flex"
 		>
-			<slot name="formats">{{ t("file-input.accepted-formats") }}: </slot>
-			<div class="file-input--formats-list">
+			<slot name="formats"><div class="text-ellipsis overflow-hidden max-w-full">{{ t("file-input.accepted-formats") }}:</div> </slot>
+			<div class="file-input--formats-list overflow-hidden text-ellipsis max-w-full">
 				{{ extensions.join(", ") }}
 			</div>
 		</label>
 		<input
 			:id="id ?? fallbackId"
 			:class="twMerge(`
-					file-input--input
-					absolute
-					inset-0
-					z-0
-					cursor-pointer
-					text-[0]
-					opacity-0
-				`,
+				file-input--input
+				absolute
+				inset-[calc(var(--spacing)*-2)]
+				cursor-pointer
+				z-0
+				text-[0]
+				opacity-0
+			`,
 				($.inputAttrs as any)?.class
 			)"
 			type="file"
@@ -97,7 +135,7 @@
 	<div
 		v-if="!compact && files.length > 0"
 		:class="twMerge(`file-input--previews
-			flex items-stretch justify-center gap-2 flex-wrap
+			flex items-stretch justify-center gap-4 flex-wrap
 			`,
 			multiple && `
 				w-full
@@ -105,32 +143,47 @@
 			($.previewsAttrs as any)?.class
 		)"
 	>
-		<div class="file-input--preview-spacer flex-1"/>
 		<div
-			class="file-input--preview-wrapper
+			class="
+				file-input--preview-wrapper
 				z-1
 				relative
 				flex
 				min-w-0
 				max-w-[150px]
 				flex-initial
-				flex-wrap
+				flex-col
 				items-center
-				gap-2 rounded-sm border border-neutral-400
-				shadow-xs
-				shadow-neutral-800/20
+				gap-1
+				p-1
+				rounded-sm
+				border
+				border-neutral-300
+				dark:border-neutral-800
+				shadow-md
+				shadow-neutral-800/30
+				bg-neutral-100
+				dark:bg-neutral-900
+				[&:hover_.file-input--remove-button]:opacity-100
 			"
 			v-for="entry of files"
 			:key="entry.file.name"
 		>
-			<div class="file-input--remove-button flex flex-initial basis-full justify-start">
+			<div class="flex flex-initial basis-full justify-start items-center max-w-full gap-2 px-1">
 				<lib-button
 					:border="false"
+					class="file-input--remove-button rounded-full p-0"
 					:aria-label="`Remove file ${entry.file.name}`"
 					@click="removeFile(entry)"
 				>
 					<icon><i-fa6-solid-xmark/></icon>
 				</lib-button>
+				<div
+					class="file-input--preview-filename min-w-0 flex-1 basis-0 truncate break-all rounded-sm text-sm"
+					:title="entry.file.name"
+				>
+					{{ entry.file.name }}
+				</div>
 			</div>
 
 			<div class="file-input--preview flex flex-initial basis-full justify-center">
@@ -157,25 +210,7 @@
 					<icon><i-fa6-regular-file class="text-4xl opacity-50"/></icon>
 				</div>
 			</div>
-			<div
-				class="
-				file-input--preview-filename
-				min-w-0
-				flex-1
-				basis-0
-				truncate
-				break-all
-				rounded-sm
-				p-1
-				text-sm
-			"
-				:title="entry.file.name"
-			>
-				{{ entry.file.name }}
-			</div>
 		</div>
-
-		<div class="flex-1"/>
 	</div>
 </div>
 </template>
@@ -202,9 +237,16 @@ type Entry = { file: File, isImg: boolean }
 const files = shallowReactive<(Entry)[]>([])
 const errors = shallowReactive<(FileInputError)[]>([])
 const errorFlashing = ref(false)
+const isHovered = ref(false)
+
+
+function clearFiles() {
+	el.value!.value = ""
+	files.splice(0, files.length)
+}
 
 watch(files, () => {
-	emits("input", files.map(entry => entry.file))
+	emits("input", files.map(entry => entry.file), clearFiles)
 })
 watch(errors, () => {
 	if (errors.length > 0) {
@@ -212,7 +254,8 @@ watch(errors, () => {
 		setTimeout(() => {
 			errorFlashing.value = false
 		}, 500)
-		emits("errors", errors)
+		emits("errors", [...errors])
+		errors.splice(0, errors.length)
 	}
 })
 
@@ -223,7 +266,7 @@ defineOptions({
 const $ = useDivideAttrs(["wrapper", "input", "previews"] as const)
 
 const emits = defineEmits<{
-	(e: "input", val: File[]): void
+	(e: "input", val: File[], clearFiles: () => void): void
 	(e: "errors", val: FileInputError[]): void
 }>()
 
@@ -247,46 +290,65 @@ const removeFile = (entry: Entry) => {
 	files.splice(index, 1)
 }
 const extensionsList = computed(() => extensions.value.join(", "))
-const inputFile = async (e: InputEvent): Promise<undefined | boolean> => {
+
+function onDrop(e: DragEvent) {
+	if ("dataTransfer" in e && e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+		el.value!.files = e.dataTransfer.files
+		e.preventDefault()
+		isHovered.value = false
+		return updateFiles(el.value!.files)
+	}
+	return undefined
+}
+async function inputFile(e: InputEvent): Promise<undefined | boolean> {
 	e.preventDefault()
 	if (el.value!.files) {
-		const errs = []
-		for (const file of el.value!.files) {
-			const isImg = file.type.startsWith("image")
+		return updateFiles(el.value!.files)
+	}
+	return undefined
+}
 
-			const byPassValidation = props.formats.length === 0
-			const isValidMimeType = mimeTypes.value.find(_ => _.endsWith("/*") ? file.type.startsWith(_.slice(0, -2)) : _ === file.type) !== undefined
-			const isValidExtension = extensions.value.find(_ => file.name.endsWith(_)) !== undefined
-			if (!byPassValidation && (!isValidMimeType || !isValidExtension)) {
-				const extension = file.name.match(/.*(\..*)/)?.[1] ?? "Unknown"
-				const type = file.type === "" ? "" : ` (${file.type})`
-				const message = `File type ${extension}${type} is not allowed. Allowed file types are: ${extensionsList.value}.`
-				const err = new Error(message) as FileInputError
-				err.file = file
-				err.isValidExtension = isValidExtension
-				err.isValidMimeType = isValidMimeType
-				errs.push(err)
-				continue
-			}
-			if (errs.length > 0) continue
-			if (!files.find(_ => _.file === file)) {
-				if ((props.multiple || files.length < 1)
-				) {
-					files.push({ file, isImg })
-				} else {
-					files.splice(0, files.length, { file, isImg })
-				}
-			}
+function updateFiles(filesList: FileList): boolean | undefined {
+	const errs = []
+	for (const file of filesList) {
+		const isImg = file.type.startsWith("image")
+
+		const byPassValidation = props.formats.length === 0
+		const isValidMimeType = mimeTypes.value.find(_ => _.endsWith("/*") ? file.type.startsWith(_.slice(0, -2)) : _ === file.type) !== undefined
+		const isValidExtension = extensions.value.find(_ => file.name.endsWith(_)) !== undefined
+		if (!byPassValidation && (!isValidMimeType || !isValidExtension)) {
+			const extension = file.name.match(/.*(\..*)/)?.[1] ?? "Unknown"
+			const type = file.type === "" ? "" : ` (${file.type})`
+			const message = `File type ${extension}${type} is not allowed. Allowed file types are: ${extensionsList.value}.`
+			const err = new Error(message) as FileInputError
+			err.file = file
+			err.isValidExtension = isValidExtension
+			err.isValidMimeType = isValidMimeType
+			errs.push(err)
+			continue
 		}
-		if (errs.length > 0) {
-			errors.splice(0, errors.length, ...errs)
-			return false
-		} else if (errors.length > 0) {
-			errors.splice(0, errors.length)
+		if (errs.length > 0) continue
+		if (!files.find(_ => _.file === file)) {
+			if ((props.multiple || files.length < 1)
+			) {
+				files.push({ file, isImg })
+			} else {
+				files.splice(0, files.length, { file, isImg })
+			}
 		}
 	}
+	if (errs.length > 0) {
+		errors.splice(0, errors.length, ...errs)
+		return false
+	} else if (errors.length > 0) {
+		errors.splice(0, errors.length)
+	}
 	return undefined
 }
+
+defineExpose({
+	clearFiles
+})
 </script>
 
 <script lang="ts">

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
+}