@witchcraft/ui 0.3.14 → 0.3.16

package/src/runtime/directives/vResizableCols.ts

@@ -1,6 +1,5 @@
 import { castType } from "@alanscodelog/utils/castType"
 import { override } from "@alanscodelog/utils/override"
-import { throttle } from "@alanscodelog/utils/throttle"
 import { unreachable } from "@alanscodelog/utils/unreachable"
 import type { Directive, Ref } from "vue"
 
@@ -22,6 +21,10 @@ type Data = {
 	offset?: number
 	widths: Ref<string[]>
 	selector: string
+	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> }
@@ -34,11 +37,19 @@ const defaultOpts: Omit<ResizableOptions, "colCount" | "widths" | "selector"> =
 	enabled: true
 }
 
+// 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)
-	positionGrips(el as ResizableElement)
+	$el.justResized = true
+	setTimeout(() => {
+		positionGrips(el as ResizableElement)
+		$el.justResized = false
+	}, 0)
 }
-const throttledCallback = throttle(callback)
+
 /**
  * Allow a table like element to be resized along it's columns.
  *
@@ -103,31 +114,28 @@ export const vResizableCols: Directive = {
 
 		if (options.enabled) {
 			setupColumns(el, options)
-			observer.observe(el, throttledCallback)
+			observer.observe(el, callback)
 		}
 	},
 	updated(el: ResizableElement, { value: opts = {} }: RawOpts) {
 		const options = override({ ...defaultOpts }, opts) as ResizableOptions
-		const info = el && getElInfo(el)
-		const hasGrips = el && elMap.get(el)!.grips
+		const info = el && options.enabled && getElInfo(el)
+		const hasGrips = el && options.enabled && elMap.get(el)?.grips
 		// todo, we should probably check by name
 		const colsNotEqual = (info && info.colCount !== options.colCount)
-		if ((hasGrips && !options.enabled) || colsNotEqual) {
+		if (!options.enabled || colsNotEqual) {
 			teardownColumns(el)
-			observer.unobserve(el, throttledCallback)
+			observer.unobserve(el, callback)
 		}
 
 		if ((!hasGrips && options.enabled) || colsNotEqual) {
 			setupColumns(el, options)
-			observer.observe(el, throttledCallback)
+			observer.observe(el, callback)
 		}
 	},
 	unmounted(el: ResizableElement) {
-		const hasGrips = elMap.has(el) && elMap.get(el)!.grips
-		if (hasGrips) {
-			teardownColumns(el)
-			globalResizeObserver.unobserve(el, throttledCallback)
-		}
+		teardownColumns(el)
+		globalResizeObserver.unobserve(el, callback)
 	},
 	getSSRProps() {
 		return {}
@@ -184,7 +192,7 @@ function createPointerDownHandler(el: ResizableElement) {
 			document.addEventListener("pointerup", $el.pointerUpHandler)
 
 			const { col, colNext } = getCols(el)
-			if (col === null || colNext === null) {
+			if (col === null || (colNext === null && $el.fitWidth)) {
 				el.classList.add("resizable-cols-error")
 			} else {
 				document.addEventListener("pointermove", $el.pointerMoveHandler)
@@ -202,6 +210,8 @@ function createPointerMoveHandler(el: ResizableElement) {
 		if ($el.isDragging) {
 			e.preventDefault()
 
+			$el.fluidWidthsAsPercentOfFluidWidth = undefined
+
 			const { col, colNext } = getCols(el)
 
 			if (col !== null) {
@@ -235,7 +245,11 @@ function createPointerMoveHandler(el: ResizableElement) {
 					}
 				}
 
-				positionGrips(el)
+				$el.justResized = true
+				setTimeout(() => {
+					positionGrips(el)
+					$el.justResized = false
+				}, 0)
 			}
 		}
 	}
@@ -281,15 +295,15 @@ function getTestGripSize(el: ResizableElement): number {
 	return dynamicMinWidth
 }
 
-function getElInfo(el: ResizableElement): Data {
+function getElInfo<T extends boolean = true>(el: ResizableElement, { throwIfMissing = true as T }: { throwIfMissing?: T } = {}): T extends true ? Data : Data | undefined {
 	const $el = elMap.get(el)
-	if (!$el) unreachable("El went missing.")
-	return $el
+	if (!$el && throwIfMissing) unreachable("El went missing.")
+	return $el as any
 }
 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 > td"}`)] as any
+	return [...el.querySelectorAll(`:scope ${$el.selector ? $el.selector : "tr > th, tr > td"}`)] as any
 }
 
 function setupColumns(el: ResizableElement, opts: ResizableOptions): void {
@@ -305,7 +319,8 @@ function setupColumns(el: ResizableElement, opts: ResizableOptions): void {
 		margin: opts.margin === "dynamic" ? gripWidth : opts.margin,
 		colCount: opts.colCount,
 		widths: opts.widths,
-		selector: opts.selector
+		selector: opts.selector,
+		onTeardown: opts.onTeardown
 	}
 	elMap.set(el, $el)
 	const els = getColEls(el)
@@ -323,8 +338,13 @@ function setupColumns(el: ResizableElement, opts: ResizableOptions): void {
 		el.appendChild(grip)
 		$el.grips.set(grip, i)
 	}
-	positionGrips(el)
-	el.classList.add("resizable-cols-setup")
+	$el.justResized = true
+	setTimeout(() => {
+		positionGrips(el)
+		$el.justResized = false
+		el.classList.add("resizable-cols-setup")
+		opts.onSetup?.(el)
+	}, 0)
 }
 
 function positionGrips(el: ResizableElement): void {
@@ -332,9 +352,9 @@ function positionGrips(el: ResizableElement): void {
 	const $el = getElInfo(el)
 	for (const grip of $el.grips.keys()) {
 		const col = $el.grips.get(grip)!
-		const colEls = getColEls(el)[col]
-		if (!colEls) unreachable()
-		const colBox = getBox(colEls)
+		const colEl = getColEls(el)[col]
+		if (!colEl) unreachable()
+		const colBox = getBox(colEl)
 		const gripBox = getBox(grip)
 
 		grip.style.left = `${xPos + colBox.width - (gripBox.width / 2)}px`
@@ -346,8 +366,60 @@ function setColWidths(el: ResizableElement, children?: Element[]): void {
 	const $el = getElInfo(el)
 	const header = children ?? getColEls(el).slice(0, $el.colCount)
 	const len = $el.colCount
+	const elWidth = getBox(el).width
+
+
+	let fluidTotalPx = 0
+	const fluid: Record<number, number> = {}
+
+	const doCalculateFixed = $el.fixedWidths === undefined
+	const doCalculateFluid = $el.fluidWidthsAsPercentOfFluidWidth === undefined
+
+	if (doCalculateFixed) {
+		$el.fixedWidths = { [-1]: 0 } // fixedTotalWidth
+	}
+	if (doCalculateFluid) {
+		$el.fluidWidthsAsPercentOfFluidWidth = {}
+	}
+	for (let i = 0; i < len; i++) {
+		const col = header[i]
+		castType<HTMLElement>(col)
+		if (col.classList.contains("no-resize")) {
+			if (doCalculateFixed) {
+				const w = getBox(col).width
+				$el.fixedWidths![i] = w
+				$el.fixedWidths![-1]! += $el.fixedWidths![i]!
+			}
+		} else {
+			if (doCalculateFluid) {
+				const w = getBox(col).width
+				fluid[i] = w
+				fluidTotalPx += w
+			}
+		}
+	}
+
+	const totalFluidCount = len - Object.keys($el.fixedWidths!).length
+
+	if (doCalculateFluid) {
+		for (let i = 0; i < len; i++) {
+			if ($el.fixedWidths![i] !== undefined) continue
+			$el.fluidWidthsAsPercentOfFluidWidth![i] = fluid[i]! / fluidTotalPx
+		}
+	}
+
+	const fixedTotalPx = $el.fixedWidths![-1]!
+	const minFlexWidth = (totalFluidCount * $el.margin)
+	const minTotalWidth = minFlexWidth + fixedTotalPx
+
+
+	let leftOverFluidWidth = elWidth - fixedTotalPx
+	if (leftOverFluidWidth < minFlexWidth) {
+		leftOverFluidWidth = minFlexWidth
+	}
+
 	let width = 0
-	const minTotalWidth = len * $el.margin
+
 	for (let i = 0; i < len; i++) {
 		const col = header[i]
 		castType<HTMLElement>(col)
@@ -355,9 +427,24 @@ function setColWidths(el: ResizableElement, children?: Element[]): void {
 		 * only works if parent table does NOT use `box-sizing:border-box` and either has no border or does `width: calc(100% - BORDERWIDTH*2)`
 		 */
 		const colBox = getBox(col)
-
-		setWidth(col, colBox.width, el)
-		width += getBox(col).width
+		if ($el.fixedWidths![i] !== undefined) {
+			setWidth(col, $el.fixedWidths![i]!, el)
+			width += $el.fixedWidths![i]!
+		} else {
+			if ($el.fitWidth) {
+				if (!$el.widths.value[i]) {
+					setWidth(col, colBox.width, el)
+					width += getBox(col).width
+					continue
+				}
+				const newInPx = $el.fluidWidthsAsPercentOfFluidWidth![i]! * leftOverFluidWidth
+				setWidth(col, newInPx, el)
+				width += getBox(col).width
+			} else {
+				setWidth(col, colBox.width, el)
+				width += getBox(col).width
+			}
+		}
 	}
 
 	if (width < minTotalWidth) {
@@ -368,15 +455,19 @@ function setColWidths(el: ResizableElement, children?: Element[]): void {
 }
 
 function teardownColumns(el: ResizableElement): void {
-	const $el = getElInfo(el)
-
-	el.removeEventListener("pointerdown", $el.pointerDownHandler)
-	document.removeEventListener("pointermove", $el.pointerMoveHandler)
-	document.removeEventListener("pointerup", $el.pointerUpHandler)
-	for (const key of Object.keys($el)) {
-		delete $el[key as keyof typeof $el]
+	const $el = getElInfo(el, { throwIfMissing: false })
+
+	if ($el) {
+		el.removeEventListener("pointerdown", $el.pointerDownHandler)
+		document.removeEventListener("pointermove", $el.pointerMoveHandler)
+		document.removeEventListener("pointerup", $el.pointerUpHandler)
+		for (const key of Object.keys($el)) {
+			delete $el[key as keyof typeof $el]
+		}
+		$el.onTeardown?.(el)
+		elMap.delete(el)
 	}
-	elMap.delete(el)
+
 	el.classList.remove("resizable-cols-setup")
 	removeGrips(el)
 }

package/src/runtime/types/index.ts

@@ -3,9 +3,7 @@ import type { Ref } from "vue"
 
 export type ResizableOptions = {
 	/**
-	 * Defaults to true.
-	 *
-	 * ### true
+	 * ### true (default)
 	 * The directive will shrink/expand the columns when the table is resized and will use percentage widths on the table cells. This disables resizing of the last column (from the right handle).
 	 *
 	 * Additionally because of the way `table-layout:fixed` works, a min-width cannot be set on the elements via css, so instead, if the table shrinks past `opts.margin * col #`, `min-width` is set on the table until it's resized larger.
@@ -17,6 +15,8 @@ export type ResizableOptions = {
 	 * The table can be resized past it's normal width and uses pixel widths on the table cells. You might want to set `overscroll-x: scroll` on a parent wrapping element.
 	 *
 	 * This will set the table width to `min-content`, else it doesn't work. Note that it does this after the initial reading/setting of sizes so you can, for example, layout the table with `width: 100%`.
+	 *
+	 * @default true
 	 */
 	fitWidth: boolean
 	/**
@@ -43,6 +43,10 @@ export type ResizableOptions = {
 	widths: Ref<string[]>
 	/** The selector to use for the cells. "tr > td" 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
+	/** Is called on teardown (after the `resizable-cols-setup` class is removed). */
+	onTeardown?: (el: Element) => void
 }
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export type TableColConfig<T = {}> = Record<keyof T, { name?: string, resizable?: boolean }>

package/src/runtime/utils/twMerge.ts

@@ -3,7 +3,8 @@ import { extendTailwindMerge } from "tailwind-merge"
 const _twMergeExtend = {
 	extend: {
 		classGroups: {
-			"focus-outline": [{ "focus-outline": ["", "no-offset", "none"] }]
+			"focus-outline": [{ "focus-outline": ["", "no-offset", "none"] }],
+			"no-truncate": ["truncate", "no-truncate"]
 		}
 	}
 } satisfies Parameters<typeof extendTailwindMerge>[0]