@witchcraft/ui 0.3.16 → 0.3.18

package/dist/module.json

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

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

@@ -97,6 +97,8 @@
 		v-bind="setSlotVar('message', {
   class: `
 				notification--message
+				shrink-1
+				overflow-auto
 				whitespace-pre-wrap
 				text-neutral-800
 				dark:text-neutral-200

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

@@ -29,7 +29,7 @@
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
-		class="overflow-hidden my-2"
+		class="overflow-hidden my-2 max-h-[25dvh] min-h-[300px]"
 		v-for="notification of notifications"
 		:key="notification.id"
 		@pause="handler.pause(notification)"
@@ -68,6 +68,7 @@
 			class="
 				data-[state=open]:animate-contentShow
 				fixed
+				flex
 				top-[50%]
 				left-[50%]
 				translate-x-[-50%]
@@ -79,6 +80,8 @@
 		>
 			<lib-notification
 				class="
+					max-w-full
+					max-h-full
 					top-notification
 					text-md
 					gap-2

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

@@ -177,7 +177,7 @@
 						:style="{
   ...mergedVirtualizerOpts.enabled ? {
     transform: mergedVirtualizerOpts.method === 'fixed' ? `translateY(${virtual.start - index * virtual.size}px)` : `translateY(${virtual.start}px)`,
-    height: virtual.size
+    height: `${virtual.size}px`
   } : {}
 }"
 						:data-index="virtual.index"
@@ -287,11 +287,13 @@ function measureElement(el) {
     rowVirtualizer.value.measureElement(el);
   }
 }
+let mounted = false;
 function forceRecalculateFixedVirtualizer() {
   if (mergedVirtualizerOpts.value?.method === "dynamic" || !mergedVirtualizerOpts.value.enabled) return;
-  if (!parentRef.value) {
+  if (!mounted) {
     throw new Error("forceRecalculateFixedVirtualizer cannot be called before the table is mounted.");
   }
+  if (!parentRef.value) return;
   const height = parentRef.value.querySelector("td")?.getBoundingClientRect().height;
   if (!height) return;
   for (let i = 0; i < props.values.length; i++) {
@@ -309,7 +311,10 @@ function updateTableHeight() {
 const throttledUpdateTableHeight = throttle(updateTableHeight, 100, { leading: true });
 onMounted(() => {
   throttledUpdateTableHeight();
-  forceRecalculateFixedVirtualizer();
+  mounted = true;
+  setTimeout(() => {
+    forceRecalculateFixedVirtualizer();
+  }, 0);
   useGlobalResizeObserver(parentRef, onResize);
 });
 const hasScrollbar = ref({ vertical: false, horizontal: false });

package/package.json

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

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

@@ -95,6 +95,8 @@
 		v-bind="setSlotVar('message', {
 			class: `
 				notification--message
+				shrink-1
+				overflow-auto
 				whitespace-pre-wrap
 				text-neutral-800
 				dark:text-neutral-200

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

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
+import { faker } from "@faker-js/faker"
 import type { Meta, StoryObj } from "@storybook/vue3"
-import { ref } from "vue"
+import { computed, ref } from "vue"
 
 import LibNotifications from "./LibNotifications.vue"
 
@@ -29,22 +30,26 @@ export const Primary: Story = {
 
 			const withTitle = ref(args.withTitle)
 			const disableTimeout = ref(false)
+			const lotsOfText = ref(false)
+			const paragraphs = `\n Simulating lots of text:\n${faker.lorem.paragraphs(20)}`
+			const extraText = computed(() => lotsOfText.value ? paragraphs : "")
 
 			const notifyRequiresAction = () => {
 				count++
 				void handler.notify({
 					title: withTitle.value ? `Notification(${count})` : undefined,
-					message: `This is a notification that requires action. Pick an option:`,
+					message: `This is a notification that requires action. Pick an option:${extraText.value}`,
 					requiresAction: true,
 					options: ["Ok", "Default Answer", "Cancel"],
 					default: "Default Answer"
 				})
 			}
+
 			const notifyWithDangerousOption = () => {
 				count++
 				void handler.notify({
 					title: withTitle.value ? `Notification(${count})` : undefined,
-					message: `This is a notification that has a dangerous option. Pick an option:`,
+					message: `This is a notification that has a dangerous option. Pick an option:${extraText.value}`,
 					options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
 					default: "Default Answer",
 					dangerous: ["Dangerous Option"]
@@ -54,7 +59,7 @@ export const Primary: Story = {
 				count++
 				void handler.notify({
 					title: withTitle.value ? `Notification(${count})` : undefined,
-					message: `This is a non-cancellable notification. Pick an option:`,
+					message: `This is a non-cancellable notification. Pick an option:${extraText.value}`,
 					options: ["Ok", "Default Answer"],
 					default: "Default Answer",
 					cancellable: false
@@ -64,7 +69,7 @@ export const Primary: Story = {
 				count++
 				void handler.notify({
 					title: withTitle.value ? `Notification(${count})` : undefined,
-					message: `This is a non-cancellable notification. Pick an option:`,
+					message: `This is a non-cancellable notification. Pick an option:${extraText.value}`,
 					requiresAction: true,
 					options: ["Ok", "Default Answer"],
 					default: "Default Answer",
@@ -75,7 +80,7 @@ export const Primary: Story = {
 				count++
 				void handler.notify({
 					title: withTitle.value ? `Notification(${count})` : undefined,
-					message: `This is a notification. No action required.`,
+					message: `This is a notification. No action required.${extraText.value}`,
 					timeout: disableTimeout.value ? false : 5000
 				})
 			}
@@ -88,6 +93,7 @@ export const Primary: Story = {
 				handler,
 				withTitle,
 				disableTimeout,
+				lotsOfText,
 				args: {
 					outline: false,
 					...args
@@ -103,9 +109,10 @@ export const Primary: Story = {
 		<lib-button :label="'Notify Non-Cancellable that RequiresAction'" @click="notifyNonCancellableRequiresAction()"></lib-button>
 		<lib-button :label="'Notify With Dangerous Option'" @click="notifyWithDangerousOption()"></lib-button>
 		<lib-button :label="'Notify Non-Cancellable'" @click="notifyNonCancellable()"></lib-button>
-		<input type="checkbox" v-model="withTitle"/> With Title
-		<input type="checkbox" v-model="disableTimeout"/> Disable Timeout
-			<lib-notifications :handler="handler" />
+		<lib-checkbox v-model="lotsOfText">Use lots of text</lib-checkbox>
+		<lib-checkbox v-model="disableTimeout">Disable Timeout</lib-checkbox>
+		<lib-checkbox v-model="withTitle">With Title</lib-checkbox>
+		<lib-notifications :handler="handler" />
 		History:
 		<lib-debug>
 			<template v-for="entry in handler.history">

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

@@ -29,7 +29,7 @@
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
-		class="overflow-hidden my-2"
+		class="overflow-hidden my-2 max-h-[25dvh] min-h-[300px]"
 		v-for="notification of notifications"
 		:key="notification.id"
 		@pause="handler.pause(notification)"
@@ -68,6 +68,7 @@
 			class="
 				data-[state=open]:animate-contentShow
 				fixed
+				flex
 				top-[50%]
 				left-[50%]
 				translate-x-[-50%]
@@ -79,6 +80,8 @@
 		>
 			<lib-notification
 				class="
+					max-w-full
+					max-h-full
 					top-notification
 					text-md
 					gap-2

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

@@ -182,7 +182,7 @@
 									transform: mergedVirtualizerOpts.method === 'fixed'
 										? `translateY(${virtual.start - index * virtual.size!}px)`
 										: `translateY(${virtual.start}px)`,
-									height: virtual.size
+									height: `${virtual.size}px`
 								}
 								: {})
 						}"
@@ -314,11 +314,13 @@ function measureElement(el: any): void {
 	}
 }
 
+let mounted = false
 function forceRecalculateFixedVirtualizer() {
 	if (mergedVirtualizerOpts.value?.method === "dynamic" || !mergedVirtualizerOpts.value.enabled) return
-	if (!parentRef.value) {
+	if (!mounted) {
 		throw new Error("forceRecalculateFixedVirtualizer cannot be called before the table is mounted.")
 	}
+	if (!parentRef.value) return // this could happen if the table is destroyed before the timeout (highly unlikely, probably impossible)
 	const height = parentRef.value.querySelector("td")?.getBoundingClientRect().height
 	if (!height) return
 	for (let i = 0; i < props.values.length; i++) {
@@ -339,7 +341,10 @@ const throttledUpdateTableHeight = throttle(updateTableHeight, 100, { leading: t
 
 onMounted(() => {
 	throttledUpdateTableHeight()
-	forceRecalculateFixedVirtualizer()
+	mounted = true
+	setTimeout(() => {
+		forceRecalculateFixedVirtualizer()
+	}, 0)
 	useGlobalResizeObserver(parentRef, onResize)
 })