@witchcraft/ui 0.4.0 → 0.4.2

package/src/runtime/components/index.ts

@@ -1,22 +1,22 @@
 /* Manually Generated Index */
 
-export { default as aria } from "./Aria/Aria.vue"
-export { default as LibButton } from "./LibButton/LibButton.vue"
-export { default as LibCheckbox } from "./LibCheckbox/LibCheckbox.vue"
-export { default as LibColorInput } from "./LibColorInput/LibColorInput.vue"
-export { default as LibColorPicker } from "./LibColorPicker/LibColorPicker.vue"
-export { default as LibDarkModeSwitcher } from "./LibDarkModeSwitcher/LibDarkModeSwitcher.vue"
-export { default as LibDatePicker } from "./LibDatePicker/LibDatePicker.vue"
-export { default as LibDebug } from "./LibDebug/LibDebug.vue"
-export { default as LibFileInput } from "./LibFileInput/LibFileInput.vue"
-export { default as LibInputDeprecated } from "./LibInputDeprecated/LibInputDeprecated.vue"
-export { default as LibLabel } from "./LibLabel/LibLabel.vue"
-export { default as LibNotifications } from "./LibNotifications/LibNotifications.vue"
-export { default as LibPagination } from "./LibPagination/LibPagination.vue"
-export { default as LibPopup } from "./LibPopup/LibPopup.vue"
-export { default as LibProgressBar } from "./LibProgressBar/LibProgressBar.vue"
-export { default as LibRecorder } from "./LibRecorder/LibRecorder.vue"
-export { default as LibRoot } from "./LibRoot/LibRoot.vue"
-export { default as LibSimpleInput } from "./LibSimpleInput/LibSimpleInput.vue"
-export { default as LibTable } from "./LibTable/LibTable.vue"
-export { default as LibTimeZonePicker } from "./LibDatePicker/LibTimeZonePicker.vue"
+export { default as WButton } from "./WButton/WButton.vue"
+export { default as WCheckbox } from "./WCheckbox/WCheckbox.vue"
+export { default as WColorInput } from "./WColorInput/WColorInput.vue"
+export { default as WColorPicker } from "./WColorPicker/WColorPicker.vue"
+export { default as WCombobox } from "./WCombobox/WCombobox.vue"
+export { default as WDarkModeSwitcher } from "./WDarkModeSwitcher/WDarkModeSwitcher.vue"
+export { default as WDatePicker } from "./WDatePicker/WDatePicker.vue"
+export { default as WDebug } from "./WDebug/WDebug.vue"
+export { default as WFileInput } from "./WFileInput/WFileInput.vue"
+export { default as WNotifications } from "./WNotifications/WNotifications.vue"
+export { default as WPagination } from "./WPagination/WPagination.vue"
+export { default as WPopup } from "./WPopup/WPopup.vue"
+export { default as WPopover } from "./WPopover/WPopover.vue"
+export { default as WProgressBar } from "./WProgressBar/WProgressBar.vue"
+export { default as WRecorder } from "./WRecorder/WRecorder.vue"
+export { default as WRoot } from "./WRoot/WRoot.vue"
+export { default as WSimpleInput } from "./WSimpleInput/WSimpleInput.vue"
+export { default as WTable } from "./WTable/WTable.vue"
+export { default as WTimeZonePicker } from "./WDatePicker/WTimeZonePicker.vue"
+export { default as WTooltip } from "./WTooltip/WTooltip.vue"

package/src/runtime/composables/index.ts

@@ -1,19 +1,19 @@
 /* Autogenerated Index */
 
 export { useAccesibilityOutline } from "./useAccesibilityOutline.js"
-export { useAriaLabel } from "./useAriaLabel.js"
-export { useDarkMode } from "./useDarkMode.js"
-export { useDivideAttrs } from "./useDivideAttrs.js"
+export { useDelayedLoadingIndicator } from "./useDelayedLoadingIndicator.js"
 export { useDragWithThreshold } from "./useDragWithThreshold.js"
+export { useFallbackId } from "./useFallbackId.js"
 export { useGlobalResizeObserver } from "./useGlobalResizeObserver.js"
 export { useInjectedDarkMode } from "./useInjectedDarkMode.js"
 export { useInjectedI18n } from "./useInjectedI18n.js"
 export { useInjectedLocale } from "./useInjectedLocale.js"
 export { useNotificationHandler } from "./useNotificationHandler.js"
+export { usePopupConstrainToStyle } from "./usePopupConstrainToStyle.js"
 export { usePreHydrationValue } from "./usePreHydrationValue.js"
 export { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js"
 export { useSetupDarkMode } from "./useSetupDarkMode.js"
 export { useSetupLocale } from "./useSetupLocale.js"
 export { useShowDevOnlyKey } from "./useShowDevOnlyKey.js"
 export { useSlotVars } from "./useSlotVars.js"
-export { useSuggestions } from "./useSuggestions.js"
+export { useTimeConditionally } from "./useTimeConditionally.js"

package/src/runtime/composables/useDelayedLoadingIndicator.ts

@@ -0,0 +1,30 @@
+import type { Ref } from "vue"
+import { ref, watch } from "vue"
+/**
+ * For async operations sometimes it actually loads so fast the loading indicator is not visible but we still want it to be briefly visible. This delays the setting of the returned ref to false by the given timeout so it at least flashes onscreen.
+ *
+ * Setting to true is not delayed.
+ *
+ * If the indicator is set to true while the timeout is still running, it's canceled.
+ */
+
+export function useDelayedLoadingIndicator(
+	loading: Ref<boolean>,
+	timeout: number = 200
+) {
+	const showLoadingIndicator = ref(false)
+	let loadingTimeout: number | NodeJS.Timeout | undefined
+	watch(loading, newVal => {
+		clearTimeout(loadingTimeout)
+		if (newVal === true) {
+			showLoadingIndicator.value = true
+		} else {
+			loadingTimeout = setTimeout(() => {
+				if (loading.value === false) {
+					showLoadingIndicator.value = false
+				}
+			}, timeout)
+		}
+	})
+	return showLoadingIndicator
+}

package/src/runtime/composables/useDisplayForReka.ts

@@ -0,0 +1,37 @@
+import type { AcceptableValue, ComboboxRootProps } from "reka-ui"
+
+export type SuggestionsDisplayProps<T extends NonNullable<AcceptableValue>> = {
+	displayKey?: string
+	/**
+	 * Override's reka-ui's displayValue.
+	 *
+	 * Prefer displayKey or displayEntry if possible as it's easier to type and requires less code.
+	 *
+	 * It's passed a special options object with a `isForEmit` boolean that tells you whether the value will be used for emits or just visually/search. This is useful to v-model an id when suggestions are objects.
+	 */
+	displayValue?: (value: T | T[], options?: { isForEmit?: boolean }) => string
+	/**
+	 * When displayKey is not enough, prefer this over displayValue as it takes care of extracting the entry (from the array/object/value).
+	 *
+	 * The component uses this to filter out the suggestions. In some rare cases you might want to display a different label than the one filtered on (e.g. for example, to indicate some suggestion is active), in these cases, the function will be called with the visualOnly option set to true. This applies only to the visual suggestion in the suggestion list.
+	 */
+	displayEntry?: (value: T, options: { isForEmit?: boolean }) => string
+}
+
+export function useDisplayForReka<T extends NonNullable<ComboboxRootProps["modelValue"]>>(props: SuggestionsDisplayProps<T>) {
+	const display = props.displayValue ?? function (value: T, options: { isForEmit?: boolean } = {}): string {
+		if (Array.isArray(value)) {
+			return value.map(v => {
+				const val = v[props.displayKey as keyof typeof v]
+				return props.displayEntry?.(val, options) ?? val
+			}).filter(v => v !== "").join(", ")
+		} else if (typeof value === "object") {
+			return props.displayEntry?.(value as any, options) ?? value[props.displayKey as keyof typeof value] as any
+		} else {
+			// special case when reka resets
+			if (value === "" && !options.isForEmit) return ""
+			return props.displayEntry?.(value as any, options) ?? value as any
+		}
+	}
+	return display
+}

package/src/runtime/composables/useFallbackId.ts

@@ -0,0 +1,6 @@
+import { useId } from "vue"
+
+export function useFallbackId(props: { id?: string }) {
+	const fallbackId = props.id ?? useId()
+	return fallbackId
+}

package/src/runtime/composables/useInjectedDarkMode.ts

@@ -1,8 +1,7 @@
 import { inject } from "vue"
 
-import type { DarkModeCommands, DarkModeState } from "./useDarkMode.js"
-
 import { darkModeCommandsInjectionKey, darkModeStateInjectionKey } from "../injectionKeys.js"
+import type { DarkModeCommands, DarkModeState } from "../types/index.js"
 
 export function useInjectedDarkMode(): DarkModeState & DarkModeCommands {
 	const darkModeState = inject(darkModeStateInjectionKey)

package/src/runtime/composables/usePopupConstrainToStyle.ts

@@ -0,0 +1,29 @@
+import type { ComputedRef, StyleValue } from "vue"
+import { computed } from "vue"
+
+import type { PopupConstrainToProps } from "../types/index.js"
+/**
+ * Mostly internal, create the computed style with maxWidth/Height based on the constrain*To props.
+ *
+ * @internal
+ */
+export function usePopupConstrainToStyle(rekaName: string, props: PopupConstrainToProps, attrsStyle?: StyleValue[]): ComputedRef<StyleValue[]> {
+	const contentStyle = computed(() => ([{
+		maxWidth: props.constrainWidthTo === "trigger"
+			? `var(--reka-${rekaName}-trigger-width)`
+			: props.constrainWidthTo === "available"
+				? `var(--reka-${rekaName}-content-available-width)`
+				: typeof props.constrainWidthTo === "number"
+					? `${props.constrainWidthTo}px`
+					: props.constrainWidthTo ?? undefined,
+		maxHeight: props.constrainHeightTo === "trigger"
+			? `var(--reka-${rekaName}-trigger-height)`
+			: props.constrainHeightTo === "available"
+				? `var(--reka-${rekaName}-content-available-height)`
+				: typeof props.constrainHeightTo === "number"
+					? `${props.constrainHeightTo}px`
+					: props.constrainHeightTo ?? undefined
+	}, ...(attrsStyle ?? [])] satisfies StyleValue[]))
+	return contentStyle
+}
+

package/src/runtime/composables/useSetupDarkMode.ts

@@ -1,4 +1,15 @@
-import { useDarkMode } from "./useDarkMode.js"
+import type { InjectionKey, Ref } from "vue"
+import { computed, nextTick, onMounted, provide, ref, watch } from "vue"
+
+import { darkModeCommandsInjectionKey, darkModeStateInjectionKey } from "../injectionKeys.js"
+import type { DarkModeCommands, DarkModeOptions, DarkModeState } from "../types/index.js"
+import { defaultDarkModeOrder } from "../types/index.js"
+
+
+const isDarkModeInjectionKey = Symbol("isDarkMode") as InjectionKey<Ref<boolean>>
+const manualDarkModeInjectionKey = Symbol("manualDarkMode") as InjectionKey<Ref<boolean | undefined>>
+const defaultLocalStorageKey = "prefersColorSchemeDark"
+
 /**
  * A composable for setting up dark mode that automatically takes care of saving the user's preference.
  *
@@ -7,8 +18,115 @@ import { useDarkMode } from "./useDarkMode.js"
  * Use it's twin, `useInjectedDarkMode` for accessing the injected state and commands in components
  *
  * Note that this should only be called once at the root of the app.
- *
  */
-export function useSetupDarkMode(...args: Parameters<typeof useDarkMode>): ReturnType<typeof useDarkMode> {
-	return useDarkMode(...args)
+export const useSetupDarkMode = ({
+	useLocalStorage = true,
+	darkModeOrder = defaultDarkModeOrder,
+
+	isClientSide = true,
+	useViewTransition = true
+}: DarkModeOptions = {}): DarkModeState & DarkModeCommands => {
+	const systemDarkMode = ref(false)
+	const manualDarkMode = ref<boolean | undefined>(undefined)
+
+	if (useLocalStorage && isClientSide) {
+		watch(manualDarkMode, () => {
+			localStorage.setItem(defaultLocalStorageKey, manualDarkMode.value ? "true" : "false")
+		})
+	}
+
+	const darkMode = computed(() => manualDarkMode.value ?? systemDarkMode.value)
+	const darkModeState = computed(() =>
+		manualDarkMode.value === undefined
+			? "system"
+			: manualDarkMode.value
+				? "dark"
+				: "light"
+	)
+	// todo move to useinjected
+	function setDarkMode(value: "dark" | "light" | "system"): void {
+		manualDarkMode.value
+			= value === "dark"
+				? true
+				: value === "light"
+					? false
+					: undefined
+	}
+
+	function getNextValue(): "dark" | "light" | "system" {
+		const index = darkModeOrder.indexOf(darkModeState.value)
+
+		return index === 2
+			? darkModeOrder[0]!
+			: darkModeOrder[index + 1]!
+	}
+
+	function _cycleDarkMode(): void {
+		setDarkMode(getNextValue())
+	}
+
+	function cycleDarkMode(): void {
+		if (!useViewTransition) {
+			_cycleDarkMode()
+			return
+		}
+		const nextValue = getNextValue()
+		const index = darkModeOrder.indexOf(darkModeState.value)
+		const systemDarkModeName = systemDarkMode.value ? "dark" : "light"
+
+		if (nextValue === "system" && systemDarkModeName === darkModeOrder[index]) {
+			// don't do view transitions if we're not really transitioning
+			_cycleDarkMode()
+			return
+		}
+		if (!document.startViewTransition) _cycleDarkMode()
+		document.startViewTransition(async () => {
+			_cycleDarkMode()
+			await nextTick()
+		})
+	}
+
+	onMounted(() => {
+		window.matchMedia("(prefers-color-scheme: dark)")
+			.addEventListener("change", ({ matches }) => {
+				if (matches) {
+					systemDarkMode.value = true
+				} else {
+					systemDarkMode.value = false
+				}
+			})
+		if (useLocalStorage !== false) {
+			const key = typeof useLocalStorage === "string" ? useLocalStorage : defaultLocalStorageKey
+			const value = localStorage.getItem(key)
+
+			if (value === "true") {
+				manualDarkMode.value = true
+			} else if (value === "false") {
+				manualDarkMode.value = false
+			}
+		}
+	})
+	provide(isDarkModeInjectionKey, darkMode)
+	provide(manualDarkModeInjectionKey, manualDarkMode)
+
+	provide(darkModeStateInjectionKey, {
+		darkMode,
+		darkModeState,
+		manualDarkMode,
+		systemDarkMode
+	})
+	provide(darkModeCommandsInjectionKey, {
+		setDarkMode,
+		cycleDarkMode
+	})
+
+	return {
+		darkMode,
+		darkModeState,
+		setDarkMode,
+		cycleDarkMode,
+		manualDarkMode,
+		systemDarkMode
+	}
 }
+

package/src/runtime/composables/useTimeConditionally.ts

@@ -0,0 +1,51 @@
+import { type Ref, ref, watch } from "vue"
+
+/**
+ * Returns a ref with the current time if the given value ref is true or it's an array with 1 or more items.. It will update the time every 50ms (configurable) if so (within a requestAnimationFrame).
+ *
+ * When the value is anything else it will clear the interval and set the time to undefined.
+ *
+ * Useful for use with a progress bar.
+ *
+ * Updating the time all the time is expensive and not idea. This way we only set the interval if we really need it.
+ */
+export function useTimeConditionally(
+	val: Ref<any[] | boolean | any>,
+	{
+		refreshInterval = 50
+	}: {
+		refreshInterval?: number
+	} = {}
+): {
+	time: Ref<undefined | number>
+	refresh: () => void
+} {
+	const time = ref<undefined | number>(undefined)
+
+	let interval: ReturnType<typeof setInterval> | undefined
+	function refresh(
+		/** The value to use for the check. Do not pass unless you know what you're doing. */
+		v = val.value
+	) {
+		if (v === true || (Array.isArray(v) && v.length > 0)) {
+			if (interval !== undefined) return
+			time.value = Date.now()
+			interval = setInterval(() => {
+				requestAnimationFrame(() => {
+					time.value = Date.now()
+				})
+			}, refreshInterval)
+		} else {
+			if (interval === undefined) return
+			clearInterval(interval)
+			interval = undefined
+		}
+	}
+	watch(val, val => {
+		refresh(val)
+	})
+
+	refresh()
+
+	return { time, refresh }
+}

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,9 @@ type Data = {
 	offset?: number
 	widths: Ref<string[]>
 	selector: string
+	onTeardown?: (el: Element) => void
+	fixedWidths?: Record<number, number>
+	fluidWidthsAsPercentOfFluidWidth?: Record<number, number>
 }
 const elMap = new WeakMap<HTMLElement, Data>()
 type RawOpts = { value: Partial<ResizableOptions> }
@@ -34,11 +36,13 @@ 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 => {
 	setColWidths(el as ResizableElement)
 	positionGrips(el as ResizableElement)
 }
-const throttledCallback = throttle(callback)
+
 /**
  * Allow a table like element to be resized along it's columns.
  *
@@ -103,31 +107,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, { 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)
-		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 {}
@@ -140,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`
 	}
@@ -178,13 +183,14 @@ 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
 			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 +208,8 @@ function createPointerMoveHandler(el: ResizableElement) {
 		if ($el.isDragging) {
 			e.preventDefault()
 
+			$el.fluidWidthsAsPercentOfFluidWidth = undefined
+
 			const { col, colNext } = getCols(el)
 
 			if (col !== null) {
@@ -244,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
@@ -281,15 +291,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 ?? "tr > th"}`)] as any
 }
 
 function setupColumns(el: ResizableElement, opts: ResizableOptions): void {
@@ -305,12 +315,14 @@ 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)
-
-	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"
@@ -325,6 +337,7 @@ function setupColumns(el: ResizableElement, opts: ResizableOptions): void {
 	}
 	positionGrips(el)
 	el.classList.add("resizable-cols-setup")
+	opts.onSetup?.(el)
 }
 
 function positionGrips(el: ResizableElement): void {
@@ -332,9 +345,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 +359,59 @@ 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 +419,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) {
+			$el.widths.value[i] = `${$el.fixedWidths![i]!}px`
+			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 +447,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)
 }