@witchcraft/ui 0.3.17 → 0.3.19

package/dist/module.json

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

@@ -11,6 +11,7 @@ type RealProps = {
     rounded?: boolean;
     border?: boolean;
     cellBorder?: boolean;
+    /** Disables the header. This also sets the selector to `tr:first-child > td` instead to avoid issues with the vResizableCols directive. */
     header?: boolean;
     colConfig?: TableColConfig<T>;
     /**
@@ -36,7 +37,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

@@ -51,7 +51,7 @@
   mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `
 		relative
 		`,
-  $attrs.wrapperClass
+  $attrs['wrapper-class']
 )"
 	ref="parentRef"
 >
@@ -240,7 +240,7 @@ const isPostSetup = ref(false);
 const resizableOptions = computed(() => ({
   colCount: props.cols.length,
   widths,
-  selector: ".cell",
+  selector: props.header ? void 0 : `tr:first-child > td`,
   ...props.resizable,
   onSetup: (el) => {
     isPostSetup.value = true;

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

@@ -11,6 +11,7 @@ type RealProps = {
     rounded?: boolean;
     border?: boolean;
     cellBorder?: boolean;
+    /** Disables the header. This also sets the selector to `tr:first-child > td` instead to avoid issues with the vResizableCols directive. */
     header?: boolean;
     colConfig?: TableColConfig<T>;
     /**
@@ -36,7 +37,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/directives/vResizableCols.js

@@ -10,14 +10,8 @@ const defaultOpts = {
   enabled: true
 };
 const callback = (_rect, el) => {
-  const $el = getElInfo(el);
-  if ($el.justResized) return;
   setColWidths(el);
-  $el.justResized = true;
-  setTimeout(() => {
-    positionGrips(el);
-    $el.justResized = false;
-  }, 0);
+  positionGrips(el);
 };
 export const vResizableCols = {
   mounted(el, { value: opts = {} }) {
@@ -29,7 +23,7 @@ export const vResizableCols = {
   },
   updated(el, { value: opts = {} }) {
     const options = override({ ...defaultOpts }, opts);
-    const info = el && options.enabled && getElInfo(el);
+    const info = el && options.enabled && getElInfo(el, { throwIfMissing: false });
     const hasGrips = el && options.enabled && elMap.get(el)?.grips;
     const colsNotEqual = info && info.colCount !== options.colCount;
     if (!options.enabled || colsNotEqual) {
@@ -54,7 +48,11 @@ function setWidth(col, amountInPx, el) {
   const width = Math.max($el.margin, amountInPx);
   const index = getColEls(el).findIndex((_) => col === _);
   if ($el.fitWidth) {
-    $el.widths.value[index] = `${width / getBox(el).width * 100}%`;
+    if (amountInPx <= $el.margin) {
+      $el.widths.value[index] = `${$el.margin}px`;
+    } else {
+      $el.widths.value[index] = `${width / getBox(el).width * 100}%`;
+    }
   } else {
     $el.widths.value[index] = `${width}px`;
   }
@@ -86,6 +84,7 @@ function createPointerDownHandler(el) {
       castType(e.target);
       $el.target = e.target;
       $el.isDragging = true;
+      el.classList.add("dragging");
       e.preventDefault();
       document.addEventListener("pointerup", $el.pointerUpHandler);
       const { col, colNext } = getCols(el);
@@ -133,11 +132,7 @@ function createPointerMoveHandler(el) {
             setWidth(col, newWidth, el);
           }
         }
-        $el.justResized = true;
-        setTimeout(() => {
-          positionGrips(el);
-          $el.justResized = false;
-        }, 0);
+        positionGrips(el);
       }
     }
   };
@@ -145,9 +140,11 @@ function createPointerMoveHandler(el) {
 function createPointerUpHandler(el) {
   return (e) => {
     const $el = getElInfo(el);
+    $el.pointerMoveHandler(e);
     if ($el.isDragging) {
       e.preventDefault();
       $el.isDragging = false;
+      el.classList.remove("dragging");
       el.classList.remove("resizable-cols-error");
       $el.offset = 0;
       delete $el.target;
@@ -187,7 +184,7 @@ function getElInfo(el, { throwIfMissing = true } = {}) {
 function getColEls(el) {
   const $el = elMap.get(el);
   if (!$el) unreachable("El went missing.");
-  return [...el.querySelectorAll(`:scope ${$el.selector ? $el.selector : "tr > th, tr > td"}`)];
+  return [...el.querySelectorAll(`:scope ${$el.selector ?? "tr > th"}`)];
 }
 function setupColumns(el, opts) {
   const gripWidth = getTestGripSize(el);
@@ -206,8 +203,10 @@ function setupColumns(el, opts) {
     onTeardown: opts.onTeardown
   };
   elMap.set(el, $el);
-  const els = getColEls(el);
-  const headers = els.slice(0, opts.colCount);
+  const headers = getColEls(el);
+  if (headers.length !== opts.colCount) {
+    throw new Error(`Number of headers matched using selector ${opts.selector ?? "tr > th"} does not match number of columns.`);
+  }
   setColWidths(el, headers);
   el.style.width = $el.fitWidth ? "" : "min-content";
   const len = opts.colCount;
@@ -218,13 +217,9 @@ function setupColumns(el, opts) {
     el.appendChild(grip);
     $el.grips.set(grip, i);
   }
-  $el.justResized = true;
-  setTimeout(() => {
-    positionGrips(el);
-    $el.justResized = false;
-    el.classList.add("resizable-cols-setup");
-    opts.onSetup?.(el);
-  }, 0);
+  positionGrips(el);
+  el.classList.add("resizable-cols-setup");
+  opts.onSetup?.(el);
 }
 function positionGrips(el) {
   let xPos = 0;
@@ -291,7 +286,7 @@ function setColWidths(el, children) {
     castType(col);
     const colBox = getBox(col);
     if ($el.fixedWidths[i] !== void 0) {
-      setWidth(col, $el.fixedWidths[i], el);
+      $el.widths.value[i] = `${$el.fixedWidths[i]}px`;
       width += $el.fixedWidths[i];
     } else {
       if ($el.fitWidth) {

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

@@ -40,7 +40,7 @@ export type ResizableOptions = {
      * It can then be used as needed by the component.
      */
     widths: Ref<string[]>;
-    /** The selector to use for the cells. "tr > td" by default. */
+    /** The selector to use for the header cells. "tr > th" by default. */
     selector: string;
     /** Is called just after the `resizable-cols-setup` class is added. Can be useful for controlling the styling of wrappers or doing additional things post-setup. The default table element uses it to set the class on the wrapper also. */
     onSetup?: (el: Element) => void;

package/package.json

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

@@ -19,8 +19,9 @@ const meta: Meta<typeof LibTable> = {
 export default meta
 type Story = StoryObj<typeof LibTable> & { args: {
 	slots?: string
-	wrapperClass?: string
+	["wrapper-class"]?: string
 } }
+
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -182,7 +183,7 @@ export const StickyHeader: Story = {
 		// moving the border to the wrapper is to hide the little bits of border sticking out
 		// added back the right straight border otherwise the scrollbar looks ass
 		// this is ever so slightly visible if there is no scrollbar
-		wrapperClass: `
+		["wrapper-class"]: `
 			max-h-[50dvh]
 		`,
 		values: Array.from({ length: 200 }).fill(0).map((_, i) => ({
@@ -205,7 +206,7 @@ export const VirtualizedFixedHeight: Story = {
 			enabled: true
 		},
 		stickyHeader: true,
-		wrapperClass: `
+		["wrapper-class"]: `
 			max-h-[50dvh]
 		`,
 		values: Array.from({ length: 10000 }).fill(0).map((_, i) => ({
@@ -258,7 +259,7 @@ export const VirtualizedFitWidthFalse: Story = {
 			[&:not(.resizable-cols-setup)]:w-max
 			[&:not(.resizable-cols-setup)_th]:w-max
 		`,
-		wrapperClass: `
+		["wrapper-class"]: `
 			max-h-[50dvh]
 		`,
 		values: Array.from({ length: 10000 }).fill(0).map((_, i) => ({

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

@@ -50,7 +50,7 @@
 		mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `
 		relative
 		`,
-		($attrs as any).wrapperClass)"
+		($attrs as any)['wrapper-class'])"
 	ref="parentRef"
 >
 	<div
@@ -256,7 +256,7 @@ const isPostSetup = ref(false)
 const resizableOptions = computed<MakeRequired<Partial<ResizableOptions>, "colCount" | "widths">>(() => ({
 	colCount: props.cols.length,
 	widths,
-	selector: ".cell",
+	selector: props.header ? undefined : `tr:first-child > td`,
 	...props.resizable,
 	onSetup: el => {
 		isPostSetup.value = true
@@ -414,6 +414,7 @@ type RealProps = {
 	rounded?: boolean
 	border?: boolean
 	cellBorder?: boolean
+	/** Disables the header. This also sets the selector to `tr:first-child > td` instead to avoid issues with the vResizableCols directive. */
 	header?: boolean
 	colConfig?: TableColConfig<T>
 	/**
@@ -439,7 +440,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/src/runtime/directives/vResizableCols.ts

@@ -24,7 +24,6 @@ type Data = {
 	onTeardown?: (el: Element) => void
 	fixedWidths?: Record<number, number>
 	fluidWidthsAsPercentOfFluidWidth?: Record<number, number>
-	justResized?: boolean
 }
 const elMap = new WeakMap<HTMLElement, Data>()
 type RawOpts = { value: Partial<ResizableOptions> }
@@ -40,14 +39,8 @@ const defaultOpts: Omit<ResizableOptions, "colCount" | "widths" | "selector"> =
 // note that while it would be nice to throttle this it seems to loose the reference to the original element
 // haven't found where the issue is yet #future
 const callback: ResizeCallback = (_rect: DOMRectReadOnly, el: Element): void => {
-	const $el = getElInfo(el as ResizableElement)
-	if ($el.justResized) return
 	setColWidths(el as ResizableElement)
-	$el.justResized = true
-	setTimeout(() => {
-		positionGrips(el as ResizableElement)
-		$el.justResized = false
-	}, 0)
+	positionGrips(el as ResizableElement)
 }
 
 /**
@@ -119,7 +112,7 @@ export const vResizableCols: Directive = {
 	},
 	updated(el: ResizableElement, { value: opts = {} }: RawOpts) {
 		const options = override({ ...defaultOpts }, opts) as ResizableOptions
-		const info = el && options.enabled && getElInfo(el)
+		const info = el && options.enabled && getElInfo(el, { throwIfMissing: false })
 		const hasGrips = el && options.enabled && elMap.get(el)?.grips
 		// todo, we should probably check by name
 		const colsNotEqual = (info && info.colCount !== options.colCount)
@@ -148,7 +141,11 @@ function setWidth(col: HTMLElement, amountInPx: number, el: ResizableElement): v
 
 	const index = getColEls(el).findIndex(_ => col === _)
 	if ($el.fitWidth) {
-		$el.widths.value[index] = `${width / getBox(el).width * 100}%`
+		if (amountInPx <= $el.margin) {
+			$el.widths.value[index] = `${$el.margin}px`
+		} else {
+			$el.widths.value[index] = `${width / getBox(el).width * 100}%`
+		}
 	} else {
 		$el.widths.value[index] = `${width}px`
 	}
@@ -186,6 +183,7 @@ function createPointerDownHandler(el: ResizableElement) {
 			castType<HTMLElement>(e.target)
 			$el.target = e.target
 			$el.isDragging = true
+			el.classList.add("dragging")
 			e.preventDefault()
 
 			// in case any errors happen, we want the pointer up to still be called
@@ -245,11 +243,7 @@ function createPointerMoveHandler(el: ResizableElement) {
 					}
 				}
 
-				$el.justResized = true
-				setTimeout(() => {
-					positionGrips(el)
-					$el.justResized = false
-				}, 0)
+				positionGrips(el)
 			}
 		}
 	}
@@ -258,9 +252,11 @@ function createPointerMoveHandler(el: ResizableElement) {
 function createPointerUpHandler(el: ResizableElement) {
 	return (e: PointerEvent) => {
 		const $el = getElInfo(el)
+		$el.pointerMoveHandler(e)
 		if ($el.isDragging) {
 			e.preventDefault()
 			$el.isDragging = false
+			el.classList.remove("dragging")
 			el.classList.remove("resizable-cols-error")
 			$el.offset = 0
 			delete $el.target
@@ -303,7 +299,7 @@ function getElInfo<T extends boolean = true>(el: ResizableElement, { throwIfMiss
 function getColEls(el: ResizableElement): HTMLElement[] {
 	const $el = elMap.get(el)
 	if (!$el) unreachable("El went missing.")
-	return [...el.querySelectorAll(`:scope ${$el.selector ? $el.selector : "tr > th, tr > td"}`)] as any
+	return [...el.querySelectorAll(`:scope ${$el.selector ?? "tr > th"}`)] as any
 }
 
 function setupColumns(el: ResizableElement, opts: ResizableOptions): void {
@@ -323,9 +319,10 @@ function setupColumns(el: ResizableElement, opts: ResizableOptions): void {
 		onTeardown: opts.onTeardown
 	}
 	elMap.set(el, $el)
-	const els = getColEls(el)
-
-	const headers = els.slice(0, opts.colCount)
+	const headers = getColEls(el)
+	if (headers.length !== opts.colCount) {
+		throw new Error(`Number of headers matched using selector ${opts.selector ?? "tr > th"} does not match number of columns.`)
+	}
 
 	setColWidths(el, headers)
 	el.style.width = $el.fitWidth ? "" : "min-content"
@@ -338,13 +335,9 @@ function setupColumns(el: ResizableElement, opts: ResizableOptions): void {
 		el.appendChild(grip)
 		$el.grips.set(grip, i)
 	}
-	$el.justResized = true
-	setTimeout(() => {
-		positionGrips(el)
-		$el.justResized = false
-		el.classList.add("resizable-cols-setup")
-		opts.onSetup?.(el)
-	}, 0)
+	positionGrips(el)
+	el.classList.add("resizable-cols-setup")
+	opts.onSetup?.(el)
 }
 
 function positionGrips(el: ResizableElement): void {
@@ -412,7 +405,6 @@ function setColWidths(el: ResizableElement, children?: Element[]): void {
 	const minFlexWidth = (totalFluidCount * $el.margin)
 	const minTotalWidth = minFlexWidth + fixedTotalPx
 
-
 	let leftOverFluidWidth = elWidth - fixedTotalPx
 	if (leftOverFluidWidth < minFlexWidth) {
 		leftOverFluidWidth = minFlexWidth
@@ -428,7 +420,7 @@ function setColWidths(el: ResizableElement, children?: Element[]): void {
 		 */
 		const colBox = getBox(col)
 		if ($el.fixedWidths![i] !== undefined) {
-			setWidth(col, $el.fixedWidths![i]!, el)
+			$el.widths.value[i] = `${$el.fixedWidths![i]!}px`
 			width += $el.fixedWidths![i]!
 		} else {
 			if ($el.fitWidth) {

package/src/runtime/types/index.ts

@@ -41,7 +41,7 @@ export type ResizableOptions = {
 	 * It can then be used as needed by the component.
 	 */
 	widths: Ref<string[]>
-	/** The selector to use for the cells. "tr > td" by default. */
+	/** The selector to use for the header cells. "tr > th" by default. */
 	selector: string
 	/** Is called just after the `resizable-cols-setup` class is added. Can be useful for controlling the styling of wrappers or doing additional things post-setup. The default table element uses it to set the class on the wrapper also. */
 	onSetup?: (el: Element) => void