@witchcraft/ui 0.3.17 → 0.3.18

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.17",
+  "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.d.vue.ts

@@ -36,7 +36,7 @@ type RealProps = {
      * Since the table now truncates rows by default, they will always be the same height unless you change the inner styling. In fixed mode, `forceRecalculateFixedVirtualizer` is exposed if you need to force re-calculation.
      *
      * If using slots, be sure to at least pass the `class` slot prop to the td element. `style` with width is also supplied but is not required if you're displaying the table as a table.
-      *
+     *
      * ### Dynamic (experimental)
      *
      * In `dynamic` mode we use tanstack's measureElement method. This is more expensive, but it will work with any heights.

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

@@ -36,7 +36,7 @@ type RealProps = {
      * Since the table now truncates rows by default, they will always be the same height unless you change the inner styling. In fixed mode, `forceRecalculateFixedVirtualizer` is exposed if you need to force re-calculation.
      *
      * If using slots, be sure to at least pass the `class` slot prop to the td element. `style` with width is also supplied but is not required if you're displaying the table as a table.
-      *
+     *
      * ### Dynamic (experimental)
      *
      * In `dynamic` mode we use tanstack's measureElement method. This is more expensive, but it will work with any heights.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.3.17",
+  "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

@@ -439,7 +439,7 @@ type RealProps = {
 	 * Since the table now truncates rows by default, they will always be the same height unless you change the inner styling. In fixed mode, `forceRecalculateFixedVirtualizer` is exposed if you need to force re-calculation.
 	 *
 	 * If using slots, be sure to at least pass the `class` slot prop to the td element. `style` with width is also supplied but is not required if you're displaying the table as a table.
-	  *
+	 *
 	 * ### Dynamic (experimental)
 	 *
 	 * In `dynamic` mode we use tanstack's measureElement method. This is more expensive, but it will work with any heights.